Como crear una pagina web paso a paso parte1

Introducción al curso para aprender a crear una pagina web desde cero, aquí veremos que es lo que necesitamos para seguir este curso, no tengas miedo ¡será mas fácil de lo que parece!. Saludos amig@, veo que tienes ganas de crear tu propia página Web, quiero decirte que llegaste al lugar indicado. En este curso vamos a aprender a crear una pagina web paso a paso, desde cero, no hace falta que sepas programación ni códigos raro, todo lo aprenderás en este sitio. Para comenzar el camino de un Webmaster comenzaremos con lo que llamamos "HTML", con el aprenderemos a insertar texto, imágenes y enlaces, luego seguiremos con los estilos CSS, pero antes vamos a instalar un editor HTML para seguir el curso. ¿Que necesitamos? 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. Descargar e instalar NVU Breve introducción al editor HTML NVU, que utilizaremos a lo largo de este curso, 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. Para descargar NVU tendremos que dirigirnos al sitio web oficial o bien, para descargar la versión de Windows hacer clic aquí, y para Linux clic aquí. 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: Hacemos clic en "Siguiente >" y nos llevará hacia esta otra: 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: Si no gusta esa ubicación, hacemos clic en Siguiente > Aquí solo debemos especificar el nombre con el que aparecerá NVU en los iconos, dejamos ese nombre y hacemos clic en Siguiente > 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 > 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: hemos terminado el proceso de instalación, lo único que haremos ahora es tilda la opción "Ejecutar NVU" y clic en "Terminar". Configurar NVU En esta lección vamos a configurar la interfaz del NVU, para poder trabajar mas tranquilos a lo largo del curso para crear una pagina web desde cero. 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. 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. 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: y para indicarle que queremos cerrar la etiqueta le anteponemos una barra diagonal (/) antes del nombre, de esta forma: 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 de esta forma: La primera etiqueta indica que comenzamos nuestra página y la segunda 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: 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 y . 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 , 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 de esta forma: Código HTML: agregando texto en nuestra pagina Web Todo el contenido lo pondremos dentro de las etiquetas y , de esta forma: Este es el contenido de la página Web. Creando la pagina inicial En esta lección 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 en una de las lecciones pasadas, 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: Insertando parrafos y saltos de linea en nuestra pagina En esta lección 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:

y finalizar el párrafo:

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 "" y "", entonces para agregar un párrafo lo haremos así:

Este es mi primer párrafo

Código HTML: insertar saltos de linea Para insertar saltos de linea en HTML utilizaremos la etiqueta: