En este módulo vamos a estudiar la estructura de la navegación y el texto en páginas Web HTML5 y prioridad en CSS3. También vamos a aprender a publicar nuestros trabajos en www.neocities.org
Práctica 1. Tema 1 - Estructura html
Realiza un esquema sencillo de este documento HTML a su estructura tipo árbol, que resuma brevemente las relaciones directas entre elementos de la página, clarificando la jerarquía del árbol.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio opcional árbol</title>
</head>
<body>
<header>
<img src="logotipo.jpg" alt="Firefox Logo" width="100"
height="100">
</header>
<nav>
<ul>
<li>Menú 1</li>
<li>Menú 2</li>
<li>Menú 3</li>
</ul>
</nav>
<article>
<h1>Titular de nivel 1</h1>
<p>Contenido de la página</p>
</article>
<footer>Pie de página</footer>
</body>
</html>
En breve colgaré el enlace a la imagen.
Práctica 2. Tema 2: CSS - Prioridad
Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titilar h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
</head>
<body>
<div id="caja">
<header class="cabecera">
</header>
</div>
</body>
</html>
2.- Guárdalo con extensión .html. Ver Práctica 2 del Módulo 2.
Práctica 3. Tema - HTML/CSS - Navegación
1. Realizar el CSS de un menú vertical de este html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menú</title>
</head>
<body>
<nav>
<h1>Discover<h1>
<ul>
<li><a href="#" class="welcome">Welcome</a></li>
<li><a href="#" class="featured">Featured</a></li>
<li><a href="#" class="people">People</a></li>
<li><a href="#" class="music">Music</a></li>
<li><a href="#" class="mixes">Mixes</a></li>
<li><a href="#" class="videos">Videos</a></li>
<li><a href="#" class="radio">Radio</a></li>
</ul>
</nav>
</body>
</html>
2. Realizar el CSS de un menú horizontal de este html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menú</title>
</head>
<body>
<nav>
<h1>BBC<h1>
<ul>
<li><a href="#" class="news">New</a></li>
<li><a href="#" class="sport">Sport</a></li>
<li><a href="#" class="weather">Weather</a></li>
<li><a href="#" class="capital">Capital</a></li>
<li><a href="#" class="culture">Culture</a></li>
<li><a href="#" class="autos">Autos</a></li>
<li><a href="#" class="tv">TV</a></li>
<li><a href="#" class="radio">Radio</a></li>
<li><a href="#" class="more">More...</a></li>
</ul>
<div class="clear"></div>
</nav>
</body>
</html>
3. Guárdalo con extensión .html. Ver Práctica 3 del Módulo 1.
Práctica Obligatoria Módulo 2
Construir dos página de noticias en HTML. Las noticias de Mozilla sobre firefox OS, son: "Mozilla y sus socios llevan Firefox OS a nuevas plataformas y dispositivos", y "Firefox presenta dos nuevos socios sociales·,se adjunta el texto en el inicio de este documento.
Se debe incluir la fecha y la hora en el párrafo diferenciado con el id fecha:
<p id="fecha">INCLUIR FECHA Y HORA</p>
Las dos páginas deben estar enlazadas una con otra a través de la opción "Más información" , en una se empleará el enlace a una URL local y en la otra a una URL global. Deben emplearse las marcas HTML y estilos CSS según los contenidos del módulo 1 y 2 de este curso. Pueden incluirse clases particularizadas para diferenciar la visualización
3. Se puede acceder la práctica obligatoria aquí.