Necesitas una Pgina Web? Los Mejores Freelancers de Amrica Latina en Workana. workana.

com/Freelancers Curso Programacion Java Profesor en Vivo, Material, Vdeos. Garanta de Satisfaccin. Comprueba
Capacityacademy.com/Curso-de-Java

Miami Patent Attorney Cost Effective Patents & Trademarks Free Consulation: 305-374-8303
www.FloridaIPAttorney.com

Partes: 1, 2 1. Utilizas los elementos fundamentales del diseo de una pgina Web 2. Diseo de una pgina web 3. Manejar los elementos bsicos del lenguaje HTML en la creacin de pginas web 4. Texto en HTML 5. Tablas 6. Listas 7. Marquesinas 8. Otras etiquetas tiles Submdulo

PROPSITO: Al trmino del submdulo, sers competente para disear y crear una pgina web en lenguaje html. El presente submdulo tiene como objetivo prepararte para que aprendas a disear y estructurar una pgina web. Por lo que como proyecto elaborars el diseo de una pgina web personal en cdigo HTML en el editor de texto bloc de notas con las caractersticas siguientes: Una pgina principal que incluya: ? Encabezado ? Imgenes ? Hipervnculos a otras pginas web ? Hipervnculos a tus pginas.

? Opcin para enviar un correo Una segunda pgina, en la que apliques las tablas Y por ltimo una pgina, en la que apliques listas. Las tres pginas deben de estar enlazadas entre s y a una pgina en internet. COMPETENCIAS:

Utiliza procedimientos y herramientas para el desarrollo de documentos electrnicos de acuerdo a los requerimientos. Programa y administra pginas web para la difusin y captacin de la informacin. Elabora pginas web con animaciones interactivas de aplicacin general y especfica, en un ambiente multimedia.

CONTENIDOS: 1.1 Utilizar los elementos fundamentales del diseo de una pgina web. 1.2 Manejar los elementos bsicos del lenguaje HTML en la creacin de pginas web. ACTIVIDAD 1 En binas realiza la lectura de las competencias que se pretende alcanzars al trmino del submdulo. Posteriormente responde las preguntas y termina comentando tus respuestas a travs de una discusin guiada por el docente a la vez que atiendes las explicaciones y ejemplos del mismo. 1.- Qu competencias voy a desarrollar? ______________________________________________ ______________________________________________ ______________________________________________ 2.- Para qu me van a servir? ________________________________________________ ______________________________________________ 3- En qu momento las puedo aplicar? _______________________________________ _________________________________________

__________________________________________ ACTIVIDAD 2 En binas comenta los lugares por los que has navegado en internet y trata de recordar lo que has observado en cuanto a la estructura, informacin, enlaces etc. de cada uno de los sitios que has visitado y responde las siguientes preguntas, posteriormente en una lluvia de ideas guiada por el docente comenta el tipo de pgina que te gustara disear y menciona l por qu? 1.- Que entiendes por una pgina web? _________________________________________ 2. Qu tipo de informacin tiene las pginas web que has visitado? _________________________________________ 3. Qu diferencia encuentras entre una pgina web y un sitio web? ___________________________________________________ 4. Qu tienen en comn los sitios web que has visitado? ___________________________________________ 5. Para qu crees que sirve una pgina web? ____________________________________________________ 6.- Qu te gustara que tuviera la pgina web que disears? __________________________________________________ _______________________________________________ ______________________________________________

Utilizas los elementos fundamentales del diseo de una pgina Web

ACTIVIDAD 3 Para iniciar una pgina web, primero debes de conocer sus caractersticas y las reglas bsicas que debes de seguir para disearla, por lo tanto realiza la lectura "Qu es HTML?" y elabora un resumen. Pregunta a tu profesor las dudas que te vayan surgiendo. Qu es HTML?

Para abreviar una larga historia, podemos decir que un cientfico llamado Tim BernersLee invent HTML all por 1990. El objetivo era facilitar a cientficos de diferentes universidades el acceso a los documentos de investigacin de cada uno de ellos. El proyecto obtuvo un xito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este cientfico sent las bases de la web tal y como la conocemos en la actualidad.

HTML es un lenguaje que hace posible presentar informacin (por ejemplo, investigaciones cientficas) en Internet. Lo que ves al visualizar una pgina en Internet es la interpretacin que hace el navegador del cdigo HTML. Para ver el cdigo HTML de una pgina slo tienes que dar clic en la opcin "Ver" de la barra de mens y elegir "Cdigo fuente" (en Internet Explorer). Si quieres crear sitios web, no hay otra solucin que aprender HTML. Incluso si usas un programa como Dreamweaver, por ejemplo, para la creacin de sitios web, poseer unos conocimientos bsicos de HTML hace la vida mucho ms fcil y tus sitios web mucho mejores. HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual", y esto ya es ms de lo que necesitas saber a estas alturas. En todo caso, para mantener un buen orden, necesitas conocer su significado con mayor detalle.

Hiper (Hyper): Es lo contrario de lineal. Los programas de la computadora se ejecutaban de forma lineal: cuando el programa haba ejecutado una accin segua hasta la siguiente lnea, y despus de sta a la siguiente, y a la siguiente, HTML, sin embargo, ahora es diferente: se puede ir a donde uno quiera cuando uno quiera. . Texto (Text): Se refiere al texto de la pgina web. Marcado (Mark-up): Es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edicin de textos con encabezados, vietas, negrita, etc. Lenguaje (lenguaje): Es lo que es HTML. Este lenguaje hace uso de muchos trminos en ingls.

Cules son las caractersticas del lenguaje HTML?

Este lenguaje ser el encargado de convertir un inocente archivo de texto inicial en una pgina web con diferentes tipos y tamaos de letra, con imgenes impactantes, animaciones sorprendentes, formularios interactivos, etc. Estas caractersticas son las que marcaron el diseo de todos los elementos del WWW incluida la programacin de pginas Web.

