Tutorial página web
Click here to load reader
-
Upload
christian-carrera -
Category
Technology
-
view
122 -
download
0
Transcript of 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.