Creacion de una pagina web y conectarla a una base de datos

Segundos Años de Bachillerato.

Unidad 3 (General) : 

Las tic como fuente de investigacion y difusion de informacion

Tema :

Creacion de una pagina web y conectarla a una base de datos


Si bien podrías hacer una página web sin aprender HTML, inevitablemente tendrás problemas en algún punto, sea cual sea el tipo de editor de páginas web que uses, y tendrás que saber HTML para arreglarlos. Hay muchos sitios web en los que podrás aprender HTML, pero el presente tema  te mostrará los pasos básicos para crear un sitio web con ese formato.

Software a utilizar (haz click para descargar):

Coffe Cup HTML 15.0
Notepad ++
Dreamweaver 

Que mas utilizare ?

  • Navegador como Mozilla Firefox o Safari 
  • Computadora con conexión a Internet
  • Administrador de archivos como Explorador de Windows (opcional)
  • Sitio de almacenamiento de imágenes como Photobucket o Flickr


Off Topic:

Para crear una web basada en html tendras que conocer los comandos html.

Contenido/Clase :


Create a Simple Web Page With HTML Step 2 Version 6.jpgComprende lo que es el HTML. Este es el lenguaje de codificación con el cual se hacen las páginas web. Para ver cómo luce, ve a Internet Explorer y haz clic derecho para seleccionar "Ver código fuente de la página". Verás una página con códigos: eso es el HTML. El código es lo que ve el navegador para interpretarlo y armar una página web.
  • En Google Chrome, presiona "F12".
  • En Mozilla Firefox, presiona "Ctrl+U" para ver el código fuente de la página.
  • En Safari, selecciona Ver > Ver fuente (u "Opción+Comando+U").
  • En Internet Explorer, la opción del menú "Ver" que deberás elegir es "Origen".



Comienza con una página lo más sencilla posible, sino te verás abrumado por la sintaxis y los lenguajes de script.
    Create a Simple Web Page With HTML Step 4 Version 6.jpg
  • Es importante recordar que estarás escribiendo la información entre una etiqueta de apertura y una de clausura, ambas de HTML. Una etiqueta de apertura se verá así: <____>. Una etiqueta de clausura se verá así: </____>. Al final, reemplazarás el "____" por un código.
Create a Simple Web Page With HTML Step 3 Version 6.jpg Ve a Inicio > Programas > Accesorios > Bloc de Notas. Será mucho más fácil si usas el Bloc de Notas++ (lo puedes descargar gratis por Internet). Cuando hayas elegido el lenguaje HTML, todo lo que escribas estará automáticamente conectado con diversos colores, de esta manera será muchísimo más fácil corregir posibles errores.

Dile al navegador qué lenguaje vas a usar. Escribe <html>. Esta es la primera etiqueta que deberás escribir, la cual le indicará a la computadora que empezarás a hacer una página web. También se cerrará al final, así que al final del documento, ciérralo con <>. Esto finalizará la página web.

Añade el encabezado (head) de la página como se muestra en el gráfico.


Ponle un título a la página. El título es importante, porque les dará a los usuarios una idea del tema de la página. Además, cuando los usuarios le pongan un marcador al sitio, el título es lo que único que verán en su lista de marcadores. El código HTML para el título es: <title>. Ciérralo al final del título escribiendo </title>. El título solo se mostrará en la pestaña, no será el título de la página en sí. 
Create a Simple Web Page With HTML Step 5 Version 6.jpg 
Haz el cuerpo de la página. Escribe <body> para abrir la etiqueta del cuerpo. Luego ciérrala con la etiqueta </body>. La información para la página web irá entre <body> y </body>.
  • Para darle un color de fondo a la página, podrás añadirle un estilo al cuerpo. En vez de solamente escribir, escribe <body style="background-color:silver">. Podrás probar con un color distinto o incluso con un código hexadecimal. Las palabras entre comillas se conocen como "atributos". ¡Deberán estar rodeados por comillas!
