Introducción al lenguaje HTML

Taller 4
C.E.D General Santander
Grado 10°

Objetivo

Conocer de que modo se usan las etiquetas que modifican las propiedades del
texto, como por ejemplo el tamaño, el color, el tipo de fuente, además de
aprender como cambiar el color de fondo y agregar imágenes para que se vean
como fondo de la página.

Se generaran listas de elementos y se conocerán las diferencia entre cada una

de ellas (etiquetas especializadas en la construcción de listas)

Practica

Para hacer mas llamativa la pagina web que estemos construyendo, veremos de
que manera se puede manejar el texto que escribimos; para hacer estas
modificaciones, se usara la etiqueta font, con su rica gama de parámetros que
combinados harán que el texto que antes era plano y negro, ahora se vea con
diferentes modificaciones de color, tamaño y estilo.

1. Abra un nuevo documento HTML y llámelo ejercicio4.htm

2. Escriba la estructura de un documento HTML como se vio en el taller 1.
3. Agregue dentro de body una etiqueta <div> para dar una mejor
apariencia al párrafo que escribamos.

Luego de escribir la estructura básica del documento, se vera algo similar a e

 4. Ahora se agregara la etiqueta <font> con el fin de modificar las
propiedades del texto escrito.
Los parámetros que puede tomar la etiqueta <font> son:
- FACE: cambia el tipo de fuente del texto.
- SIZE: cambia el tamaño del texto.
- COLOR: cambia el color del texto.

Estos parámetros se pueden combinar entre si dependiendo de la necesidad que

se tenga.

Modificaremos los tres parámetros, dando un aspecto diferente al texto en

nuestra pagina.

Ahora revise que cambios ocurrieron en la página web por medio del explorador.
 5. Luego de modificar las propiedades del texto, se modificara ahora el color
del fondo, esto se lograra a través del parámetro de la etiqueta body,
bicolor; a este parámetro le asignamos un color el cual se desplegara
cuando se visualice la pagina en el explorador.

Este parámetro con el valor “#02FFAA”, mostrara de color de fondo un color

verde.
 6. Ya que se vio como se cambia el color del fondo del cuerpo de la pagina,
ahora se insertara una imagen de fondo, la cual recreara de manera mas
grafica el propósito del sitio web.

Se usara el parámetro background y bicolor para mostrar la imagen que se

determine.

En este caso tenemos una imagen que se llama logoSED.jpg, la cual ubicamos en
la carpeta donde se encuentra el documento HTML ejercicio4.htm; de este modo
se incluirá dicha imagen como fondo de la pagina web.
 7. Ahora se agregara una lista desordenada a la pagina web por medio de las
etiquetas <ul></ul>; se les llama desordenadas ya que muestra los
elementos listados por medio de viñetas, para especificar los elementos de
la lista, usaremos las etiquetas <li></li>, esto indicara al explorador que
el texto enerrado por las etiquetas hace parte de la lista.
8. Para el caso de las listas ordenadas, se usaran las etiquetas <ol></ol>, y

del mismo modo que en las listas ordenadas, se encerrara cada elemento
de la lista entre las etiquetas <li></li>

Se puede ver al abrir el documento con el explorador, la diferencia entre una lista
ordenada y una desordenada,
 1. También se pueden tener listas de definiciones que como su nombre lo
indica, organiza un grupo de definiciones de cualquier tipo de tal manera
que facilita su lectura; las etiquetas que se usan para definirla son:
<dl></dl> para iniciar una nueva lista de definiciones, <dt></dt> para
mencionar un termino y <dd></dd> para definir el termino.

Es importante destacar que dentro del

documento HTML, se pueden incluir notas que aclaren cada una de las
funcionalidades que se están implementando en cada lugar del texto; se
hace por medio de las etiquetas:

<!—Comentario sobre alguna parte del código; esta línea no se vera en cuando
el documento se abra con el explorador-->
Al visualizarlo en el navegador nos daremos cuenta que el código de los
comentario estará oculto, y solo servirá como referencia para futuras
modificaciones de la pagina.

2. Ahora para poder escribir bien en cualquier idioma y poder usar caracteres
especiales, vamos a explorar algunas instrucciones que ayudaran a que se
puedan visualizar de manera correcta las tildes, la virulilla (~), las ñ, los
caracteres “<” y “>” que al pertenecer al lenguaje HTML, podrían generar
confusiones al explorador haciendo que la pagina funcione de manera
errónea.
Algunas de estas instrucciones son:

Tildes a las vocales:

&aacute; -> á
&eacute; -> é
&iacute; -> í
&oacute; -> ó
&uacute; -> ú

Otras instrucciones son:

&ntilde; -> ñ
&lt; -> <
&gt; -> >
&amp; -> &
&quot; -> “ (Comillas dobles)

Un ejemplo en nuestro documento HTML seria:

Al visualizar la pagina en el explorador, se verán cada uno de los cambios que
genera cada una de esas instrucciones especiales.