HTML HyperText Markup Language
1 – Qué es HTML
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está
constituido de elementos que el navegador interpreta y despliega en la pantalla de
acuerdo a su objetivo. Hay elementos para disponer imágenes sobre una página,
hipervínculos que permiten visualizar otra página, listas, tablas para tabular datos, etc.
Para poder crear una página HTML se requiere un simple editor de texto plano (Notepad+
+, pluma, SublimeText, BlueFish …) y un navegador de internet (Chrome, Edge, FireFox,
Safari etc.).
2 - Estructura interna de una página HTML
Una página HTML es un archivo que generalmente tiene como extensión los caracteres
html. Por ejemplo podemos llamar a nuestra primera página con el nombre: [Link]
La estructura básica de una página HTML es:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Cuerpo de la página.
</body>
</html>
Estos son los elementos básicos que toda página HTML debe llevar:
• DOCTYPE informa al navegador que el contenido siguiente se trata de un archivo
HTML (todos los navegadores modernos analizan la presencia del DOCTYPE)
• La marca:<html> y finaliza con la marca:</html> al final del archivo.
Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el
caracter /
Dentro de <html> hay dos secciones muy bien definidas la cabecera y el cuerpo
• La cabecera: entre <head> y </head> En la cabecera es común inicializar el título
de la página dentro de las marcas <title></title> (normalmente aparece en la barra
superior de nuestro navegador y es utilizado por los motores de búsqueda como
Google para indexar la página) El título debe hacer referencia al contenido en sí de
la página.
-1-
HTML HyperText Markup Language
• El cuerpo de la página: entre <body> y </body> Todo lo que dispongamos
dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito. Es el
contenido de la página web
Todas las páginas tienen como mínimo esta estructura: cabecera y cuerpo.
Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y
minúsculas. Las etiquetas pueden escribirse en mayúsculas o minúsculas: <HTML> y
<html> es lo mismo.
Además no requiere que dispongamos cada marca en una línea (podríamos escribir toda
la página en una sola línea! cosa que no conviene ya que somos nosotros quienes
tendremos que modificarla en algún momento).
Ilustración 1: Ejemplo de edición con Notepad++
En este ejemplo se utilizan las etiquetas <html>, <head>, <body> obligatorias. Y además
las etiquetas:
• <meta> que permiten dar información de índole general a la página, en particular
se indica el juego de caracteres.
• <title> indica el título de la página que parece en la pestaña del navegador, no
aparece dentro de la página
• <h1> indica que el texto a continuación es un encabezado de primer orden y por lo
tanto se visualizará de manera a resaltarlo.
3 – Separar textos : salto de línea <br> y línea horizontal
<hr>
Para separar textos, existen dos etiquetas : <br> y <hr>. (en html5 las etiquetas que no
tienen etiqueta de cierre se escriben <br/> y <hr/>).
<br> inserta un salto de línea en el texto. No genera un nuevo párrafo, sino que parte la
-2-
HTML HyperText Markup Language
línea en dos. Es un elemento puntual, que no lleva etiqueta de cierre.
<hr> inserta un salto de línea en el texto, pero mostrando una línea horizontal visible.
Ejemplo:
Ilustración 2: Ejemplo de saltos de línea
Como vemos sólo hemos agregado la marca <br> cada vez que queremos comenzar una
línea. Tengamos en cuenta que es indistinto si disponemos la marca en la misma línea o
en la siguiente:
PHP<br>
es lo mismo que :
PHP
<br>
4 - Párrafo <p> (paragraph)
Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo
que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con
respecto al próximo párrafo.
Dentro de un párrafo puede haber saltos de línea <br>.
Veamos con un ejemplo como disponer dos párrafos:
-3-
HTML HyperText Markup Language
Ilustración 3: Ejempo de párrafos
Tenemos en esta página HTML dos párrafos, cuando el navegador interpreta esta página,
separa los contenidos de los dos párrafos con un espacio horizontal. Además el primer
párrafo contiene varios saltos de línea. Normalmente se agrupa en párrafos para dar más
sentido a nuestro escrito.
Cuando modificamos el tamaño de la ventana del navegador los párrafos se acomodan
automáticamente al ancho de la ventana.
Problema: Confeccione una página que muestre en un párrafo datos referentes a sus
estudios y en otro párrafo su nombre y mail.
-4-
HTML HyperText Markup Language
5 - Títulos <h1> <h2> <h3> <h4> <h5> <h6> (header)
Para indicar los títulos, se utilizan las etiquetas: <h1> <h2> <h3> <h4> <h5> <h6>
El título de mayor nivel es <h1>, es el que tiene normalmente una fuente de mayor
tamaño (el navegador es el responsable de definir el formato por defecto asociado a cada
encabezado: la fuente, tamaño, color etc.)
Requiere la marca de cierre correspondiente </h1> </h2> </h3> </h4> </h5> </h6>.
Los buscadores que indexan contenido (Google, Bing, Yahoo etc.) hacen hincapié en los
títulos para identificar los temas que tratan las páginas. Por ello se recomienda que sean
cortos.
No hay que confundir estos títulos con el <title> de la página de la sección <head>.
Ejemplo de una página que contiene un título de primer nivel <h1> y dos títulos de nivel
<h2>. Cada título de segundo nivel contiene un párrafo.
Ilustración 5: Ejemplo de títulos
Cada título aparece siempre en una línea distinta, no importa cómo esté escrito en el
fichero html . El resultado será el mismo en los dos casos:
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
o:
<h1>Tipos de datos en MySQL</h1><h2>varchar</h2>
El navegador dispone cada título en una línea nueva.
-5-
HTML HyperText Markup Language
6 - Enfasis <em> y <strong> (empathize, strong)
Para enfatizar una secuencia de palabras dentro de un elemento mayor (un párrafo por
ejemplo) se utilizan las etiquetas <em> y <strong> con sus correspondientes cierres
</em> y </strong>.
El elemento de mayor fuerza de énfasis es strong y le sigue em.
Veamos un ejemplo del empleo de estos dos elementos HTML:
Ilustración 6: Ejemplo de strong y em
La mayoría de los navegadores muestran el texto enfatizado con strong con un texto en
negrita y para el elemento "em" utilizan letra itálica.
Estos elementos HTML no producen un salto de línea como los de título (<h1>,<h2>, etc.)
o los párrafos (<p>)
7 – Formateo de texto
Existe una serie de etiquetas de texto que permiten formatear el texto :
• <b>texto</b> pone el texto en negrita
• <u>texto</u> subraya el texto
• <i>texto</i> pone el texto en cursiva
• <s>texto</s> tacha el texto
• <mark>texto</mark> marca el texto
• <small>texto </small> empequeñece el tamaño de la letra del texto
-6-
HTML HyperText Markup Language
• <del>texto</del> Se tacha el texto
• <sub>texto</sub>El texto de subíndice
• <sup>texto</sup>El texto de superíndice
Ilustración 7: Formateo de texto
-7-