Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Programación avanzada etiquetas de html

2,354 views

Published on

  • Be the first to comment

Programación avanzada etiquetas de html

  1. 1. UNIVERSIDAD TÉCNICA“LUIS VARGAS TORRES”ASIGNATURA:PROGRAMACIÓN AVANZADA IALUMNA:PEREA MOREIRA EVELYNCATEDRÁTICO:ING. STALIN FRANCIS
  2. 2. ETIQUETAS DEHTMLPROGRAMACIÓN AVANZADA I
  3. 3. ETIQUETAS DE HTMLMARCAS BÁSICAS<html> </html> <head> </head> <body> </body><title> </title> <meta>Al principio y al final detodo documento.Cabecera del documento, dentrode esta etiqueta encontramos:Indica el título de la páginas parael navegador.Permite aportar meta informaciónal documentoDentro de esta etiqueta seinsertan los contenidos deldocumento.
  4. 4. ETIQUETAS DE HTMLPROPIEDADESDE LA PÁGINA<body text = “#xxyyzz”>:Define el color por defecto deltexto en la página.<body bgcolor = “#xxyyzz”>:Define el color de fondo de lapágina.<body link = “#xxyyzz”>:Define el color de los enlaces.<body vlink = “#xxyyzz”>:Define el color de los enlacesvisitados.<body text = “#xxyyzz”>:Define el color por defecto deltexto en la página.<body alink = “#xxyyzz”>:Define el color de los enlacesactivos.<body background =“imagen.gif”>: Establece unaimagen para el fondo de lapágina.
  5. 5. ETIQUETAS DE HTMLFORMATO DE TEXTOS<b> </b> negrita: Tambiénsirve la etiqueta <strong></strong><i> </i> cursiva: Tambiénsirve la etiqueta <em></em><u> </u> subrayado<font size = “X”> </font>:Marca el tamaño de loscaracteres.<font color = “#XXYYZZ”></font>: Define el color deltexto.<font face = “arial”></font>: Determina el tipode la fuente.La etiqueta <font> puedeincluir los tres parámetros(tamaño, fuente y color).<pre> preformateado Respetaespacios, saltos de línea y losretornos utilizado.<blink> hace parpadear el texto(no para Explorer).
  6. 6. ETIQUETAS DE HTMLFORMATO DE PÁRRAFOS<p> salto depárrafo </p><br> salto delínea<blockquote></blockquote>sangrado<center>centrar eltexto<p align =center> párrafocentrado<p align = left>párrafo alineadoa la izquierda<p align = right>párrafo alineado ala derecha
  7. 7. ETIQUETAS DE HTMLCREACIÓN DE LISTAS• <ul>• <li> primer elemento de lalista </li>• <li> segundo elemento dela lista </li>• <li> tercer elemento de lalista </li>• </ul> cierra listaLISTA NONUMERADA• <ol>• <li> primer elemento de lalista </li>• <li> segundo elemento dela lista </li>• </ol> cierra listaLISTANUMERADA• <dl>• <dt> término que se va adefinir </dt>• <dd> definición deltérmino</dd>• </dl> cierra listaLISTA DEGLOSARIO ODEFINICIÓN
  8. 8. ETIQUETAS DE HTMLLÍNEAS HORIZONTALESSEPARADORAS<hr> líneahorizontal<hr width =“x%”> anchurade la línea enporcentaje<hr width = x>anchura de lalínea enporcentaje<hr size= x>alturade la líneade pixeles<hr align=center> líneaalineada en elcentro<hr align= left>línea alineada ala izquierda<hr align=right> líneaalineada a laderecha<hr noshade>línea sin efectode sombra
  9. 9. ETIQUETAS DE HTMLIMÁGENES• Indica la ruta de la imagen<img src = “dirección de la imagen” “>• Establece un borde de X pixeles en torno a la imagen.<img…border = “X”>• Establece un tamaño de la imagen (altura y anchura) en pixels.<img…height = “XX” width = “YY”>• Se muestra un texto al pasar el cursor sobre la imagen.<img…alt = “texto explicativo”>• Alineación inferior del texto respecto de la imagen.<img…align = “bottom”>• Alineación del texto en el medio de la imagen<img…align = “middle”>• Alineación superior del texto respecto de la imagen.<img…align = “top”>• Alineación izquierda de la imagen en el párrafo.<img…align = “left”>• Alineación derecha de la imagen en el párrafo.<img…align = “right”>• Espacio horizontal entre la imagen y el texto.<img…hspace = X>• Espacio vertical entre la imagen y el texto.<img…vspace = y>
  10. 10. ETIQUETAS DE HTMLTABLASÚtiles para componer la página y para presentar datos tabulares.Ejemplos:<table> … </table> Define dónde comienza y termina la tabla.<table width = “XX%”> O en porcentaje de la página.<table height = “XX”> Determina la altura de la tabla en pixeles.<table border = “X”> Establece el grosor en pixeles del borde de la tabla.<table cellspacing = “X”> Define el espacio en pixeles entre las celdas.<table cellpadding = “X”> Define el espacio en pixeles entre el borde y el texto.<tr>…<tr> Determina cada una de las filas de la tabla.<td>…</td> Determina cada una de las columnas dentro de las filas.<td rowspan = “2”> &nbsp; </td> une dos celdas de dos filas adyacentes, en una únicacelda.<td colspan= “2”> &nbsp; </td> une dos celdas de dos columnas adyacentes, en unasola celda.
  11. 11. ETIQUETAS DE HTMLCREACIÓN DE ENLACES• <a href =http://www.servidor.com/directorio/pagina.htm>Enunciado delenlace </a>• <a href =“mailito:dirección demail”> Vínculo auna dirección decorreo-e.•<a name =“marcador”> Define unmarcador (ancla) en unpunto concreto de unapágina, para poderenlazarloposteriormente• <a href =“#marcador”>dirige un enlaceinterno al puntodónde está elmarcador.• <a href =“direcciónpágina#marcador”> dirige el enlace aun punto concretode otra página.
  12. 12. ETIQUETAS DE HTMLPÁGINAS CON MARCOS (no llevabody)<html><head><title> título de la página </title></head>• Divide la página en dos marcos en forma de columnas,cada una con su anchura correspondiente enporcentaje.<framaset cols =“20%, 80%”>• Archivo menu.htm que corresponde al marco de laizquierda, llamado “navegación” , 20% de anchura.<frame src =“menu.htm” name =“navegación”>• Archivo principal.htm que corresponde al marco de laderecha, llamado “contenidos”, 80% de anchura<frame src =“principal.htm” name= “contenidos></frameset></html>
  13. 13. ETIQUETAS DE HTMLPÁGINAS CON MARCOS (no llevabody)Frameborder = “NO”evita que se vea elborde entre losmarcosFramespacing = “2”establece 2 pixels desepración entre losmarcos.Scrolling = “NO”evita que aparezcauna barra de scrolldentro del marcoScrolling = “auto”mostrará la barrade scroll sólo si esnecesarioLas páginas también se puedendividir en marcos horizontalescon <frameset rows = “ , ”>

×