GUIA 2 Tema: Lenguaje de etiquetas. Introducción al HTML

(1)

GUIA 2

Tema: Lenguaje de etiquetas. Introducción al HTML

Objetivos

Introducir al alumno en el lenguaje HTML para que comprenda la sintaxis de éste lenguaje de etiquetas y comprenda la estructura y organización de un sitio web.

Contenidos

✔ Introducción al HTML

✔ Sintaxis del HTML

✔ Estructura de un archivo HTML

Materiales y Equipo

✔ Guía 2 previamente leída.

✔ Hoja de evaluación correspondiente a la guía 2.

✔ 3 Imágenes en formato .gif

Introducción al HTML

Un documento HTML (lenguaje de marcas hipertextual) es un simple archivo conteniendo un lenguaje de etiquetado específico llamado HTML (Lenguaje de etiquetado hipertextual, del inglés Hyper Text Markup Language). Dicha información, aun cuando está escrita en una forma estructurada que la hace coincidir con el estándar del lenguaje de etiquetado, es una simple secuencia de caracteres que pueden ser encontrados en un teclado normal.

Un científico llamado Tim Berners-Lee inventó HTML allá por 1990. El objetivo era facilitar a científicos de diferentes universidades el acceso a los documentos de investigación de cada uno de ellos. El proyecto obtuvo un éxito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este científico sentó las bases de la web tal y como la conocemos hoy día.

HTML es un lenguaje que hace posible presentar información (por ejemplo, investigaciones cientíticas) en Internet. Lo que visualiza al cargar una página en Internet es la interpretación que hace el navegador del código HTML. Para ver el código HTML de una página sólo tiene que hacer clic en la opción “Ver”

de la barra de menús y elegir “Código fuente”.

(2)

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser el Text Edit de Mac, Bloc de Notas de Windows (o Notepad), o cualquier otro editor que admita texto sin formato.

Sintaxis del HTML

HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador.

Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (<

>) , y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de dos formas especiales:

1. Una apertura de forma general <etiqueta>

2. Un cierre de tipo </ etiqueta>

Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Así por ejemplo: Las etiquetas <b> y </b> definen un texto en negrita.

Estructura de un documento HTML

La estructura básica de un documento HTML está formada por dos partes: el encabezado HEAD y el cuerpo BODY. Ambas partes se incluyen dentro del elemento HTML.

Sintaxis de html escrita desde la ventana

del documento html en Dreamweaver CS5. Resultado visualizado en la ventana del documento en la opción Mostrar diseño del documento en Dreamweaver CS5.

(3)

Las etiquetas básicas de HTML, de obligada presencia en todo documento son:

Etiqueta Descripción

<HTML>

Es la etiqueta que define el inicio del documento html, le indica al navegador que todo lo que viene a continuación debe tratarlo como una serie de códigos html.

<HEAD>

Define la cabecera del documento html, esta cabecera suele contener información sobre el documento que no se muestra directamente en el navegador. Como por ejemplo el título de la ventana de su navegador. Dentro de la cabecera

<HEAD> podemos encontrar: a las etiquetas <title> y <link>.

<TITLE>

Define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.

<LINK>

Para definir algunas características avanzadas, como por ejemplo las hojas de estilo usadas para el diseño de la página, ejemplo :

<BODY>

Define el contenido principal o cuerpo del documento, esta es la parte del documento html que se muestra en el navegador, dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro de <body> podemos encontrar numerosísimas etiquetas como:

<BODY BGCOLOR>

Este parámetro define el color de fondo que queramos que tenga nuestra página. La etiqueta completa es:

<body bgcolor=”000000”></body> donde los seis ceros indican el número hexagesimal.

<BODY TEXT>

Define el color del texto La etiqueta completa es:

<H1> . . . <H6>

Encabezados o títulos del documento en diferentes tamaños de fuente siento H1 La más grande y H6 la más pequeña.

<P>

Párrafo nuevo.

<BR>

Salto de línea forzado

<TABLE>

Comienzo de una tabla. (Las filas se identifican con <TR> y las celdas dentro de las filas con <TD>)

<A>

Indica la existencia de un hipervínculo o enlace, dentro o fuera la página web.

Debe definirse el parámetro de pasada por medio del atributo href.

<DIV>

Comienzo de un área especial en la página

<IMG>

Indica la existencia de una imagen para mostrarse en el navegador.

(4)

Resultado de la estructura.

Un archivo HTML es un documento con la siguiente estructura:

En el navegador (Explorer, Mozilla, Chrome, Safari u otros) el código escrito con el lenguaje de eti- quetas HTML se visualizará de la siguiente forma:

Visualización del HTML en el navegador Google Chrome Estructura vista desde la ventana de escritorio de Adobe Dreamweaver CS5

(5)

Cómo escribir HTML.

Puede crear un documento HTML con cualquier editor o procesador de textos como Bloc de Notas, TextEdit y Dreamweaver, entre otros. Sin embargo hay ciertos aspectos importantes sobre la escritura de documentos HTML que debe tomar en cuenta a la hora de escribir el código:

1. Letras mayúsculas y minúsculas

Los navegadores reconocerán el código HTML en cualquiera de los dos tipos.

2. Espaciado

Los navegadores HTML ignoran cualquier espacio adicional que exista entre las etiquetas.

3. Símbolos Especiales

El conjunto estándar ASCII contiene 128 caracteres y puede emplearse perfectamente para documento en inglés. Sin embargo, las tildes, las eñes y muchos símbolos habitualmente empleados en español, no se encuentran en este grupo. Para esto en el html se debe colocar el siguiente código cuando nosotros requeramos del uso de la tilde (‘) o la letra Ñ.

Ejemplo de aplicación de Simbolos especiales:

Letra Código Letra Código

ñ ñ í í

Ñ Ñ Í Í

á á ó ó

Á Á Ó Ó

é é ú ú

É É Ú Ú

Estructura vista desde el panel archivos de Adobe Dreamweaver CS5

(6)

4. Nombres de Archivo

Existen un par de normas que se deben de tener en cuenta al momento de nombrar los archivos del sitio web, esto permitirá que los navegadores visualicen correctamente las páginas y que los visitantes tenga acceso correcto a cada una de las secciones del sitio:

✔ Emplee minúsculas en los nombres de archivo: El nombre de archivo que establece para su página Web, determina la dirección que los visitantes teclean en el navegador; si emplea letras mayúsculas es probable que el usuario no recuerde si es mayúsculas o minúsculas y no pueda acceder al sitio.

✔ No utilice Tildes ni caracteres especiales. Utilce un nombre que tenga relación con el contenido del sitio.

✔ No emplee espacios, utilice “Guión bajo”: Cuando nombre sus archivos, no utilice espacios, escriba los nombres de corrido o utilice el guión bajo para separar palabras por ejemplo:

quienes_somos.html

✔ Emplee la extensión adecuada: La forma principal por la que un navegador sabe que debe leer un documento de texto como una página web, es fijándose en su extensión: .htm o .html. Si la página tiene alguna otra extensión, por ejemplo .txt, el navegador lo tratará como texto y mostrará el código HTML al usuario.

Procedimiento

1. Cargue la aplicación TextEdit. Guarde el archivo como mi_primera_pagina.html

2. Las sentencias que a continuación se describen son las que utilizará para realizar su archivo HTML, ordénelas según la estructura lógica de los ejemplos anteriormente descritos: