Scribd
Cargar
39 vistas16 páginas

Clase 5-6

Este documento proporciona instrucciones para crear la estructura básica de un sitio web sobre transportes utilizando HTML, CSS y JavaScript. Explica cómo crear la carpeta del proyecto y archivos, agregar la estructura principal del sitio con encabezados, menús de navegación, contenido principal y pie de página, y diseñar las secciones "Home" y "Nosotros" con contenido y estilos CSS. El objetivo es construir las bases sobre las cuales se agregarán más secciones, contenido y funcionalidad en clases poster

Cargado por

Yessy Trotta
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
39 vistas16 páginas

Clase 5-6

Este documento proporciona instrucciones para crear la estructura básica de un sitio web sobre transportes utilizando HTML, CSS y JavaScript. Explica cómo crear la carpeta del proyecto y archivos, agregar la estructura principal del sitio con encabezados, menús de navegación, contenido principal y pie de página, y diseñar las secciones "Home" y "Nosotros" con contenido y estilos CSS. El objetivo es construir las bases sobre las cuales se agregarán más secciones, contenido y funcionalidad en clases poster

Cargado por

Yessy Trotta
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1/ 16

1

FULL STACK INICIAL


CLASE 5 y 6

UNIDAD 1:
Introducción HTML, CSS y JavaScript

Profesora: Ursino, Flavia


3

Armado estructura principal


Empezaremos creando la estructura básica de nuestros documentos html e
iremos incorporando las distintas secciones

Paso 1
Creamos la carpeta TransportesX y dentro de ella crearemos las carpetas img,
css y js.

Paso 2
Creamos un archivo nuevo: index.html
Completamos la etiqueta <title>

Paso 3
Descargamos el archivo normalize.css de la URL:
https://necolas.github.io/normalize.css/ y lo guardamos dentro de la carpeta
CSS.

Este archivo se usa comúnmente para empatar los estilos básicos en los distintos
navegadores.

Paso 4
Creamos el archivo transportes.css en la carpeta css y lo vinculamos al
documento.

Paso 5
4

Vamos a utilizar la fuente Open Sans en sus variantes 300,400 y 700. Las
podemos obtener del sitio Google Fonts en la URL: https://fonts.google.com/

La estructura quedaría así:

Paso 6

Armamos los elementos que se repiten en todo el sitio: <header>, <nav>,


<main> y <footer>

<header>: colocamos la etiqueta img para el logo y la etiqueta h1 para el título


principal del sitio.
5

<nav>: armamos la botonera usando una lista desordenada y colocamos todos


los links

Después del <nav> colocamos la etiqueta <main> donde dependiendo de cada


sección cambiará el contenido a mostrar. Por el momento quedará vacío.

Por último el <footer>


6

Paso 7
Archivo: transportes.css
7
8

Paso 8
Para destacar la sección actual, agregamos la clase activo al elemento a que
vincula a la página actual.

Y después escribimos la siguiente regla en el archivo transportes.css

El ancho del contenido situado dentro de las etiquetas <header>, <nav> y


<main> estará limitado por un div con la clase .holder que situaremos dentro
de cada uno para que el fondo llegue hasta el borde del navegador.

En el caso de la etiqueta <main> solo agregaremos la clase. De esta forma, todo


el contenido del sitio quedara centrado.
9

En el archivo CSS agregar la nueva regla


10

Armado de la sección Home


En este tema comenzaremos con el armado de la sección Home. Esta sección
cuenta con una imagen principal y un contendor de dos columnas donde
incluiremos un texto de bienvenida al sitio y un módulo de testimonios.

Paso 1
Situamos los elementos que serán el contenido de la página index.html
11

Paso 2
En el archivo transportes.css escribimos la regla para los h2 que se va a utilizar
en todo nuestro sitio y dos reglas .left y .right para cuando necesitemos que
algún div flote a la izquierda o la derecha, respectivamente.
12

Paso 3
Definimos los estilos propios de la página.
13

Armado de la sección Nosotros


De aquí en adelante duplicaremos el archivo index.html y le cambiaremos el
nombre por <seccion>,html (en este caso nosotros.html). Además cambiaremos
la clase activo dentro de nav al elemento que corresponda a la sección que
estemos editando.

Paso 1
Situamos los elementos que serán el contenido de la página.
Esta sección cuenta con dos div principales uno para historia donde incluiremos
textos y otro para staff.
14

En el div con la clase staff, colocaremos un div con la clase personas que va a
contener 5 divs de persona donde cada uno de ellos tendrá una foto, dos
encabezados y una breve descripción.

Duplicar 4 veces más el div de persona y cambiar la información de la persona.

Paso 2
Archivo transportes.css
Definimos los estilos propios de la página.
15
16

También podría gustarte