Download Report

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ó[email protected]))
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