HTML son las siglas en inglés de "Lenguaje de Marcado de Hipertexto"; HTML no es un lenguaje de programación sino un lenguaje de marcado y su función es estructurar una página web de manera similar a como se hace en los programas procesadores de texto como por ejemplo Microsoft Word en donde puedes escribir párrafos, títulos entre otras cosas. El propósito de esto es para que cuando personas, Bots o lectores de pantalla visitan un sitio web, puedan reconocer con facilidad y con coherencia el contenido que se muestra en cada una de las páginas del sitio web.
Elementos HTML
En HTML los elementos están compuestos por etiquetas, atributos y contenido. Algunos elementos tienen etiquetas de apertura y etiquetas de cierre, pero también hay otros elementos que no tienen una etiqueta de cierre. Para aprender sobre estos conceptos, utilizaremos como ejemplo un párrafo: para escribir un elemento siempre debemos comenzar con un paréntesis angular de apertura < seguido de una letra (o frase) que describe el elemento p (la letra "p" hace referencia a párrafo) y otro paréntesis angular de cierre > , con esto obtendríamos la etiqueta de apertura de nuestro párrafo; el siguiente paso es el contenido, esto iría después de la etiqueta de apertura Hola! ; el último paso sería la etiqueta de cierre del elemento, la etiqueta de cierre sería idéntica a la etiqueta de apertura con la única diferencia de que lleva un / después del primer paréntesis angular </p>.
Luego de esto, ya tenemos nuestro primer elemento!, se trata de un párrafo.
<p>Hola!</p>Atributos de un elemento HTML
Un elemento HTML puede o no tener atributos. Los atributos se especifican dentro de la etiqueta de apertura de un elemento y no son obligatorios para todos los elementos. La función de los atributos HTML es cambiar o afectar en el comportamiento o cómo se muestra el elemento dentro del cual el atributo es especificado. Por ejemplo:
<p style="color: white" >Hola!</p>Composición del atributo de un elemento HTML
Veamos la composición del atributo de un elemento HTML tomando como referencia el ejemplo anterior. El atributo de un elemento HTML está compuesto por el nombre del atributo style, un signo de igual = y el valor del atributo "color: white" (siempre debe ir entre comillas). Es muy importante que siempre te asegures de dejar un espacio entre el nombre del elemento y el nombre del atributo, de igual manera es importante que te asegures siempre de que el atributo del elemento sea incluido dentro de la etiqueta de apertura del elemento en lugar de la etiqueta de cierre del elemento. Los siguientes dos elementos con atributos no son válidos:
<pstyle="color: white" >Hola!</p>
<p>Hola!</p style="color: white" >Estructura de un documento HTML
Siempre que vayas a escribir HTML, debes asegurarte de incluir como mínimo los siguientes elementos (los explicaremos uno a uno en breve):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML para principiantes</title>
</head>
<body>
</body>
</html>Comenzando por <!DOCTYPE html>, esto se utiliza para especificar el tipo de documento (en este caso, sabemos que es un documento HTML); el segundo elemento, <html lang="es">, es el elemento HTML y agrupa todos los otros elementos que contiene el documento, sabemos esto porque en el ejemplo anterior la etiqueta de apertura está en la línea #2 y la etiqueta de cierre está en la línea #11, la parte lang="es" indica que el idioma del contenido de la página es español; el tercer elemento, <head> contiene cosas que se usan en la página, pero que no se muestran directamente tales como referencia a documentos con código CSS o JavaScript, metadatos, la descripción de la página que queremos que se muestre en los resultados de búsqueda en Google, entre otras cosas; los siguientes dos elementos <meta charset="UTF-8"> & <meta name="viewport" content="width=device-width, initial-scale=1.0"> son metadatos y siempre es recomendado incluirlos dentro del documento HTML; el último elemento <title>HTML para principiantes</title>, es lo que ves como titulo en la pestaña de esta publicación que te encuentras leyendo en estos momentos. Por último, está el elemento <body> y su función es servir de "contenedor" para el resto de los elementos que conforman una página.
Escribir comentarios en un documento HTML
Para escribir comentarios en un documento HTML, la sintaxis en la siguiente: <!-- Tu comentario -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML para principiantes</title>
</head>
<body>
<p>Esto es un párrafo</p>
<!-- Esto es un comentario -->
<!-- <p>Esto es un párrafo comentado</p> -->
<!-- Esto también
es un comentario -->
</body>
</html>Elementos HTML más comunes
Párrafos en HTML
El elemento párrafo se compone por una etiqueta de apertura <p> y una etiqueta de cierre </p>, en medio de ambas etiquetas va el contenido del párrafo. Ejemplo:
<p>Esto es un párrafo</p>
<p>Esto también
es un párrafo</p>Enlaces en HTML
El elemento enlace se compone por una etiqueta de apertura <a> y una etiqueta de cierre </a>, en medio de ambas etiquetas va el contenido del enlace. Para que un enlace funcione de manera correcta, se debe especificar el atributo href dentro de la etiqueta de apertura del elemento y el valor de este atributo debe ser el url al cual el enlace va a dirigir una vez el usuario haga click o seleccione el enlace. Ejemplo:
<a href="www.tiempoz.com" >Esto es un enlace</a>Listas en HTML
Listas Desordenadas
Para crear una lista "desordenada" las etiquetas son las siguientes <ul></ul> en medio de estas etiquetas, van a ir otras etiquetas <li></li> y dentro de estas últimas etiquetas es en donde debe ir el contenido de la lista. Por ejemplo:
<ul>
<li>Item #1 de la lista</li>
<li>Item #2 de la lista</li>
<li>Item #3 de la lista</li>
</ul>Listas Ordenadas
Para crear una lista "ordenada" las etiquetas son las siguientes <ol></ol> en medio de estas etiquetas, van a ir otras etiquetas <li></li> y dentro de estas últimas etiquetas es en donde debe ir el contenido de la lista. Por ejemplo:
<ol>
<li>Item #1 de la lista</li>
<li>Item #2 de la lista</li>
<li>Item #3 de la lista</li>
</ol>Encabezados en HTML
Al igual que con los programas procesadores de texto (como por ejemplo Word), en las páginas web podemos tener títulos para el contenido en general o para cierta parte del contenido; a esto se le conoce como encabezado en HTML.
HTML cuenta con seis niveles de encabezado para denotar importancia del encabezado con respecto al resto del contenido, siendo el número 1 el que se debe utilizar para el encabezado de mayor importancia dentro del contenido y el número 6 el que se debe utilizar para el encabezado de menor importancia dentro del contenido (aunque es muy poco común que llegue a ser necesario este nivel).
Ejemplos de encabezados:
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>Imágenes en HTML
En HTML una imagen es un elemento que no tiene contenido ni tampoco una etiqueta de cierre a diferencia de otros elementos como: enlances, párrafos, encabezados.
Hay dos atributos que se deben especificar:
- El primero es
"src"y aquí se debe especificar la ruta de la imagen que quieres mostrar. - El segundo es
"alt"y se usa para mostrar una descripción de la imagen para en caso tal la misma no sea mostrada (también la usan los lectores de pantalla).
Ejemplo de una imagen:
<img src=".\computadora.jpg" alt="imagen de computadora" >Tablas en HTML
El contenido de una tabla va en medio de las etiquetas <table></table> . Se usan las etiquetas <tr></tr> para especificar las filas de la tabla y dentro de las filas se usan las etiquetas <th></th> para especificar en dónde deben ir los encabezados de la tabla y las etiquetas <td></td> para las filas que contienen el contenido de la tabla. Por ejemplo:
<table>
<!-- Aquí va el encabezado de las columnas de la tabla -->
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<!-- Estas son las filas de la tabla -->
<tr>
<td>Tiempoz</td>
<td>Gonzalez</td>
</tr>
<tr>
<td>Roberto</td>
<td>Ulloa</td>
</tr>
</table>Formularios en HTML
Todos los elementos del formulario van dentro de las etiquetas <form></form>, dentro de la etiqueta de apertura del elemento formulario se deben especificar los siguientes atributos:
- Atributo
action: se debe especificar un url desde el cual a través de un lenguaje de programación (PHP, Python, GO, etc) desde el servidor, se procesará la información que es enviada a través del formulario. - Atributo
method: se especifica el tipo de método a utilizar para enviar el formulario (POST, GET, PUT, etc).
En el formulario se especifican otros elementos, entre ellos podemos encontrar:
- Elemento
<label></label>: Sirve a manera de descripción para los campos del formulario. - Elemento
<input>: Son los campos del formulario.
<form action="/pagina_random.php" method="POST">
<label for="primer_nombre">Nombre:</label>
<input type="text" id="primer_nombre" name="fname" placeholder="Extraterrestre">
<input type="submit" value="Enviar" >
</form>Elementos "Div" en HTML
Un elemento Div está compuesto por etiquetas de apertura y de cierre <div></div>, su función es agrupar distintos elementos de manera tal que su manipulación visual a través de CSS o funcional a través de JavaScript sea mucho más fácil.
<div>
<p>Esto es un párrafo dentro de un div</p>
<h1>Esto es un encabezado dentro de un div</h1>
<!-- Un formulario dentro de un div -->
<form action="/pagina_random.php" method="POST">
<label for="primer_nombre">Nombre:</label>
<input type="text" id="primer_nombre" name="fname" placeholder="Extraterrestre">
<input type="submit" value="Enviar" >
</form>
</div>Incluir CSS en documentos HTML
Podemos hacer referencia a documentos que contienen código CSS desde documentos HTML a través del elemento <link>, este elemento se incluye dentro del elemento <head> y no tiene una etiqueta de cierre. El elemento <link> tiene dos atributos:
rel="stylesheet"indica que se hace referencia a un documento que contiene código CSS.href="/style.css"se usa para especificar la ubicación del documento que queremos utilizar.
<head>
<link rel="stylesheet" href="/style.css">
</head>Incluir JavaScript en documentos HTML
Al igual que como podemos incluir o hacer referencia a otros documentos que contienen código CSS desde un documento HTML, también podemos incluir o hacer referencia a documentos que contienen código JavaScript desde un documento HTML. Es común incluir código JavaScript en un documento HTML de dos formas:
- Dentro del elemento
<head>. - Dentro del elemento
<body>, al final de todos los demás elementos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML para principiantes</title>
<!-- Aquí hacemos referencia al documento que contiene el código JavaScript -->
<script src="./main.js"></script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML para principiantes</title>
</head>
<body>
<!-- Aquí irían otros elementos HTML que forman parte de la página -->
<!-- Aquí hacemos referencia al documento que contiene el código JavaScript -->
<script src="./main.js"></script>
</body>
</html>