lenguaje html

83
LENGUAJE HTML GALINDO LOPEZ MARIA FERNANDA

Upload: maria-fernanda-galindo-lopez

Post on 24-Jun-2015

510 views

Category:

Technology


3 download

DESCRIPTION

Guía 1 Taller Lenguaje HTML Guia 2 Taller de HTML Etiquetas Tecnologia e Informatica Crear Fondos Paginas Web

TRANSCRIPT

Page 1: Lenguaje HTML

LENGUAJE HTML

GALINDO LOPEZ MARIA FERNANDA

COLEGIO NACIONALIZADO FEMENINO DE VILLAVICENCIO

MODALIDAD DISEÑO DE INTEGRACION MULTIMEDIA

DÉCIMO GRADO

VILLAVICENCIO

2012

Page 2: Lenguaje HTML

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

Page 3: Lenguaje HTML

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

Page 4: Lenguaje HTML

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

Page 5: Lenguaje HTML

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

Page 6: Lenguaje HTML

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

Page 7: Lenguaje HTML

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.

Page 8: Lenguaje HTML

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

Page 9: Lenguaje HTML

, 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.

Page 10: Lenguaje HTML

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,

Page 11: Lenguaje 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.

Page 12: Lenguaje HTML

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.

Page 13: Lenguaje HTML

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.

Page 14: Lenguaje HTML

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.

Page 15: Lenguaje HTML

Es el  predominante para la elaboración de . 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  (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un  (por ejemplo ), el cual puede afectar el comportamiento de  y otros procesadores de HTML.

¿Qué es HTML?

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.

15Tabla 1. ¿Qué es HTML?

Page 16: Lenguaje HTML

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

Page 17: Lenguaje HTML

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

Page 18: Lenguaje HTML

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

Page 19: Lenguaje HTML

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

Page 20: Lenguaje HTML

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

Page 21: Lenguaje HTML

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>

La estructura básica de una página es:

<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

Page 22: Lenguaje 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>

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

Page 23: Lenguaje HTML

</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

Page 24: Lenguaje HTML

</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?

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 hombre

predefinido.

Por ejemplo, para hacer que el color de fondo de una página sea de color azul,

tendremos que escribir:

<body bgcolor=”#0000FF”>

24

Page 25: Lenguaje HTML

</body>

</html>

Sería equivalente a poner:

...

<body>

</body>

</html>

27. Copia la tabla de colores hexadecimal

25

Page 26: Lenguaje HTML

26

Tabla 2. Colores con sus valores hexadecimales

Page 27: Lenguaje HTML

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

Page 28: Lenguaje HTML

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>

<title> Mi primera pagina </title>

</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

Page 29: Lenguaje HTML

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.

Tareas

295

Page 30: Lenguaje HTML

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.

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

Ilustración 1. ¿Qué es HTML?

Page 31: Lenguaje HTML

</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>

Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y

mas se utilizan son:

31

Page 32: Lenguaje HTML

<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>

La estructura básica de una página es:

<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.

Para asignar un titulo a una página es necesario escribir el texto deseado entre

las etiquetas <title> y </title>. 32

Page 33: Lenguaje HTML

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>

</body>

</html> 33

Page 34: Lenguaje 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”>

</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>

345

Page 35: Lenguaje 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

Este texto es un encabezado con la etiqueta H5

Este texto es un encabezado con la etiqueta H4

Este texto es un encabezado con la etiqueta H3

Este texto es un encabezado con la etiqueta H2

Este texto es un encabezado con la etiqueta H1

El código es: 355

Page 36: Lenguaje HTML

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

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

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

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

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

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

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

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

hexadecimal de la siguiente manera:

365

Page 37: Lenguaje HTML

<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">

Colores en el Web375

Page 38: Lenguaje HTML

</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.

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

colorido totalmente diferente. 385

Page 39: Lenguaje HTML

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:

Esto es texto normal

395

Ilustración 2. Color del texto Etiqueta Font

Page 40: Lenguaje HTML

<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.

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:

Texto de tamaño 3

<FONT SIZE="+3">

Tamaño 6

40

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

Page 41: Lenguaje HTML

</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>

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

texto.

41

Page 42: Lenguaje HTML

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

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 42

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

Page 43: Lenguaje HTML

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,

<FONT SIZE="+3"> 43

Page 44: Lenguaje HTML

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.

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

Page 45: Lenguaje HTML

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

<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

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

45

Tabla 3. Ejemplos Etiqueta de Color

Page 46: Lenguaje HTML

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)

