ACTIVIDAD 02

Identificar Elementos de la Página

Web
 Negrita Cursiva tachado.
 Listas.
 Creación de vínculos, inserción de imágenes y video.

Ing. Victor Manuel Chumpitaz Avalos. 1

 ETIQUETA USO OBSERVACIONES
<b>…</b> Poner texto en negrita Puede ser sustituido por CSS.

<strong>…</strong> Poner texto en negrita Puede ser sustituido por CSS.

<i>…</i> Poner texto en cursiva Puede ser sustituido por CSS.

<em>…</em> Poner texto en cursiva Puede ser sustituido por CSS.

<u>…</u> Poner texto subrayado Deprecated. Sustituir por CSS.
<small>…</small> Poner texto más pequeño Puede ser sustituido por CSS.

<big>…</big> Poner texto más grande Puede ser sustituido por CSS.

_… Poner texto subíndice Puede ser sustituido por CSS.

^… Poner texto superíndice Puede ser sustituido por CSS.

<strike>…</strike> Poner texto como tachado Deprecated. Sustituir por CSS.
<s>…</s> Poner texto como tachado Deprecated. Sustituir por CSS.
<del>…</del> Poner texto como tachado Puede ser sustituido por CSS.
Ing. Victor Manuel Chumpitaz Avalos. 2
Listas con Enlaces
Enlaces básicos
Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés
"anchor", literalmente traducido como "ancla"). A continuación se muestra la definición
simplificada de <a> y más adelante se muestra su definición completa:
El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a
la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige
a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas,
relativas, internas y externas.
Con la definición anterior, para crear un enlace que apunte a la página principal de
Google solamente habría que incluir lo siguiente en un documento HTML:

<a href="http://www.google.com">Página principal de Google</a>

Ing. Victor Manuel Chumpitaz Avalos. 3

Protocolos:
Los enlaces nos pueden llevar a url con diferentes protocolos. Nosotros vamos a presentar los
dos más importantes:

http: Este es el protocolo básico de los servidores webs.

https: Este protocolo se diferencia del anterior en que es un protocolo cifrado. Es decir, la
información que se envía y se recibe con esa url esta siendo encriptada para que nadie más
pueda interceptar y usar esa información. Las páginas con este protocolo son las conocidas
como “páginas seguras”. Esta encriptación de los datos produce una pequeña ralentización de
la página debido a que los datos se envían cifrados.

Ing. Victor Manuel Chumpitaz Avalos. 4

La etiqueta target:
La etiqueta sirve para definir la forma en la que se accederá a la nueva url. Esta etiqueta la
escribimos dentro del enlace para predefinirla. Puede ser de diferentes tipos:

_self: Es el valor por defecto del parámetro target. El enlace se abrirá en el mismo marco en
el que está alojado.
_blank: Para hacer que ese enlace se abra en una ventana a parte.
_top: Elimina todos los marcos existente y muestra la nueva página en la ventana original sin
marcos.
_parent : Muestra la nueva página en el <frameset> que contiene al marco donde se
encuentra alojado el enlace. La etiqueta <frameset> la explicamos en otro momento

Ejemplo:
<a href="http://www.google.com" target="_self">Google</a>

Ing. Victor Manuel Chumpitaz Avalos. 5

Que son la URL Absolutas y Relativas.
Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta)
Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del
protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado.
URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL relativa: /ruta1/ruta2/pagina2.html

Ing. Victor Manuel Chumpitaz Avalos. 6

Marcadores HTML:
Nos permite enlazar contenidos dentro de la misma página.

Ing. Victor Manuel Chumpitaz Avalos. 7

Insertar Imágenes:
<IMG SRC="immagine.gif">
Aplicar Medidas de Imagen:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 >
Establecer distancia con los objetos de los 4 lados de la Imagen:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3>

Ing. Victor Manuel Chumpitaz Avalos. 8

ALIGN
El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o
después de la misma. Existen varias opciones para el atributo ALIGN:

ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen.

Para un ejemplo práctico, haz clic aquí.

Ing. Victor Manuel Chumpitaz Avalos. 9

ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.
Para un ejemplo práctico, haz clic aquí.

ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.

ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte

superior de la misma.
ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la
parte superior de la misma.

Ing. Victor Manuel Chumpitaz Avalos. 10

Enlace con Imágenes:
<a title="Los Tejos" href="http://www.lostejos.com">
<img src="casarural.jpg" alt="Los Tejos" /></a>

Ejemplo.
<html>
<head>
</head>
<body background="conejo.jpg">
<a title="Los Tejos" href="http://www.lostejos.com">
<img src="play.jpg" VSPACE=15 HSPACE=15 " /> </a>

<a title="Index 1" href="index1.html">

<img src="caja.jpg" VSPACE=15 HSPACE=15 " /></a>
</body>
</html

Ing. Victor Manuel Chumpitaz Avalos. 11

Ing. Victor Manuel Chumpitaz Avalos. 12