Está en la página 1de 7

HTML Codigos

DESCRIPCION INICIO FINAL COMENTARIOS


Obligatorias
Principio de <html> </html> Toda la codificación debe estar incluida en estas
Documento etiquetas
Encabezado <head> </head> Dentro del encabezado se encontrará el título.
Título <title> </title> Es el texto que aparece en la barra de títulos del
navegador
Cuerpo <body> </body> Cuerpo de la página
Para toda la página
Color de Fondo <body bgcolor="BLUE">   Permite colocar un color uniforme de fondo a
toda la página.

Imagen de Fondo <body   nombreimagen.gif Se recomienda utilizar


background="imagen.gif"> formatos .gif o .jpg

Colores de texto color <body text="#RRVVAA"   Permite definir los colores que se aplicarán en
de enlaces Link ="#RRVVAA" forma genérica para el texto como para los
enlaces visitados Vlink ="#RRVVAA" enlaces.
enlaces activos Alink ="#RRVVAA"

Estilos <style> </style> Estilo de fuente, color, tamaño, etc para todo el
documento.
Meta <meta </meta> Permite definir propiedades internas del
name="description" documento.
content="comentarios" Name = "description" content = ”Será el
name="keywords" resumen con que se publicará en el buscador. No
content="palabra1 utilizar más de 25palabras"Name="keywords"
palabra2 ... palabran"> content = "podrán definirse palabras claves para
que nuestro documento sea encontrado por los
buscadores"

Sonido <bgsound   Ejecuta un archivo de sonido.


src="sonido.mp3" xx.wav se debe reemplazar por el nombre del
loop=infinite/n> archivo; loop n indica la cantidad de veces que
se repetirá.

Presentación de texto
Encabezamientos <h1><h2>....<h6> </h1></h2> Opciones de formato de texto para encabezados,
....</h6> 
Negrita <b> </b> Coloca el texto incluido con éstos formatos.
Cursiva <i> </i>
Subrayado <u> </u>
Parpadeo <blink> </blink> El texto estará parpadeante
Grande <big> </big> Agranda el texto
Pequeña <small> </small> Disminuye el texto
Subíndice <sub> </sub> Representa el texto sobre el renglón o bajo el
Superíndice <sup> </sup> renglón.
Color del Texto  <font color="BLUE"> </font> Permite colocar un color a la fuente. El color
está representado por un número hexadecimal.

Tamaño del Texto  <font size="n"> </font> Define un tamaño de fuente específico. n repre-
senta un número del 0 al 7
Tipo de fuente <font face="nombre de </font> Permite definir un nombre de Fuente específico.
fuente">
Texto en Movimiento <marquee>(texto) </marquee Permite que un texto tenga movimiento.
>
Línea Horizontal <hr="n"> Traza un línea horizontal cuyo grosor está
representado por “n”
Espacio en Blanco &nbsp   Representa un espacio en blanco.
Comentario <!- comentario>  -> Comentarios que no serán visibles en la pantalla.
Presentación de párrafos
Alineaciones <center> </center> Todo texto que se escriba entre estas etiquetas
<left> </left> sufrirá esa alineación .
<right> </right>
Sangría <blockquote> </blockquo Se utiliza para destacar una cita.
te>
Parrafo Realiza la separación entre párrafos, y la
<p align= </p> alineación de estos.
center*left*right*justify>
Renglones en blanco <br>   Permite dejar renglones en blanco

Tratamiento de imágenes
Imagen Individual <imgsrc="imagen.gif">   Permite insertar una imagen en la página que
estamos diseñando.

Texto de la imagen <imgsrc="imagen.gif"   Coloca un texto que podrá leerse al pasar el


