INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
UNIDAD 2. ETIQUETAS DE TEXTO
En esta unidad vamos a empezar a ver las etiquetas que sirven para colocar el texto en una página web.
Antes, de forma sencilla, veremos la estructura básica de una página web, también veremos una primera
introducción a las hojas de estilo CSS.
Estructura básica de la página
La primera línea <! DOCTYPE ... > no es propiamente una etiqueta de HTML, sino una declaración o
instrucción al navegador sobre la versión de HTML que utiliza la página. Para la versión HTML 5, el tipo
de documento es html: <!DOCTYPE html>
El resto del documento HTML está contenido dentro de la etiqueta <html></html>. Para indicar el
idioma es conveniente añadir el atributo lang="es": <html lang="es"></html>
Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por las
etiquetas <head></head> y el cuerpo, delimitado por las etiquetas <body></body>. Por lo tanto, el
aspecto básico de cualquier página web, es el siguiente:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
La etiqueta <head> contiene información sobre la página. Por ejemplo, contiene etiquetas que pueden
decir de qué trata la página, el título que debe de mostrar en la barra del navegador, o código javascript
y estilos, que pueden estar en el propio encabezado o como enlaces a otros archivos. Normalmente, lo
que contiene esta etiqueta no se muestra en el navegador, es una etiqueta que contiene declaraciones
sobre la página, pero no contenido propiamente dicho como texto o imágenes.
Las etiquetas que pueden ir dentro de <head> son <title> <style> <base> <link> <meta>
<script> <noscript>. Iremos viendo estas etiquetas a medida que nos hagan falta ya que ahora no
seríamos capaces de entender bien su significado en todos los casos. De momento sólo comentaremos
que obligatoriamente debe de contener la etiqueta <title></title>, que contiene el título de la página,
que es lo que se ve en la barra de título del navegador. En nuestro ejemplo de la unidad anterior el
título era "Mi primera página"
Dentro de <head>, para optimizar la página para diferentes anchos de pantalla, también es
conveniente definir el viewport, por ejemplo de esta
forma: <meta name="viewport" content="vwidth=device.width, initial-scale=1.0"> .
INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
En el <body> encontramos el contenido de la página, lo que se ve a través del navegador: texto,
imágenes, enlaces, tablas, etc... Por lo tanto, dentro del <body> pueden ir la gran mayoría de las
etiquetas html.
Escribiendo texto en el cuerpo de la página
Como estamos diciendo todo el texto de la página estará dentro del <body>, el texto dentro
del <body> debe estar, principalmente, dentro de párrafos. En HTML, los párrafos se identifican con la
etiqueta <p></p>. Dentro de los párrafos colocaremos texto e imágenes, y algunas etiquetas que nos
permitan dar formato al texto. Dentro de un párrafo no debe haber otros párrafos anidados.
A su vez, dentro del <body>, disponemos de encabezados que nos permiten organizar los títulos o
rótulos del texto. Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el más
pequeño. Por ejemplo, utilizaríamos un <h1> para poner el rótulo principal de la página, <h2> para
los títulos de los apartados, <h3> para los apartados de segundo nivel, etc. El propio texto de cada
apartado iría fuera del encabezado contenido en párrafos <p></p> u otras etiquetas.
Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de línea no se
muestran como en el código fuente. Si hay varios espacios seguidos, sólo se mostrará uno. Por ejemplo,
si en el código fuente escribimos Bienvenido a aulaClic se verá Bienvenido a aulaClic. Si queremos
poner varios espacios seguidos, utilizaremos el código html para el espacio,
El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de
línea pulsando Intro, estos no se verán. Para crear un salto de línea dentro de un párrafo, utilizamos
la etiqueta <br />.
Cada etiqueta <p></p> lleva implícito un salto de línea.
Veremos con más detalle y ejemplos la etiqueta <p>, un poco más adelante, en esta misma unidad.
Otras formas de agrupar el contenido dentro de la página web es con las etiquetas <div> y <span>.
La etiqueta <div> se utiliza a nivel de bloque y la etiqueta <span> a nivel de línea o palabras. Estas
etiquetas son básicamente contenedores genéricos de contenido. El contenido se escribe entre las
etiquetas de apertura y de cierre <div> contenido </div>, el criterio para agrupar contenido no está
definido estrictamente, por lo tanto podemos utilizarlas para lo que queramos, por ejemplo para dar
estilo al contenido.
Podríamos decir que las etiquetas <div> y <span> son unas etiquetas neutras dentro de la semántica
de HTML. Por el contrario, en HTML 5 han surgido nuevas etiquetas semánticas para agrupar el
contenido según su significado. Estas nuevas etiquetas a nivel de bloque son, section para
secciones, article para artículos, header para cabeceras, nav para menús, footer para pies de página
y aside para contenido en el lateral. A nivel de línea o texto tenemos muchas etiquetas semánticas
como strong, em, cite. A lo largo del curso iremos viéndolas con detalle.
El uso de estas nuevas etiquetas semánticas no es obligatorio, pero sí recomendable, sobre todo para
tener la información mejor estructurada y también para que los buscadores sean capaces de identificar
mejor el contenido de nuestra página. Resumiendo, lo recomendable es utilizar las etiquetas semánticas
y en los casos en los que no exista una etiqueta semántica apropiada utilizar
etiquetas <div> y <span>. En la unidad 12 veremos todo esto con más detalle.
Otras etiquetas para agrupar y organizar el contenido (texto, imágenes, ...) en formatos estructurados
son las listas (ul, ol, li) y las tablas (table, tr, td)
En este curso veremos todo esto progresivamente, en esta unidad vamos a empezar por las etiquetas
para representar texto, los párrafos, encabezados, saltos de línea, etc.
INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
Introducción a las hojas de estilo CSS
Un concepto fundamental en una página web es la separación entre el contenido y el formato,
actualmente para dar formato al texto se utilizan las hojas de estilo en cascada CSS (Cascading Style
Sheets). Es decir, en el archivo .html se escribe el contenido de la página web con etiquetas html, y
en el archivo .css se define el estilo o formato del contenido, por ejemplo el color del texto o el tipo de
alineación.
En la imagen siguiente podemos ver un ejemplo.
INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
En el archivo ejemplo_2_1.html tenemos las etiquetas html y el contenido, y en el
archivos ejemplo_2_1.css tenemos la hoja de estilo. El resultado es la página web que se muestra
en la parte inferior.
En la hoja de estilo vemos que a la etiqueta h1 se le ha aplicado el estilo para centrar el texto h1 {
text-align: center }, y a la etiqueta p se le ha aplicado el estilo para establecer el tipo de letra y el
tamaño del texto p { (font-family: arial; font-size: 16px; }, con lo cual a todas las etiquetas p se les
aplicarán estos dos estilos.
Si en lugar de aplicar un estilo a todas las etiquetas queremos aplicarlo a unas etiquetas en concreto
podemos declarar una clase y asignarla sólo a las etiquetas que queramos. En nuestro ejemplo hemos
creado la clase .resaltado que pone el texto en color azul, y lo hemos aplicado a una etiqueta
concreta: <p class="resaltado">Microsoft es la propietaria de Excel.</p> .
En este ejemplo, también vemos que para enlazar un archivo .html con un archivo .css se utiliza la
siguiente etiqueta: <link rel="stylesheet" type="text/css" href="css/ejemplo_2_1.css" /> que indica
que el archivo enlazado se llama ejemplo_2_1.css que se encuentra en la carpeta css.
La hoja de estilo también se puede declarar en el mismo archivo .html, concretamente dentro de la
etiqueta head, Aunque lo recomendable es hacerlo en otro archivo, como acabamos de explicar.
Las reglas de las hojas de estilo están formadas por el selector y entre llaves
las declaraciones separadas por punto y coma. Una declaración es un atributo (propiedad) seguido
por dos puntos y a continuación el valor de la propiedad.
Más adelante dedicaremos la unidad 9 a explicar con detalle la sintaxis de las hojas de estilo y otras
características, en realidad las hojas de estilo están muy relacionadas con las etiquetas de HTML por lo
que deberían explicarse de forma simultánea, aunque por otro lado, es bueno que haya un lugar donde
esté agrupada la explicación sobre hojas de estilo. A lo largo del curso iremos viendo más ejemplos del
uso de las hojas de estilo al explicar algunas etiquetas, si hay algo que no entiendas de esos ejemplos
puedes ir a la unidad 9 para consultar las dudas sobre las hojas de estilo.
Etiqueta <p>
La etiqueta <p> define un párrafo.
Ejemplo: <p>Un párrafo de texto</p>
Produce este resultado:
Un párrafo de texto
La etiqueta <p> es de tipo bloque, es decir, por defecto ocupa una línea completa en la página web.
Además, también incluye un margen superior e inferior. Por ejemplo, si escribimos dos párrafos en la
misma línea: <p>Un párrafo de texto. </p><p>Otro párrafo. </a>
Produce este resultado:
Un párrafo de texto.
Otro párrafo.
Si el contenido del párrafo no cabe en una línea será el navegador web quien lo divida en varias líneas
según el ancho disponible. Por lo tanto, el número de líneas que ocupe un párrafo dependerá del ancho
disponible. Si queremos incluir un salto de línea explícito dentro de un párrafo podemos utilizar la
etiqueta <br />. Como ya hemos dicho, los saltos de línea que escribamos en el código HTML no tienen
efecto al mostrar la página.
INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
Por ejemplo, en este fragmento de código html hay dos párrafos que se pueden ver de forma diferente
según el ancho del navegador.
Si el ancho es pequeño, el primer párrafo ocupa cuatro líneas.
Si el ancho es mayor, el primer párrafo ocupa tres líneas,
INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
También podemos ver cómo la línea en blanco que aparece en el código antes de "Es útil ..." y los
espacios en blanco detrás de "del tipo Hoja" no se muestran en la página web.
Observa que entre los dos párrafos se crea un salto de línea y además un margen de separación,
mientras que en el salto de línea creado con la etiqueta <br /> no existe ese margen.
Dentro del párrafo se suele introducir texto pero también se pueden incluir otros elementos, como
imágenes y elementos de texto (span, em, b, etc.), aunque no se pueden incluir listas y tablas.
Atributos. Hasta la aparición de la versión HTML 5, existía el atributo align para alinear el contenido
del párrafo, con los valores rigth, center, left.
Ejemplo: <p align="right">Contenido alineado a la derecha</p>
Contenido alineado a la derecha
A partir de HTML 5, se debe alinear el contenido desde la hoja de estilo con el atributo text-align y los
valores rigth, center, left, justify, initial, inherit.
Texto preformateado <pre>
La etiqueta <pre> define texto preformateado, es decir, que conserva los espacios y saltos de línea
presentes en el código html.
Ejemplo: <pre>Aquí hay más de un espacio
y un salto de línea</pre>
Produce este resultado:
Aquí hay más de un espacio
y un salto de línea
Por defecto, el navegador presenta el texto de esta etiqueta en una fuente de la familia monospace
(Courier).
Esta etiqueta de utiliza cuando queremos que el navegador muestre los espacios y saltos de línea,
como en un poema, datos en forma de tabla, etc. Por ejemplo:
Semifinal A Semifinal B
\ /
\ /
\ /
Final 15 Julio
Caracteres especiales
Cuando escribimos en lenguaje html, los caracteres < y > son dos caracteres especiales que indican
inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre
que los representa:
< Se representa con <
> Se representa con >
Como ya hemos visto el espacio en blanco se representa como
INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
Dependiendo del sistema de codificación que utilicemos y de la configuración del servidor web, existen
otra serie de caracteres que no se visualizan correctamente. Se recomienda utilizar la codificación utf-
8 colocando esta etiqueta <meta charset="utf-8" /> en la etiqueta <head> de la página web.
Si en nuestra página web utilizamos la codificación iso-8859-1 como era habitual hasta hace pocos
años (2014), habrá caracteres que no se verán bien. Es el caso de la ñ y las letras acentuadas, por
lo que al igual que ocurre con otros caracteres especiales, para insertarlos como texto habría que
escribir el nombre que los representa.
A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser
representados:
Carácter Representación
< <
> >
á á
Á Á
é é
É É
í í
Í Í
ó ó
Ó Ó
ú ú
Ú Ú
ñ ñ
Ñ Ñ
™ ™
Carácter Representación
€ €
$ $
£ &libra;
¥ ¥
ç ç
Ç Ç
ü ü
Ü Ü
& &
¿ ¿
¡ ¡
" "
· ·
º º
ª ª
¬ ¬
© ©
® ®
INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
Encabezados <h1> <h2> ...
Las etiquetas <h1> <h2> ... <h6> crean texto para encabezados. Se suelen utilizar para títulos,
subtítulos, rótulos, etc.
Ejemplo: <h1>Encabezado de primer nivel h1 </h1>
En la siguiente imagen puedes ver el tamaño de cada tipo de cabecera en relación al texto de párrafo:
Para los títulos y subtítulos es preferible utilizar etiquetas de encabezado que cambiar el tamaño de
una etiqueta de párrafo ya que las etiquetas de encabezado tienen significado semántico y son
utilizadas por los buscadores para dar significado al texto en función de su importancia.
Separadores <hr>
La etiqueta <hr> crea un separador horizontal. Hasta HTML 4 se representaba en forma de línea y
tenía atributos para definir la anchura, alineación, ... En HTML5 esta etiqueta se define como un
separador semántico más que como un separador visual, aunque los navegadores siguen
representando una línea horizontal. Además esta etiqueta ya no tiene atributos, aunque cómo siempre
con las hojas de estilo podemos darle el formato que queramos.
Ejemplo: <hr>
Produce este resultado:
Con un estilo podemos alinearla al centro, darle un ancho del 80%, darle un borde de 1 px con estilo
punteado, color azul:
hr {
text-align: center; width: 80%;
border: 1px dashed blue; }
}
Etiqueta <blockquote>
La etiqueta <blockquote> se utiliza para definir un texto o cita que proviene de otra página web. Con
el atributo cite se indica esa página web, aunque este no es visible para el usuario.
Ejemplo:
INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
<blockquote cite="https://www.aulaclic.es/internet/t_4_1.htm"> A veces resulta muy gratificante
encontrar algo que ni siquiera sabíamos que existía y que supera nuestras expectativas. Es uno de los
motivos por los que Internet engancha a la gente. Es como encontrarse frente a un gigantesco basurero
y en la primera patada encontrar un diamante. </blockquote>
Atributos: cite valor: URL
Etiqueta <cite>
La etiqueta <cite> se utiliza para citar un titulo en una obra creativa (Novela, película, canción, ...)
Normalmente los navegadores visualizan la cita en tipo de letra cursiva.
Ejemplo:
<p> El famoso cuadro<cite>Gernika</cite> fue pintado por P. Picasso en 1937.</p>
El famoso cuadro Gernika fue pintado por P. Picasso en 1937.
No hay que confundir esta etiqueta <cite> con el atributo cite que acabamos de ver en la
etiqueta <blockquote>.
Etiqueta <q>
La etiqueta <q> se utilizar para poner entre comillas un texto corto.
Ejemplo:
<p> Al despedirse dijo: <q>Hasta nunca</q> y cerró la puerta.</p>
Al despedirse dijo: Hasta nunca y cerró la puerta.
Si el texto entre comillas se refiere a una cita es conveniente añadir el atributo cite con la URL, que no
será visible para el usuario.
Ejemplo:
<p> La web SoyPablista es <q cite="https://www.soypablista.com ">La primera web en español sobre
cursos gratuitos online</q> en la fecha actual, 2017.</p>
La web SoyPablista es La primera web en español sobre cursos gratuitos online en la fecha actual.
Para citas largas es mejor usar la etiqueta <blockquote>.
Etiqueta <strong>
La etiqueta <strong> se utiliza para dar importancia a un texto corto. Los navegadores ponen el texto
en negrita.
Ejemplo:
<p> Un coche histórico debe tener, al menos, <strong>25 años</strong> desde la primera
matriculación.</p>
Un coche histórico debe tener, al menos, 25 años desde la primera matriculación.
Etiqueta <em>
La etiqueta <em> se utiliza para dar énfasis a un texto corto. Los navegadores poner el texto en
cursiva.
Ejemplo:
<p> Una página web puede ser consultada desde <em>cualquier</em> parte del mundo.</p>
Una página web puede ser consultada desde cualquier parte del mundo.
Etiqueta <b>
La etiqueta <b> se utiliza para destacar un texto corto, sin que ello signifique que es importante. Los
navegadores ponen el texto en negrita.
Ejemplo:
INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
<p> El futbolista es el deportista mejor <b>pagado</b>.</p>
El futbolista es el deportista mejor pagado.
En muchas ocasiones es difícil distinguir si un texto corto es importante, queremos darle énfasis o
merece ser destacado, por lo que utilizar las etiquetas <strong> <em> o <b> puede ser un poco
ambiguo. Podríamos simplificar diciendo que si queremos ponerlo en cursiva utilizaremos <em>, y si
queremos ponerlo en negrita y que sea tenido en cuenta por los buscadores como un texto importante
utilizaremos <strong>, y si sólo queremos ponerlo en negrita utilizaremos <b>.
Etiqueta <sub>
La etiqueta <sub> se utiliza para ver texto como subíndice, es decir, colocado en la mitad inferior de
la línea.
Ejemplo:
<p> H<sub>2</sub>O. Texto <sub>subíndice</sub></p>
H2O. Texto subíndice.
Etiqueta <sup>
La etiqueta <sup> se utiliza para ver texto como superíndice, es decir, colocado en la mitad superior
de la línea.
Ejemplo:
<p>x<sup>2</sup>. Texto <sup>superíndice</sup></p>
x2. Texto superíndice
Etiqueta <code>
La etiqueta <code> se utiliza para indicar que se trata de un fragmento de código de programación.
Los navegadores ponen el texto letra monospace (normalmente Courier). Por ejemplo, código de php,
javascript, etc.
Ejemplo:
<code>var x,y; </code>
var x,y;
INSTITUCIÓN EDUCATIVA PABLO VI – AREA INFORMÁTICA GRADO 11° – CUARTO PERIODO
PRIMER TEMA: ETIQUETAS DE TEXTO (HTML) – DOCENTE: ING. JAIRO L. ACOSTA H.
EVALUACIÓN 1: ETIQUETAS DE TEXTO
Sólo una respuesta es válida por pregunta. Marca con X la respuesta que consideres correcta.
1. Podemos indicar que una página web está escrita en idioma español con el atributo
lang="es"que se escribe en la etiqueta ...
a) <head>
b) <html>.
2. Dentro de la etiqueta <head> ...
a) Podemos escribir sólo determinadas etiquetas HTML
b) Obligatoriamente se debe incluir la etiqueta <title>
c) Las dos anteriores son ciertas.
3. La mayor parte de la información de la etiqueta <head> no se muestra al usuario como
texto de la página web.
a) Verdadero.
b) Falso.
4. La etiqueta <body> contiene lo que va a ver el usuario en la página web, texto, imágenes,
vídeos, etc.
a) Verdadero.
b) Falso
5. Dentro de una etiqueta de párrafo <p> sólo puede ir texto.
a) Verdadero
b) Falso.
6. Por defecto, una etiqueta <p> implica un salto de línea.
a) Verdadero.
b) Falso
7. La etiqueta <div> se puede utilizar para dar formato a una parte del texto y también para
separar el texto según su significado.
a) Verdadero.
b) Falso
8. ¿Por qué es conveniente utilizar los encabezados h1, h2, ...?
a) Para dar formato a los títulos
b) Para definir la importancia de los títulos.
c) Las dos anteriores son ciertas
9. Para definir el formato del texto ...
a) Se pueden utilizar indistintamente las hojas de estilo y las etiquetas HTML
b) Es preferible utilizar las hojas de estilo.
10. Las etiquetas <b> y <strong> ...
a) Ambas ponen el texto en negrita pero, además, <strong>, indica que el texto es importante.
b) Ambas ponen el texto en negrita pero, además, <b>, indica que el texto es importante
c) Ninguna de las dos anteriores respuestas es cierta
