CURSO DE PROGRAMACIÓN FULL STACK

HTML & CSS

GUIA HTML & CSS
INTRODUCCIÓN
El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi
infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea
posible encontrar lo que se busca. La unidad básica donde está almacenada esta
información son las páginas Web. Estas páginas se caracterizan por contener texto,
imágenes, animaciones... e incluso sonido y video.

Una de las características más importantes de las paginas Web es que son hipertexto. Esto
quiere decir que las paginas no son elementos aislados, sino que están unidas a otras
mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet
puede pulsar sobre un texto de una página para navegar hasta otra pagina. Será cuestión
del programador de la pagina inicial decidir que palabras o frases serán activas y a donde
nos conducirá pulsar sobre ellas.

HTML
Entendiendo que las paginas web son hipertexto, aquí es donde entra HTML. El Lenguaje
de Marcado de Hipertexto o Hyper Text Markup Languange (HTML) es el código que se
utiliza para estructurar y desplegar una página web y sus contenidos. HTML es el lenguaje
con el que se escribe el contenido de las páginas web. Las páginas web pueden ser vistas
por el usuario mediante un tipo de aplicación llamada cliente web o más comúnmente
"navegador". Podemos decir por lo tanto que el HTML es el lenguaje usado para especificar
el contenido que los navegadores deben representar a la hora de mostrar una página web.

Este lenguaje nos permite aglutinar textos, imágenes, enlaces... y combinarlos a nuestro
gusto. La ventaja del HTML a la hora de representar el contenido en un navegador, con
respecto a otros formatos físicos como libros o revistas, es justamente la posibilidad de
colocar referencias a otras páginas, por medio de los enlaces hipertexto.

Cuando nos referimos al contenido queremos indicar párrafos, imágenes, listas, tablas y
todo aquello que forma parte de "el qué". Nunca debemos usar HTML para definir cómo se
debe de ver un contenido, si el texto debe tener color rojo, con una fuente mayor, o si se
debe alinear a la derecha. Para especificar el aspecto que debe tener una web se usa un
lenguaje complementario, llamado CSS.

HTML LENGUAJE DE MARCADO

HTML no es un lenguaje de programación; es un lenguaje de marcado que define la
estructura de tu contenido. Basa su sintaxis en un elemento base al que llamamos marca,
tag o simplemente etiqueta. A través de las etiquetas vamos definiendo los elementos del
documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará
constituido por texto y un conjunto de etiquetas para definir la función que juega cada
contenido dentro de la página. Todo eso le servirá al navegador para saber cómo se tendrá
que presentar el texto y otros elementos en la página.

Existen etiquetas para crear negritas, párrafos, imágenes, tablas, listas, enlaces, etc. Así
pues, aprender HTML es básicamente aprenderse una serie de etiquetas, sus funciones,
sus usos y saber un poco sobre cómo debe de construirse un documento básico.

1
Es una tarea muy sencilla de afrontar, al alcance de cualquier persona, puesto que el
lenguaje es muy entendible para los seres humanos.

Por ejemplo, toma la siguiente línea de texto:

Mi gato es muy gruñon

Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta
de párrafo (<p>):

<p> Mi gato es muy gruñon </p>

ANATOMIA DE UNA ETIQUETA HTML

Las partes principales de la etiqueta completa llamada elemento son:

1. La etiqueta de apertura: consiste en el nombre de la etiqueta (en este caso, p),

encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde
comienza o empieza a tener efecto la etiqueta ,en este caso, dónde es el comienzo del
párrafo.

2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una
barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina la etiqueta,
en este caso dónde termina el párrafo.

3. El contenido: este es el contenido de la etiqueta, que en este caso es sólo texto.

4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido

equivale al elemento.

ANIDAR ETIQUETAS
Puedes también colocar etiquetas dentro de otros etiquetas, esto se llama anidamiento. Si,
por ejemplo, quieres resaltar una palabra del texto (en el ejemplo la palabra «muy»),
podemos encerrarla en una etiqueta <strong>, que significa que dicha palabra se debe
enfatizar:

<p> Mi gato es <strong>muy</strong> gruñon </p>

Debes asegurarte que las etiquetas estén correctamente anidadas: en el ejemplo, creaste
la etiqueta de apertura del elemento <p> primero, luego la del elemento <strong>, por lo
tanto, debes cerrar esta etiqueta primero, y luego la de <p>.

Las etiquetas deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren
claramente dentro o fuera el uno del otro. Si estos se encuentran solapados, el navegador
web tratará de adivinar lo que intentas decirle, pero puede que obtengas resultados
inesperados.

2
ANATOMIA DE UN DOCUMENTO HTML
Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son muy
útiles por sí solos. Ahora verás cómo los elementos individuales son combinados para
formar una página HTML entera.

Los documentos html van a ser archivos de texto con la extensión .html y tienen la
siguiente anatomía:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Mi pagina de prueba</title>

</head>

<body>

<p> Cooperacion Humana </p>

</body>

</html>

Tienes:

• <!DOCTYPE html>: el tipo de documento. Es un preámbulo requerido. Anteriormente,

cuando HTML era joven (cerca de 1991/2), los tipos de documento actuaban como
vínculos a un conjunto de reglas que el código HTML de la página debía seguir para ser
considerado bueno, lo que podía significar la verificación automática de errores y
algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto
antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione
correctamente. Por ahora, eso es todo lo que necesitas saber.

• <html></html>: la etiqueta <html>. Esta etiqueta encierra todo el contenido de la página

entera y, a veces, se le conoce como la etiqueta raíz (root element).

• <head></head>: la etiqueta <head>. Esta etiqueta actúa como un contenedor de todo

aquello que quieres incluir en la página HTML que no es contenido visible por los
visitantes de la página. Incluye cosas como palabras clave (keywords), una descripción
de la página que quieres que aparezca en resultados de búsquedas, código CSS para
dar estilo al contenido, declaraciones del juego de caracteres, etc.

• <meta charset="utf-8">: esta etiqueta establece el juego de caracteres que tu

documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas
humanos. Básicamente, puede manejar cualquier contenido de texto que puedas
incluir. No hay razón para no establecerlo, y puede evitar problemas en el futuro.

3
• <title></title>: la etiqueta <title> establece el título de tu página, que es el título que
aparece en la pestaña o en la barra de título del navegador cuando la página es
cargada, y se usa para describir la página cuando es añadida a los marcadores o como
favorita.

• <body></body>: la etiqueta <body>. Encierra todo el contenido que deseas mostrar a

los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de
audio reproducibles, y demás. Estos, delimitados a su vez por otras etiquetas como las
que hemos visto.

ELEMENTOS EN BLOQUE Y EN LÍNEA

El lenguaje HTML clasifica a todos los elementos en dos grupos: elementos en línea o inline
elements y elementos en bloque o block elements. La diferencia entre ambos viene dada
por el modelo de contenido, por el formato y la dirección.
Los elementos en bloque siempre empiezan en una nueva línea y ocupan todo el espacio
disponible hasta el final de la línea, mientras que los elementos en línea sólo ocupan el
espacio necesario para mostrar sus contenidos.

ATRIBUTOS ETIQUETAS
Las etiquetas son la estructura básica del HTML. Estas etiquetas se componen y contienen
otras propiedades, como son los atributos y el contenido.

HTML define un total de 91 etiquetas, de las cuales 10 se consideran obsoletas. Sin

embargo, una etiqueta por sí sola a veces no contiene la suficiente información para estar
completamente definida. Para ello contamos con los atributos: pares nombres-
valor separados por "=" y escritos en la etiqueta inicial de un elemento después del nombre
del elemento. El valor puede estar encerrado entre "comillas dobles" o 'simples'. Existen,
también, algunos atributos que afectan al elemento por su presencia en la etiqueta de
inicio.

Esta sería la estructura general de una línea de código en lenguaje HTML:

<etiqueta atributo1="valor1" atributo2="valor2">contenido</etiqueta>

<a href="http://www.enlace.com" target="_blank">Ejemplo de enlace</a>

Donde:

• <a> es la etiqueta inicial y </a> la etiqueta de cierre.

• href y target son los atributos.

• http://www.enlace.com y _blank son las variables.

• Ejemplo de enlace es el contenido.

Nota: las etiquetas <img> y <a> las veremos en mayor profundidad más adelante.

TIPOS DE ATRIBUTOS
Aunque cada una de las etiquetas HTML define sus propios atributos, encontramos algunos
comunes a muchas o casi todas las etiquetas, que se dividen en cuatro grupos según su
funcionalidad:

4
 • Atributos básicos

• Atributos de internacionalización

• Atributos de eventos

• Atributos de foco

En esta guía solo vamos a ver los básicos. Ya que el resto de atributos son para el uso de
otro lenguaje.

ATRIBUTOS BASICOS
Los atributos básicos se utilizan en la mayoría de etiquetas HTML y XHTML, aunque
adquieren mayor sentido cuando se utilizan hojas de estilo en cascada (CSS):

Atributo Descripción

id="texto" Establece un indicador único a cada elemento

class="texto" Establece la clase CSS que se aplica a los estilos del elemento

style="texto" Aplica de forma directa los estilos CSS de un elemento

title="texto" Establece el título del elemento (Mejora la accesibilidad)

Nota: los atributos de id, class y style los veremos en mayor profundidad en la parte de
CSS.

