Está en la página 1de 8

01) Cabezas Granado, L. M. (2004). Repaso de HTML en Manual Imprescindible de PHP5.

Espaa: Anaya
Multimedia, pp. 47-54.

Introduccin a PHP 5 47

Nota:
Durante el proceso de aprendizaje del libro, conocer muchas funciones y sus aplicaciones inmediatas. En el captulo 5 del libro
aprender a crear sus propias funciones.

El resultado de la ejecucin del programa lo muestra la figura 1.5.

Figura 1.5. Resultado de nuestro primer script.

Repaso de HTML
El lenguaje de marcas de hipertexto se ha convertido en el principal referente de la Web. Para seguir adecuadamente los contenidos del libro, necesitar conocer el funcionamiento de HTML para insertar sus programas
escritos en PHP 5.

Cabecera y cuerpo de una pgina Web


Todo documento escrito en HTML est contenido entre las etiquetas
<HTML> y </HTML>. Se pueden estructurar en:
Cabecera: Entre las etiquetas <HEAD> y </HEAD>: Contiene informacin relativa al documento.

48

Captulo 1

Cuerpo: Entre las etiquetas <BODY> y </BODY>: Debe contener la informacin que el usuario ver en el navegador.

Cabecera
El ttulo del documento debe ir entre las etiquetas <TITLE> y < / T I T L E > .
Este ttulo se mostrar en la parte superior del navegador. Adems, se
utiliza como descripcin si guarda la pgina en el apartado de Favoritos.
Para aadir informacin sobre el autor, fecha de expiracin o el programa
con el que hemos diseado la Web, puede utilizar la etiqueta <META>.
<HTML>
<HEAD>
<TITLE>Pgina en HTML</TITLE>
<META NAME="Author" CONTENT="Luis Miguel Cabezas Granado">
</HEAD>
<BODY>
</BODY>
</HTML>

Algunas etiquetas permiten la inclusin de atributos. La etiqueta <META>


contiene el atributo AME y CONTENT para sealar en el documento el autor
de la pgina. Los buscadores harn buen uso del contenido de estas etiquetas para enlazarlas en sus motores de bsqueda.

Cuerpo del documento


La etiqueta <BODY> tambin puede contener atributos que modifiquen el
aspecto exterior de la pgina.
Los principales atributos son:

BGCOLOR: Indica el color de fondo de la Web.

TEXT: Color general del texto.

LINK: Color del texto de los enlaces.

VLINK: Color de los enlaces que ya han sido utilizados.

ALINK: Color de activacin del texto.

BACKGROUND: Imagen de fondo de un documento.

En el siguiente ejemplo puede ver la utilizacin de los atributos de la etiqueta del cuerpo:
<HTML>
<HEAD>

introduccin a PHP 5
<TITLE>Pgina en HTML</TITLE>
<META NAME="Author" CONTENT="Luis Miguel Cabezas Granado">
</HEAD>
<BODY BGCOLOR="#FF0 0 00" LINK="#000000" VLINK="#FF00FF">
</BODY>
</HTML>

Nota:
El color se escribe en formato RGB. Esto quiere decir que un color
puede dividirse en tres componentes (rojo, verde y azul) y, eligiendo la intensidad de cada componente, se forma el color deseado. Cada componente tiene 2 cifras en hexadecimal. As, el color
#FF0000 tiene al nmero FF hexadecimal (255 en decimal) en
su componente rojo y los dems a 0; por lo tanto, el color resultante ser Rojo intenso.

Prrafos y saltos de lneas


Los textos pueden escribirse dentro de la etiqueta <BODY> en el orden que
quiera; los navegadores no interpretan los saltos de lneas o lneas en blanco, eliminando todos los espacios vacos.
Para crear un salto de lnea tiene que utilizar <BR> escrito despus del
texto. Para crear prrafos tendr que escribir el texto entre las etiquetas
<P>

</p>.

<HTML>
<HEAD>
<TITLE>Pgina en HTML</TITLE>
</HEAD>
<B0DY>
<P>
Esto es prrafo
y tambin un salto de lneasbr>
</P>
</BODY>
</HTML>

Estilo de texto
Podemos resaltar partes del texto con algunas etiquetas:
<B>: Bloque de texto en negrita.
<I>: Texto en cursiva.

49

50

Captulo 1

<U>: Bloque de texto subrayado.


<BIG>: Texto con su mayor tamao.
<SMALL>". Texto con \m tamao pequeo.
<CENTER>: Texto centrado.
<SUP>:.Superndice.
<SUB>: Subndice.

El ejemplo siguiente, que tambin se muestra en la figura 1.6, muestra la


utilizacin de alguna de las etiquetas anteriores:
<HTML>
<HEAD>
<TITLE>Pgina en HTML</TITLE>
<META NAME="Author" CONTENT="Luis Miguel Cabezas Granado">
</HEAD>
<BODY>
<CENTER>Texto centrado-:/CENTERxBR>
<UxIxBIG>Texto subrayado y cursiva</BIGx/I></UxBR>
<B>Texto en negrita</BxBR>
<SUP>Texto superndice</SUPxBR>
Este cont iene un <SUB>subndice</SUB> <BR>
</BODY>
</HTML>

Figura 1.6. Diferentes estilos de textos.


