SENA Regional Caldas

Centro de Comercio y Servicios

GUIA DE TRABAJO # 1
TEMA
ORDEN DE LA GUIA
INSTRUCTOR
GRUPO
FECHA

INTRODUCCION HTML
Gua de Aprendizaje No. 1
Andrs Felipe Palacio Giraldo
P.V.D. UNIVERSITARIO

Febrero 19 de 2016

Estimados Aprendices, a lo largo de este tema vamos a conocer los conceptos bsicos sobre HTML,
y cmo se utiliza para crear pginas web.

Una breve historia del HTML

A finales de la dcada de los 80s, Tim Berners-Lee estuvo trabajando como fsico en CERN (las siglas
inglesas de la Organizacin Europea para la Investigacin Nuclear). Ide un sistema para que los
cientficos pudieran compartir documentos a travs de internet. Antes de su invencin, las
comunicaciones por Internet slo permitan transmitir texto plano, empleando tecnologas como el
email, FTP (File Transfer Protocol), y Usenet- tecnologa en la que se basan los foros de internet. La
invencin del HTML permiti el uso de un modelo de contenido almacenado en un servidor central,
que poda ser mostrado en un terminal local mediante un navegador. Esto simplific el acceso al
contenido y habilit la posibilidad de mostrar contenido "enriquecido" (como un sofisticado texto
formateado y visualizacin de imgenes).

QU ES HTML
El HTML (Hyper Text Markup Language) es el lenguaje
con el que se escriben las pginas web. Es un lenguaje
de hipertexto, es decir, un lenguaje que permite escribir
texto de forma estructurada, y que est compuesto por
etiquetas, que marcan el inicio y el fin de cada elemento
del documento.
Un documento hipertexto no slo se compone de texto,
puede contener imgenes, sonido, vdeos, etc., por lo
que el resultado puede considerarse como un documento
multimedia.
Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los
navegadores (programas que permiten visualizar las pginas web).
Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los
usuarios las pginas web resultantes del cdigo interpretado.
Para ms informacin pueden observar el siguiente vdeo:
https://www.youtube.com/watch?v=4XwbwoCBys4&feature=youtu.be

SENA Regional Caldas

Centro de Comercio y Servicios

VERSIONES DE HTML
En noviembre de 1995 se aprob el estndar HTML 2.0.
para la creacin de pginas web. Se cre con objetivos
divulgativos, orientado a la actividad acadmica, en el que el
contenido de las pginas era ms importante que el diseo.
Pero esta versin del HTML careca de muchas herramientas
que permitieran controlar el diseo de las pginas y aadir
contenido multimedia, por lo que Netscape (cuyos
navegadores eran los ms utilizados por aquellos aos)
comenz a incluir nuevas etiquetas que no existan en el
estndar.
El comit encargado de establecer los estndares dentro de Internet, comenz a trabajar en el borrador
de una nueva versin de HTML, el borrador de HTML 3.0.
Pero este borrador result demasiado extenso, al intentar incluir numerosos nuevos atributos para
etiquetas ya existentes, y la creacin de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado
por el mercado y varias compaas se unieron para formar un nuevo comit encargado de establecer
los estndares del HTML. Este comit pas a llamarse W3C.
En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar inclua las mejoras
proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya haban realizado
extensiones sobre el estndar HTML 2.0.
En diciembre de 1997 se aprob el estndar HTML 4.0, creado para estandarizar los marcos
(frames), las hojas de estilo y los scripts.
En septiembre de 2001 se aprob el estndar HTML 4.01.
HTML5 no es una nueva versin del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya
antigua tecnologa, sino un nuevo concepto para la construccin de sitios web y aplicaciones en una
era que combina dispositivos mviles, computacin en la nube y trabajos en red.
Todo comenz mucho tiempo atrs con una simple versin de HTML propuesta para crear la estructura
bsica de pginas web, organizar su contenido y compartir informacin. El lenguaje y la web misma
nacieron principalmente con la intencin de comunicar informacin por medio de texto.
HTML5 es, de hecho, una mejora de esta combinacin de CSS, javascript, el pegamento que une todo.
HTML5 propone estndares para cada aspecto de la web y tambin un propsito claro para cada una
de las tecnologas involucradas.

