mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-27 19:02:21 +00:00
791 lines
18 KiB
HTML
791 lines
18 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>Estructura general - Tipos y cuerpos</title>
|
|
<link rel="stylesheet" href="../nvu2005.css" type="text/css">
|
|
<link rel="stylesheet" href="../multi2.css" type="text/css">
|
|
<!-- compliance patch for microsoft browsers --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
|
|
<link href="../body.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="localizador">
|
|
<p>La base>>Texto - Tipos y Cuerpos</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="texto2.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="estructurabasica.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="solapas">
|
|
<ul>
|
|
|
|
|
|
<li class="activo"><a href="texto1.html">Tipos
|
|
y cuerpos</a></li>
|
|
|
|
|
|
<li><a href="texto2.html">Enfatización</a></li>
|
|
|
|
|
|
|
|
<li><a href="texto3.html">Marcado
|
|
por contenido</a></li>
|
|
|
|
<li><a href="texto4.html">Justificación</a></li>
|
|
|
|
<li><a href="texto5.html">Títulos
|
|
o cabeceras</a></li>
|
|
|
|
<li><a href="texto6.html">Listas</a></li>
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="principal">
|
|
|
|
<h2>Unas cuestiones previas</h2>
|
|
|
|
|
|
|
|
|
|
<p>N|VU nos va a facilitar muchísimo el trabajo
|
|
traduciendo nuestras selecciones en un entorno visual a etiquetas <acronym title="Hypertext Markup Language">HTML</acronym>.
|
|
Además puede hacerlo de dos formas diferentes: utilizando
|
|
sólo etiquetas HTML o utilizando también
|
|
etiquetas <acronym title="Cascading Style Sheets">CSS</acronym> (Hojas
|
|
de estilo en cascada). Recuerda que si
|
|
ésta es tu primera toma de contacto con la
|
|
creación de páginas web sería
|
|
preferible que desactivaras la utilización de <acronym title="Cascading Style Sheets">CSS</acronym>.</p>
|
|
|
|
|
|
|
|
|
|
<p>Por otra parte, ahora que ya sabes la diferencia entre un
|
|
salto de renglón (<code><br></code>)
|
|
y un salto de
|
|
párrafo (<code><p></code>)
|
|
tendrás que tener en
|
|
cuenta un pequeño detalle: si estás trabajando en
|
|
cualquier modo que no sea el párrafo, N|VU
|
|
interpretará las pulsaciones de la tecla <img class="imgcentr" style="width: 22px; height: 24px;" alt="Intro" title="Intro" src="../imagenes/teclaintro.png"> como
|
|
saltos de
|
|
renglón. </p>
|
|
|
|
|
|
|
|
|
|
<p><img alt="Caja de selección de párrafo" title="Caja de selección de párrafo" src="img/parrafo.png" align="left" height="29" hspace="10" width="276">Para
|
|
que introduzca saltos de párrafo tendrás que
|
|
tener cuidado de que en la zona izquierda de la barra de herramientas
|
|
aparezca marcado el <strong>párrafo</strong>
|
|
como forma de inserción de texto. Siendo así, el
|
|
programa interpretará la pulsación simple de la
|
|
tecla <img class="imgcentr" style="width: 22px; height: 24px;" alt="Intro" title="Intro" src="../imagenes/teclaintro.png"> como
|
|
salto de
|
|
párrafo. Si quieres que se produzca únicamente un
|
|
salto de renglón tendrás que pulsar las teclas <img class="imgcentr" alt="Mayúsculas" title="Mayúsculas" src="../imagenes/teclamayusc.png" height="26" width="36">
|
|
+ <img class="imgcentr" style="width: 22px; height: 24px;" alt="Intro" title="Intro" src="../imagenes/teclaintro.png"></p>
|
|
|
|
<h2>Tipos y cuerpos</h2>
|
|
|
|
|
|
|
|
|
|
<p>El trabajo con procesadores de texto nos ha hecho adquirir una
|
|
cierta habilidad en la maquetación o tratamiento del aspecto
|
|
visual del texto. Esta situación se ha extendido
|
|
también a la creación de documentos para la web.
|
|
Si bien esto ha tenido una parte positiva, en tanto que ha ampliado el
|
|
control sobre el aspecto visual de nuestras producciones
|
|
también ha tenido una parte negativa: hemos perdido de vista
|
|
una parte importante de la estructura de la información. Si
|
|
te cuesta entender lo anterior puede que te resulte más
|
|
fácil si te haces una pregunta:
|
|
¿podría un ciego interpretar
|
|
correctamente un texto en el que los elementos que deseamos resaltar
|
|
están en un tamaño más grande o en un
|
|
color diferente?</p>
|
|
|
|
|
|
|
|
|
|
<p>Está claro que los elementos visuales son
|
|
importantes, pero lo que no debemos perder nunca de vista es la
|
|
organización de la información, de manera que
|
|
siempre quede organizada de una forma clara, ordenada y comprensible,
|
|
incluso si la despojamos de los atributos visuales.</p>
|
|
|
|
|
|
|
|
|
|
<p>Una vez hecha la salvedad anterior vamos a comenzar un
|
|
recorrido por los recursos de los que disponemos para modificar el
|
|
aspecto de un documento <acronym title="Hypertext Markup Language">html</acronym> Las
|
|
primeras operaciones sobre las que podríamos practicar
|
|
serían las referentes a la
|
|
modificación del tipo de letra y su tamaño (al
|
|
que se denomina cuerpo).</p>
|
|
|
|
|
|
|
|
|
|
<img class="flotizq" alt="Desplegable de tipos de letra en la 2ª barra de formato" title="Desplegable de tipos de letra en la 2ª barra de formato" src="img/tiposdeletra2.png" height="393" width="348"><img class="flotizq" alt="Menú de selección del tipo de letra" title="Menú de selección del tipo de letra" src="img/tiposdeletra.png" height="362" width="448"><br clear="all">
|
|
|
|
|
|
|
|
|
|
<p>Para acceder a los tipos de letra disponemos de las
|
|
dos posibilidades que se muestran en las imágenes:</p>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
<li>un desplegable en la 2ª barra de
|
|
formato </li>
|
|
|
|
|
|
|
|
|
|
<li>la opción de menú <span class="refmenu">formato </span><span class="refmenu"><img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><span class="refmenu"> tipo de letra</span><strong></strong>
|
|
que nos da acceso a las fuentes instaladas.</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<p>Tanto si estás trabajando en Windows como si lo
|
|
haces en Linux verás que los dos primeros grupos son
|
|
idénticos ya que se refieren a grandes categorías
|
|
el primero y a las principales familias de letras el segundo, pero en
|
|
cuanto empezamos a desarrollar el listado vemos que las coincidencias
|
|
desaparecen, ya que las fuentes empleadas en ambos sistemas son
|
|
diferentes, por lo que no te recomiendo que utilices fuentes especiales
|
|
de las que aparecen en el listado inferior. </p>
|
|
|
|
|
|
|
|
|
|
<p>Si lees las siguientes anotaciones de estilo podrás
|
|
entender las razones de esta recomendación.</p>
|
|
|
|
|
|
|
|
|
|
<div class="estilo">
|
|
<p>¿Cuántos tipos de letra tienes
|
|
instalados en tu ordenador? ¿Cincuenta?...
|
|
¿Ochenta?... ¿Más de cien?...</p>
|
|
|
|
|
|
|
|
|
|
<p>Seguramente estarás pensando que tienes un
|
|
montón de posibilidades a la hora de diseñar tus
|
|
páginas... pero, ¿qué
|
|
ocurrirá cuando un visitante de tu página no
|
|
tenga en su ordenador esa fuente caligráfica tan maravillosa
|
|
con la que tu página lucía tan espectacular?</p>
|
|
|
|
|
|
|
|
|
|
<p>Lo que sucederá es que el navegador del visitante
|
|
volverá a darle formato a toda la página
|
|
utilizando la fuente por defecto, que habitualmente suele ser de la
|
|
familia serif o Times New Roman, ... y adiós a tu preciosa
|
|
composición de la página.</p>
|
|
|
|
|
|
|
|
|
|
<p>Teniendo en cuenta lo anterior la recomendación es
|
|
que te ciñas a las fuentes que están instaladas
|
|
en la mayoría de los equipos: Times y
|
|
Arial-Helvética></p>
|
|
|
|
|
|
|
|
|
|
<p>Tras esta recomendación funcional vamos a entrar en
|
|
una segunda anotación de claro matiz estético:</p>
|
|
|
|
|
|
|
|
|
|
<dl>
|
|
|
|
|
|
|
|
|
|
<dt><span style="font-family: Times New Roman,Times,serif;">Times
|
|
New Roman</span>
|
|
:</dt>
|
|
|
|
|
|
|
|
|
|
<dd>Se llama así por haber sido popularizada por el
|
|
diario "The Times". Pertenece a la familia de las fuentes de tipo serif
|
|
o "con tacón" (por las curvas que rematan los extremos).
|
|
Suele dar un tono más formal a los escritos. Es de buena
|
|
legibilidad en papel y algo menos en pantalla.</dd>
|
|
|
|
|
|
|
|
|
|
<dt><span style="font-family: Helvetica,Arial,sans-serif;">Arial</span>
|
|
</dt>
|
|
|
|
|
|
|
|
|
|
<dd>Es la fuente de mayor uso de la familia de las
|
|
helvéticas, sans-serif o "de palo seco". Su
|
|
carácter es algo más informal y moderno que el de
|
|
la Times. Su legibilidad en pantalla es algo más alta que la
|
|
de la Times, ya que es ligeramente mayor a igualdad de cuerpo.</dd>
|
|
|
|
|
|
|
|
|
|
<dt><span style="font-family: Comic Sans MS;">Comic
|
|
Sans MS</span> : </dt>
|
|
|
|
|
|
|
|
|
|
<dd>No habíamos mencionado esta fuente que pertenece
|
|
al grupo de las fuentes de tipo caligráfico aunque tiene la
|
|
característica de que, al tratarse de una fuente sin
|
|
ligazón entre los caracteres, es muy legible en pantalla.
|
|
Es, entre las tres, la que aporta un carácter más
|
|
ligero e informal al texto, con un alto grado de legibilidad. Sin
|
|
embargo no la habíamos incluido en el listado de fuentes
|
|
más comunes por una cuestión esencial: es
|
|
exclusiva de los sistemas Windows, por lo que los navegadores que
|
|
corren bajo Linux la sustituyen por una letra de la familia
|
|
arial-helvética con una dimensión algo mayor. Ten
|
|
en cuenta este dato si quieres garantizar la compatibilidad y la
|
|
estabilidad del diseño interplataforma. <br> </dd>
|
|
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
<p>Y ahora una pregunta: ¿has visto alguna vez una de
|
|
esas cuartillas de publicidad de una imprenta que acaba de comprar un
|
|
nuevo ordenador? Digo lo del ordenador porque es sorprendente la
|
|
cantidad de
|
|
fuentes diferentes que caben en tan poco papel,... al fin y al cabo lo
|
|
importante es lo potente que es el ordenador, no que podamos enterarnos
|
|
de lo que pone. Así que ya sabes, una de las formas de
|
|
conseguir que tu página resulte impresentable es mezclar
|
|
diez o doce tipos de letra,... aunque puede que tengas la suerte de que
|
|
el navegador del visitante las sustituya por la fuente por defecto ;-)</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p><span class="flotizq"><img alt="Menú de tamaño de texto" title="Menú de tamaño de texto" src="img/tamaniotexto.png" height="148" width="118"></span>Además
|
|
del tipo de letra podemos jugar con el cuerpo de las mismas, esto es,
|
|
su tamaño. Antes de recurrir
|
|
a los iconos <span class="imgcentr"><img alt="Iconos de tamaño de texto en la barra de formato" title="Iconos de tamaño de texto en la barra de formato" src="img/tamaniotexto2.png" height="29" width="49"></span>
|
|
que aparecen en la barra de formato vamos a tomar en
|
|
consideración la opción de
|
|
menú <span class="refmenu">formato <img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"> tamaño</span>.
|
|
Cuando accedes a ella verás que hay una serie de
|
|
tamaños limitada y es importante que lo tengas en cuenta
|
|
porque los navegadores antiguos pueden tener problemas con
|
|
especificaciones de tamaño diferentes a la que se consigue
|
|
seleccionándolos desde aquí.</p>
|
|
|
|
|
|
|
|
|
|
<p>En el siguiente recuadro de códigos puedes ver una
|
|
explicación sobre los tamaños en las
|
|
especificaciones iniciales del lenguaje HTML.
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="codigo">
|
|
<p>En lenguaje HTML existen siete tamaños de letra. El
|
|
tamaño mayor sería equivalente, aproximadamente,
|
|
a los 36 puntos de un procesador de textos y el menor a un cuerpo de 8
|
|
puntos.</p>
|
|
|
|
|
|
|
|
|
|
<p>La forma de reflejarlo según el programa con el que
|
|
trabajemos es diferente. Mientras que algunos programas los numeran
|
|
correlativamente de 1 a 7, N|VU toma como punto neutro el tercer nivel
|
|
y numera como pasos negativos o positivos a partir de ese
|
|
tamaño. Encontraremos pues etiquetas de los siguientes tipos.</p>
|
|
|
|
|
|
|
|
|
|
<p><code><font size="1"></code> y
|
|
sucesivas</p>
|
|
|
|
|
|
|
|
|
|
<p><code><font size="-2"></code> hasta <code><font
|
|
size="+3"></code>que son las que crea N|VU.
|
|
(También podrías adjudicar manualmente el
|
|
tamaño +4 para el que no hay una opción en el
|
|
menú <span class="refmenu">Formato </span><span class="refmenu"><img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><span class="refmenu"> Tamaño</span>)</p>
|
|
|
|
|
|
|
|
|
|
<p> Cualquiera de los siguientes códigos
|
|
produciría el mismo efecto: </p>
|
|
|
|
|
|
|
|
|
|
<table style="text-align: left; width: 576px;" border="1" cellpadding="2" cellspacing="2" height="98" width="542">
|
|
|
|
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<th width="404">Código</th>
|
|
|
|
|
|
|
|
|
|
<th width="278">Resultado</th>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="1">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="1">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="-2">ejemplo</font></code> </td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="1">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="2">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="2">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="-1">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="-1">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="3">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="3">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="+0">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="+0">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="4">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="4">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="+1">ejemplo</font</code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"> <font size="+1">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="5">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="5">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="+2">ejemplo</font</code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="+2">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="6">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="6">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="+3">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="+3">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="7">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="7">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="404"><code><font
|
|
size="+4">ejemplo</font></code></td>
|
|
|
|
|
|
|
|
|
|
<td width="278"><font size="+4">ejemplo</font></td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
|
|
<p>Cuando veamos los códigos de páginas
|
|
también podremos encontrar variaciones de tamaño
|
|
por aplicación de las etiquetas <code><small></code>
|
|
para reducir y <code><big></code> para
|
|
ampliar. Dichas etiquetas pueden anidarse y con ellas
|
|
podríamos saltarnos la rígida
|
|
limitación que suponen los tamaños fijos que nos
|
|
impone la selección desde el menú.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p>Para obtener las modificaciones de tamaño mediante
|
|
anidación de las etiquetas <code><small></code>
|
|
y <code><big></code> utilizaremos los iconos
|
|
de la
|
|
barra de herramientas de formato <span class="imgcentr"><img alt="Iconos de tamaño de texto en la barra de formato" title="Iconos de tamaño de texto en la barra de formato" src="img/tamaniotexto2.png" height="29" width="49"></span></p>
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px;" alt="Actividad 4" title="Actividad 4" src="../imagenes/numeracion/cuatro.gif">
|
|
<ul>
|
|
<li>Crea un nuevo documento en la pestaña
|
|
<img style="width: 65px; height: 20px;" alt="Normal" src="../imagenes/pestananormal.png"> y escribe una frase.</li>
|
|
<li>Crea un párrafo indicando que lo que viene a
|
|
continuación son modificaciones de tamaño utilizando las
|
|
opciones de menú.</li>
|
|
<li>Escribe otro párrafo y ve seleccionando palabras y modificándolas mediante las posibilidades de <span class="refmenu">formato <img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"> tamaño</span></li>
|
|
<li>Crea otro párrafo para indicar que las modificaciones de
|
|
tamaño que aparecen a continuación se consiguen mediante
|
|
el uso del botón de cambio de tamaño de la barra de
|
|
herramientas.</li>
|
|
<li>Añade un nuevo párrafo, selecciona una
|
|
palabra y modifica su tamaño mediante una única
|
|
pulsación sobre aumentar o disminuir tamaño <span class="imgcentr"><img alt="Iconos de tamaño de texto en la barra de formato" title="Iconos de tamaño de texto en la barra de formato" src="img/tamaniotexto2.png" height="29" width="49"></span>. Selecciona otras palabra y modifica su tamaño con dos pulsaciones, tres, etc </li>
|
|
<li>Comprueba la forma en la que se visualiza y pasa
|
|
a la pestaña <img class="imgcentr" style="width: 99px; height: 21px;" alt="Codigo fuente" title="Codigo fuente" src="../imagenes/pestanacodigofuente.png"> para comprobar el código que se
|
|
ha introducido. en ambos casos.</li>
|
|
<li>Guarda tu trabajo como <strong>actividad4.html</strong></li>
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
<p><span class="imgcentr"></span></p>
|
|
|
|
|
|
<br>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|