HTML-colores-fondo-paginas-web

Páginas Web con HTML
COLORES Y FONDO DEL DOCUMENTO

(1)(2)(3)(4)(5)(6)(7) La etiqueta <Body> presenta una serie de atributos
que permiten establecer características generales para
Los documentos llamados páginas Web son todo el documento, como: color de texto, enlaces o
archivos multimediales, con hipertexto fondo del documento. Los colores se pueden indicar en
almacenados en servidores de Internet. Para su formato hexadecimal o referenciados por su nombre en
mejor presentación contienen títulos, subtítulos, inglés. ejemplo: BGCOLOR="#rrggbb o nombre del
márgenes, fondo, color imagen, sonido, video, color".
animaciones y especialmente vínculos para
conectarse a otros sitios. Los atributos son: BGCOLOR: indica el color del
fondo del documento.
HTML son inciales de las palabras inglesas
HiperTextMarkupLanguaje, es un lenguaje TEXT: especifica el color general del texto
diseñado para la construcción de páginas Web
utilizando comandos llamados etiquetas o "Tags" LINK: el color de los enlaces
que se definen para realizar lo que el autor desea
que se muestre en la página, cada comando se VLINK: color del texto de los enlaces ya visitados
escribe entre los signos < y >, la mayoría de los
comandos tiene una etiqueta de inicio y otra de ALINK: color en que se pondrá el texto del enlace en el
final, el comando en la etiqueta de final debe ir momento de su activación
precedido del signo /.
Ejemplo: <BODY bgcolor="yellow" text="#aa68dd">
Algunos comandos como el de salto de
línes<BR> no llevan nada

Los diferentes comandos en HTML de la página ESTRUCTURACION DEL TEXTO
Web se escriben en un procesador de texto como
Block de notas, Wordpad, Microsoft Word y se Veamos una serie de etiquetas que se encargan de
deben grabar con la extensión HTML en formato gestionar el aspecto general del texto en un documento
de solo texto.Utilizando lo aprendido en las guías HTML
de HTML e diseñado esta pagina web
<P></P>separa párrafos
Diseño de una página base:
<Hn></Hn> marca títulos de secciones, donde n varía de 1
<HTML> Inicio del documento a 6 siendo 1 letra más grande y 6 más pequeña. La
<HEAD>Inicio de la cabecera utilización de esta etiqueta genera automáticamente un
<TITLE> Inicio del título de la página salto de línea
</TITLE> Final del título
</HEAD> Final de la cabecera <HR> dibuja una barra horizontal que divide la pantalla
<BODY> Inicio de la página con un groso y y una longitus determinada a través de sus
.... Comandos HTML para ubicar los elementos atributos: size especifica el grosor, WIDTH indica la
.... de la página como texto, imágenes, tablas,etc. longitud o el porcentaje relativo con respecto al ancho de
</BODY> Final de página la página. ALIGN con los valores left, right o center o el
</HTML> Final del documento pocentaje adecuado alinea la barra. NOSHADE elimina el
efecto de sombra de la barra

Ejemplo: <HR WIDTH=50% ALIGN=LEFT>

FUENTES Y ENLACES

(2) La etiqueta <FONT> controla casi totalmente el estilo de
un bloque de texto. El tamaño con SIZE, la fuente
TEXTO CON FORMATO conFACE y el color de la misma con COLORse debe
PREESTABLECIDO cerrar con </FONT> los tamaños del texto serán del 1 al
7
HTML no reconoce las tabulaciones, saltos de
línea, etc, sin embargo hay etiquetas que Ejemplo: <FONT FACE="COSMIC" SIZE =+2
permiten introducir texto con formato: COLOR="RED"> Este es un ejemplo</FONT>

<PRE></PRE> Respeta los espacio, y saltos de El hipertexto consiste en poder moverse a través de un
línea documento o varios, seleccionando zonas de texto o
imágenes programadas para tal fin. La estructura
El atributo WIDTH permite especificar el general de un enlace está formada por la
máximo de caracteres por línea etiqueta <A> seguida de determinados atributos. Un en
lace se distingue del texto normal porque éste aparece
<B> para mostrar un bloque de texto en negrita resaltado en otro color y subrayado

