I.E.P.

Corazn de Jess UGEL - 06

El lenguaje HTML

Tabla de contenido
Introduccin ............................................................................................................................. 3 Qu es HTML? ..................................................................................................................... 3 Reglas de formato ................................................................................................................. 3 Estructura de un documento HTML ....................................................................................... 5 Nuestra primera pgina HTML .............................................................................................. 5 Forma del URL .......................................................................................................................... 7 Localizando un hypertexto (http: Hyper Text Transport Protocol).......................................... 7 Localizacin de un fichero FTP (ftp: File Transfer Protocol) .................................................... 7 Cabecera................................................................................................................................... 9 Ttulo del documento ............................................................................................................ 9 Indicador de refresco del documento .................................................................................... 9 Indicador de la URL base del documento ............................................................................. 10

Grado: Pre

Pgina 1

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

TEMA 1 Introduccin a HTML

Grado: Pre

Pgina 2

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Introduccin
Qu es HTML?
HTML es la abreviatura de HyperText Markup Language, y es el lenguaje que todos los programas navegadores usan para presentar informacin en la World Wide Web (WWW). Este es un lenguaje muy sencillo que se basa en el uso de etiquetas, consistentes en un texto ASCII encerrado dentro de un par de parntesis angulares(<..>). El texto incluido dentro de los parntesis nos dar una explicacin de la utilidad de la etiqueta. As por ejemplo la etiqueta <TABLE> nos permitir definir una tabla. Las etiquetas podrn incluir una serie de atributos o parmetros, en su mayora opcionales, que nos permitirn definir diferentes posibilidades o caractersticas de la misma. Estos atributos quedarn definidos por su nombre (que ser explicativo de su utilidad) y el valor que toman separados por un signo de igual. En el caso de que el valor que tome el atributo tenga ms de una palabra deber expresarse entre comillas, en caso contrario no ser necesario. As por ejemplo la etiqueta <TABLE border=2> nos permitir definir una tabla con borde de tamao 2. Entre otras cosas, el manejo de estas etiquetas nos permitir: - Definir la estructura lgica del documento HTML. - Aplicar distintos estilos al texto (negrita, cursiva, etc.) - La inclusin de hiperenlaces, que nos permitirn acceder a otros documentos relacionados con el actual. - La inclusin de imgenes y ficheros multimedia (grficos, vdeo, audio). Qu vamos a necesitar para crear un documento HTML? - Un procesador de textos para escribir y editar el cdigo HTML. Este podr ser cualquiera que no formatee el texto, ya que el leguaje HTML est basado en el cdigo ASCCI. Si usamos un procesador como el Word, tendremos que guardar el documento como slo texto. - Un navegador Web como Internet Explorer, Mozilla Firefox, Google Chrome, etc., el cual se encargar de interpretar el cdigo HTML de nuestro documento y mostrrnoslo en todo su esplendor. La secuencia de trabajo para crear nuestro documento es: 1. Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos, a excepcin de la extensin, que deber ser necesariamente .htm .html. 2. Para visualizar nuestro documento HTML abriremos el documento con el programa navegador.

Reglas de formato
Todos los navegadores usan unas reglas bsicas para poder mostrar una pgina web con un buen formato: - El espacio en blanco es ignorado. Ya que un documento HTML puede estar en cualquier tipo de fuente y adems la ventana del navegador puede ser de cualquier tamao. - Las etiquetas pueden ser escritas en maysculas o en minsculas. En todo caso se aconseja su escritura en maysculas para poder distinguirlas del texto normal.

Grado: Pre

Pgina 3

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Existe normalmente una etiqueta de inicio y otra de fin. La etiqueta de fin contendr el mismo texto que la de inicio aadindole al principio una barra inclinada /. La etiqueta afectar por tanto a todo lo que est incluido entre las etiquetas de inicio y fin. No obstante, existen algunas que no necesitan cierre, ya que en estas etiquetas se presupone su final, como por ejemplo; <P> prrafo, <BR> salto de lnea <IMG> inclusin de una imagen.

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Estructura de un documento HTML

