Diferencia entre revisiones de «Usuario:Juanda/html/elementos»
(→Formularios) |
|||
| Línea 219: | Línea 219: | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<select name="pais"> | <select name="pais"> | ||
| − | + | <option value="1">Argentina</option> | |
| − | + | <option value="2">España</option> | |
| − | + | </select> | |
</source> | </source> | ||
<button> Defines un botón | <button> Defines un botón | ||
Revisión de 08:29 25 sep 2012
UX
Usabilidad y accesibilidad.
Contenido
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
<tr> Table row (fila) <td> Table data (celda) <th> Table header, opcional, negrita y centrado por defecto
<!-- 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
