[go: up one dir, main page]

0% encontró este documento útil (0 votos)
50 vistas16 páginas

Introducción A HTML (Parte 1)

El documento describe el lenguaje HTML. HTML se utiliza para publicar contenido en Internet y está estructurado mediante etiquetas que modifican el formato del contenido. El documento explica la estructura básica de una página web HTML y proporciona ejemplos de etiquetas comunes como encabezados, párrafos, listas y enlaces.

Cargado por

lpilo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
50 vistas16 páginas

Introducción A HTML (Parte 1)

El documento describe el lenguaje HTML. HTML se utiliza para publicar contenido en Internet y está estructurado mediante etiquetas que modifican el formato del contenido. El documento explica la estructura básica de una página web HTML y proporciona ejemplos de etiquetas comunes como encabezados, párrafos, listas y enlaces.

Cargado por

lpilo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 16

Curso de PHP 5 – Apéndice – El lenguaje HTML

Teoría: El lenguaje HTML

1 - Introducción: el lenguaje HTML


El lenguaje HTML (HyperText Markup Language) ha sido diseñado para la publicación de
contenidos en Internet. El lenguaje dispone de la sintaxis necesaria para formatear textos,
incluir imágenes y animaciones, así como para enlazar con otros contenidos del mismo o de
otro servidor.

Es un lenguaje interpretado por cada visualizador cliente (navegador), de tal forma que la
apariencia de las páginas puede variar entre diferentes navegadores, versiones y plataformas.
Por ejemplo, existen algunos que sólo muestran texto, como Lynx. Por esto, siempre debemos
tener cuidado, cuando diseñamos nuestras páginas, para que otras personas puedan verlas
correctamente.

En este apéndice se muestra la sintaxis compatible de mayor utilización referida al estándar


HTML 4.0. Si el alumno o alumna desea obtener mayores conocimiento del tema o los
necesita, les recomendamos matricularse en el curso de HTML del proyecto MENTOR.
También hemos incluido referencias interesantes a páginas web sobre HTML en el apartado
Más Información de este apéndice.

Estructura del Lenguaje HTML

El lenguaje HTML está estructurado mediante etiquetas (tags). Estas etiquetas normalmente
están emparejadas y encierran un contenido. De esta manera, modifican la cualidad o formato
del contenido mostrado en la pantalla del navegador. A continuación, se ofrece un esquema
ilustrativo de su estructura:

<XXX> Inicio de la etiqueta XXX


CONTENIDO
</XXX> Final de la etiqueta XXX

Las etiquetas pueden ser apiladas ordenadamente. En este caso el esquema quedaría así:

<XXX>
<YYY>

</YYY>
</XXX>

Nota: Algunas etiquetas sólo están integradas por la etiqueta inicial y, por lo tanto, no se
cierran. Por ejemplo, la etiqueta <HR>, que dibuja una línea horizontal completa, sólo tiene esta
etiqueta inicial.

Las letras de las etiquetas pueden ser mayúsculas o minúsculas indistintamente; para mayor
claridad, en el curso se escriben siempre en mayúsculas. Asimismo, los propios navegadores,

1 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

además de soportar las etiquetas usuales del lenguaje HTML, disponen de etiquetas extras que
añaden nuevas funcionalidades a las anteriores, si bien normalmente son incompatibles entre
los diferentes navegadores. Por esto, aquí sólo se mostrarán las etiquetas estándares básicas.

Todo fichero HTML empieza con la etiqueta <HTML> para indicar el inicio del documento y
acaba con la etiqueta </HTML> para indicar el final del mismo.

El documento en sí está dividido en 2 partes:

• El encabezado, encerrado por las etiquetas: <HEAD> </HEAD>.

• El cuerpo, encerrado por las etiquetas: <BODY> </BODY>.

En el encabezado se encuentra toda la información del documento que no se visualiza en el


área principal del navegador, como el título de la página, contenido entre las etiquetas
<TITLE> </TITLE>.

