Eeeeeeeee
Páginas: 8 (1885 palabras)
Publicado: 4 de noviembre de 2012
Configurar NVU
Recomendar lección:
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 hicimostendrí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 tepreocupes, estoy para explicartelo ;), para que te des una idea:
1. Normal: es el modo WYSIWYG ¿¡WYSI... QUE!? significa What You See Is WhatYou 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 masutilizaremos, 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).
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 decomenzar a ver los conceptos básicos del HTML.
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), lasetiquetas 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, todonuestro 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áginaWeb 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 tantotendremos 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>...
Recomendar lección:
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 hicimostendrí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 tepreocupes, estoy para explicartelo ;), para que te des una idea:
1. Normal: es el modo WYSIWYG ¿¡WYSI... QUE!? significa What You See Is WhatYou 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 masutilizaremos, 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).
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 decomenzar a ver los conceptos básicos del HTML.
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), lasetiquetas 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, todonuestro 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áginaWeb 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 tantotendremos 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>...
Leer documento completo
Regístrate para leer el documento completo.