alt="texto"> puntero del ratón sobre la imagen o cuando ésta
no se carga.
Alineación del texto <img   Top Arriba * Middle Medio * Bottom Abajo
src="nombreimagen.gif"
align= top * middle *
bottom>
Ancho <img src="imagen.gif"   Define el tamaño de la imagen
Alto width="n" Width = ancho * height = altura n = será un
height="n"> valor en pixeles
Videos <imgdynsrc="archivi.avi"   Permite agregar archivos de video.
loop=infinite controls
start= mouseover>
Listas
Lista numerada <ol type= A * a * I * i </ol> Se utiliza cuando las opciones deben ser
start=n> numerados. La opción type representan número
<lh> título de la lista o letras y start indicará el número con que inicia.
</lh>
<li> Primera opción 
<li> Segunda opción 
<li> Tercera opción 
Lista no ordenada <ul type=square * circle </ul> Se utiliza cuando las opciones no presentan un
* disk>  orden determinado. La opción type representa la
<lh> título de la lista viñeta.
</lh>
<li> Primera opción 
<li> Segunda opción 
<li> Tercera opción 
Lista con sangrado <dl>  </dl> Se utiliza cuando las opciones llevan un título y
<lh> título de la lista una definición
</lh>
<dt> Primer tema 
    <dd> Primer detalle 
    <dd> Segundo
detalle 
<dt> Segundo tema 
    <dd> Tercer detalle 
    <dd> Cuarto detalle 
Enlaces o Links
Enlace a otro <a href="link"> satdb </a> link se debe reemplazar por la dirección URL
URL destino del enlace. satdb es el texto indicativo
que se leerá en la página. 

Enlace a un <a href = "mailto:dirección e- </a> Te permite un enlace directo a tu cliente de


e-mail mail"> texto indicativo del correo predeterminado
enlace 
Marca para <a href="#marca"> Texto de </a> Referencia una posición a la que luego se
enlace dentro de enlace al ancla accederá.
la misma página 
(Ancla - Anchor)
Localizar enlace <a name="marca"> texto del </a> Enlaza una posición previamente marcada,
anterior ancla dentro de la misma página 
Enlace a otra <a href="ab.htm#marca"> texto </a> Enlaza a la posición establecida en marca, en la
página con indicativo del enlace página ab.htm
marca, dentro del
mismo sitio
Enlace con <a href="urlimagen"><img </a> nombreimagen.gif se debe reemplazar por el
imagenes src="imagen.gif"> nombre de imagen seleccionado
Enlaza a la dirección URL haciendo un click
sobre la imagen.

Tablas
Definición  <table> </table> Crea una tabla
Bordes  <table border=n   n = representa al grosor del borde. También se
Color de Bordes bordercolor="#RRVVAA"> podrá especificar el color del borde 

Ver escala de Colores


Separación entre <table cellspacing=n>   Las celdas podrán separarse por el n valor
celdas   
Separación entre <table cellpadding=n>   El contenido podrá estar separado del borde por
el borde y el el valor indicado en n
contenido 
Alto <table height=n o porcentaje   Se puede establecer un valor o un porcentaje
ancho width=n o porcentaje> para definir el tamaño de la tabla
Color de Fondo o <table bgcolor="#RRVVAA"   Se puede establecer un color de fondo de toda la
Imagen de Fondo background="imagen.gif"> tabla o colocar una imagen de fondo

Ver escala de Colores


