PDF de programación - Edición HTML - Entorno y primeros pasos

MINISTERIO
DE EDUCACIÓN
Y CIENCIA

SECRETARÍA GENERAL
DE EDUCACIÓN
Y FORMACIÓN PROFESIONAL

DIRECCIÓN GENERAL
DE EDUCACIÓN,
FORMACIÓN PROFESIONAL
E INNOVACIÓN EDUCATIVA

CENTRO NACIONAL
DE INFORMACIÓN Y
COMUNICACIÓN EDUCATIVA

Edición HTML

Entorno y primeros pasos

C/ TORRELAGUNA, 58
28027 - MADRID

Índice de contenido

Familiarizándonos con el entorno de trabajo........................................................................ 3
El formato de las etiquetas HTML........................................................................................ 4
La estructura básica de una página WEB............................................................................ 5
¡Vaya desastre!.................................................................................................................... 6

Entorno

2 de 7

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

interprete de qué forma tiene que presentar el texto
sepa de dónde tiene que obtener las imágenes y sonidos y cómo mostrarlos

•
•
• distribuya todos los contenidos de una forma determinada dentro de la pantalla

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.

FAMILIARIZÁNDONOS CON EL ENTORNO DE
FAMILIARIZÁNDONOS CON EL ENTORNO DE
TRABAJO
TRABAJO

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 en la documentación HTML de un vídeo descriptivo.

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.

•

•

•

Abre N|VU

Accede al menú HERRAMIENTAS

PREFERENCIAS

GENERAL

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.



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.

Entorno

3 de 7

EL FORMATO DE LAS ETIQUETAS HTML
HTML
EL FORMATO DE LAS ETIQUETAS

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.

Por ejemplo:<b>Esto va en negrita</b> lo veremos así: Esto va en negrita

<etiqueta>texto que presentará el efecto</etiqueta>

Es probable que una de las primeras preguntas que te hagas sea si es obligatorio escribir las
etiquetas en minúsculas o en mayúsculas.

Hoy por hoy es indiferente escribirlas de una u otra manera: salvo raras excepciones los
navegadores las interpretan correctamente en ambos casos.

Sin embargo, las últimas especificaciones emitidas por el W3C(*) indican la necesidad de que
vayan escritas siempre en minúsculas para considerar que el documento está correctamente
creado si intentamos que cumpla con las normas del más avanzado y estricto lenguaje XHTML.
Así pues ya que es algo que no nos cuesta trabajo acataremos la norma emitida por el W3C.

(*)El W3C (World Wide Web Consortium) es el fórum internacional que se encarga desarrollar
nuevas tecnologías relacionadas con la WEB dictando las normas que constituyen el estándar
comúnmente aceptado para la creación de documentos web.

Entorno

4 de 7

LA ESTRUCTURA BÁSICA DE UNA PÁGINA WEB
LA ESTRUCTURA BÁSICA DE UNA PÁGINA WEB

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.

•

Arranca N|VU y abre el archivo empezando.html que encontrarás en la carpeta
"introduccion" del CD-ROM

• No verás nada en la pestaña

, así que vamos a utilizar la

•

.

pestaña
Localiza las etiquetas que hemos mencionado antes y haz clic con el ratón para
situarte en la zona correspondiente al cuerpo de la página (entre <body> y
</body>)

• Dale contenido al cuerpo escribiendo un renglón y pulsando la tecla

para saltar

al siguiente párrafo.

Escribe otro renglón y pulsar dos veces la tecla
Escribe un tercer renglón .

.

Si

pulsas el



icono



obtendrás un mensaje de error


trabajas procede del CD-ROM y no puedes escribir en él.

puesto que el archivo con el que

•
•

•

•

Entorno

5 de 7

•

•

Tendrás que utilizar el menú archivo
guardar como y salvar el fichero en la
carpeta CursoHTML con el nombre actividad2.html (para que puedas enlazar
fácilmente las actividades con su enunciado las guardaremos siempre con el mismo
número, por lo que es posible que, en alguna actividad referida a procedimientos
no tengas ningún "producto" en tu carpeta de trabajo)

Utiliza la pestaña de
navegador el documento que acabamos de salvar y comprobar los resultados.

o bien el botón

para cargar en el

La primera vez que utilices el botón navegar el programa solicitará permiso para lanzar una
aplicación externa. Sería conveniente que marcaras la casilla para que recordara esta decisión
de forma que no te lo pregunte cada vez que vuelvas a pulsarlo.

¡VAYA DESASTRE!
¡VAYA DESASTRE!

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
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.

las especificaciones de

HTML



Vamos a intentar solucionar este lío y para ello volveremos a N|VU y crearemos un nuevo
documento que aparecerá en una nueva pestaña. Una vez que dispongamos de esta nueva
pestaña usaremos el icono abrir para abrir de nuevo nuestro primer trabajo (con esto
conseguiremos tener dos copias del mismo y podremos comparar las diferencias que se
producen al introducir alguna modificación.)

Entorno

6 de 7

•

•

•

•

Volvemos a N|VU y vamos a abrir un abrir el el editor de textos si lo habíamos
cerrado.

Cargamos nuestra anterior creación (actividad2.html).
introducimos la etiqueta <br> donde habíamos pulsado una vez la tecla
.
Ponemos <p> donde inicialmente habíamos pulsado dos veces la tecla
cerramos el párrafo de texto con </p>.

y

• Guardamos el archivo como actividad3.html
•

Pasamos a