Sie sind auf Seite 1von 8

Html

El HTML es mas una codificacin que un lenguaje de programacin. Su estructura


bsica es tan simple que cualquier persona sin principios en programacin puede
aprenderlo con gran facilidad.
Inicialmente el WWW (Worl Wide Web) era poco interactivo, limitndose a desplegar la
informacin en modo texto . Luego el permanente avance de tecnolgico surgieron los
visualizadores grficos (browsers) y con ellos el HTML (Hypertext Markup Languaje)
lenguaje utilizado para la presentacin de la informacin en la red.
La finalidad de los browsers, como Netscape o Internet Explorer es interpretar el
cdigo HTML que llega a nuestros computadores por medio del HTTP

ESTRUCTURA BSICA
Para comenzar debemos saber que el HTML utiliza una codificacin genrica, la cual
hace uso de TAGS o etiquetas. Mediante estas etiquetas es posible separar el contenido
del documento de su formato.
Los TAGS son comandos que se especifican en el cuerpo del programa, con el fin de
darle las caractersticas deseadas a la informacin.
Toda pgina Web debe contener la siguiente estructura :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY> Esta es mi primera pgina Web</BODY>
</HTML>
La etiqueta <HTML> le indica al visualizador que va a comenzar a leer un documento
HTML y se debe colocar siempre al comienzo y al fin del texto.
La etiqueta <HEAD> indica un encabezado, dentro del cual se coloca informacin como
el ttulo, el cual debe estar contenido entre la etiqueta <TITLE>
Entre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que realmente
vemos en el Web. Para comenzar a escribir un documento, es importante tener en
cuenta que el lenguaje HTML no distingue mas de un espacio entre caracteres y se
olvida de cualquier formato que se le de al texto (negrilla, cursiva, tipo de letra, entre
otras). Recordemos que para esto es que se cre el HTML, toda presentacin final debe
ser proporcionada mediante las etiquetas.
Cada etiqueta, con excepcin de unas cuantas, le debe indicar al visualizador cuando
finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser cualquier etiqueta. De
esta manera indicamos cuando comienza y termina el encabezado, el ttulo, el cuerpo y
el documento HTML.

DANDO FORMATO AL TEXTO DEL DOCUMENTO


Como ya habamos mencionado, el HTML no distingue masa de un espacio entre
caracteres, saltos de lnea, negrilla, cursiva, tamao y tipo de fuente, vietas,
entre otras. Para lograr tales caractersticas en el texto del documento HTML
(recordemos que el texto va dentro del cuerpo del documento entre las etiquetas
<BODY> </BODY>) se debe hacer uso de las etiquetas que explicaremos a
continuacin.
Etiquetas de formato:

Negrita
Cursiva
Subrayado

<B> Texto en negrita</B>


<I> Texto en cursiva</I>
<U> Texto subrayado</U>
Monoespaciado <TT> Texto como si estuviera escrito en mquina da escribir </TT>
<PRE> Texto que conserva todos sus espacios y tabuladores, y
Preformateado
aparece en formato monoespaciado</PRE>
Etiquetas para prrafos:

Nuevo prrafo (dos


espacios)
Lnea horizontal
Salto de lnea (un
espacio)
Tamao de la fuente

<P>
<HR>
<BR>
<Hx> </Hx>. Donde x es un nmero entre 1 y 6, siendo 1 el
tamao mas grande y 6 el ms pequeo

AGREGANDO IMGENES A SU PGINA


Las pginas en el Web no deben estar llenas de texto por todos lados pues esto hace
que los surfeadores se aburran de verlas y como resultado obtendrn una pgina que
nunca es visitada. Una herramienta muy til para hacer de las pginas un documento
llamativo y amigable es hacer uso de imgenes relacionadas con el texto al que se esta
haciendo referencia. Se imaginan una valla publicitaria sin ningn tipo de imagen ?
Tambin es muy importante una excelente combinacin de colores de fondo y de texto,
con el fin de hacer que la pgina sea lo mas leble posible. Es en este punto donde
entra a jugar la creatividad del diseador.
Para colocar una imagen en una pgina basta con llamarla desde el documento HTML
( es similar los vnculos hacia pginas cercanas). Lo primero es disear el grfico

deseado en cualquier programa de dibujo como el Corel Draw o el Adobe Photoshop,


luego se debe convertir a cualquiera de los formatos aceptados por el lenguaje HTML
(GIF y JPEG).
La estructura es la siguiente :
<IMG SRC= "Nombre del archivo" >

<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>

Bienvenidos al curso de HTML</h1></center><br>


<hr width=50%><br>
<h2>Informaci&oacute;n General</h2>
Este curso muestra los conceptos b&aacute;sicos del uso de
etiquetas e instrucciones en la elaboraci&oacute;n de
documentos <b><i><font
color="#000080">HTML</font></i></b>.<br><br>
<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center>
<br>
Es muy importante saber ubicar los gr&aacute;ficos y combinar
de buena manera los colores para brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una p&aacute;gina WEB es muy importante, pues provee a nuestro
trabajo una ventana al mundo.<br>
</body>
</html>

<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
Bienvenidos al curso de HTML<br>
<hr align=center width=50%><br>
Cuando la temperatura es menor a 15&deg;c hace
bastante fr&iacute;o.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de p&aacute;gina WEB :)<br>
</body>
</html>

<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<h1 align="center">
Bienvenidos al curso de HTML</h1><br>
<hr align=center width=50%><br>
<h2>Bienvenidos</h2>

Cuando la temperatura es menor a 15&deg;c hace


bastante fr&iacute;o.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de p&aacute;gina WEB <b><i>:)</i></b><br>
<b>Este texto esta con negrillas</b><br>
<u>Este texto esta con subrayado</u><br>
<i>Este texto esta con inclinaci&oacute;n it&aacute;lica</i><br>
Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>
</body>
</html>

Numeracin y vietas

html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Debemos a comprar</h2><br>
<ul>

<li>Camisas para Jos&eacute;</li>


<li>Loci&oacute;n para Daniel</li>
</ul><br>
<h2>Estudiar para ma&ntilde;ana</h2><br>
<ol>
<li type=a>Geometr&iacute;a</li>
<li>ciencias Sociales</li>
</ol><br>
<h2>Actividades de la semana</h2><br>
<ol>
<li type=i>Asistir a la Universidad</li>
<li>Comprar Disco</li>
<li>Llevar el auto al mec&aacute;nico</li>
</ol><br>
<h1>Objetivos</h1>
<ul>El uso de estas etiquetas tambi&eacute;n puede ayudar a mover
el texto en base a tabulaciones o sangr&iacute;as de texto, para
diferenciar parrafos o textos de los encabezamientos.
</ul>
</body>
</html>

<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Debemos a comprar</h2><br>
<ul>
<li>Camisas para Jos&eacute;</li>
<li>Loci&oacute;n para Daniel</li>

</ul><br>
<h2>Estudiar para ma&ntilde;ana</h2><br>
<ol>
<li type=a>Geometr&iacute;a</li>
<li>ciencias Sociales</li>
</ol><br>
<h2>Actividades de la semana</h2><br>
<ol>
<li type=i>Asistir a la Universidad</li>
<li>Comprar Disco</li>
<li>Llevar el auto al mec&aacute;nico</li>
</ol><br>
<h1>Objetivos</h1>
<ul>El uso de estas etiquetas tambi&eacute;n puede ayudar a mover
el texto en base a tabulaciones o sangr&iacute;as de texto, para
diferenciar parrafos o textos de los encabezamientos.
</ul>
</body>
</html>