Este documento describe las etiquetas básicas de HTML para estructurar páginas web. Explica etiquetas para cabeceras, párrafos, enlaces, imágenes, tablas, formularios, marcos y más. Proporciona atributos comunes como align, width y otros para formatear el contenido.
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Etiquetas html
1. Etiquetas Básicas Referencia HTML
Etiquetas Básicas (Estructura HTML)
Etiquetas Atributos Valores Descripción
<HTML> Inicio y final del
- -
</HTML> documento html
<HEAD> Información general del
- -
</HEAD> documento html
Titulo del documento.
<TITLE>
- - Visible en la barra del
</TITLE> navegador
text
link
Color Hexadecimal
alink
vlink (ejemplo: #000000)
bgcolor
topmargin (IE)
leftmargin (IE) Tamaño en pixels Inicio y final del cuerpo
<BODY>
marginheight (ejemplo: 10px) del documento. Lo que
</BODY>
marginwidth se ve en el navegador.
background Archivo de imagen
bgproperties (IE) Fixed
Formato de Presentación
Etiquetas Atributos Valores Descripción
<B>
- - Estilo Negrita
</B>
<I>
- - Estilo Cursiva (italica)
</I>
<U>
- - Estilo Subrayado
</U>
<S> Estilo Tachado
- -
</S> (Strike)
<SUB>
- - Estilo Subíndice
</SUB>
<SUP>
- - Estilo Superíndice
</SUP>
Estilo Anchura Fija
<TT>
- - (mismo espacio cada
</TT> letra)
Nombre de Fuente
face
(ejemplo: Arial)
<FONT> Tamaño (1-7) Formateo de la fuente.
size
</FONT> (ejemplo: 5) (BASEFONT)
Color Hexadecimal
color
(ejemplo: #000000)
<PRE> Preformateado
- -
</PRE> (tal y como se escribe)
<CENTER>
- - Alineación centrada
</CENTER>
<BLINK>
- - Intermitencia
</BLINK>
<MARQUEE>
- - Marquesina
</MARQUEE>
Duglas Oswaldo Moreno Mendoza Página 1
2. Etiquetas Básicas Referencia HTML
Definición Estructural
Etiquetas Atributos Valores Descripción
<Hx> Encabezados
align left | center | right
</Hx> (x = nº entre 1 y 6)
left
<P> center
</P> align Right Párrafo
justify
left
<DIV> center
<DIV> align Right División, bloque
justify
Clear
<BR> left | right | all Salto de línea
(texto alrededor img.)
Ancho en píxel o %
size
(ej. 100px – 40%)
Alto en pixels
width
(ejemplo: 10px)
<HR> Línea horizontal
align left | center | right
noshade -
<BLOCKQUOTE>
- - Sangria (margenes)
</BLOCKQUOTE>
<BIG>
- - Tamaño fuente mayor
</BIG>
<SMALL>
- - Tamaño fuente menor
</SMALL>
<EM> Estilo Énfasis
- -
</EM> (Habitualmente Cursiva)
<STRONG> Estilo Énfasis Fuerte
- -
</STRONG> (Habitualmente Negrita)
<CITE> Estilo Cita
- -
</CITE> (Habitualmente Cursiva)
<ADRESS>
- - Estilo Dirección
</ADRESS>
<ABBR>
- - Estilo Abreviatura
</ABBR>
<ACRONYM>
- - Estilo Acrónimo
</ACRONYM>
<CODE>
- - Estilo Código
</CODE>
<SAMP>
- - Estilo Salida Simple
</SAMP>
<VAR>
- - Estilo Variable
</VAR>
Duglas Oswaldo Moreno Mendoza Página 2
3. Etiquetas Básicas Referencia HTML
Formato de Listas
Etiquetas Atributos Valores Descripción
<UL>
type Lista no numerada
<LI></LI> disk | circle | square
</UL> (aplicados a UL) (viñetas, no ordenada)
type
<OL> (aplicados a OL) 1|I|i|A|a
Lista numerada
<LI></LI>
</OL> start (ordenada)
Carácter Inicial
(aplicados a OL)
<DL>
<DT></DT>
<DD></DD> - - Lista de Definiciones
</DL>
Vínculos
Etiquetas Atributos Valores Descripción
(archivo html)
(#ancla)
href (URL, http://www...)
(malito:email)
<A> Establece un vínculo o
title (Texto Emergente)
</A> enlace
_blank
_parent
target _top
_self
<A> Establece un punto de
name (nombre del ancla)
</A> anclaje
Imágenes
Etiquetas Atributos Valores Descripción
src (archivo imágen)
Ancho en píxels o %
width
(ej. 100px – 40%)
Alto en píxels o %
height
(ej. 100px – 40%)
Espacio Vertical
hspace
(ej. 10px )
Espacio Horizontal
vspace
<IMG> (ej. 10px ) Inserta una imágen
Tamaño en pixels
border
(ej. 10px)
title Título Emergente
alt Texto Alternativo
top
middle
align bottom
left
right
Duglas Oswaldo Moreno Mendoza Página 3
4. Etiquetas Básicas Referencia HTML
Tablas
Etiquetas Atributos Valores Descripción
Ancho en píxels o %
width
(ej. 100px – 40%)
Alto en píxels o %
height
(ej. 100px – 40%)
Tamaño borde exterior
border
(ej. 10px)
Espaciado entre Celdas
cellspacing
(ej. 5) Inserta una tabla.
<TABLE> Relleno de Celdas Debe encerrar etiquetas
</TABLE> cellpadding (ej. 5) de filas (<tr>) y celdas
Color Hexadecimal (<td>).
bgcolor
(ejemplo: #000000)
Color Hexadecimal
bordercolor (IE)
(ejemplo: #000000)
background (archivo imágen)
align left | center | right
<CAPTION>
align left | center | right Título de la tabla
</CAPTION>
align left | center | right
valign top | middle | bottom
Inserta una fila dentro la
<TR> Color Hexadecimal tabla. Debe encerrar
</TR> bgcolor (ejemplo: #000000) etiquetas de celdas
Color Hexadecimal (<td>)
bordercolor (IE)
(ejemplo: #000000)
(archivo imágen)
background
(no recommendable)
align left | center | right
valign top | middle | bottom
Ancho en píxels o %(ej.
width
100px – 40%)
Alto en píxels o %
height
(ej. 100px – 40%)
Color Hexadecimal
bgcolor
<TD> (ejemplo: #000000) Inserta una celda
</TD> Color Hexadecimal dentro de la fila
bordercolor (IE)
(ejemplo: #000000)
(archivo imágen)
background
(no recommendable)
nowrap -
Nº columnas abarcadas
colspan
(ej. 2)
Nº columnas abarcadas
rowspan
(ej. 2)
<TH> Inserta celda cabecera
Los mismos que <TD> Los mismos que <TD>
</TH> (negrita y centrado)
Duglas Oswaldo Moreno Mendoza Página 4
5. Etiquetas Básica Referencia HTML
Formularios
Etiquetas Atributos Valores Descripción
action mailto:email
Define un formulario
method post (Solo se indican
<FORM>
etiquetas y atributos
</FORM> necesarios para
enctype text/plain
mandar emails)
name Nombre del Formulario
type text | password
name Nombre del Campo
Define un campo Text o
Nº
<INPUT> maxlenght Password dentro del
(Máximo de caracteres) Form
Nº
size
(Ancho en caracteres)
Valor Inicial
value
(contenido del campo)
type radio | checkbox
Nombre del Campo
name (si es radio el mismo para
Define un casilla de
todos)
<INPUT> opción o una casilla de
value Valor verificacion del Form
checked -
type submit | reset | image
name Nombre del Boton Define un botón de
<INPUT> enviar, o limpiar el
Valor formulario.
value
(texto del botón)
Ruta de la imagen
src (solo para el tipo
image)
type hidden
<INPUT> name Nombre del Campo Define un campo oculto
Valor
value
(contenido del campo)
name Nombre del Campo
Define un área de texto.
<TEXTAREA> Se utiliza cuando hay
</TEXTAREA> rows Nº de Filas que insertar gran
cantidad de texto.
Nº de columnas
cols
(ancho en caracteres)
Duglas Oswaldo Moreno Mendoza Página 5
6. Etiquetas Básica Referencia HTML
Name
Nombre del Campo
(aplicado a <select>)
Size Altura
<SELECT> (aplicado a <select>) (para lista no deplegable)
Define una lista
<OPTION>
multiple desplegable o una lista
Texto Opción -
</OPCION> (aplicado a <select>) de selección (para esta
aplicar size)
</SELECT> value Valor
(aplicado a <option>) (contenido del campo)
selected
-
(aplicado a <option>)
Frames (Marcos)
Etiquetas Atributos Valores Descripción
Valor numérico o %
rows (ejemplo rows=10%,*,10%)
Valor numérico o %
cols (ejemplo cols=*,10)
Especifica el número de
<FRAMESET>
frameborder yes | no frames. Debe ir dentro
</FRAMESET> del <HEAD>
border Valor numérico
Color Hexadecimal
bordercolor
(ejemplo: #000000)
src (página html)
name nombre del frame Define un frame. Debe
<FRAME>
ir dentro del
</FRAME>
noresize - <FRAMESET>
scroll yes | no | auto
Alternativa para
<NOFRAME>
navegadores que no
<body></body> - -
soportan frames. Debe
</NOFRAME> ir dentro del <HEAD>
Duglas Oswaldo Moreno Mendoza Página 6