La estructura bsica de un documento HTML es la siguiente:

Ninguno de estos elementos es obligatorio, pudiendo crear documentos HTML sin incluir estas etiquetas de identificacin. No obstante es altamente recomendable la construccin de pginas HTML siguiendo esta estructura, para una buena estructuracin y legibilidad del cdigo.

Nuestra primera pgina HTML

Una vez que conocemos la estructura bsica de un documento HTML, vamos a crear una pgina HTML muy sencillita. 1. Lo primero ser abrir el procesador de textos que hayamos elegido y copiar:

2.

De la siguiente forma:

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

3.

Luego necesitamos guardar el documento de esta forma: Archivo Guardar como

4.

En nombre, ingresar el nombre que queramos (en este caso MiPagina) seguido de la extensin .html lo que indicar a nuestro navegador que es una pgina web y no cualquier archivo de texto u otro tipo.

5.

Aqu comprobamos que el navegador ya lo reconoci como una pgina web (por la extensin .html) y por defecto asigna el cono distintivo del navegador que estemos usando: Si es Google Chrome ser , si es Mozilla Firefox , y si es Internet Explorer

6.

Ahora slo nos basta ejecutar nuestra pgina web inicial haciendo doble click en el archivo MiPagina

Si hemos obtenido esto, pues ya tenemos nuestra primera pgina web.

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Forma del URL

El URL (Uniform Resource Locator) nos van a permitir localizar y acceder a cualquier recurso de la red desde nuestro programa navegador. A travs de los URL podremos referenciar cualquier fichero que deseemos incluir en nuestro documento HTML. Cada elemento de Internet vendr definido por su URL correspondiente, independientemente del tipo de servidor en el que se encuentre. La forma general del URL es: Tipo de servicio: //maquina.dominio:PUERTO/ CAMINO/archivo El Tipo de servicio, como su propio nombre indica, hace referencia a alguno de los servicios de Internet. El servicio correspondiente al WWW es http (HiperText Transport Protocol), protocolo para la transmisin de hipertexto. Donde cualquier referencia a un documento HTML debera comenzar por http:// otros servicios son: ftp, telnet, mailto, etc. La maquina.dominio indica el nombre del servidor en que se encuentra el documento al que estamos haciendo referencia, junto con el dominio al que pertenece dicho servidor. El PUERTO es opcional, y lo normal es no ponerlo, indicndose slo en el caso de que el servidor utilice un puerto distinto al puerto por defecto. El CAMINO indica la ruta de directorios que hay que seguir para encontrar el documento que estamos referenciando. Finalmente especificaremos el nombre del archivo en que est guardado el documento en cuestin, si no indicamos uno, accederemos al archivo por defecto. (En el caso del servicio http este archivo por defecto suele ser default.htm default.html)

Localizando un hypertexto (http: Hyper Text Transport Protocol)

Sintaxis: http://maquina.dominio:puerto/camino/archivo

Ejemplo 1: http://www.facebook.com En este ejemplo estamos indicando el servicio al que estamos accediendo (http), la mquina (facebook) y el dominio (.com) tomndose el resto de parmetros por defecto, de forma que accederemos al directorio raz del servidor y al documento por defecto de ese directorio, en este caso estamos accediendo a la pgina de portada de Facebook. Ejemplo 2: www.ritmoromantica.com/playerritmo/player_ritmo.html Con esta URL estamos accediendo al fichero player_ritmo.html que se encuentra en el directorio playerritmo del servidor www.ritmoromantica.com.

Localizacin de un fichero FTP (ftp: File Transfer Protocol)

Sintaxis: ftp://maquina.dominio:puerto/camino/archivo

Ejemplo: ftp://ftp.jet.es/pub/ftp/ En este caso, estamos accediendo al servicio ftp (protocolo de transferencia de archivos), ftp.jet.es. En este caso no estamos indicando ningn archivo, con lo que se referenciar un ndice con los contenidos del directorio: /pub/ftp/.

Grado: Pre

Pgina 7

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

TEMA 2 Cabecera y cuerpo de HTML

Grado: Pre Pgina 8

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Cabecera
Cabecera del documento HTML <HEAD> </HEAD> En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento, como por ejemplo el ttulo de la pgina que aparecer en la parte superior de la ventana del navegador. Las etiquetas <HEAD> y </HEAD> son las que van a delimitar la cabecera de nuestro documento. Todas las etiquetas de la cabecera son opcionales, aunque se recomienda incluir en todos nuestros documentos la etiqueta <TITLE> correspondiente al ttulo del documento. A continuacin vamos a tratar cada uno de los posibles componentes de la cabecera por separado.

Ttulo del documento

<TITLE> escribir aqu el ttulo de tu pgina web </TITLE> El ttulo de nuestro documento viene especificado por las etiquetas: <TITLE> y </TITLE> y como ya hemos mencionado, este ttulo es el que aparecer en la ventana de nuestro navegador. Lo normal y recomendable es que el ttulo guarde relacin con el contenido de nuestro documento, ya que por ejemplo es utilizado por algunos servidores de bsqueda para poder intuir el contenido de nuestro documento. <TITLE> Mi primera pgina Web </TITLE>

Indicador de refresco del documento

<META http-equiv=refresh content=# de segundos; url=nueva direccin> Esta etiqueta sirve para indicar un documento que deber sustituir al actual transcurrido un nmero determinado de segundos. Una posible utilidad de esta etiqueta podra ser para visualizar documentos de forma secuencial, de forma que se empieza por un documento y se pasa al siguiente transcurrido un perodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accin. <META http-equiv=refresh content=10; url=www.facebook.com> Nota: La URL (www.facebook.com) puede tambin buscar una pgina dentro de la carpeta donde nos encontramos, de la forma siguiente

<META http-equiv=refresh content=10; url=facebook.html>

Grado: Pre

Pgina 9

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Indicador de la URL base del documento

<BASE href=URL> Con esta etiqueta indicamos la localizacin de los ficheros a los que se hace referencia en nuestra pgina Web. Si no incluimos esta etiqueta el navegador entender que dichos ficheros se encuentran en el mismo lugar donde reside nuestra pgina Web.

<BASE href=http://www.CorazonDeJesus.edu.pe/Documentos/> Si especificamos como URL base de nuestro HTML la indicada en este ejemplo y hacemos referencia en nuestra pgina a un fichero llamado Pre.html, se entender que la localizacin del fichero es http://www.CorazonDeJesus.edu.pe/Documentos/Pre.html.

