Curso html1

Ministerio de Educacin Superior Misin Sucre
Estructura Bsica Formato de Texto Formato Estructural Imgenes Hipervnculos Varios Caracteres Especiales Colores Tablas Formularios Marcos
ESTRUCTURA BSICA <HTML> <HEAD> <TITLE> Primera Pgina Misin Sucre </TITLE> </HEAD> <BODY> HEAD=ENCABEZADO Hola Misin Sucre! TITLE=TITULO </BODY> BODY=CUERPO </HTML>
Curso: Diseo de Pginas Web con HTML Realizado por: Hctor Molina
Atrs
Men
Adelante

FORMATO DE TEXTO
Texto en negrita: <B>Ministerio de Educacin Superior</B> Texto en itlica: <I>Misin Sucre</I> Texto subrayado: <U>Ingeniera de Sistemas</U> Texto de espaciado uniforme: <TT>Introduccin a la Programacin</TT>
B=BOLD=NEGRITA I=ITALIC=CURSIVA U=SUBRAYADO TT=TEXTO UNIFORME FONT=FUENTE SIZE=TAMAO
Cambiar el tamao de la fuente (tamaos: de 1 al 7) <FONT SIZE=1>Ministerio de Educacin Superior</FONT> <FONT SIZE=2>Misin Sucre</FONT> <FONT SIZE=3>Ingeniera de Sistemas</FONT> <FONT SIZE=4>Introduccin a la Programacin</FONT> <FONT SIZE=5>Objetivo: HTML</FONT> <FONT SIZE=6>Instructor</FONT> <FONT SIZE=7>Hctor Molina</FONT>
Atrs
Men
Adelante

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">Misin Sucre</FONT> <FONT FACE="ARIAL, TAHOMA, VERDANA>Misin Sucr</FONT> Cambiar el color <FONT COLOR="#FF0066">Misin Sucre</FONT> <FONT COLOR="#6600FF" FACE="ARIAL" SIZE="7">XYZ</FONT> Prrafos (de 1 al 6): <H1>Ministerio de Educacin Superior</H1> <H2>Misin Sucre</H2> <H3>Ingeniera de Sistemas</H3> <H4>Introduccin a la Programacin </H4> <H5>Objetivo: HTML</H5> <H6>Hctor Molina</H6>
Atrs
Men
Adelante

FORMATO DE TEXTO
Alineamientos de prrafos: (ALIGN=LEFT, RIGHT, CENTER) <H1 ALIGN=LEFT">Ministerio de Educacin Superior</H1> <H1 ALIGN=CENTER">Misin Sucre</H1> <H1 ALIGN=RIGHT">Ingeniera de Sistemas</H1> Cambiar el color de textos, hipervnculos, etc. de la pgina completa <BODY BGCOLOR="#0000FF" TEXT="#FF0000" LINK= "#FFFF00" VLINK="#CCFFCC" ALINK="#66FF66"> El texto es negro Los hipervnculos son azules El hipervnculo activo es rojo Los hipervnculos visitados son morados <BODY BGCOLOR="#0000FF" TEXT="#FF0000" LINK="#00FFFF" VLINK="#FFFF00" ALINK="#FF00FF"> Misin Sucre </BODY>
Atrs
Men
Adelante

FORMATO ESTRUCTURAL
Retornos de carro o Salto de lnea <BR> Retornos de carro o salto de lneas mltiples: <BR> <BR> <BR> Prrafo <P>Misin Sucre</P> Prrafo + Alineacin <BODY> <P ALIGN="LEFT"> Ministerio de Educacin Superior </P> <P ALIGN="CENTER"> Misin Sucre </P> <P ALIGN="RIGHT"> Ingeniera de Sistemas </P> <P ALIGN="LEFT"> Ministerio de Educacin Superior <BR> Misin Sucre <BR> Ingeniera de Sistemas </P> <P ALIGN="CENTER"> Ministerio de Educacin Superior <BR> Misin Sucre <BR> Ingeniera de Sistemas </P> <P ALIGN="RIGHT"> Ministerio de Educacin Superior <BR> Misin Sucre <BR> Ingeniera de Sistemas </P> </BODY>
Atrs
Men
Adelante

FORMATO ESTRUCTURAL
Centrado: <CENTER>Misin Sucre</CENTER> Lnea horizontal (por defecto): <HR> Con parmetros: Tamao de lnea <HR WIDTH=30%> <HR WIDTH=60%> <HR WIDTH=90%> <HR WIDTH=10> <HR WIDTH=50> <HR WIDTH=100> Orientacin de lnea <HR WIDTH=50% ALIGN="LEFT"> <HR WIDTH=50% ALIGN="RIGHT"> <HR WIDTH=50% ALIGN="CENTER">
Atrs
Men
Adelante

FORMATO ESTRUCTURAL
Grosor de lnea <HR WIDTH=40% SIZE=1> <HR WIDTH=40% SIZE=5> <HR WIDTH=40% SIZE=10> <HR WIDTH=40% SIZE=15> Lnea Slida <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 parmetros <HR ALIGN=LEFT" WIDTH=80% SIZE=2 NOSHADE>
Atrs
Men
Adelante

FORMATO ESTRUCTURAL
Ajustar mrgenes al tamao de la ventana con BLOCKQUOTE: <BLOCKQUOTE>Misin Sucre escribir un texto largo de verdad trata de escribir todo lo que puedas y prueba con ventanas de diferentes tamaos 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>
Atrs
Men
Adelante

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>
Atrs
Men
Adelante

FORMATO ESTRUCTURAL
Lista definida: <DL> <DT><B>Ttulo</B> <DD>Definicin </DL>
<BODY> <DL><DT><B>Artculo 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 democrtico de la voluntad popular, la construccin de una sociedad justa y amante de la paz, la promocin de la prosperidad y bienestar del pueblo y la garanta del cumplimiento de los principios, derechos y deberes reconocidos y consagrados en esta constitucin. <BR> La educacin y el trabajo son los procesos fundamentales para alcanzar dichos fines. </DL> </BODY>
Atrs
Men
Adelante

FORMATO ESTRUCTURAL
Preformato: <BODY> <PRE> Ministerio de Educacin Superior Misin Sucre Ingeniera de Sistemas Introduccin a la Programacin Objetivo: HTML Instructor: Hctor Molina </PRE> </BODY>
Atrs
Men
Adelante

Estructura Bsica Formato de Texto Formato Estructura Imgenes Hipervnculos Varios Caracteres Especiales Colores Tablas Formularios Marcos
IMGENES
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 imgenes de fondo fija con movimiento de texto:

<BODY BACKGROUND="imagen.gif" BGPROPERTIES=FIXED>
Como guardar una imagen desde una pgina web. Clic botn derecho del ratn y guardar imagen como Usando imgenes en miniatura Thumbnails y con hipervnculos grandes a imgenes mas
Atrs
Men
Adelante

IMGENES
Construir lneas 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>
Atrs
Men
Adelante

HIPERVINCULOS
Aadir un hipervnculo relativo: <A HREF="pagina.html">Mi pgina</A> Aadir un hipervnculo absoluto: <A HREF="http://www.iuteb.edu.ve/">Ir al IUTEB</A> Hipervnculo con un seccin especfica de una pgina: Marcar con NAME el lugar donde se har el hipervnculo <A NAME=Misin">Misin</A> Luego crear el hipervnculo <A HREF="pagina.html#Misin">Acerca de la Misin Sucre</A> Aadir un hipervnculo a una direccin de correo: <A HREF="mailto:hmoliut@gmail.com">Email Hctor Molina</A>
Atrs
Men
Adelante

HIPERVINCULOS
Hacer que una imagen sea un hipervnculo: <A HREF="pagina.html"> <IMG SRC="imagen.gif" WIDTH=100 HEIGHT=150> </A> Librarse del borde azul en los hipervnculos de imgenes. <IMG SRC="imagen.gif" WIDTH=100 HEIGHT=150 ALT="Imagen" BORDER=0> Hacer un hipervnculo a un archivo para que sea descargado <A HREF=documento.doc">Descargar mi documento</A>
Atrs
Men
Adelante

VARIOS
Sube tus pginas 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"> Especificar imagen de fondo (.gif o .jpg o .pnp o .bmp): <BODY BACKGROUND=imagen.bmp">
Atrs
Men
Adelante

