Curso de HTML 5 Primera Parte

HTML 5
Elaborado Por: Terry Reyes
Temario
Que es HTML 5:
HTML 5 como estndar que une varias tecnologas
Componentes Bsicos
Estructura De Documento:
Etiquetas bsicas de estructura
Estructura de cabecera
Estructura de cuerpo y dentro del cuerpo
Nuevos y Viejos Elementos
Tipos de estilos y estructura:

Componentes principales
Tipos de selectores
Aplicar CSS a documento html
CSS:
Las nuevas reglas
Transformaciones
Transiciones
Css Y HTML
JavaScript y HTML
Que es JavaScript y su importancia en la Web

Sintaxis
Selectores
Eventos
APIs
Libreras Externas
Audio Y Video
Video en HTML 5:
Programacion de reproductor
Formatos
Atributos
Audio en HTML 5:
Programando Reproductor
Atributos
Formularios Web:
Elementos
Tipos de datos
Atributos
Nuevos Elementos
API Drag and Drop (Arrastrar y Soltar)

Eventos Nuevos
Mtodos y Propiedades
Formularios y su APIs
Geolocalizacin
Mtodos para detectar localizacin de visitantes

Trabajo con google Maps
Mtodos y Objetos
Almacenamiento Web (Web Storage)
Crear, leer y eliminar datos

Tipos de almacenamientos
Mtodos
Propiedades
API Bases de Datos (IndexedDB)
BBDD, ndices y transacciones

Abrir BBDD, agregar y eliminar objetos
Bsquedas de datos
API manejo de archivos (API File)
Sistema de archivos
Propiedades de archivos
El disco duro
Creacin de archivos
Eliminacin de archivos
Copiar, cortar y pegar
Trabajo con la Cache

Manifiesto
Categoras y Comentarios
API Offline
Las tres tecnologas que tiene el HTML 5 son
HTML Que es?

-
Es un lenguaje de Etiquetas = </>, no confundamos el lenguaje HTML 5 con el

lenguaje de programacin, porque no son iguales.
Tampoco es un lenguaje de programacin, tan solo esta a medio camino de serlo.
CSS
JavaScript o JS
-
Este s que es un lenguaje de programacin.
Entonces decimos que: HTML + CSS + JavaScript = HTML 5
La funcin de cada uno son las siguientes:

HTML: Estructura de la pgina web
CSS: Apariencia de la pgina web
JavaScript: Interactividad y animacin en la pgina web
HTML es un lenguaje de etiquetas: </>. (estas suelen ir por de a pares) ejemplo:

Etiqueta abierta: <html>
Etiqueta cerrada: </html>
Ahora, empecemos a ponernos manos a la obra

1. Abrir un documento de Bloc de Notas o un editor de texto
2. Crear una carpeta una y exclusivamente para la web y los archivos que agregaremos a
ella
3. Trabajar ordenado y limpio
Crearemos la estructura del cdigo de nuestra pgina web as:
<!DOCTYPE html>: Este indica en que lenguaje esta echo el cdigo, es decir: HTML 5 (siempre
va de primero)
<html lang=es>: este indica el inicio del documento html y el lenguaje de la pgina: espaol
<head>: va luego de la etiqueta de apertura inicio (lleva su correspondiente par de etiquetas)
y el cdigo de este no se refleja en la pgina.
Dentro del Head va:
-
Hojas de estilo
Archivos externos de JavaScript, CSS
Iconos
Ttulo de la pgina web
Etiquetas META (estas no tienen el par de cierres)
<Meta charset=iso-8559-1/>: Esta indica que caracteres vamos a utilizar para elaborar la
web
<meta name=description content=documento de Word sobre html 5/> esta indica
acerca de la temtica de la web en una breve descripcion
<meta name=keywords content=html5, documentos, web/> : Esta indica con
palabras claves y precisas, sobre la web y para que el motor de bsqueda la encuentre ms
rpido.
</head>: Etiqueta de cierre
<body>: Este indica que es el cuerpo de la pgina web, todo lo visible en la pgina va aqu
dentro, desde los ttulos hasta los pie de pgina.
</body>: Etiqueta de cierre
</html>: Este indica el final del cdigo html
Ahora, Como guardamos el documento del bloc de notas?

