Está en la página 1de 13

U.A.C.

M
COMPUTACIN II

H T M L
Prcticas

Academia de Inf ormtica

2
HTML Bsico
El objetivo de esta prctica es el uso de algunos atributos bsicos para el texto y el fondo del documento, as como revisar la codificacin de color en HTML.

Prctica

Fundamentos Tericos.
Como vimos en la prctica 1 las partes en que se divide un documento HTML estn marcadas por las siguientes etiquetas bsicas:

<HTML>...</HTML> <HEAD>...</HEAD> <TITLE>...</TITLE> <BODY>...</BODY>

Principio y fin del documento Html Zona de encabezado Html Titulo visualizado por el browser (elemento de HEAD) Principio y fin del cuerpo del fichero Html

La estructura del documento es la siguiente:


<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>

Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirn definir diferentes posibilidades de la instruccin HTML. Estos atributos se definirn en la etiqueta de inicio y consistirn normalmente en el nombre del atributo y el valor que toma separados por un signo de igual, el valor del atributo se escribe entre comillas dobles o simples. El orden en que se incluyan los atributos es indiferente, no afectando al resultado . Por ejemplo la etiqueta <BODY> tiene algunos atributos que son de definicin global para todo el documento, como por ejemplo atributos que establecen los color y el fondo del documento.

Los atributos para la etiqueta <BODY> son: Atributo BACKGROUND = archivo) TEXT = #xxxxxx LINK = #xxxxxx VLINK = #xxxxxx URL ( o nombre del Descripcin Establece una imagen de fondo para el documento Define el color del fondo Define color del texto Define color para los hiperenlaces Color para hiperenlaces visitados

BGCOLOR = #xxxxxx

Los valores para los atributos de color se especifican mediante una codificacin hexadecimal, es decir un nmero hexadecimal de 6 dgitos, algunos colores se muestran en la siguiente tabla.

Colores definidos por la especificacin HTML 4.01

Color Hexadecimal Color Hexadecimal Color Hexadecimal Color Hexadecimal

Cyan #00ffff

black #000000

blue

#0000ff

fuchsia #ff00ff

gray

#808080

green #008000

lime

#00ff00

maroon #800000

navy #000080

olive

#808000

purple #800080

red

#ff0000

silver #c0c0c0

teal

#008080

white #ffffff

yellow

#ffff00

Revisemos algunas otras etiquetas as como sus principales atributos para darle mejor vista a nuestros documentos:

<P> Cambio de prrafo: El efecto se conseguir introduciendo la etiqueta <P> en el punto en el que deseemos que se produzca el espaciado. La etiqueta de fin de prrafo </P> es opcional no siendo necesario incluirla. Ejemplo Esta es una frase que forma un prrafo.<P>Este es el otro prrafo. Esta es una frase que forma un prrafo. Este es el otro prrafo. En el punto donde se ha introducido la instruccin HTML de nuevo prrafo se observa una separacin de dos lneas
2

HTML Resultado

Explicacin

<HR> Regla Horizontal: <HR ALIGN=LEFT|RIGTH|CENTER NOSHADE SIZE=n WIDTH=n> Se usa para dividir un documento en distintas secciones, mostrar una lnea horizontal de tamao determinable. Se asemejar al salto de pgina dentro de un documento. Si no se especifican atributos dibujar una lnea que ocupe el ancho de la pantalla del navegador y introduciendo una separacin con el texto anterior y siguiente, equivalente a cambio de prrafo. No es necesaria la etiqueta de fin </HR>. Con los atributos podemos especificar su forma y tamao, esto atributos son: ALIGN=LEFT, RIGTH CENTER: NOSHADE: SIZE=n: WIDTH=n n%: HTML Resultado Explicacin <HR SIZE=5 NOSHADE> Mostrar un lnea que ocupa todo el ancho disponible, es de 5 de alto y no tiene sombra ni efecto dimensional. <HR SIZE=5 WIDTH=50% ALIGN=LEFT> Mostrar un lnea que ocupa el cincuenta por ciento del ancho disponible - como se puede apreciar, la lnea esta contenida dentro de una celda, por tanto cubre la mitad de ella -. Es de 5 pxeles de alto y est alineada a la izquierda.

