You are on page 1of 31

Universidad Privada Telesup Pág.

1

PRIMERA SEMANA – Marco Teórico

Logro
El alumno construya páginas Web estáticas utilizando las directivas del HTML.
Resumen
El código HTML esta basado de hipertexto el cual viaja a través del protocolo
http y es interpretado por el navegador. El HTML está compuesto por una serie de
directivas que se utilizan para insertar elementos o características sobre una
página web. Las páginas webs quedan alojadas en un servidor web.

Tópicos básicos de la programación web Cliente usando HTML

CONCEPTOS BÁSICOS PRELIMINARES
Antes de empezar a crear nuestras páginas webs, debemos repasar concisamente algunos
conceptos elementales:

¿QUÉ ES INTERNET?
Es la Red mundial de computadores: Grupo
de computadores que interconectados de
alguna forma pueden compartir entre ellos
alguna información. Pueden compartir
información almacenada en las millones de
páginas webs que se encuentran almacenadas
en los miles de servidores webs, todos estos
equipos tanto servidores como usuarios
(clientes) forman parte de la comunidad de
cibernauta de Internet.

SERVIDOR WEB
Computador Central que aloja y administra
un sitio web (site web). Internet está compuesto de miles de Servidores de este tipo a los
cuales los clientes o usuarios acceden a través de una dirección web. Esto quiere decir que las
páginas webs que nosotros visualizamos vienen desde un servidor de Web.

PROTOCOLO TCP/IP (Transmision Control Protocol/Internet Protocol)
Es el protocolo de red más utilizado mundialmente. Un protocolo de
red contiene normas y acuerdos que todos los equipos informáticos
y de telecomunicaciones respetan con la finalidad de lograr una
comunicación estandarizada y universal.

Este protocolo permite que los datos se dirijan como paquete de
datos desde su fuente a su destino a través de Internet (IP – Internet
Protocol)

Universidad Privada Telesup Pág. 2

DIRECCIÓN IP
Los servidores web gracias a este protocolo disponen de una dirección IP que los identifica de
modo único en la red a nivel mundial. Una dirección IP consta de 4 octetos, cada una de ellas
esta comprendida en un rango de 0 a 256. Ejemplo de direcciones IP:

205.170.15.10  Dirección IP pública (Internet)
168.12.15.14  Dirección IP pública (Internet)
192.168.0.0  Dirección IP privada (Intranet)
10.0.0.0  Dirección IP privada (Intranet)

Intranet:
Una red local que utiliza el protocolo TCP/IP. Cada uno de los computadores están
identificados con una dirección IP privada. Esta red funcionaria como una microinternet
 privada cuya jurisdicción sería una oficina, piso de un edificio, etc. Los equipos
pertenecientes a una Intranet usan el siguiente rango de direcciones IP:
10.0.0.0 a 10.255.255.255
192.168.0.0 a 192.168.255.255

A modo de prueba Ud. puede abrir su navegador y escribir la siguiente dirección IP:
http://64.233.169.103

¿Qué apareció? … Ud. accedió directamente a un servidor web de Internet a través de su
dirección IP pública

DIRECCION DNS (Domain Name Server)
Esta dirección es la más utilizamos para acceder a una página Web, porque es más fácil de
recordar, tiene la forma de: http://www.google.com.pe

Partes de una dirección DNS:
http : Protocolo de comunicación para la transferencia de hipertexto
www : Nombre o alias del servidor Web (En la mayoría de casos se utiliza www)
 utelesup
edu
: Nombre del Dominio del sitio Web
: Tipo de dominio (Ejemplo: edu, com, org, net, gob, mil)
pe : Dominio de país (Ejemplo: pe, cl, ec, uk, ge, cn, jp, …)

SERVIDOR DNS
Computador central que forma parte de Internet, que recepciona la dirección DNS por parte
del cliente (usuario) y con esta, busca la dirección IP equivalente del servidor web.

SERVIDOR:
Computador central que administra y provee un servicio a un conjunto de usuarios o clientes.
Existen muchos tipos de servidores, por ejemplo: Servidor Web, Servidor de Base de Datos
(Administra la base de datos para los usuarios de una red), Servidor de correo electrónico,
servidor de aplicaciones, servidor de archivos, servidor de impresiones, etc.

CLIENTE:
Usuario que accede a un servidor con la finalidad de utilizar un servicio de este.

Universidad Privada Telesup Pág. 3

PAGINA WEB: Documento electrónico que contiene texto, imágenes, sonido y video basado
en hipertexto HTML. La extensión de este archivo es *.htm o *.html

HTML (HiperText Markup Language / Lenguaje Marcador de HiperTexto)
Código de hipertexto utilizado para construir o ensamblar una página web. Este código viaja
en tramas o paquetes por Internet utilizando el protocolo de transferencia http.

NAVEGADOR (Browser)
Programa que interpreta el hipertexto HTML para ensamblar y presentar la página web en la
pantalla del usuario. Ejemplo: Internet Explorer, Opera, FireFox, Google Chrome, etc.

CONSTRUCCION Y MODIFICACIÓN DE UNA PÁGINA WEB
Para construir una página debemos utilizar el Lenguaje de Hipertexto HTML. Este lenguaje
consta de un conjunto de etiquetas donde cada una de ellas representa elementos de la página
que se van insertando de acuerdo a la necesidad del diseño.

PASOS PARA CREAR UNA PAGINA WEB USANDO BLOCK DE NOTAS:
1. Abrir el block de notas
2. Escriba el código HTML
3. Grabe el archivo en alguna carpeta específica. No olvide colocarle la extensión *.HTM
(El archivo creado presentará el icono de una página web). Ejemplo: principal.htm
4. Haga doble clic sobre el archivo anteriormente creado para ver la ejecución de la
página.

PASOS PARA CREAR UNA PAGINA WEB USANDO MACROMEDIA
DREAMWEAVER:
1. Abrir Macromedia Dreamweaver

