Diseño y Desarrollo Web Segundo Año de Bachillerato

Segundo Trimestre

Guia pedagogica Diseño y Desarrollo Web

Act. en Clase Nro. 1:

Práctica de maquetación de un documento web HTML5 básico .

Para la realización de la practica debe realizar lo siguiente:

  1. Crear en su pendrive o USB las siguientes carpetas (ver imagen)

  2. Abra el programa de Visual Studio Code
  3. Crea un archivo nuevo y selleccione el idioma CSS y guardelo con el nombre de Estilo.css en la carpeta CSS3
  4. Copie el siguiente codigo y guarde los cambios
    5. header {
        background-color:yellow;
        width: 750px;
        height: 250px;
    }
    nav {
        background-color:blue;
        width: 750px;
        height: 50px;
    }
    main {
        background-color:green;
        width: 750px;
        height: 400px;
    }
    footer {
        background-color:orange;
        width: 750px;
        height: 50px;
    }
    section#banner{
        background-color:red;
        width: 500px;
        height: 250px;
        float: left;
    }
    section#logo {
        background-color:gray;
        width: 250px;
        height: 125px;
        float: left;
    }
    section#login {
        background-color:magenta;
        width: 250px;
        height: 125px;
        float: left;
    }
    aside#left{
        background-color:purple;
        width: 150px;
        height: 400px;
        float: left;
    }
    aside#rigth{
        background-color:red;
        width: 100px;
        height: 400px;
        float: left;
    }
    article{
        background-color:lightblue;
        width: 500px;
        height: 400px;
        float: left;
        }
    div#contenido{
        width: 750px;
        margin: 0 auto;
    }
  5. Crea un archivo nuevo y selleccione el idioma HTML y guardelo con el nombre de Index.html en la carpeta principal
  6. Copie el siguiente codigo y guarde los cambios

Act. Extraclase Nro. 1:

Práctica de estructurando el cuerpo del documento Web

La practica siguiente es similar a la anterior para ello siga las miasmas instrucciones del ejercicio anterior y agregue lo siguiente:

Se adjunta el link de descarga Práctica Estructura del cuerpo del docuemnto web

Párrafos y secciones

Actividad Clase Nro. 2

1. Ejercicio propuesto: Párrafos

Crea una página web para mostrar diferentes párrafos utilizando las etiquetas <p> y </p>, todos ellos con diferentes líneas de cualquier texto. A continuación, añade el resto de elementos <meta> (charset, viewport, author, description, keywords y title), y comprueba el resultado utilizando tu navegador.


2. Ejercicio propuesto: Encabezados y párrafos

Crea una página web para mostrar varios encabezados de diferentes niveles, utilizando las etiquetas <h1> a <h6>. Añade además varios párrafos (encerrados entre las etiquetas <p> y </p> con cualquier texto, colocando un párrafo diferente después de cada encabezado. Para concluir, añade el resto de elementos <meta> (charset, viewport, author, description, keywords and title), y comprueba el resultado en tu navegador.


3. Ejercicio propuesto: Párrafos dentro de la misma sección

Utilizando las etiquetas correspondientes (<h1> y <p>), añade el código HTML necesario para crear una página web que muestre el siguiente texto con el formato correcto:


Alicante
Alicante (en valenciano y cooficialmente Alacant) es una ciudad y un municipio de España, capital de la provincia homónima, en la Comunidad Valenciana. Ciudad portuaria, está situada en la costa mediterránea. Con 337.482 habitantes (INE, 2020), es el segundo municipio más poblado de la comunidad autónoma y el undécimo del país.
Forma una conurbación de 468.782 habitantes con muchas de las localidades de la comarca del Campo de Alicante: San Vicente del Raspeig, San Juan de Alicante, Muchamiel y Campello. Estadísticamente se asocia también con el área metropolitana de Alicante-Elche, que cuenta con 757 085 habitantes.
Ciudad eminentemente turística y de servicios, es uno de los destinos turísticos más importantes de España.

4. Ejercicio propuesto: Encabezados de diferente nivel

Utilizando las etiquetas HTML adecuadas, crea una página web que tenga seis encabezados con el texto «Hola». Comienza con el encabezado más importante (el más grande) y ves bajando hasta el de menor relevancia (el más pequeño).


5. Ejercicio propuesto: Encabezados, niveles y párrafos

Utiliza las etiquetas correctas (<h1>, <h2>, <h3> y <p>) sobre el texto que aparece a continuación:


Valencia
Valencia (en valenciano y oficialmente, València) ​es un municipio y una ciudad de España, capital de la provincia homónima y de la Comunidad Valenciana. Con una población de 800.215 habitantes (2020), que sube a 1.581.057 habitantes (2020) si se incluye su espacio urbano.​ Es la tercera ciudad y área metropolitana más poblada de España, por detrás de Madrid y Barcelona.
Geografía
Localización
La ciudad de Valencia se encuentra en la costa mediterránea de la península ibérica, sobre la gran llanura aluvial de los ríos Júcar y Turia, justo en el centro del golfo de Valencia. La ciudad primitiva estaba ubicada a unos cuatro kilómetros del mar, en una isla fluvial del Turia. Los montes más cercanos a la ciudad son algunas de las últimas estribaciones del sistema Ibérico en la Comunidad Valenciana, como el Cabeçol de El Puig y la sierra Calderona, a unos 12 km y 25 km al norte de la ciudad respectivamente.
Clima
Valencia cuenta con un clima mediterráneo suave y ligeramente lluvioso durante los inviernos y caluroso y seco durante los veranos. De acuerdo con los criterios de la clasificación climática de Köppen, Valencia tiene un clima de transición entre los climas mediterráneo y semiárido cálido. La temperatura media anual es de 18.4 °C.