mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-27 19:02:21 +00:00
276 lines
10 KiB
HTML
276 lines
10 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html style="direction: ltr;" lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
|
|
|
|
|
|
|
|
|
|
|
|
<title>Estructura general - Etiquetas meta</title>
|
|
<link rel="stylesheet" href="../nvu2005.css" type="text/css">
|
|
|
|
|
|
|
|
<meta content="Raúl Luna" name="author">
|
|
|
|
|
|
|
|
<meta content="Explicación sobre el significado e importancia de las etiquetas de título y meta y la forma de crearlas en N|VU" name="description">
|
|
<!-- 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>>Etiquetas meta</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="../tablas/tablas1.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="pag2.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
<div id="contenido">
|
|
|
|
<h2>Etiquetas en la cabecera del documento</h2>
|
|
|
|
|
|
<p>Una vez que hemos decidido el "papel" sobre el que se
|
|
mostrarán nuestras páginas vamos a completar la
|
|
configuración de algunos elementos esenciales de la
|
|
página.</p>
|
|
|
|
|
|
<p>Es probable que hayas observado que hay
|
|
ocasiones en las que
|
|
vemos un texto en la barra de título de la ventana del
|
|
navegador. En otras ocasiones lo único que aparece es el
|
|
nombre del archivo que define la página. Lo que ocurra en
|
|
esa zona de la pantalla dependerá de que le hayamos dado un
|
|
título a nuestra página o no lo hayamos hecho.
|
|
¿No recuerdas que cada vez que has ido a guardar por primera
|
|
vez aparecía una ventana a la que probablemente no le has
|
|
hecho mucho caso?</p>
|
|
|
|
|
|
<p><img class="flotizq" style="width: 421px; height: 166px; float: left;" alt="Ventana de para introducir título de la página" title="Ventana de para introducir título de la página" src="img/titulo.png" hspace="10">Si prestamos un poco
|
|
de atención podemos ver que se nos explica con mucha
|
|
claridad la
|
|
utilidad del título que está solicitando.</p>
|
|
|
|
|
|
<p>Si ya habíamos guardado la página y
|
|
queremos hacer modificaciones podemos utilizar el
|
|
menú <span class="refmenu">Formato </span><span class="refmenu"><img class="imgcentr" style="font-weight: bold; width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><span class="refmenu"> Título
|
|
y propiedades de la página </span><strong></strong>e
|
|
introducir el
|
|
nuevo título en el campo correspondiente, aprovechando
|
|
incluso para completar el nombre del autor y una pequeña
|
|
descripción de la página. También
|
|
puede resultar cómodo utilizar la
|
|
visualización <b> <img class="imgcentr" style="width: 99px; height: 21px;" alt="Código fuente" title="Código fuente" src="../imagenes/pestanacodigofuente.png"> </b><strong>
|
|
</strong>y escribir el nuevo título entre las
|
|
etiquetas<code> <title></code> y <code></title></code>.</p>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 21" title="Actividad 21" src="../imagenes/numeracion/veintiuno.gif">
|
|
<ul>
|
|
|
|
|
|
<li>Abre con N|VU cualquiera de las páginas
|
|
que has guardado hasta el momento en las que no hayas escrito nada al
|
|
aparecer el mensaje pidiéndote título, o bien
|
|
crea una nueva página.</li>
|
|
|
|
|
|
<li>En la pestaña <img class="imgcentr" style="width: 65px; height: 20px;" alt="Normal" title="Normal" src="../imagenes/pestananormal.png">
|
|
elige<strong> </strong><span class="refmenu">formato </span><span class="refmenu"><img class="imgcentr" style="font-weight: bold; width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><span class="refmenu"> título
|
|
y propiedades de la página </span><strong></strong>
|
|
</li>
|
|
|
|
|
|
<li>Rellena los diferentes campos (Consulta la
|
|
información sobre códigos que aparece
|
|
después de este ejercicio para saber para qué
|
|
sirve cada uno de los campos que aparecen)</li>
|
|
|
|
|
|
<li>Puedes utilizar la vista <b> <img class="imgcentr" style="width: 99px; height: 21px;" alt="Código fuente" title="Código fuente" src="../imagenes/pestanacodigofuente.png">
|
|
</b><strong> </strong>para agregar alguna
|
|
etiqueta más de las
|
|
que aparecen en la ventana.</li>
|
|
|
|
|
|
<li>Guarda la página en tu carpeta con el nombre <strong>actividad21.html</strong></li>
|
|
|
|
|
|
<li>Aunque puedes comprobarlo de forma inmediata en la propia
|
|
barra de título de N|VU puedes utilizar el icono <img style="width: 54px; height: 43px;" alt="Navegar" title="Navegar" src="../imagenes/botonnavegar.png">
|
|
y ver que el navegador recoge también el título
|
|
que hemos introducido. </li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<img class="flotizq" style="width: 507px; height: 435px;" alt="Panel para especificar las principales propiedades de la página" title="Panel para especificar las principales propiedades de la página" src="img/propiedadesdepagina.png">El panel al que accedemos
|
|
al pulsar <span class="refmenu">formato </span><span class="refmenu"><img class="imgcentr" style="font-weight: bold; width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><span class="refmenu"> título
|
|
y propiedades de la página </span> nos
|
|
muestra en primer lugar un bloque dedicado a los campos principales de
|
|
información general: el título, el autor y la
|
|
descripción.</p>
|
|
|
|
|
|
<p>El campo descripción es esencial cuando queremos
|
|
dar publicidad a nuestra página y hay que procurar darle un
|
|
contenido claro y significativo, porque muchos buscadores lo utilizan
|
|
como primera referencia para ofrecerle al usuario
|
|
información sobre el contenido de la página.</p>
|
|
|
|
|
|
<p>En cuanto a los campos de internacionalización, el
|
|
idioma y la dirección de escritura no son realmente
|
|
etiquetas meta, sino atributos del elemento html. </p>
|
|
|
|
|
|
<br clear="all">
|
|
|
|
|
|
<div class="codigo">
|
|
<p>Los campos que aparecen en la ventana
|
|
de
|
|
propiedades son invisibles para el visitante, salvo el de
|
|
título. Entonces ¿para qué rellenarlos?</p>
|
|
|
|
|
|
<p>Su utilidad es de cara a los programas araña que
|
|
lanzan los
|
|
índices y motores de búsqueda para buscar
|
|
direcciones de páginas. Estos programas buscan en la
|
|
cabecera del documento y recogen información de las
|
|
etiquetas meta, algunas de las cuales son:</p>
|
|
|
|
|
|
<p><code><meta name="author"
|
|
content="nombre del autor de la página"></code>No
|
|
tiene más validez que la de "firmar" la autoría.</p>
|
|
|
|
|
|
<p><code><meta name="description"
|
|
content="la descripción del contenido"></code>
|
|
Si no hay una etiqueta de descripción los robots suelen
|
|
utilizar las primeras palabras del texto.</p>
|
|
|
|
|
|
<p><code><meta
|
|
name="classification" content="palabras separadas por comas"></code>
|
|
Los índices agrupan las páginas por
|
|
categorías. Si tenemos palabras que coincidan con las
|
|
categorías del índice nuestra página
|
|
se incluirá en ese grupo.</p>
|
|
|
|
|
|
<p><code><meta name="keywords"
|
|
content="palabras o frases separadas por comas"></code>
|
|
Si definimos con acierto los términos por los que esperamos
|
|
que nos puedan buscar nuestros visitantes conseguiremos que los
|
|
buscadores ofrezcan el enlace a nuestra página en una
|
|
posición relevante cuando un internauta busque uno de esos
|
|
términos. La cantidad máxima de palabras clave es
|
|
de cincuenta.</p>
|
|
|
|
|
|
<p><code><meta name="robots"
|
|
content="all"></code> Indica a los robots de los
|
|
buscadores que tienen que indexar todas las páginas del
|
|
sitio web.</p>
|
|
|
|
|
|
<p><code><meta name="robots"
|
|
content="index,nofollow"></code> Indica a los
|
|
robots de los buscadores que tienen que indexar la página
|
|
pero no deben seguir los enlaces que pueda haber en ella.</p>
|
|
|
|
|
|
<p><code><meta name="robots"
|
|
content="noindex,nofollow"></code> Indica a los
|
|
robots de los buscadores que no tienen que indexar la página
|
|
ni seguir los enlaces que pueda haber en ella.</p>
|
|
|
|
|
|
<p><code><meta name="robots"
|
|
content="noindex,follow"></code>
|
|
Indica a los robots de los buscadores que tienen que no tienen que
|
|
indexar la página pero que sí deben seguir los
|
|
enlaces que pueda haber en ella para indexar el resto de
|
|
páginas.</p>
|
|
|
|
|
|
<p><code><meta HTTP-EQUIV="refresh"
|
|
content="segundos; url=http://una.nueva.direccion"></code>
|
|
Permite redirigir de forma automática el navegador a una
|
|
determinada página al pasar el número de segundos
|
|
especificado en content. Es útil cuando se cambia una
|
|
página de dirección después de llevar
|
|
tiempo en la red, para que los que lleguen a la página
|
|
antigua a través de algún enlace puedan ir a la
|
|
nueva localización sin necesidad de tener la
|
|
dirección de ésta.</p>
|
|
|
|
|
|
<p><code><meta
|
|
HTTP-EQUIV="Window-target" content="_top"></code>
|
|
Hace que nuestra página se cargue automáticamente
|
|
en una ventana nueva evitando que quede encerrada en una estructura de
|
|
marcos desde la que se la haya llamado.</p>
|
|
|
|
|
|
<p><code><meta
|
|
HTTP-EQUIV="Content-Type" CONTENT="text/html;
|
|
charset=ISO-8859-15></code> Indica que el
|
|
contenido del documento es un archivo html codificado con el conjunto
|
|
de caracteres propio de Europa Occidental, que incluye las vocales
|
|
acentuadas,
|
|
las eñes, el símbolo del euro, etc.
|
|
Verás que el valor por defecto para esta etiqueta
|
|
cuanto estamos trabajando en castellano es ISO-8859-1 que es
|
|
el
|
|
genérico occidental que
|
|
no incluía el símbolo del del euro.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p class="derecha">Salvo que recurramos a una
|
|
extensión, la
|
|
única forma de insertar etiquetas meta es
|
|
haciéndolo
|
|
directamente en el código desde la pestaña <b>
|
|
<img class="imgcentr" style="width: 99px; height: 21px;" alt="Código fuente" title="Código fuente" src="../imagenes/pestanacodigofuente.png"></b><br>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|