Taller de Diseño Web-Ejercicios Propuestos y Resueltos

TALLER DE PRACTICO DE DISEO WEB
BOTONES Y MENUS EN HTML5 y CSS3

1.- Diseo de un botn realista
Dentro de la carpeta www crear la carpeta trabajos\botones :
boton.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div class="page">
<h1>Disear un botn realista</h1>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.
Lorem Ipsum ha sido el texto de relleno estndar de las industrias desde el ao 1500,
cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido us una
galera de textos y los mezcl de tal manera que logr hacer un libro de textos
especimen.<p>
<p>No slo sobrevivi 500 aos, sino que tambien ingres como texto de relleno en
documentos electrnicos, quedando esencialmente igual al original. Fue popularizado en los
60s con la creacin de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y
ms recientemente con software de autoedicin, como por ejemplo Aldus PageMaker, el
cual incluye versiones de Lorem Ipsum.</p>
<a class="boton" href="#">Suscribirse</a>
</div>
</body>
</html>
estilo.css
*{margin:0;
padding:0; }
.page{
width: 80%;
margin: 2em auto;
padding:1em;
border:solid;
border-radius: 2em;
}
.boton{
margin:1em 0.3em;
display:inline-block;
background: green;
line-height:3em;
height:3em;
padding: 0 1.5em;
color: #fff;
text-decoration: none;
text-transform: uppercase;
border-radius: 2em;
a:hover{
opacity: 0.8;
//background-color:green;
color:black;
}
a:active{
transform: scale(.95);
}
2.- Diseo de un men realista:.
Dentro de la carpeta www crear la carpeta trabajos\menus :
menus.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Men realistas</title>
<link rel="stylesheet" href="stilomenu.css">
</head>
<body>
<h1>Men realista</h1>
<nav id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contactos</a></li>
</ul>
</nav>
</body>
</html>
menustilo.css
*{
margin:0;
padding:0;
}
body{
background:#000;
text-align: center;
font:bold 16px "Trebuchet MS";
}
h1{
color:#fff;
}
nav#menu ul li{
background:#07abbe;
border-radius:0.5em;
display:inline-block;
padding:0.2em 2em;
}
nav#menu ul li:hover{
background:#FFF;
}
nav#menu ul li a{
color:#272727;
text-decoration:none;
}
FORMULARIOS EN HTML5 Y CSS3
3.- Crear un formulario HTML5 desde cero
Sabemos que los formularios son elementos que han tenido una evolucin muy importante a
lo largo del tiempo en el desarrollo de sitios Web. En este sentido es interesante recordar que
su misin primordial es permitir que el usuario pueda ingresar informacin para que sea
procesada por un servidor.
El formulario de contacto es uno de los de uso ms frecuente en el desarrollo web; por esta
razn, lo tomaremos como sujeto de estudio para este ejemplo, aunque lo que veamos nos
servir de base para cualquier otra necesidad de desarrollo. El formulario de contacto requiera
al usuario los siguientes datos en forma obligatoria: nombre y apellido, direccin de e-mail y
tambin un comentario. Como dato adicional no obligatorio, se le solicitar la direccin de su
sitio web. Esta necesidad se puede resolver con un formulario muy sencillo como el que
veremos en el siguiente listado:
Dentro de la carpeta www crear la carpeta trabajos\formularios :
form01.html
<!doctype html>
<html>
<head>
<title>Formulario simple</title>
<link rel="stylesheet" href="formstilo.css">
</head>
<body>
<form>
Nombre <input type="text">
Apellido <input type="text">
E-mail <input type="email">
Web <input type="url">
Comentario <textarea></textarea>
<input type="submit"> <input type="reset">
</form>
</body>
</html>
Hemos introducido los campos de formulario mediante la directiva <input>. A travs de los
valores del atributo @type se han establecido diversos campos temticos (text,email, url)
cubriendo cualquier necesidad de un formulario de contacto. Se ha utilizado la
directiva <textarea> para introducir un rea de comentarios.
Como se puede observar los campos del formulario estn muy desorganizados, por eso hace
falta una introduccin en un nuevo apartado llamado "tabulaciones" que se refiere a una
forma de organizar los campos del formulario.
Tabulaciones - organizar los campos del formulario
Dentro del rea delimitada por un formulario, la comprendida entre <form> y </form>, es
posible emplear todas las directivas y elementos HTML. De hecho suele resultar muy
recomendable hacer uso de ellos para facilitar el formato de los campos de entrada y mejorar
la visualizacin de nuestras pginas.
En primer lugar voy a separar cada entrada en una lnea. Para esta tarea normalmente resulta
indicado utilizar las directivas <br/> o <p> si se quiere destacar una mayor distancia entre
entradas.
form02.html
<!doctype html>
<html>
<head>
<title>Formulario con prrafos</title>
</head>
<body>
<form>
<p>Nombre <input type="text"></p>
<p>Apellido <input type="text"></p>
<p>E-mail <input type="email"></p>
<p>Web <input type="url"></p>
<p>Comentario <textarea></textarea></p>
<p><input type="submit"> <input type="reset"></p>
</form>
</body>
</html>
Posiblemente no sea esta la mejor forma posible de visualizar este formulario. Podemos
intentar llevar a cabo una mejora con la directiva <table> aprovechando el uso de tablas y
creando celdas donde los campos del formulario se distribuyen ordenadamente.
form03.html
<!doctype html>
<html>
<head>
<title>Tabla con tablas</title>
</head>
<body>
<form>
<table width="400">
<tr><td>Nombre</td><td><input type="text"></td></tr>
<tr><td>Apellido</td><td><input type="text"></td></tr>
<tr><td>E-mail</td><td><input type="email"></td></tr>
<tr><td>Web</td><td><input type="url"></td></tr>
<tr><td>Comentario</td><td><textarea></textarea></td></tr>
<tr><td></td><td><input type="submit"> <input type="reset"></td></tr>
</table>
</form>
</body>
</html>
Validacin de datos
Hablamos de validaciones de datos cuando nos referimos que un determinado campo de

