HTML 101: Conceptos Básicos
HTML (Hypertext Markup Language) es un lenguaje de marcado utilizado para crear y estructurar contenido en la web. Con HTML, los desarrolladores web pueden crear páginas web con texto, imágenes, videos y otros elementos multimedia para ser visualizados en cualquier dispositivo que tenga acceso a internet.
1. - Evolución y Versiones de HTML
La primera versión de HTML, conocida como HTML 1.0, fue lanzada en 1993. Desde entonces, ha habido varias versiones y actualizaciones, incluyendo HTML 2.0, HTML 3.2, HTML 4.01, XHTML 1.0, HTML5 y la versión actual HTML 5.3.
2. - Conceptos básicos
HTML utiliza etiquetas para marcar el contenido de una página web. Las etiquetas son códigos que indican al navegador web cómo mostrar el contenido. Cada etiqueta comienza con el símbolo "<" y termina con el símbolo ">". Las etiquetas también pueden contener atributos que proporcionan información adicional sobre cómo se debe mostrar el contenido.
3. - Estructura
Un documento HTML consta de dos partes: la declaración y el cuerpo del documento. La declaración se utiliza para especificar el tipo de documento y la versión de HTML que se está utilizando. El cuerpo del documento contiene todo el contenido de la página web.
Prólogo: Contiene la declaración del tipo de documento donde se le indica al navegador el tipo de documento que se va a iniciar y la versión de HTML utilizada para la codificación del mismo.
Ejemplar: Delimitado por las etiquetas <html> y </html>. Puede dividirse en dos partes:
- La cabecera, formada por las etiquetas <head> y </head>, contiene información sobre el título de la página, el autor, palabras clave, etc. Es obligatorio incluir el título del documento, para ello se usan las etiquetas <title> y </title>.
- El cuerpo, contiene la información que se va a presentar en la pantalla. Delimitado por las etiquetas <body> y </body>.
 |
| Estructura básica de un documento HTML |
4. - Elementos HTML
Un elemento HTML está formado por:
- Una etiqueta de apertura.
- Cero o más atributos.
- Opcionalmente, un texto, encerrado por la etiqueta.
- Una etiqueta de cierre.
4.1 - Encabezados y párrafos
Los encabezados se utilizan para dar formato y estructura al contenido de una página web. Hay seis niveles de encabezados, desde <h1> (el más grande) hasta <h6> (el más pequeño).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Párrafos y encabezadaos</title>
</head>
<body>
<h1>Equipos</h1>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
<h2>Recién ascendidos</h2>
<p>...</p>
<h1>Jugadores</h1>
<p>...</p>
</body>
</html>Los párrafos <p> se utilizan para agrupar el contenido de texto en bloques.
<p>Texto del párrafo </p>4.1.1 - Comentarios:
Para introducir un comentario en HTML utilizaremos: <!-- Comentario -->.
<!-- comentario -->4.2 - Semántica a nivel de texto:
Algunos elementos útiles son:
- <a>: para definir hipervínculos.
- <strong>: para representar que el texto marcado es importante.
- <em>: para indicar énfasis.
- <br>: introduce un salto de línea.
- <small>: para comentarios accesorios, como lo que suelen aparecer en letra pequeña.
Elemento <a>
Este elemento hace que el texto encerrado entre las etiquetas sea un hipervínculo.
El atributo más importante es href, que indica la URL del vínculo, A veces se usa href="#" para referirse a la misma página en la que aparece el vínculo.
El atributo target permite elegir donde se abrirá el vínculo. Los valores más usados son:
- target = "_blank", para que se abra en una ventana/pestaña nueva.
- target = "_self", para que se abra en la misma. Es el valor por defecto.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Semántica a nivel de texto</title>
</head>
<body>
Texto marcado como <strong>importante</strong>.
<br>
Texto con <em>énfasis</em>
<br>
Texto marcado <small> con el elemento small </small>
<br>
Pulsa <a href="https://www.w3.org/">aquí</a> para ir a la página del W3C.
</body>
</html>4.3 - Elementos de listas:
HTML permite crear listas ordenadas y no ordenadas con las etiquetas <ul> y <ol>. Las listas se utilizan para agrupar elementos relacionados y mostrarlos en forma de lista. Los elementos de una lista se definen con la etiqueta <li>.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Listas</title>
</head>
<body>
<h1>Ejemplo de lista desordenada: Módulos de 1º de ASIR</h1>
<ul>
<li>Fundamentos de Hardware</li>
<li>Gestión de Bases de Datos</li>
</ul>
<h1>Ejemplos de listas ordenadas: Módulos de 1º de ASIR</h1>
Comenzando en 1
<ol>
<li>Fundamentos de Hardware</li>
<li>Gestión de Bases de Datos</li>
</ol>
Comenzando en 4
<ol start = "4">
<li>Fundamentos de Hardware</li>
<li>Gestión de Bases de Datos</li>
</ol>
<h1>Ejemplo de lista de definición: Módulos de 1º de ASIR</h1>
<dl>
<dt>Fundamentos de Hardware</dt>
<dd>Componentes fÍsicos de un ordenador</dd>
<dt>Gestión de Bases de Datos</dt>
<dd>Diseño y uso de bases de datos relacionales</dd>
</dl>
</body>
</html>4.4 - Elementos de tablas:
Las tablas se utilizan para mostrar datos en forma de filas y columnas. Las etiquetas principales de las tablas son <table> para definir la tabla, <tr> para definir una fila y <td> para definir una celda. También se pueden utilizar <th> para definir una celda de encabezado.
table | Delimita el contenido de una tabla. |
tr | Delimita cada una de las líneas de la tabla. |
td | Delimita el contenido de cada celda de la tabla. |
colgroup | Permite agrupar columnas. |
tbody | Permite agrupar líneas de la tabla. |
thead | Define la línea cabecera de la tabla. |
th | Delimita cada una de las celdas de la cabecera |
tfoot | Define la fila pie de la tabla. |
caption | Para añadir una leyenda a la tabla |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tablas</title>
</head>
<body>
<table>
<caption>Tabla de socios</caption>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>Puertas</td>
<td>54</td>
</tr>
<tr>
<td>Eva</td>
<td>Montes</td>
<td>44</td>
</tr>
</table>
</body>
</html>4.5 - Elementos de formularios:
La apertura y cierre de un formulario se hace mediante el elemento <form>.
La etiqueta permite especificar una serie de atributos para ajustar sus características. Los principales son:
- name– nombre del formulario
- action– Acción que se ejecuta cuando se pulsa el botón de enviar formulario
- enctype– Formato en el que se enviarán los valores del formulario, depende del contenido se enviarán de una u otra manera.
- method– Método de envío de la transmisión de datos, se puede elegir entre dos métodos GET y POST.
| GET | POST |
|---|---|
|
|
4.5.1 - Campos de formulario - input:
El elemento <input> (que no tiene etiqueta de cierre) se puede usar para varios tipos de control, según el valor que tome el atributo type. Por ejemplo, para type="text", que es el valor por defecto, se obtiene un campo de texto. Con type = "radio", un botón de radio.
Además, de type, los atributos más importantes de la etiqueta son:
- name –nombre del campo
- size – número de caracteres visibles en el campo. Por defecto 20.
- maxlengh – número máximo de caracteres que el usuario podrá introducir en el campo
- value – valor por defecto del campo de texto
- placeholder – valor sugerido, se presenta en color gris y desaparece al hacer foco con el cursor en el campo
- readonly – El valor del campo no puede ser modificado por el usuario
- autofocus – Sitúa el cursor del ratón en el campo una vez cargada la página
- required – No se podrá enviar el formulario hasta que el campo esté cumplimentado
<input type="text" name="usuario" size="30" maxlengh="20" placeholder="Escriba aquí el nombre de usuario" required>4.5.2 - Campos de formulario - Área de texto:
Permite recoger información abierta del usuario pero permitiendo un mayor número de caracteres. Se especifica mediante la etiqueta <textarea>.
Para especificar un valor previo en el campo debe escribirse entre las etiquetas <textarea> de apertura y cierre.
Atributos principales:
- name - nombre del campo
- rows – número de filas. Reemplazable por la propiedad CSS height
- cols – número de columnas. Reemplazable por la propiedad CSS width
También puede utilizar algunos de los atributos especificados para input:
- placeholder
- readonly
- autofocus
- maxlength
- required
Por ejemplo, la siguiente línea de código HTML:
Describa a continuación sus intereses: <br> <textarea name="area"></textarea> 4.5.3 - Campos de formulario - Lista desplegable:
Permite que el usuario seleccione un valor entre diferentes opciones.
Etiquetas:
- <select> para definir la lista
- <option> para cada una de las opciones
Atributos - <select>:
- name– Nombre del elemento
- size– Número de elementos de la lista desplegable que se mostrarán
- multiple– Permite seleccionar varias opciones manteniendo pulsada la tecla Ctrl al seleccionarla.
Atributos - <option>:
- selected– campo que aparece seleccionado por defecto
- value– valor que se transmite cuando se envía el formulario
Por último seleccione el sistema operativo de su ordenador:
<select name="Sistema operativo favorito">
<option value="Linux">Linux </option>
<option value="Windows">Windows </option>
<option value="MacOS">Mac OS </option>
</select>4.5.4 - Campos de formulario - checkbox:
Permite que el usuario indique si está conforme con una o varias opciones.
Etiqueta:
<input type=“checkbox”>
Atributos:
- name– obligatorio
- checked– el atributo aparece marcado
- value– valor que se transmitirá al enviar el formulario con ese campo seleccionado
Estoy conforme con la política de privacidad de la página
<input type="checkbox" name"conforme" checked>4.5.4.1 - Botones de Formulario:
Permite enviar el formulario a un destinatario, por ejemplo a una página determinada en un servidor web para que procese los datos o una dirección de correo electrónico. Todo dependiendo del valor del atributo action de la etiqueta de apertura de formulario.
Etiqueta:
<input type=“submit”>
Atributos:
- value– permite indicar el texto del botón
Botón de anulación
Borra el contenido de los campos cumplimentados en el formulario
Etiqueta:
<input type=“reset”>
Atributos:
- value– permite indicar el texto del botón
4.6 - Multimedia:
img | Permite insertar una imagen en una página web. |
audio | Para insertar audio |
video | Para insertar vídeo |
object | Para incrustar contenido multimedia (audio, vídeo, ficheros PDF, applets...) |
Elemento <img>
Este elemento se usa para insertar una imagen. No tiene etiqueta de cierre. Los atributos más importante son:
- src. Especifica la ruta de la imagen. Puede ser local, o una URL cualquiera. Los formatos soportados dependen de cada navegador, pero en general se pueden utilizar JPG, PNG y GIF, entre otros.
- alt. Texto alternativo. Se usa si no se puede cargar la imagen o para los lectores de pantalla. Es obligatorio.
- height. Altura. Si no se especifica, se escoge el tamaño original. Si se especifica, se escala. Es de los pocos casos en HTML5 en que un atributo tiene información de representación.
- width. Anchura de la imagen. Como la anterior.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Imágenes</title>
</head>
<body>
<p> Imagen en internet </p>
<img src='https://i.blogs.es/aa1b9a/luna-100mpx/450_1000.jpg' alt='la luna'>
<p>Imagen no encontrada</p>
<img src='http://rutaincorrecta.jpg' alt='la luna'>
<p>Imagen local</p>
<img src='index.jpeg' alt='logo'>
</body>
</html>4.7 - Secciones y etiquetas semánticas
El elemento <div> se usa para agrupar otros elementos en secciones, tanto para organizar el contenido como para posicionarlo mediante hojas de estilo.
En HTML5 aparecieron varias etiquetas semánticas para estructurar el contenido de la página, y por tanto solo se debería usar <div> cuando no haya una etiqueta más apropiada
Estas etiquetas son:
- <header>: Contiene contenido introductorio para la sección de la página en que aparece. Es habitual que contenga los elementos de encabezado, h1,...,h6.
- <aside>: Se utiliza para contenido parcialmente relacionado con el contenido principal. No tiene por qué mostrarse en un lateral.
- <footer>: Contiene información sobre la sección correspondiente, como el autor. No tiene que estar necesariamente en la parte de inferior.
- <section>: Una sección genérica dentro del documento.
- <article>: Representa un elemento que se puede distribuir de manera independiente o reutilizable.
- <nav>: Contiene vínculos, internos o externos. Suele usarse para la barra de navegación.
5. - Conclusiones
En resumen, HTML es un lenguaje de marcado esencial para la creación de páginas web. Es importante conocer los conceptos básicos de HTML, como la estructura de un documento HTML, los elementos de la sección de cabecera, los encabezados y los párrafos, la semántica a nivel de texto, los elementos de listas, los elementos de tablas, los elementos de formularios y los elementos multimedia. Además, las etiquetas semánticas como <header>, <nav>, <section> y <article> pueden ayudar a los desarrolladores web a estructurar y dar sentido al contenido de una página web.
Comentarios
Publicar un comentario