OBJETIVOAl finalizar este primer tema, conocers el origen del HTML e identificars conceptos elementales sobre los lenguajes de programacin y su aplicacin.

INTRODUCCINTe damos la ms cordial bienvenida al curso de programacin de HTML bsico y creacin de pginas web, a travs del cual podrs adquirir conocimientos para la programacin de pginas para la WWW.

El Internet es una gran red global que tiene como objetivo acceder y compartir informacin, noticias, comunicacin de negocios y entretenimiento.

Los servicios principales que Internet ofrece a sus usuarios son los siguientes:Correo electrnico (e-mail).World Wide Web (WWW).Transferencia de Archivos (FTP).Grupos de discusin (NEWSGROUPS).Acceso remoto a otras computadoras (TELNET).Noticias o USENET.

Uno de los servicios ms usados es elWord Wide Web ("WWW" o "Web"), que es un sistema de documentos o pginas electrnicas de todo el mundo interrelacionadas utilizando ligas entre s.

Unapgina Webes un documento que contiene informacin como texto, imgenes, animaciones, fotografas, videos, etctera, que estn relacionados a travs de enlaces dentro de la misma pgina o hacia otras pginas. A estos enlaces se les conoce comnmente comoligas o vnculosde hipertexto o hiperenlace.Esta caracterstica proporciona la facilidad de brincar de una parte a otra en una misma pgina, o bien a una pgina distinta en bsqueda de informacin. Muchos usuarios describen este proceso comonavegar en un espacio sin lmites.Estas pginas que existen en la WWW son creadas, en su mayora, utilizando el lenguaje de programacin conocido como HTML.Aprender a programar en HTML te brinda la capacidad de transmitir cualquier tipo de informacin a travs de la WWW. Por ejemplo puedes intercambiar informacin personal o dar a conocer tu negocio o las costumbres de tu comunidad.A lo largo de este primer tema, podrs conocer cul es el origen del HTML y las bases de un lenguaje de programacin.

TEMA 1: Conceptos bsicos de programacin1.1 Qu es el HTML?Para entrar de lleno a este tema, necesitamos comprender qu es un lenguaje de programacin. Unlenguaje de programacinson una serie de instrucciones acomodadas o estructuradas en base a ciertas reglas que dan por resultado una accin determinada. Existen diferentes tipos de lenguajes para diferentes tipos de aplicaciones. El lenguaje en que se enfoca este curso es el HTML.

ElHTML(HyperTextMarkupLanguage -Lenguaje deMarcas deHiperTexto) es comnmente utilizado para la publicacin de pginas en la Internet, ya que es el soporte esencial de todos los dems lenguajes de programacin utilizados con ese objetivo.

Este lenguaje fue creado por el inglsTim Berners-Lee, quin desarroll la primera versin de las instrucciones que componen al HTML. Originalmente cre un pequeo programa para uso personal al cual llamaba "Sustituto de Memoria", y que le ayudaba a recordar vnculos entre varias personas y los proyectos en los que estaba trabajando. Al ver los resultados de la herramienta, pens en extender su uso incorporndolo a una red ms grande de computadoras en diferentes ubicaciones desde donde se pudieran enlazar diferentes personas y tipos de informacin. Esta idea se populariz a tal grado, que dio origen al intercambio de ideas grficas y textuales a travs de Internet de forma masiva.

Bsicamente el HTML esta conformado por una serie de instrucciones que le indican al explorador que estemos utilizando, la forma de representar los elementos (grficos, textos, animaciones, etc.) que contenga el documento.

1.2 Introduccin a lenguaje HTML: trabajando con etiquetas

El HTML es un lenguaje diseado para publicar documentos en la Internet como documentos hipertexto o hiperenlace. El lenguaje tiene todas las herramientas para definir el formato de las pginas y permite incluir imgenes as como enlaces(comnmente conocidas como "ligas") a otros documentos. Los enlaces o ligas pueden o no ser de texto, ya que tambin pueden ser enlaces a travs de imgenes o animaciones entre dos ubicaciones fsicamente alejadas.

Para visualizar un documento en HTML se usan unos programas llamados exploradores, existen muchos de ellos, entre los ms comunes estn el Internet ExploreryNetscape Navigator.

Cada uno de ellos tiene caractersticas propias y es por esta razn que existen reglas generales para estructurar los documentos con el fin de que todos los exploradores puedan desplegarlos de la forma ms estandarizada posible.Las instrucciones del HTML se escriben comoetiquetas("tags" en ingls) y se identifican porque contienen los caracteres< (menor que)y> (mayor que).Pueden clasificarse en dos tipos: abiertas y cerradas.Lasetiquetas abiertasse usan en reas grandes del documento o incluso a todo el documento y este tipo de instrucciones solamente tienen una palabra clave en el principio de la accin.Ejemplo:Lasetiquetas cerradasson aquellas que se aplican a cierta parte del documento y se distinguen porque la palabra clave de principio de accin, es decir< ... >tiene una correspondencia con una palabra clave de fin de accina la que se le agrega una diagonalEjemplo:

.....Esta es una tabla

A las etiquetas cerradas tambin se les pueden agregarparmetros, que son cualidades o propiedades que se aplican de forma especfica a un objeto o texto.Ejemplo:

.....Esta es una tabla

CONCLUSINPodemos concluir que el HTML es el lenguaje principal para programar documentos destinados a ser publicados en la WWW. Ahora sabemos que la estructura de un documento en HTML est basado en instrucciones llamadas etiquetas.Etiquetas bsicas de HTMLHeadingsNos definen el tamao de un ttulo o cabecera.

nos d el tipo de letra ms grande.nos d el tipo de letra ms pequeo.HTML agrega automaticamente un espacio antes y despus de cada ttulo.

al ser usado como ttulo de una pgina Web, es de suma importancia ya que es uno de los parmetros que Google y dems buscadores tiene en cuenta, a la hora de indexar un sitio web.Ejemplo

Cdigo

Headings

Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

ResultadoHeading 1Heading 2Heading 3Heading 4Heading 5Heading 6

PrrafosLos prrafos se definen con la etiqueta.Ejemplo

Cdigo

Prrafos

Este es el primer prrafo.Y este es el segundo prrafo.

ResultadoEste es el primer prrafo.Y este es el segundo prrafo.

ComentariosLa etiquetase utiliza para insertar un comentario dentro del cdigo que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el cdigo y son de gran ayuda en el momento que necesitemos editarlo.

* Nota que el signo de exclamacin se coloca solo al principio del cdigo.

Salto de lneaEl salto de lnea est definido con la etiqueta
. Es utilizado cuando queremos cortar una lnea sin necesidad de terminar con el prrafo. La etiqueta
obliga a saltar de lnea dondequiera que la ubiquemos.Ejemplo

CdigoEsto es
un salto de l
nea.ResultadoEsto esun salto de lnea.

Trazar una lneaLa etiquetanos permite trazar una lnea horizontal como las que separan las distintas secciones de este tutorial.La etiquetano tiene cierre.Ejemplo

Cdigo

Resultado

RECUERDA QUE...

HTMLsignifica "Hypertext Markup Language"Fue creado porTim Berners-Leea principios de los noventas.Unenlacees una liga entre documentos.Las instrucciones utilizadas en HTML son llamadasetiquetas.

El objetivo de esta actividad es que te vayas familiarizando con el lenguaje HTML a travs de sus etiquetas.

La actividad consiste en elaborar una lista que contenga las etiquetas de HTML que suelen ser utilizadas en la creacin de pginas de para Internet

PASOS:

1.Investigar en la Internet por medio de un buscador, las etiquetas del HTML.

En la seccinsitios de intersencontrars algunas sugerencias de buscadores.Algunas palabras sugeridas para hacer la bsqueda son:"etiquetas HTML"

2.Sugerimos marcar como "favoritos" las referencias que localices en la Internet. As podrs consultarlas nuevamente en temas posteriores.

3.. Debes elaborar un documento en algn procesador de palabras donde aparezcan lasetiquetas y su significado y/o uso. Este documento lo debes enviar a tu tutor por medio de un mensaje antes de la fecha lmite de esta actividad para que lo califique. Recuerda que esta actividadvale el 10% de tu calificacin final.

TIP: Mantn a la mano la informacin recopilada durante esta actividad, ya que ser una muy prctica gua de consulta para los prximos temas.

