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.

Etquetas de html

287 views

Published on

EtiquetasdehtmlBloggerBlogspotBlogger

Published in: Education
  • Be the first to comment

Etquetas de html

  1. 1. ETIQUETAS DE HTMLMARCAS BÁSICAS<html></html> Al principio y al final de tododocumento.<head></head>Cabecera del documento. Dentro delhead se ponen las etiquetas:<title></title>Indica el título de la página para elnavegador.<meta>Permite aportar metainformación aldocumento, para su mejor identificación e indexaciónpor los motores de búsqueda. Hay distintos tipos:<meta name = “ keywords”content=Palabras clavesque resuman la técnica de los contenidos de lapágina ><meta name = “ author” content= “ Nombre/s delautor/es de la página” >Tras de cerrar el head se pone la etiqueta:<body></body> Dentro de esta etiqueta se insertan loscontenidos del documento el cierre de la etiqueta</body> se coloca justo antes del cierre </html>
  2. 2. PROPIEDADES DELA PÁGINA<body bgcolor =“ #xxyyzz”> Define el color de fondode la pantalla.<body text =“ #xxyyzz”> Define el color por defectodel texto de la página.<body bgcolor =“ #xxyyzz”> Define el color de fondode la pantalla.<body link =“ #xxyyzz”> Define el color de los enlaces.<body vlink =“ #xxyyzz”> Define el color de los enlacesvisitados.La etiqueta <body> puede llevar incluida informaciónsobre las propiedades de la página:<body alink =“ #xxyyzz”> Define el color de los enlacesactivos.Todos estos parámetros se pueden agrupar en unaúnica etiqueta <body> .<body bgcolor =“ #xxyyzz” text = “ #xxyyzz” link= “#xxyyzz” vlink =“ #xxyyzz” alink =“ #xxyyzz” ><!—comentarios--> Sirve para anotar aclaraciones„privadas„ del autor de la página. Lo que se escribedentro de esta etiqueta es ignorado por el navegadory no se muestra en la página.<body background =“ imagen.gif”> Establece unaimagen para el fondo de la página.
  3. 3. FORMATOS DETEXTO<b></b>Negrita(también sirve laetiqueta<strong>…</strong>)<i></i> Cursiva (también sirve laetiqueta<em>…</em>)<u></u>Subrayado<from size= “ X”>…</font>marca el tamaño de loscarcteres, donde X es un valor 1 a 7, o un valorrelativo (+ 1-7)<font color =“ #xxyyzz”></font>define el color deltexto, donde xxyyzz es un valor formado por letras ynúmeros que indica el color<font face =“ arial” >…</font> determina el tipo defuente.La etiqueta<font>puede incluir los tres parámetros(tamaño, fuente y color):<font size= X color= #xxyyzz> face=fuente escogida>… </font><pre> preformateado. Respuesta espacios, saltos delínea y los retornos utilizados<blink> hace parpadear el texto(no para Explorer).
  4. 4. FORMATO DEPÁRRAFOS<P> Salto de párrafo</i><br> Salto de línea.<blockquote> </blockquote> Sangrado.<center> Centrar el texto.<p aling =center> Párrafo centrado<p aling = left> Párrafo alineado a laizquierda.<p aling = right> Párrafo alineado a laderecha.
  5. 5. CRACIÓN DE LISTASLista nonumeradaListanumeradaLista deglosario odefinición<ul><li> Primer elemento de la lista </li><li> Segundo elemento de la lista </li><li> Tercer elemento de la lista </li></ul> Cierra lista.<ol><li> Primer elemento de la lista </li><li> Segundo elemento de la lista </li></ol> Cierra lista<dl><dt> Término que se va a definir </dt><dd> definición del término </dd></dl> Cierra lista
  6. 6. Líneas horizontalesseparadas.<hr> Línea horizontal.<hr width = “ x%”> Anchura de la línea enporcentaje.<ht width = x > Anchura de la línea de píxeles.<hr size = x > Altura de la línea en píxeles.<hr aling = center> Línea alineada en el centro.<hr aling = left> Línea alineada a la izquierda.<hr aling = right> Línea alineada a la derecha.<hr noshade> Línea sin efecto de sombra.
  7. 7. IMÁGENES<img scr= “ dirección de la imagen ” “ > Indica la ruta de laimagen.<img… border= “ x ” > Establece un borde x pixels entorno a laimagen .<img… height = “xx” width = “ yy“ > Establece un tamaño de laimagen(altura y anchura) en pixls.<img alt= “ texto explicativo ” > Se muestra un texto al pasar elcursor sobre la imagen.<img… aling= “ bottom” > Alineación inferior del texto respecto ala imagen.<img… aling= “ middle” > Alineación del texto en el medio de laimagen.<img… aling= “ top” > Alineación superior del texto respecto a laimagen.<img… aling= “ left” > Alineación izquierda de la imagen en elpárrafo.<img… aling= “ right” > Alineación derecha de la imagen en elpárrafo.<img… hspace= x > Espacio horizontal entre la imagen y eltexto.<img… vspace= y > Espacio vertical entre la imagen y el texto.
  8. 8. TABLASÚtiles para componer la página y para presentar datos tabulares.<table>… </table> Define donde comienza y donde termina la tabla.<table width = “xx%”> Determina la anchura de la tabla. Puede darse enpíxeles (no lleva el símbolo %), o en porcentaje de la página.<table height = “xx”> Determina la altura de la tabla.<table border = “x”> Establece el grosor en píxeles del borde de la tabla.<table cellspacing = “x”> Define el espacio en píxeles entre las celdas.<table cellpadding = “x”> Define el espacio en píxeles entre el borde y eltexto.<tr>…. </tr>Determina cada una de las filas de la tabla.Ejemplo de tabla de 2 filas y 3 columnas<table width=“100%” height =“200” border=“1” cellspacing“3” cellpadding=“5”><tr><td>primera columna de la fila 1 </td><td>segunda columna de la fila 1 </td><td>tercera columna de la fila 1 </td></tr><tr><td>primera columna de la fila 2 </td><td>segunda columna de la fila 2</td><td>tercera columna de la fila 2</td></tr></table><td>…. </td>Determina cada una de las columnas dentro de las filas.<td rowspan = “2”> &nbsp; </td> Une dos celdas de dos filas adyacentes, enuna única celda.<td colspan = “2”> &nbsp; </td> Une dos celdas de dos columnasadyacentes, en una sola celda.Dentro de cada celda se puede alinear el texto o cualquier contenido, cambiar el color defondo, con las etiquetas habituales para texto, párrafos o imágenes.
  9. 9. CREACIÓN DEENLACES<a href= “http://www.servidor.com/direcorio/página.htm”>Enunciado del enlace </a><a href= “mailto:dirección de mail”> Vínculo a una dirección decorreo-e.<a name = “marcador”> Define un marcador (ancla) en un puntoconcreto de una página, para poder enlazarlo posteriormente.<a href= “ # marcador”> Dirige un enlace interno al punto dondeestá el marcador.<a href= “dirección página # marcador”> Dirige el enlace a unpunto concreto de otra páginaDentro del a href:Target =“_blank” Abre la página en un nuevo navegador.Target =“_top” Abre la página en toda la pantalla para evitar losframesTitle =“texto descriptivo del enlace” permite incluir una descripcióndel destino del enlace.
  10. 10. PÁGINA CON MARCOS (no lleva body)<html><head><title>título de la página </title></head><frameset cols= “ 20%”, “ 80%”,> (Divide la página en dos marcos en forma de columnas, cada unacon su anchura correspondiente en porcentaje).<frame src= “menu.htm” name= “ navegacion ”> (archivo menu.htm que corresponde al marco dela izquierda, llamado“navegacion”,20% de anchura).<frame src= “ principal.htm” name= “ contenidos ”> (archivo principal.htm que corresponde almarco de la derecha, llamado “contenidos”,80% de anchura).</html>Las páginas también se pueden dividir en marcos horizontales con <frameset rows= “ , ” >frameborder=“ No” Evita que se vea el borde entre los marcos.framespacing=“ 2” Establece 2 píxeles de separación entre los marcos.scrolling=“ No” Evita que aparezca una barra scroll dentro del marco.scrolling=“ auto” Mostrará la barra de scroll sólo si es necesario.Ejemplo de una página con tres marcos en forma de filas. La superior y la inferior tienen un tamañofijo de 80 píxels; la del medio es adaptable. No se muestran los bordes entre los marcos.<frameset rows= “80, * , 80” frameborder= “No” border= “0” framespacing= “0” ><frameset src= “navegacion_up.htm” name = “topFrame” scrolling= “No” ><frameset src= “principal.htm” name= “mainFrame” ><frameset src= “navegacion_down.htm” name= “bottomFrame” scrolling= “No” ></frameset>

×