<I> para poner texto en cursiva La estructura básica de un enlace:

<U> para subrayar el bloque de texto <A HREF="destino del enlace"> Texto indicativo del enlace
</>>
<TT> el texto tendrá un tamaño menor
Enlace a un punto de la página
<BLINK> texto intermitente
Se puede navegar a través de un texto extenso, para ello
<BIG> texto grande el mayor tamaño de fuente primero se debe colocar marcadores, eso se logra de la
siguiente manera: al inicio del documento se coloca un
<SMALL> texto pequeño, el menor de fuente marcador. Por ejemplo:

<SUP> superíndice <A NAME="iniciodeldocumento"></A> y al finalizar el
documento colocamos otro marcador <A
<SUB> subíndice NAME="finaldeldocumento"></A> luego realizamos los
siguientes enlaces: Al principio del documento escribimos:
<ADDRESS> muestra un bloque de texto en
cursiva <HREF="#finaldeldocumento">Pulsa aquí para ir al final
del documento</A>
<BLOCKQUOTE> define un bloque de texto

como una cita de ora fuente Y en el final del documento escribimos: <A HREF
="#iniciodeldocumento">Pulsa aquí para ir al al inicio del
<CITE> muestra el texto como si fuese una cita documento</A>

<EM> presenta el contenido de un bloque de
texto enfatizado

<STRONG> texto más enfatizado que el caso
anterior

<STRIKE> texto tachado

<CENTER> centra el texto en la pantalla

Listas ordenadas

(3) Este tipo de listas se utiliza para relacionar
elementos con un orden determinado y
FUENTES Y ENLACES precedido de un número que se incrementa
automáticamente. Las etiquetas
Enlaces a otras páginas son:<OL> y </OL> Los
atributos TYPE determina el formato de la
Si tenemos dos páginas llamadas por ejemplo
PRIMARIA y SECUNDARIA podemos pasar de
marca encargada de
la una a la otra empleando el siguiente código, numerar. START especifica el número del
nos ubicamos en la primaria y escribimos en primer elemento de la lista para valores
cualquier sitio distintos a 1, tomado por defecto.

<A HREF="SECUNDARIA.HTML"> Pulsa Veamos un ejemplo:
aquí para ir a la siguiente página</A> y de una
manera similar podemos ir de la segunda página <UL TYPE=1><OL>
a la primera
<LI> Introducción a la dinámica de HTML
Enlace a otros sitios
<LI>Breve recorrido por HTML
<A HREF="http://www.institucionlemo.net/">
Página web de la Institución</A> <LI> Un recorrido por JAVASCRIPT

<A HREF="http://www.google.com/"> Buscador de <OL TYPE=A>
Internet</A>

Enlace a una dirección de correo <LI>Dinámica de HTML

<A <LI> Hojas de estilo
HREF="mailto:jnacho06@hotmail.com">Correo
del Web master jnacho06@hotmail.com</A> <OL TYPE= a>

<LI>Parámetro CLASS

LISTAS <OL TYPE =I>

Estas se emplean para presentar de forma ordenada <LI>Apéndice A,
una serie de líneas

Listas desordenadas

Las etiquetas que se emplean son <UL> Y
</UL>Html colocará un símbolo delante de cada
elemento dependiendo del valor especificado en el
atributoTYPE. este atributo puede ser: circle (círculo
sin relleno), disc (círculo relleno) square(cuadrado).
Veamos un ejemplo:

<UL TYPE=square><LI>Capítulo
I<LI>Capítulo II<LI>Capítulo III<UL
TYPE=disc><LI>Sección 3.1<LI>Sección
3.2</UL><LI>Capítulo IV</UL>

<IMG SRC="nombre archivo" BORDER=6>

(4) Otra posibilidad interesante es la de redefinir el
tamaño de una imagen mediante los
IMAGENES atributos WIDTH y HEIGHT (anchura y altura de
la imágen): Veamos la sintáxis:
El principal motivo del éxito del web radica en
su potencia para soportar numerosos medios de <IMG SRC ="archivo" width=180 HEIGHT=20>
transmisión de información, en otras palabras,
multi-media. Este uso esta fuertemente
Los atributos VSPACE Y HSPACE, el primero
emparentado con la capacidad de la
computadora y con la participación de diversos indica el espacio a reservar por encima y por
programas llamados plugins, los cuales debajo de la imagen, el segundo se refiere al
funcionan paralelamente al web browser. espacio a reservar a derecha e izquierda de la
misma
Las páginas HTML no solo contiene texto e

