Curso Bsico de Programacin de pginas Web usando

HTML

1.- Introduccin al Internet 1.1.- Como surgi? El Internet surgi en 1969 como un proyecto de comunicacin de los EEUU durante la segunda guerra mundial, para mantener comunicadas las distintas instancias del ejercito norteamericano, posteriormente se adopto como un medio de enlace entre instituciones educativas y centros de investigacin para intercambiar investigaciones

Internet es una red de computadoras compuesta por miles de redes ms pequeas distribuidas por todo el mundo. Una red no es ms que un grupo de computadoras conectadas entre s con el objetivo de compartir recursos y se les conoce como terminales. Todas estas computadoras o terminales deben tener un lenguaje comn, deben cumplir unas normas establecidas para que puedan comunicarse entre s. A el conjunto de esas normas se le denomina protocolos.

1.2.- qu es el WWW (Word Wide Web)? Es una aplicacin en Internet, que conjunta sonido, imgenes y texto. En la actualidad se utiliza como un medio de comunicacin entre distintas personas, y como medio de compra ventas de diversos artculos. Otra aplicacin que se les da es el de difusin de distinta informacin de todo tipo y como medio para envi de correo, al que se le denomina correo electrnico (e-mail).

La Web est basada en el protocolo de transferencia de Hipertexto HTTP (HyperText Transport Protocol). La Web es en s, informacin accesible por medio de los navegadores por ejemplo Microsoft Internet Explorer Netscape Navigator. En los navegadores es donde podemos visualizar las pginas Web, que se encuentran en su gran mayoria enlazadas entre s, teniendo de est forma acceso a ms informacin. Las pginas Web como ya se dijo pueden incluir imgenes, grficos, sonidos,animacin etc. Toda esta informacin es transferida gracias a los protocolos de Internet

Protocolos Todas las redes poseen un sistema de protocolos que controlan el intercambio de informacin entre terminales. El protocolo ms utilizado en Internet es el protocolo TCP/IP. Este protocolo fragmenta la informacin en paquetes y as es ms fcil de controlar asignando a cada uno un nmero de orden. URL's El sistema de direcciones de Internet se denomina URL (Uniform Resource Locator).

Una direccin IP es un nmero de 32 bits que sirve para conocer de forma nica una maquina conectada a Internet. Las direcciones de los terminales y servidores son numricas, aunque cada direccin IP tiene su equivalente en el sistema de nombre de dominio DNS (Domain Name System) gracias al cual podemos introducir en forma de texto un nombre DNS equivalente como ya dijimos a una direccin IP, esto nos facilita recordar un sitio con mayor facilidad ya que no es lo mismo escribir www.google.com que la direccin IP que puede ser un nmero como por ejemplo 197.221.212.254

1.3.- Qu son los navegadores? Son aplicaciones cliente que solicitan a un servidor, informacin para ser desplegada a el usuario de la aplicacin, al cual se le denomina visitante. Existen varios navegadores con caracteristicas de presentacin de la informacin de manera distinta por lo cual la vista de la misma diferira de uno a otro browser o navegador.

2.- Introduccin a las pginas Web 2.1.- Qu es una pgina Web? Una pgina Web es la aplicacin en Internet que nos permite visualizar informacin. Es el medio por el cual mantenemos comunicacin con un servidor que contiene la informacin que le solicitamos o nos muestra

2.2.- Elementos de una pgina Web Las pginas Web contienen: TEXTO IMGENES LIGAS O ENLACES SONIDO VIDEO

2.3.- Diseo de una pgina Web Para disear una pgina Web deberemos de planear la informacin que esta contendra y la ubicacin de la misma dentro de la pgina, asi como el nmero de imgenes, sonidos o videos que utilizaremos en la presentacin de la informacin. A menor nmero de imgenes, sonido y video la velocidad de la misma aumentara, podran usarse imgenes de baja definicin.

3.- Creacin de pginas Web usando HTML 3.1.- Qu es el HTML? HiperText Markup Language (lenguaje de marcas de hipertexto), es un lenguaje que maneja la presentacin de informacin auxiliandose de ligas o enlaces a la misma. Emplea para ello instrucciones denominadas Tags las cuales nos sirven para darle forma a lo que se mostrara al usuario

3.2.- Creacin de pginas bsicas en HTML La estructura de una pgina o un documento html es: 1- <HTML> 2- <HEAD> 3- <TITLE> Ttulo </TITLE> 4- </HEAD> 5- <BODY> 6- Etiquetas y cuerpo del documento 7- </BODY> 8- </HTML>

<HTML> <HEAD> <TITLE> Curso de HTML </TITLE> </HEAD> <BODY> <P>Crear pginas HTML resulta interesante adems de entretenido. <P>Aqu pueden escribir otro prrafo incluyendo cualquier texto. </BODY> </HTML>

