Embed Size (px)
Citation preview
CC aa mm ii nn oo hh aa cc ii aa II TTAA CC AA
125
PRIMEROS PASOS
Las siglas HTML corresponden a Hyper TextMark-up Language, es decir, Lenguaje de mar-cas de hipertexto.
Los documentos HTML son documentos detexto con una serie de palabras claves, etique-tas, que indican unas instrucciones. Las etique-tas sirven al navegador para representar los ele-mentos que contenga el documento (texto, imá-genes, sonidos, ...) en la pantalla.
Las etiquetas HTML se escriben encerradasentre ángulos, <etiqueta>. Generalmente seutilizan dos etiquetas: una de inicio y otra definal para indicar que ha terminado la instruc-ción correspondiente. La única diferencia entreambas es que la de cierre lleva una barra incli-nada “/” antes del código que identifica la eti-queta, <etiqueta>texto</etiqueta>. Tambiénexisten etiquetas sólo de inicio.
Por ejemplo, para poner texto en negrita hayque escribir <B>texto</B> y dará como efectotexto.
Al tratarse de documentos de texto bastaríacon un simple procesador de textos para crearpáginas HTML. Este procedimiento resulta bas-tante incómodo ya que obliga a conocer todaslas etiquetas de HTML y a tener que teclearlasuna a una según las vayamos utilizando. De cual-quier forma existen editores específicos para eldiseño de páginas Web . Estos editores permiteninsertar etiquetas de HTML a través de menús,botones o iconos sin necesidad de teclearlas. Noobstante es conveniente conocer la estructurade una página WEB y de esta forma comprendermejor las partes que la componen.
La estructrura de una página web constabásicamente de las siguientes etiquetas:
• <HTML> (Inicio de un documento HTML)
• <HEAD> (Inicio de la cabecera)
• <TITLE> (Inicio del título del documento)
• </TITLE> (Fin del título del documento)
• </HEAD> (Fin de la cabecera)
• <BODY> (Inicio del cuerpo del documento)
• </BODY> (Fin del cuerpo del documento)
• </HTML> (Etiqueta de cierre del documen-to)
Entre las etiquetas de cabecera se añade lainformación del autor, palabras claves, etc. Aquíse encuentra el título del documento que vaentre las etiquetas <TITLE> y es la única infor-mación de la cabecera que se presenta en labarra de título del navegador.
El contenido de la página que se verá en pan-talla se coloca en el cuerpo del documento entrelas etiquetas <BODY>
MEDELLÍN (Compositor de Mozilla)
Medellín es la personalización del Composi-tor de Mozilla para LinEx. Este programa permi-te trabajar el lenguaje HTML como en un proce-sador de textos. Se encarga de escribir las eti-quetas, la principal preocupación será del dise-ño de la página.
Esta aplicación tiene versiones que se pue-den ejecutar directamente desde Windows odesde el entorno de linux, Medellín para la ver-sión personalizada de la Junta de Extremadura.
En el entorno de Linex viene instalado pordefecto. Para windows y linux lo podemos con-seguir gratuitamente desde la siguiente direc-ción de Internet: http://www.mozilla.org/
Una vez realizada la instalación del mismo,al iniciarlo nos aparece la siguiente ventana:
La Barra de Título muestra el nombre de lapágina activa.
La Barra de Menú permite acceder a todaslas opciones del programa. Al hacer clic sobrecualquiera de sus categorías se accede a los dis-tintos comandos del programa.
Diseño de páginas web con MozillaBenjamín López López
Asesor de Nuevas Tecnologías. CPR de Badajoz
CC aa mm ii nn oo hh aa cc ii aa II TTAA CC AA
126
El Área de trabajo es donde se diseñas lapágina Web.
La Barra de Estado entre otras opciones tepermite cambiar entre herramientas de Mozilla.
Pasando el ratón por los distintos botones dauna breve descripción de la acción que realiza.
El botón secundario del ratón sobre cual-quier objeto insertado en el área de trabajo,abrirá un menú contextual con las opciones másfrecuentes que se pueden utilizar sobre él.
BARRA DE COMPOSICIÓN
La Barra de Composición facilita el acceso a lasopciones más usadas del programa con un simpleclic del ratón en el botón correspondiente.
Nueva: crea una página nueva.
Abrir: abre un archivo, página, existente.
Guardar: guarda el archivo, página, que estástrabajando.
Examinar: carga la página en el navegador.
Imprimir: imprime la página activa.
Imagen: insertar una nueva imagen en lapágina o modificar las propiedades de la selec-cionada.
Horizontal: inserta una línea horizontal omodificar las propiedades de la seleccionada.
Tabla: insertar una tabla en la página o modi-ficar las propiedades de la seleccionada.
Enlace: insertar enlaces en la página o modi-car las propiedades del enlace seleccionado.
Ancla: insertar un ancla o modificar las pro-piedades del ancla seleccionado.
BARRA DE FORMATO
La Barra de For-mato facilita el acce-so a las opciones másusadas con el texto.
Formato de párrafo: permite seleccionardiferentes formatos de párrafo.
Color de texto: cambia el color del textoseleccionado.
Color de fondo: cambia el color de la página.
Disminuir fuente y aumentar fuente: permi-te modificar el tamaño del texto seleccionado.
Negrita: pone en negrita el texto selecciona-do.
Cursiva: pone en cursiva el texto selecciona-do.
Subrayado: subraya el texto seleccionado.
Lista de viñetas: crea o elimina los bolos oviñetas de una lista.
Lista de numeración: crea o elimina la nume-ración de una lista.
Sangría: reduce o aumenta la sangría delpárrafo seleccionado.
Alineación: alinea el texto en la página a laizquierda, al centro, a la derecha o justificado
CONSIDERACIONES PREVIAS
Como consideración previa al elaborar unapágina web está la elaboración de un bocetosobre el trabajo que se va a desarrollar, en él sedeben contemplar aspectos tales como los con-tenidos, la distribución, el colorido, etc...
En esta planificación hay que tener presentealgunas recomendaciones:
• Un sitio Web debe ser claro y fácil de leer
• Cada página debe tener títulos descriptivosy subtítulos
• Usar enlaces relativos (a la misma Web)para su portabilidad
• Incluir una fecha en las páginas principales
• Actualizar frecuentemente las páginas
• Publicar páginas o gráficos con menos de100 Kb.
• Las páginas no deben ser más largas de 4 o5 pantallas
• Conectar cada página a un menú o subme-nú (que no haya “páginas muertas”)
• Controlar el tiempo de carga de la página(no exceder de 40 sg.)
• Diseñar la página con los menos gráficosposibles
• Poner los dibujos y gráficos simples en for-mato GIF
• Poner las fotografías y similares en forma-to JPEG (JPG)
• Guardar los gráficos con menos de 400pixels de anchura
• Limitar el tamaño de los gráficos a unos 30Kb
• Poner texto oscuro en fondo claro y textoclaro en fondo oscuro
• Revisar la ortografía antes de publicar laspáginas
• Poner vídeo sólo si es imprescindible
• Usar formatos multimedia estándar parano cargar añadidos especiales.
• Dar opciones para abrir ficheros de sonidoo vídeo.
CC aa mm ii nn oo hh aa cc ii aa II TTAA CC AA
127
Antes de comenzar a elaborar una páginaweb es conveniente crear una carpeta dóndeguardar todos los ficheros que se generen. Tam-bién es aconsejable crear subcarpetas para losdistintos tipos de archivos que componen laweb, por ejemplo imágenes, sonidos, textos,...
TÍTULOS
Los títulos son formatos predeterminados deletra y existen seis diferentes.
Abrir Medellín (Compositor de Mozilla) en elárea de trabajo escribir el siguiente texto:
Voy a comprobar las diferencias entrelos distintos títulos: Título 1
Seleccionar lafrase, y desdela Barra de for-mato seleccio-nar en el For-mato de párra-fo Título 1
Hacer lo mismo con Título 2, Título 3, Título4, Título 5 y Título 6
Comprobar los resultados
TIPOGRAFÍA
Para resaltar una parte del texto se utilizanlas caracterírticas tipográficas. Para realizarcualquier modificación hay que seleccionar eltexto y aplicar los cambios.
Escribir la siguiente frase y modificar las pala-bras negrita, cursiva y subrayado realizando loque indican:
Las tipografías básicas que se utilizanson: negrita, cursiva y subrayado
ALINEACIÓN
La alineación del texto por defecto se hace ala izquierda, pero se puede hacer centrado, a laderecha o justificado a ambos lados.
Escribir el siguiente documento y quedarloaproximadamente como sigue:
Colegio Público “Los Zagales”
Centro de E. Infantil y Primaria
Voy a empezar mi primera página Web
Quiero que mi Centro se conozca en todo el Mundo
LISTADOS
Las listas sirven para organizar la informa-ción incorporada a la página. Los principalesformatos son:
Incisos: los elementos de la lista van precedi-dos por una viñeta o bolo
• Elemento nº 1• Elemento nº 2
Enumerado: los elementos de la lista se pre-sentan numerados
1. Elemento nº 1 2. Elemento nº 2
Término: presenta términos de un lista paraser definidos
Término nº 1 Término nº 2
Definición: presenta la explicación de los tér-minos de un lista con diferente tabulación
Definición del término 1 Definición del término 2
La forma de introducir nuevos elementos enla lista, una vez empezada, consiste sencilla-mente en pulsar la tecla INTRO, con lo que seañade otro ítem del mismo nivel que el prece-dente. Para variar el nivel, hacia la derecha ohacia la izquierda pulsar el icono correspon-diente a aumentar o disminuir sangría.
Para finalizar la introducción de elementosen la lista basta con pulsar el botón con el quese inició.
Abrir una nueva ventana del editor utilizan-do la opción Archivo / Nueva / Nueva páginaen blanco o bien pulsando el botón Nueva dela Barra de Composición
Crear una lista ordenada que esté formadapor elementos del primer nivel, elementos desegundo nivel,... como la que sigue. (Primernivel el que está más próximo al margen izquier-do, 2º nivel, 3º y sucesivos a los que se encuen-tran más alejados, en la 2ª, 3ª y sucesivas tabula-ciones). Probar los distintos tipos de listado.
Acceso a Internet en Red Local
Planteamiento del problema
Varios PCs necesitan salir a Internet
Se dispone de una única línea telefónica
Se quiere realizar con una única cuentade acceso a Internet
Topología de una red local
Red tipo Bus Red en anillo Red en estrella
Protocolo TCP/IP
Soluciones
Software
Wingate S-proxy Sambar
Proxy Win98
Hardware
Router
CC aa mm ii nn oo hh aa cc ii aa II TTAA CC AA
128
Puede resultar útil anidar listas de incisosdentro de otras enumeradas o viceversa. Probarestas posibilidades con el ejercicio anterior.
TABLAS
Las tablas son uno de los elementos máspotentes del HTML. En las celdas de una tabla,se puede poner cualquier elemento de los quecompone la página: texto, imágenes, enlaces...
La forma más simple de una tabla sería laformada por una fila y una columna.
Lo general es construir tablas de varias filaspor varias columnas.
La fusión de las celdas que la forman permi-te cambiar el resultado final.
Crear un documento nuevo e inser-tar en él una tabla con 3 filas y 5columnas. (Para hacerlo pulsar en elicono que representa una tabla).
Rellenar las celdas con la siguiente informa-ción:
Para añadir una fila por encima de las actua-les para agrupar los datos en Primer y SegundoCiclo situar el cursor en una de las celdas de laprimera fila, pulsar con el botón derecho y selec-cionar Insertar tabla / Renglón arriba.
Seleccionar las celdas que se encuantran enci-ma de PRIMERO y SEGUNDO, seleccionar en elMenú Tabla la opción Unir celdas seleccionadas.Repetir la operación con la celdas situadas enci-ma de TERCERO y CUARTO.
Rellenar las celdas superiores con el textoPRIMER CICLO y SEGUNDO CICLO respectiva-mente.
Puede quedar aproximadamente así:
Al pulsar con el botón derecho en cualquierparte de la tabla, se abrirá un menú contextualen el que se podrá variar los atributos de todala tabla o de una celda en particular.
TABLAS ANIDADAS
A veces, interesa introducir una tabla dentrode una celda perteneciente a otra tabla para deesta manera distribuir los contenidos de unapágina de formas muy distintas.
COLOR
Para hacer más agradable la presentación dela página Web se pueden incluir colores, peroteniendo presente que los colores, de fondo ode texto, deben contribuir a facilitar la legibili-dad.
El uso indiscriminado de colores no beneficiala calidad de una página y salvo que sirvan paradiferenciar contenidos, las páginas que consti-tuyen una Web deberían tener un diseño uni-forme que transmita la sensación de identidad.
COLOR DE FONDO
La forma más sencilla de modificar el aspectode una página es variando el color del fondo.Para poner color en el fondo se puede accederdesde la Barra de Formato o desde el Menú For-mato.
Desde el menú Formato en la opción Fondoy colores de página también se puede incluiruna imagen que haga de tapiz rellenando todoel fondo de la página. Una imagen de fondoprevalecerá sobre el color de fondo.
COLOR DE TEXTO
Para resaltar una palabra con un color que ladiferencie del resto basta con seleccionarla y enla Barra de Formato, desde el botón correspon-diente, se elige el color que se quiera del table-ro de colores que se despliega.
ALUMNOSSECUNDARIA PRIMERO
CURSO A
CURSO B
26
24
25
27
30
32
24
29
SEGUNDO TERCERO CUARTO
ALUMNOSSECUNDARIA PRIMERO
PRIMER CICLO SEGUNDO CICLO
CURSO A
CURSO B
26
24
25
27
30
32
24
29
SEGUNDO TERCERO CUARTO
CC aa mm ii nn oo hh aa cc ii aa II TTAA CC AA
129
LÍNEAS
Para diferenciar o separar distintos bloquesde información se pueden incluir líneas de divi-sión. Para hacerlo basta con recurrir al MenúInsertar y elegir la opción Línea Horizontal. Laspropiedades de la línea se pueden modificarhaciendo doble clic sobre la misma y cambiandolos parámetros que ofrece el menú contextual.
También se pueden utilizar otros separado-res diseñados al efecto y que se pueden encon-trar en Internet.
IMÁGENES
Uno de los recursos más atractivos que ofre-ce el lenguaje HTML es que permite incluir imá-genes y sonidos que hacen más atractiva la pre-sentación. El principal inconveniente es que ladescarga de estos recursos es bastante lenta yralentiza el acceso a las páginas web.
Los formatos de imagen que básicamentesoportan los navegadores son los archivos GIF ylos JPG. El formato GIF es más adecuado paraimágenes tipo dibujo, con un máximo de 256colores y con predominio de los colores planos,el formato JPG ofrece mejores resultados conimágenes tipo fotografía, de 16 millones decolores y variación de tonos continua.
El formato GIF permite definir colores trans-parentes, con lo que las siluetas del dibujo que-darán recortadas sobre el fondo. También seutiliza este formato para crear pequeñas anima-ciones, GIFs animados, a partir de secuencias dedibujos.
Para insertar una imágen se puede hacer des-de la Barra de Composición o desde el MenúInsertar eligiendo la opción Imagen. Con res-pecto a las modificaciones del tamaño originalno tienen una especial utilidad: al agrandar laimagen se perderá calidad y al empequeñecerlano disminuirá el tamaño del fichero, que se
sigue descargando íntegro, sino que el navega-dor ajusta la imagen al tamaño especificado. Aveces es conveniente presentar un icono que sir-va de enlace para poder ver una imagen de grantamaño y de esa forma acelerar la descarga.
SONIDOS
El sonido es uno de los recursos menos utili-zados actualmente en la red. El enorme tamañode los ficheros, la cantidad de ancho de bandanecesario para transmitirlos en tiempo real y ladificultad de añadir buenos sonidos y buenasposibilidades sonoras son las causas principales.
Principalmente dos formatos de sonido sonsoportados por los navegadores: el formatomidi (archivos con extensión .mid) y el formatode onda (archivos con extensión .wav).
Los archivos midi tienen como característicaprincipal que ocupan muy poco espacio ya quese componen de referencias, que posteriormen-te son traducidas matemáticamente a sonidos.Este tipo de sonido se caracteriza por tener fija-das las muestras de instrumentos y su duración.Así, por ejemplo, el instrumento número 30corresponde al sonido de una guitarra distorsio-nada.
El principal inconveniente que presentan esque la calidad de la reproducción dependerá dela tarjeta de sonido con la que se escuchen, yaque si esta es de escasa calidad los timbres delos instrumentos se asemejaran poco al sonidoreal.
Los archivos wav tienen su principal inconve-niente en la gran cantidad de espacio que ocu-pan ya que se basan en la digitalización directade una fuente de sonido y por tanto no son muyadecuados para fragmentos musicales largos.Estos archivos no dependen demasiado de lacalidad de la tarjeta de sonido en que se repro-ducen y son muy adecuados para efectos espe-ciales y voz.
Consejos:
• Un sonido “impuesto” puede llegar a serirritante a las pocas audiciones.
CC aa mm ii nn oo hh aa cc ii aa II TTAA CC AA
130
• No obligues a nadie a escuchar los sonidos.Coloca un interruptor.
• ¿Es necesario el sonido en tu página web?Si es así, incluye en la página los archivosde sonido lo más pequeños posibles.
Para insertar un archivo de sonido desde lacarpeta de propiedades al Insertar Imagen, enla solapa de Enlaces hacer clic en el botón Selec-cionar archivo. Localizar un fichero de sonido yaceptar los cambios.
Este procedimiento de asociar un sonido auna imagen permite que al visitar la página webse tenga la opción de escuchar el sonido o no.
ENLACES
En una página escrita en HTML se puedepasar a otro punto de la misma página, a otrapágina perteneciente a la misma WEB, a cual-quier otra página que esté publicada en Inter-net o acceder a otros servicios como la transfe-rencia de ficheros o el correo electrónico.
ENLACES INTERNOS
Una forma bastante práctica de organizaruna página es incluir al principio de la mismaun “indice” formado por enlaces a los diferen-tes apartados y desde éstos un enlace quedevuelva al principio de la página para poderconsultar nuevamente el índice.
Antes de crear el enlace hay que señalar lospuntos a anclaje colocando el cursor en el lugarcorrespondiente del documento y desde elMenú Insertar en la opción Ancla, escribir elnombre que se le dará a este punto
Al seleccionar una palabra y hacer clic en laopción Ancla, aparece esta palabra como nom-bre por defecto.
Al principio del documento es convenientecrear un nuevo punto de anclaje.
Al seleccionar el cualquier apartado del índi-ce y pulsar el botón Enlace de la Barra de Com-posición aparece un menú que permitirá selec-cionar un anclaje de los creados. Esta operación
se repetirá con el resto de los apartados y concada uno de los enlaces al principio del índice.
ENLACES EXTERNOS
Para crear un enlace a otra página diferentedesde una palabra, icono o imagen basta conseleccionarla con el ratón y a continuación pin-char en el botón Enlace e introducir la direcciónde destino.
ENLACES DE CORREO
Es un tipo de enlace especial que se encargade lanzar el programa de correo incluyendocomo destinatario del mensaje la dirección quese haya puesto al crearlo.
Generalmente los elementos que soportan elenlace suelen ser un icono que haga referenciaal correo (sobre, pluma, buzón...) o la propiadirección de correo. En la creación del enlacehay que poner como destino mailto:tu_direc-ción_de correo, por ejemplo mailto:[email protected].
PUBLICACIÓN
Para la publicación de la página Web se pue-de usar el propio Compositor de Mozilla. Desdeel Menú Edición, seleccionar Configuración dela Publicación. Escribir un nombre para identifi-car el sitio. En la opción Lugar de publicación esel sitio donde se alojará la página Web. Nombrede usuario suele ser el login, pero estos datos aligual que la contraseña lo debe indicar el servi-dor de espacio Web. Se pueden definir tantossitios como espacios web se dispongan.
Desde el Menú Archivo en la opción Publicarcomo, aparece una ventana donde se indica el
CC aa mm ii nn oo hh aa cc ii aa II TTAA CC AA
131
título de la página, el nombre del archivo y elnombre del sitio definido previamente. Si en elordenador remoto existe un directorio para alo-jar la página Web hay que indicarlo en Direc-tory for web page:, por ejemplo public_html.Ésto también lo indica el servidor del espacioWeb.
Es recomendable dejar activas las opcionesde Incluir imágenes y otros archivos. En la sola-pa opciones se detallan los datos previamenteconfigurados.
Al hacer clic en Publicar, el programa se poneen comunicación con el ordenador remoto e ini-cia la transferencia de archivos.
A veces al intentar enviar las páginas daerror, existen otros programas en el entorno deLinEx para realizar la transferencia de ficheros
GFTP
Para iniciar la aplicación gFTP se abre elmenú Gnome, en la opción Aplicaciones selec-cionar Red y desde aquí gFTP.
Seguidamente aparece la ventana principalde la aplicación. En la parte suerior aparecen lasBarras de Menús que no hacen falta de entradapara configurar la conexión.
En la parte izquierda está el directorio pordefecto. En este lugar hay que seleccionar laubicación correcta de los archivos de la páginaWeb.En la ventana del ordenador local aparece-rá los ficheros y carpetas correspondientes
Enla parte de la derecha aparecerá el direc-torio del ordenador remoto y en su ventana losficheros alojados.
En la parte inferior aparecen las ventanasinformativas de acciones y comandos que se eje-cutan al establecer la comunicación con el ser-vidor de espacio Web.
Para realizar la conexión hay que configurarlos datos de conexión que suministra el servidordel espacio web.
En la ventana Servidor se escribe la direccióndel ordenador remoto.
Por ejemplo ftp.teleline.es.
En usuario se escribe el nombre de usuarioasignado por el Servidor, por ejemplo CURSOR-MI.
La contraseña es la asignada para acceder alordenador remoto, como seguridad aparecenasteriscos.
Una vez introducidos los datos seaccede a la conexión a través del botóncorrespondiente.
Una vez conectado a un sitio FTP, sepuede cargar y descargar archivos. En elprograma gFTP, para cargar un archivo,basta con seleccionarlo y hacer clic en la flechacorrespondiente.
También se puede descargar archi-vos del servidor seleccionando el archi-vo y haciendo clic en la flecha corres-pondiente.
Si una transferencia se corta, se puede rea-nudar desde el mismo punto en el que se inte-rrumpió.
CC aa mm ii nn oo hh aa cc ii aa II TTAA CC AA
132
DISTINTAS ESTRUCTURAS DE PÁGINAS WEB:
Estructura poco profunda.
Estructura confusa
Estructura
bien combinada
Estructura
demasiado
profunda
