Etiquetas html

6

Click here to load reader

description

Etiquetas de html

Transcript of Etiquetas html

Page 1: Etiquetas html

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

<TITLE> Titulo del documento.

- - Visible en la barra del

</TITLE>

navegador

text

link Color Hexadecimal

alink

(ejemplo: #000000)

vlink

bgcolor

topmargin (IE)

Inicio y final del cuerpo

<BODY> leftmargin (IE) Tamaño en pixels

del documento. Lo que

marginheight (ejemplo: 10px)

</BODY>

se ve en el navegador.

marginwidth

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>

<TT> Estilo Anchura Fija

- - (mismo espacio cada

</TT>

letra)

face

Nombre de Fuente

(ejemplo: Arial)

<FONT> size

Tamaño (1-7) Formateo de la fuente.

</FONT> (ejemplo: 5) (BASEFONT)

color

Color Hexadecimal

(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

Page 2: Etiquetas html

Etiquetas Básicas Referencia HTML

Definición Estructural

Etiquetas Atributos Valores Descripción

<Hx> align left | center | right

Encabezados

</Hx> (x = nº entre 1 y 6)

left

<P> align

center Párrafo

</P> Right

justify

left

<DIV> align

center División, bloque

<DIV> Right

justify

<BR>

Clear left | right | all Salto de línea

(texto alrededor img.)

size

Ancho en píxel o %

(ej. 100px – 40%)

width

Alto en pixels

(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

Page 3: Etiquetas html

Etiquetas Básicas Referencia HTML

Formato de Listas

Etiquetas Atributos Valores Descripción

<UL> type

Lista no numerada

<LI></LI> disk | circle | square

(aplicados a UL) (viñetas, no ordenada)

</UL>

<OL>

type 1 | I | i | A | a

(aplicados a OL) Lista numerada

<LI></LI>

start

(ordenada)

</OL> Carácter Inicial

(aplicados a OL)

<DL>

<DT></DT> - - Lista de Definiciones

<DD></DD>

</DL>

Vínculos

Etiquetas Atributos Valores Descripción

(archivo html)

href

(#ancla)

(URL, http://www...)

(malito:email)

<A> title (Texto Emergente)

Establece un vínculo o

</A> enlace

_blank

target

_parent

_top

_self

<A> name (nombre del ancla)

Establece un punto de

</A> anclaje

Imágenes

Etiquetas Atributos Valores Descripción

src (archivo imágen)

width

Ancho en píxels o %

(ej. 100px – 40%)

height

Alto en píxels o %

(ej. 100px – 40%)

hspace

Espacio Vertical

(ej. 10px )

vspace

Espacio Horizontal

<IMG> (ej. 10px ) Inserta una imágen

border

Tamaño en pixels

(ej. 10px)

title Título Emergente

alt Texto Alternativo

top

middle

align bottom

left

right

Duglas Oswaldo Moreno Mendoza Página 3

Page 4: Etiquetas html

Etiquetas Básicas Referencia HTML

Tablas

Etiquetas Atributos Valores Descripción

width

Ancho en píxels o %

(ej. 100px – 40%)

height

Alto en píxels o %

(ej. 100px – 40%)

border

Tamaño borde exterior

(ej. 10px)

cellspacing

Espaciado entre Celdas

(ej. 5) Inserta una tabla.

<TABLE> cellpadding

Relleno de Celdas Debe encerrar etiquetas

</TABLE> (ej. 5) de filas (<tr>) y celdas

(<td>).

bgcolor Color Hexadecimal

(ejemplo: #000000)

bordercolor (IE)

Color Hexadecimal

(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> bgcolor

Color Hexadecimal tabla. Debe encerrar

</TR> (ejemplo: #000000) etiquetas de celdas

(<td>)

bordercolor (IE) Color Hexadecimal

(ejemplo: #000000)

background

(archivo imágen)

(no recommendable)

align left | center | right

valign top | middle | bottom

width

Ancho en píxels o %(ej.

100px – 40%)

height

Alto en píxels o %

(ej. 100px – 40%)

bgcolor

Color Hexadecimal

<TD> (ejemplo: #000000) Inserta una celda

</TD> bordercolor (IE)

Color Hexadecimal dentro de la fila

(ejemplo: #000000)

background

(archivo imágen)

(no recommendable)

nowrap -

colspan

Nº columnas abarcadas

(ej. 2)

rowspan

Nº columnas abarcadas

(ej. 2)

<TH> Los mismos que <TD> Los mismos que <TD>

Inserta celda cabecera

</TH> (negrita y centrado)

Duglas Oswaldo Moreno Mendoza Página 4

Page 5: Etiquetas html

Etiquetas Básica Referencia HTML

Formularios

Etiquetas Atributos Valores Descripción

action mailto:email

Define un formulario

method post

<FORM> (Solo se indican

etiquetas y atributos

</FORM>

enctype text/plain necesarios para

mandar emails)

name Nombre del Formulario

type text | password

name Nombre del Campo

Define un campo Text o

<INPUT> maxlenght Password dentro del

(Máximo de caracteres)

Form

size

(Ancho en caracteres)

value

Valor Inicial

(contenido del campo)

type radio | checkbox

name Nombre del Campo

(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

value formulario.

(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

value

Valor

(contenido del campo)

name Nombre del Campo

Define un área de texto.

<TEXTAREA> rows Nº de Filas

Se utiliza cuando hay

</TEXTAREA> que insertar gran

cantidad de texto.

cols Nº de columnas

(ancho en caracteres)

Duglas Oswaldo Moreno Mendoza Página 5

Page 6: Etiquetas html

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 -

(aplicado a <select>) de selección (para esta

</OPCION>

aplicar size)

</SELECT> value Valor

(aplicado a <option>) (contenido del campo)

selected -

(aplicado a <option>)

Frames (Marcos)

Etiquetas Atributos Valores Descripción

rows

Valor numérico o %

(ejemplo rows=10%,*,10%)

cols

Valor numérico o %

(ejemplo cols=*,10)

<FRAMESET>

Especifica el número de

frameborder yes | no frames. Debe ir dentro

</FRAMESET>

del <HEAD>

border Valor numérico

bordercolor

Color Hexadecimal

(ejemplo: #000000)

src (página html)

<FRAME>

name nombre del frame Define un frame. Debe

ir dentro del

</FRAME>

noresize - <FRAMESET>

scroll yes | no | auto

<NOFRAME> Alternativa para

navegadores que no

<body></body> - -

soportan frames. Debe

</NOFRAME>

ir dentro del <HEAD>

Duglas Oswaldo Moreno Mendoza Página 6