HTML Lenguaje

LENGUAJE HTML

GALINDO LOPEZ MARIA FERNANDA

COLEGIO NACIONALIZADO FEMENINO DE VILLAVICENCIO
MODALIDAD DISEÑO DE INTEGRACION MULTIMEDIA
DÉCIMO GRADO
VILLAVICENCIO
2012

LENGUAJE HTML

GALINDO LOPEZ MARIA FERNANDA
Asignatura

Profesora
Myriam Elina Ramos Gama
Docente Académico

COLEGIO NACIONALIZADO FEMENINO DE VILLAVICENCIO
MODALIDAD DISEÑO DE INTEGRACION MULTIMEDIA
DÉCIMO GRADO
VILLAVICENCIO
2012

TABLA DE CONTENIDO

PÁG

LISTA DE TABLAS……………………………………………………………………..04
LISTA DE ILUSTRACIONES…………………………………………………………..05
LISTA DE ANEXOS……………………………………………………………………..06
GLOSARIO……………………………………………………………………………….07
INTRODUCCIÓN………………………………………………………………………...12
JUSTIFICACIÓN…………………………………………………………………………13
OBJETIVOS……………………………………………………………………………...14
General…………………………………………………………………………………...14
Específicos………………………………………………………………………………14
Guía 1 Taller Lenguaje HTML………………………………………………………...15
Guia 2 Taller de HTML…………………………………………………………………27
Desarrollo de Tareas…………………………………………………..………………30
Etiquetas………………………………………………………………...……………….48
Tecnologia e Informatica……………………………………………...………………51
Crear Fondos Paginas Web…………………………………………………………..51
CONCLUSIONES …………………………………………………………….…………61
BIBLIOGRAFÍA……………………………………………………………….…………62
CIBERGRAFÍA………………………………………………………………….……….63

LISTA DE TABLAS

PÁG

Tabla 1. ¿Qué es HTML?.......................................................................................14
Tabla 2. Colores con sus valores hexadecimales ………………………………….24
Tabla 3. Ejemplos Etiqueta de Color…………………………………………..………46
Tabla 4. Código/Función Fondos…………………………………………………….52

LISTA DE ILUSTRACIONES

PÁG

Ilustración 1. ¿Qué es HTML?..............................................................................30
Ilustración 2. Color del texto Etiqueta Font…………………………………………..39
Ilustración 3. Primer ejemplo de Etiqueta Font y atributo Size…………………….40
Ilustración 4. Segundo ejemplo de Etiqueta Font y atributo Size…………………42
Ilustración 5. Tamaño de texto Etiqueta Font……………………………………….45

LISTA DE ANEXOS

PÁG

Anexo 1. Versión Estándar HTML 2.0……………………………………………...…56
Anexo 2. Versión Estándar HTML 3.0……………………………………………..….56
Anexo 3. Versión Estándar HTML 3.2…………………………………………..…….57
Anexo 4. Versión Estándar HTML 4.0………………………………………………...57
Anexo 5. Versión Estándar HTML 4.01………………………………………….……58
Anexo 6. Logo Navegador Internet Explorer………………………………….……...58
Anexo 7. Logo Navegador Netscape Navigator …………………………….………59
Anexo 8.Editor Macromedia Dreamweaver…………………………………………..59
Anexo 9.Editor Microsoft Frontpage……………………………………………..……60

GLOSARIO

ADOBE PAGEMILL: es uno de los editores más potentes y sencillos de
utilizar. Pagemill incorpora un conjunto de herramientas para la gestión de las
páginas que componen el sitio Web y trabajar con todos ellos de forma global
pudiendo visualizar gráficamente los hipervínculos, actualizarlos
automáticamente, buscar y reemplazar texto, imágenes y vínculos así como
usar el corrector ortográfico para todo el web.

BLOC DE NOTAS: (en inglés llamado Notepad) es un editor de texto simple
incluido en los sistemas operativos de Microsoft desde 1985.

CABECERA DE LA PÁGINA: (header en inglés) se refiere a la información
suplementaria situada al principio de un bloque de información que va a ser
almacenada o transmitida y que contiene información necesaria para el
correcto tratamiento del bloque de información.

CARACTERES: es una unidad de información que corresponde
aproximadamente con un grafema o con una unidad o símbolo parecido, como
los de un alfabeto o silabario de la forma escrita de un lenguaje natural.
Un ejemplo de carácter es una letra, un número o un signo de puntuación.

CÓDIGO: es un conjunto de líneas de texto que son las instrucciones que debe
seguir la computadora para ejecutar dicho programa. Por tanto, en el código
fuente de un programa está descrito por completo su funcionamiento.

DOCUMENTO: es un subdirectorio o carpeta previamente asignado en la
unidad de almacenamiento. Es posible volver a abrirlo cuando se necesite
acceder a su contenido, ya sea para imprimirlo, modificarlo o eliminarlo. Es
mucho más frecuente decirle solamente archivo.

ENTORNO VISUAL: son todos los gráficos que se muestran al ejecutar un
programa tales como las ventanas de Windows para más sencillo todos los
iconos e imágenes que ves en tu computadora.

ESTÁNDAR: es la redacción y aprobación de normas que se establecen para
garantizar el acoplamiento de elementos construidos independientemente, así
como garantizar el repuesto en caso de ser necesario, garantizar la calidad de
los elementos fabricados, la seguridad de funcionamiento y trabajar con
responsabilidad social.

ETIQUETAS: son las órdenes o comandos, escritas en corchetes angulares,
con el que desarrolla sus documentos el lenguaje HTML.

FRAMES: es español es un fotograma o cuadro, una imagen particular dentro
de una sucesión de imágenes que componen una animación. La continua
sucesión de estos fotogramas producen a la vista la sensación de movimiento,
fenómeno dado por las pequeñas diferencias que hay entre cada uno de ellos.

