HTML Contenedores y tipos de elementos

Quiz
Escribir la estructura de en
HTML del siguiente contenido

Quiz
Escribir la estructura de en
HTML del siguiente contenido

•20 minutos
•Imágenes similares
•Textedit
•Entrega vía email a
m.martin@profesor.duoc.cl

HTML
Contenedores y tipos de
elementos

Computación Multimedia I - Clase 3
Maximiliano Martin - DUOC 2010

Declaración / DOCTYPE

www.maximiliano.cl

Declaración / DOCTYPE
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

<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

www.maximiliano.cl

<body> o cuerpo

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

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

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 •width
•class •longdesc
•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, cite, •Lista: dl, dt, dd, ol, ul, li
code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, •Objetos: object, param
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, tfoot,
th, thead, tr
•Scripting: noscript, script
•Mapa de Imagen del lado Cliente: area, map •Hoja de Estilo: style element
•Mapa de Imagen del lado Servidor: Attribute •Link: link
ismap on img •Base: base
www.maximiliano.cl

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

ject
s

<ob m />
<pa
ra
>
Obj
Par
ect
am
ete
r

st nts
d li Ele
me g />
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
HTM
L itio tion > <pa
line X) efin crip br /
Out of ( <li> D des <
l />
ent sion nt Ter
m
<co
Ver me <dl>
um ocu tion />
Doc Ld > <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> orm ion of ot b
<he Fo rms F
ct s ma
yn
am
,
dy> Coll
e
gen
d clas ute
s ar
<bo a, p
rm> m le el ttrib l, met
<fo For lab
id eA ts.
t> Cor htm lemen
ldse In put t te: ad, e
nts --> <fie nd> pu 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 o f op io ns scrip s
<!- /> up opt ute
put Gro own put ttrib
tion <in be

•Estructura: body, head, html, title
RL > p-d eA

•Hipertexto: a
rma g not
eU lect p> Dro t in uag lan
Info Bas data <se ro u tex ang sm
ay
, hr
,
Pag
e
ptg ge L
set
a Lar ute
Met e <o
ion
> ton
ib
Attr e, fram ts.
e
e /> urc opt But age
s Tit le
tr eso < rea
> d ir u ra m en
<ba a /> van ce xta ang r, f t ele
m
et Rele resour <te e: L ase, b scrip
<m tton
> Not
> le rce <bu in b am or
<t itle Sty re sou u sed ar

•Texto: abbr, acronym, address, blockquote, br, cite, •Lista: dl, dt, dd, ol, ul, li
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
tu re > le K eyb
ruc tab
le Tab ody
St g < n> le b ter key
ent Hea
din n ptio Tab ess
um ctio <ca le f
oo acc
Doc e se tion ead
>
Tab gro
up

code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, •Objetos: object, param
Pag sec <th mn
]> ne ody
> nts ad
1-6 Inli <tb t> Colu n Eve onU
nlo
<h[ aph m dow
agr tfoo Colu row Win
<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

q, samp, span, strong, var
le
r /> tr> Tab ts ese
t

•Edición: del, ins
<b < ven onR
/> > mE elec
t
<hr <th For onS
> mit
nk <td aps r on Sub
e li age
M lu
s Pag link onB ge
Link d Im han

•Presentación: b, big, hr, i, small, sub, sup, tt
ail s an ge onC us
Em Ima
f="
"> :"> hor or age Map e Map oc
hre to nc nch Im ge ag onF
<a mail e"> A to a Ima f Im

•Texto Bidireccional: bdo
f=" 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

•Formularios: button, ﬁeldset, form, input, label,
em rac ma onK re
kup ng Cha tion eyp
tM
ar Str
o
sis mo
n ta
Quo rsand onK t
Tex pha tion Com eou

•Módulo de Imagen: img
Em ta " p e nts ous r
> quo n Am an Eve onM ove
rong 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
<e uot
e> &# < rea ol
ckq re G mb lick onM
Abb ym 60; > " sy onC ck
<blo &# "At

legend, select, optgroup, option, textarea
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

•Metainformación: meta
<ab nym> ma &#
€ Sm ark em
-for ; ous
ro Pre 128 • dem onM
<ac s> ion &# Tra spa
ce
d res De finit 14 9; n d ing
<ad &# ™ Pou eak bol

•Tablas: caption, col, colgroup, table, tbody, td, tfoot,
e ; -br
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

•Scripting: noscript, script
e> ert 169
; dde
<cit Ins ript &# mA
sc fro
<de
l> Sub script ree
er ion le f
s> Sup ect ilab

th, thead, tr
<in t dir Ava
b> Tex
<su
p>
<su

•Hoja de Estilo: style element
o>
<bd

•Mapa de Imagen del lado Cliente: area, map
•Mapa de Imagen del lado Servidor: Attribute •Link: link
ismap on img •Base: base
www.maximiliano.cl

Tarea
Publicar un post con:
Tipos de elementos que se pueden anidar dentro de
otros
Ejempliﬁcar utilizando el editor de HTML de
WordPress
Apuntes de la clase, lo que les quedó claro y
los que no y les gustaría ver nuevamente.

HTML Contenedores y tipos de elementos

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie HTML Contenedores y tipos de elementos

Ähnlich wie HTML Contenedores y tipos de elementos (20)

Mehr von Maximiliano Martin

Mehr von Maximiliano Martin (19)

HTML Contenedores y tipos de elementos

Hinweis der Redaktion