SENA Regional Caldas

Centro de Comercio y Servicios

Los navegadores. Compatibilidad

Como hemos dicho, el navegador instalado en el
ordenador del usuario es el que interpreta el cdigo
HTML de la pgina que visita por lo que a veces
puede ocurrir que dos usuarios visualicen la misma
pgina de forma distinta porque tienen instalados
navegadores distintos o incluso versiones distintas
del mismo navegador.
Los navegadores de hoy en da pretenden ser
compatibles con la ltima versin de HTML. Es
necesario realizar extensiones de los navegadores
para que puedan ser compatibles con esta ltima
versin.

ACTIVIDAD 1: Consulta 5 navegadores de internet para Windows y describe sus caractersticas.

Realiza un documento en WordPad.
Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el
mayor nmero posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto
que pretenda la etiqueta no queda reflejado en la pgina.
Para realizar las extensiones de estos navegadores se aaden nuevos atributos a las etiquetas ya
existentes, o se aaden nuevas etiquetas.
Como resultado a estas extensiones, habr pginas cuyo cdigo podr ser interpretado
completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas
del borrador de la ltima versin de HTML, solo podrn ser interpretadas en su totalidad en los
navegadores ms actualizados.
En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina solamente pueda ser
interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo
que nunca sera visualizada en su totalidad por ningn navegador.
Uno de los retos de los diseadores de pginas web es hacer las pginas ms atractivas utilizando
toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades
para que el mayor nmero de internautas vean sus pginas tal como las ha diseado.

SENA Regional Caldas

Centro de Comercio y Servicios

Editores
Un editor es un programa que nos permiten redactar
documentos. Hoy en da existen un gran nmero de
editores que permiten crear pginas web sin la necesidad
de escribir ni una sola lnea de cdigo HTML. Estos
editores disponen de un entorno visual, y generan
automticamente el cdigo de las pginas. Al poder ver
en todo momento cmo quedar la pgina en el
navegador, se facilita la creacin de las pginas, y el uso
de mens permite ganar rapidez.
Estos editores visuales pueden generar en ocasiones
cdigo basura, es decir, cdigo que no sirve para nada,
en otras ocasiones puede ser ms efectivo corregir
directamente el cdigo por lo que resulta necesario saber
HTML para poder depurar el cdigo de nuestra pginas.

ACTIVIDAD 2: Consulta 5 editores de pginas web para Windows y describe sus caractersticas.
Agrgalo a tu documento en WordPad.

ACTIVIDAD 3: Consulta 5 pginas web para disear pginas web online y describe sus
caractersticas. Agrgalo a tu documento en WordPad.

Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar
nosotros mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn
editor visual posteriormente, y depurar el cdigo cuando fuera necesario.
Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta
WordPad o el Bloc de notas que proporciona Windows.
A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras pginas, ya que se
trata de un editor de textos muy sencillo de manejar, que nos permitir crear pginas a travs del
cdigo HTML.
El editor de textos que utilizaremos durante todo el curso es el Bloc de Notas, observemos con atencin
el siguiente documento donde se explica el manejo bsico:
Arrancar y cerrar el bloc de notas
TIP: Compaginar dos sesiones, en el siguiente documento se ensea a trabajar con dos ventanas de
Windows al mismo tiempo en la pantalla de su computador:
Compaginar dos sesiones

SENA Regional Caldas

Centro de Comercio y Servicios

ETIQUETAS
Las etiquetas o marcas delimitan cada uno de los
elementos que componen un documento HTML.
Existen dos tipos de etiquetas, la de comienzo de
elemento y la de fin o cierre de elemento.
La etiqueta de comienzo est delimitada por los
caracteres < y >. Est compuesta por el
identificador o nombre de la etiqueta, y puede
contener una serie de atributos opcionales que
permiten aadir ciertas propiedades. Su sintaxis es:
<identificador atributo1 atributo2 ...>
Los atributos de la etiqueta de comienzo siguen una
sintaxis predefinida y pueden tomar cualquier valor
propio del usuario, o valores HTML predefinidos.
La etiqueta de final est delimitada por los caracteres
</ y >. Est compuesta por el identificador o nombre
de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador>
Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su
correspondiente etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de
cierre. Tambin es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de
comienzo y de cierre.
A continuacin tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la
etiqueta <p..>.:
<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans
Serif">Bienvenidos al curso de Fundamentos de HTML</font></p>

