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.