INFORMATICA II

Introduccin a Internet y al HTML

SESION 01

Ing. William Len Velsquez williamleon20@yahoo.com

SERVICIO WWW
El WWW convierte el acceso a Internet

en algo sencillo para el pblico en general lo que da a sta un crecimiento explosivo. Es relativamente sencillo recorrer el Web y publicar informacin en el. Las herramientas del WWW crecieron a lo largo de los ltimos 20 aos hasta ser las ms populares. Permite unir informacin que est en un extremo del planeta con otro en un lugar distante a travs de algo que se denomina hipervnculo, al hacer click sobre ste nos comunica con el otro sector del documento o con otro documento en otro servidor de informacin.

COMO ACCEDER A WWW

Se debe ejecutar en la computadora

cliente un browser o visualizador, ms conocidos en la actualidad como NAVEGADORES. Esta es una aplicacin que sabe como interpretar y mostrar documentos hipertextuales. Ejemplos: Internet Explorer de Microsoft, Navigator de Netscape, Firefox de Mozilla, Chome de google, etc.

 QUE ES UNA PAGINA WEB ?

Una aplicacin web consta de una o ms pginas conectadas entre s. Un buen punto de partida sera decir que una pgina web es un archivo de texto que contiene lenguaje de marcas de hipertexto (HTML), etiquetas de formato y vnculos a archivos grficos y a otras pginas web.

DIRECCIONES WEB URL

Cada pgina Web tiene asociado una direccin o URL (Localizador Uniforme de Recursos). Por ejemplo, la pgina principal de la USB es www.usb.edu.pe. Una direccin URL es la ruta a una pgina determinada dentro de Internet. Se utiliza de la misma forma que para localizar un archivo en una computadora, en este caso indica que es la pgina principal que esta situada en el servidor de USB que esta conectado al WWW. El nombre de la pgina principal dentro del servidor es normalmente default.htm o Index.htm, y estos son los archivos que se despliegan en el navegador si no se indica cual y si solo se indica el nombre base de URL.

LOS DOMINIOS DE INTERNET

Los Dominios cuando se refirien al registro en un

Organismo Pertinente del nombre que se ha elegido. Los Dominios de 1er. Nivel son los que indican la zona geogrfica a la que pertenece o registran el dominio. Ejemplo: www.usb.edu.pe Los Dominios de segundo Nivel, son las palabras o letras que identifica a la actividad, por ejemplo, com, edu, etc. Ejemplo: www.usb.edu.pe Los Dominios de 3er. Nivel son los que se crean cuando el nombre con el que deseamos que se nos identifique en Internet. Ej: www.usb.edu.pe

DOMINIOS DE PRIMER NIVEL POR PAISES

.co .es .us .fr .uk

.it
.ar .jp

Colombia Espaa EEUU Francia Reino Unido Italia Argentina Japon

DOMINIOS DE SEGUNDO NIVEL POR ACTIVIDAD

.com: Organizaciones comerciales. .org: Organizaciones sin fines de

lucro. .gov: Organizaciones gubernamentales. .edu: Organizaciones educacionales. .mil: Organizaciones militares. .net: Organizaciones de servicios a la Red

www.usb.edu.pe
Hace referencia al tipo de servicio que se ofrece en esa direccin. Tambin puede ser http, ftp, News ... Dominio Organizacional Dominio Geogrfico

Nombre de la institucion

LENGUAJE HTML
En un sistema de visualizacin de

texto, imgenes, hipertextos e hipermedias; la pgina es el objeto bsico en la cual son ubicados los elementos, y los cuales son comunes a todos los documentos a travs del visualizador. Mucho de la estructura del documento debe ser implcitamente expresado a travs de vnculos entre pginas.

LENGUAJE HTML
Hipertexto Es un texto normal, que

puede ser almacenado, ledo, buscado o editado, con una importante diferencia: que contiene enlaces dentro del texto a otros documentos. Estos enlaces son llamados vnculos, HiperLigas o simplemente Ligas. Hipermedia es un hipertexto que tiene otra cualidad, contiene enlaces a otros tipos de medios, tales como sonidos, imgenes y pelculas.

DOCUMENTOS HTML
HTML usa elementos, a los que

denominaremos etiquetas, para decirle al programa aplicacin de HTML como desplegar o mostrar el texto. Las etiquetas inician con un signo menor que ("<") seguido del nombre de la etiqueta, y terminan con un signo mayor que (">"). Usualmente, las etiquetas vienen en pares. Todo archivo que contenga documentos HTML necesariamente tendr extensin HTM y HTML.