formulario se debe rellenar obligatoriamente. En el caso que el navegador no valida el campo
impedir el envi del formulario avisando previamente mediante alertas en ventana o
directamente en el campo del formulario.
El formulario dispone de varias herramientas para para validar los datos introducidos por los
usuarios. Algunas herramientas son atributos HTML, unos booleanos otros que hacen la
validacin mediante expresiones regulares. Otras herramientas son aplicaciones que utilizan
mtodos JavaScript muy potentes, pero para utilizarlos hace falta de conocimientos de
programacin. Veamos a continuacin algunas formas de crear validaciones para nuestros
campos del formulario.
EL ATRIBUTO @REQUIRED
Hasta la versin 5, HTML no dispona de una herramienta propia para validar campos de
formulario. El atributo @required viene a compensar esta falta. No es una herramienta muy
potente porque solamente se limita a identificar la presencia de algn texto en las entradas de
datos. Si no se detecta texto, el navegador notifica dentro del campo del formulario. El
atributo @required se puede utilizar dentro de la directiva <input>, solamente si el atributo
@type tiene como valores palabras claves (text, search, url, tel, email, password) designadas
a crear entradas de texto especficos.
Hay que tener en cuenta que, si la entrada datos est creada con el valor "email", designada a
crear un campo de correo electrnico, el navegador va a hacer una nueva validacin, dado a
que, este campo de forma nativa determina al navegador que busque e identifique la
presencia del signo "@" (arroba), imprescindible en el formato de un correo electrnico. Si no
lo detecta, el navegador notificar dentro del campo del formulario.
form04.html
<!doctype html>
<html>
<head>
<title>Formulario con Validacin de datos</title>
</head>
<body>
<form>
<table width="400">
<tr><td>Nombre</td><td><input type="text" required></td></tr>
<tr><td>Apellido</td><td><input type="text" required></td></tr>
<tr><td>E-mail</td><td><input type="email" required></td></tr>
<tr><td>Web</td><td><input type="url"></td></tr>
<tr><td>Comentario</td><td><textarea></textarea></td></tr>
<tr><td></td><td><input type="submit"> <input type="reset"></td></tr>
</table>
</form>
</body>
</html>
4.- Como hacer un elegante formulario en HTML5 y CSS3
Dentro de la carpeta www crear la carpeta trabajos\formularios :
formdark.html
<!doctype html>
<html>
<head>
<title>Formulario estilizado</title>
</head>
<body>
<form>
<h1>Dark Form</h1>
<input type="text" maxlength="20" placeholder="Ingrese su usuario" required >
<input type="password" maxlength="20" placeholder="Ingrese su password" required >
<button type="button">Registrarse</button>
<button type="submit">Iniciar Sesin</button>
</form>
</body>
</html>
formstilo.css
*{
margin:0px;
padding:0px;}
body{
background:#2b2b2a;
background-position:center;}
form{
background:#333333;
width:360px;
border:1px solid #4e4d4d;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-shadow:inset 0 0 10px #000;
margin:100px auto;}
form h1{
text-align:center;
color:#fff;
font-weight:normal;
font-size:40pt;
margin:30px 0px;
font-family:'Pinyon Script', cursive;
}
form input{
width:280px;
height:35px;
padding:0px 10px;
margin:10px 30px;
color:#6d6d6d;
text-align:center;
}
form button{
width:135px;
margin:20px 0px 30px 30px;
height:50px; background:#3c3c3c;
}
4.- Estilos CSS en los formularios
HTML y CSS son dos tecnologas que no puedan una sin otra. As que... si aprendes HTML es
imprescindible aprender CSS. Aadir solamente contenido sin una grfica no es muy atractivo
para una pgina Web. CSS nos permite actuar sobre cualquier elemento y directiva HTML y en
nuestro caso sobre los controles del formulario, al menos en algunos aspectos.
En el siguiente formulario utilizamos CSS para ayudar al usuario con guas que le indican que
campos son requeridos o que campos estn correctamente rellenados.
Los campos requeridos se muestran con una imagen de asteriscos, los campos con error y
mientras estn enfocados se muestran con una imagen de signo de admiracin y los campos
correctamente informados se muestran con una imagen de aceptacin. Adems, utilizaremos
el color del borde de cada cuadro de texto para indicar el estado: verde (estado correcto),
amarrillo (estado con el foco para la entrada de datos), rojo (estado en error). Lo interesante
de este cdigo es que no se utiliza JavaScript, todo est resuelto entre Html5 y CSS3.
Dentro de la carpeta www crear la carpeta trabajos\formulario :
formulario.html
<!doctype html>
<html>
<head>
<title>Tabla con estilos</title>
</head>
<body>
<form id="css">
<table width="400">
<tr>
<td>Nombre</td>
<td><input class="a" type="text" placeholder="nombre" required></td>
</tr>
<tr>
<td>Apellido</td>
<td><input class="a" type="text" placeholder="apellido" required></td>
</tr>
<tr>
<td>E-mail</td>
<td><input class="a" type="email" placeholder="ej: xxx@xxx.com" required></td>
</tr>
<tr>
<td>Web</td>
<td><input class="a" type="url" placeholder="ej: http://www.misitio.com"></td>
</tr>
<tr>
<td>Comentario</td>
<td><textarea placeholder="Escribe un comentario"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit"> <input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>
formstilo.css
form#css {
font: 14px arial, sans-serif;
}
input.a {
background-repeat:no-repeat;
padding:5px 5px 5px 25px;
width:200px;
}
input:focus {
outline:none;
}
input.a:invalid:required {
background: url(informar.png) no-repeat center left 5px;
border:3px solid #ff0000;
}
input.a:focus:invalid {
background: url(error.png) no-repeat center left 5px;
border:3px solid #ffff00;
}
input.a:valid {
background: url(ok.png) no-repeat center left 5px;
border:3px solid #00ff00;
}
textarea {
width:230px;
height:100px;
}
TABLAS CON HTML5 Y CSS3
5.- Crear una tabla HTML5 desde cero
Las tablas representan una de las funcionalidades ms poderosas de HTML y se le pueden dar
muchos usos. Si antiguamente eran utilizadas para mostrar solamente resultados de clculos
cientficos, hoy en da se puede organizar y maquetar una pgina Web en totalidad. Cada celda
de una tabla puede contener cualquier elemento HTML, incluso otra tabla y solamente nuestra
imaginacin puede ser la barrera que nos pueda impedir en alcanzar la verdadera potencia de
una tabla.
Como hemos hablado al principio, HTML utiliza un mnimo de directivas para gestionar el flujo
de contenido de una tabla: <table>, <tr> y <td>.
tabla01.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Tabla simple</title>
</head>
<body>
<table border="1">
<tr>
<td>cabecera</td>
<td>cabecera</td>
<td>cabecera</td>
</tr>
<tr>
<td>cabecera</td>
<td>cuerpo</td>
<td>cuerpo</td>
</tr>
<tr>
<td>cabecera</td>
<td>pie</td>
<td>pie</td>
</tr>
</table>
</body>
</html>
La tabla que acabo de ejemplificar est formada por 3 columnas, 3 filas y 9 celdas. La directiva
<table> y </table> nos permite definir la tabla. La presencia del atributo @border hace que el
navegador dibuje un borde alrededor de cada celda y al mismo tiempo alrededor de la tabla. El
mismo efecto se puede obtener con Css, pero el ejemplo lo veremos ms adelante en el
apartado Css.
Si el ejemplo anterior representa una tabla simple construida con un mnimo cdigo HTML,
veamos en el prximo ejemplo como se puede representar la misma tabla con un cdigo HTML
ms completo.
tabla02.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Tabla simple</title>
</head>
<body>
<table border="1">
<caption>Titulo de la tabla</caption>
<colgroup>
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th scope="col">cabecera</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">cabecera</th>
<td>pie</td>
<td>pie</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">cabecera</th>
<td>cuerpo</td>
<td>cuerpo</td>
</tr>
</tbody>
</table>
</body>
</html>
La diferencia entre este cdigo y el otro es que con este ltimo se puede controlar mejor las
partes que forman una tabla con respecto a Css. Con este cdigo podemos controlar cada fila
de la tabla o los grupos de filas divididas en la cabeza, el cuerpo o el pie de la tabla mediante
las directivas <thead>, <tbody> y <tfoot>. Tambin, utilizando <colgroup> y <col> podemos
controlar cada columna de la tabla. Mediante Css se puede aplicar estilos de texto, cambiar el
tamao de las celdas o de alguna fila en particular, cambiar los colores, aadir o quitar bordes,
todo para que los usuarios identifiquen mejor la informacin que aporta la tabla.
Partes de una tabla

