MANUAL DE HTTTTMLLLL

Anuncio
Para confeccionar una página web lo único que se necesita es un editor de texto. Existen editores
especializados en crear ficheros HTML
Podemos utilizar Notepad, WordPad o el que queramos. Es preferible utilizar Notepad o un editor
especializado para generar ficheros de Html que en editor más avanzado que puede incluir códigos
no deseados.
Seguramente tienes uno de estos programas en tu ordenador. Si no sabes donde esta pulsa en la
esquina inferior izquierda "Inicio" y "Buscar"
Escribimos el nombre del fichero que estoy buscando en este caso Notepad y pulsamos "Buscar
Ahora"

Y pulsamos dos veces sobre sobre el fichero de Notepad
Existen editores gratuitos en Internet. Por ejemplo en la página de Internet
http://www.softonic.com/ En la sección de programación tienes editores gratuitos para descargar.
Pasos para crear la página web:
1. Abrir el programa editor de texto.
2. Escribir los códigos o "tags". Escribimos los comandos como escribimos en un
procesador de textos. Y guardamos el fichero que creamos como fichero de texto.A lo largo
de este curso veremos los diferentes códigos.

Una vez abierto el programa editor de texto voy escribiendo los códigos o "tags"

Las instrucciones, códigos o "tags" de html van entre dos signos < y >. Las
instrucciones es indiferente si se escriben en mayúsculas o minúsculas.

Tenemos que poner un código de inicio y uno de cierre.
Ejemplo: Poner texto en negrilla
La instrucción para que un texto se ponga en negrilla es <b>Soy magnífico</b>
La instrucción de cierre tiene que llevar el signo /
Por lo tanto:
A) Ponemos el código de inicio para poner el texto en negrilla <b>
B) A continuación el texto que queremos que aparezca en negrilla y
C) Al final el código de cierre </b>
3. Guardar el fichero. Es recomendable que cree un directorio en el disco duro de su
ordenador para guardar ordenadas los ficheros que iremos generando.
a. Para guardar el fichero tenemos que ponerle un nombre y como extensión htm. html
o shtml. Es decir nombre, punto y htm. Por ejemplo miprimerapagina.htm
b. Es preferible no poner acentos, "ñ" ni simbolos extraños para evitar problemas de
compatibilidad
c. No ponerle espacios en blanco al nombre del fichero.
d. Y guardar como documento de TEXTO. Formato de texto ASCII. Volveremos a ver
esta cuestión.
Una vez guardado el fichero podemos ver como queda utilizando el mismo programa con el
que ve esta página. El resultado cuando veamos con el navegador el documento será
Soy magnífico
Puede ver como quedaría el fichero pulsando el enlace miprimerapagina. Para volver pulse
Atrás en su navegador
miprimerapagina.htm
Si utiliza una versión avanzada de Internet Explorer, puede ver los códigos de la página.
Una vez que este en miprimerapagina pulse en la Barra superior:


Pulsamos Archivo
Y pulsamos Modificar con Microsoft Front Page. Esperamos unos segundos.
Y pulsamos sobre la pestaña HTML que se encuentra en la parte inferior derecha.
LECCION 3ª
Vamos a realizar nuestra primera página utilizando los códigos html que denominaremos "La
Primera" y en la que aparezca escrito "soy un fenómeno"
Tenemos que crear un fichero en el que podremos las instrucciones y lo guardamos como fichero
con terminación .htm
A) Todas las páginas html comienzan con el código de inicio <html> y terminan con el código
</html>
Así que ponemos
<html>
</html>
B) Las páginas html se dividen en un encabezado y un cuerpo. Para el encabezamiento tenemos
que poner los "tags"
<head>
</head>
Tenemos que ponerlo dentro de las instrucciones inicial y final de página (paso A) por lo tanto nos
queda
<html>
<head>
</head>
</html>
LECCION 4ª
C) Igualmente insertamos las instrucciones para el cuerpo de la página <body> y </body>
Con lo que nos queda
<html>
<head>
</head>
<body>
</body>
</html>
Podemos dejar líneas en blanco para comprender con más claridad la estructura del programa que
estamos escribiendo. las líneas en blanco serán ignoradas cuando se ejecute el fichero html
LECCION 5ª
D) Le ponemos título a la página con la instrucción <title> </title> que tenemos que poner dentro
del encabezado (entre head y head)
<html>
<head>
<title>Mi primera Pagina</title>
</head>
<body>
</body>
</html>
E) Vamos a poner el texto en negrilla "Soy un fenómeno". La instrucción para negrilla es <b> y
<b/>. Y el texto hay que colocarlo dentro del cuerpo (entre body y body) de la página.
Por tanto nos queda
<html>
<head>
<title>Mi primera Pagina</title>
</head>
<body>
Soy el mejor
</body>
</html>
LECCION 6ª
Guardamos el fichero para lo cual es aconsejable ser ordenado y crear un subdirectorio en el disco
duro de nuestro ordenador para ir almacenando los ficheros.
Es importante:
A) Ponerle al fichero la terminación html
B) Guardarlo como documento de TEXTO (para que no se incluyan otros códigos)
C) Para evitar problemas es interesante que en el nombre del fichero, NO DEJAR ESPACIOS y NI
PONER SIGNOS NO COMUNES como acentos, "ñ", o símbolos de distintos idiomas.
LECCION 7ª
DAR FORMATO A LAS LETRAS
Cambiar los atributos de las letras utilizamos el comando <font> </font> (fuente o tipo de letra). El
color o el tamaño son atributos del elemento tipo de letra.
Podemos dar distintos atributos a las letras.
A) TAMAÑO DEL TEXTO
* Si queremos poner las letras de distinto tamaño empleamos el atributo
SIZE="".
* Dentro de las comillas pondremos "+" para aumentar el tamaño y "-" para disminuirlo
EJEMPLO 1
<FONT SIZE="+1">este texto se ve con mayor tamaño</FONT>
El resultado:
este texto se ve con mayor tamaño
EJEMPLO 2
Si queremos aun mayor tamaño ponemos un número mayor. Voy a probar con 4
<FONT SIZE="+4">este texto se ve muy grande</FONT>
este texto se ve muy
grande
EJEMPLO 3
Para disminuir el tamaño ponemos -1
<FONT SIZE="-1">al poner -1 disminuye el tamaño</FONT>
Al poner -1 disminuye el tamaño
Podemos poner el texto en negrilla, en cursiva o subrayado
PONER EL TEXTO EN NEGRILLA
Para poner el texto en negrilla utilizamos el tag "b" (de bold)
Soy el <b>mejor</b> de la clase
Soy el mejor de la clase
PONER EL TEXTO EN CURSIVA
Para ponerlo en cursiva utilizamos "i" (de italian)
Poner un <i>texto en cursiva</i>
Poner un texto en cursiva
PONER EL TEXTO SUBRAYADO
Para subrayado
Ahora toca el <u>subrayado</u> de parte de la frase
Ahora toca el subrayado de parte de la frase
LECCION 8ª
PONER COLORES
La instrucción para poner color a las letras es
<FONT COLOR="entre estas comillas va el nombre o el número del color">aquí el texto al que
queremos dar color</FONT>
EJEMPLO 1
Para poner el texto en rojo
<FONT COLOR="RED">este texto se pone rojo</font>
El resultado si lo ponemos dentro de los códigos del fichero html será
este texto se pone rojo
EJEMPLO 2
Para poner el texto en azul
<FONT COLOR="BLUE">este texto se pone en azul</font>
este texto se pone en azul
LECCION 9ª
LAS PARTES DE LAS INSTRUCCIONES
Por tanto vemos que las instrucciones de HTML tienen varias partes.
Las instrucciones de html se componen de tres partes fundamentales:
A) El elemento al que se refiere la instrucción. Es la palabra que va después del signo <.
Por ejemplo <font es un elemento. En este caso el elemento es el tipo de letra. La instrucción por
tanto se refiere al tipo de letra.
B) El atributo. El tamaño o el color son atributos posibles del tipo de letra.
C) El valor que toma el atributo. Por ejemplo rojo o verde.
Por ejemplo, queremos:
A) Al elemento tipo de letra
B) Darle el atributo color
C) Con el valor rojo.
Elemento
Atributo
Valor
<FONT
COLOR=
"RED">
El tag de
cierre
</FONT>
Valor
"+1">
</FONT>
Otro ejemplo, letra tamaño grande
Elemento
<FONT
Atributo
SIZE=
LECCION 10ª
ALINEAR EL TEXTO
Para alinear el texto utilizamos el atributo align
align=left para alinear a la izquierda
align=right para alinear a la derecha
align=center para centrar el texto
EJEMPLO ALINEAR A LA IZQUIERDA
<p align="left">alineamos el texto a la derecha</p>
alineamos el texto a la izquierda
EJEMPLO "ALINEAR A LA DERECHA"
<p align="right">alineamos el texto a la derecha</p>
alineamos el texto a la derecha
EJEMPLO DE CENTRAR
<p align="center">centramos el texto</p>
centramos el texto
LECCION 11ª
LINEAS HORIZONTALES
El elemento para crear una línea horizontal es HR. Este "tag" no necesita un "tag" de cierre
Y a este elemento podemos darle distintos atributos
width para definir el largo de la línea con un cierto número de pixel o un porcentaje del
documento>
size para asignar el ancho de la linea
noshade para el fondo de la línea
EJEMPLO
Línea de 100 pixels
<HR WIDTH=100>
Línea de 200 pixels
<HR WIDTH=200
Línea de un 50% del ancho del documento
<HR WIDTH=50%>
Línea del 100% del ancho del documento
<HR WIDTH=100%>
Línea con 10 de ancho
<HR SIZE=10>
Podemos combinar varios atributos. Por ejemplo línea de un 50% de largo y 10 pixel de ancho
<HR WIDTH=50% SIZE=10>
LECCION 12ª
LOS PARRAFOS Y EL CAMBIO DE LINEA
Para mantener el texto formando un párrafo o bloque de texto utilizamos el "tag" <p>aqui va
el texto</p>
<p>Si utilizamos la instrucción de párrafo nos aseguramos que el texto se mantenga junto y
controlamos cuando queremos que exista una línea de espacio en blanco</p>
Si utilizamos la instrucción de párrafo nos aseguramos que el texto se mantenga junto y
controlamos cuando queremos que exista una línea de espacio en blanco
PASAR A LA SIGUIENTE LINEA
Cuando queremos pasar el texto a otra línea podemos utilizar el "tag" <br> que no tiene tag de
cierre.
Si queremos separar el siguiente texto en varias líneas.
la casa el perro el niño las vacaciones
Pondremos:
la casa<br>
el perro<br>
el niño<br>
las vacaciones<br>
Y en el documento HTML mostrara en el navegador:
la casa
el perro
el niño
las vacaciones
LECCION 13ª
PONER TITULARES
Los titulares o encabezamiento de los textos son otra forma de modificar el tamaño del texto.
La orden para encabezamiento es "H1" para un titular muy grande, "H2" para uno grande, H3, H4,
H5 y para letra pequeña H6
<H1>Encabezamiento muy grande</H1>
Encabezamiento muy grande
<H2>Encabezamiento grande</H2>
Encabezamiento grande
<H3>Encabezamiento menos grande</H3>
Encabezamiento menos grande
<H6>Encabezamiento muy pequeño</H6>
Encabezamiento muy pequeño
LECCION 14ª
LAS UTILES TABLAS
Las páginas web necesitan tener los elementos que colocamos ordenados y que se
mantengan ordenados en los distintos navegadores.
Para definir el orden o la estructura de una página web se utilizan tablas con bordes ocultos. La
mayoría de las páginas importantes se estructuran utilizando tablas ocultas.
Vamos a realizar una tabla con los bordes visibles
A) Las tablas comienzan con <table> y terminan con </table>
B) Definimos el borde de la tabla. Las tablas que se utilizan para ordenar los elementos sulen tener
bordes invisibles para los navegadores y empleamos border="0". Si queremos un borde visible
asignamos otro número al atributo borde. Nosotros en el primer ejemplo vamos a utilizar un borde
visible border="1"
C) Definimos el tamaño de la tabla. Podemos definirlo como porcentaje del ancho de la página
utilizando width
WIDTH="100%" nos genera una tabla que ocupa todo el ancho de la página que estamos creando.
WIDTH="50%" genera una tabla con la mitad del ancho del documento que creamos.
Podemos igualmente definir el tamaño de la tabla en número de pixel
WITH="100" ahora al no poner el % serán 100 pixel de larga la tabla y no el 100% del documento
D) Tenemos que definir las filas que lleva la tabla
<TR> </TR>
E) Y definimos las columnas utilizando
<TD> </TD>
Estas instrucciones de columna las pondremos dentro de las de fila.
EJEMPLO
Vamos a construir una tabla con el borde visible de tamaño el 100 por 100 del ancho del
documento con dos filas y tres columnas.
Por tanto utilizamos al principio el "tag" <table> y al final </table>.
Definimos el borde border="1" y el ancho witdh="100%"
Definimos la primera fila con <tr> y </tr> y dentro las tres columnas <td> </td>
<tr> <td></td><td></td><td></td> </tr>
Y hacemos lo mismo con la segunda fila y sus tres columnas
<tr> <td></td><td></td><td></td> </tr>
Las instrucciones para construir la tabla nos queda. Recuerda que da igual que las instrucciones se
escriban en mayúsculas o minúsculas. Los espacios en blanco no afectan al resultado por tanto es
lo mismo poner <tr> <td></td><td></td><td></td> </tr> en una columna como lo ponemos a
continuación.
<table border="1" witdh="100%">
<TR>
<td></td>
<td></td>
<td></td>
</TR>
<TR>
<td></td>
<td></td>
<td></td>
</TR>
</Table>
Y el resultado.
LECCION 15ª
TAMAÑO DE LAS COLUMNAS Y MARGENES DE LAS CELDAS DE LAS TABLAS
FIJAR EL TAMAÑO DE LAS COLUMNAS
El mismo atributo utilizado para definir el tamaño de la tabla se utiliza para definir o fijar el tamaño
de las columnas.
Definimos el tamaño de la columna con WIDTH
Por ejemplo, queremos que en una tabla de dos columnas, la primera columna ocupe el 20 por
ciento de la tabla y la segunda el 80 por ciento.
Pondremos Width=20% en las celdas de la primera columna y Width=80% en las celdas de la
segunda columna.
EL MARGEN DE LAS CELDAS
Podemos asignar márgenes a las celdas, de forma que lo que pongamos dentro no quede pegado
a los bordes de la celda.
Para el margen de las celdas utilizamos el atributo cellpadding="aqui ponemos el número"
EJEMPLO
Realizaremos una tabla de 2 por 3
A) Una tabla con dos filas y tres columnas, con borde de la tabla 1 y el ancho de la tabla un 75%
del ancho de la página.
B) Las celdas con un margen de 15 píxeles y el tamaño de las celdas un 10% del tamaño de la
tabla la primera columna, un 20% del tamaño de la tabla la segunda columna y un 70% del tamaño
de la tabla la tercera columna.
C) Pondremos dentro de las celdas las letras a,b,c,d,e,f
Quedaría
<table border="1" cellpadding="15" cellspacing="0" width="75%">
<tr>
<td width="10%">a</td>
<td width="20%">b</td>
<td width="70%">c</td>
</tr>
<tr>
<td width="10%">d</td>
<td width="20%">e</td>
<td width="70%">f</td>
</tr>
</table>
Y el resultado
A
b
c
D
e
f
LECCION 16ª
EL COLOR DE LAS TABLAS
Para ponerle color a una celda utilizamos el atributo bgcolor="aqui ponemos el
nombre o número del color"
EJEMPLO
Vamos a realizar una tabla de dos filas y dos columnas, con borde de tamaño "1" y de largo
el 50% del ancho de página. Y le ponemos a una celda fondo rojo con el atributo
bgcolor="red" y a otra fondo azul
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="50%" bgcolor="red"></td>
<td width="50%" bgcolor="blue"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
El resultado que veremos:
COLOR DEL FONDO DE LA TABLA
Para darle color a toda la tabla es suficiente con poner el atributo bgcolor"" dentro de la
instrucción de tabla. Para poner fondo amarillo bgcolor="yellow"
<table border="1" cellpadding="0" cellspacing="0" width="50%" bgcolor="yellow">
EJEMPLO
Una tabla de tres filas y dos columnas con un largo del 75%.
Y fondo amarillo
<table border="1" cellpadding="0" cellspacing="0" width="75%" bgcolor="yellow">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>
LECCION 17ª
PONER ENLACES
Lo más característico de Internet es ser un medio que no es lineal sino hipertexto es decir que
utiliza enlaces para movernos entre distintos niveles o páginas.
La instrucción para un enlace es de la forma <A HREF="aqui ponemos la dirección a la que
queremos que apunte el enlace">el texto que queremos que se vea en el documento</A>
EJEMPLO
Queremos enlazar con la página 100mejores.com y que el texto que se vea sea "La mejor
selección de enlaces"
<A HREF="http://www.100mejores.com/">La mejor selección de enlaces"</A>
La mejor selección de enlaces
Recordar que los enlaces externos a otras páginas deben llevar la dirección completa de la página.
LECCION 18ª
INSERTAR IMAGENES
Para insertar imágenes utilizamos <img src="aquí ponemos la dirección de la imagen">
Este tag no tiene tag de cierre.
En Internet tenemos numerosas páginas que proporcionan imágenes gratis. Por ejemplo
http://www.gifmania.com/
Nos vamos a gifmania para obtener una imagen de una ejecutiva
Seleccionamos mujeres y ejecutivas.
Nos situamos sobre la imagen y pulsamos el botón DERECHO
Lo guardamos con el nombre de fichero ejecutiva y guardar como tipo de fichero GIF. Podemos
guardarlo con varios tipos de ficheros, elegimos los gif por ocupar poco espacio y dar pocos
problemas de compatibilidad.
Si lo guardamos en el MISMO directorio que el fichero HTML que estamos creando la instrucción
para insertar la imagen de la ejecutiva nos queda:
<img src="ejecutiva.gif">
Es MUY IMPORTANTE tener cuidado con las direcciones de la imágenes. Si las imágenes están
en un directorio y el fichero html que estamos creando en otro directorio, la dirección de la imagen
debe indicar la localización de la imagen en el otro directorio.
Cuando hemos puesto imágenes en un fichero HTML y al enviarlo al servidor de Internet no
aparecen suele ser por dos motivos:
A) Hemos enviado el fichero HTML a Internet pero no los ficheros con las imágenes.
B) Al enviarlo al servidor la dirección donde el programa busca la imagen es distinta de donde
realmente esta la imagen. Para comprobar si donde esta la imagen coincide con la dirección que
tiene la página nos colocamos sobre la imagen (o sobre donde debería estar) y pulsando el botón
DERECHO en el menú que aparece pulsamos propiedades.
Lo recomendable es MANTENER LA MISMA ESTRUCTURA DE DIRECTORIOS en el disco duro
de nuestro ordenador y en el servidor de Internet. Al mover los ficheros en el disco duro y
posteriormente enviarlo al servidor puede que la dirección de la imagen no coincida con la
localización de la imagen.
LECCION 19ª
INSERTAR IMAGENES ANIMADAS
Para insertar imágenes animadas se hace todo igual que para insertar imágenes.
Simplemente elegimos una imagen animada para enlazar. Por ejemplo en la misma página de
http://www.gifmania.com/
Seleccionamos una imagen animada
La guardamos con el nombre ejecutivaanimada
La instrucción para insertar la imagen queda:
<img src="ejecutivaanimada.gif">
Y el resultado
LECCION 20ª
ATRIBUTOS RELACIONADOS CON INSERTAR IMAGENES
Para una correcta visualización en los distintos navegadores es aconsejable definir el largo y
alto de la imagen que se inserta
LARGO Y ALTO
Para definir el largo y el alto de una imagen utilizamos los atributos WIDTH y HEIGHT
Por ejemplo la imagen ejecutivaanimada tiene unas dimensiones de 167 pixels de largo por 109
pixels de alto. Podemos comprobarlo situándonos sobre la imagen y pulsando el botón DERECHO
del ratón seleccionar "Propiedades"
La instrucción quedaría
<img src="ejecutivaanimada.gif" WIDTH="167" HEIGHT="109">
EL BORDE DE LAS IMAGENES
Podemos ponerle borde a la imagen empelando el atributo border y asignándole un valor por
ejemplo 2. Si no queremos borde podemos poner border=0
<img border="2" src="ejecutivaanimada.gif" WIDTH="167" HEIGHT="109" >
Es posible y recomendable poner un texto para cuando no aparezca la imagen por algún motivo.
TEXTO ALTERNATIVO A LA IMAGEN
Para poner un texto alternativo se utiliza el "tag" ALT
Vamos a poner la imagen anterior con un borde mayor y en un recuadro más largo y menos alto y
con el texto alternativo "secretaria animada"
<img border="5" src="ejecutivaanimada.gif" WIDTH="250" HEIGHT="90" ALT="secretaria
animada">
LECCION 21ª
PONER UN BOTON O PONER UN ENLACE EN UNA IMAGEN
Si queremos poner un botón o una imagen que al pulsarla el usuario se encamine a otra
página, utilizamos la orden para poner enlaces combinada con la orden para insertar imágenes.
<a href="dirección del enlace a otra página"> <img src="aquí ponemos la localización de la
imagen"></a>
Vamos a poner la imagen de la secretaria y que al pulsarla lleve al usuario al portal de secretarias
http://www.secretariaplus.com
La instrucción nos quedaría:
<a href="http://www.secretariaplus.com"> <img src="ejecutivaanimada.gif"> </a>
Y se vera al acceder con el navegador a la página. De forma que al pulsar sobre la imagen nos
dirigimos a la página enlazada. Vale, de acuerdo, pulsa la imagen pero recuerda darle en tu
navegador al "pa tra" "atras" o "Back" y seguir el curso.
;
Esto nos permite poner botones y flechas que al pulsarlas nos encaminan a otras páginas de
nuestra web o externas.
OTRO EJEMPLO
Insertamos una imagen que al pulsarla nos sitúa en la portada de aulafacil
<a href="http://www.aulafacil.com"><img border="0" src="HOMEWHT.gif" width="90"
height="70"></a>
LECCION 22ª
ATRIBUTOS DE LA PAGINA O ATRIBUTOS DE "BODY"
Hemos visto que los ficheros HTML se dividen en una cabecera y un cuerpo o body. Los
ficheros incorporan las instrucciones
<html>
<head>
</head>
<body>
</body>
</html>
Al "tag" body podemos añadirle una serie de atributos de color para asignar un color diferente:
A) Al fondo del documento con BGCOLOR
B) Colocar una imagen de fondo BACKGROUND
C) LINK para cambiar el color de los enlaces
D) VLINK para cambiar el color de los enlaces ya visitados por el usuario
E) Podemos cambiar el color del texto con el atributo TEXT
EJEMPLO
Asignaremos un fondo de color amarillo al documento
<html>
<head>
</head>
<body bgcolor=yellow>
</body>
</html>
Nos quedará el fondo de la página en amarillo.
LECCION 23ª
AÑADIR COMENTARIOS
Una buena idea cuando se programa es ir añadiendo comentarios para aclarar lo que
estamos haciendo. Esto es especialmente importante cuando después de un tiempo volvemos a
revisar un programa o cuando otro programador tiene que revisar o utilizar el programa.
Los comentarios no aparecen cuando el usuario ve el fichero con un navegador y no tiene efectos
en el programa.
Para añadir comentarios utilizamos <!--aqui ponemos los comentarios sobre el programa-->
Lo mismo podemos hacer utilizando los "tags" <comment>aqui ponemos el texto del
comentarios</comment>
OTRO OOOOOOO OOOOO OOOO OOOOOOOOOOOOOOOOOO OOOOOOOOOOOOOO
OOOOO
Anatomía de una Página Web
Una página Web consiste de un archivo HTML mas los archivos de imágen usados en la
página. El archivo HTML (un archivo de texto común) contiene todo el texto a desplegar, y
también actúa como el pegamento para sostener el texto e imágenes juntas en los lugares
correctos, y los despliega en el estilo correcto.
Escribir un archivo HTML significa componer el texto que quieres desplegar, entonces
insertar las etiquetas que quieras en los lugares correctos. Las etiquetas comienzan con un
caracter < y terminan con un caracter >, y le dicen al navegador que haga algo especial
como mostrar texto en itálicas o negritas, o en una fuente más grande, o mostrar una
imágen, o hacer una liga a otra página Web. Aunque el HTML tiene muchas etiquetas que
puedes usar, no necesitas saberlas todas para usar HTML -- puedes arreglártelas con unas
cuantas.
Algo excelente sobre el aprendizaje del HTML es que puedes ver cómo otros lo han hecho
revisando su código fuente. Puedes ver el código fuente de cualquier página que estés
visitando. Pruébalo ahora. En Netscape, usa el menú "Ver/Fuente del Documento"
(View/Document Source). Otros navegadores gráficos tienen un menú similar, tal vez bajo
"File" o "Edit". En Lynx, la diagonal invertida alterna entre ver o no ver el código fuente.
Revisa muchos códigos fuente, ve el código de cualquier página que te haga preguntarte
cómo hicieron algo. Todos los que usan HTML han aprendido leyendo el código de otras
personas. Internet es una gran comunidad de mutuo aprendizaje.
No necesitas un "Editor HTML" para escribir HTML. Algunas personas les gusta usarlos y
está bien, pero muchos profesionales y novatos prefieren usar un simple editor de texto e
insertar las etiquetas por sí mismos como lo estamos haciendo nosotros. Como cada quien
prefiera.
Anatomía de una Etiqueta de HTML
Las etiquetas tienen una estructura simple. Comienzan con un caracter <, y terminan con un
caracter >. Entre los caracteres <> está el nombre de la etiqueta, y quizá algunos
atributos dependiendo de la etiqueta. La mayoría de los atributos toman un valor también.
Algunos atributos son requeridos, algunos son opcionales. La forma general de una etiqueta
es
<nombre_de_la_etiqueta atributo1="valor1" atributo2="valor2" ... >
Los nombres de etiqueta y de atributos no son de caso sensitivo, pero algunos atributos y
valores sí lo son. El nombre de la etiqueta debe ir primero, pero el orden de los atributos no
importa. De esta manera, puedes escribir esta etiqueta como:
<NOMBRE_DE_LA_ETIQUETA ATRIBUTO2="valor2" ATRIBUTO1="valor1" ... >
Diferente gente escribe en formas diferentes; házlo como te guste más.
Existen muchas etiquetas diferentes para hacer muchas cosas diferentes. Por ejemplo, usa la
etiqueta <img> para mostrar una imágen en tu página Web:
<img src="blueribbon.gif">
se ve como
Esto significa "muestra la imágen blueribbon.gif en este lugar de la página." Nota que el
atributo src proporciona el URL del archivo de imágen, ya sea un URL relativo o absoluto.
El ejemplo anterior usando un URL absoluto sería:
<img src="http://www.jmarshall.com/easy/html/spanish/blueribbon.gif">
Etiquetas Contenedoras
Algunas etiquetas, como <img>, se bastan a sí mismas; no afectan a otras cosas al rededor.
Otras etiquetas tienen una etiqueta de inicio y una de final, y afectan a todo lo que se
encuentre entre los dos (aún a otras etiquetas). Estas son llamadas contenedoras, porque
contienen cosas entre las etiquetas de inicio y final. Por ejemplo, para hacer texto en
negrita, necesitas marcar en dónde comienzan las negritas y en dónde regresa al texto
normal. Haz ésto con <b> y </b>, como:
Este es texto normal. <b>Este es texto en negrita.</b>
Normal otra vez.
Se ve como:
Este es texto normal. Este es texto en negrita. Normal otra vez.
Todo contenedor termina con </nombre_de_la_etiqueta>, cualquiera que el nombre sea.
En el ejemlo anterior, la etiqueta (negrita) <b> termina con </b>. A diferencia de los
inicios, las etiquetas finales no tienen atributos .
Aquí está la parte interesante:
La etiqueta que hace del Web lo que es, un superconjunto de páginas ligadas, es la etiqueta <a>.
La etiqueta <a> es un contenedor que define una liga hacia otra página y es fácil de usar. Como
ejemplo, aquí es cómo harías una liga a la página principal de Netscape:
Ir a <a href="http://home.netscape.com/">la página principal de
Netscape</a>.
Que se ve como:
Ir a la página principal de Netscape.
Nota que existe una etiqueta de inicio (<a href="http://home.netscape.com">) y una de
final (</a>), y todo lo que esté entre ellas ("la página principal de Netscape") se visualiza como
una liga en la que el usuario puede hacer click-- típicamente en azul y subrayada en Netscape.
Nota que el atributo href tiene el valor "http://home.netscape.com", que es el URL
(dirección de una página Web) a donde ir cuando el usuario haga click en la liga. Para más
información y ayuda con los URL en HTTP, dirígete a una de estas páginas.
Así es como se debe usar la etiqueta <a> para poner ligas a una página Web. Simple, ¿no?
Más Sobre Ligas
Ligas con Imágenes
Puedes poner una <img> entre <a> y </a>, de tal manera que el usuario puede hacer click en la
imágen para seguir la liga. Por ejemplo, observa el listón azul al principio de la página-- es la liga a
otra página (una que todo el mundo debería visitar al menos una vez).
Ligas de Correo Electrónico
Para poner una liga de correo electrónico, dale a href el valor "mailto:dirección-decorreo". Por ejemplo,
Dile <a href="mailto:president@whitehouse.gov">al Presidente</a> lo que
piensas.
se ve como
Dile al Presidente lo que piensas.
(El Presidente de E.U., por supuesto.)
Ligando a la mitad de una página
Para ligar hacia otra parte de la misma página, o a la mitad de otra, primero crea un nombre de
ancla en el punto que quieres ligar. Haz ésto con la etiqueta <a> y el atributo name como
<a name="nombre_de_ancla"></a>
Nota el uso diferente de la etiqueta <a>; de hecho, <a> fue originalmente una contracción de
"ancla". Como el ancla solamente marca un punto en la página, no necesitas poner nada entre <a>
y </a>.
Una vez que el ancla existe en el lugar de destino, lígalo con la etiqueta <a href>,
agregando "#nombre_de_ancla" (el fragmento URL) al URL de destino, como
Lee sobre <a
href="http://www.jmarshall.com/easy/html/spanish/#lists">listas HTML</a>.
que se ve como
Lee sobre listas HTML.
Para apuntar a otra parte en la misma página, omite completamente el resto del URL. Por ejemplo,
<a href="#toc">De Regreso a la Tabla de Contenido</a>
se ve como.
Anatomía de un archivo HTML
Ahora que entiendes lo que son las etiquetas y las contenedoras, aquí está cómo hacer un
archivo HTML correctamente: identifica tu archivo como un archivo HTML encerrándolo
todo entre las contenedoras <html>--, en otras palabras, coloca una etiqueta <html> de
inicio al principio de tu archivo y una etiqueta </html> de finalización al final.
Técnicamente, la etiqueta <html> puede contener sólo dos cosas: una contenedora <head>,
y una contenedora <body>. Dentro de la etiqueta <body> es donde se pone toda la página.
Todo el texto, imágenes, hiperligas y demás cosas desplegadas son contenidas entre la
etiqueta <body> y la </body>.
La sección opcional <head>, colocada antes de la sección <body>, te permite almacenar
cierta información sobre el documento en sí. Aún cuando la sección <head> exista, puede
contener solamente la contenedora <title>, la cual dice qué es lo que hay que desplegar en
el título de la ventana del navegador, sobre la barra de menús (si tienes un navegador
gráfico). Por ejemplo, esta página tiene el título de "El HTML Hecho Realmente Fácil".
Así, un simple archivo HTML "hola, mundo", con título, sería
<html>
<head>
<title>Hola, mundo</title>
</head>
<body>
Hola, mundo.
</body>
</html>
Si no quieres un título, omite las líneas que comienzan con <head>, <title>, y </head>.
Si esto te confunde, no te preocupes. Solamente pon el texto <html><body> al principio de
tu archivo y </body></html> al final, y mágicamente se convertirá en un verdadero
archivo HTML.
Unas Cuantos Etiquetas Útiles Más
Pruéba las siguientes:
<i> </i>
Hace el texto en itálicas italic.
<tt> </tt>
Hace el texto en teletipo (ancho fijo).
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
Muestra diferentes estilos de encabezados (header), en orden descendente de
importancia (tamaño). Por ejemplo, el "El HTML Hecho Realmente Fácil" al
inicio de la página usa <h1>, y el "Unas Cuantas Etiquetas Útiles Más" de arriba
usa <h2>.
<hr>
Pone una línea horizontal en la página, como arriba del título "Unas Cuantas
Etiquetas Útiles Más", arriba.
<center>
</center>
Centra texto e imágenes entre los márgenes izquierdo y derecho.
<blockquote>
</blockquote>
Sangra el texto a partir de los dos márgenes. Usado para la mayoría de los
ejemplos en este documento.
<pre> </pre>
Denota texto "preformateado" en código fuente: lo despliega como fuente de
ancho fijo y conserva espacios y saltos de línea (en gran medida como una
máquina de escribir). Es una manera rápida de hacer márgenes y tabulaciones.
Conveniente para entrecomillar una sección del código fuente, de tal manera
que es usado para muchos ejemplos en este documento.
Listas Numeradas o con Viñetas
El HTML proporciona una manera simple de mostrar listas numerads ("listas ordenadas") o con
viñetas ("listas desordenadas"). Usa la contenedora <ol> y <ul> para hacer listas ordenadas o
desordenadas, respectivamente. Dentro de la contenedora, usa la etiqueta <li> para dentoar el
comienzo de un elemento de la lista.
Por ejemplo, el código de HTML
Esta es una lista ordenada:
<ol>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
</ol>
Esta es una lista desordenada:
<ul>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
</ul>
que se verán así
Esta es una lista ordenada:
1. Primer elemento
2. Segundo elemento
3. Tercer elemento
Esta es una lista desordenada:



Primer elemento
Segundo elemento
Tercer elemento
Dentro de los elementos de lista, puedes poner lo que quieras-- ligas, imágenes, tablas (más sobre
ellas después), o incluso otras listas. Las listas anidadas son en realidad bastante comunes, útiles
para resúmenes o menús en cascada.
Menos comunes pero tambien útiles, son las "listas de definición", las cuales contienen un
conjunto alternado de términos y definiciones. Encierra toda la lista en la contenedora <dl>,
y usa <dt> y <dd> para marcar el inicio de los términos y definiciones, respectivamente.
Por ejemplo,
Aquí está una lista de definición:
<dl>
<dt>Término 1
<dd>Definición del Término1
<dt>Término 2
<dd>Definición del Término2
</dl>
que se verá así:
Aquí está una lista de definición:
Término 1
Definición del Término1
Término 2
Definición del Término2
Asegúrate de terminar tus listas con </ol>, </ul>, y </dl>, o el resto de tu página se verá como
parte del último elemento de la lista.
Comentarios
Puedes poner comentarios en tu archivo HTML que no se verán en la página Web. Esto te
permite explicar por qué tu código HTML es de cierto modo, a cualquiera que vea tu
código fuente. Esto podría ser alguien más, o (seguramente) puedes ser tú mismo en el
futuro.
Comienza el comentario con "<!--" y termínalo con "-->", como
<!-- Este es un comentario, y no se desplegará al usuario -->
<!-- ejemplos de comentarios insertados por JSM el 23-9-96, para
clarificar -->
No pongas información privada en comentarios, ya que cualquiera, revisando el código
fuente, puede verla. Tampoco pongas etiquetas de HTML dentro de los comentarios, ya que
el navegador pensará que el comentario termina con el primer caracter ">".
Tablas
Las tablas en HTML te permiten mostrar un arreglo de celdas de datos, como en la sección Unas
Cuantas Etiquetas Útiles Más, arriba. También te permiten alinear texto a la derecha, o hacer
columnas de texto como con tabuladores. No son difíciles de usar, una vez que sabes con claridad
lo que quieres desplegar en cda celda. La "definición estándard" de las tablas HTML ha cambiado
unas cuantas veces, pero es bastante estable ahora; esta sección te mostrará cómo hacer tablas
que hacen que casi cualquier navegador desplegue correctamente.
1.
2.
3.
4.
Las tablas se definen con la contenedora <table>.
La etiqueta <table> contiene renglones de celdas, definidas con la contenedora <tr>.
Cada etiqueta <tr> contiene celdas de datos, definidas con la contenedora <td>.
Cada celda de datos contiene lo que quieras poner-- ligas, imágenes, listas, incluso otras
tablas.
Los renglones se definen de arriba hacia abajo, y las celdas de izquierda a derecha. Si quieres que
se muestren líneas entre las celdas de la tabla, usa el atributo border en la etiqueta <table>.
(¿Recuerdas cómo funcionan los atributos en las etiquetas HTML? Usarás unos cuantos atributos
en esta sección.)
Por ejemplo, el código HTML
<table border>
<tr>
<td>noroeste</td>
<td>noreste</td>
</tr>
<tr>
<td>suroeste</td>
<td>sureste</td>
</tr>
</table>
se verá como:
noroeste noreste
suroeste sureste
La mayoría de los navegadores no requieren las etiquetas de terminación </tr> o </td>; asumen
que una celda o renglón termina cuando la otra comienza. De tal manera, puedes ver tablas
escritas sin las etiquetas de finalización (aunque la etiqueta final </table> sí es requerido). Nota:
Como este documento es de octubre de 1996, esto puede causar problemas con las tablas
anidadas debido a algún error del navegador.
Celdas que Ocupan Columnas o Renglones Múltiples
Algunas veces querrás que una celda ocupe más de una columna o más de un renglón. En este
caso usa los atributos colspan y rowspan del tag <td>. Entonces solamente omite definir las celdas
que la celda más grande ocuparía. Por ejemplo,
<table border>
<tr>
<td rowspan=2>oeste</td>
<td>noreste</td>
</tr>
<tr>
<!-- No definas "suroeste" porque "oeste" la va a ocupar -->
<td>sureste</td>
</tr>
</table>
se verá como:
noreste
oeste
sureste
Alineando el Contenido de la Celda dentro de la misma Celda
Usualmente todo el contenido de una celda se alínea a la izquierda y centrada verticalmente por
defecto. Para fijar la posición horizontal y vertical con la etiqueta <td>, usa los atributos align y
valign respectivamente:


align puede ser left, right, o center.
valign puede ser top, middle, bottom, o baseline (alineada a la base del texto).
Por ejemplo, este recibo sin líneas de una tienda, alínea los precios con respecto al márgen
derecho:
<table>
<tr>
<td>detergente para ropa</td>
<td align=right>$4.99</td>
</tr>
<tr>
<td>comida para gato</td>
<td align=right>$128.00</td>
</tr>
</table>
Se verá como:
detergente para ropa
comida para gato
$4.99
$128.00
Puedes usar también los atributos align y valign en la etiqueta <tr>, para afectar todas las celdas
en ese renglón.
Otras Cosas Útiles sobre Tablas
Normalmente el navegador se las arregla para darle el tamaño apropiado a la tabla, y para las
celdas dentro de la tabla, basándose en el tamaño del navegador y el contenido de la celda. Si
deseas sugerir un ancho específico para la tabla o las celdas, usa el atributo width en las etiquetas
<table> y <td>. Puedes usar un porcentaje del navegador o la tabla, como <td width="20%">
(usualmente preferido), o un valor absoluto en pixels como <td width=138> (útil para hacer que
una imágen quepa exactamente en el ancho de una celda).
Si quieres más detalles, Netscape tiene información al respecto en etiquetas relacionadas
con tablas y sus atributos, y una buena colección de tablas de ejemplo. Estos documentos
son ligeramente obsoletos comparados con los últimos estándares de HTML, pero están lo
suficientemente actualizados para la mayoría de las tablas en el Web hoy día.
Formas
Probablemente has visto formas para llenar en el Web, usadas por los motores de búsqueda, guías
en línea, y demás. Escribes tus datos, envías la forma presionando un botón de envío y los datos
son enviados a un script CGI en un servidor Web por ahí. Las formas, como todo lo demás en
HTML se definen con un pequeño conjunto de etiquetas. Estas etiquetas simplemente definen los
elementos de la forma, como campos de entrda o botones. La parte difícil es escribir el código CGI
para manejar la forma de entrada; ese es un tema de otro tutorial.
Las formas compienzan con la etiqueta <form> y terminan con la etiqueta </form>. En la
forma, puedes poner además el código HTML que quieras, pero puedes usar también estas
etiquetas para definir campos de entrada:



