Vous êtes sur la page 1sur 16

Regional Distrito Capital ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACIN FASE DEL PROYECTO: ANALISIS GUIA DE APRENDIZAJE No.

4: HTML DURACIN : 4 Horas FORMACIN POR COMPETENCIAS LABORALES METODOLOGIA DE FORMACION POR PROYECTOS Centro de Electricidad Electrnica y Telecomunicaciones SERVICIO NACIONAL DE APRENDIZAJE - SENA

Bogot D. C., Marzo 24 de 2012

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 2 de 16

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 3 de 16

OBJETIVO: Entender conceptos bsicos de programacin para Internet (Internet, servicios, WWW, SGML, HTML, XHTML, etc), as como la forma de aplicarlo en la formulacin y solucin de problemas, investigando, analizando, y desarrollando las preguntas planteadas en la gua.

EVIDENCIA S DE APRENDIZAJE DE CONOCIMIENTO

PRODUCTO PARA EL PORTAFOLIO

Taller que clarifica mediante ejemplos y Comprende los conceptos bsicos de la ejercicios las principales caractersticas de Programacin para Internet (Manejo de la Programacin para Internet, permitiendo Listas, Enlaces e Imgenes en un verificar el adecuado entendimiento y documento html). aplicacin de los conceptos planteados en la gua. Analiza y aplica los conceptos en la solucin de la gua.

CONTENIDO ACLARATORIO

LISTAS (OL,LI,UL,DL(DT,DD))
Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en comn:

11 Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estar encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento
de la lista est en una lnea nueva aunque todo seguido consiga en la presentacin el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones. Ejemplo Cdigo Proceso: <ol> Visualizacin Proceso:

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 4 de 16

4. Paso 4 11 Listas con vietas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, tambin estar encabezado por la tag <li>. El resultado es que el navegador inserta vietas (marcadores) delante de cada elemento. Ejemplo Cdigo Artculos: <ul> <li>Artculo <li>Artculo <li>Artculo <li>Artculo </ul> Visualizacin Artculos:

<li>Paso <li>Paso <li>Paso <li>Paso </ol>

1</li> 2</li> 3</li> 4</li>

1. 2. 3.

Paso 1 Paso 2 Paso 3

1</li> 2</li> 3</li> 4</li>

Artculo 1 Artculo 2 Artculo 3

11

Artculo 4 Listas de men y de directorio: Estn en desuso puesto que su resultado suele ser, prcticamente, idntico al de las listas con vietas. Men: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>. Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>.
Listas de glosario: Cada elemento de la lista est compuesto por un trmino y una definicin y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el trmino se usa la tag <dt> y para la definicin la tag <dd>. Generalmente el navegador colocar trmino y definicin en dos lneas diferentes pero esto se puede evitar aadiendo a la tag de apertura el atributo compact: <dl compact>. Ejemplos

11

Cdigo Visualizacin Lista de colores disponibles: Lista de colores disponibles: <dl> Rojo <dt>Rojo</dt> Costrudo con R:255 ; G:0 ; <dd>Costrudo con <em>R:255</em> ; G:0 ; B:0 B:0</dd> Verde <dt>Verde</dt> Costrudo con R:0 ; G:255 ; <dd>Costrudo con R:0 ; <em>G:255</em> ; B:0 B:0</dd> Azul <dt>Azul</dt> Costrudo con R:0 ; G:0 ; <dd>Costrudo con R:0 ; G:0 ; B:255 <em>B:255</em></dd> Negro <dt>Negro</dt> Costrudo con R:0 ; G:0 ; <dd>Costrudo con R:0 ; G:0 ; B:0</dd> B:0

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 5 de 16

<dt>Blanco</dt> <dd>Costrudo con R:255 ; G:255 ; B:255</dd> </dl> Todos los trminos listados primero. Cdigo Trminos usados en documentos HTML: <dl> <dt>HTML</dt> <dt>CSS</dt> <dt>JS</dt> <dd>Lenguaje de etiquetado hipertextual</dd> <dd>Hojas de estilo en cascada</dd> <dd>JavaScript</dd> </dl>

Blanco Costrudo con R:255 ; G:255 ; B:255

Visualizacin Trminos usados en documentos HTML: HTML CSS JS Lenguaje de etiquetado hipertextual Hojas de estilo en cascada JavaScript

11

Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarn todo el conjunto de las listas y las tags de las listas secundaras se cerraran antes de volver a la lista principal. Ahora quiz le empiece a convenir sangrar el propio cdigo conforme lo va escribiendo en HTML.

ATRIBUTOS id (name) El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser nico en el documento y puede ser usado para referirse a ese elemento. class (cdata) El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento est asociado. Una clase provee atributos visuales para los elementos. style (style) Define un estilo visual para el elemento. Es una mejor prctica definir atributos en hojas de estilos externas agrupndolos en clases. Los atributos en el parmetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma. Si ests escribiendo cdigo XHTML te recomendamos no utilizar este

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 6 de 16

atributo y probar con las clases de hojas de estilo (con el atributo "class"). title (text) Indica un ttulo para el elemento. Usado para dar una descripcin acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento. lang (langcode) Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido". Al escribir cdigo XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en"). type(Este atributo ha sido desaprobado) Provee informacin sobre el estilo del artculo de la lista (los valores son insensibles a maysculas/minsculas). Para listas sin orden (tag HTML ul), los valores posibles son: disc: Dibuja un crculo relleno. circle: Dibuja un crculo sin relleno. square: Dibuja un cuadrado sin relleno. Para listas ordenadas (tag HTML ol), los valores posibles son: 1: nmeros rabes (1, 2, 3,...). a: letras minsculas (a, b, c,...). A: letras maysculas (A, B, C,...). i: nmeros romanos en minsculas (i, ii, iii,...). I: nmeros romanos en maysculas (I, II, III,...).

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 7 de 16

ENLACES (A(HREF)),EXTERNOS E INTERNOS(A(NAME)) El tag HTML a define un "ancla" (anchor) y puede ser utilizado para establecer un vnculo a otro documento, como un marcador de pgina, o como ambos. Cuando es usado como marcador de pgina debes definir un id o nombre (usa "id" para XHTML estricto o ambos "id" y "name" con el mismo valor para lograr compatibilidad) de manera que puedas apuntar al mismo desde otras instancias. El id debe ser nico y seguir las reglas descritas para el atributo "name". Si no se define el atributo "href", el aspecto visual del texto no se altera. Ejemplo: Cdigo <a id="bookmark" name="bookmark">Primer marcador de pgina llamado "bookmark". Nos referiremos al mismo en otros ejemplos.</a> Visualizacin Primer marcador de pgina llamado "bookmark". Nos referiremos al mismo en otros ejemplos.

Cuando el tag HTML a es usado para establecer un vnculo a otra pgina el atributo "href" es definido y describe la ubicacin del recurso referido. Estos vnculos son usualmente mostrados de una manera especial por los navegadores usando decoraciones de texto, como color y/o subrayados. Ejemplo: Cdigo <a href="http://www.w3.org">World Wide Web Consortium</a><br /> <a href="comment.html">El tag HTML comment</a> Visualizacin World Wide Web Consortium El tag HTML comment

Y finalmente, el tag HTML a puede ser usado para ambos propsitos. Mientras refiere a otro documento, este ancla insertar un marcador en esta pgina. Cdigo <a id="vinculodoctype" href="doctype.html">El tag HTML !DOCTYPE</a> Visualizacin El tag HTML !DOCTYPE

Atributos id (name) El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser nico en el documento y puede ser usado para referirse a ese elemento. Ejemplo: Comienzo del cdigo <p id="parrafo1">Este es el primer prrafo nombrado parrafo1. Para cambiar dinmicamente las propiedades del mismo usa este identificador.</p>Fin del cdigo

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 8 de 16

class (cdata) El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento est asociado. Una clase provee atributos visuales para los elementos. Ejemplo: Comienzo del cdigo <p class="referencias">Este artculo est basado en el libro "Viento en los rboles" por Jhon L. Brooks</p> <p class="referencias importante">Este artculo est basado en el libro "Viento en los rboles" por Jhon L. Brooks... y es ms importante que el anterior.</p>Fin del cdigo

style (style) Define un estilo visual para el elemento. Es una mejor prctica definir atributos en hojas de estilos externas agrupndolos en clases. Los atributos en el parmetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma. Si ests escribiendo cdigo XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class"). Ejemplo: Comienzo del cdigo <p style="color: #0000FF; font-size: 12pt">Este es un prrafo con un estilo definido</p><p>Y este es otro texto sin estilo.</p>Fin del cdigo

title (text) Indica un ttulo para el elemento. Usado para dar una descripcin acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento. Ejemplo: Cdigo <a title="HTMLQuick.com" href="http://www.htmlquick.com">Cdigo HTML</a> Visualizacin Cdigo HTML

href (uri) Especifica el recurso de destino para el elemento. Comnmente usado para referirse a pginas en el mismo dominio o a pginas externas.

Ejemplo:

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 9 de 16

IMAGENES IMG(SRC,WIDTH,HEIGHT,BORDER,ALT,ALIGN,HSPACE,VSPACE ) El tag HTML img inserta un archivo de imagen apuntado por el atributo "src", donde es definido, aunque tambin puede ser declarado como "flotante". Es una mejor prctica lograr esto usando hojas de estilo en lugar del atributo desaprobado "align". Atributos id (name) El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser nico en el documento y puede ser usado para referirse a ese elemento. class (cdata) El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento est asociado. Una clase provee atributos visuales para los elementos. style (style) Define un estilo visual para el elemento. Es una mejor prctica definir atributos en hojas de estilos externas agrupndolos en clases. Los atributos en el parmetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma.Si ests escribiendo cdigo XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class"). title (text) Indica un ttulo para el elemento. Usado para dar una descripcin acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento. lang (langcode) Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido". Al escribir cdigo XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en"). Ejemplo: Comienzo del cdigo <p lang="en">This is a paragraph in

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 10 de 16

english.</p> <p lang="es">Este es un prrafo en espaol.</p>Fin del cdigo dir Especifica la direccin de texto del contenido y atributos del elemento, as como la direccionalidad de las tablas. Tiene dos valores posibles que son insensibles a maysculas/minsculas: RTL: Derecha a izquierda. LTR: Izquierda a derecha. Ejemplo: Comienzo del cdigo <q lang="he" dir="rtl">...Una cita en Hebreo...</q> Fin del cdigo alt (text) El atributo "alt" define un texto alternativo diseado para servir como reemplazo textual para objetos que son usualmente no soportados por algunos navegadores. Tambin sirve como informacin adicional para navegadores que si los soportan (imgenes, formularios y applets). Los navegadores pueden mostrar este texto en forma de "tool tip" cuando el mouse se encuentra sobre el objeto. Este atributo es requerido al escribir cdigo XHTML. Ejemplo: Cdigo Visualizacin <img width="88" height="31" src="http://www.htmlquick.com/es/img/links/button.jpg" alt="Botn de vnculo de HTMLQuick" /> name (cdata) Especifica un nombre para el elemento, para referencias futuras (por ejemplo, hojas de estilos o JavaScript). Este atributo ha sido incluido por razones de compatibilidad y los autores deberan usar el atributo "id" en su lugar (especialmente para compatibilidad con cdigo XHTML). ismap Cuando este atributo booleano est presente, la imagen es definida como un mapa de imagen del lado servidor. La imagen tambin debe ser vinculada a un agente procesador (script) que manejar los datos enviados por el usuario. Cuando el usuario presiona el botn del

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 11 de 16

mouse sobre la imagen, las coordenadas donde se ha presionado el botn son enviadas al agente procesador (funcionado como un formulario). Recuerda que los atributos booleanos deben ser definidos en la forma nombre_atributo="nombre_atributo" para se compatibles con el cdigo XHTML. usemap (uri) Este atributo especifica el mapa de imagen al cual el elemento est relacionado. Para funcionar correctamente el atributo "usemap" de este elemento debe coincidir con el atributo "name" del tag HTML map asociado. Ejemplo: Comienzo del cdigo <img src="http://www.htmlquick.com/es/img/examples/nav1.jpg" usemap="#nav1" alt="Men de navegacin" /> Fin del cdigo Align (Este atributo ha sido desaprobado) Especifica la alineacin del elemento. Estos tres valores establecen la posicin del elemento respecto del texto circundante: bottom: Significa que el borde inferior del objeto debe alinearse verticalmente con la lnea base actual. Este es el valor predeterminado. middle: Significa que el centro del objeto debe alinearse verticalmente con la lnea base actual.. top: Significa que el borde superior del objeto debe alinearse verticalmente con la lnea base actual.. Estos dos valores establecen la posicin de un elemento flotante: left: La imagen flota sobre el margen izquierdo. right: La imagen flota sobre el margen derecho. width (length) Asigna un ancho al elemento. height (length) Asigna una altura al elemento. border (pixels) (Este atributo ha sido desaprobado) Especifica el ancho del borde del elemento.

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 12 de 16

hspace (pixels) (Este atributo ha sido desaprobado) Este atributo funciona como un margen para el elemento, definiendo la cantidad de espacio en blanco que debe insertarse a los lados derecho e izquierdo del elemento. vspace (pixels) (Este atributo ha sido desaprobado) Este atributo funciona como un margen para el elemento, definiendo la cantidad de espacio en blanco que deber ser insertado a los lados superior e inferior del elemento.

TABLAS Las tablas son posiblemente la manera ms clara de organizar la informacin. Tambin es el modo ms adecuado de maquetar texto y grficos de una manera algo ms controlada que con los parmetros ALIGN. Las tablas se definen de la siguiente manera. Primero, las caractersticas de la tabla, luego las de cada fila y dentro de sta, cada celda. As pues, una tabla con 2 filas y 3 columnas se declarar as: <TABLE> <TR> <TD>1,1</TD> <TD>1,2</TD> <TD>1,3</TD> </TR> <TR> <TD>2,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> </TABLE> 1,1 1,2 1,3 2,1 2,2 2,3

Como podis ver (o mejor no ver) la tabla no tiene mucho aspecto de tabla. Quedara mejor con unos bordes, no? Puede que tampoco le viniese mal mayor espacio entre celdas o mayor anchura. Estas son las cosas que podremos cambiar con los atributos de TABLE: BORDER Especifica el grosor del borde que se dibujar alrededor de las celdas. Por defecto es cero, lo que significa que no dibujar borde alguno. Especifica el nmero de pixels que habr entre el borde de una celda y su contenido. Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje de la anchura total disponible para l (pondremos "100%" si

CELLSPACING Define el nmero de pixels que separarn las celdas. CELLPADDING WIDTH

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 13 de 16

queremos que ocupe todo el ancho de la ventana del navegador). ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).

Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente: 1,1 2,1 1,2 2,2 1,3 2,3

Definir las filas Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con una etiqueta TR, que tiene los siguientes atributos: ALIGN VALIGN Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).

Definir las celdas Por ltimo, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas son equivalentes, pero la ltima se utiliza para encabezados, de modo que su interior se escribir por defecto en negrita y centrado. Estos son los atributos de ambas: ALIGN VALIGN WIDTH NOWRAP COLSPAN Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE). Especifica la anchura de la celda. Tambin se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este ltimo caso, ser un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador). Impide que, en el interior de la celda, se rompa la lnea en un espacio. Especifica el nmero de celdas de la fila situadas a la derecha de la actual que se unen a sta (incluyendo la celda en que se declara este parmetro). Es por defecto uno. Si se pone igual a cero, se unirn todas las celdas que queden a la derecha. Especifica el nmero de celdas de la columna situadas debajo de la actual que se unen a sta.

ROWSPAN

Posiblemente los dos ltimos parmetros no puedan quedar claros sin ejemplos. De hecho, an entendiendo perfectamente su funcin es habitual que confundamos a uno con otro.

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 14 de 16

Pero bueno, vamos a ver una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo: <TABLE BORDER=1> <TR> <TD COLSPAN=2>1,1 y 1,2</TD> <TD>1,3</TD> </TR> <TR> <TD ROWSPAN=2>2,1 y 3,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> <TR> <TD>3,2</TD> <TD>3,3</TD> </TR> </TABLE> 1,1 y 1,2 2,1 y 3,1 1,3 2,2 2,3 3,2 3,3

Como podemos ver, cuando declaramos un celda con ROWSPAN o COLSPAN, no deberemos declarar las celdas "absorbidas" o la creacin de la tabla se nos complicar de horrible manera. Ttulo de la tabla Por ltimo, vamos a ver cmo definir un ttulo a la tabla. Esto se hace por medio de la etiqueta CAPTION. Para ver cmo funciona, vamos a incluirlo en la declaracin de la tabla anterior: <TABLE BORDER=1> Ejemplo de tablas <CAPTION> 1,3 Ejemplo de tablas 1,1 y 1,2 </CAPTION> 2,2 2,3 2,1 y 3,1 ... 3,2 3,3 </TABLE> Esta etiqueta admite slo un parmetro: ALIGN, que es por defecto TOP. Si lo definimos como BOTTOM el ttulo se colocar al final de la tabla en lugar del comienzo.

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 15 de 16

TRABAJO A DESARROLLAR Aplique todos los conceptos vistos en su proyecto hoja de vida:

1- Ponga enlaces entre las pginas de su hoja de vida. 2- Organice todos los datos de cada pgina en tablas.
3- Inserte una foto suya en la parte superior derecha de la pagina donde tiene los datos bsicos. 4- Inserte una imagen alusiva a cada experiencia laboral usando diferente ubicaciones en la pgina. 5- Para cada tem de la Experiencia Laboral, use una lista de glosario. 6- Para enumerar las labores realizadas use una lista no ordenada. 7- Indique al servidor que su pgina se va a actualizar cada 2 minutos con la del SENA 8- Busque un video donde se explique la comunicacin entre cliente y servidor cuando se trabaja usando el protocolo HTTP. 9- Como ejemplo, en su listado de experiencia laboral identifique dos empresas de Software nacionales, que tengan pgina Web, ponga un enlace desde el tem indicado a dicha pgina. 10- Antes de iniciar cualquier proceso de desarrollo, se debe hacer un levantamiento de informacin, anlisis y diseo para disponerse a la tarea de implementar el proyecto, cualquiera sea la rama del conocimiento que esta estudie; en este punto de la gua, Ud dar los primeros pasos en el proyecto final de HTML, que no es ms que la implementacin de un sitio web basado en el tema que Ud. mismo eligi. Elabore la estructura de su sitio web, identifique los temas a tratar, as como subtemas, imgenes, titulo y dems componentes de su sitio, este punto debe ser presentado de forma individual el primer da de clase de la semana del 21 de septiembre de 2009.

RECURSOS DIDACTICOS EQUIPOS: Computadores ENLACES EN INTERNET http://sestud.uv.es/manual.esp/indice.htm http://www.htmlquick.com/es/reference/tags.html http://www.desarrolloweb.com/manuales/21/ http://www.webestilo.com/html/cap1a.phtml http://www.programacion.com/html/tutorial/curso/7/ HERRAMIENTAS:

Regional Distrito Capital

Centro de Electricidad Electrnica y Telecomunicaciones


Sistema de Gestin de la Calidad ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION FASE DEL PROYECTO: ANALISIS

Fecha: Junio 15 / 2011

Pgina 16 de 16

Navegador de Internet. Documentos anexos a la gua

Vous aimerez peut-être aussi