UnidadDos HTML

INTRODUCCIN AL DESARROLLO DE SITIOS WEB
Unidad Dos 2
Lenguaje de Programacin HTML
T E M A S
1. Conceptos bsicos del lenguaje de programacin HTML.

2. Caractersticas generales del lenguaje.
3. Estructura de un documento HTML
4. Comandos bsicos de HTML.
5. Enlaces.
6. Imgenes.
7. Tablas.
8. Frames (Marcos).
9. Formularios.
10.Publicar pginas en internet.
Logro de Competencia
1. Conoce y utiliza de manera eficiente y funcional los comandos bsicos del

lenguaje HTML as como tambin agrega de manera ptima y segn se
requiera vnculos, anclas, Tablas, frames y formularios a una pgina Web.
1
Indicadores de Logro Evidencia de

Estructura de manera adecuada el Producto
documento HTML.
Desarrolla pginas Web eficientes siguiendo

los estndares establecidos y respetando las Producto
normas y principios para tal efecto.
Publica la pgina en internet para que se Producto

puede acceder de manera fcil y adecuada.
El Formador Dice y Hace:
1. Conceptos bsicos del lenguaje de programacin HTML

HTML son las iniciales de Hiper Text MarkupLanguage (Lenguaje de marcas
de hipertexto). Es un conjunto o serie de etiquetas incluidas en archivos de
texto que definen la estructura de un documento WWW y sus vnculos con
otros documentos.
HTML es el lenguaje con el que se escriben las pginas web. Las pginas
web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada
browser o navegador. Podemos decir por lo tanto que el HTML es el lenguaje
usado por los navegadores para mostrar las pginas webs al usuario, siendo
hoy en da la interface ms extendida en la red. Este lenguaje nos permite
combinar textos, sonidos e imgenes a nuestro gusto. De lo anterior se
desprende su ventaja con respecto a libros o revistas, el HTML nos permite la
introduccin de referencias a otras pginas por medio de los enlaces de
hipertexto.
Los navegadores WWW leen estos archivos de texto e interpretan esas

etiquetas para determinar cmo desplegar la pgina Web.
Para comenzar a trabajar con HTML solo requerimos de dos herramientas

fundamentales:
Un editor de texto (Preferiblemente el Bloc de notas de Windows), el
cual nos permitir escribir nuestro cdigo HTML.
Un navegador o browser (Internet Explorer, Mozilla, Nescape navigator,
etc,) el cual nos permite traducir el cdigo HTML escrito en el editor de
texto.
HTML est compuesto por una serie de comandos que son interpretados por el
navegador utilizado, ejecutando de esta manera todas las instrucciones
contenidas en el documento HTML; aspecto que nos enfrenta a una de las
dificultades que aun en la actualidad se presentan y es que no todos los
navegadores tienen la capacidad de traducir las instrucciones HTML y por lo
tanto no siempre una imagen de fondo que se puede ver en un navegador se
podr ver en otro.
2. Caractersticas generales del lenguaje:

El HTML es un lenguaje que basa su sintaxis en un elemento de base al que
llamamos etiqueta. La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta>
Un cierre de tipo </etiqueta>

Todo lo incluido entre la apertura y el cierre de esa etiqueta sufrir las
modificaciones que caracterizan a esta etiqueta.
As por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento

HTML escribimos una frase con el siguiente cdigo:
<b>Esto est en negrita</b>
El resultado Ser:
Esto est en negrita

3. Estructura bsica de un documento HTML:
Una pgina web est compuesta de 2 partes: el encabezado y el cuerpo de la
pgina. Paralelamente a esto, existen tres etiquetas fundamentales, las
mismas que deben estar incluidas en el archivo HTML de manera obligatoria.
Estas tres etiquetas fundamentales son:
<html></html>Indica al navegador que el documento que est leyendo es

un documento HTML. Esta etiqueta se abre al inicio del archivo y se cierra al
final del mismo.
<head></head>en esta etiqueta se detalla el encabezado de la pgina

WEB, y contiene alguna descripcin de la misma para categorizarla; lo que se
escriba aqu no aparecer en nuestra pgina. Esta etiqueta se abre luego de
la etiqueta <html>.
<body></body>Cuerpo de la pgina donde se despliega el contenido

global, texto, imgenes, Etc. Esta etiqueta se abre luego de cerrar el
encabezado con </head> y se extiende hasta el final de la pgina, cerrndose
antes de </HTML>.
Miremos un ejemplo bsico de lo que acabamos de describir:
<html>
<head> Este es el encabezado</head>
<body>
Bienvenidos al INCAP
</body>
</html>
Sugerencia: Aunque las etiquetas pueden ser escritas en minsculas o
MAYUSCULAS si se desea, se recomienda que se escriban en minscula ya que
en otras tecnologas (Por ejemplo XML) estas reglas son un poco ms exigentes y
no tan permisivas.
El Formador Dice y el estudiante Hace:
Nuestra primera pgina:
Teniendo en cuenta lo visto hasta ahora, explicare de manera sencilla como

crear una pgina Web bsica. El estudiante en este primer ejemplo solo
tendr que copiar el texto, pegarlo en un archivo del Bloc de notas y
guardarlo con el nombre que sugiere ms adelante.
El siguiente texto se copiara en el Bloc de notas de Windows:
<html>
<head><title>Primer Ejemplo</title></head>
<body>
Bienvenido al INCAP
Ests en la pgina que da inicio al maravilloso mundo del
Desarrollo Web
</body>
</html>
Luego de copiarlo se guardara con el nombre de EjemploUno.html dentro

de una carpeta que se creara en el disco local D:\ con el nombre de
EjemplosBasicosXXXXXX, en donde las X corresponden al cdigo
completo del estudiante.
La apariencia en el bloc de notas ser la siguiente:

Y al ejecutarse el archivo HTML se ver algo como:
Como puede observar el estudiante, la pgina web carece de formato y no

refleja con exactitud el documento creado en el bloc de notas ya que en el
encontramos algunos saltos de lnea que en la pgina Web no se ven
reflejados, debido a que para ello existen etiquetas definidas que lo
realizan; en los apartados siguientes veremos cmo mejorar la apariencia
de nuestra pgina.
Explicacin: para ejecutar un archivo HTML basta con ubicarlo en donde se
encuentra guardado, se selecciona y damos doble clic sobre l. De esta manera se
abre la pgina Web correspondiente al archivo creado.
Ejercicios para hacer en clase:
1. El estudiante aplicando lo visto hasta el momento, creara una pgina Web

donde aparezcan sus datos personales tales como: Nombres, apellidos,
direccin, telfono, estado civil, gnero, programa tcnico, semestre, etc. El
archivo se guardara en la carpeta EjemplosBasicosXXXXXX con el
nombre de DatosPersonales.html.
Ejercicios para hacer en casa:
1. Crear una pgina Web donde se enumeren las reglas para desarrollar un
sitio Web. El archivo se guardara con el nombre de Reglas.html dentro de la
carpeta creada para tal fin.
4. Comandos Bsicos de HTML:

a. Ttulo de la pgina:<title></title>
Esta etiqueta permite determinar el ttulo de la pgina Web y normalmente
se ubica entre las etiquetas <head> y </head>. Este texto aparecer en la
barra de ttulo del navegador.
<head><title>Este ser el ttulo de la pgina</title>

b. Definicin de prrafos: <p></p>

Esta etiqueta permite definir prrafos en HTML. Adems de introducir un
retorno de carro fuerza un segundo retorno para dejar un espacio en
blanco adicional entre prrafo y prrafo.
Por defecto un prrafo estar alineado a la izquierda, pero mediante el

atributo ALIGN que afectan la etiqueta <p> y mediante los siguientes
valores podemos cambiar la alineacin de dicho prrafo:
LEFT Alineacin a la izquierda por defecto

CENTER Texto centrado
RIGHT Alineacin a la derecha
c. Salto de lneas: <br></br>

Esta etiqueta permite insertar un salto de lnea en el punto donde se utilice
y equivale a un punto y aparte en un prrafo normal; adicionalmente, esta
etiqueta no necesita de una etiqueta de fin.
d. Ttulos de encabezado:<hn></hn> (n es el nmero del

tamao de la fuente).
En HTML existen seis tipos de letras predefinidos que sirven o utilizan
como ttulos o resaltar el texto en una pgina; esta etiqueta inserta un
salto de lnea automticamente. Tenemos desde <h1> hasta <h6>.
Miremos hasta aqu un ejemplo donde utilizamos las etiquetas vistas; para
ello utilizaremos el archivo EjemploUno.html y solo bastara adicionar lo
que falte del siguiente cdigo:
<html>
<body>
<p align=center>Bienvenido al INCAP<br>
Ests en la pgina que da inicio al maravilloso mundo del<br>
Desarrollo Web<br></p>
<p align=Left>Bienvenido al INCAP<br>
<p align=Right>Bienvenido al INCAP<br>
<h1>Este es un ejemplo de Encabezado de nivel 1</h1>
</body>
</html>
En el Bloc de notas tendr la siguiente apariencia:
Y la pgina Web resultante tendr la siguiente apariencia:

Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto,

es decir, si queremos colocar un tipo de letra ms grande y en negrita debemos
utilizar las etiquetas que existen para ello. Los encabezados son para colocar
titulares en pginas web y es el navegador el responsable de formatear el texto de
manera que parezca un titular.
e. Formateando el texto:
i. Negrita:
Podemos escribir texto en negrita incluyndolo dentro de las etiquetas
<b> y </b> (bold). Esta misma tarea es desempeada por <strong> y
</strong> siendo ambas equivalentes. Escribiendo un cdigo de este
tipo:
<b>Texto en negrita</b>
Obtenemos este resultado:
Texto en negrita
ii. Cursiva:
Tambin en este caso existen dos posibilidades, una corta: <i> e </i>
y otra un poco ms larga: <em> y </em>. He aqu un ejemplo de texto
en cursiva:
<i>Texto en itlica</i>
Que da el siguiente efecto:
Texto en itlica
iii. Subrayado:
El HTML nos proporciona para el subrayado el par de etiquetas: <u> y
</u> (underline).
iv. Color, tamao y tipo de fuente:
La etiqueta utilizada para controlar color, tamao y tipo es <font> y su
cierre correspondiente. Dentro de esta etiqueta deberemos especificar
los atributos correspondientes a cada uno de estos parmetros que
deseamos definir. Esta etiqueta debe ir acompaada de ciertos
atributos que a continuacin describiremos de manera breve:
Color Especfica el color de la fuente.

Size Especfica el tamao de la fuente.
Face Especfica el tipo de fuente.
Miremos un ejemplo en donde aplicaremos los conceptos vistos para dar formato a un texto; para ello
utilizaremos el archivo llamadoEjemploUno.html y solo bastara con adicionar lo que falte del cdigo siguiente:
<html>
<body>
<b><u><p align=center>Bienvenido al INCAP<br>
Desarrollo Web<br></p></u></b>
<font size=3 color=blue face="arial black"><p align=Left>Bienvenido al INCAP<br>

Desarrollo Web<br></p></font>
<i><font size=5 color=red face="comic sans ms"><p align=Right>Bienvenido al INCAP<br>

Desarrollo Web<br></p></font></i>

</body>
</html>
12
El aspecto que tendr el cdigo en el bloc de notas ser:
Y la pgina Web resultante mostrara algo similar a:
Si se requiere que la totalidad del texto de una pgina Web tenga el

mismo color se debe utilizar dentro de la etiqueta <body>el atributo
13
text quien es el que determina el color del texto y funciona similar al
atributo color. Un ejemplo podra ser:
<bodytext=Green>
Contenido de la pgina
</body>
El cdigo anterior dar el color verde al

texto de toda la pgina, a no ser que se
utilice la etiqueta <font>y el atributo
color para determinar un color diferente

a una porcin del texto contenido en dicha
pgina.
En aras de facilitar el trabajo de los
estudiantes en el desarrollo de los talleres
y ejercicios, en la grfica ubicada a la
derecha se muestra una grfica con los
colores bsicos utilizados en una pgina
Web.
f. Etiqueta:<hr>
La etiqueta <hr> dibuja de manera predeterminada una lnea horizontal
alineada automticamente, con una apariencia de tercera dimensin. Esta
etiqueta es especial, porque no necesita de cierre, tiene los siguientes
atributos:
Align establece la alineacin de la lnea LEFT,CENTER o RIGHT
WIDTH permite especificar el ancho de la lnea (en pixeles o
porcentaje).
SIZE permite especificar el alto de la lnea (en pixeles).
g. Etiqueta: <center></center>
Se utiliza para centrar el texto/imagen o datos que se encuentren entre la
apertura y el cierre de la etiqueta.
1. El estudiante Consultara por Internet, como se puede justificar texto en

HTML; adicionalmente crear un ejemplo que permita explicar de manera
prctica como se realiza dicho procedimiento.
2. El estudiante Consultara por Internet, que etiquetas en HTML existen para
el manejo de listas numeradas, no numeradas y de definicin;
adicionalmente crear un ejemplo que permita explicar el tema consultado.
3. El estudiante creara un archivo en el bloc de notas con el nombre de
EjemploDos.html y en el digitara el siguiente cdigo:
<html>
<head><title>Curso de HTML</title></head>
<body bgcolor="#C0D9D9" text="#000000">
<h1 align="center">
Jesus Arturo Annear Naranjo</h1>
<hr align=center width=50%>
<h2>Informacin Personal</h2>
<hr align=left width=35% size=5>
<font color=blue><h3>Nombres: Jesus Arturo</h3>

<h3>Apellidos: Annear Naranjo</h3>
<h3>Direccin: Av. Caracas No 63-66</h3>
<h3>Telfono: 5-951951</h3>
<h3>Correo Electrnico: jesus.annear@incap.edu.co</h3></font>
<h2>Informacin Acadmica</h2>
<hr align=center width=80%>

<p align="center"><b>Bogot, D.C, Febrero de 2010</b><br>
<u>arturoannear@gmail.com</u><br>
<i>El valor de una persona no se mide por las veces en
que lo derriban, sino por las veces en que se levanta y sigue hacia
adelante</i></p><br>
</body>
</html>
La pgina debe tener el siguiente aspecto:
El estudiante cambiara los datos de la persona que aparece en el cdigo por

los propios y adems completara de manera independiente y siguiendo el
mismo esquema su informacin acadmica, su informacin laboral, su perfil
tcnico, referencias personales, referencias laborales, etc.
El archivo se guardara en la carpeta creada en apartados anteriores y cuyo

objetivo final es almacenar los ejemplos creados en el curso.
El Estudiante Dice y Hace:
1. El estudiante de manera autnoma empezara a disear una pgina Web utilizando los conocimientos hasta ahora
adquiridos. (Como recomendacin se sugiere promocionar un producto con todas sus caractersticas).
2. Explicar de qu otra manera podemos modificar el color del texto y el color de fondo de la pgina Web diseada.
Realizar un ejemplo prctico en donde se muestre tal procedimiento.
1. Enlaces:
a. Enlaces internos (Anclas):
Son los enlaces que nos permiten ir a otro lugar dentro de la misma pgina Web. Este tipo de enlaces son
generalmente utilizados en pginas donde el acceso a los contenidos se dificulta debido al gran tamao de la misma.
Mediante estos enlaces podemos ofrecer al visitante la posibilidad de acceder rpidamente al principio o final de la
pgina o bien a diferentes prrafos o secciones.
Para crear un enlace de este tipo es necesario, aparte del enlace de origen crear un segundo enlace que ser ubicado
en el destino. Miremos cmo funcionan estos enlaces con un ejemplo sencillo:
<html>
<head><title>Enlaces en una misma pgina</title></head>
17
<body>
<h2 align=center>Utilizacin de Anclas </h2>
<hr align=center width=50% size=5>
<fontface="arialblack" size=7><p><a name="Captulo1">Captulo 1</a></p></font>
<p>Para ms informacin ver <a href="#Captulo2">Captulo 2</a></p>
<p> </p>
<p> </p>
<font face="arial black" size=7>. . . Ms HTML . . .</font>
<font face="comic sans ms" size=5><p>Enlaces internos (Anclas):<br>
Son los enlaces que nos permiten ir a otro lugar <br>
dentro de la misma pgina Web. Este tipo de enlaces son <br>
generalmente utilizados en pginas donde el acceso a los<br>
contenidos se dificulta debido al gran tamao de la misma.<br>
Mediante estos enlaces podemos ofrecer al visitante la posibilidad <br>
de acceder rpidamente al principio o final de la pgina o bien <br>
a diferentes prrafos o secciones.<br>
Para crear un enlace de este tipo es necesario, aparte del enlace<br>
de origen crear un segundo enlace que ser ubicado en el destino. <br>
miremos cmo funcionan estos enlaces con un ejemplo sencillo:<br>
</p></font>
<font face="arial black" size=7><p><a name="Captulo2">Captulo 2</a></font>
<p> </p>
<p> </p>
<p><a href="#Captulo1">Regresar a Captulo 1</a></p>
</body>
</html>
Observemos lo siguiente:
Con la etiqueta <a href="#Captulo2">Captulo 2</a> definimos el enlace origen y con la etiqueta
<a name="Captulo2">Captulo 2</a>definimos el enlace destino.

Relativamente es muy sencillo y practico realizar enlaces internos.
Miremos como quedara la pgina Web:
Si
damos clic en el vnculo bordeado de rojo veremos que automticamente
nos ubicamos en:
19
b. Enlaces locales:
Un sitio web est compuesto por varias pginas Web conectadas entre s. A
continuacin veremos la manera de interconectar las distintas paginas
HTML que componen nuestro sitio Web.
Para crear este tipo de enlaces, crearemos una etiqueta de la siguiente
forma:
<a href="archivo.html">contenido</a>
Normalmente los sitios Web se organizan por carpetas. Estas carpetas

contienen los diferentes componentes de la pgina, imgenes, sonidos,
etc.Es por ello que en la mayora de los casos no basta con especificar el
nombre del archivo, sino que tendremos que especificar adems el
directorio en el que nuestro archivo.html est alojado, es decir especificar la
ruta donde se encuentra dicho archivo.
Miremos un ejemplo bsico:
Crearemos dos carpetas en el disco local C:\ con los nombres de
PaginaUno y PaginaDos respectivamente; luego, crearemos dos archivos
en el bloc de notas con la siguiente programacin:
Al primer archivo se le guardara con el nombre de

EjemploEnlaceExternoUno.html dentro de la carpeta PaginaUno y el
segundo se guardara dentro de la carpeta PaginaDos con el nombre de
EjemploEnlaceExternoDos.html. Ahora nos falta ejecutar dichos archivos y
observar que ocurre cuando damos clic en los hipervnculos respectivos.
Miremos las pginas resultantes:

2. Imgenes:
La etiqueta que se utiliza para insertar una imagen es <img> (image). Esta
etiqueta no tiene cierre y en ella se debe especificar obligatoriamente la
ubicacin de nuestro archivo grfico utilizando para ello el atributo src
(source).
La sintaxis general ser la siguiente:
<img src="Ruta hacia el archivo">
Para determinar la ruta, lo hacemos de la misma forma que vimos para los
enlaces. Las reglas siguen siendo las mismas, lo nico que cambia es que,
en lugar de una pgina destino, el destino es un archivo grfico.
Aparte de este atributo, indispensable obviamente para la visualizacin de

la imagen, la etiqueta <img> nos provee de otros atributos que nos prestan
alguna utilidad y que a continuacin describimos brevemente:
a. Atributo alt:
Dentro de las comillas de este atributo se coloca una breve
descripcin de la imagen (el nombre de la misma). Esta etiqueta no
es indispensable pero presenta varias utilidades. La primera es que
si la imagen no se carga por razones debidas al navegador este
mostrara esta descripcin, con lo que el usuario se puede hacer una
idea de lo que va en ese lugar. En general podemos considerar
como aconsejable el uso de este atributo
b. Atributos height y width:

Definen la altura y el ancho respectivamente de la imagen en pixels.
c. Atributo border:
Definen el tamao en pixels del cuadro que rodea la imagen. De esta
forma podemos colocarle un marco a nuestra imagen si lo
deseamos.
3. Tablas en HTML:
Una tabla en un conjunto de celdas organizadas dentro de las cuales
podemos alojar distintos contenidos.
En la mayora de los casos los diseadores realizamos la diagramacin de
una pgina Web utilizando tablas. Teniendo en cuenta que una tabla nos
permite organizar y distribuir los espacios de la manera ms ptima. Nos
puede ayudar a generar texto en columnas como los peridicos, prefijar los
tamaos ocupados por distintas secciones de la pgina. Es probable que al
comienzo nos parezca complicado trabajar con estas estructuras pero, si
deseamos crear una pgina de calidad, debemos hacernos a la idea que es
una herramienta ptima para tal fin.
Las tablas son definidas por las etiquetas <table>y</table>. Dentro de

estas dos etiquetas colocaremos todas las otras etiquetas, textos e
imgenes que darn forma y contenido a la tabla. Las tablas estn
compuestas por filas de izquierda a derecha. Cada una de estas filas es
definida por las etiquetas<tr> y </tr> Asimismo, dentro de cada fila, habr
diferentes celdas. Las cules sern definidas por las etiquetas: <td> y
</td>. Dentro de estas etiquetas ser donde coloquemos el contenido.
Aqu se muestra un ejemplo de estructura de tabla:

<table>
<tr>
<td>Celda 1, linea 1</td>
</tr>
<tr>
</tr></table
La etiqueta <th>, sirve para crear una celda cuyo contenido se pone en
negrita y centrado el contenido de esa celda.
a. Atributos para filas y celdas:
Las celdas (<td></td>) constituyen un elemento independiente del
resto del documento. Esto quiere decir que:
Podemos usar prcticamente cualquier tipo de etiqueta dentro de la

etiqueta <td> para, de esta forma, dar forma a su contenido.
Las etiquetas situadas en el interior de la celda no modifican el
resto del documento.
Las etiquetas de fuera de la celda no son tenidas en cuenta por
sta.
As pues, podemos especificar el formato de nuestras celdas a partir

de etiquetas introducidas en su interior o mediante atributos
colocados dentro de la etiqueta de celda <td> o bien, en algunos
casos, dentro de la etiqueta <tr>, si deseamos que el atributo sea
vlido para toda la fila Veamos a continuacin algunos atributos:
i. Align: Utilizado para alinear el texto dentro de la tabla.

ii. Valign: Me permite determinar si queremos que el texto
aparezca alineado arriba (top) en el medio (middle) o abajo
(bottom).
iii. Bgcolor: color de fondo de la celda elegida.
iv. Bordercolor: define el color del borde de la celda.
v. Background: imagen de fondo de la celda.
vi. Height: define la altura de la celda en pixeles o porcentaje.
vii. Width: define el ancho de la celda en pixeles o porcentaje.
viii. Colspan: Expande una celda horizontalmente.
ix. Rowspan: Expande una celda verticalmente.
Nota: el atributo height no es muy utilizado ya que las celdas toman el alto necesario
segn el contenido de la misma y adems, algunos navegadores no lo reconocen.
b. Atributos de tablas:
Adems de los atributos pertinentes a cada celda o fila, las tablas pueden ser
formateadas a partir de los atributos que nos ofrece la propia etiqueta
<table>. Mostramos a continuacin los ms importantes:
i. Align: alinea horizontalmente la tabla.

ii. Background: determina una imagen de fondo de la tabla.
iii. Bgcolor: determina el color de fondo de la tabla.
iv. Border: define el ancho del borde de la tabla.
v. Bordercolor: define el color del borde de la tabla.
vi. Cellpadding: define el espacio entre los bordes y el contenido de
las celdas.
vii. Cellspacing: define el espacio entre los bordes de la tabla.
viii. Height: define el alto de la tabla.
ix. Width: define el ancho de la tabla.
Tambin podemos anidar tablas como lo vamos a ejemplarizar a
continuacin:
<html>
<head><title>Segundo Ejemplo de Tablas</title></head>
<body>
<table cellspacing="10" cellpadding="10" border="3">

<tr>
<tdalign="center"> Celda de la tabla principal </td>
<td align="center">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td>Tabla anidada, celda 1</td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

1. El estudiante descargara el archivo comprimido Imgenes.rar que se
encuentra ubicado en la siguiente pagina Web
https://sites.google.com/site/arturoannear/introduccion-al-desarrollo-de-sitios-web
Y lo debe descomprimir en el disco local C:\ de su equipo. en la carpeta que
aparece al descomprimir dicho archivo se encontraran las imgenes que se
utilizaran en los siguientes talleres.
2. Digitar el cdigo HTML que aparece en la parte inferior, el cual dar como resultado la imagen que aparece a su
izquierda:
<html>
<head><title>Solo UnaImagen</title></head>
<body>
<font size=5><center>Solo UnaImagen<br><br>

<imgsrc="C:\Imagenes\Incap.jpg"><br><br>
</font>
</body>
</html>
3. Digitar el cdigo HTML que aparece en la parte inferior, el cual dar como resultado la imagen que aparece a su
derecha:
28
<html>
<head><title>Imagen con texto</title></head>
<body>
<font size=5>
<imgsrc="C:\Imagenes\car1.jpg" align=top>Caricaturas<br><br>
<imgsrc="C:\Imagenes\car2.jpg"
align=middle>Caricaturas<br><br>
<imgsrc="C:\Imagenes\car3.jpg" align=bottom>Caricaturas
</font>
</body>
</html>
4. El estudiante observara la imagen de la parte inferior y digitara en un archivo del bloc de notas el cdigo HTML;
luego de manera autnoma e independiente har que la tabla que aparece en la pagina contenga mnimo un
listado de 15 estudiantes antiguos y nuevos:
<html>
<head><title>Taller Uno Tablas</title></head>
<body>
<table border align=center width=50%>
30
<tr>
<thcolspan=2>EstudiantesNuevos</th>
<thcolspan=2>EstudiantesAntiguos</th>
</tr>
<tr>
<th>Mujeres</th><th>Hombres</tH>
<th>Mujeres</th><th>Hombres</th>
</tr>
<tr>
<td>Arturo Cardenas</td><td>Sandra Pinto</td><td>Carlos Casas</td><td>Daniela Rios</td>
</tr>
<tr>
<td>Ernesto Prez</td><td>Fernando Naranjo</td><td>Carla Rosas</td><td>Hernando Soto</td>
</tr>
</table>
</body>
</html>
1. El estudiante diseara una pgina que contenga una imagen la cual se repetir varias veces pero con distintos
atributos.
a. Una de las veces que salga debe mostrarse con su tamao original y con un borde de 3 pixeles.
b. En otra ocasin la imagen aparecer sin borde, con su misma altura y con un ancho superior al original
c. Tambin mostraremos la imagen sin borde, con su mismo ancho y con una altura superior a la original
d. Por ltimo, mostraremos la imagen con una altura y ancho mayores que los originales, pero
proporcionalmente igual que antes.
e. Las dimensiones originales de la imagen son 28x21.
2. El estudiante utilizando los conocimientos hasta ahora adquiridos creara una pgina Web en donde describan
brevemente los dispositivos internos y los perifricos del computador. La pagina debe contener una imagen como
fondo, debe utilizar tablas, imgenes, diferentes tipos de fuente, listas ordenadas y no ordenadas y las tablas
deben tener en sus celdas colores de fondo y de borde.
4. Frames (Marcos) en HTML:

Los frames nos permiten dividir la ventana del navegador en diferentes
reas. Cada una de estas reas es independiente y han de ser codificadas
con archivos HTML tambin independientes. Como resultado, cada frame o
marco contiene las propiedades especficas que le indiquemos en el cdigo
HTML a presentar en ese espacio. As mismo, y dado que cada marco es
independiente, tendrn sus propias barras de desplazamiento, horizontales
y verticales, por separado.
Una de las principales ventajas de utilizar frames es la independencia de los

mismos, pues podemos navegar por los contenidos de nuestro sitio Web
con la barra de navegacin siempre visible, y sin que se tenga que recargar
en cada una de las pginas que vamos visitando.
Un ejemplo grafico de las distribuciones que podemos conseguir con frames

lo podemos ver a continuacin:
a. Etiquetas <frameset></frameset>:
Define la disposicin grfica de los marcos en la pantalla.
Atributos:
Rows: Determina el alto de las filas
Cols: Determina el ancho de las columnas.
33
Framespacing: Espacio entre frames
b. Etiquetas <frame></frame>:
Define un solo marco que forma parte del conjunto de marcos
definidos en <frameset>.
Sus atributos son:
Marginheight Determina que tanto espacio vertical (en pixeles)
existe
entre el objeto ubicado en un marco, y los extremos superior e
inferior de este.
MarginWidth Determina que tanto espacio horizontal (en
pixeles) existe entre el objeto ubicado en un marco, y el
extremo izquierdo o derecho de ste.
Name Ofrece la capacidad de Dar nombres a las ventanas
FRAME, de modo que puedan ser utilizados como destino de
los hipervnculos.
Noresize indica que el usuario no puede redimensionar el
marco.
Scrolling Habilita una barra de desplazamiento para un marco.
Existen tres parmetros posibles SCROLLING=YES,
SCROLLING=NO y SCROLLING=AUTO que habilita la barra
solo si es necesario.
SRC indica que exhiba en un marco el contenido de un
documento HTML.
Vamos a ver un ejemplo bsico de frames y no profundizaremos en el tema

ya que las nuevas herramientas de diseo grafico facilitan en gran medida
el diseo de pginas Web con tales elementos.
<html>
<head><title>Página de frames</title></head>
<frameset COLS="20%,*" frameborder=2 framespacing=2 border=2>
<frame name="izquierda" src="TallerImagenDos.html"
marginwidth="0" marginheight="0" scrolling="auto"
frameborder="no">
<frameset ROWS="30%,*" frameborder=2 framespacing=2 border=2>
<frame name="superior" src="TallerImagenUno.html"
frameborder="no">
<frame name="principal" src="TallerTablasUno.html"
frameborder="no">
</frameset>
</frameset>
</html>
El resultado del cdigo anterior es el siguiente:
Aqu se manifiestan los ltimos consejos para terminar con este tema:
a. El ttulo de la definicin de frames es el que hereda toda la pgina
web, por eso se recomienda no dar el ttulo de "definicin de frames
u otro similar" por ejemplo, ya que toda nuestra pgina se titulara as
y seguramente no sera muy descriptivo. Si estuviramos haciendo
una pgina para el INCAP sera recomendable dar como titulo a la
definicin de frames "INCAP la Va del progreso".
b. La pgina que define los frames no tiene body. HTML puede
arrojarnos un error si lo incluimos.
c. Las pginas "TallerImagenDos.html", "TallerImagenUno.html"y
"TallerTablasUno.html" han de escribirse en archivos independientes
con el nombre indicado. En el ejemplo, dichas pginas deben
encontrarse en la misma carpeta que la declaracin de frames. Si
especificamos una ruta para acceder al archivo podemos colocarlo
en el directorio que deseemos.
d. Los colores de cada uno de los frames los hemos colocado con el
atributo bgcolor colocado en la etiqueta <BODY> de cada una de las
pginas que se muestran en los marcos.
5. Formularios en HTML:
Los formularios son una caracterstica del estndar HTML (lenguaje de
marcas de hipertexto) que permite al propietario de la pgina recolectar
informacin suministrada por los usuarios de la misma. Estos formularios
pueden ser tiles para recolectar informacin personal, informacin del
contacto, preferencias u opiniones, o cualquier tipo de que el propietario
pueda necesitar. Para definir un formulario en HTML se utilizan las
etiquetas <form></form>las cuales encierran el contenido del mismo.
a. Elementos de Entrada (Input):La mayora de los elementos de

entrada son visuales y pueden interactuar con el usuario. Su uso
depende del tipo de control y tambin del tipo de informacin que se
requiera. Los elementos de entrada de un formulario pueden ser
definidos usando tres atributos: el atributo input, el atributo button,
el atributo select y el atributo textarea.
El atributo "name" se utiliza para dar el nombre al control e identificarlo dentro de la programacin. Es de
aclarar que o todos los controles se identifican con el atributo name, este aspecto se discutir cuando se
haga referencia al los controles con esta caracterstica.
Miremos entonces los controles de entrada de datos:
Cuadro de texto: este control permite digitar lneas de texto de manera horizontal y se sugiere para
capturar informacin de corta extensin; este control se inserta dentro de la pagina Web mediante la
etiqueta input y el atributo typecon el valor text, Miremos un ejemplo bsico:
Cdigo Visualizacin
<form>
<b>Nombre del estudiante: <input
name="nombre" type="text" ></b>
</form>
Para los cuadros de texto podemos adems determinar su ancho y el nmero mximo de caracteres que
puede aceptar, mediante los atributos size para el ancho y maxlength para el nmero de caracteres; el
atributo value nos permite determinar un texto predefinido para el cuadro de texto.
37
Password: Este objeto funciona similar al cuadro de texto, con la diferencia que los caracteres escritos son
remplazados con puntos o asteriscos; maneja los mismos atributos que el cuadro de texto y su apariencia
es:
Cdigo Visualizacin
<form>
<b>Password: <input name="contrasea"
type="password" ></b>
</form>
Cuadro de texto de mltiples lneas: al igual que el cuadro de texto me permite ingresar informacin
textual, pero en este caso se puede introducir un prrafo completo ya que este control introduce salto de
lnea dependiendo del ancho del objeto; para ello se requiere de dos atributos que determinan el nmero de
caracteres y el nmero de lneas que soportara dicho objeto, tales atributos son cols y rows
respectivamente. .
Veamos un ejemplo bsico:
Cdigo Visualizacin
<form>
<b>Ingresa tus comentarios:<br>
<textareaname="comentarios" rows="4"
cols="30"></textarea></p>
</form>
Casillas de verificacin: La casilla de verificacin es una opcin simple que puede tomar el valor de
"marcado" o "desmarcado". Las casillas de verificacin pueden ser visualmente agrupadas como una lista
de opciones, pero cada una de ellas es tratada individualmente; esto quiere decir que del listado el usuario
puede seleccionar una o varias opciones. Este objeto se inserta mediante el la etiqueta input y el atributo
type con el valor checkbox.

Cdigo Visualizacin
<form>
<b>Seleccionatusaficiones:<br />
<input name="cbcine" type="checkbox"
/>Cine<br />
<input name="colectara" type="checkbox"
/>Lectura<br />
<input name="cbdeporte" type="checkbox"
/>Deporte</b>
</form>
El valor que pasa este objeto es un valor lgico y representar el estado de verificacin de la opcin.
Dependiendo del agente procesador podra ser "on/off", "checked/unckecked", "true/false", etc.
Botones de opcin: Los botones de opcin funcionan de forma similar que las casillas de verificacin con
una pequea diferencia: los botones de opcin que comparten un mismo nombre conforman un grupo de
opciones donde los usuarios no pueden seleccionar ms de una opcin a la vez. Esto significa que cuando
el usuario selecciona una opcin, el resto es automticamente deseleccionado. La etiqueta que me permite
insertar este objeto es input, el atributo es type y el valor es radio.
Para los botones de opcin el valor que enva al agente procesador es el contenido del atributo "value", lo
que significa que una lista de opciones con varias opciones slo pasar un nico valor.
Cdigo Visualizacin
<form>
<b>Estado Civil:<br>
<input name="estcivil" type="radio"
value="Casado">Casado<br>
value="Soltero">Soltero<br>
value="UnLibre>Unin Libre<br>
</b>
</form>
Listas (cuadro combinado, cuadro de lista): Estas listas se pueden insertar con dos etiquetas: la etiqueta
select que es el contenedor principal, la etiqueta option que determina las diferentes opciones que
contendr el cuadro combinado.
Cdigo Visualizacin
<html>
<head><title>Botones de
opcin</title></head>
<body>
<form>
<b>Programas tcnicos: <br />
<select name="selectinputs">
<option>[Seleccionar]</option>
<option>Sistemas</ option>
<option>Contabilidad</ option>
<option>Preescolar</ option>
<option>Secretariado</ option>
<option>Diseo Grafico</ option>
</select>
</b>
</form>
</body>
</html>
Botones: Estos controles se definen mediante la etiqueta <input> acompaada de los atributos value que
determina el texto que llevara el botn, type en cuyo valor se colocara submit, reset o button
dependiendo la tarea para la cual se crea dicho botn; estas tareas pueden ser: enviar informacin, borrar
los datos que se han introducido o desarrollar algn tipo de accin diferente a las anteriores.
A continuacin mostramos un ejemplo bsico del manejo de botones submit y reset:

Cdigo Visualizacin
<HTML>
<HEAD>
<TITLE>EjemploBotones</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM>
<TEXTAREA COLS=20 ROWS=10
NAME="Texto">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit"><INPUT
TYPE="Reset">
</FORM>
</BODY>
</HTML>
1. El estudiante utilizando el folleto del INCAP, creara un sitio Web donde se

presente al instituto con todos sus programas; se podr utilizar todo lo
aprendido hasta ahora y es indispensable que en una de las pginas del
sitio se inserte un formulario de preinscripcin con todos los datos
personales, acadmicos y laborales del usuario as como el programa,
franja y horarios respectivo de preinscripcin.
El estudiante tendr como gua al formador de la materia quien le podr dar

algunos consejos respecto al diseo y la programacin del sitio.
1. El estudiante de manera autnoma e independiente desarrollara un sitio

web que contenga como mnimo cinco pginas; el tema es completamente
libre y debe involucrar todo lo visto en cada una de las unidades hasta
ahora abordadas.
2. El estudiante utilizando internet como herramienta de consulta averiguara
que otra manera de insertar botones existe en HTML y mediante un ejemplo
que entregara al formador evidenciara su conocimiento.
10. Publicar una pgina en internet:

Uno de los objetivos de desarrollar sitios Web es de manera natural,
publicarlos en internet y que los millones de usuarios que utilizan esta
herramienta puedan acceder desde cualquier parte del mundo a ellos; por
lo tanto, se describirn brevemente algunos consejos fundamentales para
llevar a feliz trmino dicho proceso:
A. Lo primero que debemos definir es que queremos publicar: un sitio personal,
profesional, un sitio comercial, un blog u otros. De lo anterior depende el xito
o fracaso, razn por la cual hay que estar bien seguros y planificar lo mximo
posible el objetivo a conseguir.
B. Se debe tener en cuenta el presupuesto primario ya que de l depende el sitio

a crear. Si no contamos con financiacin suficiente para costear un hosting y
un dominio, ni contamos con capacitacin suficiente para editar nuestras
pginas la mejor eleccin ser utilizar un asistente de publicacin de algn
servicio de hosting gratuito o patrocinado. Por el contrario, si disponemos
de un capital generoso y podemos pagar un alojamiento profesional y
poseemos el conocimiento experto de desarrollo y diseo de pginas
podremos acceder a una publicacin de tipo profesional.
C. Teniendo definidos los aspectos anteriores el paso a seguir es determinar el

proveedor de hosting el cual depender definitivamente de nuestro
presupuesto; para ello existen una gran cantidad de dichos proveedores que
de igual manera se pueden consultar por internet.
D. De acuerdo a las necesidades del sitio debemos determinar qu

necesitamos mostrar?, de qu manera? y tener muy en cuenta detalles como
velocidad de navegacin y el uso que del puedan dar los usuarios, incluyendo
modificaciones y actualizaciones del mismo.
E. Se recomienda adems tener u nuestra disposicin un software que me
permita si es el caso y las circunstancias nos obligan subir nuestros archivos
al servidor que alojara nuestro sitio. Como ejemplo tenemos el CuteFTP o el
SmartFTP los cuales se pueden descargar por internet de manera gratuita
para uso domstico o casero.
1.El estudiante con la asesora del formador y la socializacin con sus

compaeros de clase, definirn el sitio o servidor de publicacin; se
recomienda que sean de alojamiento gratuito y preferiblemente que no
tengan publicidad, aunque con esta caracterstica no existen demasiados.
1.El estudiante siguiendo los consejos anteriormente presentados y

conociendo el proceso para publicar un sitio Web, realizara tal actividad con
cada uno de los sitios o paginas creados.

UnidadDos HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

UnidadDos HTML

Transféré par

Droits d'auteur :

Formats disponibles

INTRODUCCIN AL DESARROLLO DE SITIOS WEB

1. Conceptos bsicos del lenguaje de programacin HTML.

1. Conoce y utiliza de manera eficiente y funcional los comandos bsicos del

Indicadores de Logro Evidencia de

Desarrolla pginas Web eficientes siguiendo

Publica la pgina en internet para que se Producto

El Formador Dice y Hace:

1. Conceptos bsicos del lenguaje de programacin HTML

Los navegadores WWW leen estos archivos de texto e interpretan esas

Para comenzar a trabajar con HTML solo requerimos de dos herramientas

2. Caractersticas generales del lenguaje:

Una apertura de forma general <etiqueta>

Un cierre de tipo </etiqueta>

Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento

<b>Esto est en negrita</b>

Esto est en negrita

<html></html>Indica al navegador que el documento que est leyendo es

<head></head>en esta etiqueta se detalla el encabezado de la pgina

<body></body>Cuerpo de la pgina donde se despliega el contenido

Miremos un ejemplo bsico de lo que acabamos de describir:

<head> Este es el encabezado</head>

El Formador Dice y el estudiante Hace:

Nuestra primera pgina:

Teniendo en cuenta lo visto hasta ahora, explicare de manera sencilla como

El siguiente texto se copiara en el Bloc de notas de Windows:

Luego de copiarlo se guardara con el nombre de EjemploUno.html dentro

La apariencia en el bloc de notas ser la siguiente:

Y al ejecutarse el archivo HTML se ver algo como:

Como puede observar el estudiante, la pgina web carece de formato y no

Ejercicios para hacer en clase:

1. El estudiante aplicando lo visto hasta el momento, creara una pgina Web

Ejercicios para hacer en casa:

El Formador Dice y Hace:

4. Comandos Bsicos de HTML:

<head><title>Este ser el ttulo de la pgina</title>

b. Definicin de prrafos: <p></p>

Por defecto un prrafo estar alineado a la izquierda, pero mediante el

LEFT Alineacin a la izquierda por defecto

c. Salto de lneas: <br></br>

d. Ttulos de encabezado:<hn></hn> (n es el nmero del

Y la pgina Web resultante tendr la siguiente apariencia:

Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto,

Color Especfica el color de la fuente.

<font size=3 color=blue face="arial black"><p align=Left>Bienvenido al INCAP<br>

<i><font size=5 color=red face="comic sans ms"><p align=Right>Bienvenido al INCAP<br>

<h1>Este es un ejemplo de Encabezado de nivel 1</h1>

El aspecto que tendr el cdigo en el bloc de notas ser:

Y la pgina Web resultante mostrara algo similar a:

Si se requiere que la totalidad del texto de una pgina Web tenga el

El cdigo anterior dar el color verde al

color para determinar un color diferente

El Formador Dice y el estudiante Hace:

Ejercicios para hacer en clase:

1. El estudiante Consultara por Internet, como se puede justificar texto en

<hr align=left width=35% size=5>

<font color=blue><h3>Nombres: Jesus Arturo</h3>

<hr align=left width=35% size=5>

<hr align=left width=35% size=5>

<hr align=center width=80%>

La pgina debe tener el siguiente aspecto:

El estudiante cambiara los datos de la persona que aparece en el cdigo por

El archivo se guardara en la carpeta creada en apartados anteriores y cuyo

El Estudiante Dice y Hace:

Ejercicios para hacer en casa: