Clase 7

Clase 7
Lenguaje HTML para
mejorar nuestras
páginas Web

Tecnología de la Comunicación II
Lic. en Com. Social, Lic. en Periodismo, Locutor Nacional y
Periodismo Universitario
FAC. DE CS. HUMANAS. UNSL.

LENGUAJE HTML

<HTML> Inicio de la etiqueta
<HEAD>
<TITLE> Título de la página </TITLE> encabezado

</HEAD>

<BODY>
[Aquí van las etiquetas que cuerpo
visualizan la página]
</BODY>
</HTML> Fin de la etiqueta

ETIQUETAS SIMPLES EN HTML
La etiqueta <P> se utiliza para
separar el texto en párrafos. (no
tiene su correspondiente etiqueta
de cierre </P>) .

Las etiquetas <H1> y </H1>, <H2> y
</H2>, etc. (hasta el número 6)
indican un tamaño de letra, siendo
H1 el mayor.

a etiqueta <CENTER> y </CENTER>
es para alinear al centro.

a etiqueta <HR> (no existe la
correspondiente de cierre), sirve

EJEMPLO
<HTML>
<HEAD>
<TITLE> Mi página del Web - 1 </TITLE>
</HEAD>

<BODY>
<H1>
<CENTER> Primera pagina </CENTER>
</H1>
<HR>
Esta es mi primera pagina, aunque todavía es muy
sencilla. Como el lenguaje HTML no es difícil, pronto estaré
en condiciones de hacer cosas mas interesantes.
<P> Aquí va un segundo párrafo.
</BODY>
</HTML>

OTRAS ETIQUETAS
• <BR> es para separar párrafos. No
tiene etiqueta de cierre.
• <B> y </B> es para poner algo en
negrita.
• <I> y </I> es para poner algo en
cursiva.
• <U> y </U> es para subrayar.
• <BLOCKQUOTE> y </BLOCKQUOTE>
es para destacar una cita textual
dentro de un texto.
• <PRE> y </PRE> le da un efecto al
texto similar al de las máquinas de
escribir.

LISTAS ORDENADAS, DESORDENADAS
Y DE DEFINICIÓN

Listas desordenadas Listas ordenadas Listas de definición
(unordered lists) (ordered lists) (definición de términos)
<UL> <OL> <DL>
<LI> Primer ítem <DT> Ítem 1
<LI> Una cosa
<LI> Segundo ítem <DD> Definición
<LI> Otra cosa de Ítem 1
<LI> Tercer ítem
<LI> Otra más <DT> Ítem 2
<LI> Etc. <DD> Definición
<LI> Etc.
</OL> de Ítem 2
</UL>
</DL>

EJEMPLO 1

<UL>
<LI> Mamíferos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>

EJEMPLO 2
<HTML>
<HEAD> <TITLE> Mi página del Web - 2 </TITLE> </HEAD>
<BODY>
<CENTER> <H1> Mis aficiones </H1> </CENTER>
<HR> Sin un orden particular, mis <B> aficiones </B> son las siguientes:
<UL>
<LI> El cine
<LI> El deporte
<UL>
<LI> Natacion
<LI> Baloncesto
</UL>
<LI> La musica
</UL>

La música que más me gusta es <U> (en orden de preferencia): </U>
<OL>
<LI> El rock <LI> El jazz <LI> La música clásica
</OL>
</BODY>
</HTML>

ENLACES O HIPERVÍNCULOS

• La forma general es:
<A HREF="xxx"> yyy </A>
- xxx es el destino del
enlace.
- yyy es el texto
asociado al enlace.

EJEMPLO
<HTML>
<HEAD> <TITLE> Mi página del Web - 2 </TITLE> </HEAD>

<BODY>
<CENTER> <H1> Mis aficiones </H1> </CENTER>
<HR> Los deportes que más me gustan son:
<UL>
<LI> El cine <LI> El deporte <LI> Natación <LI> Baloncesto
</UL>

La música que más me gusta es:
<OL>
<LI> El rock <LI> El jazz <LI> La música clásica
</OL>
<BR> Para mayor información ingresa aquí:
<A
HREF="http://www.juntadeandalucia.es/averroes/iesgaviota/informatica/html.html
#SECTION800"> Listas ordenadas y desordenadas </A>
</BODY>
</HTML>

TIPOS O ENLACES
• A un marcador/ancla de
una página Web:
<A HREF="#marca"> yyy </A>
** Para crear un ancla se
utiliza el comando name:
<A NAME “ancla”>

• A una dirección de email:
<A HREF="mailto: dirección de
email"> Texto del enlace </A>

IMÁGENES Y ENLACES A IMÁGENES
<IMG SRC=“iganancias.jpg”>
<IMG SRC=“iganancias.jpg”> WIDTH=120 HEIGHT=94>
<IMG SRC=“imagenes/isla.gif" WIDTH=120 HEIGHT=94>

- Enlazar una dirección web a una imagen
<A HREF=“IGANANCIAS.html"> <IMG SRC=“iganancias.jpg">
</A>
- Enlazar una imagen a otra imagen
<A HREF=“iganancias.jpg"> <IMG SRC=“iganancias.jpg"> </A>
- Enlazar un texto con una imagen
<A HREF="isla.gif"> un paraíso tropical </A>

FONDOS E HIPERVÍNCULOS
FONDOS
<BODY BGCOLOR="#XXYYZZ">

IMAGEN COLOR DE FONDO
<BODY
BACKGROUND="imagen.jpg">
LINK - color de los enlaces
VLINK - color de los enlaces
visitados
ALINK - color de los enlaces
activos (en el momento de ser
pulsados)

PALETA DE COLORES EN HEXADECIMAL
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow

PALETA DE COLORES EN HEXADECIMAL
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#660033 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

TABLAS
<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>
</TR>
</TABLE>

**<TR> indica la fila
**<TD> indica la columna

MODIFICADORES DEL COMANDO TABLE:
<TABLE BORDER=2>
<TABLE BORDER BGCOLOR="#00FF00">
<TABLE HEIGHT=200>
<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=BOTTOM> Abajo </TD>
<TR><TD><IMG SRC="babe.gif"></TD></TR>

SONIDOS, VIDEOS Y ANIMACIONES

•Sonido de fondo:
<BGSOUND SRC="fondo.mp3" LOOP=2>
• Enlace a un archivo de música/video:
<A HREF="audio.mp3">Música</A>
<A HREF="video.wmv">Video</A>
• Colocar un gif animado:
<IMG SRC="workanim.gif">

• Embeber un sonido (caso 1)
<EMBED SRC=“audio.mp3"
AUTOSTART=“false" HEIGHT="60"
WIDTH="144"> </EMBED>
• Embeber un sonido de GOEAR
(caso 2)
<object width="353"
height="132"><embed
src="http://www.goear.com/files/externa
l.swf?file=66ecd77" type="application/x-
shockwave-flash" wmode="transparent"
quality="high" width="353"
height="132"></embed></object>

• Embeber un video (caso 1)
<EMBED SRC=“video.wmv" AUTOSTART=“false"
HEIGHT="60" WIDTH="144"> </EMBED>
• Embeber un video de YOUTUBE (caso 2)
<object width="640" height="385"><param name="movie"
value="http://www.youtube.com/v/LhldkEc8yyY&hl=es_ES
&fs=1&"></param><param name="allowFullScreen"
value="true"></param><param name="allowscriptaccess"
value="always"></param><embed
src="http://www.youtube.com/v/LhldkEc8yyY&hl=es_ES&f
s=1&" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="640" height="385"></embed></object>

Clase 7

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (17)

Similar a Clase 7

Similar a Clase 7 (20)

Más de Viviana Mercedes Ponce

Más de Viviana Mercedes Ponce (20)

Clase 7