Hola taringeros en esta oportunidad les traigo como hacer una web, a escoger un servidor de pago o gratuito, a subirla a internet, a mejorarla y actualizarla a tu gusto e incluso a sacarle un buen provecho económico si lo deseas. No hace falta que tengas conocimientos de nada, simplemente con leer estas lecciones lo vas a lograr, verás. El resultado final será una web, con su foro, un top, un directorio de enlaces, optimizada para aparecer en buenas posiciones en los buscadores, con un código html y css válidos, etc, etc.
Para crear nuestra página web necesitamos un programa. Para crear webs hay miles, de pago, gratuitos, regalados, pirateados... usaremos uno gratuito, por ejemplo uno que se llama Html-Kit.
De dónde descargar Html-Kit
El Html-Kit es un editor de html y css (entre otros) gratuito. Editor significa que podemos escribir con él y Html y Css son los lenguajes que se usan para hacer páginas web. Es gratuito, esto significa que no has de pagar por él, aunque tienes la opción de pagar para tener acceso a un sin fín de herramientas extra.
Aqui les dejo la página oficial, para poder obtener la última versión del mismo
http//www.htmlkit.coml
A accedera la web de Html-Kit podrás ver en la parte alta un cartelito similar a este:
En el hueco de arriba te preguntan donde oiste hablar de Html-Kit. En el hueco de abajo puedes escribir tu email si deseas recibir información de actualizaciones de este software y cosas así.
A continuación, pulsa en la parte de abajo de ese cuadro, donde pone Download HTML-Kit para proceder a la descarga del archivo. Son unas 2.8 megas, por lo que será algo rápido. Al hacer clic se abre una ventana preguntado si lo deseas guardar o ejecutar directamente. Escoge Guardar y así lo tendrás a mano en caso de que te haga falta:
Tras terminar de bajarlo aparece otra ventana. Escoge Ejecutar para empezar su instalación:
Quizás te aparezca un mensaje como este:
Puedes aceptar y Ejecutar sin problemas. Este programa es seguro. En seguida, el programa empieza a instalarse en tu PC.
Cómo Instalar el Html-Kit
Tienes que marcar la casilla que te he marcado en rojo en la imagen de aquí abajo y después pulsar en Next> :
Siguiente paso? Indicarle en que carpeta de nuestro disco duro lo queremos instalar. La opción por defecto es perfectamente válida:
Seguidamente, nos pregunta qué opciones deseamos instalar.
aquí tienes otra ventana que te pregunta cuál quieres que sea el nombre del programa en tu barra de programas... aceptamos de nuevo...
Bueno... ahora nos muestra las opciones que se van a instalar.
Pulsamos Install ...Se instala en un segundo. Te recomiendo no dejar marcada la casilla marcada con un circulo rojo por mí. Eso es para descargarte más cosas.Quita la marca (mira la foto de abajo) y seguimos, ok?
Hacer un acceso directo al Html-Kit en tu escritorio
Basta con ir a Inicio > Todos los programas > Html Kit y en el icono de la ventana que se despliega, hacer clic con el botón derecho del ratón sobre el que pone Html Kit y escoger "Crear Acceso Directo". En ese momento si vuelves a abrir el desplegable verás dos iconos de Html Kit. En el recien creado aparece un "2" al lado. Haz clic una sola vez sobre ese icono y SIN soltar el botón, arrástralo hasta tu escritorio y listo, ya lo tienes a mano. La próxima vez que quieras abrir el Html Kit bastará con darle dos veces a ese icono de tu escritorio.
Arrancando el Html-Kit
Aceptamos de nuevo presionando "Finish" y vemos, una preguntita....
Dice arriba que las preguntas siguientes, son para ayudarte a configurar el programa, pero que siempre puedes cambiar estas cosas más tarde desde Edit > Preferencias. Esta pregunta de arriba es por si quieres que los archivos HTML se abran siempre por defecto con este programa. Por el momento le diremos que no y al hacerlo, claro, aparece otra pregunta...
Quieres que Html-Kit detecte los navegadores que tienes para usar la vista previa con ellos? Fíjate, a esta le vamos a decir que sí, para que no se diga...
Ahora como ves en la ventana de aqui abajo, pregunta si quieres descargarte enlaces de ayuda e información actualizada.. A esto le diremos que no, pues ya nos estamos cansando de tanta preguntita y queremos ver el programa de una vez..
aparece una ventana preguntando qué tipo de archivo queremos abrir para empezar. Como opciones tenemos:
Create a new file (Crear un nuevo archivo)
Create a new file based on a template (Crear un archivo basado en una plantilla)
Escogemos Create a new File y antes de pulsar OK desactivamos la casilla de abajo del todo, donde pone "Don´t display this screen again" o "No mostrar esta ventana de nuevo".
Traducir el Html-Kit al español
Ahora que tenemos el Html-Kit instalado vamos a traducirlo al castellano para enterderlo mejor... Para ello es suficiente bajar un archivo de la página web oficial de Html-Kit y descomprimirlo en una carpeta de nuestro disco duro.
El archivo necesario lo puedes encontrar en:
Pulsa donde pone "start download" que significa "empezar a descargarlo". Al hacer clic allí se abre esta ventana de Windows preguntandote donde guardar el archivo. Hazlo en la carpeta "default" que se encuentra dentro de una de las carpetas donde has instalado el programa:
Una vez guardado el archivo (llamado irTranslationSpanish.zip) descomprime su contenido en esa misma carpeta y listo. La próxima vez que abras el Html-Kit estará en Castellano gran parte del menú, no todo, pero la gran mayoria.
Si te descargas ese archivo y no logras descomprimirlo haciendo doble cllic sobre él, quizás sea porque no tienes ningún programa descompresor instalado. Puedes bajarte el winrar, instalarlo y poder así descomprimir tanto este como los que te bajes en el futuro.
Simplifica el Html-Kit, Hazlo fácil!
El Html-Kit es un programa sencillo, pero aún así tiene cantidad de opciones que no vamos a necesitar, al menos por el momento. Así que para no liarnos mucho con tanto menú vamos a simplificar todo esto. Trataremos de desactivar todo aquello que no vayamos a usar e iremos activandolo conforme nos haga falta. Así será todo más claro, oki? Para empezar, abre tu Html-Kit (si lo tienes abierto, cierralo y lo vuelves a abrir).
Nada más abrirlo nos sale la ventana donde nos pregunta qué tipo de archivo queremos crear. Esto es lo primero que nos sobra, de modo que marcamos la casilla de la parte de abajo de esa ventana para que no vuelva a aparecer:
Tras desactivar esa opción y pulsar OK vemos de nuevo el programa con una página nueva, tal que así:
Empecemos a desactivar cosas. Para empezar haz clic en la barra de herramientas, donde pone Ver y vamos a desactivar una a una todas las opciones que te marco con un circulo rojo en la siguiente imagen:
Todas ellas las puedes activar cuando quieras haciendo lo mismo de nuevo, pero como verás, de este modo la superficie de trabajo que nos queda es mucho más amplia y clara. Quedaría así:
Primer contacto con el código HTML?
Una página web no es más que un puñado de letras y números que son interpretados por los navegadores mostrando lo que ves por internet. Al ser tan solo eso, letras y números, podríamos usar por ejemplo el Block de Notas de Windows para crear una página web completa. Tan solo hay que saber qué letras y números escribir y luego guardar el archivo, pero en lugar de hacerlo con extensión .txt se guardaría con extensión .html o .htm (son iguales).
El código html de una página web
Todas las páginas web empiezan y terminan con el mismo código y es el siguiente:
<html> (todas empiezan con esto)
</html> (todas terminan con esto otro)
La primera palabra <html> indica que ahí empieza el código de la web. La segunda </html> indica que el código de la página web a terminado. Se distinguen por la contrabarra / que siempre indica que algo ha terminado.
La estructura de una página web en HTML
Dentro de cualquier página web hay cosas que se ven (o que se escuchan) y cosas que no. Las cosas que se ven son los textos, las imágenes, sonidos, etc. Por otro lado lo que no se ve son sus características, como el título, su descripción, y otra serie de cosas que veremos más adelante. Las cosas que no se ven se colocan dentro del código HTML en una zona llamada cabecera (Head en inglés) y lo que se muestra se pone en lo que se llama cuerpo (o Body en inglés). Pues igual que antes hemos escrito en código dónde empieza la página y dónde termina, la cabecera llamada HEAD y el cuerpo llamado BODY se colocan y escriben así en Html:
<html>
<head>
</head>
<body>
</body>
</html>
En Html, se indica que va a empezar la cabecera con la palabra <head> y termina con la misma palabra pero colocandole la contrabarra, </head> tal y como hemos visto que pasaba para cerrar </html>. Lo mismo podemos decir del cuerpo, que comienza con <body> y termina con </body>.
Como puedes ver, tanto la cabecera como el cuerpo no contienen nada dentro, por lo que seguimos teniendo una página web vacia.
Definir el título de una página web
Una de las cosas que se pueden definir dentro de la cabecera o head es el título de la página. Antes hemos dicho que en la cabecera se colocaban las cosas que no se mostraban en la web. Este título realmente no se ve en la web, pero si en la barra azul de la parte alta del navegador (Explorer, Mozilla, Firefox, Opera entre otros, son tipos de navegadores) por lo que resulta importante aprender a definirlo. El título se define así (como ves, dentro de la cabecera o head):
<html>
<head>
<title>Este es el título de mi web y puedo escribir lo que quiera!</title>
</head>
<body>
</body>
</html>
Cómo ver el código Html de cualquier página web?[/size]
Si usas el Internet Explorer puedes ver el código haciendo clic en Ver > Código Fuente.
Te enseño una imagen para que lo tengas más claro:
Si en cambio estás usando el Firefox, la opción está en Ver > Código Fuente de la Página o teclas Control + U.
Para el navegador Opera, el código Html se puede lo tienes en Ver + Código Fuente o pulsando las teclas Control + F3.
La carpeta de nuestras webs
Cuando tengamos lista nuestra página web tendremos que mandar todos los archivos utilizados a la red (a nuestro servidor) por lo que es necesario que todos ellos estén en una misma carpeta. En caso contrario sería un lio tremendo saber qué tenemos que subir.
El lugar más accesible es nuestro escritorio de Windows, de modo que vamos a crear una carpeta allí llamada "mis-paginas-web". Crear esta carpeta es bien sencillo. Pones el cursor de tu ratón sobre una parte de tu escritorio donde no haya ningún icono. Haces clic allí con el botón derecho del ratón y escoges Nuevo > Carpeta. A continuación le pones el nombre que os he dicho "mis-paginas-web" y pulsamos Intro.
Dentro de esta carpeta como te digo, vamos a guardar todos los archivos que usemos en cada web. Digo "en cada web" porque además de la que vamos a crear ahora, tú mismo puedes seguir creando otras. Asi que dentro de esa carpeta vamos a crear otra llamada "web-ejemplo-cctw", que será donde guardemos los archivos de esta web de ejemplo .
Dentro de la carpeta "web-ejemplo-cctw" crea otra carpeta más y llámala "objetos". En ella guardaremos las imágenes, archivos de sonidos, etc. Te repito, es muy importante que sigas mis pasos al pie de la letra, de modo que cuando digo que a esa carpeta la llames "objetos", hazme caso y no la llames "Objetos", ni "OBJETOS". Todo en minúsculas, ok? Ya entenderás por qué.
Configurar nuestro Sitio en en Html-Kit
Ahora que tenemos la carpeta lista, llega el momento de configurar nuestro Sitio en el Html-Kit. Y qué es un Sitio? Se llama sitio a toda la web, incluyendo todos sus páginas, imagenes y demás elementos. Coincide o ha de coincidir con la carpeta que acabamos de crear, pues esa era su función, englobar todos los archivos del sitio para no liarnos ni liar al Html-Kit.
Abriendo la ventana WorkSpace
Empezamos desde cero, vale? Cierra el Html-Kit si lo tienes abierto y sigue estos pasos de uno en uno y hasta el final y no tendrás ningún problema.
1- Abre el Html-Kit. Aparecerá en blanco con una pantalla como esta:
2.- Haz clic sobre la barra de herramientas, donde pone Herramientas y activa la opción Workspace.
3.- Aparece ahora una ventana donde podemos definir nuestros sitios:
Sitio Local y Sitio Virtual
Dentro de esa ventana llamada WorkSpace vamos a definir dos sitios. Uno que se llama Sitio Local que se corresponde con la carpeta que tenemos en el ordenador llamada antes "ejemplo-web-cctw" y otro sitio que podemos llamar Sitio Virtual, que será el espacio en internet.
Por ahora vamos a definir el Sitio Local de la siguiente forma:
1.- Hacemos clic en la barra de herramientas, donde pone Workspace y escogemos Añadir Carpeta Local/Red.
tienes que poner la carpeta "pagina-ejemplo-cctw" en el primer hueco (pincha en la carpeta amarilla de su derecha para encontrarla y escogerla) y en el segundo hueco pon un título cualquiera, por ejemplo, "web-ejemplo-cctw-local" y pulsa OK:
3.- Tras pulsar OK verás como aparece este nuevo sitio en la ventana de Workspace:
A partir de ahora, cada vez que queramos trabajar sobre archivos de esta página web, en lugar de abrir la carpeta que hemos creado,(web-ejemplo-cctw), podemos acceder a ellos directamente desde acá.
Cómo crear la primera página de la web
La primera página que vamos a crear es la página principal. La página principal es la que se muestra por defecto al visitante cuando nos visita, la primera que ve. Su archivo ha de llamarse obligatoriamente index.html sea cual sea el servidor donde la alojemos.
Como esta página va a pertenecer al sitio "web-ejemplo-cctw", tendremos que apañarnoslas para crearla dentro de ese sitio y no en los otros que aparecen en la ventana de Workspace. Para crearla ponemos el cursor del ratón dentro de la ventana de Workspace, justo encima del sitio "web-ejemplo-cctw" y pulsamos el botón derecho del ratón.
Se abre entonces una ventana en la que tenemos que escoger, dentro de la sección New, la opción Create File...
Al hacer clic sobre Create File... aparece esta otra ventana:
Haz clic sobre la lengüeta en la que pone "General", escoge el tipo de archivo "Blank HTML Page" (página html en blanco) y pulsa Ok.
En seguida aparece otra ventana preguntándonos el nombre que queremos que tenga ese archivo.
Se tiene que llamar index.html pues será la página principal, así que lo escribimos en esa ventana, con la extensión y todo y pulsamos en Ok:
Tras pulsar Ok no vemos nada nuevo, pero el archivo index.html a sido creado. Para verlo solo tienes que hacer clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw"m en la ventana Workspace. Haz clic allí.
Como ves, no solo te muestra el archivo index.html sino también la carpeta "objetos" que hemos creado anteriormente. Si te vas a MiPc y abres la carpeta verás como además de la carpeta "objetos" también aparece allí el archivo index.html
Cómo crear un párrafo en la página web
Empezaremos abriendo el Html-Kit. Una vez abierto nos vamos a la ventana Workspace, hacemos clic en el signo "+" que hay a la izquierda del sitio "web-ejemplo-cctw" para que se muetre su contenido y después hacemos doble clic en el archivo index.html o página principal. Se abre entonces la ventana de ese archivo mostrando todo su código Html.
Como por ahora solo vamos a trabajar sobre el index.html podemos cerrar la ventana Workspace para tener más sitio visible. De modo que hacemos clic en la x de Workspace para cerrarla y después maximizamos la ventana del index para ocupar toda la ventana del Html-Kit, quedando así:
Cambiando el título
Vamos a cambiarle el título a esta index. Bastará con escribir el título que querramos en lugar de donde pone "Page title".
Yo le voy a poner "Pagina Principal del Ejemplo"
Mi primer párrafo
Al igual que un título se escribe entre <title> y </title>, un párrafo hay que escribirlo entre las etiquetas <p> y </p>. Así, para escribir por ejemplo "Bienvenidos a mi página web. Muy pronto estará lista!" basta con escribir esa frase encerrada entre esas etiquetas, dentro del cuerpo de la página es decir, entre <body> y </body>. Quedaría así:
Claro que con la vista "Editor" no vemos lo que estamos consiguiendo. Para ver cuales son los resultados el Html-Kit dispone de otra vista llamada "Preview" o vista previa, que nos muestra cómo quedaría la web vista por internet. A esta vista previa o preview se accede haciendo clic abajo del todo, junto a donde pone "Editor". Haz clic ahí y veamos como queda nuestro ejemplo por el momento.
Cómo guardar los cambios realizados
Para guardar lo que hemos hecho hasta el momento pulsa en la barra de herramientas, donde pone Archivo y escoge Salvar. Ya puedes cerrar el Html-Kit sin perder nada.
Cómo crear un enlace en la página web
Lo importante de una página web es la posibilidad de navegar de unas páginas a otras sin más que hacer clic en los enlaces, así que vamos a aprender a crearlos. Para crear un enlace hay que decidir dos cosas, una es desde qué palabra de nuestra web lo queremos hacer y segundo a qué página lo queremos dirigir.
Para el ejemplo vamos a crear un enlace desde la palabra "Ejemplo" que tenemos escrita en el segundo párrago hacia la dirección www.taringa.net
Para ello cierra el Html-Kit y lo vuelves a abrir (se supone que has guardado los cambios hechos en la página de antes). Ahora vuelve a abrirlo y aparecerá el Html-Kit en blanco. En ese caso ya sabes, pulsa sobre Ver > Workspace para que aparezca la ventana de los sitios ( la ventana Workspace) y una vez que aparezca haz clic en el signo "+" a la izquierda de "web-ejemplo-cctw" para ver su contenido. Ppara terminar, doble clic sobre el archivo index.html para ver su código. Tras esto, como sabes, puedes cerrar la venata de Workspace para tener más espacio.
Código Html de los enlaces o vínculos
Como estarás sospechando, los enlaces empiezan con una etiqueta y terminan con otra de cierre. La etiqueta de inicio para definir enlaces es <a> y la de cierre </a>. La palabra que encerremos entre esas dos etiquetas será la que el visitante pueda pinchar para acceder a la página enlazada. Por lo tanto, si la palabra fuera "palabra" la línea quedaría así:
<a>palabra</a>
Hay que indicar a qué página queremos enviar al visitante. Esto se define dentro de la etiqueta de inicio, de este modo:
<a href="ruta">palabra</a>
Donde pone "ruta" hemos de poner la dirección completa del lugar a donde queremos mandar al visitante.
Como queremos enlazar a una web externa, pondremos entre las comillas su ruta absoluta que es esta: http://www.taringa.net quedando el código del enlace de este modo:
<a href="http://www.taringa.net">ejemplo</a>
Los estilos css
El mayor problema que encontramos los que hacemos páginas web es el conseguir que se vea idéntica en cualquier navegador. A veces terminamos una web que se ve perfecta en Explorer y de pronto viéndola con el Opera o con el Firefox descubrimos que está toda desordenada. Para evitar esto lo mejor es usar estilos CSS. La idea es colocar en las páginas web solamente los contenidos, sin tener en cuenta colores, tamaños, anchuras. Por otro lado crearemos un archivo aparte donde definiremos todas las características que queremos que tenga cada elemento de cada una de las página de la web.
La hoja de estilos css
Este archivo de características se llama Hoja de Estilos y aunque podemos ponerle el nombre que queramos, vamos a llamarlo siempre estilos.css. La extensión, .css es obligatoria.
Por un lado hemos de crear ese nuevo archivo y por otro lado hemos de indicar en cada una de las páginas de nuestra web que ha de leer esa Hoja de Estilos para saber cómo queremos que se presenten los elementos de la web.
Crear la Hoja de Estilos "estilos.css"
Para crear la hoja de estilos volvamos a abrir el Html-Kit y activamos la vista de Workspace para tener a mano el sitio "web-ejemplo-cctw". Igual que hicimos para crear la página principal index.html ahora vamos a hacer algo parecido para crear el archivo estilos.css
Hacemos clic con el botón derecho del ratón sobre la carpeta del sitio "web-ejemplo-cctw" de la ventana Workspace y escogemos New > Create File... Se abre entonces la ventana que nos pregunta qué tipo de archivo queremos crear. Escogemos este que os enseño en la imagen de abajo:
Fíjate que está en la primera pestaña, donde pone StyleSheet que significa Hoja de Estilo y que hemos escogido "Blank Style Sheet" que significa Hoja de Estilo en blanco. Al pulsar Ok nos pregunta qué nombre queremos darle al nuevo archivo. Escribimos "estilos.css"
Tras pulsar Ok aparece este nuevo archivo en la lista de archivos del sitio "web-ejemplo-cctw" de la ventana Workspace, nuestra Hoja de Estilo para variar, en blanco.
Por ahora nos quedamos por aqui...