¿¿COMO CREAR UNA WEB?? 
Bueno primero bamos a bajar el HTML NVU
http://sunsite.rediris.es/mirror/NAVE/productos/nvu/1.0/win32/nvu-1.0.es-ES.win32.installer.exe
Despues en la intalacion ay saben siguiente,siguiente,acepto la condiciones y terminos,etc...
Configurar NVU
En la lección anterior vimos como descargar e instalar el editor HTML NVU, ahora vamos a ver como configurarlo para adaptarlo a nuestras necesidades.
Lo primero que haremos es abrirlo, si ya lo hicimos tendríamos que ver una pantalla como esta:
Lo que queremos hacer es simplificarlo, por eso vamos a cerrar el "Administrador de sitios" haciendo clic en la cruz, como esta en la imágen.
Ahora vimos que el espacio en blanco se expandió, por lo tanto podremos escribir mas código HTML, eso es bueno jeje.
URL=http://www.deimagenes.com]
[/URL]
Si no entiendes que hace exactamente cada una de las pestañas que estan marcadas en rojo, no te preocupes, estoy para explicartelo ;), para que te des una idea:
Normal: es el modo WYSIWYG ¿¡WYSI... QUE!? significa What You See Is What You Get (en inglés, "lo que ves es lo que obtienes"), todo lo que escribamos ahí será traducido a código HTML automáticamente.
Etiquetas HTML: igual al anterior, solo que veremos las etiquetas HTML.
Código Fuente: esta es la pestaña que mas utilizaremos, ahí es donde vemos el código de fuente de nuestra pagina web, también nos acostumbraremos a escribir todo ahí (Si llegaste hasta aquí no estarás pensando en abandonar ¿no? jeje).
Vista preliminar: esta pestaña también la utilizaremos muy seguido, en ella podremos ver como va quedando nuestra pagina web, muy útil.
Bien, ya sabemos lo que tenemos que saber, ahora es hora de comenzar a ver los conceptos básicos del HTML.
Empezamos por lo básico, ¿Que es una pagina web? bien, una página Web es un conjunto de lineas de código ordenadas para que formen una estructura, los navegadores web entienden ese código y lo muestran en forma de sitio web, se pueden utilizar varios lenguajes de programación como HTML, PHP, ASP, etc. En este curso aprenderemos a escribir código HTML desde cero.
Como, ¿estas mareado@? no te preocupes, ya entenderás lo que digo.
Código HTML: sistema de etiquetas
El código HTML hace uso de etiquetas (palabras que indican una funcionalidad), las etiquetas se inician de esta forma: <etiqueta> y para indicarle que queremos cerrar la etiqueta le anteponemos una barra diagonal (/) antes del nombre, de esta forma: </etiqueta> siempre, recuerda, siempre tenemos que cerrar las etiquetas para evitar resultados indeseados. El navegador Web (programa que utilizamos para navegar por internet, ej: Firefox, Internet Explorer) es el que entiende el código HTML.
Código HTML: Estructura
El código HTML tiene una estructura que debemos seguir al pie de la letra, para indicarle al navegador que comenzaremos a escribir código HTML debemos escribir la etiqueta <html> de esta forma:
<html>
</html>
La primera etiqueta <html> indica que comenzamos nuestra página y la segunda </html> indica que nuestro código HTML ha terminado, todo nuestro código irá dentro de esas etiquetas.
Código HTML: Estructura de una pagina web
Recien vimos como comenzar una pagina web, pero aun hay etiquetas que debemos escribir obligatoriamente al momento de crear una pagina web, la estructura que debemos seguir en toda pagina web es:
<html>
<head></head>
<body>
</body>
</html>
Hay partes de nuestra página Web que se ven (imágenes, texto, enlaces) y otras que no (Titulo, descripción y demás atributos que veremos mas adelante), las partes de nuestro pagina que no se ven van entre las etiquetas <head> y </head> y todo lo que se ve va entre <body> y </body>.
Código HTML: definiendo el titulo de nuestra pagina Web
El titulo es lo que se ve en la ventana del navegador, no se ve directamente en el contenido de la pagina, por lo tanto tendremos que ponerlo dentro de la etiqueta <head>, pero ¿Como hacemos para indicarle al navegador que escribiremos el titulo? muy simple, el texto que nosotros queramos que sea el titulo lo encerramos entre <title> y </title> de esta forma:
<html>
<head>
<title>Titulo de nuestra página Web</title>
</head>
<body>
</body>
</html>
Código HTML: agregando texto en nuestra pagina Web
Todo lo que queramos agregar a nuestra página Web tiene que ir dentro de las etiquetas <body> y </body> (cabe aclarar que "body" en español significa "cuerpo"), de esta forma:
<html>
<head>
<title>Titulo de nuestra página Web</title>
</head>
<body>
Este es el contenido de la página Web.
</body>
</html>
Toda pagina web debe contener un archivo llamado "index" seguido del nombre del código en el que la estamos haciendo, en nuestro caso se llamará "index.html", esta es la pagina principal de toda pagina web.
Para empezar a crear nuestra pagina principal primero vamos a crear una carpeta en "Mis Documentos" (/home/usuario/) con el nombre "ejemplo-ccusw" donde colocaremos todos los archivos de nuestra pagina web.
Para comenzar vamos a abrir el editor HTML NVU que instalamos en una de las lecciones pasadas, una vez abierto, iremos a "archivo" y a continuación haremos clic en "nuevo", si lo hicimos bien, se nos abrira una mini ventana como esta:
URL=http://www.deimagenes.com]
[/URL]
Nos aseguramos de tener la configuración igual que en la imagen y hacemos clic en "Crear". Una vez hecho esto veremos una pagina en blanco, aun no le hemos puesto nombre, para eso hacemos clic en "archivo" y luego en "guardar".
En la ventana que nos aparece tenemos que poner el nombre del archivo, como dijimos antes lo llamaremos index.html luego hacemos clic en aceptar.
Ahora nos aparecerá una ventana que nos pregunta donde queremos guardar ese archivo, es fácil, lo hacemos en la carpeta que creamos antes ¿recuerdas? aquella que se llamaba "ejemplo-ccusw" y estaba en "Mis Documentos" (si no la creaste, este es el momento jeje) (/home/usuario/ para los que usan Linux), cuando estamos en esa carpeta hacemos clic en guardar y listo, si vamos a esa carpeta tendremos que ver el archivo index.html:
Ya tenemos la primer pagina de nuestra web, ahora falta lo mas importante, agregarle contenido jeje
http://sunsite.rediris.es/mirror/NAVE/productos/nvu/1.0/win32/nvu-1.0.es-ES.win32.installer.exe
Despues en la intalacion ay saben siguiente,siguiente,acepto la condiciones y terminos,etc...
Configurar NVU
1° Paso:Configurar NVU
En la lección anterior vimos como descargar e instalar el editor HTML NVU, ahora vamos a ver como configurarlo para adaptarlo a nuestras necesidades.
Lo primero que haremos es abrirlo, si ya lo hicimos tendríamos que ver una pantalla como esta:
Lo que queremos hacer es simplificarlo, por eso vamos a cerrar el "Administrador de sitios" haciendo clic en la cruz, como esta en la imágen.
Ahora vimos que el espacio en blanco se expandió, por lo tanto podremos escribir mas código HTML, eso es bueno jeje.
URL=http://www.deimagenes.com]
[/URL]Si no entiendes que hace exactamente cada una de las pestañas que estan marcadas en rojo, no te preocupes, estoy para explicartelo ;), para que te des una idea:
Normal: es el modo WYSIWYG ¿¡WYSI... QUE!? significa What You See Is What You Get (en inglés, "lo que ves es lo que obtienes"), todo lo que escribamos ahí será traducido a código HTML automáticamente.
Etiquetas HTML: igual al anterior, solo que veremos las etiquetas HTML.
Código Fuente: esta es la pestaña que mas utilizaremos, ahí es donde vemos el código de fuente de nuestra pagina web, también nos acostumbraremos a escribir todo ahí (Si llegaste hasta aquí no estarás pensando en abandonar ¿no? jeje).
Vista preliminar: esta pestaña también la utilizaremos muy seguido, en ella podremos ver como va quedando nuestra pagina web, muy útil.
Bien, ya sabemos lo que tenemos que saber, ahora es hora de comenzar a ver los conceptos básicos del HTML.
2° Paso:Primeros Conceptos
Empezamos por lo básico, ¿Que es una pagina web? bien, una página Web es un conjunto de lineas de código ordenadas para que formen una estructura, los navegadores web entienden ese código y lo muestran en forma de sitio web, se pueden utilizar varios lenguajes de programación como HTML, PHP, ASP, etc. En este curso aprenderemos a escribir código HTML desde cero.
Como, ¿estas mareado@? no te preocupes, ya entenderás lo que digo.
Código HTML: sistema de etiquetas
El código HTML hace uso de etiquetas (palabras que indican una funcionalidad), las etiquetas se inician de esta forma: <etiqueta> y para indicarle que queremos cerrar la etiqueta le anteponemos una barra diagonal (/) antes del nombre, de esta forma: </etiqueta> siempre, recuerda, siempre tenemos que cerrar las etiquetas para evitar resultados indeseados. El navegador Web (programa que utilizamos para navegar por internet, ej: Firefox, Internet Explorer) es el que entiende el código HTML.
Código HTML: Estructura
El código HTML tiene una estructura que debemos seguir al pie de la letra, para indicarle al navegador que comenzaremos a escribir código HTML debemos escribir la etiqueta <html> de esta forma:
<html>
</html>
La primera etiqueta <html> indica que comenzamos nuestra página y la segunda </html> indica que nuestro código HTML ha terminado, todo nuestro código irá dentro de esas etiquetas.
Código HTML: Estructura de una pagina web
Recien vimos como comenzar una pagina web, pero aun hay etiquetas que debemos escribir obligatoriamente al momento de crear una pagina web, la estructura que debemos seguir en toda pagina web es:
<html>
<head></head>
<body>
</body>
</html>
Hay partes de nuestra página Web que se ven (imágenes, texto, enlaces) y otras que no (Titulo, descripción y demás atributos que veremos mas adelante), las partes de nuestro pagina que no se ven van entre las etiquetas <head> y </head> y todo lo que se ve va entre <body> y </body>.
Código HTML: definiendo el titulo de nuestra pagina Web
El titulo es lo que se ve en la ventana del navegador, no se ve directamente en el contenido de la pagina, por lo tanto tendremos que ponerlo dentro de la etiqueta <head>, pero ¿Como hacemos para indicarle al navegador que escribiremos el titulo? muy simple, el texto que nosotros queramos que sea el titulo lo encerramos entre <title> y </title> de esta forma:
<html>
<head>
<title>Titulo de nuestra página Web</title>
</head>
<body>
</body>
</html>
Código HTML: agregando texto en nuestra pagina Web
Todo lo que queramos agregar a nuestra página Web tiene que ir dentro de las etiquetas <body> y </body> (cabe aclarar que "body" en español significa "cuerpo"), de esta forma:
<html>
<head>
<title>Titulo de nuestra página Web</title>
</head>
<body>
Este es el contenido de la página Web.
</body>
</html>
3° Paso:Creando la pagina inicial
Toda pagina web debe contener un archivo llamado "index" seguido del nombre del código en el que la estamos haciendo, en nuestro caso se llamará "index.html", esta es la pagina principal de toda pagina web.
Para empezar a crear nuestra pagina principal primero vamos a crear una carpeta en "Mis Documentos" (/home/usuario/) con el nombre "ejemplo-ccusw" donde colocaremos todos los archivos de nuestra pagina web.
Para comenzar vamos a abrir el editor HTML NVU que instalamos en una de las lecciones pasadas, una vez abierto, iremos a "archivo" y a continuación haremos clic en "nuevo", si lo hicimos bien, se nos abrira una mini ventana como esta:
URL=http://www.deimagenes.com]
[/URL] Nos aseguramos de tener la configuración igual que en la imagen y hacemos clic en "Crear". Una vez hecho esto veremos una pagina en blanco, aun no le hemos puesto nombre, para eso hacemos clic en "archivo" y luego en "guardar".
En la ventana que nos aparece tenemos que poner el nombre del archivo, como dijimos antes lo llamaremos index.html luego hacemos clic en aceptar.
Ahora nos aparecerá una ventana que nos pregunta donde queremos guardar ese archivo, es fácil, lo hacemos en la carpeta que creamos antes ¿recuerdas? aquella que se llamaba "ejemplo-ccusw" y estaba en "Mis Documentos" (si no la creaste, este es el momento jeje) (/home/usuario/ para los que usan Linux), cuando estamos en esa carpeta hacemos clic en guardar y listo, si vamos a esa carpeta tendremos que ver el archivo index.html:
Ya tenemos la primer pagina de nuestra web, ahora falta lo mas importante, agregarle contenido jeje
4 Paso:insertar parrafos y saltos de linea con HTML
|
|
Comentarios
#1 - gonza1988 - 2009-07-24 09:48:08 dijo:
#2 - KevinTech - 2009-07-27 01:41:17 dijo:
#3 - fidoqac - 2009-07-27 13:54:34 dijo:
#4 - Nacho9696 - 2009-08-04 20:44:59 dijo:
#5 - kawapanga - 2009-08-25 05:06:11 dijo:
#6 - holier - 2009-08-25 18:01:51 dijo:
#7 - fidoqac - 2009-08-26 14:08:04 dijo:
#8 - tomas877 - 2009-09-11 17:50:48 dijo:
#9 - brian96 - 2009-09-20 05:48:43 dijo:
#10 - Miguelithox - 2009-09-26 19:32:54 dijo:
Comentario de lucas123 eliminado por gonza1988 (Spam)
Comentario de lucas123 eliminado por gonza1988 (Spam)
Comentario de lucas123 eliminado por gonza1988 (Spam)
#14 - dialgoes - 2009-10-27 18:15:28 dijo:
#15 - cotysurf - 2010-07-27 14:11:16 dijo:
#16 - fidoqac - 2010-08-28 20:18:15 dijo:
hola, antes que nada bienvenido al sitio y muchas gracias por el aporte! te dejo tus primeros 5 puntos...
Igualmente quiero decirte un par de cositas:
- el título del post no debería estar todo es mayúscula, ya que si está así, resalta del resto y no estaría bien, por lo que en cuanto puedas por favor editalo.
- las imágenes del post no se ven, es probable que sea un problema del servidor que las tiene alojadas.
- si el post no es de tu autoría hay que poner la fuente.
No tomes a mal estas cosas, simplemente son para que el sitio mantenga cierta calidad.
Muchas gracias nuevamente y esperamos que el sitio te sea de utilidad.
Saludos.
Igualmente quiero decirte un par de cositas:
- el título del post no debería estar todo es mayúscula, ya que si está así, resalta del resto y no estaría bien, por lo que en cuanto puedas por favor editalo.
- las imágenes del post no se ven, es probable que sea un problema del servidor que las tiene alojadas.
- si el post no es de tu autoría hay que poner la fuente.
No tomes a mal estas cosas, simplemente son para que el sitio mantenga cierta calidad.
Muchas gracias nuevamente y esperamos que el sitio te sea de utilidad.
Saludos.
#2 - KevinTech - 2009-07-27 01:41:17 dijo:
Buen tuto!, muy básico 
nos vemos...
nos vemos...
#3 - fidoqac - 2009-07-27 13:54:34 dijo:
Buen Tuto, comprato. Pero fijate lo que Dice Gonza, no cuesta nada arreglarlo y queda mejor y mas util.
Un abrazo y Bienvenido!!!!!
+5
(Los otros +5 despues de la Edicion, jajaja)
Un abrazo y Bienvenido!!!!!
+5
(Los otros +5 despues de la Edicion, jajaja)
#4 - Nacho9696 - 2009-08-04 20:44:59 dijo:
Graciasss
#5 - kawapanga - 2009-08-25 05:06:11 dijo:
#6 - holier - 2009-08-25 18:01:51 dijo:
che todo bien y todo suma, pero no cuesta nada cumplir con el protocolo, sino empezamos mal 
#7 - fidoqac - 2009-08-26 14:08:04 dijo:
Nacho fijate de arreglar el post, sino no nos va a quedar otra que borrarlo, y sinceramente, es algo que no me gusta hacer, ya que los contenidos en si generalmente son interesantes. Abrazo.
#8 - tomas877 - 2009-09-11 17:50:48 dijo:
genial
#9 - brian96 - 2009-09-20 05:48:43 dijo:
Es lo mas facil que hay.Casas el notepad y te pones a escribir todo a mano,si sos vago como yo a veces,agarras el wysiwyg y fuee,despues un hostito gratis,y ya esta,si la necesitas mas profesional te metes en google y te vajas algun template y la editas con el dreamwaver,es solo cuestion de tiempo
#10 - Miguelithox - 2009-09-26 19:32:54 dijo:
Para un verdadero programador en PHP, MySQL, utilizo el Notepad++ (únicamente para crear códigos), y de ahí creo mis páginas web...
Comentario de lucas123 eliminado por gonza1988 (Spam)
Comentario de lucas123 eliminado por gonza1988 (Spam)
Comentario de lucas123 eliminado por gonza1988 (Spam)
#14 - dialgoes - 2009-10-27 18:15:28 dijo:
hole muy bueno el totorial pero nencacito saber si pueden colocar manuales de otros programas para crear paginas wed muchas gracias
#15 - cotysurf - 2010-07-27 14:11:16 dijo:
WTF!
#16 - fidoqac - 2010-08-28 20:18:15 dijo:
Si dialgoes, no hay problema en subir manuales y/o tutoriales.
Un abrazo!
Un abrazo!
