MANUAL PRACTICO DE HTML HEAD> TITLE>MI PC
Anuncio
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...... Principo de Documento Encabezado y Título Color de Fondo de Página ..............INICIO.......... ..<html>... ..........F I N A L.......... </html> <head><title>....(titulo del </title></head> archivo).... <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"> ----- Ing. Pedro G. Castañeda S. 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> 2 Centrado*Izquierda*Derecha <center>*<left>*<right> </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) ----- Desplazam. Marquesina <marquee>(texto) </marquee> 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 00CCCC YELLOW FF3300 FF3333 FF0033 000000 33FF33 00CC00 00CC00 009900 00FFFF 33FFFF CCCCFF CCCCFF 009999 FFFF33 CCCC00 CC3300 FF9999 FFCCCC CC3333 FFCC99 CC0066 CC0033 FF9966 FF6699 CC0000 663333 990066 66FF66 99FF99 009900 006600 OLIVE 66FF00 009900 006600 006600 66FF00 3333FF 6666FF 66FFFF 99FFFF TEAL 006666 0000CC 000099 000066 000033 006666 003333 FFFF66 FFFF99 999900 666600 Ing. Pedro G. Castañeda S. 990033 993300 660000 330000 CCFFCC 003300 003300 009900 9999FF CCFFFF 000099 000099 FFFFCC 333300 MAROON 990000 GREEN 00FF00 BLUE 0000FF FF33FF CC00CC 7D337D E100E1 FF66FF 990099 7D667D CC00CC FF99FF 660066 7D997D AF00AF FFCCFF 330033 7DCC7D 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 FUCHSIA TEAL Ing. Pedro G. Castañeda S. 3 O el nombre del color 4 Amarillo Yellow Azul Blue Blanco White Gris Gray Marrón Brown Naranja Orange Negro Black Rojo Red Verde Green Violeta Violet 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. Ing. Pedro G. Castañeda S. Todos los programas 5 accesorios y dar click en : Bloc de Notas Muy bien le presenta la siguiente ventana Ing. Pedro G. Castañeda S. 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" COLOMBIA</font></center></br> size="12" color="White"> BOGOTA CAPITAL DE <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 nueva Ing. Pedro G. Castañeda S. 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> </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. Ing. Pedro G. Castañeda S. 7 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. 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> Ing. Pedro G. Castañeda S. 8 <li>Chapinero</li> 9 <li>Sena</li> </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> Ing. Pedro G. Castañeda S. 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> Ing. Pedro G. Castañeda S. 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 Ing. Pedro G. Castañeda S. Maxlength =”30” 12 Password En este taller usted puede hacer una página con base al modelo Ing. Pedro G. Castañeda S. PARCTICA TALLER TRES <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> Ing. Pedro G. Castañeda S. 13 TALLER CUATRO TABLAS Etiqueta <table> 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 Ing. Pedro G. Castañeda S. 14 PRACTICA TALLER CUATRO <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> <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> </BODY> </HTML> Ing. Pedro G. Castañeda S. 15 16 TALLER CINCO 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. Ing. Pedro G. Castañeda S. 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 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 Ing. Pedro G. Castañeda S. 17 <html> <head> <title>pedro</title> </head> <body bgcolor="00000"> <marquee bgcolor="#bdb76b"direction="right"behavior="alternate"> <strong><font color="#800000"size="5"> CONOCIMIENTO PARA TODOS</font></strong> </marquee> </body> </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 Ing. Pedro G. Castañeda S. 18 TODAS Y
