Progaweb

Html 5.
Estructura de un documento para la Web
1. 1. HTML 5Estructura de un documentopara la Web

2. 2. El lenguaje HTML HyperText Markup Language (HTML) El desarrollo del lenguaje essupervisado por W3C
(World WideWeb Consortium) La ltima versin HTML 5 Las anteriores: HTML 4.01 (ao 1999) XHTML (ao
2000)
3. 3. Lenguaje de marcas Permite identificar la estructura deun documento. Utiliza etiquetas o marcas
paradelimitar los elementos de laestructura. Los navegadores interpretan laestructura del documento.
4. 4. Documentos HTML Un documento HTML no es ms queun archivo de texto. La extensin de su nombre
suele ser.html o .htm. Un editor de texto es suficiente parapoder elaborar un documento HTML.
5. 5. Estructura y apariencia<!doctype html><html><head><meta charset="utf-8"><title>Mi primer
documento</title></head><body><h1>Éste es unencabezado</h1><p>El primerpárrafo
estaráseparado del siguiente.</p><p>El segundopárrafo es este texto</p></body></html>
6. 6. Elementos y etiquetas Una etiqueta se encuentra encerradaentre los smbolos < y >. Un elemento del
documento secompone de las etiquetas que lodelimitan y su contenido.<h1>Es un encabezado </h1>Etiqueta de
apertura Etiqueta de cierre
7. 7. Estructura jerrquica Los elementos de un documentoHTML pueden contener a su vezotros. Dos elementos
son hermanos si seencuentran contenidos en el mismoelemento. Un elemento es hijo de otro, si seencuentra
contenido en aquel.
8. 8. Formato de las etiquetas Es indiferente utilizar maysculas ominsculas, incluso una combinacinde ambas
en las etiquetas de HTML5. No es necesario que las etiquetas seencuentren en minsculas como enXHTML.
Lo ms habitual es encontrar lasetiquetas en minsculas.
9. 9. Todo documento HTML se encuentra delimitadopor las etiquetas <html> y </html> Dentro, aparecen
siempre dos elementos: El elemento <head>, que contiene informacinsobre el documento HTML El elemento
<body> informacin que aparece enel contenido del navegador.
10. 10. Cabecera y cuerpoTodo documento HTML seencuentra delimitado por lasetiquetas <html> y</html>Dentro,
aparecensiempre dos elementos:El elemento <head>, quecontiene informacin sobreel documento HTMLEl
elemento <body>contenido que aparece en elnavegador.
11. 11. Atributos Dentro de la etiqueta inicial de unelemento puede haber uno o variosatributos. Lo ms habitual es
que un atributoest compuesto de un nombre y unvalor, separados por el smbolo =. El nombre identifica el
atributo y elvalor especifica el comportamiento omodificacin del elemento.
12. 12. Ejemplo de atributo<p><a href="google.com">Pulse para ir aGoogle</a></p>Elemento padre (un
prrafo)Elemento hijo (unenlace), con un atributoAtributo (par nombre/valor)
13. 13. Clasificacin de atributos Atributos bsicos (class, id, style ytitle). Atributos de internacionalizacin(dir,
lang). Atributos de accesibilidad (accesskeyy tabindex).
14. 14. Atributos bsicos I id se utiliza para identificar un nicoelemento dentro de un documento. Sintaxis:
id="nombre_elemento" class se utiliza para especificar que unelemento pertenece a una clase (til conCSS)
Sintaxis: class="lista clases" un elementopuede pertenecer a varias clases
15. 15. Atributos bsicos II title sugiere un ttulo asociado a unelemento. Sintaxis: title="ttulo_elemento" style
permite especificar reglas CSSdentro de un elemento. Serecomienda no utilizarla e incluir lasreglas en un archivo
de estilosexterno.
16. 16. Atributos deinternacionalizacin dir este atributo permite indicar alnavegador la direccin en la quedebe fluir
el texto. nicamente puede tener los valoresltr o rtl (left to right o right to left). lang permite especificar el
idiomautilizado en un documento. El valorde este atributo son dos caracteresincluidos en el estndar ISO-639-1.
17. 17. Elementos bsicos Todo documento HTML contiene lossiguientes elementos y forman parte de laestructura
bsica. Son: html, head, title ybody. Un elemento previo cualifica a todo eldocumento HTML 5 e indica al
navegadorcomo mostrar el documento y es:<!doctype html>
18. 18. Estructura mnima<!doctype html><html><head><title>Estructura mnima de un documento
html</title></head><body></body></html>Podemos encontrar estructuras de archivos para empezar acrear
documentos HTML 5 en:http://www.html5boilerplate.com/http://html5reset.org/
19. 19. El elemento head Todo elemento head debera contener un elemento titleque asigne un ttulo al documento
(visible en el browser enla barra de ttulo). Adems, puede contener los siguientes elementos, encualquier orden
e incluso algunos duplicados: <base> que afecta al comportamiento de los enlaces <link> permite hacer
referencia a un archivo externo <script> para incluir un script en el documento <meta> permite incluir
informacin sobre el documento. Importante es la etiqueta <meta charset=utf-8> paraindicar que el documento
utiliza el conjunto de caracteres.
20. 20. Compatibilidad con anterioresversiones Para permitir la compatibilidad con InternetExplorer 8 y anteriores
versiones, cuando se creaun documento HTML5 se suele incluir la siguientelibrera en el elemento <head>, de la
siguienteforma:<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>Para una
explicacin mas detallada:http://paulirish.com/2011/the-history-of-the-html5-shiv/
21. 21. Deteccin de capacidades deun navegador Podemos incluir tambin una librera opensourceJavaScript para
poder identificar si el navegadorque muestra el documento HTML dispone de lasfuncionalidades bsicas de
HTML5 y CSS3. Podemos hacerlo incluyendo este cdigo en elelemento <head> de nuestro
documento:<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
22. 22. Elementos de contenido Encabezados Prrafos y secciones Elementos de agrupacin Elementos de
presentacin Elementos asociados a frases Elementos de edicin
23. 23. Tratamiento de los espacios enblanco y nuevas lneas Los navegadores se comportan deigual manera
cuando: Encuentran una secuencia de caracteresen blanco, mostrando uno. Encuentran una secuencia de
lneasvacas, mostrando nicamente unacarcter de nueva lnea.
24. 24. Creacin de cabeceras Es posible crear un encabezado de distintotamao utilizando los elementos<h1>,
<h2>..<h6>. Utilizados para crear una estructura de ttulos ysubttulos similar a la de un libro. Sin atributo, el
navegador mostrar cadaencabezado con un tamao menor cuanto mayores el nmero. El tamao del texto del
elemento <h4> tiene elmismo tamao del tamao del texto por defecto.
25. 25. Cabeceras<body><h1>Cabecera de nivel 1</h1><h2>Cabecera de nivel 2</h2><h3>Cabecera de nivel
3</h3><h4>Cabecera de nivel 4</h4><h5>Cabecera de nivel 5</h5><h6>Cabecera de nivel 6</h6></body>
26. 26. Prrafo y nueva lnea Para incluir un elemento prrafo seutilizan las etiquetas <p> </p>. Cuando se
muestra un prrafo se insertauna lnea nueva antes del siguienteelemento y se aade un espacio verticalextra.
Para que los elementos aparezcan en unanueva lnea, se puede insertar unelemento <br>
27. 27. Ejemplo: prrafos y nueva lnea<p>Este elemento es el primer párrafo de este documento.<br>Dentro
de este párrafo se ha incluido un salto delínea.</p>Algunos dise&nacute;adores no utilizan un
párrafo y losustituyen por dos saltos de línea como estos<br><br>
28. 28. Texto preformateado Con la etiqueta <pre></pre> se evitaque el navegador interprete el texto delelemento,
apareciendo de forma literal acomo aparece en el elemento.
29. 29. Tipos de elementos Elementos de bloque Aquellos que se encuentran separados por unanueva lnea, antes
y despus de ser mostrados Ejemplos: prrafos, cabeceras Elementos inline Aquellos que pueden aparecer
en oraciones sinnecesidad de estar separados Ejemplos: <strong>, <b>, <small>
30. 30. Agrupacin de contenido HTML5 permite agrupar contenido deforma ms precisa que sus
versionesanteriores. Las nuevas etiquetas tales como<header>, <section>, <article> o <nav>permiten agrupar el
contenido de unaforma mas adecuada.
31. 31. El elemento <div> Est pensado para utilizarlo comobloque que puede ser identificado yal que se puede
aplicar un estilo outilizarlo para aplicar algn script. No tiene asignado ningnsignificado, independientemente
deque le sea asignado un identificadoro una clase.
32. 32. El elemento <header> Definido como un grupo auxiliarpara la navegacin. No hay restriccin a la hora de
incluirmas de un elemento de este tipo. Puede estar asociado a una seccin oa la pgina entera.
33. 33. El elemento <section> Ha sido implementado para ser partede la estructura del documento. Por ejemplo,
los artculos de unperidico podran estar agrupados enuna seccin por tema (actualidad,deportes)
34. 34. El elemento <article> Similar a la seccin, pero representauna composicin independiente y/oreusable o
distribuible. Por ejemplo, el artculo de unperidico o revista, la entrada de unblog, los post de un foro
35. 35. El elemento <nav> Representa un grupo de enlaces parala navegacin. Es posible utilizar mas de
unelemento nav en una pgina.
36. 36. El elemento <aside> Se debera utilizar para marcar loscontenidos relacionados, con elcontenido principal,
pero que noforma parte de aquel. Por ejemplo, podran conteneranuncios, una barra de navegacinsecundaria,
una barra lateral
37. 37. El elemento <footer> Representa un pie de pgina,seccin, artculo o contenedoranterior. Normalmente
contendr informacinde copyright, lista de enlacesrelacionados
38. 38. ELEMENTOS PARA ELTRABAJO CON LISTAS
39. 39. Tipos de listas En HTML se pueden crear 3 tipos delistas: Desordenadas Ordenadas Listas de definicin
40. 40. Listas desordenadas El elemento <ul> se utiliza paracrear listas desordenadas Cada elemento que
compone la listadebe tener su correspondienteelemento <li>
41. 41. Ejemplo lista desordenada<ul><li><a href="http://www.google.com">Google</a></li><li><a
href="http://www.yahoo.com">Yahoo</a></li><li><a href="http://www.bing.com">Bing</a></li></ul>
42. 42. Lista ordenada El contenedor de una lista ordenadadebe ser <ol> Cada uno de los elementos que
lacomponen debe ir delimitado por elelemento <li> Es posible modificar alguno de suscomportamientos
utilizandoatributos.
43. 43. Atributos para listas ordenadas start, permite modificar el nmero de inicio de la lista reversed, permite
invertir el orden de la lista (de mayor amenor) type, permite seleccionar el tipo de marcador usado
(vertabla).Valor delatributoEstado1 Decimala Alfabtico minsculasA Alfabtico maysculasi Romano minsculasI
Romano maysculas
44. 44. Ejemplo lista ordenada<ol type="I" start="50"><li><a href="http://www.google.com">Google</a></li><li><a
href="http://www.yahoo.com">Yahoo</a></li><li><a href="http://www.bing.com">Bing</a></li></ol>
45. 45. Listas de descripcin Una lista de definicin estcompuesta de pares de elementos, elprimero formado por
un trmino adefinir y el segundo, por su definicin Los elementos a utilizar son<dl>, <dt> y <dd>.
46. 46. Ejemplo de lista de descripcin<dl><dt>HTML</dt><dd> HyperText Markup Language
</dd><dt>SQL</dt><dd>Structured Query Language</dd><dt>UML</dt><dd>Unified Modeling
Language</dd></dl>
2.4 Estructura Global de un Documento
Estructura global de un documento
La estructura de un documento nos permitir conocer el inicio y el final del
mismo, sin dejar a un lado los contenidos, los tamaos de la hoja y el
margen con el que contar y se divide en zonas principales que son;
Cabeza
Titulo
Cuerpo
Dentro de los apartados el contenido el distinto y puede manejar un nmero
mayor de etiquetas y clasificaciones que se complementas con lenguajes de
programacin como java, CSS3 y otros ms. Todo lo que se encuentra
dentro de este documento se puede localizar mediante exploradores de
internet siempre y cuando se cumpla con los requerimientos de localizacin
de documentos.
Las caractersticas de los documentos se pueden modificar dependiendo del
lenguaje de programacin con el que se trabaje, es decir, no es la misma
estructura de un documento XML, HTML, PHP, MYSQL, SAP, las
diferencias se notarn en la sintaxis de cada uno y las instrucciones y
manejos de cdigos con los que se cuenten.
Al hablar de un documento en general, sin intervenir en HTML o cualquier
lenguaje de programacin, podemos notar que la estructura es la misma,
cuenta con un ttulo o encabezado, el contenido o cuerpo y dentro del
contenido se puede aplicar informacin adicional como imgenes, citas,
tablas, etc.
Es importante conocer los lenguajes de programacin que se pueden
acoplar a otros y la codificacin que requiere como UTF8 o ASSCI, para
saber los riesgos de incompatibilidad posibles dentro de cada elemento.
Elementos bsicos: texto, vnculos, listas, tablas, objetos, imgenes y
aplicaciones Los elementos bsicos con los que cuenta un documento
HTML, son el medio por el cual el usuario tiene interaccin con la
informacin, los elementos que son ms utilizados son;
Vnculos
Imgenes
Objetos
Aplicaciones
Actualmente con evolucin de la programacin de elementos se pueden
apreciar inclusive animaciones, videos, nuevos elementos como la realidad
aumentada y uso de ms widgets. Todos estos elementos son incluidos en el
documento mediante etiquetas en el cdigo fuente, puede crearse todo de
manera manual o con el apoyo de software de diseo que facilita la
creacin y modificacin de los elementos.
Las anteriores etiquetas son solo una muestra de la gran variedad de
opciones disponibles con las cuales definir una mejor apariencia y
equilibrio visual en el diseo de un website.
2.5 Elementos bsicos: texto, vnculos, listas, tablas, objetos, imgenes y

