Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (17)
Destacado
Destacado (20)
Similar a Tutorial página web
Similar a Tutorial página web (20)
Más de Christian Carrera
Más de Christian Carrera (20)
Último
Último (20)
Tutorial página web
- 1. 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
- 2. 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.
- 3. 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.
- 4. 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.
- 5. 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
- 6. 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
- 7. 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:
- 8. 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.