como crear tu primera página web

6
Como crear tu primera página web, método paso por paso 1- El código HTML elemental Para comenzar sigue los siguientes pasos: Crea en el Escritorio una carpeta llamada sitio y dentro de ella crea un nuevo documento de texto, renómbralo a index.html, asegúrate de que no tenga la extensión de archivo .txt. Se supone que tienes desactivado en el Panel de Control -> Opciones de Carpeta -> Ocultar las extensiones de archivo, si no te será imposible. Arrastra el archivo creado index.html encima del Bloc de notas y suéltalo, en el pegarás el código que se muestra en esta página a continuación. Cada vez que pegues algo nuevo, guarda los cambios y ejecuta (dos clics) el archivo, que se abrirá con tu navegador instalado, de esa manera podrás comprobar como se ve tu página. Copia y pega el siguiente código: <html> <head> <title>Mi Primera Pagina</title> </head> <body> Esta es mi primera página web </body> </html> Ya tienes tu primera página web. Una sencilla explicación del código anterior. Cada elemento que va entre los signos < y > es un tag o etiqueta, donde quiera que hay un tag algo sucederá en la representación del documento, algunas veces visualmente y otras de manera oculta. • La etiqueta <html> le indica a tu navegador que tu

Upload: dani-marroquin

Post on 17-Sep-2015

212 views

Category:

Documents


0 download

DESCRIPTION

mi primera pagina web

TRANSCRIPT

Como crear tu primera pgina web, mtodo paso por paso

1- El cdigo HTML elemental

Para comenzar sigue los siguientes pasos: Crea en el Escritorio una carpeta llamada sitio y dentro de ella crea un nuevo documento de texto, renmbralo a index.html, asegrate de que no tenga la extensin de archivo .txt.Se supone que tienes desactivado en el Panel de Control -> Opciones de Carpeta -> Ocultar las extensiones de archivo, si no te ser imposible. Arrastra el archivo creado index.html encima del Bloc de notas y sultalo, en el pegars el cdigo que se muestra en esta pgina a continuacin.Cada vez que pegues algo nuevo, guarda los cambios y ejecuta (dos clics) el archivo, que se abrir con tu navegador instalado, de esa manera podrs comprobar como se ve tu pgina.Copia y pega el siguiente cdigo:

Mi Primera Pagina

Esta es mi primera pgina web

Ya tienes tu primera pgina web.Una sencilla explicacin del cdigo anterior.Cada elemento que va entre los signos < y > es un tag o etiqueta, donde quiera que hay un tag algo suceder en la representacin del documento, algunas veces visualmente y otras de manera oculta. La etiqueta le indica a tu navegador que tu documento es una pgina web y debe representarla como tal. Las etiquetas encierran el ttulo de la pgina, es imprescindible su uso, se muestra en la barra superior del navegador. Los elementos que se encuentran entre las dos etiquetas que es el encabezado, contiene datos e informacin para el funcionamiento la pgina, que el usuario no ve. En el espacio comprendido entre las etiquetas es el que contiene todo el contenido que quieres visualizar.2- Agregarle un ttulo o encabezado a la pgina web

Ahora vamos a agregarle un titulo en letras grandes y un subtitulo, copia y pega por supuesto en la siguiente lnea despus del :Mi PginaEsta es mi primera pgina web

3- Agregarle una imagen a la pgina web

Ahora insertas una imagen que copiaste previamente en tu carpeta sitio y la renombraste imagen.jpg:

4- Agregarle un link o vnculo a un sitio web

Ahora un vnculo que te llevara a Google o el lugar que especifiques, ponlo en la parte del que gustes:Para ir a Google

5- Agregar texto o contenido al cuerpo de la pgina

Ahora le toca el texto con el contenido de la pagina (con el tag le estas indicando que es un prrafo):Aqui todo lo que quieras escribir.Despues una pequea lista de men con vnculos a otras pginas que crears despus en tu sitio:

  • Otra pagina
  • Otra mas
  • Acerca de mi

6- Agregar el estilo CSS a la pgina

El estilo CSS son instrucciones para darle un estilo preciso a cualquiera de los elementos que componen la pgina. Es posible modificar el tamao del texto, los colores, el tipo de fuente, como se muestran las imgenes, etc.Para eso se incluyen algunas lneas encerradas entre dos etiquetas En este ejemplo se incluyen algunos comentarios (encerrados entre los caracteres /* */ ), solo para que se comprenda que significan los valores y se puedan modificar.

body{background:#b7e5ff; /*el color del fondo*/ font-size:20px; /*tamao del texto en pixeles*/ color:black; /*color de las letras*/ padding:20px; /*el espacio entre el borde y el contenido*/ border:6px solid white; /*tamao, forma y color del borde de la pagina*/ } h1{color:red;} /*color del encabezado*/

6- Agregar la declaracin

Ya est casi lista la pagina solamente pegaremos elDOCTYPEal comienzo para que sea compatible con todos los navegadores y especificaremos que se debe mostrar en idioma espaol:

La etiqueta
indica un salto de lnea.Finalmente rectifica como queda todo el cdigo con lo que hemos agregado:

Mi Primera Pagina body{background:#b7e5ff; font-size:20px; color:black; padding:20px; border:6px solid white;} h1{color:red;}

Mi Pgina Esta es mi primera pgina web
Link para ir a Google Esta es una pgina web sencilla, pequea, casi est vacia, pero bonita porque es mi primera pgina web.

  • Otra pagina
  • Otra mas
  • Acerca de mi

Agregar ms elementos a la pgina web creada

Lo creado hasta este punto es una pgina web elemental, debers irle agregando sucesivamente imgenes, ms texto y vnculos.Despus crea otras pginas de forma similar y enlaza cada una de ellas mediante los vnculos.El resultado ser un pequeo sitio web contenido en la carpeta sitio, donde la primera pgina creada llamada index es su pgina principal.

Las etiquetas ms utilizadas en el cdigo HTML

HTML es el lenguaje con el que se escriben las pginas web, los navegadores estn programados para traducir las etiquetas y as mostrar solo el contenido, con el formato necesario.Las siguientes son algunas de las etiquetas ms utilizadas, la mayora no las utilizamos en el cdigo anterior, pero es necesario conocerlas para poder interpretar correctamente el cdigo y comprender la funcin de cada una de ellas.