SEMANA 3 - FUNDAMENTOS DE LA CREACION DE SITIOS WEB

Semana 3

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

¿QUÉ ES UNA PÁGINA WEB? Una página Web puede ser definida como un conjunto de texto organizado y estructurado, que esta escrito en un lenguaje de hipertexto identificable por un browser el cual presenta la pagina web al usuario.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

¿QUÉ ES UN HIPERTEXTO? El concepto de hipertexto responde, fundamentalmente, a una forma de concebir el acceso a la información y como se organizan los elementos en un espacio definido.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

¿QUÉ ES UN HIPERTEXTO? El texto impreso podría considerarse un modelo de presentación de la información de manera lineal: la página 2 sucede a la 1, y así sucesivamente, del prólogo al epílogo.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

¿QUÉ ES UN HIPERTEXTO? El hipertexto define la estructura de la Pagina Web, así como que contenido tendrá u como y en que orden estarán dispuestos dichos elementos.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

LENGUAJE DE MARCAS Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

¿QUÉ ES HTML? HTML (Hyper Text Markup Language) Lenguaje de Etiquetas de Hipertexto, Son Etiquetas (<>……</>) que se van intercalando entre el texto de forma que los elementos de la pagina puedan ser traducidos por un browser a través de la internet.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

W3C Existe un organismo internacional independiente llamado W3C (World Wide Web Consortium). Que se encarga de establecer los lineamientos para la aplicación de los estándares de los lenguajes para la web como XHTML. HTML y mas

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

XML Extensible Markup Language (Lenguaje de Marcas Extensible).

Es un metalenguaje extensible de etiquetas desarrollado por el W3C.

Es una simplificación y adaptación del SGML y permite definir la gramática de lenguajes específicos.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

XML En tanto XML no es un lenguaje sino es la manera de definir lenguajes para diferentes necesidades. Propone como un estándar para el intercambio de información entre diferentes plataformas. Se usa en Bases de Datos, Editores de Texto, Hojas de Calculo, Etc. Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

XHTML XHTML (eXtensible Hypertext Markup Language) Es el lenguaje de marcado pensado para sustituir a HTML como estandar para las paginas Web.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

ATIENDE…

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

WYSIWYG

WYSIWYG - What You See Is What You Get "lo que ves es lo que obtienes".

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

WYSIWYG Se dice en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

JAVASCRIPT JavaScript es un lenguaje de scripting interpretado no necesita compilación, utilizado para acceder a objetos en aplicaciones.

Principalmente, se utiliza integrado en un navegador web permitiendo el desarrollo de interfaces de usuario mejoradas y páginas web dinámica

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

SERVIDORES Y CLIENTES WEB Para que una pagina Web este disponible se requiere entre otros Conexión a Internet, un servidor web, una IP Fija Que nos permita la identificación del servidor y asegurar su acceso al sitio web.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

EDITORES HTML Y XHTML Cualquier editor de texto permite crear paginas Web. Para ello solo es necesario crear los documentos con la extensión HTML o HTM, e Incluir como contenido del documento el código HTML deseado.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

SOFTWARE DE DISEÑO WEB

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ing. Edson Raúl Lazo Alvarez

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

EL FORMATO DE LAS ETIQUETAS HTML Las etiquetas HTML se escriben encerradas entre ángulos.

Normalmente se utilizan dos etiquetas: una de inicio y otra de final para indicar que ha terminado el efecto que queríamos presentar. La única diferencia entre ambas es que la de cierre lleva una barra inclinada "/" antes del código. <etiqueta>texto</etiqueta> Por ejemplo: <B>texto</B> dará como efecto texto

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

LA ESTRUCTURA DE UNA PÁGINA WEB <!-- declaramos el tipo de documento html -->

<!DOCTYPE…”-//W3C//DTD…//EN” “…dtd”> <!– aperturamos documento html -->

<html> <!-- cabecera de la página web -->

<head> </head> <!-- cuerpo del documento -->

<body> </body> </html> Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

QUE ES EL DOCTYPE <!DOCTYPE> Es la primera parte de una página web, aún antes que la etiqueta <html>.

Le indica al navegador que especificación de HTML se está utilizando <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ing. Edson Raúl Lazo Alvarez

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

TÍTULOS Código <html> <head> <title>Título</title> </head> <body>

Resultado

<h1>Título 1</h1>

Título 1

<h2>Título 2</h2>

Título 2

