Presentado por: Oscar Guiovanny Gualteros Chala

TALLER 1 HTML AVANZADO

Que es HTML: HTML, siglas de HyperText Markup
Language (lenguaje de marcas de hipertexto), hace
referencia al lenguaje de marcadopara la elaboracin
de pginas web. Es un estndar que sirve de referencia
para la elaboracin de pginas web en sus diferentes
versiones, define una estructura bsica y un cdigo
(denominado cdigo HTML) para la definicin de contenido
de una pgina web, como texto, imgenes, videos, entre
otros. Es un estndar a cargo de la W3C, organizacin
dedicada a la estandarizacin de casi todas las tecnologas
ligadas a la web, sobre todo en lo referente a su escritura e
interpretacin. Se considera el lenguaje web ms
importante siendo su invencin crucial en la aparicin,
desarrollo y expansin de la World Wide Web. Es el estndar
que se ha impuesto en la visualizacin de pginas web y es
el que todos los navegadores actuales han adoptado.
El lenguaje HTML basa su filosofa de desarrollo en la
diferenciacin. Para aadir un elemento externo a la pgina
(imagen, vdeo, script, entre otros.), este no se incrusta
directamente en el cdigo de la pgina, sino que se hace
una referencia a la ubicacin de dicho elemento mediante
texto. De este modo, la pgina web contiene slo texto
mientras que recae en el navegador web (interpretador del
cdigo) la tarea de unir todos los elementos y visualizar la
pgina final. Al ser un estndar, HTML busca ser un
lenguaje que permita que cualquier pgina web escrita en
una determinada versin, pueda ser interpretada de la
misma forma (estndar) por cualquier navegador web
actualizado.
Sin embargo, a lo largo de sus diferentes versiones, se han
incorporado y suprimido diversas caractersticas, con el fin
de hacerlo ms eficiente y facilitar el desarrollo de pginas
web compatibles con distintos navegadores y plataformas
(PC de escritorio, porttiles, telfonos inteligentes, tabletas,

Presentado por: Oscar Guiovanny Gualteros Chala

etc.). No obstante, para interpretar correctamente una

nueva versin de HTML, los desarrolladores de navegadores
web deben incorporar estos cambios y el usuario debe ser
capaz de usar la nueva versin del navegador con los
cambios incorporados. Normalmente los cambios son
aplicados mediante parches de actualizacin automtica
(Firefox, Chrome) u ofreciendo una nueva versin del
navegador con todos los cambios incorporados, en un sitio
web de descarga oficial (Internet Explorer). Por lo que un
navegador desactualizado no ser capaz de interpretar
correctamente una pgina web escrita en una versin de
HTML superior a la que pueda interpretar, lo que obliga
muchas veces a los desarrolladores a aplicar tcnicas y
cambios que permitan corregir problemas de visualizacin e
incluso de interpretacin de cdigo HTML. As mismo, las
pginas escritas en una versin anterior de HTML deberan
ser actualizadas o reescritas, lo que no siempre se cumple.
Es por ello que ciertos navegadores an mantienen la
capacidad de interpretar pginas web de versiones HTML
anteriores. Por estas razones, an existen diferencias entre
distintos navegadores y versiones al interpretar una misma
pgina web.

Aspectos del HTML:Aade que puede ver la fuente en

cada sitio web, de aspecto agradable que puede observar.
Es como si tuviera lentes de rayos X que permite ver a
cualquier persona en ropa interior a voluntad. Lo cierto que
eso es una tentacin, pero tambin la es el observar si un
bonito sitio web est construido con un cdigo a su altura, o
si
su
belleza
es
solo
superficial
y
exterior.
Bueno, el cdigo HTML no es precisamente poesa, es slo
cdigo, pero este puede ser tan complejo y elegante como
un lenguaje dinmico, pero que todava conserva los trazos
de su creador, algo ms o menos como la poesa.

Presentado por: Oscar Guiovanny Gualteros Chala

La historia del HTML: Tim Berners-Lee (TBL) en

