Crean Do Documentos HTML

Creando Documentos *****************************MODELOS DE CONTENIDO

2 tipo de elemento ( bloque - inline )

1.- bloque

div, p, ul, li, ol, table, pre, h1, h2,h3,h4, h5, h6 se econtraban en una linea separada podian contener otros elmentos de bloque

2.- inline span, input, label, img, a, em, strongen la misma linea

--------------------------------------------A.- Metadata 1 configura el comportamiento del resto del contenido 2. las etiquetas que lo conforman son:

base, command, link, meta, noscript, script, style, metadata

b. embeddedimporta contenido externo al documento

audio, canvas, embed, ifrae, img, math, object, svg, video

c. interactive creado para la interaccion con el usuario a, audio, button, detail, embed, iframe, img, input, keygen label, menu, object, select, textarea, video

d. heading definen la cabecera de una sección h1- h6 y hgroup

e. phrasing elementos que se encuentran en lso parrafos

los elementos que lo conforman son:

f. flow engloba todos los elementos de html5 los interactive, pharisng, embedded, heading, sectioning, y algunos de metadata

lo conforman la mayoria de los elmentos contenidos en el body a, abbr, addres, area, article, aside, audio, b, bdi, bdo, bloquequote, etc

g. sectioning contenido que define el ámbito de headers y footers

*******************************CONSTRUCCIÓN DE SECCIONES necesidad de darle a nuestras paginas ciertas semantica indican que significado le dan a nuestra pagina html5 tiene etiquetas de creación de sección

las secciones pueden ser entenidas como un resumen como partes importantes de nuestra pagina que esta dividido en diferentes partes cada parte es una sección

resumen de una pagina y como se construye con section

ejemplo el cuerpo humano

1. sistemas 1.1 Cardiovascular 1.2. Locomotor 1.3. Nervioso

<body><header>

<h1>El Cuerpo Humano</h1></header>

<section><h1>Sistemas </h1>

<article><h1>Cardiovascular</h1>

</article>

<article><h1>Locomotor</h1>

</article><article>

<h1>Nervioso</h1></article>

</section></body>

****************************************que paso con la etiqueta div? si ahora tenemos nuevas etiquetas

1.- Que sea usado solo cuando ningun otro elemento es apropiado 2.- Empobrece la accesibilidad para lectores y mantenimiento para autores 3.- solo vamos a usar section y article cuando se deseen crear secciones

vamos a hacer uso de la etiqueta div cuando contenido pero no queremos crear nuevas secciones es un contenido separadad. aislado.

4.- podemos usar la etiqueta aside para contenido relacionado.

lo que hace es contener contenido relacionado al contenido de la sección al contenido prinicipal pero que no forma parte directa del contenido

5.- header y footer para agrupoar contenido en la cabecera y el pie de página no pueden ser agregados varias veces. es solo una vez

6.- nav no debe ser utilizado para cualquier agrupamiento de enlaces solo para el menu de navegación prinicipal de la pagina

7.- div puede ser usado para agrupar contenido relacionado entre si en html4 se usaba junto con id y class para darle formato al div

**********************************ATRIBUTOS CLASS Y ID 1.- aun son necesarios 2.- con class agrupabamos contenidos con estilos similares 3.- con id identificabamos un elemento como unico en todo el documento 4.- se usa de forma similar en combinación con las nuevas etiquetas

*******************************************por las diferencias de html existentesexistian diferentes sintaxis de doctype para identificar la forma en que van a tratar la pagina

transaccionales script

anterioremente se utilizaban dos modos de renderización el modo standar y el modo Quirk

MODO QUIRK:

MODO STANDAR:

en html tenemos un solo tip de doctype

Crean Do Documentos HTML

Documents

Transcript of Crean Do Documentos HTML