Haz Click Aqui para Descargar el Archivo

Guía de HTML
Prof. Lisbeth Guerra
INSERTAR IMÁGENES EN HTML
<IMG>
La marca <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">
Donde SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en
este caso "immagine.gif"). Esta marca es única en el sentido de que NO lleva como cierre el
correspondiente </IMG>.
ATRIBUTOS DE LA IMAGEN
El uso de comentarios resuelve el problema y permite optimizar la página web. La
ALT
sintaxis correcta de los comentarios es la siguiente:
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
Es posible definir la anchura y la altura de la imagen gracias a los atributos width y
WIDTH y HEIGHT
height, respectivamente:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
Donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en
píxel, y HEIGHT=180 la dimensión vertical (alto).
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son
numéricos y van expresados en píxel. Si impostamos el valor BORDER en 0, la
BORDER
imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica
ningún borde, pero si la imagen es también un enlace automáticamente se le
asignará un BORDER=1. La sintaxis correcta es:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">
Programación II - PNFI
1
Guía de HTML
Prof. Lisbeth Guerra
INSERTAR ENLACES EN HTML
Los documentos HTML son hipertextos cuyo funcionamiento se debe, en su mayor parte, a los
hiperenlaces o anclajes, cuya marca específica es <A>.
ATRIBUTOS DE LOS ENLACES
El elemento <A> (la A corresponde al inglés Anchor) necesita una marca de
apertura y una de cierre y entre ellas podemos insertar texto, imágenes y otros
elementos multimedia. Para que funcione, el elemento <A> debe estar asociado a
otros atributos. De éstos, el más importante es HREF (abreviatura del inglés
Hypertext Reference), que contiene el URL o página donde ir. La sintaxis es:
<A HREF>
<A HREF="http://www.google.com">Visita google.com</A>
Ejemplo: Visita google.com
En el código antes citado, si hacemos clic en el texto "google.com" (comprendido
entre las marcas de apertura y cierre), llegamos al URL http://www.google.com
indicado por el atributo HREF.
Es posible sustituir el texto con una imagen obteniendo un efecto idéntico.
TARGET es un atributo implementado por exigencias relacionadas con la gestión de
los marcos. En una página dividida en marcos, este atributo indica en cuáles de
ellos debe quedar visualizado el documento.
TARGET
TARGET podemos cargar una página asociada a HREF en otra ventana del
navegador usando la siguiente sintaxis:
<A HREF="http://www.htmlpoint.com" TARGET="_new">Visita HTMLpoint</A>
El atributo TARGET="_new" indica al navegador que debe cargar el enlace con
http://www.htmlpoint.com en una nueva (_new) ventana.
Al igual que para el elemento IMG, también en el caso de los enlaces hipertextuales
TITLE
podemos definir un texto con un comentario que se activará cuando pasemos el
ratón por encima del enlace. La sintaxis es:
<A HREF="http://www.google.com" TITLE="sitio de consulta">Visita google.com</A>
Programación II - PNFI
2
Guía de HTML
Prof. Lisbeth Guerra
Es posible asimismo incluir enlaces con direcciones de correo electrónico utilizando
una sintaxis algo distinta de la indicada para los URL. El código es:
MAILTO (enlace a
e-mail)
<A HREF="mailto:[email protected]">Escribe a HTMLpoint</A>
Ejemplo: Enviar Correo Haciendo clic en este enlace se abre automáticamente tu
programa de correo electrónico predefinido con el campo TO ya impostado en
[email protected].
Hasta ahora hemos analizado los enlaces con recursos externos o con páginas
diversas de un mismo sitio. Sin embargo, podemos asimismo crear enlaces con
puntos específicos de un mismo documento gracias al código <A NAME="enlace">.
Sintaxis en el texto o imagen para ir al enlace:
ENLACES EN EL
MISMO
DOCUMENTO
<A HREF="#Concepto">Concepto de la POO</A>
En el enlace desde el que quieres llegar al punto del nuevo documento, inserta la
siguiente sintaxis:
<A name="Concepto" id="Concepto">Concepto de la (POO)</A>
La almohadilla (#) indica que se trata de un enlace interno.
En este ejemplo se manda a un punto de la misma página, porque a la derecha de
la almohadilla aparece el nombre del enlace interno.
PRÁCTICA 5
Programación II - PNFI
3
Guía de HTML
Prof. Lisbeth Guerra
Instrucciones:
Color de fondo: Blanco
Titulo: Negrita, Cursiva, color azul, centrado, tamaño H1
“Programacion Orietada a objetos”
Línea Horizontal: Color: azul, centrada, tamaño: 5, ancho: 100%
Textos: Tamaño H3, alineación: izquierda, color: azul, negrita, cursiva, hacer hipervínculos a los titulos
Concepto de la POO
Fundamentos de la POO
Ventajas de la POO
Titulo: Tamaño:+2, alineación: centrada, color: rojo
“Concepto de la Programacion Orientada a Objetos (POO)”
Texto: Tamaño:+2, alineación: justificada, color: negro
La Programacion Orientada a Objetos (POO u OOP segun sus siglas en ingles) es un paradigma de
programacion que usa objetos y sus interacciones para disenar aplicaciones y programas de computadora.
Esta basado en varias tecnicas, incluyendo herencia, modularidad, polimorfismo, y encapsulamiento. Su
uso se popularizo a principios de la decada de 1990. Actualmente son muchos los lenguajes de
programacion que soportan la orientacion a objetos. La programacion Orientada a objetos (POO) es una
forma especial de programar, mas cercana a como se expresan las cosas en la vida real que otros tipos de
programacion.
Insertar una imagen: alineación: centrada, tamaño: WIDTH=178 HEIGHT=180 BORDER=2
Titulo: Tamaño:+2, alineación: centrada, color: rojo
“Fundamentos de la POO”
Texto: Tamaño:+2, alineación: justificada, color: negro
La programacion orientada a objetos es una forma de programar que trata de encontrar una solucion a
estos problemas. Introduce nuevos conceptos, que superan y amplian conceptos antiguos ya conocidos.
Entre ellos destacan los siguientes:
Texto con viñeta: Tamaño:+2, alineación: justificada, color: negro


Clase: Definiciones de las propiedades y comportamiento de un tipo de objeto concreto. La
instanciacion es la lectura de estas definiciones y la creacion de un objeto a partir de ellas.
Objeto: Instancia de una clase. Entidad provista de un conjunto de propiedades o atributos (datos)
y de comportamiento o funcionalidad (metodos), los mismos que consecuentemente reaccionan a
Programación II - PNFI
4
Guía de HTML


Prof. Lisbeth Guerra
eventos. Se corresponden con los objetos reales del mundo que nos rodea, o con objetos internos
del sistema (del programa). Es una instancia a una clase.
Metodo: Algoritmo asociado a un objeto (o a una clase de objetos), cuya ejecucion se
desencadena tras la recepcion de un "mensaje". Desde el punto de vista del comportamiento, es lo
que el objeto puede hacer. Un metodo puede producir un cambio en las propiedades del objeto, o
la generacion de un "evento" con un nuevo mensaje para otro objeto del sistema.
Mensaje: Una comunicacion dirigida a un objeto, que le ordena que ejecute uno de sus metodos
con ciertos parametros asociados al evento que lo genero.
Titulo: Tamaño:+2, alineación: centrada, color: rojo
“Ventajas de la POO”
Texto con viñeta: Tamaño:+2, alineación: justificada, color: negro





Fomenta la reutilizacion y extension del codigo.
Relacionar el sistema al mundo real.
Facilita la creacion de programas visuales.
Agiliza el desarrollo de software.
Facilita el mantenimiento del software.
NOTA:
 Guardar el Archivo con el nombre: Practica5.html
 La imagen debe estar guardada en la misma carpeta donde está el archivo Practica5.html
 Realizar los enlaces en los títulos
CÓDIGO:
<html>
<head>
<title>practica 5</title>
</head>
<body>
<BODY BGCOLOR="white"> <!--Color de Fondo---->
<!--Titulo-->
<p><H1 align= "center"><b><i><u><FONT COLOR="blue"> Programacion
orientada a objetos </font></u></i></b></H1></p>
<br> <!--Salto de línea-->
<!--linea horizontal-->
<HR align="CENTER" size="5" width="100%" color="blue">
<!--enlaces-->
<p><H3
align=
"justify"><b><i><FONT
COLOR="blue"><A
HREF="#Concepto">Concepto de la POO</A></font></i></b></H3></p>
Programación II - PNFI
5
Guía de HTML
Prof. Lisbeth Guerra
<p><H3
align=
"justify"><b><i><FONT
COLOR="blue"><A
HREF="#Fundamentos"> Fundamentos de la POO</font></A></i></b></H3></p>
<p><H3 align= "justify"><b><i><FONT COLOR="blue"><A HREF="#Ventajas">
Ventajas de la POO</font></A></i></b></H3></p>
<!--Titulo-->
<p
align="center"><FONT
SIZE="+2"><FONT
COLOR="red"><A
name="Concepto" id="Concepto">Concepto de la Programacion Orientada a Objetos
(POO)</A></font></font></p>
<!--Concepto-->
<p align="justify"><FONT SIZE="+2"><FONT COLOR="black">La Programacion
Orientada a Objetos (POO u OOP segun sus siglas en ingles) es un paradigma de
programacion que usa objetos y sus interacciones para disenar aplicaciones y
programas de computadora. Esta basado en varias tecnicas, incluyendo
herencia, modularidad, polimorfismo, y encapsulamiento. Su uso se popularizo a
principios de la decada de 1990. Actualmente son muchos los lenguajes
de programacion que soportan la orientacion a objetos. La programacion Orientada
a objetos (POO) es una forma especial de programar, mas cercana a
como se expresan las cosas en la vida real que otros tipos de programacion.
</font></font></p>
<!--insertar imagen-->
<p align="center"><IMG SRC="poo.jpg" WIDTH=178 HEIGHT=180 BORDER=2
ALT="Programacion POO"></p>
<p
align="center"><FONT
SIZE="+2"><FONT
COLOR="red"><A
name="Fundamentos" id="Fundamentos"> Fundamentos de la POO</font></A></font></p>
<p align="justify"><FONT SIZE="+2"><FONT COLOR="black">La programacion
orientada a objetos es una forma de programar que trata de encontrar una
solucion a estos problemas. Introduce nuevos conceptos, que superan y amplian
conceptos antiguos ya conocidos.
Entre ellos destacan los siguientes: </font></font></p>
<!--lista-->
<UL TYPE=disc> <font size="+2" >
<LI> <p align="justify">Clase: Definiciones de las propiedades y comportamiento de un tipo de
objeto concreto. La instanciacion es la lectura
de estas definiciones y la creacion de un objeto a partir de ellas.</p>
<LI><p align="justify"> Objeto: Instancia de una clase. Entidad provista de un conjunto de
propiedades o atributos (datos) y de comportamiento
o funcionalidad (metodos), los mismos que consecuentemente reaccionan a
eventos. Se corresponden con los objetos reales del mundo que nos rodea,
o con objetos internos del sistema (del programa). Es una instancia a una
clase.</p>
<LI><p align="justify"> Metodo: Algoritmo asociado a un objeto (o a una clase de objetos), cuya
ejecucion se desencadena tras la recepcion de
Programación II - PNFI
6
Guía de HTML
Prof. Lisbeth Guerra
un "mensaje". Desde el punto de vista del comportamiento, es lo que el objeto
puede hacer. Un metodo puede producir un cambio en las propiedades
del objeto, o la generacion de un "evento" con un nuevo mensaje para otro objeto
del sistema.</p>
<LI><p align="justify"> Mensaje: Una comunicacion dirigida a un objeto, que le ordena que ejecute
uno de sus metodos con ciertos parametros
asociados al evento que lo genero. </p>
</UL>
<!--Titulo-->
<p align="center"><FONT SIZE="+2"><FONT COLOR="red"><A name="Ventajas"
id="Ventajas">Ventajas de la (POO)</A></font></font></p>
<!--lista-->
<UL TYPE=disc> <font size="+2" >
<LI> <p align="justify">Fomenta la reutilizacion y extension del codigo. </p>
<LI><p align="justify"> Relacionar el sistema al mundo real.</p>
<LI><p align="justify"> Facilita la creacion de programas visuales.</p>
<LI><p align="justify"> Agiliza el desarrollo de software. </p>
<LI><p align="justify"> Facilita el mantenimiento del software. </p>
</UL>
</body>
</html>
Programación II - PNFI
7
Guía de HTML
Prof. Lisbeth Guerra
MARCOS EN HTML
Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador.
Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la
práctica en varias páginas independientes.
PARÁMETRO
NAME
SRC
SCROLLING
NORESIZE
FRAMEBORDER
MARGINWIDTH
MARGINHEIGHT
ETIQUETA DE LOS MARCOS
UTILIDAD
Asigna un nombre a un marco para que después podamos referirnos a él.
Indica la dirección del documento HTML que ocupará el marco.
Decide si se colocan o no barras de desplazamiento al marco para que
podamos movernos por su contenido. Su valor es por defecto AUTO, que
deja al navegador la decisión. Las otras opciones que tenemos son YES y
NO.
Si lo especificamos el usuario no podrá cambiar de tamaño el marco.
Al igual que su homónimo en la etiqueta <FRAMESET>, si lo igualamos a
cero se eliminará el borde con todos los marcos contiguos que tengan
también este valor a cero.
Permite cambiar los márgenes horizontales dentro de un marco. Se
representa en pixels.
Igual al anterior pero con márgenes verticales.
ACCESO A OTROS MARCOS
_top
Elimina todos los marcos existentes y muestra la nueva página en la ventana original sin
marcos.
Muestra la nueva página en una ventana nueva y sin nombre del navegador.
_blank
Muestra la nueva página en el marco donde está declarado el enlace.
_self
_parent
Muestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el
enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el
marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación
entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.
Programación II - PNFI
8
Guía de HTML
Prof. Lisbeth Guerra
PRACTICA 6
Crear una página con dos ventanas (izquierda y derecha)
1. Se debe crear una página madre la cual 2. Debemos crear otra pagina guardarla con el
llamaremos index.html
nombre izquierdo.html
<html>
<head>
<title> Pagina Index</title>
<FRAMESET COLS="20%,80%">
<FRAME SRC="izquierdo.html"> <!--Llama la
pagina izquierda.html-->
<FRAME SRC="derecha.html"> <!--Llama la pagina
derecha.html-->
</FRAMESET>
</head>
</html>
NOTA: Observe que esta pagina index.html, no
lleva la sección de BODY
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="blue">
<H1>
Frame izquierdo
</H1>
Este frame podria servir de indice:
<UL>
<LI>Tema 1
<LI>Tema 2
<LI>Tema 3
</UL>
</BODY>
</HTML>
3. Ahora se debe crear la página derecha.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>
Este es el frame Derecho
</H1>
<P>
En este frame podria ir el contenido principal del Web.
</P>
</BODY>
</HTML>
Programación II - PNFI
9
Guía de HTML
Prof. Lisbeth Guerra
PRACTICA 7
Crear una página con tres ventanas (menú (izquierda), superior (arriba) y central
1. Se debe crear una página madre la cual 2. Debemos crear otra pagina guardarla con el
llamaremos index.html
nombre menu.html
<html>
<head>
<title> Pagina principal </title>
<HTML>
<FRAMESET COLS=20%,*>
<FRAME SRC="menu.html">
<FRAMESET ROWS=40%,*>
<FRAME SRC="superior.html">
<FRAME SRC="central.html">
</FRAMESET>
</FRAMESET>
<BODY BGCOLOR="#00BFFF">
<HEAD>
</HEAD>
<H1 align="center"> MENU </H1>
</BODY>
</HTML>
</head>
</html>
NOTA: Observe que esta página index.html, no
lleva la sección de BODY
3. Ahora se debe crear la página superior.html
4. Creamos la última página central.html
<HTML>
<HTML>
<HEAD>
</HEAD>
<HEAD>
</HEAD>
<BODY bgcolor="#424242">
<BODY>
<H1 align="center"><FONT COLOR="#FFFFFF">
Bienvenidos </FONT></H1>
<H1 align="center"> Pagina de Contenido </H1>
</BODY>
</BODY>
</HTML>
</HTML>
Programación II - PNFI
10
Guía de HTML
Prof. Lisbeth Guerra
Investigar hipervínculo hacia otra página
<a href="documento.html">Enlace</a>
Para que se abra en una nueva ventana, debes añadir target="_blank":
<a href="documento.html" target="_blank">Enlace</a>
Programación II - PNFI
11