1991 describe 22 elementos que incluyen el diseo inicial y
relativamente simple de HTML. Trece de estos elementos
todava existen en HTML 4.
Berners-Lee consideraba el HTML una ampliacin de SGML,
pero no fue formalmente reconocida como tal hasta la
publicacin a mediados de 1993, por la IETF (en espaol:
Grupo de Trabajo de Ingeniera de Internet), de una primera
proposicin para una especificacin del HTML: el borrador
del Hypertext Markup Language de Berners-Lee y Dan
Connolly, que inclua una Definicin de Tipo de
Documento SGML para definir la gramtica. El borrador
expir a los seis meses, pero fue notable por su
reconocimiento
de
la
etiqueta
propia
del
navegador Mosaic usada para insertar imgenes sin cambio
de lnea, que reflejaba la filosofa del IETF de basar
estndares en prototipos con xito. De la misma manera, el
borrador competidor de Dave Raggett HTML+ (Hypertext
Markup Format) (Formato de Marcaje de Hipertexto), de
finales de 1993, sugera estandarizar caractersticas ya
implementadas, como las tablas.
La estructura de un documento HTML: Un documento
HTML est definido por una etiqueta de apertura <HTML> y
una etiqueta de cierre </HTML>. Dentro de este se dividen
dos partes fundamentales la cabecera, delimitada por la
etiqueta<HEAD> y
el
cuerpo,
delimitado
por
la
etiqueta <BODY>. Por tanto la estructura de un documento
HTML ser:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>

Presentado por: Oscar Guiovanny Gualteros Chala

</HTML>
Ninguno de estos elementos es obligatorio, pudiendo
componer documentos HTML que se muestren sin ningn
problema sin incluir estas etiquetas de identificacin. Si se
utilizan elementos que forzosamente deban ser incluidos en
la cabecera (como la etiqueta de titulo), no sern
reconocidos correctamente si no se incluyen entre las
etiquetas de <HEAD>.
En los prximos apartados explicaremos de forma separada
los componentes de la cabecera y del cuerpo de un
documento HTML.

La sintaxis de los elementos HTML: El HTML es un

lenguaje de marcas que basa su sintaxis en un elemento de
base al que llamamos etiqueta. A travs de las etiquetas
vamos definiendo los elementos del documento, como
enlaces, prrafos, imgenes, etc. As pues, un documento
HTML estar constituido por texto y un conjunto de
etiquetas para definir la forma con la que se tendr que
presentar el texto y otros elementos en la pgina.
La etiqueta presenta frecuentemente dos partes:
Una
apertura de
forma
Un cierre de tipo </etiqueta>

general

<etiqueta>

Todo lo incluido en el interior de esa etiqueta sufrir las

modificaciones que caracterizan a esta etiqueta. As por
ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en
nuestro documento HTML escribimos una frase con el
siguiente cdigo:

Presentado por: Oscar Guiovanny Gualteros Chala

<b>Esto esta en negrita</b>

El resultado Ser:
Esto esta en negrita
Las etiquetas <p> y </p> definen un prrafo. Si en nuestro
documento HTML escribiramos:
<p>Hola,
estamos
en
el
prrafo
<p>Ahora hemos cambiado de prrafo</p>

1</p>

El resultado sera:
Hola, estamos en el prrafo 1
Ahora hemos cambiado de prrafo

Elementos de bloque y en lnea HTML: Adems de

etiquetas y atributos, HTML define el trmino elemento para
referirse a las partes que componen los documentos HTML.
Aunque en ocasiones se habla de forma indistinta de
"elementos" y "etiquetas", en realidad un elemento HTML
es mucho ms que una etiqueta, ya que est formado por:
Una etiqueta de apertura.
Cero o ms atributos.
Texto encerrado por la etiqueta.
Una etiqueta de cierre.
El texto encerrado por la etiqueta es opcional, ya que
algunas etiquetas de HTML no pueden encerrar ningn
texto. El siguiente esquema muestra un elemento HTML,
formado por una etiqueta <p>, atributos y contenidos de
texto:

Presentado por: Oscar Guiovanny Gualteros Chala

Los elementos en lnea definidos por HTML

son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, fon
t, i,img, input, kbd, label, q, s, samp, select, small, span, strike, strong,
sub, sup, textarea, tt, u, var.
Los elementos de bloque definidos por HTML
son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3,h
4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.
Los siguientes elementos tambin se considera que son de
bloque: dd, dt, frame-set, li, tbody, td, tfoot, th, thead, tr.
Los siguientes elementos pueden ser en lnea y de bloque
segn las
circunstancias: button, del, iframe, ins, map,object, script.

Referencia de caracteres
Una referencia de caracteres es una pequea pieza de
cdigo usada para representar ciertos caracteres en
documentos HTML. Principalmente usada para insertar
smbolos que no pertenecen al juego de caracteres (o en
muchos casos, smbolos difciles de ingresar), las
referencias de caracteres pueden insertarse utilizando una
expresin regular. De echo, cada referencia de caracteres
puede insertarse de tres formas diferentes:
Por su nombre de entidad: Cada referencia de caracteres
tiene una entidad asignada. El formato apra insertar un
smbolo por su nombre de entidad est compuesto por un
smbolo "&" seguido de su nombre de entidad y un punto y
coma (";"). Por ejemplo, el smbolo de la libra esterlina ("")
puede ser insertado como "&pound;".

Presentado por: Oscar Guiovanny Gualteros Chala

Por su valor decimal: Tal como con las entidades, un

nmero nico es asociado con cada referencia de
caracteres. El formato es compuesto por un smbolo "&"
seguido de un signo numeral ("#"), el nmero asociado y un
punto y coma (";"). Por ejemplo, el smbolo de la libra
esterlina ("") puede ser insertado como "&#163;".
Por
su
valor
hexadecimal: Este
mtodo
funciona
exactamente como el del valor decimalcon la diferencia que
el nmero se escribe en formato hexadecimal y una "x" (en
minscula) se agrega a continuacin del signo numeral
("#"). Las letras en el nmero hexadecimal deben ir en
maysculas. Por ejemplo, el smbolo de la libra esterlina
("") puede ser insertado como "&#xA3;".
Muchos navegadores no proveen soporte para todas las
entidades de caracteres y usualmente representan un
cuadrado blanco ("") o un signo de pregunta ("?" "")
en su lugar. Por otra parte, la notacin hexadecimal para
referencias de caracteres tampoco es soportada por
muchos navegadores, lo que la hace una forma poco fiable
de reproducir smbolos. Dicho esto, queda claro que la
mejor forma de representar referencias de caracteres es a
travs de la noracin decimal.
Tablas de referencia de caracteres
A continuacin hay tres tablas de referencias de caracteres
que muestran las tres notaciones y su representacin, para
cada smbolo disponible para documentos HTML. Los
documentos XHTML incluyen el smbolo de apstrofe,
referido como "&apos;" (por su nombre de entidad),
"&#39;" (por su valor decimal) y "&#x27" (por su valor
hexadecimal).
Nota que, como esta referencia de caracteres ha sido
recientemente introducidad, muchos navegadores todava
no pueden procesarla por su nombre de entidad, por lo que
es recomendable usar la notacin decimal.

Presentado por: Oscar Guiovanny Gualteros Chala

Marcado y caracteres de internacionalizacin

Nombre
&quot;

Decimal
&#34;

Hexa
&#x22;

&amp;

&#38;

&#x26;

&lt;

&#60;

&#x3C;

&gt;

&#62;

&#x3E;

&OElig;

&#338;

&#x152;

&oelig;

&#339;

&#x153;

&Scaron;

&#352;

&#x160;

&scaron;

&#353;

&#x161;

&Yuml;

&#376;

&#x178;

&circ;

&#710;

&#x2C6;

&tilde;

&#732;

&#x2DC;

&ensp;

&#8194;

&#x2002;

&emsp;

