You are on page 1of 8

Fundamentos de HTML

Contenido

1. Conceptos bsicos 2. La estructura base del documento HTML. 3. Elementos bsicos 4. Hipervnculos 5. Insertar imgenes.

Conceptos bsicos.
World Wide Web (WWW): Un recurso, servicio, un sistema de informacin, el sistema de informacin propio de Internet. Navegador: Es el programa que nos ofrece acceso a la web. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la informacin web. Puede decirse que cada casa de software podra tener su navegador propio, aunque los mas populares sean Netscape e Internet Explorer.

Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador. HTTP: Es el protocolo de transferencia de hipertexto, el protocolo que los servidores de World Wide Web utilizan para mandar documentos HTML a travs de Internet. URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la direccin que localiza una informacin dentro de Internet. Ej.: www.uca.edu.sv

HTML: "Lenguaje para marcado de hipertexto". Ms claro an, se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en tags (instrucciones que le dicen al texto como deben mostrarse) y atributos (parmetros que dan valor al tag). Ej. <tag> texto afectado </tag>

Continuacin...

Una pgina web es un archivo de hipertexto, en donde se organizan contenidos: texto, grficos, audio, video, animaciones, etc.

Un sitio web es la estructuracin de diferentes pginas, que en su conjunto contienen todos los elementos que identifican a una empresa, un tema, una actividad, etc.

La estructura base del documento HTML

Es recomendable que todo fichero HTML siga la siguiente estructura: <html> < head> <title>Mi primer ttulo</title> </head> <body> <p>Mi primer prrafo en una pgina web<p> </body> </html>

Descripcin de la estructura base

<HTML>: indica el tipo de documento y el cdigo en el que est escrito. <HEAD>: Especifica la antesala a los contenidos de la pgina web. Son pocas las tags que van dentro de ella, la ms comn es la del titulo <TITLE> que ser utilizado por los marcadores del navegador e identificar el contenido de la pgina. En el encabezado (head) no se coloca nada del texto del documento. <BODY>: Encierra el contenido de la pgina web.

Elementos bsicos.

<H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las tags <H1> Titular </H1>. Se definen mediante las tags <H1>.....</H1> hasta <H6>.....</H6> <P>: Prrafos. En principio, sin entrar en detalles de alineacin u otras caractersticas, digamos que se definen por las tags <P>.....<P>. <BR>: Saltos de lnea. Esta tag sirve para realizar un salto de linea, puede poner tantas como desee y realizar un salto de lnea por cada una de ellas.

Ejemplo 2:
<html> <head> <title>Mi segunda pgina web</title> </head> <body> <h1>Mi segunda pgina</h1> <h2>Mi segunda pgina</h2> <h3>Mi segunda pgina</h3> <h4>Mi segunda pgina</h4> <P>Hola amigos, esta es mi segunda pgina, como pueden ver, tiene titular, un par de prrafos y tres saltos de lnea.</P> Uno<br> Dos<br> Tres<br> </body> </html>

Creacin de hipervnculos.
Lo caracterstico del lenguaje HTML es el poder generar vnculos de hipertexto para enlazar con ellos todos sus documentos en la web. Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su direccin URL) y el texto que servir de punto de activacin del otro documento. Este segundo elemento ser el que veamos en pantalla y que se servir del primero para saltar de documento. Los enlaces se generan mediante la vieta <a>.....</a> que se ve acompaada de un atributo ya sea <a href=""> o <a name="">. <a hreg=url">.....</a>: Es el ms habitual de los atributos y sirve para saltar entre diferentes URLs. De momento veremos: Saltar de un archivo a otro dentro del mismo sitio: En el archivo 1 incluiremos la directiva <a href="archivo2.html">Ir a la pgina</a> Saltar a una pgina web externa: <a href=http://www.yahoo.com">ir a Yahoo</a>

Ejemplo 3:
<HTML> <HEAD> <TITLE>Ejemplo 3</TITLE> </HEAD> <BODY> <A NAME="arriba"><H1>Pgina de enlaces</H1></A> <A HREF="#abajo">Ir abajo</A><br> <A HREF=miprimerintento.html">Ir a mi primer intento</A><br><br> <A HREF=ejemplo2.html">Ir a ejemplo 2</A> <A HREF="http://www.yahoo.com/">Ir a Yahoo</A><br> <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br>.<br>.<br>.<br>.<br>.<br> <A NAME="abajo"><br></A> <A HREF="#arriba">Ir arriba</A> </BODY>

</HTML>

Insertar imgenes.
Las imgenes se especifican a partir de la vieta <img> que no tiene su correspondiente componente. Algunos atributos que acompaan a esta vieta son: src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar. Align= Permite controlar la alineacin de una imagen con respecto a una lnea de texto adyacente o a otras imgenes en esa lnea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom. Alt= Es la alternativa que se estableci cuando todava existan visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratn por encima. WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar. HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen. BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen. Ejemplo: <IMG SRC="/imagenes/carroviejo.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT=Un carro viejo">

Ejemplo 4:
<html> <head> <title>Insertar im&aacyte;genes</title> </head> <body> <h1>Carros de colecc&oacute;n</h1> <img src="/imagen/carroviejo.jpg" width=140 heigth=210 border=0 alt="Un carro viejo align=rigth"> <img src="/imagenes/carronuevo.jpg" width=140 heigth=210 border=3 alt="Un carro nuevo;" align=left"> <p>La compra de carros de coleccin ha sido por mucho tiempo la distracci&oacute;n de personas con gran poder adquisitivo. </p> </body> </html>

FIN

You might also like