UD1 - 2 Conceptos Básicos de HTML

1. HTML.
Lenguaje para crear páginas Web

Antes de ver en que consiste HTML, vamos a ver qué es el hipertexto.
El concepto de hipertexto responde, fundamentalmente, a una forma de concebir el acceso a

la información. Cuando vemos un texto impreso, la información puede considerarse que es-
tá presentada de modo lineal: la página 2 sucede a la 1, y así sucesivamente. Pero muchas
veces, tenemos materiales en los que es el lector quien establece la secuencia de acceso a la
información. Cuando leemos un periódico, practicamente nadie lee desde la primera a la úl-
tima página, sino que seleccionamos la información que consideramos más interesante a
partir de lo que aparece en la portada y es a ese articulo al que vamos en primer lugar. Esta
posibilidad de seleccionar el itinerario que vamos a seguir es uno de los elementos que defi-
nen el hipertexto.
El hipertexto, también da la posibilidad de incluir, junto a la información escrita, una ima-

gen fija, sonido e imagenes en movimiento. Por tanto, podemos considerar hipertexto como
el conjunto de información en soporte multimedia que se estrutura mediante enlaces entre
los diversos elementos, de forma que el usuario pueda acceder a ella rapidamente y tenien-
do la posibilidad de establecer su propio itinerario de “lectura”.
Para escribir páxinas web se usa HTML, iniciales de HyperText Markup Language (Len-
guaje de Marcado de Hipertexto), que es una implementación específica de SGML para pá-
ginas Web y que durante años se mantuvo como la tecnología principal de la Web.
Un documento HTML es un archivo de texto al que se añaden una serie de etiquetas, de-
limitadas por los signos menor y mayor, que serán interpretadas por los visualizadores (
browsers ) a la hora de mostrar el contido de los archivos en la pantalla. Las etiquetas son
las que le indican al visualizador del documento la forma de dar formato al texto, cómo car-
gar un gráfico, etc.
A lo largo del tiempo existieron varios tipos de HTML y dos tipos de sintaxis.
 Los tipos de HTML( HTML 3, HTML 4, HTML5 ...) se distinguen por las eti-
quetas, atributos y valores de atributos que soportan.
 Las dos sintaxis, HTML y XHTML, se distinguen en que la sintaxis XHTML es
más estricta en el modo de escribir las etiquetas, atributos y valores, mientras que
la sintaxis HTML es más flexible.
Un documento con errores de sintaxis (HTML o XHTML) se dice que es un documento
inválido. En este caso, el navegador se comporta de diferente manera dependiendo si el do-
cumento está escrito en lenguaje HTML o XHTML. Cuando están escritas en XHTML, el
navegador rechaza las páginas inválidas, mientras que si son páginas HTML el navegador
intenta mostrar el documento aunque contenga errores. Los navegadores consiguen mostrar
la mayor parte de los documentos inválidos, lo que no quita que se aconseje validar y corre-
gir los documentos para asegurar que los navegadores los muestren correctamente.
1.1 Creación de un documento básico HTML.

El documento HTML más sencillo contiene las siguientes etiquetas:
<html></ html >
– Estas etiquetas deben ir SIEMPRE al inicio e al final de cada una de las páginas. Con
ellas indicamos que estamos trabajando en lenguaje HTML.
Páxina 3
<head> </head>
– En la cabecera se coloca el título de la página e información de carácter general (me-
tadatos) que no se muestra en la ventana del navegador.
<title> </title>
– El elemento title se encuentra anidado dentro del elemento head. En una página web
formada por varias páginas independientes (a las que se accede mediante un menú,
por exemplo), cada una de estas páginas tendrá su propio elemento title. El texto mar-
cado con esta etiqueta se visualiza en la pestaña activa del navegador.
Este título será el contenido más visible que devolverán los motores de búsqueda. Por
lo que debe ser oportuno, conciso y claro. Por ejemplo, en la web de Formación Profe-
sional de la Xunta de Galicia si tenemos seleccionada la pestaña Currículos el title se-
ría:
<title>Currículos | Xunta de Galicia</title>
Si en un buscador escribimos “Currículos de Formación profesional da Xunta de Gali-

cia” vemos que aparece destacado el texto que contiene esta etiqueta.
<body> </body>
– La etiqueta body abarca todo el contenido de la página web que se visualiza en el na-
vegador. ( textos, imágenes, gráficos... ).
A continuación se presenta la forma más básica de un documento HTML.

<html>
<head>
<title>Título da páxina HTML</title>
</head>
<body>O contido do corpo da páxina HTML
</body>
</html>
Que se visualizaría como se ve en la imagen.
1.2 HTML vs XHTML

El objetivo perseguido cuando hacemos una página web es que la información pueda ser in-
terpretada correctamente independentemente del dispositivo desde el que se acceda. Para
conseguir este fin, la especificación XHTML establece unas normas más estrictas en el eti-
quetado de los documentos.
Páxina 4
En XHTML los documentos tienen que estar bien formados mietras que en HTML pueden
no estarlo. Para que un documento se considere bien formado debe cumplir que:
– El elemento raíz del documento debe ser <html>.
– Debe haber una declaración DOCTYPE en el documento antes del elemento raíz. El
identificador público incluido en la declaración DOCTYPE debe hacer referencia a
alguno de de los tres posibles documentos de validación con los que se puede vali-
dar la sintaxis XHTML Existen tres tipos de gramáticas DTD para XHTML 1.0 y una
para XHTML 1.1:
– Una gramática llamada “strict”: Valida la sintaxis XHTML de forma es-
tricta, permitiendo sólo sintaxis pura XML y ninguna de las etiquetas no
recomendables. Se utiliza si la presentación del contenido se realiza utilizando
una hoja de estilo CSS.
<!DOCTYPE html PUBLIC “-//W3//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/strict.dtd”>
– Una gramática llamada “transitional”: La validación es más permisiva, per-

