Guion Aprendizaje HTML 1

SERVICIO NACIONAL DE APRENDIZAJE
REGIONAL TOLIMA
Centro de Industria y de la Construccin
Desarrollo de Sitios Web con HTML
Guin de Aprendizaje
Fecha de Inicio.
Fecha de Entrega:
Competencias a Desarrollar:
Resultados de Aprendizaje:
05 de septiembre de 2011
16 de septiembre de 2011
Desarrollar el Sistema que cumpla con los requerimientos de la
solucin informtica
Construir la interfaz de usuario, apoyado en el diseo dado,
determinando las entradas y salidas, navegacin en el aplicativo
de acuerdo a los estndares establecidos.
Realizar la codificacin utilizando el lenguaje HTML de acuerdo

con las especificaciones del sistema
ESTRATEGIA METODOLOGICA
APRENDIZ
A travs de este guin de aprendizaje usted podr adquirir los conceptos bsicos para aprender a
trabajar con HTML, un poco de historia, su importancia dentro de una aplicacin Web, y la forma
correcta de escribirlo.
1. Basndose en el material de apoyo entregado, realice un mapa conceptual, un cuadro
sinptico, a travs del cual se defina:
El concepto de HTML
Los estndares del lenguaje HTML (Versiones)
Historia del Lenguaje HTML
HTML, XML XHTML
2. Elabore un cuadro comparativo de los diferentes editores que se pueden utilizar para
trabajar el lenguaje HTML
3. Elabore un glosario de las diferentes etiquetas que se utilizan en HTML, indicando la

funcin de cada una

REGIONAL TOLIMA
Ejercicios Prcticos
NOTA: Antes de llevar a cabo la realizacin de estos ejercicios, se recomienda, haber ledo y
consultado todo lo relacionado con el lenguaje HTML, apropiar muy bien los conceptos de las
diferentes etiquetas y la forma de utilizarlas.
Para la realizacin de los diferentes ejercicios se utilizar el editor NOTEPAD++
Este editor lo puede descargar del siguiente enlace:
http://notepad-plus.sourceforge.net/es/site.htm
Se recomienda leer la documentacin y la forma de configurarlo correctamente para tener el
mximo de rendimiento en la escritura de cdigo.
Recomendaciones para la creacin de los documentos HTML y la forma correcta de archivarlos y
nombrarlos
Utilice siempre una carpeta especfica en la cual se van a guardar todos los documentos
Para los nombres de archivos (documentos HTML), utilice nombres cortos, y en
minsculas, sin espacios, sin tildes, y sin s ejemplo: ejercicio1.html y NO ejercicio 1.
html
Las etiquetas deben escribirse en minscula ejemplo <body>. </body> y NO <BODY>
</BODY>
Ejercicio No. 1
Elabore una pgina, que contenga la estructura bsica de un documento HTML. En el
cuerpo de la misma debe aparecer su nombre y apellido. En la barra de ttulo, debe
aparecer la frase Aprendiendo HTML
Ejercicio No. 2
En la misma pgina del ejercicio anterior, cree dentro del cuerpo (Etiqueta <body>)
un prrafo que tenga su nombre y apellido. En otra Lnea deben aparecer la ciudad
de nacimiento y en otra lnea la fecha de nacimiento

REGIONAL TOLIMA
Ejercicio No. 3
En una nueva pgina HTML, elabore un documento que contenga 4 prrafos mnimo
de 5 lneas cada uno. Cada uno de los prrafos debe ir alineado de la siguiente
manera:
El primer prrafo debe ir centrado

El segundo debe ir Alineado a la derecha
El tercero debe ir justificado
Y el cuarto prrafo debe ir alineado a la izquierda
Ejercicio No. 4
Crear un documento HTML que contenga el titular de un peridico con un ttulo de
nivel 1. Luego definir dos ttulos de segundo nivel con los textos (Noticias polticas y
Noticias deportivas), en cada una de estas secciones definir dos titulares de tercer nivel con un
prrafo cada una. Al final de la pgina mostrar un ttulo de cuarto nivel con el nombre de la
empresa propietaria del peridico
Crear un documento HTML que tenga la definicin de 10 palabras (Como especie de un glosario
de trminos). Aplicar el elemento strong a cada palabra previo a su definicin. Luego agregar el
elemento en a una o a un conjunto de palabras dentro de la definicin.
Ejercicio No. 5
Crear un documento HTML que tenga hipervnculos a cada uno de los ejercicios
anteriores. En esa misma pgina realizar hipervnculos a las siguientes pginas:
Sitio Web de Google

