PROGRAMACIÓN HTML I

SEMANA 4
Texto en páginas web

Todos los derechos de autor son de la exclusiva propiedad de IACC o de los otorgantes de sus licencias. No está
permitido copiar, reproducir, reeditar, descargar, publicar, emitir, difundir, poner a disposición del público ni 1
ESTE
utilizarDOCUMENTO
los contenidos paraCONTIENE LAdeSEMANA
fines comerciales 1
ninguna clase.
 2
ESTE DOCUMENTO CONTIENE LA SEMANA 1
ÍNDICE

TEXTO EN PÁGINAS WEB ..................................................................................................................... 4

OBJETIVOS ESPECÍFICOS ........................................................................................................................... 4
INTRODUCCIÓN ...................................................................................................................................... 4
1. FORMATOS DE TEXTO EN HTML ................................................................................................. 5
1.1. MANEJO DE FUENTES .......................................................................................................... 5
1.2. CAMBIO DE FUENTES .......................................................................................................... 5
1.3. TEXTO EN NEGRITA O EN CURSIVA ..................................................................................... 6
1.4. TAMAÑO DEL TEXTO ........................................................................................................... 7
1.5. COLOR DEL TEXTO ............................................................................................................... 8
1.6. SUPERÍNDICES Y SUBÍNDICES ............................................................................................ 10
1.7. SUBRAYADO Y TACHADO DE TEXTO.................................................................................. 10
1.8. PARPADEO DE TEXTO ........................................................................................................ 11
1.9. OCULTAR TEXTO (AÑADIR COMENTARIOS) ...................................................................... 11
1.10. MARQUESINAS .............................................................................................................. 11
1.11. SANGRÍAS ...................................................................................................................... 12
2. LISTAS ........................................................................................................................................ 12
2.1. LISTAS ORDENADAS........................................................................................................... 13
2.2. LISTAS NO ORDENADAS .................................................................................................... 14
2.3. LISTAS DE DEFINICIÓN ....................................................................................................... 14
2.4. LISTAS ANIDADAS .............................................................................................................. 15
COMENTARIO FINAL.......................................................................................................................... 16
REFERENCIAS........................................................................................................................................ 17

3
ESTE DOCUMENTO CONTIENE LA SEMANA 1
TEXTO EN PÁGINAS WEB

OBJETIVOS ESPECÍFICOS
 Comprender el formateo y efectos sobre el texto en una página web.
 Utilizar los distintos tipos de listas al interior de una página web.
 Utilizar la anidación de listas comprendiendo sus alcances y características.

INTRODUCCIÓN
La presentación de una página web impacta directamente en el uso que pueda darle una persona
a la misma, es por eso que al momento del diseño resulta importante cuidar aspectos relacionados
con la forma en la cual se presentan los contenidos.

Esta semana el contenido va dirigido a mostrar cómo se procede a dar formato dentro de una
página web y los efectos que se pueden llevar a cabo sobre este.

A su vez, se aprenderá cómo utilizar listas, las cuales muestran, de una forma más ordenada,
información dentro de la página que por sus características debe ir agrupada con información
similar.

4
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 1. FORMATOS DE TEXTO EN HTML

En HTML al hablar de formato de texto se está haciendo referencia a una serie de etiquetas que se
emplean para asignarle al texto el aspecto que se desee. Es un punto muy importante a la hora de
decidir diseñar una página web, ya que el texto mostrado de una forma armónica puede garantizar
que el usuario se sienta cómodo a la hora de navegar por la misma.

1.1. MANEJO DE FUENTES

Si bien es cierto el manejo de fuentes directamente en HTML va en retirada, ya que actualmente

usamos para ello los archivos CSS, aún gran parte de los sitios en internet presentan y formatean
su texto mediante este lenguaje, lo que se conoce como formato en duro.

En relación a la fuente que se puede utlizar en el formteo del texto, es necesario saber que, a
pesar de seleccionar un tipo en particular, la visualización en este tipo de fuente en el navegador
de un cliente dependerá de si dicha fuente está disponible en el sistema operativo del computador
utilizado.

También el formateo de texto en duro utilizará menos recursos del cliente (como memoria) al
momento de ser visualizado en el nevagador.

1.2. CAMBIO DE FUENTES

La etiqueta que debe utilizarse para cambiar en duro la fuente de un texto es la siguiente:

<font face=”Arial, Helvetica, sans-serif”>Texto a formatear</font>

A continuación se presenta un ejemplo en el que se han estipulado 3 tipos de fuentes: Arial,

Helvetica y Sans-Serif. Esto significa que si el primer tipo no se encuentra en el computador del
cliente, será reemplazado por el segundo, y si este último no está disponible será reemplazado por
la tercera opción.

Los tipos utilizados generalmente son:

5
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 1.3. TEXTO EN NEGRITA O EN CURSIVA

La etiqueta <b> se utilizará para cambiar el texto a negrita (Bold):

Y será visualizado así:

También se cuenta con la etiqueta <strong> que cumple el mismo objetivo, pero poniendo un
énfasis semántico en el texto. Al otorgarle énfasis a un determinado texto, se está indicando que
su significado es de suma importancia dentro de la página web, por lo cual los motores de
búsqueda tomarán en cuenta tal texto cuando el usuario haga una búsqueda relacionada.

6
ESTE DOCUMENTO CONTIENE LA SEMANA 1
Será desplegado así:

Para un efecto cursivo (Italic) se usará la etiqueta <i>. De esta forma se puede dar énfasis
igualmente a un texto.

Será despelgado así:

También se puede ocupar para cursiva la etiqueta <em>, la que dará un énfasis semántico para los
motores de búsqueda, tal como se explicó con la etiqueta <strong>.

Será mostrado así:

1.4. TAMAÑO DEL TEXTO

Se ha visto que con la etiqueta <Font> se establece el tipo de fuente. Ahora bien, si se adiciona a
este elemento su atributo size, podemos establecer su tamaño.

Existen siete (7) tamaños que se pueden utilizar, los cuales van desde el 1 hasta el 7, siendo el 1 el
tamaño más pequeño y el 7 el más grande.

7
ESTE DOCUMENTO CONTIENE LA SEMANA 1
Por ejemplo,

<font size=4>Este texto tamaño 4</font>

<font size=7>Este texto tamaño 7</font>

Se verá de la siguiente forma:

1.5. COLOR DEL TEXTO

Igualmente si se agrega el atributo color al elemento <Font>, se podrá definir un color para el
texto. Todos los colores son definidos por la regla RGB (RED-GREEN-BLUE: ROJO-VERDE-AZUL), a
través de la combinación de estos 3 colores.

Según Gómez y Alcayde (2014), para definir el color del texto se considera la combinación
RRGGBB, donde RR, GG y BB son números hexadecimales que fluctúan entre 00 y FF, que
representan el % en que cada uno de los colores estará presente en la conformación del nuevo
color: así por ejemplo tendremos FF0000 para un color rojo puro, 0000BB para el azul, FF80000
para un naranjo.

Esta combinación acompaña al atributo color y debe ser antecedida por #, como se muestra a
continuación:

<font color="#FF0000">este texto está en rojo</font>

<font color="#0000FF">este texto está en azul</font>

Se verá así:

8
ESTE DOCUMENTO CONTIENE LA SEMANA 1
Para un uso más simple, se establece un nombre para cada uno de los colores más comunes, y así
se evita utilizar la combinación RRGGBB.

Nombre Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow

Ejemplo :

<font color="YELOW">Este texto está en amarillo</font>

Se verá así:

Este texto está en amarillo

9
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 1.6. SUPERÍNDICES Y SUBÍNDICES

En la vida cotidiana es común verse enfrentado a la utilización de superíndices y subíndices,

especialmente en el caso de la matemática o la química. Un superíndice o subíndice es cualquier
número, letra o símbolo que, para el caso del superíndice, debe ser de menor tamaño y
encontrarse por encima de la línea donde está el texto y que, para el caso subíndice, es lo
contrario, es decir, debe encontrarse por debajo de esta línea. Al momento de elaborar una página
web, si se hace necesario emplear alguno de ellos, se pueden utilizar los siguientes formatos:

<p>Este texto está en _subíndice</p>

<p>Este otro texto en ^superíndice </p>

Se obtendrá lo siguiente:

1.7. SUBRAYADO Y TACHADO DE TEXTO

Para subrayar se utiliza el elemento <ins>.

Ejemplo:

<p>Mi animal preferido es el <ins>gato</ins></p>

Se obtendrá lo siguiente:

Para tachado se utiliza el elemento <del>.

Ejemplo:

<p>Mi animal preferido es el <del>gato</del> perro</p>

10
ESTE DOCUMENTO CONTIENE LA SEMANA 1
Se obtiene:

1.8. PARPADEO DE TEXTO

El elemento <blink> que permite mostrar un texto parpadeante ya está discontinuado en las
actuales versiones de HTML, pudiendo existir la posibilidad que no sea interpretado por el
navegador.

