Curso de html
UX
Usabilidad y accesibilidad.
Contenido
- 1 Elementos básicos del lenguaje
Elementos básicos del lenguaje
Ejemplo de html
<!DOCTYPE html> <html> <body> <h1>Mi primer encabezado de primer nivel</h1> <p>Mi primer párrafo</p> </body> </html>
Etiquetas obligatorias del documento
- Todas las etiquetas deben ir en minúsculas.
- Se pueden anidar (como en XML).
<html> <head>* <title> y <body>
La etiqueta head debe incluir el título. También puede incluir:
- JavaScript
- Links a stylesheets
- Información acerca del propio documento (mediante metatags)
Atributos y valores
Las etiquetas pueden tener atributos. Los atributos van en la etiqueta de inicio y son de la forma atributo=”valor”. ¡Siempre en minúsculas, por si acaso!
<html> <head> <title> Este es el titulo de la página</title> </head> <body> <p> Esta es mi primera página web </p> <a href=”http://www.soplaelcierzo.com“> Visita mi web </a> </body> </html>
Headings
- Hay seis niveles representados por las etiquetas h1, h2, h3, h4, h5 y h6.
- Sin aplicar ninguna regla CSS se representan en “su propia linea”.
- Por defecto están en negrita.
- h1 se considera el más importante y es el más grande, luego h2, h3...
- También los usan los buscadores. Las palabras clave tienen mucha más importancia en un h1 que en un h6.
Imágenes
- Mediante la etiqueta img
- Es importante poner el atributo alt. Es la información que tienen los buscadores sobre la imagen para indexarla.
- Es importante indicar anchura y altura:aunque la página tarde en cargarse, lo hará con sus dimensiones (layout) definitivas.
- Se debe guardar cierta estructura jerárquica en nuestro sitio web. Directorio para imágenes, para javascript, etc.
<html> <head> <title> Título preciso, descriptivo y corto</title> </head> <body> <img src="libro.jpg" width="104" height="142" alt=”Mi libro” /> </body> </html>
Comentarios
- Nos ayudarán a documentar el código de nuestras páginas (versiones, objetivo o meta de unas líneas de código, etc.)
- No son visibles por el navegador.
- Se ven exclusivamente en el código fuente (CTRL + U desde Firefox).
- Se deben evitar comentarios “privados” al poder ser vistos por cualquiera desde el código fuente.
<!-- Esto es un comentario que no se verá desde el navegador. Los visitantes lo verán exclusivamente si miran el código fuente de la página. -->
Enlaces internos
- Ejemplos:
<a name="ayuda">Ayuda</a> <a href="#ayuda">Ir a ayuda</a> <a href="./manual.html#ayuda">Ver la ayuda</a> //por algún otro lado del documento: <a name="ayuda">El enlace vendrá aquí</a>
Una imagen como enlace:
<a href="pagina.php"> <img src="imagen.gif" alt="texto imagen" width="32" height="32" /> </a>
Enlaces externos
- En búsquedas en directorios se debe acabar la url con /, para no generar dos peticiones en el servidor.
<a name="ayuda">Ayuda</a> <a href="http://www.soplaelcierzo.com/miweb.htm#ayuda">Ver la ayuda</a> <a href="http://www.softwaredental.com/">Ver la ayuda</a>
- Enlace para correo electrónico:
<a href="mailto:admin@miweb.com?Subject=Consulta%20web"> Contactar</a>
Tablas
<tr> Table row (fila) <td> Table data (celda) <th> Table header, opcional, negrita y centrado por defecto
<table border="1"> <th>Cabecera 1</th> <th>Cabecera 2</th> <tr> <td>fila 1, celda 0</td> <td>fila 1, celda 2</td> </tr> <tr> <td>fila 2, celda 1</td> <td>fila 2, celda 2</td> </tr> </table>
Listas
- Usaremos las listas en combinación con enlaces para realizar menús
<!-- lista sin orden --> <ul> <li>Coffee</li> <li>Milk</li> </ul> <!-- lista numerada --> <ol> <li>Coffee</li> <li>Milk</li> </ol> <!-- lista con definiciones --> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
Formularios
- Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor.
- El lenguaje HTML solo tiene el objetivo de crear el formulario: no tiene la responsabilidad de registrar los datos en el servidor, esta actividad está delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, JSP etc.)
<form name="input" action="formulario.php" method="get" / “post”> Nombre usuario: <input type="text" name="nombre" /><br /> Apellido usuario: <input type="text" name="apellido" /><br /> Contraseña: <input type="password" name="pwd" /><br/> <input type="radio" name="sex" value="hombre" /> Hombre<br /> <input type="radio" name="sex" value="mujer" /> Mujer<br /> <input type="checkbox" name="interes" value="futbol" /> Me gusta el futbol<br /> <input type="checkbox" name="interes" value="lectura" /> Me gusta leer <br /> <input type="submit" value="Aceptar" /> <input type="reset" value="Borrar"> </form>
<form> Define el comienzo del formulario para la inserción de datos
Atributo action: nombre de la página que procesará los datos en el servidor
- method=”post” Lo habitual. Los datos se envían con el cuerpo del formulario
- method=”get” Los datos se envían en la cabecera de petición de página
<input> Define un control de inserción de datos
<textarea> Define un control de inserción de datos multilínea
- Ejemplo:
<textarea name="comentarios" rows="5" cols="60"></textarea>
<label> Muestra un texto junto al control de inserción de datos
<fieldset> Define un borde entre un conjunto de elementos del formulario
<legend> Define una label para el fieldset
<select> Define una lista desplegable
<optgroup> Defines un grupo de opciones relacionadas en una lista desplegable
<option> Define una opción en una lista desplegable
Ejemplo:
<select name="pais"> <option value="1">Argentina</option> <option value="2">España</option> </select>
<button> Defines un botón
DOCTYPE
- Doctype html5
<!DOCTYPE html>
- Doctype html4 estricto (sin frameset y atributos de presentación todos mediante hojas de estilos)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- Doctype html4.0.1 Transitional estricto (sin frameset pero con atributos de presentación)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Doctype html 4.0.1 con Frames (con frameset y con atributos de presentación)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- XHTML similares tipos a html 4.0.1
Aplicando estilos en html
Etiquetas para formato de textos
Atributo style
Valor: propiedad css:valor;propiedad css:valor;....
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
Hojas de estilo internas
<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
Hojas de estilo externas
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
iframes
Sirve para mostrar una página dentro de otra página:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
Entities