1

Etiquetas de Html

1) Una Pgina Bsica Documento Encabezamiento Ttulo (de la Barra de Ttulo) Cuerpo de la Pgina Web Retorno de carro para hacer dif. Prrafos Cabecera del Texto (El tamao vara de 1 a 6, siendo 1 el mayor). Texto o imagen centrado Regla horizontal. Tipos

Regla de 75% de Ancho Regla de 300 Pixels de

Ancho Regla de

75% y alineada a la izquierda Regla de Espesor 20 Embutida en el Fondo

2) Dando Forma al texto Separar prrafos o cualquier cosa Para dar una lnea en blanco Texto en Negrita (Bold) Texto en Cursiva (Italic) Texto Preformateado (entre otras cosas respeta los espacios en blanco y

retornos de carro) Texto con Forma de mquina de escribir (No formateado) Cita Textual m2 = m2 (Para escribir ndices) vx =vx (Para escribir subndices) Listas Desordenadas (no numeradas):

Una cosa Otra cosa

Listas Ordenadas (Numeradas): Primera cosa Segunda cosa

Listas de Definicin: Cosa a Definir 1 Definicin de la cosa 1 Cosa a definir 2 Definicin cosa 2

2

3) Enlaces con otras Pginas a) Enlaces dentro de la misma Pgina Hipertexto Al pulsar Hipertexto ir donde se haya puesto la etiqueta: b) Enlaces con otra Pgina Nuestra Texto enlazado Va al inicio. Texto enlazado Va donde est la marca

alinear. Texto enlazado Va a otra pgina que esta

en la carpeta Carpeta. c) Enlaces con otra Pgina Diferente Texto enlazado d) Enlaces a una direccin de E-mail: Texto enlazado 4) Imgenes Donde descripcin es el texto que

aparece al pasar el puntero por encima Cuando la imagen est en la carpeta Carpeta. Para ponerle un titular alineado arriba Para titular alineado en medio Para titular alineado abajo Para que la imagen

sirva como enlace Para que

la imagen sirva como enlace pero sin borde Para enlazar una imagen

con otra. Un paraso tropical Para enlazar un texto con una

imagen 6) Los Estndares de Html (no hay 5) Texto en Tamao 20 (El Tamao vara de 1

3

7) Fondos Fondo de Color Uniforme. (Donde XX=Rojo,

YY=Verde, ZZ=Azul). Color para Fondo, Texto, Links, Links Visitados, y Links Activos o Pulsados.

Este texto en concreto es de color Rojo Imagen de Fondo 8) Alineacin y Dimensionado de Imgenes Imagen alineada a la Derecha Imagen alineada a la Izquierda Para que el Rellenado de Texto salte hasta debajo de la imagen dejando un espacio en blanco parcialmente, se aade a las etiquetas anteriores: Este texto esta tambin a 1 lado de la imagen en la lnea siguiente Este texto ha buscado el primer margen libre a la Izquierda Este texto ha buscado el primer margen libre a la Derecha Este texto ha buscado el primer margen libre a Ambos Lados Indica al navegador el

tamao en Pixels de la imagen (Al saberlo, el Navegador va cargando el texto mientras llegan las imgenes).

Thumbnail (Thumbnail= Enlace de 1 imagen pequea con su imagen en tamao original)

10) Tablas(no hay 9) Resto de etiquetas>/TABLE>

Fila1-Celda1Fila1-Celda2Fila1-Celda3 Fila2-Celda1Fila2-Celda2Fila2-Celda3 Tabla con Borde 1 y 2 Filas y 3 Columnas

Titular de la Tabla Tabla con Borde

5, separacin de celdas de 20 (por defecto es 2), y separacin entre el borde y el contenido de 15 (por defecto es de 1).

Celda de Cabecera (Texto negrita y centrado) (En vez de ). Al centro A la derecha A la izquierda Cabecera a la izquierda Alineaacin vertical arriba (Por defecto es en medio) Alineaacin vertical abajo Anchura de Tabla de 60%.

4

Altura de Tabla de 200 Celda para extenderse sobre 2 columnas Celda para extenderse sobre 2 filas Color de Fondo para toda la tabla Celda con ese color de fondo Tabla con esa imagen de

fondo Celda con ese color en particular 11) Formularios Formulario Formulario 2 ACTION=Accin; METHOD=Como se envan los datos(POST,GET,etc); ENCTYPE=TEXT/PLAIN=Los datos se envan como un fichero de texto Introduccin de datos. TYPE= Tipo de introduccin (TEXT=Texto; PASSWORD=Pone asteriscos). NAME= Nombre que se asocia a la variable de introduccin del dato. VALUE= Palabra asociada a un elemento. SIZE= Es la longitud del formulario ( si no se pone nada, son 20 caracteres) MAXLENGTH= Si se pone esta etiqueta se limita el n de caracteres que el usuario puede introducir. No se pone

INPUT TYPE, y donde pone ROWS son las filas y COLS las columnas

Rojo Rosa Formulario en forma de Men con 2 opciones a elegir.

Formulario con 2

opciones visibles a la vez (por defecto es 1). Formulario checkbox para

confirmar una opcin determinada (el del recuadro). Formulario checkbox

inicialmente marcado. PC < INPUT TYPE=radio NAME=YYY VALUE=Mac>Mac < INPUT TYPE=radio NAME=YYY VALUE=Linux>Linux. Formulario

con botones de radio (los del crculo), donde el valor PC aparece marcado por defecto.

< INPUT TYPE=submit VALUE=ZZZ>Botn de envo del Formulario, donde ZZZ es el texto que aparece en el botn.

5

< INPUT TYPE=reset VALUE=YYY> Botn de borrado, donde YYY es el texto que aparece en el botn.

13) Mapas (no hay 12)

Donde: Etiqueta de apertura y de nombre

Define la 1 zona activa. SHAPE= Forma (RECT= Rectangular) donde (46,40)= Coordenadas del ngulo superior izquierdo, y (250,75)= Coordenadas del ngulo inferior derecho. Tambin indica el enlace.

Define al rea completa del mapa, indica que su forma es DEFAULT=>Rectangular. NOHREF=Indica que el rea completa no es una zona activa, salvo las reas definidas anteriormente como activas.

Etiqueta de cierre del mapa. Indica la imagen del mapa mi_mapa.

Para definir una zona activa circular, donde x e y son las coordenadas de su centro y r el radio.

Para definir una zona activa poligonal donde x1,y1,x2,y2, son las coordenadas de los distintos puntos.

14) Frames

Pagina con Frames Documento o pgina donde vienen los Frames, donde hay 2 que van en columnas, con un tamao de 20%(izq) y es mipagind.html; y 80%(dcha) de nombre principal y es mipagpre.html. En lugar de la etiqueta BODY, viene FRAMESET.

Mi paginaEnlace de un marco, que al hacer click sobre l carga la pgina en el Frame principal.

6

Estas utilizando un Navegador que no soporta Frames. Pulsa para visitar mi pagina Estas 2 etiquetas son para Navegadores que no soportan los frames, y se aaden al final del documento despus de .

2 columnas, 40pixels izq y 600pixels dcha. (Si se pone un valor absoluto se mezcla con 1 relativo para que se ajuste a la pantalla de diferentes usuarios).

3 Filas, con anchos de arriba debajo de 10%, 70% y 20%.

3 Filas, con 2 anchos de 100, y la del centro el espacio restante.

3 Filas, una con 1 ancho de 100, y las restantes se reparten a la mitad el espacio restante.

3 Filas, una con 1 ancho de 100, y las restantes se reparten a la mitad el espacio restante, con 2/3 para la del medio y 1/3 la de abajo

Frame sin borde de separacin, sin huecos de separacin entre bordes (FRAMESPACING=0 para Explorer; y BORDER=0 para Netscape).

Atributos de la etiqueta :

