Anda di halaman 1dari 8

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO HTML es un acrnimo de HiperText Markup Language que, traducido al espaol, quiere

decir algo as como lenguaje de definicin por marcas para hipertexto, es decir, HTML es un lenguaje que permite definir documentos hipertexto a base de ciertas etiquetas que marcan partes de un texto cualquiera dndoles una estructura y/o jerarqua. Para crear un documento hipertexto para la WWW con este lenguaje slo debemos aadir las etiquetas adecuadas al texto que contiene la informacin. Un documento hipertexto es aquel que, adems de incluir texto e ilustraciones, permite el enlace con otros documentos hipertexto que desarrollan o hacen referencia al mismo tema. 1.1. SINTAXIS DE LAS ETIQUETAS HTML

HTML es un lenguaje basado en etiquetas. Estas etiquetas aportan al texto informacin sobre la forma en que ser mostrado. stas deben seguir unas reglas determinadas, as, se entiende por etiqueta cualquier texto incluido entre los signos: "<" y ">".

La primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los documentos que queramos sean considerados HTML; esta es: <HTML> Inicio de documento hipertexto.

La segunda etiqueta que aprenderemos ser precisamente la ltima que se debe incluir en un documento HTML indicando el final del documento: </HTML> Fin de documento hipertexto.

Como se ve, esta etiqueta es igual a la anterior pero precedida del signo "/", esta ser la tnica general en HTML: casi todas las etiquetas tienen la estructura: <etiqueta> ... </etiqueta>, "marcando" el texto incluido entre ellas. En las etiquetas HTML no afecta el uso de maysculas o minsculas, es indiferente el uso que se haga de ellas. Por otra parte, si la etiqueta (texto introducido entre los signos "<" y ">") no existe ser ignorada (Esto permite que cada visualizador use etiquetas propias y que visualizadores antiguos permitan ver documentos HTML de versiones posteriores). Adems del inicio y fin de documento, cualquier documento HTML se divide en dos partes fundamentales: la cabecera y el cuerpo, separadas por las etiquetas: <HEAD> Inicio de la cabecera

Dentro de la cabecera se incluye el ttulo del documento marcado por las etiquetas: <TITLE> Inicio del ttulo </TITLE> Fin del ttulo </HEAD> Fin de la cabecera

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO <BODY> Inicio del cuerpo. Junto con la etiqueta pueden aparecer ciertos atributos, como:

BACKGROUND="URL" para seleccionar la imagen indicada como fondo de la pgina. BGCOLOR="#rrggbb" para seleccionar el color de fondo en formato RGB 24 bits. Existen unos colores predefinidos: red, blue, navy, green, olive, yellow, magenta, purple, cyan, brown, black, gray, teal, white, .. TEXT="#rrggbb" para seleccionar el color para el texto

Estos se incluyen a continuacin de <BODY y antes de > separados por un espacio.

Dentro del cuerpo se incluye el "grueso" del documento, incluyendo el texto, las imgenes, los enlaces, etc. </BODY> Fin del cuerpo

De esta forma queda definida la estructura bsica de cualquier documento HTML como sigue: <HTML> <HEAD> <TITLE> Ttulo </TITLE> </HEAD> <BODY> </BODY> </HTML>

1.2. ETIQUETAS HTML DE ESTILO DEL TEXTO

Los estilos son aquellos que determinan exactamente como se presentar el texto al usuario (por ejemplo negrita). De todos los estilos existentes en HTML, los ms usuales son: <B> </B> Negrita <I> </I> Cursiva

<U> </U> Subrayado La etiqueta <FONT></FONT> nos permite variar el tamao y color de un texto determinado con los siguientes atributos:

FACE=tipo de letra SIZE=valor COLOR=codigo de color La etiqueta <BR> provoca la ruptura de lnea

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO 1.3. PGINAS WEB CON FRAMES O MARCOS

Los frames es una tcnica para subdividir la pantalla del visor en diferentes ventanas. Cada una de estas ventanas se podr manipular por separado, permitindonos mostrar en cada una de ellas una pgina web diferente. Esto es muy til para, por ejemplo, mostrar permanentemente en una ventana los diferentes contenidos de nuestra pgina, y en otra ventana mostrar el contenido seleccionado. Para definir las diferentes subventanas o frames se utilizan las etiquetas <FRAMESET> </FRAMESET> y <FRAME>.

La etiqueta <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias etiquetas <FRAMESET> anidadas con el objeto de subdividir una divisin. Los parmetros de <FRAMESET> son ROWS y COLS en funcin de si la divisin de la pantalla se realiza por filas (rows) o columnas (cols). Los parmetros rows y cols se acompaan de un grupo de nmeros que indican en puntos o en porcentaje el tamao de cada una de las subventanas.

En caso de utilizar rows los tamaos de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor ser el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc... En el caso de cols los tamaos se aplican de izquierda a derecha.

Por ejemplo: <FRAMESET ROWS="25%,50%,25%"> crea tres subventanas horizontales, la primera ocupar un 20% de la ventana principal, la segunda un 50% y la tercera un 25%.

<FRAMESET COLS="120,*,100"> crea tres subventanas verticales, la primera y la tercera tendrn un "ancho" fijo de 120 y 100 puntos respectivamente. La segunda ocupar el resto de la ventana principal (*).

<FRAMESET COLS= "15%,*" ROWS=75%,*"> En este caso "anidamos" dos etiquetas. La primera divide la ventana principal en dos subventanas verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda etiqueta vuelve a subdividir las subventanas creada anteriormente, pero esta vez en horizontal, la suventanas superiores ocupar un 75% de la ventana principal, y la inferior el resto.

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO La etiqueta <FRAME> indica las propiedades de cada subventana. Es necesario indicar una directiva <FRAME> para cada subventana creada.

FRAME 1 FRAME 2

FRAME 3

FRAME 1

FRAME 2

FRAME 3

FRAME 1

FRAME 2

FRAME 3

FRAME 4

Los parmetros de <FRAME> son : NAME = "nombre : Indica el nombre por el que nos referiremos a esa subventana. SRC = "URL" : la ventana mostrar en principio el contenido del documento HTML que se indique. MARGINWIDTH = valor : Indica el margen izquierdo y derecho de la subventana en puntos. MARGINHEIGHT =valor : Indica el margen superior e inferior de la subventana en puntos. SCROLLING = "yes / no / auto : Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la pgina que se cargue en ella no quepa en los lmites de la subventana. el valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la pgina que no quepa en la subventana no la veremos), y "auto" la muestra solo en caso de que sea necesario para poder ver la pgina. NORESIZE : Si se indica este parmetro, el usuario no podr "redimensionar" las subventanas con el visor. Un usuario que este viendo una pagina con frames puede redimensionarlas seleccionando un borde de la subventana con el cursor y desplazndolo.

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO 1.4. ETIQUETAS HTML PARA CREAR ENLACES

El color de los enlaces queda definido por los siguientes atributos que deben incorporarse a la etiqueta <BODY>: LINK="#rrggbb" para seleccionar el color para el texto que da acceso a un enlace ALINK="#rrggbb" para seleccionar el color para el texto que da acceso a un enlace que se est visitando VLINK="#rrggbb" para seleccionar el color para el texto que da acceso a un enlace visitado

Para la creacin de enlaces hipertexto disponemos de la pareja de etiquetas: <A ...> : Inicio de enlace. </A> : Fin de enlace.

Un enlace quedar en el documento como: <A HREF=URL">texto</A> donde <A HREF="URL"> sealiza la referencia a la direccin URL "texto" aparecer subrayado en el visualizador para poder pulsar sobre l y saltar. Segn el tipo de enlace, la direccin de enlace URL puede ser: (A) ENLACE A UNA DIRECCIN DE INTERNET

<A HREF=http://www.uv.es"> (direccin de Internet) o <A HREF=index.html"> (pgina web del sitio web)

(B) ENLACE A UNA PGINA WEB DEL SITIO WEB, DIRECCIONADA O NO A UN FRAME

Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una pgina Web debemos indicarle al visor en que subventana queremos que se muestre. Por defecto se mostrar en la ventana donde se encuentre el enlace. Para poder escoger la subventana de destino del enlace se aade un nuevo parmetro a la directiva <A HREF= > </A> .

Este parmetro se llama TARGET y puede tener los siguientes valores :

