|
Guia basica para crear una pagina web Tu página web desde cero Para comenzar el camino de un Webmaster comenzaremos con lo que llamamos "HTML", con el aprenderemos a insertar texto, imágenes y enlaces. Para empezar necesitaremos el programa NVU, un editor HTML muy potente y liviano. Pero lo que mas necesitaremos es tiempo y dedicación, sin eso no llegaremos a ningún lado. ¿Cómo instalar el NVU? Breve introducción al editor HTML NVU, que utilizaremos a lo largo de este post, su descarga e instalación. Como dijimos antes, NVU es un editor HTML muy potente y liviano, por eso lo elegí para dar este curso, además funciona en los sistemas operativos mas usados, Windows y Linux. Una vez descargado, vamos hacia la carpeta donde esta el archivo y hacemos doble clic sobre el (si utilizas Linux solo descompimes el archivo y ejecutas el archivo "nvu", no hace falta instalación), ahí se nos abrirá una ventana como esta: http://www.comocrearunsitioweb.com/i...-nvu-ccusw.png Hacemos clic en "Siguiente >" y nos llevará hacia esta otra: http://www.comocrearunsitioweb.com/i...vu-ccusw-2.png Para continuar con el proceso de instalación, deberemos aceptar la licencia, de lo contrario no podremos utilizar el programa, no hay nada extraño la podemos aceptar tranquilos, se los aseguro. Después de aceptarla hacemos clic en "Siguiente >" Ahora tendremos que decirle al programa donde queremos que se instale, la ubicación que viene por defecto es perfecta: http://www.comocrearunsitioweb.com/i...vu-ccusw-3.png Si no gusta esa ubicación, hacemos clic en "Siguiente >". http://www.comocrearunsitioweb.com/i...vu-ccusw-4.png Aquí solo debemos especificar el nombre con el que aparecerá NVU en los iconos, dejamos ese nombre y hacemos clic en "Siguiente >". http://www.comocrearunsitioweb.com/i...vu-ccusw-5.png En este paso decidimos si queremos que se creen los iconos en el escritorio y acceso rapido, seleccionamos los dos y le damos clic en "Siguiente >". http://www.comocrearunsitioweb.com/i...vu-ccusw-6.png Y ahora por fin comienza la instalación, solo tenemos que hacer clic en "Instalar" para que comience el proceso de instalación. Una vez que termine, veremos esta pantalla: http://www.comocrearunsitioweb.com/i...vu-ccusw-7.png ¡Muy bien! hemos terminado el proceso de instalación, lo único que haremos ahora es tilda la opción "Ejecutar NVU". y clic en "Terminar". |
Respuesta: Guia basica para crear una pagina web Configuración del NVU Ahora ver cómo vamos a configurar la interfaz del NVU, para poder trabajar mas tranquilos a lo largo del curso para crear una pagina web desde cero. Anteriormente 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. 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: 1.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. 2.Etiquetas HTML: igual al anterior, solo que veremos las etiquetas HTML. 3.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? ). 4.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. Comenzando con el editor HTML Introducción a HTML, el lenguaje que utilizaremos para crear una pagina web, todo lo que necesitas saber para comenzar a crear tu primera pagina web. 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 como un sitio web. Código HTML: sistema de etiquetas El código HTML hace uso de etiquetas (palabras que indican una funcionalidad), las etiquetas siempre 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. Nota: 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, primero 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 Recién 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>. 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 el contenido lo pondremos dentro de las etiquetas <body> y </body>, 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> Creando la página inicial Ahora aprenderemos a crear la pagina inicial de nuestra pagina web, como se debe llamar, donde ubicarla, etc. 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" con el nombre "ejemplo-ccusw" donde colocaremos todos los archivos de nuestra pagina web. Ahora vamos a abrir el editor HTML NVU que instalamos anteriormente, luego iremos a "archivo" y a continuación haremos clic en "nuevo", se nos abrira una mini ventana como esta: 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. Nota: Es importante que el nombre sea "index", de lo contrario al entrar a la dirección principal de nuestra página no veremos nada. 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", 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. |
Respuesta: Guia basica para crear una pagina web Insertando parrafos y saltos de linea en nuestra pagina Ahora aprenderemos las etiquetas basicas de HTML, para insertar parrafos y saltos de linea. Código HTML: insertar parrafos La etiqueta que se utiliza para insertar parrafos en HTML es: <p> y finalizar el párrafo: </p> Ahora vamos a abrir el archivo index.html de nuestra pagina web para probar esta etiqueta: En la lección de conceptos básicos de HTML vimos que cuaquier tipo de contenido visible debe ir dentro de las etiquetas "<body>" y "</body>", entonces para agregar un párrafo lo haremos así: <html> <head><title>Mi primer pagina Web</title></head> <body> <p>Este es mi primer párrafo</p> </body> </html> Código HTML: insertar saltos de linea Para insertar saltos de linea en HTML utilizaremos la etiqueta: <br /> ¿o no que es fácil? jeje, al ejemplo anterior le insertaremos un salto de linea y un párrafo mas, de esta forma: <html> <head><title>Mi primer pagina Web</title></head> <body> <p>Este es mi primer párrafo</p> <br /> <p>Creado gracias a CCUSW</p> </body> </html> Tan simple como eso, y ahora si lo vemos en vista preliminar quedaría así: Bien, ya sabes crear párrafos y saltos de linea, ¡Pronto tendrás tu primer pagina web terminada! y harás webs mejores que esta, eso te lo aseguro jeje Creando enlaces con HTML Ahora veremos como crear enlaces con código HTML para tu pagina web. Para crear un enlace necesitamos la ubicación, o mejor dicho, la dirección hacia donde nos llevará ese enlace al hacer clic en el, podemos poner una ruta absoluta (por ejemplo http://www.comocrearunsitioweb.com/u...on-enlace.html) o bien, una ruta relativa ( "/enlace.html" si es que el archivo desde donde enlazamos se encuentra en el mismo directorio del archivo en el que estamos en ese momento, o sea el "index.html" que creamos al principio). La etiqueta para crear enlaces es <a> y </a>, pero claro, aun falta algo ¿no?, falta poner la dirección hacia donde nos llevará ese enlace, para eso esta el atributo href, se utiliza de esta forma: <a href="http://www.comocrearunsitioweb.com">Crear Web</a> El texto del enlace va encerrado entre <a> y </a>, esto daría como resultado: Nota: cada vez que nos toque crear un enlace hacia otra pagina web (es decir, que no sea una sección de nuestra pagina) utilizaremos la dirección absoluta con el prefijo "http://". Ahora vamos a insertar un enlace a nuestra pagina web de ejemplo, el texto del enlace será CCUSW (ComoCrearUnSitioWeb) : <html> <head><title>Mi primer pagina Web</title></head> <body> <p>Este es mi primer párrafo</p> <br /> <p>Creado gracias a <a href="http://www.comocrearunsitioweb.com">CCUSW</a></p> </body> </html> El enlace ya esta creado, ahora cambiaremos de pestaña para ver como queda: Crear enlace de email Podemos crear enlaces que al hacer clic nos abra un programa para enviar email directamente, para crear estos enlaces solo tenemos que escribir "mailto:" antes de la dirección de email, de esta forma: <a href="mailto:[email protected]">Texto del enlace</a> Insertar imagenes com HTML Ahora veremos cómo insertar o colocar imágenes con código HTML, y también veremos como hacer que esa imagen tenga un enlace. Llego el momento de insertar nuestra primera imágen con HTML, la etiqueta que sirve para agregar imagenes es <img> pero al igual que la etiqueta para crear enlaces, necesitamos agregar un atributo para especificar la ubicación, en este caso, de la imágen. Para insertar una imágen lo haremos así: <img src="ubicación" alt="descripción" /> "alt" sirve para agregar una descripción a la imágen, que aparecerá cuando pasemos el mouse por encima de ella. Si cambiamos a la pestaña "Vista preliminar" veremos el resultado final: Ahí vemos como queda en nuestra pagina de ejemplo que venimos creando a lo largo de todas las lecciones anteriores. Pero ¿que pasa si queremos crear un enlace en la imagen para que cuando hagamos clic en ella nos abra otra dirección? eso es lo que voy a explicar ahora Crear enlace en imágen Para crear un enlace en la imágen para que al hacer clic en ella nos abra otra pagina, solo debemos poner la etiqueta <img> dentro de <a> y </a>, de esta forma: <a href="direccion" title="descripcion"><img src="ubicacion-de-la-imagen" alt="descripcion" /></a> |
Respuesta: Guia basica para crear una pagina web Crear listas con HTML ¿Que son las listas HTML? Aquí aprenderemos que son las famosas listas HTML, para que sirven y como se crean. ¿Qué son las "Listas"? Las listas son bloques de items ordenados uno abajo del otro, pueden ser ordenadas o desordenadas, para entenderlo mejor miremos este ejemplo: Lista ordenada: 1.Primer item 2.Segundo 3.etc. Lista desordenada: •primer item de mi lista •segundo •tercero •etc... Crear una lista con HTML El código para crear una lista con HTML desordenada es <ul> y </ul>, esta es la primera que escribiremos siempre que queramos crear una lista desordenada, y la segunda es <li> y </li>. Crear lista desordenada: <ul> <li>Este es el primer item de mi lista</li> <li>Segundo item</li> <li>Tercero</li> </ul> Como podemos ver, con la etiqueta <ul> indicamos que queremos abrir una lista y con <li> creamos los items, un item por cada <li>. Crear lista ordenada: <ol> <li>Este es el primer item de mi lista</li> <li>Segundo item</li> <li>Tercero</li> </ol> Quedaría así: |
Respuesta: Guia basica para crear una pagina web muy buen aporte gracias. |
Respuesta: Guia basica para crear una pagina web Se agradece el aporte. No demás está en recordar, que NVU también permite la edición en modo normal, es decir, como si se tratase de cualquier editor de texto sin necesidad de utilizar o arrojar código HTML, basta con escribir e insertar imágenes y el programa se encargará solo de insertar el código. Muy bueno y amigable, especialmente para aquellos que se inician en éstos procesos. |
Respuesta: Guia basica para crear una pagina web le sirve mucho a mi hermano gracias |
| La franja horaria es GMT -5. Ahora son las 07:12:12. |
Desarrollado por: vBulletin® Versión 3.8.9
Derechos de Autor ©2000 - 2024, Jelsoft Enterprises Ltd.
DeNunCianDo.CoM ©