aplicaciones
Texto
El texto bsico de un documento HTML puede escribirse sin etiquetas.

Cada navegador lo visualiza entonces con el tipo y tamao de caracteres
escogidos en su configuracin por defecto, e introduce un salto de lnea
cuando los caracteres alcanzan el borde de la ventana.
La etiqueta bsica, que controla el tipo de fuente utilizado, es <FONT>
<FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres

introducidos entre <FONT> y </FONT>. Pero sin ms especificaciones, la
etiqueta an no sirve para nada.
Se puede especificar el tipo de letra (es decir, la fuente de caracteres)

aadindolo a la etiqueta, de la siguiente manera (en este caso, la fuente
escogida es Arial): <FONT FACE=Arial></FONT>.
Se puede especificar el color de la fuente con la etiqueta <FONT

COLOR=?></FONT>. Para especificar los colores, conviene saber al
menos lo siguiente:
Cada color posee su correspondiente cdigo.

Hay dos cdigos: hexadecimal lo ms habitual o RGB. En ambos casos
se trata de expresar las proporciones de tres colores bsicos: rojo, verde y
azul.
Los valores hexadecimales de los tres colores se expresan de la siguiente

manera:
Rojo: color:#ff0000;
Verde: color:#00ff00;
Azul: color:#0000ff;
Los mismos colores, expresados con los valores RGB (red, green, blue),
son los siguientes:
Rojo: color:rgb(255,0,0);
Verde: color:rgb(0,255,0);
Azul: color:rgb(0,0,255);
Todos los colores se expresan mediante combinaciones de estos tres colores

bsicos. Existen muchos programas que proporcionan los valores de todos
los colores que el usuario puede componer. Tambin en internet existen
muchas pginas con los Cdigos de colores.
Los colores ms bsicos pueden especificarse sin cdigo, simplemente

escribiendo la palabra correspondiente (por supuesto en ingls). Por
ejemplo: <FONT COLOR=blue></FONT>, <FONT
COLOR=red></FONT>, etc.
Se puede especificar el tamao de la fuente con la etiqueta <FONT

SIZE=?></FONT>. El valor del tamao (?) deseado puede
suministrarse de manera absoluta (un nmero del 1 al 7) o relativa (+1, +2,
-1, -2, etc., teniendo en cuenta que el valor por defecto es 3).
Todas estas etiquetas se pueden combinar, de modo que con una sola se
controla, por ejemplo, el tipo, el tamao y el color de los caracteres:
<FONT FACE=Arial COLOR=#0000FF SIZE=5></FONT>.
Ejemplo:
Vnculos o Enlaces
La sintaxis general de la etiqueta es muy simple: <A
HREF=destino></A>. (Los puntos suspensivos representan el
elemento enlazado.)
Para que el destino se abra en una ventana nueva, hay que indicar el
siguiente atributo: <A HREF=destino target=_blank></A>
El destino de un hiperenlace puede ser de tres tipos:
1. Enlace externo: otro documento HTML situado en un ordenador
remoto.
2. Enlace local: otro documento HTML situado en el mismo
ordenador.
3. Ancla: otro lugar dentro del mismo documento HTML.
Ejemplo:
Listas
Las listas son elementos que, como los ttulos, permiten presentar
niveles jerarquizados de texto.
Los documentos HTML permiten dos tipos de listas:
1. Listas no ordenadas (bullet list): su etiqueta principal
es <UL></UL>.
2. Listas ordenadas o numeradas (numbered list): su etiqueta
principal es <OL></OL>.
3. Listas de definiciones (definition list): su etiqueta principal
es <DL></DL>
Una vez definido el tipo de lista deseada, los elementos que la
componen se marcan de distinta manera segn el tipo:
1. En las listas ordenadas (<OL></OL>) o no ordenadas
(<UL></UL>), cada elemento de dicha lista se marca con la
etiqueta <LI></LI> (list item).
2. En las listas de definicin (<DL></DL>), se utilizan dos: cada
elemento que se define se marca con <DT></DT> y el texto de
cada definicin se marca con <DD></DD>. Esta etiqueta se
puede repetir si se necesita introducir varios elementos de
definicin.
Las listas se pueden encajar unas dentro de otras, adems de con el
resto de las etiquetas disponibles.
Ejemplo:
Tablas
Las tablas permiten ordenar y alinear los elementos de un documento
de una manera precisa.
Las tablas son mucho ms frecuentes de lo que parece a primera
vista, puesto que, en la mayor parte de los casos, las lneas que las
definen permanecen ocultas.
Las etiquetas fundamentales que definen una tabla son las siguientes:
Etiquetas Funcin
<TABLE></TABLE> Principio y final de tabla
<TR></TR> Principio y final de lnea
<TD></TD> Principio y final de celda
Ejemplo:
Objetos
Adems de las imgenes, HTML permite incluir en las pginas web
otros elementos mucho ms complejos, como applets de Java y
vdeos en formato QuickTime o Flash. La mayora de este tipo de
contenidos no los interpreta el navegador directamente, sino que
hace uso de pequeos programas llamados plugins y que se
encargan de tratar con este tipo de elementos complejos.
La etiqueta <object> es la que permite embeber o incluir en las
pginas HTML cualquier tipo de contenido complejo:
<object>
Etiqueta
Atributos bsicos, internacionalizacin y eventos