Escribe unas cuantas líneas de texto entre las etiquetas de cuerpo.
  • Para que el texto siga en la línea siguiente (como si presionaras "Enter" en el teclado), escribe: <br>.
  • ¿Quieres añadir alguna marquesina, es decir, una palabra que se mueve de lado a lado de la pantalla? Solo tendrás que escribir <marquee>TEXTO</marquee>.
 Create a Simple Web Page With HTML Step 7 Version 6.jpgCreate a Simple Web Page With HTML Step 8 Version 6.jpgCreate a Simple Web Page With HTML Step 9 Version 6.jpgCreate a Simple Web Page With HTML Step 11 Version 6.jpg  
Añade algunas imágenes. Si quieres colocar alguna imagen de Internet a tu página web, el código HTML para las imágenes será: <img src="URL">. La etiqueta de clausura es: </img>, pero es opcional.
Revisa todo para asegurarte de que todas tus etiquetas estén cerradas. Tu página web deberá verse algo así:

<title>Mi página web</title>
<body bgcolor="yellow">Me encanta wikiHow porque<marquee>¡es la mejor página del mundo!</marquee><img src="http://www.wikihow.com/skins/common/images/wikiHow_logo_5.gif"></body>
Guarda tu trabajo. Ve a "Guardar como", ingresa un nombre de archivo que termine en la extensión .html (por ejemplo: "archivodeprueba.html") y escoge "Todos los archivos" o "text" en Tipo de archivo. No funcionará si no se siguen estos pasos. Ahora ve adonde lo hayas guardado y haz doble clic para abrirlo. Tu navegador predeterminado se abrirá con tu propia página web. 
listo con esto ya tienes una pagina web funcional y basica.

Consejos :
  • Cuando abras una etiqueta, deberás cerrarla siempre, a menos que sea una de esas etiquetas especiales que no requieran de clausura, como <img> o <hr>. Ante la duda, es mejor cerrar la etiqueta.
  • Para hacer sitios web más avanzados, usa un editor web como Microsoft Expression Web, Dreamweaver, entre otros.
  • Las etiquetas de clausura no pueden colocarse en cualquier lugar. La "última" etiqueta en entrar debe ser la "primera" etiqueta en "salir". Deberá verse así: <tag1><tag2> TEXTO </tag2></tag1>
  • Este es un ejemplo de etiquetas incorrectas: <tag1><tag2>TEXTO</tag1></tag2>
  • Si quieres alterar el código, busca el archivo y cambia ".htm" por ".txt". Otra opción es que puedes grabar dos copias del código, una de ellas ".htm" y la otra ".txt". Hacerlo así te permitirá editarlo después.
  • Para escribir HTML, te recomendamos la aplicación Espresso: verás que te será más simple escribir código, porque te brindará diferentes atajos y podrás ver tu página web con la opción "Previsualización" ¡sin tener que estar cambiando las etiquetas de .html a .txt!
  • También podrías probar Adobe Dreamweaver. Podrá serte muy útil cuando tengas problemas, porque te los mostrará y te enseñará a solucionarlos.

Advertencias y Notas Adicionales :

  • Ya no se usa el atributo "bgcolor". La forma correcta para cambiar el color de fondo de los elementos es con CSS.
  • Asegúrate de almacenar tus propias imágenes para no robar ancho de banda al host actual. Podrás almacenar las imágenes en sitios tales como Photobucket, Flickr o Imageshack.
  • Asegúrate de ingresar manualmente ".html" o ".htm" al final del nombre del archivo y escoge "Todos los archivos" o "txt" en el Tipo de archivo. No funcionará si no haces las dos cosas.
  • La etiqueta <marquee> no es una etiqueta oficial de HTML como la define el W3C (Consorcio de la World Wide Web) y podría no funcionar en todos los navegadores. Esta etiqueta fue creada y era compatible con Internet Explorer, pero ahora la han adoptado otros navegadores. 

0 comentarios: (+add yours?)

Publicar un comentario