Introducción a HTML
Estructura básica de HTML
La composición de un documento HTML se construye a base de etiquetas HTML. Una etiqueta
HTML es un fragmento de código que permite crear elementos dentro del documento, estos
elementos pueden ser; una imagen, un párrafo, un video u cualquier otro compatible con el
estándar.
Una estructura básica en HTML se compone principalmente de 3 grandes etiquetas estructurales:
HTML, HEAD y BODY.
1.¿ Qué es HTML?
Es un lenguaje de marcado que básicamente se encarga de la estructura de una página web, es
decir indica el orden que debe llevar el contenido del documento.
2.¿Qué son las etiquetas HTML?
Las etiquetas son marcas que pueden resaltar o destacar una parte del texto dentro del código o
agrupar contenido de este mismo, para ir formando la estructura de la página, lo cual genera
orden.
3.¿Cuáles son las etiquetas básicas para crear un documento HTML?
Para crear un documento HTML sencillo o básico debe tener tres elementos contenedores y una
etiqueta:
!DOCTYPE html>: Indica de que tipo es el documento y/o la versión, ya que puede ser HTML o
XML y siempre va al principio de la página.
<html>: Es un elemento que agrupa todo el contenido del documento, menos la etiqueta !
DOCTYPE.
<head>: Es usado como encabezado en el podemos poner la caja de búsqueda, el logo, un título
entre otros, aunque también incluye información que el usuario no llega a ver.
<body>: Es el cuerpo de la página, en el podemos visualizar todo el contenido que tenemos para
ofrecer de nuestra web, como ser imágenes, enlaces, videos, colores y tamaño del texto, el texto
como tal, etc.
Datos extra:
● Un documento HTML tiene la siguiente extensión .html o .htm.
● Podemos crear nuestro documento en cualquier editor de texto como Gedit en Linux
o Bloc de notas en Windows.
● No podemos olvidar que después de ponerle nombre a nuestro archivo debemos
agregarle la extensión .html.
Una página web es un documento adaptado para ser leído por los navegadores.
Las páginas webs están escritas en un lenguaje llamado "HTML", que es precisamente, el
lenguaje que son capaces de interpretar los navegadores.
Este lenguaje está basado en "etiquetas", o también llamadas "marcas" o "tags" en ingles.
Las etiquetas son instrucciones o marcas que definen las diferentes partes de una página web.
Todas las etiquetas tienen un inicio y un final que definen las partes del documento o página
web donde hacen efecto esas etiquetas.
Realmente una página web no es más que un documento definido por etiquetas.
Ejemplo de un programa en HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h1>My first web</h1>
<p>It is my first website, here is my list to buy</p>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Lemon</li>
</ul>
</body>
</html>
Poner el doctype es declarar el tipo de documento que escribimos y la estructura que hemos
seguido para escribir el documento.
La última versión de html es la versión HTML5 y es por eso el único doctype que necesitamos.
Es muy simple, solo hay que escribir lo primero de todo, recuerda incluso antes que <html> lo
siguiente:
<!DOCTYPE html>
Cuando hablábamos de la cabecera o head decíamos que dentro de ella se escribía el título y
otras informaciones.
Las otras informaciones se escriben dentro del head en forma de las llamadas "metas tags".
Una meta tag es un fragmento de código html que le da información a los buscadores, como
por ejemplo a google.
¿Qué información le da? Veámoslo con los 3 ejemplos más usados:
<meta content="es" name="language" /> Indica el lenguaje de la página "es" significa escrita
en español.
<meta name="description" content="Aquí se pone la descripción abreviada del contenido de la
página web" /> Para indicar el contenido de nuestra web.
Esto es lo que aparece cuando buscamos en un buscador y aparece nuestra página debajo del
título.
<meta name="keywords" content="partes web, página web, estructura web," /> Las palabras
claves con las que nos gustaría que la gente encontrara nuestra página al buscar en un
buscador separadas por una coma.
Como ves estas metas tags son muy importantes que las pongas en tu página web para que tu
web aparezca de la forma correcta en los buscadores.
¿Cómo quedaría nuestra web con las nuevas partes?
<!DOCTYPE html>
<html>
<head>
<meta content="es" name="language" />
<meta name="description" content="Nuestra primera página web. Esto es un ejemplo muy
sencillo." />
<meta name="keywords" content="web, html, partes web, página web, estructura web," />
<title>Esta es mi página web</title>
</head>
<body>
¡Muy buenas! ¡Vamos hacer una página web!
</body>
</html>
Si ahora la visualizas en tu navegador verás que no ha cambiado nada, eso sí, los buscadores
entenderán mucho mejor nuestra página web.