- Abre N|VU
- Accede al menú o
- Encontrarás
marcada la casilla que indica que se utilicen estilos CSS en
lugar de elementos y atributos HTML.
Desmárcala si vas a
trabajar en el nivel de iniciación.
Cuando visitamos una página WEB vemos textos, imágenes, colores de fondo, en algunos casos elementos que se desplazan por la pantalla, en fin, todo el conjunto de elementos que hacen de dicha página un espacio multimedia e interactivo.
Aunque podríamos pensar que todos esos elementos están incluidos en la página no es así. Realmente el único de todos ellos que pertenece al código de la propia página es el texto. Y, entonces, ¿cómo se ve lo que aparece en la página? La respuesta es que una página WEB no es más que un documento de texto acompañado de una colección de etiquetas que sirven para que el navegador
Podríamos decir que es el guión de la película.
Al tratarse de documentos de texto podemos afirmar que nos bastaría con cualquier programa genere texto plano para crear nuestras páginas HTML. Aunque este procedimiento resultaría bastante incómodo para su uso habitual, ya que nos obligaría a conocer todas las etiquetas del HTML, puede ser interesante para que comprendamos la estructura de una página WEB y será lo primero que hagamos.
Nuestra herramienta de trabajo durante este curso va a ser el editor N|VU y lo primero que nos conviene hacer es familiarizarnos con las principales características de su entorno para lo cual disponemos del siguiente vídeo.
Insertar vídeo del entorno general de nvu
La configuración por defecto de N|VU opta por la utilización de estilos CSS para formatear los diferentes elementos de la página. Es una opción acertada, ya que la utilización de CSS es un método mucho más versátil y potente que será muy interesante estudiar con detalle cuando se consoliden los conocimientos básicos pero, para el nivel inicial,puede suponer una dificultad porque no nos presentará algunas etiquetas propias del lenguaje HTML. Una de las formas más eficientes de aprender el lenguaje HTML es viendo cómo están construidas otras páginas y, como muchas de ellas aun no utilizan CSS, nos interesa ir conociendo las diferentes etiquetas propias del HTML y por eso es preferible, para el nivel de iniciación, desactivar el empleo de CSS.
Si dejas activada la casilla de verificación para la utilización de CSS es posible que algunas referencias que aparezcan en la documentación no coincidan con lo que puedas comprobar al ir realizando las prácticas propuestas.
Las etiquetas HTML se escriben encerradas entre ángulos. Normalmente se utilizan dos etiquetas: una de inicio y otra de fin para indicar que ha terminado el efecto que queríamos presentar. La única diferencia entre ambas es que la de cierre lleva una barra inclinada "/" antes del código.
<etiqueta>texto que
presentará el efecto</etiqueta>
Por ejemplo:<b>Esto va en
negrita</b> lo
veremos así: Esto va en negrita
Para que un navegador reconozca que lo que está viendo es una página WEB se utiliza la siguiente estructura:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> (Etiqueta
que indica le indica al navegador el tipo de documento que se
va a iniciar y le permite interpretarlo correctamente.
<HTML>
(Etiqueta que indica que lo que viene a
continuación es un
documento HTML)
<head>
(Etiqueta de apertura de la Título)
Aquí va la información sobre el título
de la página, el autor, palabras clave, etc. que no se
presentarán en la ventana del navegador, salvo el
título que aparecerá en la barra de
título de la parte superior
</head>
(Etiqueta de cierre de la Título)
<body>
(Etiqueta de apertura del cuerpo)
Aquí va el contenido de la página que
será lo que se presente en pantalla.
</body>
(Etiqueta de cierre del cuerpo)
</HTML>
(Etiqueta de cierre del documento)
No te preocupes por la aparente complejidad de la etiqueta inicial, ya que prácticamente todos los editores se encargarán de escribirla por ti.
Antes de comenzar los ejercicios prácticos comprueba que ya tienes creada una carpeta con el nombre "CursoHTML" para poder almacenar en ella el resultado de tu trabajo.
<body>
y </body>)
para saltar al siguiente
párrafo. . 
obtendrás un mensaje de error 
puesto
que el archivo con el que trabajas procede del CD-ROM y no puedes
escribir en él. 
para cargar en el navegador el
documento que acabamos de salvar
y comprobar los resultados.
Supongo que coincidiremos en que lo que hemos visto al comprobar cómo había quedado nuestra primera creación no ha sido muy alentador.
La explicación del desaguisado es sencilla: en HTML hacen falta unas etiquetas especiales para indicar los saltos de línea y párrafo y no las habíamos escrito. ¡Las cosas no son tan sencillas como en un procesador de texto!
<br>
es la
etiqueta que sirve para indicarle al navegador que debe hacer un salto
de línea y, dada su función, no necesita etiqueta
de cierre siempre que nos movamos en el tipo de documento determinado
por las especificaciones de HTML 4.01.<p>
</p> es la que nos sirve para
indicar que lo que está comprendido entra la etiqueta de
inicio y la de final forman un párrafo que se separa de lo
anterior y lo posterior mediante el espacio que corresponde a un doble
salto de línea. 
<br>
donde
habíamos pulsado una vez la tecla INTRO.<p> donde
inicialmente habíamos pulsado dos veces la tecla INTRO y
cerramos el párrafo de texto con </p>. Aunque pueda haber resultado algo duro para empezar puedes respirar con tranquilidad porque estos son los últimos trabajos que realizamos directamente escribiendo los códigos. A partir de aquí empezaremos a utilizar el editor gráfico desde la pestaña normal que, básicamente, se encarga de escribir por nosotros las etiquetas necesarias, pero es de suponer que gracias a esta introducción hayamos podido comprender cómo se escribe una página HTML.
La importancia de asimilar la estructura básica reside en que una de las mejores formas de aprender a crear páginas HTML es viendo páginas creadas por otros autores. Si tenemos claro el sistema utilizado podremos reconocer los elementos que nos parezcan interesantes e irlos incorporando a nuestras páginas.