As:
1. Darle a CTRL + G y escribiremos el nombre: index.html
2. Darle a guardar y cerrar el bloc de notas
3. Abrimos el archivos dndole doble clic y nos saldr en el navegado
Parte 2
Etiquetas Title, Link Y Estructura Del Cuerpo (Body)
Las primeras 2 etiquetas importantes de estructura son: <Title> y la otra llamada <link>
La etiqueta title va dentro, siempre, del head anidada y es para referir el ttulo de la pgina en
la pestaa del navegador tambin como principio para palabras claves de bsqueda:
<head>
<title> Titulo de pgina </title>
</head>
La etiqueta Link tambin debe ir siempre, pero siempre dentro del head y luego del title. Sirve
para hacer CSS aparte, en otro documento aparte del html y enlazarlo con el Link.
Su estructura es:
<link rel=stylesheet text/css href=nombredearchivo.css/>
Rel = es relativo o relacionado, es un atributo e informa a que tipo de archivo estamos
haciendo
Href = es para hacer referencia y encontrar la ruta del archivo que vamos a incluir en nuestro
archivo HTML
Organizacin del Body en HTML 5
<header> </header>: Cabecera de la pagina
<nav> </nav>: Barra de navegacin
<aside> </aside>: Barra lateral
<section> </section>: Contenido principal
<footer> </footer>: Informacin institucional o pie de pagina
Anteriormente los programadores web utilizaban las etiquetas <table></table> para hacer
las pginas web, ya que, era la tecnologa de la que disponan en esos momentos. Consistia
en que se hacia una tabla con filas y columnas de 3X3:
Aqu el titulo
Aqu iba la imagen
Aqu el pie de pagina
Y as sucesivamente.
Luego quedo obsoleto y se sustituy por la etiqueta <div></div> y se denomina: Modelo
de caja contenedor
Este es un <div></div>
Este es un
<div></div>
Este es un <div> </div>
Ahora por la nueva implementacin de los telfonos, Smartphone, Tablet y de mas

dispositivos mviles se implementaron las nuevas etiquetas de antes mencionadas en el
HTML 5 ya que los div, no sirven para los dispositivos mviles.
<header></header>
Cabecera
Barra De Navegacin
<nav></nav>
<aside></aside>
<section></section>
Barra
Lateral
Contenido Principal
<footer></footer>
Pie De Pgina O Informacin Institucional
Los ttulos (<h>)
Ahora, como se puede agregar todas esas etiquetas nuevas en nuestra web?
Si queremos que nuestra web refleje una cabecera como un titulo, lo que debemos hacer es:
<body>
<header>
<h1> Este es el titulo de la web </h1>
</header>
</body>
Si guardamos cambios en nuestro bloc de notas con Ctrl + G y abrimos los cambios guardados
en nuestro navegador, veremos que sale algo as en el navegador:
Este es el ttulo de la web
El ttulo de las pginas web se utilizan con las etiquetas <h></h> y realmente el 1 es un
atributo y en realidad la etiqueta es h, siendo desde h1 hasta h6. Lo nico que cambiara el
nmero ser el tamao de letra:
<h1>:
Hola
<h2>:
Hola
<h3>: Hola
<h4>: Hola
<h5>: Hola
<h6>: Hola
Etiquetas de listas desordenadas y ordenadas <ul> y <ol>
Ahora, ya que hicimos el ttulo (cabecera), haremos una barra de navegacin con la etiqueta:
<nav> </nav> y utilizando listas desordenadas con la etiqueta <ul>:
<body>
<header>
<h1> Este es el titulo de la web </h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>contacto</i>
</ul>
</nav>
</body>
La etiqueta <ul></ul>: sirve para hacer una lista desordenada y para hacer barras de
navegacin utilizando CSS. Ejemplo:
<ul>
<li> Elemento 1</li>
<li> Elemento 2</li>
</ul>
Esto dara como resultado una lista desordenada (de puntos) :
Elemento 1
Elemento 2
El <li> siempre debe ir dentro de la etiqueta <ul> ya que es lo que representara los elementos
en la pgina, si por ejemplo, la barra de navegacin tiene 4 elementos
Deben haber entonces 4 etiquetas <li></li> dentro de la etiqueta <ul> anidada.
Ahora, si queremos hacer una lista ordenada (enumerada) debemos escribir en vez de <ul>,
una etiqueta <ol> y ser asi:
1. Elemento 1
2. Elemento 2
Por ahora nuestro cdigo va as:

<body>
<header>
<h1> Este es el ttulo de la web </h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>contacto</i>
</ul>
</nav>
</body>
Ahora, agregaremos una barra lateral de vnculos:

<body>
<header>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>contacto</i>
</ul>
</nav>
<aside>
<blockquote> Primer Elemento </blockquote>
<blockquote> Segundo Elemento </blockquote>
</aside>
</body>
Y quedara todo as:
Este Es El Titulo De La Web
Inicio
Contacto
Primer Elemento
Segundo Elemento
Nota: La etiqueta <blockquote> se utilizan para hacer Citas en un blogger o en una pgina y en
las barras laterales de pginas.
Ahora agregaremos el contenido principal con las etiquetas <section> </section> As:
<body>
<header>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>contacto</i>
</ul>
</nav>
<aside>
<section>
<p> Este es el prrafo de ejemplo </p>

</section>
</aside>
</body>
Nota: La etiqueta <p> </p> sirve para agregar nica y exclusivamente prrafos.
Ahora agregaremos el pie de pagina con la etiqueta <footer> </footer> asi:
<body>
<header>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>contacto</i>
</ul>
</nav>
<aside>
<section>
<p> Este es el prrafo de ejemplo </p>
</section>
</aside>
<footer> Derechos reservados </footer>
</body>
Y finalmente quedara todo as:
Este Es El Titulo De La Web
Inicio
Contacto
Primer Elemento
Segundo Elemento
Este es el prrafo de ejemplo
Todos los derechos reservados

La Etiqueta <article></article>
Las etiqueta <article> </article> sirve para agrupar artculos o temas similares en <section>.
Ejemplo:
<section>
<article>
<p> Noticia 1 </p>
<p> Seguimos hablando de noticia 1 </p>
<p> Terminamos de hablar de noticia 1 </P>
</article>
<article>
<p> Noticia 2 </p>
</article>
</section>
Ahora, si vamos al navegador y guardamos el documento antes y lo abrimos en el navegador.
Veremos que no sucede nada. Es solo para agrupar contenidos similares.
Etiquetas <header> y <footer>
Podemos utilizarlas para definir la cabecera y el pie de cada elemento, esto nos da a entender
que estas ambas etiquetas son muy flexibles y utilizables en cualquier elemento de nuestra
web.
Ejemplo:
<section>
<article> --------------------------------------------------------------- Inicio del articulo
<header>
<h1> Titulo de la noticia 1</h1> -------------------------------- Esta es la cabecera del articulo
</header>
<p> Noticia 1 </p>

<footer>
<p> Comentarios de usuarios</p> ------------------------------- Este es el pie del articulo
</footer>
</article> ---------------------------------------------------------------- Final Del Articulo
</section>
Organizacin del Body en HTML 5
<header> </header>
<nav> </nav>
<section>
<article><header> </header> </arcticle>
<aside>
<article> </article>
</aside>
<article> </article>
</section>
<footer> </footer>
Padres, Hijos y Hermanos
<html> ------------------------------------------------------- Etiqueta padre de head

