UNIDAD 1

Introducción a las paginas Web, al HTML y JavaScript.

Erika Johana Caicedo Arias

PÁGINAS WEB

PAGINAS WEBLa información en internet es presentadaprincipalmente a través de páginas web.Estas páginas se escriben en lenguajeHTML y pueden incluir textos, fotos,sonidos, videos y aplicaciones mediantehipervínculos o enlaces se puede pasarde una página a otra, permitiendonavegar por la información y todo estoes posible gracias al protocolo de HTTP(Protocolo de Transferência deHiperTexto).

Con el fin de facilitar la elaboraciónde páginas web, existen algunasherramientas como Dream Weaverde Macromedia, Front Page deMicrosoft y los editores de textocomo bloc de notas que lo trae elsistema de Windows.

ESTÁNDARES WEB

◆ El Identificador de Recurso Uniforme(URI), que es un sistema universal parareferenciar recursos en la Web, comopáginas web.

◆ El Protocolo de Transferencia deHipertexto (HTTP), que especifica cómose comunican el navegador y el servidorentre ellos.

◆ El Lenguaje de Marcado deHipertexto (HTML), usado paradefinir la estructura y contenido dedocumentos de hipertexto.

◆ El Lenguaje de Marcado Extensible(XML), usado para describir laestructura de los documentos detexto.

COMO ESCRIBIR PÁGINAS WEB

Para escribir páginas web,generalmente se utiliza un editor detextos, el cual ayuda a identificar lasintaxis propia del HTML y otroslenguajes como el JavaScript y elPHP.

TIPOS DE PÁGINAS WEB

Dependiendo del momento en que sedetermina el contenido de un documentoweb, las páginas se dividen en:

◆ Estática: El contenido de la página web sedetermina al momento de escribirla. Estecontenido no cambia es decir, siempregenera la misma respuesta. Ejemplopaginas que solo se escriben en el lenguajeHTML.

◆ Dinámica Las páginas dinámicas sonpáginas HTML generadas a partir delenguajes de programación (scripts) queson ejecutados en el propio servidorweb. A diferencia de otros scripts, comoel JavaScript, que se ejecutan en elpropio navegador del usuario. Ejemplopaginas creadas en lenguajes como Php,entre otros un programa de este tipo seconoce como CGI (Interfaz de pasarelacomún).

◆ Activa: Un documento activo no esespecificado completamente por elservidor. Se compone de programa querecibe valores, puede ejecutar cálculos ypresentar resultados. Cuando un navegadorsolicita una página web activa, el servidorenvía como respuesta una copia delprograma, el cual deberá ejecutarse en lamisma máquina del cliente web. De estamanera el programa puede cambiarcontinuamente gracias a la interacción conel usuario. Ejemplo, applets de java,JavaScript, entre otros.

COMO PUBLICAR PÁGINAS WEBPublicar una página en Internet es un proceso sencillo.Consiste en ubicar la carpeta o directorio raíz delservidor web y colocar allí los archivos que conformansu página o sitio web, con la estructura de directoriosque el usuario desee.Cuando un usuario utiliza un navegador (cliente web)para acceder a una página web, podría especificar laruta completa hasta el archivo deseado. En caso deque no se indique un nombre de archivo en elsegmento final del URL, se entiende que la solicitud esel archivo por omisión, llamado normalmenteindex.html o home.html.Si la página que desea publicar contiene documentosestáticos o activos, simplemente se almacenan losarchivos en la carpeta raíz del servidor web.

INTRODUCCIÓN AL HTML

INTRODUCCIÓN AL HTML

El lenguaje demarcado porhipertexto HTML es el lenguajeutilizado para escribir páginasweb. Este lenguaje está basadoen el uso de marcas o etiquetas.

Estructura de las etiquetas HTML

<Nombre de la etiqueta> Apertura deuna etiqueta siempre entre “< >”

Texto/gráfico/etiquetas A la cual seaplica la etiqueta

</Nombre de la etiqueta> Cierra de laetiqueta siempre entre “</ >”

Estos documentos, que en realidad sonarchivos de texto plano, estáncompuestos básicamente por:

◆ La información que el usuario ve en lapantalla cuando accede a una página.

◆ Códigos (tags o etiquetas) transparentespara el usuario, que son interpretadospor el programa del navegador y quecontrolan la manera como la informaciónes mostrada en la pantalla.

ESTRUCTURA DEL HTML

El siguiente ejemplo es sencillo, contienelo necesario para crear una página quedesplegara en el explorador (browser onavegador), la frase ¨Hola Mundo¨.Las palabras encerradas entre lossímbolos menor y mayor que (< >), sonlas etiquetes HTML y las frases dentro deestas, constituyen la información querealmente verá el usuario.

EJEMPLO 1

<html>

<head> <title> Primer Página </title> </head>

<body>Hola Mundo

</body>

</html>

Una página web está compuesta de 2partes: el encabezamiento y el cuerpo dela página. Paralelamente a esto, existencuatro etiquetas fundamentales, lasmismas que deben estar incluidas en elarchivo HTML de manera obligatoria.Estas cuatro etiquetas son:◆ <html></html>◆ <head></head>◆ <title></title>◆ <body></body>

ETIQUETA <HTML></HTML>

Indica al navegador que eldocumento texto que estáleyendo es un documento HTML.Esta etiqueta se abre al inicio delarchivo y se cierra al final delmismo.

ETIQUETA <HEAD></HEAD>

En esta etiqueta se detalla elencabezado de la página WEB.Esta etiqueta se abre luegode<html>.

ETIQUETA <TITLE></TITLE>

Esta etiqueta va en la parte delencabezamiento de la página web, es deciren el HEAD, y define en su contenido eltítulo de la página web, mismo queaparecerá en la parte superior izquierda dela pantalla de su navegador.Sin cerrar nuestro navegador de Internet,volvemos al editor de texto e incluimos elcampo <title> entre las etiquetas deapertura y cierre del encabezado (head).

ETIQUETA <BODY></BODY>

Cuerpo de la página donde se despliega elcontenido global. Esta etiqueta se abreluego de cerrar el encabezamiento con</head> y se extiende hasta el final de lapágina, cerrándose antes de </html>.

Todo el texto, las imágenes y el formatovisibles al usuario deben encontrarse entrelas etiquetas Esta etiqueta cuenta con lossiguientes atributos:

ATRIBUTOS

◆ Bgcolor◆ Text◆ Link◆ Alink

◆ Vlink◆ Background◆ Bgsound◆ Bgproperties

Los atributos se incluyen en laetiqueta de apertura, separadospor un espacio.

La principal ventaja del formato HTML essu portabilidad. Es decir, losexploradores son capaces de interpretary mostrar la información contenida enuna página web, independientemente dela plataforma que se usen. (IBM, MAC,UNIX, LINUX, etc.).HTML es un lenguaje sensible a lasmayúsculas, es decir no interesa si lasescribes todas en minúsculas ocombinación entre ellas.

COMENTARIOS EN HTML

Los comentarios en HTML son trozos detexto en medio del documento web, loscuales son ignorados por el navegador almomento de la visualización. El objetivode ellos es dar claridad sobre una zonade código para que en el futuro puedaser leída y entendida con mayorfacilidad, y un comentario se debeescribir dentro de las siguientesetiquetas <! - - y - - >.

EJEMPLO 2

<html><head> <title> Primer Página </title></head><body><! - - Este es el espacio del cuerpo,el contenido del documento web. - - >

Hola Mundo</body>

</html>

IMPORTANTEGuarde el archivo con unnombre que identifique sudocumento, sin olvidar laextensión .html.