1. Erika Johana Caicedo Arias
UNIDAD 1
Introducción a las paginas Web, al
HTML y JavaScript.

2. PÁGINAS WEB

3. PAGINAS WEB
La información en internet es presentada
principalmente a través de páginas web.
Estas páginas se escriben en lenguaje
HTML y pueden incluir textos, fotos,
sonidos, videos y aplicaciones mediante
hipervínculos o enlaces se puede pasar
de una página a otra, permitiendo
navegar por la información y todo esto
es posible gracias al protocolo de HTTP
(Protocolo de Transferência de
HiperTexto).

4. Con el fin de facilitar la elaboración
de páginas web, existen algunas
herramientas como Dream Weaver
de Macromedia, Front Page de
Microsoft y los editores de texto
como bloc de notas que lo trae el
sistema de Windows.

5. ESTÁNDARES WEB
El Identificador de Recurso Uniforme
(URI), que es un sistema universal para
referenciar recursos en la Web, como
páginas web.
El Protocolo de Transferencia de
Hipertexto (HTTP), que especifica cómo
se comunican el navegador y el servidor
entre ellos.

6. El Lenguaje de Marcado de
Hipertexto (HTML), usado para
definir la estructura y contenido de
documentos de hipertexto.
El Lenguaje de Marcado Extensible
(XML), usado para describir la
estructura de los documentos de
texto.

7. COMO ESCRIBIR PÁGINAS WEB
Para escribir páginas web,
generalmente se utiliza un editor de
textos, el cual ayuda a identificar la
sintaxis propia del HTML y otros
lenguajes como el JavaScript y el
PHP.

8. TIPOS DE PÁGINAS WEB
Dependiendo del momento en que se
determina el contenido de un documento
web, las páginas se dividen en:
Estática: El contenido de la página web se
determina al momento de escribirla. Este
contenido no cambia es decir, siempre
genera la misma respuesta. Ejemplo
paginas que solo se escriben en el lenguaje
HTML.

9. Dinámica Las páginas dinámicas son
páginas HTML generadas a partir de
lenguajes de programación (scripts) que
son ejecutados en el propio servidor
web. A diferencia de otros scripts, como
el JavaScript, que se ejecutan en el
propio navegador del usuario. Ejemplo
paginas creadas en lenguajes como Php,
entre otros un programa de este tipo se
conoce como CGI (Interfaz de pasarela
común).

10. Activa: Un documento activo no es
especificado completamente por el
servidor. Se compone de programa que
recibe valores, puede ejecutar cálculos y
presentar resultados. Cuando un navegador
solicita una página web activa, el servidor
envía como respuesta una copia del
programa, el cual deberá ejecutarse en la
misma máquina del cliente web. De esta
manera el programa puede cambiar
continuamente gracias a la interacción con
el usuario. Ejemplo, applets de java,
JavaScript, entre otros.

11. COMO PUBLICAR PÁGINAS WEB
Publicar una página en Internet es un proceso sencillo.
Consiste en ubicar la carpeta o directorio raíz del
servidor web y colocar allí los archivos que conforman
su página o sitio web, con la estructura de directorios
que el usuario desee.
Cuando un usuario utiliza un navegador (cliente web)
para acceder a una página web, podría especificar la
ruta completa hasta el archivo deseado. En caso de
que no se indique un nombre de archivo en el
segmento final del URL, se entiende que la solicitud es
el archivo por omisión, llamado normalmente
index.html o home.html.
Si la página que desea publicar contiene documentos
estáticos o activos, simplemente se almacenan los
archivos en la carpeta raíz del servidor web.

12. INTRODUCCIÓN AL
HTML

13. INTRODUCCIÓN AL HTML
El lenguaje demarcado por
hipertexto HTML es el lenguaje
utilizado para escribir páginas
web. Este lenguaje está basado
en el uso de marcas o etiquetas.

14. Estructura de las etiquetas HTML
<Nombre de la etiqueta> Apertura de
una etiqueta siempre entre < >
Texto/gráfico/etiquetas A la cual se
aplica la etiqueta
</Nombre de la etiqueta> Cierra de la
etiqueta siempre entre </ >

15. Estos documentos, que en realidad son
archivos de texto plano, están
compuestos básicamente por:
La información que el usuario ve en la
pantalla cuando accede a una página.
Códigos (tags o etiquetas) transparentes
para el usuario, que son interpretados
por el programa del navegador y que
controlan la manera como la información
es mostrada en la pantalla.

16. ESTRUCTURA DEL HTML
El siguiente ejemplo es sencillo, contiene
lo necesario para crear una página que
desplegara en el explorador (browser o
navegador), la frase ¨Hola Mundo¨.
Las palabras encerradas entre los
símbolos menor y mayor que (< >), son
las etiquetes HTML y las frases dentro de
estas, constituyen la información que
realmente verá el usuario.

17. EJEMPLO 1
<html>
<head> <title> Primer Página </title>
</head>
<body>
Hola Mundo
</body>
</html>

18. Una página web está compuesta de 2
partes: el encabezamiento y el cuerpo de
la página. Paralelamente a esto, existen
cuatro etiquetas fundamentales, las
mismas que deben estar incluidas en el
archivo HTML de manera obligatoria.
Estas cuatro etiquetas son:
<html></html>
<head></head>
<title></title>
<body></body>

19. ETIQUETA <HTML></HTML>
Indica al navegador que el
documento texto que está
leyendo es un documento HTML.
Esta etiqueta se abre al inicio del
archivo y se cierra al final del
mismo.

20. ETIQUETA <HEAD></HEAD>
En esta etiqueta se detalla el
encabezado de la página WEB.
Esta etiqueta se abre luego
de<html>.

21. ETIQUETA <TITLE></TITLE>
Esta etiqueta va en la parte del
encabezamiento de la página web, es decir
en el HEAD, y define en su contenido el
título de la página web, mismo que
aparecerá en la parte superior izquierda de
la pantalla de su navegador.
Sin cerrar nuestro navegador de Internet,
volvemos al editor de texto e incluimos el
campo <title> entre las etiquetas de
apertura y cierre del encabezado (head).

22. ETIQUETA <BODY></BODY>
Cuerpo de la página donde se despliega el
contenido global. Esta etiqueta se abre
luego de cerrar el encabezamiento con
</head> y se extiende hasta el final de la
página, cerrándose antes de </html>.
Todo el texto, las imágenes y el formato
visibles al usuario deben encontrarse entre
las etiquetas Esta etiqueta cuenta con los
siguientes atributos:

23. ATRIBUTOS
Bgcolor Vlink
Text Background
Link Bgsound
Alink Bgproperties
Los atributos se incluyen en la
etiqueta de apertura, separados
por un espacio.

24. La principal ventaja del formato HTML es
su portabilidad. Es decir, los
exploradores son capaces de interpretar
y mostrar la información contenida en
una página web, independientemente de
la plataforma que se usen. (IBM, MAC,
UNIX, LINUX, etc.).
HTML es un lenguaje sensible a las
mayúsculas, es decir no interesa si las
escribes todas en minúsculas o
combinación entre ellas.

25. COMENTARIOS EN HTML
Los comentarios en HTML son trozos de
texto en medio del documento web, los
cuales son ignorados por el navegador al
momento de la visualización. El objetivo
de ellos es dar claridad sobre una zona
de código para que en el futuro pueda
ser leída y entendida con mayor
facilidad, y un comentario se debe
escribir dentro de las siguientes
etiquetas <! - - y - - >.

26. 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>

27. IMPORTANTE
Guarde el archivo con un
nombre que identifique su
documento, sin olvidar la
extensión .html.