Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado...

35
Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica Formato de Texto Formato Estructural Imágenes Hipervínculos Varios Caracteres Especiales Colores Tablas Formularios Marcos ESTRUCTURA BÁSICA <HTML> <HEAD> <TITLE> Primera Página Misión Sucre </TITLE> </HEAD> <BODY> ¡Hola Misión Sucre! </BODY> </HTML> HEAD=ENCABEZADO TITLE=TITULO BODY=CUERPO

Transcript of Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado...

Page 1: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

ESTRUCTURA BÁSICA

<HTML> <HEAD> <TITLE> Primera Página Misión Sucre </TITLE> </HEAD> <BODY> ¡Hola Misión Sucre! </BODY> </HTML>

HEAD=ENCABEZADO

TITLE=TITULO

BODY=CUERPO

Page 2: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

FORMATO DE TEXTO

Texto en negrita: <B>Ministerio de Educación Superior</B>

Texto en itálica: <I>Misión Sucre</I>

Texto subrayado: <U>Ingeniería de Sistemas</U>

Texto de espaciado uniforme: <TT>Introducción a la Programación</TT>

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>

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

B=BOLD=NEGRITA

I=ITALIC=CURSIVA

U=SUBRAYADO

TT=TEXTO UNIFORME

FONT=FUENTE

SIZE=TAMAÑO

Page 3: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

FORMATO DE TEXTO

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>

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>

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 4: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

FORMATO DE TEXTO

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>

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 negroLos hipervínculos son azulesEl 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>

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 5: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

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>

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 6: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

FORMATO ESTRUCTURAL Centrado: <CENTER>Misión Sucre</CENTER>

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>

Orientación de línea <HR WIDTH=50% ALIGN="LEFT"> <HR WIDTH=50% ALIGN="RIGHT"><HR WIDTH=50% ALIGN="CENTER">

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 7: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

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>

Con todos los parámetros<HR ALIGN=“LEFT" WIDTH=80% SIZE=2 NOSHADE>

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 8: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

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>

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>

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 9: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

FORMATO ESTRUCTURAL Listas numeradas (<OL>):

<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>

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 10: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

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>

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 11: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

FORMATO ESTRUCTURAL

Preformato: <BODY> <PRE>

Ministerio de Educación Superior Misión Sucre

Ingeniería de SistemasIntroducción a la Programación

Objetivo: HTMLInstructor: Héctor Molina

</PRE> </BODY>

Estructura Básica

Formato de Texto

Formato Estructural

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 12: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

IMÁGENES

Insertar una imagen (.gif o .jpg o .pnp o .bmp):<IMG SRC="imagen.jpg" WIDTH=100 HEIGHT=150 ALT="Imagen">

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…

Usando imágenes en miniatura Thumbnails y con hipervínculos a imágenes mas grandes…

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 13: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrás

IMÁGENES

Construir líneas a partir de un punto de 1x1.

<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>

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 14: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina

AdelanteMenúAtrásAtrás

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>

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 15: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

HIPERVINCULOSHacer 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>

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 16: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

VARIOS

Sube tus páginas a la WebFTP = 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">

Especificar imagen de fondo (.gif o .jpg o .pnp o .bmp): <BODY BACKGROUND=“imagen.bmp">

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 17: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

VARIOS

Fijar la imagen de fondo (específico de IE):<BODY BACKGROUND=“img_fondo.gif" BGPROPERTIES=FIXED>

Sentencias combinadas - Solapamiento versus Anidamiento Sentencias solapadas.... mal hecho<ESTO> <AQUELLO></ESTO> </AQUELLO> 

Sentencias anidadas.... bien hecho<ESTO> <AQUELLO> </AQUELLO></ESTO>    

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 18: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

VARIOS

Algo más acerca del Solapamiento y el Anidamiento<TAG3> <TAG2> <TAG1> ¡Hola! </TAG1> </TAG2></TAG3>

No importa el orden<TAG2> <TAG1> <TAG3> ¡Hola! </TAG3> </TAG1></TAG2>

Malo <TAG3> <TAG2> <TAG1> ¡Hola!</TAG3> </TAG1> </TAG2>

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 19: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

VARIOSResoluciones de pantallasPor 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

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 20: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

CARACTERES ESPECIALES

Código de espacio en blanco &nbsp; <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

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 21: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

fEstructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 22: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 23: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

FORMATEADO BÁSICO DE TEXTO Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 24: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

COLORES

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-9En 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-FComo 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…

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

Sistema hexadecimal0 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

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 25: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

COLORESSistema decimal

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 hexadecimal1C 1D 1E 1F 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F 30 31 32

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...

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 26: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

COLORESROJO - VERDE - AZUL

o R-G-B

(RED - GREEN - BLUE)

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)= 255 - 0 - 0VERDE (G) = 0 - 255 - 0AZUL (B) = 0 - 0 - 255NEGRO = 0 - 0 - 0BLANCO = 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.

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 27: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

COLORESSi reemplazamos los números decimales con sus equivalentes hexadecimales empezamos a ver algo parecido a esos "códigos hexadecimales".

ROJO (R)= FF - 0 - 0           VERDE (G) = 0 - FF - 0           AZUL (B) = 0 - 0 - FF           NEGRO = 0 - 0 - 0           BLANCO = 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!

ROJO (R)= FF0000           VERDE (G) = 00FF00           AZUL (B) = 0000FF           NEGRO = 000000           BLANCO = FFFFFF

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 28: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

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.

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 29: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

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>

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 30: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

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 (no enteramente soportado)

BGCOLOR="#33CC99" >

<TR BGCOLOR="#00CCFF" >

<TD ALIGN="left | center | right" VALIGN="top | middle | bottom" WIDTH=pixel o porcentaje de valor (no enteramente soportado)

BGCOLOR="#CC33FF" COLSPAN=1 o mayor ROWSPAN=1 o mayor >

</TD></TR></TABLE>

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 31: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

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

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>

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 32: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

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>

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 33: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

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>

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>

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 34: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

FORMULARIOS

ACERCA DEL PROCESAMIENTO CGIACTION="/cgi-bin/mail.pl"

<SCRIPT language="JavaScript"><!-- function FormRedirect(){ setTimeout('this.document.location.href = "página.html"',5000);} //--></SCRIPT>

Estructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos

Page 35: Ministerio de Educación Superior Misión Sucre Curso: Diseño de Páginas Web con HTML Realizado por: Héctor Molina Adelante Menú Atrás Estructura Básica.

Ministerio de Educación Superior

Misión Sucre

Curso: Diseño de Páginas Web con HTMLRealizado por: Héctor Molina AdelanteAdelanteMenúMenúAtrásAtrás

MARCOSEstructura Básica

Formato de Texto

Formato Estructura

Imágenes

Hipervínculos

Varios

Caracteres Especiales

Colores

Tablas

Formularios

Marcos