Como pueden observar en el cdigo HTML del ejemplo anterior una tabla est formada por:
Filas (<tr>)
Grupo de columnas (<colgroup> y <col>)
Encabezamiento de las celdas (<th>)
Cuerpo de las celdas (<th> o <td>)
Ttulo de la tablas (<caption>)
Encabezamiento de la tabla (<thead>)
Cuerpo de la tabla (<tbody>)
Pie de la tabla (<tfoot>)
Definir las filas de una tabla

Si la directiva <table> delimita el espacio de una tabla, la directiva <tr> delimita las filas. Cada
par de llaves <tr> y </tr> construye una fila, pero trabaja en conjunto con las directivas <th> o
<td>. Aunque el navegador reproduce las celdas sin depender de la directiva <tr>, para crear
nuevas lneas de celdas necesita que las filas estn definidas.
Hay que aadir ms que <tr> es subordinada a la directiva <table>, pero tambin a cualquier
de estas directivas: <thead>, <tbody> y <tfoot>.
tabla03.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Definir filas de una tabla</title>
</head>
<body>
<table border="1">
<tr>
<td>cabecera</td>
<td>cabecera</td>
<td>cabecera</td>
</tr>
</table>
</body>
</html>
Definir las celdas de una tabla
Dentro de una fila puede haber una o ms columnas de datos; cada dato puede estar
encerrado entre dos tipos de directivas: <th> y </th> o <td> y </td>. Si en una fila hay 5 pares
de directiva <th> o <td>, entonces la tabla tendr 5 columnas.
La diferencia entre <th> y <td> es solo visible en el nivel de importancia del texto de la celda (al
encontrar a la directiva <th> el navegador centra el texto de la celda y cambia su tipografa en
negrita convirtiendo esa celda en una de cabecera. Las celdas de cabecera pueden ser tanto de
filas como de columnas); en ambos casos, estas directivas contendrn datos de algn tipo
(texto, imagen, formulario, listas, enlaces u otros objetos).
tabla04.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Definir las celdas de una tabla</title>
</head>
<body>
<table border="1">
<tr>
<td><img src="escribir1.png" /></td>
</tr>
</table>
</body>
</html>
Atributos de la celda
En la vida real una celda se puede dibujar a lo largo de las filas o a lo largo de las columnas,
agrupando bajo su titularidad varias celdas. Por ejemplo, una celda de cabecera puede agrupar
varias columnas y actuar como ttulo de esa agrupacin. Est claro que HTML tea que ofrecer
herramientas para cubrir esta necesidad y as han aparecido los atributos @colspan y
@rowspan. Sus prefijos (col = columna, row=fila) indica sobre que partes de la tabla se
extendern las celdas. Sus valores (nmeros mayores de cero), indicaran cuantos filas o
columnas ocuparan las celdas. Por ejemplo, el valor 1 representa que esa celda ocupara una
fila o una columna...
EL FUNCIONAMIENTO DEL ATRIBUTO @COLSPAN
tabla05.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Atributo Colspan</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="1">celda</td>
</tr>
<tr>
<td>celda</td>
<td>celda</td>
<td>celda</td>
</tr>
</table>
</body>
</html>
Cada atributo @colspan tiene el valor 1, es decir cada celda ocupara una columna. Si se intenta
cambiar el valor de cualquier @colspan en 2, esa celda ocupara una columna ms, sumando a
la fila una celda ms (2+1+1=4). La ltima celda va a romper el cuadro de la tabla
transformndola en una de 4 columnas.
tabla06.html
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<table border="1">
<tr>
</tr>
<tr>
<td>celda</td>
<td>celda</td>
<td>celda</td>
</tr>
</table>
</body>
</html>
La solucin es muy simple, o bien se puede quitar una celda de la tabla o bien se puede aadir
una celda a la tabla. Habitualmente se guarda el nmero de columnas inicial quitando esa
celda que se sobresale o que no hace falta. Cuando borramos una celda tenemos que mirar
atentamente en que lnea de cdigo est definida para no estropear por completo la tabla. En
una tabla simple este error se puede remediar rpido, pero en una tabla grande con muchos
atributos de expansin puede ser complicado determinar qu lnea de cdigo representa cada
celda.
tabla07.html
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<table border="1">
<tr>
<td>celda</td>
</tr>
<tr>
<td>celda</td>
<td>celda</td>
<td>celda</td>
</tr>
</table>
</body>
</html>
Aunque la primera fila indica que la tabla tiene dos celdas en realidad la tabla tiene tres
columnas, dado a que la primera celda ocupa dos columnas...
EL FUNCIONAMIENTO DEL ATRIBUTO @ROWSPAN