1 (corresponde al decimal 1)

2 (corresponde al decimal 2)

3 (corresponde al decimal 3)

4 (corresponde al decimal 4)

5 (corresponde al decimal 5)

6 (corresponde al decimal 6)

7 (corresponde al decimal 7)

8 (corresponde al decimal 8)

9 (corresponde al decimal 9)

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

46

Page 47: Lenguaje HTML

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

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

47

Page 48: Lenguaje HTML

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>

<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>

48

Page 49: Lenguaje HTML

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.

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:

49

Page 50: Lenguaje HTML

<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

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>

<title> Mi pagina en colores </title>

</head>

50

Page 51: Lenguaje HTML

<body background=”bkgnd2.gif”>

<h1> bienvenido a mi pagina </h1>

<p> Aquí iria el resto de la pagina </p>

</body>

</html>

OTRO

<html>

<head>

<title> Mi pagina en colores </title>

</head>

<body background=”bkgnd2.gif”>

<h1> bienvenido a mi pagina </h1>

<p> Aquí iria el resto de la pagina </p>

</body>

</html>

<html>

<head>

<title> Mi pagina en colores </title>

</head>

<body background=”bkgnd2.gif”> text=”#000080”>

<h1> bienvenido a mi pagina </h1>

<p> Aquí iria el resto de la pagina </p>

</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

51

Page 52: Lenguaje HTML

<P align=”justify”>…</p> Parrafo justificado

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>

__________________________________________________________________

<html>

<head>

<title> Mi primera pagina </title>

<body background="tigre.gif">

<p> El tigre es una animal cuadrupedo y feroz </p>

<h1> Bienvenidos a Desarrollar Creatividad e inteligencia elaborando la web </h1>

</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>

52

Tabla 4. Código/Función Fondos

Page 53: Lenguaje HTML

</body>

</html>

__________________________________________________________________

<html>

<HEAD>

<title> MI PRIMERA PAGINA A COLOR </title>

<body bgcolor="#00ffFF">

<p> El mundo está lleno de colores </p>

<h1> Bienvenidos a Desarrollar Creatividad e inteligencia elaborando la web </h1>

</BODY>

</html>

__________________________________________________________________

<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&iacute; 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>

53

Page 54: Lenguaje HTML

<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>

<title> Colores </title>

</head>

<body bgcolor="black" text="#ooffoo">

<h2> Amar es respetar al otro </h2>

<a href="http://www.aulaclic.com/">pulse aqu&iacute; 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>

<h1> Bienvenidos a Desarrollar Creatividad e inteligencia elaborando la web </h1>

</BODY>

54

Page 55: Lenguaje HTML

</html>

ANEXOS

Anexo 1. Versión Estándar HTML 2.0

55

Page 56: Lenguaje HTML

Anexo 2. Versión Estándar HTML 3.0

Anexo 3. Versión Estándar HTML 3.2

Anexo 4. Versión Estándar HTML 4.0

56

Page 57: Lenguaje HTML

Anexo 5. Versión Estándar HTML 4.01 57

Page 58: Lenguaje HTML

Anexo 6. Logo Navegador Internet Explorer

Anexo 7. Logo Navegador Netscape Navigator 58

Page 59: Lenguaje HTML

Anexo 8.Editor Macromedia Dreamweaver

Anexo 9.Editor Microsoft Frontpage

59

Page 60: Lenguaje HTML
Page 61: Lenguaje HTML
Page 62: Lenguaje HTML

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.

60

Page 64: Lenguaje HTML

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

62

63