Sitio Web de Microsoft
Sitio Web de la presidencia de la repblica
Sitio Web del SENA
Sito Web del Peridico el Tiempo
NOTA: Cada uno de estos enlaces deben abrir en ventanas diferentes

REGIONAL TOLIMA
Ejercicio No. 6
Crear una pgina que muestre dos imgenes llamadas foto1.jpg y foto2.jpg, estas
imgenes deben ser guardadas previamente dentro de otra carpeta llamada
images. Cada imagen debe llevar un ttulo.
Ejercicio No. 7
Crear tres pginas con una foto cada una (foto1.jpg, foto2.jpg y foto3.jpg) luego al
hacer clic en la imagen esta debe permitir avanzar a la siguiente pgina, es decir de la
pagina1.html llamar a la pagina2.html, de la pagina2.html pasar a la pagina3.html y de sta a la
pagina1.html. Recuerde que Las imgenes se deben guardar en la carpeta llamada images que
depende de la carpeta principal.
Ejercicio No.8
Una empresa vende computadores y tiene 3 ofertas. Realizar un listado de cada una
de las ofertas con las caractersticas de cada computador. (Cada caracterstica debe ir
en una lnea aparte). Al final de cada oferta debe ir la palabra Solicitar y esta debe ser un enlace
para enviar un correo electrnico.
Ejercicio No.9
Elaborar un documento HTML que tenga especie de un men. Ejemplo:
Titular
Economa
Deportes
Internacional
Sociales
Cada uno de esos mens debe enlazar a una noticia que est en el mismo documento. Es decir
Cada Noticia esta creada en el mismo documento y debe ser un prrafo que contiene el texto
correspondiente al enlace.

REGIONAL TOLIMA
Ejercicio No.10
Elabore un documento HTML que contenga una lista ordenada con un listado de los
compaeros de grupo Disponer un ttulo de segundo nivel y debajo de la lista el
cdigo del grupo con texto en negrilla
Ejercicio No.11
Elabore un documento HTML que contenga una lista no ordenada con un listado de
10 universidades
Ejercicio No.12
Elaborar una lista ordenada de lenguajes de los de 10 departamentos de Colombia.
Dentro de cada lista de cada departamento elaborar una lista no ordenada de por lo
menos 3 municipios que pertenezcan a dicho departamento
Ejercicio No.13
Elaborar un documento en HTML que contenga una tabla que muestre en la primer
columna los nombre de varios empleados de una compaa y en la segunda el sueldo
que devenga cada uno. (la compaa tiene 10 empleados)
Ejercicio No.14
Disear una tabla con informacin de vehculos que contenga como encabezados
(etiqueta <th>) los siguientes datos: Placa, Marca, modelo, clase, color y precio. La
tabla debe contener la informacin de 10 vehculos diferentes. Antes de la tabla debe ir un ttulo
(Etiqueta <caption>). Ejemplo: Relacin de Vehculos

REGIONAL TOLIMA
Disear una tabla que tenga celdas combinadas con el fin de poder mostrar
agrupada. El aspecto de la tabla, debe ser similar como el siguiente ejemplo:
DIAS
LUNES
MARTES
MIERCOLES
JUEVES
VIERNES
MENU
PRECIO
Opcin 1
$ 25.000
Opcin 2
$ 20.000
Opcin 3
$ 18.000
Opcin 4
$ 15.000
Opcin 1
$ 25.000
Opcin 2
$ 20.000
Opcin 3
$ 18.000
Opcin 4
$ 15.000
Opcin 1
$ 25.000
Opcin 2
$ 20.000
Opcin 3
$ 18.000
Opcin 4
$ 15.000
Opcin 1
$ 25.000
Opcin 2
$ 20.000
Opcin 3
$ 18.000
Opcin 4
$ 15.000
Opcin 1
$ 25.000
Opcin 2
$ 20.000
Opcin 3
$ 18.000
Opcin 4
$ 15.000
Importante Tener en cuenta:
informacin
Utilizar Etiquetas apropiadas para tablas.
Encabezados de columnas
Alineacin
Combinacin de celdas
Aplicar bordes y colores para celdas

