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 Describir estructura y contenido Complementar el texto con Objetos www.maximiliano.cl

Para qué sirve Describir estructura y contenido Complementar el texto con Objetos Se escribe en forma de “Etiquetas” www.maximiliano.cl

Para qué sirve Describir estructura y contenido Complementar el texto con Objetos Se escribe en forma de “Etiquetas” Rodeada por Corchetes Angulares www.maximiliano.cl < >

Modularización (XHTML) de elementos Declaración / DOCTYPE www.maximiliano.cl

Modularización (XHTML) de elementos Declaración / DOCTYPE Elemento Raiz / <html> www.maximiliano.cl

Modularización (XHTML) de elementos Declaración / DOCTYPE Elemento Raiz / <html> 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

Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta ﬁnal > <a href=”” title=””>texto de enlace</a> www.maximiliano.cl

Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta ﬁnal > Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl

Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta ﬁnal > Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl

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

Elemento Raiz / <html> www.maximiliano.cl

Elemento Raiz / <html> 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

Estructura de documento <html> <head> </head> </html> www.maximiliano.cl

Estructura de documento <html> <head> </head> <body> </body> </html> www.maximiliano.cl

Estructura de documento 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

Estructura de documento 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 Comunicamos/Informamos www.maximiliano.cl

¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” www.maximiliano.cl

¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 www.maximiliano.cl

¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p www.maximiliano.cl

¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. www.maximiliano.cl

¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, www.maximiliano.cl

¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. 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 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 ...</body> 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, 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

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 •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 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, •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 asigna Valores especíﬁcos (Humanos/Robots) 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

http://www.maximiliano.cl	205
http://www.slideshare.net	157
http://laboratorio1web.wikispaces.com	4
http://cv.uoc.es	4
http://cv.uoc.edu	3
file://	2
http://webcache.googleusercontent.com	1

HTML ¿qué es y para que sirve?

by Maximiliano Martin on Nov 10, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 376

Statistics

HTML ¿qué es y para que sirve? — Presentation Transcript