Estilos de HTML

Resumen
Llamamos estilos a los distintos efectos que se pueden aplicar al texto normal (negrita,
cursiva, subrayado, etc...). En HTML existen dos grupos principales de estilos los lógicos
y los físicos. Los físicos son aquellos que siempre causan un mismo efecto (negrita,
cursiva,...) y los lógicos indicarán un tipo de texto (cita, nombre de persona) que por sus
características tiene un modo de mostrarse propio.

Palabras claves: efectos, lógicos, físicos, estilos

Abstract

We call styles to the different effects that can be applied to normal text (bold, italic,
underline, etc...). In HTML there are two main groups of styles, logical and physical.
Physicists are those who always cause the same effect (bold, cursive,...) and the logicians
will indicate a type of text (citation, name of person) that by its characteristics has a way
of showing itself.

1. INTRODUCCIÓN Es más recomendado, sin embargo, utilizar

El código HTML se escribe en forma de
"etiquetas", mediante las cuales podemos
describir la estructura lógica y apariencia del
contenido. La apariencia que podemos
describir con HTML está bastante limitada,
pero el código se puede complementar y
mejorar mediante el uso de otros lenguajes.
Es el lenguaje de marcado predominante
para la elaboración de páginas web. Es
usado para describir la estructura y el
contenido en forma de texto, así como para
complementar el texto con objetos tales
como imágenes dándole estilos para dar una
mejor presentación.
el estilo lógico, ya que en este el modo en
que se ven los distintos efectos puede ser
definido por el usuario, de forma que se
pueda obtener una presentación
personalizada. Además en un futuro los
navegadores podrían añadir modos más
sofisticados de presentar los distintos estilos
y si están definidos de forma lógica la
adaptación es más sencilla.
2. MARCO TEÓRICO
En HTML existen dos grupos principales de
estilos: los lógicos y los físicos. Los físicos
indican un efecto (negrita, cursiva,...) y los
lógicos indican un tipo de texto (cita,
nombre de persona...), aunque a veces
EJEMPLO
pueden producir el mismo resultado.
<blink>Intermitente</blink>
Estilos Físicos. RESULTADO

El efecto se aplicará al texto expresado entre Intermitente

la etiquetas de inicio y fin. Los estilos físicos

<SUP> Texto en superíndice
son los siguientes:
EJEMPLO
<B> Muestra el texto en negrita
E = mc² <br />
EJEMPLO
20 km²
<b>Esto es un texto en negrita
mediante la etiqueta </b> RESULTADO

RESULTADO E = mc2

Esto es un texto en negrita mediante 20 km2

la etiqueta <b>
<SUB> Texto en subíndice

<I> transforma el texto en cursiva. EJEMPLO

H<SUB>2</SUB>O
EJEMPLO
RESULTADO
<i>Texto en cursiva </i>
H2O
RESULTADO
Texto en cursiva
<BIG> aumenta el tamaño del texto
respecto del tamaño del texto normal del
<TT> transforma el texto en una fuente documento.
mono espaciada
EJEMPLO
EJEMPLO <big>Texto mas grande</big>
<tt> texto en una fuente mono
RESULTADO
espaciada</tt>
RESULTADO Texto mas grande
texto en una fuente mono
espaciada <SMALL> disminuye el tamaño del texto
respecto del tamaño normal del documento,

<BLINK> texto parpadeante pudiéndose anidar con ella misma.

 EJEMPLO <VAR> Nombre de una variable que deba ser
<small>Este es un texto reemplazada por su valor real. Generalmente en
pequeño</small> cursiva o subrayada.
RESULTADO EJEMPLO
Este es un texto pequeño <var>mkd</var> make directory
RESULTADO
Estilo lógicos
mkd make directory.
Con estilos lógicos se formatea el texto de
acuerdo con su significado dentro del
<ADDRESS> se utiliza para designar
contexto en el que están.
direcciones o cuentas de correo electrónico.
<EM> para dar énfasis. Usualmente aparece
EJEMPLO
en cursiva.
EJEMPLO <address>¡Peligro descarga!</address>

<em>¡Peligro descarga!</em> RESULTADO

RESULTADO how_soon@gmail.com

¡Peligro descarga!
<BLOCKQUOTE> con el cual podemos
<CODE> Muestra como una fuente
insertar citas o texto diferenciado (Cita de
monoespaciada, generalmente Courier. Para
Bloque).El texto contenido entre estas
códigos de ordenador.
etiquetas aparecerá sangrado
EJEMPLO
EJEMPLO
<code>El fichero cabecera stdio.h</code>
<blockquote>(Dulce Et Decorum Est Bent
RESULTADO double, like old beggars under sacks,
El fichero cabecera stdio.h Knock-kneed, coughing like hags, we
cursed through sludge, </blockquote>
<SAMP> para mensajes estándar de
ordenadores. Se ve en formato fijo.
RESULTADO
EJEMPLO
(Dulce Et Decorum Est Bent
<samp>Segmentation fault: Core double, like old beggars under
dumped.</samp> sacks, Knock-kneed, coughing like
RESULTADO hags, we cursed through sludge

Segmentation fault: Core dumped.

<DFN> para una palabra que está siendo font-face: Indica el nombre (o nombres) del
definida. Normalmente aparece en cursiva. tipo de letra que se va a emplear.

EJEMPLO EJEMPLO
<dfn>Linux</dfn> sistema operativo de <font face="monotype corsiva">HOLA
http://aprende-web.net/html/html12_1.php
codigo abierto MUNDO </Font>
RESULTADO http://www2.uca.es/manual-
RESULTADO
Linux: sistema operativo de codigo html/estilos.htm HOLA MUNDO
abierto
3. CONCLUSIÓN

<CITE> Se usa para citas, títulos de libros, Gracias a los diferentes estilos que nos
películas, etc. Normalmente se muestra en ofrece el HTML, podemos obtener en el
cursiva. momento de la creación de sitios web o
aplicaciones resultados sorprendentes.
EJEMPLO
Podemos implementar todas las
<cite>la mujer del cuadro</cite>
herramientas que nos ofrece y construir un
RESULTADO
sitio dinámico, que motive al usuario a
La mujer del cuadro
explorar y explorar utilizando cada espacio
del sitio.
<STRIKE> indicamos que estamos ante un
4. BIBLIOGRAFÍA
texto que ya no es válido, por lo que
 http://fpsalmon.usc.es/genp/doc/cursos/
aparecerá tachado.
html/estilos.html
EJEMPLO
 http://www.pcweb.es/manual_html/mo
<strike>este texto es erroneo</strike>
strar.php?opcion=Estilos_f
RESULTADO
 http://aprende-
este texto es erroneo web.net/html/html12_3.php
Estilos de párrafos  https://www.uv.es/jac/guia/estilo1.htm

Font-size define el tamaño de los caracteres  http://www.clasespersonales.com/resu

men_html.pdf
EJEMPLO  http://www.pcweb.es/manual_html/mo
<font size="5"><b>Titular</b></font> strar.php?opcion=Estilos_l
RESULTADO

Titular