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 Contiene información sobre el documento que: 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 Contiene información sobre el documento que: referencia a metaetiquetas www.maximiliano.cl

<head> o cabecera Contiene información sobre el documento que: 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 Contiene información sobre el documento que: relaciona mediante vínculos a otras URL o archivos www.maximiliano.cl

<head> o cabecera Contiene información sobre el documento que: 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 Deﬁne el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea www.maximiliano.cl

<body> o cuerpo Deﬁne el contenido del documento. Lo que se muestra a través del navegador <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

Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a> •href •hreflang •title •accesskey •class •rel •id •tabindex <a href=”http://www.wikipedia.com/ancla/” title=”Definición de Wikipedia” rel=”External”> vínculo o ancla </a> www.maximiliano.cl

Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores especíﬁcos (Humanos/Robots) <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 Propiedad de algunos elementos a los que se les asigna Valores especíﬁcos (Humanos/Robots) •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 asigna Valores especíﬁcos (Humanos/Robots) 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.

http://www.maximiliano.cl	185
http://smoshing.wordpress.com	4
http://resolverideas.wordpress.com	1

HTML Contenedores y tipos de elementos

by Maximiliano Martin on Sep 05, 2010

Accessibility

Tags

Upload Details

Usage Rights

3 Embeds 190

Statistics

HTML Contenedores y tipos de elementos — Presentation Transcript