HTML Resultado Explicacin

Cabeceras
<H1> - <H6> Cabeceras de ttulos Para la instruccin: <H1>Este texto aparecer resaltado</H1> el resultado ser:

Este texto aparecer resaltado


<Hn ALIGN=CENTER>: Alineacin de la cabecera La forma de expresarlo ser: <H1 ALIGN=CENTER>Este texto aparecer resaltado y centrado</H1>

Este texto aparecer resaltado y centrado

Ejemplo de Cabeceras: Cabecera de tamao H6 <H6>Cabecera de tamao H6 </H6>

Cabecera H3 centrada

<H3 ALIGN=CENTER>Cabecera H3 centrada</H3>

Tamao y color de las fuentes de caracteres


La etiqueta que permite esto se llama FONT y presenta atributos que nos permiten modificar el tamao y color del texto incluido entre la etiqueta de inicio y fin. <FONT SIZE=n> : Tamao de la fuente Existe una etiqueta que redefine la fuente por defecto, esta etiqueta es: <BASEFONT SIZE ...> Los elementos de tamao de fuentes pueden ser definidos para todo un documento, teniendo validez dentro de elementos tales como listas y formularios, pero no tendrn validez global en las Inst. HTML <FONT SIZE=2>Muestra</FONT> <FONT SIZE=6>Muestra</FONT> <FONT SIZE=+2>Muestra</FONT> tablas. Muestra Muestra Explicacin Obtendramos en este caso texto de tamao de fuente 2 Este texto es de tamao de fuente 6 As definiramos fuente de tamao 6 de forma relativa: 3+2=5

Muestra
Muestra

<FONT face=nombre1,nombre2,etc> : Nombre de la fuente

El atributo face, permite sealar el nombre de la fuente a utilizar. Es importante sealar, que la fuente que se indique tambin deber estar instalada en la computadora que vea la pgina.

Ejemplos de definicin de tipos de fuentes Algunos ejemplos de la definicin de fuentes y colores :


Inst. HTML
<font color="#FF00FF" face="Courier New, Courier, mono">Muestra</font>

Muestra Muestra

Se ofrecen 3 alternativas de fonts

Explicacin

<font color="#0000FF" face="Comic Sans MS, MS Sans Serif, Arial">Muestra</font>

Muestra

Otras 3 alternativas de fonts

<BASEFONT SIZE=n>: Fuente por defecto Definir el tamao de la fuente que se considerar como base para definir los tamaos de fuente relativos. Si no incluye esta etiqueta el valor base para estos clculos es 3, con esta se puede variar, como se ve en el ejemplo.

Inst. HTML <FONT SIZE=2>Muestra</FONT> <BASEFONT SIZE=5> <FONT SIZE=2>Muestra</FONT>

Muestra

Explicacin El nuevo valor para el calculo del tamao relativo ser 6, notndose el efecto en el tamao de las fuentes

Muestra

Muestra

Ejercicio I. Prctica Paso a Paso.


Paso 1. Abre una ventana de Internet Explorer y visita la siguiente pgina http://roble.pntic.mec.es/apuente/colores_seguros.htm

Encontraras una paleta de colores y podrs conocer el valor hexadecimal correspondiente a cada color. Escoge dos colores un verde claro no brillante para el fondo y otro para el color de las letras y anota su cdigo hexadecimal. Paso 2. Crea dentro de la carpeta practicas una carpeta llamada practica2. Paso 3. Abre el editor Gel y crea un nuevo documento html llamado Practica2Ej1.html dentro de la carpeta practica2

Paso 4. Coloca el valor del atributo BGCOLOR de la etiqueta <BODY> igual al color que escogiste de fondo y dale al atributo TEXT el valor del color para las letras y como titulo escribe Practica2 <HTML> <HEAD> <TITLE>Practica2</TITLE> </HEAD> <BODY bgcolor="#C0CfC0" text="#006633"> </BODY> </HTML> Paso5. Dentro del cuerpo del documento agrega el siguiente texto: <HTML> <HEAD> <TITLE>Practica2</TITLE> </HEAD> <BODY bgcolor="#C0CfC0" text="#006633"> Septiembre Mes de la patria </BODY> </HTML> Paso 6. Encierra el texto Septiembre en la etiquete <H1> y </H1> y el texto Mes de la patria entre <H2> y </H2>. Con esto estamos estableciendo como encabezado ambos textos. <HTML> <HEAD> <TITLE>Practica2</TITLE> </HEAD> <BODY bgcolor="#C0CfC0" text="#006633"> <H1>Septiembre</H1> <H2>Mes de la patria</H2> </BODY> </HTML>

