Aprender HTML5 en 5 minutos.

Si como lo oyes aqu en cmo crear mi web te vamos a ensear lo necesario para
aprender html5 en 5 minutos , suena algo increble pero veras que es fcil
aprender html5 en minutos y si sigues todo paso a paso podrs inmediatamente
despus que termine de leer este post crear tu propia estructura web con HTML5.
Si buscas un curso mas completo puedes hacceder alCurso de HTML5 y CSS3 donde
explicamos todo muy detalladamente y creamos una plantilla web paso a paso.
n este post nos vamos a centrar en lo principal para cualquier sitio web por ello lo que
vamos a explicar es la estructura bsica de cualquier pina web en HTML5, tambin
iremos viendo lo nuevo de CSS3 y aprendiendo a utili!ar la programaci"n web
#esponsive $eb %esing o %iseo web auto a&ustable todo para aprenderlo en muy
pocos minutos. 'ara conseguir nuestro ob&etivo que es aprender html5 en 5
minutos lo que vamos a necesitar es un editor de texto ya sea !otepad""#Sublime
Te$# %reamwa&er o cualquier otro editor de texto que pre(eras.
ntonces empe!ando con nuestro tutorial lo primero que vamos es a crear una carpeta
ponle el nombre que quieras yo en lo particular le voy a poner curso)*+,-, entonces si
ya tienes todo creado empecemos con nuestro curso.
-o primero que vamos hacer es irnos a nuestro editor de texto y crear un nuevo
documento el cual les llamaremos index.html tambin vamos a crear una ho&a de estilo
la cual les vamos a llamar estilo.css. .on eso estara nuestro entorno de aprendi!a&e de
HTML5 listo para empe!ar entonces empecemos a codear. -o que tenemos que saber
para empe!ar a traba&ar con HTML5 es que para empe!ar a crear cualquier documento
HTML5 hay que empe!ar declarndolo en la parte superior con lo siguiente.
'(%)CT*+, html -
+an sencillo como esto, ya le hemos indicado al navegador que estamos traba&ando con
HTML5, ahora bien para seguir con HTML5 tenemos tambin que establecer el lengua
con la siguiente etiqueta.
'html lan./es/-
sto es para indicarle que estamos traba&ando con el idioma espaol y que nos
reconosca los caracteres raros, tambin dentro de las etiquetas head vamos a colocar
una etiqueta meta para que nos resconosca los puntos o tildes, la cual es.
/meta charset01utf)21 34
+ambin dentro de nuestro head vamos a colocar el titulo de nuestra pina web con
la etiqueta.
/title45prender *+,-6 en 6 minutos/3title4
7 tambin vamos a agregar una ho&a de estilo la cual contendr todo el c"digo .SS8
para modelar nuestra pgina web creada con HTML5. ntonces el c"digo completo de
nuestra cabecera web sera el siguiente.
/9%:.+7' html4
/html lang01es14
/head4
/meta charset01utf)21 34
/title45prender *+,-6 en 6 minutos/3title4
/lin; rel01stylesheet1 href01estilo.css134
/3head4
5hora ya tenemos la cabecera de nuestra pgina web reali!ada entonces nos toca
seguir con el cuerpo de nuestro documento para ello vamos a crear nuestra etiqueta
body y a serrarla tambin despus de serrar la etiqueta body se cierra la etiqueta
*+,-. .uerpo de nuestra web ntonces ya con esto tenemos nuestra estructura *+,-6
para nuestra pgina web completa solo nos queda seguir entrando etiquetas *+,-6, n
esta parte vamos a empe!ar a crear la cabecera que muy diferente como se haca en
tiempos anteriores ahora la cabecera trae sus propias etiquetas como header y nav. -a
etiqueta header se utili!a para la parte superior de nuestro sitio web es la primer
etiqueta que vamos a color cuando estemos creando nuestro documento *+,-6 , una
ve! con ella creada podemos colocar todos los datos que queramos que apare!can en
la cabecera de nuestra pgina web.
/header4
Hola esto es un 'header-
/3header4 :tra etiqueta nueva que incorpora *+,-6 es una botonera la cual ya no es
tan difcil como antes solo tenemos que colocar la etiqueta nav y seguidamente
empe!ar a crear nuestros botones web.
/nav4 /h<4 sto es una etiqueta /nav4 /3h<4 /3nav4
=na ve! con la cabecera de nuestra pgina web creada entonces procedemos a crear la
etiqueta que va a contener todo nuestros datos antes lo podamos crear con un div
pero ahora HTML5 nos la pone fcil y a creado la etiqueta section. >?u hace esta
etiqueta@ Aueno esta etiqueta va a contener todo el contenido de nuestro sitio y dentro
de esta tambin se pueden crear ms etiquetas section y todas las dems etiquetas
que incorpora este nuevo estndar web.
/section4 .ontenido de nuestro sitio web /3section4
.omo te mencionabas antes dentro de esta < etiquetas podemos colocar todo nuestro
contenido sin tener que estar recurriendo otras tcticas. %entro de la etiqueta
/section4 podemos colocar mas etiquetas HTML5 como son /article4 /3article4,
como su nombre lo indica esta etiquetas son para artculos.
/article4 sto es una etiqueta article /3article4
+ambin etiquetas /aside4/3aside4 las cuales nos sirven para nuestro contenido en la
parte laterar de nuestro sitios web ya sea para botones de redes sociales , colocar
categoras entre muchas otras utilidades que les podemos dar.
/aside4 sto es una etiqueta aside /3aside4
+ambin podemos insertar mas etiquetas /section4 /3section4 dentro de un mismo
section.
/section4
/section4
/section4
/section4
:tra de las nuevas etiquetas que incorpora HTML5 es el pie de pgina con la etiqueta.
/footer4 ste es nuestro pie de pgina /3footer4
Multimedia con HTML5
:tra de las funcionalidades nuevas que trae HTML5 es que ahora incorpora etiquetas
para insertar contenido multimedia en nuestras pinas web sin necesidad de tener
que recurrir a ningBn plugins o elemento Cash para poder reproducirlo. stas nuevas
etiquetas son la de audio y video
/audio4 sto es una etiqueta multimedia para mBsica o cualquier otro tipo de autio
/3audio4
Si lo has notado antes para insertar algBn tipo de autio en un sitio web tenamos que
crear el siguiente c"digo para poder insertarlo
/embed height016D1 src01horse.mp81 width01EDD14/3embed4 o /ob&ect
data01horse.mp81 height016D1 width01EDD14/3ob&ect4
Sin embargo ahora con este !ue&o estndar web todo es ms profesional y ms
limpio simplemente logramos insertar un mp8 con esta simple lnea de c"digo /audio
src01archivo.mp814 /3audio4
:tra caracteristica de esta etiqueta es que podemos agregarle los controles sin tener
que estar creando un reproductor nosotros mismo o buscando un script en la internet.
'ara agregar los controles solo hay que agregarle a esa misma etiqueta el atributo
controls.
/audio controls01controls1 src01archivo.mp81 tabindex01D14/3audio4
-o bueno de utili!ar estas etiquetas es que podemos tambin anadir mas tipos de audio
0+ero y como puedo hacer eso1 Fcil para eso solo tienes que recurir a la etiqueta
source indicarle la ruta del archivo y el tipo de archivo que es.
/audio controls01controls1 tabindex01D14
/source src01archivo.ogg1 type01audio3ogg14
/3source4 /source src01archivo.mp81 type01audio3mpeg14
/3source4
/3audio4
Si quieres saber ms de esta etiqueta te recomiendo que investigues en internet para
que puedas aprenderte todas sus funcionalidades.
5si mismo se incorpora la etiqueta viedo
/video tabindex01D14 sto es una etiqueta multimedia para mBsica o cualquier otro
tipo de autio /3video4
n concreto lo que ariamos es casi lo mismo
/video controls01controls1 tabindex01D1 width012DD14
/source src01video.ogg1 type01video3ogg14
/3source44 /source src01video.mpG1 type01video3mpG14
/3source4 /embed height01HDD1 src01httpI33urldelvideo3Cash.swf1
type01application3x)hoc;wave)Cash1 width012DD14
/3embed4
/3video4
Can&as con HTML
?ui!s uno de los elementos ms importantes de HTML5 es el elemento canvas , pero
para aprender a mane&ar este elemento de una forma clara y Cuida tenemos que saber
mane&ar &avaScript ya que atreves de este lengua&e es que podemos manipular dichas
canvas.
'ara explicarlo me&or hacemos un simple e&emplo para simular una esfera. -o primero
que creamos es nuestro elemento canvas
'can&as heiht./233/ id./myCan&as/ style./border4 2p$ solid 53333336/
width./733/- '8can&as-
Si te (&as en el codigo a la etiqueta canvas la identi(camos con un id llamado
my.anvas y le establecemos alto y ancho.
ntonces para poder modelar nuestra camvas lo que hacemos es crear un archivo.&s y
llamar a dicho identi(cador que en este caso es my.anvas
&ar c.document.et,lement9y:d;/myCan&as/<6
si sabes un poco de %HTML entonces tendras claro para que sirve getlementAyJd ya
con nuestra canvas identi(cada entonces le establecemos los parmetros para simular
dicha esfera.
ctx0c.get.ontextK1<d1LM ctx.begin'athKLM ctx.arcKN6,6D,GD,D,<O,ath.'JLM ctx.stro;eKLM
7 con esto estara nuestro elemento canvas con una forma circular por supuesto si
quieres aplicar tus conocimientos sobre este temas tambin te remito que busques en
google ya que es un tema bastante amplio y medio comple&o.
Aueno con esto ya tenemos una idea clara sobre HTML5 ya sabemos crear la
estructura de una pina web con HTML.
Si quieres seguir aprendiendo seguiremos publicando mas post sobre este tema y
dndole estilo con CSS3 que en esta parte no vimos ese tema..
+ambien tenemos un curso completo de HTML5 y CSS3.
Curso de HTML5 y CSS3
Pracias por leer el tutorial y hasta la pr"xima entradaQ