HTML: encabezado
Hemos aprendido que un documento HTML típico tendrá la siguiente estructura:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Este capítulo dará un poco más de detalle sobre la parte del encabezado que está representada por la etiqueta HTML <head>. La etiqueta <head> es un contenedor de varias etiquetas importantes como <title>, <meta>, <link>, <base>, <style>, <script> y <noscript>.
La etiqueta HTML <title>
La etiqueta HTML <title> se utiliza para especificar el título del documento HTML. A continuación se muestra un ejemplo para dar un título a un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Esto producirá el siguiente resultado:
La etiqueta HTML <meta>
La etiqueta HTML <meta> se utiliza para proporcionar metadatos sobre el documento HTML que incluye información sobre el vencimiento de la página, el autor de la página, la lista de palabras clave, la descripción de la página, etc.
A continuación se muestran algunos de los usos importantes de la etiqueta <meta> dentro de un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Esto producirá el siguiente resultado:
La etiqueta HTML <base>
La etiqueta HTML <base> se utiliza para especificar la URL base para todas las URL relativas en una página, lo que significa que todas las demás URL se concatenarán en la URL base mientras se localiza el elemento dado.
Por ejemplo, todas las páginas e imágenes dadas se buscarán después de prefijar las URL dadas con la URL base http://www.tutorialspoint.com/ directorio -
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>Esto producirá el siguiente resultado:
Pero si cambia la URL base a otra cosa, por ejemplo, si la URL base es http://www.tutorialspoint.com/home, la imagen y otros enlaces dados se convertirán en http://www.tutorialspoint.com/home/images /logo.png y http://www.tutorialspoint.com/html/index.htm
La etiqueta HTML <link>
La etiqueta HTML <link> se utiliza para especificar las relaciones entre el documento actual y el recurso externo. A continuación se muestra un ejemplo para vincular un archivo de hoja de estilo externo disponible encss subdirectorio dentro de la raíz web -
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Esto producirá el siguiente resultado:
La etiqueta HTML <style>
La etiqueta HTML <style> se usa para especificar la hoja de estilo para el documento HTML actual. A continuación se muestra un ejemplo para definir algunas reglas de hoja de estilo dentro de la etiqueta <style>:
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>Esto producirá el siguiente resultado:
Note- Para obtener más información sobre cómo funciona la hoja de estilo en cascada, consulte un tutorial separado disponible en css
La etiqueta HTML <script>
La etiqueta HTML <script> se utiliza para incluir un archivo de script externo o para definir un script interno para el documento HTML. A continuación, se muestra un ejemplo en el que usamos JavaScript para definir una función de JavaScript simple:
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>Esto producirá el siguiente resultado, donde puede intentar hacer clic en el botón dado:
Note- Para obtener más información sobre cómo funciona JavaScript, consulte un tutorial separado disponible en javascript