En este tutorial les voy a mostrar las etiquetas más importantes que se deben ingresar en la sección <head> las cuales no deben de faltar y que son indispensables en todas las página web.
La etiqueta <head> es un contenedor de metadatos (datos sobre los datos) y se coloca entre la etiqueta <html> y la etiqueta <body>, los metadatos son datos acerca del documento HTML, los metadatos no se visualizan en los navegadores.
Los metadatos suelen definir el título del documento, el conjunto de caracteres, estilos, enlaces, guiones y otra meta-información, las siguientes etiquetas son las que se utilizan para ingresar los metadatos dentro de un documento HTML, <title>, <meta>, <link>, <style>, <script> .
La Etiqueta Title
La etiqueta <title> define el título de la página o del documento, define un título en la pestaña superior de los navegadores como lo vimos en tutorial anterior, proporciona el título de la página cuando las personas añaden la página a marcadores de favoritos en los navegadores y muestra el título de la página en los motores de búsqueda como Google, Yahoo, Bing, etc.
La sintaxis (La forma de escritura) de la etiqueta <title> es la siguiente,
<title>Este es el Titulo de la Página</title>
Las Etiquetas Meta
Las etiquetas <meta> se utiliza para especificar el conjunto de caracteres especiales que se utilizan, la descripción de páginas, las palabras clave, el autor, y otros metadatos.
Los metadatos se utilizan por los navegadores para saber cómo mostrar el contenido de las páginas, y los motores de búsqueda los utilizan para encontrar, la descripción y otros servicios web que se ofrece en las páginas y mostrarlas a las personas cuando realizan una búsqueda por internet mediante los motores de búsqueda.
En HTML las etiquetas <meta> no tienen etiqueta de cierre solo se escribe la etiqueta de inicio, y dentro de ella se escriben sus atributos junto con sus respectivos valores.
La Etiqueta Meta Charset
Para visualizar una página HTML correctamente, el navegador debe saber qué conjunto de caracteres de codificación tiene especificado la página para su uso, el conjunto de caracteres se utiliza para que los navegadores muestre correctamente, puntuaciones y caracteres especiales (, . · ; : ¡ ¿ < > á ñ ü).
La primer codificación de caracteres fue ASCII, después en HTML 2.0 hasta HTML 4.01 fue ISO-8859-1, ahora en HTML5 se usa UTF-8, debido a que los conjunto de caracteres mencionados anteriormente son limitados, y no es compatible en entornos multilenguaje, el Consorcio Unicode desarrolló el Unicode estándar UTF-8.
Las codificación Unicode UTF-8 abarca casi todos los caracteres, los signos de puntuación y los símbolos que existen, en los idiomas Chino, Árabe, Griego, Latino, etc, los caracteres de escritura son distintos, por esta razón se utiliza Unicode UTF-8 que permite el procesamiento, el almacenamiento y el transporte de texto, independiente de la plataforma y lenguaje.
En HTML4 la sintaxis para implementar la codificación de caracteres en la etiqueta <meta> se hacia de la siguiente manera.
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
En HTML5 se a simplificado la sintaxis con la etiqueta <meta charset> quedando de esta manera.
<meta charset="UTF-8">
Las Etiquetas Meta
La etiqueta <meta> se usa para especificar el contenido de las páginas especialmente para los motores de búsqueda, esto es muy importante para el SEO (Search Engine Optimization) (Optimización de motores de búsqueda) de las páginas, aunque Google ya no le da tanta importancia a estas etiquetas, otros buscadores si las siguen tomando en cuenta y es aconsejable incluirlas en nuestro documento HTML.
Para la descripción del contenido de una página web se utiliza la etiqueta <meta>, en la cual se debe ingresar la información del contenido y los servicios que ofrece la página.
No está permitido escribir más de 500 caracteres, pero no se debe abusar o mentir en la descripción del contenido de la página, porque los motores de búsqueda los penalizará y no indexara su página correctamente.
La descripción debe ser breve pero concisa, se debe tener en cuenta que esta es la descripción de la página que se muestra en los motores de búsqueda como Google, Yahoo, Bing, etc, cuando un usuario busca alguna información o servicio en internet.
A si que la mejor forma de hacerlo es dar una descripción breve tomando en cuenta que es lo que buscaría un usuario o hacer que el usuario se interese por el contenido de la información o el servicio que ofrece la pagina.
Esta es la sintaxis de la etiqueta <meta> para la descripción de una página web
<meta name="description" content="Aprende a crear y diseñar tu propia pagina web, con Tutoriales HTML5 y CSS3 totalmente GRATIS">
Sintaxis para definir palabras clave (keywords) para motores de búsqueda, cuando un usuario ingresa palabras en el buscador, recuerden no abusar ni mentir en esta sección tambien.
<meta name="keywords" content="html5, css, diseño web, etiquetas html, head, body, meta etiquetas ">
Sintaxis para definir el autor o autores de una página por si alguien sabe tu nombre personal pero no sabe el nombre de tu pagina y busca la pagina mediante un nombre personal.
<meta name="author" content="Alfredo Cisneros">
<meta name="author" content="Alfredo Cisneros Escritor, Sergio Bustos Diseñador, Esteban Campos Administrador">
Hay muchas mas etiquetas <meta name> pero estas son las que comunmente se utilizan mas pueden buscar en internet meta etiquetas y encontraran mucha informacion sobre ellas.
Hay una nueva meta etiqueta para los ajuste de la pantalla gráfica HTML5 introdujo un método para que los diseñadores web tengan control sobre el área de visualización, a través de la etiqueta <meta name>
La pantalla es la zona visible del usuario de una página web, varea con el dispositivo, y será más pequeño en un teléfono móvil que en una pantalla de ordenador, se debe incluir lo siguiente <meta name> etiqueta de visualización en todas sus páginas web.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Una etiqueta <meta> de visualización da las instrucciones al navegador sobre cómo controlar las dimensiones y la escala de la página para que se muestre correctamente en cualquier dispositivo.
El ancho "width" establece el ancho para que la página siga el ancho de la pantalla del dispositivo "device" que varía en función del dispositivo pc, Lap Top, tablet o teléfono móbil, la escala inicial "initial-scale" establece el nivel de zoom en 100 % cuando la página es cargada en el navegador.
Esto hace el contenido más pequeño cuando se accede desde dispositivos con pantallas menores que un ordenador o pc, esta etiqueta es muy importante hoy en día y es indispensable colocarla siempre en todas las páginas web.
La Etiqueta Link
Esta etiqueta <link> no debe ser confundida, no es para ingresar links o vínculos de páginas normales, para esto se usa la etiqueta <a>, esto lo veremos más adelante con mayor detalle.
Esta etiqueta se utiliza para vincular documentos o archivos externos propios o de terceros como archivos CSS, API (Application Programming Interface) (Interfaz de Aplicaciones de Programación).
Las APIs o API son links para relacionar archivos o servicios de terceros como las fuentes (estilos de letras) de Google fonts y otros sitios, iconos como Google icons, Awesome icons, etc, esto lo veremos con mas detalles en el tutorial de CSS3.
Esta es la sintaxis para vincular una hoja de estilos CSS externa al documento HTML.
<link rel = "stylesheet" href = "styles.css">
La Etiqueta Style
Esta etiqueta <style> se utiliza para introducir el código o sentencias de los estilos css de manera interna dentro del documento o página HTML, esta opción no es muy recomendada a menos que sea para hacer pruebas o de forma muy mínima.
Ya que esta opción hace mas pesado el código del documento html y hará más lenta la carga de la página en los navegadores, la opción más indicada y recomendada es con la etiqueta <link> mostrada anteriormente, esta etiqueta si lleva etiqueta de cierre </style>.
Esta es la sintaxis para vincular los estilos CSS internamente en el documento HTML con la etiqueta <style>.
html>
<head>
<style>
h1 {
text-aling: center;
color: blue;
}
</style>
</head>
<body>
<h1>Este es un Titulo</h1>
</body>
</head>
<head>
<style>
h1 {
text-aling: center;
color: blue;
}
</style>
</head>
<body>
<h1>Este es un Titulo</h1>
</body>
</head>
La Etiqueta <script>
La etiqueta <script> se utiliza para introducir dentro del documento HTML el código JavaScript del lado del cliente, esta etiqueta si lleva etiqueta de cierre </script>.
Esta es la sintaxis de como implementar la etiqueta <script> en la sección del <head>
<head>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
</head>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
</head>
A si es como nos quedaría la sección de <head> y esta es la forma mas recomendada para la posición de las etiquetas en el <head>
<head>
<title>El Titulo de la Pagina</title>
<meta charset="utf-8">
<met name="vieport"content="width=device- width,initialscale=1.0">
<meta name="keywords" content="tutoriales, html5, css, diseño web,">
<meta name="description" content="Aprende a crear y diseñar tu propia pagina web, con Tutoriales HTML5 y CSS3 totalmente Geatis">
<Link rel="stylesheet" href="stilos.css">
</head>
<title>El Titulo de la Pagina</title>
<meta charset="utf-8">
<met name="vieport"content="width=device- width,initialscale=1.0">
<meta name="keywords" content="tutoriales, html5, css, diseño web,">
<meta name="description" content="Aprende a crear y diseñar tu propia pagina web, con Tutoriales HTML5 y CSS3 totalmente Geatis">
<Link rel="stylesheet" href="stilos.css">
</head>
Resumen
- <head> Define la información sobre el documento HTML
- <title> Define el título de la pagina
- <meta> Define la información sobre los caracteres especiales, la visibilidad, y la descripción de la página
- <link> Define la relación de archivos externos para los estilos CSS y otros archivos como Apis, Fuentes, iconos y varios más en el documento HTML
- <style> Define los estilos CSS dentro del documento HTML
- <script> Define el código Java Script dentro del documento HTML
En el siguiente tutorial veremos la sintaxis de los Elementos (Etiquetas) y sus atributos los cuales son la parte visible de las páginas web que van dentro de la etiqueta <body>
Saludos y que estén bien, nos leemos en el siguiente tutorial, hasta la proxima Amigos.
No hay comentarios.:
Publicar un comentario