(html) 1.- formatos de texto.pdf
TRANSCRIPT
Introducción histórica
Tim Berners Lee desarrolla HTMLa principios de los años 90.
En 1995 se publica el primer estándar oficial llamado HTML 2.0
En 1997 se publica la versión HTML 3.2 por la organización W3C (World Wide Web Consortium), que y es el organismo oficial encargado de publicar los estándares.
En 1998 aparece la versión HTML 4.0 que incluye soporte para lenguajes script, hojas de estilo css, facilidades de impresión etc…
En 1999 aparece HTML 4.01 la última especificación oficial hasta el moento.
En 2000 el W3C publica XHTML 1.0 que es una reformulación de HTML 4.0 basada en XML.
XHTML 1.0 está aceptado y es ampliamente utilizado.
En 2003 aparecen los famosos XFORMS, los formularios de XHTML, que mejoran considerablemente a los anteriores gracias a que separan el contenido de la presentación.
En 2004 Apple, Mozilla y Opera crean un grupo de trabajo llamado WHATWG para seguir desarrollando HTML
En 20008 W3C y WHATWG, unidos, publican el primer borrador de HTML5
Resumen:
HTML 4.01 y XHTML 1.0 son las especificaciones más utilizadas.
HTML 5 se va incorporando progresivamente.
Introducción a HTML
Cuando visitamos una página web vemos textos, imágenes, colores de fondo, en algunos casos elementos que se desplazan por la pantalla, en fin, todo el conjunto de elementos que hacen de dicha página un espacio multimedia e interactivo. Aunque podríamos pensar que todos esos elementos están incluidos en la página, no es así. Realmente, el único de todos ellos que pertenece a la propia página es el texto. Y, entonces, ¿por qué se ve lo que aparece en la página? La respuesta es que una página web no es más que un documento de texto acompañado de una colección de etiquetas que sirven para que el navegador:
interprete de qué forma tiene que presentar el texto.
sepa de dónde tiene que obtener las imágenes y sonidos y cómo mostrarlos.
distribuya todos los contenidos de una forma determinada dentro de la pantalla.
El lenguaje que contiene dichas etiquetas se denomina HTML. Las siglas HTML se corresponden con la definición "Lenguaje para marcado de hipertexto" (Hyper-text Markup Language). Este lenguaje se utiliza para estructurar documentos de texto que puedan ser interpretados por navegadores y distribuidos a través de Internet.
Los documentos escritos en HTML están formados por texto plano. De esta manera, un documento HTML puede ser visualizado con un editor de textos convencional. Nosotros utilizaremos el editor Notepad++.
Formato de las etiquetas HTML
Las etiquetas HTML se escriben encerradas entre ángulos (< y >). Normalmente se utilizan dos etiquetas: una de inicio y otra de fin. La única diferencia entre ambas es que la de cierre lleva una barra inclinada (/) antes del código. De esta manera, el texto que aparezca entre ambas etiquetas presentará el efecto que dichas etiquetas indiquen. Existe una etiqueta para cada tipo de efecto. Algunos ejemplos de efectos son los siguientes:
<b>Este texto aparecerá en negrita en la pantalla.</b>
<i>Este texto aparecerá en cursiva en la pantalla.</i>
<font family="Arial">Este texto aparecerá en con letra Arial en la pantalla.</font>
En los siguientes apartados iremos estudiando las distintas etiquetas. Se incluye un resumen de las más importantes en el enlace Guía de referencia rápida de HTML.
Etiquetas dentro de etiquetas
Se pueden abrir etiquetas dentro de otras etiquetas. Sin embargo, hay que tener en cuenta que se deben cerrar en orden inverso al orden de apertura. Para facilitar esta tarea, se suelen dejar sangrías cada vez que se inicia una nueva apertura. Por ejemplo:
<etiqueta1>
Este nivel está afectado por la etiqueta 1
<etiqueta2>
Este nivel está afectado por la etiqueta 1 y 2
<etiqueta3>
Este nivel está afectado por la etiqueta 1, 2 y 3
</etiqueta3>
Este nivel está afectado por la etiqueta 1 y 2
</etiqueta2>
Este nivel está afectado por la etiqueta 1
</etiqueta1>
Atributos de las etiquetas
La mayoría de las etiquetas admiten atributos. Los atributos ofrecen distintos efectos para las etiquetas sobre las que se aplican. El formato general de las etiquetas con atributos es el siguiente:
<etiqueta1 atributo1="valor1" atributo2="valor2">
Texto afectado por la etiqueta1
</etiqueta1>
Cada etiqueta tiene sus propios atributos disponibles, que se pueden consultar en la Guía de referencia rápida de HTML. Los valores de los atributos pueden tomar unos valores determinados (numéricos, texto, valores hexadecimales,...), pero siempre irán entre comillas.
Organización de un sitio web
Un sitio web no sólo está comprendido por una única página, sino que suele estar compuesto por varias páginas relacionadas entre sí, además de contar con otros contenidos (imágenes, vídeos, sonidos,...). Para facilitar la organización de dichos contenidos, se suele emplear una estructura de carpetas como la siguiente:
Todas las prácticas y trabajos del curso deberán ajustarse al esquema propuesto.
Etiquetas básicas
En este punto sabemos que una página web está formada exclusivamente por texto: parte de ese texto aparecerá en pantalla (son los contenidos que se quieren mostrar) y el resto estará formado por etiquetas que no aparecerán en pantalla, pero que tendrán algún efecto sobre la página(pondrán parte del texto en negrita, estructurarán los contenidos en forma de tablas o listas, cambiarán el tipo de letra o el tamaño del texto, etc.).
Las etiquetas, así como sus atributos, se suelen indicar en minúscula.
Es importante saber que las páginas web están estructuradas: es decir, que deben seguir una serie de reglas para que sean interpretadas correctamente por los navegadores web. A continuación se explica dicha estructura genérica.
Esquema general de una página web
El esquema general de una página web tiene el siguiente aspecto:
DECLARACIÓN DE TIPO DE DOCUMENTO
<html>
<head>
<title>Título de la página </title>
Elementos opcionales de la cabecera
</head>
<body>
Contenido del cuerpo
</body>
</html>
Toda la página web debe estar almacenada entre las etiquetas <html> </html>, con la excepción de la declaración de tipo de documento. Como puede verse en la figura, hay tres partes diferenciadas en toda página web:
Declaración de tipo de documento. Es una línea de texto que especifica el tipo de documento que hay en el archivo. Se explica en el siguiente apartado. Es la única parte de la página web que no está almacenada dentro de las etiquetas <html> </html>.
Cabecera. Está delimitada por las etiquetas <head> </head>. En la cabecera se incluye aquella información de la página que no va a aparecer en pantalla (salvo el título de la página, que aparece en la barra superior del navegador web). Sirve para indicar el nombre del autor, palabras clave, programas script que se ejecutarán, etc.
Cuerpo. Está delimitado por las etiquetas <body> </body>. En el cuerpo de la página se incluye aquella información que se va a representar en pantalla. En el cuerpo es donde se almacenan los contenidos de la página: texto, imágenes, tablas, listas,...
La declaración del tipo de documento
El W3C es un organismo que se encarga de fijar las normas que deben seguir los documentos escritos en HTML. Según este organismo, todo documento HTML deberá contener al principio del mismo una línea que indique qué tipo de documento es. Es lo que se llama la declaración del tipo de documento.
Al indicar la DTD (Document Type Definition) al principio del documento le estamos diciendo al navegador cómo interpretar adecuadamente el código. Los tipos de documento válidos para HTML y sus declaraciones correspondientes se muestran a continuación:
Documento HTML estricto. Los documentos de este tipo se ajustan a la especificación más rígida del W3C. Significa que no se pueden usar determinadas etiquetas y atributos HTML que están en fase de quedarse obsoletos. HTM 4.01 recomienda separar por completo el contenido del formato. Si cumplimos escrupulosamente con esta recomendación, almacenando toda la información sobre el formato en una hoja de estilos CSS, entonces podemos utilizar la declaración estricta. Estos documentos deberán incorporar el siguiente código al principio:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Documento HTML transicional. Los documentos de este tipo se ajustan a la especificación más permisiva del W3C. Significa que se pueden usar determinadas etiquetas y atributos HTML que están en fase de quedarse obsoletos. Si queremos combinar contenido e información de formato en nuestro documento HTML, entonces debemos utilizar la declaración de transición. Estos documentos deberán incorporar el siguiente código al principio:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Documento HTML con marcos. Los documentos de este tipo son los que llevan incorporados marcos (etiquetas <frame> y <frameset>). Estos documentos deberán incorporar el siguiente código al principio:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
En HTML 5. La declaración es más sencilla:
<!DOCTYPE html >
Copia el código de abajo en un archivo de texto (con el bloc de notas por ejemplo) con el nombre Ejemplo_1.html y luego observa el resultado en el navegador.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Mi primer página </title>
</head>
<body>
<h1> Hola Mundo </h1>
</body>
</html>
La cabecera
La cabecera almacena información sobre el título de la página y otros datos importantes, entre ellos la codificación de caracteres que emplea la página.
Codificación de caracteres
Todo documento deberá incorporar información sobre el tipo de codificación de caracteres que almacena. La codificación de caracteres depende del editor utilizado (en el Notepad++ se puede elegir en el menú Codificación). La elección de una codificación de caracteres u otra tendrá como
consecuencia que se puedan escribir los caracteres españoles (ñ, á, ò, ¿,...) directamente en el contenido de la página o que se deban emplear caracteres especiales.
La codificación de caracteres se debe elegir en el editor de páginas web que se utilice (en nuestro caso, Notepad++) y reflejarlo en el código introduciendo una etiqueta <meta> en la cabecera de la página, de la siguiente manera:
<meta http-equiv="Content-Type" content="text/html; charset=codificacion">
El parámetro codificacion deberá ser igual a la codificación que se haya elegido en el editor. Las más usuales para poder escribir los caracteres españoles son utf-8 (recomendada por ser compatible a nivel mundial) y iso-8859-1 (compatible a nivel de Europa occidental).
Así, para indicar que una página está codificada en utf-8 escribiríamos:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
http-equiv: indica una propiedad al navegador como si el propio servidor http (Web) hubiera generado dicha cabecera, de ahí viene el nombre "http-equivalent".
La etiqueta <title> y las etiquetas <meta>
La etiqueta <title> sirve para introducir el título de la página. El título de la página es el que aparece en la barra superior de la ventana del navegador.
<title>Título de la página</title>
La etiqueta <meta> se utiliza para varias funciones. Además, se pueden poner varias etiquetas meta en la misma página:
<meta name="author" content="nombre del autor de la página">
<meta name="copyright" content="nombre del propietario de la página">
<meta name="description" content="descripción del contenido de la página">
<meta name="keywords" content="Ciclos, Formativos, Informática, FP, DAW">
<meta name="date" content="12 de Septiembre de 2013 - Fecha de creación de la página">
El texto indicado en "description" es utilizado por los motores de búsqueda para indexar la página. Es el texto que suele aparecer como resultado de la búsqueda realizada por un usuario.
La lista de palabras indicadas en "keywords" son por las que queremos que nuestra página sea localizable. La inclusión de palabras no relacionadas con nuestro sitio con el fin de mejorar el posicionamiento web, se considera spam y puede ser penalizado por los motores de búsqueda.
El cuerpo
En el cuerpo de la página aparece la información que se verá en la pantalla del navegador. En el cuerpo podrán aparecer todas aquellas etiquetas que estudiaremos en las próximas secciones del tema.
<body>
Atributos
id: sirve para asignar un nombre único a un elemento. Se utiliza para identificar elementos en hojas de estilo y en scripts.
class: sirve para asignar un nombre de clase para varios elementos. Es posible usar el mismo nombre de clase para varios elementos. Se usa para mejorar el rendimiento de las hojas de estilo.
title: sirve para agregar un comentario asociado a un eemento. Los navegadores muestran
este comentario en una ventana emergente cuando el ratón se sitúa sobre el elemento.
style: sirve para aplicar información de estilo a un elemento.
Atributos desaprobados: background, text, link, alink, vlink, bgcolor.
Estos atributos no deben usarse, ya que la forma correcta es a través de hojas de estilo o con estilos en línea como en el siguiente ejemplo.
<body style="background-color:blue" >
........
<body>
Observa que produce el mismo efecto el código de más abajo que si sustituimos la línea de body por la siguiente:
<body bgcolor="blue">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Mi primer página </title>
</head>
<body style="background-color:blue">
<h1> Hola Mundo </h1>
</body>
</html>
Guárdalos con los nombres Ejemplo_2.html y Ejemplo_3.html body por la siguiente:
Eventos Intrínsecos
Hay una serie de atributos que corresponden a eventos. Por ejemplo cuando se carga una página, cuando se hace click sobre un elemento, etc...
Para utilizar estos eventos intrínsecos hay que conocer un lenguaje script, que sirva par ejecutar una determinada acción cuando se produzca un evento
Ejemplo, modifica la etiqueta body del ejemplo anterior con el código de más abajo y observa el resultado. Sálvalo como Ejemplo_4.html. Asegúrate de utilizar el carácter comilla simple
<body onload="alert('Carga completa');">
Comentarios
Los comentarios se introducen entre los símbolos <!-- y -->. Los comentarios no se pueden anidar.
<!-- Todo esto, aunque ocupe varias líneas, no aparece en pantalla ni afecta a la página web. Se
suelen utilizar para realizar anotaciones útiles para el administrador, como fechas,
explicaciones, etc. -->
Caracteres especiales
Como hemos visto, las etiquetas HTML se incluyen entre los signos < y >. Además, los atributos van entre comillas (" "). De esta manera, si introducimos alguno de esos caracteres en el código HTML, estaremos indicando al navegador que lo que viene a continuación es una etiqueta o un atributo. Estos caracteres reciben el nombre de caracteres especiales.
Así pues, ¿qué haremos cuando queramos insertar en nuestra página web un carácter especial? La respuesta es que deberemos escribir un código alternativo. En la siguiente tabla se incluyen los códigos para los caracteres especiales más comunes:
Símbolo Código
© ©
® ®
< <
> >
& &
Espacio
" "
Por otro lado, existen una serie de problemas con los caracteres de texto no ingleses (letras con acento, eñes,etc.). Depende de la codificación de caracteres empleada en la página web, estos caracteres no ingleses se verán o no se verán correctamente en la página. Codificaciones de caracteres como Unicode o ISO-8859-1 no presentan problemas, mientras que otras como ASCII no mostrarán el contenido correctamente. Por ello, existen también una serie de caracteres especiales para representar los caracteres no ingleses, que funcionarán correctamente independientemente de la codificación utilizada en la página. En la tabla siguiente se recogen los españoles:
Símbolo Código
ñ ñ
á á
é é
í í
ó ó
ú ú
à à
è è
ì ì
ò ò
ù ù
Validación del código HTML
Para verificar el código de una página HTML se puede consultar la dirección http://validator.w3.org/. En esta página se puede insertar el código de la página que se quiera comprobar o bien subir el archivo que contiene dicho código. Tras realizar la comprobación, ofrecerá un resultado sobre los errores que contiene.
¡Ojo! Para comprobar el código de una página web, dicho código deberá llevar obligatoriamente una declaración de tipo de documento y una indicación de la codificación de caracteres que utiliza.
En el caso de que el resultado de la validación sea correcto, nos indicará con un mensaje que podemos incluir el siguiente elemento en nuestra página para indicar que está escrita de acuerdo a los estándares del W3C:
Tipos de elementos
La mayoría de elementos del cuerpo se pueden clasificar en:
Elementos de bloque: Son elementos que crean estructuras más grandes que pueden contener a los elementos de línea y a otros elementos de bloque. Además siempre comienzan en una línea nueva.
Elementos de línea Estos elementos solo pueden contener datos y a otros elementos de línea. No comienzan con línea nueva.
Estructura del texto
El texto es el tipo de contenido más habitual en las páginas web. La correcta estructuración del texto facilitará la lectura de nuestra página por parte de otras personas. En esta sección estudiaremos las etiquetas HTML más importantes para estructurar el texto de una página.
Escribir texto en una página web
Tal como hemos estudiado, el texto que escribamos dentro de las etiquetas <body> </body> aparecerá en pantalla cuando se cargue la página. No obstante, si hacemos la prueba y escribimos algún texto, observaremos lo siguiente:
Aunque introduzcamos más de un espacio entre las palabras, solamente se muestra un único espacio en el navegador.
Aunque insertemos un salto de línea en el código de la página (tecla Enter), no aparece representado cuando cargamos la página en el navegador.
Esto se debe a que el lenguaje HTML se creó para estructurar texto. Ello quiere decir que para realizar cualquier cambio en la estructura del texto (introducir una nueva frase mediante punto y aparte, crear un párrafo nuevo,...) habrá que utilizar una etiqueta. A continuación veremos las etiquetas más importantes.
Si deseamos insertar un espacio más del normal entre dos palabra es necesario insertar el carácter (no-break space) por cada espacio que queramos añadir
Salto de línea
Cuando se desee insertar un cambio de línea en una página web se utilizará la etiqueta <br>. Esta etiqueta no tiene etiqueta de cierre. Por ejemplo, el código siguiente:
Este
texto
aparece en
la misma línea.
Este <br> texto<br>
aparece <br> en <br>
líneas <br> distintas.
Produce el siguiente resultado;
Este texto aparece en la misma línea. Este texto aparece en líneas distintas.
Esta etiqueta no debe usarse más que cuando sea necesario. En su lugar se suele agrupar el texto en párrafos, tal como veremos en el siguiente punto.
Párrafos
El párrafo es la estructura más utilizada. Para indicar que un texto pertenece al mismo párrafo, se introduce dentro de las etiquetas <p> </p>. Cuando el párrafo termina con la etiqueta de cierre, se introduce automáticamente un salto de línea. Por ejemplo, el código siguiente:
<p>Este texto forma parte del párrafo 1. </p> <p>Este texto forma parte del párrafo 2. Por eso
está en otra línea.</p>
Produce el siguiente resultado;
Este texto forma parte del párrafo 1.
Este texto forma parte del párrafo 2. Por eso está en otra línea.
Es un elemento de bloque y no puede contener otros elementos de bloque.
La etiqueta de cierre es opcional.
El navegador se encarga de que la línea de texto ocupe todo el ancho disponible, y si el ancho cambia, el texto se ajusta al nuevo ancho ocupando más o menos líneas
Todo texto de un HTML que no sea encabezado, lista o celda de una tabla debe estar dentr de un elemento <p>
Encabezados
Los encabezados son bloques que destacan el texto que contienen. Se utilizan como delimitadores de sección dentro de las páginas web. Existen 6 tipos de encabezado, representados por las etiquetas siguientes (en orden de más a menos importantes): <h1 | h2 | h3 | h4 | h5 | h6> Los encabezados son elementos de bloque. Las etiquetas de cierre son obligatorias Así, el código:
<body>
<h1>Encabezado de nivel 1.</h1>
<h2>Encabezado de nivel 2.</h2>
<h3>Encabezado de nivel 3.</h3>
<h4>Encabezado de nivel 4.</h4>
<h5>Encabezado de nivel 5.</h5>
<h6>Encabezado de nivel 6.</h6>
</body>
Produce el siguiente resultado;
Encabezado de nivel 1.
Encabezado de nivel 2.
Encabezado de nivel 3.
Encabezado de nivel 4.
Encabezado de nivel 5.
Encabezado de nivel 6.
Los encabezados también introducen un salto de línea al final. El tamaño de la letra y el tipo de destacado dependen del navegador que se utilice. La etiqueta de encabezado no debe utilizarse dentro de una etiqueta de párrafo y viceversa.
Línea horizontal
Es una línea que se suele utilizar de separador. Para ello se utiliza la etiqueta <hr>. Así, el código:
<p>Un párrafo.</p>
<hr>
<p>Otro párrafo.</p>
Produce el siguiente resultado;
Un párrafo.
Otro párrafo.
La línea o regla horizontal también introduce un salto de línea al final.
Ejercicio 1:
Realiza una página web cuya apariencia sea similar a la que aparece en el siguiente cuadro. Guárdala con el nombre ejercicio1.html.
Formato del texto
En este apartado veremos algunas etiquetas que sirven para dar forma al texto: cursiva, negrita, subrayado, tipos de letra, tamaños, etc.
No obstante, se debe tener cuidado con estas etiquetas, ya que la mayoría han quedado obsoletas. Esto se debe a que HTML debe utilizarse únicamente para estructurar el texto, no para dar formato ni mejorar la estética de la página: eso es tarea de las hojas de estilo CSS que
veremos en el tema siguiente.
Así, esta sección se ha dividido en dos partes: en la primera se explican las etiquetas que se siguen utilizando y en la segunda las que han quedado obsoletas. Las etiquetas obsoletas sólo se utilizarán en los ejercicios de esta sección, pero en ninguno más.
Señalar que se pueden combinar estas etiquetas para producir varios efectos a la vez: se puede subrayar y poner en negrita, o poner en cursiva y cambiar el tipo de letra, etc. Sólo es necesario cerrar las etiquetas de manera correcta (es decir, inversamente a como se han abierto, tal como se explicó en la sección de Introducción a HTML).
Son elementos de línea, por tanto, no hacen salto de línea y se pueden introducir dentro de un párrafo <p>
Texto con formato previo
Sirve para que el navegador visualice el texto tal y como aparece en el contenido de esta etiqueta, respetando tabuladores, espacios y saltos de línea.
La única excepción es que introduzcamos en el contenido otros elementos HHTML, los cuales se ejecutarán también.
Etiqueta final obligatoria
<pre>
EJEMPLO
de
Texto
Preformateado
</pre>
Produce el siguiente resultado;
EJEMPLO
de
Texto
Preformateado
Etiquetas que se siguen utilizando
<b> <i> <big><small><tt><s><strike>
Negrita
Para resaltar un trozo de texto en negrita se utilizan las etiquetas <b> </b>. Estas etiquetas pueden (y deben) utilizarse dentro de las etiquetas de párrafo. Por ejemplo, el código siguiente:
<p>Este texto forma parte de un párrafo. Y esta <b>palabra</b> está en <b>negrita</b> dentro
del mismo párrafo.</p>
Produce el siguiente resultado;
Este texto forma parte de un párrafo. Y esta palabra está en negrita dentro del mismo párrafo.
Esta etiqueta tiene un sinónimo: en lugar de utilizar <b> y </b> se puede utilizar también <strong> </strong>
Cursiva
Para resaltar un trozo de texto en cursiva se utilizan las etiquetas <i> </i>. Estas etiquetas pueden (y deben) utilizarse dentro de las etiquetas de párrafo. Por ejemplo, el código siguiente:
<p>Este texto forma parte de un párrafo. Y esta <i>palabra</i> está en <i>cursiva</i> dentro
del mismo párrafo.</p>
Produce el siguiente resultado;
Este texto forma parte de un párrafo. Y esta palabra está en cursiva dentro del mismo párrafo.
Esta etiqueta tiene un sinónimo: en lugar de utilizar <i> y </i> se puede utilizar también <em> </em>
Texto monoespaciado
Para que un trozo de texto se represente con letras monoespaciadas (también llamado teletipo, dado que cada letra ocupa el mismo espacio) se utilizan las etiquetas <tt> </tt>. Estas etiquetas pueden (y deben) utilizarse dentro de las etiquetas de párrafo. Por ejemplo, el código siguiente:
<p>Este texto forma parte de un párrafo. Y esta <tt>palabra</tt> está en <tt>modo
teletipo</tt> dentro del mismo párrafo.</p>
Produce el siguiente resultado;
Este texto forma parte de un párrafo. Y esta palabra está en modo teletipo dentro del mismo párrafo.
Tamaño de letra grande
Para resaltar un trozo de texto con un tamaño de letra mayor se utilizan las etiquetas <big> </big>. Estas etiquetas pueden (y deben) utilizarse dentro de las etiquetas de párrafo. Por ejemplo, el código siguiente:
<p>Este texto forma parte de un párrafo. Y esta <big>palabra</big> está en <big>tamaño
grande</big>dentro del mismo párrafo.</p>
Produce el siguiente resultado;
Este texto forma parte de un párrafo. Y esta palabra está en tamaño grande dentro del mismo párrafo.
Tamaño de letra pequeño
Para resaltar un trozo de texto con un tamaño de letra más pequeño se utilizan las etiquetas <small> </small>. Estas etiquetas pueden (y deben) utilizarse dentro de las etiquetas de párrafo. Por ejemplo, el código siguiente:
<p>Este texto forma parte de un párrafo. Y esta <small>palabra</small> está en <small>tamaño
pequeño</small> dentro del mismo párrafo.</p>
Produce el siguiente resultado;
Este texto forma parte de un párrafo. Y esta palabra está en tamaño pequeño dentro del mismo párrafo.
Etiquetas obsoletas (no deben utilizarse)
Subrayado
Para resaltar un trozo de texto en subrayado se utilizan las etiquetas <u> </u>. Estas etiquetas pueden (y deben) utilizarse dentro de las etiquetas de párrafo. Por ejemplo, el código siguiente:
<p>Este texto forma parte de un párrafo. Y esta <u>palabra</u> está <u>subrayada</u> dentro
del mismo párrafo.</p>
Produce el siguiente resultado;
Este texto forma parte de un párrafo. Y esta palabra está subrayada dentro del mismo párrafo.
Tachado
Para tachar un trozo de texto con una línea a media altura se utilizan las etiquetas <s> </s> y <strike> </strike>. Por ejemplo, el código siguiente:
<p>Este texto forma parte de un párrafo. Y
esta <s>palabra</s> está <strike>tachada</strike> dentro del mismo párrafo.</p>
Produce el siguiente resultado;
Este texto forma parte de un párrafo. Y esta palabra está tachada dentro del mismo párrafo.
Cambiar el tipo de letra: la etiqueta <font>
Etiqueta de cierre obligatorio
Está desaprobada
Para resaltar un trozo de texto cambiando su tipo, color o tamaño de letra se utilizan las etiquetas <font> </font>. Estas etiquetas pueden (y deben) utilizarse dentro de las etiquetas de párrafo. Para controlar los aspectos del texto que se pretenden cambiar se utilizan los siguientes atributos dentro de la etiqueta:
Atributo size. Permite cambiar el tamaño de la letra. Puede tomar valores entre 1 y 7.
Atributo face. Permite cambiar la familia o tipo de letra. Los valores que toma se
corresponden con un tipo de letra: Arial, Tahoma, etc.
Atributo color. Permite cambiar el color de la letra. Puede tomar valores hexadecimales precedidos por el signo # seguido de tres parejas de dígitos hexadecimales que siguen el esquema RRGGBB (los dos primeros indican el nivel de rojo, los de enmedio el de verde y los de la derecha el de azul) o nombres de colores. En el siguiente enlace puedes consultar más información sobre los colores HTML: colores HTML en la wikipedia. Y en el siguiente enlace tienes un editor de colores que proporciona su valor hexadecimal: Editor de colores. En la imagen que se muestra a continuación aparecen los colores que se pueden utilizar con su nombre:
Se puede utilizar uno, dos o tres atributos a la vez dentro de la misma etiqueta <font>. Hay que recordar que el valor de los atributos se pone siempre entre comillas. Por ejemplo, el código siguiente:
<p><font color="green" face="Arial">Esta frase está en color verde y letra
Arial.</font> <font color="#FF0000" size="6">Esta frase está en color rojo y tiene tamaño
6.</font> <font face="Times">Y esta frase está en letra Times.</font></p>
Produce el siguiente resultado;
Esta frase está en color verde y letra Arial. Esta frase está en color rojo y tiene tamaño 6. Y esta frase está en letra Times.
Ejercicio 2:
Realiza una página web cuya apariencia sea similar a la que aparece en el siguiente cuadro. Guárdala con el nombre ejercicio2.html.