Está en la página 1de 16

REPÚBLICA BOLIVARIANA DE VENEZUELA

MINISTERIO DEL PODER POPULAR PARA LA EDUCACIÓN UNVIERSITARIA

UNIVERSIDAD POLITECNICA TERRITORIAL AGROINDUSTRIAL DEL TÁCHIRA

PROGRAMA NACIONAL DE FORMACIÓN EN INFORMÁTICA

SEDE SAN CRISTÓBAL

ACTIVIDAD II

AUTOR:

RONALD ALEJANDRO FLORES RANGEL, V-29.699.717

UNIDAD CURRICULAR:

ELECTIVA I

JUNIO 2020
Sección de texto

Para que un texto se muestre en nuestra página web simplemente lo introduciremos en la


etiqueta <body>, como hemos visto en los ejemplos anteriores.

<html>
<head>
<title>Mi primera página WEB: texto</title>
</head>
<body>
Esta es línea, y a continuación insertamos un salto de línea. <br/>
Esta es una línea, y a continuación insertamos un salto de línea. <br/>
Esta es una línea, y a continuación insertamos un salto de línea. <br/>
</body>
</html>

Con el atributo text de la etiqueta <body> podremos definir el color de letra para todo el
documento. Usaremos las etiquetas <b> o <strong>para mostrar el texto en negrita, <u> para
mostrarlo subrayado e <i> para visualizarlo en cursiva. También podemos usar los atributos de la
etiqueta <font>:

color: color del texto (nombre del color | hexadecimal).


face: nombre del tipo de letra a usar para mostrar el texto.
size: tamaño de la letra, especificado entre un rango de '1' a '6', siendo '3' el valor por
defecto.

Énfasis

Al aplicar énfasis al texto en HTML, le estamos aplicando fuerza en la articulación o en la


entonación con la que se quiere destacar un aspecto de lo que se dice. Para dar énfasis a un texto
disponemos de la etiqueta <em>. Si queremos dar un énfasis más fuerte, utilizaremos <strong>.

El énfasis es semántico y no se relaciona al estilo. Los navegadores suelen representar <em> con
cursiva y <strong> con negrita. Sin embargo, es importante tener claro que el estilo que aplica el
navegador no tiene que ver con la etiqueta como tal, ya que la etiqueta sólo esta indicando
semánticamente que se desea dar énfasis al texto y no una asignación de estilos.

Párrafo y salto de línea

El bloque básico de un documento es el párrafo. Dentro de un documento HTML, es preciso


marcar explícitamente el comienzo de un párrafo, para lo cual se utiliza la etiqueta <P>.
En caso de no especificarlo, todo el texto se mostraría como una única línea. Se debe tener en
cuenta que determinados elementos que se verán más adelante (títulos, blockquotes,
preformateados, listas) insertan un salto de párrafo o línea de forma automática.

Los párrafos se presentan con una separación aproximada de 1.5 líneas sobre el texto normal.

<P>… </P> Marca un el inicio y final de un párrafo.

No es obligatorio marcar el final de un párrafo, ya que se supone que el final de uno viene
marcado por el principio del siguiente.

ALIGN= Especifica la alineación horizontal de este párrafo. Puede tomar los valores left,
right o center. Esta opción está incluida en el HTML 3, y es aceptada por la mayoría de los
browsers modernos.

Para especificar un salto de línea, dentro del mismo párrafo se utiliza <BR>.

<BR> Cambia a la siguiente línea, dentro del párrafo actual.

CLEAR= Se utiliza para introducir saltos de línea especiales cuando se utilizan ‘imágenes
flotantes’. Se explicará más adelante. Puede tomar los valores left, right y all.

En caso que se desee incluir un espaciado mayor que el que se inserta entre dos párrafos, no
sirve utilizar sucesivas etiquetas <P>, ya que todas ellas corresponderán al inicio del mismo
párrafo. Se deben utilizar siempre etiquetas <BR>, tantas como saltos de línea adicionales se
precisen.

Normas de enlazado con otras etiquetas:

Puede contener formatos de carácter, enlaces, saltos de línea e imágenes. Puede estar dentro
de: BLOCKQUOTES, listas y formularios.

<HTML>
<HEAD>
<TITLE>Los párrafos en HTML</TITLE>
</HEAD>
<BODY>
<P>HTML nos obliga a especificar el inicio de cada párrafo.
<P>No respeta
el formato que utilicemos al escribir el código.<BR> Los saltos de línea son la solución para partir
líneas dentro de un mismo párrafo.
<P><P><P>Varios inicios de párrafo seguidos equivalen a un sólo párrafo.
</BODY>
</HTML>

<P ALIGN=right> El texto de este párrafo está alineado a la derecha. <BR>El salto de línea
mantiene la alineación.

<P ALIGN=center>Y el de éste centrado.

Hiperenlaces
Los enlaces o hiperenlaces (también llamados hipervínculos) permiten abrir tanto abrir otra
página web (esté o no en nuestro servidor), así saltar a otro punto de la misma página. Algunos de
sus atributos que usaremos a continuación son:

href: especifica la URL que debe cargarse al hacer clic en el enlace, pudiendo ser también
una dirección de correo electrónico o la ruta y/o nombre de un archivo existente. En caso de
poner una almohadilla '#' no realizará acción alguna. También se puede especificar el nombre de
un <frame> o <iframe>.

name: da un nombre al enlace. Este atributo puede ser utilizado para crear enlaces
internos dentro de la misma página web.

target: indica dónde se debe cargar la página, pudiendo tomar principalmente como
valores: _blank (en una pestaña o ventana nueva), _parent (en el frame o marco que contiene al
actual), _self (en el frame actual) o _top (en la ventana principal del navegador web).

Con los enlaces locales podemos cargar otra página web de nuestro sitio: Si el otro archivo se
encuentra en otra carpeta podemos indicar una ruta relativa a la actual.

<html>
<head>
<title>Página WEB de ejemplo: hiperenlaces</title>
</head>
<body>
<a href="otra_pagina.html">Ir a la otra página</a><br />
<a href="extra/otra_pagina_1.html">Ir a la otra página 1</a><br />
<a href="../extra/otra_pagina_2.html">Ir a la otra página 2</a>
</body>
</html>
Con los enlaces podemos abrir una página web que se encuentre en otra web, introduciendo la
URL deseada:

<html>
<head>
<title>Página WEB de ejemplo: hiperenlaces</title>
</head>
<body>
<a href="http://www.google.es/">Ir a Google</a><br />
<a href="http://www.yahoo.es/" target="_blank">Ir a Yahoo</a>
</body>
</html>

Con los enlaces internos podemos acceder rápidamente a otras partes de una misma página
web. En el siguiente código HTML de ejemplo creamos al final del documento un hiperenlace
identificándolo con el atributo name, y otro al principio indicando dicho nombre en el atributo
href, de modo que cuando hagamos clic en él iremos al final de la página:
<html>
<head>
<title>Página WEB de ejemplo: hiperenlaces</title>
</head>
<body>
<a href="#fin">Ir al final</a>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<a name="fin"></a>
<p><font color="cyan">Estamos en el final</font></p>
</body>
</html>

Es posible usar hiperenlaces como acceso para que el usuario envíe un E-Mail: tras hacer clic en
el enlace se abrirá el programa de correo electrónico configurado por el usuario. También
podemos usar un enlace para descargar un archivo, tal y como mostramos en el siguiente ejemplo
(se descargará el archivo 'documento.pdf' que se encuentra en el subdirectorio 'pdf'):

<html>
<head>
<title>Página WEB de ejemplo: hiperenlaces</title>
</head>
<body>
<a href="mailto:micorreo@gmail.com">Contacto</a><br/>
<a href="pdf/documento.pdf">Descarga el documento en formato PDF</a>
</body>
</html>

Títulos

Son elementos que permiten dividir el documento en una jerarquía de secciones, en las que el
tamaño de presentación del título se corresponde con la importancia del mismo. Existen seis
niveles diferentes de títulos; cada browser la muestra de una forma diferente, pero se garantiza
que un título de número menor siempre se representa más visible que uno de número mayor. Un
título inserta un salto de párrafo automático, antes y después del mismo.

<Hn>… </Hn> Marca el texto especificado como un título de nivel n. n puede tomar
valores entre 1 y 6, siendo 1 el nivel principal.
Normas de enlazado con otras etiquetas: Puede contener: elementos de formato de caracteres,
enlaces, saltos de línea e imágenes. Puede estar dentro de: BLOCKQUOTES.

<H1>H1 - Muestra de títulos</H1>