ESTRUCTURA DE UN DOCUMENTO DE HTML

Como ya hemos mencionado el principio

esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Funcionan de la siguiente manera: <etiqueta> Este es el inicio de una etiqueta. </etiqueta> Este es el cierre de una etiqueta. Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Por claridad, se usarn en la clase solamente las maysculas

ESTRUCTURA DE UN DOCUMENTO DE HTML

El documento Html est enmarcado con la

etiqueta <html>
Y est dividido en dos zonas principales:
El encabezamiento enmarcado con la etiqueta

<head>, y El cuerpo enmarcado con la etiqueta <body>

ETIQUETAS BSICAS
DOCUMENTO HTML
<html> Enmarca un documento con formato

html. Siempre todo el documento HTML debe estar entre las etiquetas <html> y </html>: Ejemplo:
<html>

[Todo el documento] </html>

ETIQUETAS BSICAS
ENCABEZADO
El encabezado, est comprendido

entre las etiquetas <head> y </head> <head> .... </head> Dentro del encabezado hay informacin del documento, que no se ve en la pantalla principal,
El contenido principal del encabezado

es el ttulo del documento, El ttulo se coloca entre las etiquetas <title> y </title>.

ETIQUETAS BSICAS
CUERPO
El cuerpo, est comprendido

entre las etiquetas <body> y </body>

<body> .... </body> Dentro del cuerpo se encuentra

todo lo que se desea que aparezca en la pantalla principal (texto, imgenes, etc.)

ETIQUETAS BSICAS
Ejemplo
La estructura queda de esta manera:

<html> <head> <title> ttulo de la pgina </title> </head> <body> [aqu van las etiquetas que visualizan la pgina] </body> </html>

ENTORNO DEL DREAMWEAVER

PANTALLA DE BIENVENIDA

Le permite abrir un documento reciente o crear un documento nuevo.

ESPACIO DE TRABAJO
El espacio de trabajo de Dreamweaver permite ver las

propiedades de los documentos y los objetos. Adems, coloca muchas de las operaciones ms frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rpidamente. Dreamweaver proporciona un diseo integrado en una nica ventana. En el espacio de trabajo integrado, todas las ventanas y paneles estn integrados en una nica ventana de la aplicacin de mayor tamao.

ESPACIO DE TRABAJO
A.Barra de aplicaciones B.Barra de herramientas

Documento C.Ventana de documento D.Grupos de paneles E.Conmutador de espacios de trabajo F.Selector de etiquetas G.Inspector de propiedades H.Panel Archivos

Introduccin a la ventana de documento

Vista Diseo Un entorno para el diseo visual de la

pgina, la edicin visual y el desarrollo rpido de aplicaciones. En esta vista, Dreamweaver muestra una representacin visual del documento completamente editable, similar a la que aparecera en un navegador. Vista Cdigo Un entorno de codificacin manual para escribir y editar cdigo HTML, JavaScript, cdigo de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de cdigo. Vista de cdigo dividida Versin dividida de la vista Cdigo que le permite desplazarse por el trabajo realizado en diferentes secciones del documento a la vez

Creacin de una pgina en blanco

Se puede crear una pgina que contenga un diseo CSS prediseado o

bien crear una completamente en blanco y realizar su propio diseo. Seleccione Archivo > Nuevo. En la categora Pgina en blanco del cuadro de dilogo Nuevo documento, seleccione el tipo de pgina que desea crear en la columna Tipo de pgina. Por ejemplo, seleccione HTML para crear una pgina HTML, ColdFusion para crear una pgina ColdFusion, etc. Si desea que su nueva pgina contenga un diseo CSS, seleccione un diseo CSS prediseado en la columna Diseo; de lo contrario, seleccione Ninguno. En funcin de sus seleccin, aparece una vista previa y una descripcin del diseo seleccionado en el lado derecho del cuadro de dilogo.

Creacin de una pgina en blanco

Ejercicio Practico 01.01

Explore las opciones: Cdigo Visualice el cdigo, observe la estructura de un documento HTML Regrese a la opcin Diseo

ETIQUETAS DE PRRAFOS
SALTO DE PRRAFO <p> ... </p> Permite separar el texto en distintos

prrafos, insertando una lnea en blanco al final del texto (generalmente no se usa su correspondiente etiqueta de cierre </p>) Generalmente se utiliza la etiqueta completa cuando se desea agregar alguna caracterstica al prrafo La sintaxis de <p> es: <p [align=formato]> texto </p> Donde: align es un parmetro que especifica la alineacin del prrafo. ( Center, Right o Left )

