etiquetas html

Universidad Laica Eloy Alfaro De Manabí

Nombre: María Alexandra Molina Ordoñez

Etiquetas html

El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de

texto destacado de una forma especial que permiten la definición de las distintas

instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas

estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la

base principal del lenguaje HTML

ETIQUETAS HTML

APERTURA ACCION

<! DOCTYPE> Es la primera parte de una página web, que va antes de la etiqueta <HTML>. Le indica al navegador que especificación de HTML se está utilizando HTML 4.01: los tipos de documento que define son: strict, transitional y frameset.

STRICT Se usa cuando se utilizan CSS. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

TRANSITIONAL Presenta elementos en proceso de transición de acuerdo a los estándares del W3C. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

FRAMES Debe usarse en documentos que incluyen frames <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html></html> Al principio y al final del documento.

Nombre: María Alexandra Molina Ordoñez <head></head> Abre y cierra un documento HTML

Cabecera del documento - aquí se coloca título, metatags, e información para buscadores. Dentro del head se ponen las etiquetas.

</body> Permite el cierre de la etiqueta y se coloca justo antes del cierre </html>

<body></body>

Dentro de esta etiqueta va toda la parte visible de la página web. Se inserta todo el contenido del documento.

ATRIBUTOS DE LA ETIQUETA BODY La etiqueta <body> puede llevar incluida información sobre las propiedades de la

página:

<body bgcolor=?> Configura el color de fondo de la página, usando el valor del código de color hexadecimal.

<body text=?>

Configura el color por defecto del texto en la página, usando el valor del código de color hexadecimal.

<body link=?> Configura el color de las ligas o enlaces, usando el valor del código de color hexadecimal.

<body vlink=?>

Configura el color de las ligas o enlaces visitados, usando el valor del código de color hexadecimal.

<body alink=?> Configura el color de las ligas o enlaces activos al darle clic, usando el valor del código hexadecimal.

<body background="imagen.gif"> Establece una imagen para el fondo de la página.

Todos estos parámetros se pueden agrupar en una única etiqueta <body>: <body bgcolor=? text=?link=? vlink=?alink=?>  Sirve para anotar aclaraciones 'privadas' del autor de la página. Lo que se escribe dentro de esta etiqueta es ignorado por el navegador y no se muestra en la página.

ETIQUETAS DEL ENCABEZADO

<title></title> Indica el título de la página web.

<meta> Permite aportar meta información al documento, para su mejor


Nombre: María Alexandra Molina Ordoñez Identificación e indexación por los motores de búsqueda.

TIPOS DE <META>: <meta name="description" content="Frase descriptiva de los contenidos de la Página">

<meta name="keywords" content="Palabras clave que resuman la temática de los contenidos de la página”>

<meta name="author" content="Nombre/s del autor/es de la página">

ETIQUETAS O FORMATOS HTML DE TEXTO <pre></pre> Texto pre-formateado <hl></hl> sirve para que el título sea más

grande

<h6></h6> es para que el título sea más

pequeño

<b></b> Negritas. (También sirve la etiqueta <strong>… </strong>)

<u></u> es para un subrayado

<i></i> Cursivas.(También sirve la etiqueta <em>…</em>)

<tt></tt> Es tipo máquina de escribir <cite></cite> Cita, en cursiva <em></em> Resalta una palabra, negrita o

cursiva <strong></strong> Resalta una palabra o grupo de

palabras <font face=?></font> Coloca el tipo de letra o fuente: por

ejemplo, arial, verdana, courier, etc.

<font size=”x”></font> Coloca tamaño de letra, donde X es un valor del 1 al 7

<font color=?></font> Configura el color, usando valor hexadecimal o nombre directo formado por letras y números que indica el color (blue, green, etc.)

La etiqueta <font> puede incluir los tres parámetros (tamaño, fuente y color):<font size=X color=? face=?fuente escogida> …… </font><pre> pre formateado. Respeta espacios, saltos de línea y los retornos utilizados.<blink> hace parpadear el texto (no para Explorer)

LIGAS <a href="URL"></a> Hipervínculo

<a href="mailto:EMAIL"></a> Hipervínculo mailto (para envío de

correo)


Nombre: María Alexandra Molina Ordoñez <a name="name"></a> Ancla en el mismo documento <a href="#name"></a> Liga hacia algún lugar dentro del

mismo sitio.

FORMATO Y PRESENTACIÓN DE PÁRRAFO <p></p> Nuevo párrafo, salto de párrafo. <br> Inserta un interlineado suave. Crea

otra línea o salta de línea <blockquote></blockquote> Sangría. <center> Centrar el texto. <p align=center> Párrafo centrado. <p align=left> Párrafo alineado a la izquierda. <p align=right> Párrafo alineado a la derecha. <p align=> Alinea el párrafo hacia la izquierda,

derecha o al centro

CREACIÓN DE LISTAS

Lista no numerada: <ul>entrada de una lista

<li>primer elemento de la lista</li>

<li>segundo elemento de la lista</li>

<li>tercer elemento de la lista</li>

</ul> cierra lista

Lista numerada: <Ol>entra lista

<li>primer elemento de la lista</li>

<li>segundo elemento de la lista</li>

</Ol>cierra lista.

Lista de glosario: <dl> entra lista <dt>término que se va a definir</dt>

<dd>definición del término</dd> </dl> cierra lista.

Lista de definiciones del glosario: <li></li> Lista ordenada <ol></ol> Precede cada definición. <dt> Precede a cada término en

definiciones <dd> Lista con viñetas sin ordenar <dl></dl> Texto indentado de ambos lados.