<H2>H2 - Muestra de títulos</H2>
<H3>H3 - Muestra de títulos</H3>
<H4>H4 - Muestra de títulos</H4>
<H5>H5 - Muestra de títulos</H5>
<H6>H6 - Muestra de títulos</H6>
Podemos comparar con el texto normal
<H2 ALIGN=right>Título alineado a la derecha</H2>
<H2 ALIGN=center>Título centrado</H2>

Imágenes

Para insertar una imagen en la página web usaremos la etiqueta <img>:

align: alineación horizontal de la imagen (bottom | left | middle | right | top).


alt: muestra un texto descriptivo en lugar de la imagen si ésta no ha sido encontrada, o
bien en caso de navegadores web en modo de sólo texto.
border: ancho del borde de la imagen (en píxels).
height: indica el alto de la imagen (en píxels). Si no se indica width, se estirará
proporcionalmente a lo ancho.
hspace: espacio horizontal en píxels entre la imagen y el texto que la rodea.
longdesc: descripción larga de la imagen. Utilizada como complemento del atributo alt.
src: ruta y/o nombre y extensión, o bien URL de la imagen a mostrar.
usemap: indica que la imagen será usada en un mapa de imagen definido con la etiqueta
<map>.
vspace: espacio vertical en píxels entre la imagen y el texto que la rodea.
width: indica el ancho de la imagen (en píxels). Si no se indica height, ésta se
estirará
proporcionalmente a lo alto.

<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
<img src="email.jpg" alt="Enviar correo electrónico"/>
<img src="imagenes/email.jpg" alt="Enviar correo electrónico"/>
<img src="http://dominio.com/images/email.jpg" alt="Enviar correo electrónico"/>
</body>
</html>

Según el ejemplo, en la primera imagen se indica que el archivo 'email.jpg' se encuentra en el


mismo directorio que la página web, en la segunda que se halla en el subdirectorio 'images', y en
la tercera en otro servidor (aunque también puede usarse este método si se encuentra en el
propio servidor).

Usando el atributo alt se establece un texto alternativo que será mostrado en lugar de la
imagen, si ésta no es encontrada.

<html>
<head>
<title>Mi primera página WEB: Imágenes</title>
</head>
<body>
<img src="email.jpg" width="400" height="300" border="3"/>
</body>
</html>
Con los atributos width y height indicamos el tamaño en píxels de la imagen. Ten en cuenta que
si las dimensiones indicadas son mayores a las de la imagen, la imagen perderá calidad, así como
que puede quedar desproporcionada. En el atributo border se indica el ancho en píxels del borde
la imagen (según el ejemplo no tendrá borde alguno).

Listas e ítems de lista

Los tipos de listas más usadas en HTML son las listas ordenadas (usando la etiqueta <ol>) y las
listas no ordenadas (con <ul>). Independientemente del tipo de lista, usaremos la etiqueta <li>
para indicar cada elemento de la misma. Veamos los atributos de cada tag:

<ul
type: marca de los elementos de la lista (circle | disc | square). Sólo en modo transitional. >
</ul>

<ol
start: número en el que comenzará la lista. Sólo en modo transitional.
type: estilo de cada elemento de la lista (a | A | i | I | 1). Sólo en modo transitional. >
</ol>
<li
type: marca de los elementos de la lista (circle | disc | square | a | A | i | I | 1).
value: valor (numérico) que tendrá el elemento. Sólo en modo transitional. >
</li>
Ejemplo

<html>
<head>
<title>Página WEB de ejemplo: listas</title>
</head>
<body>
<ol>
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
</ol>
<ul>
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
</ul>
</body>
</html>

Con HTML es posible crear listas anidadas poniendo otra dentro de una etiqueta <li>, como
podemos ver en el siguiente ejemplo.

<html>
<head>
<title>Página WEB de ejemplo: listas</title>
</head>
<body>
<ol>
<li>Opción 1</li>
<li>Opción 2
<ul>
<li>Opción 2A</li>
<li>Opción 2B</li>
<li>Opción 2C</li>
</ul>
</li>
<li>Opción 3</li>
</ol>
</body>
</html>

