Introducción
La estructura de un documento Html permite identificar sus partes de manera que podamos ubicar el código en cada zona según sea su función.
Encabezado del documento <!DOCTYPE ..>
La etiqueta <!DOCTYPE …> es de uso obligado ya que informa al navegador del tipo de documento (si es HTML o XHTML) y cuál es la versión. Recuerda que existen varios tipos de documentos y diferentes versiones.
Esto es necesario para traducir las etiquetas, ya que no son iguales en todas las versiones. En la etiqueta <!DOCTYPE …> se incluye la URL de la DTD en la que se especifica la versión del lenguaje de etiquetas utilizado en el documento, además de la estructura, etiquetas y atributos permitidos para cada una de ellas.
En HTML 4.01 se indicará si el doctype es: strict, transitional o frameset.
|
1 |
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Si quieres más información sobre el tipo de encabezamiento en documentos HTML 4 puedes ir a este enlace, https://es.wikipedia.org/wiki/Declaraci%C3%B3n_de_tipo_de_documento
Para HTML5 se usa <!DOCTYPE html>
La raíz del documento HTML
Con la etiqueta <HTML>…</HTML> definimos el espacio total de nuestro documento, su
principio y su final. Todas las páginas HTML deben comenzar con <HTML> y finalizar por </HTML> delimitando así el contenido del documento.
Recordemos que que HTML procede de SGML al igual que XML y para que sea un documento valido debe tener un documento raíz.
Toda página Html está compuesta de dos partes la cabecera “HEAD” y el cuerpo “BODY”, cada uno de estos bloques tienen una función diferenciada.
La raíz del documento HTML
Con la etiqueta <HTML>…</HTML> definimos el espacio total de nuestro documento, suprincipio y su final. Todas las páginas HTML deben comenzar con <HTML> y finalizar por </HTML> delimitando así el contenido del documento.
Recordemos que que HTML procede de SGML al igual que XML y para que sea un documento valido debe tener un documento raíz.
Toda página Html está compuesta de dos partes la cabecera “HEAD” y el cuerpo “BODY”, cada uno de estos bloques tienen una función diferenciada.
|
1 2 3 4 5 6 7 8 9 10 |
<head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="" /> <meta name="url" content="" /> <meta name="title" content="" /> <meta name="type" content="" /> <meta name="description" content="" /> </head> |
Cuerpo del documento <body>
El contenido de la página es el que ponemos entre las etiquetas <BODY>…</BODY>, la parte visible, lo que el usuario ve en el navegador.
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <header> <img src="logo"> </header> <section> Mi página blog. </section> <footer> Mi píe de página </footer> </body> |
Etiquetas de contenido
Dando forma a nuestros textos
Párrafos <p>
Como cualquier documento de texto, los párrafos son necesarios para documentar. Un párrafo está definido por la etiqueta <p>…</p>.
<p> esto es un párrafo</p>
| Ejemplo de aplicación: https://codepen.io/ciberkaos/pen/YaMXwZ |
Tenemos otras etiquetas que sirven para introducir un salto de línea, como el elemento <br>.
También existe la etiqueta <pre>…</pre> y sirve para que el texto se visualice tal como está en el código fuente, con lo que respetaría los saltos de línea o espacios en blanco extra y el texto se representa con un tipo de fuente de ancho fijo.
Tanto en párrafos como en otros contenedores de texto podemos querer poner partes en negrita, cursiva, subrayado, etc. Para ello disponemos también de multitud de etiquetas de estilo lógico o físico.
Etiquetas de estilo físico:
Especifican un cambio concreto en el tipo de letra
- Texto en cursiva: <I> … </I>
- Texto subrayado: <U> … </U>
- Texto monoespaciado: <TT> … </TT>
- Texto tachado: <STRIKE> … </STRIKE>
- Aumentar el tamaño del texto: <BIG> … </BIG>
- Disminuir el tamaño del texto: <SMALL> … </SMALL>
- Texto en sub índice: <SUB> … </SUB>
- Texto en super índice: <SUP> … </SUP>
Etiquetas de estilo lógico:
Caracterizan un trozo de texto destacándolo en el contexto y proporcionándole semántica al contenido:
- Texto destacado: <EM> … </EM>
- Texto importante (negrita): <STRONG> … </STRONG>
- Citas y referencias: <CITE> … </CITE>
- Información sobre el autor: <ADDRESS> … </ADDRESS>
- Definición de un término: <DFN> … </DFN>
- Fragmento de código de programa: <CODE> … </CODE>
- Ejemplos de programa: <SAMP> … </SAMP>
- Variables, argumentos de un programa: <VAR> … </VAR>
| Ejemplo de aplicación: |
Dado que la tendencia de HTML 5, es eliminar la mayor parte de los atributos para el formateo del texto dando paso a los estilos CSS para esa función, muchos atributos y etiquetas se han eliminado.
Encabezados h1, h2 … h6
La etiqueta <h1> se utiliza como encabezado de una sección. HTML cuenta con seis diferentes niveles de encabezados, h1 el más importante y h6 el que menos.
<h1>Esto es un texto de título.</h1>
Ejemplo de aplicación
https://codepen.io/ciberkaos/pen/KoYpLK
Bloques <blockquote>
Delimita los márgenes a ambos lados de un párrafo como una tabulación arbitraria.
Listas
Otro elemento importante en nuestros documentos son las listas. Tenemos etiquetas como <ol>, <ul> que indican el tipo de lista, y etiquetas <li> que indican cada elementos de las misma.
Existen tres tipos de listas:
- Listas desordenadas (no numeradas).
- Listas ordenadas (numeradas).
- Listas de definición.
Listas desordenadas <ul>
La etiqueta <ul> se utiliza para crear una lista desordenada.
|
1 2 3 4 5 6 |
<ul> <li> Un elemento </li> <li> Otro elemento</li> <li> Otro más </li> <li> etc. </li> </ul> |
Podemos ver que toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada elemento va precedido de la etiqueta <LI>.
Se puede anidar una lista dentro de otra. Por ejemplo:
|
1 2 3 4 5 6 7 8 9 |
<ul> <li> mamíferos <li> peces <ul> <li> sardina <li> bacalao </ul> <li> aves </ul> |
Listas ordenadas <ul>
El funcionamiento de las listas ordenadas es el mimso que en las desordenadas, pero cambiamos la etiqueta por <ol>.
|
1 2 3 4 5 6 7 8 9 |
<ol> <li> Despertar <li> Desayunar <ul> <li> Café <li> Tostadas </ul> <li> Ir a clase </ol> |
Listas de definición <dl>
La etiqueta <dl> se utiliza para describir un Ítem de las listas de definiciones.
|
1 2 3 4 5 6 |
<dl> <dt>Chocolate</dt> <dd>Elaborado a base de cacao</dd> <dt>Caramelo</dt> <dd>Elaborado a base de azucar</dd> </dl> |
Cada elemento de la lista está formado por dos partes:
El término que queremos describir: <DT>
La descripción de dicho término: <DD>
Ambos elementos terminan:
- Al encontrar la etiqueta final correspondiente (</DT> o </DD>) (no es obligatoria)
- Al encontrar otra etiqueta inicial (<DT> o <DD>)
- Al encontrar la etiqueta final de lista.
| Ejemplo de aplicación |
Imágenes
La etiqueta IMG se usa para insertar imágenes en páginas HTML. La imagen puede ubicarse en el mismo servidor que la página en la que se inserta, pero también puede ubicarse en un servidor diferente si se especifica la dirección URL completa.
Solamente se admiten los siguientes formatos de imagen en los estándares W3C:
Imágenes JPEG (.JPG): Imágenes con un gran número de colores que han sido comprimidas en un alto grado para reducir su tamaño, de modo que requieren menos tiempo para la descarga.
Imágenes PNG: Tienen un tamaño más pequeño cuando la imagen tiene un número reducido de colores sólidos. Este formato permite también imágenes entrelazadas (que aparecen progresivamente) con colores de 24 bits e imágenes en las que uno de los colores se ha definido como transparente.
Imagen GIF: Tienen las mismas ventajas que las imágenes PNG, aunque el formato GIF se limita a 256 colores.
Los principales atributos de la etiqueta IMG son:
SRC: Muestra la ruta donde se ubica la imagen (obligatorio).
ALIGN (Desaprobado): Especifica cómo está alineada la imagen en relación al texto adyacente. Los valores posibles son TOP, MIDDLE y BOTTOM (encima, en el medio, debajo).
ALT: Permite insertar un texto alternativo cuando la imagen no aparece.
TITLE: Muestra información cuando el cursor se desplaza sobre la imagen.
Ejemplo:
|
1 |
<IMG SRC=”url_de_imagen” ALT=”Texto alternativo” TITLE=”Texto a mostrar”> |
Los atributos alt y tittle aunque no son imprescindibles para la visualización, es importante ponerlos pues es un elemento posicionador en los buscadores, además de hacer la web adaptable para programas como los que usan los invidentes.
Comentarios
Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta especial
Un comentario en Html se pone de la forma:
|
1 |
<!-- Esto es un comentario --> |
Los comentarios no son interpretados por los navegadores, por lo que no se visualizaran en el documento, aunque su formaran parte de su código fuente.
Enlaces
Primero vamos a hacer una pequeña aclaración para que nos resulte más fácil entendernos.
Vamos a definir que significan las palabras Sitio Web y Página Web.
Aunque coloquialmente nos referimos a página web como al conjunto de documentos alojados en un dominio, formando así una web, a partir de ahora diremos que página web es solo uno de los documentos .html y sitio web al conjunto de ellos que forman la web total.
Por lo tanto, ya podemos deducir que si queremos diseñar nuestro sitio, usaremos distintos documentos, y necesitamos una forma de ir de una pagina a otra o de enlaarlo con un sitio externo.
Enlaces <a>
La etiqueta <a> es la que usamos para enlazar diferentes documentos html, su principal atributo es href, que indica a dónde queremos que se dirija dicho enlace.
|
1 |
<a href=”URL”> Texto </a> |
Como superficie de enlace además de un texto, también podemos poner una imagen.
|
1 |
<a href=”pagina2.html”> <img src=”imagen.jpg” /></a> |
Anclas (atributo name)
Las “anclas” son marcas específicas incluidas en el interior de un documento para indicar el comienzo de una sección bloque de contenido:
|
1 |
<a name=”nombre”> Texto </a> |
El valor del atributo name “nombre” tiene que ser único para cada marca. Esta etiqueta etiqueta no tiene ningún efecto visible sobre el Texto
- Botón: <a href=”#nombreAncla”>texto</a>
- Destino: <a name=”nombreAncla”></a>
Enlaces a partes internas de otro documento:
Con la etiqueta <a> no solamente podemos ir a otro documento. Con el uso de anclas podemos indicar en que zona del mismo queremos que se situe.
|
1 |
<a href=”URL#nombre”> Texto </a> |
Donde nombre es un “ancla” en el documento de destino.
|
1 |
<a href=”nombrePagina#nombreAncla”></a><a name=”nombreAncla”></a> |
| Ejemplo de aplicación |
Elementos de agrupamiento.
Tablas <table>
Estructura de una tabla
Una tabla consta de varias etiquetas para su construcción de una tabla desde fuera hacia el interior.
1. Lo primero es definir el principio y el final de la misma.
|
1 2 3 |
<table> [resto de las etiquetas] </table> |
2. Una tabla está compuesta de filas, y cada fila la delimitaremos con la etiqueta <tr>.
|
1 2 3 |
<tr> [etiquetas de las distintas celdas de la fila] </tr> |
3. Luego cada fila está compuesta de celdas.
|
1 2 3 |
<td> [contenido de cada celda (imágenes, texto etc.)] </td> |
Si queremos podemos indicar celdas de encabezamiento usando la etiqueta <th>
|
1 2 3 |
<th> [encabezamiento de tabla] </th> |
Con la etiqueta <CAPTION> y </CAPTION>, podemos añadir un título, es decir un texto encima de la tabla a modo de título.
Aunque como veremos más adelante todas las propiedades del contenido lo haremos con CSS, comentaremos algunos atributos de las tablas que pueden resultar interesantes.
ATRIBUTOS DE LAS CELDAS <td> (Desaprobados)
Alineación del contenido dentro de la celda
Para la alineación horizontal:
|
1 2 3 |
<td align=center> al centro </td> <td align=right> a la derecha </td> <th align=left> cabecera a la izquierda </th> |
Para la alineación vertical de la celda tenemos los siguientes atributos.
|
1 2 3 |
<td valign=top> arriba </td> <td valign=bottom> abajo </td> <td valign=middle> medio </td> |
ATRIBUTOS DE TABLA <table> (Desaprobados)
Para dar dimensión a una tabla podemos usar los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensión de la pantalla, o a una cifra que equivale al número de pixels.
|
1 2 |
<table width=60%> <table height=200> |
También podemos definir el espacio que queremos que quede entre los bordes de la tabla con el texto :
<table cellpadding=20>
o el ancho de la línea divisoria de las celdas.
<table cellspacing=20>
Otro atributo que nos puede resultar útil es el borde.
|
1 |
<table border=2> |
Tablas con Colspan y Rowspan
En ocasiones queremos formar tablas donde una celda abarque más que otras, para ello utilizaremos colspan y rowspan.
- rowspan: Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
- colspan: Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
De esta forma si ponemos <td colspan=”2”>, quiere decir que la celda actual se extiende en el ancho de dos celdas.
Algo parecido ocurre si ponemos <td rowspan=”3”>, la celda ocupará en alto de 3 celdas normales.
Ejemplo de aplicación
https://codepen.io/ciberkaos/pen/mxgeNb
Capas
Las capas son bloques con contenido HTML que pueden ayudarnos a componer nuestros documentos. La función principal de las capas es crear un conjunto de instrucciones agrupadas a los que se le aplican estilos CSS, de hecho las ventajas de ellas solo se pueden aprovechar al cien por cien utilizando estilos CSS.
Las capas o contenedores son unos espacios rectangulares que pueden situarse en cualquier parte de la página. En ellas, podemos insertar contenido HTML. Su utilidad principal es visual, permitiendo organizar y dar estructura y diseño a las páginas HTML.
La etiqueta <div>:
Podemos insertar una capa o contenedor a través de las etiquetas <div> y </div>. A través del atributo style se establecen las propiedades de estilo de la capa mediante el lenguaje CSS.
Los atributos de esta etiqueta son los globales y los de eventos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo</title> </head> <body> <div> Arriba. </div> <div> Medio. </div> <div> Abajo. </div> </body> </html> |
Etiqueta <span>
La etiqueta <span> y </span> se utiliza para agrupar elementos en línea en un documento, no proporciona ningún cambio visual por sí misma y proporciona una forma de agregar un enlace a una parte de un texto o una parte de un documento.
También sirve para subdividir una capa <div>. Esto nos permite aplicar estilos diferentes a cada subdivisión sin necesidad de crear nuevas capas. Los atributos de esta etiqueta son los globales y los de eventos. Un ejemplo de uso dentro de <div>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo etiqueta span </title> </head> <body> <div style="text-align: center; font-size: 60px; border: 1px solid red;"> Arriba. <span style="color: green;">de</span> la <span style="color: orange;">página</span>. </div> <div style="border: 1px solid green;"> Medio. </div> <div style="border: 1px solid blue;"> Abajo. </div> </body> </html> |
Formularios
Un formulario HTML es un elemento que nos permite recibir información de los usuarios, esto puede servir para los datos de contacto, para rellenar la ficha de un producto, o cualquier cosa que queramos solicitar.
Aquí se muestra un ejemplo de un formulario simple que incluye rótulos, radiobotones y botones para reiniciar el formulario o para enviarlo:
| Ejemplo de aplicación
https://codepen.io/ciberkaos/pen/geyPBm |
Como podemos ver en el ejemplo, en un formulario intervienen varias etiquetas y con diferentes atributos que los definen.
Etiquetas de un formulario
La etiqueta <form>
El elemento FORM actúa como contenedor de controles. Un formulario puede contener texto y código (párrafos, listas, etc.) además de controles de formulario.
El siguiente ejemplo muestra un formulario que va a ser procesado por el programa “usuario nuevo” cuando sea enviado. El formulario será enviado al programa usando el método HTTP “post”.
|
1 2 3 |
<form action=”http://usuarionuevo.php” method=”post”> ...contenidos del formulario... </form> |
La etiqueta <Input>
El elemento input de los formularios es uno de los mas versátiles, pues tiene diferentes tipos, que hacen que cambie su funcionabilidad.
Los atributos principales que podemos aplicar a un elemento input son:
Type:
El atributo type especifica el tipo del elemento. Por defecto para este atributo toma el valor de “text”.
type = text|password|checkbox|radio|submit|reset|file|hidden|image|button
Name: Este atributo asigna el nombre de control.
name = “nombreDelCampo“
Value: Este atributo especifica el valor del elemento. Es opcional menos en los tipos “radio” o “checkbox”.
value = “Rodrigo Tablado“
Size: Este atributo define el tamaño del elementos. La anchura se l daremos en pixeles excepto en el caso de los tipos “text” o “password” que se será al número de caracteres.
maxlength = 55 (max en Html5):
Cuando el atributo type tiene el valor “text” o “password”, con este atributo especificaremos el número máximo de caracteres que puede introducir el usuario.También tenemos su opuesto que controla el mínino de caracteres (minlength / min).
Checked: Cuando se trada de un “radio” o “checkbox”, este atributo especifica si el elemento estará activo o no.
Tipos de controles creados con INPUT
El tipo de control definido por el elemento INPUT depende del valor del atributo type:
Text: Crea un control de entrada de texto de una línea.
Password: Igual que “text”, pero el texto introducido se presentan de tal modo que se oculten los caracteres (p.ej., mediante un serie de asteriscos). Este tipo de control suele utilizarse para datos importantes tales como contraseñas. Obsérvese que el valor actual es el texto introducido por el usuario, no el texto representado por el agente de usuario.
Nota. Los diseñadores de aplicaciones deberían tener en cuenta que este mecanismo ofrece en realidad un nivel muy bajo de seguridad. Aunque la contraseña se oculte a las personas que puedan estar mirando, se transmite al servidor como texto sin enmascarar, y puede ser leído por cualquiera que tenga acceso de bajo nivel a la red.
Checkbox: Crea una casilla de verificación o “checkbox”.
Radio: Crea un radiobotón o “radio button”.
Submit: Crea un botón de envío o “submit button”.
reset: Crea un botón de reinicialización o “reset button”.
button: Crea un botón pulsador o “push button”.
hidden: Crea un control oculto o “hidden control”.
file: Crea un selector de fichero o “file select”.
SELECT y OPTION
El elemento SELECT crea un menú. Cada opción ofrecida por el menú se representa por un elemento OPTION. Un elemento SELECT debe contener al menos un elemento OPTION.
El elemento TEXTAREA
Este elemento nos proporciona un elemento para la introducción de textos multilínea. Con los atributos col y rows para definir el número de filas y de columnas.
FIELDSET y LEGEND
El elemento FIELDSET (grupo de campos) permite agrupar los elementos de nuestro formulario.
El elemento LEGEND permite poner un título con FIELDSET.
Navegación con tabulador
Otro atributo de los formularios es el tabindex, con el cual podemos definir el orden que se ira poniendo el foco (el cursor), en los elementos del formulario al pulsar la tecla de tabulación.
tabindex = número
Ejemplo:
|
1 2 3 |
<input tabindex=”1” type=”text” name=”campo1”> <input tabindex=”2” type=”text” name=”campo2”> <input tabindex=”3” type=”submit” name=”enviar”> |