HEXADECIMAL: es un sistema de numeración que emplea 16 símbolos. Su
uso actual está muy vinculado a la informática y ciencias de la computación,
pues los computadores suelen utilizar el byte u octeto como unidad básica
de memoria; y, debido a que un byte representa valores posibles. Según
el teorema general de la numeración posicional, equivale al número en base 16

, dos dígitos hexadecimales corresponden exactamente —permiten
representar la misma línea de enteros— a un byte.
HIPERTEXTO: es el nombre que recibe el texto que en la pantalla de un
dispositivo electrónico, permite conducir a otros textos relacionados, pulsando
con el ratón o el teclado en ciertas zonas sensibles y destacadas. La forma
más habitual de hipertexto en informática es la de hipervínculos o referencias
cruzadas automáticas que van a otros documentos (lexias).

INTERNAUTAS: es un neologismo resultante de la combinación de los
términos internet y del griego ναύτης (nautes, navegante), utilizado
normalmente para describir a los usuarios habituales de Internet o red.un
internauta es todo aquel que navega constantemente en la red.

MACROMEDIA DREAMWEAVER: como todos los productos de Macromedia
el Dreamweaver se enmarca dentro de un ámbito eminentemente profesional,
tanto por precio (unas 75.000 ptas.) como por prestaciones. La herramienta de
Macromedia tiene un interfaz y modo de funcionamiento similar a una
herramienta multimedia de autor como Director. Dreamweaver posibilita la
utilización de las últimas novedades en HTML dinámico y Javascript mediante
varias opciones sin tener que escribir código, además puede usar tanto
Shockwave como Flash para incorporar animaciones multimedia interactivas
en las páginas que creemos con él.

MENÚ: es una serie de opciones que el usuario puede elegir para realizar
determinada tarea. Los menús están contenidos en una barra de menú, la cual
se puede decir que es una propiedad que tienen las ventanas para poseer
menús, esto es porque la barra de menú en sí misma no es una ventana como
lo puede ser un botón de comando o un cuadro de texto, pero tampoco es
una barra de herramientas, sino un objeto contenedor de otros menús.

MICROSOFT FRONTPAGE: es un editor de páginas web para el sistema
operativo Windows. Formó parte de la suite Microsoft Office. Muchos
consideran que el código HTML generado por esta aplicación es un poco
descuidado y muchas veces reiterativo, especialmente en versiones antiguas.

NAVEGADORES: es una aplicación que opera a través de Internet,
interpretando la información de archivos y sitios web para que podamos ser
capaces de leerla, (ya se encuentre ésta alojada en un servidor dentro de
la World Wide Web o en un servidor local).

NETSCAPE NAVIGATOR: fue un navegador web y el primer producto
comercial de la compañía Netscape Communications, creada porMarc
Andreessen, uno de los autores de Mosaic, cuando se encontraba en
el NCSA (Centro Nacional de Aplicaciones para Supercomputadores) de
la Universidad de Illinois en Urbana-Champaign. Netscape fue el primer
navegador comercial.

NETSCAPE COMPOSER: es un editor de páginas web que ofrece un
entorno WYSIWYG inicialmente desarrollado por Netscape Communications
Corporation en 1997 y distribuido junto al navegador web Netscape Navigator.
Además, Composer también permite ver y editar el código HTML, revisar la
ortografía, publicar sitios web, y soporta los tipos más importantes de formato
web.

NETOBJECTS: es un programa de diseño de páginas web que abarca el
diseño, construcción y mantenimiento de sitios web. El programa permite la
definición del estilo y apariencia de cada página "al píxel", como los programas
de autoedición (QuarkX, Pagemaker...) más conocidos y sin usar HTML,

aunque podemos incrustar código HTML, Java, ActiveX y NetComponents, los
componentes propietarios de NetObjects.

SCRIPTS: es un guión, archivo de órdenes o archivo de procesamiento
por lotes, vulgarmente referidos con el barbarismo script, es
un programa usualmente simple, que por lo regular se almacena en un archivo
de texto plano. Los guiones son casi siempre interpretados, pero no todo
programa interpretado es considerado un guión.

SINTAXIS: es la parte de la gramática que estudia las reglas que gobiernan la
combinatoria de constituyentes sintácticos y la formación de unidades
superiores a estos, como los sintagmas y oraciones gramaticales. La sintaxis,
por tanto, estudia las formas en que se combinan las palabras, así como
las relaciones sintagmáticas y paradigmáticas existentes entre ellas.

WINDOWS: es el nombre de una familia de sistemas operativos desarrollados
por Microsoft desde 1981, año en que el proyecto se denominaba «Interface
Manager».

WORPAD: es un procesador de textos básico que se incluye con casi todas las
versiones de Microsoft Windows desde Windows 95en adelante. Es más
avanzado que el Bloc de notas pero más sencillo que el procesador de textos
de Microsoft Works y Microsoft Word. Reemplazó a Windows Write.

VERSIONES: es el proceso de asignación de un nombre o número único a
un software para indicar su nivel de desarrollo. Generalmente se asigna dos
números,mayor.menor (en inglés: major.minor), que van incrementando
conforme el desarrollo del software aumente y se requiera la asignación de un
nuevo nombre o número único.

INTRODUCCIÓN

El HTML es el lenguaje de hipertexto con el que se escriben las páginas web, se utiliza
para describir la estructura y el contenido en forma de texto, así como para
complementarlo con objetos tales como imágenes, sonido, video y otros,
considerablemente resulta un documento de multimedia, además se escriben en
forma de «etiquetas», que marcan el inicio y el fin de cada elemento del
documento rodeadas por corchetes angulares (<,>). Para que puedan ser
visualizados en los navegadores, los documentos HTML deben tener la extensión
HTML o HTM. Los programas que permiten visualizar las páginas web se
encargan de interpretar el código HTML de los documentos para poder ser
mostrados a los usuarios. En siguiente trabajo es desarrollado con el fin de
identificar, detallar y aclarar los conceptos de los diferentes elementos que
conforman en lenguaje utilizado en las diferentes páginas Web, además es
importante conocer esta herramienta útil para desarrollar proyectos o productos
en la disciplina del diseño de integración multimedia.