SINTAXIS HTML
LAS MAYÚSCULAS O MINÚSCULAS SON INDIFERENTES AL
ESCRIBIR ETIQUETAS
En HTML las mayúsculas y minúsculas son indiferentes. Quiere decir que las etiquetas
pueden ser escritas con cualquier tipo de combinación de mayúsculas y minúsculas.
Resulta sin embargo aconsejable acostumbrarse a escribirlas en minúscula ya que otras
tecnologías que pueden convivir con nuestro HTML (XML por ejemplo) no son tan
permisivas y nunca viene mal hacernos a las buenas costumbres desde el principio, para
evitar fallos triviales en un futuro.

COMENTARIOS EN HTML
En un documento HTML, los comentarios se escriben entre los caracteres "<!--" y "-->". Por
ejemplo: <!--Esto es un comentario en HTML-->

5
SALTOS DE LÍNEA EN HTML
Otra de las cosas importantes de conocer sobre la sintaxis básica del HTML es que los
saltos de línea no importan a la hora de interpretar una página. Un salto de línea será
simplemente interpretado como un separador de palabras, un espacio en blanco. Es por
ello que para separar líneas necesitamos usar la etiqueta de párrafo, o la etiqueta BR que
significa un salto de línea simple.

Esto es una línea

<br>

Esto es otra línea

Esto en una pagina se vería así

La etiqueta BR no tiene su correspondiente cierre. Es un detalle que quizás te haya llamado

la atención.

FORMATO DE PARRAFOS HTML

Previamente en nuestra guía habíamos visto la etiqueta <strong> que nos permitía darle
formato a nuestro texto, más concreto ponerlo en negrita. Ahora veremos con más detalle
las más ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente.

Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos,
introducir viñetas, numeraciones o bien poner en negrita, itálica, etc.

Hemos visto que para definir los párrafos nos servimos de la etiqueta P que introduce un
salto y deja una línea en blanco antes de continuar con el resto del documento.

Podemos también usar la etiqueta <br>, de la cual no existe su cierre correspondiente, para
realizar un simple salto de línea con lo que no dejamos una línea en blanco sino que solo
cambiamos de línea. Cabe destacar que la etiqueta <br>, no es la única etiqueta sin cierre.

Podéis comprobar que cambiar de línea en nuestro documento HTML sin introducir alguna
de estas u otras etiquetas no implica en absoluto un cambio de línea en la página
visualizada. En realidad el navegador introducirá el texto y no cambiara de línea a no ser
que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente.

ALINEAR TEXTO
Los párrafos delimitados por etiquetas P pueden ser fácilmente justificados a la izquierda,
centro o derecha especificando dicha justificación en el interior de la etiqueta por medio
de un atributo "align". Recordemos que los atributos no son más que un parámetro incluido
en el interior de la etiqueta que ayudan a definir el funcionamiento de la etiqueta de una
forma más personalizada.

6
Es importante tener muy en cuenta lo siguiente, que ya hemos comentado
anteriormente. El HTML se usa para definir el contenido. Por lo tanto, los atributos align que
vamos a conocer a continuación se estarían metiendo en una terreno que no le
corresponde al HTML, porque están definiendo la forma en la que un párrafo debe de
representarse, su estilo, y no el contenido. Es importante señalarlo para aprender que estas
cosas se deben hacer mediante el lenguaje CSS, que sirve para definir el estilo, la forma.
Usamos este ejemplo también para reforzar el uso de los atributos de una manera más
practica.

Así, si deseásemos introducir un texto alineado a la izquierda escribiríamos:

<p align="left">Texto alineado a la izquierda</p>

Para una justificación al centro:

<p align="center">Texto alineado al centro</p>

Para alinear a la derecha:

<p align="right">Texto alineado a la derecha</p>

Esto en una pagina se vería así:

Como veis, en cada caso el atributo align toma determinados valores que son escritos
entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el
correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor
definido por defecto. Para el caso de align, el valor por defecto es left.

FORMATEO DE LETRA
Además de todo lo relativo a la organización de los párrafos, uno de los aspectos
primordiales del formateo de un texto es el de la propia letra. Resulta muy común y
práctico presentar texto resaltado en negrita, itálica y otros. Todo esto y mucho más es
posible por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a
destacar algunas.

Pero antes de comenzar cabe hacer una reflexión sobre por qué son interesantes estas
etiquetas y se siguen usando, a pesar que están entrando prácticamente en el terreno de
CSS, ya que en la práctica están directamente formateando el aspecto de las fuentes. Son
importantes porque las etiquetas en si no están para definir un estilo en concreto, sino una
función de ciertas palabras dentro de un contenido.

NEGRITA
Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas strong y su cierre.
Recordemos que ya la habíamos visto previamente.

<p><strong> Texto en negrita </strong> y texto normal</p>