LENGUAJE HTML BÁSICO
Click here to load reader
-
Upload
jdarley-saldana -
Category
Documents
-
view
795 -
download
0
Transcript of 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
<!--Cualquier texto --> 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 _________________________________