Cuerpo
Cuerpo del documento HTML <BODY> </BODY> En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en s de nuestra pgina Web: textos, imgenes, enlaces a otras pginas, etc. Las etiquetas <BODY> y </BODY> son las que van a delimitar el cuerpo de nuestro documento. Esta posee una serie de argumentos que nos van a permitir variar las caractersticas del documento en su conjunto, como por ejemplo el color del texto o del color de fondo de nuestra pgina web. Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML. Estos se pueden especificar por su nombre (nombre) o por su cdigo de color, que es un nmero compuesto de tres pares de cifras hexadecimales que nos indican la proporcin de los colores primarios (Rojo, Verde y Azul/Red, Green, Blue) que forman el color deseado (#RGB).

Grado: Pre

Pgina 10

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

La etiqueta <BODY> presenta una serie de atributos que van a afectar a todo el documento en su conjunto. Estos atributos nos van a permitir definir los colores del texto, del fondo, y de los hiperenlaces del documento. Incluso nos permitirn insertar una imagen de fondo en nuestra pgina. <BODY background=URL bgcolor=#RGB/nombre text=#RGB/nombre link=#RGB/nombre vlink=#RGB/nombre > background=URL: Nos va a permitir mostrar una imagen como fondo de nuestro documento HTML. El camino a esta imagen vendr especificado por la URL que definamos. Si la imagen no rellena todo el fondo del documento, sta ser reproducida tantas veces como sea necesario hasta completar todo el fondo.

<BODY background=fondo.(gif/png/jpg)> bgcolor=#RGB nombre (bgcolor: Background Color): Nos va a permitir definir un color para el fondo de nuestro documento. Este atributo ser ignorado si previamente hemos utilizado el atributo background.

<BODY bgcolor=#FFFFFF/Black> text=#RGB nombre: Nos permitir definir un color para el texto de nuestro documento. Por defecto es negro.

<BODY text=#FFFFFF/Black> Comprobamos creando un nuevo documento html con el formato siguiente: <BODY bgcolor=#FFFFFF text=silver> link=#RGB nombre: Indica el color que tendrn los hiperenlaces que no han sido accedidos. Por defecto es azul. Como todava no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para ms adelante. vlink=#RGB nombre (vlink: Visited Links) Indica el color de los hiperenlaces que ya han sido accedidos. Por defecto es prpura.

Grado: Pre

Pgina 12

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Caracteres especiales
Hasta ahora hemos escrito algunos ejemplos de cdigo HTML, pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales. Una de estas limitaciones es, por ejemplo, el uso de los caracteres < y >, que como ya sabemos indican el inicio y fin de una etiqueta HTML. Pues bien, si quisiramos escribir estos caracteres como parte normal de un texto, el navegador no sabra si se trata de texto normal o del comienzo y final de una etiqueta, o sea, que se hara un lo. Como todo tiene solucin, existen unos cdigos para poder escribir estos caracteres y otros relacionados con las etiquetas.

Para las letras especficas del idioma castellano: las vocales acentuadas, la , la y los signos y ,existen los siguientes cdigos:

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Para los navegadores actuales, podemos escribir nuestro cdigo HTML de manera directa sin tener en cuenta estos cdigos, pero nunca podemos asegurar que las personas que accedan a nuestras pginas con otros navegadores puedan leerlas correctamente. As que los ms adecuado es el empleo de los mismos. Otros smbolos especiales

Aplicacin: Cmo conseguiras crear este texto? La inspiracin existe, pero tiene que encontrarse trabajando. Pablo Ruz Picasso. Comentarios en HTML: Para la inclusin de comentarios en nuestra pgina HTML, podemos usar la etiqueta: <!aqu va el comentario respectivo --> Estos comentarios nos podrn servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensin del cdigo.

Espaciado y saltos de lnea

En HTML slo se admite un nico espacio en blanco separando cualquier elemento o texto, el resto de espacios sern ignorados por el navegador, al igual que las tabulaciones, retornos de carro, etc.

Pero podremos dar el formato que deseemos a nuestras pginas con el empleo de los siguientes elementos del lenguaje HTML:

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Inclusin de espacios en blanco: &nbsp; (New Blank SPace)

Nos permitir la inclusin de ms de un espacio en blanco entre dos textos consecutivos, de forma que estos espacios se muestren de forma efectiva en el navegador. Tendremos que incluir tantas expresiones &nbsp; como espacios en blanco se deseen incluir.

Salto de lnea: <BR> (BR: Break)

Nos permite dar un salto a la lnea siguiente en el punto donde la etiqueta sea insertada.

Cambio de prrafo: <P> (P: Paragraph)

Permite definir un prrafo, introduciendo normalmente un espacio de separacin de dos lneas con el texto siguiente al punto donde hayamos insertado la etiqueta <P>.

La etiqueta de fin prrafo </P> es opcional, no siendo necesario incluirla. Aunque siempre es recomendable delimitar claramente el inicio y final de un prrafo. Adems, cuando usemos esta etiqueta como cerrada <P>..... </P>, tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el prrafo. El formato sera el siguiente: <P align=left/right/center/justify>Texto contenido en el prrafo </P>

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Lnea Horizontal: <HR> (HR: Horizontal Rule)

Nos permite insertar una lnea horizontal, cuyo tamao podremos determinar a travs de sus atributos. Si no especificamos ningn atributo dibujar una lnea que ocupe el ancho de la pantalla del navegador. Su utilidad es la de permitirnos dividir nuestra pgina en distintas secciones. No ser necesaria la etiqueta de fin </HR>. El formato de la etiqueta con sus posibles atributos es: <HR align=left/right/center noshade size=n width=n/n% > align=left/right/center o Permite establecer la alineacin de la lnea a la izquierda, a la derecha o centrarla. noshade o No muestra la sombra de la lnea, evitando el efecto de tres dimensiones. size=n o Indica el grosor de la lnea en pixeles. width=n/n% o Especificar el ancho de la lnea, este se podr especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n%).

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

