Elementos:
<title>, <base>, <meta>, <link>, <object>, <script> y <style>.
<title>
Definición: indica el nombre del sitio web en la barra o pestaña superior del navegador.
Apariencia: Se requieren etiquetas para cerrar y abrir.
Atributos: lang, dir.
Por ejemplo:
<head>
<title> Mi primera página </title>
</head>
<base>
Definición: Indica la raíz de la dirección del sitio web, que permite borrar las direcciones relativas.
Apariencia: sin etiqueta de cierre (V).
Atributos: href.
- href siempre se utiliza para indicar la dirección de la dirección del documento.
Ejemplo:
<base href = "http://www.michupipagina.es/">
Si hay una dirección relativa (por ejemplo, "/DAM.html"), se utilizará la dirección absoluta para completar: "http://www.michupipagina.es/DAM.html".
Ejercicio2.html:
Crea una pagina que se llame Ejercicio2.html con las siguientes características:
<meta>
Definición: indica algunas propiedades generales; Entre otros, el autor, la descripción, las palabras clave, el tipo de herramienta utilizada y el contenido.
Estas propiedades están cambiando constantemente; Es decir, se crean nuevas propiedades para expandir la información asociada con el documento. Las redes sociales son ejemplos de esto.
Sin embargo, el usuario habitual normalmente no se da cuenta de estas propiedades.
Apariencia: sin etiqueta de cierre (V).
Atributos: lang, dir, name, content, http-equiv, schema.
- name: indica el nombre de una propiedad. No hay una lista oficial de propiedades,
- content: recibe el valor de la propiedad especificada a través del nombre anterior; Así que estos dos atributos trabajan simultáneamente y proporcionan pares de valores.
Ejemplo:
<meta name ="description" content ="Lenguajes de marcas">
- http-equiv: representa una propiedad para el navegador en forma de encabezado http, como si el propio servidor http (Web) creara este encabezado. De ahí el nombre "http-equiv".
Valores: cache-control, content-type, set-cookie, pics-label, pragma, refresh, resource-type, content-script-type, content-style-type, window-target.
Tiene varios usos; Por ejemplo, indica el conjunto de librerias que se utilizarán en nuestro sitio web sin tener que realizar cambios en el servidor. También funciona con el atributo Content para proporcionar pares de valores.
Ejemplo:
<meta http-equiv = "content-type" content = "text/html; charset = iso-8859-15">
Esto indica que el contenido de la página es un texto HTML simple, con el conjunto de caracteres iso-8859-15 y el alfabeto latino
- schema: informa al navegador que se requiere un metadato para interpretar los metadatos especificados para evitar la ambigüedad.
Ejemplo:
<meta schema = "Europe" name = "date" content = "24-10-2012">
Esto indica que la fecha se lee a través del perfil "Europa", es decir: "dd-mm-aaaa".
Se clasifican en dos grupos (dependiendo de los dos atributos principales, aunque hay más):
<meta name> se utilizan principalmente para mejorar los resultados de los motores de búsqueda; es decir, para ayudar a los motores de búsqueda del sitio web.
La información utilizada no aparece en la pantalla.
<meta http-equiv>: se utilizan para dar instrucciones a los navegadores; es decir, establecer un control sobre ellos.
Tienen un impacto en lo que aparece en la pantalla.
1) Meta name
· Información general de la página:
abstract, author, copyright, date, generator
· Información específica para los motores de búsqueda
description, distribution, keywords, locality, rating, revisit-after, robots
· Administración del sitio:
google-site-verification, reply-to
2) Cuando http-equiv
· Tipo de contenido:
content-type, content-language, content-script-type
· Uso de cookies:
set-cookie
· Página de actualización / redirección:
refresh
· Transiciones de página:
page-enter, page-exit
· Control parental:
pics-label
· Uso del caché:
cache-control, pragma, last modified, expires
Meta name
abstract
Un breve resumen de etiquetas de descripción.
No utilizan todos los motores de búsqueda, a diferencia de la descripción.
author
Devuelve el autor del documento.
Es aconsejable proporcionar su nombre completo, incluyendo su nombre y apellidos.
<meta name = "author" content = "Joel Castro León">
(una etiqueta web_author se puede utilizar para indicar una página o un autor no creado por un grupo)
copyright
Es válido para la información de copyright.
<meta name = "copyright" content = "Garceta Editorial 2012">
Sin embargo, es aconsejable utilizar un icono o enlace que sea fácilmente visible para indicar que el documento está sujeto a derechos de autor.
date
El sitio web es válido para el día en que se creó.
<meta name = "date" content = "24 de febrero de 2010">
generator
Se utiliza para indicar la herramienta utilizada para crear el sitio web.
<meta name = "generator" content = "KompoZer">
Información específica del motor de búsqueda
- description
Explica los contenidos y objetivos del sitio web.
Esta información es utilizada por los motores de búsqueda para indexar la página; así que es importante poner el texto.
<meta name = "description" content = "Lenguaje de marcas y los sistemas de gestión de la información.">
El texto indicado en la descripción aparece cuando un usuario hace una búsqueda como resultado.
distribution
Se utiliza para indicar el nivel de expansión que deseamos para nuestro sitio web.
Niveles: global (Internet) | local (red local) | UI (uso interno).
<meta name = "distribution" content = "global">
No es recomendable usar esta etiqueta. La mejor manera de limitar el acceso a nuestro sitio web es configurar correctamente nuestro archivo .htaccess de servidor http o crear un archivo robots.txt para que los motores de búsqueda puedan indexarlos según nuestras preferencias.
- keywords
Enumera la lista de palabras clave sobre nuestro sitio web.
Esta etiqueta es muy útil para localizar nuestro sitio, pero debe usarse correctamente. El Spam se considera que incluye palabras que no están relacionadas con nuestro sitio con el fin de mejorar la ubicación del sitio web, y los motores de búsqueda pueden castigarlos.
<meta name = "keywords" content = "Educación, Ciclos, TI, LH, DAW, DAM, ASIR, SMR ">
- locality
El robot de indexación funciona para indicar dónde está el sitio web en la ciudad.
<meta name = "locality" content = "Bilbao, Euskadi">
Ejercicio4:
Ingresa 6 etiquetas en tu página, cambie el contenido de acuerdo a tu empresa y muéstrelas a través del navegador Chrome.
- rating
La página se puede utilizar para clasificar de acuerdo a la edad de los destinatarios, como es el caso de las películas. Hay mejores opciones; Por ejemplo, Pics-label.
<meta name = "rating" content = "general">
revisit-after
Los motores de búsqueda trabajan para volver a visitar nuestro sitio para que puedan ser re-indexados, ya que ha sido modificado.
<meta name = "revisit-after" content = "3 days">
Los motores de búsqueda tienen un patrón para volver a las páginas indexadas; Por lo tanto, no siempre cumplen con el contenido de esta etiqueta.
robots
Se utiliza para controlar los robots de los motores de búsqueda.
Los valores posibles son los siguientes:
<meta name = "robots" content = "index, nofollow">
Además de usar esta etiqueta, los motores de búsqueda se comunican a través del archivo robots.txt con el sitio web. Este archivo debe ser creado por el administrador del sitio y colocado en el directorio raíz.
Es fácil crear un archivo robots.txt. El texto es plano y se puede crear con un bloc de notas. El propósito principal del archivo es limitar la indexación general de nuestras páginas del sitio.
Utiliza algunas palabras clave, entre ellas:
User-agent (robot), Allow (izquierda), Disallow (prohibido)
Y valores:
* (todos los robots), / (todos los directorios).
Para evitar directorios o archivos específicos, deben deshabilitarse por separado.
El archivo es de sólo lectura. Los directorios y archivos deseados para cada robot pueden ser prohibidos, y cada agente de usuario es independiente.
Ejemplos:
User-agent: *
Allow: /
Todos los motores de búsqueda permiten la indexación de todas las páginas; archivo no es equivalente a la creación.
User-agent: *
Disallow:
Como arriba.
User-agent: *
Disallow: /imagenes/
Disallow: /js/
Evita la indexación de directorios para todos los motores de búsqueda: images y js.
User-agent: *
Disallow: /
User-agent: googlebot
Disallow: /
Allow: public
Evita que todos los robots indexen todas las carpetas y le permite indexar sólo el robot googlebot / directorio público.
Cabe señalar que incluso si una carpeta está indexada, si un enlace hace referencia a un recurso, aparecerá en las respuestas del motor de búsqueda. Para evitar esto, robots debe utilizarse con "noindex, nofollow".
Ejercicio5:
· Crea dos carpetas en su nuevo sitio: uno llamado public y otra llamado private.
· Crea un archivo robots.txt que no permita que indexe la carpeta privada
· Insertar una metaetiqueta para evitar hipervínculos.
Administración del sitio:
google-site-verification
El administrador del sitio se identifica en las herramientas de administración de sitios de google. Estas herramientas permiten al administrador analizar diferentes parámetros: visibilidad, consultas de búsqueda de sitios, sitemaps, errores, etc.
<metaname = "google-site-verification" content ="8EYm4qdOa4U0L8tRw9clHsjSbo_JOK0Jjlxaa4OtQAA">
reply-to
Proporciona una dirección de correo electrónico para ponerse en contacto con el administrador del sitio.
No es aconsejable usar esta etiqueta porque puede ser utilizada como una herramienta de spam; Otra opción es crear un formulario de contacto.
- Dublin-Core
El propósito de este proyecto es crear un estándar para el uso de metaetiquetas.
<meta name="dc.title" content="Enrique Rojo S. A.">
Meta http-equiv
- Content-type
Se utiliza para indicar los tipos de datos en el cuerpo de la página y también indica el conjunto de caracteres utilizado en el texto.
De acuerdo con RFC 822, el campo de tipo de contenido se define como sigue:
Content-Type: = tipo "/" subtipo [";" atributo = valor]
Los tipos MIME (Multipurpose Internet Mail Extensions - Múltiples extensiones múltiples de Internet) indican los tipos de tipos de archivo que son válidos.
< meta http-equiv = "content-type" content = "text/html; charset = iso-8859-1 ">
En este caso, hemos utilizado Latin 1 j, que es apropiado para nuestro idioma. Si queremos hacer que nuestro sitio web sea más internacional, usando nuestro conjunto de caracteres no alfabético, necesitamos charset utf-8.
Tiene todos los caracteres que pueden ser UTF-8 (formato de la transformación de Unicode - formato universal de la codificación), cada uno con un código. Para caracteres castellanos específicos (por ejemplo, para el mercado de acento o "ñ"), debemos utilizar los siguientes códigos:
á = á
é = é
í = í
ó = ó
ú = ú
Á = Á
É = É
Í = Í
Ó = Ó
Ú = Ú
ñ = ñ
- Content-language El idioma principal del documento es al mismo tiempo que lang. <meta http-equiv="content-language" content="es_es"> Los robots pueden utilizar el sitio web para clasificar por idioma. IANA ha definido la lista oficial de códigos de idioma. - content-script-type, content-style-type El lenguaje de secuencias de comandos predeterminado utilizado en los scripts y la hoja de estilos predeterminada en el documento. Normalmente no se usan, porque los navegadores los detectan automáticamente. Uso de cookies: - set-cookie Se utiliza para almacenar una cookie en el navegador del usuario. Una cookie es una información personal, como un nombre de usuario o sus preferencias, y mejora la navegación, cuando visitamos un sitio web de nuevo. Si se especifica la fecha de finalización, la cookie se almacenará hasta el momento indicado; Si no se especifica, se eliminará cuando se cierre el navegador. No es bueno usar esta etiqueta; Hoy en día, las cookies se utilizan a través de lenguajes del servidor, como PHP.
Página de actualización / redirección:refresh Indica cuánto tiempo espera que la página se actualice o se redirige automáticamente. <meta http-equiv="refresh" content="10"> Esto se suele utilizar en páginas que presentan información en tiempo real. <meta http-equiv="refresh" content="10;URL=http://otro_sitio.html"> Se puede utilizar para redirigir a otro sitio web. Si cambiamos el dominio, es mejor insertar un enlace para que redirecione al usuario; Alternativamente, se puede usar el método 301 de redirigir (el código en el lado del servidor debe ser insertado). Transiciones de página: - page-enter, page-exit Cuando la página se carga y sale, se utiliza para hacer transiciones como "Flash". <meta http-equiv="Page-Enter" content="blendTrans(duration=4)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=1. 5, transition=5)"> Sólo tienen un propósito estético; No funcionan en todos los navegadores. También se puede hacer a través de CSS3.
Control parental: - pics-label Se utiliza para indicar el grado de contenido moral. Para ello, se tienen en cuenta algunos parámetros; Entre otros, desnudos, violencia, lenguaje, comportamientos sociales, etc. Hay varias entidades de calificación, entre las cuales una de las más populares es ICRA (Internet Content Rating Association - Asociación de Clasificación de Contenido de Internet). Proporciona un creador de etiquetas gratuito. Ejemplo: <meta http-equiv="pics-Label" content='(pics-1. 1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://juanmacr.es" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1))'> Es recomendable usarlo, especialmente si el contenido no es adecuado para niños. Para obtener más información, visite este sitio web: http://www.fosi.org/icra/ Uso del caché: La memoria caché almacena la respuesta enviada por un servidor a una solicitud del cliente; por ejemplo, páginas HTML, imágenes y archivos. Por lo tanto, cuando el cliente solicita el mismo URI de nuevo, el caché enviará la respuesta almacenada, en lugar de una solicitud al servidor. El objetivo es mejorar el tiempo de respuesta y reducir el tráfico de red. Esta memoria puede estar en el navegador del cliente, en un servidor proxy en vivo; Por ejemplo, nuestro ISP (proveedor de servicios de Internet) o servidores Proxy inversos (que sirven como una copia de seguridad para muchas consultas). - cache-control Se utiliza para controlar la caché que el documento obtendrá. Estas son las opciones compatibles con el contenido: · Max-age = segundos El contenido es válido por el número de segundos que se considera válido. · S-maxage = segundos
Es similar a la directiva Max-age, pero solo se pueden establecer cachés compartidos. · Public Indica que los proxies intermedios pueden almacenar el documento. · Private Indica que el navegador del usuario puede almacenar el archivo, pero no los proxies intermedios (la página se personaliza para cada usuario). · no-cache Significa que no hay caché para consultar; Por lo tanto, el explorador obliga al servidor a solicitar una solicitud. · no-store Invoque el navegador después de que se muestre no guarde el documento en el caché. · must-revalidate Caché nos dice que tienen que completar todas nuestras reglas de caché. · Proxy-revalidate Similar a la anterior, para servidores proxy. Ejemplos:
<meta http-equiv="cache-control" content="max-age=3600">
<meta http-equiv="cache-control" content="no-cache">
Similar a la anterior, para servidores proxy.
- pragma El caché de página impide la consulta en la memoria; Por lo tanto, el navegador debe preguntar al servidor por cada página cada vez que deseemos mostrarla. Ejemplo: <meta http-equiv="pragma" content="no-cache">
cache-control = es equivalente a "no-cache", pero se utiliza cuando hay servidores proxy con protocolo http 1.0. - last modified Con esta etiqueta, el servidor verifica que el almacenamiento en caché del navegador es válido. El creador web necesita cambiar los datos cada vez que se actualiza la página. Ejemplo:
<meta http-equiv="last-modified" content="Mon, 12 Nov 2012 11:35:00 GMT">
El navegador envía los datos de "última modificación" al servidor web, junto con la solicitud de página, y el servidor verifica que la página está obsoleta o es válida. Si está obsoleto, la página se envía al cliente, pero si es válida, envía un mensaje "no modificado" y utiliza el navegador para almacenar en caché su página. - expires Indica cuando la página caduca. Ejemplo: <meta name="expires" content="Mon, 29 Oct 2012"> Formato de la fecha según RFC 1123: "día de la semana con tres letras, el día del mes con tres letras, el año con 4 dígitos, hh.mm.:ss GMT". A veces se utiliza con content = "0", para evitar que el navegador busque la caché, pero esto debe hacerse con controles de caché.
<link>
Definición: Define un enlace indicado a través de href que conduce a otro documento.
Apariencia: sin etiqueta de cierre (V).
Atributos: lang, dir, class, id, style, title, eventos intrínsecos, charset, href, hreflang, tipo, rel, rev y media.
- charset: establece el conjunto de caracteres utilizados en el documento.
- href: indica el URI del documento asociado.
- hreflang: indica el idioma del documento asociado.
- type: indica el tipo de contenido del documento asociado, para evitar que el navegador lo abra, si no tiene ningún medio.
Aquí están los tipos más comunes de contenido: text/html, text/css, image/png, image/gif, image/x-icon, video/mpeg y audio/basic
Tipos de contenido de documentos Xml: application/rss + xml, application/atom + xml.
Otros: application/x-shockwave-flash, application/opensearchdescription + xml.
- rel: establece la relación entre documentos originales y de destino.
- rev: indica el enlace inverso; es decir, de propósito a origen.
- media: indica el soporte para los datos de estilo en el documento de destino.
all Por defecto. Utiliza para todo tipo de soportes
print Para utilizarlo cuando se imprima la pantalla
screen Para pantallas de ordenadores, tablets, ..
speech Utilizado para lectores en voz alta
aural Deprecated. Sintetizadores de voz
braille Deprecated. Para medios que utilicen braille
handheld Deprecated. Pequeños dispositivos
projection Deprecated. Proyectores
tty Deprecated. Teletipos
Rel Valor de atributo básico:
Otros valores no definidos para rel usados:
Ejemplos:
Hay otra versión de la página que se indica en otro idioma:
<link rel="alternate" hreflang="en" title="mi pagina en ingles"
type="text/html" href="http://mipag.es/ingles.html">
rrs para indicar:
<link rel="alternate" type="application/rss+xml" title="resumen" href="/feed.xml">
Para acceder a un icono en la barra de título del navegador o en la pestaña:
<link rel="shortcut icon" type="image/x-icon" href="imagenes/logo.ico">
Vincula un estilo de página con el documento actual:
<link rel="stylesheet" type="text/css" href="http://mipag.es/estilos.css">
Para determinar la página principal, si la página está en varios idiomas:
<link rel="canonical" href="http://mipag.es/index.html">
(Una ruta relativa se puede especificar en todos los casos en href, dependiendo de la estructura de directorio)
Ejercicio6:
· Crea una carpeta de "imagenes" en su sitio (no utilices acentos, ni espacios en el nombre de la carpeta).
· Crea un logotipo asociado con su empresa, dar un tamaño de 80x80 px y dar logo.ico de nombre. A continuación, sube la imagen a la carpeta /imagenes.
· Inserta un enlace al "icono de barra de titulo" en su página.
· Comprueba que el logotipo aparece junto al título en la pestaña del navegador.
<script>
Definición: Inserta un script en el documento.
Puede aparecer varias veces, tanto en el encabezado como en el cuerpo, y puede ser un archivo dentro y fuera del documento.
Apariencia: Es necesario utilizar etiquetas de inicio y cierre.
Atributos: charset, type, src, defer.
- charset: caracteres de script de codificación, expresados a través de src.
- type: lenguaje de programación utilizado para escribir guiones. Como sabemos, la etiqueta <meta> puede ser definida por el lenguaje de script predeterminado para el documento. Si esto no se hace, es aconsejable indicar el idioma a la vez, usando el atributo type.
- src: indica un URI que es un script externo (de fuente en inglés).
- Defer: es un booleano, y la presencia del navegador indica que el script no creará contenido en el documento.
Ejemplos:
Dentro:
<script type = "text/javascript">
...
</ script>
Fuera:
<script type = "text/javascript" src = "/js/banner.js"> </script>
<script type = "text/javascript" src = "https://www.google.com/jsapi"> </ script>
Ejercicio7:
· Encuentra un código javascript que muestre la fecha y hora del sistema.
· Inserta el código de fecha en su página. (Ejer7a.html)
· Guarda el código de tiempo en un archivo externo con el siguiente nombre: time.js
· Introduce una llamada de archivo externa mediante la etiqueta <script ... src>. (Ejer7b.html)
· Muestra el resultado del formulario DATE: ............ TIME: .............
<style>
Definición: Inserta una hoja de estilo incorporada dentro del encabezado del documento.
Apariencia: se requieren etiquetas iniciales y finales.
Atributos: lang, dir, type, media, title.
- type: tipo de lenguaje de estilo.
Normalmente será "text/css".
- media: indica el tipo de estilo y el tipo de soporte.
De lo contrario, será "screen". Otros valores: tty, tv, handheld, print, braille, aural, all.
· handheld= para dispositivos móviles.
print = para impresoras
- title: es un texto descriptivo de la información de estilo.
Ejemplo:
<style type="text/css">
body {
margin-right: 40px;
margin-top: 40px;
margin-left: 40px;
}
</style>