Título <caption </caption> Posibilita colocar un título a la tabla alineado
align=top * bottom> texto del top=arriba o bottom=abajo
título
Definición de filas <tr </tr> Por cada fila que tenga la tabla deberá utilizarse
align=left*center*right esta etiqueta: se podrá establecer la alineación
valign=top*middle*bottom del contenido, la ubicación dentro de la fila y el
bgcolor="#RRVVAA">  color de fondo.
Definición de <th </th>  Permite definir los nombres de las columnas.
títulos align=left*center*right*justify*
decimal
valign=top*middle*bottom*bas
eline bgcolor="#RRVVAA"> 
Definición de <td </td> Coloca contenidos a cada celda
datos o align=left*center*right*justify*
contenidos decimal
valign=top*middle*bottom*bas
eline bgcolor="#RRVVAA"> 
Celda que ocupa <td rowspan=numero de filas>  </td> Se puede combinar una celda para que ocupe
muchas filas muchas filas.
Celda que ocupa <td colspan=numero de </td>  Se puede combinar una celda para que ocupe
muchas columnas columnas>  muchas columnas.
Formularios
Definición <form>   Inicia un formulario. Se utiliza para la entrada o
el envío de datos.
Acciones <form   Envía la respuesta inmediatamente a la dirección
action="mailto:direccion@ema especificada en formato de texto.
il"
method=post
enctype="text/plain">Texto
referente
Introducción de <input   Ingresa un objeto dentro del formulario, se
datos type="text" deberá definir el tipo de objeto, el nombre del
name="nombre del campo campo formulario, el valor inicial que se le
formulario" asigna, el tamaño máximo de visualización del
value="asignación de un dato" campo y el tamaño máximo de caracteres que
size="número" puede tener ese campo.
maxlenght="número"> Con el type = "text" no se asigna Value
Opciones de button   checkbox = se visualiza un cuadro de
type checkbox verificación, si deseamos que aparezca tildado
file agregamos CHECKED.
hidden password = el ingreso se representa con
image asteriscos.
password radio = visualiza botones de radio y permite que
radio el usuario elija una opción entre varias. Se
reset agregan tantos input como opciones deseamos.
submit reset = visualiza un botón que al hacerle click
text borrará los datos.
submit = visualiza un botón que al hacerle click
enviará los datos.
text = crea un campo para ingresar caracteres
alfanuméricos

Ingreso de un <textarea </textarea> Permite ingresar un texto extenso, por ejemplo


texto que ocupa name="nombre del campo comentarios
muchas líneas formulario"
rows="cantidad de filas"
cols="cantidad de columnas">
Ingreso por <select name="nombre del </select> Permite optar por los datos de un menú
medio de un campo formulario">
menú <option>1º opción
<option>2º opción
<option>3º opción

Frames o Marcos
Definición <frameset> </frameset> Inicia la definición de un frame.
Frames en <frameset cols="20%,80%">   Define dos frame en columnas
columnas ocupando uno el 20% de la
Frame en filas <frameset rows="30%,70%> pantalla y el otro el 80%
restante.
Define dos frame en filas
ocupando una el 30% de la
pantalla y la otra el 70% restante
Contenido de <frame src="frame1.htm">   Define en que frame se cargará
cada frame <frame src="frame2.htm" cada página.
name="principal"> Se asignará un name en este
caso principal para indicar que
se visualicen allí los futuros
enlaces
Destino del frame target="principal"   Se utiliza como atributo de un
enlace e indica en que frame
deberá visualizarse ese enlace.
"_ blank" = se abrirá una nueva
ventanadel navegador y se
visualizará en ella.
"_self" = el enlace se carga en el
propio frame.
"_top" = el enlace se carga a
pantalla completa en la misma
ventana, suprimiendo los otros
frame.

Atributos del tag   Border = 0 indica que no habrá


frameset border=0 huecos de separación entre
frameborder=0 frames (para Netscape).
framespacing=0 frameborder = 0 indica que no
habrá borde de separación entre
frames.
framespacing = 0 indica que no
habrá huecos de separación entre
frames (para Explorer).
Atributos del tag frameborder="no"   Frameborder = elimina los
frame marginheight="número" bordes de un frame
marginwidth="número" marginwidth y marginheight =
name="nombre del frame" definen el ancho y alto de los
noresize margenes del frame.
scrolling="yes/no/auto" name = define el nombre del
src="dirección.htm" frame.
Noresize = indica que el fram no
podrá redimensionarse.
scrolling = inidca si tendrá o no
barra de desplazamiento.
src = indica el contenido del
frame.
Si el frame no <noframes> </noframes> Si el navegador no cuenta con la
puede posibilidad de incluir Frames,
visualizarse con este tag puede definirse una
dirección alternativa. Se coloca
luego de los tag FRAME y
llevan dentro un texto definifo
entre los tag <body> </body>

También podría gustarte