PÁGINA HTML
Qué es el HTML (HyperText Markup
Language)
HTML
son las siglas de “HyperText Markup Language”,
lo que se puede traducir en español a “Lenguaje
de marcado de hipertexto (texto con enlaces)”. Eso quiere decir que permite
“marcar” el texto mediante unas etiquetas especiales que le añaden semántica.
Por
ejemplo:
<h1>Cómo
hacer una página web con HTML</h1>
¿Qué
ha pasado aquí? Pues que simplemente añadiendo la etiqueta <h1> le hemos
añadido una información semántica muy útil a la frase que indica que esto no es
una frase cualquiera sino un título (fíjate en la “h” de “header” en inglés) de nivel 1.
Esto
es muy útil porque, por ejemplo, le sirve al navegador web para aplicar ciertas
pautas de diseño que faciliten la lectura como diferentes tamaños de letra a
los títulos según su nivel jerárquico, de modo que destaquen en la lectura.
Otro
ejemplo es el buscador de Google. Si alguien busca, por ejemplo, “cómo hacer una página web”, al ver que
son palabras que coinciden con el título principal de la página, esto le
indicará a Google que esa página tiene que ver probablemente mucho con lo que
el usuario está buscando.
Como
ves con estos dos simples ejemplos, el marcado que proporciona HTML permite hacer
muchas más cosas con estos contenidos que con un texto normal y corriente sin
marcado. Ese es el propósito básico del HTML, aparte de permitir enlazar las
páginas entre sí y crear así la “web” de Internet.
Conceptos HTML fundamentales:
Etiquetas, elementos y atributos HTML
A
lo largo del tiempo se han desarrollado diferentes versiones de HTML siendo la
más usada la versión HTML 4.01. Poco a poco está siendo relevada por la versión
HTML 5 que introduce nuevas etiquetas que amplían las posibilidades que tenía
HTML 4.01.
Pero
en este punto, lo mejor es que ya empecemos a meternos en harina en ver el
código HTML de una página web. Por ejemplo: una versión extremadamente
simplificada de este post, tendría un código HTML como el siguiente:
<!DOCTYPE HTML>
<html>
<head>
<title>Cómo hacer una página web con HTML</title>
</head>
<body>
<h1>Cómo hacer una página web con HTML</h1>
<p>
En el post de hoy voy a enseñarte <strong>cómo hacer una página web con
HTML</strong>, pero antes …</p>
<h2>Conceptos básicos sobre páginas web</h2>
<p>¿Cuál es entonces la diferencia entre una página web y un sitio
web?…</p>
<h3>Diferencias entre una página web y un sitio web</h3>
<p>Una <a
href=”https://es.wikipedia.org/wiki/P%C3%A1gina_web”>página web</a> es
un <strong>único documento electrónico</strong> que…</p>
</body>
</html>
El
ejemplo empieza con una etiqueta especial que es <!DOCTYPE HTML>, es simplemente una etiqueta especial que
tiene que ir al principio de todo fichero HTML e identifica al fichero como un
documento en formato HTML.
Lo
que sigue son etiquetas anidadas que forman una estructura jerárquica (excepto la línea del DOCTYPE).
Fíjate que siempre hay una etiqueta de apertura y una etiqueta de cierre que es
la misma etiqueta, pero con una barra invertida delante del nombre de la
etiqueta.
Estas
etiquetas, junto con el contenido que envuelven, forman lo que se conoce como
un elemento HTML. En el ejemplo podrás observar que hay una estructura básica
compuesta por las etiquetas <html>,
<head> y <body>. Esto
es la estructura básica de cualquier página web.
<html> es el elemento raíz de la página, es
simplemente el elemento del que tienen que “colgar” todos los demás, no tiene
más función que esa. <head> es
la cabecera de la página, una sección con información descriptiva de la página,
etc. que no se visualiza como tal en la página, eso le corresponde a la
etiqueta <body>. En <body> irán los elementos que
vemos realmente dentro del navegador como tales.
Fíjate
también en cómo se abren y cierran las etiquetas, por ejemplo, la etiqueta “<title>” (etiqueta de apertura)
y “</title>” (etiqueta de
cierre). A su vez, estas etiquetas pueden contener a otras etiquetas, como
es el caso de <head> que es la
que encierra a la etiqueta o elemento “title”.
Si
seguimos, verás que varios niveles de títulos con etiquetas <h1> hasta <h3>. Esto sería lo equivalente, por ejemplo, a los estilos
de títulos “Título 1”, “Título 2” y “Título 3” en
Microsoft Word. En HTML dispones de un total de 6 niveles,
de h1 a h6.
Por
otra parte, puedes ver varias etiquetas <p>,
éstas corresponden a los párrafos que vienen a continuación de los
títulos y para las cuales hemos puesto solamente un pequeño extracto de texto
como ejemplo.
Fíjate
especialmente en las etiquetas tipo <a>
que son los enlaces. Ésta es, si cabe, la etiqueta por excelencia del HTML, la
que permite crear los hiperenlaces que son lo que hace de la web la web.
Con
esto puedo introducir, además, otro concepto fundamental del HTML: los atributos.
Si
echas un vistazo con atención, en el caso de la etiqueta <a>, antes del
corchete de cierre vienen dos palabras: “href” y “target”. Estas
palabras son dos atributos y sirven para especificar parámetros adicionales en
una etiqueta. De esta manera le podemos dar mucho más juego a las etiquetas.
En
ejemplo concreto el atributo “href” indica la URL de la página enlazada y con
el atributo “target” indicamos que, además, queremos que cuando el usuario haga
clic en él, la página correspondiente se abra en otra pestaña del navegador.
Comentarios
Publicar un comentario