PDF de programación - Edición HTML - Introducción y herramientas necesarias

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

Introducción

y

herramientas necesarias

C/ TORRELAGUNA, 58
28027 - MADRID

Índice de contenido

Información general ............................................................................................................. 3
¿Qué es un hipertexto? ....................................................................................................... 4
¿Qué es el HTML?............................................................................................................... 4
Conceptos de Servidores y Clientes WEB .......................................................................... 5
¿Cómo funciona el par Cliente-Servidor? ........................................................................... 5
Unas cuantas ideas esenciales............................................................................................ 6
Para comunicar hay que tener algo que decir.................................................................. 6
Una buena idea puede escribirse con mala caligrafía......................................................6
...aunque es preferible que la caligrafía acompañe......................................................... 7
En el fondo tenemos gustos similares.............................................................................. 7
Si en mi cabeza no está claro ¿cómo lo va a estar en la del visitante?........................... 7
Calor de hogar................................................................................................................. 8
¡Viva la comunicación viva!.............................................................................................. 8
Herramientas........................................................................................................................ 9
Obtención e instalación........................................................................................................ 9
N|VU................................................................................................................................. 9
Gimp................................................................................................................................. 9
Real Producer Basic 10 y Real Player Basic 10 ........................................................... 11
Filezilla........................................................................................................................... 11
Instalación...................................................................................................................... 12
Notepad ++.................................................................................................................... 14

Estilos CSS - Menús

2 de 14

INFORMACIÓN GENERAL
INFORMACIÓN GENERAL

Seguramente ya habrás leído la guía del alumno y tendrás una idea clara del funcionamiento del curso. De
todas maneras es importante que recuerdes que el objetivo final consiste en construir y publicar un
sitio WEB de contenido educativo compuesto de varias páginas con sus correspondientes
enlaces. Los recursos para llevar a cabo esta tarea los iremos trabajando paso a paso, pero
deberías tenerla presente desde el momento de iniciar el curso.

Los materiales que encontrarás recogen una serie de explicaciones sobre los diferentes
elementos que constituyen las páginas WEB y un conjunto de ejercicios intercalados para ir
practicando los conceptos explicados.

La navegación por los contenidos del curso puede hacerse siguiendo una secuencia lineal o
bien de forma no secuencial para lo que se utilizará el menú con el desarrollo de los bloques de
contenido que tendrás presente en la pantalla.

Junto a las explicaciones textuales encontrarás zonas del manual diferenciadas gráficamente:

En algunos casos se tratará de recomendaciones de "estilo", ya que crear una sitio WEB es
algo más que amontonar información más o menos correctamente relacionada.

Como en todo medio de comunicación se han ido desarrollando una serie de normas de
estilo que será conveniente respetar. No pretendemos ser estrictos, pero ten en cuenta
que la habilidad para navegar se adquiere gracias a que las páginas por las que pasamos
respetan un conjunto similar de convenciones y no tenemos que ir descubriendo nuevos
indicadores


paso.

cada



a



Las encontrarás en este tipo de recuadros.

Detrás de cada página WEB hay unos códigos que permiten que la veamos tal como se
presenta en nuestra pantalla.

Aunque trabajarás fundamentalmente en un entorno gráfico en el que las herramientas
que utilices irán construyendo el código hay algunos momentos en los que se hace
imprescindible recurrir a la edición manual del mismo.

La presentación en pantalla será como la de este bloque.

El tercer tipo de cuadros será el correspondiente a las prácticas. Siempre encontrarás un
número identificativo de la actividad
que te permitirá localizar rápidamente los

ejercicios.

Este tipo de señal te avisará de alguna cuestión relevante. Puede tratarse de un

detalle que puede alterar la forma de llevar a cabo un procedimiento o provocar un error,
de alguna advertencia importante respecto a códigos o estilos o, en general, alguna nota
que te puede evitar más de un quebradero de cabeza.

La secuencia de prácticas se inicia trabajando directamente con el código. Si ya has tenido
algún contacto con alguna otra herramienta de diseño de páginas WEB puede parecerte que
esta fase sobra. Como autor del curso considero que es un recurso metodológico necesario
para hacer patentes las características del lenguaje HTML y por ello los primeros ejercicios son
de este tipo. A partir de la cuarta práctica iniciaremos el trabajo con el editor gráfico.

Estilos CSS - Menús

3 de 14

¿QUÉ ES UN HIPERTEXTO?
¿QUÉ ES UN HIPERTEXTO?

El concepto de hipertexto responde, fundamentalmente, a una forma de concebir el acceso a la
información.

El texto impreso podría considerarse un modelo de presentación de la información de manera
lineal: la página 2 sucede a la 1, y así sucesivamente, del prólogo al epílogo.

Sin embargo existen, incluso en soporte impreso, materiales en los que el lector es quien
establece la secuencia de acceso a la información. Podemos mencionar ejemplos entre grandes
obras literarias, como "Rayuela" de Julio Cortázar, en modestas obras de literatura infantil, del
estilo "Construye tu propia aventura" o, en el entorno más cotidiano, la información contenida
en un diario.

Posiblemente sea el modelo del diario el que más fácilmente nos pueda dar pistas sobre lo que
es un hipertexto. Prácticamente nadie lee un periódico desde la primera a la última página:
seleccionamos la información que consideramos más interesante a partir de lo que aparece en
portada y es a ese artículo al que acudimos en primer lugar. Esta posibilidad de seleccionar el
itinerario que vamos a seguir es uno de los elementos que definen al hipertexto.

Ahora bien, aunque pueda servirnos para asimilar de forma intuitiva el concepto de hipertexto,
tendremos que considerar un segundo elemento para definirlo: la posibilidad de incluir, junto a
la información escrita y la imagen fija, el sonido y la imagen en movimiento.

Aunque es posible seguir buscando signos identificativos del hipertexto podemos dejar esta
primera aproximación en este punto. Por tanto, a los efectos de este curso, consideraremos
hipertexto al conjunto de información en soporte multimedia que se estructura mediante
enlaces entre los diversos elementos, de forma que el usuario pueda acceder a ella de forma
ágil y teniendo la posibilidad de establecer su propio itinerario de "lectura".

¿QUÉ ES EL HTML?
¿QUÉ ES EL HTML?

Una de las primeras preguntas que se hace uno al acercarse a la creación de páginas WEB es
qué significa eso de HTML.

Las siglas HTML son las iniciales de la expresión en inglés HyperText Markup Language.
Traducido al castellano sería Lenguaje de Etiquetas de Hipertexto.

Se trata de un conjunto de etiquetas que se van intercalando entre el texto de forma que los
programas que utilizamos para navegar por la Red sepan qué es lo que tienen que mostrar
cuando accedemos a una página y cómo deben presentarlo en la pantalla.

Dada la constante evolución de Internet, el lenguaje HTML ha ido igualmente evolucionando de
forma rápida e incorporando especificaciones a través de las sucesivas versiones del mismo.

Existe un organismo internacional independiente ( World Wide Web Consortium o W3C)
que se encarga de ir fijando cuáles son las etiquetas válidas pero, a pesar de ello, la batalla
comercial que se ha desarrollado en torno a los navegadores para Internet ha originado
situaciones en las que han aparecido etiquetas propietarias de un determinado programa.

Llamamos etiquetas propietarias a aquellas que sólo son interpretadas correctamente por un
navegador, mientras que el resto de los navegadores las ignora. Como consecuencia de ello
hay efectos que se pueden ver cuando se visita una página con el navegador Internet Explorer
de Microsoft y que no aparecen con otros navegadores o viceversa.

Antes de ponernos a trabajar con nuestras páginas WEB tendremos que considerar que
algunas de las cosas que nos resultan muy sencillas de hacer con un procesador de texto no lo
van a ser tanto cuando estemos creando una página para la Red. El motivo es que el
lenguaje HTML surgió con la finalidad de permitir organizar de forma estructurada la

Estilos CSS - Menús

4 de 14

información (fundamentalm