Aprender HTML es un excelente punto partida si deseas empezar a desarrollar proyectos web.
HTML o Lenguaje de Marcado de Hipertexto (HyperText Markup Language), es un lenguaje de marcas (no es un lenguaje de programación) que se utiliza para crear tanto las estructura como el contenido de las páginas web, de ahí la gran importancia de aprender a utilizarlo.
Con HTML conseguimos generar la estructura jerárquica de la página web, crear su contenido mientras que el diseño o presentación visual lo realizamos con CSS (Cascading Style Sheets) y la interacción dinámica con la página la realizamos con JavaScript.
¿Qué vamos a necesitar?
- Un ordenador, aunque nos parezca una obviedad. Hoy en día utilizamos muchísimo los smartphones y en menor medida las tablets dejando de lado los ordenadores, pero para desarrollar correctamente sitios web es importante utilizar uno, el sistema operativo eso ya va en gustos. Nosotros, por ejemplo, utilizamos la Raspberry Pi 400
- Un IDE para poder escribir código. Nuestro caballo ganador es el Visual Studio Code , pero hay una amplia variedad de IDE según gustos , elige el que más se adapte a tus preferencias
- También necesitarás un navegador web para poder probar el código que vas implementando.
- Muy recomendable disponer de un sistema de control de versiones, uno de los más populares y usados es Git aunque si estás empezando en este mundillo y aún no sabes como funciona tranquilo, puedes revisar esta entrada
Estructura documento HTML
Todo documento HTML para que funcione correctamente requiere de una determinada estructura pero para ello primero que nada crearemos una carpeta donde alojar nuestro proyecto dentro la cual iremos añadiendo los archivos necesarios para que pueda funcionar.
Una vez creada la carpeta la abriremos con el Visual Studio Code y añadiremos un nuevo archivo al que nombraremos index.html
Es en este archivo index.html donde vamos a trabajar
Antes que nada debemos saber que los documentos HTML funcionan con etiquetas , con ellas podemos estructurar y definir el contenido en un documento HTML. Cada etiqueta le indica al navegador cómo debe de dar formato al texto y como tiene que definir los elementos de la página web.
Una etiqueta consta de tres partes:
- Etiqueta de apertura , se indica con <>
- El contenido, que es lo que queremos que se muestre
- Etiqueta de cierre, lo indicamos con </>
Hay que tener en cuenta que hay algunas etiquetas que no se cierran, normalmente se suelen dar en metadatos o saltos de línea. Además no se puede utilizar cualquier palabra como etiqueta (en el ejemplo anterior, es incorrecto utilizar la etiqueta «etiqueta») ya existen una serie de etiquetas concretas, cada una de ellas tienen unas características concretas y tienen una finalidad.
Tras ello vamos a detallar la estructura que sigue todo documento HTML
En primer lugar , al principio del documento HTML debe aparecer la etiqueta <!DOCTYPE html>, incluso antes del propio código fuente. Con ello indicamos el tipo de documento que tiene que abrir además de que sintaxis y gramática utiliza su código fuente.
A continuación incluimos la etiqueta <html> donde vamos a añadir el contenido de nuestro documento. Añadimos el header o cabecera de la página para ello utilizamos la etiqueta <head> que es donde se añaden las etiquetas de metadatos, es decir, son unas etiquetas que establecen ciertos datos que no tienen que verse de forma visual.
Tras el cierre de la etiqueta </head> añadimos la etiqueta <body> dentro de la cuál estarán todos los elementos visuales de la página, siendo una de las partes más importantes de una página web.
Etiquetas básicas
Hay una gran cantidad de etiquetas, pero las más utilizadas son
- <!DOCTYPE>: Tal como hemos comentado anteriormente con esta etiqueta le indicamos al navegador el tipo de documento que tiene que abrir además de que sintaxis y gramática utiliza su código fuente.
- <html>: Con ella definimos el inicio y el final de la página a mostrar.
- <head> : Con esta etiqueta podemos definir la sección de encabezado de la página, es aquí donde incluimos el título de la página, los metadatos y también scripts.
- <body>: Nos permite definir la sección del cuerpo de la página web, donde se incluyen todos los elementos que se mostrarán en la misma.
- <title> : Con ello podemos definir el título de la página web que se mostrará en la pestaña del navegador.
- <h1> a <h6>: Nos permiten definir los encabezados o títulos.
- <a>: Nos permite crear un enlace en el que poder clicar para ir a otra página web o a una sección diferente de la misma página.
- <img>: Permite añádir una imagen
- <p> : Con esta etiqueta estamos creando un párrafo
- <b>: Con ella podemos dar formato al texto que contiene transformándolo en negrita
- <i>: Sería como en el caso anterior pero en lugar de negrita lo que da es un formato el texto en cursiva
- <u>: Es otra etiqueta para dar formato al texto, en este caso subrayado
- <br>: Creeamos un salto de línea dejando el espacio en blanco
¿Cómo ver los cambios de la página web?
Conforme vayas incluyendo etiquetas junto con su contenido dentro del archivo index.html podrás ir viendo la evolución de tu página web, para ello sólo es necesario que accedas a la carpeta donde tienes tu proyecto web y selecciones abrir el fichero con un navegador.
Valuable information. Lucky me I found your web site by accident, and I am shocked why this accident did not happened earlier! I bookmarked it.