6. PASOS PARA MODIFICAR UNA PAGINA WEB USANDO BLOCK DE NOTAS: 1. Directivas abiertas. Escoger : Crear Nuevo : HTML 3. Manténgase en la ficha Código 4. Acceda al menú Archivo / Guardar. Indique el nombre del archivo Ejemplo: principal La extensión será asignada automáticamente por el Dreamweaver 6.) que contenga el documento. para ver la ejecución de la página. la forma de representar los elementos (texto. Directivas cerradas 2.. . Manténgase en la ficha Código 4. Haga clic derecho sobre la página web 3. Grabe los cambios / Menú Archivo – Guardar 6. Modifique el código HTML 5. Escriba el código HTML 5. Click Derecho sobre el archivo de la página web que desea modificar 2. Haga las modificaciones 5. Haga doble clic para visualizar la ejecución de la página PASOS PARA MODIFICAR UNA PAGINA WEB USANDO DREAMWEAVER 1. Este tipo de directivas aplican su acción a un ámbito o alcance. FUNDAMENTOS DE HTML DIRECTIVAS DE HTML Básicamente. Cierre la ventana del código HTML 7. Abrir la página web que desea modificar 2. Entre la directiva inicial y la final se pueden encontrar otras directivas. que indican al navegador que estemos utilizando. Tipos de Directivas: Las directivas de HTML pueden ser de dos tipos: 1. el HTML consta de una serie de órdenes o directivas. etc.Universidad Privada Telesup Pág. Escoger: Menú Ver / Código Fuente 4. 4 2.. gráficos. Escoger: Abrir con… / Adobe Dreamweaver 3. Grabe el archivo en alguna carpeta específica. Las directivas cerradas: Son aquellas que tienen una palabra clave que indica el principio de la directiva y otra que indica el final. Haga doble clic sobre el archivo anteriormente modifcado. Acceda al menú Archivo / Guardar. Haga doble clic sobre el archivo anteriormente creado para ver la ejecución de la página.

3) El resto de elementos se indican en letra normal. 2) Los parámetros de las directivas se indican en letra minúscula y negrilla. <HR> Ejemplo: Directiva con parámetros La directiva BODY usa el parámetro <BODY bgcolor=yellow> </BODY> bgcolor para pintar el fondo de la página de color amarillo. <BODY> Inicio del cuerpo del documento.html o . </TITLE> Final del título del documento. Los cuales configuran o personalizan la acción de la directiva. Ejemplo : Directiva abierta (Solo indica una acción) Representa una acción: Crea una línea horizontal. 5 Las directivas abiertas: Constan de una sola palabra clave que indica una acción especifica. En esta separata se han fijado los siguientes criterios a la hora de escribir la sintaxis de las directivas de HTML: 1) Las directivas se indican en letra mayúscula y en negrilla.Universidad Privada Telesup Pág. </HTML> Final del documento. <TITLE> Inicio del título del documento. . 4) Las palabras a resaltar en el texto se indican en cursiva y negrilla. </HEAD> Final de la cabecera del documento. Los archivos que contienen documentos HTML suelen tener la extensión . </BODY> Final del cuerpo del documento. Ejemplo : Directiva cerrada (Tiene un inicio y fin) El texto comprendido entre las directivas <CENTER> Mi página Web </CENTER> se presentará centrado. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML Toda página web basada en HTML tiene la siguiente estructura: <HTML> Inicio del documento. Para diferenciar las directivas del resto del texto del documento se encierran entre los símbolos < >  Nota: Una directiva puede contener "parámetros".htm. <HEAD> Inicio de la cabecera.

. Ejemplo : <META http-equiv="refresh" content = "15. Este título será el que aparezca en la barra de nuestro navegador de páginas Web. Si no se incluye ninguna URL se volverá a cargar en el navegador el documento en uso transcurridos los segundos indicados. Si no se incluye esta directiva el navegador entiende que dichos elementos se encuentran en el mismo lugar donde se encuentra nuestra página Web. Musica y Peliculas"> Indica al navegador el nombre de la página y sus contenidos principales.. <META name = "keywords" content = "Jose musica peliculas links Perú"> Indica al navegador las palabras clave para los buscadores de Internet. Ejemplo : <BASE href = "http://www. Lycos..utelesup. etc.URL=http://www. Muchos de los buscadores de páginas Web de Internet (Yahoo. Dentro de la cabecera es importante definir el título de la página por medio de la directiva <TITLE></TITLE>. Si se indica una DIRECCION URL se sustituirá el documento por el indicado una vez transcurridos el número de segundos especificados.microsoft. name y content.com/jose/"> . Ejemplos : <META name = "Pagina de Jose" content = "Mi pagina personal. La directiva <BASE> indica la localización de los archivos. gráficos. La directiva <META> lleva generalmente dos parámetros. Ejemplo : <TITLE>Universidad Privada Telesup</TITLE> Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. Otro uso de la directiva <META> es la de indicar documentos con "actualización automática". 6 CABECERA DEL DOCUMENTO La directiva <HEAD></HEAD> delimita la cabecera del documento.Universidad Privada Telesup Pág. a los que se hace referencia en nuestra página Web.) utilizan el contenido de esta directiva para incluir la página en sus bases de datos. La directiva <META> indica al navegador de Internet las palabras clave y contenido de nuestra página Web. etc.com"> Transcurridos 15 segundos se accederá a la página Web de Microsoft. Esto es útil para páginas que cambian de contenido con mucha frecuencia o para redireccionar a la persona que visita nuestra página Web a una nueva dirección donde se encuentra una versión actualizada de nuestra página Web.. sonidos.

bmp. etc. Parámetros de la Directiva BODY background= "nombre del archivo grafico" Indica el nombre de un archivo gráfico que servirá como "fondo" de nuestra página...jpg. Se pueden utilizar imágenes *. enlaces. Se ignora si se ha usado el parámetro background. EL CÓDIGO DE COLOR: Con la finalidad de establecer una tonalidad de color en HTML. El código de color se antecede del símbolo #. gráficos. . bgcolor = "código de color" Indica un color para el fondo de nuestro documento. Si la imagen no rellena todo el fondo del documento. textos. Por defecto es azul. Por defecto es negro. link = "código de color" Indica el color de los textos que dan acceso a un Hipervínculo. 7 CUERPO DEL DOCUMENTO La directiva <BODY></BODY> indica el inicio y final de nuestra página Web. Será entre el inicio y el final de esta directiva donde pongamos los contenidos de nuestra página. verde y azul.jpg” text=”yellow”> </BODY> Coloca en el fondo de la página web una tapiz correspondiente al contenido de tapiz. Por defecto es púrpura.Universidad Privada Telesup Pág. <BODY bgcolor=”blue” text=”yellow”> </BODY> Coloca el color del fondo de la página a un color azul y el color del texto a amarillo. *.jpg que se encuentra dentro de la carpeta imágenes.. esta será reproducida tantas veces como sea necesario. text = "código de color" Indica un color para el texto que incluyamos en nuestro documento. Ejemplos del uso de la directiva body: <BODY background=”/imagenes/tapiz. se utiliza un número compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores primarios: rojo. Esta directiva tiene una serie de parámetros opcionales que nos permiten indicar la "apariencia" global del documento. vlink = "código de color" Indica el color de los textos que dan acceso a un Hipervínculo que ya hemos visitado con nuestro navegador.

Ejemplo: <BODY BGCOLOR=#0000ff TEXT=yellow LINK=white VLINK=cyan> </BODY> Establece el fondo de la pagina de color azul. el color de texto amarillo. Las entidades comienzan por el símbolo & (ampersand) y terminan con el símbolo. Asimismo hay caracteres que se utilizan para las directivas de HTML. . Estos caracteres pueden ser representados por un código numérico o una entidad cuando deseemos que aparezcan en el documento "tal cual". el color de los hipervínculo blanco y el color de los hipervínculos que ya fueron visitados de color cyan. De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. el segundo par de cifras la proporción de color Verde y las dos últimas la proporción de color Azul. Ejemplo: <BODY bgcolor=#aa6533> </BODY> Este color de fondo representa: En Numeración En Numeración Rango Disponible en Hexadecimal Decimal Numeración Decimal Rojo aa 170 0 a 255 Verde 65 117 0 a 255 Azul 33 51 0 a 255 De cualquier forma la mayoría de los editores de HTML nos permiten obtener el código de color correspondiente escribiéndolo directamente en inglés. (punto y coma). JUEGO DE CARACTERES DEL DOCUMENTO Todos los navegadores de páginas Web actuales soportan todos los caracteres gráficos del la especificación ISO 8859-1. que permiten escribir textos en la mayoría de los países occidentales. por ejemplo < y >. se han definido dos formas de representar caracteres especiales usando solamente el código ASCII de 7 bits.Universidad Privada Telesup Pág. Para hacer referencia a estos caracteres se les asigna un código numérico o un nombre de "entidad". 8 Ejemplos de tonalidad de color en Hexadecimal: #000000 Color Negro #FF0000 Color Rojo #00FF00 Color Verde #0000FF Color Azul #FFFFFF Color Blanco El primer par de cifras indican la proporción de color Rojo. Combinando las proporciones de cada color primario obtendremos diferentes colores.

Atilde Ä &#196. -- ' &#39. . ( &#40. macr ° &#176. brvbar § &#167. \ &#92. middot ¸ &#184. uml © &#169. not &#173. -- ] &#93. Eacute Ê &#202. Aring Æ &#198. laquo ¬ &#172. $ &#36. plusmn ² &#178. -- % &#37. &#59. Aacute  &#194. copy ª &#170. -. -- . & &#38. -. -- [ &#91. -- . -- _ &#95. | &#124. -- } &#125. -. curren ¥ &#165. &#45. -. -. cedil ¹ &#185. -- ? &#63.Universidad Privada Telesup Pág. yen ¦ &#166. reg ¯ &#175. &#44. -. Ecirc Ë &#203. . -. -- + &#43. sup2 ³ &#179. frac12 ¾ &#190. -- { &#123. -- ) &#41. pound ¤ &#164. < &#60. Euml . -- / &#47. -. " &#34. -. Agrave Á &#193. ^ &#94. Auml Å &#197. -- = &#61. -. * &#42. nbsp ¡ &#161. -. AElig Ç &#199. micro ¶ &#182. sup3 ´ &#180. -- &#160. : &#58. @ &#64. frac34 ¿ &#191. -. cent £ &#163. > &#62. Ccedil È &#200. frac14 ½ &#189. ordm » &#187. iquest À &#192. raquo ¼ &#188. ~ &#126. -. ordf « &#171. deg ± &#177. acute µ &#181. Egrave É &#201. shy ® &#174. &#46. ` &#96. -. -. iexcl ¢ &#162. sup1 º &#186. para · &#183. -- # &#35. -. Acirc à &#195. sect ¨ &#168. 9 A continuación veamos una tabla con las principales entidades: Carácter Código Entidad Carácter Código Entidad ! &#33.

ccedil è &#232. oacute ô &#244. ESPACIADOS Y SALTOS DE LÍNEA En HTML solo se reconoce un espacio entre palabra y palabra. ugrave ú &#250. Ouml × &#215. 10 Ì &#204. Ucirc Ü &#220. euml ì &#236. Ocirc Õ &#213. ocirc Õ &#245. atilde ä &#228. ntilde ò &#242. yuml Por lo tanto la palabra página la podríamos escribir como : página p&aacute. ograve Ó &#243. times Ø &#216. Igrave Í &#205. el resto de los espacios serán ignorados por el navegador. igrave Í &#237. Oacute Ô &#212. Oslash Ù &#217. uacute û &#251.gina Es por ello que si deseamos que cualquier navegador de páginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o códigos para representarlas. Yacute Þ &#222. thorn ÿ &#255. auml Å &#229. ouml ÷ &#247. Otilde Ö &#214. icirc Ï &#239. ucirc ü &#252. aring æ &#230. Iacute Î &#206. otilde ö &#246. agrave Á &#225. eth Ñ &#241. Icirc Ï &#207. divide ø &#248. oslash ù &#249. Ntilde Ò &#210.Universidad Privada Telesup Pág. ETH Ñ &#209. yacute þ &#254. Ugrave Ú &#218. iacute î &#238. THORN ß &#223. uuml ý &#253. iuml ð &#240. Ograve Ó &#211. aacute â &#226.gina p&#225. Iuml Ð &#208. acirc à &#227. aelig Ç &#231. egrave É &#233. Uuml Ý &#221. Ejemplo Se verá como Esto es una Esto es una . Uacute Û &#219. szlig à &#224. eacute ê &#234. ecirc Ë &#235.