TEMA 2: Estructura de un documento en HTMLOBJETIVOAl terminar este tema, sers capaz de conocer la estructura bsica de una pgina web programada con HTML e identificars los elementos principales que dan formato al documento.INTRODUCCINUna vez aprendidos en el tema anterior los conceptos bsicos que dieron origen al HTML, entraremos en materia para aprender cmo se escriben las instrucciones para programar un sitio de Web.Unsitio webes un conjunto de pginas ligadas entre si. En lo que respecta a este tema, nos enfocaremos en el estudio de la estructura bsica de unapgina:cabecera y cuerpo. Es muy importante tener claros estos dos conceptos ya que en los temas consecutivos aprenders a incluir elementos que le dan forma a la pgina y forman parte de esas secciones.Para la creacin de una buena pgina debemos tener en cuenta dos aspectos importantes: el primero es el conocimiento tcnico para crear el cdigo HTML, y el segundo aspecto es el buen diseo para la presentacin de la informacin.Por el momento, profundizars tu conocimiento sobre la parte tcnica de la creacin de pginas Web.2.1 Cmo escribir en HTML?Una pgina en HTML es un archivo de texto simple, que puede ser programado desde en elNotepadde Windows o hasta en uneditor de textoavanzado, y que conitiene una serie de instrucciones identificadas con etiquetas para que elexploradorpueda leer su contenido.Los archivos de HTML tienen comnmente las extensiones.htmlo.htmEs importante que sea cual sea el medio por el cual se programa la pgina, se mantengan ciertas consideraciones de orden y limpieza del documento.A continuacin, algunas recomendaciones:

1.Escribir todas lasetiquetas en MAYSCULAS.

2.Una etiqueta puede contener atributos o propiedades que afectan la forma en que se muestra la informacin. Losatributos se escriben en minsculasy deben sus valores de estar enmarcados por doble comillas (" ").

3.Para que una pgina est bien programada, las etiquetas deben de estar propiamente acomodadas; se deben de ordenar la primera y ltima etiqueta en la secuencia correcta.Esencialmente las etiquetas se colocan de afuera hacia dentro.Veamos elejemplo:Incorrecto:Esta es una frase connegritasCorrecto:Esta es una frase connegritas

2.2 La estructura bsica de una pgina en HTML es:index.html

Indica el inicio del documento.Define el inicio de la cabecera.Inicia el ttulo del documento.Fin del ttulo del documento.Define el fin de la cabecera.Inicio del cuerpo del documento.Fin del cuerpo del documento.Indica el fin del documento.

Ver cdigo completoAs se vera la pgina

La primera parte de una pgina HTML es elidentificadordel lenguaje de programacin. En esta seccin se le indica a los exploradores (Internet Explorer, Netscape Navigator, etc.) qu tipo de informacin van a leer.

Para el caso del HTML, el identificador es la etiqueta. stas deben ser la primera y ltima etiquetas respectivamente, que aparecen en el documento.Dentro de estas dos etiquetas identificadoras se distinguen dos secciones principales:La cabecera(...)El cuerpo(...)TIPS

Lapgina raz del sitioes recomendable que se guarde con el nombre deindex.htmlohome.html. Ya que los servidores reconocen estos nombres de forma automtica para desplegar la pgina raz del sitio.

2.3 Cabecera del documento (head)

La cabecera est definida por las etiquetas.... Dentro de stas se definen las caractersticas generales que afectarn a todo el documento.En ella aparecen por ejemplo:el ttulo de la pgina, la versin del HTML en que fue escrita, algunos comentarios del autor o incluso puede contener programacin avanzada en algn otro lenguaje para Internet.Al conjunto de estos datos se le llamaMeta-informacin("informacin acerca de").La informacin contenida en la etiqueta de...no se despliega directamente en el navegador, si no que afecta a las propiedades generales de la pgina, por esta razn no debe de escribirse ninguna instruccin o comentario ajeno a las etiquetas estandarizadas propias de esta parte del documento.De acuerdo al estndar HTML, las etiquetas vlidas a utilizar dentro de la cabecera son las siguientes:Define la liga de origen de todas las ligas situadas a lo largo del sitio completo.

Define una referencia a otro documento.

Describe las caractersticas generales de la programacin que el autor desee incluir.Ejemplo:Si deseas incluir el estndar en que esta programada aparecer algo como:

Es el ttulo de la pgina y se despliega en la parte superior del navegador.Ejemplo:

Mi primer pgina de HTML

Define caractersticas de formato sobre los elementos de la pgina.Ejemplo:El tipo de letra que ser utilizado.

Ejecutar comandos o programacin que complementan el HTML.Ejemplo:Incluir una lnea de programacin en Javascript para desplegar una cintilla de noticias.

