oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso HTML - Lección 4: Tu primer sitio web
Fíjate que con lo poco que llevas aprendido ya podrías crearte una página web... si ya, ya lo se jeje, sería un poco penosa, pero si has captado los conceptos básicos serás capaz en breve de crear auténticas "maravillas web"
Como crear tu primera página web
Allá por la lección 1 te comenté que es lo que necesitabamos para crearnos nuestro sitio web ¿lo recuerdas?. Bien veo que te acuerdas, efectivamente necesitamos un navegador y el bloc de notas (o cualquier editor de textos similar).Además si estas leyendo estas líneas seguramente ya tengas abierto tu navegador, pero abre una ventana nueva para que puedas leer el curso mientras ves como va quedando tu sitio web al mismo tiempo.
Ahora abriremos tambien el bloc de notas de Windows que como ya te comente tienes que pinchar en: "Inicio> Todos los programas> Accesorios> Bloc de notas."
Y ahora... ¿Qué hacemos?
Tranquilo, vamos a empezar por algo muy sencillo. Vas a crear tu primera página web y esto será lo que diga: "BIEN!!! Por fin he creado mi primera página web."
Sigue leyendo para saber como lo hacemos.
Como ya te he comentado en alguna que otra vez HTML es fácil, lógico y sencillo de aprender. El navegador leerá el codigo HTML de arriba abajo y de izquierda a derecha justo como lo haces tú. Con esto quiero decir que todo documento HTML empieza por el principio y termina por el final.
Dicho esto haremos saber a nuestro navegador que le vamos a "hablar" usando el lenguaje HTML y esto lo haremos escribiendo en la primera línea del documento creado con el bloc de notas la etiqueta <html>.
Bien como recordarás la etiqueta anterior es la etiqueta de inicio por lo tanto también necesitaremos escribir en el documento la etiqueta de cierre. Escribe un par de lineas más abajo la etiqueta </html>. Entre <html> y </html> escribiremos el resto del documento.
Ahora lo siguiente que necesitamos para nuestro documento HTML será una "cabecera" (sus etiquetas serán: <head> y </head>) y un "cuerpo" (sus etiquetas serán: <body> y </body>). La cabecera nos proporcionará información relativa al documento HTML y en el cuerpo incluiremos el contenido del documento HTML
De modo que el documento debería de quedarte así:
<html>
<head>
</head>
<body>
</body>
</html>
Sólo con este código ya tienes un sitio web, claro esta que muy aburrido y de ninguna forma es como lo esperabas. Pero todo tiene solución y ahora empezaremos a meterle contenido a tu página web.
¿Como añado contenido a mi página web?
Si leiste los párrafos anteriores con atención sabrás que en el encabezado se incluye información sobre la propia página. Por ejemplo vamos a poner a la página un título que aparecerá en la barra de títulos del navegador, y para ello usaremos las etiquetas <title> y su cierre </title>, de modo que el código te quede así:
<html>
<head>
<title>Este es mi primer sitio web</title>
</head>
<body>
</body>
</html>
ten en cuenta que este título no se visualizará en la página, sino en la barra de títulos del navegador. Todo lo que quieras que se visualice en la páginas debes introducirlo en el cuerpo de la página.
Ahora meteremos en el cuerpo una frase que diga "BIEN!!! Por fin he creado mi primera página web" y la meteremos entre las etiquetas <p> y su cierre </p> estas etiquetas significan "parrafo".
El codigo de tu documento HTML debe de quedarte de la siguiente manera:
<html>
<head>
<title>Este es mi primer sitio web</title>
</head>
<body>
<p>BIEN!!! Por fin he creado mi primera página web</p>
</body>
</html>
Bien!!! ya tienes parte de tu primera página web y ahora lo que debemos hacer es guardarlo en nuestro disco duro para después abrirlo con el navegador.
Sigue los pasos siguientes:
- En el menú principal del bloc de notas elige "Archivo" y luego "Guardar como..."
- Ahora elige "Todos los archivos" en la caja "Tipo", esto lo haremos para que nos guarde el archivo como un documento HTML y no como un documento de texto.
- Guardaremos el documento como "index.html"; Le damos el nombre de "index" porque el buscador tomará como página principal de cualquier sitio aquella que tenga ese nombre y la extensión ".html" le indicará obviamente que es un documento HTML. Da igual donde guardes el documento siempre y cuando luego te acuerdes donde lo guardaste, yo personalmente te recomiendo que crees una carpeta en el escritorio llamada "Mis sitios web" y dentro de esa carpeta crear otra con el nombre que le des a tu web. Para seguir el curso por ejemplo deberás crear una carpeta llamada "Mis sitios web" y dentro de ella crearemos otra llamada "Curso oletusWEBos.es"
Ahora si quieres visualizar tu obra maestra tal y como se vería en internet ves a "Mis sitios web> Curso oletusWEBos.es" y haz doble clic en "index.html", ahí tienes tu primera página web!!! Pasa a las siguientes lecciones para ver como la mejoramos.
¿Tienes alguna duda? Por que no nos la cuentas en el Foro OTW
Quiero aprender más!!!
- Avanzar a Lección 5: ¿Qué hemos aprendido?
- Retroceder a Lección 3: ¿Elementos y etiquetas?
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®