HTML01 - Introducción
El lenguaje de marcas
ALBERT BASSONS
https://www.linkedin.com/in/albertbassons/
Índice
Antes de nada
HTML
Lenguaje de marcas
Las etiquetas HTML
Versiones de HTML
Los navegadores web
Validando del código HTML
ALBERT BASSONS 2
Antes de nada
Los ejemplos que se muestran en estas transparencias están
realizados con los editores de textos Notepad++, Sublime Text 3
y Gedit, que son totalmente gratuitos.
Han sido probados con los navegadores Google Chrome y
Mozilla Firefox.
Para la realización de páginas web con HTML no necesitamos
más que un editor de texto para escribir el código y un navegador
para comprobar el resultado.
ALBERT BASSONS 3
Antes de nada
Notepad++ Firefox
ALBERT BASSONS 4
Antes de nada
Sin embargo, para el curso de desarrollo de Confección y
Publicación de Páginas Web, recomendaría usar algún entorno
de desarrollo un poco más complejo que un editor de textos.
Para la realización de aplicaciones complejas, suelo utilizar
Sublime Text 3, que también es gratuito tanto para su uso
particular como profesional.
Lo podéis descargar desde la página oficial
ALBERT BASSONS 5
Antes de nada
ALBERT BASSONS 6
Antes de nada
ALBERT BASSONS 7
Antes de nada
En principio, no veremos los entornos de
desarrollo WYSIWYG (What You See Is What
You Get) como Dreamweaver®.
Es importante conocer cómo se organiza el
código de nuestras páginas a bajo nivel.
ALBERT BASSONS 8
HTML
HTML es un lenguaje de marcas que sirve para describir la
estructura de una página web.
HTML es un acrónimo de Hyper Text Markup Language
(Lenguaje de marcas de Híper Texto).
ALBERT BASSONS 9
Lenguaje de marcas
Un lenguaje de marcas se compone de un conjunto de
etiquetas que describen el contenido del documento.
Los documentos HTML contienen etiquetas HTML y texto
llano. También son conocidos como páginas web.
Los ficheros que contienen código HTML tienen la
extensión *.html (aunque esta afirmación no siempre es
cierta).
ALBERT BASSONS 10
Ejemplo:
ALBERT BASSONS 11
Las etiquetas HTML
Las etiquetas HTML son palabras clave rodeadas por los
símbolos “menor que” y “mayor que”, como <body>.
Una palabra clave es una palabra que tiene un significado para
un lenguaje. Por ejemplo, la palabra body en HTML significa
“cuerpo del documento”.
Estas palabras clave o identificadores representan los
diferentes tipo de elementos que se integrarán en nuestras
páginas: párrafos, encabezados, listas, tablas...
ALBERT BASSONS 12
Las etiquetas HTML
Las etiquetas HTML normalmente vienen en parejas, como por
ejemplo <body> y </body>.
La primera etiqueta del par es la de apertura y la segunda la de
cierre. Lo que se encuentre entre ambas es el contenido del
elemento.
<p>Contenido del párrafo</p>
La etiqueta de cierre se escribe igual que la de apertura pero
con una barra delante del nombre del elemento.
ALBERT BASSONS 13
Versiones de HTML
El lenguaje HTML, como muchos otros, ha ido evolucionando a
lo largo del tiempo. Actualmente se utiliza la versión 5.
La primera versión estaba pensada para la transmisión de
textos sencillos sin formato.
Versiones posteriores incluyeron nuevas etiquetas, posibilidad
de incluir formatos, nuevos atributos, maneras alternativas de
organizar las cosas…
ALBERT BASSONS 14
Versiones de HTML
Versión Año
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML (no reemplaza 2000
HTML4)
HTML5 2012
ALBERT BASSONS 15
Los navegadores web
El propósito de un navegador web (como Google Chrome,
Opera, Explorer, Firefox o Safari) es leer documentos HTML y
mostrarlos como páginas web.
El navegador no muestra las etiquetas HTML al usuario, las
interpreta para determinar cómo se debe mostrar el contenido
de la página. Cuidado porque diferentes navegadores pueden
tener interpretaciones ligeramente diferentes (especialmente si
hay errores en el código).
ALBERT BASSONS 16
Los navegadores web
Si nuestras páginas solamente contienen código del lado del
cliente (HTML, CSS, JavaScript…), podremos abrirlas
directamente con el navegador para visualizarlas y
probarlas.
Más adelante, cuando veamos la programación en el lado del
servidor, veremos que ya no podremos ver así nuestras páginas,
puesto que el navegador no interpretará correctamente todo
aquello que deba ser tratado en el servidor.
ALBERT BASSONS 17
Los navegadores web
ALBERT BASSONS 18
Depurando con el navegador
Con F12 accedemos
a las herramientas
de desarrollo.
ALBERT BASSONS 19
Validando el código HTML
El consorcio de la W3 (http://www.w3c.es - http://www.w3c.org )
define los estándares de HTML, y de las tecnologías utilizadas
en el ámbito de páginas web sobre diferentes dispositivos.
ALBERT BASSONS 20
Validando el código HTML
Dispone de un validador de HTML que nos permite comprobar si
nuestras páginas cumplen las especificaciones o no:
http://validator.w3.org/
ALBERT BASSONS 21
Validando el código HTML
ALBERT BASSONS 22
Validando el código HTML
ALBERT BASSONS 23
Validando el código HTML: curiosidades
ALBERT BASSONS 24