&#8195;

&#x2003;

&thinsp;

&#8201;

&#x2009;

&zwnj;

&#8204;

&#x200C;

&zwj;

&#8205;

&#x200D;

&lrm;

&#8206;

&#x200E;

&rlm;

&#8207;

&#x200F;

&ndash;

&#8211;

&#x2013;

&mdash;

&#8212;

&#x2014;

&lsquo;

&#8216;

&#x2018;

&rsquo;

&#8217;

&#x2019;

&sbquo;

&#8218;

&#x201A;

&ldquo;

&#8220;

&#x201C;

&rdquo;

&#8221;

&#x201D;

&bdquo;

&#8222;

&#x201E;

&dagger;

&#8224;

&#x2020;

&Dagger;

&#8225;

&#x2021;

&permil;

&#8240;

&#x2030;

&lsaquo;

&#8249;

&#x2039;

&rsaquo;

&#8250;

&#x203A;

&euro;

&#8364;

&#x20AC;

ISO 8859-1 (Latin 1)

Carcter

"
&
<
>

Presentado por: Oscar Guiovanny Gualteros Chala

ISO 8859-1 characters (Latin 1)">

Nombre
&nbsp;

Decimal
&#160;

Hexa
&#xA0;

Carcter

&iexcl;

&#161;

&#xA1;

&cent;

&#162;

&#xA2;

&pound;

&#163;

&#xA3;

&curren;

&#164;

&#xA4;

&yen;

&#165;

&#xA5;

&brvbar;

&#166;

&#xA6;

&sect;

&#167;

&#xA7;

&uml;

&#168;

&#xA8;

&copy;

&#169;

&#xA9;

&ordf;

&#170;

&#xAA;

&laquo;

&#171;

&#xAB;

&not;

&#172;

&#xAC;

&shy;

&#173;

&#xAD;

&reg;

&#174;

&#xAE;

&macr;

&#175;

&#xAF;

&deg;

&#176;

&#xB0;

&plusmn;

&#177;

&#xB1;

&sup2;

&#178;

&#xB2;

&sup3;

&#179;

&#xB3;

&acute;

&#180;

&#xB4;

&micro;

&#181;

&#xB5;

&para;

&#182;

&#xB6;

&middot;

&#183;

&#xB7;

&cedil;

&#184;

&#xB8;

&sup1;

&#185;

&#xB9;

&ordm;

&#186;

&#xBA;

&raquo;

&#187;

&#xBB;

&frac14;

&#188;

&#xBC;

&frac12;

&#189;

&#xBD;

&frac34;

&#190;

&#xBE;

&iquest;

&#191;

&#xBF;

&Agrave;

&#192;

&#xC0;

&Aacute;

&#193;

&#xC1;

Presentado por: Oscar Guiovanny Gualteros Chala

Nombre
&Acirc;

Decimal
&#194;

Hexa
&#xC2;

&Atilde;

&#195;

&#xC3;

&Auml;

&#196;

&#xC4;

&Aring;

&#197;

&#xC5;

&AElig;

&#198;

&#xC6;

&Ccedil;

&#199;

&#xC7;

&Egrave;

&#200;

&#xC8;

&Eacute;

&#201;

&#xC9;

&Ecirc;

&#202;

&#xCA;

&Euml;

&#203;

&#xCB;

&Igrave;

&#204;

&#xCC;

&Iacute;

&#205;

&#xCD;

&Icirc;

&#206;

&#xCE;

&Iuml;

&#207;

&#xCF;

&ETH;

&#208;

&#xD0;

&Ntilde;

&#209;

&#xD1;

&Ograve;

&#210;

&#xD2;

&Oacute;

&#211;

&#xD3;

&Ocirc;

&#212;

&#xD4;

&Otilde;

&#213;

&#xD5;

&Ouml;

&#214;

&#xD6;

&times;

&#215;

&#xD7;

&Oslash;

&#216;

&#xD8;

&Ugrave;

&#217;

&#xD9;

&Uacute;

