html básico - i

16
 HTML básico - I http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.] HTML básico - I Cómo crear una página web En este primer capítulo, presentaremos las nociones básicas del lenguaje HTML. Con una utilización inteligente de las etiquetas HTML más sencillas, pueden lograrse documentos web de calidad suficiente. Al fin y al cabo, no debe olvidarse que lo importante, tanto en un papel como en Internet, sigue siendo el contenido. 1. Introducción 2. La estructura mínima de un documento HTML 3. El texto básico de un documento HTML 4. Los párrafos de un documento HTML 5. Los enlaces de un documento HTML 1 . I ntrod ucci ón HTML 1  es un lenguaje universal, que funciona en cualquier plataforma (Windows, Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape, Internet Explorer, Mozilla Firefox, etc.). El precio que paga por su universalidad es su poca sofisticación, puesto que no es otra cosa que el viejo formato ASCII 2  (y con 7 bits en lugar de ocho, por lo que ni tan siquiera tiene acentos ni otros caracteres especiales). Por tanto, para que un documento HTML sea algo más que simples caracteres básicos, debe contener, además de dicho texto, una serie de instrucciones para el browser que lo va a reproducir: estas intrucciones se denominan etiquetas o tags y se distinguen del texto porque van entre guiones (< > ) 3 . Estas etiquetas contienen todo el resto de la información de la página web. Por tanto, si un documento HTML no es más que texto ASCII (parte sin guiones y parte entre guiones: las etiquetas), cualquier documento web, hasta el más sofisticado, puede escribirse directamente desde un sencillo programa básico de texto, como el Cuaderno de Notas ( Notepad) de Windows, por ejemplo. Sin embargo, escribir un documento complejo de esta manera exige un conocimiento exhaustivo de las numerosísimas etiquetas existentes y sus normas de utilización; para evitar esta dificultad, hay una serie de programas denominados comúnmente editores de HTML (desde el Composer al Dreamweaver, pasando por tantos otros), que permiten al usuario componer una página (es decir, generar etiquetas HTML) desde un interfaz más o menos parecido al de un procesador de textos. A la hora de crear una página web, y aunque utilicemos un editor de HTML, es casi imprescindible entender la disposición del etiquetado de un documento y manejar siquiera las etiquetas más elementales. Son varias las razones que pueden aducirse para ello: 1. Los editores de HTML no son siempre herramientas perfectas, sobre todo cuando ha habido

Upload: nancy-barletta

Post on 04-Nov-2015

231 views

Category:

Documents


0 download

DESCRIPTION

Conceptos html