Formato de prrafo: Alineacin

Ejercicio Practico 01.02

Digite en el panel de diseo el siguiente texto:

MI PRIMERA PAGINA WEB Explore las opciones: Cdigo Visualice el cdigo, identifique la etiqueta <p> Regrese a la opcin Diseo

Configuracin y edicin de una carpeta raz local

Configurar un sitio de Dreamweaver permite organizar todos

los documentos asociados con un sitio Web. Si desea comenzar a editar archivos en su equipo (sin publicarlos), configure solamente una carpeta local y, ms adelante, aada la informacin remota y de prueba.
Para configurar un sitio nuevo, seleccione Sitio > Nuevo

sitio. Para editar la configuracin de un sitio existente en el disco local o un sitio remoto (o una rama de un sitio remoto), con independencia de si se cre en Dreamweaver o no, elija Sitio > Administrar sitios, seleccione el sitio y haga clic en Editar.

Configuracin y edicin de una carpeta raz local

Introduzca la informacin de configuracin en el cuadro

de dilogo Definicin del sitio:

Para configurar un sitio utilizando el asistente para la

configuracin de sitios, haga clic en la ficha Bsicas y siga las instrucciones. Para ms informacin, consulte Opciones de la ficha Bsicas. Para configurar directamente las carpetas local, remota y de prueba (para procesar pginas dinmicas), haga clic en la ficha Avanzadas, seleccione la categora Datos locales y establezca las opciones. (Recomendado)

Configuracin y edicin de una carpeta raz local

Ejercicio Practico 01.02

Defina su sitio de trabajo Nombre del sitio: Mi primer sitio La carpeta raiz local: clase01 Carpeta predeterminada de imgenes: IMAGENES Guardar el archivo con el nombre: p0101

ETIQUETAS DE CABECERA
CABECERAS <h1> y </h1>, <h2> y </h2>, etc Es una etiqueta que permite asignar una serie de caractersticas al texto tales como: tipo de fuente, estilo negrita, tamao, salto de lnea La sintaxis del encabezado es como sigue <hy> TEXTO DE ENCABEZADO /hy>
Donde y es un nmero del 1 al 6.

Ingrese el texto : Encabezado 1 ............ Seleccione el primer prrafo Aplique Formato / Formato de prrafo / Encabezado1 Repita para los dems prrafos

OTRAS ETIQUETAS BSICAS

EJERCICIO 01.03 Crear una pgina con el nombre de P02.htm que

permita mostrar lo siguiente:

OTRAS ETIQUETAS BSICAS

SALTO DE LNEA <br> Esta etiqueta permite separar textos en diferentes lneas, pero

sin dejar una lnea en blanco. No tiene etiqueta de cierre. Si se quiere obtener mltiples lneas en blanco no basta con repetir la etiqueta <p>, sino que hay que combinarla con la etiqueta <br>. Ejemplo, Se quiere obtener cuatro lneas en blanco, se debe poner: <br><p>

OTRAS ETIQUETAS BSICAS

COMENTARIOS NO VISIBLES EN LA PANTALLA <!-- y --> Esta etiqueta permite escribir comentarios en el

documento HTML sobre el cdigo que se esta escribiendo, y que puede servir para recordar posteriormente sobre lo que se hizo, y que no se quiere que se vean en pantalla. La forma de utilizar esta etiqueta es encerrando dichos comentarios entre estos dos smbolos: <!-- y --> Ejemplo: <!-- Esto es un comentario al cdigo que no se ver en pantalla -->

OTRAS ETIQUETAS BSICAS

ESPACIOS EN BLANCO "&nbsp;" Cuando se esta escribiendo un texto, y se ponemos ms de

un espacio en blanco entre dos palabras el navegador slo reconoce uno de ellos. Si se desea forzar a que lo haga, se debe poner el cdigo "&nbsp;" (non-breaking space).

OTRAS ETIQUETAS BSICAS

EJERCICIO 1.4 Crear una pagina con el nombre de P03.htm que

permita mostrar lo siguiente:

CURSO: PROFESOR:

INFORMATICA II WILLIAM LEON

Observe que tiene que existir el espaciado

Visualizar con su navegador

EL TEXTO
ESTILOS DE TEXTO NEGRITA Y CURSIVA <b> </b> Negrita <i> </i> Cursiva <b> y </b> y <i> y </i> Para destacar alguna parte del texto se pueden usar: <b> texto </b> para poner algo en negrita (bold). texto <i> texto</i> para poner algo en cursiva (italic). texto

Aplicar formatos de textos con Dw

Seleccionar texto En regla de destino seleccionar Nuevo estilo en lnea Aplicar cada uno de los formatos

EJERCICIO
Crear una pagina web con el nombre : p0201.html Escribir el siguiente texto:

HTML Son siglas de HyperText Markup Language (lenguaje de marcado de hipertexto), hace referencia al lenguaje de marcado predominante para la elaboracin de pginas web que se utiliza para describir y traducir la estructura y la informacin en forma de texto, as como para complementar el texto con objetos tales como imgenes. Aplicar el primer prrafo un tamao color fuente diferente del siguiente prrafo

 Crear una pagina web con el nombre de p0202.html que

EJERCICIO

muestre el siguiente contenido:

Tamaos Y Colores

LISTAS
A menudo se necesita presentar los textos en forma de listas. Existe tres tipos distintos: Listas sin ordenar (no numeradas) Listas ordenadas (numeradas) Listas de definicin. Lista De men

LISTAS SIN ORDENAR

<ul> .... </ul>
Las listas desordenadas (unordered lists) sirven para

presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un nmero. Crear una pgina web con el nombre p0204.html Su estructura es la siguiente:
<ul> <li> TEXTO</li> <li> TEXTO</li> <li> TEXTO</li> <li> TEXTO</li> </ul>

LISTAS SIN ORDENAR

Para aplicar la etiqueta de lista sin ordenar Se selecciona el texto Y se aplica el formato

LISTAS SIN ORDENAR

Escribir el siguiente texto Aplique el formato de lista sin ordenar El resultado ser

Un elemento Otro elemento Otro ms Etc.

Revise el cdigo

<ul> <li> Un elemento </li> <li> Otro elemento</li> <li> Otro ms </li> <li> Etc. </li> </ul>

LISTAS SIN ORDENAR

<ul> puede llevar un parmetro, TYPE, de modo que el

diseador puede especificar el tipo de grfica que anteceder sus artculos. Hay tres tipos de grficas: disc, circle y square.
Crear una pgina web que permita visualizar lo siguiente:

En la vista cdigo se debe visualizar lo siguiente:

<ul Type=square> <li> No Numerada 1 </li> <li> No Numerada 2 </li> <li> No Numerada 3 </li> </ul><P>

LISTAS ORDENADAS
<ol> .... </ol> Las listas ordenadas (ordered lists) sirven para presentar

cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecer automticamente un nmero correlativo para cada cosa. Su estructura es la siguiente:
<ol> <li> TEXTO</li> <li> TEXTO</li> <li> TEXTO</li> <li> TEXTO</li> </ol>

LISTAS ORDENADAS
Para aplicar la etiqueta de lista sin ordenar Se selecciona el texto Y se aplica el formato

LISTAS ORDENADAS
Escribir el siguiente texto Aplique el formato de lista ordenada El resultado ser

Numerada 1 Numerada 2 Numerada 3

Revise el cdigo

<ol> <li>Numerada 1</li> <li> Numerada 2 </li> <li>Numerada 3<br /> </li> </ol>

LISTAS ORDENADAS
<ol> puede usar los parmetros type y start. Donde type

toma los valores: A para maysculas, a para minsculas, I numerales romanos en mayscula y i numerales romanos en minscula. start especifica el nmero con el que se iniciar la cuenta ordenada. En la vista cdigo se debe Crear una lista en numerales visualizar lo siguiente: romanos iniciando con VII : <ol start="7" type="I"> <li>Numerada 1</li> <li> Numerada 2 </li> <li>Numerada 3<br /> </li> </ol>

LISTAS NO ORDENADAS
Se puede anidar una lista dentro de otra.
Ingrese el texto

Mamferos Peces Corvina Bonito Aves Reptiles

Crear una lista que se visualice de la siguiente manera:

El cdigo se debe visualizar de la siguiente manera <ul> <li> Mamferos</li> <li> Peces</li> <ul> <li> Corvina</li> <li> Bonito</li> </ul> <li> Aves</li> <li> Reptiles</li> </ul>

LISTAS ORDENADAS
Se puede anidar una lista dentro de otra.
Ingrese el texto

Mamferos Peces Corvina Bonito Aves Reptiles

Crear una lista que se visualice de la siguiente manera:

El cdigo se debe visualizar de la siguiente manera <ol> <li>Mamferos</li> <li>Peces <ol> <li type="a">Corvina</li> <li type="a">Bonito</li> </ol> </li> <li>Aves</li> <li>Reptiles</li> </ol>

FIN