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

Tamaño: px

Comenzar la demostración a partir de la página:

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

Felipe Cárdenas Castellanos
hace 7 años
Vistas:

1 Diseño Digital V. Guía 2 15 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 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.

16 Manual de laboratorios 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

2 16 Manual de laboratorios 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. 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. 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.

3 Diseño Digital V. Guía 2 17 Las etiquetas básicas de HTML, de obligada presencia en todo documento son: Etiqueta <HTML> <HEAD> <TITLE> <LINK> <BODY> <BODY BGCOLOR> <BODY TEXT> <H1>... <H6> <P> <BR> <TABLE> <A> <DIV> <IMG> Descripción 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. 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>. 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. Para definir algunas características avanzadas, como por ejemplo las hojas de estilo usadas para el diseño de la página, ejemplo : <link rel= stylesheet href= /style.css type= text/css > 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: Este parámetro define el color de fondo que queramos que tenga nuestra página. La etiqueta completa es: <body bgcolor= ></body> donde los seis ceros indican el número hexagesimal. Define el color del texto La etiqueta completa es: <body text= ></body> 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árrafo nuevo. Salto de línea forzado Comienzo de una tabla. (Las filas se identifican con <TR> y las celdas dentro de las filas con <TD>) 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. Comienzo de un área especial en la página Indica la existencia de una imagen para mostrarse en el navegador.

4 18 Manual de laboratorios Resultado de la estructura. Un archivo HTML es un documento con la siguiente estructura: Estructura vista desde la ventana de escritorio de Adobe Dreamweaver CS5 En el navegador (Explorer, Mozilla, Chrome, Safari u otros) el código escrito con el lenguaje de etiquetas HTML se visualizará de la siguiente forma: Visualización del HTML en el navegador Google Chrome

Diseño Digital V. Guía 2 19 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.

5 Diseño Digital V. Guía 2 19 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 Ñ. Letra Código Letra Código ñ ñ í í Ñ Ñ Í Í á á ó ó Á Á Ó Ó é é ú ú É É Ú Ú Ejemplo de aplicación de Simbolos especiales: Estructura vista desde el panel archivos de Adobe Dreamweaver CS5

6 20 Manual de laboratorios 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: <body> <HTML> <p> </p> <table border= 0 > <tr> </body> </HTML> <td>coloque UNA IMAGEN</td> <td> COLOQUE UN TEXTO </td> </tr> </table>

Documentos relacionados

HTML. HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE

HTML. HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE HTML HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE Se elaboró un protocolo para soportar e envío de información por la red. HTTP (Hyper Text Transfer Protocol)