View
221
Download
0
Category
Preview:
Citation preview
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
.
8/15/2019 Las Etiquetas de HTML
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.
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
4/66
$e%to pe("e)o
$e%to f"erte
$e%to s"b#ndi'e
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
6/66
Apor e'. ?
8/15/2019 Las Etiquetas de HTML
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/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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.
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
13/66
8/15/2019 Las Etiquetas de HTML
14/66
5frame src\?[frame).$tm?65[frameset6
La etiqueta iframe
La etiqueta
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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.
`
Ctributos estándard
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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.
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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?.
c$aroff pi%els Especifica la distancia entre el borde y elprimer carácter de alineaci1n en cadalínea.`
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
8/15/2019 Las Etiquetas de HTML
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?.
c$aroff pi%els Especifica la distancia entre el borde y elprimer carácter de alineaci1n en cadalínea.`
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
8/15/2019 Las Etiquetas de HTML
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
Ctributos estándard
id" class" title" style" dir" lang
4i desea una descripci1n completa" dirí'ase a< atributos estándard.
E2entos intrínsecos
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
8/15/2019 Las Etiquetas de HTML
25/66
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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.
Ctributos estándard
id" class" title" style" dir" lang
4i deseas una descripci1n completa" dirí'ete a< atributos estándard.
E2entos intrínsecos
onclic>" ondblclic>" onmousedo&n" onmouseup" onmouseo2er" onmousemo2e"onmouseout" on>eypress" on>eydo&n" on>eyup
@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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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.
^parent El =]L se abrirá en el frameset padre.
^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.
Ctributos estándard
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
8/15/2019 Las Etiquetas de HTML
32/66
4i desea una descripci1n completa" dirí'ase a< atributos estándard.
E2entos intrínsecos
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
34/66
/1digo del e'emplo
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
39/66
E2entos intrínsecos
onclic>" ondblclic>" onmousedo&n" onmouseup" onmouseo2er" onmousemo2e"onmouseout" on>eypress" on>eydo&n" on>eyup
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
8/15/2019 Las Etiquetas de HTML
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 .
4inta%is5$ead65title6Título del documento5[title6
8/15/2019 Las Etiquetas de HTML
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 .
4inta%is5$ead65title6Título del documento5[title6
p color
8/15/2019 Las Etiquetas de HTML
42/66
-ara más informaci1n sobre scripts dirígete a HTML 4cripts
Etiquetas y atributos de los elementos en la secci1n $ead
Etiquetas tributos 2alor Descripción
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
8/15/2019 Las Etiquetas de HTML
43/66
8/15/2019 Las Etiquetas de HTML
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>
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 fue
apretado.
^top El =]L se abrirá en una 2entana de tamaño completo.
type tipo decontenido
Especifica el tipo de contenido a conectar.
8/15/2019 Las Etiquetas de HTML
45/66
5base6 $ref =]L Especifica la =]L base que será usada para todos los2ínculos de la página.
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 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.
type tipo decontenido
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.
Ctributos estándard
id" class" title" style" dir" lang
4i desea una descripci1n completa" dirígete a< atributos estándard.
E2entos intrínsecos
onclic>" ondblclic>" onmousedo&n" onmouseup" onmouseo2er" onmousemo2e"onmouseout" on>eypress" on>eydo&n" on>eyup
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
8/15/2019 Las Etiquetas de HTML
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.
8/15/2019 Las Etiquetas de HTML
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.
Etiquetas tributos 2alor Descripción
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
8/15/2019 Las Etiquetas de HTML
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.
Ctributos estándard
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
8/15/2019 Las Etiquetas de HTML
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.
8/15/2019 Las Etiquetas de HTML
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:sunombre@susitio.commailto:sunombre@susitio.commailto:sunombre@susitio.commailto:sunombre@susitio.com
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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.
8/15/2019 Las Etiquetas de HTML
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
8/15/2019 Las Etiquetas de HTML
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.
type tipo decontenido
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
8/15/2019 Las Etiquetas de HTML
55/66
type tipo decontenido
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
Ctributos estándard
id" class" title" style" dir" lang
4i deseas una descripci1n completa" dirígete a< atributos estándard.
E2entos intrínsecos
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
8/15/2019 Las Etiquetas de HTML
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.
tributos 2alor Descripción
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
8/15/2019 Las Etiquetas de HTML
57/66
Zálido para los elementos< a! area! $utton! input! la$el! legend! textarea.
tributos 2alor Descripción
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.
tributos 2alor Descripción
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
8/15/2019 Las Etiquetas de HTML
58/66
=sar con los elementos de los formularios.
tributos 2alor Descripción
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.
tributos 2alor Descripción
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.
tributos 2alor Descripción
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.
8/15/2019 Las Etiquetas de HTML
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.
8/15/2019 Las Etiquetas de HTML
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.
8/15/2019 Las Etiquetas de HTML
61/66
8/15/2019 Las Etiquetas de HTML
62/66
8/15/2019 Las Etiquetas de HTML
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.
8/15/2019 Las Etiquetas de HTML
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.
8/15/2019 Las Etiquetas de HTML
65/66
8/15/2019 Las Etiquetas de HTML
66/66
rt#'"los de na0ega'i?n
Recommended