Iniciando con el lenguaje de html

Objetivos:

Al trmino de este manual el alumno aprender lo siguiente:

1) Introduccin a HTML

Este documento es el que, en la World Wide Web (WWW), conocemos como hipertexto. Un documento hipertexto no se compone nicamente de texto, pues tambin contiene relaciones con otros documentos. Con el paso del tiempo este concepto se ampli aun mas haciendo que los enlaces no solo sean de texto, sino que se complementan con informacin en otros formatos, como grficos, sonidos, vdeo, etc. El resultado es un documento que podamos prcticamente llamar multimedia. El concepto bsico es que los documentos tienen referencias a otros documentos, estn donde estn, bien en un equipo local en uno remoto. Estos enlaces pueden ser palabras, frases e incluso imgenes.
2) Qu herramientas necesito?

Prof: Yolfer Rosales C / Web Developer Specialist Email: Yolfer_1@hotmail.com

Pgina 1 de 7

_N_1

Para construir pginas web es indispensable disponer de dos cosas: una herramienta de software para construir las pginas y espacio en un servidor web conectado a Internet para publicarlas. Afortunadamente, ninguno de estos requisitos es difcil de cumplir.

HTML Java Script

Aprender a desarrollar pginas web en HTML es considerablemente diferente de aprender a desarrollar software en otros lenguajes de programacin. El lenguaje HTML es un lenguaje interpretado y permite dar indicaciones precisas al programa cliente, en este caso los "browsers", o ms bien los conocidos navegadores, de cmo debe presentarse el documento en pantalla.

--

Teora

Introduccin a HTML. Conocer las herramientas a utilizar. Estructura de un documento HTML Partes principales y etiquetas relacionadas con sus propiedades

Los dos browsers ms conocidos -Internet Explorer y Netscape Navigator, Safari, Mozila - incluyen en sus ltimas versiones editores para crear pginas web: FrontPage Express y Netscape Composer. En cuanto al espacio necesario para publicar nuestra pgina, actualmente son muchos los sitios que ofrecen servicios de "hosting" (alquiler de espacios en servidores que se comunican con Internet) para que los usuarios puedan guardar y publicar sus pginas en forma gratuita.
Preguntas frecuentes

b) Profe Yolfer, necesito estar conectado a internet para crear mi pgina web?

No. Cuando programas tu pgina web, puedes verla en el navegador sin necesidad de estar conectado a internet.
c)

Profe Yolfer me han dicho que el HTML no sirve que es mejor usar el FronPage o Dreamweaver?

No seas Ingenuo!, en esos programitas que creas tu pgina web como si estuvieras haciendo en Word, pero detrs de ellos se esta escribiendo automticamente el cdigo HTML. Adems esos programitas no son 100% eficientes y siempre tendrs que hacer tus propias modificaciones Y como piensas hacerlo si no sabes el lenguaje? Dime! Habla!...
d) Calma profe Yolfer, Puede responderme otra pregunta?

Queeeeeeeeeeeeeeeeeeeeeee!
e)

HTML Java Script _N_1

Solo necesito un editor de texto de Windows como Bloc de notas u Notepad++ y un navegador como Internet Explorer. En realidad puedes usar cualquier editor de textos y cualquier navegador.

No se altere profe Yolfer, suelte esa silla, solo quiero saber porque se promociona tanto los programas From Page y Dreanweaver?

Prof: Yolfer Rosales C / Web Developer Specialist Email: Yolfer_1@hotmail.com

Pgina 2 de 7

--

a)

Profe Yolfer, qu software necesito para programar en HTML?

Teora

La idea es que tu construyas la forma bsica de tu pgina web en esos programitas y luego lo retoques usando HTML. Personalmente es ms fcil usar Dreanweaver pues es ms fcil aadir elementos de flash, Fireworks, y el ms sencillo y no muy malo es From page. Pero de aso hablaremos otro da.
f) Otra pregunta profe Yolfer, Es fcil aprender Html? 2
g)

Claro que si, pero ya no me hagas perder el tiempo y empecemos el curso.

No quiero preguntar ms profe empecemos de una vez

3) Estructura de un Documento HTML Una pgina web es un archivo de texto, se puede crear con cualquier editor de texto como el Notepad++. El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Funcionan de la siguiente manera: < XXX > Este es el inicio de una etiqueta. </ XXX > Este es el cierre de una etiqueta. Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Por claridad, se usarn en este manual solamente las maysculas. Lo que haya entre ambas etiquetas estar influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML> El documento en s est dividido en dos zonas principales:
1. El encabezado, comprendido entre las etiquetas <HEAD> y </HEAD> 2. El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Prof: Yolfer Rosales C / Web Developer Specialist Email: Yolfer_1@hotmail.com

HTML Java Script _N_1

Pgina 3 de 7

--

Hasta que por fin, empecemos con lo bueno

Teora

Por tanto, la estructura queda de esta manera: <HTML> <HEAD> </title>

2

Etiqueta del inicio del documento. Etiqueta del inicio del encabezamiento.

<title> Titulo Etiqueta de principio y final del titulo. Etiqueta del final del encabezamiento. Etiqueta del documento. inicio de cuerpo del