Lo mismo pasa con el atributo @rowspan, pero esta vez en lugar de ocupar columnas la celda
ocupara filas. Observa el siguiente cdigo:
tabla08.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Atributo rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">cabecera</th>
<th>cabecera</th>
<th>cabecera</th>
</tr>
<tr>
<td>celda</td>
<td>celda</td>
<td>celda</td>
</tr>
</table>
</body>
</html>
La tabla inicial era formada por 3 columnas. Mediante el atributo @rowspan la primera celda
de la primera fila se extiende a lo largo de las filas y como es normal entra en la siguiente fila
sacando fuera la ltima celda de la fila 2 convirtindola en una fila de 4 columnas... Aunque si
se ha aadido una celda en la primera fila, para cuadrar la tabla hay que borrar una celda (lnea
de cdigo) en la fila 2.
tabla09.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Atributo rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">cabecera</th>
<th>cabecera</th>
<th>cabecera</th>
</tr>
<tr>
<td>celda</td>
<td>celda</td>
</tr>
</table>
</body>
</html>
No es difcil de entender el funcionamiento de los atributos @rowspan y @colspan, pero
dependiendo de la complejidad de la tabla estos puede dar algunas problemas porque se
necesita mucho cdigo, no siempre el nmero de celdas releva correctamente el numero e
columnas y te puedes. Un consejo es de dibujar antes la tabla que se quiere construir y
despus empezar a escribir el cdigo HTML pensando cada celda. Todo es cuestin de prctica,
por eso, os dejo los siguientes enlaces (tabla1y tabla2) donde encontraran dos tablas bastante
complejas. Si las podis construir podis dominar cualquier tabla, indiferentemente de su
complejidad.
Accesibilidad Web
Cuando se trata de accesibilidad Web se piensa en las personas con alguna discapacidad y
especialmente en las personas con deficiencias visuales. Hay navegadores especiales con
funcin de voz que ofrece la posibilidad de leer la tabla, es decir el contenido de las celdas
especificando tambin si alguna columna o fila tienen celdas de cabecera o si alguna celda se
extiende a lo largo de las filas o columnas...
EL FUNCIONAMIENTO DEL ATRIBUTO @SCOPE

