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