Nombre: María Alexandra Molina Ordoñez <div align=?> Para formato a porciones grandes

del documento html, incluyendo hojas de estilo.

LÍNEAS HORIZONTALES SEPARADORAS <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> Línea alineada en el centro. <hr align=left> Línea alineada a la izquierda. <hr align=right> Línea alineada a la derecha. <hr noshade> Línea sin efecto de sombra.

ELEMENTOS GRÀFICOS <img src="dirección de la imagen” "> Indica la ruta de la imagen.

<img src="name" border=?> Determina el contorno de la imagen. Un valor 0 no tendrá contorno.

<img src="name"> Incorpora una imagen <img ... height="XX" width="YY"> establece un tamaño de la imagen

(altura y

anchura) en pixels <img src="name" align=?> Alinea la imagen: izquierda, derecha

y centro. <img ... alt="texto explicativo"> Se muestra un texto al pasar el

cursorsobre la imagen. <img ... align="bottom"> Alineación inferior del texto respecto

de la imagen. <img ... align="middle"> Alineación del texto en el medio de la

imagen <img ... align="top"> Alineación superior del texto respecto

de la imagen. <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 Espacio vertical entre la imagen y el

texto.

<map></map> Mapa de imágenes

<body background="URL o ruta de archivo"></body>

Coloca la imagen como fondo de la página

<hr> Linea horizontal

<hr size=?> Tamaño de una línea horizontal

<hr width=?> Ancho de línea horizontal, ya sea porcentaje o valor absoluto.

<hr noshade> Línea horizontal sin sombra


Nombre: María Alexandra Molina Ordoñez TABLAS

Útiles para componer la página y para presentar datos tabulares.

<table></table> Crea tabla y define como comienza y termina la tabla

<tr></tr> Crea filas en una tabla <td></td> Crea celda o columnas dentro de las

fila <th></th> Encabezado de tabla, texto normal,

negrita y centrado

ATRIBUTOS DE TABLAS <table border=#> Coloca contorno en las celdas de la

tabla <table cellspacing=#> Espacio en pixeles entre las celdas y

textos de una tabla <table cellpadding=#> Espacio entre el contorno de una

celda y su contenido <table width=# or %> Ancho de la tabla, puede darse en

pixeles o porcentaje del ancho de la página (no lleva %)

<table border="X"> Establece el grosor en píxeles del

borde de la tabla

<table height="XX> Determina la altura de la tabla en

píxeles <tr align=?> or <tdalign=?> Alineación para las celdas, izquierda

derecha, centro. <tr valign=?> or <td valign=?> Alineación vertical de las celdas,

arriba, abajo, en medio. <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 contínio dentro de una celda.

MARCOS (FRAMES) <frameset></frameset> Substituye a la etiqueta HTML body

en documentos con frames. Puede insertarse en otrosframesets.

<frameset rows="value,value"> Número de líneas en un frameset, usando pixeles o porcentaje de ancho.

<frameset cols="value,value"> Número de columnas en un frameset, usando pixeles o porcentaje de ancho.

<frame> Frame singular dentro de un framset.


Nombre: María Alexandra Molina Ordoñez <noframes></noframes> Texto que aparecerá en

navegadores que no soportan frames.

ATRIBUTOS DE FRAMES <frame src="URL"> Especifica que página html se

muestra.

<frame name="name"> Nombra al frame para que sea identificado por otros frames y accesado.

<frame marginwidth=#> Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1.

<frame marginheight=#> Margen superior e inferior de un grame, igual o mayor a 1.

<frame scrolling=VALUE> Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto.

<frame noresize> No permite al usuario modificar el tamaño de un frame.

FORMAS <form></form> Forma

<select name="name"></select> Menú desplegable

<option> Opción del menú desplegable

<textarea name="name" cols=40 rows=8></textarea>

Crea una caja de texto, columnas es el ancho y las líneas la altura (cols y rows)

<input type="checkbox" name="name"> Crea un checkbox

<input type="radio" name="name" value="x"> Crea botón de radio

<input type=text name="name" size=20> Crea una opción de texto para entrada de información o despliegue

<input type="submit" value="name"> Crea botón de envío de forma tipo submit

<input type="image" border=0 name="name" src="name.gif">

Crea botón de envío con imagen

<input type="reset"> Crea botón de limpieza (reset). Vacía la forma

OTRAS ETIQUETAS HTML

<EMBED SRC="url o ruta de archivo" VOLUME="50" HEIGHT="50" WIDTH="130">

Incorpora sonido con panel de control en la pantalla

Nombre: María Alexandra Molina Ordoñez < object width="600" height="300"> <param name="movie" value="miarchivo.swf"> <embed src="miarchivo.swf" width="600" height="300"> </embed> </object>

Para insertar una pelicula flash swf en html

 Inserta comentarios no visibles en la página.

< iframe src ="/mipagina.html"> ... </iframe>> Inserta un frame dentro de una página. Inline Frame.

< script type="text/javascript"> document.write("<h2>bienvenido!</h2>"

Inserta un script dentro de una página html.

</script><span style="color: #00FFFF;"></span>. Aplica a un grupo de texto un estilo, por ejemplo font, tamaño, color.

CREACIÓN DE ENLACES <a href=”http://www.servidor.com/directorio/pagina.htm”>Enunciado del

enlace</a>

<a href=”mailto:dirección de mail”> Vínculo a una dirección de correo-e.

<a name=”marcador”> Define un marcador (ancla) en un

punto concreto de una página, 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 para

evitar los frames.

title=”texto descriptivo del enlace” Permite incluir una descripción del

destino del enlace.

etiquetas html

Documents