Etiquetas HTML
Enviado por patoguerrero • 20 de Mayo de 2013 • 1.343 Palabras (6 Páginas) • 398 Visitas
Etiquetas de HTML
Etiquetas básicas:
• <html> documento </html> Al principio y al final de todo documento
• <head> cabecera </head> Dentro del éste va:
• <title> título de la página para el navegador </title>
• <meta> permite aportar meta información al documento.
Luego de cerrar el head él se pone la etiqueta
• <body> Cuerpo del documento </body> va antes de </html>. Esta etiqueta cuenta con atributos que te dan características específicas al cuerpo:
• <body bgcolor="#xxyyzz"> le da color de fondo a la página.
• <body text="#xxyyzz"> le da color al texto.
• <body link="#xxyyzz"> establece el color de enlaces.
• <body vlink="#xxyyzz"> define el color de los enlaces visitados.
• <body alink="#xxyyzz"> define el color de los enlaces activos.
• <body background="imagen.gif"> establece una imagen para el fondo.
Para cambiar el diseño del texto se usan las siguientes etiquetas:
• <b> </b> negrita.
• <i> </i> cursiva.
• <u> </u> subrayado.
• <font size=”X”> …… </font> marca el tamaño de los caracteres.
• <font color=”#XXYYZZ”> …… </font> define el color del texto.
• <font face=”arial”> …… </font> determina el tipo de fuente.
Para configurar el formato de párrafo están:
• <p> salto de párrafo </p>
• <br> salto de línea
• <blockquote> sangría </blockquote>
• <p align=center> párrafo centrado.
• <p align=left> párrafo alineado a la izquierda.
• <p align=right> párrafo alineado a la derecha.
Para crear listas no numeradas:
• <ul> lista </ul>
• <li> un elemento de la lista </li>
Para crear listas numeradas:
• <ol> lista </ol>
• <li> un elemento de la lista </li>
Para una lista de glosario o definición:
• <dl> lista </dl>
• <dt> término que se va a definir </dt>
• <dd>definición del término</dd>
Para crear líneas horizontales separadas:
• <hr> línea horizontal.
• <hr width="x%"> anchura de la línea en porcentaje.
• <hr width=x> anchura de la línea en píxeles.
• <hr size=x> altura de la línea en píxeles.
• <hr align=center/right/left> alineación de la línea.
• <hr noshade> línea sin efecto de sombra.
Insertar imágenes:
• <img src="dirección de la imagen” "> indica la ruta de la imagen.
• <img ... border=”X"> establece un borde de X pixels.
• <img ... height="XX" width="YY"> establece un tamaño de la imagen.
• <img ... alt="texto explicativo"> muestra un texto al pasar el cursorsobre la
imagen.
• <img ... align="bottom"> alineación inferior del texto.
• <img ... align="middle"> alineación del texto en el medio.
• <img ... align="top"> alineación superior del texto.
• <img ... align="left"> alineación izquierda de la imagen en el párrafo.
• <img ... align="right"> alineación derecha de la imagen en el párrafo.
• <img ... hspace=X> espacio horizontal entre la imagen y el texto.
• <img ... vspace=y> espacio vertical entre la imagen y el texto.
Insertar tablas:
• <table> tabla </table>
• <table width="XX%"> anchura de la tabla.
• <table height="XX> altura de la tabla.
• <table border="X"> establece el grosor del borde de la tabla.
• <table cellspacing="X"> define el espacio entre las celdas.
• <table cellpadding="X"> espacio entre el borde y el texto.
• <tr> <tr> determina cada una de las filas de la tabla.
• <td> </td> determina las columnas dentro de las filas.
Atributos de tablas:
• <table border=#> Coloca contorno en las celdas de la tabla
• <table cellspacing=#> Espacio entre las celdas de una tabla
• <table cellpadding=#> Espacio entre el contorno de una celda y su contenido
• <table width=# or %> Ancho de la tabla, en pixeles o porcentaje del ancho de la página
• <tr align=?> or <td align=?> Alineación para las celdas, izquierda derecha, centro
• <tr valign=?> or <td valign=?> Alineación vertical de las celdas, arriba, abajo,enmedio
• <td colspan=#> Expansión de una celda, en número de columnas
• <td rowspan=#> Expansión de una celda, en número de celdas
• <td nowrap> Texto continuo dentro de una celda
Crear enlaces:
• <a href=”enlace”>
• <a href=”mailto:dirección de mail”> Vínculo a una dirección de correo-e.
• <a name=”marcador”> define un marcador para poder enlazarlo posteriormente.
• <a href=”#marcador”> dirige un enlace interno al punto dónde está el marcador.
• <a href=”dirección página#marcador”> dirige el enlace a un punto concreto de otra página.
Dentro del a href:
• target="_blank" Abre la página en un nuevo navegador.
• target=”_top” Abre la página en toda la pantalla.
• title=”texto descriptivo del enlace” permite incluir una descripción del destino.
Marcos de página
• <frameset cols="20%, 80%"> divide la página en dos marcos.
• <frame src="menu.htm" name="navegacion"> (archivo menu.htm que
corresponde al marco de la izquierda, llamado “navegación”, 20% de anchura)
• <frame src="principal.htm" name="contenidos"> (archivo principal.htm que
corresponde al marco de la derecha, llamado “contenidos”, 80% de anchura)
• </frameset> cierre
...