Conceptos Generales del Lenguaje HTML



¿Qué es HTML?



Aunque HTML significa "Lenguaje de Marcas de HiperTexto", no es en realidad un lenguaje de programación como Java, Perl, C, o BASIC; es mucho más simple. Es una manera de describir cómo un conjunto de texto e imágenes deben desplegarse en el navegador, similar en concepto a las marcas que hace un editor de periódico.

HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Mosaic, o Netscape).

A continuación se presenta de manera general una plantilla inicial con la cual se podrán realizar modificaciones para presentar sus documentos dentro de la red.

Primeramente abriremos el bloc de Notas de Windows para iniciar la cáptura de nuestro programa.

Una página Web consiste de un archivo HTML más los archivos de imágen usados en la página. El archivo HTML (un archivo de texto común) contiene todo el texto a desplegar, y también actúa como el pegamento para sostener el texto e imágenes juntas en los lugares correctos, y los despliega en el estilo correcto.

Escribir un archivo HTML significa componer el texto que quieres desplegar, entonces insertar las etiquetas que quieras en los lugares correctos. Las etiquetas comienzan con un caracter [<] y terminan con un caracter [>] , y le dicen al navegador que haga algo especial como mostrar texto en itálicas o negritas, o en una fuente más grande, o mostrar una imágen, o hacer una liga a otra página Web. La mayoría de los efectos se especifican de la misma forma: rodeando el texto que se quiere marcar entre dos etiquetas o directivas (tags, en inglés), que definen el efecto o unidad lógica que se desea. Las etiquetas están formadas por determinados códigos metidos entre los signos [<] y [>], y con la barra [/] cuando se trata de la segunda etiqueta de un efecto (la de cierre). Aunque el HTML tiene muchas etiquetas que puedes usar, no necesitas saberlas todas para usar HTML -- puedes arreglártelas con unas cuantas.


Formato básico de HTML

< HTML > < /HTML >....................Etiqueta de inicio

< !-- Comentario sobre el autor -->............Comentarios de referencia dentro de la realización del programa

< HEAD > < /HEAD >....................La sección opcional < HEAD >, colocada antes de la sección < BODY >, te permite almacenar cierta información sobre el documento en sí. Aún cuando la sección < HEAD > exista, puede contener solamente la contenedora < TITLE >, la cual dice qué es lo que hay que desplegar en el título de la ventana del navegador, sobre la barra de menús (si tienes un navegador gráfico).

< TITLE > < /TITLE >...........Título (TITLE). Indica el nombre del documento, los visores lo emplean generalmente como

etiqueta de la ventana. Este campo es el único obligatorio en la cabecera.

< BODY > < /BODY >....................es el cuerpo,donde reside la información del documento.

< HR >......................representa una línea horizontal

< H# > < /H# >................Los encabezados se emplean para dividir los documentos en secciones, o más concretamente para

marcar los títulos de esas secciones. Las marcas son del tipo < H# > Título < /H# >, donde # puede ser un número cualquiera entre 1 y 6.

Aunque el estándar no lo especifica, es recomendable usar los niveles en orden, es decir, después de un encabezado de nivel uno deberemos usar encabezados de nivel dos para las subsecciones y no saltar directamente al tres o al cuatro

< P > < /P > y < BR >............ Saltos de Línea y Espacios en Blanco

Puedes agregar cuantos espacios o líneas en blanco quieras (llamados "blancos") para hacer tú archivo HTML más fácil de leer. El navegador desplegará todos los blancos consecutivamente como un sólo espacio, no importa cuántos sean.

Para comenzar un nuevo párrafo, usa la etiqueta < P >-- la usarás mucho. El navegador ajustará las líneas de texto correctamente, basado en el ancho de la ventana (el cual, tú, el autor de HTML no puedes predecir). Si realmente quieres forzar una nueva línea, como para una dirección, usa la etiqueta < BR > para insertar un salto de línea.

Si no usas las anteriores tag´s (

y
), así se vera tú información: ír a la página


Ejercicio Uno

La primera página siempre llevará el nombre de index.html

Nombre del archivo index.html

< HTML >

< !-- mi primer página en HTML -->

< HEAD >

< !-- Datos cabecera de la página -->

< TITLE >Mi primera página de HTML< /TITLE >

< /HEAD >

< BODY >

< HR >

< HR >

< /BODY >

< /HTML >

Visualiza como queda tú página index.html: ír a página uno


Ejercicio Dos

En éste ejercicio visualizaremos un texto

Nombre del archivo Dos.html

< HTML >

< HEAD >

< TITLE >Mi primera página de HTML< /TITLE >

< /HEAD >

< BODY >

El corazón tiene razones, que la razón ignora por completo

< /BODY >

< /HTML >

Visualiza como queda tú página dos.html: ír a página dos


Ejercicio Tres

En éste ejercicio visualizaremos los diferentes tamaños de encabezados

Nombre del archivo tres.html

< HTML >

< !-- mi primer página en HTML -->

< HEAD >

< TITLE >Mi primera página de HTML< /TITLE >

< /HEAD >

< BODY >

< !-- Mi frase favorita -->

< H1 >

El corazón tiene razones, que la razón ignora por completo

< /H1 >

< H2 >

El corazón tiene razones, que la razón ignora por completo

< /H2 >

< H3 >

El corazón tiene razones, que la razón ignora por completo

< /H3 >

< H4 >

El corazón tiene razones, que la razón ignora por completo

< /H4 >

< H5 >

El corazón tiene razones, que la razón ignora por completo

< /H5 >

< H6 >

El corazón tiene razones, que la razón ignora por completo

< /H6 >

< /BODY >

< /HTML >

Visualiza como queda tú página tres.html: ír a página tres


Ejercicio Cuatro

Para el ejercicio cuatro y cinco necesitamos los códigos hexadecimales que a continuación se visualizarán:

código uno

código dos

código tres

En éste ejercicio visualizaremos un color de fondo

Nombre del archivo cuatro.html

< HTML >

< HEAD >

< TITLE >Mi primera página de HTML< /TITLE >

< /HEAD >

< BODY BGCOLOR="#fff8e8" >

< /BODY >

< /HTML >

Visualiza como queda tú página cuatro.html: ír a página cuatro


Ejercicio Cuatroa

En éste ejercicio visualizaremos en el fondo de la página una imagen

Nombre del archivo cuatroa.html

< HTML >

< HEAD >

< TITLE >Mi primera página de HTML< /TITLE >

< /HEAD >

< BODY BACKGROUND="C:\Documents and Settings\alumno3\Escritorio\prueba\Gato.jpg" >

< /BODY >

< /HTML >

Visualiza como queda tú página cuatroa.html: ír a página cuatroa




Ejercicio Cinco

En éste ejercicio visualizaremos el texto en color

Nombre del archivo cinco.html

< HTML >

< HEAD >

< TITLE >Mi primera página de HTML< /TITLE >

< /HEAD >

< BODY >

< font color="#ff00ff" >

El corazón tiene razones, que la razón ignora por completo

< /font >

< font color="#808080" >

El corazón tiene razones, que la razón ignora por completo

< /font >

< font color="#0000ff" >

El corazón tiene razones, que la razón ignora por completo

< /font >

< font color="#ff00ff" >

< H4 >

El corazón tiene razones, que la razón ignora por completo

< /H4 >< /font >

< font color="#808080" >

< H5 >

El corazón tiene razones, que la razón ignora por completo

< /H5 >< /font >

< font color="#0000ff" >

< H6 >

El corazón tiene razones, que la razón ignora por completo

< /H6 >< /font >

< /BODY >

< /HTML >

Visualiza como queda tú página cinco.html: ír a página cinco


Ejercicio Seis

En éste ejercicio visualizaremos una imagen

Nombre del archivo seis.html

< HTML >

< HEAD >

< TITLE >Mi primera página de HTML< /TITLE >

< /HEAD >

< BODY >

< img src="C:\berny\berny56\semi2005\html\clase\aguila.jpg" >

< /BODY >

< /HTML >

Visualiza como queda tú página seis.html : ír a página seis


Ejercicio Siete

En éste ejercicio crearemos un enlace o hipervínculo

Nombre del archivo siete.html

< HTML >

< HEAD >

< TITLE >Mi primera página de HTML< /TITLE >

< /HEAD >

< BODY >

< a href="C:\berny\berny56\semi2006\html\clase\dos.html" >página dos < /a >< p >

< /BODY >

< /HTML >

Visualiza como queda tú página siete.html: ír a página siete




Ejercicio Ocho

Código para ligar dos páginas por medio de una imagen. La imagen “Gato.jpg” se debe encontrar guardada dentro de la carpeta donde se encuentran los archivos html.

Nombre del archivo ocho.html

< HTML >

< !-- mi primer página en HTML -- >

< HEAD >

< TITLE> ligas con imagen HTML

< /HEAD >

< BODY >

< A HREF="C:\Documents and Settings\alumno3\Escritorio\prueba\uno.html">

< /BODY >

< /HTML >

Visualiza como queda tú página ocho.html: ír a página ocho


Tarea: Elaborar una página web con los 18 (diez y ocho) documentos elaborados en clase por cada uno de los compañeros (ver tema y quién elaboró dicho documento, incluyendo imágenes y un archivo principal index.html desde él cual podrán accesar a todos los archivos anteriores.

Fecha de entrega: Sábado 27 de Mayo de 2006


Conceptos generales del lenguaje HTML 2 (continuación)




۝≈₪۞¤regresar¤۞₪≈۝