Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Curso de HTML001

    Загружено:

    Chuy Hernandez
    15 просмотров29 страниц
    Tutorial básico de HTML

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOC, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Tutorial básico de HTML

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    15 просмотров29 страниц

    Curso de HTML001

    Загружено:

    Chuy Hernandez
    Tutorial básico de HTML

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 29

    Empezando

    Iniciaremos con esta prctica nuestro acercamiento al lenguaje HTML. Las explicaciones sern breves y abordarn los aspectos bsicos de forma que podamos avanzar con cierta agilidad. Encontrars una pgina dedicada a recursos para ampliar estos conocimientos bsicos. Comenzamos pues comentando que los documentos HTML no son ms que documentos de texto con una serie de etiquetas. stas le sirven al navegador para interpretar de que forma tiene que presentar el texto, las imgenes o los sonidos en la pantalla. Al tratarse de documentos de texto podemos afirmar que nos bastara con el Bloc de notas de Windows para crear nuestras pginas HTML. Aunque este procedimiento resultara bastante incmodo para su uso habitual, ya que nos obligara a conocer todas las etiquetas del HTML, puede ser interesante para que comprendamos la estructura de una pgina WEB y ser el primero que utilicemos.

    El formato de las etiquetas HTML


    Las etiquetas HTML se escriben encerradas entre ngulos. Normalmente se utilizan dos etiquetas: una de inicio y otra de final para indicar que ha terminado el efecto que queramos presentar. La nica diferencia entre ambas es que la de cierre lleva una barra inclinada "/" antes del cdigo.

    <etiqueta>texto que presentar el efecto</etiqueta> Por ejemplo:<B>texto</B> dar como efecto texto

    La estructura bsica de una pgina WEB


    Para que un navegador reconozca que lo que est viendo es una pgina WEB se utiliza la siguiente estructura:

    <HTML> (Etiqueta que indica que lo que viene a continuacin es un documento HTML) <HEAD>(Etiqueta de apertura de la cabecera). Aqu va la informacin sobre el ttulo de la pgina, el autor, palabras clave, etc. que no se presentarn en la ventana del navegador, salvo el ttulo que aparecera en la barra de ttulo de la parte superior

    </HEAD>(Etiqueta de cierre de la cabecera) <BODY>(Etiqueta de apertura del cuerpo) Aqu va el contenido de la pgina que ser lo que se presente en pantalla. </BODY>(Etiqueta de cierre del cuerpo) </HTML>(Etiqueta de cierre del documento)

    Antes de comenzar los ejercicios prcticos crea una carpeta con el nombre "Curso HTML" para poder almacenar en ella el resultado de tu trabajo.

    Prctica 1

    Abrir el Bloc de notas. Escribir las etiquetas necesarias para crear el documento HTML. Darle contenido al cuerpo escribiendo un rengln y pulsando la tecla INTRO para saltar al siguiente prrafo. Escribir otro rengln y pulsar dos veces la tecla INTRO. Escribir un tercer rengln y salvar el fichero en la carpeta Curso HTML con el nombre ej1.htm manteniendo el tipo como documento de texto. Cargar en el navegador el documento que acabamos de salvar y comprobar los resultados

    Vaya desastre!
    Supongo que coincidiremos en que lo que hemos visto al comprobar cmo haba quedado nuestra primera creacin no ha sido muy alentador. La explicacin del desaguisado es sencilla: en HTML hacen falta unas etiquetas especiales para indicar los saltos de lnea y prrafo y no las habamos escrito.

    <BR> es la etiqueta que sirve para indicarle al navegador que debe hacer un salto de lnea. <P> indica un salto de prrafo e introducir un doble salto de lnea. Fjate en que son etiquetas que no necesitan un cierre.

    Prctica 2

    Volvemos a abrir el Bloc de notas si lo habamos cerrado. Cargamos nuestra anterior creacin. (ej1.htm) Introducimos la etiqueta <BR> donde habamos pulsado una vez la tecla INTRO Ponemos <P> donde inicialmente habiamos pulsado dos veces la tecla INTRO. Guardamos el archivo como ej2.htm Pasamos al navegador y cargamos esta nueva pgina para comprobar el resultado.

    Algo ms sobre formatos y tamaos


    Por el momento stos sern los ltimos trabajos que realizaremos utilizando el Bloc de Notas. A partir de aqu empezaremos a utilizar editores grficos que, bsicamente, se encargan de escribir por nosotros las etiquetas necesarias, pero es de suponer que gracias a esta introduccin hayamos podido comprender cmo se escribe una pgina HTML. La importancia de asimilar la estructura bsica reside en que una de las mejores formas de aprender a crear pginas HTML es viendo pginas creadas por otros autores. Si tenemos claro el sistema utilizado podremos reconocer los elementos que nos parezcan interesantes e irlos incorporando a nuestras pginas.

    Las cabeceras
    Uno de los elementos de formato que nos resultar imprescindible ser la diferenciacin de tamaos de letra para poder introducir ttulos de epgrafes y organizar visualmente la informacin. Disponemos para esta tarea de seis formatos predeterminados de cabeceras. Para utilizarlos deberemos poner la etiqueta de apertura delante de la primera letra cuya apariencia deseemos modificar y cerrar tras la ltima para volver al texto normal. (Adems las etiquetas de cabecera introducen un salto de prrafo sin necesidad de indicarlo)

    Este cdigo...

    ...da como resultado

    <H1>Cabecera 1</H1> <H2>Cabecera 2</H2>

    Cabecera 1
    Cabecera 2

    <H3>Cabecera 3</H3> Cabecera 3 <H4>Cabecera 4</H4> Cabecera 4 <H5>Cabecera 5</H5> Cabecera 5 <H6>Cabecera 6</H6> Cabecera 6

    Enfatizacin
    El otro elemento del que disponemos para resaltar un fragmento de texto es la utilizacin de las tipografas en negrilla, itlicas y subrayadas. Su utilizacin se ajusta al convenio general de etiqueta de apertura y etiqueta de cierre limitando el texto al que se aplica el efecto.

    Este cdigo... ...da como resultado Esta <B>palabra</B> est en <B>negrilla</B> Esta palabra est en negrilla Esta <I>palabra</I> est en <I>itlica</I> Esta palabra est en itlica Esta <U>palabra</U> est <U>subrayada</U> Esta palabra est subrayada

    Justificacin
    La justificacin del texto por defecto se hace a la izquierda. Por el momento, mientras no se generalicen las nuevas especificaciones de la siguiente versin del lenguaje HTML no tenemos posibilidad de hacer una justificacin completa, por lo que el texto nos quedar siempre "en bandera", esto es sin alinear en los finales de rengln. Adems de la justificacin por defecto podemos tambin justificar el texto a partir del centro o a partir de la derecha. Para hacerlo deberemos poner al principio del prrafo que deseamos justificar la etiqueta de apertura y la de cierre en el final.

    <CENTER> y su correspondiente cierre </CENTER> marcan la justificacin centrada. <DIV ALIGN=right> y </DIV> delimitan un prrafo justificado a partir del margen derecho.

    Prctica 3

    Volvemos al Bloc de notas y abrimos el fichero ej2.htm Modificamos el contenido del cuerpo incorporando los siguientes elementos: o Dos cabeceras de diferente tamao. o Un prrafo con la justificacin por defecto, otro con justificacin centrada y otro con justificacin a la derecha. o Alguna palabra resaltada en negrita, en itlica o subrayada. Guardamos el documento como ej3.htm y pasamos al navegador para comprobar los resultados. (Si algo no hubiera quedado como habamos previsto volvemos al Bloc de notas para localizar el error, corregirlo y, una vez guardado el documento, volver a comprobarlo)

    Existe otra forma de dar formato al texto utilizando lo que se denomina texto preformateado. En este caso, el navegador s que interpretar los saltos de lnea que introduzcamos, pero esto tiene el peligro de que nuestro texto puede quedar corto o largo en funcin de la resolucin de pantalla de la persona que visite la pgina.

    Prctica 3-b

    Abre el primer trabajo que has realizado (ej1.htm) con el bloc de notas. Coloca al principio del texto la etiqueta <PRE> y al final la correspondiente etiqueta de cierre </PRE> Guarda el trabajo como ej3b.htm y comprueba lo que ha ocurrido vindolo en el navegador.

    Listas
    Avanzaremos ahora un paso ms en la panormica sobre los recursos para organizar y dar formato visual al texto. A partir de este momento utilizaremos un editor que nos permitir ir viendo en pantalla una aproximacin bastante exacta de lo que ser el resultado final de la pgina, concretamente el editor de Netscape Communicator. De todas maneras no est de ms que tengamos disponible el Bloc de notas por si queremos editar alguna etiqueta de forma directa.

    Las listas nos van a servir para ir organizando la informacin de acuerdo a alguno de los siguientes formatos:

    Listas ordenadas Los elementos se presentan numerados 1. Elemento n 1 2. Elemento n 2 3. ...

    Listas desordenadas Los elementos van precedidos por un "bolo" Elemento n 1 Elemento n 2

    ...

    Listas de definicin Presenta trminos y definiciones con diferente tabulacin Trmino n 1 Definicin del trmino 1 Trmino n 2 Definicin del trmino 2

    Veremos en primer lugar los dos primeros tipos, cuya nica diferencia estriba en el smbolo que precede a cada elemento. Adems, este tipo de listas se obtienen de forma directa con la simple pulsacin de un botn. Aunque podemos hacerlo de varias formas vamos a arrancar el editor a travs de la opcin de men "Communicator / Composer" (A partir de ahora utilizaremos la convencin de que la barra inclinada "/" da paso a una opcin dentro del submen que la precede, por lo que la indicacin anterior supone que tendremos que elegir la opcin Composer que se aparece al pulsar en el apartado Communicator del men).

    Poco a poco iremos familiarizndonos con el entorno del editor, as que, por el momento, nos basta con localizar los dos iconos que sirven para iniciar las listas ordenadas y desordenadas que identificaremos rpidamente puesto que representan fielmente el efecto final que buscamos.

    Junto a ellos aparecen otros dos iconos que nos van a permitir ir aumentando o disminuyendo los niveles dentro de la lista. La forma de introducir nuevos elementos en la lista, una vez que la hemos empezado consiste sencillamente en pulsar la tecla INTRO, con lo que se nos aade otro tem del mismo nivel que el precedente.(Si queremos variar el nivel, hacia la derecha o hacia la izquierda pulsaremos el icono correspondiente) Para finalizar la introduccin de elementos en la lista volveremos a pulsar el botn

    con el que la iniciamos.

    Prctica 4

    Abrimos una nueva ventana del editor utilizando la opcin Archivo / Nuevo / Pgina en blanco Creamos una lista ordenada que este formada por dos elementos del primer nivel, de uno de los cuales colgarn dos elementos de segundo nivel. (Llamamos primer nivel al que est ms prximo al margen izquierdo y 2, 3 o sucesivos a los que se encuentran ms alejados, en la 2, 3 y sucesivas tabulaciones) Cerramos la lista y escribimos un rengln de texto normal. Guardamos el trabajo pulsando en el icono que tiene el disquette con el nombre ej4.htm Pulsamos en el icono con el timn de Navigator para ver el resultado.

    Prctica 4-b

    Volvemos a la ventana del editor en la que tenamos el documento que acabamos de crear y seleccionamos todo el contenido con el ratn. Borramos para dejar la pgina en blanco. Creamos ahora una lista desordenada con caractersticas semejantes a la anterior. Guardamos el trabajo como ej4b.htm, para lo que usaremos la opcin y Archivo / Guardar como, y comprobamos los resultados.

    Las listas de definiciones no tienen un icono especfico para su creacin, aunque podemos emplear un truco para no tener que recurrir a escribir las etiquetas a mano. Esta pequea artimaa pasa por escribir un texto normal y seleccionar en la lista desplegable que est en el extremo izquierdo de la barra de formato la opcin Ttulo desc. (Ttulo de descripcin) para el trmino que deseamos definir y Texto desc. (Texto de descripcin) para la definicin del mismo.

    Prctica 4-c

    Crear un documento que contenga tres trminos con sus correspondientes definiciones utilizando el procedimiento descrito. Resaltar utilizando la negrilla cada uno de los trminos (Sealaremos el texto arrastrando el ratn y pulsaremos el icono que se presenta en la barra de formato con una letra A en negrilla) Si nos parece que los prrafos quedan demasiado ajustados al margen izquierdo podemos utilizar los botones de salto de nivel para modificar su posicin. Guardar el documento como ej4c.htm y comprobar el resultado.

    Profundizando en las listas


    Habremos comprobado que en las listas desordenadas iba variendo la vieta que preceda a cada uno de los niveles. Sin embargo, en las desordenadas vemos que los diferentes niveles se van alineando con un mayor grado de tabulacin a la derecha, pero no cambian el smbolo que los precede. Es posible que nos resulte til para presentar la informacin con mayor claridad que dicho smbolo se modifique en cada nivel. Vamos a verlo con un ejemplo prctico.

    Prctica 5

    Abrimos una nueva ventana del editor utilizando la opcin Archivo / Nuevo / Pgina en blanco Iniciamos la creacin de una Lista ordenada en la que incluiremos tres tems del primer nivel. En dos de ellos aadiremos dos tems de segundo nivel y en uno de estos aadiremos un tem de tercer nivel. Pulsamos el icono con el timn que simboliza al navegador y cuando nos informe de que debemos guardar el archivo aceptamos y le damos el nombre ej5.htm Comprobamos en el navegador cmo todos los niveles llevan el mismo tipo de numeracin. Volvemos a la ventana del editor y pulsamos con el botn derecho sobre uno de los prrafos del segundo nivel (vale cualquiera). Elegimos Propiedades del prrafo/lista y seleccionamos en el campo Estilo de nmero las letras maysculas.(Comprobamos cules son los niveles que se han visto afectados por el cambio) Modificamos el tercer nivel eligiendo letras minsculas y salvamos el

    trabajo como ej5b.htm para poder verlo en el navegador. Puedes realizar un trabajo similar con una lista desordenada y salvarlo como ej5c.htm

    Es posible que la prctica anterior te haya suscitado algunas dudas acerca del comportamiento de los cambios de numeracin cuando las condiciones de la lista se hacen algo ms complejas... nimo, dale rienda a tu espritu de investigacin! Vamos a ver ahora otra posibilidad interesante: combinar los diferentes tipos de listas entre s. No es muy habitual mezclar la lista de definiciones con los otros tipos, pero s puede resultar til anidar listas desordenadas dentro de otras ordenadas o viceversa. Lo veremos con un ejercicio semejante al anterior.

    Prctica 6

    Creamos un documento nuevo y construimos una lista ordenada suficientemente compleja. Elegimos el nivel que deseemos modificar y pulsamos el botn de las listas desordenadas. Guardamos el documento como ej6.htm y comprobamos el efecto obtenido. Podemos complicar algo ms la situacin combinando el cambio de tipo de lista y el de tipo de numeracin...A estas alturas no te resultar dificil prever el resultado final de las acciones que vayas realizando.

    Tablas
    El lenguaje HTML atraviesa en el momento actual una fase decisiva: su evolucin hacia una definicin que permita escribir pginas con mayor facilidad y mejores resultados se ve amenazada por la pugna entre Miscrosoft y Netscape para imponer sus criterios acerca de las etiquetas que se utilizarn. Este es el motivo por el que, aunque existan propuestas para la utilizacin del llamado HTML dinmico que permiten dar forma a la pgina de manera mucho ms flexible, tengamos que recurrir a trucos algo ms complejos.

    Es posible que a estas alturas te hayas dado cuenta de que no resulta fcil fijar tabulaciones o encolumnar el texto de una pgina. Para llevar a cabo estas tareas vamos a tener que recurrir a las tablas. Ahora bien, antes de pasar a utilizar las tablas como recurso para realizar otras tareas nos detendremos en su utilidad ms inmediata: presentar informacin que se preste a organizarse en un formato de doble entrada.

    Partiendo de la forma ms simple, la de una tabla con una fila y una columna, a la que podramos considerar como un marco alrededor del texto, podemos ir complicando la forma... ...mediante la adicin de filas y columnas...

    ...o la fusin de las celdas que la constituyen segn lo requiera la informacin presentada.

    Para empezar crearemos una tabla con unos datos sobre el nmero de alumnos matriculados en dos hipotticos grupos de cada uno de los niveles de Educacin Secundaria Obligatoria.

    Prctica 7

    Creamos en el editor un documento nuevo e insertamos en el una tabla con 3 filas y 5 columnas. (Para hacerlo pulsaremos en el icono que representa una tabla). Dejamos, de momento la seccin de atributos tal como aparece y en el apartado Alineacin de la tabla elegimos centro y pulsamos en el botn aceptar. Como an no tiene datos nuestra flamante tabla presentar un aspecto bastante "esqueltico". Vamos ahora rellenando las celdas con la informacin pertinente. Guardamos el trabajo como ej7.htm y lo visualizamos en el navegador.

    Sobre esta tabla base vamos a ir haciendo aadidos para completarla. Iremos comprobando a travs de los siguientes ejercicios que el editor de Netscape no se caracteriza por ser muy gil, y ello nos lleva a formular un consejo esencial para trabajar rpidamente con tablas: Si nuestro objetivo es lograr una tabla compleja debemos partir de un esquema realizado en papel y, una vez creada la estructura, rellenar los datos. Vamos aadir una fila por encima de las actuales para agrupar los datos en Primer y segundo Ciclo.

    Prctica 7-b

    Volvemos al editor y nos situamos en una de las celdas de la primera fila. Pulsamos con el botn derecho y elegimos Insertar / Fila Comprobamos que, desgraciadamente, la fila se ha insertado a continuacin, con lo que nos vemos obligados a mover los datos a su lugar correcto. (Dado que no son muy extensos es preferible volver a teclearlos en vez de estar cortando y pegando). Nos situamos ahora en la celda que se encuentra encima de la que contiene la referencia al curso 1 y, pulsando con el botn derecho, seleccionamos Propiedades de la tabla / pestaa Celda. En las casillas que aparecen tras la alineacin horizontal y vertical pondremos que la celda debe abarcar 1 fila y 2 columnas. Tras repetir la operacin con la celda situada encima de la referencia a 3 comprobamos que nos han aparecido un par de celdas vacas a la derecha. A partir de este momento, cada vez que aparezcan celdas vacas despus de una modificacin procederemos a borrarlas (Botn derecho / Eliminar / Celda) Rellenamos las celdas superiores con el texto Primer Ciclo y Segundo Ciclo respectivamente. Guardamos el trabajo como ej7b.htm

    Una vez que hemos comprobado las dificultades que puede acarrear la modificacin de tablas con el editor de Netscape podra ser interesante conocer el procedimiento para crear tablas tecleando directamente el cdigo. Aunque inicialmente pueda parecernos un procedimiento antiptico comprobaremos que resulta mucho ms rpido siempre que tengamos nuestro boceto en papel. Para lanzarnos a la creacin directa tenemos que conocer las etiquetas que sirven para definir las tablas.

    <TABLE> y </TABLE>

    Son las etiquetas de apertura y cierre de la tabla. Entre ellas irn las etiquetas y los contenidos de cada una de las filas y celdas Son las etiquetas que indican el principio y final de una fila. Entre ellas habr que incluir las etiquetas y contenidos de las celdas que la forman. Con ellas delimitamos cada una de las celdas. Entre ambas incluiremos el contenido correspondiente

    <TR> y </TR>

    <TD> y </TD>

    Adems de estas etiquetas hay que conocer dos atributos que sirven para hacer que una celda ocupe ms de una fila o una columna. Los atributos, de los que no hemos hablado hasta ahora, aunque los hemos utilizado sin darnos cuenta, son modificadores de las etiquetas que se escriben a continuacin del cdigo y antes de poner el ngulo de cierre de la misma.

    BORDER=n

    Se aplica en la etiqueta de apertura de la tabla para indicar el grosor de los bordes que delimitan las celdas. Cuando estamos creando la estructura de la tabla es interesante ponerlo para que podamos ver la tabla al pasar al editor grfico, aunque finalmente decidamos eliminarlo despus de introducir los contenidos. As pues deberamos abrir la tabla con <TABLE BORDER=1>

    Sirve para indicar el nmero de filas que ocupar una celda. Por ejemplo: <TD ROWSPAN=2></TD> nos servira para crear una ROWSPAN=n celda que visualmente sera el resultado de unir verticalmente dos celdas de la misma columna COLSPAN=n Lo utilizamos para unir celdas horizontalmente. As <TD COLSPAN=3></TD> producira una celda que se extendera horizontalmente a lo largo de 3 columnas.

    Una vez conocidas las tres etiquetas y sus modificadores es conveniente establecer un mtodo para que el trabajo resulte gil.

    Dibujamos un boceto de la estructura de la tabla. Creamos un archivo con las etiquetas bsicas de un documento HTML. (Puede valernos una plantilla vaca que hayamos creado previamente) Escribimos las etiquetas de apertura y cierre de la tabla (no olvidando poner BORDER=1 en la apertura) separndolas con varias pulsaciones de la tecla INTRO para que nos resulte cmoda la insercin de las etiquetas intermedias. Escribimos tantas etiquetas de apertura y cierre de filas como vayamos a necesitar. (Dejamos espacios intermedios para insertar las celdas).

    Introducimos las etiquetas de celdas en cada fila con sus modificadores correspondientes. La clave del xito consiste en tener en cuenta que todas las filas deben tener el mismo nmero de celdas, por lo que tenemos que contar los atributos: una fila en la que slo tenemos dos etiquetas de celda, pero cada una se extiende por dos columnas y adems hay una celda de filas anteriores que se ha extendido verticalmente hasta sta tiene en realidad 5 celdas (1+2+2). Para facilitar la visualizacin en Netscape debemos introducir en cada celda que creemos los caracteres &nbsp; que corresponden al cdigo que el navegador interpreta como un espacio. La forma ms cmoda es escribirlos una vez cuando hemos creado la tabla, copiarlos e irlos pegando en el interior de cada una de las celdas. (Ms adelante veremos el truco de la imagen de 1 pixel) Para llevar el control de las celdas creadas puede ayudarnos el irlas tachando sobre el boceto a medida que las vamos haciendo, considerando siempre la retcula formada por el nmero total de filas y columnas. Cuando est creada la estructura de la tabla guardamos el archivo con extensin .htm y lo abrimos en el editor de Netscape para introducir los contenidos de las celdas y modificar otros atributos, tales como la posicin, grosor de bordes, etc, de forma ms cmoda.

    Prctica 7-c

    Creamos un documento HTML nuevo, utilizando el Bloc de notas o un editor que nos permita introducir directamente el cdigo. Mediante la incorporacin de etiquetas creamos una tabla como la siguiente:

    Salvamos el documento como ej7c.htm y lo cargamos en el navegador para rellenar las celdas y comprobar el resultado final. (Dado que lo importante es la estructura, los datos que introduzcamos en cada celda sern aleatorios)

    Algo ms sobre tablas

    Existen bastantes atributos de las etiquetas que se utilizan para crear las tablas, pero una vez que sabemos crear la estructura bsica es preferible que vayamos modificndolos mediante un editor grfico en vez de introducirlos directamente por teclado. Las opciones que el editor de Netscape aplica por defecto suelen ser adecuadas para una finalidad general, pero en la siguiente prctica iremos comprobando como se modifica el resultado final dependiendo de las variaciones que se hagan.

    Prctica 8

    En el editor de Netscape cargamos, si ya no lo tenamos en pantalla, el documento ej7c.htm Recordemos que para modificar las propiedades de la tabla basta con que pulsemos con el botn derecho estando en cualquier punto de la misma, lo cual nos desplegar un men en el que podremos variar los atributos de toda la tabla, de una fila o de una celda en particular. Experimentamos libremente modificando parmetros de uno en uno y comprobando cuales son los efectos que se producen. Si el efecto no nos agrada restauramos el valor original antes de proceder a la siguiente modificacin. Cuando encontremos algn resultado que nos parezca interesante escribimos bajo la tabla el parmetro que hemos modificado y los valores que hemos aplicado, de forma que tengamos una descripcin de lo que hemos hecho para lograr el resultado final. Guardamos el trabajo con el nombre ej8.htm

    Anidar tablas
    En ocasiones, especialmente cuando utilizamos las tablas como recurso de formato para distribuir la informacin dentro de la pgina, nos interesa introducir una tabla dentro de una celda pertenciente a una tabla creada anteriormente. Esto nos permitir, por ejemplo, hacer que convivan tablas con borde junto a tablas sin borde. Supongamos, por ejemplo, que estamos diseando una pgina para introducir en ella los contenidos de una revista escolar. En la siguiente imagen podemos contemplar una posible estructura en la que vamos anidando sucesivas tablas. Cada color corresponde a una tabla que incluye en su interior a las que son de otro color diferente.

    Como ya conocemos los cdigos bsicos que constituyen una tabla entenderemos rpidamente la estructura general. Para facilitar la interpretacin se han recogido las etiquetas correspondientes a cada tabla con el mismo color con el que se presentan en el grfico y se han ido sangrando las etiquetas correspondientes a cada tabla, de forma que se pueda ver con facilidad en qu celda se encuentra insertada cada una de ellas. Introduciendo el texto correspondiente a cada zona de la hipottica pantalla obtendramos una presentacin coincidente con el ejemplo grfico.
    <TABLE BORDER=0> <TR> <TD> Enlaces a secciones </TD> <TD> <TABLE BORDER=0> <TR> <TD> Logotipo </TD> </TR> </TABLE> <TABLE BORDER=0> <TR> <TD> Foto </TD> <TD> Texto foto </TD> </TR> </TABLE> <TABLE BORDER=0> <TR> <TD> Noticia 1 </TD> <TD> <TABLE BORDER=0> <TR> <TD> Noticia en columnas </TD> <TD> Columna 2 </TD> <TD> Columna 3 </TD> </TR> </TABLE> </TD> </TR>

    </TABLE> </TD> </TR> </TABLE>

    Prctica 8-b

    Nos atrevemos a intentar reproducir la estructura que se ha puesto como ejemplo? Como en este caso cada tabla individual es sencilla podemos crearlas directamente con e aunque si las queremos hacer con borde 0 es preferible que dejemos esta modificacin pa tengamos todo el trabajo hecho, de forma que mientras tanto tengamos una visin clara d estamos en cada momento. Cuando hayamos finalizado guardamos el documento como ej8b.htm

    Algunos elementos de diseo

    Hasta el momento hemos trabajado con pginas en blanco. Sin embargo, es extrao encontrar p asemejen a una hoja de papel; lo habitual es que se incluyan colores que hagan ms agradable maneras, el uso indiscriminado de colores e imgenes no beneficia a la calidad de una pgina, p ms respetar unas sencillas reglas:

    Los colores, de fondo o de texto, se utilizan con el objetivo de contribuir a la legibilidad d Salvo que sirvan para diferenciar contenidos las pginas que constituyen una sede WEB diseo uniforme que transmita al visitante la sensacin de que se encuentra en un lugar propias. Los archivos de imgenes ocupan espacio...mucho espacio. Transmitirlos lleva tiempo...m habr que minimizar en lo posible el tamao de las imgenes y utilizarlas cuando sean s meramente como elementos decorativos. Si utilizamos imgenes para enlazar unas pginas con otras hagmoslo siempre con las a la "imagen de marca" y aceleraremos la navegacin puesto que slo se descargarn la

    Color de fondo

    La forma ms elemental de modificar el aspecto de una pgina es variando el color del fondo. C Netscape no facilita demasiado esa tarea, ya que aunque incluye unas combinaciones predeterm recurrir a teclear el cdigo para conseguir algn color personalizado.

    Tendremos pues que recurrir, cuando creemos un archivo nuevo, al men Insertar / Etiqueta H fondo es un atributo del cuerpo de la pgina. Teclearemos <BODY BGCOLOR=xxxxxx>, donde combinacin de caracteres cuyo significado explicamos a continuacin.

    Los caracteres xxxxxx representan tres pares de nmeros que indican la cantidad de Rojo, Verd color. Para complicarlo un poco ms no son exactamente nmeros, sino alfanmeros ya que rep hexadecimal que puede ir desde 00 hasta FF que correspondera al 255 en base diez. (Eso hac 256 valores de rojo, otros tantos de verde e igual de azul consigamos un total de ms de 16 mill

    Veamos algunos ejemplos.

    Valores Color resultante Valores Color resultante Valores Color resultan FF0000 00FF00 0000FF FFFF00 FF00FF 00FFFF 25A7BB ACB312 6047B6

    Prctica 9

    Creamos una nueva pgina en el editor y, aplicando el procedimiento descrito le adjudica Visualizamos el efecto y vamos modificando la etiqueta hasta encontrar uno que no dificu Guardamos el trabajo como ej9.htm

    Junto a la posibilidad de modificar el color de fondo de la pgina encontramos la de incluir un gr rellenando todo el fondo de la pgina. En las pginas de este curso se ha utilizado este recurso: del margen son un archivo grfico que se repite a lo largo de la pgina.

    En esta ocasin el editor de Netscape se comporta de una forma ms amigable, permitindonos Formato / Colores y propiedades de la pgina elijamos un archivo grfico que se utilice como

    Existen multitud de pginas en la red que ofrecen la posibilidad de obtener este tipo de imgene "bajarlas" a nuestro ordenador y copiarlas en el directorio de trabajo para poder incluirlas en nue podran guardar en cualquier directorio resulta ms cmodo hacerlo en el directorio en el que es pginas, para no tener que irlas buscando por todo el disco duro). Puedes probar a bajar alguna imagen para el prximo ejercicio desde ColorVivo

    Prctica 9-b

    Creamos una nueva pgina en el editor. Bajamos un grfico de la pgina mencionada o bien el archivo back.gif que se utiliza en e esto ltimo basta con que pulses con el botn derecho en la superficie de la pgina y elija Visualizamos el efecto y guardamos el trabajo como ej9b.htm

    Cuando utilicemos fondos laterales habr que tener en cuenta que el texto que escribamos se a

    tanto se superpondr al fondo con lo que es posible que afecte a la legibilidad. Para solucionar e recurrir al truco de la imagen de 1 pixel.

    En muchas ocasiones la imaginacin es el mejor aliado para llevar a cabo tareas aparentemente del truco mencionado que consiste en lo siguiente:

    Con cualquier programa de tratamiento de imgenes se crea un dibujo de tamao 1x1 px formato Gif con fondo transparente. Conseguimos de esta forma una imagen que resultar pgina WEB y cuya extensin ser mnima. Sin embargo ocupar un espacio en la pgin Aunque la imagen en s ocupe nicamente un pixel podemos indicarle atributos de ancho navegador le reserve el espacio que necesitemos dejar "en blanco". Creamos una estructura de tabla de dos columnas sin borde para definir la pgina y pone izquierda la imagen con la anchura suficiente para que el texto no se superponga al borde

    Este procedimiento se puede utilizar tambin para introducir un tabulador a principio de lnea o c sustitucin del caracter de espacio (&nbsp;).

    Prctica 9-c

    Abrimos, si lo habamos cerrado, el documento ej9b.htm que acabamos de crear en el eje Introducimos un texto que ocupe un par de renglones y pasamos a verlo en el navegador que se ha producido. Volvemos al editor. Nos situamos al principio del prrafo y creamos una tabla de una fila borde=1. (El texto que tenamos escrito se desplazar hacia abajo). Para no tener que crear el archivo de 1 pixel ahora puedes obtenerlo pulsando con el bot y eligiendo Guardar imagen como para almacenarlo en tu carpeta de trabajo.

    Nos situamos en la celda de la izquierda y buscamos el icono para insertar imgenes. (E la lnea horizontal)

    Tras pulsar el botn seleccionamos el archivo 1pixel.gif y en el apartado dimensiones le p Anchura=75 (Recordemos que originalmente ocupa 1x1 y es transparente, con lo que ser no aplicamos esta modificacin del tamao). Ahora pasamos a la celda de la derecha y pulsamos con el botn derecho. Elegimos Pro Celda / Anchura de la celda=100 % de la tabla. Luego pasamos a la pestaa Tabla y po Marcamos el texto que habamos escrito inicialmente y lo cortamos pinchando en el bot la celda de la derecha y lo pegamos. Pulsamos INTRO y aadimos un par de renglones m Guardamos el archivo como ej9c.htm y pasamos al navegador para ver cmo queda todo

    Dando color al texto

    Si necesitamos resaltar alguna palabra de forma especial recurriremos al men desplegable que tamao de letra y el indicador de negrita. Para ello habremos seleccionado previamente el texto cambiarle el color y tras pinchar en la flechita que despliega el tablero de colores elegiremos el q adecuado.

    Las pginas "arco iris" pueden resultar aparentemente muy impactantes, pero no suelen denota elaborado. Utiliza los colores con mesura y siempre como recurso para enfatizar una informaci especial relevancia.

    Lneas de separacin

    La separacin de bloques de informacin puede verse favorecida por la inclusin de lineas de d con recurrir al botn al efecto.

    La configuracin de lneas horizontales que el editor de Netscape aplica por defecto incluye que a lo largo del 100% de la pgina o de la celda si estamos en una tabla. Sin embargo, suele prod agradable que reduzcamos la anchura. Tambin puede ser interesante modificar la alineacin q al centro. Para realizar estas operaciones pulsaremos con el botn derecho sobre la lnea y eleg la lnea horizontal.

    Adems de utilizar la lnea que ofrece el programa podemos usar tambin como separadores gr (en estas pginas se utilizan dos: barra14.gif y barra14d.gif).

    Prctica 9-d

    Abre un nuevo documento en el navegador y escribe en l varias bloques de texto que se separacin. Introduce entre el 1er y el 2 bloque una lnea horizontal alineada a la derecha y con una a ventana. Entre el 2 y el 3er bloque inserta como separador el archivo barra14.gif (Para obtenerlo p navegador, pulsa con el botn derecho sobre el grfico y elige Guardar imagen como)

    Una vez que hayas hecho las modificaciones guarda el trabajo como ej9d.htm y comprue

    Enlaces
    Las siglas HTML corresponden a Hyper Text Mark-up Language, esto es, Lenguaje de marcas de hipertexto. Hasta ahora hemos ido describiendo y

    practicando sobre los aspectos referentes a la "M", las marcas o etiquetas que nos permiten definir el aspecto de una pgina WEB, pero lo verdaderamente importante es el aspecto hipertextual. Podramos decir que un hipertexto es aquel documento que presenta una estructura arborescente, con relaciones mltiples entre sus contenidos, que posibilitan la consulta no lineal de la informacin. (Seguro que encontrars definiciones ms acertadas, pero sta puede valernos para el propsito de este curso). As pues, desde una pgina escrita en HTML podremos saltar a otro punto de la misma pgina, a otra pgina perteneciente a la misma sede WEB o a cualquier otra pgina que est publicada en Internet o acceder a servicios tales como la transferencia de ficheros o el correo electrnico. Para que esto ocurra deberemos haber definido en nuestra pgina las palabras o imgenes que servirn como enlaces para dar acceso a dichos recursos.

    Enlaces externos
    Para crear un enlace a otra pgina diferente elegiremos una palabra, icono o imagen y la seleccionaremos con el ratn. A continuacin pincharemos en el icono que presenta unos eslabones e introduciremos la direccin de destino.

    Prctica 10

    Crea un nuevo documento e introduce un texto en el que menciones el servidor del PNTIC. o Si dispones de conexin a Internet elige alguna palabra del texto que te parezca adecuada como indicativo del enlace, pulsa el botn para crear el enlace y escribe la direccin http://www.pntic.mec.es como destino. o Si no dispones de conexin a Internet o prefieres hacer pruebas en modo local elige una palabra y cuando vayas a establecer el enlace pincha en Examinar archivo y elige alguno de los trabajos que has guardado previamente. Pasa al navegador guardando el trabajo como ej10.htm y comprueba que tu enlace funciona correctamente.

    Prctica 10-b

    Dirgete a ColorVivo para obtener algn icono o utiliza alguno de los que aparecen en estas pginas. Abre el documento ej10.htm, pulsa el botn destinado a incluir imgenes y selecciona un icono. Pulsa con el botn derecho sobre la imagen que acabas de insertar y elige la pestaa Enlace de la opcin Propiedades de la imagen. A partir de aqu los pasos son idnticos al ejercicio anterior. Guarda el trabajo como ej10b.htm y comprueba el funcionamiento del nuevo enlace.

    Enlaces internos
    Una forma bastante efectiva de organizar una pgina con abundante informacin textual es incluir al principio de la misma un "indice" formado por enlaces a los diferentes apartados de forma que el visitante no tenga que ir deplazando manualmente la pgina para buscarlos. El complemento lgico de esta estructura es que, al final de cada epgrafe, encontremos un enlace que nos devuelva al principio de la pgina para poder consultar nuevamente el ndice.

    Prctica 10-c

    Tienes disponible un texto para facilitarte la tarea. Cuando aparezca en tu pantalla tendrs que seleccionarlo con el ratn y pulsar en el men Edicin / Copiar . Cuando lo hayas hecho pulsa la flecha de regreso para volver a esta pgina. Ahora puedes cargar el texto Crea un documento nuevo en blanco y con Edicin / Pegar inserta el texto que acabas de copiar. Fjate en los apartados que constituyen el ndice. Localiza el principio de los epgrafes correspondientes y pulsa el botn con forma de diana para darles un nombre a cada uno de ellos. Vuelve al principio del documento y crea un nuevo destino al que llamaremos inicio. Selecciona el primer apartado del ndice y pulsa el botn de crear enlaces. Observars que en la parte inferior de la ventana aparecen los nombres de los destinos que acabas de definir. Elige el adecuado y vuelve a repetir la operacin con el resto de los apartados del ndice. Desplzate al final del primer apartado y escribe el texto Volver al ndice. Crea un enlace que te lleve al destino que habamos llamado inicio. Haz lo mismo en los siguientes apartados (puedes optar por copiar la vuelta del primer epgrafe e irla pegando en el resto) Guarda el trabajo como ej10c.htm y comprueba como funcionan los

    enlaces.

    Enlaces de correo
    Si Internet es en esencia un medio de comunicacin no est de ms que facilitemos a los visitantes una forma rpida de ponerse en contacto con nosotros. Para ello se utiliza un tipo de enlace especial que se encarga de arrancar el programa de correo que el visitante utilice incluyendo como destinatario del mensaje la direccin que hayamos puesto al crear el enlace. Los elementos que soportan el enlace suelen ser un icono que haga referencia al correo (sobre, pluma, buzn...) y la propia direccin de correo. La presentacin en pantalla de la direccin de correo electrnico se apoya en que as se facilita al usuario la copia directa de la misma.

    Prctica 10-d

    Baja a tu disco el siguiente icono con el mtodo que ya conoces de guardar la imagen. Crea un documento nuevo e inserta en el la imagen que acabas de capturar. Escribe a su lado tu propia direccin de correo o bien una direccin inventada, como mitutor@platea.pntic.mec.es Pulsa en la imagen y crea un enlace poniendo como destino mailto:mitutor@platea.pntic.mec.es o mailto:tu_direccin_de correo Guarda el documento como ej10d.htm y pasa al navegador para comprobar cmo ambos enlaces activan la aplicacin de correo.

    Multimedia
    Uno de los recursos ms atractivos que ofrece el HTML es que permite incluir elementos grficos y sonoros que enriquecen la informacin. Ahora bien, tanto unos como otros suelen emplear bastante tiempo en descargarse completamente, por lo que habr que manejarlos con prudencia y recurrir a las tcnicas necesarias para minimizar su tamao.

    Imgenes
    A lo largo de las pginas precedentes han ido apareciendo referencias a la inclusin de imgenes en las pginas HTML. De hecho podemos dar por

    sabido el procedimiento bsico para insertar una imagen. Veremos pues el tipo de imgenes que podemos utilizar y algun truquillo para acelerar la carga de las pginas. Los formatos que actualmente soportan los navegadores son los archivos GIF y los JPG. Una descripcin pormenorizada de sus propiedades y la forma de trabajar con ellos para obtener los mejores resultados seran materia de un curso especfico, por lo que nos limitaremos a decir que, mientras que el formato GIF es adecuado para imgenes con un mximo de 256 colores y con predominio de los colores planos, el formato JPG ofrece mejores resultados con imgenes de 16 millones de colores y variacin tonal continua. Una caracterstica aadida del formato GIF es que permite definir colores transparentes, con lo que las siluetas del dibujo quedarn recortadas sobre el fondo. Tambin se utiliza para crear pequeas animaciones, aunque hay que sealar que stas pueden llegar a resultar bastante molestas.

    Prctica 11

    Salva en tu disco las tres imgenes siguientes con el procedimiento que ya conoces. Crea un documento nuevo y construye una tabla de una fila y tres columnas. Incluye en cada celda una de las imgenes fijndote en cual pones las imgenes gif y en cual est la jpg. Pasa al navegador guardando el trabajo como ej11.htm Comprueba la diferencia en la calidad de las dos fotos segn el formato. Vuelve al editor y modifica el tamao de las fotos reduciendo el ancho y el alto a la mitad en una de ellas y pasando al doble en la otra. Tambin puedes modificar en una de ellas el espacio a izquierda y derecha poniendo, por ejemplo 50 pixels. Pasa al navegador para ver el efecto. Vuelve al editor y escribe un texto junto a una de la imgenes. Experimenta con diferentes alineaciones del texto con respecto a ella. Salva el trabajo con el mismo nombre.

    Es importante que las imgenes que incluyamos en nuestras pginas lleven el atributo de tamao (Netscape lo hace de forma automtica), ya que de esta forma el navegador sabr el espacio que debe adjudicarle a la imagen y podr ir cargando el resto del texto. Si la imagen no llevara los atributos de ancho y

    alto la carga del resto del documento se detendra hasta que la imagen se hubiera recibido completamente. Con respecto a las modificaciones del tamao original no tienen una especial utilidad: si agrandamos la imagen perdemos calidad y si la empequeecemos no disminuimos el tamao del fichero, que se sigue descargando ntegro, sino que le indicamos al navegador que ajuste la imagen al tamao especificado. Si queremos presentar un icono que sirva de enlace para poder ver una imagen de gran tamao es preferible que editemos la imagen original y construyamos una versin reducida de la misma, ya que de esa forma s que modificamos el espacio que ocupa y aceleramos la descarga.

    El sonido
    Tambin disponemos de dos formatos de sonido directamente legibles por los navegadores: el formato midi (archivos con extensin .mid) y el formato de onda (archivos con extensin .wav). Los archivos midi estn basados en partituras en las que se indica el tono y duracin de cada una de las notas, as como el instrumento que interpreta cada pista. Su caracterstica principal es el escaso espacio que ocupan en comparacin con la informacin que incluyen. Resultan adecuados, pues, para incorporar pasajes musicales. Dado que los archivos midi se basan en partituras tienen la ventaja de poder crearse y modificarse con facilidad si se tienen nociones de msica. Presentan, en cambio, el inconveniente de que la calidad de la reproduccin depender de la tarjeta de sonido con la que se escuchen, ya que si esta es de escasa calidad los timbres de los instrumentos se asemejaran poco al sonido real. En los archivos de formato wav invertimos los trminos: son muy extensos porque se basan en la digitalizacin directa de una fuente de sonido. Adems, no dependen demasiado de la calidad de la tarjeta de sonido en que se reproducen y no resultan adecuados para fragmentos musicales largos, sino para efectos especiales y voz. (Siempre habr que procurar utilizar fragmentos breves debido a su gran extensin). Sea cual sea el formato que utilicemos el factor principal a tener en cuenta ser la extensin de los archivos. Independientemente de que el equipo con el que elaboremos las pginas de la revista sea muy potente, nunca podemos saber con que equipo y, sobre todo, con qu tipo de modem accedern a nuestra pgina los futuros visitantes y... una pgina que tarda mucho en cargarse no suele incorporarse a la libreta de marcadores y es difcil que vuelva a ser visitada.

    Prctica 12

    Captura la siguiente imagen Pulsa con el botn derecho en el enlace para guardar el sonido Crea un nuevo documento e incluye la imagen recin capturada. Pulsa con el botn derecho sobre la imagen y crea un enlace al archivo primaver.mid que has guardado Salva el trabajo como ej12.htm y comprueba lo que ocurre al pulsar sobre el icono.

    Con el procedimiento que acabas de realizar has creado la forma ms sencilla de que un usuario pueda escuchar un sonido al visitar la pgina. Adems, el visitante tendr la opcin de reproducir el sonido o no hacerlo segn pulse o no en el enlace. Cabe tambin la posibilidad de que el sonido se cargue junto con la pgina y empiece a reproducirse de forma automtica. En este caso el procedimiento es algo ms complejo y adems se aade un problema especial al no existir compatibilidad entre las etiquetas de Netscape y Microsoft, por lo que deberemos incluir las etiquetas para cada uno de los navegadores de forma que garanticemos que el visitante podr escuchar el sonido independientemente del navegador que utilice.

    Prctica 12-b

    Crearemos un nuevo documento que reproduzca automticamente el archivo primaver.mid Recurrimos al men Insertar / Etiqueta HTML y escribimos la etiqueta bsica de Netscape: <EMBED SRC=primaver.mid HIDDEN=true> Con el mismo procedimiento incluimos la etiqueta para Explorer: <BGSOUND SRC=primaver.mid> Guardamos el trabajo como ej12b.htm y pasamos al navegador para comprobar el resultado.

    Como has podido comprobar el arranque automtico de los sonidos puede resultar un tanto molesto para el usuario, especialmente si se le obliga a escuchar sin darle la posibilidad de detener la audicin. Si consideramos que

    puede ser ms educado dejar en manos del usuario la decisin acerca de continuar la audicin podemos realizar la siguiente modificacin.

    Prctica 12-c

    Volvemos al editor y, pulsando con el botn derecho sobre la etiqueta de Netscape elegimos Propiedades de la etiqueta HTML y la modificamos de forma que resulte <EMBED SRC=primaver.mid AUTOSTART=true WIDTH=145 HEIGHT=60> con lo que lograremos que aparezca una consola en la que el visitante podr optar por detener la reproduccin. Guardamos el archivo como ej12c.htm

    En ocasiones puede interesarnos incluir una grabacin explicativa o un saludo. Para hacerlo procederemos a grabar la voz utilizando el equipamiento multimedia y la guardaremos con la extensin .wav La forma de incluir estos sonidos en la pgina es exactamente igual que para los ficheros .mid, pero deberamos cerciorarnos del tamao de los archivos, especialmente cuando los incluimos como autoarrancables puesto que su tamao es sensiblemente superior y pueden afectar muy negativamente a la velocidad de descarga.

    Publicacin de la pgina
    Una vez creada nuestra pgina nos resta el paso de enviarla al servidor para que pueda ser accesible por el resto de navegantes. Para ello podemos utilizar un programa especfico de transferencia de ficheros, tal como Ws-ftp. Netscape ofrece tambin la posibilidad de publicar las pginas, pero es un servicio que puede ofrecer errores al conectar con algunos servidores. No obstante, aunque no nos funcione la transferencia, la opcin Archivo / Publicar del editor puede sernos til ya que nos indica los archivos de imagen que se utilizan en la pgina, con lo que podremos utilizarla como referencia para seleccionarlos en el programa de ftp. Para poder acceder a nuestra cuenta tendremos que conocer algunos datos que sern diferentes segn el servidor al que nos dirijamos, para lo que habr que ponerse en contacto con el administrador del sistema o consultar las pginas de ayuda al respecto si las hubiera.

    En el caso del servidor del PNTIC la publicacin habra que hacerla en la direccin: xxxx.pntic.mec.es/~nombreusuario donde xxxx corresponde al nombre del ordenador en el que reside nuestra cuenta, por lo que antes de la primera / pondremos lo que aparece a la derecha de la @ en nuestra direccin de correo electrnico. La primera vez que nos conectemos crearemos en el servidor el directorio public_html que ser el destino de las pginas que publiquemos. Nos moveremos al directorio que hemos creado y enviaremos los archivos necesarios. Tras haber realizado la transferencia nos pondremos en contacto con la persona responsable de la WEB para indicarle que configure nuestro directorio para que pueda ser accesible por el resto de los usuarios. Si hemos creado ms de una pgina es normal que tengamos una pgina ndice que contenga los enlaces al resto. Es conveniente que a esta pgina la llamemos index.html (s, has ledo bien, no htm sino html en la extensin) puesto que la mayora de los servidores buscan esta pgina de forma automtica. Si lo hacemos as la referencia para acceder a la misma ser xxxx.pntic.mec.es/~nombreusuario Hasta aqu llega nuestro acercamiento a los rudimentos del lenguaje HTML. Muchos son los aspectos en los que se puede profundizar para ir perfeccionando el aspecto de nuestras pginas WEB. Para ello hay dos procedimientos bsicos:
    o o

    La consulta de manuales publicados en la red. La investigacin del cdigo utilizado por otros autores para crear efectos que nos resulten interesantes.

    De momento podemos intentar la creacin de una pgina personal en la que incluyamos una sntesis de los procedimientos abordados a lo largo de stas pginas.

    Prctica resumen
    La propuesta es crear una pgina que incluya los siguientes elementos

    Color de fondo personalizado y grfico para fondo lateral. Sonido autoarrancable con posibilidad de detencin accesible al usuario.

    Estructura general en tabla de dos columnas de borde invisible. ndice inicial con enlaces a los puntos correspondientes dentro de la pgina y vuelta desde stos. Texto con cabeceras de diferentes tamaos y palabras resaltadas. Inclusin de datos que requieran su presentacin en tabla. Imgenes. Enlaces externos.

    Cuando tengamos elaborada la pgina la publicaremos y comprobaremos que todo funciona correctamente. Una de las peculiaridades de Internet es la gran cantidad de personas e instituciones que ofrecen recursos para poder aprender o desarrollar nuestras pginas. Aqu tienes algunos que pueden resultarte interesantes para empezar a ampliar tus conocimientos.

    Manuales de HTML
    Webmaestro: Uno de los ms completos manuales en castellano sobre HTML. (http://wmaestro.com/webmaestro) Tejedores del WEB: Otro interesante manual tambin en castellano desde el otro lado del charco (http://www.dic.uchile.cl/~manual/)

    Editores HTML
    Adems de los editores que acompaan a los navegadores puedes probar tambin algn de stos que estn tambin en castellano. Web Scope: Puedes encontrarlo en http://www.geocities.com/SiliconValley/4966/scope.htm CastWeb: lo obtendrs en http://personales.mundivia.es/personales/alrodzam/ (Es un programa de 16 bits, vlido por tanto para Windows 3.x) Y si quieres ir probando alguno de los muchos que hay en ingls puedes acudir a algn servidor de programas shareware, como Solo Windows 95 cuya seccin de editores html se encuentra en la pgina http://ms.ctv.es/SW95/share32/edithtml.html FTP de la Universidad de Alcal de Henares http://www.alcala.es/ftpdir/Html.htm

    Programas de FTP

    Dos programas fciles de usar y muy eficaces para la transferencia de ficheros son Ws-Ftp y CuteFTP (ambos en ingls). Disponen de versiones de uso gratuito. Ws-Ftp: Consulta su pgina principal en http://www.ipswitch.com CuteFTP: La Home Page se encuentra en http://www.cuteftp.com y ya disponen de una versin en espaol.

    Sonidos
    WebStore: El almacn de imgenes y sonidos que acompaa al manual Webmaestro. (http://www.wmaestro.com/webstore/index.html) Midis de msica clsica: Est claro no?. Su direccin es http://www.prs.net/midi.html

    Editores de imagen
    Paint Shop Pro: Posiblemente el mejor programa shareware para tratamiento de imgenes. Se puede obtener desde su pgina http://www.jasc.com o desde una gran cantidad de servidores ftp. Trucos y ayudas para Paint Shop Pro: Desde la propia WEB de PSP (http://www.jasc.com/tips.html) nos ofrecen esta coleccin de trucos y ayudas y adems incluyen enlaces a otras pginas de gran calidad relacionadas con el tema (En ingls pero muy grfico)

    Imgenes
    ColorVivo: Una de las clsicas fuentes de recursos grficos. Almacn de imgenes de Almudena Rueda : Otra sitio espaol para obtener imgenes (http://intrabuilder.databasedm.es/arueda/) Gif animados: Para usarlos con prudencia. En http://www6.uniovi.es/gifanim/gifmake1_esp.htm dispones de un tutorial para poder construir tus propios archivos

    Вам также может понравиться