JUSTIFICACIÓN

Para la formación de técnicos competentes en el diseño de integración multimedia
es necesario adquirir diversos conocimientos, un ejemplo de ello es el lenguaje de
hipertexto con el que se escriben las páginas web llamado HTML (Hyper Text
Markup Language), siendo una herramienta muy útil e importante como estrategia
de mercadeo para las empresas, un pilar fundamental al momento de llegar al
campo laboral y la base para seguir aprendiendo nuevas herramientas.

OBJETIVOS

General

Aprender todo lo relacionado con el lenguaje HTML.

Específicos

Conocer el significado e importancia del lenguaje HTML.

Aprender las diferentes versiones del lenguaje HTML.

Identificar los componentes o elementos necesarios para la creación de
una página web con sus respectivas clasificaciones.

Aprender la importancia y beneficios de los HTML.

Adquirir conocimiento relacionado con el diseño de integración
multimedia para ser competentes en el área.

MARCO TEÓRICO

Tema: Lenguaje HTML

Nota: Leer detenidamente el documento y responder las siguientes preguntas:

1. Es un lenguaje con él se puede escribir pagina web HTML

2. Lenguaje que permite escribir texto en forma estructurada está compuesto
por etiquetas.

¿Qué es HTML?
Es el lenguaje de
marcado predominante para la
elaboración de páginas web. Es
usado para describir la estructura y el
contenido en forma de texto, así
como para complementar el texto con
objetos tales como imágenes. El
HTML se escribe en forma de
«etiquetas», rodeadas por corchetes
angulares (<,>). HTML también
puede describir, hasta un cierto
punto, la apariencia de un
documento, y puede incluir
un script (por ejemplo JavaScript), el
cual puede afectar el comportamiento
de navegadores web y otros
procesadores de HTML.

Tabla 1. ¿Qué es HTML?
15

3. Las etiquetas cumplen la función de marcar el inicio y el fin de cada
elemento del documento

4. De que esta compuestos un documento hipertexto texto, imágenes,
sonido, videos etc.

5. Un documento hipertexto es considerado como un documento multimedia

6. Los documentos HTML deben tener extensión html o htm

7. Para que los documentos HTLM se han visualizado por los navegadores
deben tener extensión html o htm.

8. Describa las diferentes versiones que han surgido del lenguaje HTML
Estándar HTML 2.0: Se aprobó en noviembre de 199 para la creación de
páginas web. Se creó con objetivos divulgativos, orientado a la actividad
académica en el que el contenido de las páginas eran más importantes que el
diseño. Pero esta versión de HTML carecía de herramientas que permitieran
controlar el diseño de las páginas y añadir contenido multimedia, por lo que
Netscape comenzó a incluir nuevas etiquetas que no existían en el estándar
El borrador HTML 3.0: Fue una versión de HTML del comité encargado de
establecer los estándares dentro de internet. Este borrador resulto demasiado
extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya
existentes, y la creación de otras muchas etiquetas nuevas. Por ello, no fue
bien aceptado por el mercado.
Estándar HTML 3.2: Se aprobó en enero de 1997 este incluía las mejoras
proporcionadas por los navegadores de internet Explorer y Netscape
Navigator.

16

Estándar HTML 4.0: Se aprobó en diciembre de 1997 fue creado para
estandarizar los marcos (frames), las hojas de estilo y los scripts
Estándar HTML 4.1: S e aprobó en septiembre de 2001

9. ¿Cuáles son los navegadores que permite visualizar las páginas de
lenguaje HTML?
El navegador instalado en el ordenador del usuario es el que interpreta el
código HTML de la página que visita. Cada navegador o versión de este
muestra la misma página de forma diferente.

10. ¿Por qué debe ser compatible con los navegadores la última versión
del lenguaje HTML?
Los navegadores tienen que ser compatibles con la última versión HTML para
poder interpretar el mayor número posible de etiquetas si un navegador no
reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda
reflejado en la página.

11. ¿Cuál es el reto de los diseñadores de las páginas web?
Uno de los retos de los diseñadores de páginas web es hacer las páginas más
atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en
cuenta estos problemas de compatibilidades para que el mayor número de
internautas vean sus páginas tal como las ha diseñado.
Permitir crear páginas sin la necesidad de escribir ni una sola línea de código
HTML, con el objetivo de facilitar y agilizar la creación de páginas web.

12. ¿Qué se entiende por editores?
Un editor es un programa que nos permite redactar documentos

17

13. La función del editor es
La función de un editor es redactar documentos y además permiten crear
páginas web sin la necesidad de escribir ni una sola línea de código HTML.

14. ¿Dónde se pueden encontrar los cursos para crear pagina web?
Los cursos para crear páginas web como por ejemplo los cursos de
Macromedia Dreamweaver y Microsoft Frontpage, dos de los editores más
usados se pueden encontrar en aula Clic.

15. ¿Qué facilidad ofrece un editor?
Un editor genera automáticamente el código de las páginas y además facilita la
creación de las páginas y el uso de menús permitiendo ganar rapidez.

16. ¿Qué genera un editor visual?
Los editores disponen de un entorno visual y generan automáticamente el
código de las páginas.

17. Nombre los editores visuales con las que se pueden crear las páginas
web
Algunos de los editores visuales con los que podrás crear tus páginas web son:
Macromedia Dreamweaver

Microsoft Frontpage

Adobe Pagemill

NetObjects Fusion

18

CutePage

HotDog Proffesional

Netscape Composer

Arachnophilia

18. ¿Qué herramientas podemos utilizar para crear una página
escribiendo el código HTML?
Es aconsejable comenzar utilizando un herramienta lo mas de sencilla posible,
para tener que insertar nosotros mismos el código HTML. Esto permite
familiarizarse con el lenguaje, para poder utilizar algún editor visual
posteriormente, y depurar el código cuando fuera necesario.
Para crear páginas web escribiendo directamente el código 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 páginas, ya que se trata de un editor de textos muy sencillo de
manejar, que nos permitirá crear páginas a través del código HTML.

