LENGUAJE HTML BÁSICO

LENGUAJE HTML BÁSICO

Antes de adentrarnos en el mundo de la programación Web definamos muy prácticamente una

página Web.

¿Qué es una página Web?

Se puede responder a esta pregunta desde dos puntos de vista:

1. Desarrollador o creador de páginas Web: Para ellos, se trata de una hoja electrónica la

cual está conformada por una variedad de material audiovisual, que está organizado

estructuralmente para mostrar cualquier tipo de información, la cual está interconectada

con una serie de páginas similares conformando así un sitio Web.

2. Usuario: Es una especie de programa que sirve para buscar, utilizar e intercambiar gran

variedad de información, la cual se muestra en la pantalla de un computador.

Ahora, para construir nuestra primera página, debemos conocer primero el lenguaje de

programación que se utiliza. Es por ello que recomiendo, antes de empezar a usar herramientas

para el diseño Web, tener una base de referencia sobre el funcionamiento del lenguaje HTML, el

estándar para crear páginas Web.

Entonces empecemos:

HTML (Hyper Text Mark-up Language) es un lenguaje de programación (herramienta

estructurada que permite modificar el comportamiento de un programa e incluso de todo un

computador) para Internet que se utiliza en la creación y modificación de páginas Web.

Es una herramienta sencilla utilizada parar el desarrollo de hipertextos, es decir, texto presentado

en forma estructurada y agradable, con enlaces (Hyper-Links) que nos dirigen tanto a otras

páginas como a segmentos de ellas mismas, y con inserciones multimedia (gráficos, sonido, slides

o diapositivas, video, animaciones, etc.), que resumiendo y lo vamos a tomar de aquí en adelante,

son OBJETOS o elementos que tenemos en una página Web, todo esto se puede realizar por

medio de un editor de textos sencillo generando un archivo plano guardado con extensión htm o

html, aquí creamos la página, luego abrimos un explorador de Internet (Mozilla, Opera o Internet

Explorar), el cual interpreta el texto de este archivo y muestra la página como estamos

acostumbrados a verla.

Esta herramienta web se basa en la interpretación de etiquetas que forman un documento de

texto lineal y jerárquico donde podemos referenciar enlaces a material audiovisual, de allí las

características físicas de una página Web (texto, imágenes, sonido, video,…), ahora revisemos el

concepto principal:

ETIQUETA:

Son palabras reservadas en ingles, interpretadas por la herramienta HTML encerradas entre los

signos menor que (<) y mayor que (>), que definen una acción, una inserción de objetos (tablas,

imágenes, sonido, texto, etc.) y el diseño de la página Web; su estructura general es la siguiente:

<Nombre etiqueta>

Más etiquetas y/o texto = lenguaje HTML

</Nombre etiqueta>

Donde la primera línea tenemos la etiqueta de abertura

El siguiente es un ejemplo de código HTML que define que es la base para desarrollar cualquier

página:

<HTML> <HEAD> <TITLE>Mi primera pagina web </TITLE> </HEAD> <BODY> <H1 align="center" >Mi Primera pagina web </H1> <HR> <P>Esto tan sencillo es una verdadera página web, a unque le falta el contenido, pero todo llegará.</P> </BODY> </HTML>

Lo que haremos será abrir en Windows WordPad o Bloc de Notas, en Linux gedit, copiamos todo el

texto anterior en el archivo en blanco, lo guardamos con el nombre Mi_1raPagina.htm sin cerrarlo,

le damos doble click encima del icono del archivo para que lo ejecute algún explorador de Internet

y por último volvemos al archivo para seguir anexándole más objetos HTML; si hemos cerrado el

archivo y lo queremos modificar, entonces damos click derecho sobre el ícono y le damos abrir

con… cualquiera de los tres mencionados anteriormente; debe aparecer exactamente esto:

Explicando el código HTML anterior, tenemos que:

Si te fijas en la página que ves con el explorador solo se ve parte de lo que has escrito,

concretamente todo lo que no está encerrado entre los símbolos < y >. Eso es el contenido de la

página, pero ¿y lo que está entre esos paréntesis angulares? pues esas son las etiquetas que le

dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el título de la

página, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:

<ETIQUETA parámetros> ... </ETIQUETA>

Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de línea o <HR> linea

horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrda al

final del documento con </HTML>, eso quiere decir que estamos ante un HTML:

<HTML> ... </HTML>

Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque está

limitada con la etiqueta <HEAD> </HEAD>. Él contenido de esta parte no siempre es visible, y si lo

es nunca se muestra en la página en sí. Contiene por ejemplo el título que se ve en la ventana del

explorador, arriba a la izquierda. La cabecera queda por tanto:

<HEAD> <TITLE>Mi página web</TITLE> </HEAD>

La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la página web. Tiene una

etiqueta con cierre:

<BODY> ... </BODY>

El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en el es donde

colocarán prácticamente todos los elementos que vamos a ir viendo por este manual. Los

atributos que admite esta etiqueta <BODY>:

BACKGROUND Coloca una imagen como fondo de la página.

BGCOLOR Define el color de fondo de la página.

TEXT Color del texto.

LINK Color de un enlace no visitado (por defecto azul).

VLINK Color de un enlace ya visitado (por defecto púrpura).

ALINK Color que toma un enlace mientras lo estamos pulsando (por defecto rojo).

LEFTMARGIN y TOPMARGIN Número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página.

LEFTMARGIN y TOPMARGIN Equivalentes a los anteriores, pero éstos funcionan en Netscape.

Y ahora el contenido:

<H1 align="center"> Mi primera página web</H1>

Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center"), o sea,

en tamaño grande y centrado en la página, una forma de resaltar la frase.

Estos son las etiquetas que se pueden usar para mostrar cabeceras o títulos:

Etiqueta Resultado

<H1> ... </H1> Cabecera de nivel 1 <H2> ... </H2> Cabecera de nivel 2 <H3> ... </H3> Cabecera de nivel 3 <H4> ... </H4> Cabecera de nivel 4 <H5> ... </H5> Cabecera de nivel 5

<H6> ... </H6> Cabecera de nivel 6

Ahora separamos esa frase por medio de una línea horizontal:

<HR>

Como ves este es un ejemplo de etiqueta sin cierre. Y por último colocamos un texto explicativo en

un párrafo (<P></P>), o sea, un bloque de texto con un espacio por delante y otro por detrás:

<P>Esto tan sencillo es una verdadera página web, a unque le falta el contenido, pero todo llegará.</P>

Evidentemente en las páginas no todo el contenido es igual y por tanto no todo se ha de mostrar

en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle

diferentes formatos, modificando desde el aspecto de los caracteres (tipo de letra) hasta el color.

Podemos formatear desde las letras una por una hasta bloques completos de texto.

ESTILOS DE PÁRRAFOS

Estos estilos o formatos actúan a nivel de párrafo

Etiqueta Significado Resultado

<P> Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto.

Soy un párrafo: fíjate en los espacios de antes y de después.

<p ALIGN=x> ... </p>

Justificar el texto del párrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY html4 )

Alineación izquierda Texto centrado

Alineación derecha Texto justificado o sea, alineado a ambos lados sin dejar, escalones en el margen derecho.

<CENTER> ... </CENTER>

Permite centrar todo el bloque de texto encerrado.

Alineación por defecto Texto centrado

<PRE WIDTH=x> ... </PRE>

Representa el texto encerrado en ella con un tipo de letra de paso fijo. El parámetro WIDTH especifica el número máximo de caracteres en una línea.

Estoy en paso fijo

<BLOCKQUOTE> ... </BLOCKQUOTE>

Mete sangrías de párrafo tanto a derecha como a izquierda. Suele usarse como tabulador

Si quieres ver el texto indentado por ambos márgenes usa el Blockquote.

Para cambiar el tipo de letra en un párrafo definido, como lo hacemos con un editor de textos se

utilizan las siguientes etiquetas:

Etiqueta Utilidad Resultado

<B> ... </B> Pone el texto en negrita Soy un texto negro como el tizón

<I> ... </I> Representa el texto en cursiva Estoy súper felix

<U> ... </U> Para subrayar algo Como soy muy importante estoy

subrayado

<S> ... </S> Para tachar A mí, en cambio, nadie me quiere

<SUP> ... </SUP> Letra superíndice E=mc2

SUB> ... </SUB> Letra subíndice ai,j=bi,j+1

<BIG> ... </BIG> Incrementa el tamaño del tipo de letra

Soy GRANDE

<SMALL> ... </SMALL> Disminuye el tamaño del tipo de letra

Creí ver un lindo gatito

Otras etiquetas:

Etiqueta Significado Resultado

<BR> Cambio de línea Un espacio en blanco entre líneas

<HR> Barra horizontal

 Comentarios No se ve muestra en la página

Antes de continuar, hagamos referencia sobre algo supremamente importante que son los

ATRIBUTOS de una etiqueta (pero no todas las tienen, y eso lo veremos paulatinamente); y no

son más que características de los objetos que se quieren utilizar, por ejemplo pensemos en el

objeto Tabla que su estructura en Html es:

<table> Su resultado es: <tr> <td>1,1</td> <td>1,2</td> </tr> <tr> <td>2,1</td> <td>2,2</td> </tr>