El atributo @scope a travs de sus valores ofrece informacin completa al navegador sobre las
celdas de cabecera. El navegador transmite a su vez esa informacin a los lectores de pantalla
(instalados previamente de los usuarios con discapacidad). Mediante sus valores el navegador
determina si una celda es de cabecera o de fila o columna o si la celda de cabecera esta
expandida. Por ejemplo:
scope="col" - indica una celda de cabecera de columna
scope="row" - indica una celda de cabecera de fila
scope="colgroup" - indica si celda de cabecera se ha expandido a lo largo de columnas
scope="rowgroup" - indica si celda de cabecera se ha expandido a lo largo de filas
tabla10.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Atributo Scope</title>
</head>
<body>
<table border="1">
<tr>
<th scope="colgroup" colspan="4">Columnas</th>
</tr>
<tr>
<th scope="rowgroup" rowspan="4">Filas
</tr>
<tr>
<th scope="col">Columna2</th>
</tr>
<tr>
<th scope="row">Fila1</th>
<td>CeldaA</td>
<td>CeldaB</td>
</tr>
<tr>
<th scope="row">Fila2</th>
<td>CeldaC</td>
<td>CeldaD</td>
</tr>
</table>
</body>
</html>
EL FUNCIONAMIENTO DEL ATRIBUTO @HEADERS