&#218;

&#xDA;

&Ucirc;

&#219;

&#xDB;

&Uuml;

&#220;

&#xDC;

&Yacute;

&#221;

&#xDD;

&THORN;

&#222;

&#xDE;

&szlig;

&#223;

&#xDF;

&agrave;

&#224;

&#xE0;

&aacute;

&#225;

&#xE1;

&acirc;

&#226;

&#xE2;

&atilde;

&#227;

&#xE3;

&auml;

&#228;

&#xE4;

&aring;

&#229;

&#xE5;

Carcter

Presentado por: Oscar Guiovanny Gualteros Chala

Nombre
&aelig;

Decimal
&#230;

Hexa
&#xE6;

&ccedil;

&#231;

&#xE7;

&egrave;

&#232;

&#xE8;

&eacute;

&#233;

&#xE9;

&ecirc;

&#234;

&#xEA;

&euml;

&#235;

&#xEB;

&igrave;

&#236;

&#xEC;

&iacute;

&#237;

&#xED;

&icirc;

&#238;

&#xEE;

&iuml;

&#239;

&#xEF;

&eth;

&#240;

&#xF0;

&ntilde;

&#241;

&#xF1;

&ograve;

&#242;

&#xF2;

&oacute;

&#243;

&#xF3;

&ocirc;

&#244;

&#xF4;

&otilde;

&#245;

&#xF5;

&ouml;

&#246;

&#xF6;

&divide;

&#247;

&#xF7;

&oslash;

&#248;

&#xF8;

&ugrave;

&#249;

&#xF9;

&uacute;

&#250;

&#xFA;

&ucirc;

&#251;

&#xFB;

&uuml;

&#252;

&#xFC;

&yacute;

&#253;

&#xFD;

&thorn;

&#254;

&#xFE;

&yuml;

&#255;

&#xFF;

Carcter

Smbolos, smbolos matemticos, y letras griegas

Nombre
&fnof;

Decimal Hexa
&#402; &#x192;

&Alpha;

&#913;

&#x391;

&Beta;

&#914;

&#x392;

&Gamma;

&#915;

&#x393;

&Delta;

&#916;

&#x394;

&Epsilon;

&#917;

&#x395;

&Zeta;

&#918;

&#x396;

Carcter

Presentado por: Oscar Guiovanny Gualteros Chala

Nombre
&Eta;

Decimal Hexa
&#919; &#x397;

&Theta;

&#920;

&#x398;

&Iota;

&#921;

&#x399;

&Kappa;

&#922;

&#x39A;

&Lambda;

&#923;

&#x39B;

&Mu;

&#924;

&#x39C;

&Nu;

&#925;

&#x39D;

&Xi;

&#926;

&#x39E;

&Omicron;

&#927;

&#x39F;

&Pi;

&#928;

&#x3A0;

&Rho;

&#929;

&#x3A1;

&Sigma;

&#931;

&#x3A3;

&Tau;

&#932;

&#x3A4;

&Upsilon;

&#933;

&#x3A5;

&Phi;

&#934;

&#x3A6;

&Chi;

&#935;

&#x3A7;

&Psi;

&#936;

&#x3A8;

&Omega;

&#937;

&#x3A9;

&alpha;

&#945;

&#x3B1;

&beta;

&#946;

&#x3B2;

&gamma;

&#947;

&#x3B3;

&delta;

&#948;

&#x3B4;

&epsilon;

&#949;

&#x3B5;

&zeta;

&#950;

&#x3B6;

&eta;

&#951;

&#x3B7;

&theta;

&#952;

&#x3B8;

&iota;

&#953;

&#x3B9;

&kappa;

&#954;

&#x3BA;

&lambda;

&#955;

&#x3BB;

&mu;

&#956;

&#x3BC;

&nu;

&#957;

&#x3BD;

&xi;

&#958;

&#x3BE;

&omicron;

&#959;

&#x3BF;

&pi;

&#960;

&#x3C0;

&rho;

&#961;

&#x3C1;

