HTML ¿qué es y para que sirve?

<H1>html</H1>
<h2>Qué es el html y para qué sirve</h2>

por Maximiliano Martin - www.maximiliano.cl

www.maximiliano.cl

Qué es HTML
Lenguaje de Marcado más extendido

www.maximiliano.cl

Qué es HTML
Lenguaje de Marcado más extendido

•Codiﬁcar un documento
•Industria Editorial
•Dictado a viva voz

Clases
•Presentación
•Procedimientos
•Descriptivo

www.maximiliano.cl

Qué es HTML

SGML
1986
Lenguaje de Marcado
Generalizado Standard

HTML
1991
Lenguaje de Marcas de Hipertextos

www.maximiliano.cl

Para qué sirve

www.maximiliano.cl

Para qué sirve
Describir estructura y contenido

www.maximiliano.cl

Para qué sirve
Complementar el texto con Objetos

www.maximiliano.cl

Para qué sirve
Se escribe en forma de “Etiquetas”

www.maximiliano.cl

Para qué sirve
Se escribe en forma de “Etiquetas”
Rodeada por Corchetes Angulares

www.maximiliano.cl
< >

Modularización (XHTML)
de elementos
Declaración / DOCTYPE

www.maximiliano.cl

de elementos

Elemento Raiz / <html>

www.maximiliano.cl

de elementos


Modularización. Módulo de:
Estructura / body, head, html, title
Texto / abbr, acronym, address, etc.
Hipertexto / a
Lista / dl, dt, dd, ol, ul, li.
Objetos / object, param.
Presentación / b, big, hr, i, etc.
etc. /

www.maximiliano.cl

Estructura de Elementos
Elemento

<a href=”” title=””>texto de enlace</a>

www.maximiliano.cl

Elemento

<Etiqueta inicial> </Etiqueta ﬁnal >


www.maximiliano.cl

Elemento


Contenido


www.maximiliano.cl

Elemento


Atributo=”valor” Contenido


www.maximiliano.cl


www.maximiliano.cl

No es una etiqueta sino una
instrucción
•Deﬁnición del Tipo de Documento (DTD)
•El DTD especiﬁca las reglas para el
lenguaje de marcado
•XHTML 1.0 Strict / XHTML 1.0 Transitional
•XHTML 1.1
•HTML 4.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">

www.maximiliano.cl


www.maximiliano.cl

Etiqueta que contiene todo el HTML

•Informa al navegador que lo contenido
por él debe ser interpretado como HTML
•Inicio y término del documento
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
...elementos del head...
</head>
<body>
...elementos del body...
</body>

</html>
www.maximiliano.cl

Estructura de documento
<html>

</html>
www.maximiliano.cl

<html>

<head>

</head>

</html>
www.maximiliano.cl

<html>

<head>

</head>

<body>

</body>
</html>
www.maximiliano.cl

Módulos de: <html>
•Estructura
•html, head, title, body <head>
•Metainformación
•Estilos <title> y otros elementos
•Link
•Base </head>

<body>

</body>
</html>
www.maximiliano.cl

Módulos de: <html>
•Estructura
•html, head, title, body <head>
•Metainformación
•Estilos <title> y otros elementos
•Link
•Base </head>
Módulos de:
•Texto <body>
•p, code, div, em, strong, span, q,
pre, samp, h1, h2, h3, etc elementos
•Hipertexto
•Lista
•Objetos
•Presentación
•Edición
•Formularios </body>
•Tablas
•Imágen </html>
•Otros
www.maximiliano.cl

¿Para quién?
Usuarios

Comunicamos/Informamos

www.maximiliano.cl

¿Para quién?
Humanos Usuarios Máquinas


www.maximiliano.cl

¿Para quién?

Visible “Invisible”

www.maximiliano.cl

¿Para quién?


Titular principal ➡ h1

www.maximiliano.cl

¿Para quién?


Contenido del artículo ➡ p

www.maximiliano.cl

¿Para quién?


Lista de elementos ➡ ol, ul, li, li, li, li, li.

www.maximiliano.cl

¿Para quién?


Datos en excel ➡ table, td, tr,

www.maximiliano.cl

¿Para quién?


Datos en excel ➡ table, td, tr,
➡ Valores de atributos
www.maximiliano.cl

<head> o cabecera
Contiene información sobre el documento que:
no se muestra directamente al usuario

www.maximiliano.cl

<head> o cabecera
no se muestra directamente al usuario
<title>

<html>
<head>
<title>Guía de Referencia Rápida XHTML</title>
</head>
<body>
...elementos del body...
</body>
</html>

www.maximiliano.cl

<head> o cabecera
referencia a metaetiquetas

www.maximiliano.cl

<head> o cabecera
referencia a metaetiquetas
<meta>

<meta name="Description" content="Qué es HTML y para qué sirve" />
<meta name="Keywords" content="HTML,XHTML,tutorial HTML" />
<meta name="Author" content="Maximiliano Martin" />
<meta name="Copyright" content="...

www.maximiliano.cl

<head> o cabecera
relaciona mediante vínculos a otras URL o archivos

www.maximiliano.cl

<head> o cabecera
relaciona mediante vínculos a otras URL o archivos
<link>

<link type="text/css" rel="stylesheet" href="css/base.css" />
<link type="text/css" media="print" rel="stylesheet" href="css/print.css" />
<link type="text/css" media="aural" rel="stylesheet" href="css/aural.css" />

www.maximiliano.cl

<body> o cuerpo
Deﬁne el contenido del documento. Lo que se
muestra a través del navegador

www.maximiliano.cl

<body> o cuerpo
<body>...
Elementos en bloque Elementos en linea

...</body>

www.maximiliano.cl

<body> o cuerpo
<body>...
Elementos en bloque Elementos en linea

p, div, ol, ul, li, a, img, em,
h1, h2, h3, etc. strong, span,
etc.

...</body>

www.maximiliano.cl

Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores especíﬁcos (Humanos/Robots)

<a> vínculo o ancla </a>

www.maximiliano.cl


<a> vínculo o ancla </a>
•href •hreﬂang
•title •accesskey
•class •rel
•id •tabindex

<a href=”http://www.wikipedia.com/ancla/”
title=”Deﬁnición de Wikipedia” rel=”External”> vínculo
o ancla </a>
www.maximiliano.cl


<img src=”URI” />
•scr •height
•alt •longdesc
•class •width
•id

<img src=”http://www.w3c.es/img/eslogo-20030729.png”
alt="Oﬁcina española del W3C" height="52" width="279" />

www.maximiliano.cl

+ Elementos

•Estructura: body, head, html, title •Hipertexto: a
•Texto: abbr, acronym, address, blockquote, br, •Lista: dl, dt, dd, ol, ul, li
cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, •Objetos: object, param
p, pre, q, samp, span, strong, var •Edición: del, ins
•Presentación: b, big, hr, i, small, sub, sup, tt •Texto Bidireccional: bdo
•Formularios: button, ﬁeldset, form, input, label, •Módulo de Imagen: img
legend, select, optgroup, option, textarea •Metainformación: meta
•Tablas: caption, col, colgroup, table, tbody, td, •Scripting: noscript, script
tfoot, th, thead, tr •Hoja de Estilo: style element
•Mapa de Imagen del lado Cliente: area, map •Link: link
•Mapa de Imagen del lado Servidor: Attribute •Base: base
ismap on img

www.maximiliano.cl

+ Elementos
Propiedad de algunos elementos a los que se les Obj
ect

ject
<ob m />
<pa
ra
s

>
Obj
Par
ect
am
ete
r

nt s
st me g />
d li Ele
ere list pty <im t />
s Ord ed Em pu
List der <in
U nor k />
item list /> <lin a />
ea
<ol> List ion <ar > et
init rm se / <m />
<ul> Def n te <ba ram
TML itio tion > <pa
line X)H efin crip br /
Out of ( <li> D des <
l />
ent sion ent Ter
m
<co
um Ver ocu
m <dl> />
Doc Ld tion > <hr
E> HTM rma <dt
TYP info ts > ute
s
OC P age ten <dd ttrib sty
le
<!D l> e co
n eA
Pag s Cor sed
htm field title eu
<
ad> ms For
m of ot b
ion yn ,
<he For ect d lass ma ar am
dy> Coll gen c ute
s
a, p
<bo > m le el ttrib l, met
<fo
rm For lab
id eA ts.
t> Cor htm lemen
ldse In put put te: ad, e
nts --> <fie nd> No , he itle
me ext m in box ase or t
Com nt T <le
ge For own ions in b tyle
me el> p-d t t, s
- Com < lab Dro of op ion
s scrip s
<!- /> up opt ute
put Gro wn ttrib
tion

•Estructura: body, head, html, title
<in -do put be

•Hipertexto: a
rma RL >
lect p> rop eA lan
g not
Info eU t in uag
Bas data <se u D tex ang sm
ay
, hr
,
Pag
e tgro Lar
ge L
ute set
Met
a
e <op > ton
ib
Attr e, fram ts.
e
urc ion But
s e /> le eso opt > ir age m en
<ba a /> Tit tr < rea d
ang
u
r, f
ra m
van ce xta e: L ase, b t ele
et Rele resour <te > Not scrip

•Texto: abbr, acronym, address, blockquote, br,
<m tton

•Lista: dl, dt, dd, ol, ul, li
> le rce <bu in b am or
<t itle Sty re sou u sed ar
ipt ,p
k /> Scr ifra
me
<lin s
yle> s Tab
le ute
<st able ion ttrib ind
ex
ript
> T t
Cap heade
r dA tab
<sc oar
re > eyb

•Objetos: object, param
tu le K
le Tab

cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd,
St ruc tab n> ody
ent din
g <
ptio le b ter key
um Hea ctio
n
<ca Tab oo ess
Doc e se tion > le f up acc
Pag ead Tab gro
]> sec <th > mn nts ad
1-6 Inli
ne ody Colu n Eve nlo
<h[ aph <tb t> m dow onU
agr tfoo Colu row Win

p, pre, q, samp, span, strong, var •Edición: del, ins
<d iv> Par ak < up >
bre rule lgro le
an> Line tal <co Tab cell
<sp der oad
izon l /> Hea cell onL
<p> Hor <co le
r /> tr> Tab ts ese
t
<b < ven onR

•Presentación: b, big, hr, i, small, sub, sup, tt
/> > mE elec
t
<hr <th For

•Texto Bidireccional: bdo
> onS mit
nk <td aps r on Sub
e li age
M lu
s Pag link onB ge
Link ail d Im ge han
Em s an Ima onC us
f="
"> :"> hor or age Map e Map oc
Im ge onF

•Formularios: button, ﬁeldset, form, input, label,
hre to nc nch ag
<a mail e"> A to a Ima f Im
f="

•Módulo de Imagen: img
ao ts
hre
="n
am Link g /> Are ven eyu
p
<a "> <im > rd E onK
n ame ame p boa
<a f ="#
n
< ma Key
hre /> s
<a <ar
ea
Ent
itie own
pha
sis ter rk eyd ss
em rac ma onK re
Cha eyp

legend, select, optgroup, option, textarea
kup ng tion

•Metainformación: meta
tM
ar Str
o
sis mo
n ta
Quo rsand onK t
Tex pha tion Com eou
Em ta " p e nts ous r
> quo n Am an Eve onM ove
r ong ong tatio 3 4; & s th han Mo use use
<st L
rt q
uo &# Les t onM
o
eup
m> Sho viation 38; ter ous
rea

•Tablas: caption, col, colgroup, table, tbody, td,
e> < ol
<e uot re &# G mb lick onM
ckq Abb ym 60; " sy onC

•Scripting: noscript, script
<blo &# > "At ck
on blcli n
Acr t 62; @ Eur
o t onD dow
<q> > ss tex &# ulle use
br Add
re tted 64; all
b
onM
o ove
<ab nym> ma &#
€ Sm ark em
-for ; ous
ro Pre 128 • dem onM
<ac s> ion &# Tra spa
ce
res finit 9;

tfoot, th, thead, tr
d De 14 n d ing
<ad &# ™ Pou eak

•Hoja de Estilo: style element
e ; -br bol
e> Cod 153 £ Non ight s
ym
<pr tion &# ;
fn> Cita t ext 163 Co pyr
<d ted t &# ; .co
m
de> Dele ed tex 160 © tes
<co &# dBy

•Mapa de Imagen del lado Cliente: area, map
e> ert 169
; dde
<cit Ins ript &# mA
sc fro

•Link: link
<de
l> Sub script ree
er ion le f
s> Sup ect ilab
<in t dir Ava
b> Tex
<su

•Mapa de Imagen del lado Servidor: Attribute
p>
<su
o>

•Base: base
<bd

ismap on img

www.maximiliano.cl

WYSIWYG

www.maximiliano.cl

WYSIWYG
What You See Is What You Get
Lo que ves es lo que obtienes

www.maximiliano.cl

Validación
Veriﬁca la correcta implementación del código según
el DTD declarado
http://validator.w3.org/

www.maximiliano.cl

Validación

www.maximiliano.cl

Accesibilidad

www.maximiliano.cl

Accesibilidad
Proporciona alternativas para que lleguemos a más
usuarios con nuestro mensaje/información
•Metaetiquetas link
•Texto de vínculos
•Atributos alt, longdesc, rel, Acceskey, tabindex
•Estructura de cabeceras h1, h2, h3
•Cambios de idioma

http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML-
TECHS_es.html/

www.maximiliano.cl

Ejercicio
Escribir las etiquetas identiﬁcadas

www.maximiliano.cl

Ejercicio
¿Cuántos elementos HTML puedes
nombrar en 5 minutos?

www.maximiliano.cl

Gracias
Maximiliano Martin
www.maximiliano.cl

www.maximiliano.cl

HTML ¿qué es y para que sirve?

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a HTML ¿qué es y para que sirve?

Similar a HTML ¿qué es y para que sirve? (20)

Más de Maximiliano Martin

Más de Maximiliano Martin (19)

Último

Último (11)

HTML ¿qué es y para que sirve?