El atributo @headers establece la pertenencia de cada celda de la tabla a una determinada
celda de cabecera de fila o de columna. Imaginaos una tabla con la informacin personal de
algunas personas: edad, direccin, telfono... etc. Cuando el lector de pantalla empezar a leer
la tabla, guiado de los atributos @headers, los usuario van recibir la siguiente informacin:
"Mara: 30 aos; telfono: 6256544... " etc.
La conexin entre las cabeceras que contiene los nombres y las celdas que contiene los datos
se hace a travs de dos atributos:
id="..." - se debe colocar siempre en las celdas de cabeceras. El valor del atributo @id debe
ser un nombre relevante con el contenido de la celda de cabecera (nombre, telfono,
direccin, etc).
headers="..." - se debe colocar en las celdas que contienen los datos. El valor de @headers
debe ser el nombre de la celda de cabecera proporcionado por el atributo @id.
tabla11.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Atributo Header</title>
</head>
<body>
<table border="1">
<tr>
<th scope="col" id="nombre">Nombre</th>
<th scope="col" id="edad">Edad</th>
<th scope="col" id="telefono">Telefono</th>
</tr>
<tr>
<td headers="nombre">Maria</td>
<td headers="edad">30</td>
<td headers="telefono">645897403</td>
</tr>
<tr>
<td headers="nombre">Jose</td>
</tr>
</table>
</body>
</html>
Ttulo de la tabla
El ttulo de la tabla es opcional, pero si lo aadimos destacamos las cabeceras de las columnas,
aclarando todava ms para el usuario sobre que trata la informacin de la tabla. El titulo se
introduce con la directiva <capitn> y debe aparecer inmediatamente despus de la directiva
<table>. Por lo tanto, el ttulo de la tabla de arriba podra ser, "Datos personales", para
ejemplificar en totalidad el contenido de la tabla.
tabla12.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo en tabla</title>
</head>
<body>
<table border="1">
<caption>Datos Personales</caption>
<tr>
<th scope="col" id="nombre">Nombre</th>
<th scope="col" id="edad">Edad</th>
<th scope="col" id="telefono">Telefono</th>
</tr>
<tr>
<td headers="nombre">Maria</td>
</tr>
<tr>
<td headers="nombre">Jose</td>
</tr>
</table>
</body>
</html>
Estilos CSS en las tablas

Para tener una pgina Web completa se debe utilizar varias tecnologas: Html5, CSS,
JavaScript, PHP, etc, pero imprescindible es tener conocimientos de CSS. Es imposible en da
de hoy construir una buena pgina Web sin CSS. Si antiguamente HTML incorporaba atributos
que podan cubrir algunos aspectos grficos, con la versin 5 las cosas han cambiado y los
atributos solamente se limitan en traer funcionalidades bsicas (construir bordes, identificar
una directiva, etc).
Es una ventaja separar grafica del contenido Web. As los desarrolladores tienen un cdigo
HTML ms limpio con una estructura todava ms lgica y con infinitas posibilidades de
formatear la pgina Web a travs de CSS.
Vamos a mejorar la tabla "Datos Personales" introduciendo poco a poco los estilos CSS... En
versiones anteriores a Html5 la directiva <table> dispona 3 atributos para controlar el borde
de una tabla (@border), el espacio entre las celdas (@cellspacing) y el espacio alrededor del
texto de la celda (@cellpadding). Aunque @cellspacing y @cellpadding en la versin 5 de
HTML son considerados obsoletos, todava se pueden utilizar, pero en la medida que consigues
conocimientos Css es recomendable renunciar, dado a que con el tiempo los navegadores
dejaran de ofrecerles suporte.
Atributo @border vs regla css

