mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-28 03:12:25 +00:00
199 lines
6.9 KiB
HTML
199 lines
6.9 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 - Enfatización</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]-->
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div id="localizador">
|
|
<p>La base>>Texto - Enfatización</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="texto5.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="texto3.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
<div class="solapas">
|
|
<ul>
|
|
|
|
|
|
<li><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 class="activo"><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> 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"> 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">
|
|
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>
|
|
</div>
|
|
</body>
|
|
</html>
|