19. ¿Qué es una etiqueta?
Las etiquetas o marcas son las que delimitan cada uno de los elementos que
componen un documento HTML.

20. ¿Cuántos tipos de etiqueta hay?
Existen dos tipos de etiquetas, la del comienzo del elemento y la del fin o cierre
del elemento.

21. ¿Cómo está delimitado la etiqueta de comienzo?

19

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 añadir ciertas propiedades. Su
sintaxis es: <identificador atributo1 atributo2…>.
Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y
puede tomar cualquier valor propio del usuario o valores HTML
predefinidos.

22. ¿Cuáles son los caracteres que indican finalización?
La etiqueta del final está delimitada por los caracteres que indican finalización
son </ y >. Está compuesta por el identificador o nombre de la etiqueta, y no
contiene atributos. Su sintaxis es: </identificador>.

23. ¿Qué significa <head>?
<head> significa una etiqueta cabecera.

24. ¿Cuál es la estructura de una página?
La estructura básica de una página es:
<html>
<head>
…
</head>
<body>
…
</body>
</html>

25. Escribir y explicar cada una de las etiquetas que encuentre durante la
lectura del documento como <body> y otras <tittle>, etc

20

Cabecera de la página <head>:
Cada uno de los elementos de la página se encontrara entre una etiqueta de
comienzo y su correspondiente etiqueta de cierre, a excepción de algunos
elementos que no necesitan etiqueta de cierre. También es posible anidar
etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de
cierre.
A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..>
anidada dentro de la etiqueta <p..>:
<p aling=”center”><font color=”#993366” size=”4” face=”comic Sans MS,
Arial, MS Sans Serif”>Bienvenidos a www.aulaclic.com</font></p>
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Identificador del tipo de documento <html>
Todas las páginas web escritas en HTML tienen que tener la extensión html o
htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>.
Entre las etiquetas <html> y </html> estará comprendido el resto del código
HTML de la pagina.
Por ejemplo:
<html>
…
</html>

21

La cabecera de la página se utiliza para agrupar información sobre ella, como
puede ser el titulo.
Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo
debajo de la etiqueta <html>.
Por ejemplo:
<html>
<head>
…
</head>
…
</html>
Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y
mas se utilizan son:
<link>, <style>, <script> (estas etiquetas las veremos más adelante), <meta>
(si deseas saber para qué sirve y como utilizar esta etiqueta, consúltalo aquí) y
la etiqueta <title>.
Titulo de la pagina <title>:
El titulo de la pagina es el que aparecerá en la parte superior de la ventana del
navegador, cuando la pagina este cargada en el.
Para asignar un titulo a una página es necesario escribir el texto deseado entre
las etiquetas <title> y </title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las
etiquetas <head> y </head>.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>

22

</head>
…
</html>
Cuerpo del documento <body>
El cuerpo del documento contiene la información propia del documento, es
decir lo que queremos que se visualice, el texto de la página, las imágenes, los
formularios, etc.
Todos estos elementos tienen que encontrarse entre las etiquetas <body> y
</body>, que van justo debajo de la cabecera.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body>
…
</body>
</html>
A traves de la etiqueta <body> es posible establecer el color o la imagen de
fondo de la página.
El color de fondo puede establecerse a través del atributo bgcolor, al que es
posible asignarle un color representado en hexadecimal o por un nombre
preferido.
Por ejemplo, para hacer que el color de fondo de una página sea de color azul,
tendremos que escribir:
…
<body bgcolor=”#0000FF”>

23

…
</body>
</html>
Sería equivalente a poner:
...
<body>
…
</body>
</html>
La imagen de fondo puede establecerse a través del atributo background,
indicando la ruta en la que se encuentra la imagen.
Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen
de fondo.gif, que se encuentra en el mismo directorio en el que se encuentra
guardada la pagina, tendremos que escribir:
…
<body background=”fondo.gif”>
…
</body>
</html>

26. ¿Cuál es el atributo para el color de fondo?
posible asignarle un color representado en hexadecimal o por un hombre
predefinido.
…
…

24

</body>
</html>
...
<body>
…
</body>
</html>

27. Copia la tabla de colores hexadecimal

25

Tabla 2. Colores con sus valores hexadecimales

26

Guia 2
TALLER DE HTML

1. Cree una carpeta en el escritorio pongale como nombre mi primera
pagina web.
2. Siga los siguientes pasos
De clic en el boton inicio
De clic en todos los programas
De clic en accesorios
De clic en bloc de notas

3. Abierto el bloc de notas escriba lo siguiente tal y como aparece aquí
<html>
<head>
<title> Mi primera pagina </title>
</head>
<body>
Aqui van a colocar el texto del documento, o graficos, enlances, etc.
</body>
</html>
4. Guarde el archivo con el nombre practical dentro de la carpeta
anteriormente creada
5. Ahora vuelva a guardar el archivo con el nombre index.html dentro de
la carpeta anteriormente creada.
6. Cierre el bloc de notas
7. Vaya a la carpeta y observe que sucedió con el archivo guardado con
index.html y con practical abra comente con sus compañeras y la
profesora que sucedió, que diferencia hay entre uno y otro.
8. Elimine el archivo practica 1

27

9. De doble clic en index y observe los resultados
10. Ahora vaya a su carpeta y de clic derecho en el archivo index y en el
menu contextual seleccione abrir con y buscan el bloc de notas.
11. Haga los cambios necesarios para que el codigo quede de la siguiente
manera.
<html>
<head>
</head>
<body>
<h1> Mucha importancia </h1>
<h2> Menos importancia </h2>
<h3> Mucha menos importancia </h3>
</body>
</html>
12. Guarde los cambios y vaya al navegador y actualizalo en su defecto
oprima la tecla F5
13. Observe que sucede y comente con los campañeros y profesora.
14. Haga los cambios necesarios para que el codigo quede de la siguiente
manera.
<html>
<head>
<title color=”Yellow”> Mi primera pagina </title>
</head>
<body>
<font color=”blue” size=”4” face=”comic Sans MS, Arial, MS Sans Serif”>
Bienvenidos a mi primera pagina </font>
</body>
</html>

