Guia HTML

Guía HTML Fabián E. Luna www.linkedin.com/in/fabianestebanluna

Página 1

HTML (HyperText Markup Language)

Temáticas

• Origen del HTML • Etiquetas • Estructura • Ejemplo de etiquetas • Combinación de etiquetas • Trabajo práctico • Análisis de HTML

Objetivos - Comprender la estructura y

funcionamiento del lenguaje HTML, y experimentar sus alcances y limitaciones.

- Realizar dos breves trabajos prácticos de

programación y análisis en HTML según las pautas dadas.

_______________________________________________

1 - Origen del HTML _______________________________________________

El HTML, Hyper Text Markup Language (Lenguaje de Marcación de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web). Fue creado en 1986 por el físico nuclear Tim Berners-Lee, el cual tomó dos herramientas preexistentes: El concepto de hipertexto (conocido también como hipervínculo o "link") el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente, éste no lo detectará y se visualizara en la forma como éste lo entienda. El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar en un documento con la extensión .htm o .html Estos documentos pueden ser interpretados y mostrados por los navegadores o "browsers" de paginas Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer.

_______________________________________________

2 - ETIQUETAS _______________________________________________

Cada etiqueta esta comprendida entre signos de < >. Existen 2 categorías de etiquetas. Aquellas que necesariamente deberán ser cerradas y aquellas que no. Para abrir una etiqueta solo se deberá nombrar la misma, ej.; < html >, y para cerrarla se deberá volver a nombrarla pero anteponiendo el signo /, ej.; < / html >. Atención 1: es indistinto si las etiquetas contienen espacios de caractér, ej.; </center> es igual a < / center >.


Página 2

Atención 2: algunas de las etiquetas pueden contener varias propiedades adicionales, y es indistinto el orden en el que estas propiedades se encuentren, ej.; < body bgcolor = "red" text = "blue"> es igual a < body text = "blue" bgcolor = "red" > Ejemplos al respecto: (con cierre de etiqueta)

< abre etiqueta > contenido < / cierra etiqueta > es decir:

(apertura) (cierre) < body > contenido < / body >

(sin cierre de etiqueta)

< abre etiqueta propiedades de la etiqueta> es decir:

(apertura) < img src = url > _______________________________________________

3 - ESTRUCTURA

_______________________________________________

Todos los documentos escritos en HTML comparten una estructura en común. Un documento HTML empieza con la etiqueta <HTML >, que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo. La cabecera puede contener información y siempre contiene el titulo del documento encerrado por la etiqueta <TITLE >. En el cuerpo -body- se encuentra todo el contenido del documento, ya sea, texto, imágenes, sonidos, hipervínculos, etc. Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden: Ejemplo al respecto: (Escribir en un bloc de notas ("note pad") o procesador de texto disponible y luego guardar el archivo con la extensión .html) <html>

<head> <title>

Titulo del documento </title> </head>


Página 3

<body> Este mismo texto será visto por el usuario

</body> </html> Es decir, toda la estructura de un archivo HTML tendrá que estar necesariamente compuesta por el siguiente encapsulamiento de etiquetas: • una apertura de etiqueta < html > y su cierre < / html > • en su interior estarán encapsuladas las restantes etiquetas las cuales, como ya se

aclaró, estarán divididas en 2 categorías; < head > y < body >. • Todo lo que va entre < head > (o encabezamiento) no será visto por el usuario. • Todo lo que va entre < body > (o cuerpo) será visto por el usuario. Atención: todas las etiquetas se pueden repetir de acuerdo al diseño planteado, salvo las etiquetas de <HTML>, <HEAD> y <BODY>, las cuales solo pueden escribirse una sola vez, ya que definen la estructura básica de un archivo HTML.

_______________________________________________

4 - EJEMPLO DE ETIQUETAS _______________________________________________

Inserta línea en blanco: < p > Fuerza nueva línea:: < br > Dibuja nueva línea: < hr > Tamaño de letra: (rango del n = 1 a 6) < h1 > Texto < / h1 > Negrita: < b > Texto en negrita < / b > Cursiva: < I > Texto en cursiva < / I > Posiciona Izquierda - Centrado - Derecha texto o gráfica: < left > Texto izquierda < / left > < center > Texto centrado < / center > < right > Texto derecha < / right >


Página 4

Titila el texto: (solo en Netscape) < blink > Texto titilando < / blink > Tipografía específica del texto: (Posee tres atributos: tamaño (size), Tipo de letra o fuente (face) y color) (Atención 1: el tipo de font y color van entrecomillados) (Atención 2: rango del tamaño = 1 a 6) < font size = 2 face = "helvetica" color = "red"> Texto < / font > Mueve el texto o gráfica: (solo en Explorer) (Atención 2: el movimiento es solo de left o right) < marquee direction = left > Texto en movimiento < / marquee > Color de fondo en toda la pagina: (Atención: el color va entrecomillado) < body bgcolor = "green" > Página de fondo verde < / body > Color de texto en toda la pagina: (Atención: el color va entrecomillado) < body text = "green" > Texto en verde < / body > Gráfica de fondo en toda la pagina: (.bmp - .gif - .jpg - .png) (Atención: el archivo gráfico va entrecomillado) < body background = ".\xxx.bmp" > Al fondo un gráfico < / body > Link a otra pagina: (Atención: el archivo a linkear va entrecomillado) < a href = ".\xxx.html" > Link a otra pagina < / a > Insertar un gráfico: (.bmp - .gif - .jpg - .png) (Posee tres atributos: ancho (width), alto (height) y borde (border)) (Atención: el archivo gráfico va entrecomillado) < img src = ".\ xxx.bmp" width = 100 height = 100 border = 8 > Insertar un sonido: (.wav - .aif - .mid - .mod) (Posee un atributo: número de repeticiones (loop)) (Atención: el archivo de sonido va entrecomillado) (Ejemplo de audio sin plug-ing y control de loop, se activa al ingresar a la pagina) < bgsound src = ".\ xxx.wav" loop = 4> (Ejemplo de audio con control fader y plug-ing Quick Time Movie) < embed src = ".\xxx.wav" autoplay = false width = 150 height = 25>


Página 5

Insertar un video: (.mov - .avi - .gif) (Posee tres atributos: ancho (width), alto (height) y número de repeticiones (loop)) (Atención: el archivo de animación va entrecomillado) < img dynsrc src = ".\ xxx.avi" width = 70 height = 200 loop = infinite> Aclaraciones sobre Colores, Directorios y width & height Colores: Los colores disponibles pueden asignarse tanto con valores hexadecimales o bien limitado a los siguientes nombres escritos en ingles: green, olive, purple, red, lime, silver, white, marron, navi, gray, yellow, teal, aqua, black. Directorios: Los ejemplos dados referido a los archivos de gráfica, audio, animación, páginas html, etc. están dados para ser asignados a la página desde el mismo directorio en donde se encuentra la página que esta siendo editada. Ejemplo: ".\xxx.wav". De encontrarse este archivo en otro directorio se deberá indicar la ruta (o path) en donde se encuentra. Ejemplo: ".\MUSICA\SONIDO\xxx.wav". Es decir, que el archivo de audio xxx.wav se encuentra dentro del directorio SONIDO y a su vez este mismo directorio estará en el directorio MUSICA. Finalmente en el directorio MUSICA se encuentra el archivo html que está siendo editado. Width & Height : Los valores de width y height también se pueden asignar con porcentajes, es decir; width = "33%" height = "50%" (en este caso los valores van entrecomillados junto al signo porcentual).

_______________________________________

5 - COMBINACIÓN DE ETIQUETAS A continuación se ejemplifica el código de varias etiquetas HTML. (Atención: a modo de ejemplo solo se ejemplifica lo incluido en las etiquetas del "body")

_______________________________________ < body bgcolor = "black" text = "yellow">

< center > < b > < i > < font face = "arial" size = 3 color = "silver" align = left> Texto < / font > < img src = ".\ arcos.jpg" width = 230 height = 420 border = 3 >

< / i > < / b > < / center > < bgsound src = ".\croquis.mid" loop = 2>

< hr > < left > <h3> aquí otro texto aparte </h3> < / left >

< hr > < a href = ".\index.html" > Link mas allá < / a >

< / body >

_______________________________________________


Página 6

6 - TRABAJO PRACTICO

_______________________________________________ Realizar 2 paginas escritas en HTML como se describe a continuación (Escribir en un bloc de notas ("note pad") o procesador de texto disponible y luego guardar el archivo con la extensión .html) Pagina 1: tierra.html 1. Escribir un texto -TERRICOLAS - en negrita - tamaño grande - color verde -

centrado 2. Fondo de pagina en amarillo 3. Colocar un gráfico - centrado 4. Debajo del gráfico escribir otro texto cualquiera con el cual hacer un vínculo -link- a

la página fuego.html - texto en color rojo - a la izquierda Pagina 1: fuego.html 5. Escribir un texto - FUEGUINOS - en cursiva - tamaño grande - color rojo - centrado 6. Insertar una línea de división 7. Escribir texto breve en movimiento - de derecha a izquierda y vincular -link- a la

página tierra.html 8. Insertar un sonido que se active al ingresar a la pagina y se repita 2 veces.

_______________________________________________

7 - ANALISIS DE HTML _______________________________________________

Buscar y corregir en las siguientes etiquetas HTML seis (6) errores. 1 2 3 4 5 6 7 8 9 10

< html > < body color = "magenta" > < head > < title > acrobata chino< /title> < / head > < hr > < hr > < hr > < hr > mas datos < hr > < / hr > < bgsound src = ".\caniche.wav" loop = 5 > < /center > < img src = ".\ alas .jpg" width = 230 height = 420 > < / b > < / center > < a href = ".\otros.htm" > conexiones a otro sitio < / a > < hr > ojos inquietos < hr > < / body > < / html >


Página 7

_______________________________________________

8 – APLICACIÓN DE ETIQUETAS META _______________________________________________

Las etiquetas META deberán ir ubicadas en el HEAD.

• Transiciones < META http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">

• Para los buscadores <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="ROBOTS" CONTENT="ALL"> <META HTTP-EQUIV="Content-Language" CONTENT="en-us"> <META NAME="Copyright" content="American Museum of Natural History"> <META NAME="Author" content="American Museum of Natural History"> <META NAME="DESCRIPTION" CONTENT="Rose Center for Earth and Space featuring the New Hayden Planetarium"> <META NAME="KEYWORDS" CONTENT="rose center, rose center for earth and space, hayden planetarium, space show, cullman hall of the universe, heilbrunn cosmic pathway, scales of the universe, gottesman hall of planet earth earth, planet, planets, universe, cosmic, hayden, starry nights, meteorite, space theater, big bang, hayden sphere, zeiss star projector, passport to the universe, milky way galaxy, tom hanks, jodie foster, harrison ford, galaxy, galaxies, stars, star, ecosphere, galactic disks, sphere">

Documents

Guia HTML