Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
ESTRUCTURA BÁSICA
Formato Estructural
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
<HTML>
<HEAD>
<TITLE>
Primera Página Misión Sucre
</TITLE>
</HEAD>
<BODY>
HEAD=ENCABEZADO
¡Hola Misión Sucre!
TITLE=TITULO
</BODY>
BODY=CUERPO
</HTML>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
FORMATO DE TEXTO
Formato de Texto
Formato Estructural
Imágenes
Texto en negrita: <B>Ministerio de Educación Superior</B>
B=BOLD=NEGRITA
Texto en itálica: <I>Misión Sucre</I>
I=ITALIC=CURSIVA
Hipervínculos
Texto subrayado: <U>Ingeniería de Sistemas</U>
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
U=SUBRAYADO
TT=TEXTO UNIFORME
Texto de espaciado uniforme:
<TT>Introducción a la Programación</TT>
FONT=FUENTE
SIZE=TAMAÑO
Cambiar el tamaño de la fuente (tamaños: de 1 al 7)
<FONT SIZE=1>Ministerio de Educación Superior</FONT>
<FONT SIZE=2>Misión Sucre</FONT>
<FONT SIZE=3>Ingeniería de Sistemas</FONT>
<FONT SIZE=4>Introducción a la Programación</FONT>
<FONT SIZE=5>Objetivo: HTML</FONT>
<FONT SIZE=6>Instructor</FONT>
<FONT SIZE=7>Héctor Molina</FONT>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
FORMATO DE TEXTO
Formato Estructural
Cambiar el nombre de la fuente (FACE)
Font_Name=ARIAL, IMPACT, TAHOMA, VERDANA, GEORGIA,
TIME NEW ROMAN, ARIAL BLACK, COMIC SANS MS,
COURIER NEW, x, …
<FONT FACE=“ARIAL">Misión Sucre</FONT>
<FONT FACE="ARIAL, TAHOMA, VERDANA“>Misión Sucr</FONT>
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
Cambiar el color
<FONT COLOR="#FF0066">Misión Sucre</FONT>
<FONT COLOR="#6600FF" FACE="ARIAL" SIZE="7">XYZ</FONT>
Párrafos (de 1 al 6):
<H1>Ministerio de Educación Superior</H1>
<H2>Misión Sucre</H2>
<H3>Ingeniería de Sistemas</H3>
<H4>Introducción a la Programación </H4>
<H5>Objetivo: HTML</H5>
<H6>Héctor Molina</H6>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
FORMATO DE TEXTO
Formato Estructural
Alineamientos de párrafos:
(ALIGN=LEFT, RIGHT, CENTER)
<H1 ALIGN=“LEFT">Ministerio de Educación Superior</H1>
<H1 ALIGN=“CENTER">Misión Sucre</H1>
<H1 ALIGN=“RIGHT">Ingeniería de Sistemas</H1>
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
Cambiar el color de textos, hipervínculos, etc. de la página
completa
<BODY BGCOLOR="#0000FF" TEXT="#FF0000" LINK= "#FFFF00"
VLINK="#CCFFCC" ALINK="#66FF66">
El texto es negro
Los hipervínculos son azules
El hipervínculo activo es rojo
Los hipervínculos visitados son morados
<BODY BGCOLOR="#0000FF" TEXT="#FF0000" LINK="#00FFFF"
VLINK="#FFFF00" ALINK="#FF00FF"> Misión Sucre </BODY>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructural
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
FORMATO ESTRUCTURAL
Retornos de carro o Salto de línea <BR>
Retornos de carro o salto de líneas múltiples: <BR> <BR> <BR>
Párrafo <P>Misión Sucre</P>
Párrafo + Alineación
<BODY>
<P ALIGN="LEFT"> Ministerio de Educación Superior </P>
<P ALIGN="CENTER"> Misión Sucre </P>
<P ALIGN="RIGHT"> Ingeniería de Sistemas </P>
<P ALIGN="LEFT"> Ministerio de Educación Superior
<BR> Misión Sucre <BR> Ingeniería de Sistemas </P>
<P ALIGN="CENTER"> Ministerio de Educación Superior
<BR> Misión Sucre <BR> Ingeniería de Sistemas </P>
<P ALIGN="RIGHT"> Ministerio de Educación Superior
<BR> Misión Sucre <BR> Ingeniería de Sistemas </P>
</BODY>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructural
FORMATO ESTRUCTURAL
Centrado: <CENTER>Misión Sucre</CENTER>
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Línea horizontal (por defecto): <HR>
Con parámetros:
Tamaño de línea
<HR WIDTH=30%>
<HR WIDTH=60%>
<HR WIDTH=90%>
<HR WIDTH=10>
<HR WIDTH=50>
<HR WIDTH=100>
Formularios
Marcos
Orientación de línea
<HR WIDTH=50% ALIGN="LEFT">
<HR WIDTH=50% ALIGN="RIGHT">
<HR WIDTH=50% ALIGN="CENTER">
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructural
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
FORMATO ESTRUCTURAL
Grosor de línea
<HR WIDTH=40% SIZE=1>
<HR WIDTH=40% SIZE=5>
<HR WIDTH=40% SIZE=10>
<HR WIDTH=40% SIZE=15>
Línea Sólida
<HR WIDTH=50% SIZE=1 NOSHADE>
<HR WIDTH=50% SIZE=5 NOSHADE>
<HR WIDTH=50% SIZE=10 NOSHADE>
<HR WIDTH=50% SIZE=15 NOSHADE>
Formularios
Marcos
Con todos los parámetros
<HR ALIGN=“LEFT" WIDTH=80% SIZE=2 NOSHADE>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructural
Imágenes
FORMATO ESTRUCTURAL
Ajustar márgenes al tamaño de la ventana con BLOCKQUOTE:
<BLOCKQUOTE>Misión Sucre escribir un texto largo de verdad
trata de escribir todo lo que puedas y prueba con ventanas de
diferentes tamaños y veras como se ajusta</BLOCKQUOTE>
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
Listas sin numerar (<UL>):
<BODY>
Lo que quiero para mi Vida
<UL>
<LI>Ser Feliz
<LI>Estudiar
<LI>Graduarme
<LI>Casarme
<LI>Un buen empleo
<LI>Una buena casa
<LI>Muchos hijos
</UL>
</BODY>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructural
FORMATO ESTRUCTURAL
Listas numeradas (<OL>):
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
<BODY>
Lo que quiero para mi Vida
<OL>
<LI>Ser Feliz
<LI>Estudiar
<LI>Graduarme
<LI>Casarme
<LI>Un buen empleo
<LI>Una buena casa
<LI>Muchos hijos
</OL>
</BODY>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructural
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
FORMATO ESTRUCTURAL
Lista definida:
<DL> <DT><B>Título</B> <DD>Definición </DL>
<BODY>
<DL><DT><B>Artículo 3:</B> <DD>El estado tiene como
fines esenciales la defensa y el desarrollo de la persona y
el respeto a su dignidad, el ejercicio democrático de la
voluntad popular, la construcción de una sociedad justa y
amante de la paz, la promoción de la prosperidad y
bienestar del pueblo y la garantía del cumplimiento de los
principios, derechos y deberes reconocidos y consagrados
en esta constitución. <BR> La educación y el trabajo son
los procesos fundamentales para alcanzar dichos fines.
</DL>
</BODY>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
FORMATO ESTRUCTURAL
Formato de Texto
Formato Estructural
Imágenes
Hipervínculos
Preformato:
<BODY>
<PRE>
Ministerio de Educación Superior
Misión Sucre
Ingeniería de Sistemas
Introducción a la Programación
Objetivo: HTML
Instructor: Héctor Molina
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
</PRE>
</BODY>
Marcos
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
IMÁGENES
Insertar una imagen (.gif o .jpg o .pnp o .bmp):
<IMG SRC="imagen.jpg" WIDTH=100 HEIGHT=150 ALT="Imagen">
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Insertar una imagen de fondo (gif o jpg o .pnp o .bmp):
<BODY BACKGROUND="imagen.gif">
Dejar imágenes de fondo fija con movimiento de texto:
<BODY BACKGROUND="imagen.gif" BGPROPERTIES=FIXED>
Como guardar una imagen desde una página web.
Clic botón derecho del ratón y guardar imagen como…
Marcos
Usando imágenes en miniatura
Thumbnails y con hipervínculos
grandes…
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
a
imágenes
Atrás
Menú
mas
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
IMÁGENES
Construir líneas a partir de un punto de 1x1.
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
<BODY>
<P ALIGN="CENTER">
<IMG SRC="punto.gif" WIDTH=500 HEIGHT=1>
<P ALIGN="CENTER">
<IMG SRC="punto.gif" WIDTH=500 HEIGHT=2>
<P ALIGN="CENTER">
<IMG SRC="punto.gif" WIDTH=500 HEIGHT=8>
<P ALIGN="CENTER">
<IMG SRC=“puntor.gif" WIDTH=2 HEIGHT=200>
</BODY>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
HIPERVINCULOS
Añadir un hipervínculo relativo:
<A HREF="pagina.html">Mi página</A>
Añadir un hipervínculo absoluto:
<A HREF="http://www.iuteb.edu.ve/">Ir al IUTEB</A>
Hipervínculo con un sección específica de una página:
Marcar con NAME el lugar donde se hará el hipervínculo
<A NAME=“Misión">Misión</A>
Luego crear el hipervínculo
<A HREF="pagina.html#Misión">Acerca de la Misión Sucre</A>
Añadir un hipervínculo a una dirección de correo:
<A HREF="mailto:[email protected]">Email Héctor Molina</A>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
HIPERVINCULOS
Hacer que una imagen sea un hipervínculo:
<A HREF="pagina.html">
<IMG SRC="imagen.gif"
WIDTH=100
HEIGHT=150>
</A>
Librarse del borde azul en los hipervínculos de imágenes.
<IMG SRC="imagen.gif"
WIDTH=100
HEIGHT=150
ALT="Imagen"
BORDER=0>
Hacer un hipervínculo a un archivo para que sea descargado
<A HREF=“documento.doc">Descargar mi documento</A>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
VARIOS
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Sube tus páginas a la Web
FTP = File Transfer Protocol = Protocolo de Transferencia de
Archivos
Especificar color de fondo:
<BODY BGCOLOR="#FF0000">
<BODY BGCOLOR="#0000FF“
BACKGROUND=“imagen.jpg“
TEXT="#FFFF00“
LINK="#00FFFF“
VLINK="#FF00FF“
ALINK="#00FF00">
Marcos
Especificar imagen de fondo (.gif o .jpg o .pnp o .bmp):
<BODY BACKGROUND=“imagen.bmp">
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
VARIOS
Formato Estructura
Imágenes
Fijar la imagen de fondo (específico de IE):
<BODY BACKGROUND=“img_fondo.gif" BGPROPERTIES=FIXED>
Hipervínculos
Varios
Caracteres
Especiales
Colores
Sentencias combinadas - Solapamiento versus Anidamiento
Sentencias solapadas.... mal hecho
<ESTO>
<AQUELLO>
</ESTO>
</AQUELLO>
Tablas
Formularios
Marcos
Sentencias anidadas.... bien hecho
<ESTO>
<AQUELLO>
</AQUELLO>
</ESTO>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
VARIOS
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
Algo más acerca del Solapamiento y el Anidamiento
<TAG3>
<TAG2>
<TAG1>
Malo
¡Hola!
<TAG3>
</TAG1>
<TAG2>
</TAG2>
<TAG1>
</TAG3>
¡Hola!
</TAG3>
No importa el orden
</TAG1>
<TAG2>
</TAG2>
<TAG1>
<TAG3>
¡Hola!
</TAG3>
</TAG1>
</TAG2>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
VARIOS
Resoluciones de pantallas
Por lo general 640 píxeles por 480 píxeles.
Otros usan 800x600.
y otros 1024x768.
Y existen mas resoluciones.
Comentarios
<!– Todo lo que se escriba entre estos signos son comentarios -->
Ver el código de cualquier documento HTML y averigurar cómo lo
han hecho (Ver - Código Fuente)
Archivos y sus extensiones
x.txt es un archivo de texto;
x.gif, y.jpg y z.bmp son archivos de imágenes;
x.mpg y z.avi son archivos de películas;
x.doc y z.wri son documentos con formato específico de texto;
z.exe es una aplicación o un programa;
y x.html o y.htm son archivos HTML
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
CARACTERES ESPECIALES
Código de espacio en blanco &nbsp;
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
<BODY>
Misión Sucre &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; Misión Sucre &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; Misión Sucre
</BODY>
Seis caracteres especiales más
&nbsp;
espacio en blanco
&lt;
<
signo menor que
&gt;
>
signo mayor que
&amp; &
símbolo y
&quot; "
comillas
&shy;
guión
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
f
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
FORMATEADO BÁSICO DE TEXTO
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
COLORES
Formato Estructura
Acerca de los 216 colores
En la vida normal, utilizamos un sistema decimal de base 10,
conformado por los números... Del 0-1-2-3-4-5-6-7-8-9
En la tecnología de los computadores, ciertas cosas son más
fáciles utilizando un sistema hexadecimal o de base 16,
conformado por números y letras... 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F
Como no existen símbolos especiales para representar el 10, 11,
12 etc., se usan letras para representar esos valores. Abajo
aparecen los dos sistemas de numeración hasta el 50... Podemos
seguir, pero la idea es hacer una representación, ok…
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Sistema decimal
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Marcos
Sistema hexadecimal
0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 16 17 18 19 1A 1B
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
COLORES
Formato Estructura
Sistema decimal
Imágenes
Hipervínculos
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
Sistema hexadecimal
1C 1D 1E 1F 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F 30 31 32
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
Espero que hayas notado que cuando termina la F empieza 10 y
luego cuando termina el 1F empieza 20 y así sucesivamente.
Así que cuando alguien habla de "código hexa" o de "números
hexadecimales" o si ves códigos de color crípticos como 09EC0A,
CCFFCC, 00AACC, etc., es de ésto de lo que están hablando y de
ahí viene.
Llevando las cosas un poco más lejos, el computador entiende
solo tres colores rojo, verde y azul...
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
COLORES
Formato de Texto
ROJO - VERDE - AZUL
o
R-G-B
(RED - GREEN - BLUE)
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
Cada uno de ellos puede tener un valor que va desde 0 a 255.
0 indica la ausencia de color, 255 indica saturación de color.
Usando esta escala, conseguimos los siguientes valores...
ROJO (R)
VERDE (G)
AZUL (B)
NEGRO
BLANCO
=
=
=
=
=
255 - 0 - 0
0 - 255 - 0
0 - 0 - 255
0 -0 -0
255 - 255 - 255
Como tenemos 3 colores, cada uno con un valor que puede variar
desde 0 hasta 255 tenemos 16,777,216 combinaciones de color
posibles (256 ³). Es por esto que hablamos de 16.7 millones de
colores.
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
COLORES
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Si reemplazamos los números decimales con sus equivalentes
hexadecimales empezamos a ver algo parecido a esos "códigos
hexadecimales".
ROJO (R)
VERDE (G)
AZUL (B)
NEGRO
BLANCO
=
=
=
=
=
FF - 0 - 0
0 - FF - 0
0 - 0 - FF
0 - 0 - 0
FF - FF - FF
Si utilizamos 00 en vez de 0, 01 en vez de 1, etc., y eliminamos los
guiones (-), ¡entonces nos quedamos con los genuinos códigos de
color!
Formularios
Marcos
ROJO (R)
VERDE (G)
AZUL (B)
NEGRO
BLANCO
=
=
=
=
=
FF0000
00FF00
0000FF
000000
FFFFFF
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
COLORES
Ahora, ¿cómo se las arregla el navegador para escoger los
colores a utilizar? En vez de utilizar 256 valores para cada uno de
los tres colores, sólo utiliza 6. Sus valores son 0, 51, 102, 153, 204
y 255. Si trasladamos éstos a sus equivalentes hexadecimales
tenemos 00, 33, 66, 99, CC y FF. Y como hay seis valores
diferentes para cada uno de los 3 colores, tenemos 216
combinaciones de colores posibles (6 ³).
Si vuelves a la tabla de colores que vistes anteriormente, verás
esas combinaciones de color.
Una última cosa. Si alguien está utilizando una pantalla a 256
colores y tú has elegido un color de fondo que no es uno de los
216, entonces el Navegador elegirá el más parecido de sus
propios colores. A veces esto no es bueno. He visto páginas en
las que el texto era casi ilegible.
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
TABLAS
<TABLE BORDER=2>
<TR>
<TD> Introducción a la Programación </TD>
<TD> Algoritmos </TD>
<TD> HTML </TD>
<TD> PHP </TD>
<TD> MYSQL </TD>
</TR>
<TR>
<TD> Arquitectura del Computador </TD>
<TD> Disp. Entrada </TD>
<TD> Disp. Proceso </TD>
<TD> Disp. Almacenamiento </TD>
<TD> Disp. Salida </TD>
</TR>
</TABLE>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
TABLAS
<TABLE
CELLPADDING=0 o mayor
CELLSPACING=0 o mayor
BORDER=0 o mayor
WIDTH=pixel o porcentaje de valor
HEIGHT=pixel o porcentaje de valor
BGCOLOR="#33CC99" >
(no enteramente soportado)
<TR
BGCOLOR="#00CCFF" >
<TD
ALIGN="left | center | right"
VALIGN="top | middle | bottom"
WIDTH=pixel o porcentaje de valor
BGCOLOR="#CC33FF"
COLSPAN=1 o mayor
ROWSPAN=1 o mayor >
</TD></TR></TABLE>
(no enteramente soportado)
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
FORMULARIOS
TEXTO
<INPUT TYPE="TEXT" NAME="NOMBRE" SIZE=12 MAXLENGTH=10> LOGIN
CONTRASEÑA
<INPUT TYPE="PASSWORD" NAME="CONTRASEÑA" SIZE=12> CLAVE
BOTONES DE RADIO
¿QUIEN ES MI ESPOSA?
<INPUT TYPE="RADIO" NAME="ESP" VALUE="YOLY" CHECKED> YOLY
<INPUT TYPE="RADIO" NAME="ESP" VALUE="OREANNA">OREANNA
<INPUT TYPE="RADIO" NAME="ESP" VALUE="DIANNA">DIANNA
Colores
Tablas
Formularios
Marcos
CUADROS DE CONFIRMACIÓN
¿CUALES SON MIS HIJAS? <BR>
<INPUT TYPE="CHECKBOX" NAME="MAMA" VALUE="SI">YOLY <BR>
<INPUT TYPE="CHECKBOX" NAME="HMAY" VALUE="SI" CHECKED>
OREANNA <BR>
<INPUT TYPE="CHECKBOX" NAME="HMEN" VALUE="SI" CHECKED>
DIANNA <BR>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
FORMULARIOS
ÁREA DE TEXTO
<TEXTAREA NAME="COMENTARIOS" ROWS=6 COLS=50 WRAP="HARD">
</TEXTAREA>
LISTA DESPLEGABLE
<SELECT NAME="FAMILIA">
<OPTION VALUE="HECTOR"> HECTOR
<OPTION VALUE="YOLY"> YOLY
<OPTION VALUE="OREANNA"> OREANNA
<OPTION VALUE="DIANNA" SELECTED> DIANNA
</SELECT>
LISTA ENRROLLABLE
<SELECT NAME="FAMILIA“ SIZE=3>
<OPTION VALUE="HECTOR"> HECTOR
<OPTION VALUE="YOLY"> YOLY
<OPTION VALUE="OREANNA"> OREANNA
<OPTION VALUE="DIANNA" SELECTED> DIANNA
</SELECT>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
FORMULARIOS
OCULTO
<INPUT TYPE="HIDDEN" NAME="PROCEDENCIA" VALUE="GUAYANA">
SUBIDA DE ARCHIVOS
<INPUT TYPE=“FILE” NAME="ARCHIVO">
ENVIAR Y RESTABLECER
<INPUT TYPE="SUBMIT" VALUE="ENVIAR YA">
<INPUT TYPE="RESET" VALUE="LIMPIAR YA">
ENVIAR USANDO UNA IMAGEN
<INPUT TYPE="IMAGE" SRC="SUBMIT.GIF" WIDTH=150 HEIGHT=50
ALT="SUBMIT" BORDER=0>
Formularios
Marcos
PRUEBA DE FORMULARIO DE CORREO
<FORM METHOD=POST ACTION="mailto:" ENCTYPE="text/plain">
<INPUT TYPE="text" NAME="TEST" SIZE="30" VALUE="prueba">
<INPUT TYPE="submit" VALUE="Enviar">
</FORM>
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
FORMULARIOS
ACERCA DEL PROCESAMIENTO CGI
ACTION="/cgi-bin/mail.pl"
<SCRIPT language="JavaScript"><!-function FormRedirect(){
setTimeout('this.document.location.href = "página.html"',5000);}
//-->
</SCRIPT>
Colores
Tablas
Formularios
Marcos
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Ministerio de Educación Superior
Misión Sucre
Estructura Básica
MARCOS
Formato de Texto
Formato Estructura
Imágenes
Hipervínculos
Varios
Caracteres
Especiales
Colores
Tablas
Formularios
Marcos
Curso: Diseño de Páginas Web con HTML
Realizado por: Héctor Molina
Atrás
Menú
Adelante
Descargar

Diapositiva 1