&sigmaf;

&#962;

&#x3C2;

Carcter

Presentado por: Oscar Guiovanny Gualteros Chala

Nombre
&sigma;

Decimal Hexa
&#963; &#x3C3;

&tau;

&#964;

&#x3C4;

&upsilon;

&#965;

&#x3C5;

&phi;

&#966;

&#x3C6;

&chi;

&#967;

&#x3C7;

&psi;

&#968;

&#x3C8;

&omega;

&#969;

&#x3C9;

&thetasym;

&#977;

&#x3D1;

&upsih;

&#978;

&#x3D2;

&piv;

&#982;

&#x3D6;

&bull;

&#8226; &#x2022;

&hellip;

&#8230; &#x2026;

&prime;

&#8242; &#x2032;

&Prime;

&#8243; &#x2033;

&oline;

&#8254; &#x203E;

&frasl;

&#8260; &#x2044;

&weierp;

&#8472; &#x2118;

&image;

&#8465; &#x2111;

&real;

&#8476; &#x211C;

&trade;

&#8482; &#x2122;

&alefsym;

&#8501; &#x2135;

&larr;

&#8592; &#x2190;

&uarr;

&#8593; &#x2191;

&rarr;

&#8594; &#x2192;

&darr;

&#8595; &#x2193;

&harr;

&#8596; &#x2194;

&crarr;

&#8629; &#x21B5;

&lArr;

&#8656; &#x21D0;

&uArr;

&#8657; &#x21D1;

&rArr;

&#8658; &#x21D2;

&dArr;

&#8659; &#x21D3;

&hArr;

&#8660; &#x21D4;

&forall;

&#8704; &#x2200;

&part;

&#8706; &#x2202;

&exist;

&#8707; &#x2203;

&empty;

&#8709; &#x2205;

Carcter

Presentado por: Oscar Guiovanny Gualteros Chala

Nombre
&nabla;

Decimal Hexa
&#8711; &#x2207;

&isin;

&#8712; &#x2208;

&notin;

&#8713; &#x2209;

&ni;

&#8715; &#x220B;

&prod;

&#8719; &#x220F;

&sum;

&#8721; &#x2211;

&minus;

&#8722; &#x2212;

&lowast;

&#8727; &#x2217;

&radic;

&#8730; &#x221A;

&prop;

&#8733; &#x221D;

&infin;

&#8734; &#x221E;

&ang;

&#8736; &#x2220;

&and;

&#8743; &#x2227;

&or;

&#8744; &#x2228;

&cap;

&#8745; &#x2229;

&cup;

&#8746; &#x222A;

&int;

&#8747; &#x222B;

&there4;

&#8756; &#x2234;

&sim;

&#8764; &#x223C;

&cong;

&#8773; &#x2245;

&asymp;

&#8776; &#x2248;

&ne;

&#8800; &#x2260;

&equiv;

&#8801; &#x2261;

&le;

&#8804; &#x2264;

&ge;

&#8805; &#x2265;

&sub;

&#8834; &#x2282;

&sup;

&#8835; &#x2283;

&nsub;

&#8836; &#x2284;

&sube;

&#8838; &#x2286;

&supe;

&#8839; &#x2287;

&oplus;

&#8853; &#x2295;

&otimes;

&#8855; &#x2297;

&perp;

&#8869; &#x22A5;

&sdot;

&#8901; &#x22C5;

&lceil;

&#8968; &#x2308;

&rceil;

&#8969; &#x2309;

Carcter

Presentado por: Oscar Guiovanny Gualteros Chala

Nombre
&lfloor;

Decimal Hexa
&#8970; &#x230A;

&rfloor;

&#8971; &#x230B;

&lang;

&#9001; &#x2329;

&rang;

&#9002; &#x232A;

&loz;

&#9674; &#x25CA;

&spades;

&#9824; &#x2660;

&clubs;

&#9827; &#x2663;

&hearts;

&#9829; &#x2665;

&diams;

&#9830; &#x2666;

Carcter