comunes
data = "url" Indica la URL de los datos que utiliza el objeto

classid, codebase, codetype Informacin especfica que depende del tipo de
objeto
type Indica el tipo de contenido de los datos
height = "unidad_de_medida" Indica la altura con la que se debe mostrar el
objeto
width = "unidad_de_medida" Indica la anchura con la que se debe mostrar el
Atributos objeto
propios
Tipo de Bloque y en lnea

elemento
Se emplea para embeber objetos en los documentos

Descripcin
El atributo data se emplea para indicar la URL del recurso que se va

a incluir. El atributo type indica el tipo de contenido de los datos del
objeto. Los posibles valores de type estn estandarizados y
coinciden con los del atributo type de la etiqueta <a> que se explic
anteriormente.
Ejemplo:
Imgenes
La etiqueta bsica para insertar una imagen es: <IMG
SRC=direccin de la imagen>. De esta manera, el navegador
visualizar la imagen contenida en la direccin especificada.
Como puede verse, la imagen no forma parte de un documento
HTML: ste slo indica al navegador dnde puede descargarla.
Esta etiqueta bsica posee varios atributos, que se muestran en la
siguiente tabla:
Aplicaciones
Las HTML applications o aplicaciones en HTML son programas
ejecutados por parte de Internet Explorer bajo un programa
llamado mshta.exe que hace que un cdigo de HTML sea ejecutado
como si fuera una aplicacin.
Ejemplo:

Progaweb

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Progaweb

Transféré par

Droits d'auteur :

Formats disponibles

Html 5.

Estructura de un documento para la Web

1. 1. HTML 5Estructura de un documentopara la Web

2.5 Elementos bsicos: texto, vnculos, listas, tablas, objetos, imgenes y

El texto bsico de un documento HTML puede escribirse sin etiquetas.

La etiqueta bsica, que controla el tipo de fuente utilizado, es <FONT>

<FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres

Se puede especificar el tipo de letra (es decir, la fuente de caracteres)

Se puede especificar el color de la fuente con la etiqueta <FONT

Cada color posee su correspondiente cdigo.

Los valores hexadecimales de los tres colores se expresan de la siguiente

Todos los colores se expresan mediante combinaciones de estos tres colores

Los colores ms bsicos pueden especificarse sin cdigo, simplemente

Se puede especificar el tamao de la fuente con la etiqueta <FONT

<TABLE></TABLE> Principio y final de tabla

<TR></TR> Principio y final de lnea

<TD></TD> Principio y final de celda

Atributos bsicos, internacionalizacin y eventos

data = "url" Indica la URL de los datos que utiliza el objeto

Tipo de Bloque y en lnea

Se emplea para embeber objetos en los documentos

El atributo data se emplea para indicar la URL del recurso que se va

Vous aimerez peut-être aussi