En las listas ordenadas podemos usar el atributo type para configurar el estilo de cada elemento
de la lista, pudiendo tomar uno de los siguientes valores: 1, 'A', 'a', 'I', 'i'. En las listas desordenadas
dicho atributo podrá tener uno de los siguientes valores: disc, square o circle; Dicho atributo se
puede poner tanto en la etiqueta <ol> (para que se aplique a toda la lista) como en <li> (para cada
elemento de forma individual). Otro atributo que podemos usar en las listas ordenadas es start,
para indicar desde qué número debe comenzar.
Veamos un ejemplo:

<html>
<head>
<title>Página WEB de ejemplo: listas</title>
</head>
<body>
<ol type="I" start="5">
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
</ol>
<ul type="square">
<li>Opción 2A</li>
<li>Opción 2B</li>
<li>Opción 2C</li>
</ul>
<ol type="a">
<li type="i">Opción 1</li>
<li type="I">Opción 2</li>
<li type="1">Opción 3</li>
</ol>
</body>
</html>

Tablas

Las tablas se usan principalmente para mostrar datos tabulados, y aunque se suelen usar
también para maquetar la página web se recomienda usar la etiqueta <div> para ello. Para crear
una tabla se usa la etiqueta HTML <table>, con <tr> y con <td> las columnas. Veamos sus atributos
más importantes (aparte del estándar):
<table
align: alineación de la tabla (center | left | right). Sólo en modo transitional.
background: imagen de fondo de la tabla.
bgcolor: color de fondo (nombre del color | hexadecimal). Sólo en modo transitional.
border: grosor del borde (en píxels).
bordercolor: color del borde.
cellpadding: márgenes interiores entre el borde de la celda y su contenido (en píxels).
cellspacing: define el margen entre las celdas, y de éstas con respecto al borde (en píxels).
frame: borde de la tabla (above | below | border | box | hsides | lhs | rhs | void | vsides)
rules: borde de las celdas (all | cols | groups | none | rows).
height: alto de la tabla (en píxels o porcentaje).
width: ancho de la tabla (en píxels o porcentaje).>
</table>
<tr
align: alineación horizontal del contenido de las celdas en la fila (center | justify | left | right).
bgcolor: color de fondo (nombre del color | hexadecimal). Sólo en modo transitional.
bordercolor: color del borde.
valign: alineación vertical del contenido de las celdas en la fila (baseline | bottom | middle |
top).>
</tr>
<td
align: alineación horizontal del contenido de la celda (center | justify | left | right).
background: imagen de fondo de la tabla.
bordercolor: color del borde.
bgcolor: color de fondo (nombre del color | hexadecimal). Sólo en modo transitional.
colspan: número de columnas que se desean unir.
height: alto de la columna (píxels). Sólo en modo transitional.
nowrap: impide que el texto se ajuste automáticamente dividiéndose en filas, en caso de que el
ancho de
la celda no sea suficiente para mostrarlo. Sólo en modo Transitional.
rowspan: número de filas que se desean unir.
valign: alineación vertical del contenido de la celda (baseline | bottom | middle | top).
width: ancho de la tabla (en píxels o porcentaje).>
</td>

En el siguiente código HTML de ejemplo creamos una tabla de 400 píxels de ancho, con dos filas
y tres columnas en cada una de ellas, y un borde:
<html>
<html>
<head>
<title>Mi primera página WEB: tablas</title>
</head>
<body>
<table border="1" width="400">
<tr>
<td>Fila 1 Columna 1</td>
<td>Fila 1 Columna 2</td>
<td>Fila 1 Columna 3</td>
</tr>
<tr>
<td>Fila 2 Columna 1</td>
<td>Fila 2 Columna 2</td>
<td>Fila 2 Columna 3</td>
</tr>
</table>
</body>
</html>
Formularios
Los formularios se usan principalmente para obtener datos introducidos por el usuario (como
por ejemplo para registrarse en nuestra web o enviarnos un mensaje) para después enviarlos al
servidor web, en el que serán procesados por un lenguaje de servidor (como por ejemplo PHP).
Para crear un formulario se utilizan principalmente las etiquetas HTML <form>, <input>,
<textarea> y <select>. A continuación describimos las dos primeras:
<form
action: nombre del archivo que deberá ejecutarse al ser enviado el formulario cuando se pulse
un botón de tipo submit, tratándose normalmente de un archivo con código fuente de un lenguaje
del lado del servidor, como por ejemplo PHP).
enctype: indica cómo será codificado el formulario para enviarlo al servidor web, tomando como
valor por defecto si no se especifica nada application/x-www-form-urlencoded.
Otro de los posibles valores es multipart/form-data (usado cuando se utiliza el formulario para
subir archivos al servidor).
id: identificador del formulario (se utiliza sobre todo para acceder al elemento desde JavaScript o
CSS)
method: especifica de qué modo serán enviados los datos del formulario, pudiendo tomar como
valor 'get' (los datos se envían por la propia URL) o 'post' (más seguro y recomendable).
name: nombre del formulario. >
</form>

<input
accept: usado al utilizar componentes de tipo file (para subir archivos al servidor), pero algunos
navegadores web como Internet Explorer y Safari no lo tienen en cuenta, por lo que dicha
validación deberá hacerse forzosamente en el servidor (lo cual es recomendable en todo caso).
Los diferentes tipos de archivo permitidos se indican separados por coma. Ejemplos:
<input type="file" accept="audio/*,video/*,image/*,MIME_type" />
<input type="file" accept="image/gif, image/jpeg" />
accesskey: para definir una letra que al ser presionada junto con una determinada
combinación
de teclado (dependiendo del navegador web usado como explicamos un poco más adelante),
hará que el componente tome el foco.
align: en caso de componentes tipo image, indica cómo se alineará la imagen con respecto al
texto
(bottom | left | middle | right | top). Sólo en modo transitional.
alt: en caso de componentes tipo image, muestra un texto descriptivo en lugar de la imagen si
ésta no ha sido encontrada, o bien en caso de navegadores web en modo de sólo texto.
checked: usado sólo en componentes de tipo radio o checkbox para indicar que se encuentra
marcado o activo (en HTML no hay que asignarle valor alguno, pero según las especificaciones de
XHTML es necesario asignarle como valor el mismo nombre de dicho atributo).

disabled: muestra el componente como desactivado (en HTML no hay que asignarle valor
alguno, pero según las especificaciones de XHTML es necesario asignarle como valor el mismo
nombre de dicho atributo).
id: identificador del componente (se utiliza sobre todo para acceder al elemento desde JavaScript
o CSS).
maxlength: número máximo de caracteres que se pueden escribir en un componente de tipo
text.
name: nombre del componente. Es necesario indicarlo para acceder a su valor al ser procesado
por un lenguaje del lado del servidor.
readonly: impide que se pueda escribir en un componente de tipo text (en HTML no hay que
asignarle valor alguno, pero según las especificaciones de XHTML es necesario asignarle como
valor el mismo nombre de dicho atributo).
size: ancho (en número de caracteres, no en píxels) con que se visualizará el componente.
src: nombre o ruta de la imagen, en caso de tratarse de un componente tipo image.
tabindex: definiendo esta propiedad a los componentes del formulario permite indicar un orden
de tabulación para cada uno de ellos (cada vez que se pulse la tecla Tabulador, el siguiente
componente obtendrá el foco).
type: por medio de este atributo indicaremos de qué tipo es el componente (button | checkbox |
file | hidden | image | password | radio | reset | submit | text).
value: valor del elemento./>

A continuacion puedes ver un ejemplo de página web con un formulario HTML:

<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
Nombre: <input type="text" id="txtNombre" name="txtNombre" /><br/>
Apellidos: <input type="text" id="txtApellidos" name="txtApellidos" /><br/>
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>

En lugar de escribir diréctamente el texto que hace referencia a cada componente, podemos
usar la etiqueta HTML <label>:
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
<label for="txtNombre" id="lblNombre" name="lblNombre">Nombre:</label>
<input type="text" id="txtNombre" name="txtNombre" /><br/>
<label for="txtApellidos" id="lblApellidos" name="lblApellidos">Apellidos:</label>
<input type="text" id="txtApellidos" name="txtApellidos" /><br/>
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>

Divisiones (Frames/Marcos)

Los frames (también llamados marcos) son usados para dividir una página web en varias partes,
cargando otra página web en cada una de ellas. Por defecto se muestran con un borde que
permite redimensionarlos según necesitemos. Para usar los ejemplos de las siguientes secciones
debemos crear los tres archivos siguientes:

Página 1
<html>
<head>
<title>Mi primera página WEB: Frames (página 1)</title>
</head>
<body bgcolor="lightyellow">
<p>Esta es la página 1</p>
</body>
</html>

Página 2
<html>
<head>
<title>Mi primera página WEB: Frames (página 2)</title>
</head>
<body bgcolor="lightblue">
<p>Esta es la página 2</p>
</body>
</html>

Página 3
<html>
<head>
<title>Mi primera página WEB: Frames (página 3)</title>
</head>
<body text="yellow" bgcolor="navy">
<p>Esta es la página 3</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</body>
</html>
Para crear una página web dividida en frames usaremos la etiqueta HTML <frameset>, y dentro
de ella insertaremos una etiqueta <frame> por cada marco que deseemos crear, así como la
etiqueta <noframes>, cuyo contenido se mostrará en los navegadores web que no soportan
frames. Además de id, name y el resto de atributos estándar, dichas etiquetas HTML admiten los
siguientes:

<frameset
cols: separadas mediante comas se indica el número de columnas y el tamaño de las mismas (en
píxels y/o porcentajes).
rows: separadas mediante comas se indica el número de filas y el tamaño de las mismas (en
píxels y/o porcentajes).>
</frameset>

<frame
frameborder: indica si se mostrará el border del frame o marco o no (1 | 0).
marginheight: margen entre el contenido del frame y sus bordes superior e inferior (en píxels).
marginwidth: margen entre el contenido del frame y sus bordes izquierdo y derecho (en píxels).
noresize: si indicamos este atributo el frame o marco no se podrá redimensionar (en HTML no
hay que asignarle valor alguno, pero según las especificaciones de XHTML es necesario asignarle
como valor el mismo nombre de dicho atributo).
scrolling: especifica si se mostrarán barras de desplazamiento en el frame, pudiendo tomar
como valores auto (se mostrarán sólo en caso necesario para poder hacer scroll en el contenido del
marco), no (no se mostrarán nunca) o yes (estarán siempre visibles).
src: la URL que se cargará en el frame.>
</frame>

<noframes> no admite atributos que merezca la pena reseñar.


A continuación, mostramos un ejemplo de página web con frames:
<html>
<head>
<title>Mi primera página WEB: Frames</title>
</head>
<frameset cols="20%,*">
<frame id="frmIzquierdo" name="frmIzquierdo" src="pagina2.html" />
<frame id="frmDerecho" name="frmDerecho" src="pagina3.html" />
<noframes>
<body>Su navegador no soporta frames</body>
</noframes>
</frameset>
</html>
En el siguiente ejemplo creamos un <frameset> principal para las columnas, en el que
insertamos un <frame> para la de la izquierda, y un <frameset> anidado (en el que a su vez
insertamos un <frame> para la fila superior, y otro para la inferior) para la de la derecha:

<html>
<head>
<title>Mi primera página WEB: Frames</title>
</head>
<frameset cols="120,*">
<frame id="frmIzquierdo" name="frmIzquierdo" src="pagina2.html" />
<frameset rows="100,*">
<frame id="frmSuperior" name="frmSuperior" src="pagina1.html" />
<frame id="frmInferior" name="frmInferior" src="pagina3.html" />
</frameset>
<noframes>
<body>Su navegador no soporta frames</body>
</noframes>
</frameset>
</html>

Con <iframe> podemos crear un marco en el que cargar otra página web dentro de la principal:
Entre sus etiquetas de inicio y cierre podemos escribir un texto que será mostrado en caso de que
el navegador web no soporte frames. Sus principales atributos son:

<iframe
align: alineación horizontal del iframe con respecto a la página (bottom | left | middle | right |
top).
height: alto del iframe.
marginheight: margen entre el contenido del iframe y sus bordes superior e inferior (en píxels)
marginwidth: margen entre el contenido del iframe y sus bordes izquierdo y derecho (en píxels)
scrolling: especifica si se mostrarán barras de desplazamiento en el iframe, pudiendo tener valor
auto (se mostrarán sólo en caso necesario para poder hacer scroll en el contenido del marco), no
(no se mostrarán nunca) o yes (estarán siempre visibles).
src: la URL que se cargará en el frame.
width: ancho del iframe (en pixels o porcentaje).>
</iframe>
<html>
<head>
<title>Mi primera página WEB: iframe</title>
</head>
<body>
<p>Un párrafo</p>
<iframe src="pagina3.html" width="25%" height="200">
<p>Su navegador no soporta iframes.</p>
</iframe>
<p>Otro párrafo.</p>
</body>
</html>

También podría gustarte