<h3>Título 3</h3> <h4>Título 4</h4> <h5>Título 5</h5> <h6>Título 6</h6> </body> </html> Ing. Edson Raúl Lazo Alvarez

Título 3 Título 4 Título 5 Título 6

INFORMÁTICA II

PÁRRAFO Código

Resultado

<html> <head>

Este es el primer párrafo.

<title>Párrafos</title>

Y este es el segundo párrafo.

</head> <body>

<p>Este es el primer párrafo.</p> <p>Y este es el segundo párrafo.</p> </body> </html>

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

IMÁGENES Si tenemos que insertar una imagen que lleva por nombre de archivo "foto1.jpg" y que está ubicada en el directorio "www.ucci.com/imagenes/", entonces esta sería la forma de escribir el código: <img src="http://www.ucci.com/imagenes/foto1.jpg"> <img src="http://www.virtualnauta.com/imagenes/foto1.jpg" alt="Dos niñas caminando de la mano">

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

¿QUÉ SON LOS ENLACES O LINKS? Los enlaces o links(en Inglés) nos permiten conectarnos con otros documentos:     

una imagen una película un archivo de sonido sitios en la web(otra página web) mandar un email

Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra anchor(ancla).

La etiqueta <a> tiene como cierre </a>.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

VEAMOS UN EJEMPLO Vamos a crear un enlace hacia la home de Virtualnauta.com Código <a href="http://www.ucci.edu.pe/">La web UCCI</a>

Resultado La web UCCI La etiqueta <a> nos señala que es un enlace.

El atributo href="http://www.ucci.edu.pe/" indica la dirección donde nos conectaremos.

El texto La web UCCI es el que aparecerá en pantalla.

La etiqueta </a> es la etiqueta de cierre.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

SALTO DE LÍNEA El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos terminar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos.

Código

Resultado

Esto es <br> un salto de lí<br>nea.

Esto es un salto de lí nea.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

LISTAS ORDENADAS Son aquellas que ordenan la lista anteponiendo números ,letras o signos.

Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma, utilizamos la etiqueta <li>.

Código

Resultado

<ol> <li>Naranjas</li> <li>Manzanas</li> <li>Bananas</li> </ol>

1.

2.

3.

Ing. Edson Raúl Lazo Alvarez

Naranjas Manzanas Bananas

INFORMÁTICA II

LISTAS DE VIÑETAS Exponen la lista anteponiendo un punto, cuadrado o triángulo negro.

Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>.

Código

Resultado

<ul> <li>Tomates</li> <li>Pepinos</li> <li>Cebollas</li> </ul>

• • •

Ing. Edson Raúl Lazo Alvarez

Tomates Pepinos Cebollas

INFORMÁTICA II

¿QUÉ SON LAS TABLAS DE HTML? Definimos las tablas con la etiqueta <table>.

La tabla está dividida en filas definidas con la etiqueta <tr>.

Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>.

Las celdas pueden contener texto, imágenes, formularios, listas, otras tablas, etc.

Código <table border="1"> <tr> <td>Nombre</td> <td>Apellido</td> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> Ing. Edson Raúl Lazo Alvarez

Resultado Nombre

Apellido

Pedro

Garcia

INFORMÁTICA II

Elementos de Agrupación y Capas <div> … </div> Este elemento permite la organización de otros elementos en la página, sirviendo como contenedor. Se aplica en la estructura de la pagina.

35 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Contenido del “head” de la página <title> … </title> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES"> <head> <title>Direcciones de internet</title> </head> El navegador lee el title (título) de cada página y lo muestra en la parte superior, en el borde de la pantalla, junto con el icono del programa (Firefox, Explorer, etc. Esto es importante de cara al usuario.

Pero de cara a los buscadores, por ejemplo Google, es muy importante, puesto que es el título que asigna en los resultados de la búsqueda.

36 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Contenido del “head” de la página <meta … > La etiqueta <meta> se utiliza para añadir información sobre la página. Esta información puede ser utilizada por los buscadores.<html> <head> ... <meta name="author" content=“Edson Lazo"> <meta name="description" content="Curso Informática II"> <meta name="keywords" content="código HTML etiqueta página web"> </head> ...

37

Tipo

Significado

author

Autor de la página

classification

Palabras para clasificar la página en los buscadores

description

Descripción del contenido de la página

generator

Programa utilizado para crear la página

keywords

Palabras clave

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

COMENTARIOS La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo. <!-- Esto es un comentario. --> * Note que el signo de exclamación se coloca solo al principio del código.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ing. Edson Raúl Lazo Alvarez

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II