L a pgina Web tiene que ser distribuida: La informacin repartida en pginas no muy grandes enlazadas entre s. Debe ser fcil navegar por la pgina. Tiene que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo, etc.) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS, etc.) Debe ser dinmico: el proceso de cambiar y actualizar la informacin debe ser gil y rpido.

Reglas bsicas en el diseo

Tener algo interesante que decir en tu PGINA web: Todo el mundo ya conoce las herramientas de bsqueda. Haz que tus enlaces sean pertinentes al tema que estas tratando. Recuerda que no en todos los Buscadores aparecen igual: No hagas que tu pgina dependa demasiado de ciertos comandos HTML que pueden no aparecer en todos los buscadores. Algunos buscadores pueden no aceptar tus grficas, as que proporciona textos alternativos. Mantn tu pgina con un mximo de 15K en imgenes o fraccinala si sta es muy grande. No usar grficas de otros autores si no est autorizado: Hay muchas fuentes de grficas gratis. Tambin existen graficadores sencillos con los que puedes crear Tus propias grficas. Reconocer el trabajo de los dems: Si algn "Sitio" te ayud de alguna manera a construir tu pgina, entonces brndale un enlace Colocar fecha de la ltima revisin: Indica cundo se realiz la ltima revisin. Esto har que las personas se motiven a leer tu pgina. Verifica sus enlaces peridicamente: No dejes que expiren sus enlaces durante largos perodos de tiempo. Revisa su validez. Se abierto a comentarios o sugerencias:Especifica vnculos de correo electrnico o, si es posible, formularios de realimentacin. Practica el HTML: Usa los editores solo cuando conozcas los principios bsicos del HTML. ACTIVIDAD 4

Despus de haber realizado la lectura, redacta tu resumen

______________________________________________________________________ __________ ACTIVIDAD INTEGRADORA PARTE 1

Diseo de una pgina web

Antes de entrar de lleno en lo que ser la construccin de la pgina web, desarrollaremos la metodologa para el diseo de las mismas. Es importante ser originales para estructurar sus contenidos, redactar sus textos, agregar imgenes, enlazar las pginas, etc,

1. Elegir posibles temas a tratar en la pgina web

Empieza hacindote esta pregunta De qu puedo hablar en mi pgina web? Cul es la temtica que voy a trabajar? Para contestar estas preguntas haremos un listado de posibles temticas que te puedan interesar para realizar la pgina web. Ms adelante iremos eliminando y aadiendo otras segn los factores que vamos a tener en cuenta y segn cul sea tu objetivo: ganar muchas visitas, ganar mucho dinero, o cualquiera que sea el fin de tu pgina web. TEMAS DE EJEMPLOS Lenguaje HTML Capacitacin de Informtica Mi artista favorito Portafolio de evidencias de mis materias Negocio familiar AANOTA TUS POSIBLES TEMAS

Mi ciudad Mi escuela Clasifica los temas Es importante saber el tipo de Web que queremos crear, es el punto de partida que afecta a todas las etapas posteriores de creacin, realizaremos un diseo, aplicaciones, navegabilidad adecuadas al tipo de Web seleccionada, Ejemplos:

Sitio Web comercial. - Sitio Web profesional. Sitio Web de informacin. - Sitio Web de ocio. CCLASIFICACIN Sitio Web profesional Sitio Web profesional Sitio Web de ocio Sitio web de informacin Sitio Web comercial Sitio web de informacin Sitio web de informacin

EJEMPLOS: Lenguaje HTML Capacitacin de Informtica Mi artista favorito Portafolio de evidencias de mis materias Negocio familiar Mi ciudad Mi escuela

ANOTA TUS TEMAS Y CLASIFICALOS SEGN SU TIPO. (Como se muestra en el ejemplo) MIS TEMAS A CLASIFICACIN

3.- Escoge un tema para tu pgina web El factor ms importante, es, que el tema nos apasione. De modo que de la lista de temas que tengo, voy a ordenarlos Segn me gusten. (El tema que quede primero es sobre el que desarrollars tu pgina web) EJEMPLOS: TEMAS ORDENADOS M MIS TEMAS ORDENADOS Mi escuela Mi ciudad Mi artista favorito Capacitacin de Informtica Negocio familiar Portafolio de evidencias de mis materias Lenguaje HTML

4.- Definicin de la Informacin a publicar. Despus de que hayas seleccionado el tema de la pgina web es necesario definir la informacin que se va a publicar en el sitio Web, si vas a hacer una pgina sobre tu escuela, como en este caso, qu vas a poner?:

ANOTA TU TEMA Y LA INFORMACIN QUE TE GUSTARA MOSTRAR EN TU PGINA (Como se muestra en el ejemplo) EJEMPLO: MI ESCUELA Historia de mi escuela Materias que imparten Otros Planteles Actividades que realiza Envi de correos Enlaces a otras pginas de inters 5.- Qu fuentes de informacin tengo? Una fuente de informacin es el lugar del que manan los conceptos, las ideas y los pensamientos que sirven para la creacin de nuevo conocimiento en este caso una pgina web. Por lo tanto, en este apartado necesitamos recolectar las fuentes de informacin de donde vamos a extraer informacin del tema de nuestra pgina web TEMA: Mi escuela www.cobachbc.edu.mx http://www.elocal.gob.mx/work/templates/enciclo/bajacalifornia/municipios/02002a.htm Internet para buscar pginas de inters relacionados con el tema Enlaces a direcciones de cursos como: www.aulaclic.com, www.aulafacil.com, etc. ANOTA TU TEMA Y LAS FUENTES DE CONSULTA PARA CREAR TU PGINA WEB. MI TEMA:

(Como se muestra en el ejemplo) FUENTES DE INFORMACIN DE MI TEMA:

