3. HTML 5 DREAMWEAVER CSS
Con HTML5 tendremos una web más simple y semántica gracias a las nuevas etiquetas
para identificar mejor algunos elementos y no llenar nuestra página de elementos div sin ningún valor semántico.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
4.
5.
6. HTML 5 ETIQUETAS
Uso de Header, Nav y Footer
Vamos a editar la estructura para adecuarla a lo que queremos, empezando
por cambiar el lenguaje de la página a español y poniendo el título “Mi primer
sitio html5”. También pondremos un título, un menú de navegación y el pie de
página.
Existe una etiqueta nueva denominada <header>. Se utiliza para los
elementos que sean encabezados, normalmente títulos, que tengamos en
nuestra página y pueden haber varias de estas etiquetas. El título lo
pondremos dentro de una etiqueta <header>.
Para el menú utilizaremos la etiqueta <nav> que es la etiqueta para este tipo
de funcionalidad que se ha añadido en HTML5. Añadiremos unos cuantos
enlaces en el menú. En HTML5 también existe una etiqueta <menu> pero hay
que tener en cuenta que si se trata del menú de navegación se debe utilizar
<nav>.
El pie de página será un elemento <footer> y dentro de este hemos añadido
el copyright y una fecha para mostrar la última actualización.
7.
8. HTML 5 ETIQUETAS
Etiquetas Section y Article
vamos a añadir algo de texto. Para ello insertaremos un elemento <section> entre el menú y el pie, y
dentro de ella unos elementos <article> donde pondremos un pequeño texto con un título. El título lo
pondremos también entre etiquetas <header>.
http://msdn.microsoft.com/eses/ie/ff468705#_HTML5
9. fichero CSS para que coja el estilo aplicado en ese CSS.
<link rel="stylesheet" href="estilo.css"/>
Pondremos el menú de navegación a la
izquierda, la sección con los artículos a la
derecha y el pie de página debajo de la sección a
la izquierda. También le daremos un ancho fijo a
cada una.
10. MENU NAVEGADOR
●
Pulse para editar el formato de esquema del texto
–
Segundo nivel del esquema
●
Tercer nivel del esquema
–
Cuarto nivel del esquema
●
Quinto nivel del esquema
●
Sexto nivel del esquema
Séptimo nivel del esquemaHaga clic para modificar el estilo de texto
del patrón
Segundo nivel
Tercer nivel
Cuarto nivel
Quinto nivel