Etiquetas Html Udp

1. HTML Introducción y etiquetas

2. Índice 1. Qué es Html 2. Etiquetas de formato 3. Estructura básica 4. Trabajando el texto 5. Cambios en el body 6. Enlaces e imágenes

3. <ul><li>El lenguaje HTML es el que se utiliza para crear páginas web. Las siglas HTML (en inglés de: Hiper Text Markup Language ) significan "lenguaje de marcas de hipertexto“. Esto quiere decir que cada página HTML contiene uno o varios enlaces que nos permiten pasar de una a otra página: es lo que se entiende por "navegar" en Internet. </li></ul><ul><li>El lenguaje HTML no sólo permite definir la estructura de una página Web sino, además, darle formato al texto, insertar imágenes, sonido, etc. </li></ul><ul><li>Esto se consigue con la inserción de unos símbolos llamados etiquetas o tags . </li></ul>1. ¿Qué es HTML? DEFINICIÓN

4. <ul><li>Las páginas escritas en HTML son interpretadas por todos los navegadores Web , ya que presenta los elementos de estas páginas (texto, imágenes, vídeo, etc.) según las indicaciones de formato. </li></ul><ul><li>Esta interpretación de las páginas es independiente del sistema operativo utilizado (Unix, Windows, Macintosh, etc.), lo que ha facilitado la extensión de Internet. </li></ul><ul><li>Existen muchos programas que permiten crear páginas Web de manera fácil, casi automática (por ejemplo Macromedia Dreamwever , Microsoft Front Page). Sin embargo, es conveniente tener unas nociones básicas de cómo funciona el lenguaje HTML. Esto permite entender mejor cómo se estructuran las páginas web y conocer mejor las posibilidades que ofrecen. </li></ul>1. ¿Qué es HTML?

5. <ul><li>Las etiquetas son palabras que componen el lenguaje HTML. Permiten definir la estructura y el funcionamiento de cualquier página web. Las etiquetas deben escribirse entre los símbolos " <> ", para poder distinguirlas del texto normal de la página. </li></ul><ul><li>Las etiquetas se deben escribir por pares, una de apertura y otra de cierre . En algunas etiquetas sólo es necesario indicar la de apertura, pero es una buena norma de programación indicar siempre ambas etiquetas. La de cierre se distingue porque comienza con el símbolo "</". </li></ul><ul><li>La etiqueta <BODY> marca el inicio del cuerpo de la página. A esta etiqueta se le pueden añadir una serie de parámetros, que permiten cambiar el color del fondo de la página, de los enlaces, etc. </li></ul>2. Etiquetas de formato

6. <ul><li>A veces es necesario ofrecer datos adicionales en una directiva. Por ejemplo, cuando se define un Link hay que especificar su destino. </li></ul><ul><li>Para ello se incluyen parámetros en la directiva inicial (la de apertura), de la siguiente forma: <etiqueta parametro1 parametro2 ...>. La directiva de cierre, caso de ser necesaria, queda como antes: </etiqueta>. </li></ul><ul><li>Los parámetros deben ir siempre entre los símbolos "<" y ">" para que sean tenidos en cuenta por el navegador. </li></ul>2. Etiquetas de formato

7. <ul><li>Un documento HTML comienza con la etiqueta <html> , y termina con </html> . Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: </li></ul><ul><ul><li>El encabezamiento, delimitado por <head> y </head> , que sirve para definir diversos valores válidos en todo el documento. </li></ul></ul><ul><ul><li>El cuerpo, delimitado por <body> y </body> , donde reside la información del documento. </li></ul></ul><ul><li>La única utilidad del encabezamiento en la que nos detendremos por el momento es la directiva <title> , que permite especificar el título de un documento HTML. </li></ul><ul><li>Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como título de la ventana del programa que nos la muestra: lo veo en el browser. </li></ul>3. Estructura básica

8. Éste es el título de la página Y éste es el cuerpo de la página

9. <ul><li>En resumen: La estructura básica de un documento HTML queda de la forma siguiente: </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Título</title> </li></ul><ul><li></head> </li></ul><ul><li><body>Texto del documento, menciones a gráficos, enlaces… </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>3. Estructura básica

10. <ul><li>Para cambiar la apariencia del texto en una página web se deben usar las etiquetas siguientes: </li></ul><ul><ul><li> : Texto en negrita </li></ul></ul><ul><ul><li> : Texto en cursiva </li></ul></ul><ul><li>Para cambiar los aspectos de la fuente de texto se usan las etiquetas y .Todo el texto situado entre ellas se verá afectado por estos cambios. Los parámetros son: </li></ul><ul><ul><li>COLOR : especifica el color del texto </li></ul></ul><ul><ul><li>SIZE : especifica el tamaño del texto </li></ul></ul><ul><ul><li>FACE : especifica el tipo de fuente </li></ul></ul>4. Trabajando el texto

11. <ul><li>Podemos cambiar el color del texto de dos maneras: </li></ul><ul><li>Escribiendo el nombre del color: </li></ul><ul><ul><li>Los colores reconocidos están limitados a Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua. </li></ul></ul><ul><li>O bien, se puede especificar según su código: #000000 que es negro, por ejemplo. El blanco de define así: #FFFFFF. </li></ul><ul><li>Un ejemplo: </li></ul><ul><li>Esto está escrito en rojo. </li></ul>4. Trabajando el texto COLOR

12. <ul><li>Este parámetro permite definir el tamaño de la fuente de dos maneras: </li></ul><ul><li>Se indica un valor exacto para el tamaño de la fuente (1, 2, 3, ...): </li></ul><ul><li>.... .... </li></ul><ul><li>Cambiar el tamaño en modo relativo: Se cambia el tamaño, aumentándolo o disminuyéndolo en relación al tamaño que ya se había definido. Para ello, se utilizan los símbolos "+" (para aumentar) y "-" (para reducir), escribiéndolos antes del número. </li></ul>4. Trabajando el texto SIZE * Intenta editar y ver este ejemplo en tu navegador: Texto con Tamaño 3Texto con dos puntos menos

13. <ul><li>Nos permite especificar el tipo de fuente, siempre que exista en el computador del usuario. Por ello, es conveniente usar tipos de fuente muy conocidas como Times New Roman , Courier , Verdana , Helvética , Arial . </li></ul><ul><li>Vemos un ejemplo: </li></ul><ul><li>Texto en arial Texto en verdana </li></ul>4. Trabajando el texto FACE

14. <ul><li>Las etiquetas para disponer el texto en una página web son: </li></ul><ul><li> Indica dónde empieza y acaba un párrafo. </li></ul><ul><li> Para hacer un salto de línea. El texto que va a continuación de comienza en la línea siguiente. Al contrario que con la etiqueta , no deja un espacio en blanco entre líneas. </li></ul><ul><li><CENTER> </CENTER> Centrará el texto que se encuentre entre las dos etiquetas. </li></ul><ul><li>Recordar que las etiquetas deben ir antes y después del texto que se quiera modificar. Si se escribe este código HTML, por ejemplo, para poner negrita en esta palabra. </li></ul>4. Trabajando el texto FORMATO DEL PÁRRAFO

15. <ul><li>Los siguientes parámetros se colocan en la etiqueta <body> y con ellos podemos definir varios aspectos de nuestra página: </li></ul><ul><li>BGCOLOR sirve para definir el color de fondo de la página, y se utiliza de la siguiente manera: </li></ul><ul><li>TEXT : sirve para definir qué color va a tener todo el texto. </li></ul><ul><li>LINK : Definirá el color de los enlaces por los que no hemos pasado (por defecto azul). </li></ul><ul><li>VLINK : Definirá el color de los enlaces por donde sí hemos pasado (por defecto púrpura). </li></ul>5. Cambios en el body PARÁMETROS Y FUNCIONES

16. <ul><li>ALINK : Definirá el color del enlace mientras lo estemos pulsando con el ratón (por defecto rojo). </li></ul><ul><li>Ejemplo: Para generar una página con fondo rojo y los enlaces en azul, se debe escribir: </li></ul><ul><li><BODY BGCOLOR="Red" LINK="Blue" TEXT="Black">* </li></ul><ul><li>*Los colores también se pueden poner con el código hexagesimal #FFFFFF </li></ul>5. Cambios en el body PARÁMETROS Y FUNCIONES

17. <ul><li>El HTML es un lenguaje de hipertexto: esto significa que es posible pasar de una página a otra al hacer "click" en una serie de elementos insertados en la página. Cada uno de estos elementos son los llamados enlaces o links. Un enlace puede ser un fragmento de texto o una imagen. Los enlaces deben estar entre las etiquetas <A HREF> y </A> : </li></ul><ul><li>Para los enlaces: <A HREF=“URL">Texto</A> </li></ul><ul><li>Y debemos sustituir la palabra “URL", por la dirección de Internet a la que queremos que vayan los usuarios al hacer "click" sobre el texto. </li></ul><ul><li>Para que se abran en una ventana en blanco debemos poner: </li></ul>6. Enlaces e imágenes ENLACES

18. <ul><li>Para los enlaces: <A HREF=“URL">Texto</A> </li></ul><ul><li>Y debemos sustituir la palabra “URL", por la dirección de Internet a la que queremos que vayan los usuarios al hacer "click" sobre el texto. </li></ul><ul><li>Para que se abran en una ventana en blanco debemos poner: </li></ul><ul><li><a href=“URL" target="_blank">texto</a> </li></ul>6. Enlaces e imágenes ENLACES

19. <ul><li>En una página web además del texto podemos incluir imágenes . Para ello debe usarse la siguiente etiqueta: </li></ul><ul><ul><li><IMG SRC=“archivo_grafico"> </li></ul></ul><ul><li>Se debe sustituir “archivo_grafico" por el nombre del archivo de imagen que se incluirá en la página (siempre entre comillas). </li></ul><ul><li>Una imagen puede ser a su vez un enlace. Para que esto sea posible se debe colocar la etiqueta de imagen dentro de la etiqueta de enlace. </li></ul><ul><li><A HREF="http://www.terra.cl"><IMG SRC="imagen.gif" ALT="texto alternativo"></A> </li></ul><ul><li>El resultado visual sería la imagen con un borde del mismo color que tuviera el texto de los enlaces. </li></ul>6. Enlaces e imágenes IMÁGENES

Etiquetas Html Udp

You are reading a preview.

Check these out next

Etiquetas Html Udp

More Related Content

Slideshows for you (18)

Viewers also liked (20)

Similar to Etiquetas Html Udp (20)

More from Anna García Sans (11)

Recently uploaded (20)

Etiquetas Html Udp