HTML5
HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya antigua tecnología, sino un nuevo concepto para la construcción de sitios web y aplicaciones en una era que combina dispositivos móviles, computación en la nube y trabajos en red.
Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para crear la estructura básica de páginas web, organizar su contenido y compartir información. El lenguaje y la web misma nacieron principalmente con la intención de comunicar información por medio de texto.
HTML5 es, de hecho, una mejora de esta combinación de CSS, javascript, el pegamento que une todo. HTML5 propone estándares para cada aspecto de la web y también un propósito claro para cada una de las tecnologías involucradas.
Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para crear la estructura básica de páginas web, organizar su contenido y compartir información. El lenguaje y la web misma nacieron principalmente con la intención de comunicar información por medio de texto.
HTML5 es, de hecho, una mejora de esta combinación de CSS, javascript, el pegamento que une todo. HTML5 propone estándares para cada aspecto de la web y también un propósito claro para cada una de las tecnologías involucradas.
Para trabajar y crear sitios webs y aplicaciones con HTML5, necesitamos saber primero cómo es su estructura (Como Muestra la imagen) identificando cada espacio estructural.
Crear fundamentos fuertes nos ayudará más adelante a aplicar el resto de los componentes para aprovechar completamente estas nuevas tecnologías. Por lo tanto, empecemos por lo básico, paso a paso. En este primer capítulo aprenderá cómo construir una plantilla sin estitos, pero con la estructura de HTML5 para futuros proyectos usando los nuevos elementos HTML introducidos en HTML5. |
Realicemos un Repaso HTML recuerda que los conceptos básicos de HTML son los mismos en HTML5
Para Iniciar a crear una pagina WEB debemos Descargar NOTEPAD ++ e instalar en el computador para Iniciar a trabajar con HTML.
Cuando Instales no olvides chequear la opción Create Shortcut on Desktop para crear el acceso directo en tu escritorio del programa.
Si pregunta ejecutar el programa, seleccionas NO, y lo abres desde el acceso directo del escritorio.
en el caso que dejaste chequeado, cierra todo.
Luego abres NotePAD desde el acceso directo del escritorio.
Observa y realiza los ejercicios paso a paso.
Cuando Instales no olvides chequear la opción Create Shortcut on Desktop para crear el acceso directo en tu escritorio del programa.
Si pregunta ejecutar el programa, seleccionas NO, y lo abres desde el acceso directo del escritorio.
en el caso que dejaste chequeado, cierra todo.
Luego abres NotePAD desde el acceso directo del escritorio.
Observa y realiza los ejercicios paso a paso.
npp.6.7.4.installer.exe | |
File Size: | 7965 kb |
File Type: | exe |
Etiquetas básicas HTML
Texto
|
Primera Pagina
Listas
|
Etiquetas
Ingresar Imagenes
|
Crear Link /enlaces o Hipervinculos
|
Crear tablas para organizar la información
|
|
|
Aquí están algunos de los nuevos elementos semánticos en HTML5 ahora entramos a las Nuevas etiquetas, estan van ubicadas dentro del BODY de la estructura basica HTML.
- article
- aside
- figcaption
- figure
- footer
- header
- hgroup
- mark
- nav
- section
- time
Elementos que contiene el <head>
Todo lo que coloquemos entre las etiquetas <head> y </head>, aunque no se visualiza en el navegador, ofrece información importante sobre la propia página, por lo que en el <head> se introduce información referente a:
Todo lo que coloquemos entre las etiquetas <head> y </head>, aunque no se visualiza en el navegador, ofrece información importante sobre la propia página, por lo que en el <head> se introduce información referente a:
- La codificación de la página (para que aparezcan símbolos como la "ñ", "ç" o los acentos correctamente) utilizando meta charset="utf-8".
- El título de la página, que aparece en la pestaña del navegador (utilizando <title>)
- HTML5 ha venido a solucionar, entre otras cosas, la falta de un criterio para definir el contenido semántico de una página web agregando una serie de etiquetas destinadas a facilitar la estructura del documento desde el punto de vista de su significado.
- section: Esta etiqueta sirve para agrupar elementos relacionados entre sí de forma temática. Los section creados a nivel del body serán aquellos cuyo contenido de significado a la página, o sea, formen el contenido principal de la misma.
- article: Esta etiqueta es “la última etiqueta con significado semántico”. Habitualmente se utiliza dentro de un section para separar las unidades de contenido con significado semántico.
- header: Creada para incluir información destinada a ayudar en la navegación. Suele incluir un H1 y, de declararse a nivel de body, la etiqueta nav.
- nav: Esta etiqueta la utilizaremos para incluir el menú de navegación.
- footer: Destinada a incluir la información sobre el elemento que lo contiene (autoría, propiedad, enlaces…)
- aside: Su uso indicado es para agrupar el contenido a visualizar en la página, pero que no forma parte del contenido principal de la página.
Los Headers y footers resultan claros, mientras que nav crea una barra de menú o navegación. Puede utilizar sections y articles para agrupar su contenido. Por último, el elemento aside puede ser usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados.
<header>: Delimita el encabezado visible del sitio dentro de esta etiqueta generalmente encontraremos el menu, logotipo, y encabezados del sitio.<nav>: Dentro de <nav> pondremos siempre las ligas mas importantes del sitio.
<footer>: dentro de footer generalmente se ponen cosas como otras ligas, derechos de autor etc, pero no es exclusivo, podemos usarlos para desplegar lo que necesitemos, siempre y cuando este en el “pie” de la pagina.
<footer>: dentro de footer generalmente se ponen cosas como otras ligas, derechos de autor etc, pero no es exclusivo, podemos usarlos para desplegar lo que necesitemos, siempre y cuando este en el “pie” de la pagina.
Para Iniciar Un ejemplo con la estructura HTML5
1. Crea una Carpeta en escritorio o en documentos donde guardaras los archivos HTML que crearas en NotePAD
2. Abres NotePAD desde el acceso directo del escritorio, dado que anteriormente lo instalaste.
3. Copie este código que se muestra y pegue en NotePAD, Analice las etiquetas y como estas situadas en HTML5
1. Crea una Carpeta en escritorio o en documentos donde guardaras los archivos HTML que crearas en NotePAD
2. Abres NotePAD desde el acceso directo del escritorio, dado que anteriormente lo instalaste.
3. Copie este código que se muestra y pegue en NotePAD, Analice las etiquetas y como estas situadas en HTML5
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Estructura basica de una pagina web en HTML5</title>
</head>
<body>
<header>
<nav>
<a href="inicio.html">Inicio</a>
<a href="nosotros.html">Nosotros</a>
<a href="opcion.html">Opcion</a>
<a href="opcion.html">Opcion</a>
</nav>
</header>
<aside>
<p>el contenido de aside es algo que no tiene gran relevancia en la pagina, como un submenu, buscador, formulario de contacto etc...</p>
</aside>
<section>
<p>un section es una manera de dividir la pagina por "secciones" de tal modo que podemos dividir el contenido de esta por temas</p>
<article>
<h1>El article es la parte mas importante del sitio</h1>
<p>Basicamente en el article pondremos lo mas importante de la pagina, la informacion jerarquicamente mas importante, un article puede tener header y footer, sin estropear el SEO.</p>
</article>
</section>
<footer>
<p>Derechos reservados</p>
<p>Contactenos en [email protected]</p>
</footer>
</body>
</html>
4. Guarde el archivo como ejercicio1.html recuerde en NOMBRE ejercicio1 y en TIPO escoger la extensión del archivo HTML Hyper Text Markup …. Luego indique la carpeta que anterirmente creo en su escritorio o en Documentos.
6. Luego Diríjase a la parte Superior en el menú EJECUTAR, para que observe la pagina como se observa en el navegador.
Seleccione Launch in Chrome o Launch in Safari, esto es para escoger el navegador donde quieras que se muestre tu pagina.
Nota IMPORTANTE: solo vera un texto plano dado que no se ha aplicado estilos, esto con el fin que entienda como es la estructura de una pagina HTML5.
http://www.ingenieriasystems.com/2014/06/La-estructura-HTML5-y-el-disenio-CSS3-FlipThru.html
Libro html5-css3-y-javascript.pdf | |
File Size: | 1824 kb |
File Type: |