Manual de HTML para principiantes - Formato del texto

Cómo hacer una página separada para cada "formato" de texto complicaría mucho este tema, hemos preparado un sólo archivo con todos los formados que podéis consultar aquí.

FORMATO LÓGICO Y FORMATO FÍSICO
FORMATO LÓGICO
Son aquellas etiquetas que definen la estrucutra de la página, que le dicen al navegador, esto es un encabezado, o esto es un texto importante, o esto es un listado. Ejemplos de este tipo de etiquetas son <h1><em> o <strong>

FORMATO FÍSICO
Son aquellas etiquetas que definen la apariencia visual de la página, sin aportar ningún significado semántico o estructura. En XHTML todas estas etiquetas desaparecen y deben utilizarse hojas de estilo en cambio. Ejemplo de este tipo de etiquetas son <b> (negritas) <i> itálicas o <u> subrayado.

Para ver un listado completo de etiquetas podéis pasaros por: http://www.w3schools.com/html/html_reference.asp

ELEMENTOS DE BLOQUE Y ELEMENTOS DE LÍNEA
Todas o casit todas las etiquetas HTML pueden clasificarse en uno de estos dos grupos: o son elementos de bloque, o son elmentos de línea. Esta distinción es importante. Los elementos de bloque, como su nombre indican se utilizan para formatear bloques de texto independientes, suelen ser fácilmente disinguibles porque incorporan saltos de línea (aunque esto se puede cambiar con CSS. Los elementos de línea en cambio se se pueden introducir en mitad del texto sin causar ningún tipo de efecto secundario y pueden utilizarse para dar formato incluso a un caracter aislado.

Dentro de un elemento de bloque se pueden introducir elementos de línea, pero dentro de los elementos de línea no se pueden introducir elementos de bloque.

Elementos de bloque: P, H1, H2, H3, H4, H5, H6, UL, OL, PRE, DL, DIV, NOSCRIPT, BLOCKQUOTE, FORM, HR, TABLE, FIELDSET, ADDRESS

Elementos de línea: El resto de las etiquetas.

DIV Y SPAN
Son dos etiquetas un poco especiales, y sin CSS poco tienen que aportar.

<div></div> se limita a decir: "soy un elemento de bloque" y todas mis características se aplican a todo este bloque.
También es con esta etiqueta con la que se definen las "capas". Cómo las capas implican un uso exhaustivo de CSS, las veremos al estudiar CSS.

<span></span> se limita a decir: "soy un elemento de linea" y todas mis características se aplican a todo este bloque.

Cuando entremos en CSS podremos ver la potencia real de estas etiquetas.

GENERAL
<B>Define un texto en negritas Ejemplo <b>Esto está en negritas</b>. No aconsejamos su utilización puesto que no aporta ningún significado semántico, utilizad <strong> en cambio.

<BIG>Define un texto como grande Ejemplo <big>Este texto es más grande </big>. No aconsejamos su utilización puesto que no aporta ningún significado semántico, utilizad hojas de estilo o encabezados en cambio.

<EM>Enfatiza un texto, los navegadores suelen presentarlo en itálica, aunque esta "presentación puede modificarse con hojas de estilo.

<I>Define un texto como itálica Ejemplo <i>Este texto está en itálica </i>. No aconsejamos su utilización puesto que no aporta ningún significado semántico, utilizad <em>.

<SMALL>Define un texto como pequeño Ejemplo <small>Este texto es más pequeño </small>. No aconsejamos su utilización puesto que no aporta ningún significado semántico, utilizad hojas de estilo.

<STRONG>Resalta la importancia de un texto, normalmente utilizando negritas

<SUP> <SUB>Definen respectivamente, texto superior e inferior por ejemplo:

<INS> Define texto insertado, cómo cuando se utiliza el control de cambios en word. Pensemos que el html en su origen sería principalmente para intercambiar documentos científicos así con la etiqueta ins el autor podía indicar qué texto había insertado en el original.

<DEL> Texto borrado. Al igual que en el caso anterior es útil cuando hay varias personas trabajando en un documento compartido señalando qué texto ha sido borrado del documento original. Suele representar dicho texto tachándolo

Formatos de salida

<CODE>Define que el texto afectado es código. Por ejemplo al poneros ejemplos y de cómo se utiliza cada etiqueta, utilizo la etiqueta <code> así el navegador sabe que eso es código y que debe mostrarlo tal cual.

<KBD>Define un texto tecleado. Por ejemplo, en muchos manuales se dice: escribe "pepe "y pulsa enter.

<samp>Define una muestra de código, en este caso no se trata de un código completo sino sólo de una muestra.

<tt> Texto tipo teletipo

<var>Define un texto como una variable. Por ejemplo estamos explicando un trozo de código en que utilizamos

<pre>Texto predefinido. Recordáis que dijimos que al html le daban igual los espacios, las tabulaciones y los retornos de carro que escribieráis, bien pues con esta etiqueta, podemos forzar al html a aceptar esos retornos de carro y esas tabulaciones. Ya hemos visto un ejemplo en el tema anterior.

Formatos de citas, abreviaturas y definiciones

<abbr>Define una abreviatura

<acronym>Define un acrónimo:

<address>Define direcciones, se utiliza para direcciones, autores de documentos y firmas, normalmente aparece en itálica, aunque como siempre podremos cambiarlo con CSS

<bdo>Sirve para indicar la dirección del texto. Supongamos por ejemplo, que estamos escribiendo un texto en árabe que se escribe de derecha izquierda, tendríamos que indicarlo en el navegador.

<blokquote>Sirve para citar textos largos de al menos un párrafo, pues separa el texto citado del resto, y lo indenta. Por esta razón ha sido mal utilizado por muchos webmasters para crear sangrías. Ejemplo:

<q> Se utiliza para citas cortas.

<cite>Sirve también para citas, en este caso los navegadores suelen representar el texto en itálicas.

<dfn>Sirve para delimitar un término que se va a definir:

Cómo hacer una página separada para cada "formato" de texto complicaría mucho este tema, hemos preparado un sólo archivo con todos los formados que podéis consultar aquí.

CARACTERES ESPECIALES
Cómo ya hemos visto en HTML tenemos unas marcas especiales para indicar al navegador que se trata de una etiqueta y no de texto para mostrar en pantalla (< >), ¿Qué pasa si necesitamos mostrar el símbolo ">" o "<" en pantalla? Si los escribimos tal cual, nos cargamos todo nuestro documento html, haced la prueba

Para poder mostrar en pantalla un carácter de este tipo, que para HTML tiene un significado especial necesitamos utilizar un código especial. Estos caracteres especiales, se componen siempre de tres partes: un ampersand (&), el nombre del carácter especial, y un punto y como para indicar el final. Así para representar el símbolo <, tendríamos que escribir: &lt; (& le dice al navegador qué empieza un carácter especial, y ; que ya se ha terminado.