<input> define un campo de entrada de texto, casillas de verificación, botones de
selección, o botones simples.
<select> define menús desplegables y cajas de selección.
<textarea> define un campo de entrada de texto multilínea.
La etiqueta <form> tiene:


un atributo action, que es el URL del script CGI a quien enviar los datos de la forma, y
un atributo method, que es el método HTTP usado para enviar los datos de la forma
(cualquiera de get o post funcionarán-- coordinando esto con tu script CGI).
Así, una etiqueta <form> típica es:
<form action="http://www.myhost.com/mypath/myscript.cgi" method=post>
Todos los campos de entrada en una forma tienen un nombre, definido por el atributo name de la
etiqueta <input>, <select>, o <textarea>. Todos los campos de entrada también tienen un valor,
que el usuario asigna escribiendo en él o haciendo click en él. Todo el conjunto de los datos de la
forma es representada como un conjunto de estos pares de nombre-valor cuando se envía al script
CGI.
Los campos de texto vacíos se envían como pares de nombre-valor con un valor de una
cadena vacía, pero las casillas de verificación y botones de selección que no se usan no se
envían en absoluto.
Para probar tu forma, puedes llamar a scripts simples en NCSA que te dicen qué pares de
nombre-valor fueron enviados. Para hacer esto, fija el atributo action a lo siguiente:


Para get envíos: http://hoohoo.ncsa.uiuc.edu/cgi-bin/query
Para post envíos: http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query
La Etiqueta <input>
Usa la etiqueta <input> para crear la mayoría de los campos de una forma, así como para enviar y
reestablecer botones. Tiene una gran conjunto de atributos dependiendo del tipo de atributo, el
cual puede ser cualquiera de:








text-- un campo normal de entrada (defecto)
password-- idéntico a text, pero la entrada del usuario no se despliega
checkbox-- una casilla de verificación (para simples valores sí/no)
radio-- un botón de selección (para escojer una de varias opciones)
submit-- un botón que envía los datos de la forma, cuando la entrada de datos del usuario
está lista
reset-- un botón que reestablece todos los campos de una forma a sus valores iniciales
image-- como submit, pero muestra una imágen como botón
hidden-- te permite definir pares extra de nombre-valor que se envían al script CGI pero
no se despliegan
los campos text y password tienen los siguientes atributos opcionales:



value fija el valor por defecto del campo
size fija la longitud desplegada del campo
maxlength fija la cantidad máxima de datos que pueden ser escritos
los campos checkbox y radio tienen los siguientes atributos opcionales:


value es el valor del campo cuando se verifica; el valor por defecto es "sí"
checked (no necesita valor) significa que está verificado por defecto
los campos submit y reset usan lel atributo opcional value como la etiqueta en el botón.
El campo image requiere un atributo src con el URL de la imágen a usar, y soporta la
mayoría de los atributos de la etiqueta <img>.
Para crear un conjunto de botones de selección, dáles a todos el mismo nombre pero
diferentes valores. Solamente el valor seleccionado será enviado al servidor cuando la
forma se envíe.
Usualmente, tendrás texto antes o después de los campos text, password, checkbox, y
radio, para etiquetarlos para el usuario. Ninguna etiqueta se muestra automáticamente.
Los campos submit y image de hecho pueden tener un atributo nombre, para enviar
información sobre cómo la forma fue enviada. Si tienes múltiples botones de envío, tu
script CGI puede distinguirlos por nombres o valores diferentes (solamente el botón de
envío que presionas es el que se envía como par nombre-valor). Si un campo image tiene
un atributo name de (digámoslo) "foo", entonces la localización x-y del click del mouse en
el botón es enviada como dos campos enteros con nombres de "foo.x" y "foo.y". Esto
permite un mapa de imágen con un botón image.
Ejemplos de campos <input>, en el mismo orden que se enlistan arriba son:
Estado: <input type=text name="state" value="CA" size=2 maxlength=2>
Password: <input type=password name="password">
<input type=checkbox name="masinfo" value="si" checked>Envíame más
información.
Selecciona
<br><input
<br><input
<br><input
<input
<input
<input
<input
tu sexo abajo:
type=radio name="gender" value="F">Femenino
type=radio name="gender" value="M">Masculino
type=radio name="gender" value="O">Otro
type=submit value=" OK, envíalo ">
type=reset value=" Whoops-- borra eso ">
type=image src="/images/gobutton.gif" width=60 height=30>
type=hidden name="totalsofar" value="1290.65">
La etiqueta <select>
Usa la etiqueta contenedora <select> para crear menús desplegables y listas desplazables. Entre
<select> y </select> puedes tener solamente etiquetas <option> y su texto, el cual define items en
la lista.
La etiqueta <select> tiene un atributo name como todos los campos de entrada. Otros
atributos opcionales:


size es la altura desplegada de la lista. Si es 1 (u omitida), la lista es un menú desplegable;
en otro caso, es una lista desplazable.
multiple (sin valor) deja que el usuario seleccione items múltiples de la lista (usualmente
con ctrl-click o shift-click). Cada item seleccionado deberá ser enviado como un para
nombre-valor al script CGI.
Una etiqueta <option> puede tener un atributo value, el cual es lo que se envía al script CGI si ese
item es seleccionado. Si no existe el atributo value, el valor enviado es el texto que sigue a la
etiqueta <option>.
Para hacer que un item se seleccione por defecto, usa el atributo selected en la etiqueta
<option>.
Un ejemplo de una lista desplegable <select> es:
Escoge tu color favorito:
<select name="favecolor">
<option>verde
<option>aguamarina
<option selected>esmeralda
<option>turquesa
<option>agua
<option value="verde2">verde
<option value="verde3">verde
</select>
La Etiqueta <textarea>
Usa la etiqueta contenedora <textarea> para crear cajas de texto multilínea desplazables. Todo lo
que esté entre las etiquetas <textarea> y </textarea> será el contenido inicial de la caja de
entrada, así que colócalas una junto a la otra si no quieres contenido inicial.
La etiqueta <textarea> tiene un atributo name, como cualquier otro campo de entrada. Usa
los atributos rows y cols para fijar el ancho y alto del área de texto. Nota que el área de
texto se desplaza cuanto sea necesario, de tal manera que solamente estás asignando el
tamaño al cual debe desplegarse, no el tamaño de los datos
Un ejemplo del camo de entrada <textarea>es:
<textarea name="stuff" rows=10 cols=60>Pon cosas aquí</textarea>
Otras Cosas de Formas
Intenta hacer unas cuantas formas para ver cómo se ven. No necesitas un script CGI para verlas en
tu navegador.
NCSA tiene unos cuantos ejemplos cerca del final de esta página de formas (una o dos
pantallas arriba del final). La página en sí es vieja pero aún sirve; ellos dicen que es
solamente para su navegador (Mosaic para X-Windows), pero la información sirve para
cualquier navegador y formas.
Color
Puedes asignar el color de muchas cosas en HTML ajustando los atributos de color de ciertas
etiquetas:



En la etiqueta <body>, los atributos bgcolor, text, link, vlink, y alink definen los colores
para el fondo, texto, ligas no visitadas, ligas visitadas y ligas activas de la página.
Para cambiar el color del texto de una parte de una página, usa la etiqueta contenedora
<font> con el atributo color.
Para tablas, algunos navegadores soportan el atributo bgcolor (color de fondo) en las
etiquetas <table>, <tr>, <th>, y <td>.
Los valores de los atributos de color toman una de las siguientes formas:


"#RRGGBB", donde RR, GG, y BB son los componentes rojo, verde, y azul del color en
hexadecimal de 00 a FF. ¿Confundido? Entonces checa el siguiente método:
Uno de los 16 "nombres de color más extendidos y entendidos": aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), or
yellow (yellow)
Por ejemplo, la etiqueta <body> usada en este documento es
<body bgcolor=olive link="#0000FF" vlink="#007090" alink="#00A0FF">
excepto que el color de fondo no es oliva en realidad.
No confíes en el color para cosas importantes, algunos navegadores no pueden desplegarlo.
Además de los 16 nombres estándar de color de arriba, Netscape soporta muchos otros
nombres de colores, de firebrick a mediumspringgreen. Aquí está una lista de los
nombres de color de Nestcape, parte del excelente HTML Primer de Sam Kington. Por
supuesto, solamente se despliegan correctamente con navegadores Netscape-- usa
#RRGGBB los códigos de color para captar el máximo de navegadores.
Marcos
Los marcos no son parte del HTML estándar. Son una extensión al HTML que creó Netscape. No
funcionan en todos los navegadores, así que limita la cantidad de usuarios al usarlos. Describiré la
introducción general aquí, pero Netscape tiene una página con todos los detalles.
Básicamente, creas un archivo HTML normal para cada marco, además de un archivo
HTML especial (el "documento de marcos") para contenerlos a todos. Este documento de
marcos tiene la etiqueta contenedora <frameset> en lugar de la etiqueta <body>. La
etiqueta <frameset> divide la ventana principal del navegador en múltiples renglones y
columnas. Tiene cualquiera de los atributos rows or cols, el cual es una lista de tamaños
separados por comas, ya sea en pixeles o en porcentajes del ancho total de la ventana. Por
ejemplo, <frameset cols="10%,80%,10%"> divide la ventana en tres columnas: márgenes
angostos a izquierda y derecha y una página central ancha. (Ve la página de Netscape para
más detalles.)
Entre <frameset> y </frameset> puede haber:



etiquetas <frame>, cuyos atributos src contienen los URL que deben mostrarse en esas
columnas o renglones;
otras etiquetas <frameset> para dividir después las columnas o renglones en más
renglones o columnas; or
etiquetas <noframes> y </noframes> para definir una página para navegadores que no
soportan marcos (siempre es sabio usarlas).
Los marcos pueden convertirse parte del HTML estándar algún día, una vez su complejidad se
deseche. Para las cosas oficiales en marcos y el estándar de HTML ve la sección "Next Steps" en
esta página en W3C.
Caracteres Especiales Como "<" and ">"
¿Cómo puedes desplegar los caracteres "<" y ">"? Si solamente los escribes en tu archivo HTML, el
navegador pensará que estás comenzando o finalizando una etiqueta. tienes que incluir caracteres
de escape (así se llaman), tecleando secuencias de caracteres en su lugar. Cuando se despliega tu
página, el navegador traduce las secuencias a los caracteres que necesitas.
Todas las secuencias de caracteres especiales comienzan con "&" (ampersand) y terminan
con ";" (punto y coma), y entre ellos está el nombre del caracter especial. Por ejemplo,
">" significa el símbolo de mayor-que, "<" significa el símbolo de menor-que,
""" significa comillas dobles, y "&" significa el amperand mismo. Por ejemplo,
la línea
Para desplegar el caracter < usa la secuencia <.
se verá como
Para desplegar el caracter < usa la secuencia <.
Usa este método para poner caracteres no tecleables en tus páginas; por ejemplo, "©"
muestra el símbolo de copyright ©. Aquí está una lista de caracteres especiales , con letras
acentuadas primero, seguidas de símbolos no alfabéticos.
Al contrario de los nombres de etiquetas, estos nombres de caracteres son de caso sensitivo,
así que ">" no despliega el símbolo de mayor-que.
Necesitas escapar cada "<" o ">", pero no todos los ampersand, etc. Estos códigos sólo
están ahí cuando los necesites, por ejemplo, cuando tu página no se despliegue
correctamente sin ellos (y debas verificar visualmente cada página que hagas).
Una Nota Importante sobre HTML
Una página Web puede ser desplegada en una gran variedad de dispositivos -- navegadores
gráficos, navegadores de sólo texto, dispositivos de texto-a-voz o braille, u otros
dispositivos aún no inventados. Aún los navegadores gráficos varían mucho, desde que el
usuario puede cambiar el tamaño a la ventana como desee, o ajustar sus propios colores y
tipos de letra. De acuerdo con esto, el HTML le da mucha libertad al navegador para
decidir cómo desplegar la página y sorprendentemente poco control del HTML al autor.
Técnicamente el HTML es una manera de describir qué tipo de datos estás desplegando, y
no explícitamente cómo deben desplegarse. Por ejemplo, la etiqueta <h1> dice "Esta es una
sección de encabezado principal"; no dice en realidad "Muestra esto en un tamaño grande
de letra, negrita y centrada". El navegador decide cómo debe desplegarlo. De hecho, el
navegador toma la decisión final de cómo desplegar todo; todas las etiquetas HTML son
solamente sugerencias.
Toma tiempo acostumbrarse a esta falta de control, pero es la naturaleza del Web.
Recuerda, no existe una manera de saber el tamaño y la capacidad de los navegadores que
desplegarán tu página. Solamente trata de escribir HTML de tal manera que tus páginas no
se ajusten a una forma en particular (lo cual variará mucho de usuario a usuario). De otra
manera, las tablas y diseños que se ven geniales en tu pantalla pueden verse horribles en la
de otro (siempre vale la pena checarlo). Si es posible, no confíes en el navegador cuando
muestra imágenes -- usa el atributo alt de la etiqueta <img> para definir un texto
alternativo para mostrar para los navegadores que no puedan mostrar la imágen. Si escribes
HTML flexible, cualquier buen navegador desplegará tu página aceptablemente.
En estos días, el HTML tiene etiquetas que dicen explícitamente cómo desplegar algo, en
vez de describir solamente qué tipo de dato es. Como ejemplo están las etiquetas
comúnmente usadas <b> and <i>. Etas son en realidad una ligera desviación de la filosofía
original de HTML debido a su explicitud. Los puristas a veces usan las etiquetas <strong>
y <em>, para texto fuerte y enfatizado, en lugar de <b> y <i>. Puedes usar las que quieras.
Tips para Hacer Mejores Páginas Web
1. Obtén retroalimentación de tus usuarios con tu dirección de email y escucha sus
comentarios. Esto te llevará a más mejoras que cualquier otra cosa. Por ejemplo,
Envía tus comentarios a <a href="mailto:myname@myhost.com">me</a>.
2. Revisa tu página en varios navegadores, o por lo menos en diferentes tamaños de
ventana.
3. Pide a tus amigos que naveguen en tu página y te la comenten.
4. No confíes en cosas que no funcionan en todos los navegadores como el color. Usalos si
quieres, pero asegúrate que tu página puede verse en navegadores que no los soporten.
5. Si haces un site de varias páginas relacionadas, permite la navegación intuitiva entre ellas.
6. Cuando uses la etiqueta <img>, incluye los atributos alt, width, y height. El atributo alt
define texto a mostrar para usuarios no gráficos, y los atributos width y height dan el
tamaño de la imágen en pixeles. Esto permite que un navegador despliegue el resto de la
página sin esperar a que la imágen se cargue, haciendo la vida mucho mejor para el
usuario. Por ejemplo,
<img src="bluebar.gif" alt="blue bar" width=500 height=5>
7. Escribe código fuente fácil de leer. Tendrás que editarlo alguna vez y otra gente podría
hacerlo también. El código fuente desordenado es difícil de trabajar e incrementa los
errores. Facilita las cosas para todos escribiendo código fuente claro.
8. Lee las opiniones de los estilos de otras personas en las muchas guías en este directorio de
Yahoo. Al final, no tengasmiedo de tus propias opiniones y crea tu propio estilo. Haz lo que
se vea bien. Haz lo que se ajuste a cualquier otro criterio que tengas (fácil de usar,
informativo, divertido, atractivo, etc.).
Final (y algunas ligas)
OK, ya sabes bastante de HTML para hacer páginas Web. Ve y haz una o dos páginas. Ve y enseña
a alguien más a hacerlo. El HTML tiene otras etiquetas con las que puedes jugar, pero no tienes
que. De hecho, las únicas etiquetas usadas en la elaboración de esta página ya han sido descritas
aquí.
Aqui está una buena aunque un poco técnica lista de todas las etiquetas HTML que es parte
de del Manual de Referencia HTML de Sandia-- ignora las partes específicas de Sandia.
Aquí está un resumen de las características del HTML 3.2 realmente bueno (y oficial) en el
World Wide Web Consortium ("W3C"), el cual es la organización central de investigación
que define los estándares usados en el Web.
OTRRROOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
Cómo incluir imágenes y resaltes:
Punto 22.- Para incluir una imagen (que es un archivo) en una
página se usan los siguientes comandos de apertura y cierre:
< IMG SRC="nombre.ext" >
siendo las extensiones del archivo de imagen, más corrientes:
.GIF o .JPG,...
Nota: En el ejemplo anterior, se supone que el archivo de la
imagen está en el mismo directorio o carpeta que el archivo de la
página-web.
Siempre habrá que tener en cuenta que para que en una páginaweb se pueda ver en Internet dicha imagen, tendrá que estar
también subido el correspondiente archivo de imagen al servidor
de Internet. Y que se sitúe en el mismo directorio o carpeta de
donde tenemos ubicado el archivo de la página-web.
La imagen se ha centrado en esta ocasión con los comando
externos de centrado de información:
< CENTER > < IMG SRC="payaso.gif" > < /CENTER >
Pero también se puede situar la imagen con un atributo interno a la
orden IMG SRC que es alineamiento: ALIGN
Pongamos un ejemplo de situar el archivo de imagen en la zona
derecha:
< IMG SRC="payaso.jpg" ALIGN=RIGHT >
Nota 1: Recordad que si se desea enviar archivos
de imágenes para situarlos en un servidor de
Internet habrá que hacerlo como ficheros binarios.
Nota 2: Para poner una imagen en la zona izquierda
se usaría la orden:
< IMG SRC="payaso.jpg" ALIGN=LEFT >
Punto 23.- Los archivos gráficos de formato .GIF pueden tener hasta
un máximo de 256 colores. Este formato permite hacer imágenes con
fondos transparentes y permite generar pequeñas animaciones GIF,
pero no permite una comprensión significativa del tamaño del archivo.
Punto 24.- Los archivos gráficos de formato .JPG pueden tener
hasta un máximo de 16 millones de colores. El usuario puede aplicar
un nivel de compresión del tamaño del archivo, pero a mayor
compresión mayor pérdida de calidad. Este formato no permite hacer
imágenes con fondos transparentes ni pequeñas animaciones en el
propio archivo, a cambio son los más indicados en caso de tener que
mostrar una imagen con un color más real. Existen otros formatos de
imágenes o gráficos.
Punto 25.- Para poner una barra horizontal de separación (como las que
estás viendo entre cada apartado de este Minicurso), activar sólo una vez el
comando < HR >
Punto 26.- Para poner un texto parpadeando o intermitente (esta opción
sólo funciona con el navegador Mozilla Firefox ®) se activa con el comando
< BLINK > y se desactiva con < /BLINK >
Por ejemplo: < BLINK > HOLA, sólo parpadea con Mozilla Firefox <
/BLINK >
HOLA, sólo parpadea con Mozilla Firefox
Punto 27.- Para incluir un texto en movimiento (conocido como
"marquesina") como los que aparecen en todas estas páginas se pone
el texto deseado anteponiendo y postponiendo los comandos:
Por ejemplo: < MARQUEE > Aprende a incluir textos en movimiento
< /MARQUEE >
Punto 28.- Si se quiere incluir un contador a fin de ir comprobando qué
número de visitas tienen nuestras páginas-web, hay que contactar con
un servidor que tenga servicio de contadores para poder contratarlo.
Habrá que dar: un nombre de contador, una clave y la dirección de
Internet de nuestra página-web que identifique el contador. Esto permitirá
recibir la información del número de visitas y estadísticas que tiene
nuestra página-web.
Generalizando se puede decir que más o menos la orden que
habrá que incluir en nuestra página-web es una similar a ésta:
< IMG SRC =
"http://www.servidor.com/contador/contador.cgi?df=Usuario">
Nota: Puedes conseguir tu contador gratuito en estas direcciones:



NedStat España: estadísticas y contador http://es.nedstat.net
SuperStats: estadísticas y contador http://v2.superstats.com
Contadores: http://www.servicont.com
Punto 29.- Para incluir sonido o una pequeña canción en una páginaweb hay que incluir la siguiente orden:
< EMBED SRC = "cancion.wav" >
si queremos que al acceder a la página-web aparezca de forma
inmediata la ventana de reproducción de sonidos y se reproduzca
el sonido o la canción.
Nota: No se debe olvidar que el archivo de sonido debe ser
subido al servidor de Internet siempre junto al archivo de la
página-web, al igual que los archivos de imágenes que se
incluyan. En el ejemplo se supone que el archivo de sonido está
en el mismo directorio o carpeta que el archivo de la página-web.
Los posibles formatos de archivos de sonido son variopintos, pero
muchos de ellos necesitan pequeños programas que unidos al
programa navegador nos permitan escuchar dicho archivo de
sonido especial. Si deseamos que todo el mundo escuche el
sonido existen dos formatos que lo permiten (siempre claro que el
ordenador disponga de tarjeta de sonido): .MID y .WAV
El formato .MID o Midi es para sonido de melodías, tiene la
ventaja de ocupar muy poco espacio de archivo. El formato .WAV
permite un sonido de mayor fidelidad incluyendo voces y música
(por ejemplo, una canción), pero en cambio ocupa mucho
espacio de archivo.
El sonido se puede reproducir de dos formas: De forma
automática cuando el usuario acceda a la página; o sólo cuando
el usuario pulse sobre un "enlace" que se ponga a propósito. Para
ello usaremos el atributo autostart:


< EMBED SRC = "cancion.wav" autostart=false > Aparecerá
una ventana de reproductor de sonidos y no se reproducirá el
sonido al acceder a la página, hasta que el usuario pulse el
icono de poner en marcha (Play) [ > ].
< EMBED SRC = "cancion.wav" autostart=true > así
conseguimos que al acceder a la página-web se active de forma
automática la canción.
Abajo se muestra el icono para que el usuario reproduzca el
ejemplo antes mostrado, sólo cuando desee oír el sonido de la
melodia en formato .WAV y autostart=false
Cliquea en la imagen para oír la
Melodia:
Punto 30.- La inclusión en las páginas-web de vídeos es un elemento muy atractivo que
debe tenerse en cuenta.
Actualmente es bastante fácil la inserción de estos recursos, dado que existen potentes
servidores que nos permiten emitir los archivos de vídeo añadiendo una serie de
comandos que simplemente se copian en nuestra página-web.
Os recuerdo que como dijimos en la Lección 4 es imprescindible el uso de tablas sin
borde para la maquetación adecuada de las páginas-web que contengan imágenes,
vídeos y otros recursos.
Veamos una serie de ejemplos de los códigos que se deben incluir de un par de
servidores de vídeo. Por tanto, si quisiéramos incluir en nuestra página-web un vídeo
nuestro, antes deberíamos de crearnos un usuario en uno de estos servidores, después
subir el archivo de vídeo y por último copiar la serie de códigos que nos lo indica dicho
servidor, necesarios para insertar en nuestra página-web.
Leyendo adecuadamente los códigos podemos manipularlos y disminuir el tamaño
de la ventana del vídeo o cambiar otras características. En estos ejemplos se ha
cambiado el tamaño del vídeo a mostrar en ambos casos:
<object width="350" height="280"><param name="movie"
value="http://www.youtube.com/v/Gps9CLuPrsE&hl=es_ES&fs=1&rel=0"></param><param
name="allowFullScreen" value="true"></param><param name="allowscriptaccess"
value="always"></param><embed
src="http://www.youtube.com/v/Gps9CLuPrsE&hl=es_ES&fs=1&rel=0" type="application/xshockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="350"
height="280"></embed></object>
<object width="350" height="264"><param name="allowfullscreen" value="true" /><param
name="allowscriptaccess" value="always" /><param name="movie"
value="http://vimeo.com/moogaloop.swf?clip_id=1474641&server=vimeo.com&sho
w_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1"
/><embed
src="http://vimeo.com/moogaloop.swf?clip_id=1474641&server=vimeo.com&show_t
itle=1&show_byline=1&show_portrait=0&color=&fullscreen=1"
type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always"
width="350" height="264"></embed>
Cómo hacer enlaces en una página-web:
Punto 14.- Una de las formas de hacer que desde una páginaweb podamos acceder a otra página-web es la de usar una zona
de texto que llamaremos "enlace" (en inglés link). Gracias a este
"enlace", si cliqueamos ("pinchamos" con el cursor del ratón, o
"hacer click ") sobre dicho texto podremos acceder a ver la
información de la página-web a la cual se enlaza. En este primer
ejemplo, se supone que ambas páginas-web, es decir ambos
archivos, están situados en el mismo directorio o carpeta. Para
ello, usaremos los siguientes comandos de apertura y cierre del
"texto de enlace":
< A HREF="nombre.htm" > texto de enlace < /A >
Siendo nombre.htm el nombre del archivo que contiene la
página-web que deseamos se enlace al cliquear sobre el texto.
Pongamos un ejemplo: < A HREF="salto1.htm" > Cliquea aquí < /A >
cuyo resultado es que si cliqueamos en la texto: Cliquea aquí saltaremos a la
página-web denominada "salto1.htm"
Punto 15.- Si se quiere hacer un enlace con una página-web concreta
(por ejemplo pagina34.html) en una dirección de Internet que está en un
servidor exterior, lo haremos poniendo los siguientes comandos de
apertura y cierre del texto de enlace de una forma similar a esta:
< A HREF="http://www.servidor.com/pagina34.html" > texto
de enlace < /A >
Nota: Normalmente no es necesario poner el nombre del archivo
de la página-web principal de los sitios-web de una dirección de
Internet ("index.html" o "index.htm", etc), dado que se encarga el
propio servidor del sitio-web de redirigirnos a la página-web
principal. Por tanto bastaría con poner:
< A HREF="http://www.servidor.com/" > texto de enlace < /A >
En el siguiente ejemplo hemos sustituido el patrón de ejemplo
"www.servidor.com" por la dirección de un servidor de Internet
auténtico, por ejemplo, el del Ministerio de Educación Español,
que en esta época, es "www.educacion.es"
Pongamos el ejemplo concreto: < A HREF="http://www.mec.es/" > Contacta
con el Ministerio de Educación de España < /A >
cuyo resultado es: Contacta con el Ministerio de Educación de España
Punto 16.- Si lo que se quiere es que el usuario que navegue pueda
enviar un mensaje de correo-e a alguien (en inglés e-mail) a una
dirección concreta de correo electrónico, por ejemplo, al que ha
diseñado la página se usarán los siguientes comandos de apertura y
cierre del texto de enlace:
< A HREF=MAILTO:login@servidor.com > texto de enlace < /A
>.
Nota: Siendo "login@servidor.com" la dirección de correo-e a la
que se quiere enlazar los mensajes. Si se estuviera conectado a
Internet y se cliqueara (pinchara, hacer "click") en el texto de
enlace siguiente se arrancaría el programa de correo electrónico
del navegador que se está usando para enviar un mensaje. En el
siguiente ejemplo hemos sustituido el patrón de ejemplo
"login@servidor.com" por una dirección de buzón de correo
electrónico auténtica, por ejemplo la del autor de este minicurso:
"rifervia@yahoo.com"
Pongamos el ejemplo concreto: < A HREF=MAILTO:rifervia@yahoo.com >
Escribe un mensaje al autor del curso < /A >
cuyo resultado es: Escribe un mensaje al autor del curso
Punto 17.- En vez de usar un texto para enlazar páginas, también
podemos usar una imagen o un icono (ver Lección 5) como la que
abajo se muestra para conseguir que si el usuario lo desea pueda
acceder a otra página-web concreta de información. Para ello se usan
los mismos comandos de apertura y cierre, tan sólo que deben envolver
al comando de inserción de imágenes (contenido que se explica en la
Lección 5). Repitamos el ejemplo del Punto 14, pero con un icono:
< A HREF = "salto1.htm" > < IMG SRC = "icono.gif" > < /A >
Recordamos dos cosas: que el archivo gráfico que contiene el
icono debe estar en la misma carpeta (o en una subcarpeta) de
donde está el archivo de la página-web; y también, no debemos
olvidar subir a nuestro sitio-web dicho archivo gráfico para que
pueda verse, en Internet, incluido en nuestra página-web.
Punto 18.- Si lo que deseamos es mostrar la información en una una
nueva ventana del navegador, cuando el usuario cliquee en el enlace,
deberemos añadir el siguiente atributo al comando:
< A HREF = "salto1.htm" target="a" > texto de enlace < /A >
Pongamos un ejemplo: < A HREF="salto1.htm" target="a" > Cliquea aquí <
/A >
cuyo resultado es que si cliqueamos en la texto: Cliquea aquí saltaremos en
una nueva ventana a la página-web denominada "salto1.htm"
El nombre del destino del atributo target suele tener unos valores
normalizados específicos, si lo que deseamos es que el
navegador realice ciertas acciones concretas. Aunque si sólo
queremos que se abra un ventana nueva bastaría con poner por
ejemplo, una letra o algunos símbolos: en nuestro ejemplo
anterior se puso "a". También existe el valor normalizado que
equivale a que se abra una nueva ventana, y es: "_blank"
Si deseamos que se obligue a que la página-web del enlace se
abra en la ventana actual, se pone el valor "_top". En nuestros
ejemplos básicos, no es necesario poner nada si lo que
deseamos es que todas las páginas-web de los enlaces se
muestren en una misma ventana del navegador. Estos valores
son muy útiles cuando se trabaja con marcos (frames) dentro de
una misma página-web. Existen más valores normalizados, pero
estos temas pertenecen a un curso más avanzado.
Descargar