Practica de Listas - Enlaces y Estilos
universidades.html
Resultado
martes, 11 de noviembre de 2014
Listas en HTML
Listas en HTML - <UL> <OL> <LI>
Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:
- Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol>y cada elemento de la lista estará encabezado por la tag <li> que puede o no llevar la tag de cierre</li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.
- Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.
- Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas.
- Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>.
- Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>.
- Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la definición la tag <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el atributo compact: <dl compact>.
- Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.
Ejemplo
martes, 17 de junio de 2014
Fichero listado de alumnos
listado_alumnos.php
<html>
<head>
<meta charset="UTF-8">
<title>Listado de Alumnos</title>
<link href="matricula.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
require ("conexion.php");
$result = mysqli_query($enlace, "SELECT * FROM alumnos");
?>
<h1 id='titulo'>LISTADO ALUMNOS</h1>
<div id='menu'>
<button onclick="window.location='insertar.html'">Nuevo Alumno</button>
<button onclick="window.location='buscar_alumno.php'">Actualizar</button>
<button onclick="window.location='buscar_eliminar_alumno.php'">Eliminar</button>
</div>
<table id='tabla' >
<tr id="fila">
<td>Id Alumno</td>
<td>Apellidos</td>
<td>Nombres</td>
<td>Telefono</td>
<td>Domicilio</td>
</tr>
<?php
//Con la condicional while obtenemos los datos, mysqli_fetch_array() nos permite hacer esto, solo colocamos la variable que contiene esta con el nombre de la columna y nos arroja el dato, y como while es una condicional repetitiva y a la vez estamos construyendo la tabla, nos resultara una tabla con los datos ordenados según lo consultemos.
while ($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>".$row[idalum]."</td>";
echo "<td>".$row[apealum]."</td>";
echo "<td>".$row[nomalum]."</td>";
echo "<td>".$row[telealum]."</td>";
echo "<td>".$row[domialum]."</td>";
echo "</tr>";
}
mysqli_close($enlace);
?>
</table>
</body>
</html>
______________________________________________________________________
NOTA: Agregar las siguientes reglas al fichero matricula.css
#titulo{
background-color: #f26300 !important;
color:#ffffff;
font-size: 26px;
text-align: center;
}
#menu{
background:#dcdcdc;
margin:0 auto;
padding:14px;
}
#menu button{
clear:both;
margin:0 auto;
width:100px;
height:31px;
background:#f26300 !important;
text-align:center;
line-height:20px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#tabla{
border:solid 2px #708090;
background:#dcdcdc;
margin:0 auto;
width:1000px;
padding:14px;
}
#fila{
clear:both;
margin:0 auto;
height:31px;
background:#f26300 !important;
text-align:center;
line-height:20px;
color:#FFFFFF;
font-weight:bold;
}
<html>
<head>
<meta charset="UTF-8">
<title>Listado de Alumnos</title>
<link href="matricula.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
require ("conexion.php");
$result = mysqli_query($enlace, "SELECT * FROM alumnos");
?>
<h1 id='titulo'>LISTADO ALUMNOS</h1>
<div id='menu'>
<button onclick="window.location='insertar.html'">Nuevo Alumno</button>
<button onclick="window.location='buscar_alumno.php'">Actualizar</button>
<button onclick="window.location='buscar_eliminar_alumno.php'">Eliminar</button>
</div>
<table id='tabla' >
<tr id="fila">
<td>Id Alumno</td>
<td>Apellidos</td>
<td>Nombres</td>
<td>Telefono</td>
<td>Domicilio</td>
</tr>
<?php
//Con la condicional while obtenemos los datos, mysqli_fetch_array() nos permite hacer esto, solo colocamos la variable que contiene esta con el nombre de la columna y nos arroja el dato, y como while es una condicional repetitiva y a la vez estamos construyendo la tabla, nos resultara una tabla con los datos ordenados según lo consultemos.
while ($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>".$row[idalum]."</td>";
echo "<td>".$row[apealum]."</td>";
echo "<td>".$row[nomalum]."</td>";
echo "<td>".$row[telealum]."</td>";
echo "<td>".$row[domialum]."</td>";
echo "</tr>";
}
mysqli_close($enlace);
?>
</table>
</body>
</html>
______________________________________________________________________
NOTA: Agregar las siguientes reglas al fichero matricula.css
#titulo{
background-color: #f26300 !important;
color:#ffffff;
font-size: 26px;
text-align: center;
}
#menu{
background:#dcdcdc;
margin:0 auto;
padding:14px;
}
#menu button{
clear:both;
margin:0 auto;
width:100px;
height:31px;
background:#f26300 !important;
text-align:center;
line-height:20px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#tabla{
border:solid 2px #708090;
background:#dcdcdc;
margin:0 auto;
width:1000px;
padding:14px;
}
#fila{
clear:both;
margin:0 auto;
height:31px;
background:#f26300 !important;
text-align:center;
line-height:20px;
color:#FFFFFF;
font-weight:bold;
}
Fichero guardar datos actualizados del alumno
guardar_actualizacion_alumno.php
<html><head>
<meta charset="UTF-8">
<title>Actualizar datos de alumno</title>
</head>
<body>
<?php
require ("conexion.php");
//Recibimos los parametros enviados mediante POST por el Formulario
$idalum=$_POST["idalum"];
$apealum = $_POST["apealum"];
$nomalum = $_POST["nomalum"];
$telealum = $_POST["telealum"];
$domialum = $_POST["domialum"];
$actualizar = mysqli_query($enlace,"UPDATE alumnos SET apealum='$apealum', nomalum='$nomalum', telealum='$telealum', domialum='$domialum' WHERE idalum=$idalum");
if (!$actualizar){
echo "<script type='text/javascript'>confirm('Error al actualizar');</script>";
}else{
echo "<script type='text/javascript'>confirm('Actualizacion exitosa');</script>";
}
//Cerramos la conexión
mysqli_close($enlace);
echo "<script type='text/javascript'>window.location='listado_alumnos.php';</script>";
?>
</body>
</html>
martes, 27 de mayo de 2014
Insertar Nuevo Registro con PHP y MySQL
Insertar Nuevo Registro con PHP y MySQL
matricula.css
font-family:verdana, arial, helvetica, sans-serif;
font-size:12;
color:black;
background-color:#cccccc;
text-align:center;
}
#formulario{
border:solid 2px #708090;
background:#dcdcdc;
margin:0 auto;
width:400px;
padding:14px;
}
#formulario h1 {
font-size:20px;
font-weight:bold;
margin-bottom:30px;
margin-top: 5px;
}
#formulario label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#formulario input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #708090;
width:200px;
margin:2px 0 20px 10px;
}
#formulario button{
clear:both;
margin:0 auto;
width:100px;
height:31px;
background:yellowgreen;
text-align:center;
line-height:20px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#titulo{
background-color: #ff0000;
color:#ffffff;
font-size: 26px;
text-align: center;
}
lunes, 26 de mayo de 2014
lunes, 19 de mayo de 2014
Suscribirse a:
Entradas (Atom)