</ HEAD > < BODY > <p> <hr> <br> Etc </ BODY > <HTML>

Conjunto de etiquetas que conforman el cuerpo de un documento. Etiqueta del documento. fin del cuerpo del

Etiqueta de fin de documento.

4)

Descripcin de las partes principales de un documento:

<HEAD>

CABECERA DEL DOCUMENTO

Esta cabecera contiene esencialmente informacin del documento. Entre esta directiva (Etiqueta) podremos poner otras directivas que a continuacin explico:

<META>

<HEAD> <TITLE>Head </TITLE>

Prof: Yolfer Rosales C / Web Developer Specialist Email: Yolfer_1@hotmail.com

de

un

documento

Pgina 4 de 7

_N_1

Se usa para incluir algunas Propiedades que permiten actualizar la pgina dentro de un tiempo determinado y tambin para hacer referencia la descripcin de la pgina Web, cabe resaltar que esta etiqueta no tiene sierre (Etiqueta abierta). Ejemplo:

HTML Java Script

--

Teora

<META CONTENT="10"> </HEAD> <TITLE>

HTTP-EQUIV="Refresh"

Esta directiva nos da la opcin de darle un ttulo al documento, y mejor an, permite visualizarlo en el visualizador de la barra del navegador: <HTML> <HEAD>
<TITLE> Servicio de Internet Virtual </TITLE>

</HEAD> ...

<BODY> CUERPO DEL DOCUMENTO

En el cuerpo del documento se encontrarn todas las directivas (Etiquetas) HTML as como el texto, las imgenes, sonidos, tablas, listas, etc. Como descripcin grfica, podremos decir que todo lo que aparezca entre las directivas <BODY>. . . </BODY> ser visualizado de una u otra manera en la pantalla del navegador. Propiedades de la etiqueta <BODY>: BACKGROUND ="..." BGCOLOR="... " TEXT="..." LINK="..." VLINK="..." Este atributo define un grfico en formato .jpg o .gif que nos servir de fondo para la pgina de nuestro documento. Este atributo define el color que aparecer de fondo en nuestra pgina. Nos permite modificar el color del TEXTO general que aparecer en nuestro documento. Especifica el color que va a tener cada uno de los links.... Por defecto el color ser AZUL. VLink: especifica el color de los links visitados... Por defecto el color ser VIOLETA.

HTML Java Script _N_1

Prof: Yolfer Rosales C / Web Developer Specialist Email: Yolfer_1@hotmail.com

Pgina 5 de 7

--

Teora

ALINK="..."

Especifica el color del link cuando el puntero est posicionado sobre el link.. Por defecto el color ser ROJO.

5)

Etiquetas Bsicas para el cuerpo del documento

A)

Encabezamientos.- Se utiliza para escribir ttulos, sub ttulos etc, El titulo ms grande es<H1> y el mas pequeo <H6>

<H1>Encabezado H1<\H1> <H3>Encabezado H3<\H3> <H6>Encabezado H6<\H6>

B)

Encabezado H1
Encabezado H3
Encabezado H6

Prrafos y salto de lnea

<P>texto

Salta al siguiente prrafo o salta dos lneas, Cuenta con una propiedad en especial <Align=Valor> Entre los valores podemos encontrar: <p <p

Alinea a la izquierda. Ejemplo: align=left> Right Alinea a la derecha. Ejemplo: align=Right> Center Alinea al centro. Ejemplo: <p align=Center>
Left

Nota: Cuando se utiliza una propiedad se tiene que cerrar la etiqueta </P>

HTML Java Script _N_1

<BR>texto

Salta a la siguiente lnea.

Prof: Yolfer Rosales C / Web Developer Specialist Email: Yolfer_1@hotmail.com

Pgina 6 de 7

--

Ejemplo

Resultado

Teora

A continuacin damos una lista de las etiquetas (tags) bsicas, sin los atributos que pueden incluirse en ellas y que se describirn cuando se haga la definicin de la siguiente etiqueta.

<BLOCKQUOTE> texto </BLOCKQUOTE>

Esta etiqueta incluye citas en un bloque separado de la pantalla.

Centrado de texto

<CENTER>texto, imgenes</CENTER>

Caracterstica del texto

ETIQUETAS <B> texto </B> <I> texto </I> <U> texto </U> <s> texto </s> <TT> texto </TT>   DESCRIPCIN El texto entre estas dos etiquetas aparecer en negrita. El resultado de esta etiqueta produce un texto en itlica. Se subraya el texto entre las dos tags. Tiene como caracterstica tachar el texto

Esta etiqueta hace que el texto se vea en formato teletipo. Texto Establece un Sub ndice al texto. Ejemplo: H2O Texto Establece un Sper ndice al texto. Ejemplo: 52

Bueno espero que haya sido de utilidad este material nos vemos hasta la prxima entrega

HTML Java Script _N_1

Prof: Yolfer Rosales C / Web Developer Specialist Email: Yolfer_1@hotmail.com

Pgina 7 de 7

--

Teora

Centra todo lo que est dentro de ella, independientemente que sea texto imgenes.