A mi personal me gusta el atributo @border y lo utilizo mucho para dibujar el borde de una
tabla por dos considerantes: no tengo que escribir mucho cdigo y al mismo tiempo, el
navegador dibuja el borde alrededor de la tabla y alrededor de las celdas, cosa que no ocurre
con Css donde se debe aadir reglas tanto para dibujar el borde para la directiva <table> como
para dibujar el borde alrededor de las celdas creadas con las directivas <td> o <th> .
tabla13.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Tabla sin estilos</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Informacion personal sobre los trabajadores</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Maria</td>
<td>30</td>
<td>645897403</td>
</tr>
<tr>
<td>Jose</td>
<td>38</td>
<td>658912345</td>
</tr>
<tr>
<td>Julio</td>
<td>42</td>
<td>656899945</td>
</tr>
<tr>
<td>Enrique</td>
<td>25</td>
<td>662997745</td>
</tr>
<tr>
<td>Dani</td>
<td>39</td>
<td>658758245</td>
</tr>
</tbody>
</table>
</body>
</html>
tabla14.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Tabla con estilos</title>
<link rel="stylesheet" href="tablaestilo.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
<td>Maria</td>
<td>30</td>
<td>645897403</td>
</tr>
<tr>
<td>Jose</td>
<td>38</td>
<td>658912345</td>
</tr>
<tr>
<td>Julio</td>
<td>42</td>
<td>656899945</td>
</tr>
<tr>
<td>Enrique</td>
<td>25</td>
<td>662997745</td>
</tr>
<tr>
<td>Dani</td>
<td>39</td>
<td>658758245</td>
</tr>
</tbody>
</table>
</body>
</html>
tablaestilo.css
table {
border:1px solid black;
border-collapse:separate;
}
th, td {
}
Atributo @cellspacing vs regla css
Atributo obsoleto en la versin 5 de HTML en las versiones anteriores tea un papel esttico
importante, dado a que creaba un espacio alrededor de las celdas, destacando an ms la
importancia de cada una las celdas... Veamos a ver la alternativa CSS:
tabla15.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Sin estilos</title>
</head>
<body>
<table cellspacing="30" border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
<td>Maria</td>
<td>30</td>
<td>645897403</td>
</tr>
<tr>
<td>Jose</td>
<td>38</td>
<td>658912345</td>
</tr>
<tr>
<td>Julio</td>
<td>42</td>
<td>656899945</td>
</tr>
<tr>
<td>Enrique</td>
<td>25</td>
<td>662997745</td>
</tr>
<tr>
<td>Dani</td>
<td>39</td>
<td>658758245</td>
</tr>
</tbody>
</table>
</body>
</html>
tabla16.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Con estilo</title>
<link rel="stylesheet" href="estilotabla.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
<td>Maria</td>
<td>30</td>
<td>645897403</td>
</tr>
<tr>
<td>Jose</td>
<td>38</td>
<td>658912345</td>
</tr>
<tr>
<td>Julio</td>
<td>42</td>
<td>656899945</td>
</tr>
<tr>
<td>Enrique</td>
<td>25</td>
<td>662997745</td>
</tr>
<tr>
<td>Dani</td>
<td>39</td>
<td>658758245</td>
</tr>
</tbody>
</table>
</body>
</html>
estilotabla.css
table {
border-spacing:30px;
}
th, td {
}
Atributo @cellpadding vs regla css
Considerado tambin un atributo obsoleto en la versin 5 de HTML en las versiones anteriores
su papel era de crear un espacio alrededor del texto de la celda mejorando visualmente la
tabla y su lectura. Veamos a ver la alternativa CSS:
tabla17.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Sin estilo</title>
</head>
<body>
<table cellpadding="50" border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
<td>Maria</td>
<td>30</td>
<td>645897403</td>
</tr>
<tr>
<td>Jose</td>
<td>38</td>
<td>658912345</td>
</tr>
<tr>
<td>Julio</td>
<td>42</td>
<td>656899945</td>
</tr>
<tr>
<td>Enrique</td>
<td>25</td>
<td>662997745</td>
</tr>
<tr>
<td>Dani</td>
<td>39</td>
<td>658758245</td>
</tr>
</tbody>
</table>
</body>
</html>
tabla18.html
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="estlotabla1.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
<td>Maria</td>
<td>30</td>
<td>645897403</td>
</tr>
<tr>
<td>Jose</td>
<td>38</td>
<td>658912345</td>
</tr>
<tr>
<td>Julio</td>
<td>42</td>
<td>656899945</td>
</tr>
<tr>
<td>Enrique</td>
<td>25</td>
<td>662997745</td>
</tr>
<tr>
<td>Dani</td>
<td>39</td>
<td>658758245</td>
</tr>
</tbody>
</table>
</body>
</html>
estilotabla1.css
table {
}
th, td {
padding:50px;
}
Los atributos @width y @height vs regla css

De manera predeterminada, una tabla se expande lo necesario para poder dar espacio al
contenido de sus celdas. Al llegar al lmite del espacio disponible, el contenido de las celdas
que excede el ancho de la celda contina en otra lnea dentro de la celda. No obstante, se
pueden utilizar reglas Css para determinar el tamao de una tabla.
Los atributos @width y @height (obsoletos en la versin 5 de HTML) todava se pueden