TIPS

Dentro de la etiqueta de...no incluyasinformacin que sea destinada a desplegarse dentro el documento.

2.4 Cuerpo del documento (body)

El cuerpo es la segunda seccin de la estructura del HTML y est definida por las etiquetas....Dentro de las etiquetas del cuerpo se localiza toda la informacin que ser desplegada en los exploradores. Por ejemplo, podemos encontrar elementos tales como:encabezados, textos, tablas, imgenes, animaciones, etctera, que contienen sus propios atributos y que repasaremos una a una en los siguientes temas.

A su vez, la etiqueta del cuerpo..., contienen atributos que controlan la parte visible del documento. Estosatributos o propiedadesson popularmente usados para agregar color y diseo a la pgina.

Un ejemplo de lo anterior seria:

index.html

Ir a pgina dos >

Visitemos el Portal de los CCA
a travs de este vnculo externo

Ver cdigo completoAs se veran las pginas

Anclas o MarcadoresHemos visto los vnculos o ligas hacia otros documentos, de forma local o externa, sin embargo tambin existen ligas que apuntan hacia lugares precisos dentro del mismo documento que los contiene u otro. A esto se le conoce comnmente comoanclas(anchor),marcadores o apuntadores.

Lasanclasse utilizan comnmente cuando deseas hacer referencias rpidas hacia tu misma pgina y siempre constan de dos partes:el punto de anclaje o ancla y la liga que busca a esa ancla.

Por ejemplo,cuando tienes un texto muy largo y deseas volver al inicio sin tener que utilizar los botones de desplazamiento, puedes colocar un ancla en la parte superior de la pgina, y una liga en la parte final del documento que apunte al ancla.

Cabe mencionar que lasanclasson elementosinvisiblesdentro de la forma visual del documento, ya que permanecen ocultas a simple vista pero estn presentes dentro del cdigo.

Primero que nada para definir un vnculo de tipoancla, debes establecer elpunto de anclaje, es decir, el lugar a donde va a llegar la liga. Generalmente elanclase coloca cerca del lugar a dnde quieres que se dirija la liga.La etiqueta que se utiliza en estos casos es:, donde**es el nombre de el ancla.Recuerda que el ancla es invisible en el documento, slo podrs verlo dentro del cdigo.Ejemplo:

Como segundo paso, debers crear unaliga o enlaceque apunte hacia el ancla, lo cual puedes hacer siguiendo los pasos de "Agregar ligas a un texto o una imagen" descritos anteriormente.El formato del parmetrohref, aparecer de la siguiente manera:...

Repasemos la forma para crear un ancla, con este ejemplo:ANCLASanclas.html

.... Texto y contenido de la pgina... Antes de finalizar aparece:

Regresar al ttulo

Ver cdigo completoAs se vera la pgina

TIPS

Evita separar tus documentos html en distintas carpetas o flders, porque puedes crear errores al ligar las pginas entre s. Opta por colocar todas las pginas dentro del mismo directorio.Si vas a usar la liga para hacer referencia a un archivo local, es necesario que selecciones "other" en el tipo de la liga. Si vas a hacer una referencia a un vnculo externo, es decir, hacia otro sitio dentro de la Internet entonces tendrs que seleccionar la opcin "http://" en el tipo de liga.

4.2 Imgenes

Para entender el proceso de insertar imgenes dentro del cdigo de HTML, primero debemos de hablar de los formatos de imagen.

Formatos de imagen

Los formatos de imagen que se usan regularmente en los documentos en HTML, son elGIF, JPEG Y BITMAP. Al seleccionar el formato, hay que considerar particularmente el peso (kilobytes) y la calidad de una imagen (cantidad de colores).GIF,es el formato ms usado para la Internet por dos razones esenciales: su peso es relativamente el menor de todos los formatos y permite usar cualidades que ningn otro formato ofrece como reas "transparentes" e incluso movimiento.

El GIF contiene imgenes con colores planos (como logos, ttulos, fondos, etc.) y est basado en un cdigo que solo puede leer 256 colores. En otros temas de este curso te has familiarizado con la aplicacin de color para la Internet y has vistoejemplosde los colores estandarizados; precisamente son esos colores los que encapsula este formato.Observa los ejemplos:

GIF

GIF CON ZONAS TRANSPARENTES

GIF ANIMADO

JPEG

JPEG,es el formato de imagen idneo para las fotografas, imgenes con sombras o mucho detalle, porque en l se encapsulan millones de colores lo que provee de gran calidad. Los jpeg a diferencia de los gif, NO pueden tener zonas transparentes ni movimiento, suelen ser imgenes ms pesadas que los gif por la cantidad de colores y por lo mismo hay que tener precaucin en su uso.Observa el siguiente ejemplo y compralo con las imgenes de tipo gif, notas la diferencia en la calidad de la imagen?

BITMAP,se usa en presentaciones electrnicas donde es muy importante el grado de detalle de la imagen y la calidad, sin embargo el peso (cantidad de bytes) es demasiado grande. Suele pasar que este formato sea incorrectamente empleado por usuarios que desconocen como utilizar su escner y guardar una imagen, o simplemente las diferencias entre los formatos de imagen. Esta es una razn por la que debe utilizar imgenes gif y/o jpeg en los documentos HTML.

Veamos cmo quedara el cdigo cuando insertamos una imagen:IMGENESimagen.html

Esta es la tiendita de mi comunidad

....

Ver cdigo completoAs se vera la pgina

TIPS

Visita la pginacmo usar una coleccin de clipart,para que tengas una idea de dnde y cmo empezar.El promedio mximo de una imagen es de unos 6kb u 8kb para gifs y de menos de 30 kb para los jpeg, estos pesos evitarn que tarde su descarga.

4.2 Imgenes

Las etiquetas para las imgenesLas imgenes son elementos externos a los documentos de html; al escribir el cdigo se hace referencia a la ubicacin de esos archivos, el navegador busca la imagen en la direccin indicada.

Para insertar la referencia de una imagen dentro del cdigo, debe de usarse la etiqueta:Como podrs notar, la etiqueta de imagen es abierta porque solamente tiene una palabra clave en el principio de la accin.

Los atributos que acompaan la etiqueta de imagen son:alt="***"Texto alternativo de la imagen para navegadores que no tienen la Opcin de Imagen Activada y/o tambin para que el visitante lea mientras se descarga la pgina.

width="*"Indica laanchurade la imagen en pxeles.

height="*"Indica elaltode la imagen, tambin en pxeles.

border="*"Indica el grosor delbordeen pxeles. Especialmente cuando la imagen incluye un hiperenlace.

align="top"Alinear arriba, muy tiles cuando interactan imgenes con texto o tablas, los atributos de alineacin nos permiten jugar con el acomodo de los elementos de nuestra pgina.

align="middle"Alinear en medio.

align="absmiddle"Alinear perfectamente en medio.

align="bottom"Alinear abajo.

align="left"Alinear hacia la izquierda.

align="right"Alinear hacia la derecha.

Veamos como se comporta el atributo de alineacin de imagen con respecto al texto:Esta imagen tiene una alineacin hacia laizquierda (left)Esta imagen tiene una alineacin haciaenmedio (middle)Esta imagen tiene una alineacin hacia laderecha (right)

Esta imagen tiene una alineacin haciaarriba (top)Esta imagen tiene una alineacinabsoluta hacia enmedio (absmiddle)Esta imagen tiene una alineacin haciaabajo (bottom)

TIPS

Usa siempre las propiedades o atributos de imagen dealtura y anchura (width an height).Estas dos opciones puedes encontrarlas en elPanel de Propiedades; sirven para cambiar el tamao de una imagen, aunque su propsito real es indicar al navegador qu tanto espacio necesita reservar para desplegarla. Lo que hace el navegador es iniciar con la descarga del texto y posteriormente la descarga de imgenes, as el visitante tendr algo que leer mientras espera a que todo aparezca en su lugar.

RECUERDA QUE...

Debes utilizar colores que faciliten la lectura de tu informacin, tanto para el fondo como para los textos que uses.Cuando de sitios en la Internet se trata, el enemigo ms cruel para que las pginas se descarguen lentamente son las imgenes; cuanto ms grande es la imagen (tamao y peso) ms largo es el tiempo de espera No ahuyentes a los visitantes, evita usar imgenes pesadas!Intentar disear primero tu pgina sobre papel haciendo bocetos, eso te ayudar a analizar tu trabajo de programacin as podrs preveer incovenientes.El xito en toda labor es la prctica.No temas equivocarte, haz todos los intentos que quieras antes de llegar a tu versin final.