a) SRC= Nombre de un documento HTML, o cualquier otro recurso Web (o URL) que se cargar en el Frame.

b) NAME= Nombre del Fame. c) MARGINDWIDTH= N de pixels para el ancho de los mrgenes laterales de un

Fame. d) MARGIND HEIGHT= N de pixels para el ancho de los mrgenes en altura de

un Frame. e) SCROLLING=yes,no,auto Indica si el Frame tendr o no una barra

deslizadora, el valor por defecto es auto. f) NORESIZE Indica que la ventana no se puede re-dimensionar por parte del

usuario, es decir no se puede pinchar entre 2 Frames para moverlos, por defecto son re-dimensionables.

g) FRAMEBORDER=no Elimina el borde de un Frame (tambin hay que ponerselo al Frame contiguo para eliminarlo completamente). Para eliminar los bordes de todos los Frames, se pone en la etiqueta

h) TARGET=principal Se usa para indicar en que Frame cargar un enlace. TARGET=_blank Se carga el enlace en una nueva ventana. TARGET=_self Se carga el enlace en el propio Frame. TARGET=_parent Se carga el enlace en la misma ventana. TARGET=_top Igual que _parent.

15) Sonidos Etiqueta para que

Explorer ejecute el fichero de sonido; LOOP es el numero de veces que se ejecuta

7

(si LOOP= -1 o infinite, se ejecutar indefinidamente. Si no se pone LOOP, se ejecutar 1 vez.

Etiqueta de sonido para Netscape, donde WIDTH es la anchura y HEIGHT la altura de una consola que aparece para reproducir los sonidos.

Aqu AUTOSTART indica que arranca automticamente, y LOOP lo ejecuta initerrumpidamente.

La etiqueta HIDDEN hace que la consola sea invisible.

Escucha estamusicaEnlace a un fichero de sonido

para ejecutarlo. 16) Texto en movimiento Texto que se desplazaDa un texto que se desplaza

lentamente de derecha a izquierda, ocupando 1 lnea y todo el ancho de pantalla. Esta marquesina

ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels, y est alineada debajo de la marquesina

Otros valores de ALIGN: ALIGN=TOP (arriba) ALIGN=MIDDLE (En Medio).

Otras etiquetas dentro de MARQUEE:

a) BEHAVIOR, cuyos valores son: BEHAVIOR=SCROLL (es el valor por defecto) Texto va de un lado a otro continuamente. BEHAVIOR=ALTERNATE. Se mueve alternativamente de un lado a otro sin desaparecer.

b) BGCOLOR=#FF7070. Indica el color de fondo de la marquesina. c) DIRECTION=RIGHT (o LEFT). Por defecto es LEFT, indica a que direccin

va el texto. d) SCROLLAMOUNT=50. Indica el desplazamiento del texto en cada

movimiento de avance en pixels. A mayor nmero, ms rpido avanza. e) SCROLLDELAY=200. Define el tiempo entre cada movimiento de avance, en

milisegundos. A mayor N, ms lento avanza. f) LOOP. Es el N de veces que aparecer el texto. Es indefinido por defecto. g) HSPACE, VSPACE. Definen, respectivamente, la separacin en sentido

horizontal o vertical del texto que est fuera de la marquesina. 17) Publicacin y promocin de una pgina CONTENT es lo que mostrar el motor de bsqueda, adems del ttulo de la pgina.

8

< META NAME=keywords CONTENT=HTML tutorial WWW spanish Spain html manual guia>En este ejemplo, ponemos las palabras clave para la bsqueda de nuestra pgina, una por una.

20) Ejemplos de Etiquetas para Applets de Java (No hay 18 ni19)

Indica al Navegador que cargue un applet, cuyo cdigo compilado es SineText.class, que se encuentra en el mismo directorio o carpeta que el propio documento html, y que le reserve un rea de 500*100 pixels.

Donde por ejemplo NAME=Text VALUE=Gracias por tu visita!

Igual al primero pero el applet se encuentra en el directorio o carpeta int0. 21) Trucos Diversos Enlace a un programa Netscape