Dentro del cuerpo se halla todo el contenido que se muestra en el área principal del navegador,
como texto, imágenes, etc.

Por lo tanto, la estructura básica de una página se escribe de la siguiente manera:

<HTML>

<HEAD>
<TITLE>Título de la página</TITLE>
</HEAD>

<BODY>
Aquí aparecen todas las etiquetas y contenidos
que se visualizan en el navegador.
</BODY>

</HTML>

2 - Instrucciones básicas
A continuación mostramos una serie de instrucciones básicas y las más comunes. Informamos
al lector de que el lenguaje HTML no interpreta los espacios en blanco o los saltos de línea del
documento fuente, por lo cual existen caracteres especiales al efecto.

2.1. Formateo de caracteres y bloques

<B>Texto</B> BOLD: muestra el contenido “Texto” en negrita.

<I>Texto</I> ITALIC: muestra el contenido “Texto” en cursiva.

2 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

Preformateado: “Texto” aparecerá como si hubiese sido escrito por


<PRE>Texto</PRE> una máquina de escribir con una fuente de espacio fijo (tipo
Courier) respetando espacios y saltos de línea.

<BLOCKQUOTE>
Cita Textual: destaca una cita dentro del texto general añadiendo
Texto
</BLOCKQUOTE> márgenes izquierdo y derecho.

<P> Separación entre párrafos: efectúa un salto de línea y deja una


línea en blanco.

<BR> Salto de línea: efectúa un salto de línea únicamente. Este


elemento no se cierra (no existe </BR>).

<HR> Dibuja una línea horizontal. Este elemento no se cierra (no existe
</HR>).

<ADDRESS>
Autor: indica el nombre del autor del documento formateando el
Nombre autor
</ADDRESS> texto en cursiva y alineado a la izquierda.

<H4> Formateo de texto mediante cabeceras: las etiquetas <Hx>, con x


desde 1 hasta 6, muestran diferentes tamaños de letras y un salto
Texto Cabecera
</H4> de línea variable. La cabecera tipo 1 es la más grande,
decreciendo el tamaño de la fuente al aumentar el número x.

2.1. Listas:

Es interesante mostrar contenidos en forma de lista. Existen 3 tipos de lista, a saber

<UL> Lista no numerada (unordered list):


<LI> Palabra 1 presenta una lista sin que sus elementos
<LI> Palabra 2 estén precedidos de un número secuencial.
<LI> Palabra 3
<LI> Etcétera.
</UL>

<OL> Lista ordenada (ordered list): presenta una


<LI> Palabra 1 lista cuyos elementos están precedidos de un
<LI> Palabra 2 número secuencial.
<LI> Palabra 3
<LI> Etcétera.
</OL>

<DL> Lista de definición (definition list): se utiliza


<DT> Término 1 para glosarios o definiciones de términos. A
<DD> Def. término 1 diferencia de las 2 anteriores, aquí cada

3 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

bloque de texto está formado por 2 etiquetas.


<DT> Término 2 <DT> (Definition Term), que indica la palabra
<DD> Def. término 2 que deseamos definir, y <DD> (Definition
</DL> Definition), que es la definición propiamente
dicha.

Se pueden anidar unas listas dentro de otras.

Nota: Si deseamos incluir un comentario dentro de la página HTML, utilizaremos los dos
símbolos: <!— (para abrir el comentario) y --> (para cerrarlo).

3 - Enlaces y anclas
El uso de enlaces es una de las características principales del lenguaje HTML. Éstos han
provocado la rápida difusión del lenguaje, ya que permiten conectar contenidos del mismo o de
diferentes servidores de manera muy sencilla e intuitiva. Usualmente, los enlaces tienen la
siguiente estructura:

<A HREF="xxx"> yyy </A>

donde ‘xxx’ es el destino del enlace e ‘yyy’ representa el indicador de enlace (un texto y/o una
imagen).

Distinguimos 3 usos de los enlaces:

Enlaces dentro de una misma página (también llamados


"anclas") utilizados para poder saltar dentro de una misma
<A NAME="marca"> </A>
página. La primera línea es la marca en la página (también
<A HREF="#marca"> </A> llamada ancla) e indica el sitio exacto adonde se desea
saltar; la segunda línea es el enlace, que nos llevará al
ancla.

<A HREF="pagina.htm"> YYY Enlaces a otras páginas utilizados para poder “enlazar”
</A>
páginas del mismo o de diferentes servidores. El primer
ejemplo es un enlace a otra página del mismo servidor. En
<A HREF="pagina.htm#marca">
YYY el segundo, enlazamos una página del mismo servidor
</A> mostrando una determinada posición de la página (ancla).
En el último ejemplo enlazamos a una página de otro
<A servidor.
HREF="http://dominio/pag.htm"
>
YYY
</A>

4 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

<A Enlaces a una dirección e-mail usados para facilitar el


HREF="mailto:email@dominio">
envío de correo electrónico.
YYY
</A>

4 - Incluir imágenes
La forma de incluir imágenes en nuestros documentos HTML es muy parecida a la utilizada
para incluir enlaces. En lugar de indicar la página a la que queremos saltar, establecemos el
nombre del fichero que contiene la imagen que deseamos mostrar. La estructura de la etiqueta
es la siguiente:

<IMG SRC="imagen.gif" ALT="descripción"


ALIGN=alineamiento WIDTH=ancho HEIGHT=alto>

A continuación, explicamos la función de los atributos de la etiqueta IMG:

Indica el camino y el nombre de fichero donde se encuentra la imagen que se


SRC quiere incluir. Ésta puede residir en el mismo o en otro servidor. Además,
este atributo es el único que siempre debe aparecer en la etiqueta.

Se utiliza para mostrar un texto emergente cada vez que se coloca sobre la
ALT imagen el puntero del ratón.

Se emplea para alinear la imagen en la página HTML. Los valores posibles


ALIGN son: TOP, MIDDLE, BOTTOM, RIGHT y LEFT.

Se usan para modificar el tamaño de la imagen en la página HTML. El


tamaño se expresa en pixels (por ejemplo, WIDTH = 200) o con un
WIDTH porcentaje del tamaño de la imagen (por ejemplo, WIDTH = 60%). Si no se
HEIGHT incluyen estos atributos, la imagen aparece con las mismas dimensiones con
las que ha sido creada.

Nota: Esta etiqueta no se cierra. Es decir, no existe </IMG>.

5 - Otras etiquetas de aspecto


En este apartado incluimos una serie de etiquetas que cambian la presentación de la página
HTML.

5.1 Fondos

Podemos cambiar el fondo de nuestra página de dos maneras diferentes: con un color uniforme
o mediante una imagen tápiz. Esto se consigue introduciendo un nuevo atributo en la etiqueta
BODY, que ya hemos visto anteriormente, de esta manera:

5 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

Mediante el modificador BGCOLOR de la etiqueta BODY


elegimos el color de fondo de la página. #XXYYZZ se refiere
<BODY
al color en formato hexadecimal. Es posible que, al cambiar
el color por defecto del fondo de la página, sea necesario
BGCOLOR="#XXYYZZ"
modificar los colores de texto y de los enlaces para una
correcta visualización de los contenidos. Los modificadores
son los siguientes:
TEXT="#XXYYZZ"

TEXT - color del texto.


LINK="#XXYYZZ"

LINK - color de los enlaces.


VLINK="#XXYYZZ"

ALINK="#XXYYZZ">
VLINK - color de los enlaces visitados.

ALINK - color de los enlaces activos (el que adquieren en el


momento de ser pulsados).

El modificador BACKGROUND de la etiqueta BODY se usa


<BODY para incluir una imagen de fondo en la página. "Archivo"
hace referencia a una imagen en formato gif o jpg que haya
BACKGROUND="Archivo"> en el propio o en otro servidor. Además, se pueden añadir
todos los modificadores vistos en el modo anterior para
establecer los colores del texto y de los enlaces.

5.2 Características de la fuente de un texto

Para establecer las características de la fuente de un texto, usamos la siguiente etiqueta:

<FONT FACE="fuente" SIZE="tamaño" COLOR="#XXYYZZ">Texto</FONT>

donde los atributos son:

Mediante el modificador FACE de la etiqueta FONT elegimos el


FACE tipo o tipos de fuente para el "Texto" contenido entre la etiqueta
de inicio y de cierre.

SIZE Usando este modificador cambiamos el tamaño de la fuente.


Se puede asignar un tamaño de fuente absoluto de 1 a 7 (1 es
la más pequeña)

El tamaño normal o base de la página es el 3. Además, se


puede cambiar relativamente respecto a este tamaño normal
escribiendo, por ejemplo, <FONT SIZE=+1> para aumentar un
punto el tamaño respecto al tamaño base de la página.

Incluso se puede cambiar el tipo de fuente normal de todo el

6 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

documento incluyendo al principio de la página HTML (justo a


continuación de la etiqueta BODY) la etiqueta: <BASEFONT
SIZE=5>. Así cambiaríamos la fuente por defecto de toda la
página a tamaño 5.

Mediante el modificador COLOR seleccionamos el color de la


COLOR
fuente. #XXYYZZ se refiere al color en formato hexadecimal.

5.3 Alineación de texto e imágenes

Resulta muy sencillo alinear cualquier texto o imagen incluidos en la página HTML utilizando
las etiquetas CENTER, LEFT, RIGHT. El siguiente ejemplo alinea el contenido en el centro de la
página:

<CENTER>Texto o Imagen</CENTER>

Además, para alinear imágenes puede usarse el modificador ALIGN de la etiqueta IMG, como
hemos indicado en el apartado anterior.

6 - Creación de tablas
Es muy útil usar tablas para la distribución y presentación de contenidos dentro de una página
HTML. El esquema básico de una tabla es el siguiente:

<TABLE> Inicio de la tabla


<TR> Primera fila
<TD> Contenido </TD> Primera columna de la primera fila
<TD> Contenido </TD> Segunda columna de la primera fila
</TR> Final de la primera fila

<TR> Segunda fila


<TD> Contenido </TD> Primera columna de la segunda fila
<TD> Contenido </TD> Segunda columna de la segunda fila
</TR> Final de la segunda fila
</TABLE> Final de la tabla

Las etiquetas necesarias para definir una tabla son las siguientes:

<TABLE BORDER=borde Indican el comienzo y final de una tabla.


WIDTH=largo
HEIGHT=ancho Los atributos que se utilizan para modificar la
BGCOLOR=#XXYYZZ apariencia de la tabla son:
CELLSPACING=sep_celdas
CELLPADDING=sep_cont> • BORDER establece la anchura del borde de la tabla
(BORDER=0 indica que la tabla no tiene bordes)

7 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

• WIDTH, HEIGHT fijan el largo y ancho de la tabla


respectivamente. Se expresan en pixels o mediante
un porcentaje de la dimensión de la pantalla.

• BGCOLOR establece el color de fondo de la tabla.


Se expresa en formato hexadecimal.
Filas
• CELLSPACING fija la separación entre las celdas
</TABLE> de la tabla. Se expresa en pixels. Por defecto, dicha
separación es de 2 pixels.

• CELLPADDING determina la separación entre el


borde y el contenido dentro de cada celda. Se
expresa en pixels. Por defecto, dicha separación es
de 1 pixel.

Señalan el inicio y el final de una fila (table row). Hay


<TR>Celdas</TR> que repetirlas tantas veces como filas deseemos
obtener.

Establecen el inicio y el final de una celda que


contiene texto, imágenes, enlaces, otra tabla, etc...
Hay que repetirlas tantas veces como columnas
deseemos obtener.

Los atributos que se usan son:

• ALIGN establece el alineamiento horizontal del


