mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-27 19:02:21 +00:00
264 lines
11 KiB
HTML
264 lines
11 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 - Etiquetado por contenido</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>
|
|
|
|
<div id="localizador">
|
|
<p>La base>>Texto - Etiquetado por contenido</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="texto4.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="texto2.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
<body>
|
|
<div class="solapas">
|
|
<ul>
|
|
|
|
|
|
<li><a href="texto1.html">Tipos
|
|
y cuerpos</a></li>
|
|
|
|
|
|
<li><a href="texto2.html">Enfatización</a></li>
|
|
|
|
|
|
|
|
<li class="activo"><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>Etiquetado por contenido</h2>
|
|
|
|
<p> Existen otras etiquetas que sirven para indicar claramente el
|
|
tipo de contenido que se está mostrando. En un primer
|
|
momento las utilizarás poco, aunque si te atreves no es mala
|
|
práctica que te acostumbres desde el principio a marcar
|
|
correctamente los contenidos. Algunos de los tipos de contenido no
|
|
tienen una opción para introducirlos desde el
|
|
menú en la actual versión de N|VU y hay
|
|
que introducirlos manualmente en la pestaña <img class="imgcentr" style="width: 99px; height: 21px;" alt="Codigo fuente" title="Codigo fuente" src="../imagenes/pestanacodigofuente.png">.
|
|
Sin embargo, la mayoría están accesibles desde 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">Estilo
|
|
de texto</span>. Aquí tienes una lista de los estilos
|
|
relacionados con el contenido con su efecto visual:</p>
|
|
|
|
<dl>
|
|
|
|
<dt><img class="flotder" style="width: 140px; height: 286px;" alt="Menú de estilos de texto según contenido" title="Menú de estilos de texto según contenido" src="img/estilodetextoxcontenido.png">Abreviatura <code><abbr></abbr></code></dt>
|
|
|
|
<dd>Se utiliza para indicar que el texto es una abreviatura,
|
|
por ejemplo, <abbr title="adjetivo">adj.</abbr> por
|
|
adjetivo. Si, además de marcar la abreviatura con este
|
|
código especificamos como atributo title del mismo el
|
|
significado de la abreviatura, dicho significado se mostrará
|
|
al detener el ratón sobre la palabra (salvo en Internet
|
|
Explorer 6 que no lo muestra) </dd>
|
|
|
|
<dt>Acrónimo <code><acronym></acronym></code></dt>
|
|
|
|
<dd>Similar al anterior pero para indicar que lo que sigue es
|
|
un acrónimo
|
|
con las siglas de algún organismo, grupo,
|
|
institución, etc. Ej.: <acronym title="Hypertext Markup Language">html</acronym>. Si
|
|
se especifica el atributo title para que recoja el significado
|
|
del acrónimo dicho significado se mostrará al
|
|
detener el ratón sobre el término (En este caso
|
|
Internet Explorer 6 sí que lo muestra aunque no marca
|
|
visualmente el
|
|
acrónimo, cosa que sí hacen el resto de
|
|
navegadores). </dd>
|
|
|
|
<dt>Origen de Cita <code><cite></cite></code></dt>
|
|
|
|
<dd>Se usa para indicar la fuente de una cita, como por ejemplo
|
|
el autor o el título de
|
|
un libro. Ej.: La cita anterior pertenece a <cite>El ingenioso
|
|
hidalgo Don Quijote de la Mancha</cite></dd>
|
|
|
|
<dt>Cita textual en línea<code>
|
|
<q></q></code></dt>
|
|
|
|
<dd>Se utiliza para recoger una cita textual. Los navegadores
|
|
(salvo Internet Explorer) entrecomillan automáticamente la
|
|
cita. Ej.:<q>En un lugar de la Mancha, de cuyo ...</q><strong>
|
|
Nota:</strong>
|
|
La opción cita que puede verse en el menú no
|
|
corresponde a este código sino al que denominamos <span style="font-style: italic;">"Origen de la cita"</span>,
|
|
por lo que si queremos utilizarlo habrá que introducir la
|
|
etiqueta directamente en la pestaña<img class="imgcentr" style="width: 99px; height: 21px;" alt="Codigo fuente" title="Codigo fuente" src="../imagenes/pestanacodigofuente.png">o
|
|
desde la ventana a la que nos da acceso la opcion de menú <span class="refmenu">insertar<img class="imgcentr" style="height: 13px; width: 14px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><span class="refmenu">html</span></dd>
|
|
|
|
<dt>Cita textual en bloque<code><blockquote></blockquote></code></dt>
|
|
|
|
<dd>Su función es la misma que la de la cita en
|
|
línea, pero mientras ésta se utiliza para citar
|
|
frases que se insertan en el flujo del texto (de ahí su
|
|
nombre "en línea"), la cita en bloque se utiliza para
|
|
bloques de texto más extensos. La mayoría de los
|
|
navegadores representan las citas en bloque aumentando el sangrado del
|
|
bloque, tanto a la izquierda como a la derecha, aunque no entrecomillan
|
|
la cita. El resultado sería el que se puede apreciar en el
|
|
siguiente ejemplo:
|
|
<blockquote>Tan pronto como estuvo en su
|
|
habitación se
|
|
precipitó a abrir los
|
|
cajones de su escritorio: todo se encontraba en perfecto orden pero la
|
|
excitación le impidió descubrir enseguida los
|
|
documentos que buscaba.
|
|
Terminó por encontrar la licencia para andar en bicicleta y
|
|
ya se
|
|
disponía a presentársela al agente cuando,
|
|
mudando de proceder, lo
|
|
estimó insuficiente por lo que continuó buscando
|
|
hasta que encontró su
|
|
partida de nacimiento. <cite>Franz Kafka. El proceso.</cite></blockquote>
|
|
|
|
<strong>Nota:</strong>
|
|
Tampoco disponemos de una opción en los menús
|
|
para introducir este código, por lo que también
|
|
tendremos que hacerlo manualmente en la pestaña<img class="imgcentr" style="width: 99px; height: 21px;" alt="Codigo fuente" title="Codigo fuente" src="../imagenes/pestanacodigofuente.png">o
|
|
desde la ventana a la que nos da acceso la opcion de menú <span class="refmenu">insertar<img class="imgcentr" style="height: 13px; width: 14px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><span class="refmenu">html</span> </dd>
|
|
|
|
<dt>Definición<code>
|
|
<dfn></dfn></code></dt>
|
|
|
|
<dd>Marca un texto como término que va a ser
|
|
definido a continuación en el flujo normal del texto. Ej.:
|
|
El f<dfn>onema</dfn> es la unidad mínima de
|
|
articulación lingüística.</dd>
|
|
|
|
<dt>Código<code>
|
|
<code></code></code></dt>
|
|
|
|
<dd>Indica que el texto es código de un programa de
|
|
ordenador. Ej.: <code class="codesinestilo"><script
|
|
type="text/javascript"
|
|
language="JavaScript">document.write(t6)</script> </code><strong>Nota:</strong>
|
|
en esta documentación se han utilizado reglas <acronym title="Cascading Style Sheets">CSS</acronym> para
|
|
modificar la apariencia de los elementos de código,
|
|
mostrándolos con la apariencia <code><código></code></dd>
|
|
|
|
<dt>Salida de ejemplo<code>
|
|
<samp></samp></code></dt>
|
|
|
|
<dd>Indica que el texto es el resultado ofrecido por un
|
|
programa de ordenador. Ej.: <samp>No se encuentra el archivo</samp></dd>
|
|
|
|
<dt>Entrada de teclado <code><kbd></kbd></code></dt>
|
|
|
|
<dd>Indica que el texto es lo que un usuario teclea en un
|
|
ordenador. Ej.: Introduzca el siguiente
|
|
número de serie: <kbd>A2345J87</kbd></dd>
|
|
|
|
<dt>Variable<code> <var></var></code></dt>
|
|
|
|
<dd>Sirve para marcar una variable de un programa de ordenador.
|
|
Ej.: <var>b=45</var></dd>
|
|
|
|
</dl>
|
|
|
|
<p>Como has comprobado las variaciones de apariencia son escasas
|
|
y, además, varias de estas etiquetas están
|
|
intimamente relacionadas con el mundo e la programación y
|
|
los ordenadores, por lo que es bastante probable que no las necesites.
|
|
De todas maneras no estaría de más que tuvieras
|
|
en cuenta las etiquetas <code><abbr></code>,
|
|
<code><acronym></code>, <code><q></code>,
|
|
<code><cite></code> y <code><dfn></code>
|
|
porque, además de ahorrarte el trabajo de que tengas que
|
|
especificar la apariencia del texto, pueden ser muy útiles
|
|
para facilitar la accesibilidad a programas lectores para personas
|
|
invidentes que podrán leer el contenido e informar
|
|
claramente al visitante del tipo de contenido exacto de cada elemento
|
|
de la página.</p>
|
|
|
|
<p>Además de estas opciones, también
|
|
tenemos la etiqueta de dirección <code><address></address></code>
|
|
que nos permitirá indicar que una referencia corresponde a
|
|
una
|
|
dirección física o bien una dirección
|
|
electrónica. Al tratarse de una etiqueta que se aplica a
|
|
todo un
|
|
párrafo no podremos acceder a ella mediante 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">Estilo
|
|
de texto</span> que nos permite especificar un estilo para una
|
|
palabra o grupo de palabras. Lo encontraremos en el
|
|
desplegable <span class="refmenu">tipos de
|
|
párrafo</span> de la <span class="refmenu">barra
|
|
de formato.</span></p>
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px;" alt="Actividad 6" title="Actividad 6" src="../imagenes/numeracion/seis.gif">
|
|
<ul>
|
|
|
|
<li>Si ya has empezado a diseñar una
|
|
página en la que
|
|
figure una dirección física, como por ejemplo la
|
|
de tu
|
|
centro, sitúa el ratón sobre la
|
|
dirección postal
|
|
del mismo y márcala como dirección. En caso de no
|
|
ser
|
|
así puedes crear una nueva página al efecto en la
|
|
que se
|
|
incluya una dirección postal.</li>
|
|
|
|
<li>Comprueba que no ha hecho falta
|
|
señalar todo el
|
|
texto, ya que la etiqueta se ha aplicado a todo el párrafo.
|
|
(De
|
|
hecho es probable que, si la dirección no estaba en un
|
|
párrafo individual te veas en la necesidad de separarla para
|
|
que
|
|
no se aplique el tipo de párrafo a otros elementos)</li>
|
|
|
|
<li>El tipo dirección se hereda, por lo que si
|
|
pulsas la tecla <img class="imgcentr" style="width: 22px; height: 24px;" alt="Intro" title="Intro" src="../imagenes/teclaintro.png">verás
|
|
que el siguiente párrafo sigue mostrándose
|
|
también
|
|
como dirección por lo que tendrás que recurrir al
|
|
selector de <span class="refmenu">tipos de
|
|
párrafo</span> para volver a convertirlo en el tipo
|
|
adecuado.</li>
|
|
|
|
<li>Si has creado una página específica
|
|
para realizar la actividad guárdala como
|
|
<strong>actividad6.html</strong>. En caso contrario, si has aplicado la
|
|
técnica a una página que ya estabas creando,
|
|
puedes mantener su nombre. </li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
</div>
|
|
</body>
|
|
</html>
|