imágenes, sino que podemos colocar cualquier Sintáxis:
tipo de archivo. Utilizando la sintaxis de los
enlaces se puede colocar en cualquier parte de <IMG SRC="archivo" VSPACE=40
nuestra página un enlace a un archivo que puede HSPACE=30>
ser una imagen, un sonido o un video.

Sintaxis para incluir imágenes en documentos
HTML:

<IMG SRC="nombre del archivo de la imagen"
ALT="descripción de la imagen>

Si la imágen se encuentra en el subdirectorio
imagenes entonces debemos colocar <IMG
SRC="./imagenes/nombre del archivo"> este es un ejemplo en donde aparece la imagen y el
texto alrededor de la misma con separación de
La descripción de la imágen se observará
cuando coloques el puntero del ratón sobre la
acuerdo a los atributos VSPACE y HSPACE. Su
imágen en la página HTML sintáxis sería: IMG SRC="imágenes/image002.gif"
alt="computadora" width="194" height="143"
El formato PNG tiene un tamaño menor al GIF hspace="40" vspace="30
y la calidad es superior al JPEG

El atributo ALIGN permite alinear la imagen
respecto al texto en función de los siguientes
valores: LEFT, RIGHT, TOP, TEXTTOP,
MIDDLE, ABSMIDDLE, BASELINE,
BOTTOM Y ABSBOTTOM

Veamos un ejemplo:

<IMG SRC="./imagenes/nombre archivo"
ALIGN="bottom">

Para poner un marco o borde a una imagen se
deberá utilizar el atributo BORDER y un
número. Así:

Internet y Páginas Web
Otro aspecto llamativo es la posibilidad de asignar un co
fondo a la tabla o a una celda determinada o la combinac
(5) de varias.

TABLAS El atributo es BGCOLOR Si es para la tabla escribirem

Las tablas conforman un elemento con el cual se resuelven los <TABLE BORDER BGCOLOR=green>
temas de las tabulaciones y alineaciones de una manera
sencilla Si es a una determinada celda el atributo BGCOLOR de
estar en la etiqueta que define a dicha celda. Así:

Las tablas están divididas en celdas, que pueden contener <TD BGCOLOR=BLUE>
texto, listas, imágenes, enlaces, formularios, etc. Gracias a
ellas podemos mejorar ampliamente la visualización de SEPARACION ENTRE CELDAS
nuestras páginas
CELLSPACING: Varía la separación entre celdas
Las etiquetas <TABLE> y </TABLE> son las encargadas de
definir el principio y el final de una tabla respectivamente. CELLSPADDING: Varía la separación entre el bord
la celda y el contenido de la misma. Ambos deben po
A continuación deberemos definir las celdas y las filas de la en la etiqueta <TABLE>
tabla:

La etiqueta <TD> y </TD> para inicio y final de cada una de
las celdas y <TR> y </TR> para el inicio y final de cada fila.

Tambien podemos utilizar las etiquetas <TH> y </TH> para
definir el inicio y el final de una celda de cabecera
Para reproducir Audio podemos emplear la siguiente
codificación:
La etiqueta <CAPTION> se utiliza para poner un título a la
tabla. El título puede estar situado arriba o abajo de la tabla
<BGSOUND SRC="musica.mid" LOOP=INFINITE
según se determine mediante el atributo ALIGN. Un valor
de top sitúa el título en la parte superior de la tabla y un valor
La etiqueta LOOP reproduce el archivo en un bucle
de bottom en la inferior
cerrado
Veamos un ejemplo:

<HTML> SIGUIENTE>
<HEAD>
<TITLE>tABLA CON BORDES</TITLE>
<BODY>
<TABLE BORDER=5>
<CAPTION ALIGN=BOTTOM> HORARIO DEL GRADO DIEZ
COMPUTACION</CAPTION>
<TR>
<TH>Lunes</TH><TH>Martes</TH><TH>Miércoles</TH>
<TH>Jueves</TH><TH>Viernes</TH>
</TR>
<TR>
<TD>FISICA</TD><TD>QUIMICA</TD><TD>INGLES</TD>
<TD>MANTENIMIENTO</TD><TD>UTILITARIOS</TD>
</TR>
</TABLE>
</BODY>
</HTML>

LOS FRAMES Esta etiqueta puede tener los siguientes atributos: SRC
atributo SRC toma como valor el URL del documento
Un Frame es un marco que permite dividir las debe mostrar en esa ventana en particular. Si no se inc
páginas HTML en varias ventanas con barras de ventana queda vacia
desplazamiento y características independientes, según las
necesidades. De esta manera podemos visualizar un menú en la
parte izquierda, por ejemplo, y su desarrollo, mediante enlaces, NAME="nombre ventana" Se emplea para dar un nom
mirarlo en otra ventana en la parte derecha. (Como en en la una ventana, de manera que pueda ser el destino de cu
página en donde ahora se encuentra) enlace.
MARGINWIDTH="valor" Para precisar un número d
<FRAMESET></FRAMESET> Reemplaza a las entre los bordes izquierdo y derecho de la ventana.
etiquetas<BODY>y</BODY> son las que permiten dividir la MARGINHEIGHT="valor" Como en el anterior pero
pantalla en ventanas ya sean verticales u horizontales a los bordes superior e inferior
ROWS Se encarga de definir el número de divisiones SCROLLING="yes|no|auto" Para mostrar o no barras
horizontales a efectuar. desplazamiento.
NORESIZE Indica al navegador que la ventana no pu
COLS Permite definir el número de divisiones verticales. redimensionada por el usuario.
Los valores para ambos pueden ser absolutos en: píxeles,
porcentajes o valores de escala relativos: Ejemplo:

n Si se introduce un valor n determinado, se estará indicando la <HTML>
<HEAD>
altura o ancho de la ventana en píxeles. <TITLE>
Ejemplo de varios frames
</TITLE>
</HEAD>
% Este valor indica que la altura o ancho de la ventana es un <FRAMESET ROW="100%"COLS="33%,33%,*" BORDER=3
<FRAMESET ROWS="20%,20%,*">
porcentaje relativo al tamaño de la ventana que la contiene. <FRAME NAME="frame1" SRC="eje1.html" SCROLLING="Y
<FRAME NAME="frame2" src=eje1.html SCROLLING="no"
* Un asterísco indica que debe asignarse a la ventana todo el MARGINWIDTH=9 NORESIZE>
espacio disponible. Suponiendo que haya varias ventanas, el <FRAME NAME="frame3" SRC="eje1.html" SCROLLING="A
espacio libre se divide entre ellas y, sin hay un valor delante del</FRAMESET>
asterisco, la ventana que lo tanga asignado tomará más espacio
<FRAMESET ROWS="50%,*" BORDER=5>
relativo, por ejemplo "2*,*" daría 2/3 del espacio a la primera <FRAME NAME="frame4" SRC="eje2.html" SCROLLING="y
ventana y un tercio a la segunda. <FRAME NAME="frame5" SRC="eje2.html" SCROLLING="N
</FRAMESET>
Los atributos de esta etiqueta son:
Ejemplo:<FRAMESETCOLS="100%" <FRAMESET ROWS="33%,33%,*" BORDER=1>
ROWS="25%,25%,25%*"> <FRAME NAME="frame6" SRC="eje1.html" SCROLLING="A
MARGINHEIGHT=5>
<FRAME NAME="frame7" SRC="eje1.html" SCROLLING="Y
Si queremos añadir ventanas dentro de otras ventanas, MARGINWIDTH=20>
deberemos añadir tantos FRAMSET como sean necesarios. <FRAME NAME="frame9" SRC="eje1.html">

Una vez dividida la pantalla en distintas ventanas deberemos </FRAMESET>
hacer algo para que en esos espacios aparezca la información.
</FRAMESET>
</HEAD>
La etiqueta <FRAME> es la encargada de llamar al
documentoHTML que se debe cargar en una ventana. </HTML>

