Las Etiquetas de HTML

8/15/2019 Las Etiquetas de HTML

1/66

Etiquetas básicas de HTMLLas etiquetas más simples y de uso más común en HTML.

Etiquetas Básicas

Headings

Nos definen el tamaño de un título o cabecera.

nos da el tipo de letra más grande.

nos da el tipo de letra más pequeño.HTML agrega automáticamente un espacio antes y despus de cada título.

al ser usado como título de una página !eb" es de suma importancia ya que esuno de los parámetros que #oogle y demás buscadores tiene en cuenta" a la $ora deinde%ar un sitio &eb.

E'emploCódigo

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Resultado

Heading (Heading )

Heading *

Heading 4

Heading +

Heading ,

-árrafos

Los párrafos se definen con la etiqueta

.


2/66

E'emploCódigo

Párrafos

Este es el primer párrafo

! este es el seg"ndo párrafo

Resultado

Este es el primer párrafo.

este es el segundo párrafo.

/omentarios

La etiqueta se utili0a para insertar un comentario dentro del c1digo queestamos escribiendo. El mismo es ignorado por el na2egador al momento de leerlo. Loscomentarios nos sir2en para e%plicar me'or el c1digo y son de gran ayuda en elmomento que necesitemos editarlo.

3 Nota que el signo de e%clamaci1n se coloca solo al principio del c1digo.

4alto de línea

El salto de línea está definido con la etiqueta
. Es utili0ado cuando queremoscortar una línea sin necesidad de terminar con el párrafo. La etiqueta
obliga asaltar de línea dondequiera que la ubiquemos.

E'emploCódigo

Esto es
"n salto de l#
nea

Resultado

Esto esun salto de lí nea.

Tra0ar una línea

La etiqueta nos permite tra0ar una línea $ori0ontal como las que separan lasdistintas secciones de este tutorial.

La etiqueta no tiene cierre.


3/66

E'emploCódigo

Resultado

Tabla con las etiquetas básicas

Etiquetas Descripción Ej.

5$(6 a 5$,6 7efine el tamaño de los encabe0ados

5p6 7efine un párrafo

5899 996 7efine un comentario

5br6 7efine un salto de línea

5$r6 7efine una línea $ori0ontal

:ormato de te%to con HTMLElige como decorar y visualizar los textos de tu sitio.

:ormato básico del te%toHTML nos permite definir el formato de 2isuali0aci1n del te%to en la pantalla.

Muy ;til para cuando queramos resaltar o enfati0ar un te%to en especial.

Tambin muy usado para subrayar o escribir subíndices o superíndices.

Estos" son solo algunos e'emplos de lo que podemos $acer con estos elementos

-ara ello utili0amos las siguientes etiquetas<

E'emploCódigo

$e%to en negrita

$e%to grande

$e%to enfati&ado

$e%to en itáli'a

Resultado

Te%to normal Teto en negritaTe%to normal Te%to grandeTe%to normal Texto enfatizadoTe%to normal Texto en itálica

http://www.virtualnauta.com/html-etiqueta-h1http://www.virtualnauta.com/html-etiqueta-h6http://www.virtualnauta.com/html-etiqueta-phttp://www.virtualnauta.com/html-etiqueta-brhttp://www.virtualnauta.com/html-etiqueta-hrhttp://www.virtualnauta.com/html-etiqueta-h6http://www.virtualnauta.com/html-etiqueta-phttp://www.virtualnauta.com/html-etiqueta-brhttp://www.virtualnauta.com/html-etiqueta-hrhttp://www.virtualnauta.com/html-etiqueta-h1


4/66

$e%to pe("e)o

$e%to f"erte

$e%to s"b#ndi'e


5/66

5code6 7efine un te%to en c1digo de computadora

5>bd6 7efine un te%to del teclado

5samp6 7efine un te%to e'emplo de c1digo de computadora

52ar6 7efine una 2ariable

5pre6 7efine un te%to preformateado

5listing6 7esaprobado. =se 5pre6 en su lugar

5plainte%t6 7esaprobado. =se 5pre6 en su lugar

5%mp6 7esaprobado. =se 5pre6 en su lugar

Etiquetas de citaciones y definiciones

Etiquetas Descripción

5abbr6 @ndica una forma abre2iada Ap.e'." !!!" HTT-" etc.

5acronym6 @ndica un acr1nimo Ap.e'." !C/ "radar" autob;s" etc.

5address6 7efine la informaci1n sobre el autor

5bdo6 7efine la direcci1n del te%to Ap.e'." de i0q. a der." de der. a i0q.

5bloc>quote6 7esigna una cita larga

5q6 7esigna una cita corta

5cite6 /ontiene una cita o una referencia a otras fuentes

5dfn6 @ndica que aquí es donde se define el trmino encerrado

/aracteres Especiales en HTML

so de acentos! signos de apertura de interrogaci"n y exclamaci"n! e#es! espacio

en $lanco! etc.

/aracteres especiales

Muc$as 2eces necesitamos incluir en nuestros te%tos" signos que tienen un significadoespecial en HTML

http://www.virtualnauta.com/html-etiqueta-codehttp://www.virtualnauta.com/html-etiqueta-kbdhttp://www.virtualnauta.com/html-etiqueta-samphttp://www.virtualnauta.com/html-etiqueta-varhttp://www.virtualnauta.com/html-etiqueta-prehttp://www.virtualnauta.com/html-etiqueta-prehttp://www.virtualnauta.com/html-etiqueta-prehttp://www.virtualnauta.com/html-etiqueta-prehttp://www.virtualnauta.com/html-etiqueta-abbrhttp://www.virtualnauta.com/html-etiqueta-acronymhttp://www.virtualnauta.com/html-etiqueta-addresshttp://www.virtualnauta.com/html-etiqueta-bdohttp://www.virtualnauta.com/html-etiqueta-blockquotehttp://www.virtualnauta.com/html-etiqueta-qhttp://www.virtualnauta.com/html-etiqueta-citehttp://www.virtualnauta.com/html-etiqueta-dfnhttp://www.virtualnauta.com/html-etiqueta-codehttp://www.virtualnauta.com/html-etiqueta-kbdhttp://www.virtualnauta.com/html-etiqueta-samphttp://www.virtualnauta.com/html-etiqueta-varhttp://www.virtualnauta.com/html-etiqueta-prehttp://www.virtualnauta.com/html-etiqueta-prehttp://www.virtualnauta.com/html-etiqueta-prehttp://www.virtualnauta.com/html-etiqueta-prehttp://www.virtualnauta.com/html-etiqueta-abbrhttp://www.virtualnauta.com/html-etiqueta-acronymhttp://www.virtualnauta.com/html-etiqueta-addresshttp://www.virtualnauta.com/html-etiqueta-bdohttp://www.virtualnauta.com/html-etiqueta-blockquotehttp://www.virtualnauta.com/html-etiqueta-qhttp://www.virtualnauta.com/html-etiqueta-citehttp://www.virtualnauta.com/html-etiqueta-dfn


6/66

Apor e'. ?


7/66

V may;scula con acento FacuteG F)((G

W = may;scula con acento F=acuteG F)(JG

X X may;scula FNtildeG F)IG

Y = may;scula con diresis F=umlG F))IG

Enlaces en HTML

La propiedad más importante de %nternet! es la posi$ilidad de conectarse los unos

con los otros.

Los Enlaces o Lin>s

Los enlaces o lin>s Aen ingls nos permiten conectarnos con otros documentos<

• una imagen

• un 2ideo

• un arc$i2o de sonido

• sitios en la &eb Aotra página &eb

• mandar un email

-ara ello debemos usar la etiqueta que pro2iene de la primera letra de la palabraanchorAancla.

La etiqueta tiene como cierre .

4inta%isTe%to del enlace

E'emplo

Zamos a crear un enlace $acia la $ome de Zirtualnauta.com

Código

*a home de +irt"alna"ta


8/66

Resultado

La $ome de Zirtualnauta

EL atributo target

4e utili0a para definir donde queremos que se abra el documento al presionar sobre elenlace.

E'emplo

Zamos a abrir el documento en una nue2a página del na2egador.

Código


9/66

/reando un enlace a un email

4e utili0a en caso que queramos que un enlace mande un email.

En el momento que presionamos dic$o lin> se abrirá automaticamente el programa deemail que tenemos definido por defecto.

E'emploCódigo

andar email

Resultado

Mandar email

&ailto0 nos indica la direcci1n email a la que 2a dirigida" en estee'emplo< alguien/g&ail.co&.

=n enlace a partir de una imagen

Muc$as 2eces queremos usar una imagen como enlace a otro documento. -ara ellodebemos colocar la etiqueta entre las etiquetas 5a6 y 5[a6 en lugar delte%to.

E'emploCódigo


10/66

$ref =]L 7irecci1n =]L a conectar.

$reflang c1digo delengua'e

Especifica el lengua'e de la =]L.

name nombre de

secci1n

-ara crear un marcapáginas dentro de un

documento.

rel alternate Especifica la relaci1n entre el documento actual yel destino del 2ínculo.

designates

styles$eet

start

ne%t

pre2

contents

inde%

glossary

copyrig$t

c$apter

section

subsection

apendi%

$elp

boo>mar>

nofollo&

re2 alternate Especifica la relaci1n entre el destino del 2ínculo y

el documento actualA2ínculo in2erso.designates

styles$eet

start

ne%t


11/66

pre2

contents

inde%

glossary

copyrig$t

c$apter

section

subsection

apendi%

$elp

boo>mar>

coords coordenadas Especifica las coordenadas de la superficie quecontiene el enlace.

s$ape 7efine la forma del área.

rect =samos coords\?i0quierda" arriba" derec$a" aba'o?

rectangle

circ =samos coords\?centro %" centro y" radio?

circle

poly =samos coords\?%(" y(" %)" y)" .." %n" yn?

polygon

target @ndica donde abrir el =]L.

^blan> El =]L se abrirá en una nue2a 2entana.

^parent El =]L se abrirá en el frameset padre.

^self El =]L se abrirá en el mismo frame donde fueapretado.

^top El =]L se abrir1 en una 2entana de tamañocompleto.

type tipo de Especifica el tipo de contenido a conectar.


12/66

contenido

Ctributos estándard

id" class" title" style" dir" lang" tabinde%" access>ey

4i desea una descripci1n completa" dirí'ase a< atributos estándard.

E2entos intrínsecos

onfocus" onblur" onclic>" ondblclic>" onmousedo&n" onmouseup" onmouseo2er"onmousemo2e" onmouseout" on>eypress" on>eydo&n" on>eyup

:rames en HTML

&ividimos la página en partes más peque#as y en cada una de ellas visualizamos

documentos diferentes.

Los :rames

Los framesAmarcos en español permiten a los autores presentar documentos con2istas m;ltiples.

Esto posibilita mantener cierta informaci1n 2isible mientras otras 2istas se despla0an ose sustituyen.

/ada 2ista es un documento independiente de los otros.

La etiqueta frameset

http://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/html-atributos-estandard


13/66


14/66

5frame src\?[frame).$tm?65[frameset6

La etiqueta iframe

La etiqueta


15/66

frameborder I Especifica si se mostrará o no el bordealrededor del frame.

(

longdesc =]L =]L con una larga descripci1n del contenidodel frame Ase usa para na2egadores que nosoportan frames.

margin$eig$t pi%els 7efine el margen superior e inferior delframe.

margin&idt$ pi%els 7efine el margen i0quierdo y derec$o delframe.

name frame^name 7efine un nombre para el frame.

noresi0e noresi0e No le permite al usuario modificar el tamañodel frame.

scrolling yes 7etermina la acci1n de la barra dedespla0amiento.

no

auto

src =]L Crc$i2o que 2a a ser mostrado en el frame.

5noframes6 Muestra un te%to para los na2egadores queno soportan frames.

5iframe6 /rea un frame en línea que contiene otrodocumento.

align left Clineaci1n del iframe con respecto al te%to.

rig$t

top

middle

bottom

frameborder I Especifica si se mostrará o no el bordealrededor del iframe.

(

$eig$t pi%els 7efine la altura del iframe.

http://www.virtualnauta.com/html-etiqueta-noframeshttp://www.virtualnauta.com/html-etiqueta-iframehttp://www.virtualnauta.com/html-etiqueta-noframeshttp://www.virtualnauta.com/html-etiqueta-iframe


16/66

`

longdesc =]L =]L con una larga descripci1n del contenidodel iframe Ase usa para na2egadores que nosoportan frames.

margin$eig$t pi%els 7efine el margen superior e inferior deliframe.

margin&idt$ pi%els 7efine el margen i0quierdo y el derec$o deliframe.

name nombre 7efine un nombre para el iframe.

scrolling yes 7etermina la acci1n de la barra dedespla0amiento.

no

auto

src =]L Crc$i2o que 2a a ser mostrado en el iframe.

&idt$ pi%els 7efine el anc$o del iframe.

`


id" class" title" style" lang

4i deseas una descripci1n completa" dirígete a" ondblclic>" onmousedo&n" onmouseup" onmouseo2er" onmousemo2e"onmouseout" on>eypress" on>eydo&n" on>eyup

Tablas de HTML

Las usamos para componer un sitio o simplemente como ta$la de datos.

Las tablas

Las tablas son $erramientas muy ;tiles para presentar datos en forma de tablas y parael diseño de páginas y ubicaci1n de te%tos y gráficos dentro de las mismas.

http://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/html-atributos-estandard


17/66

/aracterísticas de las tablas

7efinimos las tablas con la etiqueta.La tabla está di2idida en filas definidas con la etiqueta . a su 2e0 cada fila di2idida en celdas definidas con la etiqueta .Las celdas pueden contener te%to" imágenes" formularios" listas" otras tablas" etc.

4inta%is

contenido celda (contenido celda )

E'emplo

Zamos a crear una pequeña tabla para 2er su comportamiento

Código

ombre

pellido

Pedro

ar'ia

Resultado

Nombre Cpellido

-edro #arcia

Bordes de las tablas

-ara que se 2isualicen los bordes de una tabla" debemos agregar elatributo border 'unto con el 2alor e%presado en pi%els" de lo contrario no se 2erán losbordes que di2iden las celdas de la tabla.

E'emploCódigo

orde

3 pi%els

Resultado

Borde * pi%els


18/66

Zeamos un e'emplo sin bordes

E'emploCódigo

Esta tabla es

in bordes

Resultado

Esta tabla es 4in bordes

)ota0 al no colocar el atributo border" los bordes no se 2isuali0an pero la tabla e%iste.

Encabe0ados de las tablas

Los encabe0ados de una tabla se definen con la etiqueta .

E'emploCódigo

ombre pellido

Pedro

ar'ia

7"an

Pere&

Resultado

)o&bre pellido

-edro #arciauan -ere0

La etiqueta siempre muestra los encabe0ados remarcados.

Márgenes de las celdas

Es el espacio que se encuentra entre los bordes de la celda y su contenido.7efinimos los márgenes con el atributo cellpadding.


19/66

E'emploCódigo

ombrepellido

Pedro

ar'ia

Resultado

)o&bre pellido

-edro #arcía

)ota0 en este e'emplo podemos obser2ar que el atributo cellpadding de'a )I pi%els mínimoentre las palabras dentro de cada celda y los bordes de las mismas.

Espaciado entre celdas

Es el espacio que se encuentra entre celda y celda.El mismo está definido con el atributo cellspacing.

E'emploCódigo

ombrepellido

Pedro

ar'ia

Resultado

)o&bre pellido

-edro #arcia

)ota0 en este e'emplo el atributo cellspacing de'a un espacio de (+ pi%els entre las celdas de ltabla.

Etiquetas y atributos de las tablas

Etiquetas tributos 2alor Descripción Ej

5table6 7efine una tabla.

align left Clínea las tablas. =se la propiedad position

http://www.virtualnauta.com/html-etiqueta-tablehttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/html-etiqueta-tablehttp://www.virtualnauta.com/css-ubicacion-position


20/66

7esaprobado de /44 en su lugar.center

rig$t

bgcolor7esaprobado

rgbA%"%"% /olor de fondo de las tablas. =se lapropiedad bac>ground de /44 en su lugar.

%%%%%%

nombre^color

border pi%els Espesor del borde de la tabla.

cellpadding pi%els Espacio entre la pared de la celda y elcontenido.

`

cellspacing pi%els Espacio entre celdas.

`

frame 2oid Especifica cual de los bordes alrededor dela tabla será 2isible.

abo2e

belo&

$sides

l$s

r$s

2sides

bo%

border

rules none Especifica las líneas di2isorias $ori0ontalesy 2erticales.

groups

ro&s

cols

all

http://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/css-fondo-background


21/66

summary te%to ]esumen del contenido de la tabla parana2egadores sin 2isuali0ador.

