TEMA 5 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. Ejemplo <em>Resalto este texto enfatizándolo </em>

<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 <strong>Este es importante y lo resalto para llamar la atención sobre él</strong>

<SUP> <SUB>Definen respectivamente, texto superior e inferior por ejemplo: La casa tenía 5m<sup>2</sup>
Era una sopa buenísima <sub> Gallina blanca</sub>

<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. Esto es un ejemplo de cómo se añade un texto<INS>Esto añadido</INS>

<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 Ejemplo, este texto ha sido <del>eliminado</del> <ins>borrado</ins> del documento.

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. <code><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="title" content="t0m|ta mIRC: Instrucciones de andar por casa" />
<meta http-equiv="title" content="t0m|ta mIRC: Instrucciones de andar por casa" />
<meta name="keywords" content="html, xhtml, programación, php, asp, irc, undernet, mirc, webhosting, discusiones, opiniones" />
<meta name="description" content="Nadie nace sabiendo, encontrarás información sobre muchos temas y ayuda de otros usuarios" />
<meta name="author" content="tomatoma" /></code>

<KBD>Define un texto tecleado. Por ejemplo, en muchos manuales se dice: escribe “pepe “y pulsa enter. En html para definir que esa palabra pepe es algo que debemos teclear utilizamos esta etiqueta: escribe <kbd>pepe</kbd> 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. <samp><br /></samp>

<tt>
Texto tipo teletipo Ejemplo: Miguel cogió la máquina de escribir y tecleó: <tt>Queridos papá y mamá. </tt>

<var>Define un texto como una variable. Por ejemplo estamos explicando un trozo de código en que utilizamos por ejemplo la variable $mipage, escribiríamos <var>$mipage</var> es una variable que contiene el nombre de mi web.

<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 Ejemplo <abbr>Sr</abbr> es la abreviatura de Señor.

<acronym>Define un acrónimo: Ejemplo La <acronym>OTAN</acronym> es la Organización del Tratado del Atlántico Norte

<address>Define direcciones, se utiliza para direcciones, autores de documentos y firmas, normalmente aparece en itálica, aunque como siempre podremos cambiarlo con CSS <address>
Pepe Martínez<br />
C/ Las Flores nº 7<br />
VillaMartín de los héroes<br />
</address>

<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. Este texto está estupendo en español, pero <bdo dir="rtl" lang="arab">Está en árabe que lo escriben del revés</bdo>

<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: Y el rey dijo:  <blockquote>Como con el tiempo fue empeorando la situación familiar, la madre determinó mandar a Periquín a la ciudad, para que allí intentase vender la única vaca que poseían.

Como con el tiempo fue empeorando la situación familiar, la madre determinó mandar a Periquín a la ciudad, para que allí intentase vender la única vaca que poseían.

Como con el tiempo fue empeorando la situación familiar, la madre determinó mandar a Periquín a la ciudad, para que allí intentase vender la única vaca que poseían.
</blockquote>

<q> Se utiliza para citas cortas. Ejemplo: Y me pillo el jefe y me dijo <q> Perez!!!!!!</q>

<cite>Sirve también para citas, en este caso los navegadores suelen representar el texto en itálicas. Ejemplo: Y me pillo el jefe y me dijo <cite> Perez!!!!!!</cite >

<dfn>Sirve para delimitar un término que se va a definir: <dfn>Ensalada: </dfn> Conjunto de verduras, frutas y/o hortalizas aderezados.

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 Smile

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.

Aquí tenéis un listado de los caracteres especiales más comúnmente utilizados.

Tema 4 –  Indice –  Tema 6

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s