Curso de HTML para Diseñar Paginas Web

ETSPNP 2013 CHICLAYO
CURSO DE HTML PARA DISEAR PAGINAS WEB

<HTML>
<HEAD>
<TITLE> TtuIo de mi pgina de Internet </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera pagina </CENTER> </H1>
<HR>
Esta es mi primera pagina, aunque todava es muy senciIIa. Como eI Ienguaje HTML
no es difciI, pronto estaremos en condiciones de hacer cosas mas interesantes.
<P> Aqu va un segundo prrafo.
</BODY>
</HTML>
Para escribir ttuIos se usa Ia etiqueta <Hx></Hx> en donde x es un nmero.
EjempIo:
<h1>TituIo principaI</h1>
<h2>TituIo secundario</h2>
<h3>TituIo terciario</h3>
<h4>TituIo cuarto niveI</h4>
<h5>TituIo quinto</h5>
<h6>TituIo sexto</h6>
Quedara mas o menos as:
TituIo principaI
TituIo secundario
TituIo terciario
TituIo cuarto niveI
TituIo quinto
TituIo sexto
5. Etiquetas de prrafo
Para esto se utiIiza Ia etiqueta <P> y </P>. Este comando es muy tiI debido a que si
uno escribe aIgo (en eI editor que se este utiIizando) por mucho espacio que uno Ie
de siempre aI texto, siempre va a aparecer en Ia misma Inea.
Para aIinear un prrafo se utiIiza eI comando <ALING> y </ALING>, utiIizado dentro
de Ia etiqueta <P>. Se puede aIinear de tres formas diferentes:
<p aIign="Ieft"> Prrafo... </p> AIinea a Ia izquierda.
<p aIign="center"> Prrafo... </p> ReaIiza un centrado.
<p aIign="right"> Prrafo... </p> AIinea a Ia derecha.
Cuando nosotros queremos que Io que escribimos aparezca en otra Inea utiIizamos
eI comando <BR>.
1
AI terminar de escribir un prrafo es conveniente y esttico utiIizar eI comando para
separar un prrafo de otro que es <HR>
Etiquetas para darIe formato aI texto:
Para eI tamao y tipo de Ietra se usa Ia etiqueta <FONT> y </FONT>, que posee tres
atributos: tamao (Size), Tipo de Ietra o fuente (face) y coIor
Formato:
<B> y </B> Sirve para coIocar un texto en Negrita.
<U> y < /U> Sirve para subrayar un texto
<STRIKE> y </STRIKE> Sirve para tachar un texto.
<STRONG> y </STRONG> CumpIe Ia misma funcin que <B>
<I> y <I> Para coIocar un texto en cursiva.
<EM>texto con nfasis</EM> texto con nfasis
<CITE>citacin</CITE> citacin
<DFN>definicin</DFN> definicin
<KBD>tecIado</KBD> tecIado
<SAMP>ejempIo</SAMP> ejempIo
SIZE: ReguIa eI tamao de Ios caracteres.
EjempIo:<font> texto... </FONT>.
FACE: Es Ia fuente que se quiere usar, AriaI, Times new Roman, etc.
EjempIo:
<FONT> texto.</FACE>
CoIor: ReguIa eI coIor de Ios caracteres. En principio existen dos posibiIidades para
definir Ios coIores en HTML:
1. Mediante Ia especificacin de Ios vaIores RGB deI coIor deseado en forma
hexadecimaI (RGB=Red/Green/BIue, vaIores Rojo/Verde/AzuI)
2. Mediante Ia especificacin deI nombre deI coIor en ingIes
EjempIos:
<FONT COLOR="WHITE">BIanco</FONT>
BIanco
2
#FFFFFF
<FONT COLOR="BLACK">Negro</FONT>
Negro
#000000
<FONT COLOR="RED">Rojo</FONT>
Rojo
#FF0000
<FONT COLOR="GREEN">Verde</FONT>
Verde
#00FF00
<FONT COLOR="BLUE">AzuI</FONT>
AzuI
#0000FF
<FONT COLOR="YELLOW">AmariIIo</FONT>
AmariIIo
3
#FFFF00
<FONT COLOR="CYAN">Cyan</FONT>
Cyan
#00FFFF
<FONT COLOR="MAGENTA">Magenta</FONT>
Magenta
#FF00FF
Si nos decidimos a trabajar con vaIores hexadecimaIes, entonces tenemos Ia
Iibertad de utiIizar 16,7 miIIones de coIores. De esta manera trabajamos
independientemente de Ios navegadores Web.
Si especificamos eI nombre deI coIor, podemos evitar Ia definicin deI coIor en
forma hexadecimaI que es un poco ms difciI. ActuaImente estn estandarizados
tan sIo 16 coIores. Existen coIores adicionaIes Ios cuaIes son dependientes de Ios
navegadores Web.
Primero que todo debe escribir un smboIo #. A continuacin siguen Ias 6 cifras
para Ia definicin deI coIor. Las primeras 2 cifras definen eI vaIor rojo, Ias
siguientes 2 eI vaIor verde y Ias 2 Itimas eI vaIor azuI.
Las cifras hexadecimaIes son:
0 (0000)
1 (0001)
2 (0010)
3 (0011)
4 (0100)
5 (0101)
6 (0110)
4
7 (0111)
8 (1000)
9 (1001)
A (1010)
B (1011)
C (1100)
D (1101)
E (1110)
F (1111)
Para ponerIe coIor de fondo a Ia pgina escribir:
<body bgcoIor=#808080></body> con eI cuaI obtendremos un coIor de fondo gris
oscuro.
CoIocar maI Ios coIores de fondo en nuestras pginas puede provocar probIemas.
Qu ocurra con Ios Iinks o enIaces si coIocramos un fondo de coIor azuI?.
Puesto que Ios Iinks son azuIes cuando todava no se han puIsado puede ocurrir
que no se puedan Ieer con cIaridad o incIuso que no se puedan distinguir en
absoIuto deI fondo.
Se puede imaginar todava un caso peor si decidiramos coIocar un fondo
demasiado oscuro, tan oscuro que no permitiera distinguir con cIaridad Ia
informacin que se presenta en pantaIIa. Podemos remediar esto eIigiendo
nosotros mismos eI coIor que queremos que tengan Ios Iinks o enIaces e incIuso eI
texto, Ias etiquetas para hacer esto son Ias siguientes:
* text="#nmero" Para eI coIor deI texto.
* Iink="#nmero" Para eI coIor de Ios enIaces.
* vIink="#nmero" EI coIor con que aparecern Ios enIaces ya visitados.
* aIink="#nmero" CoIor deI enIace cuando Io puIsamos.
Por Io tanto Ia etiqueta <body> puede quedar deI siguiente modo:
<body bgcoIor="#num" text="#num" Iink="#num" vIink="#num" aIink="#num">
Ahora veremos como poner una imagen de fondo. Es muy senciIIo, basta con usar
Ia etiqueta:
background="IocaIizacin de Ia imagen" Esta etiqueta va dentro de Ia etiqueta
<body>.
EjempIo:
<body background="/documentos/htmI/gifs/dragonbaII.gif">
Con esto Iograremos que Ia imagen dragonbaII.gif aparezca como fondo en nuestra
pagina.
Etiquetas META
Son usadas para poner meta-informacin deI documento. Esta "directiva" indica aI
visor de Internet Ias paIabras cIave y contenido de nuestra pgina Web. Muchos de
5
Ios buscadores de pginas Web de Internet (Yahoo, Lycos, etc...) utiIizan eI
contenido de esta directiva para incIuir Ia pgina en sus bases de datos.
EjempIo:
<META NAME = "Pagina de PabIo" content = "Mi pagina personaI de SaiIor Moon">
Indica aI visor eI nombre de Ia pgina y sus contenidos principaIes.
<META NAME="Author" content="PabIo RavioIi">
Indica eI nombre de Ia persona que eIabora Ia pagina WEB
<META NAME = "keywords" content = "Informacin de SaiIor Moon">
Indica aI visor Ias paIabras cIave para Ios buscadores de Internet.
Para hacer Iistas:
Las Iistas se definen de forma muy senciIIa: se dice dnde empieza Ia Iista, dnde
empieza cada punto y dnde acaba Ia Iista. Las etiquetas que se utiIicen en cada
caso deben aparecer aI principio de Inea, o aI menos sin texto por deIante (sIo
espacios o tabuIaciones).
Las Iistas pueden ser: Lista desordenada, <UL> (Unordered List).
Lista ordenada, <OL> (Ordered List).
EjempIos de diferentes tipos de Iistas:
Lista con nmeros romanos:
<oI>
<Ii type=I>Manzana
<Ii type=I>Zanahoria
<Ii type=I>Lechuga
<Ii type=I>Tomate
</oI>
Manzana
Zanahoria
Lechuga
Tomate
Lista numerada:
<oI>
<Ii>Manzana
<Ii>Zanahoria
<Ii>Lechuga
<Ii>Tomate
</oI>
Manzana
Zanahoria
6
Lechuga
Tomate
Lista con puntos:
<uI>
<Ii> Manzana
<Ii> Zanahoria
<Ii> Lechuga
<Ii>Tomate
</uI>
Manzana
Zanahoria
Lechuga
Tomate
Lista con crcuIos:
<uI>
<Ii type=circIe> Manzana
<Ii type=circIe> Zanahoria
<Ii type=circIe> Lechuga
<Ii type=circIe> Tomate
</uI>
Manzana
Zanahoria
Lechuga
Tomate
Lista con cuadrados:
<uI>
<Ii type=square> Manzana
<Ii type=square> Zanahoria
<Ii type=square> Lechuga
<Ii type=square> Tomate
</uI>
Manzana
Zanahoria
Lechuga
Tomate
6. Como insertar una imagen
A Ia hora de crear una pgina Web podemos introducir grficos de forma muy
7
senciIIa, sIo hay que tener en cuenta que Ias imgenes deben tener formato Gif o
JPEG.
La etiqueta utiIizada para agregar imgenes a una pgina Web es <IMG> y va
acompaada de un atributo fundamentaI "SCR", que indica Ia ruta donde se
encuentra eI archivo que contiene Ia imagen a insertar.
Es decir:
<IMG SRC="Iugar donde guardo Ia imagen">
Supongamos que tenemos Ia imagen dragonbaII.gif, que est presente en eI mismo
directorio en donde est Ia pgina y que Ia queremos insertar. La etiqueta apropiada
sera:
<IMG SRC="dragonbaII.gif">
Y eI usuario ver en eI browser:
Para poner Ia imagen en Ia izquierda escribir:
<IMG ALIGN=LEFT SRC=" dragonbaII.gif ">
A Ia derecha: <IMG ALIGN=RIGHT SRC=" dragonbaII.gif">
Y si se quiere poner Ia imagen en eI centro:
<P ALIGN=CENTER> <IMG SRC=" dragonbaII.gif"> </P>
HiperenIaces, HyperIinks, AncIas o Links
Para definir un enIace es necesario marcar con Ia etiqueta <a> eI objeto deI cuaI va
a partir dicho enIace. Dicha directiva debe incIuir eI parmetro href="URL" para
especificar eI destino deI enIace. Es decir, que antes deI objeto eIegido debemos
abrir con <a href="URL">, y despus cerrar con </a>. Por ejempIo, si queremos que
eI texto "puIse aqu para visitar Ia NASA" nos conduzca a Ia "home page" de Ia
NASA, debemos escribir en nuestro texto HTML:
<a href="http://www.nasa.gov/">PuIse aqu para visitar a Ia NASA</a>
Que se vera de esta forma: PuIse aqu para visitar a Ia NASA
Si queremos que eI texto "Foto" nos IIeve a una imagen tenemos que escribir:
<a href="imagen.gif">Foto</a> entonces aI hacer cIic en eI texto Foto nos abrir Ia
imagen.gif.
Tambin se puede ir a otro enIace por medio de una imagen. Lo nico que se debe
hacer es cambiar eI texto por una imagen:
<a href="http://www.aItavista.com"><img src="Logo.jpg"></a>
Con esto tendremos por resuItado que cuando se pase eI puntero deI mouse por
arriba deI Logo.jpg (que podra ser eI Iogo deI AItavista) y se convierta en una
"manito", aI hacer cIic nos enve aI buscador AItavista.
Si se quiere hacer un Iink para que nos manden un E-MaiI se debe hacer de Ia
siguiente manera:
<a href="maiIto:pfravioIi[arroba]fiberteI.com.ar">Mandame un EmaiI</a>
Entonces cuando se haga cIic sobre esta paIabra Mandame un EmaiI se abrir (por
defecto) eI Microsoft OutIook Express con Ia direccin deI destinatario ya escrita.
8
Caracteres especiaIes
Existe una razn evidente que impide que podamos escribir ciertos smboIos
directamente en un texto HTML, como por ejempIo eI <: dichos smboIos tienen un
significado en HTML, y es necesario diferenciar cIaramente cundo poseen ese
significado y cundo queremos que aparezcan IiteraImente en eI documento finaI.
Por ejempIo, como ya sabemos, < indica eI comienzo de una directiva, y, por eIIo, si
queremos que aparezca en eI texto como taI tendremos que dar un rodeo
escribiendo aIgo que no de Iugar a confusin, en este caso &It;. Los smboIos
afectados por esta Iimitacin, y Ia forma de escribirIos, se detaIIan a continuacin:
* < (Menor que): &It;
* >(Mayor que): >
* & (smboIo de and, o ampersand): &
* " (comiIIas dobIes): "
Es decir, que para escribir <"hoIa"> en nuestro texto HTML originaI debemos poner
&It;"hoIa">.
EI otro caso especiaI se da cuando en un texto HTML se quiere escribir una ee, por
ejempIo. Existe una forma fciI de hacerIo, que consiste en utiIizar cdigos como
Ias que antes se presentaron para escribir ciertos smboIos.
Los cdigos
9
comienzan siempre con eI smboIo &, y terminan con un punto y coma ( . Entre
10
medias va un identificador deI carcter que queremos que se escriba. Los cdigos
necesarias en nuestro idioma son:
* : á
* : é
* : í
* : ó
* : ú
* : Á
* : É
* : Í
* : Ó
* : Ú
* : &uumI;
* : &UumI;
* : &ntiIde;
* : &NtiIde;
* : ¿
* : ¡
* ?: ?
* !: !
* @: @
Por Io tanto Ia paIabra pgina Ia podramos escribir como :
pgina
página
Otro ejempIo: En qu ao estamos?
Sera: &#191En qué a&ntiIde;o estamos?
Es por eIIo que si deseamos que cuaIquier visor de pginas Web pueda visuaIizar
Ias Ietras acentuadas de nuestro documento debemos utiIizar sus correspondientes
cdigos para representarIas.
Recuerden que Ias etiquetas se pueden escribir en mayscuIas o en minscuIas, es
Io mismo poner <HTML>, <htmI> o <HtmL>.
Una vez que terminamos de escribir todo nuestro documento, Io guardamos
ponindoIe un nombre, y necesariamente Io debemos guardar con Ia extensin
.HTM o .HTML.
Para ir visuaIizando Io que hemos estado haciendo tendramos que abrir nuestro
browser (Netscape o Internet ExpIorer), hacemos cIick en Ia opcin FILE o
ARCHIVO, estando aII seIeccionamos OPEN o ABRIR, Ie damos BROWSE o
EXAMINAR, seIeccionamos eI archivo y Ie damos OPEN. Luego Ie damos ACEPTAR,
e inmediatamente se abrir nuestra pagina.
11

Curso de HTML para Diseñar Paginas Web

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso de HTML para Diseñar Paginas Web

Enviado por

Direitos autorais:

Formatos disponíveis

ETSPNP 2013 CHICLAYO

CURSO DE HTML PARA DISEAR PAGINAS WEB

Você também pode gostar