Este cdigo dara como resultado el siguiente texto:

Bienvenidos al curso de Fundamentos de HTML
Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos
empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> Por lo que
antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta etiqueta <font..>.
Para que te vayas haciendo una idea de cmo crear una pgina html a travs del Bloc de notas, vamos
a crear una pgina web sencilla, con una lnea de texto.

Mi primera pgina
Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al men Inicio,
Programas, Accesorios, opcin Bloc de notas.

SENA Regional Caldas

Centro de Comercio y Servicios

Seguidamente introduce, en el documento en blanco, el texto siguiente:

<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body bgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
</body>
</html>

ACTIVIDAD 4: Guarda el documento con la extensin html, con el nombre miprimpag.html y al final
de la gua anexa este archivo al email. Puedes guardarlo a travs del men Archivo, opcin Guardar.

Pulsando dos veces sobre el icono del archivo miprimpag.html, ste debera abrirse automticamente
en el navegador predeterminado que tengas instalado en tu ordenador.
El navegador deber mostrar una pgina como la siguiente:

Como puedes ver, la pgina resultante es una pgina que solamente tiene una lnea de texto.
Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA PAGINA.
Este ttulo ha sido establecido por la lnea <title>MI PRIMERA PAGINA</title>.

SENA Regional Caldas

Centro de Comercio y Servicios
El color de fondo de la pgina ha sido establecido por la lnea <body bgcolor="#FFCC99">.
El texto Hola, estoy haciendo pruebas. se ha insertado a travs de lnea <font color="#CC3300"
size="5">Hola, estoy haciendo pruebas.</font>.

ACTIVIDAD 5: Resuelve el siguiente cuestionario (agrgalo a tu documento de WordPad con la

pregunta y respuesta respectiva) y sustente su respuesta:
1. Un documento de hipertexto solo se compone de texto.
a) Verdadero
b) Falso
2. Los navegadores se encargan de interpretar el cdigo HTML de los documentos.
a) Verdadero
b) Falso
3. El nuevo comit encargado de establecer los estndares del HTML es el W3C.
a) Verdadero
b) Falso
4. Los navegadores tienen que ser compatibles con la ltima versin HTML para poder insertar
imgenes.
a) Verdadero
b) Falso
5. Siempre que escribimos una etiqueta debemos escribir su correspondiente etiqueta de cierre.
a) Verdadero
b) Falso
6. Si un navegador no reconoce una etiqueta...
a) la cambia por otra
b) la ignora
c) muestra una imagen en su lugar
7. Para realizar las extensiones de los navegadores ...
a) se aaden nuevos atributos y etiquetas
b) se crean nuevos editores visuales
c) se utilizan editores de texto
8. Existen dos tipos de etiquetas:
a) La de comienzo de elemento y la de fin de pgina
b) La de comienzo de elemento y la de atributo
c) La de comienzo de elemento y la de fin o cierre de elemento
9. El cdigo de todas las pginas:
a) Puede ser interpretado completamente por todos los navegadores.
b) No puede ser interpretado completamente por todos los navegadores.
c) Cualquiera de las dos primeras opciones.
d) Ninguna de las opciones anteriores.

SENA Regional Caldas

Centro de Comercio y Servicios
10. Los editores visuales
a) Pueden generar cdigo basura.
b) Permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML.
c) Cualquiera de las dos primeras opciones.
d) Ninguna de las opciones anteriores.

AL FINAL ENVIAR EL DOCUMENTO DE WORDPAD QUE REALIZO AL CORREO DEL

INSTRUCTOR: [email protected] con ASUNTO: GUIA1-GRUPO01-HTML