Modulo paginas

COLEGIO TÉCNICO NUESTRA SEÑORA DE
LA PRESENTACIÓN SAN GIL
ESPECIALIDAD INFORMÁTICA
PAGINAS WEB
PRO
PÁGINAS WEB
UNDÉCIMO
2018
Nombres y apellidos:___________________________
Docente: Ing. María Cecilia Plata Vesga
2020

Temática
1. Unidad. ¿HTML y sus etiquetas?
2. Unidad. Formularios en HTML
3. Unidad. Editores de HTML
4. Unidad. HTML5 y sus etiquetas
5. Unidad. Herramientas TIC para la creación de páginas web
6. Unidad. La nube y sus componentes
INDICADORES DE DESEMPEÑO
1. PERSONAL: se presenta puntualmente según horario asignado, cuando no
asiste presenta excusa justificada a tiempo; porta adecuadamente el uniforme y
es responsable, comprometido y dinamico frente a cada actividad que fortalece
su formación integral.
2. SOCIAL: se integra al grupo y a los subgrupos de trabajo dinamizando y
generando un ambiente favorable de aprendizaje y en sus relaciones
interpersonales asume actitudes respetuosas que propician una sana convivencia.
3. COGNITIVO:
I. PERIODO: Comprendo y aplico la terminología para la creación de
páginas web en lenguaje HTML
II. PERIODO: Diseña aplicaciones web utilizando el lenguaje HTML 5
III. PERIODO: Utiliza las herramientas TIC gratuitas disponibles en la
red para la creación de páginas web.
IV. PERIODO: Aplica las herramientas web gratuitas en el desarrollo
de aplicaciones comerciales y educativas.