Una vez cargada la pgina, despus de x segundos, saltar automticamente a la pgina http://www.nasa.com.

Etiqueta para emplear una

imagen como botn de envo de un formulario (Se usa en lugar de ).

Microsoft Internet opcion 2 Formulario con 2 opciones a elegir de un desplegable, 1 lleva a la pagina propia int2.htm, y la otra a la de Microsoft, ambas despus de un clic en el Botn.

Ejemplo de acceso con password function Saltar(pal) { window.location=pal+".htm"

9

} Introduce la palabra clave para acceder a la pgina El nombre de la pgina de acceso restringido, es la clave (Ej: xyz123) seguido de .htm. Es decir, esa pgina es xyz.htm.

23) Hojas de Estilo en cascada A) Estilo para etiquetas concretas o grupos de etiquetas

Se hace aadiendo el atributo STYLE, que contiene una serie de propiedades, cada una tiene su valor despus de 2 puntos, y separadas las propiedades por punto y coma; y estn dentro de la etiqueta correspondiente.

Prrafo con

mrgenes izquierdo y derecho de 0.5 pulgadas, y color de texto verde.

La definicin del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas. Este texto tambin es rojo y tiene 16 puntos de altura. Al igual que esta lnea. Aqu aplicamos estas propiedades a un bloque de etiquetas que estn entre las etiquetas y

Parrafo afectado por DIV Esta lnea es azul, a pesar de estar englobada dentro de DIV, porque tiene su propio estilo.

Tambin est la etiqueta para cambiar elementos ms pequeos que >DIV> (palabras o letras por ejemplo).

En este prrafo slamente queremos atribuir un estilo a esta palabra, que queremos que su fuente sea courier, de 15 puntos de altura y de color fucsia.

B) Inclusin global del estilo en un documento HTML

Se pone un bloque de instrucciones entre las etiquetas y , que estarn entre las etiquetas y .

10

BODY {background: yellow ;font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in} H1 {background: blue; font-size: 14pt;font-weight: bold; color: red} H2 {font-size: 12pt;font-weight: bold; color: red} DIV {background: URL(nubes.jpg)}

C) Enlazando distintos documentos a una hoja de estilo

Para aplicarle un mismo estilo a diferentes pginas, este estilo se guarda en un documento con todos los datos del estilo (como los datos que se ponan en B) entre y ) en un documento con la extensin .css. En las hojas donde se quiera aplicar, se pone entre y , l a etiqueta:

Donde miestilo.css, es el documento con el estilo y est en el mismo directorio del documento HTML.

D) Orden de precedencia (de mayor a menor)

1.Estilo dentro de una etiqueta. 2.Bloque de estilo en la cabecera del documento. 3.Enlace a un fichero que contiene la hoja de estilo.

24) Atributos de las hojas de Estilo en cascada font-size, define el tamao del texto:

{font-size: 12pt} En puntos {font-size: 1in} En pulgadas {font-size: 5cm} En centmetros {font-size: 24px} En pixels

font-family, establece la fuente del texto:

{font-family: Arial} .Se puede especificar una nica fuente {font-family: Arial, Helvetica} otras fuentes alternativas, separadas por una coma {font-family: "Courier New"} Para fuentes cuyo nombre consiste en varias palabras

font-weight, establece el espesor de la fuente. Los valores aceptados (extra-light,

light, demi-light, medium, demi-bold, bold, y extra-bold) dependen en las fuentes que tenga instaladas el usuario: {font-weight: bold}

font-style, establece la fuente como cursiva:

{font-style: italic} line-height, Este atributo establece la separacin entre lneas, que se puede expresar

en puntos (pt), pulgadas (in), centmetros (cm), pixels (px) o porcentaje (%): {line-height: 20pt}

11

