Your SlideShare is downloading. ×
  • Like
Etiquetas básicas en html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Etiquetas básicas en html

  • 5,503 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
5,503
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
76
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ANDRES MAURICIO QUINTERO MACEA Programación Web Lic. Informática y medios audiovisualesFacultad de educación y ciencias humanas Universidad de Córdoba
  • 2. Son códigos transparentes para el usuario, queson interpretados por el programa del navegador,y que controlan la manera como la informaciónes mostrada en la pantalla.Las palabras encerradas entre los símbolosmenor y mayor que (< >) son las etiquetas deHTML.
  • 3. Todo archivo HTML comienza siempre con laetiqueta <HTML> y finaliza con la etiqueta</HTML>. La estructura de una pagina estácompuesta básicamente por dos secciones: elencabezado (header) y el cuerpo (body),delimitados por las etiquetas: <head>, </head> y<body>, </body>.
  • 4. El uso adecuado de la etiqueta <BODY>, que porsupuesto tiene atributos, permite entre otrascosas cambiar o establecer el color del texto, uncolor o una imagen de fondo y los colores de losenlaces que tendrá la página.Por ejemplo:<BODY BACKGROUND =“nombre de la imagen”BGCOLOR =“color del fondo” TEXT =“color deltexto” LINK =“color enlace” VLINK =“color enlacev” ALINK =“color enlace a”> </BODY>
  • 5. Permiten cambiar los atributos y la manera comoel texto se verá dentro de la página. Se puedeafectar todo un párrafo, una línea, una palabra ocaracteres individuales simplementeencerrándolos dentro de las etiquetasapropiadas. Algunos atributos de texto puedenser controlados por diferentes etiquetas.
  • 6. Es conocida como etiqueta de encabezado(heading), es utilizada con frecuencia paraescribir títulos y subtítulos, dado que permitemostrar el texto en negrillas con seis tamañosdiferentes, dependiendo del valor asignado alatributo “X”.
  • 7. <HTML> <HEAD> <TITLE> Encabezados </TITLE> </HEAD> <BODY> <H1>Este texto tiene el tamaño que le da la etiqueta H1</H1> <H2>Este texto tiene el tamaño que le da la etiqueta H2</H2> <H3>Este texto tiene el tamaño que le da la etiqueta H3</H3> <H4>Este texto tiene el tamaño que le da la etiqueta H4</H4> <H5>Este texto tiene el tamaño que le da la etiqueta H5</H5> <H6>Este texto tiene el tamaño que le da la etiqueta H6</H6> </BODY></HTML>
  • 8. Se mostrará de la siguiente manera:
  • 9. Esta etiqueta permite controlar tres atributos deltexto que se encuentre encerrado entre ellas, sutamaño (SIZE), su color (COLOR) y el tipo defuente (FACE).La sintaxis completa de la etiqueta FONT es lasiguiente:
  • 10. Por ejemplo, se propone escribir las siguienteslíneas dentro del cuerpo de una página:<FONT SIZE=“6” COLOR=“blue” FACE=“arial”> TEXTO </FONT><FONT SIZE=“8” COLOR=“#800000” FACE=“comic sans ms”> TEXTO </FONT><FONT SIZE=“10” COLOR=“red” FACE=“stencil”> TEXTO </FONT>
  • 11. HTML solo reconoce un espacio entrepalabras, aunque se hayan escrito dos o más.Tampoco reconocerá tabuladores y saltos delínea. Si se quiere que el texto se vea tal y comofue escrito, este debe encerrarse dentro de lasetiquetas <PRE> </PRE><BODY>Este texto tiene varios espaciosY un salto de línea</BODY>
  • 12. La etiqueta <BR> permite forzar un salto de líneadentro de un texto. Observe que esta etiqueta nose cierra con </BR>, razón por la que se conocecomo etiqueta abierta.<P> es otra etiqueta que puede utilizarse abiertao cerrada. Si se usa de la primera forma, iniciaráun nuevo párrafo dejando una línea en blanco, sipor el contrario se cierra con </P> permite alinearel párrafo a la derecha, izquierda, etc,dependiendo del valor asignado al parámetroALIGN.
  • 13. EJEMPLO RESULTADO Texto conTexto con <BR> Salto de línea Salto de línea En este ejemplo iniciaremos aquíEn este ejemplo iniciaremos aquí<P> un nuevo párrafo Un nuevo párrafo<P ALIGN=“right”> alineado a la Alineado a la derechaderecha </P><P ALIGN=“left”> alineado a laizquierda </P> Alineado a la izquierda<P ALIGN=“center”> alineado alcentro </P> Alineado al centro
  • 14. Esta etiqueta es abierta, y dibuja una líneahorizontal con alineación, tamaño y anchovariables. Se utiliza con frecuencia para separarsecciones de contenido.
  • 15. Línea de tamaño 10 puntos y ocupando el 30% de la página<HR ALIGN=“center” SIZE=“10”WIDTH=“30%”> Línea alineada a la izquierda de tamaño 5 puntos y ocupando la mitad de la página<HR ALIGN=“left” SIZE=“5” WIDTH=“50%”> Línea alineada a la derecha de tamaño 20 puntos y ocupando la mitad de la página<HR ALIGN=“right” SIZE=“20” WIDTH=“50%”> Línea sencilla que ocupará el 90% de la página<HR>
  • 16. EJEMPLO EFECTO RESULTADO<CENTER>TEXTO</C Texto centrado textoENTER><B>texto</B> Texto en negrillas texto<I>texto</I> Texto en itálica texto<U>texto</U> Texto subrayado textoTexto<SUP>texto</SUP Texto en superíndices textotexto>Texto<SUB>texto</SUB Texto en subíndices textotexto><S>texto</S> Texto tachado texto
  • 17. Las pagina web además de mostrar texto soncapaces de desplegar imágenes que han de sercreadas en cualquiera de los formatos: JPG –PNG - GIF. Una imagen con extensión BMP –CDI – PCX o cualquier otro formato diferente noserá exhibida en el explorador.
  • 18. Para insertar imágenes lo único que se necesitaconocer es la ruta y nombre del archivo que locontiene. La etiqueta <IMG> junto con su atributoSRC=“ruta y/o nombre del archivo” permitemostrar una imagen:<IMG SRC=“logo.png”>
  • 19. Para facilitar la navegación de una páginacuando su contenido es demasiado largo y aldesplegarla ocupa mas de una pantalla, sepueden colocar enlaces que lleven al usuario asitios específicos o predeterminados de la misma.
  • 20. Para esto se debe utilizar dos atributos de laetiqueta <A>:<A NAME=“nombre”>texto de marca</A><A HREF=“#NOMBRE”>texto de enlace</A><A HREF=“pagina.html”>texto de enlace</A><A HREF=“pagina.html”> <IMG SRC=“logo.png”></A>