Introd A HTML

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

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

 Cursiva
 Subrayado

La etiqueta 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 provoca la ruptura de lnea

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.

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 1
FRAME 2
FRAME 3
FRAME 4
FRAME 3
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.

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.

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

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)

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

Introd A HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introd A HTML

Cargado por

Copyright:

Formatos disponibles

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO

BACKGROUND="URL" para seleccionar la imagen indicada como fondo de la pgina.

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

1.2. ETIQUETAS HTML DE ESTILO DEL TEXTO

<U> </U> Subrayado

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO

Los parmetros de <FRAME> son :

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO

Para la creacin de enlaces hipertexto disponemos de la pareja de etiquetas:

Un enlace quedar en el documento como:

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

TARGET = "nombre_ventana" : Muestra el Hiperenlace en la ventana cuyo nombre se indica.

(C) ENLACE A UNA PARTE DE LA PAGINA WEB

Consta de dos partes:

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO

<LEFT></LEFT> Alineacin solo a la izquierda

(B) LINEA DE SEPARACIN

<HR> Lnea horizontal con atributos:

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

<DIR> </DIR> Lista de tipo directorio que sirve de sangrado a la izquierda

<UL> </UL> Lista sin numerar TYPE=DISK,SQUARE

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO

Para insertar una imagen se usar la etiqueta:

La etiquetas pueden incluir adems algunos atributos como:

CURSO BSICO DE HTML - TECNOLOGIAS DE LA INFORMACION EN TURISMO

Los atributos usados en la etiqueta <TD> son:

También podría gustarte