Академический Документы
Профессиональный Документы
Культура Документы
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.
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>
<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ó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ón de personas con gran poder adquisitivo. </p> </body> </html>
FIN