3.3.- Modificacin de texto e inclusin de figuras. Para modificar el texto de nuestra pgina podremos utilizar los tags o etiquetas: <p align=left> <p align=right> .- Que nos modifica la alineacin del parrafo <font color=#ffffff> <font color=color> .Que nos modifica el color del texto. La instruccin font cuenta con varios atributos como son:

Face = que muestra un estilo de letra de los manejados por Windows. <font face=arial> Size = modifica el tamao de la letra <font size=1> para la letra mas pequea <font size=6> para la letra mas grande Otra instruccin para modificar el tamao del texto es: <Hx> donde x ser un numero del 1 al 6 siendo la letra mas pequea para el 6 y la mas grande para el 1

Las siguientes instrucciones modifican la apariencia del texto presentado <I> Lo que este aqu ser en cursiva </I> <PRE> El texto estar formateado </PRE> <U> Texto que estar subrayado </U> <S> Texto tachado </S> <BLINK> Texto que parpadea </BLINK> Est etiqueta no la soportan todos los navegadores.

<SUP> Texto como superndice </SUP> <SUB> Texto como subndice </SUB> <TT> El texto de aqu adentro quedar en modo teletype, como lo est viendo el lector </TT> La instruccin <basefont size=#> establece el tamao base del texto que es por default 3. bgcolor=color es un argumento del body y nos permite cambiar el color del fondo de nuestra pantalla del navegador, el argumento background=imagen permite incluir una imagen de fondo en la pantalla del browser.

Cdigos de caracteres especiales < menor que ----------------- &lt; > mayor que ----------------- &gt; " comillas --------------- &quot; acento en la letra a --- &aacute; acento en la letra e --- &eacute; acento en la letra i --- &iacute; acento en la letra o --- &oacute; acento en la letra u --- &uacute; letra ---------------- &ntilde; letra ------------------ &uuml; signo ------------------ &#161;

IMGENES Podremos dar un mejor aspecto a nuestro documentos HTML con la inclusin de imgenes. Los formatos de imgenes que todos los navegadores reconocen son gif y jpg. Si queremos incluir otro tipo de formato de imagen lo ms conveniente es utilizar un programa para convertir el formato que deseamos mostrar a gif o jpg. Si queremos incluir fotos en nuestras pginas el formato apropiado es el jpg para iconos, animaciones es el formato gif el ms recomendable.

El formato de la etiqueta de inclusin de imgenes (img) con todos los posibles argumentos es el siguiente: <IMG src="imagen" alt="Texto align="top/middle"/botton/left/rigth border="Tamao del borde height="Alto width="ancho hspace="margen horizontal vspace="margen vertical>

Listas no numeradas.- Con este tipo de lista podemos especificar elementos sin un orden predeterminando, precedidos de vietas o marca definidas por nosotros mismos. La etiqueta de inicio de lista es <UL> y la de final </UL>, para los elementos que componen la lista utilizaremos <LI> sin etiqueta de cierre. Para el uso de marcas o vietas que antecedan a lo elementos de la lista, utilizaremos el atributo type, que podr ser <UL type=disk> un disco, <UL type=circle> un circulo, <UL type=square> cuadrado. Como etiqueta opcional tenemos <LH> titulo </LH> para incluir un titulo a nuestra lista.

<UL type=square> <LH>Tipos de Monedas</LH><br> <LI>Coronas Suecas <LI>Dlar <LI>Libra <LI>Pesos <UL type=circle> <LH>Moneda de la comunidad Europea</LH><br> <LI>EURO </UL>

Listas numeradas Las listas n meradas no son ms que listas con una serie de elementos numerados segn el lugar que ocupan. La etiqueta de inicio es <OL> y </OL> para la de final, para cada uno de los elementos usaremos la etiqueta <LI>. Este tipo de lista tambin posee el atributo type y el atributo start, que especifica el nmero por el que va a empezar la lista. Si no indicamos ninguno, la lista empezar a numerarse a partir del 1.

Con el atributo type vamos a especificar el tipo de lista numerada, sus valores son los siguientes: 1: Numricamente (1,2,3,4,5...) Esta es el tipo por defecto y si se va a utilizar no debemos indicarla) A: Letras maysculas (A, B, C, D, E,...) a: Letras minsculas (a, b, c, d, e,...) I: Nmeros romanos en maysculas (I, II, III, IV, V,...) i: Nmeros romanos en minsculas (i, ii, iii, iv, v,...)

<OL type=i start=3> <LH>Tipos de Monedas</LH><br> <LI>Coronas Suecas <LI>Dlar <LI>Libra <LI>Pesos <OL type=A start=1> <LH>Moneda de la comunidad Europea</LH><br> <LI>EURO <OL> <LH>Monedas por valor <LI>Dlar <LI>Euro <LI>Marco </OL>

Lista de definiciones Con estas listas vamos a poder especificar una serie de trminos y sus definiciones correspondientes. Para definir la lista usaremos la etiqueta <DL> </DL>, y para especificar cada trmino usaremos la etiqueta <DT> por ltimo para especificar la definicin de cada trmino usaremos la etiqueta <DD>.

<DL> <LH>Ttulo de nuestra Lista</LH> <DT>Trmino 1 <DD>Definicin del Trmino 1 <DT>Trmino 2 <DD>Definicin del Trmino 2 </DL>

4.- Creacin de pginas Web usando marcos y ligas 4.1.- Qu es un marco y una liga? Los Marcos o Frames permiten dividir la ventana del navegador en partes pequeas, que reciben el nombre de marcos o recuadros. Para crea un marco se debera escribir una pgina Web, pero a esta se le quita el tag body y se sustituye por el de marcos que es <FRAMESET> </FRAMESET>, dentro de estas etiquetas se definirn las distintos marcos o frames que se van a incluir en el documento

Estructura de una pgina Web que usa marcos <HTML> <HEAD>Cabeza del documento</HEAD> <FRAMESET> Aqu definimos los distintos marcos utilizando etiquetas <FRAMES> que describen cada uno de los marcos. </FRAMESET> <NOFRAMES> Instrucciones de HTML o cuerpo </NOFRAMES> </HTML>

Es muy popular utilizar pginas con marcos y mostrar enlaces en una columna o fila de nuestro marco para ser visualizados en otra ventana dentro del mismo marco, el argumento que se usa en esos casos dentro de la etiqueta de enlace <A HREF=pgina"> es: target="valor los valores de este atributo son los siguientes: target="_parent.- marco primario target="_top.- toda la pagina target="_blank.- nueva ventana target="_self.- el mismo marco

4.2.- Uso de los marcos y de las ligas <FRAMESET COLS="50%,50%"> </FRAMESET> Estas etiquetas le dicen al navegador que divida la ventana en dos columnas, utilizando el atributo COLS=columnas, cada una de las columnas con el 50 por ciento del tamao de la ventana original, pero en realidad esto no es suficiente a menos que le digamos al navegador que poner en cada marco, si no, obtendremos una ventana negra, es por eso que debemos aadir etiquetas <FRAME>, otro atributo es ROWS=renglones.

<HTML> <HEAD> <TITLE>Mi primer FRAME</TITLE> </HEAD> <FRAMESET COLS="50%,50%"> <FRAME SRC="documento1.html name="Nombre del frame 1"> <FRAME SRC="documento2.html name="Nombre del frame 1"> </FRAMESET> </HTML>

Los argumentos de la etiqueta <FRAME> son: <FRAME src="pgina name="Nombre marginwidth=# marginheight=# scrolling="yes/no/auto noresize> SRC="pgina.- documento HTML a visualizar name="Nombre.- nombre del marco marginwidth=#.- mrgenes izquierdo y derecho marginheight=#.- mrgenes superior e inferior scrolling="yes/no/auto.- barra de desplazamiento Noresize.- no permite variar el tamao del marcos.

4.3.- Implementacin de marcos y ligas en las pginas Web

crear una pgina de marcos que tenga 3 sub-ventanas dos columnas y una fila y que utilicen el atributo target dentro de la etiqueta de enlace <A HREF="">

5.- Creacin de un sitio Web 5.1.- Qu es un sitio Web? Un sitio Web es un conjunto de pginas Web almacenadas en un dispositivo fijo localizado en un servidor de Internet. 5.2.- Elementos de un sitio Web Los elementos de un sitio Web son: pginas Web, figuras, sonidos y videos incrustadas en las pginas Web ademas de una direccin o IP del sitio.

5.3.- Optimizacin de la velocidad de los sitio Web Para optimizar la velocidad de los sitios, deberemos de reducir la cantidad de imgenes que contendrn o su calidad, as como la del sonido o video empleado en ellas 5.4.- Creacin de un sitio Web Para crear un sitio Web solo se necesita de un lugar de hospedaje, de las pginas y archivos que contendra la pgina.

Extensin del curso TABLAS El lenguaje HTML nos permite la inclusin de cualquiera de los elementos de nuestra pgina es decir el texto, los enlaces, las listas y las imgenes dentro de una tabla, logrando as una mayor y mejor estructuracin de los contenidos de nuestros documentos

La etiqueta que nos va a permitir la definicin de tablas es <TABLE> </TABLE>. El formato general de la etiqueta sin ningn argumento, es el siguiente: <TABLE> <TR> <TH>Contenido de la celda</TH> <TD>Contenido de la celda</TD> </TR> </TABLE> TR: Renglon TH: Cabecera TD: Datos

<TABLE border=# cellpadding=# width=# o %" height=# o % bgcolor="#rrggbb nombre> Contenido dentro de la tabla </TABLE> border=#" dibujar un borde alrededor de la tabla cellpadding=# separacin entre contenido y borde width=# %" define el ancho de la tabla height=# %" define la altura de la tabla bgcolor="#rrggbb color" define un color de fondo