head y body HTML. Etiquetas básicas de páginas web. title (título), meta tag description y keywords (CU00711B)

Resumen: Entrega nº11 del Tutorial básico del programador web: HTML desde cero.
Codificación aprenderaprogramar.com: CU00711B

 

 

CONCEPTOS BÁSICOS. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML. ETIQUETAS HEAD, BODY.

Vamos a explicar conceptos básicos de HTML. En primer lugar veremos cuál es la estructura básica que toda página HTML debe cumplir. Para ello introduciremos las etiquetas HTML, HEAD y BODY, y sus respectivas etiquetas de cierre.

 

 

Toda página web viene definida con la siguiente estructura básica (recuerda que la primera línea es una etiqueta relativa a la versión/variante de HTML que declaramos usar y que esta primera etiqueta no es estrictamente necesaria. Sirve únicamente para indicar qué estándar de HTML es el que declaramos usar).

<!DOCTYPE html>

<html>

<head>

<title>Título de la página web</title>

...

</head>

<body>

Cuerpo de la página web

</body>

</html>

 

 

Vamos a analizar más detenidamente las distintas secciones que componen la página.

La etiqueta <html> define que se trata de código HTML.

 

 

CABECERA DEL DOCUMENTO (HEAD)

La cabecera del documento es la sección comprendida entre <head> y </head>. En ella se debe encontrar, obligatoriamente, el título (entre las etiquetas <title> y </title>).

El título de la página debe describir su contenido por ejemplo: <title>Manuales y tutoriales sobre programación – aprenderaprogramar.com</title>

No sería adecuado usar el título <title>Página de Inicio</title> porque éste no dice nada por sí solo. Debemos usar títulos que sean descriptivos relativos al contenido de la página.

Además de la etiqueta title dentro de la sección 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

Función

¿Es obligatoria?

<title>

Da un título al documento HTML

<base>

Define ruta de acceso

No

<link>

Define archivos vinculados

No

<meta>

Define metadatos como descripción y palabras clave

No

<script>

Delimita scripts incluídos

No

<style>

Delimita definición de estilos

No

 

 

Comentaremos brevemente estas etiquetas a continuación.

Etiqueta <base>. Sirve para indicar la URL base en caso de especificarse URLs relativas dentro de la página web. Por ejemplo <base href="http://www.aprenderaprogramar.com/images/" target="_blank"> haría 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, imágenes de fondo, etc. a los elementos de la página web.

 

Etiquetas <meta>. Sirven para incluir información que no se muestra como parte de la página web pero sirve para informar de características de la página web, como su descripción breve y sus palabras clave.

Ejemplo:

<meta name="description" content="Didáctica y divulgación de la programación aprenderaprogramar.com">

<meta name="keywords" content="didáctica, divulgación, programación, aprender">

En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización. Esto es muy útil para que nuestra página aparezca en los buscadores (google, bing, yahoo, etc.).

 

Etiquetas <script>. Sirven para incluir código en lenguajes de script.

Dentro de la cabecera en muchas páginas se incluye código en JavaScript, que es un lenguaje de programación que los navegadores son capaces de reconocer e interpretar. El código JavaScript se reconoce porque va comprendido entre las etiquetas

<script type="text/javascript">

// Aquí iría el código

</script>

 

Nosotros en este curso no vamos a estudiar JavaScript porque nos vamos a centrar en las cuestiones básicas de HTML, pero si continuas avanzando como programador web será un lenguaje que deberás tener en cuenta más adelante.

 

 

CUERPO (BODY) DEL DOCUMENTO HTML

El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: 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 cuál es su sintaxis y organización.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Bajar archivo...
ArchivoInformación adicional:Tamaño de archivoDescargas
Descargar este archivo (CU00711B head body html title meta tag description keywords style base.pdf)CU00711B head body html title meta tag description keywords style base.pdfFormato pdf28 Kb21317

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

ENERO - FEBRERO 2017

1. Java / J2EE
2. Entornos Oracle
3. .NET, C#
4. JavaScript, jQuery
5. Entornos SQL Server
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

Encuesta lenguajes

¿Sobre qué lenguaje te gustaría que trataran los próximos cursos de aprenderaprogramar.com?

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.