danimenpri
User destacando
Registrado: 09 May 2010
Mensajes: 228
|
 Publicado: Dom May 23, 2010 9:50 am Título del mensaje: Tutorial HTML-KIT. |
 |
|
Hola foreroz aqui les dejo un manual del html-kit creado por un amigo y yo:
INTRODUCCION
Aprender a Crear una Página Web Paso a Paso
En estas páginas vas a aprender a crear una página 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 igual que esta, 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.
Qué, la mitad de lo que acabo de decir ni te suena eh? ja ja ja ja, no te preocupes, te lo voy a explicar todo paso a paso, como si fueras idiota, vale? ja ja ja. Hey, que era broma, no te vayas!!!
Además, te lo explicamos todo tan bien que sabrás como personalizar tu página web a tu antojo. Una vez termines el tutorial podrás cambiar los colores, la estructura, los menús, etc, etc para adaptarla a tus gustos. Tras aprender todos los trucos podrás hacer cualquier otro proyecto desde cero con lo que vas a aprender aquí.
Qué vamos a necesitar?
En principio solo conexión a internet y seguir estas instrucciones. El resto de recursos necesarios los conseguiremos de la red, como por ejemplo el software (gratuito) que vamos a seguir para las lecciones, el espacio web (gratuito también) para alojar tu proyecto, el software para el foro, para el directorio y para el topsites (de nuevo, gratis), etc, etc. Si tienes acceso a internet tendrás todo lo necesario. Bueno y un poco de tiempo y paciencia, claro.
HTML-KIT 1.1
Software Necesario
Un software es un programa informático, lo que ocurre es que al decir software parece que la cosa tiene más importancia, como es una palabra en inglés... ya se sabe... pero no es más que eso, un programa. Para crear nuestra página web necesitamos un programa. Para crear webs hay miles, de pago, gratuitos, regalados, pirateados... Nosotros vamos a ser buenos y 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 un duro por él, aunque tienes la opción de pagar para tener acceso a un sin fín de herramientas extra. Por lo pronto, con la versión gratuita nos va a sobrar.
Para conseguirlo, qué mejor que descargarlo desde la página oficial, no? Así estaremos seguros de obtener la versión más moderna. La página es http://www.htmlkit.com . Ve haciendo clic y se abrirá una ventana aparte, para que puedas seguir leyendo estas instrucciones.
Al acceder a 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. Puedes poner lo que quieras, un buscador, etc, etc. En el hueco de abajo puedes escribir tu email si deseas recibir información de actualizaciones de este software y cosas así. No son obligatorios ninguno, pero ya que es gratuito no está al menos contestarles a la primera pregunta, no?
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.
HTML-KIT 1.2
LA INSTALACION.
Comienza mostando una ventana de bienvenida y preguntándote si quieres seguir o no... parece que aún no ha entendido que "si".. je je:
Como va siendo habitual, ahora aceptamos los las condiciones, cómo no, verdad? 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? Inicarle 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. Como no hay quien nos pare, nosotros escogemos todas (que chulos somos,eh?). Seguramente no las usemos, pero tampoco es cuestión de perderse algo, así que... tó pa dentro.
Si aún no te has cansado de aceptar y aceptar, 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. Que majo... pero un poco pesado..
Pulsamos Install y... allá va eso! Se instala en un segundo y claro, para no perder costumbre, nos dice que ya está todo listo. Te recomiendo no dejar marcada la casilla marcada con un circulo rojo por mí. Eso es para descargarte más cosas, pero por el momento vamos sobrados. Quita la marca (mira la foto de abajo) y seguimos, oki?
Hacer un acceso directo al Html-Kit en tu escritorio
Si no igual te cuesta trabajo encontrarlo luego... 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.
HTML-KIT 1.3
Arrancando el Html-Kit
En la página anterior nos quedamos en esta ventana:
Aceptamos de nuevo presionando "Finish" y vemos, cómo no, una preguntita....
Dice arriba que las preguntas siguientes (vaya, que no es solo una...) 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..
No contento con la contestación, nos pregunta si queremos verificar si hay alguna versión más moderna del programa... arghhh. Adivina que ponemos?
Y finalmente (espero) nos invita a dar una vuelta por el programa con el tutorial. Lo siento pero no, mi paciencia tiene un límite, je je je.
Bueno. Ahora ya si que si, 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)
etc, etc, etc. 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".
TACHAAANNN!! Por fin! El programa se deja ver! je je je.
HTML-KIT 1.4
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:
http://www.html-kit.com/html-kit/download/plugin/irtranslationspanish/
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
HTML-KIT 1.5
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, no? Quedaría así:
Mucho mejor, verdad? Ya estamos preparados para empezar el juego. Verás como crear páginas web va a ser pan comido para tí. Ahora es una buena oportunidad para empezar a saber qué es ese código que aparece en la pantalla del Html-Kit. Vamos a verlo en la página siguiente.
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).
Nosotros vamos a usar en estas lecciones otro programa distinto al Notepad o Block de Notas, el Html-Kit, pues nos va a facilitar algunas cosas que no nos hace el Notepad y que iremos viendo a su debido tiempo.
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)
En adelante, siempre que escriba código HTML lo haré de este modo, de color azul y con fondo gris para que lo distingais. Pues bien, si eso lo escribimos en un archivo y lo guardamos con extensión .htm o .html será una página web. Vacia si, pero una página web.
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, etc son tipos de navegadores) por lo que resulta importante aprender a definirlo. Más adelante veremos por qué es tan importante.
Como ya estarás sospechando, existe una palabra para indicar que va a comenzar el título y otra para indicar cuando termina, verdad? Que lince, que inteligencia la tuya oye, je je. 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>
Como siempre, empieza por la palabra <title> y termina con la misma pero con la contrabarra delante, es decir, con </title>. Fácil, no? Si guardaramos esto en un archivo con extensión .html o .htm qué veriamos? Una ventana del navegador completamente en blanco, pero con un título en la parte superior del navegador como el que hemos escrito.
Si no sabes, te enseño como mirar el código html de una página web en la página siguiente.
Por el momento, ya sabes crear páginas en blanco. Todo un logro, verdad? je je je.
Ultima edición por danimenpri el Lun May 31, 2010 7:11 pm; editado 8 veces |
|
