Guia2 HTML

Regional Distrito Capital ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACIN FASE DEL PROYECTO: ANALISIS GUIA DE APRENDIZAJE No.
2: HTML DURACIN : 8 Horas FORMACIN POR COMPETENCIAS LABORALES METODOLOGIA DE FORMACION POR PROYECTOS Centro Gestin de Mercados, Logstica y Tecnologas de la Informacin SERVICIO NACIONAL DE APRENDIZAJE - SENA
Bogot D. C., Marzo 12 de 2012
Regional Distrito Capital Centro de Electricidad, Electrnica y Telecomunicaciones ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION Sistema de Gestin de la Calidad FASE DEL PROYECTO: DISEO
Fecha: Junio 14 de 2011
Pgina 2 de 9
Pgina 3 de 9
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. la Programacin para Internet, permitiendo verificar el adecuado entendimiento y Analiza y aplica los conceptos en la aplicacin de los conceptos planteados en solucin de la gua. la gua.
INTRODUCCION: Para que un navegador reconozca que lo que est viendo es una pgina WEB se utiliza la siguiente estructura: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  </head>  <body>  </body>  </html> 
Pgina 4 de 9
: Comentarios. Son directivas que nunca se mostrarn a travs del navegador y que le servirn para recordatorios en futuras revisiones del documento. A continuacin, vamos a ver una serie de elementos (Tags) de HTML, tiles en el momento de dar formato a las lneas de cadenas de caracteres que formaran parte de nuestro documento (pagina web); dentro de este listado se han incluido las etiquetas br, p, para dar formato, o mejor orden, en los textos de contenido del documento. SALTOS DE LINEA Y PARRAFOS es la etiqueta que sirve para indicarle al navegador que debe hacer un salto de lnea y, dada su funcin, no necesita etiqueta de cierre siempre que nos movamos en el tipo de documento determinado por las especificaciones de HTML 4.01. es la que nos sirve para indicar que lo que est comprendido entra la etiqueta de inicio y la de final forman un prrafo que se separa de lo anterior y lo posterior mediante el espacio que corresponde a un doble salto de lnea. FORMATEO DE TEXTOS TIPOS Y CUERPOS El trabajo con procesadores de texto nos ha hecho adquirir una cierta habilidad en la maquetacin o tratamiento del aspecto visual del texto. Esta situacin se ha extendido tambin a la creacin de documentos para la web. Si bien esto ha tenido una parte positiva, en tanto que ha ampliado el control sobre el aspecto visual de nuestras producciones tambin ha tenido una parte negativa: hemos perdido de vista una parte importante de la estructura de la informacin. Si le cuesta entender lo anterior puede que le resulte ms fcil si se hace una pregunta: podra un ciego interpretar correctamente un texto en el que los elementos que deseamos resaltar estn en un tamao ms grande o en un color diferente? Est claro que los elementos visuales son importantes, pero lo que no debemos perder nunca de vista es la organizacin de la informacin, de manera que siempre quede organizada de una forma clara, ordenada y comprensible, incluso si la despojamos de los atributos visuales. Una vez hecha la salvedad anterior vamos a modificar el aspecto de un documento HTML, una de las primeras operaciones sobre las que podramos practicar seran las referentes a la modificacin del tipo de letra y su tamao (al que se denomina cuerpo). Cuntos tipos de letra hay instalados en su computador? Cincuenta?... Ochenta?... Ms de cien?... Seguramente estar pensando que tiene un montn de posibilidades a la hora de disear sus pginas... pero, qu ocurrir cuando un visitante de tu pgina no
Pgina 5 de 9
tenga en su ordenador esa fuente caligrfica tan maravillosa con la que su pgina luca tan espectacular? Lo que suceder es que el navegador del visitante volver a darle formato a toda la pgina utilizando la fuente por defecto, que habitualmente suele ser de la familia serif o Times New Roman, ... y adis a su preciosa composicin de la pgina. Teniendo en cuenta lo anterior la recomendacin es que te cias a las fuentes que estn instaladas en la mayora de los equipos: Times y Arial-Helvtica> Tras esta recomendacin funcional vamos a entrar en una segunda anotacin de claro matiz esttico: Times New Roman : Se llama as por haber sido popularizada por el diario "The Times". Pertenece a la familia de las fuentes de tipo serif o "con tacn" (por las curvas que rematan los extremos). Suele dar un tono ms formal a los escritos. Es de buena legibilidad en papel y algo menos en pantalla. Arial Es la fuente de mayor uso de la familia de las helvticas, sans-serif o "de palo seco". Su carcter es algo ms informal y moderno que el de la Times. Su legibilidad en pantalla es algo ms alta que la de la Times, ya que es ligeramente mayor a igualdad de cuerpo. Comic Sans MS : No habamos mencionado esta fuente que pertenece al grupo de las fuentes de tipo caligrfico aunque tiene la caracterstica de que, al tratarse de una fuente sin ligazn entre los caracteres, es muy legible en pantalla. Es, entre las tres, la que aporta un carcter ms ligero e informal al texto, con un alto grado de legibilidad. Sin embargo no la habamos incluido en el listado de fuentes ms comunes por una cuestin esencial: es exclusiva de los sistemas Windows, por lo que los navegadores que corren bajo Linux la sustituyen por una letra de la familia arialhelvtica con una dimensin algo mayor. Ten en cuenta este dato si quieres garantizar la compatibilidad y la estabilidad del diseo interplataforma. En lenguaje HTML existen siete tamaos de letra. El tamao mayor sera equivalente, aproximadamente, a los 36 puntos de un procesador de textos y el menor a un cuerpo de 8 puntos. En la siguiente tabla font1 se aprecian algunos ejemplos de asignacin de fuentes validas El valor por defecto en los navegadores (no todos) es Times New Roman 12 pt (lo cual representa el nmero 3 con el cgido de html) en color negro. Intente colocar la fuente como Arial o Comic Sans... <body bgcolor="#ffffff"> Lo que ms se te antoje </body> Sin embargo, no se recomienda emplear la etiqueta FACE debido a que se requiere tener la fuente en la pc para poder visualizarla. Me explico, si t tienes la fuente "XYZ" en tu pc y la colocas en tu pgina web, la podr ver sin problemas, pero
Pgina 6 de 9
cuando un visitante llega y no tiene la fuente, no podr ver ese tipo de letra que coloco y ser suplantada por la fuente por defecto de su sistema. Se puede usar una combinacin de fuentes que pueden resolver este problema, tal como en Quiero aprender HTML. Para aquellos que no entienden qu ocurre aqu, tal como me pas a m, sto es lo que sucede ===> El navegador busca por la fuente Arial, si la encuentra la usa, si no la encuentra buscar por Helvetica... si no la encuentra entonces buscar por Comic Sans MS... y si no la encuentra entonces usar la fuente por defecto.
Tabla font1 ENFATIZACIN Una caracterstica que s que tiene que ver claramente con el formato de presentacin del texto es la utilizacin de las tipografas en negrita, itlica y subrayada. Su utilizacin se ajusta al convenio general de etiqueta de apertura y etiqueta de cierre limitando el texto al que se aplica el efecto.
Pgina 7 de 9
Este cdigo... ...da como resultado esto es negrita ...da como resultado... esto tambin se suele mostrar como negrita ...da como resultado... mostrar como negrita esto es itlica ...da como resultado... esto tambin se suele mostrar como itlica ...da como resultado... mostrar como itlica esto es subrayada ...da como resultado...
esto es negrita esto tambin se suele esto es itlica esto tambin se esto es subrayada suele
Como hemos visto hay dos etiquetas para enfatizar un texto utilizando negrilla y otras dos para la itlica. La primera etiqueta de ambas parejas hace referencia al aspecto "fsico", mientras que la segunda forma de llamarlas tiene ms que ver con el "sentido" o la importancia dentro del contexto. De hecho la etiqueta proviene de la palabra bold que significa exactamente negrita, mientras que significa fuerte o enftico. En cuanto a la corresponde a "italic" que hace referencia al aspecto fsico de la letra, mientras que procede de emphasized que podramos traducir como enfatizado o recalcado. EJERCICIOS 1- En un archivo .html, llamado ejerHtml1, escriba 5 parrafos, aplicando en cada uno de ellos las etiquetas de formato de texto vistas en el pto anterior. 2- En que parte del documento debera ir este texto? Rta = LOS TTULOS O CABECERAS Incluimos este tipo de etiquetas en esta seccin de formato pero es importante que tengas muy en cuenta el aviso que se muestra a continuacin. Aunque es frecuente utilizar los tamaos de ttulos como elementos que colaboran en el diseo grfico de la pgina no es sta su finalidad. La funcin de los ttulos es estructurar los contenidos creando una jerarqua que ponga de manifiesto la importancia de cada uno de los bloques en el esquema general. As pues, la recomendacin es que, aunque las variaciones de tamao que introducen pueden ayudarle al disear el aspecto grfico, los considere como elementos que tienen que ver con la estructura de la informacin y los utilice como titulares que te sirven para encabezar y organizar los contenidos en epgrafes coherentes. Sin tener en cuenta las personalizaciones que haya incluido el usuario, cada navegador construye la pgina tomando un tamao base para la letra. Teniendo en cuenta este dato, los ttulos se construyen de forma escalonada tomando como referencia este tamao base y disponemos de seis opciones para las mismas. Si ejecutamos el cdigo fuente de ejemplo en un navegador, comprobaremos que las etiquetas de apertura se han colocado delante de la primera letra del texto de
Pgina 8 de 9
la cabecera y se cierra al final del mismo para volver al texto normal. (Adems las etiquetas de Ttulo introducen un salto de prrafo sin necesidad de indicarlo).
EJERCICIOS 1- Escribir un texto en el que se incluya un ttulo y subttulos usando todos los tamaos de ellos, con al menos un prrafo (de ms de un rengln) por subtitulo. 2- Modificar zonas del texto variando el tipo de letra, el cuerpo, el color y los atributos de enfatizacin. 3- Guardar con el nombre ejerHtml2.html 4- Elaborar su Hoja de vida en un conjunto de paginas web, dentro de una misma carpeta, estructurada de esta forma: - Datos personales - Estudios Realizados - Experiencia Laboral Cada una en una pgina, aplqueles un mismo fondo a las 3 pginas, use el mismo tipo de letra, asi como los diferentes tamaos de ttulos y todos los tags de nfasis vistos en el documento. 5- Arme un archivo llamado [numerodegrupo].rar o .zip con todos los ejercicios de la gua, y enve para su revisin y calificacin al correo rortizgclase@misena.edu.co, de acuerdo con los parmetros establecidos con anterioridad.
RECURSOS DIDACTICOS EQUIPOS: Computadores
Pgina 9 de 9
HERRAMIENTAS: Navegador de Internet. Documentos anexos a la gua

Guia2 HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Guia2 HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

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

Bogot D. C., Marzo 12 de 2012

Fecha: Junio 14 de 2011

Fecha: Junio 14 de 2011

EVIDENCIA S DE APRENDIZAJE DE CONOCIMIENTO

PRODUCTO PARA EL PORTAFOLIO

Fecha: Junio 14 de 2011

Fecha: Junio 14 de 2011

Fecha: Junio 14 de 2011

Fecha: Junio 14 de 2011

Fecha: Junio 14 de 2011

RECURSOS DIDACTICOS EQUIPOS: Computadores

Fecha: Junio 14 de 2011

HERRAMIENTAS: Navegador de Internet. Documentos anexos a la gua

Anda mungkin juga menyukai