&idt$ ` Especifica el anc$o de la tabla.

pi%els

5tr6 7efine una fila.

align rig$t Clínea $ori0ontalmente el te%to en lacelda.

left

center

'ustify

c$arbgcolor7esaprobado

rgbA%"%"% /olor de fondo de las celdas. =se lapropiedad bac>ground de /44 en su lugar.

%%%%%%

nombre^color

c$ar carácter Especifica que un carácter A?.?o?"? act;ecomo e'e de alineaci1n.)ota0 usar 'unto con align\?c$ar?.

c$aroff pi%els Especifica la distancia entre el borde y elprimer carácter de alineaci1n en cadalínea.`

2align top Especifica la posici1n 2ertical de los datosdentro de la celda.

middle

bottom

baseline

5td65t$6

7efine una celda.

7efine los encabe0ados de una tabla.

abbr te%to abre2iado Especifica una 2ersi1n abre2iada delcontenido de una celda.

align left Clínea $ori0ontalmente el te%to en la

http://www.virtualnauta.com/html-etiqueta-trhttp://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/html-etiqueta-tdhttp://www.virtualnauta.com/html-etiqueta-thhttp://www.virtualnauta.com/html-etiqueta-trhttp://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/html-etiqueta-tdhttp://www.virtualnauta.com/html-etiqueta-th


22/66

celda.rig$t

center

'ustify

c$ar

a%is nombre de lacategoría

4it;a una celda en categoríasconceptuales.

bgcolor7esaprobado

rgbA%"%"% /olor de fondo de las celdas. =se lapropiedad bac>ground de /44 en su lugar.

%%%%%%

nombre^color

c$ar carácter Especifica que un carácter act;e como e'ede alineaci1n.)ota0 usar 'unto con align\?c$ar?.


colspan n;mero @ndica el n;mero de columnas que estacelda debe ane%ar.

$eaders lista de nombresde celdas

Lista de celdas de encabe0ado queproporcionan informaci1n de encabe0adopara la celda de datos actual.

$eig$t7esaprobado

pi%els Especifica la altura de la celda. =se lapropiedad $eig$t de /44 en su lugar.

no&rap7esaprobado

no&rap 4i está presente" des$abilita el a'usteautomático de líneas. =se /44 en su lugar.

ro&span n;mero @ndica el n;mero de filas que esta celdadebe ane%ar.

scope col Este atributo especifica el con'unto de

celdas de datos para las cuales la celda deencabe0ado actual proporciona informaci1nde encabe0ado.

colgroup

ro&

ro&group

2align top Especifica la posici1n 2ertical de los datos

http://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/css-homehttp://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/css-fondo-backgroundhttp://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/css-home


23/66

dentro de una celda.middle

bottom

baseline

&idt$7esaprobado

pi%els Especifica el anc$o de la celda. =se lapropiedad &idt$ de /44 en su lugar.

`

5caption6 7efine el título de la tabla.

align7esaprobado

top =bicaci1n del título con respecto a la tabla.=se la propiedad caption9side de /44 ensu lugar.bottom

left

rig$t

5colgroup65col6

/rea un grupo e%plícito de columnas.

-ermite a los autores compartir atributosentre 2arias columnas.

align rig$t Clínea $ori0ontalmente el contenido en elgrupo de columnas.

left

center 'ustify

c$ar

c$ar carácter Especifica que un carácter act;e como e'ede alineaci1n.)ota0 usar 'unto con align\?c$ar?.


span n;mero Especifica el n;mero de columnas de ungrupo de columnas.

2align top Clínea 2erticalmente el contenido en elgrupo de columnas.

middle

http://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/html-etiqueta-captionhttp://www.virtualnauta.com/css-tabla-tablehttp://www.virtualnauta.com/html-etiqueta-colgrouphttp://www.virtualnauta.com/html-etiqueta-colhttp://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/html-etiqueta-captionhttp://www.virtualnauta.com/css-tabla-tablehttp://www.virtualnauta.com/html-etiqueta-colgrouphttp://www.virtualnauta.com/html-etiqueta-col


24/66

bottom

baseline

&idt$ ` 7efine el anc$o del grupo de columnas.

pi%els

longitud relati2a

5t$ead65tbody65tfoot6

Las filas de una tabla pueden agruparse enuna cabecera de tabla 5t$ead6" un pie detabla 5tfoot6 y una o más secciones decuerpo de tabla 5tbody6.

align rig$t Clínea $ori0ontalmente el te%to en lacelda.

left

center

'ustify

c$ar

c$ar c$aracter Especifica que un carácter act;e como e'ede alineaci1n.)ota0 usar 'unto con align\?c$ar?.

c$aroff pi%els Especifica la distancia entre el borde y elprimer carácter de alineaci1n en cada

línea.`

2align top Especifica la posici1n 2ertical de los datosdentro de la celda.

middle

bottom

baseline


id" class" title" style" dir" lang



onclic>" ondblclic>" onmousedo&n" onmouseup" onmouseo2er" onmousemo2e"onmouseout" on>eypress" on>eydo&n" on>eyup

http://www.virtualnauta.com/html-etiqueta-theadhttp://www.virtualnauta.com/html-etiqueta-tbodyhttp://www.virtualnauta.com/html-etiqueta-tfoothttp://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/html-etiqueta-theadhttp://www.virtualnauta.com/html-etiqueta-tbodyhttp://www.virtualnauta.com/html-etiqueta-tfoothttp://www.virtualnauta.com/html-atributos-estandard


25/66


26/66

E%ponen la lista anteponiendo un punto" cuadrado o triángulo negro.

Las listas desordenadas comien0an con la etiqueta y para cada uno de los @temsde la misma utili0amos la etiqueta .

E'emploCódigo

$omates

Pepinos

9ebollas

Resultado

• Tomates

• -epinos

• /ebollas

Listas de definici1n

4e utili0an para definir trminos.

Las listas de definici1n se representan con la etiqueta .Los trminos de las mismas con .La definici1n de esos trminos comien0a con .

E'emploCódigo

9ho'olate

Elaborado a base de 'a'ao

9aramelo

Elaborado a base de a&:'ar

Resultado

/$ocolateElaborado a base de cacao

/aramelo

Elaborado a base de a0ucar

7entro de las etiquetas se pueden agregar imágenes" párrafos" otras listas" etc.

Etiquetas y atributos de las listas

Etiquetas tributos 2alor Descripción Ej.

5ol6 7efine una lista ordenada.

compact7esaprobado

]epresenta la lista de un modo máscompacto. =se las propiedades de laslistas en /44 en su lugar.

http://www.virtualnauta.com/html-etiqueta-olhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/html-etiqueta-olhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-list


27/66

start7esaprobado

n;mero del (ob'eto

Especifica el n;mero del primer ob'eto deuna lista. =se las propiedades de las listasen /44 en su lugar.

type7esaprobado

C Especifica el estilo de un ob'eto de lista.=se las propiedades de las listas en

/44en su lugar.a

@

i

(

5ul6 7efine una lista desordenada.

compact

7esaprobado

]epresenta la lista de un modo más

compacto. =se las propiedades de laslistas en /44 en su lugar.

type7esaprobado

disc Especifica el estilo de un ob'eto de lista.=se las propiedades de las listas en/44en su lugar.square

circle

5li6 7efine el comien0o del @tem.

type

7esaprobado

disc Especifica el estilo de un ob'eto de lista.

=se las propiedades de las listas en/44en su lugar.square

circle

C

a

@

i

(

2alue7esaprobado

n;mero delob'eto

Establece el n;mero del ob'eto de listaactual. =se las propiedades de las listasen /44 en su lugar.

http://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/html-etiqueta-ulhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/html-etiqueta-lihttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/html-etiqueta-ulhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/html-etiqueta-lihttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-listhttp://www.virtualnauta.com/css-lista-list


28/66

5dl6 7efine una lista de definici1n.

5dt6 Trminos de los ob'etos de lista.

5dd6 7escripci1n de los ob'etos de lista.

5dir67esaprobado

Cct;a como 5ul6.

5menu67esaprobado

Cct;a como 5ul6.



4i deseas una descripci1n completa" dirí'ete a< atributos estándard.



@mágenes en HTML

Las imágenes! gráficos y fotos le dan vida y color a las páginas 'e$.

Las imágenes

-ara insertar imágenes en un sitio usaremos la etiqueta .

Esta etiqueta debe ir acompañada del atributo src que es el que contiene el =]L de laubicaci1n del arc$i2o de la imagen.

El atributo alt se utili0a para dar una bre2e descripci1n de la imagen" la cual podremosobser2ar en caso que el na2egador del usuario" por alguna ra01n" no muestre lamisma.

La etiqueta no tiene cierre.

4inta%is

http://www.virtualnauta.com/html-etiqueta-dlhttp://www.virtualnauta.com/html-etiqueta-dthttp://www.virtualnauta.com/html-etiqueta-ddhttp://www.virtualnauta.com/html-etiqueta-dirhttp://www.virtualnauta.com/html-etiqueta-ulhttp://www.virtualnauta.com/html-etiqueta-menuhttp://www.virtualnauta.com/html-etiqueta-ulhttp://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/html-etiqueta-dlhttp://www.virtualnauta.com/html-etiqueta-dthttp://www.virtualnauta.com/html-etiqueta-ddhttp://www.virtualnauta.com/html-etiqueta-dirhttp://www.virtualnauta.com/html-etiqueta-ulhttp://www.virtualnauta.com/html-etiqueta-menuhttp://www.virtualnauta.com/html-etiqueta-ulhttp://www.virtualnauta.com/html-atributos-estandard


29/66

E'emploCódigo

Resultado

Las etiquetas map y area

La etiqueta &ap especifica un mapa de imágenes.=n mapa de imágenes es una imagen que permite clic>ear diferentes áreas de lamisma.

Esta etiqueta requiere del atributo name" con el mismo nombre usado en el atributousemap de la etiqueta i&g. 7e esta forma se establece la relaci1n imagen9mapa.La etiqueta area se utili0a para definir regiones o áreas dentro de un mapa deimágenes y los enlaces asociados a esas regiones.

E'emploCódigo

Resultado

Etiquetas y atributos de las imágenes

Etiquetas tributos 2alor Descripción Ej.

5img6 7efine una imagen.

http://www.virtualnauta.com/html-etiqueta-imghttp://www.virtualnauta.com/html-etiqueta-img


30/66

alt]equerido

te%t Bre2e descripci1n de la imagen.

src]equerido

=]L 7irecci1n =]L de la imagen a mostrar.

align7esaprobado

top Clínea la imagen de acuerdo al te%tocircundante. =se las propiedades deubicaci1n de /44 en su lugar.bottom

middle

left

rig$t

border

7esaprobado

pi%els 7efine el borde alrededor de la imagen.

=se las propiedades de los bordes de/44 en su lugar.

$eig$t pi%els 7efine la altura de la imagen.

`

