HTML5 Estructura Web

UNIVERSIDAD NACIONAL JOSE FAUSTINO SANCHEZ CARRION
HTML5 – ESTRUCTURA WEB

HTML5 es la última versión de HTML.
El término representa dos conceptos diferentes:
 Se trata de una nueva versión de HTML, con nuevos elementos, atributos y
comportamientos.
 Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y
a las aplicaciones ser más diversas y de gran alcance. A este conjunto se le
llama HTML5 y amigos, a menudo reducido a HTML5 .
Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página
referencía numerosos recursos sobre las tecnologías de HTML5, clasificados en varios
grupos según su función.
 Semántica: Permite describir con mayor precisión cual es su contenido.
 Conectividad: Permite comunicarse con el servidor de formas nuevas e
innovadoras.
 Sin conexión y almacenamiento: Permite a las páginas web almacenar
datos localmente en el lado del cliente y operar sin conexión de manera más
eficiente.
 Multimedia: Nos otorga un excelente soporte para utilizar contenido
multimedia como lo son audio y video nativamente.
 Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas
características que se ocupan de los gráficos en la web como lo son canvas 2D,
WebGL, SVG, etc.
 Rendimiento e Integración: Proporciona una mayor optimización de la velocidad
y un mejor uso del hardware.
 Acceso al dispositivo: Proporciona APIs para el uso de varios compomentes
internos de entrada y salida de nuestro dispositivo.
 CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseños más
sofisticados.
Las más importantes de las nuevas etiquetas creadas son:
 article: esta etiqueta sirve para definir un artículo, un comentario de usuario o

una publicación independiente dentro del sitio.
DOCENTE: ING. CIP. RONALD D. FLORES FLORES 1 CURSO: WEB APPLICATION DEVELOPMENT
 header, footer: estas etiquetas individuales ahorran tener que insertar IDs para
cada uno, como se solía hacer anteriormente. Además, se pueden insertar headers
y footers para cada sección, en lugar de tener que hacerlo únicamente en general.
 nav: la negación puede ser insertada directamente en el markup, entre estas
etiquetas, que nos permitirán hacer que nuestras listas oficien de navegación.
 section: con esta etiqueta, una de las más importantes de las novedades, se puede
definir todo tipo de secciones dentro de un documento. Por ponerlo de forma
sencilla, funciona de una forma similar a la etiqueta div que nos separa también
diferentes secciones.
 audio y video: estas son las dos más importantes etiquetas de HTML5, dado que
nos permiten acceder de forma más simple a contenido multimedia que puede ser
reproducido por casi todo tipo de dispositivos; marcan el tipo de contenido que
estará en su interior.
 embed: con esta etiqueta se puede marcar la presencia de un contenido
interactivo o aplicación externa.
 canvas: finalmente, esta etiqueta nos permite introducir un “lienzo” dentro de un
documento, para poder dibujar gráficos por vectores; será necesario el uso de
JavaScript.
La estructura básica de una página web es: <html></html> y sus nodos son: <head></head>,
Se utiliza para incluir metas, archivos

externos para ser usado en esta
pagina
Ahora ingresamos la nueva estructura HTML5
ENCABEZADO Y PIE DE PAGINA

Ahora ingresamos texto e header:
Lo mismo en footer
A ellos le agregamos propiedades a nuestra hoja de estilos creada:
BARRA DE NAVEGACION
Aquí se realiza el menú de navegación de nuestra pagina
Creamos una nueva etiqueta:
 <ul> <li> </li> </ul> : genera una lista de datos para mi navegación.
Ahora creamos los hipervínculos:
SECCION DE LA PAGINA
Ahora tenemos que agregarle el contenido de nuestra página.
INCLUIR ARCHIVOS PHP

Ahora lo que vamos hacer es dividir nuestra página en tres secciones y copiarlos y pegarlos en
tres archivos diferente:
Para poder vincular archivos PHP:
include
include_once
require
require_once
Parte 01 - header
Parte 2 se queda con index
Parte 3 - footer
Luego incluimos en código PHP en index: include para cargar los archivos de header y de footer
Ahora solo le faltaría al index el contenido de los problemas a ejecutar. (El archivo Recibe,
Cálculo o solución). Y solo cambiamos el contenido del párrafo.
Al archivo index cambiamos el nombre a propuesto 002 y luego copiamos los archivo
propuesto 4 veces (index, pro…) y a recibe 3 veces (recibe 2,…..)y luego cambiamos el nombre
Luego borramos los # del archivo header y cambiamos las direcciones de los archivos de enlace
Ahora cambiamos de nombre a los archivos creados para poder copiarlos y crear los demás
problemas.
Modificamos nuestro index

HTML5 Estructura Web

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML5 Estructura Web

Caricato da

Copyright:

Formati disponibili

UNIVERSIDAD NACIONAL JOSE FAUSTINO SANCHEZ CARRION

HTML5 – ESTRUCTURA WEB

Las más importantes de las nuevas etiquetas creadas son:

 article: esta etiqueta sirve para definir un artículo, un comentario de usuario o

Se utiliza para incluir metas, archivos

Ahora ingresamos la nueva estructura HTML5

ENCABEZADO Y PIE DE PAGINA

A ellos le agregamos propiedades a nuestra hoja de estilos creada:

Creamos una nueva etiqueta:

Ahora creamos los hipervínculos:

INCLUIR ARCHIVOS PHP

Para poder vincular archivos PHP:

Parte 2 se queda con index

Modificamos nuestro index

Potrebbero piacerti anche