VARIOS
Fijar la imagen de fondo (especfico 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>
Atrs
Men
Adelante

VARIOS
Algo ms 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>
Atrs
Men
Adelante

VARIOS
Resoluciones de pantallas Por lo general 640 pxeles por 480 pxeles. Otros usan 800x600. y otros 1024x768. Y existen mas resoluciones. Comentarios <! Todo lo que se escriba entre estos signos son comentarios --> Ver el cdigo de cualquier documento HTML y averigurar cmo lo han hecho (Ver - Cdigo Fuente) Archivos y sus extensiones x.txt es un archivo de texto; x.gif, y.jpg y z.bmp son archivos de imgenes; x.mpg y z.avi son archivos de pelculas; x.doc y z.wri son documentos con formato especfico de texto; z.exe es una aplicacin o un programa; y x.html o y.htm son archivos HTML
Atrs
Men
Adelante

CARACTERES ESPECIALES
Cdigo de espacio en blanco <BODY> Misin Sucre Misin Sucre Misin Sucre </BODY> Seis caracteres especiales ms espacio en blanco < < signo menor que > > signo mayor que & & smbolo y " " comillas guin
Atrs
Men
Adelante

Atrs
Men
Adelante

Atrs
Men
Adelante

FORMATEADO BSICO DE TEXTO
Atrs
Men
Adelante

COLORES
Acerca de los 216 colores En la vida normal, utilizamos un sistema decimal de base 10, conformado por los nmeros... Del 0-1-2-3-4-5-6-7-8-9 En la tecnologa de los computadores, ciertas cosas son ms fciles utilizando un sistema hexadecimal o de base 16, conformado por nmeros y letras... 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F Como no existen smbolos especiales para representar el 10, 11, 12 etc., se usan letras para representar esos valores. Abajo aparecen los dos sistemas de numeracin hasta el 50... Podemos seguir, pero la idea es hacer una representacin, 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 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
Atrs
Men
Adelante

COLORES
Sistema 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 hexadecimal
1C 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 "cdigo hexa" o de "nmeros hexadecimales" o si ves cdigos de color crpticos como 09EC0A, CCFFCC, 00AACC, etc., es de sto de lo que estn hablando y de ah viene. Llevando las cosas un poco ms lejos, el computador entiende solo tres colores rojo, verde y azul...
Atrs
Men
Adelante

COLORES
ROJO - 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 saturacin 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.
Atrs
Men
Adelante

COLORES
Si reemplazamos los nmeros decimales con sus equivalentes hexadecimales empezamos a ver algo parecido a esos "cdigos 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 cdigos de color! ROJO (R)= VERDE (G) AZUL (B) NEGRO BLANCO FF0000 = = = = 00FF00 0000FF 000000 FFFFFF
Atrs
Men
Adelante

COLORES
Ahora, cmo se las arregla el navegador para escoger los colores a utilizar? En vez de utilizar 256 valores para cada uno de los tres colores, slo 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, vers 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 ms parecido de sus propios colores. A veces esto no es bueno. He visto pginas en las que el texto era casi ilegible.
Atrs
Men
Adelante

TABLAS
<TABLE BORDER=2> <TR> <TD> Introduccin a la Programacin </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>
Atrs
Men
Adelante

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>
Atrs
Men
Adelante

FORMULARIOS
TEXTO <INPUT TYPE="TEXT" NAME="NOMBRE" SIZE=12 MAXLENGTH=10> LOGIN CONTRASEA <INPUT TYPE="PASSWORD" NAME="CONTRASEA" 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 CONFIRMACIN 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>
Atrs
Men
Adelante

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>
Atrs
Men
Adelante

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>
Atrs
Men
Adelante

FORMULARIOS
ACERCA DEL PROCESAMIENTO CGI
ACTION="/cgi-bin/mail.pl" <SCRIPT language="JavaScript"><!-function FormRedirect(){ setTimeout('this.document.location.href = "pgina.html"',5000);} //--> </SCRIPT>
Atrs
Men
Adelante

MARCOS
Atrs
Men
Adelante

Curso html1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Curso html1

Transféré par

Droits d'auteur :

Formats disponibles

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Insertar una imagen de fondo (gif o jpg o .pnp o .bmp):

Dejar imgenes de fondo fija con movimiento de texto:

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

FORMATEADO BSICO DE TEXTO

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

ENVIAR USANDO UNA IMAGEN

PRUEBA DE FORMULARIO DE CORREO

Ministerio de Educacin Superior Misin Sucre

Ministerio de Educacin Superior Misin Sucre

Vous aimerez peut-être aussi