table, como en cualquier procesador de textos tiene los siguientes atributos: ancho, alto, borde,

alineación, color entre otros; si queremos la tabla anterior con borde sencillo, color de fondo, el

texto de la celda alineado en el centro, una tamaño de 200 de ancho y 100 de alto, la tabla

centrada en la página; entonces ahora la etiqueta quedaría de la siguiente forma:

<table align=”center” width=”200” height=”100” bord er=”1” bgcolor=”Yellow” bordercolor=”blue”> <tr align=”center”> El resultado es: <td>1,1</td> <td>1,2</td> </tr> <tr align=”center”> <td>2,1</td> <td>2,2</td> </tr>

Generalizando tenemos entonces una reforma en la semántica para insertar atributos es:

atributo=”valor”, donde valor es el dato que queremos que tome ese atributo, ahora la estructura

de una etiqueta quedaría así:

<Nombre etiqueta atributo1=”valor”, atributo2=”valor”, atributo3=”valor” …>

Más etiquetas y/o texto = lenguaje HTML

</Nombre etiqueta>

Así, podemos aplicar atributos a cualquier objeto que tengamos en una página Web, lo que

veremos a medida que vamos avanzando.

ENLACES (Links):

Son accesos que tenemos dentro de nuestra página para enlazar otros sitios Web de la internet, e

incluso si una página es muy extensa, existen enlaces a partes u objetos dentro de ellas para

facilitar su uso.

Así, los enlaces que nos encontramos en cualquier página pueden ser de dos tipos: internos a la

propia página o externos a otra página. La forma de construir unos y otros es muy similar como

veremos a continuación:

La etiqueta <a> Texto que sirve como enlace </a>

Todo el texto que esté contenido dentro de esta etiqueta compone el enlace como tal, si es texto

será resaltado por color, subrayado o lo que necesitemos, si es una imagen, tendrá un borde si lo

queremos así.

Además, cuando pasamos el puntero del ratón que es la flecha normalmente sobre un link,

este cambia su forma a la siguiente y cuando damos click sobre el nos envía el sitio que

hemos definido en el enlace. El formato completo de la etiqueta es el siguiente:

<A HREF="dirección de destino" target="destino">Pul sar para saltar</A>

Donde, la dirección de destino será la página Web especificada mediante una URL, en formato

absoluto o relativo (con o sin http://). En ambos casos el destino puede incluso ser un elemento

concreto dentro de la página. En este caso se ha usado un texto pero igualmente podríamos

colocar una imagen.

El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva

página. Por ahora veremos dos de sus valores posibles:

_blank: Muestra la nueva página en una ventana nueva y sin nombre del navegador.

_self: Muestra la nueva página en el marco donde está declarado el enlace. Este es el destino por

defecto de cualquier enlace dentro de una página, es decir, sin colocar el atributo target.

Que es una URL

Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro números

entre 0 y 255, algo así como 84.234.12.122, cualquier sitio de Internet está identificado por esta

dirección. Pero como quiera que recordar esos números no es nada fácil existen unos servidores

de nombre que transforman esas direcciones en nombres más humanos como

www.liceodelosandes.org. A estas direcciones se les llama Universal Resource Locator, o URL, es

la forma de localizar cualquier página en internet. En general tiene el siguiente formato:

protocolo://www.liceodelosandes.org

Donde protocolo puede ser:

http: Es el protocolo para la transmisión de documentos HTML, es decir, el que habitualmente

usamos para ver las páginas en nuestro navegador.

https: Es similar al anterior pero con la particularidad de que la información viaja codificada

mediante técnicas de seguridad.

ftp: Es un protocolo para la transmisión de ficheros (File Transfer Protocol). Permite intercambiar

ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores actuales permiten

acceder a estos servidores FTP, pero lo más normal es usar unos programas al efecto

denominados clientes de FTP.

mailto: Otro protocolo para la transmisión de datos, pero en este caso a través de servidores de

correo.

news: Mediante este protocolo accedemos a los denominados grupos de noticias, listas de

distribución de mensajes relativos a temas concretos. Habitualmente se accede a estos servidores

mediante el cliente de correo.

telnet: Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo

que no es habitual en servidores donde la seguridad esté bien pensada.

Entonces para acceder a la página del colegio Liceo de los Andes, tenemos que ingresar la

siguiente etiqueta:

<A HREF="http://www.liceodelosandes.org" target="_s elf">Liceo de los Andes</A>

En la próxima publicación avanzaremos más en este tutorial de HTML.

_________________________________

Ing. Jhon Darley Saldaña Parra _________________________________

LENGUAJE HTML BÁSICO

Documents

Transcript of LENGUAJE HTML BÁSICO