$space7esaprobado

pi%els 7e'a espacios en blanco a derec$a ei0quierda de la imagen. =se laspropiedades de ubicaci1n de /44 en sulugar.

ismap =]L 7efine el mapa de la imagen del lado delser2idor.

longdesc =]L La =]L a un documento con una largadescripci1n de la imagen.

usemap =]L 7efine el mapa de una imagen del ladodel cliente.

2space7esaprobado

pi%els 7e'a espacios en blanco arriba y aba'ode la imagen. =se las propiedades deubicaci1n de /44 en su lugar.

&idt$ pi%els 7efine el anc$o de la imagen.

`

5map6 7efine el mapa de una imagen del ladodel cliente.

name nombre ;nico 7efine un ;nico nombre para la etiqueta

http://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-borde-borderhttp://www.virtualnauta.com/css-borde-borderhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/html-etiqueta-maphttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-borde-borderhttp://www.virtualnauta.com/css-borde-borderhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/html-etiqueta-map


31/66

5map6.

5area6 7efine una regi1n en el mapa de unaimagen.

alt

]equerido

te%t Bre2e descripci1n de la imagen.

coords Especifica las coordinadas en donde sepuede apretar.

$ref =]L 7irecci1n =]L del área.

no$ref true E%cluye un área en el mapa de laimagen.

false

s$ape 7efine la forma del área.

rect =samoscoords\?i0quierda"arriba"derec$a"aba'o?.

rectangle

circ =samos coords\?centro %"centro y"radio?.

circle

poly =samos coords\?%("y("%)"y)".."%n"yn?.

polygon

target @ndica donde abrir el =]L. ^blan> El =]L se abrirá en una nue2a 2entana.


^self El =]L se abrirá en el mismo framedonde fue apretado.

^top El =]L se abrirá en una 2entana detamaño completo.

5applet6

7esaprobado

-ermite incluir un applet a2a en un

documento HTML. =se laetiqueta5ob'ect6 en su lugar.


id" class" title" style" dir" lang" tabinde%" access>ey

http://www.virtualnauta.com/html-etiqueta-areahttp://www.virtualnauta.com/html-etiqueta-applethttp://www.virtualnauta.com/html-insercion-scriptshttp://www.virtualnauta.com/html-etiqueta-areahttp://www.virtualnauta.com/html-etiqueta-applethttp://www.virtualnauta.com/html-insercion-scripts


32/66



onclic>" ondblclic>" onmousedo&n" onmouseup" onmouseo2er" onmousemo2e"onmouseout" on>eypress" on>eydo&n" on>eyup" onfocus" onblur

7iseño de -áginas !eb

Es la forma en que componemos nuestra página 'e$. La u$icaci"n de cada

elemento en su lugar.

7isposici1n de los elementos de una páginaLa disposici1n del contenido de nuestra página es importante para que esta sea mássimple de na2egar o más atracti2a al usuario.

La di2isi1n de las diferentes secciones de una páginaAlogo" men;" banners" publicidad oel contenido mismo se puede definir por medio de este sistema.

Muc$as 2eces deseamos que el contenido de nuestra página est di2idido en ) o máscolumnas.

tras 2eces queremos insertar una imagen en alg;n lugar determinado de la página.

-ara ello nos 2alemos del uso de las tablas" sin bordes y definiendo los diferentesanc$os de cada una de las columnas.

tro sistema más efecti2o" es el uso de estilos para la disposici1n de los diferenteselementos dentro de la página. -ero ese tema lo estudiaremos en el tutorial de /44.

=sando tablas para diseñar una página !eb

El uso más com;n es el de las tablas para darforma a la disposici1n de los te%tos en lapágina.

Esta secci1n de la página está diseñada en doscolumnas.

El secreto está en usar la tabla sin bordes yagregarle un pequeño 2alor a cellpadding.

4e puede diseñar muc$o más de doscolumnas.

http://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/css-homehttp://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/css-home


33/66

-ara lograr este efecto debemos usar laetiqueta y di2idir el te%to en )columnas.

No importa cuanto te%to le agregue a lapágina" siempre estará dentro de los bordesde la columna.

/1digo del e'emplo

5$tml65$ead65title67isposici1n del te%to5[title65[$ead6

5body65table &idt$\?(II`? border\?I? cellpadding\?+?6

5tr65td6Te%to de la primera columna.5[td65td6Te%to de la segunda columna.5[td65[tr65[table65[body65[$tml6

7isposici1n de una página estándard

Este es un pequeño e'emplo de como diseñar una página estándard.-or supuesto que a cada secci1n se le puede agregar un color distinto o gráfica que lede 2ida a la página.

Ccá ubicamos el logo o un banner

Men;

Zínculo (

Zínculo )Zínculo *

Ccá 2a el contenido


34/66

/1digo del e'emplo


35/66

El uso de ()) es el complemento ideal de HTML para el dise#o de tu sitio.

Ho'as de Estilo

Las $o'as de estilo en cascada ACascadingtyle $eets" C son un lengua'e usadopara definir la presentación de un documento escrito en HTML.

/on la 2ersi1n HTML D.I todos los formatos de te%to pueden ser definidos en una $o'ade estilo por separado o dentro del mismo documento HTML.

El uso de C es la manera más adecuada de diseñar un sitio !eb" ya que nos permitemuc$o más fle%ibilidad a la $ora de reali0ar cambios en el sitio.

/1mo se usan las $o'as de estilos

/uando un na2egador lee una $o'a de estilos" este formatea el documento de acuerdoa la misma.

Hay * formas de insertar una $o'a de estilos<

(. Entre líneas). Ho'as de estilo interna*. Ho'as de estilo e%ternas

(. Entre líneas

7ebemos usar esta forma cuando un ;nico estilo es aplicado a un solo elemento.4u uso está dado por el atributo st;le que se encuentra en casi todas las etiquetas.

En este e'emplo aplicaremos un estiloAcolor rojo ; un &argen i=quierdo de 7(piels a la etiqueta 5p6" la cual determina que todo el contenido de la misma seráafectado.

E'emplo Código

Este párrafo es de 'olor ro8o y se en'"entra a 3; pi%els

del margen i&("ierdo

Resultado

Este párrafo es de color ro'o y se encuentra *I pi%els del margen i0quierdo.

). Ho'as de estilo interna


36/66

Las $o'as de estilo interna deben usarse cuando una sola página tiene un estilo ;nico.Las definimos con la etiqueta en la cabecera del documento entre lasetiquetas 5$ead6 y 5[$ead6

E'emploCódigo

bod- 0ba!#ground!olor:blue

p 0!olor:white

="entes blan'as sobre fondo a&"l

Resultado

:uentes blancas sobre fondo a0ul

En este e'emplo se muestra que la etiqueta con su atributo t;pe define una$o'a de estilo por medio del 2alor tet*css.

En este e'emplo podemos obser2ar que le $emos aplicado estilos a los siguienteselementos<

bod; < define el color de "ondo de la pgina en a=ul.p < define todas las "uentes de color blanco.

*. Ho'as de estilo e%ternas

Esta es la forma ideal para cuando queremos definir un sitio entero con una mismaestructura y estilo. -ara ello definimos todos los estilos en un documento en com;nque se utili0ará para todas las páginas del sitio !eb.

/on reali0ar los cambios en ese documento" podemos cambiar el aspecto de todo elsitio !eb.

/ada página del sitio debe 2incularse con la $o'a de estilos usando laetiqueta ubicada en la cabecera del documento.

E'emplo de un enlace a una $o'a de estilo

5$ead6


37/66

4i desea estudiar más en profundidad sobre las hojas de estilo" 2isite nuestro tutorialde /44.

Etiquetas y atributos de las $o'as de estilo.

Etiquetas tributos 2alor Descripción

5style6 7efine un estilo.

type te%t[css 7efine el tipo de contenido.

media El medio para la informaci1n del estilo.

screen -ara pantallas no paginadas de computadora.

tty -ara medios que utilicen una cuadrícula decaracteres de anc$o fi'o" como teletipos.

t2 -ara dispositi2os tipo tele2isi1n .

pro'ection -ara proyectores.

$and$eld -ara dispositi2os de mano Apantalla pequeña"monocromos"etc.

print -ara material paginado" opaco" y paradocumentos que se 2en en una pantalla enmodo de presentaci1n preliminar a laimpresi1n.

braille -ara dispositi2os táctiles braille.

aural -ara sinteti0adores de 2o0.

all Cpropiado para todos los dispositi2os.

5di26 7efine una secci1n o un documento.

align7esaprobado

left /omo alinear el te%to en el elemento di2.=se/44 =bicaci1n en su lugar.

rig$t

center

'ustify

5span6 Cgrupa los elementos de una línea paraaplicarles estilos.

5font6 7efine el tipo" color y tamaño del te%to.

http://www.virtualnauta.com/css-homehttp://www.virtualnauta.com/css-homehttp://www.virtualnauta.com/html-etiqueta-stylehttp://www.virtualnauta.com/html-etiqueta-divhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/html-etiqueta-spanhttp://www.virtualnauta.com/html-etiqueta-fonthttp://www.virtualnauta.com/css-homehttp://www.virtualnauta.com/css-homehttp://www.virtualnauta.com/html-etiqueta-stylehttp://www.virtualnauta.com/html-etiqueta-divhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/html-etiqueta-spanhttp://www.virtualnauta.com/html-etiqueta-font


38/66

7esaprobado =se/44 :uentes en su lugar.

color rgb 7efine el color del te%to. =se /44 :uentes ensu lugar.

%%%%%%

nombre delcolor

face listado denombres deletras

7efine el nombre de la letra. =se /44:uentesen su lugar.

si0e =n n;meroentre ( y O. 4ise $a definidobasefont debeespecificar un

n;mero entre9, y ,.

7efine el tamaño de la letra. =se /44:uentesen su lugar.

5basefont67esaprobado

7efine la letra base. =se /44 :uentes en sulugar.

color rgb 7efine el color del te%to. =se /44 :uentes ensu lugar.

%%%%%%

nombre delcolor

face listado denombres deletras

7efine el nombre de la letra. =se /44:uentesen su lugar.

si0e =n n;meroentre ( y O.

7efine el tamaño de la letra. =se /44:uentesen su lugar.

5center67esaprobado

/entra un te%to $ori0ontalmente. =se /44=bicaci1n en su lugar.

Ctributos estándardid" class" title" style" dir" lang

4i desea una descripci1n completa" dirígete a< atributos estándard.

http://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/html-etiqueta-basefonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/html-etiqueta-centerhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/html-etiqueta-basefonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/css-fuente-fonthttp://www.virtualnauta.com/html-etiqueta-centerhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/html-atributos-estandard


39/66



La secci1n Head de HTML

*qu+ u$icamos datos de importancia para el navegador y para los $uscadores

El elemento $ead

Este elemento está determinado por las etiquetas y . 7entro de lasmismas queda determinada la sección head la cual contiene toda la informaci1n sobreel documento.

Esta informaci1n no será mostrada por el na2egador pero es de suma importancia paralos na2ergadores y para los motores de b;squeda.

7e acuerdo a los estándares de HTML solo un n;mero reducido de etiquetas puedenincluirse en la secci1n $ead<

(. 5base6). 5lin>6*. 5meta6

D. 5title6+. 5style6,. 5script6

El elemento base

En HTML" los 2ínculos y las referencias a recursos e%ternos como imágenes" $o'as deestilo" etc." se especifican siempre mediante una direcci1n =]L.

4inta%is5$ead65title6Título del documento5[title6


40/66

Es decir" que en la secci1n body para cada imagen que deseo ingresar solo deboescribir<

5body65img src\?[paisa'e.'pg?65[body6

En lugar de<

5img src\?$ttp

Este elemento está definido por la etiqueta y establece un enlace que solopuede aparecer en la secci1n ,ead .



41/66

El elemento title

Este elemento debe figurar en la secci1n ,ead y nos define el título de la página !eb.

-ara ello utili0amos las etiquetas y .Es recomendable poner títulos ricos en conte%to ya que estos aparecen en los motoresde b;squeda y ayudan al usuario a identificar el contenido de la página.

4inta%is5$ead6/urso introductorio al diseño de páginas !eb5[$ead6

El elemento styleEste elemento define estilos dentro del documento y utili0a lasetiquetas y .


p color


42/66

-ara más informaci1n sobre scripts dirígete a HTML 4cripts

Etiquetas y atributos de los elementos en la secci1n $ead


5$ead6 profile =]L Especifica la locali0aci1n de uno o más perfiles demetadatos.

5title6 7efine el título del documento.

5meta6 Especifica una pare'a propiedad[2alor del documento.

name aut$or @dentifica un nombre de propiedad.

description

>ey&ords

generator

re2ised

otros

$ttp9equi2 content9type

Los ser2idores HTT- utili0an este atributo para obteneinformaci1n sobre los encabe0ados.

e%pires

refres$

set9coo>ie

content 2alor Este atributo especifica el 2alor de una propiedad.

sc$eme 2alor -roporciona a los agentes de usuario más conte%topara la interpretaci1n correcta de los datos.

5lin>6 7efine un 2ínculo. 4olo puede aparecer en la secci1n$ead de un documento.

c$arset codif. decaracteres

Especifica la codificaci1n de caracteres.Zalor por defecto< @4\JJ+9(.

$ref =]L Especifica la locali0aci1n de un recurso de la &eb.

$reflang c1digo delengua'e

Especifica el lengua'e de la =]L.

http://www.virtualnauta.com/html-insercion-scriptshttp://www.virtualnauta.com/html-etiqueta-headhttp://www.virtualnauta.com/html-etiqueta-titlehttp://www.virtualnauta.com/html-etiqueta-metahttp://www.virtualnauta.com/html-etiqueta-linkhttp://www.virtualnauta.com/html-insercion-scriptshttp://www.virtualnauta.com/html-etiqueta-headhttp://www.virtualnauta.com/html-etiqueta-titlehttp://www.virtualnauta.com/html-etiqueta-metahttp://www.virtualnauta.com/html-etiqueta-link


43/66


44/66

$elp

boo>mar>

re2 Especifica la relaci1n entre el destino del 2ínculo y eldocumento actualA2ínculo in2erso.alternate

designates

styles$eet

start

ne%t

pre2

contents

inde%

glossary

copyrig$t

c$apter

section

subsection

apendi%

$elp

boo>mar>



^parent El =]L se abrirá en el frameset padre. ^self El =]L se abrirá en el mismo frame donde fue

apretado.

^top El =]L se abrirá en una 2entana de tamaño completo.

type tipo decontenido

Especifica el tipo de contenido a conectar.


45/66

5base6 $ref =]L Especifica la =]L base que será usada para todos los2ínculos de la página.




^self El =]L se abrirá en el mismo frame donde fueapretado.

^top El =]L se abrirá en una 2entana de tamaño completo.

5script6 /oloca un script dentro del documento.

src =]L Especifica la locali0aci1n de un script e%terno.


Especifica el lengua'e de scripts de los contenidos delelemento.

language7esaprobado

'a2ascript =se el atributo type en su lugar.

li2escript

2bscript

otros

defer @ndica al agente de usuario que el script no 2a agenerar ning;n contenido en el documento.



4i desea una descripci1n completa" dirígete a< atributos estándard.



Meta HTML

*qu+ veremos la relaci"n que ,ay entre las etiquetas meta y los $uscadores como

-oogle

http://www.virtualnauta.com/html-etiqueta-basehttp://www.virtualnauta.com/html-etiqueta-scripthttp://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/html-etiqueta-basehttp://www.virtualnauta.com/html-etiqueta-scripthttp://www.virtualnauta.com/html-atributos-estandard


46/66

Etiqueta 5meta6

La etiqueta se utili0a para identificar propiedades de un documentoAp.e'."el

autor" una lista de palabras cla2es" la descripci1n de una página" etc. y para asignar2alores a esas propiedades.

-ara ello nos ser2imos del atributo na&eque especifica la propiedad a usar y delatributo content para definir el contenido de dic$a propiedad.

El siguiente e'emplo nos muestra un 2alor para la propiedad author<

5$ead6

5[$ead6

La etiqueta debe ubicarse en la secci1n $ead del documento" entre lasetiquetas 5$ead6 y 5[$ead6.La etiqueta no tiene cierre.

Meta y los motores de b;squeda

ey'ords

=no de los usos más importantes de la etiqueta " es especificar una lista depalabras cla2es relacionadas con el contenido de la página. Estas palabras cla2esA?e;3ords serán usadas por los motores de b;squeda para identificar el contenidode la página y de esa forma me'orar la calidad de los resultados de una b;squeda.Las palabras cla2es deben separarse con una coma A" y se pueden escribir una" dos omás palabras 'untas.

)ota0 obser2e que ,acaciones en el Caribe, y ,Caribe, son trminos diferentes.,acaciones en el Caribe, es un trmino más preciso que la palabra ,Caribe,. Esto

es importante ya que ayuda a los motores de b;squeda a encontrar trminos que seadec;an a las e%igencias de los usuarios. Lo que nos lle2a a entender que $ay másposibilidades de aparecer en puestos superiores en los resultados de b;squeda.

description

Tambin es importante dar una descripci1n lo más precisa posible de la página !eb.


47/66

)ota0 esta descripci1n es la que aparece muc$as 2eces por deba'o del título del sitio"en los resultados de los motores de b;squeda. Es por eso que debe ser una oraci1n ofrase que refle'e e%actamente el contenido de la página.

B&portante0 es muy recomendable definir diferentes >ey&ords y descriptions paracada una de las páginas de un sitio.

Meta e informaci1n por defecto

Las etiquetas pueden utili0arse para especificar la informaci1n por defecto deun documento en los siguientes aspectos<

• El lengua'e de scripts por defecto.

• El lengua'e de $o'as de estilo por defecto.• La codificaci1n de caracteres del documento.

-ara ello nos ser2imos del atributo http-equi

5899 Lengua'e de scripts por defecto 996

5899 Lengua'e de $o'as de estilo por defecto 996

5899 /odificaci1n de caracteres 996

Etiquetas y atributos de meta.


5meta6 Especifica una pare'a propiedad[2alor deldocumento.

name aut$or @dentifica un nombre de propiedad.

description

>ey&ords

generator

re2ised

http://www.virtualnauta.com/html-etiqueta-metahttp://www.virtualnauta.com/html-etiqueta-meta


48/66

otros

$ttp9equi2 content9type Los ser2idores HTT- utili0an este atributo paraobtener informaci1n sobre los encabe0ados.

e%pires

refres$

set9coo>ie

content 2alor Este atributo especifica el 2alor de una propiedad

sc$eme 2alor -roporciona a los na2egadores más conte%to parala interpretaci1n correcta de los datos.


lang" dir

La direcci1n =]L

/os permite encontrar cualquier sitio 'e$ en %nternet.

u es la =]L

El 9R: A9niform R esource :ocator 9 Locali0ador =niforme de ]ecursos le permite alna2egador encontrar una direcci1n o sitio en @nternet.

El 9R: combina el nombre del ser2idor que proporciona la informaci1n" el directoriodonde se encuentra" el nombre del fic$ero y el protocolo o sistema a usar pararecuperar los datos.

4inta%is de la direcci1n =]L

=na direcci1n @nternet completa como esta


49/66

http0**333.irtualnauta.co&*es*ht&l*una-pagina.ht&l

4igue estas reglas de sinta%is.

esque&a0**host.do&inio0puerto*ruta*no&bredearchio

esque&a0

define el tipo de ser2icio @nternet. El más com;n es ,ttp.

host0

por defecto para $ttp es ''' .

do&inio0

define el nombre del dominio como por e'.< virtualnauta.com.

puerto0

define el nombre de puerto en el $ost. -or lo general este n;mero es omitido. Eln;mero por defecto para $ttp es 01.

ruta0

define el camino o subdirectorio en el ser2idor. 4i es omitido" el documentodebe encontrarse en el directorio principal" de lo contrario no será locali0ado.

no&bre de archio0

define el nombre del documento. 4e usan como nombres de arc$i2o pordefecto default.,tmo index.,tm.

Esquemas =]LEl esquema indica el protocolo de red que se usa para recuperar informaci1n a tra2sde la red.Clgunos e'emplos de esquemas =]L<

• http < recursos $ttp AGyperte%t Transfer Arotocol 9 -rotocolo de Transferenciade Hiperte%to.

• https < $ttp sobre ssl Aecure oc>ets :ayer proporciona comunicacionesseguras en @nternet.

• "tp < Hile Transfer Arotocol 9 -rotocolo de Transferencia de Crc$i2os.

•

&ailto < direcciones Email.• "ile < recursos disponibles en el ordernador local" o en una red local.

• ne3s < grupo de noticias =senet.

• telnet < el protocolo telnet" sir2e para acceder mediante una red a otramáquina.


50/66

Enlace a un sistema de correo electr1nico

4i deseas crear un enlace a un Email" debes usar el siguiente c1digo<

5a $ref\?[&ailto0 sunombresusitio.com?6 sunombresusitio.com5[a6

)ota0 en este e'emplo" al presionar sobre el enlace" se abrirá automaticamente elprograma de correo electr1nico definido por defecto en el ordenador.

Ccceder a un grupo de noticias ANe&sgroup.

Los grupos de noticias" son un medio de comunicaci1n en el cual los usuarios leen yen2ían mensa'es te%tuales a distintos tablones distribuidos entre ser2idores con laposibilidad de en2iar y contestar a los mensa'es.

Hay nue2e 'erarquías dedicadas a discusiones sobre distintos temas<

• co&p.I < Temas relacionados con las computadoras.

• ne3s.I < 7iscusi1n de grupos de usuarios.

• sci.I < Temas científicos.

• hu&anities.I < 7iscusi1n de $umanidades Acomo literatura o filosofía.

• rec.I < 7iscusi1n de acti2idades recreati2as Acomo 'uegos y aficiones.

• soc.I < 4ociali0aci1n y discusi1n de temas sociales.

• tal?.I < Temas polmicos" como religi1n y política.

• &isc.I < Miscelánea Atodo lo que no entra en las restantes 'erarquías.

• alt.I < 4ali1 como alternati2a a tal>" pero es usada por los usuarios -)-.

4i deseas crear un enlace $acia un grupo de noticias" usa este c1digo<

5a $ref\?[ne3s0ne&s.$tml?6HTML grupo de noticias5[a6

Transferencias ftp

Es un protocolo de transferencia de arc$i2os" de manera que desde un equipo clientenos podemos conectar a un ser2idor para descargar arc$i2os desde l o para en2iarle

nuestros propios arc$i2os.4i deseas crear un enlace para ba'ar un arc$i2o" usa un c1digo como este<

5a $ref\?["tp0 [[&&&.susitio.com[ftp[arc$i2o9a9ba'ar.0ip67o&nload5[a6

mailto:[email protected]:[email protected]:[email protected]:[email protected]


51/66

4cripts dentro de HTML

&ise#o de páginas dinámicas que interactúan con el usuario.

Los scripts

Los scripts nos permiten crear páginas !eb más dinámicas y atracti2as.=n script es un programa que puede acompañar a un documento HTML o que puedeestar insertado en l.El programa se e'ecuta en el na2egador del cliente cuando se carga el documento o

'unto con los e2entos" como por e'emplo cuando se acti2a un enlace" o cuando se pasael puntero del mouse por alguna imagen" etc.=n c1digo script puede ser ubicado tanto en la secci1n head como en lasecci1n bod; de un documento.

@nsertando un script dentro de un documento HTML

-ara insertar un script dentro de HTML" debemos utili0ar la etiqueta 'untocon el atributo t;pe para especificar el lengua'e de scripts que 2amos a utili0ar.

E'emploCódigo

nser'i?n de "n 'ript

do'"mentrite@-Este es "n s'ript en 8a0as'ript-A

Resultado

Este es un script en 'a2ascript

)ota0 en este e'emplo el tipo de script insertado ?tet*jaascript? es en a2a4cript.

El elemento ob'ect

El elemento ob'ect está definido por las etiquetas y y se utili0apara insertar ob'etos dentro de una página !eb.Entendemos por ob'etos


52/66

• documentos HTML

• imágenes

• audio

• 2ideo

• :las$

• documentos -7:• Ccti2eh

• a2a applets

• etc.

E'emplo de como insertar una imagen -E#

E'emploCódigo

Resultado

)ota0 el atributo data+,flores.jpg, nos especifica la direcci1n del documento a insertar. Elatributo t;pe+,image/jpeg, el tipo de documento o arc$i2o a insertar.

El elemento param

El elemento param está definido por la etiqueta y se utili0a para especificarparámetros que pueden ser necesarios" para un ob'eto insertado con el elementoob'ect" en tiempo de e'ecuci1n.

Zeamos este e'emplo de un arc$i2o de audio.

E'emploCódigo

Resultado

)otas0

• na&e+,src, 'unto con alue+,&edia*applause.3a, 9 BnternetEplorer necesita la direcci1n src para ubicar el arc$i2o a e'ecutar.


53/66

• na&e+,autopla;, se usa para e'ecutar Juic?ti&e 9 alue+,"alse, es paraque no se autoe'ecute al cargar la página.

• na&e+,autostart, se usa para e'ecutar Kindo3s Ledia Ala;er ; Realudio 9 alue+,(, es para que no se autoe'ecute al cargar la página.

Etiquetas y atributos de los scripts

Etiquetas tributos 2alor Descripción Ej

5script6 /oloca un script dentro de un documento.

src =]L Especifica la locali0aci1n de un scripte%terno.

type

bligatorio

tipo decontenido

Especifica el lengua'e de scripts.

lengua'e

7esaprobado

Especifica el lengua'e de scripts. =se typeen su lugar.

defer @ndica al na2egador" que el script no 2a agenerar ning;n contenido en eldocumento.

c$arset codificaci1n decaracteres

7efine la codificaci1n de caracteres usadasen el script.

5noscript6 Te%to alternati2o en caso que el script nose e'ecute.

5ob'ect6 7efine un ob'eto embebido. =sado parainsertar multimedia a la página

align

7esaprobado

left Clineamiento del te%to alrededor delob'eto.=se /44 en su lugar.rig$t

top

bottom

arc$i2e lista =]Ls Especifica una lista de =]Ls" separados porespacios" de arc$i2os que contienenrecursos rele2antes para el ob'eto.

border

7esaprobado

pí%eles 7efine un borde alrededor del ob'eto.=se /44 Bordes en su lugar.

http://www.virtualnauta.com/html-etiqueta-scripthttp://www.virtualnauta.com/html-etiqueta-noscripthttp://www.virtualnauta.com/html-etiqueta-objecthttp://www.virtualnauta.com/css-homehttp://www.virtualnauta.com/css-borde-borderhttp://www.virtualnauta.com/html-etiqueta-scripthttp://www.virtualnauta.com/html-etiqueta-noscripthttp://www.virtualnauta.com/html-etiqueta-objecthttp://www.virtualnauta.com/css-homehttp://www.virtualnauta.com/css-borde-border


54/66

classid =]L Especifica la locali0aci1n de laimplementaci1n de un ob'eto. -uedeusarse 'unto con el atributo data.

codebase =]L Especifica la ruta de acceso base de los=]Ls especificados por los

atributosclassid! data y arc,ive.

codetype tipo decontenido

Tipo de contenido de datos cuando secarga el ob'eto especificado por classid .

data =]L Especifica la locali0aci1n de los datos delob'eto.

declare declaraci1n Hace que la definici1n actual de o$2ect seasolamente una declaraci1n.

$eig$t

7esaprobado

pí%eles 7efine la altura del ob'eto.

=se /44 Heig$t en su lugar.

$space

7esaprobado

pí%eles 7efine los espacios $ori0ontales alrededordel ob'eto.=se /44 -adding en su lugar.

name nombre ;nico Csigna el nombre de control.

standby te%to Especifica un mensa'e que puedepresentar un na2egador mientras carga losdatos del ob'eto.


Especifica el tipo de contenido de los datosespecificados por data.

usemap =]L Csocia un mapa de imágenes con unelemento.

2space

7esaprobado

pí%eles 7efine los espacios 2erticales alrededor delob'eto.=se /44 2ertical9align en su lugar.

&idt$

7esaprobado

pí%eles 7efine el anc$o del ob'eto.=se /44 &idt$ en su lugar.

5param6 Especifica los parámetros para un ob'etoinsertado en el documento.

name nombre ;nico 7efine el nombre de un parámetro dee'ecuci1n que se supone que el ob'etoinsertado conoce.

http://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/css-relleno-paddinghttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/html-etiqueta-paramhttp://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/css-relleno-paddinghttp://www.virtualnauta.com/css-ubicacion-positionhttp://www.virtualnauta.com/css-dimensioneshttp://www.virtualnauta.com/html-etiqueta-param


55/66


Especifica el tipo de medio para elparámetro.

2alue 2alor Especifica el 2alor del parámetro dee'ecuci1n especificado por name.

2aluetype data Especifica el tipo de atributo value.

ref

ob'ect



4i deseas una descripci1n completa" dirígete a< atributos estándard.


access>ey" tabinde%" onclic>" ondblclic>" onmousedo&n" onmouseup" onmouseo2er"onmousemo2e" onmouseout" on>eypress" on>eydo&n" on>eyup

tributos estndard de GTL:

Lista de los atri$utos que son comunes para casi todas las etiquetas.

tributos Co&unes

En esta página se encuentran los atributos más comunes de HTML.

Los di2idimos en tres grupos de acuerdo a la funci1n que tiene cada uno.

• Ctributos identificadores

• Ctributos de lengua'e

• Ctributos del teclado

tributos identi"icadores

Zálido para todos los elementos e%cepto< $ase! ,ead! ,tml! meta! script! style! title.

tributos 2alor Descripción

http://www.virtualnauta.com/html-atributos-estandardhttp://www.virtualnauta.com/html-atributos-estandard


56/66

id nombre Csigna un nombre a un elemento.El atributo id act;a<

• /omo selector para las $o'as de estiloA/44.

• /omo 2ínculo destino para 2ínculos de$iperte%to.

•

/omo medio de $acer referencia a un elementoen particular desde un script.• /omo nombre de un elemento ob'ect declarado

• -ara procesos generales por parte del usuario.

class nombre de clase Csigna un nombre de clase.El atributo class act;a<

• /omo selector para las $o'as de estiloA/44"cuando se asigna informaci1n de estilo a uncon'unto de elementos.

• -ara procesos generales por parte del usuario.

style estilo Este atributo especifica informaci1n de estilo para el

elemento actual.title te%to Este atributo ofrece informaci1n consulti2a sobre el

elemento para el cual se establece.

tributos de lenguaje

Zálido para todos los elementos e%cepto< applet! $ase! $asefont! $r! frame! frameset!iframe! param! script.


lang c1digo de lengua'e Especifica el idioma base de los 2alores de los atributoy del te%to contenido en un elemento.El atributo lang es ;til para<

• Cyudar a los motores de b;squeda.

• Cyudar a los sinteti0adores de 2o0.

• Cyudar al agente de usuario a $acer decisionessobre separaci1n de palabras" ligaduras" yespaciado.

• Cyudar a los 2erificadores de ortografía ygramática.

dir ltr Especifica la direcci1n del te%to.Zalores posibles<

• ltr < 7e i0quierda a derec$a Aleft to rig$t.

• rtl < 7e derec$a a i0quierda Arig$t to lleft.

rtl

tributos del teclado


57/66

Zálido para los elementos< a! area! $utton! input! la$el! legend! textarea.


access>ey caracter Csigna una tecla de acceso a un elemento. Cl pulsaresa tecla el foco se dirige $acia ese elemento.

tabinde% n;mero Especifica el orden de tabulaci1n del elemento dentrodel documento actual

E2entos en HTML

Los eventos dinámicos son los encargados de activar determinados scripts de una

página 'e$.

Los e2entos

HTML cuenta con una serie de atributos que le permiten al na2egador e'ecutar une2ento.

=n e2ento puede ser" por e'emplo" un script de a2a4cript que se e'ecuta al presionaralg;n elemento del documento o al cargar la página &eb.

-resentamos aquí una lista de los atributos que acti2an e2entos" clasificados de

acuerdo al tipo de acci1n que reali0an y que pueden ser insertados dentro de lasetiquetas de HTML.

E2entos del documento

=sar solo con body y frameset.


onload script El script corre cuando el documento es cargado.onunload script El script corre cuando el usuario elimina un documento de

una 2entana o marco.

E2entos de los formularios


58/66

=sar con los elementos de los formularios.


onc$ange script El script corre cuando el 2alor de entrada $a sidomodificado.

onsubmit script El script corre cuando se en2ía un formulario.

onreset script El script corre cuando se reiniciali0a un formulario.

onselect script El script corre cuando el usuario selecciona te%to de uncampo de te%to.

onblur script El script corre cuando el elemento pierde el foco ya sea conel mouse o por na2egaci1n con tabulador.

onfocus script El script corre cuando el foco se dirige $acia un elemento"ya sea con el mouse o por na2egaci1n con tabulador.

E2entos del teclado

=sar con todos los elementos e%cepto con<base" bdo" br" frame" frameset" $ead" $tml" iframe" meta" param" script" style" y title.


on>eydo&n script El script corre cuando se pulsa una tecla.

on>eypress script El script corre cuando se pulsa y se suelta una tecla.

on>eyup script El script corre cuando una tecla se suelta.

E2entos del mouse

=sar con todos los elementos e%cepto con<base" bdo" br" frame" frameset" $ead" $tml" iframe" meta" param" script" style" y title.


onclic> script El script corre cuando se $ace clic con el mouse.ondblclic> script El script corre cuando se $ace doble clic con el mouse.

onmousedo&n script El script corre cuando el bot1n del mouse se pulsa cuandoestá encima de un elemento.

onmousemo2e script El script corre cuando el mouse se mue2e mientras estásobre un elemento.

onmouseout script El script corre cuando el mouse se aparta de un elemento.


59/66

onmouseo2er script El script corre cuando el mouse se sit;a sobre un elemento

onmouseup script El script corre cuando el bot1n del mouse se suelta cuandoestá encima de un elemento.

eridor Keb

* la ,ora de su$ir nuestro sitio a la red! de$emos alo2ar todos los arc,ivos en unservidor 'e$ para que sean accesi$les a todo el mundo.

ube tu sitio a la Keb

4i quieres que otras personas 2ean t; traba'o" debes publicarlo.-ara publicar t; sitio" tienes que copiar tus arc$i2os a un ser2idor !eb.

=n ser2idor !eb es tanto el ordenador como el programa que implementa el protocoloHTT-AGiperte%t Transfer Arotocol 9 -rotocolo de transferencia de $iperte%to" diseñadopara transferir lo que llamamos $iperte%tos" páginas !eb o páginas HTML.

El na2egador de un cliente particular reali0a una petici1n al ser2idor y ste le respondecon el contenido que el cliente solicit1.

loja&iento Keb MKeb GostingN

Es el ser2icio que pro2ee a los usuarios de @nternet un sistema para poder almacenar

cualquier contenido accesible 2ía !eb.Las !eb Host son compañias que proporcionan espacio de un ser2idor a sus clientes.

Tipos de aloja&ientos Keb

El alo'amiento !eb se di2ide en cuatro tipos<

Tipo Detalles

#ratuito Estos ser2icios son buenos para páginas personales" $obbies" páginasfamiliares" etc.No se recomienda el ser2icio gratuito para los negocios o para un alto tráfico-or lo general no puede usar de su propio dominio y debe usar el delpro2eedor como por e'.< &&&.sitiogratis.com[usuarios[susitio.$tml.No es muy profesional.

2entajas Desentajas

• 4in ning;n costo.

• Bueno para sitios muy

• No cuenta con dominio propio.

• Muc$a publicidad en el sitio.


60/66

pequeños.• Email generalmente gratis.

• Espacio limitado.

• Tráfico limitado.

• 4eguridad limitada.

• #eneralmente no soporta basede datos.

• 4oporte tcnico limitado onulo.

• Detalles

/ompartidoA4$ared Hosting

En este tipo de ser2icio su sitio es almacenado en un ser2idor muy potente 'unto con otros cientos de sitios.-uede $acer uso de su propio dominio y cuenta con gran cantidad desoft&are a su disposici1n.Es el tipo de alo'amiento más com;n y usado en el mundo.

2entajas Desentajas

•

4er2icio econ1mico.• @deal para pequeños y

medianos clientes.• Zarias opciones de soft&are.

• =so de dominio propio.

• Buen soporte tcnico.

•

]estricci1n el 2olumen detráfico.• ]estricci1n en el soporte de

base de datos.• ]estricci1n en el soporte de

soft&are.

• Detalles

4er2idor dedicado 4e refiere al alo'amiento !eb en el cual el cliente alquila o compra unordenador completo" y por lo tanto tiene el control y la responsabilidad deadministrarlo.

El cuidado físico del equipo y de la conecti2idad a @nternet es tarea de laempresa de alo'amiento.

2entajas Desentajas

• Bueno para grandes espresas.

• Bueno para alto tráfico.

• =so de m;ltiples dominios.

• Herramientas a2an0adas deemail.

• 4oporta potentes bases dedatos.

•

4oporte sín límite de soft&are.

• Clto costo.

• ]equiere de $abilidades en eltema.

• Detalles

/olocaci1n El cliente compra su propio equipo y lo coloca en la empresa que presta elser2icio.La empresa de Host le suministra la corriente y la cone%i1n a @nternet.Es como tener su propio se2idor en la oficina solo que se encuentra en unlugar más apropiado para eso.


61/66


62/66


63/66

*as rela'iones de las páginas entre s# 'onfig"ran la estr"'t"ra del sitio

partir de la página prin'ipal se 0in'"lan mediante enla'es al resto de las páginas esto

es bastante sen'illo mediante '?digo H$* pero es más 'ompli'ado de'idir el orden de

("F manera y 'on ("F 'onfig"ra'i?n se estable'erán los 0#n'"los

*a estr"'t"ra de "n 'on8"nto de páginas Jeb es m"y importante ya ("e permitirá al

le'tor 0is"ali&ar todos los 'ontenidos de "na manera fá'il y 'lara @b"ena estr"'t"raA o

pro0o'ar en el le'tor "na sensa'i?n de estar perdido por lo '"al no en'ontrará

rápidamente lo ("e b"s'a y terminará por abandonar el sitio @mala estr"'t"raA

*os a"tores reen 9hil'ott y =li'N @2;;3A desta'an los tipos de mapas de na0ega'i?n en

"n sitio Jeb.

Estr"'t"ra lineal

Esta estr"'t"ra 'onsiste en "na l#nea re'ta ("e re'orre el sitio desde la página de ini'io

hasta la página final

Es m"y :til '"ando se desea ("e el le'tor siga "n 'amino fi8o y g"iado además el de

impedir ("e se distraiga 'on enla'es a otras páginas Por otra parte se p"ede 'a"sar al

le'tor la sensa'i?n de estar en'errado si el 'amino es m"y largo o po'o interesante

7ste tipo de estru!tura ser8a lido para tutoriales de aprendia'e o tours de isita

guiada.

Estr"'t"ra 7erár("i'a

*a estr"'t"ra 8erár("i'a 'omo se obser0a en la sig"iente fig"ra.


64/66

Es la t#pi'a estr"'t"ra de árbol en el ("e la ra#& es la página de bien0enida Fsta se

p"ede tambiFn s"stit"ir por la de 'ontenido en la ("e se e%ponen las diferentes

se''iones ("e 'ontiene el sitio

*a 0enta8a de esta estr"'t"ra es ("e el "s"ario siempre está "bi'ado y p"ede mo0erse

fá'ilmente por el sitio

ra'ias a ("e la mayor#a de las páginas se'"ndarias permiten regresar a la página de

ini'io los 0isitantes 'ontrolan 'ompletamente la na0ega'i?n

Estr"'t"ra Oadial

En este modelo las páginas se'"ndarias no se 'one'tan entre s# y se debe na0egar porla página prin'ipal para ir de "na se'"ndaria a otra es de'ir la prin'ipal 'ontiene enla'es

a todas las se'"ndarias pero las se'"ndarias s?lo 'ontienen "n entorno a la prin'ipal tal

'"al se apre'ia en la fig"ra ("e sig"e.


65/66


66/66

rt#'"los de na0ega'i?n

Documents

Las Etiquetas de HTML