1. COLEGIO SUPERIOR PARA LA EDUCACION
INTEGRAL INTERCULTURAL DE OAXACA
BACHILLERATO INTEGRAL COMUNITARIO Nº 14
TEMA:
Curso de html
Parte inicial
MODULO IV
VIDA Y NATURALEZA
PRESENTA:
“ELISSA VASQUEZ VASQUEZ
VERONICA MARTINEZ PABLO
PERLA DIAZ DIAZ ”
ASESOR:
“L.I.SENÉN LÓPEZ OSORIO”
JALTEPEC DE CANDAYOC, COTZOCON, MIXE, OAX., A 23DE JUNIO
DE 2013

2. DEDICATORIA
Este trabajo es dedicado a las personas que siempre nos han apoyado y nos han enseñado
que la vida no es fácil pero el verdadero sentido de está, es buscarle salida a todos los
problemas y obstáculos que podamos encontrar a:geovanni Vásquez Vásquez, Aida Díaz
Díaz y Aurelia pablo, quienes nos han dado el valor de seguir adelante y ser mejor día con
día y no dejarnos vencer por los fracasos ya que de los errores se aprende
En especial este trabajo va dedicado para mi hermano Geovanni Vasquez Vásquez por que
el siempre esta conmigo en las buenas y en las malas, el me ha enseñado lo bueno y lo
malo ,a ser una persona responsable, me ha enseñado cosas maravillosas de la vida y por
sus consejos he logrado ser alguien en esta vida .

4. INTRODUCCIÓN AL LENGUAJE
HTML

5. El World Wide Web (WWW) es un sistema que contiene una cantidad de
información casi infinita. Pero esta información debe estar ordenada de
alguna forma de manera que sea posible encontrar lo que se busca. La
unidad básica donde está almacenada esta información son las páginas
Web. Estas páginas se caracterizan por contener
texto, imágenes, animaciones... e incluso sonido y video.
Una de las características más importantes de las páginas Web es que
son hipertexto. Esto quiere decir que las páginas no son elementos
aislados, sino que están unidas a otras mediante los links o enlaces
hipertexto. Gracias a estos enlaces el navegante de internet puede
pulsar sobre un texto (texto al que llamaremos de ahora en adelante
activo) de una página para navegar hasta otra página. Será cuestión del
programador de la página inicial decidir que palabras o frases serán
activas y a donde nos conducirá pulsar sobre ellas.
Introducción

6. En algunos ambientes se discute que el World Wide Web ya no es un sistema
hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque
en sus orígenes el WWW constaba únicamente de texto en la actualidad es un
sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo
texto, sino imágenes, videos, botones,... en definitiva cualquier elemento de una
página. Aún así, el término original no ha sido reemplazado todavía y por tanto será
el empleado a lo largo de esta obra.

7. CARACTERÍSTICAS DEL LENGUAJE
HTML
Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los
diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre
otras, las siguientes características:
• El Web tenía que ser distribuido: La información repartida en páginas no muy grandes
enlazadas entre sí.
• El Web tenía que ser hipertexto y debía ser fácil navegar por él.
• Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de
trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).

8. • Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser
ágil y rápido.
Estas características son las que marcaron el diseño de todos los elementos del
WWW incluida la programación de páginas Web. Como respuesta a todos estos
requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas
significan "lenguaje hipertexto de marcas".
Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en
una página web con diferentes tipos y tamaños de letra, con imágenes
impactantes, animaciones sorprendentes, formularios interactivos, etc.

9. QUÉ SE NECESITA PARA CREAR UNA
PÁGINA WEB
Una de las características de este lenguaje más importantes para el
programador es que no es necesario ningún programa especial para
crear una página Web. Gracias a ello se ha conseguido que se puedan
crear páginas con cualquier ordenador y sistema operativo. El código
HTML, como hemos adelantado en el párrafo anterior, no es más que
texto y por tanto lo único necesario para escribirlo es un editor de texto
como el que acompañan a todos los sistemas operativos: edit. en MS-
DOS, block de notas en Windows, vi en UNIX, etc.
Por supuesto estos no son los únicos editores de texto que pueden ser
usados, sino cualquier otro. También se puede usar procesadores de
texto, que son editores con capacidades añadidas, como pueden ser
Microsoft Word o WordPerfect pero hay que tener cuidado porque en
ocasiones hacen traducciones automáticas del código HTML que no
siempre son deseadas. En estos dos últimos casos, también hay que
tener en cuenta que deberemos guardar el archivo en modo texto.