TEMA 3 Elementos

Grado: Pre

Pgina 17

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Cabeceras y atributos de texto

H: Heading <H1>...<H6>
En un documento HTML podemos incluir seis tipos distintos de cabeceras, que van a constituir normalmente el ttulo y los distintos sub-apartados que forman el documento, aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto. Estas cabeceras son definidas por las etiquetas <H1><H2><H3><H4><H5> y <H6>. El texto que componga cada cabecera deber estar incluido entre las etiquetas de inicio (<H#>) y fin (</H#>) correspondiente. La cabecera <H1>ser la que muestre el texto de mayor tamao, este tamao ir disminuyendo hasta llegar a la cabecera </H6>. Para alinear las cabeceras utilizamos el atributo align. El formato sera: <H# align=center>. Comprobar si los textos desde H1 hasta H6 varan en cuanto a tamao.

Atributos del texto

Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita, cursiva, subrayado, etc.), al igual que hacemos cuando trabajamos con el procesador de textos en la edicin de nuestros documentos. Para aplicar estos atributos disponemos de distintas etiquetas, que aplicarn su efecto al texto incluido entre sus indicadores de inicio y fin.

Donde: - B (Bold) - S (Strike)

- I (Inline) - Sup (SuperScript)

- TT (TeleType) - Sub (SubScript)

- U (Underline)

Anotacin: Algunas de estas etiquetas no son reconocidas por determinados navegadores.

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Font: Fuente <FONT> </FONT> Si queremos aplicar efectos ms espectaculares a nuestro documento HTML debemos recurrir a esta etiqueta que nos permite hacer diversificar por medio de sus atributos size, color y face: <FONT size=n/ (+/-n) color=#RGB/nombre face=nombre de font > Size: El atributo size nos permite especificar un tamao determinado para la fuente del texto incluido entre las etiquetas de inicio y fin, el cual puede estar entre 1 y 7. El texto de tamao normal equivale a la fuente de tamao 3. Por tanto, si especificamos size=+2, el tamao de la fuente ser 5. Y si especificamos size= -1, el tamao ser 2.

color=#RGB nombre Nos permite definir el color que tendr el texto incluido entre las etiquetas.

face="nombre de fuente" Permite escribir texto con el tipo de letra que le especifiquemos. En el caso que el tipo de letra especificado no est cargada en el ordenador que lee la pgina, se usar la fuente por defecto del navegador.

I.E.P. Corazn de Jess UGEL - 06

El lenguaje HTML

Listas -

No numeradas

<UL> {UL: Unordered List}

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado, precedidos de una marca o vieta que nosotros mismos podemos definir. Para la definicin de los lmites de la lista utilizaremos la etiqueta <UL>.... </UL>, y para determinar cada uno de los elementos que la componen usaremos la etiqueta <LI>. El formato es el siguiente: <UL type="disk" "circle" "square"> <LH>Ttulo de la lista</LH> LH (List Head) <LI>Elemento A LI (List Item) <LI>Elemento B .... <LI>Elemento Z </UL> Ejemplo: Archivo Listas.html

Con lo cual obtenemos: