Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
N° Sesión 1
Tema de la sesión Introducción a HTML Etiquetas HTML5
Enunciado
La empresa MIX Películas, desea que le diseñen su página web, para esta propuesta ha solicitado a los alumnos
de la Carrera de Computación e Informática de ISIL para que desarrollen su sitio Web.
Instrucciones
1. Lo primero que debes hacer es la maquetación de la página web, para ello realizaras lo siguiente:
a) Crear una página web llamada “index.html”; luego crear una hoja de estilos CSS llamada
“estilomenu.css”, y crear todos los estilos necesarios para el diseño de la página. Recuerda
enlazar la hoja de estilos con el archivo html.
2. Se procederá a maquetar la página web creando etiquetas html5, reglas de clase y formatos css.
a) Crear el encabezado usando la etiqueta <header>, la cual incluirá una imagen de fondo
llamada 1.png.
Regla CSS
Diseño Final
b) Diseñar el contenido con la etiqueta <section>, aquí ira la entrada del contenido de la página.
Insertar la imagen 2.png con la etiqueta <img>. Recuerda que <section> y <aside> están
dentro de <article> por lo que debes crear las reglas para esta etiqueta también.
Etiquetas HTML5
Regla CSS
Diseño Final
Etiqueta Section
c) Diseñar el contenido lateral usando la etiqueta <aside>, aquí irán los datos con algunas
imágenes. Redondear los bordes usando las reglas CSS3. Insertar la imagen 3.png,
imagen4.png, con la etiqueta <img>.
Etiquetas HTML5
Regla CSS
Diseño Final
a) Diseñar el menú principal con la etiqueta <nav>. Recuerda que el texto debe estar
acompañado de las etiquetas <ul>, <li>, definir las reglas en la hoja de estilos.
Etiquetas HTML5
Regla CSS
Diseño Final
Etiqueta Nav
b) Digitar el siguiente texto sobre la imagen “No se lo puede perder¡¡”; buscar una fuente parecida en
Google Web Font y aplicar a los textos de título.
Etiquetas HTML5
Las web fonts, son fuentes externas que pueden ser aplicadas a nuestras página web, a través de
un servidor de fuentes o descargarlo a nuestros equipos. Para la aplicación de una fuente
externa debe direccionarse el nombre de la fuente desde el servidor de fuentes mediante la
etiqueta link. La fuente más común son del servidor de Google: https://www.google.com/fonts
Diseño Final
Observaciones
a)2
c)4
El alumno reconoce y aplica las etiquetas para realizar menús en una a)4
3 página web haciendo uso de HTML5; así como la identificación de las 9
web-Font según los estándares web. b)3
Puntaje Total 20