mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-28 03:12:25 +00:00
161 lines
6.8 KiB
HTML
161 lines
6.8 KiB
HTML
<?xml version="1.0" encoding="iso-8859-1"?>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<html lang="es-es" xmlns="http://www.w3.org/1999/xhtml" xml:lang=
|
||
"es-es">
|
||
<head>
|
||
<meta content="text/html; charset=iso-8859-1" http-equiv=
|
||
"content-type" />
|
||
<title>
|
||
Estructura general - Enfatización
|
||
</title>
|
||
<link rel="stylesheet" href="../nvu2005.css" type="text/css" />
|
||
<link rel="stylesheet" href="../multi1.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]-->
|
||
</head>
|
||
<body>
|
||
<h2>
|
||
Justificación
|
||
</h2>
|
||
<p>
|
||
La justificación del texto por defecto se hace a la
|
||
izquierda, aunque podemos también hacerla centrada, a la
|
||
derecha o justificada a ambos lados.
|
||
</p>
|
||
<p>
|
||
N|VU, como los actuales editores gráficos de páginas web,
|
||
permite que marquemos la alineación justificada a ambos
|
||
lados, pero es posible que si utilizas algún editor más
|
||
antiguo no te ofrezca la posibilidad de justificar el texto
|
||
de forma completa. Eso se debe a que cuando se crearon no
|
||
se habían dictado aún las últimas especificaciones del
|
||
lenguaje HTML. En ese caso el texto nos quedará siempre "en
|
||
bandera", esto es sin alinear en los finales de renglón.
|
||
</p>
|
||
<p>
|
||
Además de la justificación por defecto podemos también
|
||
justificar el texto a partir del centro o a partir de la
|
||
derecha. Las etiquetas que encontraremos serán del
|
||
siguiente tipo:
|
||
</p>
|
||
<p class="codigo">
|
||
<code><div align="left"></code> y su correspondiente
|
||
cierre <code></div></code> marcan la justificación
|
||
izquierda y será la justificación que se utilice por
|
||
defecto si no indicamos otra cosa.<br />
|
||
<br />
|
||
<code><div align="center"></code>
|
||
y <code></div></code> marcan la justificación
|
||
centrada que repartirá el texto a partir del centro dejando
|
||
"banderas" a ambos lados del párrafo.<br />
|
||
<br />
|
||
<code><div align="right"></code> y
|
||
<code></div></code> delimitan un párrafo justificado
|
||
a partir del margen derecho.<br />
|
||
<br />
|
||
<code><div align="justify"></code>
|
||
y <code></div></code> delimitan un párrafo
|
||
justificado completamente en ambos márgenes.
|
||
</p>
|
||
<p class="avisos">
|
||
<img src="../imagenes/atencion.gif" align="left" height=
|
||
"25" width="28" alt="atención" /> La justificación completa
|
||
no tiene efecto en los de navegadores de versiones antiguas
|
||
y se convierte automáticamente en alineación a la
|
||
izquierda.
|
||
</p>
|
||
<p class="avisos">
|
||
<img src="../imagenes/atencion.gif" align="left" height=
|
||
"25" width="28" alt="atención" /> También podemos encontrar
|
||
escrita la alineación aplicando el atributo a la etiqueta
|
||
que define el párrafo <code><p
|
||
align="alineación"></p></code> en el que podrán
|
||
aparecer las palabras "left", "right", "center" o "justify"
|
||
como alineaciones.
|
||
</p>
|
||
<div class="practicas">
|
||
<img class="numact" style="width: 29px; height: 29px;" alt=
|
||
"Actividad 7" title="Actividad 7" src=
|
||
"../imagenes/numeracion/siete.gif" />
|
||
<ul>
|
||
<li>Crea un documento que incluya los siguientes
|
||
elementos: <br />
|
||
<ul>
|
||
<li>Un párrafo con la justificación por defecto, otro
|
||
con justificación centrada, otro con justificación a
|
||
la derecha y un último párrafo con justificación
|
||
completa.
|
||
</li>
|
||
<li>Alguna palabra resaltada en negrita, en itálica o
|
||
subrayada.
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>Guardamos el documento como <b>actividad7.html</b>
|
||
</li>
|
||
<li>Como viene bien ir tocando de vez en cuando el código
|
||
para familiarizarse, pasa a la pestaña <img style=
|
||
"width: 99px; height: 21px;" alt="Código fuente" src=
|
||
"../imagenes/pestanacodigofuente.png" /> y elimina alguna
|
||
de las etiquetas que has utilizado para resaltar y
|
||
modifica la alineación del párrafo que estaba justificado
|
||
a la derecha para que quede centrado. Guarda y
|
||
comprueba los resultados. <i>(Si algo no hubiera quedado
|
||
como habíamos previsto volvemos al </i><img style=
|
||
"width: 99px; height: 21px;" alt="Código fuente" src=
|
||
"../imagenes/pestanacodigofuente.png" /> <i>para
|
||
localizar el error, corregirlo y, una vez guardado el
|
||
documento, volver a comprobarlo)</i>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p>
|
||
Existe otra forma de dar formato al texto utilizando lo que
|
||
se denomina texto preformateado. En este caso, el navegador
|
||
sí que interpretará los saltos de línea que introduzcamos y
|
||
mantendrá los espacios que se introduzcan utilizando una
|
||
fuente de ancho fijo, pero esto tiene el peligro de que
|
||
nuestro texto puede quedar corto o largo en función de la
|
||
resolución de pantalla de la persona que visite la página.
|
||
</p>
|
||
<div class="practicas">
|
||
<img class="numact" style="width: 29px; height: 29px;" alt=
|
||
"Actividad 8" title="Actividad 8" src=
|
||
"../imagenes/numeracion/ocho.gif" />
|
||
<ul>
|
||
<li>Abre el primer trabajo que has realizado en la
|
||
actividad 2 (<strong>actividad2.html</strong>) y
|
||
visualízalo con la pestaña <img class="imgcentr" style=
|
||
"width: 99px; height: 21px;" alt="Codigo fuente" title=
|
||
"Codigo fuente" src=
|
||
"../imagenes/pestanacodigofuente.png" />.
|
||
</li>
|
||
<li>Localiza el principio del texto que has escrito en la
|
||
zona correspondiente al cuerpo de la página
|
||
</li>
|
||
<li>Coloca la etiqueta <code><pre></code> como
|
||
inicio del texto y, al final del mismo, la
|
||
correspondiente etiqueta de cierre
|
||
<code></pre></code>
|
||
</li>
|
||
<li>Guarda el trabajo como <b>actividad8.html</b> y
|
||
comprueba lo que ha ocurrido viéndolo en el navegador o
|
||
en la ventana <img class="imgcentr" style=
|
||
"width: 103px; height: 20px;" alt="Vista preliminar"
|
||
title="Vista preliminar" src=
|
||
"../imagenes/pestanavistapreliminar.png" />
|
||
</li>
|
||
<li>Lo que acabamos de hacer escribiendo directamente el
|
||
código podemos hacerlo también desplegando el formato de
|
||
parrafo en la barra de formato, donde encontraremos la
|
||
opción <span class="refmenu">preformato</span>, pero
|
||
tendremos que tener seleccionado el texto que deseamos
|
||
que se muestre con dicho formato si queremos aplicarlo a
|
||
varios párrafos
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html>
|