I UNIDAD HTML
¿QUÉ ES HTML?
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir
hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces
(hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con
inserciones multimedia (gráficos, sonido...) La descripción se basa en especificar en el texto
la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones,
definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los
lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y
dejar que luego la presentación final de dicho hipertexto se realice por un programa
especializado (como exporer, google chorme, firefox).
HISTORIA DE HTML
El HTML fue desarrollado originalmente por Tim Bernes-Lee en el CERN (Organización
Europea para la Investigación Nuclear) y fue popularizado por el navegador Mosaic
desarrollado por la NCSA (National Center for Supercomputing Applications). Debido a gran
crecimiento de la Web ha creado la necesidad de que tanto autores como navegadores usen
la misma versión de HTML, esto ha motivado la creación de las distintas especificaciones de
HTML desde la versión 2.0 (Noviembre de 1995) hasta la actual versión 5.0.
Los documentos que usen HTML deben funcionar bien en distintas plataformas y
navegadores. Asegurando la interoperabilidad entre ambos se asegura un menor coste para
los proveedores de contenido en la Web pues sólo tienen que preocuparse de publicar una
versión de los documentos. Si no se estandarizase el HTML se correría el riesgo de que la
Web se convierta en un mundo lleno de estándares propietarios, llenos de formatos
incompatibles entre sí, reduciendo el potencial comercial para todos los participantes. Cada
versión del HTML ha intentado reflejar el mayor consenso posible entre los miembros de la
industria de forma que la inversión de los proveedores de contenido no se convierta en
inservible por no poderse leer los documentos en un corto periodo de tiempo.
HTML ha sido creado con la intención de que todos los tipos de dispositivos puedan usar
información en la Web: ordenadores con distinta velocidad de proceso y ancho de banda
usando pantallas con distintas resoluciones y profundidades de color, teléfonos móviles,
asistentes personales, dispositivos de síntesis y reconocimiento de voz...
Sintaxis del HTML

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 en el interior 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 código:
<b>Esto está en negrita</b>
El resultado Será:
Esto está en negrita
Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML
escribiéramos:
<p>Hola, estamos en el párrafo 1</p>
<p>Ahora hemos cambiado de párrafo</p>
El resultado sería:
Hola, estamos en el párrafo 1
Ahora hemos cambiado de párrafo
PARTES DE UN DOCUMENTO HTML
Además de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html>
y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole
informativo como por ejemplo el título de nuestra página.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos
nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla:
Titulo,
palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
</html>
Las mayúsculas o minúsculas son indiferentes al escribir etiquetas
A notar que las etiquetas pueden ser escritas con cualquier tipo de combinación de
mayúsculas y minúsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin
embargo aconsejable acostumbrarse a escribirlas en minúscula ya que otras tecnologías que
pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene
mal coger buenas costumbres desde el principio para evitar fallos triviales en un futuro.
TU PRIMERA PÁGINA
Podemos ya con estos conocimientos, y alguno que otro más, crear nuestra primera página.
Para ello, abre tu editor de textos BLOC DE NOTAS y copia y pega el siguiente texto en un
nuevo documento.
<html>
<head>
<title>Cocina Para Todos</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Estás en la página <b>Comida para Todos</b>.</p>
<p>Aquí aprenderás recetas fáciles y deliciosas.</p>
</body>
</html>

Ahora guarda ese archivo con extensión .html o .htm en tu disco duro. Para ello accedemos
al menú Archivo y seleccionamos la Opción Guardar como. En la ventana elegimos el
directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html.
Así se verá el archivo guardado, el icono corresponde según el navegador que esté
predeterminado en el computador. (explorer, chorme, mozilla)
PARRAFOS
Los párrafos delimitados por etiquetas pueden ser fácilmente justificados a la izquierda,
centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de
un atributo align. Un atributo no es más que un parámetro incluido en el interior de la etiqueta
que ayuda a definir el funcionamiento de la etiqueta de una forma más personal. Veremos a
lo largo de este manual cantidad de atributos muy útiles para todo tipo de etiquetas. Así, si
deseásemos introducir un texto alineado a la izquierda escribiríamos:
Texto alineado a la izquierda: <p align="left">Texto alineado a la izquierda</p>
Texto alineado a la izquierda

Para una justificación al centro: <p align="center">Texto alineado al centro</p>
Texto alineado al centro
Para justificar a la derecha: <p align="right">Texto alineado a la derecha</p>
Texto alineado a la derecha
en cada caso el atributo align toma determinados valores que son escritos entre comillas. En
algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento
de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para
el caso de align, el valor por defecto es left.
ACTIVIDAD 1
Realizar una página que contenga: 2 Párrafos centrados, 3 Párrafos alineados a la derecha,
Un salto de línea, 1 párrafo alineado a la izquierda. El tema sobre el cual se realizará la página
es “DELITOS INFORMÁTICOS”, la página debe guardarse así: delitosinformaticos.html
ENCABEZADOS (TÍTULOS)
Existen otras etiquetas para definir párrafos especiales, formateados como títulos. Son los
encabezados o Header en inglés. Como decimos, son etiquetas que formatean el texto como
un titular, para lo cual asignan un tamaño mayor de letra y colocan el texto en negrita. Hay
varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan. La
etiqueta en concreto es para los encabezados más grandes, para los de segundo nivel y así
hasta que es el encabezado más pequeño. Los encabezados implican también una separación
en párrafos, así que todo lo que escribamos dentro de (o cualquier otro encabezado) se
colocará en un párrafo independiente. Podemos ver cómo se presentan algunos encabezados
a continuación.
Encabezado de nivel 1
Se verá de esta manera en la página: Encabezado de nivel 1 Los encabezados, como otras
etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2
alineado al centro.
Se verá de esta manera en la página: Encabezado de nivel 2 Otro ejercicio interesante
es construir una página web que contenga todos los encabezados posibles. Se puede
ver a continuación.

<html>
<head>
<title>Todos los encabezados</title>
</head>
<body>
<h1>Encabezado de nivel 1</h1>
</body>
</html>
Atributo size:
Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo. Si hablamos en
términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden
creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para
la más grande.
<font size=4>Este texto es más grande</font>
Atributo color
El color del texto puede ser definido mediante el atributo color. Cada color es a su vez
definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una
de estas partes representa la contribución del rojo, verde y azul al color en cuestión.
<font color="red">Este texto está en rojo</font>
Este texto está en rojo Que se visualizaría así en una página web. Este texto está en rojo
ATRIBUTOS PARA PÁGINAS
Las páginas HTML pueden construirse con variedad de atributos que le pueden dar un
aspecto a la página muy personalizado. Podemos definir atributos como el color de fondo, el

color del texto o de los enlaces. Estos atributos se definen en la etiqueta <body> y, como
decíamos son generales a toda la página.
Atributos para fondos
bgcolor: especificamos un color de fondo para la página. los colores y HTML hemos
aprendido a construir cualquier color, con su nombre o su valor RGB. El color de fondo
que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie
del navegador.
background: sirve para indicar la colocación de una imagen como fondo de la página. La
imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el
espacio del fondo de la página. En capítulos más adelante veremos como se insertan imágenes
con HTML y los tipos de imágenes que se pueden utilizar.
Ejemplo de fondo
Vamos a colocar esta imagen como fondo en la página.
La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la
página. En este caso se colocaría la siguiente etiqueta
<body>
<body background="fondo.jpg">
COLOR DEL TEXTO
text: este atributo sirve para asignar el color del texto de la página. Por defecto es el negro.
Además del color del texto, tenemos tres atributos para asignar el color de los enlaces de la
página. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la página
para que los usuarios puedan identificarlos fácilmente. Para ello suelen aparecer subrayados
y con un color más vivo que el texto. Los tres atributos son los siguientes:
link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito)
vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitado. Es el
color que tendrán los enlaces que ya hemos visitado. Por defecto su color es morado. Este
color debería ser un poco menos vivo que el color de los enlaces normales.
alink: es el color de los enlaces activos. Un enlace está activo en el preciso instante que se
pulsa.
A veces es difícil darse cuenta cuando un enlace está activo porque en el momento en el que
se activa es porque lo estamos pulsando y en ese caso el navegador abandonará la página
rápidamente y no podremos ver el enlace activo más que por unos instantes mínimos.
Ejemplo de color del texto
Vamos a ver una página donde el color de fondo sea negro, y los colores del texto y los
enlaces sean claros. Pondremos el color de texto balnco y los enlaces amarillos, más

resaltados los que no estén visitados y menos resaltados lo que ya están visitados. Para ello
escribiríamos la etiqueta
body así:
<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" alink="ffff00">
ejemplo
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Hola amigos</h1>
<br>
<br>
Gracias por visitarme!
</td></tr></table>
</body>
IMAGENES EN HTML
<img src="img1.gif" width="28" height="21" alt="Tamaño original" border="3">
<br>
<br>
<img src="img1.gif" width="68" height="21" alt="Achatada" border="0">
<br>
<br>
<img src="img1.gif" width="28" height="51" alt="Alargada" border="0">
<br>
<br>
<img src="img1.gif" width="56" height="42" alt="Doble grande" border="0">
 Añadir un comentario no visible.
<a> </a> Establece un vínculo.
href Dirección del vínculo.
name Establece un ancla.
target
Establece el destino del vínculo: _blank,
_self, _top, _parent, o "definido"
<b> </b> Texto en negrita.
<blockquote> </blockquote> Sangrado.
<body> </body> Parte visible en pantalla del documento.
alink
Modifica el color del vínculo cuando está
activado.

background Para colocar una imagen de fondo.
bgcolor Para establecer un color de fondo.
link
Modifica el color del vínculo antes de
estar activado.
vlink
Modifica el color del vínculo cuando ya
ha sido visitado.
<br> Salto de línea.
<caption> </caption>
Establece el título de una tabla. Dentro de
<table>.
<center> <center> Centra en horizontal.
<dd> La definición del término. Dentro de <dl>
<dl> </dl> Listado de términos y sus definiciones.
<dt> </dt> Término para ser definido. Dentro de <dl>
<font> </font> Fuente.
size Tamaño de la fuente.
color Color
face Tipo de letra.
<form> </form> Formulario
action ="mailto:la_dirección_de_correo"
method ="post"
enctype ="text/plain"
<frame> </frame> Marco.
name
Nombre que se le da para referirse
después a él.
src
Establece qué documento se va a cargar
inicialmente en el marco.
frameborder
Indica si habrá o no borde entre los
marcos.
noresize
Si se escribe, el navegante no puede
redimensionar los marcos.
scrolling Establece si habrá o no barra de scrolling.
<frameset> </frameset> Estructura de los marcos.
cols Número de columnas.
rows Número de filas.
<h1> </h1>
Encabezado de primer orden.Hay otros 5:
<h2><h3><h4><h5><h6>
<head> </head> Cabecera del documento.
<hr> Línea de separación horizontal.
align Alineación de la línea.
noshade Sin efecto tridimensional.
size Grosor de la línea.
width Anchura de la línea.
<html> </html> Apertura y cierre del código.

<i> </i> Letra cursiva.
<iframe> </iframe>
Marco en línea. Carga en un marco otra
página.
name
Nombre que se le da al espacio para
posteriores referencias.
src
Establece qué documento se carga
inicialmente.
frameborder
Establece si habrá o no borde de
separación.
<img> Inserta una imagen.
alt Texto alternativo a la imagen.
border
Establece si va a tener borde o no, cuando
sirva de vínculo.
height Altura de la imagen.
width Ancho de la imagen.
src Establece qué imagen se va a insertar.
<li>
Componente de una lista. Dentro de <ul>
o de <ol>
<ol> </ol> Lista numerada de objetos.
<p> </p> Párrafo nuevo.
<sub> </sub> Subíndice.
<sup> </sup> Superíndice.
<table> </table> Tabla.
align Alinea la tabla: center, right, left
bgcolor Establece el color de fondo de la tabla.
border Establece un borde a la tabla
cellpadding
Separación entre el borde de la tabla y el
contenido.
cellspacing Separación entre las celdas.
width Establece el ancho de la tabla.
<td> </td> Celda de una tabla.
align
Establece la alineación del texto dentro de
la celda: left, center, right.
bgcolor Establece el color de fondo para la celda.
colspan Extiende la celda sobre varias columnas.
height Establece la altura de la celda.
rowspan Extiende la celda sobre varias filas.
valign
Establece la alineación vertical: top,
middle, bottom.
width Establece el ancho de la celda.
<th> </th>
Titular de la columna de una tabla. Dentro
de <tr>.
<title> </title>
Establece el nombre del documento.
Dentro de <head>

<tr> </tr> Fila de una tabla.
<u> </u> Subrayado.
<ul> </ul> Lista no numerada de objetos.
ACTIVIDAD 2
Realice una página que contenga texto para publicar en un periódico. Utilizando las tablas,
formatos de texto.
LISTAS DE VIÑETAS
Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos
de la lista es citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente
en colocarlo). La cosa queda así:
<p>Especialidades del Colegio Técnico Nuestra Señora de la Presentación</p>
<ul>
<li>Gestión empresarial.
<li>Salud.
<li>Turismo.
<li>Informática.
<li>Comunicación Social.
</ul>
Para determinarle un tipo de imagen a la viñeta utilizaremos: <ul type="tipo de viñeta">
donde el tipo de viñeta puede ser uno de los siguientes:
circle
disc
square
Listas ordenadas: se utiliza la etiqueta ol y dentro de ella se selecciona el tipo de orden.
<p>Ordenamos por numeros</p>
<ol type="1">
<li>Elemento 1
<li> Elemento 2
</ol>
<p>Ordenamos por letras</p>
<ol type="a">

<li>Elemento a
<li> Elemento b
</ol>
<p>Ordenamos por números romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Elemento x
<li> Elemento xi
</ol>
Listas de definición
Cada elemento es presentado junto con su definición. La etiqueta principal es <dl> y </dl>
(definition list). Las etiquetas del elemento y su definición son <dt> (definition term) y <dd>
(definition definition) respectivamente.
Ejemplo:
<p>Diccionario de la Real Academia</p>
<dl>
<dt>Brujula
<dd>Señórula montada en una escóbula
<dt>Oreja
<dd>Sesenta minutejos
</dl>
Hipervínculos
<a href="destino">contenido</a>
Tipos de enlaces
• Enlaces internos: los que se dirigen a otras partes dentro de la misma página.
• Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.
• Enlaces remotos: los dirigidos hacia páginas de otros sitios web.
• Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una
dirección.

• Enlaces con archivos: para que los usuarios puedan hacer descarga de archivos.
• Enlaces internos: Son los enlaces que apuntan a un lugar diferente dentro de la
misma página. Este tipo de enlaces
Son esencialmente utilizados en páginas donde el acceso a los contenidos puede verse
dificultado como cuando es largo el texto.
<a href="#abajo">Ir abajo</a>
En el ejemplo el contenido del enlace es el texto "Ir abajo" y el destino, abajo, es un punto
de la misma página que todavía no hemos definido. Ojo al símbolo #; es él quien especifica
al navegador que el enlace apunta a una sección en particular.
En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por nombre
abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma
página. En este caso, la etiqueta que escribiremos será ésta:
<a name="abajo"></a>
Enlaces locales
Para hacer un enlace desde la página principal index.html hacia yyy.html:
<a href="seccion1/paginas/yyy.html">contenido</a>
Para hacer un enlace desde xxx.html hacia yyy.html:
<a href="../seccion1/paginas/yyy.html">contenido</a>
<a href="archivo.html#seccion">contenido</a>
Como para los enlaces internos, en este caso hemos de marcar la sección con otro enlace
del tipo:
<a name="seccion"></a>
<a href="http://www.guiarte.com">ir a guiarte.com</a>
Sólo cabe destacar que todos las direcciones web (URLs) empiezan por http://. Esto indica
que el protocolo por el que se accede es HTTP, el utilizado en la web. No debemos olvidarnos
de colocarlas, porque si no los enlaces serán tratados como enlaces locales a nuestro sitio.
Enlaces a direcciones de correo Los enlaces a direcciones de correo son aquellos que nos
abre un nuevo mensaje de

correo electrónico dirigido a una dirección de mail determinada
<a href="mailto:eugim@desarrolloweb.com">eugim@desarrolloweb.com</a>
Este enlace se puede ver en funcionamiento aquí: eugim@desarrolloweb.com
Enlaces para descarga de archivos
<a href="mi_documento.pdf">Descarga el PDF</a>
Color Hexadecimal Nombre
#FFFFFF white
#000000 black
#000080 navy
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow
IMÁGENES EN HTML

Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el grafismo. La
<img src="camino hacia el archivo">
Atributo alt Dentro de las comillas de este atributo colocaremos una brevísima descripción
de la imagen. Esta etiqueta no es indispensable, pero presenta varias utilidades.
Atributos height y width : Definen la altura y anchura respectivamente de la imagen en pixels.
Atributo border: Definen el tamaño en pixels del cuadro que rodea la imagen. border="0".
Ejemplo práctico
Resultará obvio para los lectores hacer ahora una página que contenga una imagen varias
veces repetida pero con distintos atributos.
• Una de las veces que salga debe mostrarse con su tamaño originar y con un borde de 3
pixeles.
• En otra ocasión la imagen aparecerá sin borde, con su misma altura y con una anchura
superior a la original
• También mostraremos la imagen sin borde, con su misma anchura y con una altura superior
a la original
• Por último, mostraremos la imagen con una altura y anchura mayores que las originales,
pero proporcionalmente igual que antes.
Vamos a utilizar esta imagen para hacer el ejercicio:
Las dimensiones originales de la imagen son 28x21, así que este sería el código fuente:
<img src="img1.gif" width="28" height="21" alt="Tamaño original" border="3">
<br>
<br>
<img src="img1.gif" width="68" height="21" alt="Achatada" border="0">
<br>
<br>
<img src="img1.gif" width="28" height="51" alt="Alargada" border="0">
<br>
<br>
<img src="img1.gif" width="56" height="42" alt="Doble grande" border="0">
Alineación de imágenes con HTML

Para alinear una imagen horizontalmente podemos hacerlo de la misma forma que el texto,
es decir, utilizando el atributo align dentro de una etiqueta <p> o <div>. En este caso, lo que
incluiremos dentro de esa etiqueta será la imagen en lugar del texto:
Este código mostrará la imagen en el centro:
<div align="center"><img src="logo.gif"></div>
<img src="imagen.gif" align="right">
Texto alternativo
Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al
especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su
lugar, junto con el nombre de la imagen.
Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que
nosotros deseemos, gracias al atributo alt.
Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto
alternativo Imagen gato, para ello insertamos el siguiente código:
<img src="gatito.gif" alt="Imagen gato" >
Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio
que el documento actual, sino que se encuentra dentro de la carpeta imagenes. En lugar de la
imagen se mostrará lo siguiente:
Imagen gato
Si en lugar del código anterior hubiéramos insertado el siguiente código:
<img src="imagenes/gatito.gif" alt="Imagen gato" >
Borde de una imagen
En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde
alrededor, pero es posible establecer uno a través del atributo border.
El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde.
Habría que escribir:
<img src="imagenes/logo_animales.gif" border="4" >

Hay que tener en cuenta que el borde de la imagen siempre será de color negro, a no ser que
la imagen contenga un enlace, en cuyo caso el color del borde será el color establecido para
los vínculos.
Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:
<a href="http://www.aulaclic.com" target ="_blank" ><img
src="imagenes/logo_animales.gif" border="4" ></a>
Si se desea establecer un vínculo sobre una imagen y no se desea que se muestre el borde
(que por su color indica que existe dicho vínculo), es necesario establecer border="0".
Tamaño de una imagen
Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño original,
pero por diversos motivos puede interesarnos modificar dicho tamaño.
A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la
imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino
que lo que varía es la visualización de la imagen en el navegador.
El valor que pueden tomar los atributos width y height ha de ser un número, acompañado de
% cuando se desee que sea en porcentaje con respecto a la página.
Por ejemplo, para insertar la siguiente imagen (cuyo tamaño original era de 122 píxeles de
anchura y 71 píxeles de altura) con 200 píxeles de anchura y 80 píxeles de altura:
<img src="imagenes/logo_animales.gif" width="200" height="80">
Alineación de una imagen
La alineación de las imágenes se establece a través del atributo align. Este atributo indica la
alineación de las imágenes con respecto a la línea de texto en la que se encuentran.
Los valores del atributo align pueden ser los siguientes:

Valor Significado Ejemplo
absbottom inferior absoluta Imagencon
texto
absmiddle medio absoluta Imagencon
texto
baseline línea de base Imagencon
texto
bottom inferior Imagencon
texto
left izquierda
Imagencon
texto
middle medio Imagencon
texto
right derecha
Imagencon
texto
texttop texto superior Imagencon
texto
top superior Imagencon
texto
Si queremos insertar una imagen con texto a los lados: PerrosGatos<img
scr="imagenes/logo_animales.gif" align="middle">Una web de animales
TABLAS EN HTML
Tabla <table>
Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado
de la intersección entre una fila y una columna.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas
etiquetas deberán insertarse entre las etiqetas <table> y </table>.
Por ejemplo, para crear una tabla con cinco filas escribiríamos:
<table>
<tr>...</tr>
<tr>...</tr>

<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o celda <td>
Para crear una tabla no basta con especificar el número de filas, es necesario también
especificar el número de columnas.
Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos
especificar el número de celdas por fila, que equivale a especificar el número de columnas
por fila.
Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan
cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las
etiquetas <tr> y </tr>.
Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas.
Por ejemplo, para insertar la siguiente tabla:
Sabado Domingo
Pre-Icfes Dormir
Curso Ingles Hacer tareas
<table border="1">
<tr>
<td>En la mañana</td>
<td>En la tarde</td>
</tr>
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso Pre icfes</td>
<td>Dormir</td>

</tr>
<tr>
<td>Curso Ingles</td>
<td>Hacer tareas</td>
</tr>
</table>
ATRIBUTOS DE UNA TABLA
Atributo Significado Posibles valores
width ancho de la tabla un número, acompañado de % cuando se
desee que sea en porcentaje
height altura de la tabla un número, acompañado de % cuando se
cellpadding espacio entre el contenido de las
celdas y el borde
un número
cellspacing espacio entre celdas un número
border grosor del borde un número
align alineación de la tabla dentro de
la página
left (izquierda)
right (derecha)
center (centro)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal
Formato de las celdas
Es posible modificar los siguientes atributos de una celda:
Atributo Significado Posibles valores
width ancho de la tabla un número, acompañado de % cuando se
height altura de la tabla un número, acompañado de % cuando se
align alineación horizontal del
contenido de la celda
left (izquierda)
right (derecha)
center (centro)
valign alineación vertical del
contenido de la celda
baseline (línea de base)
bottom (inferior)
middle (medio)
top (superior)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal
LA TABLA QUEDARÁ ASÍ
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"
bgcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">

<td>Sabado</td>
<td bgcolor="#66CC99">Domingo</td>
</tr>
<tr>
<td>Pre Icfes</td>
<td>Dormir</td>
</tr>
<tr>
</tr>
</table>
Encabezado de columna <th>
Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero
podemos poner en su lugar las etiquetas <th> y </th>.
Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>,
pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo
que se utiliza para definir los encabezados o títulos de las columnas.
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"
bgcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<th>Sabado</td>
<th bgcolor="#66CC99">Domingo</td>
</tr>
<tr>
<td>Pre Icfes</td>
<td>Dormir</td>
</tr>
<tr>
</tr>
</table>

Título de tabla <caption>
No solamente es posible establecer títulos para las columnas, también es posible establecer
un título para la tabla mediante las etiquetas <caption> y </caption>.
Estas etiquetas han de ir después de la etiqueta <table>, y puede especificarse el valor de los
atributos align (con los valores bottom, center, left, right y top) y valign (con los valores
bottom y top).
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%" border="1" align="center"> <caption align="right"
valign="top">Titulo de la tabla<tr>
<tr>
<th>Sabado</td>
...
</tr>
</table>
Combinar celdas
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para
combinar celdas.
A través del atributo colspan se especifica el número de columnas por las que se extenderá
la celda, y a través del atributo rowspan se especifica el número de filas por las que se
extenderá la celda.
Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la
siguiente tabla:
VENTAS DE ARTICULOS
ARTICULO CANTIDAD HOMBRE
MINIMA MÁX
Impresora 2 20 $340.000
Monitor
LED 14”
10 $200.000
Mouse
Inalámbrico
50 $30.000
<table width="575" border="2" cellspacing="2">
<tr align="center" valign="middle">
<th colspan="4">VENTA DE ARTICULO</th>

</tr>
<th rowspan="2">ARTICULOS</th>
<th colspan="2">CANTIDAD</th>
<th rowspan="2">HOMBRE</th>
</tr>
<th>MINIMA</th>
<th>MAXIMA</th>
</tr>
<td>Impresora</td>
<td>2</td>
<td>20</td>
<td>$340.000</td>
</tr>
<td>Monitor LED 14”</td>
<td colspan="2">10</td>
<td>$200.000</td>
</tr>
<td>Mouse Inalambrico</td>
<td colspan="2">50</td>
<td>$300.000</td>
</tr>
</table>
Vamos a explicar un poco cómo funciona dicho código, aunque sería conveniente que
primero intentaras entender el código comparándolo con la tabla que de él se obtiene.
En primer lugar, tenemos que ver el número máximo de columnas que ha de tener la tabla.
En este caso serían cuatro columnas. Para saber el número de columnas total de la tabla,
tenemos que fijarnos en el número total de celdas que podemos obtener por fila al trazar las
líneas verticales que separan las columnas entre sí.
En la primera fila, la línea <th colspan="4">VENTA DE ARTICULO</th> indica que la
celda ocupará cuatro columnas de la tabla (la columna actual y las 3 siguientes). Como la

tabla tiene como mucho cuatro columnas y el atributo colspan de la celda vale cuatro, no hay
que definir más celdas para esa misma fila.
En la segunda fila, la línea <th rowspan="2">ARTICULOS</th> indica que la celda
ocupará dos filas de la tabla (la actual y la siguiente). Lo mismo ocurre con la línea <th
rowspan="2">HOMBRE</th>
Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como mucho
cuatro columnas, por lo que como en la línea <th colspan="2">CANTIDAD</th> el atributo
colspan vale dos, ya tenemos las cuatro celdas.
En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo que en la
tercera fila habrá que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas se
corresponden con las definidas en la fila anterior.
Las dos nuevas celdas son <th>MINIMA</th> <th>MAXIMA</th>
Hiperenlace <a>
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva
de una página o archivo.
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de
encontrarse entre las etiquetas <a> y </a>.
A través del atributo href se especifica la página a la que está asociado el enlace, la página
que se visualizará cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:
<a href="http://www.misangil.com">Visita www.misangil.com</a>
Tipos de referencias
Existen diferentes formas de expresar una referencia a una página a través del atributo href.
Referencia absoluta:Conduce a una ubicación externa al sitio en el que se encuentra el
documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http://
, el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre
de la página se cargará la página de inicio asociada al dominio.

Por ejemplo, "http://www.misangil.com" tendrá el mismo efecto que
"http://www.misangil.com/index.htm"
<a href="http://www.misangil.com">Visita www.misangil.com</a>
Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el
documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí,
con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta,
conocida como carpeta raíz del sitio.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente
dentro de la carpeta raíz del sitio, para insertar el enlace:
Sitios turisticos
<a href="/sitiosturisticos.htm">Enlace a Sitios turisticos: Hiperenlaces</a>
Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada
indica la carpeta raíz del sitio. Si el documento sitiosturisticos.htm se encontrara, por
ejemplo, dentro de una carpeta llamada sitios turisticos, y esta estuviera dentro de la carpeta
raíz del sitio, habría que escribir:
<a href="/turismo/sitiosturisticos.htm">Enlace a sitios turisticos: Hiperenlaces</a>
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero
partiendo del directorio en el que se encuentra el actual.
Por ejemplo, teniendo en cuenta que el documento sitiosturisticos.htm se encuentra dentro
de la misma carpeta que el documento actual, para insertar el enlace:
Enlace a sitiosturisticos: Hiperenlaces

<a href="sitiosturisticos.htm">Enlace a sitiosturisticos: Hiperenlaces</a>
Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se
especifica a través del atributo target al que se le puede asignar los siguientes valores:
_blank: Abre el documento vinculado en una ventana nueva del navegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en
el conjunto de marcos padre.
_self:Es la opción predeterminada. Abre el documento vinculado en el mismo marco o
ventana que el vínculo.
_top:Abre el documento vinculado en la ventana completa del navegador.
<a href="http://www.misangil.com" target ="_blank">Visita www.misangil.com en una
ventana nueva</a>
Formato de los enlaces
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
<a href="http://www.misangil.com" target ="_blank">www.aulaclic.com</a>
Mientras no se visite la página www.misangil.com, el enlace será de color rojo (#FF0000):
www.misangil..com
Mientras la página www.misangil.com sea la última visitada, el enlace será de color fucsia
(#FF0099):
www.misangil.com
Cuando se haya visitado la página www.misangil.com, el enlace será de color naranja
(#FF9900):
www.misangil.com

Vínculo a ficheros para descarga:
El valor del atributo href normalmente será una página web (con extensión htm, html, asp,
php...) pero también puede ser un fichero comprimido, una hoja de Excel, un documento
Word, un documento con extensión pdf. Cuando el enlace no es a una página Web nos
aparecerá el cuadro de diálogo que seguro habrás visto alguna vez en el que el navegador le
pide al usuario permiso para descargar el fichero en su ordenador.
El navegador reconoce algunas extensiones como asociadas a un determinado programa (por
ejemplo la extensión .doc está asociada al programa Word, .pdf al programa Acrobar Reader,
.xls al programa Excel...) en este caso en el cuadro de diálogo aparece una nueva opción, la
de abrir el fichero sin descargarlo en el disco duro del usuario.
Para nombrar el fichero podemos utilizar según el caso, una referencia externa, una referencia
relativa al sitio o una referencia relativa al documento.
Por ejemplo, en la carpeta donde se encuentra esta página tenemos el fichero Word carta.doc
y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su
disco duro, en este caso definiremos el enlace:
haz clic aquí para descargarte el fichero
De la siguiente forma:
<a href="carta.doc" tarjet=_blank >haz clic aquí para descargarte el fichero</a>
En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra
en la misma carpeta que nuestra página.
Vínculo vacío:
Al pulsar sobre un enlace vacío no se abre ninguna página ni archivo, pero el formato es el
mismo que el de cualquier otro enlace. El vínculo debe ser el símbolo almohadilla "#".
Por ejemplo, para insertar el enlace vacío:
vinculo vacío

<a href="#">vinculo vacío</a>
Este tipo de enlace resulta útil para trabajar con comportamientos javascript.
FORMULARIOS EN HTML
Un documento HTML es un archivo de texto. Si usted no posee ningún programa para
desarrollo web, puede simplemente utilizar el Bloc de Notas de Windows o cualquier otro
editor de textos. El archivo debe ser grabado con la extensión .html y el nombre que desee
(por ejemplo, micodigo.html).

Modulo paginas

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Modulo paginas

Similar a Modulo paginas (20)

Más de María C. Plata

Más de María C. Plata (20)

Último

Último (20)

Modulo paginas