Taller 002. HTML Css

INTRODUCCIÓN AL DISEÑO WEB USANDO EL LENGUAJE HTML
El desarrollo de aplicaciones para la web es una tendencia importante en la actualidad y es

fundamental que los analistas y desarrolladores se apropien de las tecnologías que hacen
posible este tipo de aplicaciones. En primer lugar, se deben apropiar los conceptos
fundamentales o del diseño web: HTML, CSS.
Actividad de Proyecto:
Construcción del Software de acuerdo a requerimientos.
Resultados de Aprendizaje:
Crear componentes front-end del software de acuerdo con el diseño
OBJETIVOS.
El desarrollo de esta competencia permitirá a los aprendices comprender la importancia
del desarrollo front-end en el ciclo de vida del software y aplicar técnicas y metodologías
para crear interfaces de usuario efectivas y funcionales.
PROCEDIMIENTO
Para desarrollar el presente taller usted debe:
1. Leer el archivo adjunto “Capitulo html-CSS”.

2. Realizar un ejercicio para probar el código compartido, y notar la diferencia como
se pueden añadir CSS a documentos HTML de tres maneras:
• En línea : mediante el uso del styleatributo dentro de elementos HTML

• Interno : mediante el uso de un <style>elemento en la <head>sección
• Externo : mediante el uso de un <link> elemento para vincular a un archivo CSS
externo
3. Tomar como referencia los ejercicios propuestos en el taller desarrollado en la

sesión anterior:
Ejercicio Propuesto 1:
Confeccionar el titular de un periódico con un título de nivel 1. Luego definir dos títulos de
segundo nivel con los textos (Noticias políticas y Noticias deportivas), en cada una de estas
secciones definir dos titulares de tercer nivel con un párrafo cada una. Al final de la página
María del Pilar Sánchez Méndez - Instructora

mostrar un título de cuarto nivel con el nombre de la empresa propietaria del periódico.
Añade a los párrafos escritos anteriormente palabra en negrita, palabras en cursiva y
alguna palabra que esté en negrita y cursiva a la vez.
En este ejercicio usar la opción de Interno, colocando los estilos en el HEAD de la página.
Use estilos para los diferentes niveles de h1, h2, h3 y párrafos, si tiene imágenes investigue
como colocar atributos generales para imágenes e inclúyalos.
Incluir un título de tercer nivel para presentar noticias de 3 deportes diferentes, incluir más
párrafos de noticias y usar atributos de alineación, color, bordes etc.
Ejercicio propuesto 2:
Confeccionar una página principal con dos hipervínculos a las páginas Cultura.html y
Deportes3.html. Luego en las dos páginas secundarias disponer hipervínculos a la página
principal. Además, en la página principal añade un hipervínculo a un periódico (indicar sólo
el nombre de dominio del periódico) y un vínculo llamado Sugerencias a un correo
electrónico.
En este ejercicio use LA OPCION Externo un enlace a un archivo .CSS colocar los atributos
de color, bordes, background usando enlace externo a un archivo CSS. Usar un único
archivo CSS para las dos páginas. Incluya una nueva pagina Internacional.html y presente
diferentes niveles de títulos, párrafos etc.
Ejercicio propuesto 3:
Crea una página web haciendo uso de enlaces internos de forma que tengamos un menú
con dos opciones Cultura y Deporte. Desde estas opciones podemos saltar a la parte
inferior del documento donde añadiremos un título y dos párrafos a Cultura y otro título y
dos párrafos para deportes. Nota: pon nombres claros a las anclas y para provocar el salto
usa la etiqueta de forma reiterada.
Añade al ejercicio propuesto 3 una imagen al apartado Cultura y otra al apartado Deportes.
Añade al ejercicio propuesto 3 dos imágenes, una para el apartado Cultura y otra para el
apartado Deportes de forma que al pulsarlas vulva al principio de la página.

En este ejercicio use un enlace a un archivo .CSS colocar los atributos de color, bordes,
background usando enlace externo a un archivo CSS.
Una empresa que vende pizzas tiene 3 ofertas. Las mismas son ( 1- 1 mozzarella y una
bebida cola a 5 euros, 2- 2 mozzarellas a 6 euros y 3 - 4 mozarrellas a 10 euros).
Confeccionar una página que disponga tres hipervínculos a cada una de esas ofertas. Al ser
presionadas abrir el cliente de correo y enviar la promoción correspondiente. En el título
indicar si se trata de la promoción 1, 2 o 3. En el cuerpo del mensaje pedir que ingrese la
dirección y teléfono de la persona que hace el pedido. AYUDA: Para que en el correo nos
aparezca aparte de la dirección de correo de destino, el asunto y texto en el contenido, se
usaría lo siguiente:
Solicitar.
Confeccione una lista ordenada con los tres países con mayor población del planeta.
Disponer un título de segundo nivel y debajo de la lista la suma de habitantes de esos tres
países enfatizado. El aspecto final debería ser el siguiente: Países con mayor población
1. China (1300 millones)
2. India (1080 millones)
3. Estados Unidos (295 millones)
Sumando estos tres países tenemos una población de 2675 millones
Añade al Ejercicio propuesto 5 una lista no ordenada que contenga hipervínculos a

distintos periódicos que usted conoce.
Añade al ejercicio propuesto 5 una lista no ordenada de lenguajes de programación. Luego

disponer una lista ordenada con hipervínculos a sitios que tratan dichos lenguajes.

Confeccionar una tabla que muestre en la primera columna los nombre de distintos
empleados de una compañía y en la segunda el sueldo bruto (la compañía tiene 4
empleados) Disponer en la tabla un título representativo.
En el Ejercicio Propuesto 6: Confeccionar una tabla que muestre los nombres de periódicos
y su nombre de dominio agrupados por países. En la primera columna disponer los
nombres de países, expandir en fila de acuerdo a la cantidad de diarios de cada país

Taller 002. HTML Css

Cargado por

Copyright:

Formatos disponibles

Taller 002. HTML Css

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Taller 002. HTML Css

Cargado por

Copyright:

Formatos disponibles

INTRODUCCIÓN AL DISEÑO WEB USANDO EL LENGUAJE HTML

El desarrollo de aplicaciones para la web es una tendencia importante en la actualidad y es

Para desarrollar el presente taller usted debe:

1. Leer el archivo adjunto “Capitulo html-CSS”.

• En línea : mediante el uso del styleatributo dentro de elementos HTML

3. Tomar como referencia los ejercicios propuestos en el taller desarrollado en la

María del Pilar Sánchez Méndez - Instructora

María del Pilar Sánchez Méndez - Instructora

Añade al Ejercicio propuesto 5 una lista no ordenada que contenga hipervínculos a

Añade al ejercicio propuesto 5 una lista no ordenada de lenguajes de programación. Luego

María del Pilar Sánchez Méndez - Instructora

María del Pilar Sánchez Méndez - Instructora

También podría gustarte