Para empezar, vamos a aprender qué es HTML y para qué se utiliza. HTML es un lenguaje de marcado que se utiliza para estructurar documentos que pueden ser representados por otras aplicaciones, como por ejemplo un navegador web como el que posiblemente estés utilizando ahora.
Para ver qué es HTML con más detalle, consulta la siguiente definición:
Definición de HTML: Qué es HTML y para qué se utiliza
Puedes editar archivos HTML con cualquier editor de texto plano, como por ejemplo Notepad++, Gedit, Atom, VS Code e incluso el bloc de notas de Windows o cualquier otro editor de texto plano.
Lo primero que debes escribir en el archivo es la declaración DOCTYPE o Document Type Declaration. Esta declaración debe estar en la primera línea del documento, ya que es el modo mediante el cual le decimos al navegador la versión de HTML que estamos usando. A día de hoy suele usarse la siguiente declaración DOCTYPE para indicarle al navegador que estamos usando HTML5:
<!DOCTYPE html>
El lenguaje HTML se compone principalmente de elementos, representados mediante etiquetas. A su vez, las etiquetas pueden contener atributos. En este apartado explicaremos lo que son tanto las etiquetas como los atributos, además de explicar también el tratamiento de ciertos caracteres como los espacios en blanco.
HTML es un lenguaje que no es sensible a las mayúsculas, por lo que podrás escribir las etiquetas tanto en minúscula como en mayúscula, funcionando éstas del mismo modo. Antaño era habitual escribir las etiquetas en mayúscula, aunque a día de hoy son preferibles las minúsculas, siendo la convención.
Por convención deberías escribir las etiquetas en minúscula, tal que así:
<p>Soy un párrafo</p>
<P>Soy un párrafo</P>
Los comentarios en HTML se muestran en el código del documento, pero no se procesara o representarán visualmente en el navegador. Pueden ser útiles para aclarar ciertos aspectos del código. Para agregar comentarios en HTML debes inicial el comentario con los caracteres , tal y como puedes ver en el siguiente ejemplo:
<!-- Esto es un comentario -->
Los comentarios pueden ocupar más de una línea:
<!-- Esto es un comentario
y esto es el mismo comentario
-->
Es muy habitual comentar código HTML que no se incluye en el resultado final cuando se quiere probar una funcionalidad o sencillamente eliminar temporalmente algún bloque de código:
<!-- La siguiente imagen no se mostrará
<img src="imagen.jpg" alt="Descripción">
-->
| Etiqueta | Descripcion | Ejemplo |
|---|---|---|
<h1..h6>Encabezado </h1..h6>
|
<h1>,
<h2>,
<h3>, <h4>,
<h5>, <h6>
Son etiquetas de encabezado, donde es el encabezado más importante H1 y es el encabezado menos importante H6.
|
<h1>Titulo</h1>
|
<p> … </p>
|
Contiene texto sin formato como un párrafo |
<p> Texto </p>
|
<br>
|
Salto de línea, utilizado para escribir una nueva línea. |
<br/>
|
<hr>
|
Similar a un salto de línea, adicionalmente dibuja una barra horizontal para indicar el final de la sección |
<hr/>
|
<meta>
|
Se utiliza para proporcionar información de metadatos, como la descripción de la página web |
<meta charset="utf-8"/>
|
<a>..</a>
|
Se utiliza para vincular páginas desde la actual a otra. |
<a href="https://google.com/" target="_blank"> Google</a>
|
<img />
|
Se utiliza para insertar una imagen |
<img src="/sample.jpg" >
|
<pre/>
|
El texto de un elemento previo se muestra en una fuente de ancho fijo y conserva tanto los espacios como los saltos de línea |
<pre> int i = 0; </pre>
|
Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.
| Nombre del Atributo | Elementos | Descripción |
|---|---|---|
align |
<caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> |
Especifica el alineamiento horizontal del elemento. |
bgcolor |
<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> |
Color de fondo del elemento. Nota: Este atributo se mantiene como referencia para cambiar el color de fondo.. Por favor usa la propiedad CSS |
checked |
<command>, <input> |
Indica que el elemento debería estar marcado al cargar la página. |
class |
Atributo Global | Usualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun. |
color |
<basefont>, <font>, <hr> |
Este atributo establece el color de texto utilizando un nombre de color o en formato hexadecimal #RRGGBB. Nota: Este atributo se mantiene como referencia para cambiar el color del elemento. Por favor usa la propiedad CSS |
data-* |
Atributo Global | Permite asociar atributos presonalizados a un elemento HTML. |
disabled |
<button>, <command>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> |
Indica si el usuario puede interactuar con el elemento. |
hidden |
Atributo Global | Evita la prestación del elemento dado, manteniendo los elementos secundarios, p.ej. los elementos de script |
href |
<a>, <area>, <base>, <link> |
La URL de un recurso asociado. |
id |
Atributo Global | Identificador el elemento para acceder al mismo desde CSS o Javascript, este indicador debe ser unico para cada elemento. |
selected |
<option> |
Define un valor que será seleccionado al cargar la página. |
style |
Atributo Global | Define los estilos CSS que anulan los estilos establecidos previamente. |
value |
<button>, <option>, <input>, <li> |
Define el valor predeterminado a ser mostrado al cargar la página. |
| Seccion | Descripción | Ejemplo |
|---|---|---|
<div>..</div>
|
<div> Se utiliza para envolver una sección como un solo bloque.
|
<div> Bloque </div>
|
<span> … </span>
|
Se utiliza para crear bloques en línea; pueden ser : textos, imagenes, icono, etc. Esto sin alterar el formato de la página. |
<span> icono, image </span>
|
Algunos elementos de bloque pueden contener elementos dispuestos en línea en su interior. Incluso ciertos elementos como las etiquetas <div> pueden contener otros elementos dispuestos en bloque en su interior. Sin embargo, otros elementos como los párrafos <p> no pueden contener elementos dispuestos en bloque
<div> <!-- Elemento en bloque -->
<div>
<p>Párrafo</p> <!-- Elemento en bloque -->
</div> <!-- Elemento en bloque -->
<div>
<span>Texto</span>
<span>Otro texto</span>
</div>
</div>