Paso7. Visualiza el resultado, ya sea abriendo el documento desde un navegador o bien dando click en la pestaa Preview en Gel

Paso 8. Modifica el atributo ALIGN de la etiqueta <H1> y dale el valor de center. Vuelve a visualizarlo <HTML> <HEAD> <TITLE>Practica2</TITLE> </HEAD> <BODY bgcolor="#C0CfC0" text="#006633"> <H1 align= center>Septiembre</H1> <H2>Mes de la patria</H2> </BODY> </HTML> Escriba sus observaciones:

Paso 9. Agrega las etiquetas marcadas en rojo para incluir tres lneas horizontales separadoras con diferentes atributos. <HTML> <HEAD> <TITLE>Practica2</TITLE> </HEAD> <BODY bgcolor="#C0CfC0" text="#006633"> <H1 align= center>Septiembre</H1> <H2>Mes de la patria</H2> <HR width=50% size=10 color="00ff00" align="left"> <HR width=30% size=15 color="ffffff" align="center"> <HR width=50% size=20 color="ff0000" align="right"> </BODY> </HTML>

Escriba sus observaciones:

Paso 8. Agrega dos saltos de lnea y el texto 15 de Septiembre da de la Independencia de Mxico en itlica. <HTML> <HEAD> <TITLE>Practica2</TITLE> </HEAD> <BODY bgcolor="#C0CfC0" text="#006633"> <H1 align= center>Septiembre</H1> <H2>Mes de la patria</H2> <HR width=50% size=10 color="00ff00" align="left"> <HR width=30% size=15 color="ffffff" align="center"> <HR width=50% size=20 color="ff0000" align="right"> <BR><BR> <I>15 de Septiembre da de la Independencia de Mxico</I> </BODY> </HTML> Paso 9. Inicia un nuevo prrafo y coloca el texto VIVAMEXICO. Para que el prrafo quede centrado da el valor de center al atributo ALIGN del prrafo. <HTML> <HEAD> <TITLE>Practica2</TITLE> </HEAD> <BODY bgcolor="#C0CfC0" text="#006633"> <H1 align= center>Septiembre</H1> <H2>Mes de la patria</H2> <HR width=50% size=10 color="00ff00" align="left"> <HR width=30% size=15 color="ffffff" align="center"> <HR width=50% size=20 color="ff0000" align="right"> <BR><BR> <I>15 de Septiembre da de la Independencia de Mxico</I> <P align=center> <!-- el prrafo centrado termina al iniciar uno nuevo-->. VIVAMEXICO </BODY> </HTML>
Nota: Recuerda que los comentarios no se ven al visualizar la pgina. Un comentario se escribe de la siguiente forma: <!-- comentario -->.

Paso 10. Mediante el atributo SIZE de la etiqueta <FONT> modifica el tamao de cada letra en el prrafo anterior como se muestra a continuacin.

<HTML> <HEAD> <TITLE>Practica2</TITLE> </HEAD> <BODY bgcolor="#C0CfC0" text="#006633"> <H1 align= "center">Septiembre</H1> <H2>Mes de la patria</H2> <HR width=50% size=10 color="00ff00" align="left"> <HR width=30% size=15 color="ffffff" align="center"> <HR width=50% size=20 color="ff0000" align="right"> <BR><BR> <I>15 de Septiembre da de la Independencia de Mxico</I> <P align="center"> <font size=3>V</Font> <!Tamao 3 (absoluto) --> <font size=4>I</Font> <font size=5>V</Font> <font size=+3>A</Font> <!Tamao 6 (relativo)--> <font size=+4>M</Font> <font size=6>E</Font> <font size=+2>X</Font> <font size=+1>I</Font> <font size=3>C</Font> <font size=-2>O</Font> <!Tamao 1( relativo)--> </BODY> </HTML>
Nota: Los valores posibles para el tamao son de 1 al 7, el tamao por defecto es 3. Al establecer un tamao relativo se suma o resta un valor al tamao por defecto