6.- Escalabilidad La escalabilidad se define como las visiones a corto y largo plazo acerca de nuestro sitio Web, si a largo tiempo queremos ampliar nuestro sitio Web con nuevas aplicaciones, nuevas pginas, actualizaciones constantes de que va a depender que realicemos esto: EJEMPLO DE LA ESCALABILIDAD EN MI PGINA: MI ESCUELA La pgina se revisara constantemente y se modificara cuando ya hayan vencido los enlaces, este muy lenta debido a la cantidad de visitas que tenga, cuando sea necesario ampliarla, agregar ms informacin o enlaces. Lo que suceda primero. MENCIONA CADA CUANDO VAS A REALIZAR ESCALABILIDAD EN TU PGINA. (Como se muestra en el ejemplo) ESCABILIDAD EN MI PGINA: 7.- Planificacin En todo proceso de creacin y diseo de pginas Web el primer paso a llevar a cabo ser la planificacin, que incluye la definicin de: OBJETIVOS: Presentar informacin de la preparatoria que sea atractiva para los jvenes de nuevo ingreso.

a) PBLICO: identificar el tipo de personas a la que va dirigida la informacin, en este caso todo tipo de personas podrn acceder a la pgina pero el pblico seleccionado ser los estudiantes de secundaria y todos aquellos jvenes que estn buscando educacin del nivel medio superior. b) CONTENIDO: habr informacin sobre el plantel y la preparacin que otorga a los jvenes. c) ESTRUCTURA: Estar formada por una pgina principal que brindara informacin y ofrecer enlaces para ir las secciones del sitio web: materias, capacitaciones, Paraescolares, etc. Tendr otras 3 pginas web ms que estarn ligadas a la primera como se muestra en la estructura siguientes:

REALIZA LA PLANIFICACIN DE TU PGINA WEB SEGN EL TEMA QUE HAYAS ESCOGIDO:

8.- Definicin del diseo Dependiendo del tipo de Web, el tema seleccionado, definida la informacin y la escalabilidad, estamos preparados para plasmar en papel el diseo de la pgina Web, incluyendo las pginas, los fondos, tipos de letras, botones, formularios, links, plantillas, aplicaciones.... de tal forma que obtengamos "storyboard" (es un conjunto de ilustraciones mostradas con el objetivo de servir de gua para entender una historia, previsualizar una animacin o seguir la estructura de una pgina web antes de realizarse) de los elementos y diseo que queremos implementar en nuestro sitio Web. Ejemplo de la pgina web de mi escuela

REALIZA EL DISEO DE TU PGINA WEB. (Apyate en el ejemplo)

Cmo empiezo a escribir HTML?

Para comenzar tan slo necesitas un editor de texto para escribir las pginas y un navegador para visualizarlas.

El editor no debe formatear el texto. Usa el Bloc de notas ( Notepad ), las etiquetas y sus atributos se pueden escribir en maysculas o minsculas. El lenguaje ignora, tambin, los espacios en blanco seguidos, donde slo cuenta uno de ellos. Una vez que hayas escrito una pgina, gurdala en un archivo con extensin .htm o .html.

Si el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedir confirmacin para guardarlo antes de cerrar el programa.

Escribir en el Bloc de notas

Siempre que se abre el bloc de notas aparece un documento en blanco. A la hora de escribir en l, funciona como cualquier otro editor de texto, basta con situar el cursor en el documento y escribir. Es recomendable insertar una nueva lnea para cada nueva etiqueta HTML, ya que resulta ms fcil trabajar de este modo. Si escribiramos todo el cdigo seguido nos resultara difcil interpretarlo, por ello es preferible programar insertando las etiquetas por separado, en diferentes lneas. A travs del men Formato, opcin Fuente, puedes cambiar la fuente de todo el documento. Si lo deseas, puedes hacer la letra algo ms grande o pequea.

Abrir un documento 1. Pulsar la combinacin de teclas Ctrl+A. 2. Hacer clic sobre el men Archivo y elegir la opcin Abrir.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

1. Pulsar la combinacin de teclas Ctrl+G. 2. Hacer clic sobre el men Archivo y elegir la opcin Guardar.

A la hora de guardar un documento no debes olvidar guardarlo con la extensin htm o html. Por ejemplo, puedes guardar un documento con el nombre mipgina.htm.

Manejar los elementos bsicos del lenguaje HTML en la creacin de pginas web
ACTIVIDAD 5 Antes de empezar a crear la pgina web es necesario que conozcas los trminos bsicos que estars utilizando en el transcurso de este bloque, por lo que es necesario que realices una bsqueda en Internet y definas lo siguiente: Bloc de Notas: __________________________________________ Buscador: ___________________________________________________________ ____________________________________________________ Compatible: ___________________________________________

Estructura de pgina web: __________________________________________ Etiqueta: ____________________________________ Hipertexto: __________________________________________ Lenguaje html: __________________________________________ Marcas (tag) __________________________________________ Navegador: _________________________________________ Pgina web: __________________________________________ Plataforma: ___________________________________________ Servidor web: ___________________________________________ Vnculos ___________________________________________ Ahora s, es tiempo de empezar con la programacin de la pgina web. Es importante que realices con tu equipo de trabajo todas las actividades que se te indican, para posteriormente capturarlas en el bloc de notas. Pronto veras los resultados de tu pgina. nimo y adelante!! Realiza la lectura "estructura bsica" a la par que van desarrollando las actividades referentes al diseo de su pgina. Pregunta al profesor todas las dudas que te vayan surgiendo. Estructura bsica

Cada pgina comienza con: < HTML > . A continuacin viene la cabecera, delimitada por < HEAD > < /HEAD > Despus, el comando < BODY >, que indica el comienzo del cuerpo de la pgina. Las instrucciones HTML se escribirn a continuacin, y finalizarn con < /BODY > La pgina acabar con < /HTML >

Es decir:

Etiqueta:

Esta etiqueta va en la parte del encabezamiento de la pgina web, es decir en el HEAD, y define en su contenido el ttulo de la pgina web, misma que aparecer en la parte superior izquierda de la pantalla de tu navegador.

ACTIVIDAD 6 Trascribe el cdigo siguiente en el bloc de notas, graba el archivo con el nombre index.html. Una vez realizado esto, y sin cerrar el editor de texto, vamos al navegador, da clic en el men archivo, selecciona la opcin abrir, busca el archivo, seleccinalo y ejectalo dando doble clic en abrir. Tu nueva pgina estar visible. Nota que el ttulo aparecer en la parte superior (pestaa de la pgina). Ejemplo 2:

Etiqueta

Todo el texto, las imgenes y el formato visibles al usuario deben encontrarse entre las etiquetas

Puede llevar los siguientes atributos: Bgcolor Text Link Alink Vlink Define el color de fondo de la pgina Define el color del texto de la pgina Define el color de los vnculos en la pgina Define el color del vnculo actual o activado en la pgina Define el color del vnculo ya visitado

Background Bgsound Bgproperties

Define el archivo grfico que ser desplegado como fondo Define el archivo de audio que se tocar en la pgina. Define el movimiento vertical del fondo.

Cmo se utilizan los colores en HTML? Se pueden llegar a tener 16 millones de colores en una pgina web. Existen dos formas para aplicar colores: 1. Se especifica el color deseado directamente con el nombre del color en ingles: Ejemplo: blue, green, yellow 2. Se especifica el color deseado mediante nmeros hexadecimales ejemplo:

Donde se indica en formato hexadecimal la proporcin de rojo, verde y azul que forma el color deseado. El smbolo # es opcional. Un nmero hexadecimal es un nmero en base 16, la base normal utilizada es base 10 o decimal del 0 al 9. En este caso los nmero validos sern del 0 al 9 aadiendo desde la a A a la f F. Por tanto el nmero 0F ser el 15, 0E ser 14. En la especificacin del color utilizaremos para definir la proporcin de cada color un nmero del 0 al FF (255), 0 indica nada de ese color y FF la mayor proporcin del color. Ejemplos de colores: #RRVVAA #FFFFFF #FF0000 #0000FF #00FFFF #70DB93 #FF7F00 #C0C0C0 COLOR Blanco Rojo Azul Cyan Agua Marino Coral Plomo #RRVVAA #000000 #00FF00 #FF00FF #FFFF00 #000080 #A62A2A #4F2F4F COLOR Negro Verde Magente Amarillo Azul Marino Caf Violeta

ACTIVIDAD 7 Ingresa al bloc de notas y realiza lo siguiente: 1 Abre el archivo "index.html".

3 Contina trascribiendo el ejercicio 3 4 Graba con el mismo nombre. 5 Ejecuta y si muestra algn error corrgelo. 5 Ingresa a la pgina http://www.usuarios.sion.com/pauluk/coloreshtml.htm Checa los cdigos de los colores. 6 Cambia el cdigo del color de la pgina que transcribiste, graba, ejecuta y observa la diferencia. Ejemplo 3:

Texto en HTML
Una pgina Web se visualiza en pases distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores independientemente de su juego de caracteres. Cuando queremos poner uno de estos

caracteres especiales en una pgina, debemos sustituirlo por su cdigo. Por ejemplo, la "" (a minscula acentuada) se escribe "&aacute;" de modo que la palabra pgina se escribira en una pgina HTML de este modo: pgina. A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:

Ejemplo 4:

Align NOSHADE

Establece que la regla se alinee a la izquierda, centro o derecha LEFT,CENTER o RIGHT Quita el sombreado predeterminado de la regla

WIDTH SIZE

Permite especificar el ancho de la regla (en pixeles o porcentaje) Permite especificar el alto de la regla (en pixeles) ACTIVIDAD 8

Ingresa al bloc de notas y realiza lo siguiente: 1 Abre el archivo "index.html". 3 Contina trascribiendo el ejercicio 5 4 Graba con el mismo nombre. 5 Ejecuta y si muestra algn error corrgelo y vuelve a ejecutar. 5 Practica los diferentes atributos de la etiqueta Ejemplo 5

Encabezados Los ttulos o encabezados se emplean al comienzo de una seccin. Las etiquetas que se usan son:

ACTIVIDAD 9 Ingresa al bloc de notas y realiza lo siguiente: 1 Abre el archivo "index.html". 3 Contina trascribiendo el ejercicio 6 4 Graba con el mismo nombre. 5 Ejecuta y si muestra algn error corrgelo y vuelve a ejecutar. 5 Practica los diferentes tamaos de encabezados Ejemplo 6:

Etiquetas para el texto El lenguaje HTML es un lenguaje de marcas, estas marcas sern fragmentos de texto destacado de una forma especial que permiten la definicin de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y sern la base principal del lenguaje HTML. En documento HTML ser un archivo texto con etiquetas que variarn la forma de su presentacin. Una etiqueta ser un texto incluido entre los smbolos menor que < y mayor que >. El texto incluido dentro de los smbolos ser explicativo de la utilidad de la etiqueta. Por ejemplo:

Atributos de las Etiquetas Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirn definir diferentes posibilidades de la instruccin HTML. Estos atributos se definirn en la etiqueta de inicio y consistirn normalmente en el nombre del atributo y el valor que toma separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido ser imprevisible dependiendo de cmo lo interprete el navegador. Cuando el valor que toma el atributo tiene ms de una palabra deber expresarse entre comillas, en otro caso no ser necesario. Un ejemplo de atributo ser:

Otro

Clase de Paginas WWW, y el lenguaje HTML.

Una de las cosas ms importantes que hay que tener en cuenta sobre HTML, es que no es un lenguaje de computacin, por lo tanto no son programas las pginas escritas en HTML.

Los browsers: Netscape, Explorer, etc, son intrpretes o traductores que permiten ver lo que se est publicando, mostrando las pginas que uno est requiriendo.

Esto nos permitir entender los lenguajes de programacin y su orden. Para disear entretenidas pginas web, todava no existen programas debidamente detallados y depurados que logren crear las pginas web que uno suea. Los editores actuales de HTML, como puede ser Word, o Netscape Composer, etc. no logran solucionar todos los problemas y necesidades actuales, siendo necesario poder editar las pginas que se realizan en forma manual a travs de cualquier editor de texto. Finalmente el lenguaje HTML est teniendo una importancia bastante significativa dentro del mundo de hoy, en parte por las miles de millones de pginas web existentes en el mundo y adems por todos los usuarios dentro de Internet. Esto responde a una necesidad bsica del ser humano, la necesidad de comunicacin, permitiendo las ms variadas formas, desplegando: textos, imgenes, animaciones, video y sonido.

Son tantas las gamas de posibilidades de comunicacin del ser humano, que las herramientas de computacin tratan de solucionar todas ellas, creando nuevas posibilidades de interaccin entre personas. Existen varios ejemplos, pero la posibilidad de una video conferencia es algo que el ser humano slo poda soar antes de la creacin de los computadores. El lenguaje HTML tiene varias ventajas para las personas que estn introducindose dentro del mundo de la computacin, siendo ests:

No hay que compilar el cdigo para ver si funciona. Compilar significa que el programa verifica que el cdigo escrito por el usuario sea parte del lenguaje de programacin ( C, Pascal, Cobolt, etc.) y luego escribe en lenguaje entendible para los computadores, programa ejecutable. Un programa ejecutable no necesita de otro programa para funcionar (C, Pascal, Cobolt, etc.), funcionado en forma independiente como es el caso del word.exe o el excel.exe los programas ejecutables del Word y del Excel conjuntamente. El cdigo que se escribe no lanza un error, el browser despliega la informacin como la interpreta, en el peor caso no muestra la informacin.

Se puede ver en forma inmediata el resultado del trabajo, permitiendo el desarrollo ms en detalle y a conciencia. El lenguaje es relativamente pequeo y fcil de usar, permitiendo a los usuarios aprenderlo en un corto tiempo y comenzar a practicarlo en forma inmediata.

Lenguaje, HTML
Detallamos a continuacin los pasos a seguir para crear una pgina web, luego de esto se pueden ir ingresando los comandos que se necesiten para agregar: textos, imgenes y sonidos.
1. Primeramente se aconseja crear un directorio donde de van a guardar todos los archivos de la pgina web que se va a utilizar, esto se debe a que las imgenes, sonidos o videos no se guardan dentro del archivo sino en forma separada (no como en Word). En HTML las pginas Web slo contienen texto, no estn guardadas en ellas propiamente tal ningn otro tipo de archivo. 2. Abrir un editor de texto bsico del computador (notepad), para luego guardar un archivo con el cdigo en HTML. La extensin con que se guarda el archivo tiene que ser (.html o .htm), por ejemplo tarea.htm. Se pueden dar cuenta que los archivos de Word tienen la extensin .doc y los de excel .xls, pueden ver esto en las clases de Sistema Operativos que vimos con anterioridad. Ojo el archivo de inicio de las pginas debiera ser index.htm, porque es el archivo por defecto que ve un browser en un determinado directorio (Direccin). 3. Tener abierto un browser con el archivo que se est creando para ver los resultados inmediatamente, para as ir creando y diseando la pgina web.

A continuacin veremos varios de los cdigos del lenguaje y sus usos para que el alumno pueda ver los resultados en forma inmediata.

<html>

</html>

Para indicarle al browser que es cdigo HTML el que viene descrito a continuacin, se limita todo el cdigo por estos dos parmetros. Dentro de ellos se escribe el cdigo de la pgina

<title>

</title>

Entre estos dos comandos va escrito el ttulo de la pgina, este va en la parte superior de la ventana que despliega el browser.

<body bgcolor=# text=# link=# vlink=# alink=# background=""> </body>

Entre estos parmetros se escribe todo el texto de la pgina, el cuerpo del documento (BODY). Con estos comandos se define el color general de:

bgcolor=# color del fondo de la pgina, este color puede ser cambiado
por un fondo, (background)

text=# es el color del texto general de la pgina link=# color del texto con link vlink=# color del texto de link visitado alink=# color del texto de link activo background="" en este comando se puede detallar un fondo especfico
para la pgina, un archivo de imagen.

Los colores se definen en formato RGB, se puede ver ejemplos de los colores con sus cdigos en al siguiente pgina COLORES. Estos colores consisten de seis dgitos, o letras desde la A hasta la F. <br>
Este comando sirve para insertar un salto de lnea dentro de la pgina.

<p>
Sirve para ingresar un salto de prrafo dentro del contenido

<h!!> </h!!>
Especifica el tipo de ttulo con un nmero del 1 al 6 en vez de !!, especificando la importancia del ttulo.

Ejemplo de Ttulo 1
<font face="Arial,Helvetica" color=# size=%% > </font>
Sirve para especificar las fuente del texto que va entre estos dos parmetros.

face="Arial,Helvetica" Especifica el tipo de letra a utilizar.

color=# Especifica el color del texto a utilizar, descrito en anterioridad Los colores se definen en formato RGB, se puede ver ejemplos de los colores con sus cdigos en al siguiente pgina COLORES. Estos colores consisten de seis dgitos, o letras desde la A hasta la F. size=%% Detalla el tamao de la letra elegido, nmero entre el -6 y el +6, en vez de %%. Ejemplo de Font Arial, Helvetica y color #000000 <b> </b>
El texto que va entre estos dos parmetros se encuentra en BOLD, o Negritas.

Ejemplo de Bold <i> </i>

El texto que va entre estos dos comandos se encuentra en Itlicas.

Ejemplo de Itlicas <u> </u>

El texto que va entre estos dos parmetros est subrayado.

Ejemplo de Bold <img src="$$" >

Este comando inserta imgenes dentro de las pginas web, tiene que esta especificado el directorio en el caso que no se encuentre la imagen en el mismo directorio que la pgina.

<img src="$$" align=" " > Detalla el alineamiento que tendra la imagen (derecho=right, izquierdo=left y centrado=center) <a href="$$"> </a>
Sirve para realizar direccionamiento a nuevas pginas webs, LINKS. Puede ser un texto o una imagen. En vez de $$, se puede colocar la direccin a donde va a apuntar, http://www.ing.puc.cl o puede ser

colores.htm, tambin puede ser reemplazada por mailto:andres@ing.puc.cl y as aparecer una ventana de mail a andres@ing.puc.cl al apretar el texto o imgenes que se encuentren dentro de estos parmetros. &ntilde;
Con este comando se escriben la .

&nbsp;
Se utiliza para ingresar espacios dentro del texto, para ingresar ms de un espacio en la pgina.

Tabulaciones

<ul> </ul>
Necesarios para tabular alguna seccin de la pgina, desde textos, imgenes y tablas.

Ejemplo de Tabulacin

<li> </li>
Ayuda a ingresar vietas dentro del texto.

Ejemplo de Vieta

<ol><li> </li><li> </li>...</ol>

Este comando inserta vietas con nmeros, estos son contiguos.

1. Ejemplo de Vieta Numerada

<center> </center>
Centra un objeto, texto, imagen, tabla, etc.

<p align="left"> izquierda</p> Deja el texto a la izquierda de la pgina <p align="right"> derecha </p> Deja el texto a la derecha de la pgina <table>
<tr colspan="N"> <td rowspan="N"> </table>
Comandos para definir una tabla,

<tr></tr> Se utiliza para definir una fila.

<td> </td>Define una columna de la tabla Ej de una tabla de de 2 por 3, dos columnas por tres filas <table border=1> <tr> <td> 1</td> <td>2</td>

<td>3 </td> </tr> <tr> <td> 4</td> <td> 5</td> <td> 6 </td> </tr> </table>
1 2 3 4 5 6

Para para generar una celda de varias filas o columnas, se logra poniendo un nmero en la posicin de "N", siendo este desde 2 en adelante, el uno no tiene sentido, porque se coloca el comando <tr>
Otro

La estructura bsica de una pgina web es la siguiente: <html> <head></head> <body> </body> </html>

Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que est en medio ser la pgina web. Dentro de <html></html> se encuentran 2 partes diferenciadas. La primera <head></head> es la cabecera de la pgina. Aqu irn cierta informacin que no es directamente el contenido de la pgina. Aqu se pone el ttulo de la pgina, los metadatos, estilos, cdigo javascript (todo esto se estudiar en captulos venideros). La primera que se suele estudiar es <title></title>, que indica el ttulo de la pgina (lo que el navegador pone en la parte superior izquierda). La segunda parte es <body></body>. Aqu va propiamente el contenido de la pgina: fotos, prrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la pgina anterior, el siguiente cdigo <html> <head> <title>Esto es el t&iacute;tulo de la p&aacute;gina.</title> </head>

<body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto it&aacute;lica.</i><br> </body> </html> generar el siguiente resultado (abre la pgina en otra ventana, dale al botn derecho => ver cdigo fuente, y vers as el cdigo HTML de la pgina): Ver ejemplo en una pgina aparte. Observad el ttulo en la parte superior izquierda de la pgina. Adems, dentro de <body></body> distinguimos varias etiquetas: <br> => Indica salto de lnea. En HTML un salto de lnea normal (plsando la tecla Enter) no produce un salto de lnea en el resultado. Es necesario escribir <br> (u otra etiqueta similar). <b></b> => Indica comienzo y fin de negrita. <i></b> => Itlica. Tambin observamos el cdigo &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "". Esto se explicar en un captulo posterior. Es importante mencionar que las etiquetas se pueden escribir indistintamente en maysculas o minsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el smbolo /), si no, el navegador podra dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
Otro

COMANDOS DE HTML....PARA TODO

.......... A continuacin doy una lista ms completa de lo visto con anterioridad de los comandos usados en HTML. No estan TODOS, pero vaya....teneis de sobra. Los muestro en minsculas, pero puede hacerse incluso mezclando diferentes tipos. No obstante, para mejor claridad no lo hagais. Cada instruccin, sobre todo al principio, es mejor que os ocupe UNA sola linea. Lo marcado en AZUL es OBLIGATORIO. Al final hay un ejemplo, podeis ir a l desde AQU, o seguir leyendo. All os dar unos consejos que os sirvan mientras haceis vuestra pgina. ......Descripcin...... Principo de Documento ..............INICIO.......... ..<html>... ..........F I N A L.......... </html>

Encabezado y Ttulo Color de Fondo de Pgina Imgen de Fondo Imgen Individual Imgen(Ancho*Alto) Espacio "libre" Color del Texto (parcial) Tamao del Texto (parcial) Punto y a Parte Linea(s) en blanco "As you See" Linea Embebida Negrita*Cursiva*Subray Subndice * Superndice Enlace "lejano" Enlace "ab.html" en tu PC Enlace misma pgina Localiz.anterior Enlace Correo Arch.de Sonido Desplazam. Marquesina

<head><title>....(titulo del archivo).... <body bgcolor="#RRVVAA"> <body background="XXX.gif (o jpg)"> <img src=".." width="n" height="n"> <img src=".." hspace="n"> <font color="#RRVVAA"> <font size="n"> <br> <p> <pre> <hr="n"> <b> * <I> * <U> <sub> * <sup> <a href="http://..."> <a href="ab.html"> <a href="#pepe"> <a name="pepe"> <bgsound src="xx.wav"> (o .mid) <marquee>(texto)

</title></head> -------

<img src="YYY.gif (o jpg)"> -----------</font> </font> --------</pre> ----</b> * </I> * </U> </sub> * </sup> </center>*</left>*</right> ....</a> ....</a> ....</a> ....</a>

Centrado*Izquierda*Derecha <center>*<left>*<right>

<a herf="mailto: dir.mail..."> ...</a> ----</marquee>

COSAS DE LOS DOCUMENTOS EN HTML...

En primer lugar os dir que esto del HTML <html< b=""></html<>, NO es programacin tal como esta palabra es "entendida" universalmente. El HTML es (HIPERTEXT MAKE UP LENGUAGE), una forma de que un navegador (Explorer y/o Netscape) entiendan unos "signos" y en base a ellos, los traduzcan a tipos de imprenta o figuritas de colores. Os deca que pondra un ejemplo...pues bien, si ahora pulsais arriba en VER....Cdigo Fuente... os aparecer esta misma pgina en HTML y podreis ver como la he hecho. De lo que no hay duda, es que la prctica lo es todo....!!!

ALGUNOS CONSEJOS.... Lo primero que hay que hacer es un esquema sobre papel de que quereis y como lo quereis....Que tipo de colores para los captulos, fondos, etc. Que iconos vais a poner en fin, como deseais que los dems lo veamos. Os abris una o varias carpetas en el C: o A: unas para la "letra" y otras para las figuras e iconos. De esta manera, a la hora de ir cargando cosas a la pgina, os ser fcil localizar sus componentes. A medida que escribais en HTML, la vez primera debeis ir a Guardar como (en Archivo), y una vez cargado, pulsais en Actualizar. Las veces siguientes, para cargar, basta pulsar en Archivo...Cargar. De esta manera ireis viendo como os va quedando. Yo utilizo el procesador de WordPad, que es de lo ms sencillo que hay, pero vaya, vosotros mismos...!. Cuando archiveis documentos o figuras, ponerles un nombre que sepais que es...!!!, incluso los iconos que fusileis por ah, les podeis poner el nombre que querais y...ponerlos en minsculas. Ah...!! se me olvidaba...Habr quien al pulsar en su archivo de HTML del Explorador, directamente se le "abra" ste....pero en otras versiones ms antiguas no pasa eso. Tranquis...En este (improbable) caso, lo primero que hareis es en el Panel de Control(o donde est), pulsais en el icono de IExplorer (o Netscape). Se abrir y os preguntar que pongais vuestra contrasea....vosotros, ni caso, anulais la opcin, luego aceptais donde os dira que el navegador no puede abrir Internet....y tranquilamente pulsais en vuestro archivo de HTML.
Otro

1. Abre el Bloc de Notas de Windows mediante: Inicio > Todos los programas > Accesorios > Bloc de Notas. En Ubuntu puedes utilizar el procesador de textos mediante: Aplicaciones > Accesorios > Procesador de textos. 2. En un documento nuevo escribe el siguiente texto: <html> <head> <title>Mi primera pagina</title> </head> <body> Hola mundo </body> </html>

3. Selecciona Archivo > Guardar como. Se mostrar este cuadro de dilogo.

4. En la lista desplegable Guardar en: , elige la carpeta donde desees guardar este documento. 5. Introduce el nombre del archivo aadindole la extensin .htm Ejemplo: prueba.htm 6. Pulsa en el botn Guardar. 7. Cierra la ventana del Bloc de Notas. 8. Elige Inicio > Mis Documentos para situarte en esta carpeta donde has guardado tu archivo HTML. Encontrars un archivo con el icono de un documento HTML con el nombre que has elegido.

9. Haz doble clic sobre el icono de este archivo y se abrir el navegador configurado por defecto en tu equipo mostrando el contenido de esta pgina HTML. 10. Observa que en la barra de ttulo del navegador aparece el texto que has encerrado entre las etiquetas <title> </title> y en el documento en blanco el texto que has incluido entre <body></body>
Otro Atencin: los primeros pasos son bastante simples, abre un block de notas o notepad y, al finalizar, guardalo en guardar como... con .html al final ejemplo: nombredelarchivo.html Despus de abrir el block, escribe lo siguiente <html> <head> <title> Aqu va el titulo que puedes ver arriba el de ac es taringa </title> </head> <body> Aqu va lo que vez adentro de la pagina </body> <html> Lo que est entre estos signos: <> se llama etiqueta Cuando la etiqueta tiene este signo antes"/" es decir que se cierra. Color de fondo y de fuente El color de fondo se define as: <body bgcolor="color"> El color puede ir de dos formas: en ingles (ej: "blue" "red" etc) o en hexdecimal que puedes encontrar en pginas web (http://html-color-codes.info/codigos-de-colores-hexadecimales/) (ej: "#FE2E2E" ""#0101DF;" etc) El color del texto se define as: <body text ="color"> El texto puede ir de dos formas: en ingles (ej: "blue" "red" etc) o en hexdecimal que puedes encontrar en pginas web (http://html-color-codes.info/codigos-de-colores-hexadecimales/) (ej: "#FE2E2E" ""#0101DF;" etc) Personalizar el texto escrito Para cambiar el color y el tamao de un texto y la letra en especial: <font color="blue" size="4" face="Comic Sans MS, Arial, MS Sans Serif"> Hola </font> <------Importante

Color es igual que arriba y size es un numero entero del 1 al 7 Para la letra en el sentido de negrita, etc...: <b>negrita</b> <i>cursiva</i> <u>subrayado</u> <s>tachado</s> <tt>teletipo (mquina de escribir)</tt> <big>aumenta el tamao de la fuente</big> <small>disminuye el tamao de la fuente</small> Para el tamao de la letra en bsico, se escribe as: <h1>Muy grande</h1> <h2>Grande</h2> <h3>Mediano Grande</h3> <h4>Mediano</h4> <h5>Mediano Chico</h5> <h6>Chico</h6> Por ltimo, para hacer que el texto se note realmente, existen las marquesinas (es cuando el texto se mueve por una banda): <marquee bgcolor="blue" behavior="alternate" direction="right"> <font color="red" size="5">Aqui estar el texto </font> </marquee> Bgcolor es color de fondo. Behavior es como se mueve, puede ser alternate de un lado a otro rebotando, scroll de un lado a otro, continuamente, slidede un lado a otro, pero una sola vez. Direction es hacia adonde se mover el texto, puede ser down de arriba a abajo, up de abajo a arriba, left de derecha a izquierda o left de izquierda a derecha. Hiperenlances Hiperenlaces es cuando pones una frase que te lleva a una pgina haciendo clic en ella: <a href="http://www.google.com"><font color="red" size="5">Aqu va el texto que aparecer en la pgina</font><a/> Eso te llevaria a http://www.google.com Fotos Para poder poner fotos es un poco ms complicado pero es bsico de todas formas. Antes, en el lugar en el que tienes el bloc de notas guardado tienes que tener tambin una foto y saber el nombre por ejemplo: lafoto.jpg <img src="lafoto.jpg" alt="A qui escribes lo que se ver cuando pases el mouse por encima de la foto">

Otro

El documento HTML

Estructura del documento La cabecera Meta Name Meta Http-Equiv El cuerpo arriba

Estructura del documento La estructura de un documento HTML se puede resumir as:

tipo de documento <HTML> <HEAD> <TITLE>titulo de la pgina</TITLE> cosas que afectan a la pgina pero no a su contenido </HEAD> <BODY parmetros> contenido de la pgina </BODY> </HTML>

En el tipo de documento deberemos especificar a que estndar del HTML responde nuestra pgina entre una de las siguientes opciones:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

Cumple el estndar HTML 2.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Cumple el estndar HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://w3.org/TR/REC-html40/loose.dtd">

Cumple el estndar HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://w3.org/TR/REC-html40/strict.dtd">

Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejables

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://w3.org/TR/REC-html40/frameset.dtd">

Es una definicin de marcos que cumple el estndar HTML 4.0 El HTML 4.0 considera desaconsejables aquellos elementos que, an siendo soportados, han sido sustituidos por otros ms potentes y, por ello, es posible que sean eliminados del estndar HTML en el futuro. arriba La cabecera Suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no alteren el contenido de la misma, aunque si la forma de presentarlo y su

comportamiento. Es por eso que es el lugar ms recomendable para colocar los scripts y las hojas de estilo, como veremos en los captulos correspondientes. Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una pgina situada en nuestro mismo servidor. Sin embargo, si especificamos:
<BASE HREF="http://www.misitio.com/">

Ahora todas nuestras URLs relativas se encontrarn dentro del servidor http://www.misitio.com arriba Meta Name Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu son los META. Entre otras cosas, sirven para indicar propiedades de la pgina como pueda ser el nombre de su autor. Por ejemplo,
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]">

nos indicara la herramienta con que hemos creado la pgina (en este caso la versin 4.03 en espaol para Windows 95 del Composer de Netscape). Como veris el uso es muy simple, en NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor, ambos entre comillas y con el signo igual por delante. Estas son las propiedades ms comunes: Name
AUTHOR

Content

Autor de la pgina. Palabras que permite clasificar la pgina dentro de un buscador CLASSIFICATION jerrquico (como Yahoo). Palabras clave por las que encontrarn la pgina en los buscadores. KEYWORDS Google no le hace mucho caso. GENERATOR Herramienta utilizada para hacer la pgina. arriba Descripcin del contenido de la pgina. Google le hace algn caso.

DESCRIPTION

Meta http-equiv Son etiquetas usadas tambin para dar informacin al navegador y complementan las etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

La nica diferencia est en que en lugar de NAME usamos HTTP-EUIV, el resto es igual. Cuando el contenido conste de ms de varios valores, estos se separan con ; (punto y coma). Veamos algunos tipos: HTTP-EQUIV
expires pragma ContentLanguage Refresh

CONTENT Fecha desde la que la pgina debe ser recargada por los navegadores El contenido debe ser no-cache y sirve para que el navegador no guarde la pgina en el ordenador del internauta. Idioma en el que est escrita la pgina. Se usan las iniciales como: es_ES: espaol Espaa, en_US: ingles americano... Indica al navegador el tiempo (en segundos) que debe esperar para recargar la pgina automticamente y la pgina a la que debe ir. Ambos datos se separan con un punto y coma.

Content-Type

arriba Tipo de documento y juego de caracteres usado. Lo habitual es colocar el valor: text/html; charset=iso-8859-1 Si n o se usa los caracteres especiales (letras acentuadas, ) pueden quedar ilegibles .

El cuerpo El cuerpo es el contenido de la pgina propiamente dicho, o sea, lo que se ve, en el es donde colocarn prcticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta <BODY>:
BACKGROUND BGCOLOR BGPROPERTIES TEXT LINK VLINK ALINK LEFTMARGIN y TOPMARGIN MARGINWIDTH y MARGINHEIGHT

Coloca una imagen como fondo de la pgina. Define el color de fondo de la pgina. Cuando es igual a FIXED el grfico definido como fondo de la pgina permanecer inmvil aunque utilicemos las barras de desplazamiento. Color del texto. Color de un enlace no visitado (por defecto azul). Color de un enlace ya visitado (por defecto prpura). Color que toma un enlace mientras lo estamos pulsando (por defecto rojo). Nmero de pixels que dejar de margen entre el borde de la ventana y el contenido de la pgina. Equivalentes a los anteriores, pero stos funcionan en Netscape.

No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarn ya a su gusto.