HTML

DESCRIPCION INICIO FINAL COMENTARIOS
Obligatorias
Toda la codificación
Principio de
<html> </html> debe estar incluida en
Documento
estas etiquetas
Dentro del encabezado
Encabezado <head> </head>
se encontrará el título.
Es el texto que aparece
Título <title> </title> en la barra de títulos
del navegador
Cuerpo <body> </body> Cuerpo de la página
Para toda la página
Permite colocar un
color uniforme de fondo
a toda la página. Este
color estará formado
<body bgcolor="#RRVVAA"> por 3 números
hexadecimales que
Color de Fondo indiquen:
RR = tonalidad de color
rojo
VV = tonalidad del color
verde
AA = tonalidad del
color azul
nombreimagen.gifdeb
<body erá reemplazarse por el
Imagen de
background="nombreimagen.gi nombre de la imagen.
Fondo
f"> Se recomienda utilizar
formatos .gif o .jpg
Permite definir los
colores que se
Colores de <body text="#RRVVAA"
aplicarán en forma
texto color de Link ="#RRVVAA"
genérica para el texto
enlaces Vlink ="#RRVVAA"
como para los enlaces.
enlaces Alink ="#RRVVAA"
El color está
visitados
representado por un
número hexadecimal
Permite definir un estilo
de fuente, color,
Estilos <style> </style>
tamaño, etc para todo
el documento.
Meta <meta </meta> Permite definir
name="description" propiedades internas
content="comentarios" del documento.
name="keywords" Name = "description"
content="palabra1 palabra2 ... content = ”Será el
palabran"> resumen con que se
publicará en el
buscador. No utilizar
más de 25 palabras"
Name = "keywords"
content = "podrán
definirse palabras
claves para que
nuestro documento sea
encontrado por los
buscadores"
Ejecuta un archivo de
sonido.
xx.wav se debe
reemplazar por el
nombre del
archivo; loop nindica la
<bgsound
cantidad de veces que
src="xx.wav"
se repetirá.
loop=infinite/n>
La etiqueta Embed con
<embed
sus propiedades, se
Sonido src="xx.wav"
utiliza por las
width=200 height=55
incompatibilidades de
autostart="true"
los navegadores.
loop="true"
Con esta opción
hidden="true">
aparece una consola
cuyas dimensiones se
definen
con Widtho Height y
que puede ocultarse
con Hidden = "true"
Presentación de texto
Opciones de formato
Encabezamient </h1></h2>....</h
<h1><h2>....<h6> de texto para
os 6>
encabezados,
Negrita <b> </b> Coloca el texto incluido
Cursiva <i> </i> con éstos formatos.
Subrayado <u> </u>
El texto estará
Parpadeo <blink> </blink>
parpadeante
Grande <big> </big> Agranda el texto
Pequeña <small> </small> Disminuye el texto
Representa el texto
Subíndice <sub> </sub>
sobre el renglón o bajo
Superíndice <sup> </sup>
el renglón.
Permite colocar un
color a la fuente. El
Color del Texto <font color="#RRVVAA"> </font> color está representado
por un número
hexadecimal.
Define un tamaño de
fuente
específico. nrepre-
Tamaño del
<font size="n"> </font> senta un número del 0
Texto
al 7 al que luego
podrán agregarle los
signos + o -
Permite definir un
Tipo de fuente <font face="nombre de fuente"> </font> nombre de Fuente
específico.
Formato de fuente
Estilo de fuente <tt> </tt> Courier de tamaño
menor (Typewriter)
Formato de fuente tipo
Texto Courier. Se
<pre> </pre>
preformateado representan los
espacios en blanco
Permite que un texto
tenga movimiento.
Pueden agregarse
atributos para
Texto en
<marquee>(texto) </marquee> dimensionar la
Movimiento
marquesina, para
alinear el texto, para
modificar tamaño,
fuente y color.
Traza un línea
Línea No utiliza horizontal cuyo grosor
<hr="n">
Horizontal etiqueta de cierre está representado
por “n”
Espacio en No utiliza Representa un espacio
&nbsp
Blanco etiqueta de cierre en blanco.
Comentarios que no
Comentario <!- comentario> -> serán visibles en la
pantalla.
Caracteres Escribo Para ver Permiten que los
especiales caracteres especiales
< < sean leídos por todos
> > los navegadores en sus
& & distintas versiones.
" "
La escritura de cada
á á carácter comienza con
é é el signo ampersand (&)
&iacute í y debe terminar con
ó ó punto y coma (;)

ú ú En esta tabla vemos
Á Á como escribir algunos
É É símbolos, signos, las
letras Ñ y ñ, y las
Í Í
vocales acentuadas en
Ó Ó mayúscula y minúscula.
Ú Ú
ñ ñ
Ñ Ñ
ü ü
Ü Ü
¿ ¿
¡ ¡

Presentación de párrafos
Todo texto que se
<center> </center>
escriba entre estas
Alineaciones <left> </left>
etiquetas sufrirá esa
<right> </right>
alineación .
Se utiliza para destacar
Sangría <blockquote> </blockquote>
una cita.
Realiza la separación
Parrafo <p align= entre párrafos, y la
</p>
center*left*right*justify> alineación de estos.
Renglones en Permite dejar renglones
<br>
blanco en blanco
Tratamiento de imágenes
Permite insertar una
imagen en la página
que estamos
diseñando. El archivo
Imagen de la imagen deberá
<img src="nombreimagen.gif">
Individual estar ubicado en la
misma carpeta que la
página, caso contrario
se deberá indicar su
ruta de acceso
Coloca un texto que po-
drá leerse al pasar el
Texto de la <img src="nombreimagen.gif"
puntero del ratón sobre
imagen alt="texto">
la imagen o cuando
ésta no se carga.
Indicará la posición en
que ubicaremos al texto
que acompaña a la
Alineación del <img src="nombreimagen.gif"
imagen
texto align= top * middle * bottom>
Top Arriba
*Middle Medio
*Bottom Abajo
Define el tamaño de la
<img src="nombreimagen.gif" imagen
Ancho
width="n" Width = ancho
Alto
height="n"> * height = altura n =
será un valor en pixeles
<img dynsrc="archivi.avi" Permite agregar
Videos loop=infinite controls archivos de video.
start= mouseover>
Listas
Lista numerada <ol type= A * a * I * i start=n> </ol> Se utiliza cuando las
<lh> título de la lista </lh> opciones deben ser
<li> Primera opción numerados. La opción
<li> Segunda opción typerepresentan
número o letras
<li> Tercera opción ystart indicará el
número con que inicia.
Se utiliza cuando las
<ul type=square * circle * disk>
opciones no presentan
<lh> título de la lista </lh>
Lista no un orden determinado.
<li> Primera opción </ul>
ordenada La opción
<li> Segunda opción
typerepresenta la
<li> Tercera opción
viñeta.
<dl> Se utiliza cuando las
<lh> título de la lista </lh> opciones llevan un
<dt> Primer tema título y una definición
Lista con <dd> Primer detalle
</dl>
sangrado <dd> Segundo detalle
<dt> Segundo tema
<dd> Tercer detalle
<dd> Cuarto detalle
Enlaces o Links
xxx se debe
reemplazar por la
dirección URL destino
Enlace a otro
<a href="xxx"> yyy </a> del enlace.
URL
yyy es el texto
indicativo que se leerá
en la página.
<a href = "mailto:dirección e- Te permite un enlace
Enlace a un
mail"> texto indicativo del </a> directo a tu cliente de
e-mail
enlace correo predeterminado
Marca para Referencia una
enlace dentro posición a la que luego
de la misma <a href="#marca"> Texto de se accederá.
</a>
página enlace al ancla
(Ancla -
Anchor)
Enlaza una posición
Localizar <a name="marca"> texto del previamente marcada,
</a>
enlace anterior ancla dentro de la misma
página
Enlace a otra Enlaza a la posición
página con <a href="ab.htm#marca"> texto establecida en marca,
</a>
marca, dentro indicativo del enlace en la página ab.htm
del mismo sitio
Enlace con <a href="xxx"><img </a> xxx se debe
imagenes src="nombreimagen.gif"> reemplazar por la
dirección URL destino
del enlace.
nombreimagen.gifse
debe reemplazar por el
nombre de imagen
seleccionado
Enlaza a la dirección
URL haciendo un click
sobre la imagen.
Tablas
Definición <table> </table> Crea una tabla
n = representa al
<table border=n
Bordes grosor del borde.
bordercolor="#RRVVAA">
Color de También se podrá

Bordes especificar el color del

borde
Las celdas podrán
Separación
<table cellspacing=n> separarse por el nvalor
entre celdas

El contenido podrá
Separación
estar separado del
entre el borde y <table cellpadding=n>
borde por el valor
el contenido
indicado en n
Se puede establecer un
Alto <table height=n o porcentaje valor o un porcentaje

ancho width=n o porcentaje> para definir el tamaño
de la tabla
Color de Fondo <table bgcolor="#RRVVAA" Se puede establecer un
o background="imagen.gif"> color de fondo de toda

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

type password varias. Se agregan
radio tantos input como
reset opciones deseamos.
submit reset = visualiza un
text botón que al hacerle
click borrará los datos.
submit = visualiza un
botón que al hacerle
click enviará los datos.
text = crea un campo
para ingresar
caracteres alfa-
numéricos
Ingreso de un <textarea </textarea> Permite ingresar un
texto que ocupa name="nombre del campo texto extenso, por
formulario" ejemplo comentarios
muchas líneas rows="cantidad de filas"
cols="cantidad de columnas">
<select name="nombre del Permite optar por los
Ingreso por campo formulario"> datos de un menú
medio de un <option>1º opción </select>
menú <option>2º opción
<option>3º opción
Frames o Marcos
Inicia la definición de
Definición <frameset> </frameset>
un frame.
Define dos frame en
columnas ocupando
uno el 20% de la
Frames en pantalla y el otro el
<frameset cols="20%,80%">
columnas 80% restante.
<frameset rows="30%,70%>
Frame en filas Define dos frame en
filas ocupando una el
30% de la pantalla y la
otra el 70% restante
Define en que frame se
cargará cada página.
Se asignará
<frame src="frame1.htm">
Contenido de unname en este
<frame src="frame2.htm"
cada frame casoprincipal para
name="principal">
indicar que se
visualicen allí los
futuros enlaces
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
Destino del visualizará en ella.
target="principal"
frame "_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 Border = 0 indica que
tag frameset border=0 no habrá huecos de
frameborder=0 separación entre
framespacing=0 frames (para
Netscape).
frameborder = 0indica
que no habrá borde de
separación entre
frames.
framespacing =
0indica que no habrá
huecos de separación
entre frames (para
Explorer).
Frameborder =elimina
los bordes de un frame
marginwidth ymargin-
height = definen el
ancho y alto de los
frameborder="no"
margenes del frame.
marginheight="número"
name = define el
marginwidth="número"
Atributos del nombre del frame.
name="nombre del frame"
tag frame Noresize = indica que
noresize
el fram no podrá
scrolling="yes/no/auto"
redimensionarse.
src="dirección.htm"
scrolling = inidca si
tendrá o no barra de
desplazamiento.
src = indica el
contenido del frame.
Si el navegador no
cuenta con la
posibilidad de incluir
Frames, con este tag
Si el frame no puede definirse una
puede <noframes> </noframes> dirección alternativa.
visualizarse Se coloca luego de los
tag FRAME y llevan
dentro un texto definifo
entre los tag <body>
</body>

HTML

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

DESCRIPCION INICIO FINAL COMENTARIOS

También podría gustarte