contenido en la celda. Los valores posibles son:
<TD ALIGN="alineam_horiz" CENTER, RIGHT y LEFT.
VALIGN="alineam_vert"
COLSPAN=extender_horiz • VALIGN establece el alineamiento vertical del
ROWSPAN=extender_vert
contenido en la celda. Los valores posibles son: TOP,
BGCOLOR=#XXYYZZ>
BOTTOM y MIDDLE.
Contenido
• COLSPAN indica la extensión de la celda en nº de
</TD> columnas. Así, una celda puede ocupar varias
columnas.

• ROWSPAN indica la extensión de la celda en nº de


filas. Así, una celda puede ocupar varias filas.

• BGCOLOR establece el color de fondo de la celda.


Se expresa en formato hexadecimal. Si hemos
incluido este atributo en <TABLE>, cambiará el color
por defecto de la celda.

<TH> Contenido </TH> Establece el inicio y el final de una celda de tipo


cabecera (header). Se distingue de <TD> en que

8 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

muestra el texto en negrita y centrado. Se pueden


aplicar los mismos atributos que en la etiqueta <TD>.

Se pueden anidar unas tablas dentro de otras.

7 - Formularios
Los formularios permiten al usuario introducir información y enviarla al servidor. Existen
diferentes tecnologías para implementar esta funcionalidad: CGI, Servlets, Páginas dinámicas
(en PHP y ASP), PERL, etcétera.

La estructura típica de un formulario es la siguiente:

<FORM ACTION="acción_URL" METHOD="método" ENCTYPE="tipo_codificado">

Cuerpo del formulario con los diferentes


elementos para la introducción de datos
y los botones de envío o de borrado.

</FORM>

Los atributos de la etiqueta FORM tienen las funciones siguientes:

Indica la acción que se debe realizar. Normalmente suele ser una URL que
ACTION apunta a un CGI, Servlet o página dinámica.

Establece el método utilizado para el envío de la información. Los valores


posibles son “GET” (por defecto) o “POST”. Con el método es “GET” el
METHOD contenido introducido por el usuario se añade a la URL como si fuera parte
de ésta; en cambio, con “POST” la información va en el cuerpo de datos
separadamente.

Denota el tipo de codificación utilizada para enviar los datos. Por ejemplo,
“TEXT/PLAIN” consigue que las respuestas sean recibidas como un fichero
ENCTYPE
de texto, perfectamente legible y sin codificar.

Elementos del cuerpo de un formulario.

Podemos dividirlos en cinco tipos:

1. Introducción por medio de texto (cajas de texto)

2. Introducción por medio de menús

3. Introducción por medio de botones

9 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

4. Botones de envío y de borrado.

5. Elemento invisible.

1. Introducción por medio de texto

En este procedimiento el usuario debe completar la información que desea enviar al servidor.
Tiene la estructura siguiente:

<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz" SIZE="aaa" MAXLENGTH="bbb">

donde los atributos de la etiqueta INPUT se usan para establecer lo siguiente:

Indica el tipo de elemento que utilizamos para la introducción


de información. Los valores posibles son:

 text para establecer el elemento como un ‘edit’ de


TYPE texto.
 password es igual que el anterior, pero al escribir sólo
se muestran asteriscos. Por esto se usa mucho para
introducir claves.

Establece el nombre del elemento para poder relacionarlo con


NAME su contenido.

VALUE Fija el contenido inicial del elemento.

SIZE Establece la longitud del elemento en la pantalla.

Establece el número máximo de caracteres que se pueden


MAXLENGTH introducir.

Nota: INPUT no tiene etiqueta de cierre.

Cuando es necesario introducir un texto que pueda alcanzar una gran longitud u ocupar varias
líneas, como un comentario, es conveniente utilizar un elemento de texto de múltiples líneas.

Esto se consigue con la etiqueta:

<TEXTAREA NAME="yyy" ROWS="número" COLS="número">

contenido inicial

</TEXTAREA>

donde los atributos de la etiqueta se usan para lo siguiente:

NAME Establece el nombre del elemento para poder relacionarlo con

10 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

su contenido.

ROWS Representa el número de filas.

COLS Representa el número de columnas.

2. Introducción por medio de menús

Si deseamos que el usuario escoja entre varias opciones en lugar de escribir el texto, haremos
uso de los elementos de tipo menú. La estructura más usual es la siguiente:

<SELECT NAME="yyy" MULTIPLE SIZE="aaa">

<OPTION VALUE="bbb" selected>


literal_opción 1
</OPTION>

<OPTION VALUE="ccc">
literal_opción 2
</OPTION>

<OPTION VALUE="ddd" selected>


literal_opción 3
</OPTION>

</SELECT>

La etiqueta SELECT se usa para señalar el inicio y el final del elemento menú. Entre la etiqueta
de inicio y de final se encuentran las diferentes opciones que seleccionará el usuario. Sus
atributos son éstos:

Establece el nombre del elemento para poder relacionarlo con su


NAME contenido.

MULTIPLE Permite que se puedan seleccionar múltiples opciones.

Fija el número de opciones visibles en la pantalla sin necesidad de


desplazarse. Sólo funciona conjuntamente con MULTIPLE. Si es mayor
SIZE que 1, aparecerá una lista; en caso contrario, se verá una lista
desplegable.

La etiqueta OPTION se usa para establecer una opción del elemento menú. El literal que
visualizará el usuario se encierra entre la etiqueta de inicio y de final. Sus atributos son éstos:

11 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

VALUE Establece el valor que se asigna a la variable.

Si se incluye en alguna de la opciones, esta opción será seleccionada por


SELECTED defecto.

3. Introducción por medio de botones

Si deseamos que el usuario confirme una opción determinada con Sí o No, utilizamos el
elemento checkbox. Tiene el esquema siguiente:

<INPUT TYPE="checkbox" NAME="yyy" CHECKED>

Sus atributos son éstos:

Establece el nombre del elemento para poder relacionarlo con el


NAME contenido.

CHECKED Especifica el elemento que aparece seleccionado por defecto.

Además, si queremos que el usuario pueda decidir entre varias posibilidades, utilizaremos el
elemento radiobutton:

<INPUT TYPE="radio" NAME="yyy" VALUE="zzz" CHECKED>

Sus atributos son éstos:

Establece el nombre del elemento para poder relacionarlo con el


contenido. Para asociar varios botones de radio a una única variable les
NAME
pondremos a todos el mismo NAME.

VALUE Especifica el valor que se asignará a la variable.

CHECKED Fija la única opción seleccionada por defecto.

4. Botones de envío y de borrado

Son elementos esenciales que sirven para que el usuario pulse en ellos y envíe la información
al servidor o borre los datos introducidos en la página.

<INPUT TYPE="tipo" VALUE="zzz">

Sus atributos son éstos:

TYPE Establece el tipo de botón. Para el envío de datos escribiremos "SUBMIT"

12 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

y para borrar los datos de la página "RESET".

VALUE Especifica el texto que queremos que aparezca en el botón.

5. Elemento invisible

A veces, es necesario guardar alguna variable oculta en el formulario para almacenarla en la


página activa. Para esto, se utiliza el siguiente elemento invisible:

<INPUT TYPE=HIDDEN NAME="yyy" VALUE="zzz">

Sus atributos son éstos:

Establece el nombre del elemento para poder relacionarlo con su


NAME contenido.

VALUE Especifica el valor que se asignará a la variable.

8 - Marcos
Un marco (frame, en inglés) es una ventana independiente dentro de la ventana general del
navegador. Cada marco tiene sus propiedades diferenciadas: bordes y barras de
desplazamiento propias. Usando marcos cada página se dividirá, en la práctica, en varias
páginas independientes.

Para crear marcos necesitamos un documento HTML específico, que llamamos documento de
definición de marcos. En él especificamos el tamaño y la posición de cada marco y el
documento HTML que contendrá. La estructura básica de la página principal es la siguiente:

<HTML>

<HEAD>
<TITLE>Mi primera página con marcos</TITLE>
</HEAD>

<FRAMESET COLS="20%,80%">

<FRAME NAME="indice" SRC="indice.html">


<FRAME NAME="principal" SRC="inicio.html">
<NOFRAMES>
<P>¡Tu navegador no permite marcos!</P>
</NOFRAMES>

</FRAMESET>

</HTML>

13 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

Como se puede observar, en este caso no existe la etiqueta BODY.

A continuación, explicamos las etiquetas anteriores con detalle:

<FRAMESET ROWS="xxx, yyy" COLS="vvv, zzz"> Marcos </FRAMESET>

Se usa para definir la distribución de los marcos en la página principal mediante columnas
(COLS) y filas (ROWS). Estas etiquetas son anidables, por lo que podemos incluir unos marcos
dentro de otros. Los formatos admitidos para estos atributos son los siguientes:

 Porcentual: como en las tablas, podemos fijar el tamaño de un marco indicando el


porcentaje que ocupará del espacio total disponible.

 Absoluto: el marco correspondiente tendrá el tamaño especificado en pixels.

 Sobre el espacio sobrante: escribiendo un asterisco (*) indicamos que el marco debe
ocupar todo el espacio sobrante. Podemos poner este símbolo en varios marcos, que se
repartirán el espacio equitativamente. Pero si queremos que uno tenga más espacio,
debemos ponerle un número delante del asterisco. Así, un marco con un espacio de 3*
será tres veces más grande que su compañero con sólo 1*.

En el ejemplo de arriba se crean dos marcos en la ventana principal: una columna, que ocupa
el 20% de la página, y otra, que ocupa el 80%.

<FRAME>

Esta etiqueta define las características de un marco. Los atributos admitidos son los siguientes:

NAME Asigna el nombre al marco para que podamos referirnos a él.

SRC Indica la URL del documento HTML que ocupará el marco.

Establece la aparición de barras de desplazamiento en el marco. Su


valor por defecto es AUTO (el navegador decide si se ven o no) Las
SCROLLING
otras opciones son YES y NO.

NORESIZE Si lo escribimos, el usuario no podrá cambiar el tamaño del marco.

Establece el borde del marco. Para eliminar el borde su valor debe ser
FRAMEBORDER 0.

Fija los márgenes horizontales dentro de un marco. Su formato se


MARGINWIDTH expresa en pixels.

Fija los márgenes verticales dentro de un marco. Su formato se


MARGINHEIGHT expresa en pixels.

14 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML

<NOFRAMES> Mensaje </NOFRAMES>

Estas etiquetas se utilizan para mostrar un mensaje o una página alternativa cuando el
navegador del usuario no soporta marcos.

9 - Caracteres especiales
Debido a que el lenguaje HTML no admite directamente determinados caracteres por
compatibilidad internacional, hay que sustituirlos utilizando la siguiente tabla:

Código Resultado

á, Á, é, É, etcétera... á, Á, é, É, í, Í, ó, Ó, ú y Ú

&ñtilde ñ
¿ ¿
¡ ¡
º º
ª ª

™ ™
© ©
® ®

(espacio en blanco, que no puede


ser usado para saltar de línea)

10 - Más información
A continuación, indicamos algunas direcciones de Internet donde se puede encontrar más
información sobre el lenguaje HTML.

http://www.w3.org/

Página oficial del World Wide Web Consortium (W3C) donde pueden encontrarse
especificaciones, guías, software y aplicaciones relacionadas con las tecnologías de Internet.
Incluye los manuales de referencia de HTML. La página está en inglés.

http://html.programacion.net/

Página en castellano con cursos y tutoriales sobre HTML que pueden ayudar mucho a los
alumnos y alumnas a aprender este lenguaje.

http://www.webestilo.com/html

En este sitio se puede aprender el lenguaje HTML de una manera amena y eficiente. Está en
castellano.

15 de 16
Curso de PHP 5 – Apéndice – El lenguaje HTML
MENTOR – CNICE MEC 2006

16 de 16

También podría gustarte