HTML significa Lenguaje de Marcado de Hipertexto.
Un lenguaje de marcado es un lenguaje que permite codificar un documento para dar estructura a un texto mediante las etiquetas.
El hipertexto es una forma de acceder a otros documentos de una forma no lineal sino teniendo la posibilidad de ir a otro documento mediante un enlace de tal modo que puedes acceder a cualquier página web desde cualquier lugar de la web. Por ejemplo alguna vez has estado en alguna página y has visto que hay un texto que cuando presionamos sobre el nos manda a otra página web, pues ese es el hipertexto: son textos que nos mandan a otra página.
HTML sirve para crear páginas web, y define la estructura y contenido de nuestra página web. HTML es fácil de aprender.
Las etiquetas son instrucciones que describen el contenido y características de la pagina web. Estas etiquetas las interpreta el navegador para mostrar el contenido. Las etiquetas estan delimitadas por los símbolos menor que y mayor que (< >). Por ejemplo la etiqueta <p> le dice al navegador que muestre en la pantalla un párrafo.
La mayoría de las etiquetas vienen en pares: Etiqueta de inicio y etiqueta de cierre. Por ejemplo: <p>Mi párrafo</p> Con la diferencia de que la etiqueta de cierre tiene una diagonal (/)
Los elementos son los bloques de construccion de paginas web y son la parte básica de todo documento HTML. Los elementos tienen una estructura básica: etiqueta de inicio, contenido, y etiqueta de cierre y opcionalmente tienen atributos.
Por ejemplo <p>Texto</p> ----- Todo eso es un elemento
| Etiqueta de inicio | Contenido | Etiqueta de cierre |
|---|---|---|
| <p> | Texto | </p> |
Los atributos nos sirven para dar una información adicional a una etiqueta. Vimos anteriormente que las etiquetas nos sirven para estructurar el contenido de nuestra web y darle características pero los atributos especifican una acción concreta por ejemplo la etiqueta <a> nos sirve para insertar un enlace o hipertexto entonces esa etiqueta necesita algo que especifique su destino. Entonces el atributo href especifica la ruta:
<a href="https://google.com/">Ir a Google</a>
Este elemento quedaria asi: Ir a Google
Si no hubiéramos puesto el atributo href el elemento no hace nada porque no especifica esta característica concreta a donde nos llevara ese enlace
La mayoría de los atributos vienen en pares nombre-valor (el valor se pone entre comillas ""). Por ejemplo atributo="valor"
Los atributos siempre estan en la etiqueta de inicio
HTML se puede escribir en cualquier editor de texto plano, es decir sin formato como por ejemplo el bloc de notas de Windows o cualquier otro editor como Sublime Text, Atom, o Brackets Editor. No escribas código HTML en programas como Microsoft Word porque estos son procesadores de texto y no editores.
Yo recomiendo usar el bloc de notas de Windows o TextEdit para los que tienen una Mac.
Cuando escribas código html SIEMPRE GUARDA EL ARCHIVO CON EXTENSIÓN .HTML por que asi especificas que ese archivo esta escrito en HTML.
La estructura básica de un documento HTML es la siguiente
<!DOCTYPE html>
<html>
<head>
<title>título</title>
</head>
<body>
<p>párrafo.</p>
</body>
</html>
Vamos a ver las partes de este documento
<!DOCTYPE html> --- Significa DOCUMENT TYPE y especifica el tipo de documento en este caso tipo de documento html
<html> --- Define el inicio del documento html
<head> --- Define la cabecera del documento html
<title> --- Define el título del documento
<body> --- Define el cuerpo del documento html
¿Qué es la cabecera? La cabecera del documento html se define mediante el elemento "head" y contiene información sobre el documento. Esta información no se muestra directamente a la persona o usuario que esta viendo la página
<title> Define el título del documento este título debe estar dentro del elemento "head". Este título se muestra en la pestaña del navegador:
¿Qué es el cuerpo? El cuerpo del documento html se define mediante el elemento "body" en este esta todo el contenido de nuestra web como párrafos, imagenes, enlaces, etc esto se muestra en la pantalla del navegador:
El bloc de notas (Windows) o TextEdit (Mac) es una buena opcion para aprender. Entonces codificamos en el editor correspondiente la estructura básica de un documento HTML:
Posteriormente lo guardamos con extensión .html y con codificacion utf-8 para evitar problemas de caracteres
Luego buscamos el archivo en el explorador de archivos y lo abrimos con google chrome o tu navegador preferido y veras tu página
Los párrafos son textos que tratan de un mismo tema y se definen en HTML con el elemento "p". Por ejemplo: <p>párrafo</p>
Los encabezados son títulos de un articulo, tema o contenido, por ejemplo el encabezado de este tema es "Encabezados en HTML". Estos se definen con varios elementos: "h1", "h2", "h3", "h4", "h5" y "h6". El título de mayor importacia es "h1" y el de menor importancia es "h6".