Etiquetas básicas en html

8,379 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
8,379
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
117
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Etiquetas básicas en html

  1. 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. 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. 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. 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. 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. 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. 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. 8. Se mostrará de la siguiente manera:
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>

×