• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML Contenedores y tipos de elementos
 

HTML Contenedores y tipos de elementos

on

  • 8,085 views

Formalización y tipo de Documento HTML Doctype. Contenedores y tipos de elementos según sus comportamientos como Elementos de Bloque y elementos de linea.

Formalización y tipo de Documento HTML Doctype. Contenedores y tipos de elementos según sus comportamientos como Elementos de Bloque y elementos de linea.

Statistics

Views

Total Views
8,085
Views on SlideShare
7,795
Embed Views
290

Actions

Likes
0
Downloads
37
Comments
0

3 Embeds 290

http://www.maximiliano.cl 251
http://resolverideas.wordpress.com 34
http://smoshing.wordpress.com 5

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

HTML Contenedores y tipos de elementos HTML Contenedores y tipos de elementos Presentation Transcript

  • Quiz Escribir la estructura de en HTML del siguiente contenido <!-- Nombre Curso URL -->
  • 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 <!-- Nombre Curso URL -->
  • 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 •Definición del Tipo de Documento (DTD) •El DTD especifica 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&iacute;a de Referencia R&aacute;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 Define el contenido del documento. Lo que se muestra a través del navegador www.maximiliano.cl
  • <body> o cuerpo Define 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 Define 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 Define 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 Define 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 Define 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
  • <body> o cuerpo Define 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íficos (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íficos (Humanos/Robots) <img src=”URI” /> •scr •height •alt •width •class •longdesc •id <img src=”http://www.w3c.es/img/eslogo-20030729.png” alt="Oficina española del W3C" height="52" width="279" /> www.maximiliano.cl
  • + Elementos Propiedad de algunos elementos a los que se les asigna Valores específicos (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, fieldset, 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íficos (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, fieldset, 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 Ejemplificar 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.