Escriba sus observaciones:

Paso 11. Agrega el encabezado <Smbolos Patrios>. Para lograr que se visualicen los smbolos < y > y el navegador no los confunda con una etiqueta se deben utilizar las codificaciones especiales para esos caracteres &lt y &gt <H2>&ltSmbolos patrios&gt</H2>
<! se utiliza &lt para < y &gt para >-->

Paso 12. Agrega los siguientes cuatro prrafos Prrafo1: Significado de los colores de la bandera "Tres Garantas": Religin, Independencia y Unin. Prrafo2: VERDE: simboliza el ideal de independencia poltica de Mxico, no slo con relacin a Espaa, sino tambin de otra nacin. Prrafo3: BLANCO: es la pureza de la religin catlica, principio activo de la unidad nacional.

Prrafo4: ROJO: representa la unin entre los indios, mestizos, criollos y espaoles residentes de Mxico y en general entre todos lo que constituan la poblacin mexicana. Paso13. Modifica el texto de cada prrafo cambiando el color el tamao y el tipo de letra en los ltimos tres prrafos utilizando la etiqueta <TEXT> con los atributos COLOR, SIZE y FACE. Por ejemplo para el Prrafo2 para cambiar el color de las letras a verde, el tamao a 5 y el tipo de letra a courier, agregamos las siguientes et iquetas: <P><Font color="green" size=5 face="courier"> VERDE:<BR> simboliza el ideal de independencia poltica de Mxico, no slo con relacin a Espaa, sino tambin de otra nacin. Cambia el texto del prrafo3 a color blanco tamao 5 y tipo de fuente verdana y el texto del prrafo4 a color rojo, tamao 5 y fuente time new roman Paso 14. Marca en negritas slo el nombre de cada color de la bandera utilizando la etiqueta <B> Por ejemplo: <P><Font color="green" size=5 face="courier"> <B> VERDE:</B><BR> simboliza el ideal de independencia poltica de Mxico, no slo con relacin a Espaa, sino tambin de otra nacin. Paso 15. Visualiza la pgina.

10

Ejercicio II. Retroalimentacin


1. Para qu utilizas la etiqueta <H1>? 2. Cul es la diferencia entre <H1> y <H2> 3. Para qu utilizas el atributo ALIGN? 4. Qu ocurre si en el texto del encabezado del Paso11 lo escribes como:
<H2> <Smbolos patrios> </H2>?

5. Menciona dos atributos que se utilizan en ms de una etiqueta 6. Cul es la diferencia entre establecer el color del texto desde el atributo TEXT (de la etiqueta BODY) y con el atributo COLOR (de la etiqueta FONT)? 7. Cules son los principales atributos de la etiqueta HR ?

Ejercicio III. Investigacin.


1. 2. 3. 4. Qu es un hypertexto? Qu etiqueta se utiliza para marcar un hiperenlace? Una imagen puede establecerse como hiperenlaece? Cul es la etiqueta para imagenes y sus principales atributos?

Ejercicio IV. Ejercicio Propuesto.


Instrucciones 1. Abre desde GEL el documento Practica1Ej4.html el cual hiciste como ejercicio en la prctica 1 y gurdalo como Practica2Ej2.html en la carpeta de la unidad C llamada prcticas y dentro del subdirectorio practica2. 2. Establece el fondo de color gris claro y el color del texto de azul obscuro para todo el documento. 3. Cambia el texto Universidad Autnoma de la Ciudad de Mxico a encabezado tipo 1 y con encabezado tipo 3 agrega en otro rengln el lema de la universidad Nada humano me es ajeno. Centra ambos encabezados. 4. Cambie de color el texto de sus datos personales estableciendo de tamao mayor los textos Nombre, Boleta y Carrera.

11

Ejemplo:

Nombre: Juan Prez Lpez Boleta: 03-254-154 Carrera: Cultura y Comunicacin


5. Aumente el ancho del separador y cmbielo de color. 6. Cambie el tipo de letra a courier en el texto que dice lo que le gusta ms de su carrera.

12