mite algunas etiquetas poco recomendables en XML. Permite mostrar los datos
sin utilizar las hojas de estilo CSS.
<!DOCTYPE html PUBLIC “-//W3//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/transitional.dtd”>
– Una gramática llamada “frameset”: Se utiliza para procesar los marcos

<!DOCTYPE html PUBLIC “-//W3//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/frameset.dtd”>
– Un documento normal compatible con código XHTML 1.1 debería tener esta
definición básica:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
– Respetar las mayúsculas y minúsculas: los nombres de las etiquetas y de los atributos
deben escribirse en letras minúsculas. Ya que XML es sensible a las mayúsculas y
minúsculas, XHTML también lo es. Sin embargo, los valores de los atributos pueden
figurar en letras minúsculas o mayúsculas.
– Los elementos deben encerrarse adecuadamente. El entrelazado de elementos no está
permitido en HTML, aunque si está tolerado por los navegadores. Con XHTML, es
necesario cerrar las etiquetas en orden inverso a su apertura: el último elemento abier-
to debe ser el primer elemento en cerrarse.
– Todos los elementos no vacíos deben estar cerrados.
– Los elementos vacíos deben terminarse. La recomendación de W3C es que todos los
elementos vacíos de XHTML deberían tener un espacio antes de la barra final. Por
ejemplo, <hr> se convertiría en <hr />.
– Los valores de los atributos deben escribirse entre comillas.
– Los valores predefinidos de algunos atributos deben estar en minúsculas debido a la
sensibilidad a mayúsculas/minúsculas de XML. (p.e. <input type="submit" />)
– En XHTML, los atributos deben tener siempre valor. Los atributos booleanos no están
permitidos (no se puede usar solo el nombre del atributo).
– En HTML se podían identificar fragmentos del documento utilizando tanto el atributo
name como el atributo id. En XHTML se utilizará siempre id incluso en aquellos ca-
sos en los que se había utilizado siempre name, pudiendo cada atributo id aplicarse a
un único fragmento del documento.
– En ningún atributo se debe de utilizar el símbolo &, < ó >, en su lugar se deben de
utilizar las entidades & < y >
Páxina 5
En la siguiente tabla, vamos a ver una comparación de las sintaxis HTML y XHTML:
Reglas de conversión en XHTML HTML XHTML
Los nombres de los elementos se escriben con <TH BGCOLOR= “#ffcc00”> <th bgcolor= “#ffcc00”>
minúsculas
El entrelazado no está permitido Escrito en cursiva Escrito en cursiva
 
Los elementos no vacíos deben cerrarse Esto es un párrafo Esto es un párrafo 
Los elementos vacíos deben terminarse 

<link ...> <link ... />
<img src=”img.jpg” ... > <img src=”img.jpg” ... />
Los valores de los atributos (también los numé- <td bgcolor=”ffccoo” <td bgcolor=”ffccoo”
ricos) deben aparecer entre comillas Colspan=2> colspan=”2”>
No está permitido usar solo el nombre del <input type=”checkbox” ... <input type=”checkbox” ...
atributo booleano checked> checked=”checked” />
A continuación vemos un ejemplo de documento XHTML sencillo:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3c.org/1999/XHTML" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Ejemplo 1 de XHTML</title>
</head>
<body>
<a href="http://www.w3c.org"> XHTML</a>, un HTML mucho más
riguroso
</body>
</html>
Donde,
<!DOCTYPE ... > es obligatoria e indica el tipo de documento (DOCTYPE) de la

página. Existen varios tipos de documentos que correponden a las diferentes versiones de
HTML y XHTML. El tipo "html" es el que corresponde al HTML5.
<html> es el elemento raíz de la página y además debe especificar el espacio de

