Inicio:
Abrir Block de notas (o algún editor de texto)
Código Básico de una página
Estructura de un documento HTML
La estructura básica de un documento HTML es la siguiente:
<TITLE> Indica el inicio del documento
<HEAD> Indica el inicio de la cabecera
Inicio del título del documento
</TITLE> Final del título del documento
</HEAD> Final de la cabecera
Inicio del cuerpo del documento
Instrucciones HTML
Final del cuerpo del documento
Final del documento
Ninguno de estos elementos es obligatorio, pudiendo crear documentos HTML sin incluir estas etiquetas de identificación. No obstante es altamente recomendable la construcción de páginas HTML siguiendo esta estructura, para una buena estructuración y legibilidad del código.
Nuestra primera página HTML
Una vez que conocemos la estructura básica de un documento HTML, vamos a crear una página HTML muy sencillita.
1. Lo primero será abrir el procesador de textos que hayamos elegido y copiar el Código fuente
2.
3.
4. Mi primera página HTML
5.
6.
7. Esta es mi primera página HTML
8.
2. Una vez tecleado el código, guardamos el documento como Pagina1.htm, y procedemos a abrirlo con el navegador correspondiente.
Cabecera
Cabecera del documento HTML <HEAD>……
En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento, como por ejemplo el título de la página 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 la etiquetas de la cabecera son opcionales, aunque se recomienda incluir en todos nuestros documentos la etiqueta correspondiente al título del documento.
A continuación vamos a tratar cada uno de los posibles componentes
de la cabecera por separado.
Título del documento
…………..
El título de nuestro documento viene especificado por las etiquetas:
y
y, como ya hemos mencionado, este título es el que aparecerá en
la ventana de nuestro programa navegador. Lo normal y recomendable es que el
título guarde relación con el contenido de nuestro documento,
ya que por ejemplo es utilizado por algunos servidores de búsqueda para
poder intuir el contenido de nuestro documento.
Cuerpo
Cuerpo del documento HTML: ……
En el cuerpo de un documento HTML es donde incluiremos las distintas
instrucciones del lenguaje junto con el contenido en sí de nuestra página
Web: textos, imágenes, enlaces a otras páginas,
etc..
Las etiquetas y son las que van a delimitar el cuerpo de nuestro
documento.
Esta posee una serie de argumentos que nos van a permitir variar las
características del documento en su conjunto, como por ejemplo el color
del texto o del color de fondo de nuestra página 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 (name) o por su código de color, que es un número
compuesto de tres pares de cifras hexadecimales que nos indican la proporción
de los colores primarios (rojo, verde y azul) que forman el color deseado (#rrggbb):
¡Colores!
Los atributos que toman como valor un color se puede definir de dos
maneras, mediante una numeración hexadecimal o de manera literal.
Numeración Hexadecimal:
La numeración hexadecimal consta de 16 dígitos frente
a los 10 de la decimal habitual. Van en este orden (de menor a mayor):
0 1 2 3 4 5 6 7 8 9 A B C D E F
Para indicar un color con este método lo haremos
de la siguiente manera:
"#RRGGBB"
Donde RR toma un valor para el color Rojo, GG toma un valor para
el color Verde y BB toma un valor para el color Azul. Así por ejemplo
para conseguir el color rojo pondriamos el máximo valor (FF) en RR y
el mínimo (00) en los demás: "#FF0000". Combinando estos
números se sacan el resto de colores.
Aqui tenemos una tabla con colores usando la numeración hexadecimal:
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Literales: También se pueden definir algunos colores Aqui tenemos una lista con colores literales. Aliceblue | Antiquewhite | Aqua | Aquamarine | ||
Azure | Beige | Bisque | Black | ||
Blanchedalmond | Blue | Blueviolet | Brown | ||
Burlywood | Cadetblue | Chartreuse | Chocolate | ||
Coral | Cornflowerblue | Cornsilk | Crimson | ||
Cyan | Darkblue | Darkcyan | Darkgoldenrod | ||
Darkgray | Darkgreen | Darkkhaki | Darkmagenta | ||
Darkolivegreen | Darkorange | Darkorchild | Darkred | ||
Darksalmon | Darkseagreen | Darkslateblue | Darkslategray | ||
Darkturquoise | Darkviolet | Deeppink | Deepskyblue | ||
Dimgray | Dodgerblue | Firebrick | Floralwhite | ||
Forestgreen | Fuchsia | Gainsboro | Ghostwhite | ||
Gold | Goldenrod | Gray | Green | ||
Greenyellow | Honeydew | Hotpink | Indianred | ||
Indigo | Ivory | Khaki | Lavender | ||
Lavenderblush | Lawngreen | Lemonchiffon | Lightblue | ||
Lightcoral | Lightcyan | Lightgoldenrodyellow | Lightgreen | ||
Lightgrey | Lightpink | Lightsalmon | Lightseagreen | ||
Lightskyblue | Lightslategray | Lightsteelblue | Lightyellow | ||
Lime | Limegreen | Linen | Magenta | ||
Maroon | Mediumblue | Mediumorchild | Mediumpurple | ||
Mediumseagreen | Mediumslateblue | Mediumspringgreen | Mediumturquoise | ||
Mediumvioletred | Midnightblue | Mintcream | Mistyrose | ||
Moccasin | Navajowhite | Navy | Oldlace | ||
Olive | Olivedrab | Orange | Orangered | ||
Orchild | Palegoldenrod | Palegreen | Paleturquoise | ||
Palevioletred | Papayawhip | Peachpuff | Peru | ||
Pink | Plum | Powderblue | Purple | ||
Red | Rosybrown | Royalblue | Saddlebrown | ||
Salmon | Sandybrown | Seagreen | Seashell | ||
Sienna | Silver | Skyblue | Slateblue | ||
Slategray | Snow | Springgreen | Steelblue | ||
Tan | Teal | Thistle | Tomato | ||
Turquoise | Violet | Wheat | White | ||
Whitesmoke | Yellow | Yellowgreen | |||
| |||||
La etiqueta presenta una serie de atributos que van a afectar a link="name" vlink="name" > background="URL". Nos va a permitir mostrar una imagen Si la imagen no rellena todo el fondo del documento, ésta Si insertas el Código fuente en el documento HTML que creamos |
|
| |||
bgcolor=#rrggbb ó name {bgcolor: Background color para el fondo de nuestro documento. Este atributo text=#rrggbb ó name. Nos permitirá definir un color link=#rrggbb ó name. Indica el color que tendrán vlink=#rrggbb ó name {vlink: Visited Links}. Indica ya han sido accedidos. Por defecto es púrpura. Salto de línea: Nos permite dar un salto a la línea siguiente en el punto Cambio de párrafo: {P: Paragraph}
Permite definir un párrafo, introduciendo normalmente un espacio . La etiqueta de fin párrafo es opcional, no siendo necesario incluirla. Aunque siempre es recomendable ….. , tenemos la posibilidad de incluirle el atributo align el cual indica al Texto contenido en el párrafo Línea Horizontal: {HR: Horizontal Rule} Nos permite insertar una línea horizontal, cuyo tamaño El formato de la etiqueta con sus posibles atributos • align= left / right / center. Permite establecer la • noshade. No muestra la sombra de la línea, • size=n. Indica el grosor de la línea en pixels. • width=n ó n%. Especificará el ancho Cabeceras: {H: Heading} En un documento HTML podemos incluir seis tipos distintos de cabeceras, y . El texto que componga cada cabecera deberá estar incluido entre será la que muestre el texto de mayor tamaño, este
Atributos del texto Al texto de nuestro documento HTML le podemos aplicar distintos |
|
Si queremos aplicar efectos más espectaculares a nuestro documento
HTML, debemos variar el tamaño, el color y el tipo de letra del texto.
La etiqueta que nos permite todo esto es:
…, por medio de sus atributos size, color y
face:
• size="n" ó "+/- n". El atributo
size nos permite especificar un tamaño 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 tamaño normal equivale a
la fuente de tamaño 3 (fuente base). Por tanto, si especificamos size=+2,
el tamaño de la fuente será 5. Y si especificamos size= -1, el
tamaño será 2.
color="#rrggbb ó name". Nos va a permitir
definir el color que tendrá el texto
incluido entre las etiquetas.
face="nombre de font". Nos va a permitir escribir texto con
el tipo de letra que le especifiquemos. En el caso de que el tipo de letra que
le hayamos especificado no esté cargada en el ordenador que lee la página,
se usará el font por defecto del navegador.
Atributo | Significado | Posibles valores | |||||
face | fuente | nombre de la fuente, o fuentes | |||||
color | color del texto | número hexadecimal o texto predefinido | |||||
size | tamaño del texto | valores del 1 al 7, siendo por defecto el 3,o desplazamiento |
Insertando imágenes
En este apartado veremos como insertar imagenes en nuestros documentos
web. Las imágenes que se utilizan generalmente en este tipo de documentos
web son archivos de imagen comprimidos para que la carga de la página
sea más rápida, nosotros en este manual utilizaremos los archivos
GIF y los JPG por ser los más utilizados.
NOTA IMPORTANTE: Prestad mucha atención a que las imagenes ocupen
lo menos posible, especialmente las grandes, ya que debemos lograr que la página
cargue lo antes posible.
Para insertar una imagen debemos utilizar el comando image
source.
<IMG src="imagen.gif">
Como utilizar esta etiqueta:
Esta etiqueta de <IMG> no tiene etiqueta de cierre
ya que la imágen a insertar viene especificada en el atributo src
(source).En el atributo src pondremos el nombre del archivo con su extensión
entre comillas respetando siempre las mayúsculas y minúsculas
de dicho nombre.Como ya hemos dicho antes hay que intentar que las imagenes
insertadas ocupen lo mínimo posible en memoria.Una de las cosas más importantes al utilizar esta etiqueta
es la situación del archivo de imagen, esto es, si la imagen esta
o no en el mismo directorio que el documento web. Nosotros por comodidad
tendremos el archivo de imagen y el documento web en la misma carpeta o
directorio (Caso1). De todas maneras veamos estos 3 casos:
- El documento web y el archivo de imagen estan en el mismo directorio:
<IMG src="imagen.gif">
- El archivo de imagen está en un subdirectorio respecto al
directorio donde se encuentra el documento web:<IMG src="subdir/imagen.gif">
(donde subdir es el nombre del subdirectorio)
El documento web está en un subdirectorio respecto
al directorio donde se encuentra el archivo de imagen :<IMG src="../imagen.gif">
Una vez claros estos conceptos veamos un ejemplo de como
insertar una imagen. En este caso vamos a insertar el archivo de imagen dinosaurio.gif:
Ejemplo:
<IMG src="dinosaurio.gif"> | Resultado: |
Atributos para <IMG>:
ALT: Con este atributo se puede introducir una pequeña descripción
de la imagen mediante una palabra o frase corta. Este atributo sirve para que
el usuario vea de que trata la imagen en el caso de usar un navegador que no
cargue imágenes. También notaremos diferencia al cargar la imagen
ya que al poner el mouse encima aparece la descripción que hemos puesto.
Ejemplo:
<IMG src="dinosaurio.gif" alt="dino"> | Resultado: |
BORDER: Dandole un valor en pixels a este atributo se
puede poner un borde a la imagen.
Ejemplo:
<IMG src="dinosaurio.gif" border=2> | Resultado: |
HEIGHT y WIDTH: Con estos atributos se puede modificar la altura
y la anchura de la imagen, esto se puede hacer dandole un valor en pixels a
estos atributos o dandole un valor en tanto por ciento.
Ejemplo:
<IMG src="dinosaurio.gif" height=31 width=53> | Resultado: |
ALIGN: Este es un atributo nos puede servir para alinear la imagen
a derecha e izquierda dandole los valores right y left respectivamente o para
que los titulares de la imagen (una linea de texto al lado de la imagen) esten
alineados arriba (top), abajo (bottom) o en medio (middle). Veamoslo más
claro con estos ejemplos:
Ejemplo1:
<IMG src="dinosaurio.gif" align=right>
Resultado1:
Ejemplo2:
<IMG src="dinosaurio.gif" align=middle>Texto
alineado en medio de la imagen.
Resultado2: Texto
alineado en medio de la imagen
Ejemplo3:
<IMG src="dinosaurio.gif" align=left> Esta
es la primera linea de texto
Aquí sigo en la segunda!
Etc.
Resultado3:
Esta es la primera linea de textoAquí sigo en la segunda!
Etc.
Ordenando el texto
Las listas se usan cuando se quiere enumerar varios items. Hay 3 tipos
de listas: listas ordenadas, listas no-ordenadas y listas
de definición. Estas listas se pueden utilizar por separado
o anidadas entre si, como veremos más adelante.
Listas Ordenadas:
Este tipo de listas se designan con la etiqueta
- (Ordered List). Cada item de la lista ira precedido de la etiqueta
- (List Item) con el fin de diferenciarlos entre si correctamente.
Veamos a continuación un ejemplo de lista ordenada:Ejemplo:
- Introducción
- La Primera Página
- Escribir texto
Resultado:
Introducción
La Primera Página
Escribir texto
Atributos de las <OL>:
- :
- Introducción
- La Primera Página
- Escribir texto
Introducción
La Primera Página
Escribir texto
- Introducción
- La Primera Página
- Escribir texto
Introducción
La Primera Página
Escribir texto
- (List Item) al igual que en las listas ordenadas. Veamos
a continuación un ejemplo de lista ordenada:Ejemplo:
- Introducción
- La Primera Página
- Escribir texto
Resultado:
Introducción
La Primera Página
Escribir texto
Podemos observar como a diferencia de las listas ordenadas
este tipo de listas no llevan ningun tipo de numeración sino
que simplemente va precedido de un simbolo (en este caso un circulo).Atributos de las <UL>:
Bullet (por defecto)
Circle
Square
Introducción
La Primera Página
Escribir texto
a tabla utiliza el codigo pareado <TABLE> y
</TABLE>.y
La tabla estará compuesta por filas que se
definirán entre las etiquetas
y
.Las filas estarán compuestas por celdas que
se definirán entre las etiquetas
y
.
TYPE: Con este atributo podremos cambiar el símbolo
que precede a este tipo de listas. Type puede tomar los siguientes
valores en este tipo de listas:Veamos más claro la utilización
de este atributo con un ejemplo:Ejemplo:
<UL Type="square">
<LI>Introducción
<LI>La Primera Página
<LI>Escribir texto
</UL>Resultado:
Listas
de Definición:Este tipo de listas se designan con la etiqueta
(Definition List). Cada item de la lista ira precedido
de la etiqueta
(Definition Term) y su correspondiente definición
ira precedida por la etiqueta
(Definition Definition). Veamos a continuación
un ejemplo de lista de definiciones:Ejemplo:
<DL>
<DT>Introducción
<DD>Breve introducción al lenguaje
<DT>La Primera Página
<DD>Como hacer la primera página
<DT>Escribir texto
<DD>Empieza a dar formato al texto
</DL>Resultado:
Introducción
Breve introducción al lenguaje
La Primera Página
Como hacer la primera página
Escribir texto
Empieza a dar formato al texto
En este tipo de listas (de definición) aparte
de los items se da una breve descripción o definición
de ellos.Organizando la página web: Tablas
Las tablas son muy utiles a la hora de ordenar y estructurar
nuestros documentos web. Veamos de que etiquetas constan las
tablas en el código html:Veamos un ejemplo de tabla, donde podemos
observar como definimos la tablaluego la fila
y luego las celdasque contiene esa fila. Ejemplo:
<TABLE>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>Resultado:
FILA1COL1
FILA1COL2
Atributos de <TABLE>:
START: Este atributo permite iniciar la lista ordenada
según convenga al diseñador de la página web.Ejemplo:
Resultado:
TYPE: Por defecto las listas ordenadas se ordenan
con la numeración común y se inicializan en 1. Con este
atributo puedes cambiar la manera de ordenar la lista. Type puede tomar
los siguientes valores en este typo de listas:1 para numeración común (por defecto)
I para numeración romana en mayúsculasi para numeración
romana en minúsculasA para letras mayúsculasa para letras
minúsculasVeamos más claro la utilización de
este atributo con un ejemplo:Ejemplo:
Resultado:
Los atributos Start y Type se pueden utilizar a la
vez dentro de la etiqueta- .Listas No Ordenadas:
Este tipo de listas se designan con la etiqueta
- (Unordered List). Cada item de la lista ira precedido de la etiqueta
BORDER: Este atributo permite añadir un valor al marco de la tabla. En
el ejemplo anterior no vemos físicamente la tabla porque no tenemos este
atributo, observa ahora:
Ejemplo:
<TABLE border=2>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE> Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
BORDERCOLOR: Coloreamos el borde de la tabla (2D):
Ejemplo:
<TABLE border=2 bordercolor=#0000ff>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE> Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
Si queremos dar una mejor sensación de color a nuestro marco de tabla
(3D), podemos usar estos dos atributos siguientes en vez de el de arriba:
BORDERCOLORLIGHT: Color de borde claro.
BORDERCOLORDARK: Color de borde oscuro.
Veamoslo más claro en el ejemplo:
Ejemplo:
<TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 >
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE> Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
CELLPADDING : Este atributo marca la distancia desde la letra hasta el borde
del marco de la tabla (en pixeles).
Ejemplo:
<TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE> Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
CELLSPACING : Este atributo nos permite poner un valor a la distancia entre
los cantos de el marco de la tabla (en pixeles).
Ejemplo:
<TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5
cellspacing=6>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE> Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
WIDTH y HEIGHT : Con estos atributos dimensionaremos la tabla. (Estos atributos
para dimensionar ya los conocemos de antes por ejemplo en imagenes)
Para definir una anchura y altura a la tabla se le dan valores a los atributos
width y height.
Ejemplo:
<TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5
cellspacing=6 widht=450 height=150>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>
Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
ALIGN : Así alinearemos la tabla. (Este atributo tambien le conocemos
de otros temas)
Ejemplo:
<TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5
cellspacing=6 widht=450 height=150 align=center>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>
Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
BGCOLOR : Le damos un color a la tabla. (Este atributo tambien le conocemos
de otros temas)
Ejemplo:
<TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5
cellspacing=6 widht=450 height=150 align=center bgcolor=#FFFFCC>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>
Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
BACKGROUND : Le ponemos una imagen de fondo a la tabla. En este caso nuestra
imagen es imgfon.gif. (Este atributo tambien le conocemos de otros temas)
Ejemplo:
<TABLE border=2 bordercolorlight=#6699FF bordercolordark=#003366 cellpadding=5
cellspacing=6 widht=450 height=150 align=center background="imgfon.gif">
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>
Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
Los enlaces son una de las partes más importantes y prácticas
dentro de los documentos web ya que permiten entrelazar diferentes documentos
entre si que a su vez pueden estar entrelazados con otros, etc. Hay diferentes
tipos de enlaces: enlaces a otra página, enlaces a una URL, marcadores
y enlaces a una dirección de correo.
Enlaces a otra página:
Vamos a enlazar a continuación dos documentos web dentro de un mismo
directorio (recordad que es importante saber el directorio que ocupan nuestros
documentos e imágenes. Para realizar este vinculo entre páginas
utilizaremos el siguiente codigo.
Ejemplo:
<A href="index.htm">Ir a la página principal</A>
Resultado:
Ir a la página principal
Mediante este vínculo estamos uniendo esta página con nuestra
página principal, que en nuestro caso tiene de nombre index.htm, de esta
manera podemos unir las distintas páginas de nuestros proyectos con este
tipo de enlace.
Enlaces a una URL:
En el apartado anterior enlazabamos dos documentos web dentro de un mismo directorio.
En este apartado vamos poner un vínculo a una dirección web (URL).
Lo haremos de la siguiente manera:
Ejemplo:
<A href="http://www.yahoo.com">Ir a Yahoo</A> Resultado:
Ir a Yahoo Lo que conseguimos en este caso es un vinculo entre nuestra página
y otra de internet (en este caso yahoo
Marcadores:
Los marcadores son un tipo de enlaces dentro de una misma página, se
suelen utilizar en páginas de gran extensión para saltar de un
sitio a otro detro de la web sin tener que utilizar la barra de desplazamiento.
Veamoslo más claro en este ejemplo en el que pondremos un marcador al
principio de esta página.
Ejemplo:
<A name="enlacesaotra">Enlaces a otra página</A>
<A href="#enlacesaotra">Ir a enlaces a otra página</A>
Resultado:
Ir a enlaces a otra página Vamos a estudiar esto de los marcadores con
más detenimiento, para empezar observemos que tienen dos partes: una
en la que se define el atributo name y otra en la que se define el atributo
href. En la primera estamos insertando una etiqueta con un nombre donde definimos
el lugar donde tiene que ir el vinculo, es lo que llamamos una marca. Entre
la apertura y el cierre de esta etiqueta irá el texto o imagen a la que
estara apuntando el vínculo, en nuestro caso el vinculo apunta a la sección
de esta pagina de: Enlaces a otra página, por lo que iremos buscando
en el codigo donde pusimos anteriormente esa frase y le pondremos la etiqueta.
La siguiente etiqueta es la que crea el vinculo en la frase: Ir a enlaces a
otra página que apunta a donde hemos colocado la marca (el atributo href
tendra como valor el nombre de la marca precedido por #).
Enlaces a una dirección de correo:
En este apartado nuestro enlace sera hacia una direccion de correo. Este enlace
funcionará cuando pinchemos en el abriendonos el servidor de correo que
tengamos predeterminado en nuestro ordenador y con la dirección a la
que apunta ya colocada.
Ejemplo:
<A href="mailto:bootsbob05[arroba]yahoo.com">Mi E-Mail</A> Resultado:
Mi E-Mail En esta clase de enlaces no se os olvide poner mailto: en el atributo
href antes de la dirección de correo electrónico.
Marquesinas
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza
un texto. Sólo son válidas para el Explorer de Microsoft (en el
Netscape se verá como texto fijo).
Estructuras
La etiqueta básica es:
<MARQUEE> Texto que se desplaza </MARQUEE>
Que resulta como:
Texto que se desplaza
Formatos
WIDHT, HEIGHT
Ajustan la anchura y altura, respectivamente, de la marquesina.
Pueden ser igual a un número de pixels, o a un porcentaje de la pantalla.
Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho
de la pantalla y tiene una altura de 60 pixels </MARQUEE>
Que resulta como:
Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de
60 pixels
ALIGN
Modifica el alineamiento del texto que rodea a la marquesina, que puede ser
TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!"
estará
alineada con la parte inferior de la marquesina</MARQUEE> ¡Hola!
Que resulta como:
La palabra "¡Hola!" estará alineada con con la parte
inferior de la marquesina ¡Hola!
Marcos (Frames)
Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje
HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar
independientemente unas de otras, como si se trataran de páginas diferentes,
pues incluso cada una de ellas pueden tener sus propias barras deslizaderas.
Los navegadores que lo implementan son el Netscape 2.0, y el Explorer 2.0 en
adelante.
Enlaces de Página con Marco
A veces encontramos páginas con frames que contienen enlaces a otros
sitios del Web que al ser pulsados se cargan dentro del mismo frame. Esto resulta
generalmente molesto para el usuario, pues la página cargada queda aprisionada
dentro del reducido
espacio del frame (agravado aún más si la página cargada
contiene ella misma sus propios frames). Además, el usuario puede tener
la impresión de que el autor de la página pretende impedirle que
se "escape" a otras páginas.
La manera de evitar esto es poner, dentro de las etiquetas de los enlaces en
cuestión, el atributo TARGET="_top", con lo que al pulsar el
enlace la nueva página se cargará a pantalla completa.
Atributos de las Etiquetas (Frameset)
La etiqueta FRAMESET, es la que define la distribución, el número
y tamaño de los frames. Tiene dos atributos: COLS (columnas) y ROWS (filas):
<FRAMESET COLS="XX, YY, ZZ,">
<FRAMESET ROWS="XX, YY, ZZ,">
Define la distribución de los frames en columnas o en filas, según
se use uno u otro atributo.
Define el número de frames que habrá, pues, por ejemplo:
<FRAMESET COLS="XX, YY"> (habrá dos frames en columnas)
<FRAMESET COLS="XX, YY, ZZ"> (habrá tres frames en columnas)
Define el tamaño de los frames, según el valor que demos a XX,
YY, ZZ…. Este valor se puede expresar en:
Un porcentaje del ancho del pantalla (para las columnas), o del alto de la pantalla
(para las filas). Así, por ejemplo:
<FRAMESET COLS="%20, %80"> (la columna de la izquierda ocupará
el 20% del ancho de la pantalla, y la de la derecha el 80% restante)
<FRAMESET ROWS="%10, %70, %20"> (la fila superior ocupará
el 10% del alto de la pantalla, la del medio el 70%, y la inferior el 20%)
Un número absoluto que representa el número de pixels que ocupará
cada frame a lo ancho o a lo alto (según sean filas o columnas). Así,
por ejemplo:
<FRAMESET COLS="40, 600"> (la columna de la izquierda tendrá
40 pixels de ancho y la de la derecha 600). Pero es peligroso utilizar sólo
valores absolutos, pues el tamaño de la pantalla varía de un usuario
a otro. Si se va a usar algún valor absoluto para un frame, es mejor
mezclarlo con alguno relativo, como los que vamos a ver a continuación,
para que se ajuste el total a la pantalla del usuario
Un valor relativo que se consigue poniendo un asterisco (*), en vez de un número.
Esto se interpreta como que ese frame debe tener el espacio restante. Por ejemplo:
<FRAMESET ROWS="100,*,100"> (Habrá tres filas, la superior
y la inferior de una altura fija de 100 pixels, y la del medio obtendrá
el espacio restante).
Caracteres Especiales
Existen algunas limitaciones para escribir el texto. Una de ellas es debido
a que las etiquetas, se forman como un comando escrito entre los símbolos
"<" y ">". Por tanto, si se quisieran escribir estos
caracteres como parte normal del texto, daría esto lugar a una ambigüedad,
ya que el programa navegador podría interpretarlos como el comienzo o
final de una etiqueta, en vez de un carácter más del texto.
Para resolver este problema, existen unos códigos para poder escribir
estos caracteres y otros relacionados con las etiquetas.
< para < (less than, menor que)
> para > (greater than, mayor que)
& para & (ampersand)
" para " (double quotation)
Como se ve, estos códigos empiezan siempre con el signo "&"
y acaban siempre con ";"
De una manera similar, existen códigos para escribir letras específicas
de distintos idiomas. Hay muchos de ellos, pero, lógicamente, los que
más nos interesan son los propios del castellano (las vocales acentuadas,
la " ñ " y los signos " ¿ " y " ¡
" ).
Los códigos de las vocales acentuadas se forman comenzando con "&",
seguido de la vocal en cuestión, seguido de la palabra acute (aguda)
y terminando con el signo ";".
á Para la á
é Para la é
í Para la í
ó Para la ó
ú Para la ú
Á Para la Á
É Para la É
Í Para la Í
Ó Para la Ó
Ú Para la Ú
ñ Para la ñ
Ñ Para la Ñ
ü Para la ü
Ü Para la Ü
¿ Para ¿
¡ Para ¡
Todo esto, que como se ve es muy laborioso, puede parecer inútil ya
que si se escribe el texto sin hacer ningún caso de estas convenciones,
escribiendo las letras acentuadas y demás signos directamente, es muy
posible que el resultado se vea correctamente en dicho navegador, pero nunca
se puede estar seguro que le ocurra lo mismo a todos los que accedan a estas
páginas con navegadores distintos.
Autor:
Omar Hernández
República Bolivariana de Venezuela
Ministerio Del Poder Popular Para La Educación Superior
Municipio Carlos Arvelo Edo Carabobo
U.B.V
Misión Sucre – Aldea Tacarigu
MAYO, 2009
Página anterior | Volver al principio del trabajo | Página siguiente |