Internet y Páginas Web
radio: Círculo vacío de selección. Sólo se permite una
(7) entre varias. Sus atributos NAME y VALUE. El
atributoCHECKEDPermite seleccionar una opción po
TRABAJANDO CON FORMULARIOS defecto.

reset: Borra todos los datos introducidos en el formula
Necesita el atributo VALUE
Los Formularios son elementos que contienen diferentes
objetos que nos permiten tener interactividad real entre las submit: Envía la información del formulario. Necesita
páginas Web y los usuarios. atributoVALUE
Así por ejemplo podemos diseñar un formulario para que los
internautas puedan escribir sus datos personales y recibir una
determinada información.
Ejemplo (Vea el código fuente)
Se puede también pensar en un listado de productos en los que
el usuario escribe el nombre del producto y recibe a
Campos de selección
continuación el precio del mismo.
Se los realiza mediante las
etiquetas: <SELECT>..</SELECT>Estas permiten al
Para tener en cuenta
seleccionar una opción de un conjunto de elementos m
Los formularios pueden introducirse en cualquier parte del
como una lista desplegable, donde cada una de las opc
documento, es decir, en tablas, dentro de un texto
introduce mediante el elementoOPTION
preformateado, etc.
Las etiquetas que definen el inicio de un formulario
Con el atributo:SELECT podemos visualizar una dete
son:<FORM></FORM>
opción de la lista. Los atributos que reconoce son:
Las etiquetas que definen los campos de entrada como: botones,
MULTIPLE Este atributo permite seleccionar más op
cajas de texto, casillas de verificación, etc.: <INPUT>
pulsando la tecla CTRL junto con la opción, por defec
Las que definen los campos de selección: <SELECT>
selecciona una. Requieren los atributos NAME y SIZ
Y las áreas de texto: <TEXTAREA>
indican el nombre de la lista de selección y el número
visibles
Atributos de la etiqueta <FORM>
Areas de texto
ACCION: Atributo que determina la acción que debe
Se los realiza mediante las
realizarse al pulsar el botón de ejecución
etiquetas: <TEXTAREA>..</TEXTAREA>Estas perm
representar un campo de texto de múltiples líneas. Los
METHOD:Indica el método de transferencia de la información
que reconoce son:
introducida en el formulario. Pueden emplearse los
COLS Que determina el número de caracteres de anch
métodosGETy POST
laventana de texto
El método GET envía la información a través de una variable
NAME Nombre del campo
llamada QUERY_STRING. Por el contrario, el
ROWS Número de líneas visibles del área de texto en
métodoPOSTutiliza dos variables: CONTENT_LENGTH, que
caracteres
contiene la longitud de datos enviados, y CONTENT_TYPE,
WRAP Establece los saltos de línea según los siguien
que son los datos propiamente.
valores
of No se producen saltos de línea automáticos y el tex
ENCTYPE: Atributo que determina la forma de codificación
enviado exactamente como fue escrito
empleada para el transporte del contenido del formulario.
virtual Se usa el salto de línea automático para mostra

Campos de entrada en pantalla
Se los realiza mediante la etiqueta: <INPUT> Seguida del physicall Utiliza saltos de línea automático y envía el
atributo:TYPE deidéntica manera.
A continuación una de las siguientes entradas:

checkbox: Cuadro vacío de selección. Permite selecciones
múltiples. Requieren los atributos NAME y VALUE que Ejemplo (Vea el código fuente)
indican el nombre del tipo y el valor del campo

hidden: Se utiliza para pasar los datos adquiridos en un
formulario a otro sin que se visualice nada en la pantalla.
Necesita también el empleo de los atributos:NAME y VALUE

text: Para la entrada de texto. Emplea los
atributos:MAXLENGTHDelimita el número máximo de
caracteres,SIZECantidad de espacios reservados para introducir
el texto yVALUEPermite poner un valor inicial para la casilla

password: Introducción de texto visualizándose un asterisco
para cada caracter

HTML-colores-fondo-paginas-web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (20)

Similar a HTML-colores-fondo-paginas-web

Similar a HTML-colores-fondo-paginas-web (20)

HTML-colores-fondo-paginas-web