emplear para controlar la anchura y la altura de la tabla. Veamos no obstante la alternativa
CSS:
tabla19.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Sin estilo</title>
</head>
<body>
<table width="200" border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
<td>Maria</td>
<td>30</td>
<td>645897403</td>
</tr>
<tr>
<td>Jose</td>
<td>38</td>
<td>658912345</td>
</tr>
<tr>
<td>Julio</td>
<td>42</td>
<td>656899945</td>
</tr>
<tr>
<td>Enrique</td>
<td>25</td>
<td>662997745</td>
</tr>
<tr>
<td>Dani</td>
<td>39</td>
<td>658758245</td>
</tr>
</tbody>
</table>
</body>
</html>
tabla20.html
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="estilotabla20.css"
</head>
<body>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
<td>Maria</td>
<td>30</td>
<td>645897403</td>
</tr>
<tr>
<td>Jose</td>
<td>38</td>
<td>658912345</td>
</tr>
<tr>
<td>Julio</td>
<td>42</td>
<td>656899945</td>
</tr>
<tr>
<td>Enrique</td>
<td>25</td>
<td>662997745</td>
</tr>
<tr>
<td>Dani</td>
<td>39</td>
<td>658758245</td>
</tr>
</tbody>
</table>
</body>
</html>
estilotabla20.css
table {
width:200px;
height:auto;
}
th, td {
}
Destacar las filas de una tabla con Css
Vamos a profundar ms el tema Css y modificar completamente la esttica de nuestra tabla.
Un problema de las tablas que contienen muchas filas es la facilidad de perderse entre las
lneas cuando se est leyendo a lo largo de una fila. Un efecto visual muy til es de poner un
color de fondo distinto en las filas alternas. Para hacer esto, se podra crear una regla Css que
defina un color de fondo y luego aplicar una clase a las filas alternas de la tabla. Veamos un
ejemplo:
tabla21.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Destacar filas de la tabla con estilos</title>
<link rel="stylesheet" href="estilotabla21.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr class="color">
<td>Maria</td>
<td>30</td>
<td>645897403</td>
</tr>
<tr>
<td>Jose</td>
<td>38</td>
<td>658912345</td>
</tr>
<tr class="color">
<td>Julio</td>
<td>42</td>
<td>656899945</td>
</tr>
<tr>
<td>Enrique</td>
<td>25</td>
<td>662997745</td>
</tr>
<tr class="color">
<td>Dani</td>
<td>39</td>
<td>658758245</td>
</tr>
</tbody>
</table>
</body>
</html>
estilotabla21.css
table {
border-spacing:5px;
width:530px;
height:auto;
}
tr.color {
background-color:aquamarine;
}
th, td {
padding:10px;
}
Destacar grupos de filas con Css
Html5 nos ofrece directivas para controlar todos los aspectos de una tabla y podemos destacar
las directivas <thead>, <tbody> y <tfoot>, <colgroup> y <col> utilizadas especialmente para
controlar partes de la tabla que pueden ser mejoradas a travs de CSS.
El siguiente ejemplo muestra cmo se pueden destacar a travs de Css filas de tabla
apuntando las directivas arriba mencionadas:
tabla22.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Destacar grupos de filas con Css</title>
<link rel="stylesheet" href="estilotabla22.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Telefono</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr class="color">
<td>Maria</td>
<td>30</td>
<td>645897403</td>
</tr>
<tr>
<td>Jose</td>
<td>38</td>
<td>658912345</td>
</tr>
<tr class="color">
<td>Julio</td>
<td>42</td>
<td>656899945</td>
</tr>
<tr>
<td>Enrique</td>
<td>25</td>
<td>662997745</td>
</tr>
<tr class="color">
<td>Dani</td>
<td>39</td>
<td>658758245</td>
</tr>
</tbody>
</table>
</table>
</body>
</html>
estilotabla22.css
table {
border:1px solid white;
border-spacing:5px;
width:530px;
height:auto;
color:white;
text-align:center;
}
th, td {
border:1px solid white;
padding:5px;
}
thead, tfoot {
background-color:#06DEF8;
color:white;
font-family:"Arial Black", sans-serif;
}
tr.color {
background-color:#525151;
}
caption {
color:white;
font-size:30px;
padding:5px;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

Taller de Diseño Web-Ejercicios Propuestos y Resueltos

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Taller de Diseño Web-Ejercicios Propuestos y Resueltos

Transféré par

Droits d'auteur :

Formats disponibles

TALLER DE PRACTICO DE DISEO WEB

BOTONES Y MENUS EN HTML5 y CSS3

Dentro de la carpeta www crear la carpeta trabajos\botones :

Dentro de la carpeta www crear la carpeta trabajos\menus :

FORMULARIOS EN HTML5 Y CSS3

3.- Crear un formulario HTML5 desde cero

Dentro de la carpeta www crear la carpeta trabajos\formularios :

Tabulaciones - organizar los campos del formulario

Hablamos de validaciones de datos cuando nos referimos que un determinado campo de

4.- Como hacer un elegante formulario en HTML5 y CSS3

Dentro de la carpeta www crear la carpeta trabajos\formularios :

4.- Estilos CSS en los formularios

Dentro de la carpeta www crear la carpeta trabajos\formulario :

5.- Crear una tabla HTML5 desde cero

Partes de una tabla

Encabezamiento de las celdas (<th>)

Cuerpo de las celdas (<th> o <td>)

Ttulo de la tablas (<caption>)

Encabezamiento de la tabla (<thead>)

Cuerpo de la tabla (<tbody>)

Pie de la tabla (<tfoot>)

Definir las filas de una tabla

EL FUNCIONAMIENTO DEL ATRIBUTO @COLSPAN

EL FUNCIONAMIENTO DEL ATRIBUTO @ROWSPAN

EL FUNCIONAMIENTO DEL ATRIBUTO @SCOPE

scope="col" - indica una celda de cabecera de columna

scope="row" - indica una celda de cabecera de fila

scope="colgroup" - indica si celda de cabecera se ha expandido a lo largo de columnas

scope="rowgroup" - indica si celda de cabecera se ha expandido a lo largo de filas

EL FUNCIONAMIENTO DEL ATRIBUTO @HEADERS

Estilos CSS en las tablas

Atributo @border vs regla css

Los atributos @width y @height vs regla css

Los atributos @width y @height (obsoletos en la versin 5 de HTML) todava se pueden

Vous aimerez peut-être aussi