Este documento presenta una propuesta para crear una página web para la Escuela Normal Superior de Villavicencio. Explica los conceptos básicos de HTML y diseño web, incluyendo la estructura de documentos HTML, elementos como texto, hipervínculos, imágenes y sonido, y formatos de archivos comúnmente usados como JPG, PNG, PDF y MP3. También propone una serie de ejercicios prácticos para desarrollar habilidades básicas de diseño web usando HTML.

1. Escuela Normal Superior de Villavicencio
PLANTEL OFICIAL APROBADO SEGÚN RESOLUCIÓN Nº 0600 DE AGOSTO 27 DE 1999
NIT: 892.099.128-6 REGISTRO EDUCATIVO FOE 0502 CÓDIGO ICFES 010934 CÓDIGO DANE 150001000936
Elaborado por: Ing. HAIMER GUTIERREZ M. JULIO DE 2015
PROPUESTA PARA LA PAGINA WEB
Competencia: Analizo y valoro críticamente los componentes y evolución de los
sistemas tecnológicos y las estrategias para su desarrollo.
CREANDO UNA PAGINA WEB
SOPORTE TEORICO
El desarrollo web es un proceso creativo y personal en el que cada uno decide cómo hacer las
cosas, los primeros tres puntos principales que tenemos que definir desde cero son:
 Definir el tema de nuestro sitio.
 Qué ofreceremos.
 A quién irá dirigida nuestra página.
Las páginas web son documentos escritos en un lenguaje de programación muy sencillo: el
HTML, siglas inglesas de "Hiper Text Markup Language", literalmente Lenguaje de Marcas de
Hipertexto. Los documentos creados con este lenguaje pueden contener texto, imágenes,
animaciones, sonido, vídeo, y a través de ellas es posible acceder a otros documentos. Veamos
ahora algunos de los elementos más frecuentes en las páginas web.
Texto
Es uno de los soportes más simples de información. En las páginas web podemos darle
diferentes estilos y colores y teóricamente podemos usar múltiples tipos de letra. Existen estilos
predefinidos como el azul y subrayado para indicar que un cierto texto es un hipertexto y al
hacer clic sobre él nos llevará a otra sección del documento, o a otro documento exterior (que
puede ser una imagen o un video o un sonido).
Hipertexto (enlaces)
Se encuentran entre los elementos más versátiles de las páginas web. Se presentan en
forma de texto o imagen, pueden llevar a otras zonas de la misma página (enlace interno,
anchor o anclas) o a otras páginas (enlace local) incluso de servidores distintos (enlaces
externos). También pueden servir para iniciar la descarga de un archivo (enlaces con
archivos) o la reproducción de efectos de sonido o vídeo. Muchas páginas web agrupan los
enlaces en listados que constituyen las llamadas barras de navegación, cuya función es
permitir que el internauta recorra con facilidad todas las páginas de un documento.
Imágenes
Uno de los factores que facilitan el uso de Internet es la posibilidad de crear páginas con
diseños atractivos y fáciles de leer. El desarrollo de las técnicas de compresión y el aumento
de la velocidad en la red, facilitan el uso de un número cada vez mayor de imágenes, no
sólo estáticas sino también con efectos de animación, para las imágenes estáticas se usan
los formatos JPG, PNG y GIF, mientras que para las imágenes animadas se usa el formato
GIF. Asimismo la tecnología flash permite crear animaciones complejas en archivos que
ocupan muy poco espacio. Las imágenes también pueden servir de enlaces con otras
páginas.
Sonidos
La información de un documento de hipertexto no solo es texto o imagen, también es
sonido, no solo como elemento accesorio sino también como camino único para personas
con discapacidades.

2. Escuela Normal Superior de Villavicencio
PLANTEL OFICIAL APROBADO SEGÚN RESOLUCIÓN Nº 0600 DE AGOSTO 27 DE 1999
NIT: 892.099.128-6 REGISTRO EDUCATIVO FOE 0502 CÓDIGO ICFES 010934 CÓDIGO DANE 150001000936
Elaborado por: Ing. HAIMER GUTIERREZ M. JULIO DE 2015
ARCHIVOS USADOS EN EL DISEÑO DE PÁGINA WEB
Formatos de Imágenes
Son archivos gráficos que pueden ser leídos directamente por el navegador e insertados en
páginas web html, sin necesidad de instalar plug-ins:
.GIF dibujos con pocos colores (256 máx); admite animaciones y transparencias
(Graphic Interchange Format, Formato de intercambio gráfico)
.JPG fotos 24 bit (16 millones de colores), compresión variable con pérdida (Joint Picture
Expert Group, grupo conjunto de expertos en imagen)
.PNG Admite transparencias y capas, compresión variable con pérdida (Portable Network
Graphic, gráfico estándar para uso en redes)
.BMP Formato de Microsoft Paint, no comprimidas: uso desaconsejado. (Bitmap, mapa de
biis)
Formatos de Sonido y Video requiere instalar plug-in en el navegador
MIDI, .MID Música multi-instrumental de tipo “partitura”, no almacena sonido real (por
ejemplo, no hay voces)
.WAV .AU,
.AIFF…
Sonido digitalizado. Se pueden reproducir sin plug-ins en ordenadores
Windows y/o Mac
.MP3 * Sonido digitalizado comprimido
Real Media * Plug-in para sonido y vídeo en tiempo real (streaming)
QTVR * Imágenes 360º, realidad virtual (Quick Time Virtual Reality)
Otros archivos que podemos usar en páginas web:
Al pulsar en un enlace a uno de estos archivos, si están instalados los programas adecuados,
el ordenador los abrirá en el mismo navegador; en caso contrario, aparecerá el cuadro de
“Guardar Archivo” y podremos descargarlos.
.PDF Documentos Acrobat, Contienen textos e imágenes formateados para
imprimir. Requieren el programa Adobe Acrobat (Reader)
.DOC Textos de Word, requieren la versión correspondiente de Word
.XLS Hojas de Cálculo Excel, requieren la versión adecuada de Excel
.MDB Base de datos de Access, requieren el Access adecuado
.PPT Presentación de PowerPoint: requiere el programa o el visor
.ZIP, .RAR Archivos comprimidos, requieren WinZip, WinRar o compatible
.AVI Vídeo en formato AVI (Audio Video Interlaced, audio y video entrelazados),
comprimido o no en divX o diferentes codecs
Es muy importante tener en cuanta todos los conceptos anteriores claros en el diseño de
página Web, es conveniente que dibujes un organigrama con todas las partes del sitio Web
distribuyendo el texto, los gráficos, los vínculos, los documentos y otros objetos multimedia que
se consideres pertinentes.
¿Qué es HTML?
HTML, HyperText Markup Language, es un lenguaje simple utilizado para crear documentos de
hipertexto para WWW. No es un lenguaje de descripción de página como Postcript; HTML no
permite definir de forma estricta la apariencia de una página, aunque una utilización algo
desviada hace que se utilice en ocaciones como un lenguaje de presentación. Además, la
presentación de la página es muy dependiente del browser (o programa navegador) utilizado:
el mismo documento no produce el mismo resultado en la pantalla si se visualiza con un
browser en modo línea, Mosaic o Netscape, o sea, HTML se limita a describir la estructura y el
contenido de un documento, y no el formato de la página y su apariencia.

