Tutorial página web

1. Lo primero que debemos hacer para crear nuestra página web es empezar a

escribir nuestro código, para esto podemos utilizar el bloc de notas aunque hay

distintas opciones para hacerlo. Lo abrimos y creamos un nuevo documento.

2. Ahora si podemos comenzar a escribir nuestro código, recuerda empezar con las

etiquetas <! DOCTYPE html> <html> así como <head> para nuestro titulo y

<body> para el cuerpo de la página (no olvides cerrarlas).

3. Ya creada la parte del título añadiremos lo que serán las secciones de nuestra

página que posteriormente haremos que salgan a la izquierda de la pantalla

4. Ahora añadiremos todo el contenido de nuestra página, alguna bienvenida o

mensaje a los que la visiten o bien de qué trata nuestra página.

5. Nuestra página esta lista, lo siguiente será guardar nuestro documento de texto

con extensión .html para poder visualizarla en el navegador, es recomendable crear

una carpeta para nuestra página donde guardaremos todos los archivos que

necesitaremos.

6. Ya guardada en formato .html la abrimos y podremos ver como ha quedado

nuestra página, es algo simple ya que son puras letras sin ningún color, no te

preocupes ahora nos encargaremos de darle vida a la página.

7. Añadiremos un color de fondo y un color a las letras de nuestra página, todo esto

será a tu completo gusto, puedes elegir los colores que quieras.

8. Nuestra página ya se empieza a ver mejor, lo siguiente será agregar algunas

fuentes o tipos de letras para personalizarla aun más y sobre todo que se vea bien.

9. El siguiente paso será crear una barra de navegación y lo haremos agregando el

código siguiente. Lo que está marcado con flechas rojas es lo que hemos agregado

al código que ya teníamos.

10. Ahora las secciones que anteriormente aparecían arriba han sido movidas a la

izquierda.

11. Se ven algo simples pero no importa porque podemos agregarle algo de estilo

para que se luzcan mejor.

Ahora nuestra página se ve así:

12. El último elemento que añadiremos es una regla horizontal que nos ayudara a

separar la firma que hemos agregado previamente.

13. El siguiente paso será poner la hoja de estilo (css) en un archivo separado, esto

nos ayudara a que si creamos otras páginas están compartirán el mismo estilo.

Para eso debemos crear un nuevo documento y pegar todo lo que está dentro de

las etiquetas <style></style> , ya hecho esto guardamos el documento como

miestilo.css

14. Ya guardado el documento, eliminaremos todo el contenido dentro de las

etiquetas <style> y </style> y estas también. Y en su lugar agregaremos <link

rel="stylesheet" href="miestilo.css"> para enlazar el documento html con el

CSS.

15. Ahora ya estarán enlazados los dos archivos, cualquier cambio que hagamos

en el documento miestilo.css se aplicara a nuestra página, esto es lo mismo que

hacíamos en Codecademy.

16. Con esto habremos terminado nuestra página pero… ¿Qué tal si queremos

agregar alguna imagen de fondo en vez de un color? Para eso debemos agregar la

imagen que queramos a la carpeta de nuestra página.

Ahora agregaremos el atributo background y el nombre del archivo a la etiqueta

<body> de la siguiente manera:

Guardamos los cambios y recargamos la página para ver como ha quedado el

fondo.

Ahora ya podemos agregar todo lo que queramos para que nuestra página se vea

aun mejor.

Ya queda a nuestro criterio que cosas más podemos añadir a la página, no hay

límite solo necesitas tener imaginación y aplicar tus conocimientos para hacer que

tu página se vea fabulosa.

Tutorial página web

Technology

Transcript of Tutorial página web