pedro009

Como hemos visto en el ejemplo del capítulo anterior, cuando queremos poner un texto sin ninguna caracterísca especial, lo ponemos directamente. Unicamente, la separación entre párrafos (dejando una línea en blanco) la conseguimos con la etiqueta <P>. Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en blanco, usamos una etiqueta parecida <BR> (break, o romper). Tampoco tiene etiqueta de cierre. Si queremos obtener múltiples líneas en blanco no basta con repetir la etiqueta <P>, sino que hay que combinarla con la etiqueta <BR>. Así por ejemplo, si queremos obtener cuatro líneas en blanco, pondríamos: <BR><P> <BR><P> <BR><P> <BR><P> Al escribir el texto, si ponemos más de un espacio en blanco entre dos palabras observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el código " " (non-breaking space). Para destacar alguna parte del texto se pueden usar: * <B> y </B> para poner algo en negrita (bold). * <I> y </I> para poner algo en cursiva (italic). Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella estará preformateado, es decir que aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de espaciado fijo (tipo Courier). Además se respetarán los espacios en blanco y retornos del carro, tal como estaban en nuestro documento HTML (lo cual no ocurre normalmente, como hemos visto anteriormente). Es muy apropiada para confeccionar tablas y otros documentos similares. Con la etiqueta <TT> y </TT> conseguimos también que el texto tenga un tamaño menor y la apariencia de los caracteres de una máquina de escribir (typewriter). La diferencia con la anterior es que no preformatea el texto, sino que únicamente cambia su apariencia. La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para destacar una cita textual dentro del texto general. Este párrafo está escrito entre ambas etiquetas. Obsérvese los márgenes a ambos lados. En las fórmulas matemáticas puede interesar poder escribir índices y subíndices, que se consiguen con las etiquetas <SUP> </SUP> y <SUB> </SUB> respectivamente. Así, por ejemplo: m2 se consigue de la siguiente manera: m<SUP>2</SUP> vx se consigue con: v<SUB>x</SUB> A menudo nos interesará presentar las cosas en forma de listas. Podemos escoger entre tres tipos distintos: 1. Listas desordenadas (no numeradas) 2. Listas ordenadas (numeradas) 3. Listas de definición. Las listas desordenadas (unordered lists) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente: <UL> <LI> Una cosa <LI> Otra cosa <LI> Otra más <LI> Etc. </UL> Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada cosa va precedida de la etiqueta <LI> (list item). El resultado de lo anterior es el siguiente: * Una cosa * Otra cosa * Otra más * Etc. Se puede anidar una lista dentro de otra. Por ejemplo: <UL> <LI> Mamíferos <LI> Peces <UL> <LI> Sardina <LI> Bacalao </UL> <LI> Aves </UL> Que daría el siguiente resultado: * Mamíferos * Peces o Sardina o Bacalao * Aves Las listas ordenadas (ordered lists) sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada cosa. <OL> <LI> Primera cosa <LI> Segunda cosa <LI> Tercera cosa <LI> Etc. </OL> El resultado es: 1. Primera cosa 2. Segunda cosa 3. Tercera cosa 4. Etc. Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas. El tercer tipo lo forman las listas de definición. Como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Toda la lista debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes: 1) el nombre de la cosa a definir , que se consigue con la etiqueta <DT> (definition term) y 2) la definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition). <DL> <DT> Una cosa a definir <DD> La definición de esta cosa <DT> Otra cosa a definir <DD> La definición de esta otra cosa </DL> Su resultado es: Una cosa a definir La definición de esta cosa Otra cosa a definir La definición de esta otra cosa Comentarios no visibles en la pantalla A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos símbolos: <!-- y --> Ejemplo: <!-- Esto es un comentario al código que no se verá en pantalla --> Ejemplo práctico En el procesador de textos copiamos: <HTML> <HEAD> <TITLE> Mi pagina del Web - 2 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis aficiones </H1> </CENTER> <HR> Sin un orden particular, mis <B> aficiones </B> son las siguientes: <UL> <LI> El cine <LI> El deporte <UL> <LI> Natacion <LI> Baloncesto </UL> <LI> La musica </UL> La musica que mas me gusta es <I> (en orden de preferencia): </I> <OL> <LI> El rock <LI> El jazz <LI> La musica clasica </OL> </BODY> </HTML>

Este manual está pensado para guiar tanto a quien desee construir su propia página del Web, si experiencia alguna partiendo desde los conceptos iniciales, como a quien quiera ampliar sus conocimientos. Primeras herramientas: Para comenzar sólo son necesarios dos elementos: * Un procesador de texto. Vale cualquiera, siempre que no formatee el texto. Por ello, los más adecuados son los más sencillos (como por ej., Notepad en Windows o SimpleText en Macintosh). Si se utilizan procesadores como el Word, se deben guardar los ficheros como 'Sólo Texto', para que no introduzca órdenes de formateo, que pueden provocar errores al cargarlo en el navegador. Yo hice la primera con el block de notas que se encuentra en archivos/accesorios/blo * Un navegador del Web. Esto se da por supuesto, ya que has accedido a esta página con uno de ellos (p. ej. Netscape, MSI Explorer, Mosaic, etc.) El procesador de texto lo usaremos para ir escribiendo todos lo que queramos en nuestra pagina, que será posteriormente interpretado por el navegador, con lo que iremos comprobando los cambios y añadidos que vayamos efectuando. 1- una pagina basica Lo primero que vamos a hacer es abrir ek procesador de texto elejido y empezar en una hoja en blanco, la cual guardaremos con el nombre de mipag1.html, la parte de mipag1 puede ser cambiada a gusto pero la parte que dice .html deve estar siempre para que el navegador la reconozca Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por claridad, se usarán en este manual sólamente las mayúsculas. CONCEPTOS BASICOS El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Funcionan de la siguiente manera: <XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta. Obiamente en ambos casos xxx seria cambiado por la etiqueta a usar Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML> El documento en sí está dividido en dos zonas principales: * El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> * El cuerpo, comprendido entre las etiquetas <BODY> y </BODY> Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o agenda de direcciones). Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.) Por tanto, la estructura queda de esta manera: <HTML> <HEAD> <TITLE> Título de la página </TITLE> </HEAD> <BODY> [Aquí van las etiquetas que visualizan la página] </BODY> </HTML> Antes de crear nuestra primera página, unas consideraciones sobre el texto: Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a ella. Si queremos separar el texto en distintos párrafos debemos usar la etiqueta <P>, (que no tiene su correspondiente etiqueta de cierre </P>) El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. Puedes experimentar en el ejemplo que sigue, cambiando el número para comprobar el efecto que se logra. Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos los navegadores, aunque sí la mayoría de ellos). Nos centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc. También tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, como se puede observar a continuación: En el procesador de texto copiamos lo siguiente: <HEAD> <TITLE> Mi pagina del Web - 1 </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera pagina </CENTER> </H1> <HR> Esta es mi primera pagina, aunque todavia es muy sencilla. Como el lenguaje HTML no es dificil, pronto estare en condiciones de hacer cosas mas interesantes. <P> Aqui va un segundo parrafo. </BODY> </HTML> Las líneas en blanco y las indentaciones del texto se han puesto para mayor claridad, pero no son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores. Obsérvese además la falta de los acentos. Se hablará más adelante sobre el motivo de ello. Guardamos el fichero nuevamente recuerden siempre poner .html y lo cargamos en el navegador. Vamos al navegador ponemos archivo/abrir archivo y buscas tu archivo Bueno esta fue la primera parte de esta guia o manual, en un rato pongo lo que sigue