HTML Referencia
-
Upload
luis-enrique-pinedo-macedo -
Category
Documents
-
view
241 -
download
0
Transcript of HTML Referencia
-
7/21/2019 HTML Referencia
1/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
1] Prof. Enrique Pinedo Macedo{} [email protected]
Tutorial de HTML
Internet ha crecido hasta convertirse en lo que es hoy gracias, en gran medida, al HTML. Este
lenguaje de etiquetas es la base sobre la que se construyen las pginas que se intercambian
el servidorweb y el navegador del usuario.
En sus orgenes supuso una revolucin, en tanto que permita la inclusin de imgenes en los
documentos y permita dar cierto formato al texto. Ahora sus posibilidades se han ampliado
todava ms, con la llegada de los CGIs, los lenguajes de scripting, las hojas de estilos, el
lenguaje Java y el DHTML. Conocerlo es un buen comienzo.
Indice
Captulo 1: Introduccin al HTML
1. Qu es el HTML?
2. El concepto de etiqueta (tag)
3. El concepto de argumento
4. Mi primera pgina
Captulo 2: Insercin de textos
1. Creacin de prrafos
2. Dando formato al texto
Captulo 3: Insercin de imgenes
1. Formatos de imgenes
2. Insercin de una imagen de fondo
3. Insercin de imgenes en el documento
Captulo 4: Creacin de enlaces
1. Concepto de enlace o hipervnculo
2. Enlaces externos e internos
3. Las rutas opaths
4. Creando enlaces de texto
5. Creando enlaces de imgenes
6. Eltarget u objetivo del enlace
Captulo 5: Creacin de tablas
1. Introduccin
2. Estructura de una tabla
3. Especificando las dimensiones
4. Posicionamiento del texto
5. Bordes y colores
6. Conclusin
-
7/21/2019 HTML Referencia
2/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
2] Prof. Enrique Pinedo Macedo{} [email protected]
Captulo 1: Introduccin al HTML
1. Qu es el HTML?
2. El concepto de etiqueta (tag)
3. El concepto de argumento
4. Mi primera pgina
1. Qu es el HTML?
Laworld wide web tiene una arquitectura cliente / servidor. Un programa cliente que se
ejecuta en tu ordenador (el navegador o browser) solicita informacin de un programa
servidor que se ejecuta en una mquina en cualquier otro lugar. El servidor enva la
informacin solicitada de vuelta a travs de la red al programa navegador, el cual la
interpreta para mostrarla en la pantalla.
Para que el intercambio de informacin entre el cliente y el servidor se realice de acuerdo aunos parmetros que ambos puedan entender, se utilizan protocolos de comunicaciones.
Internet se fundamenta en el protocolo TCP/IP, sobre el cual se construyen otros protocolos
de aplicacin. En el caso de laworld wide web, el protocolo utilizado es el HTTP (Hipertext
Transfer Protocol).
Cuando el navegador recibe la informacin, la interpreta para mostrarla en la pantalla. Las
pginas que se visualizan estn formadas, fundamentalmente, por textos e imgenes, con
una estructura y un formato especficos. El HTML (Hipertext Markup Language) es lo que nos
permite decirle al navegador cmo debe mostrar la informacin: formato de los textos,
colores, orden de los prrafos, etc.
A menudo observamos como una misma pgina puede visualizarse de manera diferente
(colores, ancho de tablas, formato de textos, etc.) en funcin del navegador que se utilice:
el HTML no es una forma de codificar la informacin, sino de especificar el formato que debe
darse a la informacin. Por ejemplo, podemos transmitir la palabra "Hola!" que tenemos
guardada en un fichero de texto. Pero, cmo decirle al navegador que la muestre de color
rojo y centrada? El HTML es la respuesta.
2. El concepto de etiqueta (tag)
El HTML describe el aspecto visual que debe tener una pgina mediante la utilizacin de
etiquetas (tags). Las etiquetas le indicarn al navegador la posicin relativa de los elementos
de la pgina, su tamao, las tipografas y colores a utilizar, etc.
Las etiquetas son como instrucciones que le indican al navegador como mostrar la
informacin. Existen dos clases de etiquetas:
I. Etiquetas vacas
Tiene el siguiente formato:
Se utilizan para introducir saltos de lnea, lneas horizontales, y otros elementos no asociados
al formato de textos o imgenes.
-
7/21/2019 HTML Referencia
3/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
3] Prof. Enrique Pinedo Macedo{} [email protected]
I. Etiquetas contenedoras
Tienen el siguiente formato:
...
Estas etiquetas dan un formato al texto o porcin del documento que engloban. Este tipo de
etiquetas tiene una marca inicial, y una marca final igual que la inicial, pero con el carcter"/". Todo lo que est contenido entre ambas marcas quedar sujeto al formato indicado por
la etiqueta. Por ejemplo, podemos mostrar la palabra "Hola!" en cursiva de la siguiente forma:
Hola!
La mayora de estas etiquetas pueden, a su vez, contener otras etiquetas, de cualquiera de
los dos tipos. Por ejemplo, para mostrar la palabra "Hola!" en cursiva y negrita:
Hola!
3. El concepto de argumento
Las etiquetas pueden especificar, por ejemplo, que cierta palabra aparezca en negrita. Pero
si queremos que cierta palabra aparezca de color rojo, necesitamos suministrar un parmetro:
el color. La mayora de las etiquetas tienen parmetros para indicar mltiples aspectos del
formato, como el color, el tamao, la posicin, etc.
El formato de una etiqueta con parmetros es el siguiente:
...
Por ejemplo, para mostrar la palabra "Hola!" en rojo, utilizamos la etiqueta font con elparmetro color igual a red:
Hola!
4. Mi primera pgina
Toda pgina HTML debe comenzar por la etiqueta y terminar con . Todo lo que
figure entre estas etiquetas ser interpretado por el navegador como un documento HTML.
Lo que quede fuera de ellas ser, en la mayora de los casos, ignorado.
El documento HTML se divide siempre en dos partes: cabecera y cuerpo.
4.1. Cabecera
La cabecera figura entre las etiquetas y . En ella se especifica el ttulo,
el autor, y otras caractersticas del documento que no se muestran fsicamente en la
pgina y que sirven para facilitar su indexacin (son lo que se conoce como meta
tags). En la cabecera tambin deben incluirse los scripts que necesite el documento
(JavaScript, JScript, etc.) y las definiciones de estilos (si se utilizan hojas de estilos).
4.2. Cuerpo
-
7/21/2019 HTML Referencia
4/23
-
7/21/2019 HTML Referencia
5/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
5] Prof. Enrique Pinedo Macedo{} [email protected]
Prrafo centrado.
Prrafo alineado a la izquierda...
y pegado a esta lnea.
2. Dando formato al texto
Para controlar las tipografas, colores y tamaos de los textos de tu pgina puedes utilizar la
etiqueta ... . Estetag est siendo reemplazado por la utilizacin de hojas de
estilos (CSS), pero para usuarios poco avanzados es mejor comenzar utilizando la etiqueta
, ms fcil de entender y de implementar.
Para elegir el tipo de letra que desea utilizar en un prrafo, basta con incluirlo entre ... . Por ejemplo, si queremos escribir Hola! con letra Century
Gothic utilizamos el siguiente cdigo:
Hola!
Lo que resulta en:
Hola!
Si queremos cambiar el color, emplearemos ... , donde color es un
nmero que indica el color. Este nmero est codificado en hexadecimal, y utiliza 256 bits
para cada uno de los colores primarios (rojo, verde y azul). En hexadecimal con dos
caracteres (de 0 a 9 y de la A a la F) se representan valores de 256bits. As, el color blanco se
expresa como #FFFFFF y el negro como #000000. Como se aprecia, este sistema es poco
intuitivo, por lo que se pueden usar las nomenclaturas estndar de los colores en ingls (red,para el rojo,black para el negro, etc.), pero este sistema es menos flexible y ms dependiente
del navegador.
Veamos un ejemplo:
Hola!
Que resulta en:
Hola!
Finalmente, si lo que queremos es modificar el tamao, le etiqueta a usar es ... , donde tamao es un nmero que puede indicar el tamao
absoluto (con rango de 1 a 7) o el relativo. Por ejemplo, si se utiliza size="2" e texto se mostrar
en tamao 2. Si se utiliza size="+2", se le indica al navegador que muestre el texto 2 veces ms
grande que el tamao por defecto definido.
El siguiente ejemplo
Hola!
Por supuesto, existe la posibilidad de combinar los 3 modificadores anteriores en un mismotag
, para especificar el tamao, color y tipo de letra de una sola vez. En este ejemplo
Hola!
-
7/21/2019 HTML Referencia
6/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
6] Prof. Enrique Pinedo Macedo{} [email protected]
Indicamos que el texto debe escribirse con tipografacourier, color rojo y tamao 4.
Captulo 3: Insercin de imgenes
1. Formatos de imgenes2. Insercin de una imagen de fondo
3. Insercin de imgenes en el documento
1. Formatos de imgenes
Buena parte de la potencia del HTML se basa en la posibilidad de insertar imgenes en los
documentos. Nuestras pginas adquieren de este modo un aspecto visual atractivo, y se
convierten en una potente herramienta visual para transmitir y comunicar ideas.
Aunque algunos navegadores soportan otros formatos de imgenes, fundamentalmente seutilizan los 2 que originalmente soportaron Netscape y Mosaic (uno de los primeros
navegadores):
1.1 GIF (Graphics Interchange Format)
El formato GIF (Graphics Interchange Format, Formato de Intercambio de Grficos) es
un formato propietario de CompuServe Inc. cuya especificacin data de 1987. Este
formato se caracteriza por limitar la profundidad del color a 256 colores y por poseer
un sistema de compresin rudimentario (basado en el algoritmo LZW) que es efectivo
nicamente cuando los colores de la imagen son planos (sin existencia de mltiples
transiciones de color). De esta forma, es el formato ideal para iconos, diagramas ygrficas.
Otra de sus caractersticas es la posibilidad de crear imgenes GIF entrelazadas. Esto
quiere decir que la informacin de la imagen se almacena por filas no consecutivas,
permitiendo una visualizacin progresiva de la imagen completa pero con poca
resolucin. Segn se va descargando la totalidad de la misma, va aumentando la
resolucin, hasta que se tiene la imagen final.
Pero lo que ms juego ha dado del formato GIF es la posibilidad de crear pequeas
animaciones (GIFs animados). Se basa en el almacenamiento en un mismo fichero de
imagen de varios fotogramas. El formato incluye la definicin de los tiempos entre cadafotograma. A pesar de ser la forma ms sencilla de crear animaciones, no es la ms
ptima en cuanto a tamao y calidad, por lo que queda limitado a iconos y pequeos
efectos visuales.
1.2 JPEG (Joint Photographic Experts Group)
El estndar JPG (Joint Photographic Experts Group) surge con la necesidad de crear
un formato de almacenamiento de imgenes con calidad similar a la de una
fotografa y con un alto grado de compresin (para reducir el tamao de los archivos).
De esta forma, este formato soporta 16 millones de colores y es ideal para imgenes
con multitud de colores, como fotografas.
-
7/21/2019 HTML Referencia
7/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
7] Prof. Enrique Pinedo Macedo{} [email protected]
El formato permite seleccinar el grado de compresin de la imagen, lo que es ideal
para lograr tamaos de archivo ptimos. El algoritmo de compresin que utiliza es con
prdidas, lo que implica que a mayor grado de compresin, menor es la calidad de la
imagen. Sin embargo, y debido a las caractersticas del ojo humano, determinadas
prdidas de calidad no son apreciables, por lo que se pueden conseguir compresiones
del 50% sin que se aprecie prdida de calidad.
2. Insercin de una imagen de fondo
Para insertar una imagen de fondo basta con aadir un parmetro a la etiqueta . Por
ejemplo:
Con este ejemplo indicamos que el fondo de nuestra pgina sea la imagen fondo.jpg. Esta
imagen debe existir en la misma carpeta que contenga la pgina HTML. Si queremos ordenarlos archivos en diferentes carpetas, podemos indicar dnde se encuentra nuestar imagen.
Veamoslo con otro ejemplo:
En este caso, la imagen est dentro de la carpeta imagenes. Tambin es posible enlazar con
una imagen que est en otro servidor, espicificando su URL (ver apartado 3 para una
explicacin del concepto de URL).
3. Insercin de imgenes en el documentoPara insertar una imagen en el documento se utiliza la etiqueta . Para especificar la
imagen a visualizar se utiliza el parmetro src:
La imagen aparecer en el lugar donde se encuentre la etiqueta. Mediante el uso de otros
parmetros podemos especificar la alineacin del texto alrededor de la imagen, el tamao
de la misma y otras caractersticas. Vamos a ver los ms utilizados:
align: permite especificar la alineacin de la imagen y del texto alrededor de la imagen.
Puede tomar los valores left, right, top, texttop, middle, absmiddle, baseline, bottom,absbottom. Ejemplos:
Texto alineado en el centro...
Texto alineado en el centro...
Texto alineado abajo...
-
7/21/2019 HTML Referencia
8/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
8] Prof. Enrique Pinedo Macedo{} [email protected]
Texto alineado abajo...
alt: este parmetro permite especificar un texto alternativo, que se muestra cuando el
puntero del ratn pasa por encima de la imagen. Tambin es el texto que aparece antes de
que se complete la carga de la imagen, y en lugar de la misma en los navegadores que no
soportan grficos. Ejemplo:
width / height: permiten especificar el tamao de la imagen (ancho y alto). Si no se incluyen,
la imagen se muestra a su tamao real. Aunque se desee mostrar la imagen a tamao real,
es conveniente incluir estos parmetros para permitir que el navegador construya la pginaantes de haber finalizado la carga de todas las imgenes, mostrando por lo menos el texto
del documento. Ejemplo:
border: cuando una imagen es un enlace, por defecto, el navegador la incluye en una marco
o borde (ver imagen de la izquierda). Si no se desea que aparezca este borde, debe
especificarse border="0" (imagen de la derecha). Tambin puede tomar un valor distinto de
0, en cuyo caso representa el tamao (grosor) del borde.
Captulo 4: Creacin de enlaces
1. Concepto de enlace o hipervnculo
2. Enlaces externos e internos
3. Las rutas opaths
4. Creando enlaces de texto
5. Creando enlaces de imgenes
-
7/21/2019 HTML Referencia
9/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
9] Prof. Enrique Pinedo Macedo{} [email protected]
1. Concepto de enlace o hipervnculo
Una de las mayores virtudes del lenguaje HTML, y la que le da su nombre, es la posibilidad de
crear enlaces o hipervnculos que relacionan diferentes pginas entre s. HTML son las siglas
de HiperText Mark-up Language, que podra traducirse como lenguaje de etiquetashipertexto.
Los enlaces, vnculos o hipervnculos (tambin conocidos como links, su denominacin
inglesa) son simplemente caminos hacia otras pginas de la world wide web. Su
funcionamiento es muy simple: el texto que queramos permita ir a otra pgina se marca de
forma especial (ya veremos cmo). A partir de entonces, en la pgina aparecer resaltado
(originalmente, mediante color azul y subrayado), y cuando el ratn se mueva sobre dicho
texto, cambiara el puntero para indicar que ah tenemos un enlace. Al pulsar sobre l,
instruimos al navegador para abrir la pgina a la que hace referencia.
El resultado es la vinculacin de nuestra pgina y la pgina a la que hace referencia elenlace. De esta forma, se va creando entre las pginas de diferentes sitios una maraa de
hiperenlaces, que da nombre a laworld wide web (tela de araa mundial).
2. Enlaces externos e internos
Lo primero que debemos entender, antes de lanzarnos a la creacin de enlaces, es el
funcionamiento de laworld wide web. Nuestras pginas residen en un ordenador (llamado
tpicamentehost). Este ordenador est conectado a la red permanentemente, y pone a
disposicin de todas las pginasweb
que alberga. Simplificando un poco, podemos decir
que nuestras pginas podrn enlazar con pginas de otroshosts (lo que sera un enlace
externo) o con pginas de nuestro propiohost (enlace interno).
Realmente, nuestrohost puede contener pginas de diferentessites (no slo las nuestras, sino
tambin las de otras personas o empresas). Si enlazamos con ellas tambin creamos enlaces
externos.
La diferencia fundamental est en la necesidad de indicar, para un enlace externo, el
nombre del host que contiene la pgina a la que estamos enlazando. Para los enlacesinternos, no ser necesario. El navegador sabe que si un enlace no lo indica es interno, lo que
-
7/21/2019 HTML Referencia
10/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
10] Prof. Enrique Pinedo Macedo{} [email protected]
quiere decir que la pgina enlazada est en el mismohost que la pgina que contiene el
enlace. Puede parecer complicado, pero realmente no lo es.
3. Las rutas opaths
El concepto de ruta opath tambin suele confundir al principio. Cuando creamos un sitio
web pequeo, con un centenar de pginas, quiz no nos preocupe demasiado el orden, y
no nos importe que todas ellas se encuentren en el mismo fichero. Los ficheros son como los
cajones de los espacios de almacenamiento de loshots.
Cranme, meterlo todo en un mismo cajn no es buena idea. Sobre todo si nuestrosite crece,
y tenemos miles de pginas. Mantener un site en estas condiciones es ardua tarea.
El orden siempre ayuda, lo que nos induce a crear mltiples ficheros o cajones para
almacenar las pginas. Dentro de un fichero o carpeta, podemos crear subcarpetas para
clasificar mejor, y as sucesivamente. El resultado final es que para localizar una pginadebemos indicar la ruta opath hacia ella. Esta ruta no es ms que la sucesin de los nombres
de los ficheros hasta llegar al que, finalmente, contiene la pgina.
Por ejemplo, si la pgina ejemplo1.html est en la carpeta ejemplos, la cual a su vez est en
la carpeta tutoriales, su ruta sera:
/tutoriales/ejemplos/ejemplo1.html
El concepto de ruta relativa y ruta absoluta aaden ms complejidad al asunto. La ruta se
dice absoluta si parte de la raz de nuestra zona de almacenamiento (es decir, parte de la
carpeta que contiene a cualquier otra, y que normalmente se designa simplemente por el
carcter/). El ejemplo anterior es una ruta absoluta. Se caracteriza por comenzar con dichocarcter/.
Si la ruta parte de otra carpeta, entonces es relativa. Por ejemplo, desde la pgina
ejemplo1.html podemos referenciar a una pgina contenida en la carpeta tutoriales, y de
nombre tutorial1.html, de este modo:
../tutorial1.html
Y desde tutorial1.html, podemos referenciar la pgina ejemplo1.html as:
ejemplos/ejemplo1.html
Como se observa, estos ejemplos no comienzan con el carcter/, lo que indica que son rutas
relativas. Relativas a qu? A la carpeta que almacena la pgina que contiene el enlace.
La cadena .. (dos puntos seguidos) tiene un significado especial: referencia siempre a la
carpeta padre.
4. Creando enlaces de textos
Si comprendemos los conceptos anteriores, no tendremos ninguna dificultad para crear
enlaces. La etiqueta HTML destinada a tal efecto es ... . La viene deanchor
(en ingls, ancla).
-
7/21/2019 HTML Referencia
11/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
11] Prof. Enrique Pinedo Macedo{} [email protected]
Por ejemplo, si queremos que el siguiente texto "Enlace" tenga un enlace a la pgina ndice
de este tutorial, de nombre html.html, escribiremos:
Enlace
Y el resultado ser:
Enlace
Como se ve, la sintxis es muy sencilla. El enlace anterior es relativo, porque no incluye el
nombre delhost. Si queremos crear un enlace absoluto a esta misma pgina, tendremos que
escribir:
Enlace
La codificacin de este ejemplo est partida en 2 por cuestiones de espacio (deber estar
en una sola lnea). Como se ve, ahora aparece el host (www.google.com) y la ruta
(/tutoriales/html/html.html).
5. Creando enlaces de imgenes
Para que una imagen se convierta en un enlace, basta con incluir la definicin de la imagen
dentro de las etiquetas y .
Por ejemplo:
En este ejemplo, el enlace est en la imagen imagen.gif. Y el resultado:
Como se ve, la imagen est especificada con una ruta relativa.
Captulo 5: Creacin de tablas
1. Introduccin
2. Estructura de una tabla
3. Especificando las dimensiones
4. Posicionamiento del texto
5. Bordes y colores
6. Conclusin
-
7/21/2019 HTML Referencia
12/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
12] Prof. Enrique Pinedo Macedo{} [email protected]
1. Introduccin
Quiz uno de los elementos de presentacin de datos ms comunes es las pginasweb sea
la tabla, que nos ayuda a organizar la informacin cmodamente en filas y columnas,
mejorando notablemente el aspecto visual de la misma.
Sin embargo, la utilidad de las tablas HTML va mucho ms all de la simple presentacin
ordenada de la informacin. El lenguaje HTML tiene enormes carencias en lo que a
maquetacin de los elementos de una pgina se refiere (posicionamiento de imgenes,
mrgenes, alineacin del texto...). Los diseadores han suplido tradicionalmente estas
deficiencias utilizando tablas de forma profusa.
Hoy en da es comn la presencia de varias tablas en una pginaweb, incluso tablas dentro
de celdas de otras tablas. Si an no sabes cmo crear una tabla, este es el momento de
aprender los fundamentos.
2. Estructura de una tabla
En HTML, las tablas se construyen especificando filas y celdas. El conjunto de celdas de una
fila ir encerrado en las etiquetas de fila, y el conjunto de filas de la tabla, en las etiquetas de
tabla.
El comienzo y fin de una tabla se define mediante eltag ... . Para especificar
cada fila de la tabla se utilizan las etiquetas ... . Finalmente, para especificar cadacelda de una fila habr que usar las etiquetas ... .
Teniendo en cuenta estas simples reglas, vamos a mostrar a continuacin algunos ejemplos:
Fila 1, celda 1
Fila 1, celda 2
Fila 2, celda 1Fila 2, celda 2
El ejemplo anterior crea la siguiente tabla de 2 filas y 2 columnas:
Fila 1, celda 1 Fila 1, celda 2
Fila 2, celda 1 Fila 2, celda 2
-
7/21/2019 HTML Referencia
13/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
13] Prof. Enrique Pinedo Macedo{} [email protected]
3. Dimensionando la tabla
Las etiquetas que definen la tabla admiten diferentes parmetros para lograr el correcto
dimensionamiento de las celdas y de los bordes que forman la tabla. Tambin es posible
especificar la separacin que debe existir entre el texto y el borde de la tabla.
Los parmetros que rigen estas caractersticas son los siguientes:
Parmetro Etiqueta Significado
width
Anchura total de la tabla o anchura de la celda. Puede
especificarse en % o en pixels.
height Altura de la celda. Puede especificarse en % o en pixels.
cellspacing Separacin entre celdas.
cellpadding Separacin entre el texto y el borde de la celda.
El parmetro height se especifica para el tag que define una celda, pero afectar
siempre a toda la fila. Por otra parte, podramos especificar anchuras de celdas incoherentes
(dando diferente anchura a celdas de una misma columna, o haciendo que la suma de las
anchuras no coincida). Todos estos errores suelen ser asumidos por los navegadores sin
problemas, pero hay que tener cuidado, ya que la forma en la que visualizan una tablaerrnea diferir entre navegadores de distintos fabricantes.
Jugando con los parmetros anteriores podemos ya modificar la tabla del ejemplo anterior
para obtener diferentes presentaciones. Vemoslo con algunos ejemplos:
Aumentamos la anchura (por defecto, la anchura de cada celda se adapta al texto
de la misma), y la separacin entre celdas:
Fila 1, celda 1
Fila 1, celda 2
Fila 2, celda 1
Fila 2, celda 2
Fila 1, celda 1 Fila 1, celda 2
Fila 2, celda 1 Fila 2, celda 2
-
7/21/2019 HTML Referencia
14/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
14] Prof. Enrique Pinedo Macedo{} [email protected]
Anchura y altura de la primera columna diferentes de la de la segunda, y mayor
espacio entre el texto y el borde de la tabla:
Fila 1, celda 1
Fila 1, celda 2
Fila 2, celda 1
Fila 2, celda 2
Fila 1, celda 1 Fila 1, celda 2
Fila 2, celda 1 Fila 2, celda 2
4. Posicionamiento del texto
Como se observa en los ejemplos anteriores, nos falta todava ejercer control sobre la posicin
que ocupa el texto dentro de cada celda.
Para estos menesteres existen una serie de parmetros que detallamos a continuacin, y quese aplican altag :
Parmetro Significado
align Alineacin horizontal. Puede tomar los valores left (izquierda), center (centro)
y right (derecha).
valign Alineacin vertical. Puede tomar los valores top (superior), middle (central),
botton (inferior) y baseline (lnea de base).
Jugando con estos parmetros podemos modificar el ejemplo anterior para que el texto de
la primera celda est en la parte inferior de la misma, y alineado a la derecha:
Fila 1, celda 1
Fila 1, celda 2
Fila 2, celda 1
Fila 2, celda 2
-
7/21/2019 HTML Referencia
15/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
15] Prof. Enrique Pinedo Macedo{} [email protected]
Fila 1, celda 1
Fila 1, celda 2
Fila 2, celda 1 Fila 2, celda 2
5. Bordes y colores
Para terminar esta introduccin al mundo de la creacin de tablas en HTML, slo nos falta
indicar cmo podemos mejorar el aspecto de nuestras tablas.
Lo primero que querremos hacer es jugar con la anchura del borde. Para ello se ha definidoel parmetro border de la etiqueta , que define la anchura de todos los bordes de la
tabla enpixels. Si se especifica con valor 0, el borde no se visualiza.
El color del borde lo controla el parmetro bordercolor, que se aplica al tag . Este
parmetro toma valores hexadecimales o nombres de colores predefinidos, segn el alfabeto
ingls. La forma en que se indica un color con cdigo hexadecimal es la misma que se utiliza
para otros elementos de una pgina (por ejemplo, para el color de fondo).
Finalmente, tambin podemos modificar el color de fondo de cada celda de forma
independiente, aplicando el parmetro bgcolor altag . Los colores se especifican de
igual forma.
Con todo esto, podemos mejorar el aspecto del ejemplo anterior de la siguiente forma:
Fila 1, celda 1
Fila 1, celda 2
Fila 2, celda 1
Fila 2, celda 2
Fila 1, celda 1
Fila 1, celda 2
Fila 2, celda 1 Fila 2, celda 2
-
7/21/2019 HTML Referencia
16/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
16] Prof. Enrique Pinedo Macedo{} [email protected]
6. Conclusin
Las tablas son el corazn de muchas pginas web. Bien empleadas pueden mejorar
notablemente el diseo de nuestra pgina, y facilitar la navegabilidad.
La presencia de muchas tablas posee, sin embargo, algunos inconvenientes:
Mayor complejidad en el cdigo (sobre todo si tenemos muchas tablas anidadas) lo
que dificulta el mantenimiento de la pgina
Ralentizacin de la renderizacin de la pgina en algunos navegadores (esto afecta
en mayor medida al Navegador).
Por estos motivos, aunque es bueno usar tablas, conviene no abusar de ellas.
Marcos
Un marco (o frame) es una ventana independiente dentro de la ventana general del
navegador. Cada marco tendr sus bordes y sus propias barras de desplazamiento. As cada
pgina se dividir en la prctica en varias pginas independientes.
Para crearlos necesitaremos un documento HTML especfico, que llamaremos documento de
definicin de marcos. En l especificaremos el tamao y posicin de cada marco y eldocumento HTML que contendr. Vamos a ver un ejemplo de este tipo de documento:
Mi primera pgina con marcos
-
7/21/2019 HTML Referencia
17/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
17] Prof. Enrique Pinedo Macedo{} [email protected]
Lo siento, pero slo podrs ver esta pgina si tu navegador tiene la capacidad de visualizar
marcos.
Vamos a explicar detalladamente este ejemplo antes de investigar algo ms a fondo cada
una de las etiquetas. Vemos que la cabecera de la pgina es similar a un documento normal,
pero el habitual BODY es sustituido por un FRAMESET. En cada FRAMESET se divide la ventana
actual (sea la general o un marco) en varias ventanas definidas o por el parmetro COLS o
por ROWS. En ste, separado por comas, se define el nmero de marcos y el tamao de cada
uno.
Dentro del se hacen dos cosas. Primero, definir cada uno de los marcos
ponindoles un nombre y especificando qu fichero HTML le corresponde mediante laetiqueta . Por ltimo, especificamos lo que ver el usuario en el supuesto (cada vez
ms raro) de que su navegador no soporteframes dentro de la etiqueta . Ahora
veremos todos estos elementos en mayor detalle.
1. Etiqueta
Segn el estndar, esta etiqueta slo debera contener el nmero y tamao de cada marco,
pero las extensiones de Netscape y Explorer al estndar obligan a estudiar un par de
parmetros ms.
En general, los navegadores dibujan un borde de separacin entre los marcos. Si deseas
eliminarlo puedes hacerlo de dos maneras: en las etiquetas de cada una de los
marcos contiguos al borde a eliminar o incluyendo el parmetro FRAMEBORDER=0 en el
.
Cuando eliminas ese borde, podrs ver cmo el navegador deja an un hueco entre marcos.
Este se elimina aadiendo los parmetros FRAMESPACING=0 BORDER=0.
Vamos a examinar por ltimo los parmetros COLS y ROWS. Deberemos asignarles una lista
de tamaos separada por comas. Se admiten los siguientes formatos de tamao:
Con porcentajes: Al igual que con las tablas, podemos definir el tamao de un marco
como un porcentaje del espacio total disponible.
Absolutos: Si ponemos un nmero a secas, el marco correspondiente tendr el tamao
especificado en pixels.
Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando que
queremos todo el espacio sobrante para ese marco. Podemos poner este smbolo en
varios marcos, que se repartirn el espacio equitativamente como buenos hermanos.
Si queremos que uno tenga ms deberemos ponerle al asterisco un nmero delante.
As, un marco con un espacio de 3* ser tres veces ms grande que su compaero,
que tiene un asterisco slo, el pobre.
-
7/21/2019 HTML Referencia
18/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
18] Prof. Enrique Pinedo Macedo{} [email protected]
Por ejemplo, el siguiente cdigo es una muestra de cmo combinar los tres mtodos:
Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupar el 10%,
es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como elcuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158
pixels para este ltimo y 316 para el cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definicin de marcos;
debemos asegurarnos de tener al menos un marco con un tamao relativo si queremos estar
seguros del aspecto final de la pgina.
Por ltimo, indicar que las etiquetas se pueden anidar. Esto se hace poniendo
otro donde normalmente colocamos las etiquetas tal que as:
El resultado del anidamiento lo podris contemplar aqu.
-
7/21/2019 HTML Referencia
19/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
19] Prof. Enrique Pinedo Macedo{} [email protected]
2. Etiqueta Esta etiqueta define tan slo las caractersticas de un marco determinado, no de un conjunto
de ellos. Estos son los parmetros que admite:
Parmetro Utilidad
NAME Asigna un nombre a un marco para que despus podamos referirnos a l.
SRC Indica la direccin del documento HTML que ocupar el marco.
SCROLLINGDecide si se colocan o no barras de desplazamiento al marco para que podamosmovernos por su contenido. Su valor es por defecto AUTO, que deja al navegadorla decisin. Las otras opciones que tenemos son YES y NO.
NORESIZE Si lo especificamos el usuario no podr cambiar de tamao el marco.
FRAMEBORDERAl igual que su homnimo en la etiqueta , si lo igualamos a cero seeliminar el borde con todos los marcos contiguos que tengan tambin este valora cero.
MARGINWIDTHPermite cambiar los mrgenes horizontales dentro de un marco. Se representa enpixels
MARGINHEIGHT Igual al anterior pero con mrgenes verticales.
15.3. Acceso a otros marcos
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva pginaa la que queremos acceder la veremos encerrada en ese mismo marco. Es posible que
deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que no sirve de ndice y otro
donde mostramos los contenidos sera deseable que los enlaces del marco ndice se abrieran
en el otro marco. Esto es posible hacerlo gracias al parmetro TARGET.
Este parmetro se puede colocar en tres etiquetas: , y . En las dos primeras
sirve para indicar el marco en el que abriremos ese enlace en particular y el ltimo
modificaremos el marco en el que por defecto se nos muestran todos los enlaces.
Pero para que un parmetro funcione, es habitual que le asignemos un valor, y TARGET no es
una excepcin. Para indicarle el marco que deseamos le asignaremos el nombre del mismo.As, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que
queremos se abra en el marco principal pondremos:
Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro TARGET:
_top
Elimina todos los marcos existentes y muestra la nueva pgina en la ventana original sin
marcos.
_blank
-
7/21/2019 HTML Referencia
20/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
20] Prof. Enrique Pinedo Macedo{} [email protected]
Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
_self
Muestra la nueva pgina en el marco donde est declarado el enlace.
_parent
Muestra la nueva pgina en el que contiene al marco donde se declara el
enlace. En el ejemplo que pusimos de anidados, un enlace situado en el marco
ejemplo cuyo parmetro TARGET fuese igual a _parent eliminara la separacin entre los
marcos ejemplo y principal y mostrara en ese nuevo marco la nueva pgina.
SonidoAun cuando les pueda parecer increble a algunos hombres de poca fe, es posible escuchar
sonidos (o msica) desde el propio navegador. Los navegadores incorporan desde hace
tiempo la capacidad de reproducir sonido. El nico problema es que los archivos suelen ser
grandes y, siendo algo innecesario y superfluo, poca gente incluye melodas en sus pginas.
Los formatos que se puede asegurar que los navegadores reproducirn son los archivos WAV,
MIDI y MP3.
1. Sonido activado por el usuario
La manera ms sencilla de incluir sonidos es dejando al usuario la decisin de escucharlos o
no. Para hacerlo incluiremos el sonido en el parmetro HREF de un enlace, como si fuera una
pgina HTML:
Si pulsas te saludo
2. Sonido de fondo
Lo del sonido de fondo de una pgina se reproducir empleando el siguiente cdigo:
El parmetro SRC indicar el archivo a reproducir. Esta etiqueta admite tambin otro
parmetro, LOOP, que indica el nmero de veces consecutivas que sonar el fichero. Si se
indica LOOP="infinite", el archivo se reproducir indefinidamente, mientras estemos en la
pgina. Emplear los parmetros width="0" height="0" para evitar que el reproductor se
visualice.
-
7/21/2019 HTML Referencia
21/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
21] Prof. Enrique Pinedo Macedo{} [email protected]
Los estndares del HTML
Ejemplo de ampliacin de una etiqueta. Separador , con las que se puede modificar su
apariencia y posicionamiento:
Ocupa el 75% de su anchura(width) normal.
Tiene una anchura de 300 pixels.
Se puede alinear a la izquierda:
O a la derecha:
Se puede variar su espesor:
Tambin se puede hacer que sea una lnea slida, no embutida sobre el fondo:
Texto en movimientoVamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del
lenguaje HTML (las marquesinas).
Marquesinas (Marquees)
Una marquesina (en ingls,marquee) es una ventana en la que se desplaza un texto.
La etiqueta bsica es:
Texto que se desplaza
Como no hemos aadido ningn atributo dentro de la etiqueta, el comportamiento de la
marquesina es el que tiene pordefecto: ocupa todo el ancho de la pantalla, tiene la altura
-
7/21/2019 HTML Referencia
22/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
22] Prof. Enrique Pinedo Macedo{} [email protected]
de una lnea y el texto se desplaza lentamente de derecha a izquierda. Vamos a ver los
distintos atributos que modifican su apariencia y comportamiento:
WIDHT, HEIGHT
Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un nmero
de pixels, o a un porcentaje de la pantalla. Ejemplo:
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 serTOP (arriba),
MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:
La palabra "Hola!" estar alineada con la parte
inferior de la marquesina Hola!
BEHAVIOREste atributo (que quiere decir en inglscomportamiento) sirve para definir de qu manera
se va a efectuar el desplazamiento del texto. Si es igual a SCROLL (el valor por defecto), el
texto aparece por un lado, se desplaza hasta el otro hasta desaparecer por l, y vuelve a
empezar (como los casos que hemos visto anteriormente). Si es igual a SLIDE, aparece por un
lado y se desplaza hasta llegar al otro extremo, y se para ah. Si es igual a ALTERNATE se
desplaza alternativamente hacia un lado y otro, siempre dentro de los lmites de la
marquesina. Ejemplo:
Este texto se mueve a un lado y otro, sin desaparecer
BGCOLORCon este atributo se modifica el color de fondo de la marquesina, Ejemplo:
Esta marquesina tiene un fondo de color rosa
DIRECTION
Este atributo sirve para modificar la direccin hacia la que se dirige el texto. Por defecto es
LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este atributo
a RIGHT. Ejemplo:
Este texto se dirige hacia la derecha
SCROLLAMOUNT
Define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado
en pixels. Cuanto mayor es el nmero, ms rpido avanza. Ejemplo:
Doy saltos grandes
SCROLLDELAY
Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto
mayor es el nmero ms lento avanza. Ejemplo:
Espero mucho entre cada salto
LOOP
Especifica el nmero de veces que aparecer el texto. Es indefinido por defecto.
-
7/21/2019 HTML Referencia
23/23
IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web
23] P f E i Pi d M d {} i l @ il
HSPACE, VSPACE
Definen, respectivamente, la separacin en sentido horizontal o vertical del texto que est
fuera de la marquesina.
Fuentes dentro de las marquesinas
Si se desea que el texto que aparece dentro de una marquesina tenga una fuente concreta,
distinta de la que tiene por defecto el navegador, se debe poner la etiqueta
porfuera de la etiqueta de la marquesina. Ejemplo:
Esto se ve con la fuente Impact
NOTA: Para que esto surta efecto, la fuente indicada debe estar instalada en el disco duro
del usuario. Vase all tambin cmo se pueden indicar otras fuentes alternativas.
Marquesina dentro de una Tabla:
Marquesina dentro de una tabla