¿Qué es HTML?
HTML, cuyas siglas significan Lenguaje de Marcado de Hipertexto (Hypertext
Markup Languaje), es un lenguaje bastante simple. Consiste en distintos
elementos que utilizamos para estructurar una pagina web.
HTML es el lenguaje con el que se escriben todas las paginas web.
No es un lenguaje de programacion.
Su funcion es etiquetar los elementos de una pagina web (título, parrafo,
imagen, enlace).
Para poder entender cualquier pagina solo hay que aprender los principios
basicos de HTML.
Para ver el codigo fuente de una pagina web solo hay que dar clic derecho y
escoger la opcion Inspeccionar.
¿Qué son los elementos HTML?
El elemento normalmente comienza con una etiqueta de apertura, la cual consiste
en el nombre del elemento. Se rodean (Es contenida) por corchetes angulares de
apertura y cierre. La etiqueta de apertura indica donde comienza el elemento.
De igual manera que la etiqueta de apertura, la etiqueta de cierre tambien esta
contenida por corchetes angulares de apertura y cierre. Pero tambien incluye una
barra antes del nombre del elemento.
Todo lo que esta dentro de las etiquetas de apertura y cierre es el contenido.
Pero no todos los elementos siguen este patron. Les decimos elementos vacíos a
aquellos que no siguen este patron. Estos unicamente consisten en una etiqueta
simple o una etiqueta de apertura que no puede tener ningun contenido. Estos
elementos se utilizan normalmente para insertar algo en el documento.
Por ejemplo, el elemento <img> es utilizado para insertar un archivo de imagen, o
el elemento <input> es utilizado para insertar un campo de datos en la pagina.
<img src="[Link]
width="50">
En el ejemplo de arriba, el elemento <img> solo consiste en una etiqueta que no
tiene ningun contenido. Este elemento es usado para insertar en el documento un
archivo de imagen
Como anidar elementos HTML
Los elementos pueden ser colocados dentro de otros elementos. Esto se llama
Anidamiento. En el ejemplo de arriba, dentro del elemento <div> tenemos un
elemento <h4> y un elemento <ul> o elemento de lista no ordenado. De manera
similar dentro del elemento <ul> hay 3 elementos <li> o elemento de lista.
El anidamiento basico es bastante sencillo de entender. Pero cuando la pagina crece,
el anidamiento puede complicarse.
Por lo tanto, antes de trabajar con HTML, se debe pensar sobre la estructura de
diseno que le gustaría tener.
¿Qué son los atributos HTML?
Los elementos tambien tienen atributos que contienen informacion adicional acerca
del elemento que no aparecera en el contenido.
En el ejemplo de arriba, el elemento <img> tiene 2 atributos: src u origen para
especificar la ruta de la imagen, y width para especificar el ancho de la imagen en
pixeles.
Con este ejemplo, puedes ver las siguientes características o atributos:
Hay un espacio entre atributo y el nombre del elemento
Los atributos se agregan en la etiqueta de apertura
Los elementos pueden tener varios atributos
Los atributos tienen un nombre y un valor: nombre=“valor”
Elementos comunes de HTML
Existen en total más de 100 elementos. Pero 90% del tiempo sólo vas a utilizar
alrededor de 20 de los más comunes. Se han colocado en 5 grupos:
Elementos de sección
<div>, <span>, <header>, <footer>, <nav>, <main>, <section>
Estos elementos se utilizan para organizar el contenido en diferentes secciones. Por
lo general son muy obvios, por ejemplo<header> representa a un grupo de la seccion
de introduccion y navegacion, <nav> representa la seccion que contiene los enlaces
de navegacion, etcetera.
Contenido de texto
<h1> a <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>
Estos elementos se utilizan para organizar contenido o bloques de texto. Son
importantes para la accesibilidad y posicionamiento en buscadores. Estos le
comunican al navegador el proposito o estructura del contenido.
Formularios
<form>, <input>, <button>, <label>
Estos elementos pueden utilizarse juntos para crear formularios que los usuarios
pueden completar y enviar.
Imágenes y enlaces
<img>, <a>
Estos elementos se utilizan para insertar una imagen o crear un hipervínculo.
Otros
<br>, <hr>
Estos elementos se utilizan para agregar un salto de línea y una línea separadora
respectivamente.
¿Cómo crear un documento HTML?
Primero, abramos Visual Studio Code (o tu editor de codigo favorito). En la carpeta
que elijas, crea un nuevo archivo y dale el nombre de [Link].
En el archivo [Link], escribe! (signo de exclamacion) y presiona el tabulador o
el enter. Vas a ver algo como esto:
Esto es el codigo mínimo que un documento HTML debe tener para armar un sitio
web. Aquí tenemos:
1. <!DOCTYPE html>: Primero tenemos Doctype. Por alguna extrana razon
historica tenemos que incluir el doctype para que todo funcione
correctamente.
2. <html lang="en"></html>: El elemento<html> envuelve todo el contenido de
la pagina, tambien conocido como el elemento raíz. Siempre debemos incluir
el atributo lang para declarar el idioma de la pagina.
3. <head></head>: El elemento <head> es un contenedor para todo lo que
quieras incluir pero no contenido que muestres a tus usuarios.
4. <meta charset="UTF-8">: El primer elemento meta es utilizado para
establecer el set de caracteres para que sea UTF-8, el cual incluye la mayoría
de los caracteres del lenguaje escrito. De esta manera el navegador
reconocera los caracteres con tildes y las enes que en algunas paginas no los
identifica.
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">:
El segundo elemento meta especifica el viewport del navegador. Esta
configuracion es para un sitio web optimizado para dispositivos moviles.
6. <title>Document</title>: Este es el elemento <title>. Establece el título de la
pagina.
7. <body></body>: El elemento <body> contiene todo el contenido en la
pagina.
Encabezados (heading)
Hay una serie de etiquetas que comienzan con la letra h a la que le sigue un numero
del 1 al 6. Sirven para marcar parrafos de forma que se consideraran títulos del texto.
De modo que el elemento h1 marcara títulos de primer nivel, h2 de segundo nivel,…
y así hasta h6 (sexto nivel).
Crear enlaces en las páginas
Enlaces externos
La etiqueta que permite realizar enlaces es la etiqueta a. El atributo href permite
indicar la URL a la que se realiza el salto. Ejemplo:
<a href=”[Link] Tiberio </a>
La palabra Tiberio estará remarcada de modo que al hacer clic en ella saltaremos a
la URL [Link]
Enlaces locales o internos
En ese caso no se indica una URL global tal cual se explico anteriormente, sino que
se indica un salto local. Es decir, un salto a un recurso en nuestro propio sitio web
que toma como punto de partida el directorio(carpeta) en el que se encuentra la
pagina web a la que desea enlazar.
El enlace usando una ruta local sería:
<a href=”[Link]”>Ver segunda noticia</a>
Otros ejemplos:
Salto a la página [Link] que estará en el mismo directorio que la actual:
<a href=”[Link]”>Tiberio</a>
Salto a la página [Link] que estará dentro del directorio emperadores:
<a href=”emperadores/[Link]”>Tiberio</a>
Formularios
Un formulario es una etiqueta <form> y en su interior algunos elementos <input
type="text"> o <input type="password"> finalizado con un boton <input
type="submit"> y ya esta. A continuacion, explicaremos algunas de estas novedades.
La etiqueta <input> especifica un campo de entrada donde el usuario puede
introducir datos. Bueno, en HTML5 vemos que tiene varios tipos de entrada o
<input>. Estas nuevas características permiten un mejor control de entrada y
validacion.
<input type=text>: especifica que el usuario debe de llenar el campo con texto
<input type=password>: especifica que el usuario debe de llenar el campo con una
contrasena
<input type=email>: especifica que el usuario debe de llenar el campo con un email
valido
<input type=url>: especifica que el usuario debe de llenar el campo con url
<input type=date>: especifica que el usuario debe de llenar el campo con una fecha.
<input type=month>: especifica que el usuario debe de llenar el campo con uno de
los meses.
<input type=file>: especifica que el usuario debe de llenar el campo con un archivo.
<input type=submit>: especifica que el usuario puede concluir y enviar el
formulario.
Texto como PLACEHOLDER: Placeholder es un atributo que se utiliza dentro de
los campos input. Sirve para mostrar un texto dentro del input siempre y cuando el
campo este vacío o no este senalado. En cuanto se haga clic dentro del campo (o se
llegue por el TAB), el texto desaparecera.
Seguramente ha visto la propiedad Placeholder antes. Por ejemplo, Mozilla Firefox
3.5 incluye textos placeholder en la barra de localizacion.
Cuando se hace clic sobre la barra de busqueda o se llega por un tab, el texto
preestablecido desaparece.