color, establece el color del texto de acuerdo con su valor hexadecimal, o usando los nombres de colores: {color: #33CC00} {color: red}

text-decoration, permite remarcar el texto. Los valores son underline (subrayado),

line-through (tachado), none (ninguno) e italic (cursiva): {text-decoration: underline}

margin-left, margin-right, y margin-top, establecen los mrgenes. Se pueden

especificar los mrgenes en puntos, pulgadas (inches), centmetros o pixels. Se pueden usar valores negativos, entonces, en vez de contraerse el margen, se extender en la direccin opuesta: BODY {margin-left: 0.5in; margin-right: 0.5in; margin-top: 1in}

text-align, permite justificar los elementos HTML a la izquierda, al centro o a la

derecha: {text-align: center}

text-indent, adems de establecer los mrgenes, puede provocar que la primera

palabra del prrafo se desplace una cantidad deseada. Se puede expresar en puntos, pulgadas, centmetros o pixels. Se pueden usar valores negativos, que sacan el texto hacia los mrgenes: P {text-indent: 0.5cm} hace que los prrafos que se crean con la etiqueta , empiecen con su primera lnea indentada 0.5 centmetros.

Background, destaca secciones de una pgina, estableciendo un color de fondo o una

imagen de fondo. Se puede poner, por ejemplo, una imagen de fondo en un prrafo determinado. Para colocar una imagen, se especifica el URL entre parntesis (no entre comillas, como es lo habitual): {background: red} este prrafo tiene un fondo con imgenes

25) Consejos de utilizacin de las hojas de Estilo en cascada Podemos agrupar distintos atributos, para atribuirlos a diferentes etiquetas:

H1, H2, H3 {font-size: 15pt; font-weight: bold; color: maroon} Agrupacin de los atributos del texto. Donde los atributos font-wight y font-style se

deben especificar antes que los dems: P {font: bold italic 12pt/20pt Times, serif}

12

Agrupacin de los atributos de los mrgenes. El orden de colocacin debe ser: superior (top), derecho (right) e izquierdo (left). Si se pone un nico valor, ser aplicado a los tres mrgenes: BODY {margin: 20px -10px-10px}

Variaciones en la inclusin global de estilo. Se puede meter en la etiqueta inicial de

la pgina, que define el estilo, pequeas variaciones para luego usar una u otra opcin segn queramos: BODY {background: yellow ; font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in} H1 {background: blue; font-size: 14pt; font-weight: bold; color: red} H2.rojo {font-size: 12pt; font-weight: bold; color: red} H2.verde {font-size: 12pt; font-weight: bold; color: green} H2.azul {font-size: 12pt; font-weight: bold; color: blue} DIV {background: URL(nubes.jpg)} Luego en la pgina pondramos la que quisiramos: Esta cabecera ser de color verde

Aplicacin de estilo a los enlaces visitados y pulsados:

A:link {color: red} enlaces sin visitar de color rojo A:visited {color: green} y una vez visitados de color verde A:visited {color: fuchsia; text-decoration: none} hace que los enlaces visitados sean de color fucsia y no estn subrayados.

Se pueden aadir comentarios propios a las hojas de estilo en cualquier sitio de la

especificacin, siempre que vayan englobados entre los caracteres /* y */: H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde para las cabeceras de nivel 1 */

Para establecer un estilo global a una pgina entera, lo ms apropiado es atriburselo

a la etiqueta : BODY {font: 10pt/11pt Arial, Helvetica, sans-serif; background: url(nubes.jpg); margin-left: 0.5in; margin-right: 0.5in}

1) Una Pgina Bsica2) Dando Forma al texto3) Enlaces con otras Pginas4) Imgenes6) Los Estndares de Html (no hay 5)7) Fondos8) Alineacin y Dimensionado de Imgenes10) Tablas(no hay 9)11) Formularios13) Mapas (no hay 12)14) Frames15) Sonidos16) Texto en movimiento17) Publicacin y promocin de una pgina20) Ejemplos de Etiquetas para Applets de Java (No hay 18 ni19)21) Trucos Diversos23) Hojas de Estilo en cascada24) Atributos de las hojas de Estilo en cascada25) Consejos de utilizacin de las hojas de Estilo en cascada