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.dt
d">
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.dt
d">
FRAMES Debe usarse en documentos que
incluyen frames
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/framese
t.dtd">

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

<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

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)

<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.

<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 Coloca la imagen como fondo de la
archivo"></body> 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

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.

<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 Crea una caja de texto, columnas es
rows=8></textarea> 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" Crea botón de envío con imagen
src="name.gif">
<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" Incorpora sonido con panel de
HEIGHT="50" WIDTH="130"> control en la pantalla

< object width="600" height="300"> Para insertar una pelicula flash swf
<param name="movie" value="miarchivo.swf"> en html
<embed src="miarchivo.swf" width="600"
height="300">
</embed>
</object>
 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"> Inserta un script dentro de una
document.write("<h2>bienvenido!</h2>" 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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (10)

Ähnlich wie Etiquetas html

Ähnlich wie Etiquetas html (20)

Etiquetas html