Guia 01 html

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
PROCESO FORMACIÓN INTEGRAL DEL
ESTUDIANTE
GUIA DE EDUCACIÓN PERSONALIZADA
Código: R-FE-010
Versión: 01
"El mundo no está amenazado por malaspersonas, sino por aquellasque permitenla maldad" (Albert Einstein)1
1. TEMA: LENGUAJE HTML
2. INDICADORES DE DESEMPEÑO
Personal
1. Se presenta puntualmente a clase según horario de citación, cuando se ausenta presenta excusa justificada y a tiempo;
porta adecuadamente el uniforme y es responsable comprometido y dinámico frente a cada actividad que fortalece su
formación integral.
Social
2. 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
Comprendo y aplico la terminología para la creación de páginas web en lenguaje HTML
3. COTEXTUALIZACIÓN
3.1. ¿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).
3.2 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...
3.3. Sintaxis del HTML
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 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 esta en negrita</b> El resultado Será: Esto está en negrita
GUIA N° 01
ESTUDIANTE SEDE JORNADA GRADO 6
ASIGNATURA PAGINAS WEB DOCENTE MARIA CECILIA PLATA VESGA
PERIODO I TIEMPO 10 HORAS

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
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
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 no son relevantes al momento de elaborar un documento HTML, pero es aconsejable trabajar
en minúsculas.
Actividad 1:
Teniendo en cuenta las etiquetas que componen un documento HTML realizar una página cuyo título sea “Historia de los lenguajes
de programación para páginas web”
Guardar 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
FORMATOS DE PARRAFO
<p align="left">Texto alineado a la izquierda</p>
El resultado seria:
Texto alineado a la izquierda
Para una justificación al centro:
<p align="center">Texto alineado al centro</p>
que daría:
Texto alineado al centro
Para justificar a la derecha:
<p align="right">Texto alineado a la derecha</p>
cuyo efecto seria:
Texto alineado a la derecha
Para justificar:
<p align="JUSTIFY">Texto alineado a la derecha</p>
cuyo efecto seria:
Texto justificado.
Encabezados

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
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 la <h1>, para
los encabezados más grandes, <h2> para los de segundo nivel y así hasta <h6> 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 <h1> y </h1> (o cualquier
otro encabezado) se colocará en un párrafo independiente.
Podemos ver cómo se presentan algunos encabezados a continuación.
<h1>Encabezado de nivel 1</h1>
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.
<h2 align="center">Encabezado de nivel 2</h2>
Actividad 2
Otro ejercicio interesante es construir una página web que contenga todos los encabezados posibles y párrafos sobre la historia
de los lenguajes de programación para páginas web. Se puede ver a continuación.
<html>
<head>
<title>Todos los encabezados</title>
</head>
<body>
</body>
</html>
FORMATO DE TEXTO
Cursiva: También en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un poco más larga: <em> y </em>.
<i>Texto en cursiva</i>
Subrayado: El HTML nos propone también para el subrayado el par de etiquetas: <u> y </u> (underlined). Sin embargo, el uso
de subrayados ha de ser aplicado con mucha precaución dado que los enlaces hipertexto van, a no ser que se indique lo contrario,
subrayados con lo que podemos confundir al lector y apartarlo del verdadero interés de nuestro texto.
Subíndices y supraíndices
<sup> y </sup> para los supraíndices
<sub> y </sub> para los subíndices
Aquí tenéis un ejemplo:
La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido El resultado:
La 13
CC3H4ClNOS es un heterociclo alergeno enriquecido
COLOR, TAMAÑO Y TIPO DE LETRA
Fuente o tipo de letra: <font> y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos
correspondientes a cada uno de estos parámetros que deseamos definir. A continuación os comentamos los atributos principales
de esta etiqueta:
Atributo face: define el tipo de letra. <font face="Comic"> Este texto tiene otra tipografía</font>define que el tipo de letra
es comic sans. Recordar que se debe delimitar por medio de comillas.
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

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
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 está 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.
Nombre Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
<font color="red">Este texto está en rojo</font>
Atributos para fondos
bgcolor: especificamos un color de fondo para la página. El color de fondo que podemos asignar con bgcolor es un color plano, es
decir el mismo para toda la superficie del navegador. <Body Bgcolor=”red”>
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.
<body background="d:/imágenes/fondo.jpg">
text: este atributo sirve para asignar el color del texto de la página. Por defecto es el negro.
link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito)
vlink: el color de los enlaces visitandos.
alink: es el color de los enlaces activos. Un enlace está activo en el preciso instante que se pulsa.
Ejemplo de cómo establecer un color de manera hexadecimal, agregándole color al fondo, al tipo de letra, link, link visitado y link
activo
<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" alink="ffff00">
Márgenes
Con otros atributos de la etiqueta <body> se pueden asignan espacios de margen en las páginas, lo que es muy útil para eli minar
los márgenes en blanco que aparecen a los lados, arriba y debajo de la página
leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer.
topmargin: para indicar el margen arriba y debajo de la página. Para iexplorer.
marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)
marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)
ejemplo
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">
Actividad 4: crear un archivo en html que se llame sueños2014.html y realizar la lista de sus anhelos durante este 2014
El título del documento será: Sueños 2014. Dentro del contenido del documento establecido en la eriqueta body realizar un un
titular con encabezado de nivel 1, que tenga como titulo: “ mis sueños para este 2014” en cursiva y color verde oliva.
Un segundo titular con encabezado de nivel 2, también de color verde oliva que haga mención al título de su principal sueño.
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í:

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
<p>Especialidades del Colegio Ténico Nuestra Señora de la Presentación</p>
<ul>
<li>Gestión empresarial
<li>Salud
<li>Turismo
<li>Informática
</ul>
Para determinarle un tipo de imagen a la viñeta utilizaremos: <ul type="tipo de viñeta"> donde 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). La etiquetas del
elemento y su definición son <dt> (definition term) y <dd> (definition definition) respectivamente.
Aquí os proponemos un código que podrá aclarar este sistema:
<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 download de ficheros.
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.

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
<a href="#abajo">Ir abajo</a>
Como podéis ver, 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 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.

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
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 establ ecer
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" >

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
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

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
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
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 Misa
Curso Ingles Hacer tareas
<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso Pre icfes</td>
<td>Curso misa</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

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
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>Misa</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>

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
<td>Pre Icfes</td>
<td>Misa</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>

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
</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>

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
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.htmse 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.htmse 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 "#".

COLEGIO TÉCNICO
NUESTRA SEÑORA DE
LA PRESENTACIÓN
ESTUDIANTE
Código: R-FE-010
Versión: 01
Por ejemplo, para insertar el enlace vacío:
vinculo vacio
<a href="#">vinculo vacio</a>
Este tipo de enlace resulta útil para trabajar con comportamientos javascript.
4. TRABAJO INDIVIDUAL: Desarrollar una página web con la evolución de los videojuegos (insertar animaciones, imágenes,
páginas de hiperenlaces, una página lo suficientemente completa, lo cual permita su exposición ante el grupo.
5. TRABAJO EN EQUIPO: por grupos de cuatro estudiantes seleccionar alguno de los siguientes temas comerciales,
simulando una vitrina de ventas: 1. computadores, 2. celulares, 3. casas y apartamentos, 4. paquetes turísticos, 5.
supermercados, 6. libros electrónicos y físicos 7. Universidades (pregrados y post grados) 8. Bancos (servicios crediticios)
9. Papelería 10. Servicios de transporte
6. PUESTA EN COMUN: exposición de las páginas.
7. EVALUACIÓN
 Autoevaluación:
1. Comprendí la sintaxis de html?
2. Soy capaz de realizar individualmente el procedimiento para la creación de una página web?
3. Investigue y colabore en el trabajo en equipo?
 Coevaluación: Durante la puesta en común calificar con aspectos positivos y negativos de las páginas creadas.
 Heteroevaluación: evaluación individual utilizando código creado.
8. PROFUNDIZACIÓN: comprensión del código de una página de comercio electrónico.
9. APLICABILIDAD la aplicabilidad se dará a medida que avance la programación de la asignatura, pues el código de html será
utilizado más adelante.
10. WEBGRAFIA

Guia 01 html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Guia 01 html

Similar a Guia 01 html (20)

Más de María C. Plata

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

Último

Último (20)

Guia 01 html