nombres al que pertenecen las etiquetas (atributo xmlns) y el lenguaje en el que está
escrita (atributo xml:lang). Es conveniente (aunque el estándar no lo considera obliga-
torio) utilizar el atributo lang, que es común a todos los elementos HTML y que sir-
ve también para marcar el lenguaje en el que está escrita la página. Usando tanto xml:lang
como lang aseguramos que todos los navegadores queden avisados sobre el lenguaje
utilizado. El lenguaje español se puede indicar con es, o con más detalle usando es-
ES que es el símbolo internacional de español de España. Esta terminología sigue
los códigos de dos letras definidos en la norma ISO 639-1 (que contiene dos letras para
cada lenguaje) y el código de dos letras de país de la ISO 3166-1.
<meta> en este caso indica el sistema de codificación del texto de la página. En el có-
digo anterior se utiliza el más recomendable, que es UTF-8, Unicode de 8 bits.
Páxina 6
1.2.1 Validación XHTML
El HTML no es un lenguaje de programación, pero tiene su propio vocabulario (las marcas,
atributos y valores de atributos que podemos utilizar) y su propia sintaxis (las reglas de uti-
lización de sus elementos).
Uno de los motivos del éxito de HTML fue que los navegadores siempre han sido capaces
de procesar documentos con errores y de conseguir en muchos casos mostrarlos como
deseaba su autor. Por supuesto, esa capacidad se debe al trabajo y esfuerzo de los progra-
madores que crean los navegadores, que han incluido en los navegadores numerosas reglas
para reconocer los errores más comunes e intentar corregirlos sobre la marcha.
Uno de los objetivos del W3C con el XHTML en el año 2000 fue eliminar los errores de
sintaxis. Por desgracia, probablemente ese fuera el principal motivo de su fracaso, pues es-
tablecía como requisito un objetivo muy difícil de conseguir.
En el HTML5, los que han redactado la recomendación han hecho un gran esfuerzo deta-
llando cómo actuar ante violaciones de la propia sintaxis y conseguir un tratamiento similar
en todos los navegadores. Pero también se ha mantenido el XHTML5 para los autores de
páginas web que estén dispuestos a hacer el esfuerzo de no cometer errores.
Vale la pena hacer el esfuerzo de escribir sin errores, es decir, seguir la sintaxis XHTML.
La recompensa serán documentos más fáciles de entender, modificar y reutilizar en el futu-
ro. Y al fin y al cabo, las diferencias entre ambas sintaxis no son tan grandes y los docu-
mentos que se van a crear en este curso son lo suficientemente sencillos como para que no
cometer errores no sea tan difícil. Contamos además con la ayuda de los validadores, he-
rramientas que nos ayudarán a detectar los errores que podamos cometer y corregirlos.
Los validadores que utilizaremos no podrán detectar todos los errores, pero sí los más im-
portantes.
Los principales validadores son los validadores disponibles en Internet, que nos permiten
validar tanto nuestras páginas como las de otros. Para facilitar el uso de los validadores, po-
dremos validar las páginas tanto en el editor como en el navegador.
Validación en internet
El W3C ofrece desde hace muchos años varios validadores que permiten validar todo tipo
de documentos (HTML, XHTML, CSS, SVG, MathML, XML, etc.). Entre otros:
 Validación de lenguajes de marcas (HTML, XHTML, SVG, MathML, SMIL).
 Validación de hojas de estilo CSS.
La validación se puede hacer de tres maneras:

 dando la dirección web del recurso (si ya está disponible en Internet).
 subiendo el archivo mediante un formulario de subida de archivos.
 copiando el código fuente en un formulario.
Validación en el editores de html, xhtml, xml
Distintas herramientas que permiten validar los documentos generados
Páxina 7
Validación en el navegador
En Firefox o Chrome se pueden validar las páginas web y hojas de estilo accediendo a las
páginas web de los validadores disponibles en Internet. En Firefox podremos recurrir a ex-
tensiones como Web Developer.
Vamos a validar el siguiente documento:

<html>
<head>
</head>
<body>
 <img src="imagen.jpg" alt="fichero de imagen "> 
</body>
</html>
Este no es un documento XHTML 1.1 válido porque la etiqueta html no contiene el atri-
buto del espacio de nombres, y el elemento img debería expresarse como un elemento vacío
terminado en />, así que la respuesta del validador sería la siguiente:
A continuación vemos como deberíamos corregir este documento, con los elementos
html e img válidos:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
</head>

<body>

<img src="imagen.jpg" alt="fichero de imagen imagen.jpg" />

</body>
</html>
 Realiza la tarea 1.
Páxina 8
2. HTML5
2.1 El largo camino de HTML4 a HTML5

Tim Berners-Lee desarrolló el lenguaje HTML en 1989. Este se hizo muy popular ya que el
concepto de etiquetas para crear páginas web era muy sencillo y fácil de aprender.
Para evitar que una compañía en particular obligue a los usuarios a utilizar una tecnolo-
gía en concreto se crea el World Wide Web consortium (W3C), un organismo de norma-
lización abierto constituido por representantes de diferentes compañías: Apple, Microsoft,
Adobe, Sun, Google, IBM, Oracle, etc. Este consorcio ha creado muchas de las tecnologías
que se utilizan hoy en día como HTML, XML, protocolos para servicios Web (SOAP), y
gráficos en formato PNG entre otros. Cada uno de estos estándares son propuestos, defini-
dos, ratificados y publicados con consentimiento de todo el grupo. Uno de los primeros es-
tándares que siguió todo este proceso fue el lenguaje HTML.
La primera versión de HTML es muy diferente a la que usamos hoy en día, ya que no te-
nía en cuenta el diseño ni incluía herramientas para dar formato al texto. Entre los años
1989 y 1997, el lenguaje HTML pasó por cuatro ratificaciones importantes. El estándar de
HTML4 se publicó en 1997 y en él se proponía utilizar hojas de estilo en cascada nivel 1
(CSS1) para controlar el diseño de páginas, gráficos en formato PNG como estándar de ma-
pa bits no sujetos a patentes, y normas DOM (Document Object Model, Modelo de objetos
del documento) para que las aplicaciones JavaScript funcionaran coherentemente en todos
los navegadores Web. También se introdujo la primera versión de XML para controlar la
estructura de datos.
Los navegadores fueron adoptando este estándar, siendo Microsoft, con Internet Explorer
8 la que más tardó en respaldarlo (12 años). Hoy en día el estándar de referencia es
HTML5.
HTML 5: permite la interacción del usuario y proporciona una experiencia muy similar a
la que se obtendría con una aplicación de escritorio, pero sin necesidad de realizar instala-
ciones
En la siguiente imagen podemos ver la evolución del lenguaje HTML.
En marzo de 2018 declararon obsoletas y reemplazadas (Superseeded) todas las reco-

mendaciones del HTML y XHTML anteriores a HTML 5.1. Actualmente (septiembre de
2018 el W3C está desarrollando la próxima versión del HTML, HTML 5.3 que se espera
publicar en 2018 y cuyo primer borrador público se publicó en diciembre de 2017.
2.1.1 Eliminación de etiquetas y atributos no deseables

Los atributos de formato de muchas etiquetas han sido eliminados. Deben definirse en los
estilos CSS. Así, se pretende separar el formato del contenido definitivamente. Prácticas
que hasta ahora eran desaconsejadas, como el atributo background de <body> o los atribu-
tos align y border, pasan a estar prohibidas. Algunos ejemplos más son los atributos cell-
padding, cellspacing de las tablas, o las etiquetas , , <center> o <strike>.
Páxina 9
Se han eliminado etiquetas problemáticas como <frame>. Para mostrar una página dentro
de otra se deberá utilizar <iframe>. También se eliminan otras etiquetas que habían caído
en desuso <applet> (se utiliza <object>).
2.1.2 Mi primera página HTML5

La primera línea HTML de cualquier página web sirve para identificar el tipo de lengua-
je utilizado, y se le conoce como DOCTYPE (Document Type Declaration, Declaración del ti-
po de documento). El nuevo estándar sólo tiene un DOCTYPE:
<!DOCTYPE html>
con el cual informa al navegador que el código utilizado es HTML5. Esta declaración
puede ir en mayúsculas o en minúsculas.
HTML5 simplifica la sintaxis con respecto a las versiones anteriores. Por ejemplo:
en HTML4.01 en HTML5
meta <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8”> <meta charset=UTF-8>
script <script type=”text/javascript” src=”jquery.js”></script> <script src=”jquery.js”></script>
declarar una CSS <link rel=”stylesheet” type=”text/css” href=”styles.css” /> <link rel=”stylesheet” href=”styles.css” />
Así, podemos crear fácilmente una página en HTML5 con referencia a una hoja de esti-
los externa:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Empezando con HTML5</title>
<link rel="stylesheet" href="mihojadeestilos.css">
</head>
<body>
Esto es HTML
</body>
</html>
Debemos tener en cuenta que es necesario guardar el documento HTML usando la codi-
ficación especificada en la etiqueta head:
Así, si en la etiqueta anterior le estamos diciendo al navegador que la página va a utilizar
una codificación UTF-8 (para que permita reconocer los acentos) la página tiene que tener
realmente esta codificación. Esta codificación se tiene que indicar en el editor de html que
estemos utilizando. Cada editor tiene sus características y sus propios menús. Vamos a indi-
car donde su ubica esta opción en Notepad++ :
Páxina 10
2.2 Organizar el texto
A continuación vamos a ver las etiquetas que vamos a utilizar para introducir texto en nues-
tra página. Algunas se usan desde la primera versión de HTML y otras se han introducido
más recientemente en HTML5. Así veremos etiquetas para:
– Introducir párrafos y saltos de línea
– Organizar la página con títulos
– Resaltar palabras
– Crear listas
– Intoducir comentarios
2.2.1 Párrafos y saltos de línea

El texto en una página web se teclea habitualmente en párrafos. En el lenguaje HTML la
etiqueta se usa para delimitar los párrafos. También se debe usar la etiqueta al fi-
nal del párrafo para que la sintaxis esté bien formada, aunque muchos navegadores mostra-
rán el párrafo correctamente aunque no la tenga.
Esto es un párrafo
Por defecto cada párrafo se separa con una línea respecto a los otros párrafos.
Espacios en blanco
El texto dentro de las páginas web no respeta los espacios en blanco, ni tabuladores ni saltos
de línea que coloquemos en el código, a la hora de mostrar el contenido por pantalla. Solo
se considera el primer espacio en blanco, el resto se eliminan.
<!DOCTYPE html>
<html>
<head>
<title>Probando funcionamiento de espacios y salto de línea</title>
</head>
<body>
¡Hola!
Vamos a probar como funcionan los espacios
los tabuladores y saltos de línea en html.
Este texto tiene un poco de todo..

</body>
</html>
¡Todo el texto se muestra en la misma línea aunque haya espacios, tabuladores y saltos
de línea en el código! :
¡Hola! Vamos a probar como funcionan los espacios los tabuladores y saltos de línea en html. Este texto tiene un poco de todo..
La razón es permitir una mayor legibilidad del código, permitiendo en él que coloque-
mos el código con sangrías y espacios que mejoren su lectura, para que el mantenimiento
del mismo sea más cómodo.
Etiqueta de salto de línea
La etiquetqa se usa para insertar saltos de línea. Es una etiqueta vacía que normal-
mente va dentro de un párrafo. Por ejemplo:
Páxina 11
¡Hola! 
Vamos a probar como funcionan los espacios
los tabuladores y saltos de línea en html.
Este texto tiene un poco de todo..

Se visualizaría:
NOTA: Teóricamente se pueden varias etiquetas una detrás de la otra para hacer varios sal-
tos de línea, pero esto se considera una mala práctica porque dificulta el mantenimiento del código. Pa-
ra cambiar un texto con más precisión se usa CSS, que es un lenguaje que complementa a HTML para
dar formato al texto.
2.2.2 Títulos
Existen seis niveles de títulos diferentes. Los elementos h1, h2, h3, h4, h5 y h6 pueden usar-
se para los distintos niveles de títulos y subtítulos. h1 es el título principal y h6 el de menor
nivel.
El navegador muestra el título realmente importante (h1) en caracteres muy grandes y va

disminuyendo el tamaño a medida que vamos bajando de nivel.
No debemos seleccionar la etiqueta del título en función del tamaño da al texto el navega-
dor. Es fundamental estructurar la página correctamente y empezar con un título nivel 1 (
h1), luego un título nivel 2 (h2), etc. ¡No tiene que haber ningún subtítulo sin un título prin-
cipal! Para cambiar el tamaño del título usaremos CSS.
2.2.3 Elemento hr
El elemento HTML hr representa un cambio de tema entre párrafos (por ejemplo, un cam-
bio de escena en una historia, un cambio de tema en una sección). En versiones previas de
HTML representaba una línea horizontal. Aún puede ser representada como una línea hori-
zontal en los navegadores visuales, pero ahora es definida en términos semánticos y no tan-
to en términos representativos, por tanto para dibujar una línea horizontal se debería usar el
CSS apropiado.
En el siguiente ejemplo usamos hr para resaltar el contraste de sus temáticas:
<h1>Medio de comunicación</h1>
La radio (entendida como radiofonía o radiodifusión, términos no estrictamente
sinónimos) es un medio de comunicación que se basa en el envío de señales de
audio a través de ondas de radio.
<hr />
La televisión es un sistema para la transmisión y recepción de imágenes en
movimiento y sonido a distancia que emplea un mecanismo de difusión. 
2.2.4 Resaltar palabras

Algunas palabras en los párrafos son algunas veces más importantes que otras y querremos
que aparezcan resaltadas. HTML proporciona varias formas para resaltar el texto.
Páxina 12
 Enfatizar: Para enfatizar texto se usa la etiqueta . Por defecto, los navega-
dores muestran las palabras encerradas entre estas etiquetas en cursiva, aunque nosotros
podremos cambiar la apariencia utilizando CSS.
 Enfatizar considerablemente: Si queremos resaltar palabras con un énfasis fuerte o im-
portante se usa la etiqueta . Por defecto, el navegador las muestra en negrita.
 Marcado de texto: La etiqueta se usa para resaltar visualmente una parte del tex-
to que no es necesariamente importante, pero queremos que destaque del resto del texto.
Podemos cambiar en CSS la forma en la que se muestra.
Es importante comprender que la finalidad de estas etiquetas es indicar la relevanciadel
texto. Con se le dice al ordenador que “este texto es importante”, no que quere-
mos que se visualice en negrita aunque la mayoría de los navegadores lo muestren así.
Muchos programas analizan el código fuente de las páginas web y aún más importante
los robots de los motores de búsqueda. Estos robots rastrean la red y leen el código HTML
de todos los sitios. Este es el caso de los robots de Google y Bing por ejemplo. Como ellos
lo ven, las palabras clave «importantes» suelen tener más valor, así que si alguien hace una
búsqueda con estas palabras es más probable que se encuentre con vuestro sitio web.
2.2.5 Listas
Las listas son un modo elegante de estructurar ciertos tipos de contenido en un documento
HTML. Existen tres tipos de listas en HTML: listas sin orden, listas ordenadas y otras me-
nos usadas que son las listas de definición.
2.2.5.1 Listas sin orden

Una lista sin orden es aquella que proporciona una estructura de lista sin numeración al-
guna que indique secuencia. En otros contextos recibe el nombre de lista de viñetas. El na-
vegador mostrará cada elemento de la lista con una viñeta.
Crear una lista no ordenada es muy sencillo. Simplemente se usa la etiqueta <ul> para
abrirla y se cierra cuando termina con </ul>. Cada unos de los elementos de la lista (List
Item) se creará con una etiqueta <li>. Se pueden crear tantos como sea necesario.
<ul>
<li>elemento da lista</li>
<li> outro elemento da lista</li>
...
</ul>
2.2.5.2 Listas ordenadas
En las listas ordenadas, los elementos de la lista tiene números o letras. El nombre de la eti-
queta para crear una lista ordenada es <ol>, con <li> de nuevo para cada elemento de la
lista.
<ol>
<li>elemento da lista</li>
<li> outro elemento da lista</li>
...
</ol>
Páxina 13
2.2.5.3 Listas anidadas
Las listas pueden estar anidadas y combinadas según sea contido. Unicamente debemos te-
ner algo importante en cuenta a este respecto y es que cualquier lista que esté anidada den-
tro de otra debe tener su propio elemento li como vemos en el ejemplo:
<ul>
<li>elemento da lista principal</li>
<li> comezo da lista ordenada
<ol>
<li>elemento da lista ordenada</li>
</li>outro elemento da lista ordenada</li>
...
</ol>
</li>
<li> outro elemento da lista principal</li>
...
</ul>
Vamos a ver esto con un ejemplo concreto:
<ol>
<li>Informática e comunicacións
<ul>
<li>Ciclos Superiores
<ul>
<li>Administracións de sistemas informáticos e en rede</li>
<li>Desenvolvemento de aplicacións informáticas</li>
</ul>
</li>
<li>Ciclos medios
<ul>
<li>Sistemas microinformáticos e redes</li>
</ul>
</li>
</ul>
</li>
<li> Imaxe persoal
<ul>
<li>Ciclos Superiores
<ul>
<li>Estética</li>
</ul>
</li>
<li>Ciclos medios
<ul>
<li>Perruquería</li>
<li>Estética persoal decorativa</li>
</ul>
</li>
</ul>
</li>
</ol>
</body>
</html>
Páxina 14
2.2.5.4 Listas de definición
Las listas de definición son un tanto diferentes al resto de tipos de lista porque están estruc-
turadas como un glosario de términos. El elemento externo de la lista de definición utiliza
las etiquetas <dl>; y dentro de este elemento aparece uno o más pares de términos y sus
definiciones. En cada par, el término está definido por un elemento <dt> y la definición
aparece dentro de un elemento <dd>.
<dl>
<dt>SGML</dt>
<dd>Standard Generalized Markup Language</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>XML</dt>
<dd>eXtensible Markup Language</dd>
</dl>
Que se visualiza como se ve en la imagen:
2.2.6 Entidades
Cuando estemos insertando texto en nuestros documentos HTML puede darse el caso de
que necesitemos insertar símbolos o caracteres no incluidos en el juego de caracteres que
estamos utilizando. Para ello tenemos las entidades. La estructura de la entidad HTML es
un ampersand(&) seguido del código o nombre de la entidad y terminado en un punto y
coma. Por ejemplo, para insertar el símbolo del yen (¥) sería:
¥ ó ¥
Las entidades más utilizadas en HTML son para cinco caracteres que tienen un significado
especial (<, >, &, “, ‘ ), ya que si queremos mostrar estos carácteres en una página web, es-
cribirlos directamente puede hacer que la página no sea válida o que el navegador no mues-
tre el resultado esperado:
Caráter Entidad
< <
> >
& &
“ "
‘ '
Páxina 15
2.2.7 Comentarios
Un comentario en HTML no modifica lo que se visualiza en la página. Se usa para dejar
instrucciones sobre la forma en la que funciona la página. De este modo, ayuda a recordar
cómo funciona la página cuando se vuelve al código fuente después de que haya pasado un
tiempo sin verlo.
Los comentarios en HTML tienen el aspecto que se ve a continuación:
<!-—Esto es un comentario -->
 Haz las tareas 2, 3, 4 y 5 para comenzar a diseñar páginas sencillas.

2.3 Los metadatos
Los Metadatos son datos que describen datos, y HTML tiene una forma "oficial" de agregar
metadatos a un documento: el elemento <meta> .
Ya hemos visto que podemos usar este elemento para indicar el idioma y la codificación
de la página, pero hay muchos otros tipos de elementos meta. Po ejemplo, podríamos usarlo
para indicar el autor y la descripción de la página. Para ello debemos usar los atributos name
y content.
 name especifica el tipo de información que contiene
 content especifica el contenido meta real
Así para indicar el autor y la descripción de la página pondríamos:
<meta name="author" content="Pablito" />
<meta name="description" content="Información del elemento meta” />
En Firefox, si pinchamos con el botón dere-
cho del ratón y seleccionames “Ver Informa-
ción de la página” abre un cuadro de diálogo
donde podemos ver los metadatos:
Especificar una descripción que incluya pa-
labras clave relacionadas con el contenido de la
página es útil ya que tiene el potencial de hacer
que la página aparezca más arriba en las bús-
quedas relevantes realizadas en los motores de
búsqueda.
La descripción también se usa en las páginas
de resultados del motor de búsqueda ya que es
la descripción que se muestra en los resultados
del buscador.
Ya habíamos visto la importancia del elemento title y ahora podemos ver donde aparece
esta descripción:
Páxina 16
2.4 Enlaces
Los enlaces de hipertexto (o hiperenlaces) son el elemento característico de la web porque
permiten que las páginas se relacionen entre sí. La sencillez y libertad con que se pueden
enlazar páginas situadas en servidores distintos son el motivo del éxito de la web. Un enlace
de hipertexto tiene dos partes:
 el enlace, es decir, el elemento (texto o imagen) sobre el que se puede hacer clic con el
ratón,
 el destino, es decir, el elemento (página web, imagen, archivo, etc) que se muestra al ha-
cer clic en el enlace.
El destino de un enlace puede ser un directorio, un archivo o un elemento (texto o
imagen) situado en una página web:
– Si el destino es un directorio, se puede configurar el servidor para que muestre el con-
tenido del directorio, un archivo determinado (por ejemplo, el archivo index.html o
home.html) o para que rechace la petición.
– Si el destino es un archivo, el navegador mostrará el archivo desde el principio si es
capaz de mostrarlo (por ejemplo, si es una página web o una imagen), o abrirá otro
programa que sea capaz de abrirlo (por ejemplo si es un archivo PDF), o preguntará al
usuario qué debe hacer con el archivo (guardarlo en el disco o abrirlo con el programa
que elija el usuario).
– Si el destino es un elemento (texto o imagen) situado en una página web, el navegador
abrirá la página web y se desplazará hasta el elemento enlazado (salvo que el elemen-
to se encuentre al final de la página o cerca del final, en que entonces el navegador se
desplaza todo lo que puede hacia abajo). También puede ser un elemento situado en la
propia página web.
En el código fuente HTML los enlaces se identifican mediante la etiqueta <a> y su atri-
buto href, que contiene el URI del destino al que conduce el enlace.
Por ejemplo, para crear un enlace que abra el documento Doc.htm, que está en el directo-
rio Documentos de la dirección www.tal.net, sería:
<a href =”http://www.tal.net/Documentos/Doc.htm”>Hacer clic aquí</a>
Donde el texto que el usuario verá será “Hacer clic aquí”.
Los enlaces de texto se muestran en los navegadores de color azul y subrayados.
Si en el atributo href se escribe simplemente el carácter almohadilla (#), casi todos los
navegadores se desplazan al principio de la página.
Vínculos dentro de un mismo documento.
En documentos extensos se pueden utilizar enlaces que conducen a distintas partes del
documento para facilitar la navegación. Para construír un enlace dentro del mismo docu-
mento, es preciso definir dos etiquetas: el ancla y el enlace.
El ancla identifica la parte del documento a la que se va a ir al hacer clic encima del
vínculo; evidentemente, en el vínculo se debe especificar el nombre del ancla en vez del
nombre de un documento. Para ello se marca la posición añadiendo el atributo id a la eti-
queta correspondiente.
Párrafo al que vamos a saltar cuando pinchemos en el enlace 
Ponemos el enlace donde deseemos e indicamos en el atributo href el nombre del
Páxina 17
marcador indicado, pero anteponiendo al nombre el símbolo de la almohadilla ( #).
Ejemplo:
<a href ="#destino">Ir al párrafo destino</a>
Por otro lado es posible indicar direcciones de enlace que salten a una página y
dentro de ella se coloque en una posición marcada, por ejemplo:
<a href ="http://www.colegio.edu/sec1/actividades.html#verano">Actividades de verano</a>
El enlace del ejemplo salta a la página actividades.html localizada en la ruta indicada y

además se coloca en la posición indicada por la etiqueta marcada con el valor verano(en su
atributo id).
Enlaces no HTTP
Los navegadores son capaces de gestionar otros protocolos distintos a HTTP, por ejemplo el
protocolo FTP:
Enlace al <a href="ftp://glup.uv.es/pub/cdlibre/">servidor FTP de cdlibre</a>.
Un enlace con el atributo href con el valor mail-

to:dirección_de_correo_electrónico abre automáticamente el cliente de correo elec-
trónico (Outlook, Thunderbird, Evolution, etc.) con un correo dirigido a la dirección indica-
da. El uso cada vez más extendido del correo web hace que esta opción sea un engorro más
que una ayuda.
2.5 Imágenes
En informática se distinguen dos tipos de imágenes:
 Imágenes de mapa de bits, formadas por puntos de colores.
 Imágenes vectoriales, formadas por formas geométricass.
Cada formato tiene sus ventajas e inconvenientes:

 Las imágenes vectoriales tienen la ventaja de que ocupan poco espacio y se pueden am-
pliar a cualquier escala sin pérdida de calidad. Su inconveniente es que no permiten repre-
sentar imágenes sin formas definidas, como ocurre en las fotografías.
El formato de imágenes vectoriales más utilizado es SVG.
 Las imágenes de mapa de bits permiten representar imágenes sin formas definidas, pero
a cambio pierden calidad al ampliarlas y ocupan mucho espacio en disco.
Para reducir el tamaño de las imágenes de mapa de bits se utilizan diferentes algorit-
mos de compresión y por ello existen numerosos formatos de mapa de bits. Cada formato
está optimizado para un determinado tipo de imagen (número de colores y degradados).
Existen numeros formatos de mapa de bits, enfocados a diferentes tipos de imagen:
– para imágenes fotográficas (muchos colores), el formato más extendido es JPEG.
– para dibujos (pocos colores, formas bien definidas) los formatos más extendidos son
GIF y PNG.
– para dibujos con animación, el formato más extendido ha sido siempre el GIF anima-
do, aunque también se usa bastante el formato APNG.
– para dibujos sin compresión, el formato más extendido es BMP de Windows, pero
apenas se utiliza, ni se recomienda hacerlo, ya que los archivos son muy grandes.
Páxina 18
img
Es la etiqueta que permite mostrar imágenes vectoriales o de mapa de bits en una página
web. Es una etiqueta huérfana (como ).
Tiene los siguientes atributos:

 src  contiene el camino absoluto o relativo a la imagen desde la página web. Así que
si la imagen está en la subcarpetaimagenes, tienes que introducir:src="imagenes/flor.png"
Por ejemplo, para cargar la imagen logo.png, que se encuentra en la carpeta imagenes
situada dentro de la carpeta en la que está el documento html, sería:
<img src =”imagenes/logo.png” />
 alt  que significa "texto alternativo", esto es, un texto corto que describe lo que con-
tiene la imagen y que se mostrará en lugar de la imagen si esta última no se puede descar-
gar, o en los navegadores de personas con discapacidad visual que no pueden "ver" la
imagen. También ayuda a los robots de motores de búsqueda a buscar imágenes. El atri-
buto alt no es obligatorio en HTML (sí lo era en XHTML), pero se recomienda incluirlo
siempre, aunque sea con un valor vacío. Para nuestra imagen, por ejemplo, deberíamos
escribir:
<img src =”imagenes/logo.png” alt=”logotipo de la empresa” />
 title  que contiene el texto que se muestra en forma de "tip" (rectángulo amarillento
que aparece cuando se sitúa el ratón encima de la imagen). Es un atributo optativo.
 width y heigth  establecen la anchura y altura de la imagen. Si estos atributos no es-
tán definidos, la imagen se muestra con su tamaño original, pero si los atributos están de-
finidos, la imagen se adapta a esos valores. Los valores numéricos se interpretan como pí-
xeles.
No es aconsejable usar estos atributos para cambiar el tamaño de la imagen, ya
que si la ampliamos no se verá en buena calidad y si la reducimos estaremos cargan-
do una imagen grande para luego mostrarla en pequeño; sería más inteligente redu-
cirla primero con un editor de imágenes. En cualquier caso es importante utilizar este
atributo para que el navegador sepa de antemano el tamaño de la imagen y así
que maquete la página correctamente.
Si los valores no son proporcionales a la imagen original, la imagen de mapa de bits se
deforma mientras que la imagen vectorial se ajusta al menor tamaño sin deformarse.
En HTML5 no está permitido utilizar porcentajes en estos atributos.
Mostrar la imagen en miniatura
Si la imagen es muy grande, es recomendable mostrar su vista en miniatura en tu sitio web.

Después se añade un enlace a la vista en miniatura para que los visitantes puedan ver la
imagen en su tamaño original.1
Tendríamos las dos imágenes en la carpeta. Mostramos la versión pequeña y creamos un
enlace a la grande para que se muestre la versión ampliada al hacer clic sobre la vista en
miniatura.
<a href="imagenes/flor.jpg"><img src="imagenes/min_flor.jpg" alt="Foto de la flor"
title="Clic para ampliar" /></a>
 Resuelve los puntos 6, 7, 8, 9 y 10 de la lista de tareas.

1
Existen muchos programas para crear miniaturas de imágenes, como por ejemplo Easy Thumbnails.
Páxina 19

UD1 - 2 Conceptos Básicos de HTML

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

UD1 - 2 Conceptos Básicos de HTML

Cargado por

Copyright:

Formatos disponibles

1. HTML.

Lenguaje para crear páginas Web

El concepto de hipertexto responde, fundamentalmente, a una forma de concebir el acceso a

El hipertexto, también da la posibilidad de incluir, junto a la información escrita, una ima-

1.1 Creación de un documento básico HTML.

Si en un buscador escribimos “Currículos de Formación profesional da Xunta de Gali-

A continuación se presenta la forma más básica de un documento HTML.

Que se visualizaría como se ve en la imagen.

1.2 HTML vs XHTML

– Una gramática llamada “transitional”: La validación es más permisiva, per-

– Una gramática llamada “frameset”: Se utiliza para procesar los marcos

Los elementos vacíos deben terminarse <br> <br />

A continuación vemos un ejemplo de documento XHTML sencillo:

<!DOCTYPE ... > es obligatoria e indica el tipo de documento (DOCTYPE) de la

<html> es el elemento raíz de la página y además debe especificar el espacio de

La validación se puede hacer de tres maneras:

Distintas herramientas que permiten validar los documentos generados

Vamos a validar el siguiente documento:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

2.1 El largo camino de HTML4 a HTML5

En marzo de 2018 declararon obsoletas y reemplazadas (Superseeded) todas las reco-

2.1.1 Eliminación de etiquetas y atributos no deseables

2.1.2 Mi primera página HTML5

meta <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8”> <meta charset=UTF-8>

script <script type=”text/javascript” src=”jquery.js”></script> <script src=”jquery.js”></script>

2.2.1 Párrafos y saltos de línea

Etiqueta de salto de línea

El navegador muestra el título realmente importante (h1) en caracteres muy grandes y va

2.2.4 Resaltar palabras

2.2.5.1 Listas sin orden

2.2.5.2 Listas ordenadas

Vamos a ver esto con un ejemplo concreto:

Que se visualiza como se ve en la imagen:

 Haz las tareas 2, 3, 4 y 5 para comenzar a diseñar páginas sencillas.

Vínculos dentro de un mismo documento.

Ponemos el enlace donde deseemos e indicamos en el atributo href el nombre del

El enlace del ejemplo salta a la página actividades.html localizada en la ruta indicada y

Un enlace con el atributo href con el valor mail-

Cada formato tiene sus ventajas e inconvenientes:

Tiene los siguientes atributos:

Mostrar la imagen en miniatura

Si la imagen es muy grande, es recomendable mostrar su vista en miniatura en tu sitio web.

 Resuelve los puntos 6, 7, 8, 9 y 10 de la lista de tareas.

También podría gustarte