10. UN EDITOR DE TEXTO SIMPLE, COMO EL BLOCK DE
NOTAS DE WINDOWS, ES TODO LO
NECESARIO PARA CREAR UNA PÁGINA WEB
Una vez hemos escrito el código deberemos guardar el
archivo (con formato de texto) con la extensión .html ( o
.html en MS-DOS, Windows 3.1 o cualquier otro sistema
que sólo acepte tres letras en la extensión. Los siguientes
son nombres válidos de archivos que contengan código
HTML:
index.html, index.html,principal.html, PRINCIPAL.htm, etc...

11. ATENCIÓN: El World Wide Web es un sistema que
diferencia las mayúsculas de las minúsculas. Es un error
común llamar a un archivo index.html y luego referirse a
él como Index.html. Aunque en nuestro ordenador puede
funcionar al publicarlo seguramente no lo hará. Por esta
razón es una norma general usar siempre minúsculas
para los nombres de los archivos html.
Últimamente han aparecido nuevas alternativas que facilitan
la programación de páginas Web. Son los editores HTML.
Podemos dividir estos editores en dos grupos:
• Asistentes: ayudan a crear el código HTML e incluyen
plantillas de código prefabricadas, por ejemplo HotDog
(Win), HomeSite (Win), HTML Editor (Mac), Quanta
(Linux, KDE) o Bluefish, (Linux, GNOME).

12. • Conversores: son programas con otra función que la de la
programación Web pero que permiten convertir a HTML.
Son ejemplos de conversores Microsoft Word, Quark
XPress y PageMaker.
• Editores WYSIWYG (What You See Is What You Get, lo
que ves es lo que obtienes): estos editores permiten crear
páginas web sin escribir código HTML como si se tratase
de un programa de dibujo por ordenador. Algunos ejemplos
de este tipo de editores son Macromedia
Dreamweaver, HotMetal o Microsoft Frontpage.

13. ALGUNAS RAZONES PARA USAR
HTML
Todos estos editores HTML tipos pueden ser de gran ayuda y
tienen sus ventajas e inconvenientes, pero la experiencia
demuestra que conocer el lenguaje HTML ofrece bastantes
ventajas:
• Seremos capaces de aprovechar todas las características de
este lenguaje, incluso las más nuevas.
• Aunque se use inicialmente un editor WYSWYG tendremos
los conocimientos suficientes para modificar posteriormente el
código que éste ha creado. Así se pueden corregir errores o
incluir etiquetas no soportadas por el editor.
• No dependeremos de la disponibilidad de una herramienta
concreta para poder crear páginas web. Con un simple editor
de textos será suficiente.

14. El principal problema de usar editores conversores y
WYSIWYG es la necesidad de trabajar con dos archivos
fuentes por separado, por un lado el archivo del editor y por
otro el archivo del código HTML una vez generado, lo que
nos complica la vida a la hora de realizar cambios en
nuestro Web. Sin embargo su utilidad es innegable y su
combinación con un buen conocimiento del lenguaje HTML
nos convertirá en unos grandes programadores de páginas
Web capaces de realizar creaciones impactantes
visualmente y de gran calidad técnica.

15. HTML ES UN LENGUAJE DESCRIPTIVO
Probablemente el lector ha usado alguna vez un procesador de
texto (Abiword, MicrosoftWord o KWord) o un programa de
descripción de páginas (QuarkXPress). Con este tipo de
aplicaciones el usuario tiene un control total sobre los
elementos del documento: se le puede decir al programa "pon
este texto con este tamaño", "sitúalo a 1 cm. del borde", "usa
este sangrado para los párrafos", etc... Con HTML el
programador no tiene este tipo de control sobre los elementos
que incluirá en su página.
El objetivo de este lenguaje será simplemente describir cómo
es una página de manera que examinando esa descripción el
navegador del usuario final sea capaz de mostrarlo de la mejor
manera posible. Con HTML podremos indicarle al navegador
que este es un titular, aquí comienza un párrafo, estos son
elementos de una lista, etc. posteriormente el navegador
decidirá como mostrar esos elementos.

16. ¿Por qué funciona así? En un principio esta característica
del HTML puede resultar molesta para el creador de la
página, que no puede saber como será vista su página más
que de una forma aproximada. Sin embargo es fundamental
para conseguir que el World Wide Web pueda ser navegado
con cualquier tipo de ordenador (dicho con otras
palabras, que el WWW sea multiplataforma).
Debemos tener en cuenta que no todos los sistemas
operativos son gráficos, que incluso usando un mismo
sistema operativo existen diferentes resoluciones de
pantalla. Por esta razón el lenguaje necesario para crear
páginas debe ser descriptivo y como consecuencia tras
crear una página el programador debe ver como es
mostrada con varios navegadores distintos como Netscape
Navigator o Microsoft Internet Explorer incluyendo algún
navegador de texto como Lynx.

17. NOTA: Una vez creada una página es recomendable probar
nuestra página, no sólo con varios navegadores, sino
también con varias resoluciones de pantalla distintas como
por ejemplo: 640x480, 800x600 y 1024x768. Si existe la
posibilidad de probarlo además con un navegador
vocal, mucho mejor aún.
Un buen ejemplo de este carácter descriptivo es la definición
de titulares, también llamados encabezados, en HTML.
Vamos a adelantarnos un poco en esta introducción para
mostrar este ejemplo, en él se muestra como poner el titular
de una página:
<h1>Bienvenido a la página de La Super Editorial</h1>

18. Con este código estamos describiendo el texto Bienvenido a
la página de La Super Editorial como el texto de máxima
importancia en nuestra página, es el titular. En los
navegadores más usados como el Netscape Navigator o el
Microsoft Internet Explorer este titular será mostrado como
un texto en negrita y de tamaño grande (el tamaño más
grande posible).
Por esta razón la etiqueta <h1> no dice que el texto que
encierra
debe ser de tal tamaño o si debe ser negrita o no. Esta
etiqueta sólo le dice que este texto es el más importante de
la página, el titular. Sabiendo esto el navegador que funcione
en modo texto puede resaltar dicho titular con los medios de
que dispone, como por ejemplo poniéndolo en mayúsculas o
usando distintos sangrados.

19. LAS BASES DE HTML
Una vez repasadas unas nociones básicas de HTML y de la
programación de páginas Web en general entraremos
de lleno en la programación con este lenguaje. Pronto nos daremos
cuenta de la sencillez de este lenguaje lo que le convierte en un lenguaje
muy fácil de aprender y que nos permitirá crear páginas con mayor
facilidad aún.
Las órdenes de este lenguaje estarán formadas por unos comandos
llamados etiquetas que pueden tener o bien la
siguiente estructura:
<NOMBRE_ETIQUETA>

20. O bien esta otra:
<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>
Como vemos, la primera estructura está formada por una
única instrucción y la segunda por dos: una que marca
el inicio de la etiqueta y otra que marca el final, con texto
entre ambas.
Por ejemplo, para indicarle al navegador que queremos que
pinte una línea horizontal debemos escribir:
<hr>
Así de sencillo. Como vemos, el nombre de la etiqueta
va delimitado por los símbolos menor que (<) y mayor
que (>), todas las instrucciones de HTML deben ir
encerradas entre estos dos símbolos.

21. Pero las etiquetas no se limitan a indicar ordenes tan
sencillas, estas órdenes tienen en ocasiones parámetros.
Por ejemplo la etiqueta <hr> tal y como lo hemos hecho
anteriormente daría lugar a la línea que vemos en la, es decir
le dice al navegador que dibuje una línea horizontal en la
pantalla. Esta línea tiene un grosor predeterminado y un
ancho variable en función del tamaño de la ventana del
navegador.

22. ESTRUCTURA DE UNA PÁGINA
Todo documento HTML está formado por los bloques.
En primer lugar deberemos especificar que el archivo de texto que
estamos escribiendo es un documento HTML,
para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al
principio y al final de la página respectivamente:
<html>
Código de la página
</html>
El código de la página esta formado a su vez por dos grandes
bloques, la cabecera y el cuerpo.

23. La cabecera de la página está delimitada por las
instrucciones de inicio y fin de la etiqueta head. Estas
instrucciones deben estar dentro de la etiqueta HTML de la
siguiente manera:
<html>
<head>
Elementos de la cabecera
</head>
</html>
En la cabecera de la página se introduce toda aquella
información que afectará a toda la página. En un principio
esta información se limitará al título. Este título se indicará
con la etiqueta title usando la siguiente sintaxis:

24. <html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>
El resultado de ver esta página con nuestro navegador es el
que se observa en la figura. Como vemos, el área de la
pantalla donde suele estar la página está todavía vacía, pero
si nos fijamos en la cabecera de la ventana del navegador
vemos que el título a pasado de ser Microsoft Internet
Explorer a "Mi primera página WEB -Microsoft Internet
Explorer". Es decir el título que le demos a nuestra página
con la etiqueta <TITLE> pasará a ser el título de la ventana
del navegador.

25. El título de la página es mostrado en la parte superior de
la ventana del navegador.

26. Además cuando un usuario vea nuestra página y decida
incluirla en su lista de webs preferidos con la opción
agregar a favoritos del menú Favoritos del navegador (en
este caso el explorer) añadirá el nombre que le hemos dado
a nuestra página en dicho menú, tal y como podemos
apreciar en la figura. Aunque el nombre con el que se
almacena un Favorito puede ser cambiado por el usuario, si
hemos puesto un buen título, lo suficientemente
descriptivo a cada una de nuestras páginas le evitaremos
esa molestia.
Cuando los navegantes
incluyan
nuestra página a su menú de
favoritos en su menú
aparecerá el
título que le hayamos dado a
nuestra página con la
etiqueta
<TITLE>

27. Es importante resaltar que nada de lo que se ponga en la cabecera de la
página será mostrado en la zona del navegador dedicada a mostrar el
contenido, es decir, en la zona que vemos en blanco en la figura . Esto
nos induce a pensar que existe otra forma de indicar como será el
contenido de la página, pues así es: el cuerpo es el siguiente gran
bloque de nuestro documento HTML, éste quedará delimitado por la
etiqueta body.
En su interior introduciremos todos aquellos elementos de los que
queremos que conste nuestra página como pueden ser
testo, imágenes, tablas, etc. Conociendo la etiqueta body podemos
ampliar el ejemplo anterior para
que incluya texto.
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo
esta es la primera pagina web que hago, espero
que les guste. Fdo. Jorge
</body>

28. Los encabezados
Usualmente un documento tiene, además de texto llano, una
serie de encabezados o titulares. Para ello el lenguaje HTML
posee una serie de etiquetas que permiten disponer de
titulares de hasta 6 niveles de importancia.
Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>.
La letra "h" al principio del nombre de estas etiquetas
proviene de la abreviatura de la palabra inglesa heading que
significa encabezado. Siguiendo a la hache hay un número
del uno al seis que indica la importancia del titular siendo el
más importante el uno y el menos importante el seis.

29. Distintos tipos de
encabezados vistos con
Microsoft Internet
Explorer
El código usado en este ejemplo es el
siguiente:
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

30. NOTA: Los encabezados empiezan siempre en una línea
nueva y el texto que les sigue comenzará en la línea
siguiente. Además el navegador podrá mostrar un espacio
vertical adicional entre el encabezado y el texto anterior y
posterior.
Hay que destacar que los encabezados de h1 a h4 pueden
ser usados como títulos ya que los navegadores suelen usar
un tamaño de letra mayor que el habitual para mostrarlos. Sin
embargo los encabezados h5 y h6 suelen ser mostrados con
letra más pequeña aún que el texto y por esta razón se usan
como notas a pie de página o comentarios de poca
importancia.

31. El ejemplo mejorado
Ahora que sabemos usar
encabezados los
utilizaremos para mejorar
ligeramente nuestra
página.
Ejemplo de
páginaWeb con dos
tipos de encabezados
y dos párrafos.

32. Conclusión
Ya sabemos mucho sobre la programación de páginas.
Conocemos las principales características del lenguaje
HTML y qué es necesario para crear un Web. Hemos
aprendido además las bases del lenguaje y hemos creado
nuestra primera página de ejemplo, con texto y en
cabezados, y la hemos puesto un título.

33. AGRADECIMIENTOS
Todo comenzó como un sueño las palabras de dos personitas muy importantes en
mi vida lucha por lo que quieres, nunca te rindas, y al mismo tiempo con su apoyo
incondicional soy lo que soy el día de hoy.
A mis papas un excelente ejemplo a seguir y a los cuales les agradezco todo su
apoyo, sabemos que para alcanzar los sueños nos tenemos que alejar de los seres
queridos, pero eso no significa que nos olvidemos de ellos, ustedes conocen mis
metas a realizar y saben que en ellas ustedes están siempre presentes. Uno no
nace sabiendo ser padres pero con el tiempo se va adquiriendo experiencias , y les
puedo asegurar que esa materia de la vida ustedes la aprobaron con un 10.

34. Mama y papa no encuentro las palabras para agradecerles todo lo que han hecho por
mi para superarme, siempre han tenido las palabras que me hagan reflexionar y
valorar lo que realmente es importante en la vida, recuerdo que en este viaje que tuve
que emprender para lograr uno de los tantos sueños que tengo me dijeron que en
esta vida no hay que quejarse, mas bien hay que luchar para lograr nuestros
objetivos, la vida nos pone a prueba y el respaldo de nuestra familia es lo mas
importante y tienes mucha razón quien mejor que la familia para ayudarte a brincar
cada obstáculo que se presente durante el camino .también quiero agradecerle de
todo corazón a el L.I.senen López Osorio y mis hermano Geovanni Vásquez
Vásquez, y José Ranulfo Vásquez Vásquez que siempre me están apoyando y me
han ayudado a salir adelante.

35. BIBLIOGRAFIA
http://www.gnu.org/copyleft/fdl.html
www.microsoft.com/workshop/prog/ie4/directani/directani.html
http://www.microsoft.com/workshop/prog/ie4/directani/directani.html
LIBRO:
GRAN LIBRO COMPETIUM CON HTML
Titulo de la obra original:
HTML kompendium
Copyright:200 by Pearson Education Deutschland GmbH
Coordinador del libro:
José Antonio juncar
Traducción:
Diversos traductores
Revisión Técnica e ilustraciones
DAVID PEREZ QUIROS