Adems, puede elegir el formato de las fuentes de cada bloque de texto.

Introduccin a PHP 5
La etiqueta <FONT> permite seleccionar entre varios atributos para utilizar distintas fuentes, colores o tamaos. Entre los atributos que podemos
utilizar:
COLOR: Color de la fuente.
SIZE: Tamao de la fuente.
FACE: Tipo de fuente.
<FONT SIZE=1 FACE="Comic">Texto con tamao y fuente
determinados</FONT>

Enlaces de texto
Un enlace es un mecanismo que permite dirigirse a una pgina determinada despus de hacer clic en el texto. Si entre las etiquetas <A> y </A>
aparece algn contenido (texto o imagen), al hacer clic en la situacin dentro de navegador, la pgina ser dirigida a la nueva direccin.
El atributo HREF contiene la direccin del enlace.
<A HREF="pagina2.htm">enlace</A>

Listas
Las listas son capaces de presentar ordenadamente una serie de conceptos. Los tipos de lista son:
<UL>: Lista desordenada.
<OL>: Lista ordenada.
<DL>: Lista de definicin.
La diferencia entre los tipos de lista radica en el carcter que aparece en la
zona izquierda de cada lnea de la lista. Las listas desordenadas tendrn
un grfico formal (una forma geomtrica), las ordenadas tendrn un nmero de orden y las listas de definicin una letra.
<HTML>
<HEAD>
<TITLE>Pgina en HTML</TITLE>
</HEAD>
<BODY>
<B>Lsta desordenada-:/BxBR>
<UL>
<LI>Lnea 1.
Lis-Lnea 2 .
<LI>Lnea 3.

51

52

Captulo 1
<UI-i>

<LI>Lnea 3.1.
<LI>Lnea 3.2.
</UL>
<L>Lnea 4.
</UL>
<B>Lsta ordenada</B><BR>
<OL>
<L>Lnea 1.
<LJ>Lnea 2.
<Ll>Lnea 3.

<ot>
<LI>Lnea 3.1.
<LI>Lnea 3.2.
</OL>
<L>Lnea 4 .
</OL>
</BODY>
</HTML>

Cada litea de una lista debe estar precedida de la etiqueta <LI>. El cdigo anterior genera la Web de la figura 1.7.

Figura 1.7. Listas ordenadas y desordenadas.

Imgenes
La etiqueta < IMG> utiliza el atributo SRC para insertar la imagen seleccionada en el documento. .

Introduccin a PHP 5 53
Adems, puede utilizar ALT para aadir una descripcin a la imagen.
Entre las imgenes que se pueden incluir en la Web estn los tipos de archivos GIF, PNG y JPG.
<IMG S R C = " f o t o l . j p g " ALIGN="center">

La alineacin de la imagen con respecto a la pantalla se puede controlar


con el atributo ALIGN.

Tablas
El elemento estrella en una pgina Web es la tabla. Actualmente, las tablas se utilizan para colocar en lugares determinados de la pantalla textos, imgenes o el men de seleccin. Para definir u n a tabla, tiene que
insertar todos los datos entre las etiquetas <TABLEi, y </TABLE>.
A continuacin, aada las filas y las columnas de nuestras tablas. Para
aadir una fila, tendr que utilizar la etiqueta <T^> y para incluir una
nueva columna la etiqueta <TD>.
Para disear una tabla de 3 filas y 4 columnas siga los pasos que muestra
el ejemplo:
<HTML>
<HEAD>
<TITLE>Pgina en HTML</TITLE>
<META NAME="Author" COMTENT="Luis Miguel Cab<bzas Granado">
</HEAD>
<BODY>
<TABLE B0RDER=1>
<TR>
<TD>Columna 1.1</TD>
<TD>Col"umna 1.2</TD>
<TD>Columna 1.3</TD>
<TD>Columna 1.4</TD>
</TR>
<TR>
<TD>Columna 2 . 1</TD>
<TD>Columna 2 . 2</TD>
<TD>Columna 2 . 3</TD>
<TD>Columna 2.4</TD>
</TR>
<TR>
<TD>Columna 3.1</TD>
<TD>Columna 3 . 2</TD>
<TD>Columna 3.3</TD>
<TD>Columna 3.4</TD>
</TR>

54

Captulo 1
</TABLE>
</BODY>
</HTML>

Como muestra el cdigo, la etiqueta <TABLE> puede contener atributos


como BORDER, que aade un borde a todas las celdas de la tabla. Esta forma de actuar la vemos en la figura 1.8.

Figura 1.8. Tabla de 3 filas y 4 columnas.

Resumen
Es muy importante para la lectura de los captulos del libro que conozca
el lenguaje HTML en profundidad. PHP 5 se encarga de generar datos
dinmicamente desde una base de datos, archivos o haciendo clculos
complejos, pero al final ser una etiqueta HTML la que muestre esos datos en pantalla. Puesto que el objetivo de este libro no es conocer los aspectos de HTML, invito al lector a indagar en otras publicaciones, o en
Internet, para suplir las posibles carencias que pueda tener.
Los ejemplos del libro se han escrito directamente en un editor de textos,
pero esta no es la nica posibilidad. Tambin puede utilizar para realizarlos algn programa de diseo Web, con la ventaja de que las etiquetas
HTML sern aadidas a golpe de clic.

También podría gustarte