3. Escuela Normal Superior de Villavicencio
PLANTEL OFICIAL APROBADO SEGÚN RESOLUCIÓN Nº 0600 DE AGOSTO 27 DE 1999
NIT: 892.099.128-6 REGISTRO EDUCATIVO FOE 0502 CÓDIGO ICFES 010934 CÓDIGO DANE 150001000936
Elaborado por: Ing. HAIMER GUTIERREZ M. JULIO DE 2015
Una de las claves del éxito de WWW, aparte de lo atractivo de su presentación es sin duda, su
organización y coherencia. Todos los documentos WWW comparten un mismo aspecto y una
única interfaz, lo que facilita enormemente su manejo por parte de cualquier persona. Esto es
posible porque el lenguaje HTML, en que están escritos los documentos, no solo permite
establecer hiperenlaces entre diferentes documentos, sino que es un "lenguaje de descripción
de página" independiente de la plataforma en que se utilice. Es decir un documento HTML
contiene toda la información necesaria sobre su aspecto y su interacción con el usuario, y es
luego el browser que utilicemos el responsable de asegurar que el documento tenga un
aspecto coherente, independientemente del tipo de estación de trabajo desde donde estemos
efectuando la consulta.
Su simplicidad es tal que no es necesario utilizar un editor particular. Su gran permisividad
exige rigor y atención en la estructura de documentos con el fin de que éstos se visualicen
correctamente al margen del contexto y el browser utilizado.
Por tanto, como hemos visto, HTML es un lenguaje muy sencillo que nos permite preparar
documentos Web insertando en el texto de los mismos una serie de marcas (tags) que
controlan los diferentes aspectos de la presentación y comportamiento de sus elementos.
ESTRUCTURA DE LOS DOCUMENTOS
La cabecera se emplea para facilitar información acerca del documento y está delimitada
por <HEAD> prólogo </HEAD>.
Dentro de la cabecera podemos destacar el título que indica el nombre del documento <TITLE>
</TITLE>.
EJEMPLO:
<HTML>
<HEAD>
<TITLE> Bienvenido a nuestra guia rápida </TITLE>
</HEAD>
<BODY> CUERPO DE LA PAGINA WEB
</BODY></HTLM>
</HTML>

4. Escuela Normal Superior de Villavicencio
PLANTEL OFICIAL APROBADO SEGÚN RESOLUCIÓN Nº 0600 DE AGOSTO 27 DE 1999
NIT: 892.099.128-6 REGISTRO EDUCATIVO FOE 0502 CÓDIGO ICFES 010934 CÓDIGO DANE 150001000936
Elaborado por: Ing. HAIMER GUTIERREZ M. JULIO DE 2015
EJERCICIOS A DESARROLLAR
EJERCICIO 1. BODYBGCOLOR
El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es:
<BODY BGCOLOR="red">
Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo
(red) se sustituye de esta manera:
<BODY BGCOLOR="#ff0000">
<HTML>
<HEAD>
<TITLE>Ejemplo página color rojo</TITLE>
<BODY BGCOLOR="red">
PAGINA FONDO COLOR ROJO
</BODY>
</HEAD>
</HTML>
EJERCICIO 2. BODYBACKGROUND
BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo muestra un
tono único del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg.
La imagen se llama sfondo.gif y se encuentra depositada en el mismo directorio que el
documento. La sintaxis correcta para impostar la imagen como fondo es:
<HTML>
<HEAD>
<TITLE>Pagina Con Backgropund</TITLE></HEAD>
<BODY BACKGROUND="sfondo.gif">
EJEMPLO DE USO UN FONDO.
</BODY>
</HTML>
EJERCICIO 3. MANEJO DE FUENTES
<HTML>
<HEAD>
<TITLE>Manejo de fuentes.</TITLE></HEAD>
<BODY>
<H1> Texto de prueba (H1)</H1>.
<H2> Texto de prueba (H2)</H2>
<H3> Texto de prueba (H3)</H3>
<H4> Texto de prueba (H4)</H4>
<H5> Texto de prueba (H5)</H5>
<H6> Texto de prueba (H6)</H6>
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW
ROMAN</FONT>
<FONT FACE="impact" SIZE=6 COLOR="red">
Texto de prueba 12345 con tipo IMPACT</FONT>
<FONT FACE="raro, courier" SIZE=4 COLOR="red">

5. Escuela Normal Superior de Villavicencio
PLANTEL OFICIAL APROBADO SEGÚN RESOLUCIÓN Nº 0600 DE AGOSTO 27 DE 1999
NIT: 892.099.128-6 REGISTRO EDUCATIVO FOE 0502 CÓDIGO ICFES 010934 CÓDIGO DANE 150001000936
Elaborado por: Ing. HAIMER GUTIERREZ M. JULIO DE 2015
Texto de prueba 12345 con tipos alternativos</FONT>
<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT>
<FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>
<P ALIGN=LEFT>
El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la
pantalla. </P>
<P ALIGN=RIGHT>
El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la
pantalla.</P>
<P ALIGN=CENTER>
El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la
pantalla. </P>
<P ALIGN=JUSTIFY>
El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la
pantalla.</P>
</BODY>
</HTML>
EJERCICIO 4. EFECTOS EN LA FUENTE
<HTML>
<HEAD>
<TITLE>Efecto de fuentes.</TITLE>
</HEAD>
<BODY>
<b>Texto en Negrita</b><br>
<I>Itálica</i><br>
<b><i>Negrita e Itálica</i></b><br>
<U>Subrayado</u><br>
<STRIKE>Texto tachado</STRIKE><br>
<HR WIDTH=80% SIZE=5><br>
<br>
<FIELDSET>
<LEGEND>Esto es una etiqueta</LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>
</BODY>
</HTML>
EJERCICIO 5. MANEJO DE LISTAS
<HTML>
<HEAD>
<TITLE>Ejemplo de Listas</TITLE>
</HEAD>
<BODY>
Desordenada simple con marcas<br>
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>

6. Escuela Normal Superior de Villavicencio
PLANTEL OFICIAL APROBADO SEGÚN RESOLUCIÓN Nº 0600 DE AGOSTO 27 DE 1999
NIT: 892.099.128-6 REGISTRO EDUCATIVO FOE 0502 CÓDIGO ICFES 010934 CÓDIGO DANE 150001000936
Elaborado por: Ing. HAIMER GUTIERREZ M. JULIO DE 2015
<br>
Desordenada simple sin marcas. <br>
<DL>
<DT>Linea de texto 1
<DT>Linea de texto 2
<DT>Linea de texto 3
</DL>
<br>
Desordenada simple con marcas.
<br>
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
<br>Desordenada simple con marcas
<UL TYPE=DISC>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
<br> Ordenada simple
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</OL>
</BODY>
</HTML>
EJERCICIO 6. MARQUESINA
<HTML>
<HEAD>
<TITLE>Ejemplo de Listas</TITLE>
</HEAD>
<BODY>
<MARQUEE DIRECTION=RIGHT BEHAVIOR=ALTERNATE><font color=red><h1> Materia
Laboratorio 1</h1></font></MARQUEE>
</BODY>
</HTML>

7. Escuela Normal Superior de Villavicencio
PLANTEL OFICIAL APROBADO SEGÚN RESOLUCIÓN Nº 0600 DE AGOSTO 27 DE 1999
NIT: 892.099.128-6 REGISTRO EDUCATIVO FOE 0502 CÓDIGO ICFES 010934 CÓDIGO DANE 150001000936
Elaborado por: Ing. HAIMER GUTIERREZ M. JULIO DE 2015
EJERCICIO 7. DESARROLLE UNA PAGINA WEB COMO SE MUESTRA EN LA IMAGEN:
EJERCICIO 8. DESARROLLE UNA PAGINA WEB COMO SE MUESTRA EN LA IMAGEN:
EJERCICIO 9
Construir una página que tenga, por este orden:
2 Párrafos centrados
3 Párrafos alineados a la derecha
Un salto de línea triple
1 párrafo alineado a la izquierda

8. Escuela Normal Superior de Villavicencio
PLANTEL OFICIAL APROBADO SEGÚN RESOLUCIÓN Nº 0600 DE AGOSTO 27 DE 1999
NIT: 892.099.128-6 REGISTRO EDUCATIVO FOE 0502 CÓDIGO ICFES 010934 CÓDIGO DANE 150001000936
Elaborado por: Ing. HAIMER GUTIERREZ M. JULIO DE 2015
EJERCICIO 10. RESPONDA EN SU CUADERNO LA FUNCION DE CADA DE LAS
SIGUIENTES ETIQUETAS:
a. <html></html>
b. <head></head>
c. <body></body>
d. <H1> </H1>.
e. <H2> </H2>
f. <H3> </H3>
g. <H4> </H4>
h. <H5> </H5>
i. <H6> </H6>
j. <FONT></FONT>
k. <P></P>
l. <b></b>
m. <br>
n. <i></i>
o. <u>Subrayado</u><br>
p. <STRIKE> </STRIKE>
q. <HR>
r. <UL></UL>
s. <DL> </DL>
t. <OL> </OL>