Comenzamos analizado el texto. Si estamos acostumbrados a trabajar con procesadores de texto, seremos conscientes de que a la hora de escribir cualquier documento es necesario establecer una jerarquía dentro de él. Para ello tenemos crearemos títulos (por defecto más grandes que el texto normal), subtítulos (más grandes que el texto pero más pequeños que los títulos), subsubtítulos (más grandes que el texto pero...) y tantos subniveles como nos sean necesarios. No siempre un título o subtítulo tiene que ser más grande que el párrafo o párrafos que componen el texto normal. A veces, con ponerlo en negrita, en cursiva o subrayándolo nos valdrá. A veces también será necesario crear combinaciones... Veamos como hacer esto y más en los siguientes puntos:
- Cabeceras: ya hemos visto que para denotar que estamos escribiendo una cabecera o título tendremos que encorsetar dicho texto entre las etiquetas <hX> y </hX> siendo X un número entre el 1 y el 6 (ambos inclusive). Las cabeceras <h1> serán más importantes (consecuentemente más grandes) que las <h2>. Sucede lo mismo entre éstas y las <h3> y así sucesivamente... La letra empleada es h por ser diminutivo de header.
- Párrafos: ya vimos que para definir párrafos es necesario enmarcar el texto deseado entre las etiquetas <p> y </p>. Se utiliza la letra p por ser un diminutivo de paragraph.
- Negrita: para que un texto vaya en negrita deberemos de enmarcarlo entre las etiquetas <b> y </b>. Se utiliza la letra b por ser un diminutivo de bold.
- Cursiva: funciona de una forma similar a la negrita salvo que en esta ocasión las etiquetas necesarios son <i> e </i>. La i proviene de italic.
- Subrayado: utiliza las etiquetas <u> y </u>. La u proviene de underline.
- Tachado: en esta ocasión las etiquetas empleadas por HTML son <s> y </s> y se utiliza para definir texto que ya no es correcto. Por ejemplo:
-
<p>Mi coche es <s>rojo</s> azul.</p>
- produce la siguiente salida: "Mi coche es
azulrojo".
- Superíndices y subíndices: las etiquetas empleadas para especificarlos son <sup> y <sub> (junto a sus etiquetas de cierre) respectivamente.
E = M·c2
H2O es agua
H2O es agua
- Espaciado: tenemos que tener cuidado cuando escribamos código HTML y queramos que haya más de un espacio entre determinadas palabras. Si queremos que entre las palabras uno y dos haya 5 espacios en blanco, no nos bastará con escribir <p>uno dos</p>. Nuestro navegador interpretará el elemento anterior como un párrafo con dos palabras ('uno' y 'dos') y un único espacio entre ellas. Básicamente cuando el navegador ve 2 espacios o más seguidos lo interpretará como un único espacio. El caracter especial " " nos permitirá añadir un espacio en blanco donde queramos. Para lograr los cinco espacios en blanco tendremos que escribir <p>uno dos</p>.
- Retornos de carro y líneas horizontales: si estamos escribiendo texto y queremos que entre los párrafos que lo forman aparezca un espacio mayor que el que se da entre fin de párrafo e inicio de nuevo párrafo, esto es </p> y <p>, podremos insertar un retorno de carro entre medias. El retorno de carro es un elemento especial (está vacío) y podemos escribirlo utilizando una única etiqueta. Esta etiqueta es <br />. Para ver como funciona, podemos observar que entre las dos tablas de la parte inferior hay dos retornos de carro. Con las líneas horizontales sucede otro tanto de lo mismo. Para definirlas bastará con escribir la etiqueta <hr />. A continuación tenemos un ejemplo.
- Énfasis: para dar énfasis a algún trozo de texto en particular utilizaremos las etiquetas <strong> y </strong> para dar un mayor énfasis y <em> y </em> para dar un menor énfasis. Estas etiquetas suelen ser confundidas con las etiquetas para negrita y cursiva respectivamente ya que generalmente el texto situado entre ellas es representado por los navegadores en negrita y cursiva.
- Citas: para realizar una cita se suele utilizar la etiqueta <blockquote> junto a su etiqueta de cierre </blockquote>. El texto que va entre ambas citas suele llevar sangrías a izquierda y a derecha para resaltar el hecho de estar haciendo una cita. El siguiente código...
<blockquote class="tr_bq"> <i>Esto es una cita. Esto es una cita. Esto es una cita. Esto es una cita. Esto es una cita. Esto es una cita. Esto es una cita. Esto es una cita.</i></blockquote>
- Produce la siguiente salida...
Esto es una cita. Esto es una cita. Esto es una cita. Esto es una cita. Esto es una cita. Esto es una cita. Esto es una cita. Esto es una cita.
- Abreviaciones y acrónimos: permiten que siempre que se sitúe el ratón junto a la abreviación, por ejemplo Super, o al acrónimo, por ejemplo HTML, aparezca una pequeña leyenda a su lado con el texto expandido. Para emplearlos deberemos encorsetar la abreviación entre las etiquetas <abbr> y </abbr> y el acrónimo entre las etiquetas <acronym> y </acronym>. Esto por si solo no hará nada. Para que aparezca la leyenda será necesario especificar el atribute title con el texto expandido. Por ejemplo para Super:
<abbr title="Supercalifragilisticoexpialidoso">Super</abbr>
- Citas y definiciones: son etiquetas poco utilizadas ya que en función del navegador desde el que se visualice la página web se verán de una forma especial (cursiva) o como texto normal. Para definir una cita, por ejemplo de un libro, pondremos el título del mismo entre las etiquetas <cite> y </cite>. Si queremos definir algo tendremos que colocar lo que estamos definiendo entre las etiquetas <dfn> y </dfn>. Como ya digo, no son muy utilizadas porque en función del navegador, el título del libro o lo que queramos definir se verá en cursiva o como texto normal y corriente.
- Direcciones: para especificar direcciones utilizaremos la etiqueta <address>. El texto situado entre esta etiqueta y la de cierre suele aparecer en cursiva. Dentro de esta etiqueta pueden aparecer otras para indicar una dirección de correo o incluso una dirección física...
| OBJETIVOS | Ver cómo definir distintos elementos de texto en nuestro página web. Saber con qué etiquetas podemos crear listas. Conocer los distintos atributos que pueden ser utilizados para hacer enlaces a otras páginas web o a secciones de nuestra propia página web. |
| DIFICULTAD | Fácil |
| REQUISITOS | Tener en cuenta lo que hemos visto con anterioridad. |
| CONSEJOS | Sino entendéis algo, preguntad o toquetead hasta que deis con la solución. Es realmente sencillo hacer páginas web, por lo menos páginas web estáticas y simples. |
| PRÓXIMAMENTE | Seguiremos viendo elementos básicos de HTML y etiquetas importantes. Más adelante comprobaremos cómo añadir fragmentos de HTML a nuestras entradas e introduciremos alguna de las herramientas más utilizadas para crear páginas web. Cuando hablemos de CSS veremos cómo cambiar la fuente y el color del texto junto a varias opciones a mayores similares. |
No hay comentarios:
Publicar un comentario