Codificacion HTML

PRODUCCION MULTIMEDIA Y WEB
DESCRIPCION INICIO FINAL COMENTARIOS

Obligatorias
Toda la codificación
Principio de
<html> </html> debe estar incluida en
Documento
estas etiquetas
Dentro del
Encabezado <head> </head> encabezado se
encontrará el título.
Es el texto que
aparece en la barra
Título <title> </title>
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 por 3
<body bgcolor="#RRVVAA">
números
Color de hexadecimales que
Fondo indiquen:
RR = tonalidad de
color rojo
VV = tonalidad del
color verde
AA = tonalidad del
color azul
nombreimagen.gifde
berá reemplazarse
<body
Imagen de por el nombre de la
background="nombreimagen.g
Fondo imagen. Se
if">
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 Alink ="#RRVVAA"
enlaces. 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.
Permite definir
propiedades internas
del documento.
Name =
"description"
content = ”Será el
<meta
resumen con que se
name="description"
publicará en el
content="comentarios"
Meta </meta> buscador. No utilizar
name="keywords"
más de 25 palabras"
content="palabra1 palabra2 ...
Name = "keywords"
palabran">
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
<bgsound
la cantidad de veces
src="xx.wav"
que se repetirá.
loop=infinite/n>
La etiqueta Embed
<embed
con sus propiedades,
Sonido src="xx.wav"
se 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
Encabezamien </h1></h2>....</
<h1><h2>....<h6> de texto para
tos h6>
encabezados,
Negrita <b> </b> Coloca el texto
Cursiva <i> </i> incluido con éstos
Subrayado <u> </u> formatos.
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
Superíndice <sup> </sup>
bajo el renglón.
Permite colocar un
color a la fuente. El
Color del
<font color="#RRVVAA"> </font> color está
Texto
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
Texto
0 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
<tt> </tt> Courier de tamaño
fuente
menor (Typewriter)
Formato de fuente
Texto
tipo Courier. Se
preformatead <pre> </pre>
representan los
o
espacios en blanco
Permite que un texto
tenga movimiento.
Pueden agregarse
Texto en
<marquee>(texto) </marquee> atributos para
Movimiento
dimensionar la
marquesina, para
alinear el texto, para
modificar tamaño,
fuente y color.
Traza un línea
No utiliza
Línea horizontal cuyo
<hr="n"> etiqueta de
Horizontal grosor está
cierre
representado por “n”
No utiliza Representa un
Espacio en
&nbsp etiqueta de espacio en blanco.
Blanco
cierre
Comentarios que no
Comentario <!- comentario> -> serán visibles en la
pantalla.
Escribo Para ver Permiten que los
caracteres especiales
< <
sean leídos por todos
> >
los navegadores en
& & sus distintas
" " versiones.
á á
é é La escritura de cada
carácter comienza
&iacute í
con el signo
ó ó ampersand (&) y debe
ú ú terminar con punto y
Caracteres Á Á coma (;)
especiales É É
Í Í 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
Sangría <blockquote> </blockquote>
destacar 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
<br>
blanco renglones 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
podrá leerse al pasar
Texto de la <img src="nombreimagen.gif" el puntero del ratón
imagen alt="texto"> sobre la imagen o
cuando ésta no se
carga.
Indicará la posición
en que ubicaremos al
texto que acompaña
Alineación del <img src="nombreimagen.gif"
a la imagen
texto align= top * middle * bottom>
Top Arriba
*Middle Medio
*Bottom Abajo
Define el tamaño de
la imagen
<img src="nombreimagen.gif"
Ancho Width = ancho
width="n"
Alto * height = altura n =
height="n">
será un valor en
pixeles
<img dynsrc="archivi.avi" Permite agregar
Videos loop=infinite controls archivos de video.
start= mouseover>
Listas
Lista <ol type= A * a * I * i start=n> Se utiliza cuando las
</ol>
numerada <lh> título de la lista </lh> opciones deben ser
<li> Primera opción numerados. La opción

<li> Segunda opción typerepresentan
<li> Tercera opción número o letras
ystart indicará el
número con que
inicia.
Se utiliza cuando las
<ul type=square * circle * disk> opciones no
<lh> título de la lista </lh> presentan un orden
Lista no
<li> Primera opción </ul> determinado. La
ordenada
<li> Segunda opción opción
<li> Tercera opción typerepresenta la
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.
Te permite un enlace
<a href = "mailto:dirección e-
Enlace a un directo a tu cliente de
mail"> texto indicativo del </a>
e-mail correo
enlace
predeterminado
Marca para Referencia una
enlace dentro posición a la que
de la misma <a href="#marca"> Texto de luego se accederá.
</a>
página enlace al ancla
(Ancla -
Anchor)
Enlaza una posición
Localizar
<a name="marca"> texto del previamente
enlace </a>
ancla marcada, dentro de la
anterior
misma página
Enlace a otra Enlaza a la posición

página con establecida en marca,
<a href="ab.htm#marca"> texto
marca, dentro </a> en la página ab.htm
indicativo del enlace
del mismo
sitio
xxx se debe
reemplazar por la
dirección URL destino
del enlace.
nombreimagen.gifse
Enlace con <a href="xxx"><img
</a> debe reemplazar por
imagenes src="nombreimagen.gif">
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 separarse por
<table cellspacing=n>
entre celdas el nvalor
El contenido podrá
Separación
estar separado del
entre el borde <table cellpadding=n>
borde por el valor
y el contenido
indicado en n
Se puede establecer
un valor o un
Alto <table height=n o porcentaje
porcentaje para
ancho width=n o porcentaje>
definir el tamaño de
la tabla
Color de <table bgcolor="#RRVVAA" Se puede establecer
Fondo o background="imagen.gif"> un color de fondo de
Imagen de toda la tabla o colocar
Fondo una imagen de fondo
<caption Posibilita colocar un
Título align=top * bottom> texto del </caption> título a la tabla
título
alineadotop=arriba
obottom=abajo
Por cada fila que
tenga la tabla deberá
utilizarse esta
<tr etiqueta: se podrá
Definición de align=left*center*right 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*d nombres de las
Definición de
ecimal </th> columnas.
títulos
valign=top*middle*bottom*bas
eline bgcolor="#RRVVAA">
<td Coloca contenidos a
Definición de align=left*center*right*justify*d cada celda
datos o ecimal </td>
contenidos valign=top*middle*bottom*bas
eline bgcolor="#RRVVAA">
Celda que Se puede combinar
ocupa muchas <td rowspan=numero de filas> </td> una celda para que
filas ocupe muchas filas.
Se puede combinar
Celda que
<td colspan=numero de una celda para que
ocupa muchas </td>
columnas> ocupe muchas
columnas
columnas.
Formularios
Inicia un formulario.
Se utiliza para la
Definición <form>
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
<input Ingresa un objeto
Introducción type="text" dentro del formulario,
de datos name="nombre del campo se deberá definir el
formulario" tipo de objeto, el
value="asignación de un dato" nombre del campo

size="número" formulario, el valor
maxlenght="número"> inicial que se le
asigna, el tamaño
máximo de
visualización del
campo y el tamaño
máximo de 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 asteriscos.
radio = visualiza
button
botones de radio y
checkbox
permite que el
file
usuario elija una
hidden
opción entre varias.
Opciones de image
Se agregan tantos
type password
input como opciones
radio
deseamos.
reset
reset = visualiza un
submit
botón que al hacerle
text
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
<textarea Permite ingresar un
Ingreso de un
name="nombre del campo </textarea> texto extenso, por
texto que
formulario" ejemplo comentarios
ocupa muchas rows="cantidad de filas"

líneas 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.
<frame src="frame1.htm"> Se asignará
Contenido de
<frame src="frame2.htm" unname en este
cada frame
name="principal"> casoprincipal para
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
Destino del
target="principal" navegador y se
frame
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.
Border = 0 indica que
no habrá huecos de
separación entre
frames (para
Netscape).
frameborder =
Atributos del border=0 0indica que no habrá
tag frameset frameborder=0 borde de separación
framespacing=0 entre frames.
framespacing =
0indica que no habrá
huecos de separación
entre frames (para
Explorer).
Frameborder
=elimina los bordes
de un frame
marginwidth ymargi
nheight = definen el
frameborder="no" ancho y alto de los
marginheight="número" margenes del frame.
marginwidth="número" name = define el
Atributos del
name="nombre del frame" nombre del frame.
tag frame
noresize Noresize = indica que
scrolling="yes/no/auto" el fram no podrá
src="dirección.htm" redimensionarse.
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>

Codificacion HTML

Cargado por

Información del documento

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

Codificacion HTML

Cargado por

Copyright:

Formatos disponibles

PRODUCCION MULTIMEDIA Y WEB

DESCRIPCION INICIO FINAL COMENTARIOS

<li> Primera opción numerados. La opción

Enlace a otra Enlaza a la posición

value="asignación de un dato" nombre del campo

ocupa muchas rows="cantidad de filas"

También podría gustarte