<head> ----------------------------------------------- Etiqueta hija de HTML
<title> ------------------------------------------ Etiqueta hija de head y hermana de meta
<meta> ----------------------------------------- Etiqueta hija de head y hermana de link
<link> ------------------------------------------ Etiqueta hija de head y hermana de ambas
</head>
<body> ---------------------------------------------- Etiqueta hermana de head
<header> ------------------------------------ Etiqueta hija de body
</header>
<nav> ----------------------------------------- Etiqueta hija de body y hermana de header
<ul> --------------------------- Etiqueta hija de nav
<li> ------------------------ Etiqueta hija de ul
</ul> -------------------------- Etiqueta hija de nav
</nav>
<section> -------------------------------------- Etiqueta hija de body
<article> ---------------------------- Etiqueta hija de section
<header> ------------------- Etiqueta hija de article
<h1> </h1> ------ Etiqueta hija de header
</header>
<p> </p> --------- Etiqueta hija de section
<footer> -------------------- Etiqueta hija de section
<p> </p> --------- Etiqueta hija de footer
</footer>
</article>
</section>
<aside> ----------------------------------------------------------- Etiqueta hija de body
<blockquote></bockquote> ----------------------- Etiqueta hija de aside
</aside>
<footer> --------------------------------------------------------- Etiqueta hija de body
</footer>
</body>
</html>
Ttulos y Subttulos con <hgroup>
La etiqueta <hgroup> sirve para agrupar solo 2 etiquetas <h>. nicamente cuando
escribiremos un ttulo y un subttulo.
<hgroup>
<h1> Este es el ttulo ms grande y principal </h1>
<h2> Este es el subttulo ms chico y menos principal </h2>
</hgroup>
Etiquetas <figure> Y <figcaption>. Nuevas y Viejas Etiquetas
La etiqueta <figure> se utilizan para insertar contenidos adems de imgenes, elementos que
tengan que ver con el contenido de la pgina web y a su vez, elementos de videos, Flash y de
ms. (para poder insertar la imagen debemos tenerla previamente guardada en un sitio que
sepamos la ruta de la imagen para insertarla en el cdigo HTML 5.
Ejemplo:
<figure> <img src=imgenes/nombredeimagen.tipodeextension/> </figure>
Los formatos que admite el navegador web para ser introducido en la web son:
Jpg: Son comprimidos y a veces poco comprimidos
Gif : Son formatos comprimidos de 256 colores. Son imgenes bsicas con poca calidad
Png: de 8 bits y 16 bits
8 bits: tiene menos colores
16 bits: tiene ms colores
Los formatos jpg y gif, admiten transparencia mientras que png no.
Para agregarle una figura, imagen o elemento multimedia a un artculo, debemos hacer lo
siguiente:
<section>
<article>
<header>
<hgroup>
<h1>este es el ttulo del articulo</h1>
<h2> Haciendo pruebas con html 5 y brackets</h2>
</hgroup>
</header>
<figure><img src="Imagenes/imagen%201.jpg"/></figure> ------------------------ Esta es la
manera correcta de agregar la imagen.
<p>Este es el prrafo de el articulo. </p>
<footer><p>Todos los derechos reservados</p></footer>
</article>
</section>
Todas las imgenes agregadas al documento, pgina en HTML 5, deben si deseas, ponerle un
pie de imagen de la siguiente forma haciendo uso de la etiqueta <figcaption>:
<figure>
<img src="Imagenes/imagen%201.jpg"/>
<figcaption> nombre de la imagen o descripcin </figcaption>
</figure>
Nota: La etiqueta <figcaption> debe ir siempre dentro de la etiqueta <figure>. Sin excepciones.
Etiquetas antiguas y nuevas de HTML
<mark> </mark> : Marcar un texto sin importancia ni nfasis. (De acuerdo a circunstancias del
momento).
<em> </em> : Para indicar nfasis. Sustituye a la etiqueta <i> </i>
<strong> </strong> : Marcar texto importante
<b> </b> : en desuso
<small> </small> : Presentar textos legales
<cite> </cite> : Ttulos de libros, canciones, pelculas, trabajos propios
<adress> </adress> : Para informacin de contacto, debe ir dentro del footer.
<time> </time> : Para presentar fecha y hora.
Parte 3
CSS Trabajando La Apariencia
Evolucin
1. HTML con atributos en etiqueta

2. Separacin, estructura y apariencia
- Estructura = HTML Apariencia = CSS
3. Estructura = HTML Apariencia CSS3
Donde colocar el cdigo CSS?

1. En un archivo independiente-------------------------------------- Etiqueta <Link rel y href/>
- Archivo independiente con extensin CSS
2. En cabecera de documento HTML ------------------------------- Etiqueta <style> </style>
- Dentro de la etiqueta <head>
3. Dentro de la etiqueta del cuerpo (<body>) -------------------- Etiqueta <style=atributo/>
- Estilo Inline. (Casos muy concretos)
La primera opcin es la ms recomendada.
Ahora, para entender bien el CSS debemos comprender lo siguiente:
Modelo Caja Contenedor

Dos tipos de etiquetas en HTML
-
Etiquetas block
Etiquetas inline
La mayora de etiquetas de estructura son etiquetas block.

Estructura de CSS:
Body { propiedad : valor; }
Selector de etiqueta : Body

Llaves : {}
Propiedad: Nombre del atributo
Valor : valor o nombre
; : el punto y coma siempre debe ponerse al final de cada nomenclatura CSS
Cada vez que creamos un elemento en HTML, creamos una caja as:
Este
eses
el el
titulo
dede
la la
web
Este
titulo
web
Ocupa el 100% del ancho en la pantalla y un salto de lnea hacia abajo en cascada
automticamente
Identificadores y Clases
Ahora, si por ejemplo queremos modificar una etiqueta de HTML cambindole su tipo de letra
pero no sabemos qu hacer. Debemos hacer lo siguiente:
<body>
<header>
</header>
</body>
En CSS:
h1{Font-family: cursive;}
y de esta manera tendremos la letra en cursiva: Este es el ttulo de la web
Ahora, debemos saber algo importante en css y es que el problema de modificar una etiqueta
en css de HTML se modificaran todas las etiquetas llamadas <h1>
Y para evitar esto, debemos usar Clases e identificadores
Clases: las clases se pueden utilizar varios elementos y se agregan asi:
En HTML
<h1 class=nombredeclase>
En CSS: (se pone un punto y a continuacin se pone el nombre que pusimos de clase en HTML)
.nombredeclase { Font-family: cursive;}
Identificadores: es lo mismo que las clases solo que cambia el signo y el atributo en el html asi:
En HTML
<h1 id=nombredeindentificador>
En CSS: (se pone un signo de numeral y a continuacin, el nombre que pusimos en el html)
#nombredeidentificador { Font-family:cursive;}
El selector Id es cuando se quiere aplicar cambios a un solo elemento del HTML y el selector
class, es cuando se quiere aplicar cambios a varios elemento en un solo cdigo de CSS.
Las etiquetas <li> que llevbamos echas:

<ul>
<li>Inicio</li>
<li>contacto</i>
</ul>
Haremos con ello un men horizontal de manera que se vea lineal, ya que, estas etiquetas son
de tipo Block
Para hacerla lineal pondremos en CSS un selector llamado li:
li { display: inline; }
y finalmente quedara asi:
Inicio
Contacto
Ahora para hacer que la etiqueta <aside> se convierta en una barra lateral. Debemos poner:
Aside{ float: left;}
En este caso, la propiedad float hace que se rompa el flujo de cmo se colocan los elementos
en una pgina web y el left hace que se posicione a la izquierda, adems, hace que no ocupe
todo el ancho de la pgina sino, lo que debe ocupar. Adems, hace que solo se posicione a la
izquierda y que rodee todo su alrededor. Ejemplo
Float : Left
Lo que queda rodeando todo lo dems
Para agregar cuanto queremos que ocupe, escribiremos el valor en pixceles asi:
Aside{ float:left; height:1020px;}
Y quedara asi:
Asi se
posiciona en
pixceles
Este es lo que queda igual

Aparte del float
Con la propiedad margin podemos hacer separaciones y aumentar una separacin entre un
elemento y otro, la misma palabra lo dice, margen.
Ejemplo:
Caja 1
Caja 2
Caja_1{margin-left: 20px;}
y queda as:
Caja 1
Caja 2
Las propiedades margin se utilizan asi:

Margin-top: el borde de la caja al margen de arriba
Margin-bottom: el borde de la caja al margen de abajo
Margin-left: el borde de la caja al margen izquierdo
Margin-right: el borde de la caja al margen derecho
Ahora si queremos que una caja respete el margen entre uno y otro
Elemento 1
Si queremos que el elemento negro respete la posicin de un float que en este caso es el
elemento naranja el que corta el elemento negro. Pondremos:
Elemento_1{clear: both;}
Y conseguiremos los siguiente:
Elemento 1
Para hacer la separacin de el elemento de arriba, pondremos:

Elemento_1{clear: both; margin-top:10px;}
Elemento 1
Ahora, si quisiramos que se agrande un borde izquierdo o derecho, inferior o superior
Utilizaremos un padding.
Elemento 1
Y con un padding-right:20 px, queda as:

Elemento 1
Y hacemos que se agrande la parte derecha y as como la derecha podemos utilizar un
padding, left, right, bottom y top.
Lo que hace tcnicamente es agrandar su parte interna.
Enlazar un archivo con otro
Para enlazar un documento HTML con el mismo que utilizamos de css en otro HTML, debemos
hacer lo siguiente:
<link rel=stylesheet href=stylesheet.css/>
Y de esta forma podemos crear varios archivos HTML con el mismo archivo de CSS.
Como sabemos que si creamos 2 archivos html con el mismo stylesheet, ambas paginas se
vern igual pero, si queremos modificar el CSS sin cambiarle el estilo a la primera pagina.
Debemos agregar una etiqueta en el head de la segunda pgina web:
<head>
<style>
Aqu va el cdigo CSS.
</style>
</head>
Parte 3
CSS3. Nuevos selectores y nuevas reglas
Selectores de etiqueta: body esta es la etiqueta

Selectores de id: #Esteeselid
Selectores de Clases: .Estaeslaclase
Los nuevos selectores
Existe la posibilidad de modificar uno o varios elementos con la etiqueta o selector

name=
Por ejemplo, para poder hacer funcionar esto. Escribiremos 3 etiquetas en el body
Debemos agregar el name y la propiedad valor para poderla usar en el css
<p name=miselementosnuevosdecss > Hola </p>
<p name=miselementosnuevosdecss > Esto es </p>
<p> Una prueba </p>
Y en el css pondremos abriendo siempre corchetes antes de las llaves: []
P[name=miselementosnuevosdecss]{
Color:red;
}
Este nuevo selector, juega 3 cosas en el css y son:
1. Los signos []: Le indican a los navegadores web que le aplique el color red a los
elementos que comiencen en mis dentro del [name=mis elementosnuevosdecss]
2. La etiqueta indica que solo se aplicara el color a las etiquetas p
Luego con el mismo identificador name, pero con el signo $. Asi:
p[name$=css]{
color:red;
}
En este caso le estamos diciendo que todas las etiquetas p que terminen en tos le aplique
el color.
<p name=miselementosnuevosdecss > Hola </p>

<p name=miselementosnuevosdecss > Esto es </p>
<p> Una prueba </p>
En este caso se aplicara a los 2 primeros.
Y por ultimo, el identificador name pero con el signo de asterisco * le indicara que se
aplicara a todas las etiquetas que tengan las palabras dentro del name. Ejemplo
P[name*=nuev]{
Color:red;
}
Esto quiere decir que se aplicara a todas las etiquetas que lleve nuev en el documento HTML,
sin importar si esta antes, en medio o despus la palabra.
Las pseudoclases
Consiste en aplicarle un estilo mas adentro de la raz ede una etiqueta. Por ejemplo:
Supongamos que tenemos 3 etiquetas h1
<h1> titulo 1 </h1>
<h1> titulo 2 </h1>
<h1> titulo 3 </h1>
Y queremos que se aplique un color a el segundo <h1> que es el titulo 2, pero sin selectores.
Lo haremos de la siguiente manera:
H1:nth=child(2) {
Color:red;
}
:nth=child(2): en el (numero) indica la posicin de la etiqueta.
Nota: esto solo se aplica a las etiquetas hermanas o en secuencia.
Ahora si quisiramos cambiar el color de los elementos impares debemos cambiar el numero
dentro de los parntesis y colocar: even.
H1:nth=child(even) {
Color:red;
}
Las etiquetas <spam> </spam>
Sirven para seleccionar ciertas palabras de una texto o prrafo. Ejemplo:

Si quisiramos que se modificara solo la palabra titulo en vez de lo dems, hacemos esto:
En HTML
<p><spam class=soloeste> Titulo </spam> de la web </p>
En css
.soloeste{ color:red;}
Y de esta manera tenemos solo de color rojo, la palabra: titulo en vez de lo dems: de la
web.

Curso de HTML 5 Primera Parte

Transféré par

Informations du document

Copyright

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 :

Curso de HTML 5 Primera Parte

Transféré par

Droits d'auteur :

HTML 5

Elaborado Por: Terry Reyes

HTML 5 como estndar que une varias tecnologas

Nuevos y Viejos Elementos

Tipos de estilos y estructura:

Aplicar CSS a documento html

Que es JavaScript y su importancia en la Web

API Drag and Drop (Arrastrar y Soltar)

Mtodos para detectar localizacin de visitantes

Almacenamiento Web (Web Storage)

Crear, leer y eliminar datos

API Bases de Datos (IndexedDB)

BBDD, ndices y transacciones

API manejo de archivos (API File)

Trabajo con la Cache

Las tres tecnologas que tiene el HTML 5 son

HTML Que es?

Es un lenguaje de Etiquetas = </>, no confundamos el lenguaje HTML 5 con el

Tampoco es un lenguaje de programacin, tan solo esta a medio camino de serlo.

Este s que es un lenguaje de programacin.

Entonces decimos que: HTML + CSS + JavaScript = HTML 5

La funcin de cada uno son las siguientes:

HTML es un lenguaje de etiquetas: </>. (estas suelen ir por de a pares) ejemplo:

Ahora, empecemos a ponernos manos a la obra

Crearemos la estructura del cdigo de nuestra pgina web as:

Ahora, Como guardamos el documento del bloc de notas?

Organizacin del Body en HTML 5

<header> </header>: Cabecera de la pagina

<nav> </nav>: Barra de navegacin

<aside> </aside>: Barra lateral

<section> </section>: Contenido principal

<footer> </footer>: Informacin institucional o pie de pagina

Este es un <div> </div>

Ahora por la nueva implementacin de los telfonos, Smartphone, Tablet y de mas

Pie De Pgina O Informacin Institucional

Los ttulos (<h>)

Este es el ttulo de la web

Etiquetas de listas desordenadas y ordenadas <ul> y <ol>

Por ahora nuestro cdigo va as:

Ahora, agregaremos una barra lateral de vnculos:

Y quedara todo as:

Este Es El Titulo De La Web

<p> Este es el prrafo de ejemplo </p>

Ahora agregaremos el pie de pagina con la etiqueta <footer> </footer> asi:

Y finalmente quedara todo as:

Este Es El Titulo De La Web

Este es el prrafo de ejemplo

Todos los derechos reservados

Etiquetas <header> y <footer>

<p> Noticia 1 </p>

Organizacin del Body en HTML 5

Padres, Hijos y Hermanos

<html> ------------------------------------------------------- Etiqueta padre de head

Ttulos y Subttulos con <hgroup>

Etiquetas <figure> Y <figcaption>. Nuevas y Viejas Etiquetas

<figcaption> nombre de la imagen o descripcin </figcaption>

Etiquetas antiguas y nuevas de HTML

1. HTML con atributos en etiqueta

Donde colocar el cdigo CSS?

Ahora, para entender bien el CSS debemos comprender lo siguiente:

Modelo Caja Contenedor

La mayora de etiquetas de estructura son etiquetas block.

Selector de etiqueta : Body

Las etiquetas <li> que llevbamos echas:

Lo que queda rodeando todo lo dems

Este es lo que queda igual

Las propiedades margin se utilizan asi: