Scribd
Cargar
3 vistas8 páginas

Guia Navegacion HTML

La guía proporciona instrucciones para diseñar la barra de navegación de una página web, incluyendo la creación de la estructura de carpetas y archivos necesarios. Se detallan pasos específicos para crear y editar archivos HTML y CSS, así como la integración de imágenes y rutas de navegación. Además, se sugiere investigar conceptos básicos de HTML y CSS para una mejor comprensión del desarrollo web.

Cargado por

r749xzwxtr
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
3 vistas8 páginas

Guia Navegacion HTML

La guía proporciona instrucciones para diseñar la barra de navegación de una página web, incluyendo la creación de la estructura de carpetas y archivos necesarios. Se detallan pasos específicos para crear y editar archivos HTML y CSS, así como la integración de imágenes y rutas de navegación. Además, se sugiere investigar conceptos básicos de HTML y CSS para una mejor comprensión del desarrollo web.

Cargado por

r749xzwxtr
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Diseño de la página web del proyecto de etapa productiva

Guía #1 Navegación

El objetivo de esta guía en particular es realizar la construcción de la barra de navegación de la


pagina web del proyecto, además de conectar entre si las diferentes páginas que tendrá el
proyecto.

1. Primero debemos crear la estructura del proyecto.

- Creamos una carpeta con un nombre descriptivo de nuestra página:

- Dentro de esa carpeta creamos las siguientes carpetas:

- Dentro de la carpeta public creamos las siguientes carpetas:

- En la carpeta css almacenara las hojas de estilo, la carpeta img almacenara las
imágenes que usaremos en el proyecto, la carpeta js almacenara el código JavaScript
que usemos y en la carpeta views se almacenara cada página en formato html.
2. Abrimos la primera carpeta en Visual Studio Code.

3. Creamos el archivo “index.html” en la carpeta views.

4. Escribimos el siguiente código en el archivo index.html.


Versión en texto: https://pastebin.com/98Cjh1CA

5. Creamos el archivo “styles.css” en la carpeta css.

6. Escribimos el siguiente código en el archivo styles.css.


Versión en texto: https://pastebin.com/gfG47K8K
7. Editar el código y adaptarlo a las necesidades de su proyecto.

- En la parte encerrada en rojo debe ir la ruta a una imagen que debe contener el logo
de la empresa.

- La ruta debe ser algo parecido a esto:

- Y esta imagen se mostrará en la pestaña en la que se abra la página, como se muestra


encerrado en azul en la siguiente imagen:

- En la siguiente imagen, en la parte encerrada en rojo debe ir la ruta a una imagen que
debe contener el logo de la empresa y puedes ser el mismo que el del punto anterior,
en la parte encerrada en azul debe ir el nombre de la empresa:

- Debe quedar algo asi:

- Y al abrir la pagina se debe ver algo así:

- En la siguiente imagen, en la parte encerrada en rojo debe ir la ruta de una imagen


que represente la sección del usuario:

- Debe quedar algo así:


- A la hora de abrir la página debe quedar algo así:

- En la siguiente imagen en los lugares encerrados en rojo deben ir las rutas a las
paginas que componen la pagina web, y en las partes subrayadas en azul se deben
ajustar los nombres para que queden acorde a lo que su página debe hacer:

- Por ejemplo, creamos la página servicios:

- Editamos los nombres y agregamos la ruta servicios al archivo index.html (nótese que
la lista de servicios aun no está vinculada a otras páginas):

- El código dentro de la página de servicios (y las demás páginas que se creen en el


futuro) deben tener el mismo código en un su interior de momento.
- Al abrir la página debe quedar algo así (además al dar clic en servicios ejemplo debe
redirigir a la página de servicios):

8. GUARDAR LOS ARCHIVOS DEL PROYECTO EN UN LUGAR SEGURO PARA SEGUIR


TRABAJANDO EN LA SIGUIENTE GUIA.

Consulta de repaso:

1. Investigar la definición y para que se usa HTML.


2. Investigar la definición y para que se usa CSS.
3. Investigar el uso de la siguiente lista de etiquetas HTML:
-<nav></nav>
-<ul></ul>
-<li></li>
-<a></a>
-<header></header>
4. Investigar los atributos en la siguiente lista aplicados a las etiquetas HTML:
-href
-src
-id
5. Investigar los elementos de CSS de la siguiente lista:
-background-color
-width
-height

También podría gustarte