|
|
| Línea 212: |
Línea 212: |
| | <textarea name="comentarios" rows="5" cols="60"></textarea> | | <textarea name="comentarios" rows="5" cols="60"></textarea> |
| | </source> | | </source> |
| − | '''<label>''' Muestra un texto junto al control de inserción de datos | + | '''<label>''' Muestra un texto junto al control de inserción de datos<br> |
| − | '''<fieldset>''' Define un borde entre un conjunto de elementos del formulario | + | '''<fieldset>''' Define un borde entre un conjunto de elementos del formulario<br> |
| | '''<legend>''' Define una label para el fieldset | | '''<legend>''' Define una label para el fieldset |
| | </div> | | </div> |
Revisión de 08:59 25 sep 2012
UX
Usabilidad y accesibilidad.
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
<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
