mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-28 03:12:25 +00:00
553 lines
7.6 KiB
HTML
553 lines
7.6 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 - Títulos o cabeceras</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 - Títulos o cabeceras</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="texto6.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="texto4.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><a href="texto4.html">Justificación</a></li>
|
|
|
|
<li class="activo"><a href="texto5.html">Títulos
|
|
o cabeceras</a></li>
|
|
|
|
<li><a href="texto6.html">Listas</a></li>
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="principal">
|
|
|
|
|
|
<h2>Los títulos o cabeceras</h2>
|
|
|
|
|
|
|
|
|
|
<p>Incluimos este tipo de etiquetas en esta sección de
|
|
formato pero es importante que tengas muy en cuenta el aviso que se
|
|
muestra a continuación. </p>
|
|
|
|
|
|
|
|
|
|
<div class="avisos">
|
|
<p>Aunque es frecuente utilizar los tamaños de
|
|
títulos como elementos que colaboran en el diseño
|
|
gráfico de la página <strong>no es
|
|
ésta su finalidad</strong>. </p>
|
|
|
|
|
|
|
|
|
|
<p>La función de los títulos es estructurar
|
|
los contenidos creando una jerarquía que ponga de manifiesto
|
|
la importancia de cada uno de los bloques en el esquema general.
|
|
Así pues, la recomendación es que,
|
|
aunque las variaciones de tamaño que introducen pueden
|
|
ayudarte al diseñar el aspecto gráfico, los
|
|
consideres como elementos que tienen que ver con la estructura de la
|
|
información y los utilices como titulares que te sirven para
|
|
para encabezar y organizar los contenidos en epígrafes
|
|
coherentes.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p>Sin tener en cuenta las personalizaciones que haya incluido el
|
|
usuario, cada navegador construye la página tomando un
|
|
tamaño base para la letra. Teniendo en cuenta este
|
|
dato, los títulos se construyen de forma escalonada tomando
|
|
como referencia este tamaño base y disponemos de seis
|
|
opciones para las mismas.</p>
|
|
|
|
|
|
|
|
|
|
<p>Para hacer que un texto se convierta en Título
|
|
bastará con colocarnos sobre cualquier punto del mismo y
|
|
seleccionar en el desplegable una de las posibilidades correspondientes.</p>
|
|
|
|
|
|
|
|
|
|
<p class="flotder"><img style="width: 189px; height: 287px;" alt="Menú de de selección de títulos" title="Menú de de selección de títulos" src="img/titulos1a6.png"></p>
|
|
|
|
|
|
|
|
|
|
<p>Si nos fijamos en el código fuente de la
|
|
página comprobaremos que las etiquetas de apertura se han
|
|
colocado delante de la primera letra del texto de la cabecera y se
|
|
cierra al final del mismo para volver al texto normal. <i>(Además
|
|
las etiquetas de Título introducen un salto de
|
|
párrafo sin necesidad de indicarlo)</i>.</p>
|
|
|
|
|
|
|
|
|
|
<table style="width: 520px; height: 269px;" border="0">
|
|
|
|
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<th style="width: 211px;">Este código...</th>
|
|
|
|
|
|
|
|
|
|
<th width="60"> </th>
|
|
|
|
|
|
|
|
|
|
<th width="235">...da como resultado</th>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="211">
|
|
|
|
|
|
|
|
<p><code><h1>Título
|
|
1</h1></code></p>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td width="60"> <img style="width: 29px; height: 29px;" alt="flecha hacia la derecha muestra el resultado" src="../imagenes/flechaderecha.gif"> </td>
|
|
|
|
|
|
|
|
|
|
<td vwidth="235">
|
|
|
|
|
|
|
|
<h1>Título 1</h1>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="211">
|
|
|
|
|
|
|
|
<p><code><h2>Título
|
|
2</h2></code></p>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td width="60">
|
|
|
|
|
|
|
|
<div align="center"> <img style="width: 29px; height: 29px;" alt="flecha hacia la derecha muestra el resultado" src="../imagenes/flechaderecha.gif"></div>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td vwidth="235">
|
|
|
|
|
|
|
|
<h2 class="h2limpio">Título 2</h2>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="211">
|
|
|
|
|
|
|
|
<p><code><h3>Título
|
|
3</h3></code></p>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td width="60">
|
|
|
|
|
|
|
|
<div align="center"> <img style="width: 29px; height: 29px;" alt="flecha hacia la derecha muestra el resultado" src="../imagenes/flechaderecha.gif"></div>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td vwidth="235">
|
|
|
|
|
|
|
|
<h3 class="h3limpio">Título 3</h3>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="211">
|
|
|
|
|
|
|
|
<p><code><h4>Título
|
|
4</h4></code></p>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td width="60">
|
|
|
|
|
|
|
|
<div align="center"> <img style="width: 29px; height: 29px;" alt="flecha hacia la derecha muestra el resultado" src="../imagenes/flechaderecha.gif"></div>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td vwidth="235">
|
|
|
|
|
|
|
|
<h4 class="h4limpio">Título 4</h4>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="211">
|
|
|
|
|
|
|
|
<p><code><h5>Título
|
|
5</h5></code></p>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td width="60">
|
|
|
|
|
|
|
|
<div align="center"> <img style="width: 29px; height: 29px;" alt="flecha hacia la derecha muestra el resultado" src="../imagenes/flechaderecha.gif"></div>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td vwidth="235">
|
|
|
|
|
|
|
|
<h5>Título 5</h5>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<td width="211">
|
|
|
|
|
|
|
|
<p><code><h6>Título
|
|
6</h6></code></p>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td width="60">
|
|
|
|
|
|
|
|
<div align="center"> <img style="width: 29px; height: 29px;" alt="flecha hacia la derecha muestra el resultado" src="../imagenes/flechaderecha.gif"></div>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td vwidth="235">
|
|
|
|
|
|
|
|
<h6>Título 6</h6>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
|
|
<p>Además del tipo y el cuerpo podemos modificar el
|
|
color de la letra y aplicarle cualquiera de los atributos
|
|
clásicos de enfatización: <b>negrita</b>,
|
|
<i>cursiva</i> o <u>subrayado</u>.</p>
|
|
|
|
|
|
|
|
|
|
<div class="practicas">
|
|
<div><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 9" title="Actividad 9" src="../imagenes/numeracion/nueve.gif"></div>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
<li>Crear un nuevo documento. </li>
|
|
|
|
|
|
|
|
<li> Escribir un texto en el que se incluya un
|
|
título y, al menos, un par de párrafos de
|
|
más de un renglón. </li>
|
|
|
|
|
|
|
|
<li>Modificar zonas del texto variando el tipo de letra, el
|
|
cuerpo, el color y los atributos de enfatización. </li>
|
|
|
|
|
|
|
|
<li>Utiliza la pestaña <img class="imgcentr" style="width: 99px; height: 21px;" alt="Codigo fuente" title="Codigo fuente" src="../imagenes/pestanacodigofuente.png">
|
|
para intentar localizar los códigos que reflejan los cambios
|
|
que vas introduciendo. </li>
|
|
|
|
|
|
|
|
<li>Guardar con el nombre <strong>actividad9.html</strong> </li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<br>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|