Ejemplo Se verá como <PRE> Este texto ha Este texto ha sido sido preformateado .) DIRECTIVA <HR> . retornos de carro. respetando tabulaciones. 11 frase frase DIRECTIVA <PRE></PRE> Asimismo tampoco se respetan las tabulaciones.</P> párrafo de texto centrado Este es un ejemplo de <P Align=justify>Este es un ejemplo de párrafo de texto párrafo de texto justificado centrado. preformateado . retornos de carro etc. Los valores posibles de este parámetro son LEFT. </PRE> DIRECTIVA <BR> y DIRECTIVA <P > Para indicar un salto de línea se utiliza la directiva <BR> y para un cambio de párrafo (deja una línea en blanco en medio) se utiliza la directiva <P>. Para ello existen una serie de directivas que indican estos códigos. Ejemplo Se verá como Este es un ejemplo de <P Align=right>Este es un ejemplo de un párrafo de texto párrafo de texto justificado a justificado a la derecha.Universidad Privada Telesup Pág. RIGHT. de párrafo. CENTER y JUSTIFY. Cuando se usa de esta manera tiene el parámetro align que indica al navegador la forma de "justificar" el párrafo.. etc. Ejemplo Se vera como Este texto tiene Este texto tiene<BR>saltos de línea y saltos de línea y <P> de párrafo.. La directiva <P> puede usarse también como directiva "cerrada" <P></P> indicando de esta manera los atributos de un párrafo en concreto.</P> la derecha <P Align=center>Este es un ejemplo de párrafo de texto Este es un ejemplo de centrado. La directiva <PRE></PRE> obliga al navegador a visualizar el texto tal y como ha sido escrito.</P> (todas las líneas terminan simétricamente iguales. espacios..

Estas líneas sencillas son las que ves en este manual para separar las diferentes secciones CABECERAS (Tipos de texto para cabeceras) En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de las directivas <H1><H2><H3><H4><H5> y <H6>. a la derecha (right) o la centra (center). noshade No muestra sombra. La cabecera <H1> será la que muestre el texto en mayor tamaño. También se puede especificar un número que indicaría el ancho de la línea en píxeles. El texto que escribamos entre el inicio y el fin de la directiva será el afectado por las cabeceras.Universidad Privada Telesup Pág. size = numero Indica el grosor de la línea en píxeles. Ejemplo Se vería como <H1>Texto de Prueba</H1> Texto de prueba <H2>Texto de Prueba</H2> Texto de Prueba <H3>Texto de Prueba</H3> Texto de Prueba <H4>Texto de Prueba</H4> Texto de Prueba <H5>Texto de Prueba</H5> Texto de Prueba <H6>Texto de Prueba</H6> Texto de Prueba . width = num / % Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana del navegador. evitando el efecto en tres dimensiones. Tiene los siguientes parámetros opcionales: align = posicion Alinea la línea a la izquierda (left). Ejemplo : <HR align=center size=5 width=50%> La directiva <HR> sin ningún parámetro mostraría una línea horizontal que ocuparía todo el ancho de la página. 12 La directiva <HR> muestra una línea horizontal de tamaño determinable.

subrayado. utilizando. size = valor Da al texto un tamaño en puntos determinado. 13 Los textos marcados como "cabeceras" provocan automáticamente un retorno de carro sin necesidad de incluir la directiva <BR>.Universidad Privada Telesup Pág. size = +/. face = "nombre de font" Escribe el texto en el tipo de letra especificado. Atributo Directiva Ejemplo Resultado Negrita <B></B> <B>Texto de prueba</B> Texto de prueba Cursiva <I></I> <I>Texto de prueba</I> Texto de prueba Teletype <TT></TT> <TT>Texto de prueba</TT> Texto de prueba Subrayado <U></U> <U>Texto de prueba</U> Texto de prueba Tachado <S></S> <S>Texto de prueba</S> Texto de prueba Parpadeo <BLINK></BLINK> <BLINK>Texto de prueba</BLINK> Texto de prueba Superíndic <SUP></SUP> <SUP>Texto de prueba</SUP> Texto de prueba e Subíndice <SUB></SUB> <SUB>Texto de prueba</SUB> Texto de prueba <CENTER></CENTER Centrado <CENTER>Texto de prueba</CENTER> Texto de prueba > DIRECTIVA <FONT></FONT> Por otro lado la directiva <FONT></FONT> nos permite variar el tamaño. y el tipo de letra de un texto determinado. el color. Ejemplo Se vería como . es por ello que según el navegador que esté ud.. etc. bgcolor y face.) tenemos varias directivas. Utiliza para ello los parámetros size. verá el resultado correctamente o no. color = "código de color" Escribe el texto en el color cuyo código se especifica. Esta es mi página personal ATRIBUTOS DEL TEXTO Para indicar atributos del texto (negrilla. Algunas de ellas no son reconocidas por determinados navegadores de Internet. Si este tipo de letra no existe en las fuentes se usará el font predeterminado del navegador..valor Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el valor. Por ejemplo Ejemplo Se vería como Pagina de José <H3>Pagina de José</H3>Esta es mi página personal.

lo ponemos en una página y vemos qué pasa. 14 <FONT size=+2 color="#FF0000” face="Arial"> Texto de prueba Texto de </FONT> prueba Existen otras directivas que realizan las mismas operaciones que las antes vistas en los atributos del texto. HEIGHT ajustan el ancho y alto de la marquesina. o a un porcentaje de la pantalla. BEHAVIOR=SLIDE (el texto aparecerá por el lado derecho y se detendrá al llegar al izquierdo).. esto recibe el nombre de Marquesina (marquee en inglés)..  HSPACE=XX.  BGCOLOR="#FF0000" (color de fondo de la marquesina)... Pueden ser igual a un número de pixels. La etiqueta es. si no está.  DIRECTION=LEFT o RIGHT (modifica la dirección de desplazamiento).  BEHAVIOR (comportamiento en inglés) definirá la forma de ejecutar el desplazamiento del texto. BEHAVIOR=ALTERNATE. VSPACE=XX (separa la marquesina del texto de la página en lo horizontal y vertical tantos píxeles como se le indique). Ejemplos: <MARQUEE WIDTH=70% HEIGHT=60> Esta marquesina ocupa el 70 % del ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE> ..  SCROLLAMOUNT=XX (define la cantidad de desplazamiento en en pixeles de cada movimiento de avance).  LOOP=XX (veces que el texto aparecerá. aparecerá indefinidamente)... Directiva Hace lo mismo que <STRONG></STRONG> <B></B> <CITE></CITE> <I></I> <STRIKE></STRIKE> <S></S> TEXTO EN MOVIMIENTO DIRECTIVA <MARQUEE></MARQUEE> Podemos poner un texto que se desplace por la pantalla.. Sus valores pueden ser: BEHAVIOR=SCROLL (el texto aparecerá por el lado derecho y desaparecerá por el izquierdo). <MARQUEE> Este texto se desplaza </MARQUEE> Parámetros del Marquee  WIDHT.Universidad Privada Telesup Pág.

(I.) i = Números romanos en minúsculas.D.d.iv.C.Esto es un comentario sobre mi pagina Web --> Los comentarios no serán mostrados por el navegador y son útiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. etc..2. (A. etc..ii. Para este tipo de lista se utiliza la directiva <OL></OL>. (a. 15 <MARQUEE BEHAVIOR=ALTERNATE>Movimiento alternado de izquierda a derecha y viceversa</MARQUEE> COMENTARIOS Para incluir comentarios en la página Web se utiliza la directiva <!-. Si no se indica se entiende que será una lista ordenada numéricamente.II. etc.B.... (i..V.) a = Letras minúsculas.. La directiva <OL> puede llevar los siguientes parámetros: start = num Indica que número será el primero de la lista.b. LAS LISTAS NUMERADAS: Representarán los elementos de la lista numerando cada uno de ellos según el lugar que ocupan en la lista.  Lista sin numerar  Lista de definición.... Si no se indica se entiende que empezará por el número 1.) A = Letras mayúsculas..III.) I = Números romanos en mayúsculas. (1. LISTAS DE ELEMENTOS Existen tres tipos de listas:  Lista numeradas.) Ejemplo en código HTML Resultado .-->. etc.Universidad Privada Telesup Pág. Asimismo veremos mas adelante que la directiva de comentario nos será de utilidad para incluir código JavaScript en nuestra pagina Web.v. etc... Cada uno de los elementos de la lista irá precedido de la directiva <LI>.3..iii. Ejemplo : <!-. type = tipo Indica el tipo de numeración utilizada..4.c.IV. Los tipos posibles son: 1 = Numéricamente.

y <LI> para indicar cada uno de los elementos. JPG. PNG. un circulo o un cuadrado. La directiva <UL> puede contener el parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. La directiva <IMG> tiene varios parámetros: . España <LI>Francia B. Para incluir una imagen en nuestra página Web utilizaremos la directiva <IMG>. Portugal </OL> LAS LISTAS SIN NUMERAR : Representan los elementos de la lista con una "viñeta" o marca que antecede a cada uno de ellos. así como sus posibles formatos.Universidad Privada Telesup Pág. Francia <LI>Italia C. Son las imágenes GIF. circle o square. España <LI>Francia 2. Hay dos formatos de imágenes que todos los navegadores modernos reconocen. 16 <OL> <LI>España 1. Ejemplo en código HTML Resultado <UL type=disk> <LI>España  España <LI>Francia  Francia <LI>Italia  Italia <LI>Portugal  Portugal </UL> <UL type=square> <LI>España  España <LI>Francia  Francia <LI>Italia  Italia <LI>Portugal  Portugal </UL> IMÁGENES DIRECTIVA <IMG></IMG> Hasta el momento hemos visto como se puede escribir texto en una página Web. Italia <LI>Portugal 4. con lo que el topo o marca puede ser un disco. Francia <LI>Italia 3. Los valores de type pueden ser disk. Portugal </OL> <OL type=A > <LI>España A. Italia <LI>Portugal D. Se utiliza la directiva <UL></UL> para delimitar la lista.

Se usa para variar el tamaño de la imagen original. alt = "Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen. border = tamaño Indica el tamaño del "borde" de la imagen.. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hipervínculo. Si este no fuera el caso. TOP alinea el texto con la parte superior de la imagen.. La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. height = tamaño Indica el alto de la imagen en puntos o en porcentaje. 17 src = "imagen" Indica el nombre del archivo gráfico a mostrar. MIDDLE con la parte central. Veremos estos parámetros mas adelante en esta separata.Universidad Privada Telesup Pág. vspace = margen Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda. Ejemplo Se vería como <IMG src="caution. Se usa para variar el tamaño de la imagen original. en puntos. hspace = margen Indica el número de espacios horizontales.. el nombre de la imagen ha de contener la URL donde se encuentre la imagen.gif" alt="Cuidado!!" > Si el navegador no pudiese visualizar el gráfico. Ejemplo . y BOTTOM con la parte inferior. que separarán la imagen del texto que la siga y la anteceda. ismap / usemap Indica que la imagen es un MAPA. align = TOP / MIDDLE / BOTTOM Indica cómo se alineará el texto que siga a la imagen. width = tamaño Indica el ancho de la imagen en puntos o en porcentaje..

18 <IMG src= "http://www.gif" align=TOP>Atencion !!! <IMG src="caution. (Recuerde que en función del navegador que ud. un archivo. etc.gif" height=20> Atencion !!! <IMG src="caution.gif" align=BOTTOM>Atencion !!! Atencion !!! HIPERVÍNCULOS DIRECTIVA <A></A> La característica principal de una página Web es que podemos incluir Hipervínculos. así como comprobando la alineación de los textos. Si el Hipervínculo esta indicado por un texto. se realzará la función de Hipervínculo indicada por la directiva <A></A>. Un Hipervínculo es un enlace de la página que hace que el navegador acceda a otro recurso.gif" width=100> <IMG src="caution. Ejemplo Se vería como <IMG src="caution. si se trata de una imagen..microsoft. esto quiere decir que si pulsamos con el ratón sobre el. utilice pueden verse o no los efectos de cada parámetro).Universidad Privada Telesup Pág. Para incluir un Hipervínculo se utiliza la directiva <A></A>.. El texto o imagen que se encuentre dentro de los límites de esta directiva será sensible.gif" Atencion !!! align=MIDDLE>Atencion !!! <IMG src="caution.gif"> Veamos varios ejemplos "jugando" con los tamaños de la imagen.com/"> Pulse para ir a la página Pulse para ir a la página de de Microsoft</A> Microsoft . Ejemplo Se vería como <A href = "http://www. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el Hipervínculo si lo pulsamos. esta aparecerá con un borde rodeándola. este aparecerá subrayado y en distinto color.com/iexplorer.microsoft. otra página Web.

La sección se llamará seccion1. Para ello debemos marcar en nuestra página las diferentes secciones en las que se divide. el navegador accederá a la página Web indicada por el parámetro href. accederá a la página situada en http://www.com">Envíame tus sugerencias</A> . Ejemplo: <A href = "mailto:joseatunga@yahoo.com/" > <IMG src = "google.jet.Universidad Privada Telesup Pág. Ejemplo: <A name = "seccion1"></A> Esta instrucción marca el inicio de una sección dentro de nuestra página.gif"></A> Pulsando sobre la imagen se accedería a la página situada en http://www.htm#seccion1">Primera Parte</A> Un Hipervínculo puede hacerse a cualquier tipo de archivo. Ejemplo Ejemplo: <A href = "tutor. Ejemplo Se vería como Para buscar en Internet : Para buscar en Internet : <A href = "http://www. es decir.google. Lo haremos con el parámetro name.microsoft.google.com/ Lo mismo podríamos hacer con un gráfico. Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma: <A href = "#seccion1">Primera Parte</A> O también : <A href = "http://www. Marcar una Sección en la página web Un Hipervínculo también puede llevarnos a una zona de nuestra página.es/mipagina.com/.pdf">Manual de HTML</A> Asimismo podemos hacer que el Hipervínculo de como resultado el envío de un correo electrónico a una dirección de correo determinada. 19 Si situamos el ratón encima de la frase y pulsamos.

entre otras cosas. está disponible una muy amplia gama de ejemplos. </TABLE>. Este parámetro no funciona en todos los navegadores. </TD> para delimitar el contenido de una celda.. HTML dispone de la etiqueta <CAPTION> para darle nombre a la tabla.. Una tabla se declara usando el comando <TABLE> . Para entender mejor el comando <TABLE> . Cada fila contiene a su vez un conjunto de celdas.. especificar la alineación del contenido de la celda. puestas una al lado de la otra. Aunque ese título puede ser contenido colocando texto formateado antes de la tabla.. 20 El parámetro onMouseOver permite que se muestre en la barra inferior del navegador un texto explicativo sobre el Hipervínculo. apiladas una sobre otra.Universidad Privada Telesup Pág. se usa <TR>. TABLAS DIRECTIVA <TABLE></TABLE> Una tabla es una manera muy compacta y clara de mostrar la información. </TABLE> Esta etiqueta tiene la ventaja que el texto formateado se coloca automáticamente en el centro de la anchura de la tabla. unir celdas. Una tabla en HTML se entiende como un conjunto de filas (fila=horizontal).. </TABLE>. <TD> .. Ejemplo de tabla: Aquí se muestra una tabla muy simple: <TABLE> <TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR> <TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda C2</TD></TR> <TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR> </TABLE> Título de la tabla Es conveniente que las tablas tengan un título que las identifique y aclare su contenido. Se pueden. de la siguiente forma: <TABLE> <CAPTION> Nombre de la tabla </CAPTION> ………. </TR>para indicar una fila y dentro de una fila. Dentro de la tabla. en vez de mostrar su dirección.. El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiqueta vistas anteriormente Todos estos comandos aceptan numerosos modificadores. y mucho más. . El elemento de cierre de fila y de celda es optativo.

es posible que en ocasiones queramos cambiar la anchura de nuestra tabla. debemos hacer BORDER=”1”. Tamaño de la tabla Por defecto el tamaño de la tabla viene dado por el texto o los gráficos que contiene. Sin embargo.Universidad Privada Telesup Pág. La desventaja de usar esta etiqueta es que el texto que va dentro de ella no admite formateado como el de las otras celdas. No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. existe una forma alternativa de indicar la cabecera de una fila o columna mediante la etiqueta <TH>. La sintaxis es: <TABLE BORDER="anchura"> ………. si el texto de las celdas ocupa una anchura mayor. Si queremos que el borde exterior de la tabla sea igual que los bordes interiores. o bien un porcentaje que indique la anchura de la tabla en relación a la anchura del área del documento del navegador. pero la anchura que se especifica solo afecta a los bordes externos. la tabla tomará la anchura mínima para que el texto de las celdas pueda verse íntegramente. El modificador BORDER coloca bordes externos e internos en la tabla. La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH dentro de la etiqueta <TABLE>. La sintaxis es: <TABLE WIDTH="anchura"> ……… </TABLE> Aquí anchura puede ser un número que especifique en pixels la anchura absoluta de la tabla. . Sin embargo. 21 Bordes de la tabla Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la etiqueta <TABLE>. El efecto de sombreado del borde exterior se produce cuando el modificador BORDER toma un valor superior a uno. Cabeceras de filas y de columnas La inclusión de cabeceras en cada fila y columna ayuda a comprender el contenido de la tabla. A pesar de que podemos especificar la anchura de la tabla. </TABLE> Donde anchura indica la anchura en pixels del borde exterior de la tabla.

</TD> </TR> ………. </TABLE> <TABLE BORDER="anchura" CELLSPACING=4> ………. 22 Justificación de la tabla Por defecto. Por defecto vale LEFT. LEFT y RIGHT. Para ello implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. nuestra tabla quedará justificada a la izquierda. . Su valor por defecto es 1. Espacio dentro de las celdas Es posible que queramos que nuestro texto no quede apretado dentro de las celdas.. La forma de centrarla es mediante la etiqueta <CENTER>. Ejemplo: <TABLE BORDER="anchura" CELLPADING=4> ………. sino que exista más espacio entre los textos de las celdas contiguas de forma que pueda leerse mejor.Universidad Privada Telesup Pág. HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. La forma de hacerlo es: <TABLE> <TR> <TD ALIGN=”horizontal” VALIGN=”vertical”> …. </TABLE> FORMA DE LAS CELDAS INDIVIDUALES DIRECTIVA <TD></TD> Justificación del texto de las celdas.  CELLSPACING: establece la anchura en pixels de los bordes de cada celda. </TABLE> donde:  horizontal puede tomar los valores CENTER. Esto puede hacerse mediante los dos siguientes modificadores:  CELLPADDING: establece la distancia mínima en pixels entre los bordes de cada celda y el texto que va encerrado en ellas.

que son WIDTH y HEIGHT:  WIDTH: especifica la anchura del texto en una celda concreta. MIDDLE. Sin embargo. sino que se amplíe la anchura de la celda.  HEIGHT: establece la altura de una celda individual. La única forma de hacerlo es poniendo en cada celda de la fila los valores correspondientes de WIDTH y HEIGHT. Se puede especificar como valor absoluto o bien como relativo en forma de porcentaje de la anchura de la tabla. podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro de la etiqueta <TR>. Celdas irregulares (Combinar Celdas) Podemos desear que una de nuestras celdas ocupe varias filas y/o columnas. Como formato de colores se acepta el hexadecimal o una cadena de caracteres. y queremos que el texto no ocupe más líneas. debemos añadir el modificador NOWRAP dentro de la etiqueta <TD>. Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la etiqueta <TD>. Por defecto. Si queremos que una determinada justificación horizontal o vertical afecte a todas las celdas de una fila. es posible establecer el tamaños de una determinada celda mediante dos modificadores de la etiqueta <TD>. BOTTOM. La forma de hacerlo es introducir los modificadores COLSPAN y ROWSPAN en la etiqueta <TD>:  COLSPAN= especifica la cantidad de celdas (a modo de columna) que se desea combinar. Celdas de diferentes tamaños.Universidad Privada Telesup Pág. Texto en una solo línea Si hemos indicado la anchura de una celda y ésta es menor que el texto incluido en ella. No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. Color de cada celda.Tablas</TITLE> </HEAD> . y BASELINE. todas las celdas que constituyen una tabla en HTML tienen el mismo tamaño.  ROWSPAN: especifica la cantidad de celdas (a modo de fila) que se desea combinar. Por defecto vale CENTER. <HTML> <HEAD> <TITLE>Ejemplo 7 . 23  vertical: puede tomar los valores TOP.

El método POST envía datos a través de la entrada estándar STDIO en otras palabras se pasa los datos codificados en el flujo de datos HTTP y los datos no son visibles para los usuarios. En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedará asociado a una variable.php method=get> </form> CONTROLES DEL FORMULARIO . 24 <BODY> <CENTER><H1>Tablas</H1></CENTER> <H2>Demostracion de COLSPAN y Encabezados</H2> <TABLE WIDTH="100%" BORDER="1"> <TR> <TH COLSPAN="2">Head1</TH> <TH COLSPAN="2">Head2</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE> </BODY> </HTML> FORMULARIOS DIRECTIVA <FORM></FORM> Los formularios nos permiten dentro de una página Web solicitar información al visitante y procesarla. action = "programa" Indica el lugar destino hacia donde se enviarán los datos recogidos en el formulario.Universidad Privada Telesup Pág. La directiva <FORM> tiene los parámetros action y method. Una vez se hayan introducido los valores en los campos o controles. Ejemplo: <form name=frmdatos action=procesar. En el interior de la declaración se indican los controles de entrada. el contenido de estos será enviado a un lugar destino definido en el parámetro ACTION del la directiva <FORM></FORM>. method = POST / GET Indica el método de transferencia de datos recogidos por el formulario. La declaración del formulario se pone entre las directivas <FORM></FORM>. El método GET envía los datos usando la URL.

25 Los controles son objetos del formulario que permiten el ingreso de datos. los controles más utilizados son:  Caja de texto  Cuadro de Área de texto  Caja de texto para password  Campo oculto  Casilla de verificación  Botón de Comando  Botón de Opción  Botón de Acción  Lista Desplegable  Botón de Reinicio .Universidad Privada Telesup Pág.

php”> Ingrese sus apellidos <input type=text name=”txtapellidos”> <form> CUADRO DE TEXTO PARA PASSWORD Indica que el campo será una palabra de paso.Para la introducción de la mayoría CONTROLES se utiliza la directiva <INPUT>. Se permite marcar varias casillas. Esta directiva tiene el parámetro type que indica el tipo de control y name que indica el nombre que se le dará al control. Cada tipo de control tiene sus propios parámetros. Mostrará asteriscos (*) en lugar de las letras escritas. Codigo HTML: <input type=type name=txtnombre maxlenght=30 size=30 value=””> Sus parámetros son: maxlenght = numero Número máximo de caracteres a introducir en el campo. Codigo HTML: <input type=password name=txtclave size=6> CASILLA DE VERIFICACIÓN (CHECKBOX) El campo se elegirá marcando una casilla. size = numero Tamaño en caracteres que se mostrará en pantalla. value = "texto" Valor inicial del campo. Sus parámetros opcionales son los mismos que para text. CONTROL CUADRO DE TEXTO Indica que el campo a introducir será un texto. Los valores de las casillas serán indicados por: . o sea. vacío. Normalmente será " ". Ejemplo: Inserta dentro del formulario un control caja de texto <form method=post action=”procesa.

de las cuales solo se podrá seleccionar una opción. BOTON DE OPCION (RADIO) El campo se elegirá marcando una opción. cada opción tiene un valor asociado diferente. ya que el campo no es visible se manda siempre con el valor indicado por el parámetro: Código HTML: <input type=hidden name=txttipo value=”3”> BOTON DE COMANDO PARA ENVIO DE DATOS Representa un botón. Los valores de las casillas serán indicados por : value = "valor" Código HTML: Seleccione sus temas de interés<br> <input type=radio name=rbidioma value=”Inglés”>Inglés<br> <input type=radio name=rbidioma value=”Frances”>Frances<br> <input type=radio name=rbidioma value=”Italiano”>Italiano<br> Explicación: Creamos 3 botones de opción los cuales pertenecen a un solo grupo. CONTROL INVISIBLE El usuario no puede modificar su valor. Codigo HTML: <input type=submit name=btnenviar value=”Enviar”> . Tiene el parámetro value = "texto" que indica el texto que aparecerá como etiqueta del botón.checked La casilla aparecerá marcada por defecto. Solo permite marcar una sola opción. Codigo HTML: Seleccione sus temas de interés<br> <input type=checkbox name=chkmusica value=”Musica” checked>Musica<br> <input type=checkbox name=chkdeportes value=”Deportes”>Deporte<br> <input type=checkbox name=chklectura value=”Lectura”>Lectura<br> Explicación: Creamos 3 casillas de verificación de las cuales se podrá seleccionar una o varias opciones. Al pulsar este botón la información de todos los campos se envía al destino especificado en el parámetro ACTION de la directiva FORM. cada opción tiene un valor asociado diferente.

Sus parámetros son: name = campo Nombre del campo size = num Número de opciones visibles. Al pulsar este botón se puede activar una acción definida en una función JavaScript. se indica más de uno se presenta como una lista con barra de desplazamiento. entre las que debemos escoger una o varias. Las diferentes opciones de la lista se indican con la directiva <OPTION>. se tomara por defecto la primera opción de la lista. Se utiliza para ellos la directiva <SELECT> </SELECT>. Al pulsar este botón se borra el contenido de todos los campos. En caso de que no se especifique. múltiple Permite seleccionar más de un valor para el campo. Si se indica 1 se presenta como un menú desplegable. Esta directiva puede incluir el parámetro selected para indicar cuál es la opción por defecto.BOTON DE COMANDO PARA CANCELAR ENVIO DE DATOS Representa un botón. El parámetro value = "texto" indica el texto que aparecerá en el botón. Codigo HTML: <input type=reset name=btnlimpiar value=”Limpiar”> BOTON DE ACCIÓN Representa un botón. Codigo HTML: <input type=buttom name=btnaccion value=”Mostrar”> LISTA DESPLEGABLE (ComboBox) Este tipo de campos despliegan una lista de opciones. El parámetro value = "texto" indica el texto que aparecerá en el botón. Código HTML: <SELECT NAME=”cbociudad” > <OPTION value=”Lima” selected>Lima</OPTION> <OPTION value=”Tacna”>Tacna</OPTION> <OPTION value=”Arequipa”>Arequipa</OPTION> <OPTION value=”Huaraz”>Huaraz</OPTION> </SELECT> .

wrap = VIRTUAL / PHYSICAL Justifica el texto automáticamente en el interior de la caja. y sus parámetros : name = campo Nombre del campo. La opción PHYSICAL envía las líneas de texto separadas en líneas físicas. La opción VIRTUAL envía todo el texto seguido. Numero de filas de texto visibles. <FORM action="procesar.CONTROL DE AREA DE TEXTO Representa un campo de texto de múltiples líneas.php" method=post> Tu Nombre:<INPUT type=text name=nombre size=30> Tu Clave: <INPUT type=password name=clave size=8> <P> Archivos a Enviar: <INPUT type=checkbox name=archivo1 value="Manual">Manual de Html <INPUT type=checkbox name=archivo2 value=”Mapthis">Programa Mapthis <INPUT type = checkbox name=archivo3 value="Help" >Archivo de Ayuda <P> Tu Edad : <INPUT type=radio name=edad value="-20">Menos de 20 años <INPUT type=radio name=edad value="20-40">Entre 20 y 40 años <INPUT type=radio name=edad value="+40">Mas de 40 años <P> <INPUT type=hidden name=lugar value="página personal"> Como encontraste mi página: <SELECT name=donde> <OPTION>De casualidad</OPTION> <OPTION>Por el buscador Ole</OPTION> <OPTION>Por el buscador Yahoo</OPTION> <OPTION>Me la comentaron </SELECT> <P> . Veamos a continuación un ejemplo de formulario utilizando todas las formas de introducción de datos. cols = num. Numero de columnas de texto visibles. rows = num. Normalmente se utiliza para que se incluyan en el comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>.

Tus Comentarios: <BR> <TEXTAREA name=comentario rows=5 cols=40 wrap=virtual></TEXTAREA> <P> <INPUT type=submit value="Enviar"> <INPUT type=reset value="Borrar"> </FORM> Ahora veamos el efecto producido en la página Web: Principio del formulario Tu Nombre: Tu Clave: Archivos a Enviar: Manual de Html Programa Mapthis Archivo de Ayuda Tu Edad : Menos de 20 años Entre 20 y 40 años Mas de 40 años pagina personal Como encontraste mi página : De casualidad Tus Comentarios: Enviar Borrar .

Final del formulario .