Está en la página 1de 19

UNIVERSIDAD ANDINA NESTOR CACERES VELASQUEZ

Instituto de Informtica

INTRODUCCION
A
LENGUAJE HTML
Por : Beto Puma Huaman

HTML BSICO
HTML = (Hyper Text Markup Lenguage)
(lenguaje de marcacin de hipertexto), es un
lenguaje informtico diseado para estructurar
textos y presentarlos en forma de hipertexto, que
es el formato estndar de las pginas web.

Por qu se caracteriza?

Por el uso de Tags


(ETIQUETAS).

Tags

INICIO Y FIN
DE UN TITULO
en HTML

INICIO Y FIN
DE UNA
PAGINA HTML
INICIO Y FIN
DE UN
CONTENIDO en
HTML

<HTML>
<HEAD>
****************
</HEAD>
<BODY>
****************
****************
</BODY>
</HTML>

Etiquetas mas Usadas


en HTML
1) <P>y</P> = para separar texto en distintos prrafos.
2) <H1> y </H1>, <H2> y </H2> = etc (hasta 6) sir para

colocar cabeceras.
3) <CENTER> y </CENTER> = Centra cualquier texto.
4) <HR> = (Horizontal Rule) (no tiene correspondiente

de cierre) realiza una lnea horizontal.


5) <BR> = (Break) romper = separa prrafos de texto

sin dejar una lnea en blanco. no tiene sierre.

<html>
<head>

Ejemplos:

<// .........inicio de una pagina HTML//>


<// .........inicio del contenido del titulo//>

<title>MI PRIMER EJERCICIO......EN EL C.C.I.


</title>

</head>
<body>

<// .........fin del contenido del titulo//>


<// .........inicio del contenido de la pagina (cuerpo)//>

<h1><center>MI PRIMERA PAGINA </center></h2>

<HR>

<// .........traza una linea horizontal//>

Esta es mi primera pagina, aunque todavia es muy sencilla.....


Como el lenguaje HTML no es facil, pronto estare en
condiciones de hacer cosas mas interesantes.

<p> Este es un segundo parrafo.........</p>


</body>
<// .........fin del contenido de la pagina (cuerpo)//>

</html>

<// .........Fin de una pagina HTML//>

DANDO FORMA AL TEXTO


<BR><P>
Si queremos obtener mltiples lneas
<BR><P>
en blanco. Ejemplo (Tenemos 4 lneas
<BR><P>
en blanco)
<BR><P>
<B> texto </B> = Coloca el texto en Negrita.
<I> texto </I> = Coloca el texto en Cursiva.
<PRE> y </PRE> = El texto que se encuentra en ellos estar
pre-formateado, aparecera como escrita con una mquina de
escribir (Curier). Adems se respern los espacios en blanco
y retornos de carro.
<BLOCKQUOTE>y</BLOCKQUOTE> = Se utiliza para
destacar una cita textual dentro de un texto general.
<SUP>y</SUP> = se escribe : m <SUP>2</SUP> se
obtendr m2.
<SUB>y</SUB> = se escribe : v <SUB>x</SUB> se
obtendr vx

USO DE LISTAS
1. LISTAS DESORDENADAS
(UNORDERED LISTS) = <UL> y </UL>
LIST ITEM = <LI>
Ejemplo:

Corel Draw 12
PhotoShop 7.0
Flash MX 2004
DreamWeaver MX

<UL>
<LI> Corel Draw 12
<LI> PhotoShop 7.0
<LI> Flash MX 2004
<LI> DreamWeaver MX
</UL>

2. LISTAS ORDENADAS

(ORDERED LISTS) = <OL> y </OL>


Sirven para presentar listados en orden
determinado.
Ejemplo:

1.
2.
3.
4.

Corel Draw 12
PhotoShop 7.0
Flash MX 2004
DreamWeaver MX

<OL>
<LI> Corel Draw 12
<LI> PhotoShop 7.0
<LI> Flash MX 2004
<LI> DreamWeaver MX
</OL>

3. LISTAS DE DEFINICIN
(DEFINITION LIST) = <DL> y </DL>
Son apropiadas para glosarios o definiciones de rminos debe ir
englobada con los tags <DL> y </DL>, adems cada rengln de la lita
tiene dos partes.

(DEFINITION TERM) = <DT>

El nombre de la cosa a
definir.

(DEFINITION DEFINITION) = <DD>

La definicin de
dicha cosa.

Ejemplo:
<DL>
<DT> Una cosa a definir
<DD> La Definicin de esta cosa
<DT> Otra cosa a definir
<DD> Definicin de esta otra cosa
</DL>

UNA COSA A DEFINIR


LA DEFINICIN DE ESTA COSA.
OTRA COSA A DEFINIR.
LA DEFINICIN DE ESTA OTRA COSA

ENLACES o VINCULOS
ESTRUCTURA:

<A HREF = xxx>yyy</A>


Donde:
xxx = Es el destino del enlace
yyy = Es el texto o grfico indicativo

en la pantalla del enlace (Color y generalmente subrayado).

Uso de la etiqueta <A>.La etiqueta <A...>...</A> principalmente se usa para introducir dentro de ellas
un texto o una imagen, que van a ser el elemento identificador de dnde va a
llevar el enlace.

* En el caso de un texto, la sintaxis es muy simple:


<A HREF="ruta_pagina" PROPIEDAD="valor".....>texto del enlace</A>

Ejemplo:
<a href="http://www.yahoo.es" target="_blank">Yahoo</a>
que nos da:
Yahoo

1. ENLACES CON OTRA PGINA:


1

Para realizar los enlaces con otra Pgina


debemos de Guardar (o que estn) los archivos
en la misma pgina.
Debemos tener varias pginas y una inicial
(Index.html) y otras mas.

<A HREF = Ejemplo1.html>Ejemplo1</A>

Nota:
En lugar
de XXX cambiamos por el
nombre del archivo con su extensin.

2.ENLACES CON UNA PAGINA


FUERA DE NUESTRO SISTEMA:
Estar en un servidor distinto al que soporta
nuestra pagina. Es necesario conocer su URL
(Uniform Resource Locator). el URL puede ser una
Pgina Web.

<A HREF =http://www.google.com>Buscador</A>

3. ENLACES CON UNA DIRECCION DE


E-MAIL:
1

Se sustituye a xxx (el destino del enlace) por mailto:


Seguido de la Direccin e-mail, es:

<A HREF =Mailto:tvrock@Hotmail.com>Hotmail</A>

IMAGENES
1

La etiqueta que nos sirve para incluir imgenes en nuestra


Web:

<IMG SCR =imagen.gif>


NOTA N1

El comando IMGsRC (Image Source, Fuente de la imagen)


NOTA N2

Dentro de la etiqueta se puede aadir comando, tal como ALT


<IMG SCR =imagen.gif ALT= descripcion>
Con respecto a la localizacin del fichero de la imagen, sino se indica nada
especial quiere decir que se encuentra en el mismo directorio.

4.ENLACES
PGINA:

EN

LA

MISMA

<A HREF = #marca>yyy</A>


Y en el sitio donde queremos saltar (o ir)
debemos poner la siguiente etiqueta.

<A NAME = marca></A>


Donde:

marca = Cualquier palabra.


yyy
= Son palabras que aparecern
en Hipertexto.

Ejemplo: (enlaces o vinculos)


Supongamos que una hoja html queremos ir
de principio a fin de pagina o viceversa,
digitaremos el siguiente cdigo.

<A HREF = #Final>Pulsa para ir al final</A>


Como resultado ser:
Pulsa para ir al final

Y en final del documento HTML debe ir puesto esta


otra etiqueta:

<A NAME = Final> </A>

UTILIZACIN DE TABLAS:
Las tablas se generan utilizando
principalmente:
<TABLE> (para definir la tabla)
<TR> (para iniciar lneas)
<TD> (para delimitar el inicio de una celda)

<TABLE cellPadding = 5 border = 1 >


<TR>
<TH>ALTURA</TH>
<TH>PESO</TH>
<TR>
<TD>1,87 metros</TD>
<TD>92 kilos</TD>
<TR>
<TD>1,79 metros</TD>
<TD>75kilos</TD>
</TR>
</TABLE></CENTER>

E
J
E
M
P
L
O

INSERTAR IMGENES Y GIFS


Los vnculos con imgenes son sai igual que con
los textos, solo que aqu deber tenerse una
imagen de tipo GIF, JPG, etc. En la misma
carpeta.

<img src=xxxxx" width="800" height="600">


Donde:
xxxx = Direccin o ubicacin del archivo.
(file:///C|/nombre)
width, height = Dimenciones del on palabras
que aparecern en Hipertexto.

Ejemplo:
<A HREF =http://www.google.com>

Buscador</A>