1 / 19

Clase 7

Lenguaje HTML para mejorar nuestras páginas Web. Clase 7. 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. Inicio de la etiqueta. <HTML> <HEAD>

donnel
Download Presentation

Clase 7

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lenguaje HTML para mejorar nuestras páginas Web Clase 7 Tecnología de la Comunicación II Lic. en Com. Social, Lic. en Periodismo, Locutor Nacional y Periodismo Universitario Fac. de Cs. Humanas. UNSL.

  2. LENGUAJE HTML Inicio de la etiqueta <HTML> <HEAD> <TITLE> Título de la página </TITLE> </HEAD> <BODY>  [Aquí van las etiquetas que visualizan la página] </BODY> </HTML> encabezado cuerpo Fin de la etiqueta

  3. 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. La etiqueta <CENTER> y </CENTER> es para alinear al centro. La etiqueta <HR> (no existe la correspondiente de cierre), sirve para colocar una raya horizontal del ancho de la pantalla.

  4. 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>

  5. 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.

  6. LISTAS ORDENADAS, DESORDENADAS Y DE DEFINICIÓN Listas desordenadas (unorderedlists) <UL> <LI> Una cosa <LI> Otra cosa <LI> Otra más <LI> Etc. </UL> Listas de definición (definición de términos)   <DL> <DT> Ítem 1 <DD> Definición de Ítem 1 <DT> Ítem 2 <DD> Definición de Ítem 2 </DL>  Listas ordenadas (ordered lists)   <OL> <LI> Primer ítem <LI> Segundo ítem <LI> Tercer ítem <LI> Etc. </OL>

  7. EJEMPLO 1 <UL> <LI> Mamíferos <LI> Peces <UL> <LI> Sardina <LI> Bacalao </UL> <LI> Aves </UL>

  8. 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>

  9. 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.

  10. 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>

  11. 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>

  12. 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>

  13. 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)

  14. PALETA DE COLORES EN HEXADECIMAL

  15. PALETA DE COLORES EN HEXADECIMAL

  16. 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>

  17. 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">

  18. SONIDOS, VIDEOS Y ANIMACIONES • 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/external.swf?file=66ecd77" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="353" height="132"></embed></object>

  19. SONIDOS, VIDEOS Y ANIMACIONES • 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&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

More Related