TRANSCRIPT

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    HTML bsico - ICmo crear una pgina web

    En este primer captulo, presentaremos las nociones bsicas del lenguaje HTML. Conuna utilizacin inteligente de las etiquetas HTML ms sencillas, pueden lograrsedocumentos web de calidad suficiente. Al fin y al cabo, no debe olvidarse que loimportante, tanto en un papel como en Internet, sigue siendo el contenido.

    1. Introduccin

    2. La estructura mnima de un documentoHTML

    3. El texto bsico de un documento HTML

    4. Los prrafos de un documento HTML

    5. Los enlaces de un documento HTML

    1. Introduccin

    HTML1 es un lenguaje universal, que funciona en cualquier plataforma (Windows, Macintosh, Unix,OS/2, etc.) y con cualquier navegador o browser (Netscape, Internet Explorer, Mozilla Firefox, etc.). Elprecio que paga por su universalidad es su poca sofisticacin, puesto que no es otra cosa que el viejo

    formato ASCII2 (y con 7 bits en lugar de ocho, por lo que ni tan siquiera tiene acentos ni otroscaracteres especiales).

    Por tanto, para que un documento HTML sea algo ms que simples caracteres bsicos, debecontener, adems de dicho texto, una serie de instrucciones para el browser que lo va a reproducir:estas intrucciones se denominan etiquetas o tags y se distinguen del texto porque van entre guiones

    (< >)3. Estas etiquetas contienen todo el resto de la informacin de la pgina web.

    Por tanto, si un documento HTML no es ms que texto ASCII (parte sin guiones y parte entre guiones:las etiquetas), cualquier documento web, hasta el ms sofisticado, puede escribirse directamentedesde un sencillo programa bsico de texto, como el Cuaderno de Notas (Notepad) de Windows, porejemplo.

    Sin embargo, escribir un documento complejo de esta manera exige un conocimiento exhaustivo delas numerossimas etiquetas existentes y sus normas de utilizacin; para evitar esta dificultad, hay unaserie de programas denominados comnmente editores de HTML (desde el Composer alDreamweaver, pasando por tantos otros), que permiten al usuario componer una pgina (es decir,generar etiquetas HTML) desde un interfaz ms o menos parecido al de un procesador de textos.

    A la hora de crear una pgina web, y aunque utilicemos un editor de HTML, es casi imprescindibleentender la disposicin del etiquetado de un documento y manejar siquiera las etiquetas mselementales. Son varias las razones que pueden aducirse para ello:

    1. Los editores de HTML no son siempre herramientas perfectas, sobre todo cuando ha habido

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    muchas modificaciones durante el proceso de creacin. Con bastante frecuencia se harnecesario consultar el cdigo completo, con las etiquetas HTML (lo que se suele denominarcdigo fuente o cdigo madre) para corregir las disfunciones.

    2. Tal vez la mejor manera de aprender a disear pginas web es observar las pginas de losdems, cuyos cdigos fuente estn siempre disponibles para ser imitados (o inclusocopiados, tcnicamente, al menos). Pero, para ello, es necesario entenderlos.

    3. Los mismos editores HTML manejan trminos propios del lenguaje HTML (heading,cellspacing, etc.), que es preciso comprender.

    4. Es necesario un buen conocimiento de HTML para insertar otros cdigos ms potentes, comolos de Javascript, por ejemplo.

    El objetivo de este documento es aprender a componer una sencilla pgina web desde el ms bsico

    de los programas de texto disponibles en Windows: el Cuaderno de Notas.4 De esta manera, seremoscapaces de entender y manejar los cdigos fuente de las pginas ms complejas.

    inicio

    2. Esquema mnimo de un documento HTML

    Un documento HTML comienza siempre con la etiqueta 5, que indica que el documento encuestin est construido con dicho lenguaje.

    La mayora de las etiquetas son pareadas, es decir, corresponde al principio de la accin y indica el fin de dicha accin.

    Por tanto, una pgina web estar siempre contenida entre las etiquetas y .

    Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo deldocumento (body).

    1. La cabecera contiene bsicamente informacin destinada al browser (o navegador), quequeda oculta al usuario. Su etiqueta (pareada) es .

    2. El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es .

    Ya estamos en condiciones de componer nuestra primera pgina web. Basta con escribir lassiguientes etiquetas en nuestro editor de texto y salvar el resultado con la extensin *.HTML o *.HTM:

    EJEMPLO 1

    Ver resultado

    He introducido una pequea tabulacin a la hora de escribir las etiquetas de cabecera y cuerpo,simplemente para facilitar su compresin grfica, puesto que esta cuestin es totalmente indiferente.El resultado no variara de haber colocado las etiquetas de cualquier otra manera. Por ejemplo:

    EJEMPLO 1: Variantes de escritura

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    Ver resultado

    Esta primera pgina web est, lgicamente, vaca, pero es perfectamente operativa. Para modificarla,basta con modificar sus cdigos en el editor de texto. No hace falta cerrar para ello el navegador: unavez modificado y salvado el fichero, basta con utilizar el comando Actualizar (o Refresh) para verlos cambios.

    Al visualizar los resultados del Ejemplo 1, en la barra de ttulo de la ventana correspondiente sloaparece el nombre del navegador (con Netscape) o la trayectoria completa del archivo (con Explorer).Esto sucede porque nuestro documento no posee un ttulo propio. Para crearlo, debemos introduciruna nueva etiqueta (pareada) en la cabecera: . Nuestro pgina web podra quedar, portanto, as:

    EJEMPLO 2

    Ejemplo 2

    Ver resultado

    Ya sabemos crear el esqueleto de una pgina web. La siguiente tarea ser aprender a introducir texto(entre los tags y ) y controlar sus etiquetas elementales.

    inicio

    3. El texto bsico de un documento HTMLEl texto bsico de un documento HTML puede escribirse sin etiquetas. Cada navegador lo visualizaentonces con el tipo y tamao de caracteres escogidos en su configuracin por defecto, e introduce unsalto de lnea cuando los caracteres alcanzan el borde de la ventana.

    Para dominar las cuestiones de formato (de caracteres, de prrafo, etc.) es necesario utilizar lasetiquetas correspondientes.

    3.1. La etiqueta bsica

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    La etiqueta bsica, que controla el tipo de fuente utilizado, es .

    es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre y. Pero sin ms especificaciones, la etiqueta an no sirve para nada.

    Se puede especificar el tipo de letra (es decir, la fuente de caracteres) aadindolo a la etiqueta, dela siguiente manera (en este caso, la fuente escogida es Arial): ....

    Se puede especificar el color de la fuente con la etiqueta .... Paraespecificar los colores, conviene saber al menos lo siguiente:

    1. Cada color posee su correspondiente cdigo.

    2. Hay dos cdigos: hexadecimal lo ms habitual o RGB. En ambos casos se trata deexpresar las proporciones de tres colores bsicos: rojo, verde y azul.

    3. Los valores hexadecimales de los tres colores se expresan de la siguiente manera:

    1. Rojo: color:#ff0000;

    2. Verde: color:#00ff00;

    3. Azul: color:#0000ff;

    4. Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:

    1. Rojo: color:rgb(255,0,0);

    2. Verde: color:rgb(0,255,0);

    3. Azul: color:rgb(0,0,255);

    5. Todos los colores se expresan mediante combinaciones de estos tres colores bsicos.Existen muchos programas que proporcionan los valores de todos los colores que el usuariopuede componer. Tambin en internet existen muchas pginas con los Cdigos de colores.

    6. Los colores ms bsicos pueden especificarse sin cdigo, simplemente escribiendo lapalabra correspondiente (por supuesto en ingls). Por ejemplo: ..., ..., etc.

    Se puede especificar el tamao de la fuente con la etiqueta .... Elvalor del tamao ("?") deseado puede suministrarse de manera absoluta (un nmero del 1 al 7) o

    relativa (+1, +2, -1, -2, etc., teniendo en cuenta que el valor por defecto es 3).6

    Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, eltipo, el tamao y el color de los caracteres: ....

    Con esta etiqueta hemos visto ya la sintaxis bsica de las etiquetas HTML, quepodamos formalizar as: .

    Lo anterior quiere decir que una etiqueta HTML (por ejemplo, FONT) puede llevaruno o varios atributos (FACE, COLOR, SIZE), cuyos valores se colocanentrecomillados tras el signo igual (="arial", ="#0000FF", etc.).

    Esto ser vlido para todas las etiquetas HTML que veamos a partir de estemomento.

    Volvamos a nuestro documento web y practiquemos con las posibilidades de la etiqueta .Por ejemplo:

    EJEMPLO 3

    Ejemplo 3

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    Esto es texto simple: cada navegador lo visualizar segn suconfiguracin por defecto.Este texto es tamao 1.Este texto es tamao 2.Este texto es tamao 4.Este texto es tamao +1 (que es lo mismoque tamao 4).Este textoposee varias especificaciones de formato.

    Ver resultado

    Nuestra pgina web, tal y como est diseada en el Ejemplo 3, no posee ninguna especificacin delneas. A pesar de que las etiquetas estn ordenadas en varias lneas, el navegador coloca todos loscaracteres seguidos (slo tiene en cuenta un nico espacio entre palabras). Para corregir esteproblema podemos utilizar la etiqueta , que introduce un salto de lnea. Nuestro pginaquedara entonces as:

    EJEMPLO 4

    Ejemplo 4

    Esto es texto simple: cada navegador lo visualizar segn suconfiguracin por defecto.Este texto es tamao 1.Este texto es tamao 2.Este texto es tamao 4.Este texto es tamao +1 (que es lo mismoque tamao 4).Este textoposee varias especificaciones de formato.

    Ver resultado

    Hay otra cuestin importante que debe saberse sobre la etiqueta : es laetiqueta ms bsica, y conviene empezar a aprender por ella, pero est en desuso ydesaparecer en las versiones futuras de HTML. En su lugar, existen otras etiquetasms potentes, que iremos viendo en su momento.

    3.2. Etiquetas de formato de caracteresA partir de este momento, se trata simplemente de aadir ms etiquetas a nuestra an pequeacoleccin, de modo que vayamos teniendo cada vez ms control sobre el formato de los caracteres.La tabla siguiente muestra las ms comunes:

    Cdigo Funcin

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    ... Negrita... Cursiva... Subrayado... Subndice... Superndice

    Hay que realizar algunos comentarios sobre las etiquetas precedentes:

    1. Existe otra etiqueta similar a , menos utilizada porque depende de las opciones deconfiguracin del navegador: ....

    2. Existe otra etiqueta similar a , menos utilizada porque depende de las opciones deconfiguracin del navegador: ....

    3. Conviene tener cuidado a la hora de manejar el subrayado, puesto que ste se utilizaconvencionalmente para indicar los hiperenlaces, y podra por tanto resultar confuso para elusuario.

    Es normal utilizar varias etiquetas para un mismo elemento de texto. En ese caso, hay que tenercuidado para encajarlas correctamente. Por ejemplo:... es correcto, pero... es incorrecto.

    3.3. Otras etiquetas de caracteresHay muchas otras etiquetas que afectan a los caracteres. Vamos a presentar varias ms, que debenmanejarse con cierta precaucin:

    1. La etiqueta ... indica que el texto afectado est preformateado, de modoque el navegador s tiene en cuenta todos los espacios y saltos de lnea definidos en lapantalla.

    2. La etiqueta ... indica texto parpadeante. Slo funciona con Netscape.

    3. La etiqueta ... genera texto tachado.

    4. La etiqueta ... genera texto similar al de una mquina de escribir (fuente courierde paso fijo).

    5. La etiqueta ... aumenta el tamao de letra (equivale a ).

    6. La etiqueta ... disminuye el tamao de letra (equivale a ).

    EJERCICIO 1Ya es hora de practicar con las herramientasque hemos presentado hasta ahora. Cmo? Esmuy sencillo: crea una pgina web!Si no se te ocurre nada, te propongo quereproduzcas esta pgina. Para que no tengasque teclearlo todo, aqu tienes el archivo detexto, de modo que, si quieres, no tienes msque pegarlo en tu editor y colocar las etiquetascorrespondientes en los lugares adecuados.(Por cierto: las fuentes que he utilizado son Arialy Comic Sans MS.)

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    inicio

    4. Los prrafos de un documento HTMLEn el apartado anterior hemos aprendido a controlar la apariencia de los caracteres.(Recuerda, de todas maneras, que la etiqueta est en desuso.) Vamosahora a estudiar las etiquetas fundamentales que controlan la organizacin de losprrafos en un texto ms complejo.

    Ya conocemos un tag que afecta a las lneas: . Si deseamos que una lnea no se parta al llegaral final de la ventana del navegador, debemos colocar al comienzo la etiqueta , y elnavegador colocar entonces un scroll o barra de desplazamiento horizonal.

    Por supuesto, si queremos que haya ms lneas, al final s deber aparecer .

    4.1. Los prrafos y su alineamientoLa etiqueta inserta un salto de lnea, pero no un salto de prrafo.7 En cambio, la etiqueta... inserta una salto de lnea y una lnea en blanco, por lo que, en la prctica, equivale a unnuevo prrafo.

    Por supuesto, tanto como ... pueden repetirse varias veces seguidas para dejarms distancia entre las lneas y los prrafos.

    De todas maneras, slo podemos separar los prrafos con lneas completas (una, dos, etc.), pero nopodemos controlar el espacio entre los prrafos con la precisin que permite, por ejemplo, el

    programa Word (con las opciones de espaciado anterior y posterior).8

    Un prrafo puede alinearse introduciendo los siguientes atributos en la etiqueta habitual:

    Cdigo Funcin... Prrafo alineado a la izquierda ... Prrafo centrado... Prrafo alienado a la derecha... Prrafo justificado

    Las etiquetas anteriores permiten alinear los prrafos enteros, pero siempre dejando una lnea vacadelante de cada uno de ellas. Hay alguna manera de alinear independientemente lneas o grupos delneas? S, con las siguientes etiquetas:

    Cdigo Funcin... Lnea(s) alineada(s) a la izquierda ... Lnea(s) centrada(s)... Lnea(s) alineada(s) a la derecha... Lnea(s) alineada(s) justificadas

    En definitiva, disponemos de varias etiquetas similares para la creacin y la alineacin de los prrafos,que sern ms o menos apropiadas dependiendo de las ocasiones. Veamos cmo funcionan en unapgina web:

    EJEMPLO 5

    Ejemplo 5

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    Este prrafo est alineado a la izquierda. En laprctica, equivale sencillamente a la misma etiqueta sin indicacinde alineacin.Este prrafo est centrado. Hay una lnea enblanco entre este prrafo y el anterior.Ahora vamos a alinear tres lneas seguidas de tres manerasdiferentes, pero sin dejar lneas vacas entre ellas, por medio deotras etiquetas:alineado izquierdo alineado izquierdo alineadoizquierdo alineado izquierdoalineado centrado alineado centrado alineadocentrado alineado centradoalineado derecho alineado derecho alineadoderecho alineado derecho

    Ver resultado

    Otra etiqueta que afecta a la alineacin de los prrafos es ...,que introduce una doble sangra, derecha e izquierda. Pueden colocarse varias etiquetas seguidaspara acentuar la sangra, como se observa en el siguiente ejemplo:

    EJEMPLO 6

    Ejemplo 6

    Prrafo normal Prrafo normal Prrafo normal Prrafo normalPrrafo normal Prrafo normal Prrafo normal Prrafonormal.Prrafo con una sangra izquierda-derechaPrrafo con una sangra izquierda-derecha Prrafo con unasangra izquierda-derecha Prrafo con una sangra izquierda-derecha.Prrafocon tres sangras izquierda-derecha Prrafo con tres sangrasizquierda-derecha Prrafo con tres sangras izquierda-derechaPrrafo con tres sangras izquierda-derecha.

    Ver resultado

    4.2. Los ttulosPueden utilizarse hasta seis tipos de ttulos en un documento HTML, ordenados jerrquicamente pormedio de la etiqueta ..., donde n = 1 a 6.

    Las etiquetas de los ttulos introducen una lnea superior en blanco. Como lo habitual despus de unttulo es un nuevo prrafo (), que tambin introduce su propia lnea, el resultado final suele serque una lnea de ttulo tiene una lnea en blanco antes y otra despus.

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    Las etiquetas de los ttulos admiten indicaciones de alineacin, de la misma manera que la etiqueta deprrafo.

    Veamos qu aspecto tienen los ttulos de un documento HTML:

    EJEMPLO 7

    Ejemplo 7

    Ttulo 1Ttulo 2Ttulo 3Ttulo 4Ttulo 5Ttulo 6Ttulo 7 (como no existe, no supone ningn cambio)Adems, los ttulos pueden recibir indicaciones de alineacin,como en los siguientes ejemplosTtulo centradoTtulo a la derecha

    Ver resultado

    Este ejemplo permite plantear el siguiente ejercicio:

    EJERCICIO 2En el EJEMPLO 7 se observa que siempre quedauna lnea en blanco entre un ttulo y el prrafosiguiente (el que comienza con "Adems".Cmo puede suprimirse dicha lnea? Elimina,por ejemplo, la que hay entre el ttulo 7 y elprrafo siguiente.Sabes solucionarlo? Te parece fcil? Esoquiere decir que has entendido estupendamentetodo lo expuesto hasta el momento.No lo has conseguido? No pasa nada, pero talvez deberas repasar todo lo anterior con msdetalle. En cualquier caso, aqu tienes lasolucin.

    4.3. Las listasLas listas son elementos que, como los ttulos, permiten presentar niveles jerarquizados de texto.

    Los documentos HTML permiten dos tipos de listas:

    1. Listas no ordenadas (bullet list): su etiqueta principal es ....

    2. Listas ordenadas o numeradas (numbered list): su etiqueta principal es ....

    3. Listas de definiciones (definition list): su etiqueta principal es ...

    .

    Una vez definido el tipo de lista deseada, los elementos que la componen se marcan de distinta

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    manera segn el tipo:

    1. En las listas ordenadas (...) o no ordenadas (...), cada elementode dicha lista se marca con la etiqueta ... (list item).

    2. En las listas de definicin (...), se utilizan dos: cada elemento que se define semarca con ... y el texto de cada definicin se marca con ....Esta etiqueta se puede repetir si se necesita introducir varios elementos de definicin.

    Las listas se pueden encajar unas dentro de otras, adems de con el resto de las etiquetasdisponibles. Vemos algn ejemplo:

    EJEMPLO 8

    Ejemplo 8

    Los meses de primavera

    AbrilMayoJunio

    Los meses de verano

    JulioAgostoSeptiembre

    Los meses del ao

    Los meses de primavera

    AbrilMayoJunio

    Los meses de verano

    JulioAgostoSeptiembre

    Refranes de los meses

    MarzoEl sol de marzo da con elmazo.

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    AbrilEl abril, aguas mil.MayoHasta el 40 de mayo no te quites elsayo.

    Ver resultado

    Las listas admiten varios parmetros, que varan segn el tipo de lista:

    1. Las tres listas admiten el parmetro COMPACT, que hace que el navegador presente la listade la manera ms compacta posible.

    2. El parmetro TYPE funciona con las dos primeras listas. Sus valores respectivos son,lgicamente, distintos:

    En las no numeradas, controla el tipo de vieta: con forma de disco (, la opcin por defecto), de crculo () y decuadrado ().

    En las numeradas, controla el tipo de numeracin: con nmeros rabes (, la opcin por defecto), romanos (), romanos enminsculas (), letras maysculas () y minsculas().

    3. La etiqueta indica el nmero por el que empieza la lista numerada.

    4. En una lista numerada, se puede cambiar el nmero de un elemento y consiguientementede los posteriores con la etiqueta .

    4.4. Las rayas horizontalesLas rayas horizontales son otro de los procedimientos habituales para separar los contenidos de undocumento HTML. Se introducen simplemente con la etiqueta .

    Hay una serie de caractersticas de las rayas que pueden controlarse, como siempre, por medio deparmetros aadidos a la etiqueta bsica:

    1. El tamao: la etiqueta introduce una raya que ocupa todo el ancho de la pantalla.Pueden especificarse distintas anchuras aadiendo el valor deseado, expresado en pixeles

    () o en trminos porcentuales ().9

    2. La alineacin: cuando una raya ocupa slo una parte de la pantalla, puede especificarse sualineacin por medio de las etiquetas habituales:

    3. La altura: se expresa en pxeles por medio de la etiqueta . Puede adoptar elvalor 0 (la raya ms fina).

    4. El color, por medio del prametro habitual: .5. El sombreado: la raya posee habitualmente un pequeo efecto de sombreado, que puede

    eliminarse con la etiqueta .10

    Como siempre, lo habitual suele ser la combinacin de varios parmetros en una misma etiqueta. Porejemplo:

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    No queda sino practicar con las distintas posibilidades de rayas. Por ejemplo:

    EJEMPLO 9

    Ejemplo 9

    sta es una lnea normal:

    sta es una lnea normal, sin sombreado:

    sta es una lnea que ocupa la mitad de la pantalla (si no seestablece la alineacin, se coloca centrada por defecto):

    sta es ms estrecha y mucho ms gorda:

    sta es igual pero de color rojo:

    Ver resultado

    inicio

    5. Los enlaces de un documento HTMLEn los apartados anteriores hemos aprendido a manejar correctamente el elemento fundamental detodo documento: el texto. Sin embargo, hay otro elemento bsico en un documento HTML, que leproporciona su mayor potencial: los hiperenlaces, que estudiaremos en este apartado.

    Un hiperenlace es un vnculo que une un elemento del documento activo (por ejemplo, una palabra)con otro, de manera que activamos ese segundo elemento simplemente con un click del ratn en el

    primero.11

    La sintaxis general de la etiqueta es muy simple: .... (Los puntossuspensivos representan el elemento enlazado.)

    Para que el destino se abra en una ventana nueva, hay que indicar el siguiente atributo: ...

    El destino de un hiperenlace puede ser de tres tipos:

    1. Enlace externo: otro documento HTML situado en un ordenador remoto.2. Enlace local: otro documento HTML situado en el mismo ordenador.3. Ancla: otro lugar dentro del mismo documento HTML.

    Vamos a examinar separadamente cada uno de estos tipos.

    5.1. Los enlaces externos

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    Desde cualquier punto de un documento HTML puede establecerse un enlace con cualquier recursode Internet.

    Como es sabido, los recursos ms habituales de Internet son:

    1. La WWW, es decir, las pginas web o documentos HTML. La etiqueta correspondiente es:...

    2. El correo electrnico. La etiqueta correspondiente es:...

    3. La transferencia de ficheros (servidores FTP). La etiqueta correspondiente es:...

    Veamos algunos ejemplos:

    EJEMPLO 10

    Ejemplo 10

    Vamos a enlazar las palabras "pincha aqu" con algunos destinosremotos.1.- Con la pgina web de la UD:pinchaaqu2.- Con el servidor FTP de la sede de Ginebra de la OMS:pincha aqu3.- Con mi correo electrnico:pincha aqu

    Ver resultado

    5.2. Los enlaces localesLa mayor parte de las "pginas web" son, en rigor, una coleccin de pginas, puesto que laorganizacin clsica de los sitios web consiste en un conjunto ordenado de documentos HTMLentrelazados y residentes en un mismo ordenador.

    Dentro de un mismo ordenador, los documentos HTML pueden residir en un mismo directorio o envarios:

    1. Cuando todos los documentos residen en el mismo directorio no hay ningn problema, y laetiqueta ser, simplemente: ....

    2. Cuando los ficheros residen en diferentes directorios, hay que facilitar la direccin completadel fichero, lo que puede hacerse de manera absoluta o relativa:

    Direccionamiento absoluto: se indica la trayectoria completa del archivo en cuestin:...

    Aun utilizando un direccionamiento relativo, es necesario indicar los nombres de los directorios"descendentes". Por ejemplo, en una web ordenada como en la figura siguiente, un enlace desde undocumento situado en el directorio a un recurso situado en el directorio debera

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    especificarse as:

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    Bla, Bla, Bla, Bla, Bla, Bla,Bla, Bla, Bla, Bla, Bla, Bla,Bla, Bla, Bla, Bla, Bla, Bla,Bla, Bla, Bla, Bla, Bla, Bla,Bla, Bla, Bla, Bla, Bla, Bla,Bla, Bla, Bla, Bla,

    1ste es el texto de la nota. Si pinchamos sobre el nmero,volvemos a la llamada.

    Ver resultado

    Hemos presentado el etiquetado bsico de los enlaces, su utilizacin y sus tipos,pero an no somos capaces de alterar su formato predefinido. Esto lo veremos en eltercer captulo de esta serie, dedicado a Informacin Complementaria.

    inicio

    Notas1 HTML es el acrnimo de HyperText Markup Language. Para redactar este apartado me he valido en buena

    medida del trabajo de Luc Van Lancker Aprender el lenguaje Html.2 El cdigo ASCII (American Standard Code for Information Interchange) es el ms extendido de los muchos

    sistemas de codificacin informtica, es decir, maneras de representar las informaciones (letras, nmeros,etc.) con bits (esto es, ceros y unos).

    3 Escribiremos todas las etiquetas con color, como suelen aparecer, por mera convencin visual, en losprogramas editores de HTML.

    4 El Cuaderno de Notas de Windows, por su propia simplicidad, genera cdigo ASCII simple. Losprocesadores de textos ms potentes (Word y otros) generan cdigos propios, que entorpecen en este casosu conversin a HTML.

    5 Las etiquetas no se ven afectadas por maysculas o minsculas, por lo que da igual escribir ,, , etc.

    6 Las etiquetas y equivalen respectivamente a las etiquetas y .

    7 Equivale a la combinacin +Intro del procesador de textos Word.8 Por supuesto, s hay procedimientos HTML para controlar estas distancias con exactitud, pero son de mayor

    nivel y no se presentan en este captulo.9 La informacin relativa a los tamaos suele facilitarse ms en trminos porcentuales que en pixeles, porque

    depende menos de las opciones de configuracin de cada navegador. As por ejemplo, una raya de 100pixeles ocupar ms en una pantalla configurada a 800 x 600 pixeles que en otra configurada a 1024 x 768.Sin embargo, en cualquier configuracin, una raya definida por ejemplo con el 75% siempre ocupar lomismo.

    10 Tampoco tiene efectos de sombreado con el valor .11 Este sistema de hipertexto ha sido utilizado por los ficheros de ayuda de Windows (y aun antes, en las

    ltimas versiones del MS-Dos), y hoy en da es un procedimiento habitual en un nmero creciente deaplicaciones.

  • HTML bsico - I

    http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html[04/07/2013 12:56:56 p.m.]

    inicioAlexander Iribar >> Edicin digitalComentarios: [email protected]

    paginaspersonales.deusto.esHTML bsico - I