28

15. Guarde los cambios y vaya al navegador y actualizalo en su defecto
oprima la tecla F5
16. Ahora cambie le da colores a la letra y de tamaño y escriba un poema.

Cuando vienes me asombro
Tus metas me las propongo
Lo que alcanzas lo dispongo
La influencia tuya la conformo

Siempre aprendo con facilidad
Lo que tu haces valorar
Eres tu lo que haces alcanzar
Las metas con felicidad

Eres una mensajera de amor
Una reina de Dios
La cual te hace superior

Tu despiertas en mi la admiracion
Eres tu la mejor
Angie tu princesita de cancion.

29
5

Tareas

Leer la teoria y contestar en una hoja y luego socializar:
a) Que es el html

HTML, siglas de HyperText Markup Language («lenguaje de marcado de
hipertexto»), es el lenguaje de marcado predominante para la elaboración
de páginas web. Es usado para describir la estructura y el contenido en forma
de texto, así como para complementar el
texto con objetos tales como imágenes. El
HTML se escribe en forma de
«etiquetas», rodeadas
por corchetes angulares (<,>).
HTML también puede describir,
hasta un cierto punto, la apariencia
de un documento, y puede incluir
un script (por ejemplo JavaScript), el
cual puede afectar el
comportamiento de navegadores
web y otros procesadores de HTML.
Ilustración 1. ¿Qué es HTML?

HTML también es usado para referirse al contenido del tipo de MIME text/html
o todavía más ampliamente como un término genérico para el HTML, ya sea
en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma
descendida directamente de SGML(como HTML 4.01 y anteriores)

b) Cuál es la estructura de una página web

<html>
<head>

30

…
</head>
<body>
…
</body>
</html>
c) Averigua para que se utilizan las etiquetas HTML, head, title, body, h1. h2.
h3 y Font, color, size
Identificador del tipo de documento <html>
Todas las páginas web escritas en HTML tienen que tener la extensión html o
htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>.
Entre las etiquetas <html> y </html> estará comprendido el resto del código
HTML de la pagina.
Por ejemplo:
<html>
…
</html>
La cabecera de la página se utiliza para agrupar información sobre ella, como
puede ser el titulo.
Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo
debajo de la etiqueta <html>.
Por ejemplo:
<html>
<head>
…
</head>
…
</html>

31

Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y
mas se utilizan son:
<link>, <style>, <script> (estas etiquetas las veremos más adelante), <meta>
(si deseas saber para qué sirve y como utilizar esta etiqueta, consúltalo aquí) y
la etiqueta <title>.

Cabecera de la página <head>:
Cada uno de los elementos de la página se encontrara entre una etiqueta de
comienzo y su correspondiente etiqueta de cierre, a excepción de algunos
elementos que no necesitan etiqueta de cierre. También es posible anidar
etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de
cierre.
A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..>
anidada dentro de la etiqueta <p..>:
<p aling=”center”><font color=”#993366” size=”4” face=”comic Sans MS,
Arial, MS Sans Serif”>Bienvenidos a www.aulaclic.com</font></p>
<html>
<head>
…
</head>
<body>
…
</body>
</html>

Titulo de la página <title>:
El titulo de la pagina es el que aparecerá en la parte superior de la ventana del
navegador, cuando la pagina este cargada en el.

32

Para asignar un titulo a una página es necesario escribir el texto deseado entre
las etiquetas <title> y </title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las
etiquetas <head> y </head>.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
…
</html>

Cuerpo del documento <body>
El cuerpo del documento contiene la información propia del documento, es
decir lo que queremos que se visualice, el texto de la página, las imágenes, los
formularios, etc.
Todos estos elementos tienen que encontrarse entre las etiquetas <body> y
</body>, que van justo debajo de la cabecera.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body>
…

33

</body>
</html>
A traves de la etiqueta <body> es posible establecer el color o la imagen de
fondo de la página.
posible asignarle un color representado en hexadecimal o por un nombre
preferido.
…
…
</body>
</html>
...
<body>
…
</body>
</html>
La imagen de fondo puede establecerse a través del atributo background,
indicando la ruta en la que se encuentra la imagen.
Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen
de fondo.gif, que se encuentra en el mismo directorio en el que se encuentra
guardada la pagina, tendremos que escribir:
…
<body background=”fondo.gif”>
…
</body>

34
5

</html>

Etiqueta h1. h2. h3…
Esta etiqueta sirve para definir un encabezado, esta etiqueta si lleva cierre y
tiene el atributo STYLE, puede ser del 1 al 6 siendo el 1 el tamaño más grande
y el 6 el más pequeño.
Por ejemplo:

Este texto es un encabezado con la etiqueta H6






35
5

El código es:

<H6 ALIGN="center" >Este texto es un encabezado con la etiqueta H6</H6>






La etiqueta FONT

Cambiando el tamaño del texto.

La etiqueta FONT permite tener un gran control sobre el tamaño de un texto. Este
tamaño se especifica con su atributo SIZE y afectará al texto que encierren la
instrucción de inicio (<FONT SIZE="">) y de fin (</FONT>).

La forma de especificar el tamaño del texto consistirá en darle el valor deseado al
atributo SIZE.

Cambiando el color del texto

Con otro atributo de la etiqueta FONT: COLOR se puede cambiar el color del texto
con la misma facilidad con la que hasta ahora se ha cambiado su tamaño. En un

36
5

principio la única forma de indicar un color consistía en usar un código
hexadecimal de la siguiente manera:

<FONT COLOR="#RRGGBB">

Dónde hay que sustituír RR por dos números hexadecimales que indican la
cantidad de rojo (desde 00 que es ausencia de color a FF que es máxima cantidad
de color), GG por otros dos que indican la cantidad de verde y BB por dos que
indican la cantidad de azul. Combinando estos tres colores en diferentes
proporciones se pueden crear hasta 16 millones de colores. Este sistema suele
parecer ligeramente complicado en un principio, pero con la práctica o con ayuda
de herramientas gráficas de selección de colores se convierte en un método
bastante sencillo e increíblemente potente.

Existe un segundo método de indicar el color que sin duda le resultará al lector
más sencillo. Este método consiste en poner como valor de COLOR el nombre del
color en inglés. Los colores aceptados
son: Black (negro), white (blanco),green (verde), maroon (marron
rojizo), olive(verde oliva), Navy (azul
marino), purple (violeta), red (rojo), yellow (amarillo), blue (azul),teal (verde
azulado), lime (verde lima), aqua (azul claro), fuchsia (fusia), silver (gris claro).
Aunque además de estos existen otros valores, no son soportados en todos los
navegadores.

Y la forma de usarlas queda clara en el siguente ejemplo:

<H1>

<FONT COLOR="FUCHSIA">

37
5

Colores en el Web

</FONT>

</H1>

ya podemos decir que sabemos poner colores en las páginas Web,

<FONT COLOR="green">

verde

</FONT>,

<FONT COLOR="blue">

azul

</FONT>

<FONT COLOR="red">

rojo
</FONT>,

etc. Ninguno se nos resiste.

38
5

Gracias a la etiqueta FONT y a su atributo COLOR nuestras páginas tomarán un
colorido totalmente diferente.

Ilustración 2. Color del texto Etiqueta Font

Etiqueta size

SIZE: Regula el tamaño de los caracteres.
Ejemplo:<FONT SIZE="3"> texto... </FONT>.

Permite tener un gran control sobre el tamaño de un texto. Este tamaño se
especifica con su atributo SIZE y afectará al texto que encierren la instrucción de
inicio (<FONT SIZE=" ">) y de fin (</FONT>). La forma de especificar el tamaño
del texto consistirá en darle el valor deseado al atributo SIZE, si bien hay dos
formas de hacerlo:

La primera de ellas es indicar un tamaño absoluto de 1 a 7. Correspondiendo 7 al
tamaño mayor y 1 al menor. El tamaño por defecto del texto es el equivalente al
número 3. Veamos un ejemplo:

39
5

Esto es texto normal

<FONT SIZE="6">

y esto es grande

</FONT>

Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el tamaño del
texto.

Ilustración 3. Primer Ejemplo Etiqueta Font y atributo Size

La segunda consistirá en indicar un tamaño relativo respecto al que haya por
defecto. Por ejemplo, para poner un tamaño 6 y suponiendo un tamaño por
defecto 3 se usaría:

40

Texto de tamaño 3

<FONT SIZE="+3">

Tamaño 6

</FONT>

Es necesario hacer notar que el aumento de tamaño se tomará siempre respecto
al que se tenga por defecto (y que será 3 mientras el usuario no cambie las
preferencias de su navegador), por tanto anidando varias etiquetas FONT no se
irá aumentando el tamaño del texto como ocurría con la etiqueta BIG. Por ejemplo:

Texto normal (tamaño 3),

<FONT SIZE="+1">

Texto de tamaño 4 ,

<FONT SIZE="+1">

este texto sigue teniendo tamaño 4

</FONT>

</FONT>

41

Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el tamaño del
texto.

Ilustración 4. Segundo Ejemplo de Etiqueta Font y Size

Cuando se indica el tamaño del texto usando el método relativo (+n o -n) será
necesario usar comillas. Aunque algunos navegadores podrían entender el
valor aunque no se usen la única manera de estar seguro de que la
visualización será correcta en todos ellos será entrecomillar el valor dado al
atributo SIZE.

Conocidos estos dos métodos es el momento de introducir una nueva etiqueta
muy relacionada con FONT: la etiqueta BASEFONT. Esta permite modificar el
tamaño por defecto del texto de la página Web. Su modo de uso es el siguiente:

<BASEFONT SIZE="n">

Donde n es un número del 1 al 7 (por defecto vale 3) y las comillas son
obligatorias. Podemos observar como esta etiqueta está formada por una única
instrucción cuya función será modificar el tamaño de todo el texto a partir de su

42

inclusión. La única excepción que escapa al efecto de esta etiqueta son los
encabezados, que mantienen su tamaño. En general cuando se usa esta etiqueta
se introduce como la primera después de <BODY>, no usarla es lo mismo que
usar <BASEFONT SIZE="3">.

A continuación se incluyen dos ejemplos con distintos tamaños de letra por
defecto:

<BASEFONT SIZE="3">

Esto es texto de tamaño 3,

<FONT SIZE="+3">

esto es de tamaño 6,

</FONT>

<FONT SIZE="+4">

y esto es de tamaño 7
</FONT>

Como se ve, para hallar el tamaño de un texto hay que sumar el tamaño relativo
(+3 o +4 en este caso) al tamaño por defecto del resto del texto (en este caso 2).
Otro ejemplo más:

<BASEFONT SIZE="4">

Esto es texto de tamaño 4,

43

<FONT SIZE="+3">

esto es de tamaño 7,

</FONT>

<FONT SIZE="+4"

y esto sigue siendo de tamaño 7
</FONT>

En este segundo ejemplo se ve, además, que en ningún caso se puede conseguir
un tamaño superior a siete. De igual manera nunca se puede poner un tamaño
menor que uno.
Los tamaños del texto que hayamos modificado usando el método relativo se
calcularán a partir del al tamaño por defecto del texto normal, pero sin pasar nunca
de 7.

44

Ilustración 5. Tamaño de texto Etiqueta Font

Etiqueta color

Regula el color de los caracteres. En principio existen dos posibilidades para
definir los colores en HTML:
1. Mediante la especificación de los valores RGB del color deseado en forma
hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul)
2. Mediante la especificación del nombre del color en ingles

Ejemplos:

<FONT COLOR="WHITE">Blanco</FONT> Blanco #FFFFFF

<FONT COLOR="BLACK">Negro</FONT> Negro #000000

<FONT COLOR="RED">Rojo</FONT> Rojo #FF0000

<FONT COLOR="GREEN">Verde</FONT> Verde #00FF00

45

<FONT COLOR="BLUE">Azul</FONT> Azul #0000FF

<FONT COLOR="YELLOW">Amarillo</FONT> Amarillo #FFFF00

<FONT COLOR="CYAN">Cyan</FONT> Cyan #00FFFF

<FONT COLOR="MAGENTA">Magenta</FONT> Magenta #FF00FF

Tabla 3. Ejemplos Etiqueta de Color

Si nos decidimos a trabajar con valores hexadecimales, entonces tenemos
la libertad de utilizar 16,7 millones de colores. De esta manera trabajamos
independientemente de los navegadores Web.
Si especificamos el nombre del color, podemos evitar la definición del color en
forma hexadecimal que es un poco más difícil. Actualmente están estandarizados
tan sólo 16 colores. Existen colores adicionales los cuales son dependientes de
los navegadores Web.
Primero que todo debe escribir un símbolo #. A continuación siguen las 6 cifras
para la definición del color. Las primeras 2 cifras definen el valor rojo, las
siguientes 2 el valor verde y las 2 últimas el valor azul.

Las cifras hexadecimales son:
0 (corresponde al decimal 0)

46

A (corresponde al decimal 10)
B (corresponde al decimal 11)
C (corresponde al decimal 12)
D (corresponde al decimal 13)
E (corresponde al decimal 14)
F (corresponde al decimal 15)
(mirar el cuadro de la página anterior)

Para ponerle color de fondo a la página escribir:
<body bgcolor=#808080></body> con el cual obtendremos un color de fondo gris
oscuro. Colocar mal los colores de fondo en nuestras páginas puede
provocar problemas. ¿Qué ocurría con los links o enlaces si colocáramos un fondo
de color azul?. Puesto que los links son azules cuando todavía no se han pulsado
puede ocurrir que no se puedan leer con claridad o incluso que no se puedan
distinguir en absoluto del fondo.
Se puede imaginar todavía un caso peor si decidiéramos colocar un fondo
demasiado oscuro, tan oscuro que no permitiera distinguir con claridad la
información que se presenta en pantalla. Podemos remediar esto eligiendo
nosotros mismos el color que queremos que tengan los links o enlaces e incluso el
texto, las etiquetas para hacer esto son las siguientes:

text="#número" Para el color del texto.
link="#número" Para el color de los enlaces.
vlink="#número" El color con que aparecerán los enlaces ya visitados.
alink="#número" Color del enlace cuando lo pulsamos.

Averiguar cual etiqueta se utiliza para escribir en negrilla

47

Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La
utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras.

La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un
ejemplo:

Este palabra la vamos a poner en <b>negrita</b> y esta otra
<strong>también</strong>

Este palabra la vamos a poner en negrita y esta
otra también

GUIA 3
Etiquetas

Etiquetas para aplicar en cada una de las practicas que ejecute con lenguaje
html y quieras crear una pagina web
Cuando quiera colocar un texto en negrilla es necesario que utilice la siguiente
etiqueta
1. Para abrir y para cerrar <b> esto sale en negrilla </b>
2. <p> Hola para construir parrafos <p>
3. Etiqueta para colocar color de la letra y tamaños
<font color=”blue”size=”10”face=”Comic Sans Ms, arial.Ms sans serif”>
Bienvenidos a crear paginas web </font><br></br>
4. Atributo bgcolor, color de fondo seguido de la etiqueta body
5. Practica de color de fondo, tamaño de fuente, y centrado la imagen
<html>

48

<head>
<title> Mi pagina en colores </title>
</head>
<body bgcolor=”#507FFF”>
<h1><p align=”center”> bienvenido a mi pagina </h1></p>
<h1><p Aquí iria el resto de la pagina</p></h1>
<p align=”center”><img src=”computador.gif” width=”122” height=“85”>
<bgsound src=”c:/06 a duo con luis silva.mp3” balance=0 volume=0> De clic
aqui
</bgsound>
</body>
</html>
6. Para colocar movimiento al texto o la imagen debe utilizar la etiqueta:
<marquee> escribe el mensaje </marquee>
7. Las imágenes deben ser cargadas o guardadas en la carpeta, donde tiene
guarda la pagina que esta creando, las imágenes deben ser con
extension.gif
<MARQUEE> es una de esas etiquetas no estandar de HTML, que soportan
los navegadores mas comunes, pero que no estan comprendidas dentro de las
especificaciones de HTML. Sirve para enimar elementos dentro de la pagina.
En concreto permite que el contenido que pongamos dentro de la etiqueta, ya
sea texto, fotografias, o las dos cosas, se desplace horizontalmente por la
pagina.
La etiqueta marquee puede servirnos para hacer animaciones en paginas
sencillas, sin ningun conocimiento de lenguajes de programacion ni otras
complicaciones semejantes. Para los que solo conocen HTML es una
herramienta perfecta si desean hacer que un elemento de la pagina se mueva.

49

Pero atencion, aunque este comentando este truco para mover texto por la
pagina o imágenes, tenemos que utilizar en marquee con mucha prudencia,
puesto que tiene desventajas:
Marquee no esta comprendido en los estandar HTML
Utilizar Marquee puede tener problemas de accesibilidad, es decir, se
puede hacer dificil de leer para determinadas personas con
discapacidades.
El hecho de animar elementos de una pagina favorece el denamismo y
ayuda a llamar la atencion sobre determinados mensajes o imágenes,
pero si utilizas marquee en muchos lugares puede provocar confusion y
Marear al usuario.
Para utilizar marquee, simplemente colocamos dentro de la etiqueta los
contenidos que queremos que se muevan, ya sean texto, imágenes o
cualquier otro tipo de contenido. Algo como esto:
<marquee> texto que se mueve </marquee>
Pero tambien podriamos meter algo como esto:
<marquee>
<table align”center” width”100”border”1”>
<tr>
<td> Esta tabla se desplaza, con todo el contenido de la tabla </td>
</tr>
</table>
</marquee>
Marquee soporta una serie de atributos para modificar su comportamiento o su
aspecto. Son los siguientes:
WIDTH
Anchura de la marquesina. Si no marcamos altura, se colocara en la siguiente
linea, como en un parrafo distinto. Si marcamos una anchura, la marquesina

50

intentara mostrase en la misma linea donde lo hayamos colocado. Si no hay
espacio para ella se realizara el consiguiente salto.

TECNOLOGIA E INFORMATICA

Profesor: Myriam Elina Ramos

CREAR PAGINA WEB
OTRO
Fondos
<html>
<head>
</head>
<body background=”bkgnd2.gif”>
<h1> bienvenido a mi pagina </h1>
<p> Aquí iria el resto de la pagina </p>
</body>
</html>
OTRO
<html>
<head>
</head>
<body background=”bkgnd2.gif”>

51

</body>
</html>

<html>
<head>
</head>
<body background=”bkgnd2.gif”> text=”#000080”>
</body>
</html>
Codigo Funcion
<P align=”left”>…</p> Parrafo alineado a la izquierda
<P align=”center”>…</p> Parrafo centrado
<P align=”right”>…</p> Parrafo alineado a la derecha
<P align=”justify”>…</p> Parrafo justificado

Tabla 4. Código/Función Fondos

PRACTICAR DIVERSOS FONDOS DE PANTALLA
<html>
<head>
<title>Mi primera pagina tricolor</title>
<body background="flor.gif">
<p> La mariposa es un insecto holometabolo </p>
<h1> Bienvenidos a Desarrollar Creatividad e inteligencia elaborando la web </h1>
</BODY>
</html>

52

__________________________________________________________________
<html>
<head>
<body background="tigre.gif">
<p> El tigre es una animal cuadrupedo y feroz </p>
</BODY>
</html>
__________________________________________________________________
<html>
<head>
<title> Mi pagina en color </title>
</head>
<body bgcolor="#507FFF">
<h1> Bienvenidos a mi pagina </h1>
<p> Los colores del arcoíris </p>
</body>
</html>
__________________________________________________________________
<html>
<HEAD>
<title> MI PRIMERA PAGINA A COLOR </title>
<body bgcolor="#00ffFF">
<p> El mundo está lleno de colores </p>
</BODY>
</html>
__________________________________________________________________

53

<html>
<head>
<title> Colores </title>
</head>
<body bgcolor="black" text="#ooffoo">
<h2> Amar es repartir al otro </h2>
<a href="http://www.aulaclic.com/">pulse aquí para visitar aula </a>
<a href="es nato sobre el abuelos/htm">Enlace a Tema 4: Hiperenlances </a>
</body>
</html>
__________________________________________________________________
<html>
<head>
<title> Animales </title>
</head>
<body>
<h1><center> Los animales </center></h1>
<hr>
<img align=left src="flor.gif">
<p align=center><img src="tigre.gif"></p>
<img align=right src="gallina.gif">
<bgsound src="c:todo tiene su final.mp3" balance=0 volume=0> de clic aqui
</bgsound>
<p> aqui va un segundo parrafo.</p>
</body>
</html>
__________________________________________________________________
<html>
<head>

54

<title> Colores </title>
</head>
<body bgcolor="black" text="#ooffoo">
<h2> Amar es respetar al otro </h2>
<a href="http://www.aulaclic.com/">pulse aquí para visitar aula </a>
<a href="familia/htm">Enlace a familia4: Hiperenlances </a>
</body>
</html>
__________________________________________________________________
COLOR FONDO
<html>
<head>
<title>Mi primera pagina a color</title>
<body bgcolor="#CC0000">
<p> El color es una reflexion optica </p>
</BODY>
</html>

55

ANEXOS

Anexo 1. Versión Estándar HTML 2.0


56



57


Anexo 6. Logo Navegador Internet Explorer

58

Anexo 7. Logo Navegador Netscape Navigator

Anexo 8.Editor Macromedia Dreamweaver

59

Anexo 9.Editor Microsoft Frontpage

60

CONCLUSIONES

Se conoció e interpreto el significado e importancia del lenguaje HTML.

Se aprendió las diferentes versiones que existen en el lenguaje HTML tales como
la Versión Estándar HTML 2.0, la Versión Estándar HTML 3.0, Versión
Estándar HTML 3.2, Versión Estándar HTML 4.0 y Versión Estándar HTML
4.01

Se identifico los componentes o elementos necesarios para la creación de
una página web con sus respectivas clasificaciones.

Se resalto la importancia y beneficios de los HTML para el diseño de
páginas web

Se adquirió conocimiento relacionado con el diseño de integración
multimedia como es el lenguaje HTML para ser competentes en el área.

61

BIBLIOGRAFÍA

Vender más en Internet

Autor: David Boronat, Ester Pallarés

Aprende a buscar en Internet

Autor: Ana Martos Rubio

Seguridad en la red informática

Autor: Carmen Jordán

62

CIBERGRAFÍA

http://en.wikipedia.org/wiki/Adobe_PageMill

http://es.wikipedia.org/wiki/Bloc_de_notas

http://es.wikipedia.org/wiki/Cabecera_(inform%C3%A1tica)

http://es.wikipedia.org/wiki/Car%C3%A1cter_(inform%C3%A1tica)

http://es.wikipedia.org/wiki/C%C3%B3digo

63

HTML Lenguaje

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (14)

Destacado

Destacado (6)

Similar a HTML Lenguaje

Similar a HTML Lenguaje (20)

Más de UNIVERSIDAD DE LOS LLANOS

Más de UNIVERSIDAD DE LOS LLANOS (20)

Último

Último (20)

HTML Lenguaje