CU00711B Head Body HTML Title Meta Tag Description Keywords Style Base PDF

Conceptos bsicos. Estructura bsica de una pgina HTML. Head, body.
aprenderaprogramar.com, 2006-2029

Seccin: Cursos
Categora: Tutorial bsico del programador web: HTML desde cero

Fecha revisin: 2029

Resumen: Entrega n11 del Tutorial bsico HTML desde cero.

Autor: Enrique Gonzlez Gutirrez
APRENDERAPROGRAMAR.COM
CONCEPTOS BSICOS.
ESTRUCTURA BSICA DE
UNA PGINA HTML.
ETIQUETAS HEAD, BODY.
TITLE. META DESCRIPTION
Y KEYWORDS. (CU00711B)
CONCEPTOS BSICOS. ESTRUCTURA BSICA DE UNA PGINA HTML. ETIQUETAS HEAD, BODY.

Vamos a explicar conceptos bsicos de HTML. En primer lugar veremos cul es la estructura bsica que
toda pgina HTML debe cumplir. Para ello introduciremos las etiquetas HTML, HEAD y BODY, y sus
respectivas etiquetas de cierre.

Toda pgina web viene definida con la siguiente estructura bsica (recuerda que la primera lnea es una
etiqueta relativa a la versin/variante de HTML que declaramos usar y que esta primera etiqueta no es
estrictamente necesaria. Sirve nicamente para indicar qu estndar de HTML es el que declaramos
usar).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ttulo de la pgina web</title>
...
</head>
<body>
Cuerpo de la pgina web
</body>
</html>

Vamos a analizar ms detenidamente las distintas secciones que componen la pgina.

La etiqueta <html>define que se trata de cdigo HTML.

CABECERA DEL DOCUMENTO (HEAD)

La cabecera del documento es la seccin comprendida entre <head>y </head>. En ella se debe
encontrar, obligatoriamente, el ttulo (entre las etiquetas <title>y </title>).

El ttulo de la pgina debe describir su contenido por ejemplo:

<title>Manuales y tutoriales sobre programacin aprenderaprogramar.com</title>

No sera adecuado usar el ttulo <title>Pgina de Inicio</title>porque ste no dice nada por s solo.
Debemos usar ttulos que sean descriptivos relativos al contenido de la pgina.

Adems de la etiqueta title dentro de la seccin de cabecera se suelen incluir otras etiquetas. La
siguiente tabla muestra un resumen de elementos que pueden ir dentro de la etiqueta head.

Etiqueta en cabecera Funcin Es obligatoria?
<title> Da un ttulo al documento HTML S
<base> Define ruta de acceso No
<link> Define archivos vinculados No
<meta> Define metadatos como descripcin y palabras clave No
<script> Delimita scripts includos No
<style> Delimita definicin de estilos No

Comentaremos brevemente estas etiquetas a continuacin.
Etiqueta <base>. Sirve para indicar la URL base en caso de especificarse URLs relativas dentro de la
pgina web. Por ejemplo <base href="http://www.aprenderaprogramar.com/images/"
target="_blank">hara que si escribimos como ruta de una imagen "logo.png" dicha ruta sea en
realidad "http://www.aprenderaprogramar.com/images/logo.png"

Etiquetas <link>. Sirven para indicar que el documento html est relacionado con otro archivo o
recurso externo. Por ejemplo <link rel="stylesheet" type="text/css" href="estilos.css">sirve para indicar
que el documento HTML est vinculado al archivo estilos.css

Etiqueta <style>. Sirve para incluir estilos CSS que permiten dotar de colores, bordes, imgenes de
fondo, etc. a los elementos de la pgina web.

Etiquetas <meta>. Sirven para incluir informacin que no se muestra como parte de la pgina web pero
sirve para informar de caractersticas de la pgina web, como su descripcin breve y sus palabras clave.
Ejemplo:

<meta name="description" content="Didctica de la programacin aprenderaprogramar.com">

<meta name="keywords" content="didctica, divulgacin, programacin, aprender">

En este caso las etiquetas le indican a los buscadores el contenido de nuestras pginas (description) y
algunas palabras clave (keywords) para su localizacin. Esto es muy til para que nuestra pgina
aparezca en los buscadores (google, bing, yahoo, etc.).

Etiquetas <script>. Sirven para incluir cdigo en lenguajes de script.

Dentro de la cabecera en muchas pginas se incluye cdigo en JavaScript, que es un lenguaje de
programacin que los navegadores son capaces de reconocer e interpretar. El cdigo JavaScript se
reconoce porque va comprendido entre las etiquetas

<script type="text/javascript">

</script>

Nosotros en este curso no vamos a estudiar JavaScript porque nos vamos a centrar en las cuestiones
bsicas de HTML, pero si continuas avanzando como programador web ser un lenguaje que debers
tener en cuenta ms adelante.

CUERPO (BODY) DEL DOCUMENTO HTML

El cuerpo (body) del documento html es normalmente lo ms importante. Es aqu donde debemos
colocar el contenido de nuestra pgina: texto, fotos, etc.

El cuerpo est delimitado por las etiquetas <body>y </body>.

A lo largo del curso iremos estudiando qu elementos pueden existir dentro de la etiqueta body, as
como cul es su sintaxis y organizacin.

Prxima entrega: CU00712B
Acceso al curso completo en aprenderaprogramar.com -- >Cursos, o en la direccin siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

CU00711B Head Body HTML Title Meta Tag Description Keywords Style Base PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CU00711B Head Body HTML Title Meta Tag Description Keywords Style Base PDF

Uploaded by

Copyright:

Available Formats

Conceptos bsicos. Estructura bsica de una pgina HTML. Head, body.

You might also like