Temas:
Estructura de un documento HTML.
Zonas de División Principales: Encabezamiento y Cuerpo. Uso de Separadores.
Manejo de Etiquetas básicas de centrado y de formato. Uso de Listas Ordenadas.
Comentarios no visibles en la pantalla.
(La práctica tiene una duración de 1 hora y media)
1. Encienda el Equipo: CPU y Monitor.
2. Compruebe la existencia de su carpeta de trabajo. De no existir créela dándole las tres letras de sus iniciales.
3. Ingrese al menú Inicio, seleccione Programas / Accesorios / Bloc de Notas. 4. Un documento HTML esta dividido en 2 zonas principales:
• El Encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>.
• El Cuerpo, comprendido entre las etiquetas <BODY> y </BODY>.
Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el titulo del documento, comprendido entre las etiquetas <TITLE> y </TITLE>.
5.
En el procesador de texto copiamos lo siguiente:
<HTML>
<HEAD>
<TITLE> Mi Primera Página Web </TITLE> </HEAD>
<BODY>
<H1> <CENTER> Diseño de Paginas en HTML </CENTER> </H1>
<HR>
Esta es mi primera pagina utilizando <B>HTML</B>. No parece tan difícil como al inicio, así que pondré todo de mi parte para conocer bien esta herramienta.
<P>El <B>HTML</B> tiene como principio fundamental el uso de las etiquetas o tags. </BODY>
</HTML>
6. Copie el código anterior con el nombre PagWeb1.html. Se visualizará la siguiente página web una vez cargado el Internet Explorer:
PRACTICA No. 1 – HTML
7. En el ejercicio anterior se puede observar la estructura de una página en HTML. La separación entre párrafos (dejando una línea en blanco) la conseguimos con la etiqueta <P>.
Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en blanco, usamos una etiqueta parecida <BR> (break, o romper).Tampoco tiene etiqueta de cierre.
8. Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella estará preformateado, es decir que aparecerá como si hubiera sido escrito con una maquina de escribir, con una fuente de espaciado fijo (tipo Courier).
9. Con la etiqueta <TT> y </TT> conseguimos también que el texto tenga un tamaño menor y la apariencia de los caracteres de una maquina de escribir (typewriter). A diferencia de la anterior es que no preformatea el texto, sino que únicamente cambia su apariencia.
10. La etiqueta <BLOCkQUOTE> y </BLOCkQUOTE> se utiliza para destacar una cita textual dentro del texto general.
11.
En las formulas matemáticas puede interesar poder escribir índices y subíndices, que se consiguen con las siguientes etiquetas <SUP> </SUP> y <SUB></SUB> respectivamente.
Por ejemplo,
g2se consigue de la siguiente manera:
g<SUP>2</SUP>y
m3se consigue con:
m<SUB>3</SUB>
12. Ahora conozcamos las Listas Ordenadas, para ello digite el siguiente texto HTML en el bloc de notas y guárdelo como PagWeb2:
<HTML>
<HEAD>
<TITLE> Mi Segunda Pagina Web </TITLE> </HEAD>
<BODY>
<H1> <CENTER> Diseño de Paginas en HTML 2</CENTER> </H1>
<HR> <UL>
<LI>Análisis de Sistemas <LI>Diseño de Sistemas <LI>Bases de Datos </UL> </BODY> </HTML>
13. Es decir, toda la lista esta dentro de la etiqueta <UL> y </UL>, y luego cada cosa va precedida de la etiqueta <LI> (list item). El resultado del código anterior es:
14. Se puede anidar una lista dentro de otra, copie el siguiente código y grábelo con el nombre PagWeb3:
<HTML>
<HEAD>
<TITLE> Mi Segunda Pagina Web 3</TITLE> </HEAD>
<BODY>
<H1><CENTER> Diseño de Paginas en HTML 3</CENTER></H1> <HR> <UL> <LI>Sistemas de Información <LI>Análisis de Sistemas <UL> <LI>UML
<LI> Rational Rose </UL> <LI>Diseño de Sistemas <LI>Bases de Datos </UL> </BODY> </HTML>
16. Las Listas Ordenadas (ordered lists) sirven para presentar cosas en un orden determinado. En el resultado aparecerá automáticamente un numero correlativo para cada cosa. Copie el siguiente código y grábelo con el nombre PagWeb4: <HTML>
<HEAD>
<TITLE> Mi Cuarta Pagina Web 4</TITLE> </HEAD>
<BODY>
<H1><CENTER> Diseño de Paginas en HTML 4</CENTER></H1> <HR> <OL> <LI>Sistemas de Información <LI>Análisis de Sistemas <LI>Diseño de Sistemas <LI>Bases de Datos <LI>Tecnologías de la Información </OL> </BODY> </HTML> 17. Se visualizará en pantalla:
18. Al igual que en las Listas Desordenadas, también se pueden anidar las listas ordenadas.
19. El tercer tipo lo forman las Listas de Definición. Como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Toda la lista debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que se han visto, cada renglón de la lista tiene dos partes:
• El nombre de la cosa a definir, que se consigue con la etiqueta <DT> (definition term).
• La definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition).
20. Ahora digite el siguiente código y guárdelo con el nombre de PagWeb5: <HTML>
<HEAD>
<TITLE> Mi Quinta Pagina Web 5</TITLE> </HEAD>
<H1><CENTER> Diseño de Paginas en HTML 5</CENTER></H1> <HR>
<DL>
<DT>Una cosa a definir
<DD>La definición de esta cosa <DT>Como diseñar una Pagina Web <DD>Aprendiendo HTML
</DL> </BODY>
</HTML>
21. El resultado es el siguiente:
22. Para colocar Comentarios No visibles en la pantalla se utilizan lo siguiente: <!-- y -->
23. Para concluir con esta primera práctica de HTML realizaremos el siguiente diseño: (Guárdelo con el nombre PagWeb6)
<HTML>
<HEAD>
<TITLE> Mi Sexta Pagina Web 6</TITLE> </HEAD>
<BODY>
<CENTER><H1>Mis Aficiones</CENTER></H1> </CENTER>
<HR>
Sin un orden particular, mis <B>aficiones</B>son las siguientes: <UL> <LI>El Cine <LI>El Deporte <UL> <LI>Fútbol <LI>Baloncesto </UL> <LI>La Música <LI>La Lectura </UL>
La lectura que más me gusta es <I> (en orden de preferencia): </I> <OL>
<LI>Liderazgo y Calidad de Vida <LI>Novelas
<LI>cuentos de Misterio </OL>
</BODY>
24. Al final el resultado de este código es el siguiente:
25. Realice ahora Ud. la siguiente página y guárdela como Prac1Reto.html.
26. Concluida la práctica avise a su instructor y luego salga del Windows realizando los pasos recomendados. Finalmente apague su equipo (CPU y monitor).
