MANUAL PRACTICO DE HTML 1 La estructura tiene tres partes cabeza, cuerpo, cierre o fin. <HTML> <HEAD> <TITLE>MI PC</TITLE>... </HEAD> <BODY> Aquí iría el contenido que ve el usuario final </BODY> </HTML> Dentro del html, encontramos etiquetas, que son las instrucciones que sirve para el funcionamiento del diseño de la página web, Ejemplo esta etiquetas están abierta pero se deben de cerrar Abre <html> <title> Cierra. Las etiquetas se cierran con / </head> </ttml> Listado de algunos comando que le ayudaran a mejorar su presentación del diseño de la pagina...descripción......inicio......f I N A L... Principo de Documento..<html>... </html> Encabezado y Título <head><title>...(titulo del archivo)... Color de Fondo de Página <body bgcolor="#rrvvaa"> ---- Imágen de Fondo <body background="xxx.gif (o jpg)"> Imágen Individual <img src="yyy.gif (o jpg)"> ---- Imágen(Ancho*Alto) <img src=".." width="n" height="n"> </title></head> ---- -----
Espacio "libre" <img src=".." hspace="n"> ----- Color del Texto (parcial) <font color="#rrvvaa"> </font> Tamaño del Texto (parcial) <font size="n"> </font> Punto y a Parte <br> ----- Linea(s) en blanco <p> ----- "As you See" <pre> </pre> Linea Embebida <hr="n"> ----- Negrita*Cursiva*Subray <b> * <I> * <U> </b> * </I> * </U> Subíndice * Superíndice <sub> * <sup> </sub> * </sup> Centrado*Izquierda*Derecha <center>*<left>*<right> Enlace "lejano" <a href="http://...">...</a> Enlace "ab.html" en tu PC <a href="ab.html">...</a> Enlace misma página <a href="#pepe">...</a> Localiz.anterior <a name="pepe">...</a> Enlace Correo <a herf="mailto: dir.mail...">...</a> Arch.de Sonido <bgsound src="xx.wav"> (o.mid) </center>*</left>*</right> ----- Desplazam. Marquesina <marquee>(texto) </marquee> 2 Con el fin de darle color a su página web, usted puede usar de la siguiente tabla los colores acordes a su diseño RED FF0000 LIME 66FF00 AQUA 00FFFF FF3300 CC3300 FF9999 FFCCCC 990033 FF3333 CC3333 FFCC99 CC0066 993300 FF0033 CC0033 FF9966 FF6699 660000 000000 CC0000 663333 990066 330000 33FF33 00CC00 00CC00 66FF66 009900 009900 OLIVE 66FF00 99FF99 006600 006600 CCFFCC 003300 003300 009900 006600 66FF00 009900 00FFFF 33FFFF CCCCFF 3333FF 66FFFF 0000CC TEAL 006666 6666FF 99FFFF 000099 9999FF CCFFFF 000099 CCCCFF 000066 000033 000099 00CCCC 009999 006666 003333 YELLOW FFFF33 FFFF66 FFFF99 FFFFCC CCCC00 999900 666600 333300 MAROON 990000 GREEN 00FF00 BLUE 0000FF
FUCHSIA TEAL FF33FF FF66FF FF99FF FFCCFF CC00CC 990099 660066 330033 7D337D 7D667D 7D997D 7DCC7D E100E1 CC00CC AF00AF 990099 FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 663300 663333 663366 663399 6633CC 6633FF 660000 660033 660066 660099 6600CC 6600FF 333300 333333 333366 333399 3333CC 3333FF 003300 003333 003366 003399 0033CC 0033FF 330000 330033 330066 330099 3300CC 3300FF 000000 000033 000066 000099 0000CC 0000FF 3
O el nombre del color Amarillo Azul Blanco Gris Marrón Naranja Negro Rojo Verde Violeta Yellow Blue White Gray Brown Orange Black Red Green Violet 4 Para una mayor presentación usted puede usar las siguientes etiquetas para alinear un párrafo Un párrafo puede alinearse a la izquierda, centro, derecha o justificarlo. El párrafo en cuestión debe estar contenido entre las etiquetas <p align="left/center/right/justify">...</p>. Ejemplo: <p align="left"> Este texto está alineado a la izquierda </p> <p align="center"> Este texto está centrado </p> <p align="right"> Este texto está alineado a la derecha </p> <p align="justify"> Este texto está justificado </p> Con base a la tabla de comando y colores vamos a realizar el taller No 1 Para realizar el taller usted puede ir al botón de inicio que está ubicado en la barra de tareas en el escritorio de su pc.
Todos los programas accesorios y dar click en : 5 Bloc de Notas Muy bien le presenta la siguiente ventana
6 Aquí usted puede empezar programar Esta imagen es como se sugiere que código de programación quede TALLER UNO <HTML> <HEAD> <TITLE>pedrocastañeda</TITLE> </HEAD> <BODY bgcolor="#006666"> <center><font face ="arial" size="12" color="white"> BOGOTA CAPITAL DE COLOMBIA</font></center></br> nueva <marquee bgcolor="#bdb76b"direction="right"behavior="alternate"> <strong><font color="#800000"size="5">mi primer curso de diseño WEB</font></strong> </marquee> <p align="justify"> <font face="ariel"size="12"color="black">desde 1991, Colombia tiene una
carta de navegacion conocida con el nombre de constitucion politica de Colombia, basada en derechoy y debreres de los ciudadnos, colo una republica de estado social de Derecho </font></p><hr></br> <center><img SRC="C:\Users\Public\Pictures\Sample Pictures\koala.jpg" WIDTH="178" HEIGHT="180" > </center> <hr> 7 </BODY> </HTML> Para guardar el archivo usted puede ir al archivo guardar como: Ejemplo De esta manera usted crea el ejecutable de su página.
El nombre que le damos a la página web es TALLERUNO y la extensión es HTML, pero esta debe ir en minúscula y separa del nombre por un punto. 8 TALLER DOS En el taller dos aprendemos a colocar videos y lista en nuestra pagina La etiqueta <Embed> nos permite inserta video Ejemplo <center><embed src="c:\wildlife.wmv"width="500"heigt="500"autoplay="false"></center> <embed src="varios/audio.mid" autostart="false" loop="true"> <embed src="varios/cotorra.avi" autostart="false" loop="true"> Además usted puede colocar música de fondo a su página para este caso utilizaremos la siguiente Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1. Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código: <bgsound src="varios/audio.mid" loop="-1"> Las etiquetas más usadas son: <UL> <OL> <LI> Sirven <ol> Sirve para ordenar <OL> <li>colombia</li> <li>bogota</li>
<li>chapinero</li> <li>sena</li> 9 </ol> Etiqueta <UL> Sirve para trabajar con viñetas <UL> <li>colombia</li> <li>bogota</li> <li>chapinero</li> <li>sena</li> </Ul> <LI> Sirve Funciona de acuerdo al anterior caso <LI> <li>colombia</li> <li>bogota</li> <li>chapinero</li> <li>sena</li> </LI>
10 PRACTICA TALLER DOS <html> <head> <title>tallerdos</title> </head> <body background ="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"> <center> <embed src="c:\wildlife.wmv"width="500"heigt="500"autoplay="false"> </center></br> <hr> <UL> <li>colombia</li> <li>bogota</li> <li>chapinero</li> <li>sena</li> </Ul> <hr> <LI> <li>colombia</li> <li>bogota</li> <li>chapinero</li> <li>sena</li> </LI> </body> </html>
11 TALLER TRES En este taller aplicaremos la etiqueta FORM Nos permite asociar varios elementos dentro del formulario como bótanos, casillas, texto. <form> </form> Dentro del formulario podemos tener METHOD Indica cómo se enviaran las respuestas POST es el valor que se envían los datos ACTION Nos indica la dirección que se enviara la información (un script CGI o dirección de correo electrónica ( maito:dirección_de_correo_e@aaaa.com)) Trabajo extra clase que sirve en form Enctype Acction Method En la Etiqueta input Value
Maxlength = 30 Password 12 En este taller usted puede hacer una página con base al modelo
PARCTICA TALLER TRES 13 <html> <head> <title>tallerdos</title> </head> <body bgcolor= "009999"> <h3> <form> Nombres: <input type="text"neme="username"/><br> Apellido: <input type="text"name="apellido"/><br> Clave: <input type="password"name="password"/><br> Genero</br> <input type="radio"name="genero"/>femenino<br/> <input type="radio"name="genero"/>masculino</br> Comida Favorita: <br> <input type="checkbox" name="fruta"/>fruta<br/> <input type="checkbox" name="jugo"/>jugo<br/> <input type="checkbox" name="amburgesa"/>amburgesa<br/> <input type="checkbox" name="pizza"/>pizza<br/> <br> <hr> para mensajes<br> Seleccione a que persona le enevia su mensaje<br> <select name="person"> <option value="pedro">pedro</option> <option value="maria">maria</option> <option value="diego">diego</option> <option value="ines">ines</option> </select></br> Escriba su mensaje<br/> <textarea rows="5"cols="30"name="message_body"></textarea><br> <input type="submit" value="enviar"/> <input type="reset" value="borrar"> </form> </body> </html>
TALLER CUATRO TABLAS Etiqueta <table> 14 Atributo de la tabla Border Cellspacing Cellpadding Width Ejempo <table border= 1 cellspacing= 0 cellpadding= 5 width= 300 > Abributos de la filas <Tr> Align= center right left juu <td> valign middle top bottom Taller Usted puede hacer una tabla directorio del grupo de estudiantes que tenga cedula, nombres Barrio y Teléfono
PRACTICA TALLER CUATRO 15 <HTML> <HEAD> <TITLE>MI PC</TITLE> </HEAD> <BODY BGCOLOR="C0C0C0"> <table border="1"> <tr> <td>cedula</td> <td>nombres</td> <td>barrio</td> <td>telefono</td> </TR> </BODY> </HTML> <tr> <td>1014213147</td> <td>gloria INES</TD> <td>chapinero</td> <td>5555555</td> </TR> <tr> <td>80123852</td> <td>florinda DORA</TD> <td>chico</td> <td>4444444</td> </TR>
TALLER CINCO 16 Es este taller aplicaremos marcos a la página que unos ayudan a organizar los contenidos dentro de la página y a la vez la navegación. Pueden ser ventas o sub ventanas de navegación. Ejemplo PRACTICA TALLER CINCO Crear una folder con el nombre proyecto y dentro de esta carpeta puede crear las siguientes páginas: Como hacer cada página recuerde que puedes trabajar con el bloc de notas Y guardar cada página con la extensión HTML, en minúscula.
La primera página se deberá llamar index.html <html> <title>pedro castañeda</title> <frameset rows="20%,80%"> <frame src="diario.html" name="left"> <frameset cols="20%,80%"> <frame src="publicidad.html"name="upper_right"> <frame src="principal.html"name="base"> </frameset> </html> La segunda página principal.html 17 Ver código <html> <head> <title>pedrog</title> </head> <body bgcolor="#0000ff"> principal </body> </html> Muy bien, es necesario que usted cada vez guarda vea como va funcionando su proyecto. La tercera página se llamara publicidad.html Esta página tiene algunos enlaces que llevan a dicho dominios. Ver código <html> <head> <title>pedro</title> </head> <body bgcolor="0c0c0c0"> <br> <a href="principal.html"target="base">inicio</a> <br> <a href="rojo.html"target="base">rojo</a> <br> <a href="http://www.eltiempo.com"target="base">el tiempo.</a> <br> <a href="http://www.pedrocastaneda.net"target="base">pedro Castañeda</a> <br> </body> </html> Está mejorando pero nos falta la página que va en la parte superior En este caso le dimos el nombre de diario.html Ver código
<html> <head> <title>pedro</title> </head> <body bgcolor="00000"> <marquee bgcolor="#bdb76b"direction="right"behavior="alternate"> <strong><font color="#800000"size="5"> CONOCIMIENTO PARA TODAS Y TODOS</font></strong> </marquee> </body> 18 </html> Muy bien lo está logrando para finalizar la primera fase Vamos a crear otra página y le daremos el nombre rojo.html Ver código <html> <head> <title>pedro</title> </head> <body bgcolor="red"> <font color=" white"><h1><center> rojo</center> </font></h1> </body> </html> FELICITACIONES