MANUAL PRACTICO DE HTML 1 - pedrocastaneda.netpedrocastaneda.net/documentos/pedrohtml.pdf · Marquesina (texto) Con el fin de darle color a su página

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"> -----


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


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



FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF




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



336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF





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


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.


5

Todos los programas

accesorios y dar click en :

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> <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


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.


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>


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>


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

Trabajo extra clase que sirve en form

Enctype

Acction

Method

En la Etiqueta input

Value


12

Maxlength =”30”

Password

En este taller usted puede hacer una página con base al modelo


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>


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


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>


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.


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


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

Documents

MANUAL PRACTICO DE HTML 1 - pedrocastaneda.netpedrocastaneda.net/documentos/pedrohtml.pdf · Marquesina (texto) Con el fin de darle color a su página