<blink>este texto está parpadeando </blink>

1.9. OCULTAR TEXTO (AÑADIR COMENTARIOS)

Mediante el uso del atributo hidden añadido a un elemento <p>, se puede ocultar el texto de
dicho párrafo.

<p hidden> este texto no se mostrará</p>

1.10. MARQUESINAS

Es posible usar el elemento <marquee> para crear marquesina. Este elemento crea una zona
rectangular, la cual —al igual que una marquesina de cine— presenta el texto linealmente y en
movimiento.

<marquee behavior="alternate" bgcolor="#EFEFEF" scrollamount="2" scrolldelay="10"

width="150" height="20">Espere por favor</marquee>

11
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 1.11. SANGRÍAS

El elemento <blockquote> se utiliza para establecer una sangría en un párrafo. Una sangría
corresponde a los espacios que existen entre el margen izquierdo y el párrafo en cuestión, o entre
este y el margen derecho.

Ejemplo:

<strong>Estructuras de control de un programa</strong><br />

<hr />

Estas estructuras permiten establecer el orden del flujo de proceso dentro de un programa.

<blockquote>

La estructura IF permite bifurcar el flujo, dependiendo del valor de verdad de una condición.

</blockquote><hr />

Será desplegado de la siguiente forma:

2. LISTAS

Otra de las estructuras que se pueden encontrar en HTML son las listas que permiten presentar
información en forma tabular y señalada por símbolos o números.

12
ESTE DOCUMENTO CONTIENE LA SEMANA 1
Ejemplo:

2.1. LISTAS ORDENADAS

Una lista ordenada comienza con el elemento <ol> (ordered list), y cada ítem de la lista debe
comenzar con el elemento <li>.

Ejemplo:

Mediante el atributo type se puede indicar qué viñeta será usada para la visualización.

Type Descripción
type="1" Los ítems serán ordenados con números
(por defecto)
type="A" Los ítems serán ordenados con letras
mayúsculas
type="a" Los ítems serán ordenados con letras
minúsculas
type="I" Los ítems serán ordenados con números
romanos en mayúscula
type="i" Los ítems serán ordenados con números
romanos en minúscula

13
ESTE DOCUMENTO CONTIENE LA SEMANA 1
Ejemplo:

2.2. LISTAS NO ORDENADAS

Una lista ordenada comienza con elemento <ul> (unordered list), y cada ítem de la lista debe
comenzar con el elemento <li>.

Ejemplo:

2.3. LISTAS DE DEFINICIÓN

Este tipo de listas es poco utilizado en las páginas HTML. Funcionan como un diccionario en el cual
cada elemento que conforma la lista será presentado con términos y definiciones. El elemento
<dl> genera la lista de definición y los elementos <dt> y <dd>, respectivamente, definen el término
y la descripción de cada ítem de la lista.

14
ESTE DOCUMENTO CONTIENE LA SEMANA 1
Ejemplo:

2.4. LISTAS ANIDADAS

Una lista anidada consiste en colocar una lista dentro de otra, teniendo la lista del interior un
margen respecto de la primera. Estas anidaciones se hacen necesarias a la hora de presentar
temas y subtemas dentro de una página web, dependiendo del fin que se persiga.

15
ESTE DOCUMENTO CONTIENE LA SEMANA 1
COMENTARIO FINAL
Durante esta semana se pudo conocer la forma en la cual se puede dar formato al texto dentro de
una página web. Contar con un texto que sea agradable a la vista garantiza que el usuario navegue
por la página sin problema alguno.

Por otra parte, es importante conocer las etiquetas que permiten dar énfasis a una parte de la
página. Con esto se mantiene visualmente la importancia de cada texto plasmado, y para el caso
de los motores de búsqueda posibilita que al momento de una búsqueda el motor sea capaz de
detectar —dentro de todo lo que está en la página que se relaciona con esa búsqueda— qué
resulta más importante mostrar.

Diseñar una página web es la suma de muchas consideraciones, entre las cuales el manejo de
texto corresponde a una de las más importantes.

16
ESTE DOCUMENTO CONTIENE LA SEMANA 1
REFERENCIAS
Gómez, J. & Alcayde, A. (2014). Construcción de páginas web. 1.ª edición. Madrid: RA-MA Editorial.

Sánchez, J.; Santos, G. & Molina, P. (2001). HTML 4, iniciación y referencia. 2.ª edición. Madrid:
McGraw-Hill.

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2015). Texto en páginas web. Programación HTML I. Semana 4.

17
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 18
ESTE DOCUMENTO CONTIENE LA SEMANA 1