REGIONAL TOLIMA
Otro ejemplo:
Climas de Amrica del Sur
Parte Norte de Amrica
del Sur. Pases como:
Venezuela
Colombia
Parte Sur de
Amrica del Sur.
Pases como:
Argentina
Chile
Ecuador
Uruguay
Per
Paraguay
Bosque tropical, clima de sabana,

clima martimo con inviernos secos.
Climas martimos con veranos

secos, con inviernos secos,
climas fros, clima de estepa,
clima desrtico.
Ejercicio No.15
Definir en un documento HTML el elemento title y los metadatos para indicar autor,
palabras claves para buscadores, descripcin de la pgina y copyright.
Ejercicio No.16
Elaborar una pgina en HTML que muestre dos tablas, dos prrafos y dos listas
ordenadas. Luego comentar la segunda tabla, y el segundo prrafo (Consultar, como
se comentan lneas de cdigo en HTML). Observar los resultados.

REGIONAL TOLIMA
SOPORTES BIBLIOGRAFICOS
LECTURAS
Introduccin al HTML
http://www.librosweb.es/xhtml/
Introduccin al HTML
http://www.desarrolloweb.com/articulos/534.php
Como organizar un sitio Web
http://www.htmlquick.com/es/tutorials/organizing-website.html
Curso de HTML
http://www.aulaclic.es/html/index.htm
HTML Con clase
http://html.conclase.net/tutorial/html/
Creando Tablas con HTML
http://www.htmlquick.com/es/tutorials/tables.html
Gua de Referencia de XHTML
http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/
El HTML, una idea en

evolucin
Como hacer buenas pginas
Web
Versiones de HTML
http://www.maestrosdelweb.com/editorial/htmlhis/
Videotutoriales
http://www.youtube.com/watch?v=en0EfNXmL6M&feature=PlayList&p=77070890000E6
06B&playnext_from=PL&index=0&playnext=1
http://www.danielclemente.com/html/index.html
http://techtastico.com/post/%C2%BFcuales-son-las-versiones-del-html/
GLOSARIO
Terminologa que la Comunidad SENA debe Apropiar:

HTML
JavasCript
XHTML
CSS
Etiqueta
PHP
WWW
Sitio Web

Guion Aprendizaje HTML 1

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guion Aprendizaje HTML 1

Cargado por

Copyright:

Formatos disponibles

SERVICIO NACIONAL DE APRENDIZAJE

Realizar la codificacin utilizando el lenguaje HTML de acuerdo

3. Elabore un glosario de las diferentes etiquetas que se utilizan en HTML, indicando la

SERVICIO NACIONAL DE APRENDIZAJE

SERVICIO NACIONAL DE APRENDIZAJE

El primer prrafo debe ir centrado

Sitio Web de Google

NOTA: Cada uno de estos enlaces deben abrir en ventanas diferentes

SERVICIO NACIONAL DE APRENDIZAJE

SERVICIO NACIONAL DE APRENDIZAJE

SERVICIO NACIONAL DE APRENDIZAJE

Importante Tener en cuenta:

Utilizar Etiquetas apropiadas para tablas.

SERVICIO NACIONAL DE APRENDIZAJE

Bosque tropical, clima de sabana,

Climas martimos con veranos

SERVICIO NACIONAL DE APRENDIZAJE

Como organizar un sitio Web

HTML Con clase

Creando Tablas con HTML

Gua de Referencia de XHTML

El HTML, una idea en

Terminologa que la Comunidad SENA debe Apropiar:

También podría gustarte