Ing. Pedro G. Castañeda S.
1
MANUAL PRACTICO DE HTML
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).... </title></head>
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"> -----
Ing. Pedro G. Castañeda S.
2
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> </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
FF3300 CC3300 FF9999 FFCCCC 990033 MAROON
990000 FF3333 CC3333 FFCC99 CC0066 993300 FF0033 CC0033 FF9966 FF6699 660000 000000 CC0000 663333 990066 330000
LIME 66FF00
33FF33 66FF66 OLIVE 66FF00
99FF99 CCFFCC GREEN 00FF00
00CC00 009900 006600 003300 00CC00 009900 006600 003300 009900 006600 66FF00 009900
AQUA 00FFFF
00FFFF 3333FF TEAL
006666
6666FF 9999FF BLUE
0000FF 33FFFF 66FFFF 99FFFF CCFFFF CCCCFF 0000CC 000099 000099 CCCCFF 000066 000033 000099
00CCCC 009999 006666 003333
YELLOW FFFF33 FFFF66 FFFF99 FFFFCC CCCC00 999900 666600 333300
Ing. Pedro G. Castañeda S.
3
FUCHSIA FF33FF FF66FF FF99FF FFCCFF CC00CC 990099 660066 330033
TEAL 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
Ing. Pedro G. Castañeda S.
4
O el nombre del color
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.
5
Todos los programas
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" size="12" color="White"> BOGOTA CAPITAL DE COLOMBIA</font></center></br> <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.
7
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.
8
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.
9
<li>Chapinero</li>
<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ó[email protected]))
Trabajo extra clase que sirve en form
Enctype
Acction
Method
En la Etiqueta input
Value
Ing. Pedro G. Castañeda S.
12
Maxlength =”30”
Password
En este taller usted puede hacer una página con base al modelo
Ing. Pedro G. Castañeda S.
13
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.
14
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.
15
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.
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.
17
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.
18
<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> </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