TARGET = "nombre_ventana" : Muestra el Hiperenlace en la ventana cuyo nombre se indica. TARGET = "_blank" : Abre una nueva copia del visor y muestra el Hiperenlace en ella. TARGET = "_top : Suprime todas las subventanas de la pantalla y muestra el Hiperenlace a pantalla completa.

(C) ENLACE A UNA PARTE DE LA PAGINA WEB

Consta de dos partes: <A NAME="nombre"> </A> Que da "nombre" a un punto que podr ser destino de un enlace. <A HREF="URL#nombre">texto</A> Que sealiza el enlace a dicho punto.

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO 1.5. ETIQUETAS HTML DE FORMATO DE PARRAFO

En un documento HTML el texto carece de formato, ser el tamao de la ventana del visualizador y el tipo de letra elegido por el usuario el que determine la disposicin del texto. No obstante, se dispone de ciertas etiquetas HTML que permiten controlar el aspecto del texto. Las etiquetas de formato ms usuales son: (A) ALINEACIN

<LEFT></LEFT> Alineacin solo a la izquierda <CENTER></CENTER> Alineacin centrada del cuerpo <P> Prrafo con alineacin: ALIGN=LEFT (izquierda), CENTER (centrado), RIGHT (derecha), JUSTIFY (justificada) <PRE></PRE>Texto preformateado

(B) LINEA DE SEPARACIN

<HR> Lnea horizontal con atributos: SIZE (tamao vertical), WIDTH (tamao horizontal), ALIGN (alineamiento), NOSHADE (sin sombra)

(C) SANGRADOS

<BLOCKQUOTE> </BLOCKQUOTE> Sangrado a la derecha y a la izquierda

<DIR> </DIR> Lista de tipo directorio que sirve de sangrado a la izquierda (D) LISTAS

<UL> </UL> Lista sin numerar TYPE=DISK,SQUARE <OL> </OL> Lista numerada TYPE=1,a,A,i,I <LI> </LI> Elemento de la lista <DL></DL> Lista de definiciones <DT> Elemento a definir <DD> Definicin

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO 1.6. ETIQUETAS HTML PARA INCLUIR IMGENES

Para insertar una imagen se usar la etiqueta: <IMG SRC="URL">

La etiquetas pueden incluir adems algunos atributos como: ALIGN= : Permite la alineacin del texto con la imagen. Puede ser: TOP (arriba), MIDDLE (en el centro), BOTTOM (abajo), LEFT (izquierda), RIGHT (derecha).

ALT="texto : Permite incluir un texto alternativo a la imagen que se mostrar en los visualizadores en modo texto y mientras se carga la imagen. BORDER=nmero (tamao del border de la imagen) HEIGHT=nmero (tamao vertical) y WIDTH=nmero (tamao horizontal) HSPACE=nmero (margen horizontal al texto) y VSPACE=nmero (margen vertical al texto)

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO 1.7. ETIQUETAS HTML PARA CREAR TABLAS

Una tabla en HTML se encierra entre las etiquetas: <TABLE> y </TABLE>. Tiene los siguientes atributos: BORDER=nmero : Grosor del borde de la tabla BGCOLOR=color color de fondo de la tabla BACKGROUND=URL de la imagen : imagen de fondo de la tabla CELLPADDING=nmero : Espacio entre el border y el contenido de la celda CELLSPACING=nmero : Espacio entre las celdas de la tabla WIDTH=nmero : Anchura de la tabla HEIGHT=nmero : Altura de la tabla

CELLSPACING <TR> CELLPADDING <TD>

</TD>

Dentro de la tabla, cada fila queda delimitada por las etiquetas: <TR> y </TR>. A toda la fila se le puede dar un color con el atributo BGCOLOR=color y una altura con el atributo HEIGHT=nmero

Dentro de cada fila, las celdas (columnas) se delimitan por las etiquetas: <TD> y </TD> , es decir, el contenido de cada celda aparecer delimitado por estas etiquetas.

Los atributos usados en la etiqueta <TD> son: WIDTH=nmero : Ancho de la columna HEIGHT=nmero : Altura de la columna BGCOLOR=color : color de la celda BACKGROUND=imagen : imagen de fondo en la celda VALIGN= : Alineacin vertical de la celda: TOP, MIDDLE, BOTTOM ALIGN= : Alineacin horizontal de la celda: LEFT, CENTER, RIGHT

Anda mungkin juga menyukai