Desarrollo web 1 by EDDYE SANCHEZ

• ClO

We H

Juan J. Castañedo león José S. Castillo Zurnarán

Desarrollo de Aplicaciones HTML, PHP Y MYSQL

Web con

Autor: Juan J. Castañeda León José S. Castillo Zumarán Ninguna parte de éste libro puede ser reproducida o transmitida, mediante ningún sistema o método electrónico o mecánico (incluyendo el fotocopiado, la grabación o cualquier sistema de recuperación), ni su tratamiento informático sin consentimiento previa de la Editorial. Ley Nº26905. 1 ra, Edición : Setiembre,

2008

Edición: RITISA GRAFF S.R.L. Jr. Camaná Nº 872, Oficina 339, Lima RUC: 20333986974 Lima - Perú Hecho el Déposito Legal en la emucteca ISBN Nº 978-9972-218-59-0 1m ...u oe!·n por RITISA GRAFF S.R.L.

Nac11on

del

1•....

PERU - RITISA GRAFF Jr. Carnaná 872 Of. 441 ,. Lima Telefax: 423-8083 Cel: 9941-5840 www.editorialritisa.com e-mail: ritisagraff@hotm;;¡il.com ventas@editorialritisa.com BOLIVIA - DISTRIBUIDORA EDISON Calle lsac Tamayo Nº 81 6 .. LA PAZ - Telefax: 2450-336 e-mail: risco6S@hotmaitcom IBARRA - ECUADOR DISTRIBUIDORA - IMBAUBROS Bolivar 082 y Perez Guerrero C.C. Telf.: 062-601845 / 062-950416 Cel: 097-749850

.Nº 2008-12332

lntrodu ció Este libro explicar paso a el n° ~~r·rn11n utilizando HTML, PHP y el administradorde bases 1

En este libro encontrará información para empezar a desarrollar aplicaciones básicas en HTML hasta aplicaciones administren bases de datos MYSQL utilizando en se divido en 04 una exoucacion oroacsca de tal manera que su aprendizaje sea fácil y rápido. 'IJ01Jll•i.11v

u""'""'rv'.~e-

En este capítulo usted encontrará la ínformacíón necesaria todas herramientas para iniciar la creación de páginas como ejemplo listas, tablas, formularios y

Al este en ,,..,...,,n"""',."'"'.cu:~ nas Web utilizando código PHP dentro del código HTML. Para lograr

Capitulo 3: Bases

de Datos MY,SQL

En este capítulo usted aprenderá a iniciar y conectarse al servidor MYSQL así como a crear y administrar bases de datos a través de las instrucciones SQL. Capitulo 4: Desarrollo de Aplicaciones Durante este capítulo se pone en práctica los conocimientos adquiridos en los capítulos anterior creando aplicaciones que administrar bases de datos MYSQL en páginas Web dinámicas utilizando código HTML y PHP.

HTML

................................................

.............................................................. 34

.INSERTAR IMÁGENES

HIPERVÍNCULOS

··FRAMES

113

FORMULARIOS

129

CREAR UN FORMULARIO

130

CREACIÓN DE CONTROLES

131

CREAR CAJAS DE TEXTO CON MÚLTIPLES LÍNEAS

140

CREAR RADIO BUTTONS

143

CREAR CHECK BOXS

147

CREAR LISTAS DESPLEGABLES CREAR LISTAS DESPLEGADAS

150 152

CREAR EL BOTÓN RE SET

156

FORMULARIOS

Y TABLAS

UN SERVIDOR PARA PHP EJECUTAR PROGRAMAS EN PHP

CONS.TANTES . . . . . .

...................................... . .......... CON HTML

170 180

. ...... ...............................................

1 187 . 1

"'Qlt~ ~-

C41lf"¡Ca~

Uta

Co~:;'l'A,~~

~Nv, rt\~

r-at--'.

DESARROLLO

12 AL SERVIDOR MYSQL fvlAI\¡~~ CC) ~i2A BASES DE DATOS 1\.141\JtJ¿i lltt-.J;lJ LTAS AL SERVIDOR D~ ABLAS f::(i2GISTROS

E)r¡E)-.

APLICACIONES 506

515

521 s22 541

con generar son:

Estructura de una pรกgina HTML s- ,.,.,...,,,...,,..,,,..,

Formularios de Controles rO".lil"'lrin

HT l HTML significa Hyper Text Markup Language (Lenguaje de Marcación de Hiper Texto) y permite la creación de páginas Web. Las páginas Web se crean mediante documentos estructurados a partir de texto, que se enviarán y mostrarán en un navegador de Internet. Este lenguaje se basa en tags que son instrucciones para indicar cómo se mostrará el texto y atributos que son los valores que se les pueden asignar a los tag.

Estructu

La creación de un documento o página Web con guiente estructura:

dela

</HTMl>

Todo página Web que se cree con HTML debe empezar con la etiqueta <HTML> y terminar con </HTML>. de la bien diferenciadas:

de una página

con

hay dos secciones

-------------------__,/Capitulo

1 Páginas HTML

con la <HEAD> y termina con ción de una pagina Web se indican los valores que se las pagina. La directiva mas utilizado en esta sección es Title el cual permite asignar un a la página web.

Titulo de la página Web.

con la <BODY> y se especifica el resto del contenido del l-l'Y\l"'\lt:~..,,".:l

Ejemplo Nº 101

<HEAD> <TITLE> Mi Primera Página Web </TITLE>

<BODY>

es opcional, esto q que las escribir también la siguiente manera:

<HTML> <HEAD> <TITLE> Mi Primera Página Web </TITLE> </HEAD> <BODY> </BODY> </HTML> Las instrucciones, pueden escribir

etiquetas o que crear en minúsculas como se muestra a

</head>

</body>

llJ-1'"~

Â·m

""""<]!

Web

</title>

Los editores son los", .. rvr« ..,.,...,,.,,..,,,.

para crear las

escribir las

inas Web.

El más en dentro de Accesorios en el

llHlll"'ll'l,..,

.. ,,,.

Notas que se encuentra

Sin importar el editor que debe grabar los documentos HTML en formato texto y con la extensión HTM o HTML.

mweaver. En

1 Pági.hasHTML

-------------------_,,/Capitulo

y se ha grabado con el nombre Primera.html.

<TlTLE'.>

</TITU?'.>

<BODY>

de como naveoanor servará el archivo con el logo respectivo en el explorador de Windows: ........... ,... e-

En A continuación

r"·

se indica cómo mostrarla.

En e! explorador de Wíndows haga clic en

a Opciones de carpeta.

Desarrollo

web con PHP ''------------------

Desconectar de unidad de red... 51ncronizar••.

Opciones de Cat'peta.,.

En esta ventana active la hoja Ver y desactive la casilla: Ocultar las extensiones de archivos para tipos de archivos conocidos. Para terminar haga el botón Aceotar

Puede aplicar la visla que está usando con e:Sta capetapata el re*to (corno Oet-:3~es o Mosa1,c;os1

--------------------/Capitulo

Pรกgtnas HTML

......... ,.,............ Web en un un navegador de de Windows para su contenido de los siguientes procedimientos:

al Internet

Internet Explorer

Abrir.

De la ventana que se visualiza ingrese a la carpeta donde HTML y en el combo Tipo seleccione Archivos HTML:

el archivo

clic en su nombre y clic en el

en el

Procedimiento

Nº 02

Otra forma de abrir una página Web es mediante el explorador de Windows, ingresando a la carpeta donde se encuentra el archivo y haciendo doble clic en su nombre.

Procedimiento También puede abrir una página Web haciendo anti clic en el nombre del archivo y eligiendo la opción Abrir.

Editar con VSh.1dío Abrir !a misma ventana Print

Si usted modifica su página Web, grabe los cambios realizados en el bloc de notas y haga clic en el botón Actualizar del Explorador de Internet.

En el siguiente ejemplo se ha modificado el título de la ventana, ahora dice: Mi primera página Web Modificada. 20

rpo

Como ya se mencionó, el de un documento HTML empieza con la etiqueta <BODY> y termina con </BODY>. En esta sección se escriben las instrucciones o etiquetas para crear el contenido de la página Web la cuales se detallan a Lo primero que tiene que saberes que en forma predeterminada una página Web sólo reconoce un espacio en blanco entre cada palabra y todo el texto se ajusta al ancho del aunque se en líneas como se muestra en el siguiente ejemplo:

una o

na pa l una

y nea.

Observe como en el cuerpo del documento HTML se han dejado varios espacios en blanco y todo el texto se ha en tres líneas, se el contenido de la el ocupa una hasta el ancho de la ventana del explorador de Internet.

Ejemplo de como una Pagina Web reconoce solo un espacio entre palabras y todo se muestra en una línea. </BODY>

·Si disminuimos el ancho del Explorador el texto se ajusta automáticamente.

En se tratamiento de exoucan a continuación.

dejar de caracteres

utiliza para

saltar

textos en múltiples

Las siguientes crean una Web donde se un espacio entre palabras y el texto se escribe en varias líneas: <HEAD> Mi </TITLE> </HEAD> <BODY> Un Espacio. <BR> Tres &nbsp Espacios. <BR> Seis ~ .. ·~v,_, </BODY> </HTML>

más de

____________________

texto que se

0c1"nt'i.a

y como se escribe,

___,/Capitulo

1 Páginas HTML

entre estas etiquetas se muestra en la n-::i,.nin-:::i· Web tal. los en blanco y línea.

Las siguientes instrucciones crean una página Web donde se deja más de un espacio entre palabras y el texto se escribe en varias líneas: <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web /TITLE> </HEAD> <BODY> <PRE> En este texto de ejemplo se respeta los espacios dejados y los saltos de </PRE> </BODY> </HTML>

Líneas

Sec su navegador de no los esoecrares como las vocales con tilde o la letra Ñ o desea mostrar dentro del texto una página •m ...,,....,,..\C' esoeciaies de HTML como el signo> o< utilizar el

menor que:<

Muestra el ampersan: &

Muestra las comillas: "

el siguiente documento HTML se caracteres es1:>ec~1mes.

secuencias de escape

mnc-h·•">r

<HTML> <HEAD> <TITLE> </HEAD> <BODY> 5

Mis Primeras

Web </TITLE>

</BODY> </HTML>

Desarrollo

5 < y l3 Coropany & \,.;iCimoruw Aprendiendo ll HThJL el navegador los puede en el siguiente

aceota los caracteres especiales como se muestra

El resultado de la

<HTML> <HEAD> </HEAD> <BODY> 5 < y 13 > 1 O <BR> Cornpany & Company <BR> Aprendiendo " HTML " </BODY> </HTML>

1 Páginas HTMl

---------------------/Capitulo

la letra á.

iüacute Muestra la letra é.

Muestra la letra

la letra í.

í.

Muestra la letra Ó.

tsoacute

ft:Uacute

Muestra la letra

ó.

Muestra la letra

ú.

Muestra la letra Ú.

Muestra la letra ñ.

ftNtilde Muestra la

Nº En el siguiente documento HTML se secuencias escape para mostrar las vocales mayúsculas y minúsculas con tilde así como la ñ y Ñ. <HTML> <HEAD> Mis Primeras

Web </TITLE>

<BODY> &aacute &eacute &iacute &oacute &uacute &ntilde <BR> &Aacute &Eacute &Iacute &Oacute &Uacute &Ntilde </BODY> </HTML>

El resultado de la

ÁÉÍÓÍ

Si el navegador de Internet que usted utiliza acepta estos caracteres los puede escribir directamente en el documento HTML como se muestra en el siguiente ejemplo y el resultado de la Web será el mismo. <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> í ó fi <BR> ÁÉÍÓ Ñ </BODY> </HTML> á

Los comentarios son texto que se HTM L con la de ir la Web.

uu.,; ....n.J•

textos no se muestran cuando navecaoor de nternet.

<!son

: 17/10/07 ->

<HTML> <HEAD> <TITLE> M1s Primeras Páginas Web </TITLE> </HEAD> <BODY> <H'I> Este es un eJ::-:::;:1- de título </Hl> </BODY> </HTML>

Ejemplo

es el

106

Aquí se muestra <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <Hl> Esto es un Título Nº 1 </Hl> <H2> Esto es un Título Nº 2 </H2> , <H3> Esto es un Título Nº 3 </H3> <H4> Esto es un Título Nº 4 </H4> <HS> Esto es un Título Nº 5 </H5> <H6> Esto es un Título Nº 6 </H6> </BODY> </HTML>

Esto es un Título Nº 2 Esto es un Titulo W 4 ·

Dentro de la alinear un título a la derecha se muestra un <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <H1 . lign=t """"HPr;> Título Centrado </Hl> </BODY> </HTML>

Web es el

Desarrollo

web con PHP "'---------------------

les

La etiqueta <HR> permite dibujar una línea horizontal y al mismo tiempo realiza un salto de párrafo.

Ejemplo Nº 107 En el siguiente documento HTML se muestran dos títulos centrados y-separados por una línea Horizontal. <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <H1 Align=Center> INFORME DE CLIENTES </H1 > <HR> <H2 Alig n=Center> Provincia: Chíclayo</H2> </BODY> </HTML>

Se alinear la ancho de la pantalla.

Se utiliza para

horizontal cuando no se

en todo el

para que la línea no en todo su grosor.

el ancho que

que se

tener la

documento HTML se muestran tres títulos centrados y sepor dos líneas Horizontales también centradas. La sombra. La sombra.

línea tiene un grosor de 1 O y de un ancho del 80% línea tiene un

de 8 y

del

está con

y está sin 35

iPHP]i

Desarrollo web con PHP

Contenido del documento

°"----------------..--HTML:

<HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <Hl Align=Center> INFORME DE CLIENTES </Hl> <HR Align=Center Size= 1 O width=80%> <H2 Align=Center> Provincia: Chiclayo</H2> <HR Align=Center Size=8 noshade width=50%> <H3 Align=Center> Distrito: La Victoria</H3> </BODY> '</HTML> El resultado de la página Web es el siguiente:

Provincia:

eaciones Como se indicó, el parámetro ~lign de un titulo o de una línea horizontal permite alinear dichos elementos en una Web, peroen HTML se puede utilizar la etiqueta <CENTER> </CENTER> para centrar los elementos que contienen, se encuentran del inicio y final de la --~ .. \.ALIL>LCA.

Ejemplo Nº 109 En el siguiente se muestra el anterior pero utilizando la etiqueta <CENTER>

</CENTER>.

<HTML> <HEAD> <TITLE> Mis Primeras Páginas Web <ffITLE> </HEAD> <BODY>

<CENTER> <Hl> INFORME DE CLIENTES </Hl> <HR Size= 1 O width=80%> <H2> Provincia: Chiclayo</H2> <HR Size=S noshade width=50%> <H3> Distrito: La Victoria</H3> </CENTER> </BODY>

</HTML>

y El lenguaje tiene la permiten asignar tipos y tamaños de letras así como colores como se exa continuación. vU\.4Vv\'!;A

Este parámetro permite establecer el tamaño de mediante un número que puede de 1 a 7. El predeterminado es 3. Esto quiere si no este el es 3. las siguientes instrucciones el texto que se escriba entre las quetas se mostrará con el tamaño Nº 06.

los letra. letra o fuentes que se utilicen sean estándar, es que se encuentren en todas la computadoras donde se puede ejecutar la pagina Web.

por una coma, esto de letra en caso que la anterior

maños de letra. <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <FONT SIZE=l> Tamaño 1 </FONT><BR> <FONT SIZE=2> Tamaño 2 </FONT><BR> <FONT SIZE=3> Tamaño 3 </FONT><BR> <FONT SIZE=4> Tamaño 4 </FONT><BR> <FONT SIZE=5> Tamaño 5 </FONT><BR> <FONT SIZE=6> Tamaño 6 </FONT><BR> <FONT SIZE=7> Tamaño 7 </FONT><BR> </BODY> </HTML>

Ejemplo

111

el siguiente de letra.

HTML se muestra un texto con

rflt•::i.ra.nt.e:ie?

<HTML> <HEAD> <TITLE> Mis Primeras Páginas Web <!TITLF> </HEAD> <BODY> <FONT FACE="Arial"> Arial </FONT><BR> <FONT F ACE="Time New Reman"> Time New Roman </FONT><BR> <FONT F ACE="Courier New"> Courier New </FONT><BR> <FONT FACE="Verdana"> Verdana </FONT><BR> </BODY> </HTML>

es el

Time New Reman Courier

verdena

documento se muestra un con l'i!'tt:::>rontc~c de letra Arial se muestra con tamaño 6 y el tamaño 7.

Si no existe el tipo de letra Verdana se utilizarรก el tipo <HTML> <HEAD> <TITLE> Mis Primeras Pรกginas Web </TITLE> </HEAD> <BODY> <FONT FACE="A1ial11 SIZE=6> Arial </FONT><BR> <FONT FACE="Time New Reman"> Time New Roman </FONT><BR> <FONT FACE="Courier New"> Courier New </FONT><BR> <FONT FACE="Verdana'', SIZE=7> Verdana o Century </FONT><BR> </BODY> </HTML>

Co Este parรกmetro de la etiqueta Los colores se asignar de dos maneras:

letras.

Asignado como valor a este parรกmetro el nombre del color que ya viene

--------------------J/

tres

Capitulo 1 Pรกginas HTML

teal

Verde claro

red

rojo

blue

azul

maroon

marrรณn

navy

azul marino

gray

lime

lima

fuchsia

fucsia

white

blanco

green

verde

purpura

silver

plata

amarillo

aqua

agua

a este <FONT COLOR=#Valor1Valor2Valor3>

uno de los valores ir desde 1 255 (Base equivalencias entre decimales (1er. (2do. Numero).

Equivalencias decimal . . hexadecimal 10

2iE

:82

1,54

190

1 '1

11'9

155

191

227

120

156

9C.

192

223

121

157

'193

229

5{J

122

153

194

230

123

159

·195

23·1

124

:?C.

160

196

232

125

161

197

1'8

1:2

:54

·126

162

198

:5:5

12'7

163

199

128

164

200

1:5

PC.

129

1füj

201

·3A

130

8:2

ree

20:2

Q.F.

131

167

203

6{)

;3!:;

132

168

133

169

205

3E.

134

170

206

207

226

t35

2;8

18 .1C

171

4.0

100

·136

172

208

101

137

173

209

102

138

SA.

174

A.E

210

175

211

24.7 24.'8

4.3

10:3

139

6'8

4.4

104

140

212

105

141

177

213

249

·106

6A'

142

178

214

250

Hl7

14:3

BF.

17'9

215

251

rea

144

180

216

252 253

.1F

34 3-5

176

2:5

4'9

109

l.:j5

181

217

110

146

182

2'H:l

DA.

254

111

133

219

255

:4C

112

148

9,4

134

220

4.1

113

149

H~5

221

7:8

150

186

222

<BODY> <!-

<FONT <FONT COLOR=#OOOOFF> '"''"-./.L..d'J',_.._

El resultado de la página Web es el si guiente:

Ejemplo Nº 1 En el siguiente documento HTML se muestra el texto:

Este texto se muestra en el centro de la página y con tipo de letra Arial, tamaño 6 y con un color que se obtiene asignando valores hexadecimales donde se aplica una intensidad de 100 (64 en hexadecimal) para el color rojo, 170 (AA en hexadecimal) para el color verde y una intensidad de 200 (C8 en hexadecimal) para el color azul. Para un mejor entendimiento, observe el cuadro equivalencias de página anteriores. Contenido del documento

HTML:

<HTML> <HEAD> <fITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <CENTER> <FONT COLOR=#64AAC8 Size=6 FACE="Aria"> EDITORIAL: RITISA </FONT><BR> </CENTER> </BODY> </HTML>

El resultado de la página Web es el siguiente:

El lenguaje también permite asignar ciertos de letras a los tos que deseamos mostrar en una página Web como negrita, subrayado, etc. <B> </B> Esta etiqueta permite poner en

n=•r•rn·~

un texto.

<I> </I> Esta etiqueta permite poner en cursiva un texto. 45

Esta etiqueta permite poner un texto subrayado.

Ejemplo Nยบ 115 En el siguiente documento HTML se muestran textos en negrita, cursiva, subrayados y con los tres estilos juntos en el centro de la pรกgina. <HTML> <HEAD> <TITLE> Mis Primeras Pรกginas Web <!TITLE> </HEAD> <BODY> <CENTER> Normal <BR> <B> Ne grita </B> <BR> <I> Cursiva </I> <BR> <U> Subrayado </U> <BR> <B><I><U> Negrita, Cursiva y Subrayado </U></I></B> </CENTER> </BODY> </HTML>

El resultado de la pรกgina Web es el siguiente:

Normal Nergi.ta Cursiva

Los estilos anteriores son gicos para resaltar los textos

ll".'.'.llfl"'n".'.!!, ........ C'

destacar un texto. ""'"'â&#x20AC;˘"''-""'''"""" antes y de mostrar el texto realizando de l"'\".:J!lrr~::nrn

para mostrar

\..11"4â&#x20AC;˘.:JIJ\.A'IJu

mostrar el

mostrar

> mostrar textos en

puede utilizar

representar texto que se

utilizar

llPHPll

Desarrollo web con PHP '...._

<STRIKE> <ISTRIKE> Permite mostrar un texto tachado.

<STRONG><ISTRONG> Permite mostrar un texto resaltado con negrita.

< VAR><IVAR> Se puede utilizar para representar variables en una página Web.

Ejemplo Nº 116 En el siguiente documento HTML se muestran textos con los estilos lógicos con tamaño Nº 5 y centrados. <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <CENTER> <FONT SIZE=4> Normal<BR> <ADDRESS> ADDRESS </ADDRESS> <ADDRESS> jjcl@hotmail.com </ADDRESS> <BLOCKQUOTE> BLOCKQUOTE </BLOCKQUOTE> <CITE> CITE </CITE> <BR> <CODE> CODE </CODE> <BR> <DFN> DFN </DFN> <BR> <EM> EM </EM> <BR> <KBD> KBD </KBD> <BR> <SAMP> SAMP </SAMP> <BR> <STRIKE> STRIKE </STRIKE:::,. <BR> <STRONG> STRONG </STRONG> <BR> <V AR> V AR <N AR> <BR> </FONT> </CENTER> </BODY> </HTML> 48

Normal

CODE

EM KBD SJ\Ml?

STRONG

El lenguaje HTML también permite asignar atributos a toda la página ".:lci,nn·::i.r f"\roc a los en el momento H·".ll1

OVt"\lll",A

al inicio de este libro, la creación de un documento de la estructura:

l'"l~t"'lln'::l>

llPHP!I

Desarrollo web con PHP "'------------------

</HTML>

Donde el cuerpo de la página empieza con la etiqueta <BODY> y termina con </BODY> y en esta sección se especifica el resto del contenido del documento o página Web. Al crear el cuerpo de la página se puede utilizar los siguientes atributos:

BACKGROUND Se utiliza para establecer una imagen de fondo a la pantalla. Si la página Web y la imagen que desea establecer como fondo se encuentran en el mismo sitios basta con asignarle a este atributo el nombre del archivo que contiene la imagen, de lo contrario debe escribir antes del nombre la dirección donde esta grabada de la imagen. Si el tamaño de la imagen no ocupa todo el fondo de la página esta se multiplicará hasta Henar todo el fondo. Las siguientes instrucciones crean una página Web que tiene como fondo una imagen llamada Chiclayo.jpg y como se muestra en el resultado el tamaño de la imagen no ocupa toda la página por lo que se multiplica. <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY BACKGROUND=11Chiclayo.Jpg"> </BODY> </HTML>

<HEAD>

<ÃHTML>

llPHPll

Desarrollo web con PHP "'-----------------

Se utiliza para asignar el color predeterminado del texto, que se muestra en una página, es decir, el color que tendrá el texto cuando no se utiliza el COLOR de la etiqueta FONT. El predeterminado de las páginas es el negro. Las fondo de color y con un título de color <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY TEXT= Blue" BGCOLOR="Red"> <Hl Iniciando PHP </Hl> </BODY> </HTML> 11

crear cuerpo una a elementos que se explican más adelante en este capítulo como son Los Hipervínculos.

Se usa una es el azul.

utiliza para asignar el color que deben tener

Las listas son un conjunto de elementos que se pueden crear con el lenguaje HTML para mostrarlas en una página Web. HTML crea 3 tipos de listas: Listas No Ordenadas. Listas Ordenadas. listas de Definición.

No Ordenadas

<UL TYPE icono> <LH> Título de la Lista </LH> <U> Elemento N<> 01 <LI> Elemento N<> 02 <U> Elemento Nº 03

<LI> Elemento Nº </UL>

icono es 54

que

de la lista y puede ser:

square <LH> Es opcional y se puede

asignar un título a la lista de

Ejemplo Nº 117 En el siguiente documento se muestran los nombres de tres de listas no con el icono círcle y tamaño 5. <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY>

<FONT SIZE=5> <UL TYPE="circle"> <LH> Lenguajes de Programación <LI> Cobol <LI> RPG <LI> Fortran </UL> </FONT> </BODY>

</HTML>

Cobol

En la siguiente ventana se ha usado el icono disk.

En la siguiente ventana se

<HTML> <HEAD> <TITLE> Mis

u-··~~-n~

<FONT SIZE=5> <UL <LH> SOFTWARE: <Ll> ..._,...,,,;:::;...,., ... ,,. ,.,, <UL <LI> Cobol <LI> <LJ> >-<nrrr•~n

</UL> </BODY>

Web </TITLE>

</LH>

Desarrollo web con PHP "-------------------

• Cobol

• Lotus 123

•

·o

Las listas ordenadas se caracterizan porque cada elemento va enumero. crear <íLH> <U> Elemento Nº 02

<íUL>

yse la cual se indica con el valor de ele-

El se mentes lo se indica con el

Enumera

con letras

a Enumera

con letras

Enumera

con números romanos en

Enumera-con

o enumero con números enteros.

tres

<HTML> <HEAD> <TITLE> Mis Primeras </HEAD> <BODY> <FONT SIZE=5> <OL TYPE="A"> <LH> -'-'"'·'A'-'·"1 <LI> Cobol <LI> RPG <LI> Fortran </OL> </FONT> </BODY> </HTML>

Web </TITLE>

Desarrollo

web

Lenguajes de A. B. RPG C.

En el siguiente ejemplo se ordena con números a partir de 7: <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <FONT SIZE=5> <OL START=7 TYPE= 0"> <LH> Lenguajes de Programación </LB> <LI> Cobol <LI> RPG <LI> Fortran </OL> </FONT> </BODY> </HTML> 11

~IPHP1

Desarrollo web con PHP "-------------------

<HTML> <HEAD> <TITLE> Mis Primeras Pรกginas Web </TITLE> </HEAD> <BODY> <FONT SIZE=5> <OL TYPE="I"> <LH> SOFTWARE: </LH> <LI> Lenguajes de Programaciรณn <OL TYPE="O"> <LI> Cobol <LI>RPG <LI> Fortran </OL> <LI> Hojas de Calculo <OL TYPE="O"> <LI> Lotus 123 <LI> Qpro </OL> <LI> Manejadores de Base de Datos <OL TYPE="O"> <LI> DBase <OL <LI> DBase I DBase II <LI> DBase III Plus <LI> F oxBase </OL> </FONT>

es el

<DL> <LH> Título de la Lista </LH> <DT> Termino Nº 01 <DO> Definición del Termino Nº 01 <DT> Termino Nº 02 <DO> Definición del Termino Nº 02 <DT> Termino Nº 03 <DO> Definición del Termino Nº 03

<DT> Termino Nº n <DO> Definición del Termino Nº n </DL>

<LH> . Como en los casos anteriores, esta etiqueta es opcional y para establecer un título a la lista de definiciones.

utilizar

Como lo muestra la sintaxis, la etiqueta <DT> se utiliza termino que deseamos definir.

escribir el

Es etiqueta se utiliza para escribir el termino.

Ejemplo

119

En el siguiente documento HTML se muestra una lista de definiciones:

64.

<HTML> <HEAD> <TITLE> Mis Primeras Pázinas Web </TITLE> </HEAD> <BODY> <DL> <LH> CONCEPTOS </LH> <DT> SOFTWARE </LH> <DD> Parte de una ,..,....,,,.,...,,.. <DT> HARDWARE </LH> <DD> Parte física de de una "'"'."'"'"',."r1n·•·'' </DL> </BODY> </HTML> 11,,."',,1""

... "

La creación de una tabla empieza con la etiqueta <TABLE> y </TABLE>.

con

En la etiqueta <TABLE> se puede utilizar en forma opcional valores y características afectarán a toda la tabla y son los

Este

se utiliza para el es O con lo que la

En tendrá

El valor

la tabla

rorâ&#x20AC;¢nrrHOlrlrl~

para estaoiecer que se le utilizar el valor en nAl"l"Oln'l'~IO.

<TABLE

que

UPHPU

Desarrollo web con PHP "- ......

Las siguientes instrucciones de ejemplo o.m..-.a.-:~..,."'.'.!.... a crear una tabla con un borde de 3 y con el título: Mi Tabla se mostrará en la parte inferior. <TABLE BORDER=3> <CAPTION ALIGN=BOTTOM> Mi Primera Tabla </CAPTION> </TABLE> Las siguientes instrucciones de ejemplo un borde de 5 y con el título: Mi parte superior.

a crear una tabla con Tabla que se mostrará en la

l"\....,,..• ..,.,r,...,,,..,,,....

<TABLE BORDER=S> <CAPTION ALIGN=TOP> Mi

Tabla </CAPTION>

</TABLE>

<ITR>

Esta etiqueta permite crear una fila dentro de una tabla. Si desea crear una tabla con 1 O filas que utilizar 1 O <TR> </TR>. Dentro de esta

se pueden

Se utiliza para indicar la alineación horizontal del contenido de todas las celdas que pertenecen a la fila. Los valores que se le pueden asignar son: Left (Izquierda), Right(Derecha) o Center El predeterminado es Left.

Se utiliza para indicar la alineación del contenido de todas las celdas que pertenecen a la fila. Los valores que se le pueden asignar son: Top (Arriba), Middle(Mitad) o Botton (Abajo). El predeterminado es Top.

celdas. Las

instrucciones crean dentro de la tabla una fila contenido '"''""'"·"'-"'"" se mostrarán en el centro con un de color

<TABLE

< crear coy para crear que se muestra con esta Dentro de esta

utiliza para indicar la alineación horizontal del contenido de todas las celdas a la Los valores que se le uu·v;u•¡;,1 El valor ....... ,,,,.r1,,,,,'11"c. .. ,,...... '""ri 1

que

1t'"\

ser en oixeies o

Desarrollo

web con PHP "-----------------

BGCOLOR Se utiliza para indicar el color de fondo de las celdas.

ROWSPAN Se utiliza para indicar el número de filas que ocupará la celda.

COLSPAN Se utiliza para indicar el número de columnas que ocupará la celda.

NOWRAP Si se utiliza este atributo el ancho de las columnas se extenderán de acuerdo al ancho que ocupa· el texto. Si no se utiliza, el texto pasará a la siguiente línea cuando se ocupe todo el ancho establecido para la columna.

Ejemplo Nº 120 En el siguiente documento HTML una tabla con un título y con una fila que tiene 4 columnas de cabecera.

<HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <TABLE BORDER=IO> <CAPTION ALIGN=TOP> Mi Primera Tabla </CAPTION> <TR ALIGN=cENTER VALIGN=MIDDLE> <TH> CODIGO </TH> <TH NOWRAP> APELLIDOS Y NOMBRES </TH> <TH> EDAD </TH> <TH> SEXO </TH> </TR> </TABLE> </BODY> </HTMT> 70

_..,._

__,/capitulo

1 Páginas HTML

crear dentro una columnas datos. Si la página Web contiene columnas de cabeceras, estas etiquetas a de la segunda con UVjY•'V•'-"

r'\.OV"l'Y\lirO

En este documento se crea una tabla con una fila de título y dos de datos.

<HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <TABLE BORDER=6> <CAPTION ALIGN=TOP> Mi Primera Tabla </CAPTION> <TR> <TH> CODIGO </TH> <TH NOWRAP> APELLIDOS Y NOMBRES </TH> <TH> EDAD </TH> <TH> SEXO </TH> </TR> <TR ALIGN=CENTER VALIGN=MIDDLE> <TD> 001 </TD> <TD> Davila Zapata Luis </TD> <TD> 25 </TD> <TD> M</TD> </TR> <TR ALIGN=CENTER VALIGN=MIDDLE> <TD> 002 </TD> <TD> Castañeda Pachecho Maria José </TD> <TD> 9</TD> <TD> F </TD> </TR> </TABLE> </BODY> </HTML> El resultado de la página Web es el siguiente:

___________________

__,/Capitulo 1 Pรกginas HTML

Si desea que la tabla se muestre en el centro etiqueta <CENTER>.

En este de se muestra la .... ~ .. , . . . . . , .... COLSPAN de las etiquetas <TH> y <TO>.

NOCHE ••••

v ..

·••·•···

3 GRUPO 1

Como se puede observar esta tabla está compuesta por 7 columnas: 2 columnas pertenecen al turno Mañana, 3 columnas al turno Tarde y 2 al turno noche. La primera y ultima fila debe utilizar el espacio de todas las columnas por lo tanto el valor de su atributo COLSPAN debe ser 7. La primera y tercera columna de la segunda fila (Mañana y Noche) ocupan el espacio de 2 columnas por lo tanto el valor de su atributo COLSPAN debe ser 2. La segunda columna de la segunda fila (Tarde) ocupa el espacio de 3 columnas por lo tanto el valor de su atributo COLSPAN debe ser ;3. Las siguientes instrucciones del documento HTML crean la tabla propuesta de la página anterior:

<HTML> <HEAD> <TITLE> Mis Primeras Pรกginas Web </TITLE> </HEAD> <BODY> <TABLE BORDER=7 WIDTH=l00%> <TR> <TH COLSPAN=7> INFORMES </TR> <TR ALIGN=CENTER V ALIGN=MIDDLE> <TD COLSP AN=2> </TD> <TD COLSPAN=3> TARDE </TD> <TD COLSPAN=2> NOCHE </TD> </TR> <TR ALIGN=CENTER V ALIGN=MIDDLE> <TD> GRUPO l </TD> <TD> GRUPO 2 </TD> <TD>GRUPO l <TD> GRUPO 2 </TD> <TD> GRUPO 3 </TD> 1 </TD> <TD> GRUPO 2 <ITD> </TR> <TR ALIGN=CENTER <TD COLSPAN=7> COSTO SI. 360.00 </TD> </TR> </TABLE> </BODY> </HTML>

:MAÑANA

TURNOS

TARDE

NOCHE COSTO Sl. 360.00

Esta tabla ahora está compuesta por 7 filas: 2 filas pertenecen al turno Mañana, 3 filas pertenecen al turno Tarde y 2 al turno noche. La primera columna debe utilizar el espacio de todas las filas por lo tanto el valor de su atributo ROWSPAN debe ser 7. La primera y tercera fila de la segunda columna (Mañana y Noche) ocupan el espacio de 2 filas, entonces el valor de su atributo ROWSPAN debe ser 2. La segunda fila de la segunda columna (Tarde) ocupa el espacio de 3 filas por lo tanto el valor de su atributo ROWSPAN debe ser 3. La ultima fila debe utilizar el espacio de las tres tabla por lo tanto el valor de su atributo Cuando se desea que una columna

tres

que forman la ser 3. entonces dentro de

la fila se crea columna con e! valor 3 en su PAN y otra columna mรกs que serรก al mismo tiempo la primera fila. Luego se crean el resto Las siguientes

instrucciones

crean la secciรณn TARDE de la tabla.

<TABLE BORDER=7 WIDTH=100%> <TR ALIGN=CENTER VALIGN=MIDDLE> <TD ROWSP AN=3> TARDE </TD> <TD>Grupo 1 </TD> </TR> <TR ALIGN=CENTER VALIGN=MIDDLE> <TD>Grupo 2 </TD> </TR> <TR ALIGN=CENTER VALIGN=MIDDLE> <TD>Grupo 3 </TD> </TR> </TABLE>

1 nstrucclones <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TJTLE> </HEAD> <BODY> <TABLE BORDER=7 WIDTH=l00%> <TR ALIGN=CENTER V ALIGN=MIDOLE> <TH ROWSPAN=7> TURNOS </TH> <TO ROWSPAN=2> MAÑANA </TO> <TD>Grupo 1 </TD> </TR> <TR ALIGN=CENTER VALIGN=MIDDLE> <TD>Grupo 2 </TO> </TR> <TR ALIGN=CENTER V ALIGN=MIDDLE> <TD ROWSPAN=3> TARDE </TD> <TD>Grupo ! </TO> </TR> <TR ALIGN=CENTER VALIGN=MIDDLE> <TD>Grupo 2 </TD> </TR> <TR ALIGN=CENTER V ALIGN=MIDDLE> <-TD>Grupo 3 </TD> </TR> <TR ALIGN=CENTER VALIGN=MIDDLE> <TD ROWSPAN=2> NOCHE <TD>Grnpo l </TD> </TR> <TR ALIGN=CENTER V ALIGN=MIDDLE> <TD>Grupo 2 </TD> <ITR> <TR AUGN=CENTER V ALIGN=MIDDLE> <TD COLSPAN=3> COSTO SI. 360.00 </TD> </TR> </TABLE> </BODY> </HTML>

Cuando se empieza una nueva columna (<TO> o <TH>) en forma automática se termina la creación de la columna anterior, es decir, no es necesario escribir </TO> o </TH>. Cuando se empieza una nueva fila ( <TR>) en forma automática se termina la creación de la fila, es decir, no es necesario escribir </TR>. Solo es necesario si se desea crear tablas arucaoas A continuación 78

se crea la misma

sin el cierre de las etiquetas indicadas.

-----------------------J/

Capitulo

1 Pรกginas HTML

En las siguientes instrucciones no se utiliza </TH>, </TO> ni la anterior. <HTML> <HEAD> <TITLE> Mis Primeras Pรกginas Web </TITLE> </HEAD> <BODY> <TABLE BORDER=7 WIDTH= 100%> <TR ALIGN=CENTER VALIGN=MIDDLE> <TH ROWSPAN=7> TURNOS <TD ROWSPAN=2> MAร ANA <TD> Grupo l <TR ALIGN=CENTER VALIGN=MIDDLE> <TD> Grupo2 <TR ALIGN=CENTER V ALIGN=MIDDLE> <TD ROWSPAN=3> TARDE <TD> Grupo l <TR ALIGN=CENTER V ALIGN=MIDDLE> <TD> Grupo 2 <TR ALIGN=CENTER VALIGN=MIDDLE> <TD> 3 <TR . T .l _ _ !:::!'4 t el<\. V ALIGN=MIDDLE> <TD ROWSPAN=2> NOCHE <TD> Grupo l <TR ALIGN=CENTER V ALIGN=MIDDLE> <TD> Grupo 2 <TR ALIGN=CENTER V ALIGN=MIDDLE> <TD COLSPAN=3> COSTO SI. 360.00 </TABLE> </BODY> </HTML>

y crean

UPHPU

Desarrollo web con PHP "......_

Insertar imágenes Usando HTML también puede insertar imágenes en una página Web. Normalmente las imágenes deben ser GIF o JPG. Se recomienda usar archivos GIF cuando desea mostrar imágenes pequeñas como los iconos y JPG para imágenes grandes y reales como una fotografía.

<IMG> Esta etiqueta HTM L permite insertar imágenes de una página Web. Sus atributos son los siguientes:

SRC Con este atributo se indica el nombre del archivo que contiene la imagen que desea insertar y mostrar en la página Web. Si el archivo que contiene la imagen está en la misma carpeta donde se encuentra el archivo HTML puede utilizar la siguiente sintaxis:

<IMG SRC="Nombre del Archivo"> Ejemplos: 1. La siguiente instrucción inserta en la página Web una imagen JPG llamada Computadora.J pg cuyo archivo se encuentra en la misma carpeta del documento HTML.

<HTML> <HEAD> <TITLE> Mjs Primeras Páginas Web </HEAD> <BODY> <IMG SRC="Computadora.jpg"> </BODY> </HTML> 80

</TITLE>

se encuentra se

!IPHPU

Desarrollo web con PHP "-"'""----------------

Si la imagen no esta grabada en la misma carpeta del documento HTML y estas practicando en tu computadora puedes escribir antes del nombre del archivo la ruta donde se encuentra.

<IMG SRC="Ruta\Nombre del Archivo"> Ejemplo, la siguiente instrucciรณn inserta en la pรกgina Web una imagen JPG llamada Oscar.Jpg cuyo archivo se encuentra en la carpeta D:\Fotos. <HTML> <HEAD> <TITLE> Mis Primeras Pรกginas Web </TITLE> </HEAD> <BODY> <IM G SRC="D: \F otos\Oscar.jpg"> </BODY> </HTML>

___________________

__,,/Capitulo

Se utiliza la Ruta de la imagen cuando estamos trabajando

Cuando

las páginas

Web que desarrollamos

1 Páginas HTML solo en nuestra

se deben visualizar

y desde de la red o un dato más amplio que la ruta llamado URL.

c0r111n1·u·

en un

utilizar

(Uniform Locator). Localizador perindicar la dirección de un recurso de la red o de cualquier elementos que deseamos insertar en nuestra página Web. Un URL se escribe de la siguiente manera:

Es el servicio Internet que usamos para las HTTP. otros como FTP para SMTP para servicios de correo electrónico, etc.

n~r,rn-::u:-

Maquina Dominio el nombre servidor como para leer un archivo que contiene una imagen JPG o GIF para insertar en nuestra !'"\".'.>,Nin".'.>

Es opcional y lo normal es no ponerlo si el puerto es el mismo normalmente por e! se cuando el <='""''"",. puerto distinto al puerto por defecto. El desde donde se" Web es el 80.

........

del servicio

UPHPU

Desarrollo web con PHP '~----------------

Es ruta de directorios que hay que seguir para encontrar el archivo al cual deseamos hacer referencia, por ejemplo al archivo que contiene la imagen que deseamos insertar en nuestra pรกgina.

Archivo. En el nombre incluyendo su extensiรณn del archivo que contiene la imagen. El siguiente ejemplo muestra el URL del archivo Tareas.Doc: http://www.usat.edu.pe/campusvirtual/documentos/tareas.doc Como puede observar, en este URL de ejemplo:

Servido: http.

Maquina-Dominio: www.usat.edu.pe

Puerto: No se ha especificado.

/campusvirtual/documentos/

Archivo: tareas.doc

este se un texto el cual se se el puntero del Mouse por la imagen o cuando la imagen no exista. <HTML> <HEAD> <TITLE> Mis Primeras Pรกginas Web </TITLE> </HEAD> <BODY> <IMG SRC="/Fotos/Oscar.jpg" ALT="Oscar de Leon"> </BODY> </HTML>

Desarrollo

web con PHP '-...__

ALIGN Este atributo se utiliza cuando queremos que la imagen vaya acompañada de un texto y según el valor que le asignemos permite indicar la posición de la imagen respecto al texto o la ubicación de la primera línea del texto.

Left Este valor indica que la imagen debe ir a la izquierda del texto. <HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <IMG SRC="/Fotos/Oscar.jpg" Align=LEFT> Este es el famoso faraón de la Salsa:OSCAR D' LEON el único que hace bailar a personas de todo estado físico y aquel que con sus canciones, música y ritmo nos ayudan a olvidar las penas. </BODY> </HTML>

Este es el famoso faraón de la Salsa:OSCAR .D' LEON el único que hace bailar a personas de todo físico y aquel que con sus canciones, ritmo nos ayudan a olvidar las

---------------------'/capitulo

1 Páginas HTML

<HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <IMG Este es el famoso faraón de la Salsa:OSCAR D' LEON el único que hace bailar a personas de todo estado físico y que con sus canciones. música y ritmo nos ayudan a olvidar las penas. </BODY> </HTML>

!MG

Desarrollo

web con PHP "'-....__

Este es el famoso faraรณn de la Salsa:OSGA.R D' LEON

IMG SRC="/Fotos/Oscar.jpg"

Align=MIDDLE>

Este es el famoso faraon <le la SrusaOSCAR D' LEON

--------------------/Capitulo

1 Pรกginas HTML

IMG SRC="/Fotos/Oscar.jpg"

Align=BOTTOf\11>

Este es el fumoso faraรณn de la Salsa:OSCAR D' I.EOJ>r

HEIGHT Con este atributo se puede cambiar la altura de la imagen que se desea mostrar en la en o en un .... ,....r,..I!".โ ข ... ,. .... ,ยบ la n~.f"'lln.~

este

<HTML> <HEAD> <TITLE> Mis Primeras Web </TITLE> </HEAD> <BODY> <IMG SRC="/Fotos/MariaFelix.jpg" HEIGHT==70%WIDTH=35%> </BODY>

JPHPU

Desarrollo web con PHP "'-----------------

BORDER Con este atributo se puede utilizar para cambiar el tamaño del borde de la imagen.

<HTML> <HEAD> <TITLE> Mis Primeras Páginas Web </TITLE> </HEAD> <BODY> <IMG SRC="/Fotos/Celia.jpg" BORDER=5 ALT="Celia Cruz"> </BODY> </HTML>

puntos horizontales:

UPHPi

Desarrollo web con PHP '~----------------,---

<HTML> <HEAD> <TITLE> Mis Primeras Pรกginas Web </TITLE> </HEAD> <BODY> <IMG SRC="oscar.jpg" HEIGHT=l50 WIDTH=lOO HSPACE=50> <IMG SRC="celia.jpg" HEIGHT=l50 WIDTH=lOO> </BODY> </HTML>

En este documento HTM L muestra cรณmo inserta imรกgenes dentro de tablas.

-----------------------J/

Capitulo 1 Pรกginas HTML

;)IPHPll

Desarrollo web con PHP "'-....._

Resultado de la página Web:

(n. 8 deo abril .(1~ 19' 14. FJ Qlli1ieg(:í, Álan:1"'"'· S.oo<l<!a " rt S rk Mifa.i.t:o) füe una actriz m.emcana <>:nwideradafa gran <lrn1 de M&:ko 'l

Hipervinculos Son llamados también enlaces o link y como su nombre lo indica permiten enlazar o ir en forma directa a otra parte de la misma páqna Web o a otra página.

Enlaces al mismo documento Este tipo enlace se utiliza e! contenido de la pรกgina Web es muy amplio y cuando se desea ir a una secciรณn de dicha pรกgina en forma directa

Ejemplo Nยบ 125 En este documento HTML muestra cรณmo se oni"'.3"7".:ln secciones que se encuentran en el mismo los .,..,..,,~.,,. . . . ,..,,

!IPHPU

Desarrollo web con PHP ,...___

de Carmen Díonisia Simoz:a y Just~ León, credó en fa . P•nn:ll.O~ta l:)attroq¡uia

temprana

Caraqueña oe Ar.ltúni·ino en donde desde eomtnt•) a mten::satse pr;>r la música

le b'\lStaba interpretar a las grandes orque stai de la na manifestado que siempre adnúró particularmeate a i.ntérpretel! Be:nny Moré: y Celia Cruz ~·esar

man.a Celia CM.dad Cr-w:: A.i&>ns<>. (*La Hahma; 21 octubre de 1925 • t Fcrt Lee, Nueva Jersey; 11$ de julio

2003) .;anmnte cubana de :;aba que pasó fa mayor partit.' su carrera •.nviendo y trabajando en Íos Estados Unidos .

de los Á4geles Félix Guei·dia (n, 8 de abril dé 1914, El 8 de abril de 2.002. Ciu.;jad de füe una actriz mexicana . C<:>nsiderada de arlrn'!'·rn.i~« internacional de ro. pm.

:-<•c<an'W,~"~• .Á:larnos, S-onora ~ m,

Los enlaces principales son tres:

Osear O' Leen es un enlace a una parte de la pรกgina

llamada Osear.

Osear asignado

Esta

documento tiene un

a una

documento: ,,.

<TR> <A Name=t'Oscar"> <td> <IMG SRC="/Fotos/Oscarjpg" Height=l50 Width=lOO> <td> Hijo de Carmen Dionisia Simoza y Justo Leรณn, ... </A> <A HREF="#Inicio"> Regresar </A>

Las siguientes instrucciones muestran los enlaces a las secciones: 1

<TR> <TH colspan=5> GRANDES FAMOSOS <BR> <A HREF="#oscae'> Osear D' Leon </A> <BR> <A HREF= #celia"> Celia Cruz </A> <BR> <A HREF="#maria"> Maria Felix </A> 11

Desarrollo

web con PHP

°"'-------------------

<Htm1> <Head> <Title> Mis Primeras Páginas Web </title> </Head> <Body> <A Name="Inicio"> </A> <Table Border=6> <tr> <th colspan=5> GRANDES FAMOSOS <BR> <A HREF="#oSCAR"> Osear D' Leon </A> <BR> <A HREF="#celia"> Celia Cruz </A> <BR> <A HREF=11#maria11> Maria Felix </A> <tr> <th> Nombre· <th> Datos <tr> <A Name=" Osear"> <td> <IMG SRC="/Fotos/Oscar.jpg" Height=150 Width=lOO> <td> Hijo de Carmen Dionisia y Justo León, ... </A> <A HREF="#Inicio"> Regresar <tr> <A Name="Celia11> <td> <IMG SRC="/Fotos/celia.jpg" Height=l50 Width=IOO> <td> Úrsula Celia Caridad Cruz Alfonso, ... </A> <A <tr> <A Name=vlvlaria"> <td> <IMG SRC="/fotos/maria.jpg" Height=l50 Width=lOO> <td> María de los Ángeles Félix Güereña ... </A> <A HREF="#Inicio"> Regresar</ A>

Resultado del documento HTML:

enlaces pueden ser un texto '-'"'""'""" o por ejemplo una imagen.

con La siguiente sintaxis se utiliza cuando deseamos utilizar un texto como enlace: <A HREF="URL"> Texto </A> La URL puede ser absoluta o relativa. URLabsoluta consista en escribirla dirección corroe-

ta donde se encuentra la página HTML a la cual queremos ac:cecter o llamar. Ejemplo: <A HREF="http://www.usat.edu.pe/documentos/informes.html">

Informes </A>

En las URL relativas solo se especifica el directorio y/o el nombre de la página HTML a la cual deseamos acceder y se utiliza cuando está grababa en el y servidor <A En cualquiera de los casos anterior se mostrará en la página el texto de enlace:

Ejemplo Nº 126 En este documento HTML se muestra el enlace a otras páginas Web utilizando su URL absoluto. <Html> <Head> Páginas Web <ztitle> <Title> Mis </Head> <Body> <center> <Hl> PÁGINAS PRINCIPALES </Hl> <A HREF=f!http://www.editorialritisa.com''> RTISA </A> <P> <A </A><P> <A HREF="http://www.usat.edu.pe"> USAT </A> <BR> </center> </Html>

ílPHPI

Desarrollo web con PHP "- ....

_,_

http :/ /www. u sat. ed u. pe

Cuando nos queremos enlazar a una página que no existe se visualiza lo siguiente:

No se Web s:oticitada no está disponible en este momento. el sitio Web ten9~ problemas téenlces o necesite cn1r.N1,'Hi1t'~cttH'1 de explorador,

"' Hac,¡.~ clic en más tarde.

botón

se zando su URL relativo.

puede observar, cada pรกgina principal.

104

tiene un enlace para regresar a la

<Html> <Head> <Title> Mis Primeras </Head>

Web <ztitle>

<e en ter> <Table Border=6> <tr> <th> GRANDES FAMOSOS <P> <A HREF="Oscar.htmll!> Osear D' Leon </A> <P> <A HREF="Celia.html"> Celia Cruz </A> <P> <A HREF="Maria.html"> Maria Felix </A> </Table> <zcenter> </Htmi>

<Html> <Head> <Title> Mis Primeras Páginas Web </title> </Head> <Body> <center> <Table Border=6> <tr> <th> Foto <th> Datos <th> Foto <tr> <td> <IMG SRC="/Fotos/Oscar.jpg" 50 Width=lOO> <td> de Carmen Dionisia Simoza y Justo León, creció en la populosa parroquia Caraqueña de Antímano en ... <td> <IMG SRC="/Fotos/Oscar2.jpg" 50 Width=IOO> </Table> <P><A Regresar </A> </center> </Body> </Html>

Contenido

documento

Celia .Html

<Html> <Head> <Títle> Mis Primeras Páginas Web <ztitle> </Head> <Body> <e en ter> <Table Border=ó> <tr> <th> Foto <th> Datos <th> Foto <tr> <td> <IMG SRC="/Fotos/celia.jpg" Height=l50 Width=lOO> <td> Hilaría Celia Caridad Cruz Alfonso, Habana; 21 de octubre de 1925 - t F ort Lee, ... <td> <IMG SRC="/Fotos/celia2.jpg" Height=l50 Width=IOO> </Table> <P> <A HREF="Principal.Html"> Regresar </A> </center> </Body> </Html>

Hilaria Celia Caridad Cruz Alfonso,

de octubre 1925 · t Port Lee, del 2003) cantante cubanade salsa de su carrera viviendo y trabajando

Desarrollo web con PHP "-..._

. . .;. . . .

<Html> <Head> <Title> Mis Primeras Páginas Web </title> </Head> <Body> <center> <Table Border=6> <tr> <th> Foto <th> Datos <th> Foto <tr> <td> <IMG SRC="/fotos/maria.jpg11 Height=150 Width=lOO> <td> María de los Félix Güereña (n. 8 de abril de 1914, El Quiri ego, Álamos, ... <td> <IM G SRC="/fotos/maria2.jpg" Height= 150 Width= 100> </Table> <P> <A HREF="P1incipal.Html"> Regresar</ A> </center> </Body> </Html>

Datos Félix Güereña (n l3 de Sonora ·· rn. 8 de abril Mé~co) fue una actriz mexicana Considerada an diva <le .México y la actriz más internacional de su

108

con La siguiente sintaxis se utiliza cuando deseamos utilizar una imagen como

La URL de la que oesearnos acceoer va como en los casos y mostrar en forma opcional un texto. Ejemplo: <A HREF="www.lambayeque.com"> <IMG

En este se hace

</A>

UPHPU

Desarrollo web con PHP "...._

<Html> <Head> <Title> Mis Primeras Páginas Web </title> </Head> <Body> <center> <Table Border=6> <tr> <th> GRANDES FAMOSOS <P> <A HREF="Oscar.html"> <IMG SRC="/Fotos/oscar.jpg" Height=80 Width=50> </A> <A HREF="Celia.htm1."> <IMG SRC="/Fotos/celia.jpg" \. Height=80 Width=50> </A> <A HREF="María.html"> <IMG SRC="/Fotos/maria.jpg" Height=80 Width=50> </A> </Table> </center> </Body> </Html>

110

Si usted desea acceder a una seccion la

que tenemos una famosos cada uno de ellos tiene un nombre #Maria. Las llama desde una

n"'.'.:lrun~

</A>

<A 20> Maria

</A> 11

Güereña (n. 8 de abril de 1914., El Sonora " m. 8 de abril de 2002, Ciudad <le fue una actriz mexicana Considerada la gran diva de y la actriz más internacional de su país. Regresar

Abrir páginas Web en una ventana diferente Si usted desea ,..,..,,...,,...,..¡,.... .. que es llamada

la con el valor

Por ejemplo, la ventana diferente: <A

112

D' Lean </A>

--------------------/Capitulo

1 Pรกginas HTML

Cuando vamos a usar dentro <FrameSet> </FrameSet> en lugar de continuación:

se utiliza la etiqueta </Body> como se indica a

<Html> <Head> <Title> Titulo de la Página </title> </Head> <FrameSet> Contenido de los Frames </FrameSet> </Html>

Puede agregar las etiquetas <NoFrames> </NoFrames> para mostrar algo cuando el navegador no acepte Frames.

<FrameSet> Contenido de los </FrameSet> <NoFrames> Cuando no se acepta Frames </NoFrames>

Este atributo permite crear o horizontales. A este atributo se le asigna el tamaño del frame o trames que desea crear separados por una coma. El valor ser en se aceota asterisco(*) que indica el resto

114

crea resto

los

para indicar la

para indicar el

cada crean ellas.

<Html> <Head> <Title> Mis Frarnes </titie> </Head> <FrameSet Rows=" 50%,25%,25% "> <FRAME SRC="Oscar.Html" Name=I'Oscar"> <FRAME SRC="Celia.Html" Name="Celia"> <FRAME Name=t'Maria"> </FrameSet> </Html>

ventana tres

':lClt"'ln':l

una coma. 116

crear en el tamaĂąo del frame o ........... Y\,......

Por ejemplo, las siguientes instrucciones crean tres trames verticales muestra una una El se llama Ritisa y el 35%. el Peru y el ocupa el resto de la ventana (*). <Html> <Head> <Title> Mis Frarnes <ztitle> </Head> *"> <FrameSet <FRAME SRC="http://www.editorialritisa.comn Name=tRitisa''> <FRAME SRC="http://www.peru.gob.pe" Name=tPeru"> <FRAME Name=tDsat"> </FrameSet> </Html>

Desarrollo

web con PHP ".._

Por ejemplo, las sin anidamiento. En el se muestra la y en el segundo la pรกgina www.google.com:

verticales www.salud.com

Tl""'.>l'Y\CJโ ข<'.'

<Html> <Head> <Title> Mis Frames Simples </title> </Head> <FrameSet Cols="35%, *"> <Frame src="http://www.salud.com" Name=fSalud"> <Frame src="http://www.google.com" Name=v'Google"> </FrameSet> </Html>

se crean verticales pero frame se divide en tres trames horizontales y diferente: www.google.com,

Ejemplo Nยบ 129 En este documento HTML se muestran varias pรกginas Web en trames doblementeanidados: <Html>

<Head> <Title> Mis Frames Anidados </title> </Head> <FrameSet Rows="25%, *"> <Frame src="http://www.editorialritisa.com" Narne=t'ritisa''> <FrameSet Cols="35%, *"> <Frame src="http://www.salud.com" Name=t'Principal"> <FrameSet Rows="35%,35%, *"> <Frame src=t'http.z/www.google.com'' Name=r'Google''> <Frame src="http://www.traducegratis.com" Name="Traductor"> <Frame src="http://www.peru.gob.pe/" Name="Peru"> </FrameSet> </FrameSet> </Html> 120

FRAME además de los atributos

Es opcional

y permite especificar la altura de los márgenes en píxeles.

Es y si la tener plazamiento. Puede tener los valores: Yes, No o Auto. E! valor Auto indica

La siguiente instrucción indica que la página www.google.com sin sus barras de desplazamiento:

se muestre

NORESIZE Este atributo se utiliza para indicar si los usuarios pueden cambiar el tamaño del frame cuando se muestre en la página Web.

FRAMEBORDER Este atributo se para si el debe tener bordes o no. valor 1 es el predeterminado e indica que debe tener borde y el valor O indica que no debe tener borde. Las siguientes instrucciones de ejemplo muestran un frame principal y 3 vacíos con bordes: <Html> <Head> <Title> Mis Frames Anidados <ztitle> </Head> <FrameSet Cols="35%,* > <Frame src= http://www.editorialritisa.com Name="Principal "> <FrameSet Rows="35%,35%, *"> <Frame Name="Google"> <Frame Name='Traductor''> <Frame Name=I'Peru''> </FrameSet> </FrameSet> </Html> 11

122

Anidados

</title>

que trame se debe visualizar una y

1 mostramos el uso para

en que

mostrar

-------------------__;/Capitulo

que se

las

<html> <head> <title> Mis Paginas Web <ztitle> </head> <center> <Hl> </center> </body> </html>

IDO LOS

1 Pรกginas HTML

UPHPll

Desarrollo web con PHP ""--------·-----------

<html> <head> <title> Mis Paginas Web <ítitle> </head> <body> <center> <A HREF=11oscar.html" TARGET="Datos"> <IMG SRC="/Fotos/Oscar.jpg" ALT="Oscar de Lean" Height=30% Width=50%> </A> <br> <A HREF="celia.html" TARGET="Datos"> <IMG SRC='·'/Fotos/celía.jpg" ALT="Celia Cruz" Height=30% Width=50%></A> <br> <A HREF="maria.html" TARGET="Datos11> <IMG SRC="/Fotos/maria.jpg" ALT="Maria Fe1ix" Height=30% Width=50%> </A> <br> </center> </body> </html>

126

Desarrollo

web con PHP "- . . .

Instrucciones En est~ documento se crean los frames donde se mostrarรกn las pรกginas Web. <Html> <Head> <Title> Mis Frames </title> </Head> <FrameSet Rows=" 15o/o, *"> <Frame src="titulo.html" Name="titulo"> <FrameSet Cols="25%, *"> <Frame src="nombres.html" Name="Nombres"> <Frame Name="Datos"> </FrameSet> </FrameSet> </Html>

128

______

.........._

____,/Capitulo

1 Pรกginas HTML

se llama

Formularios

Los formularios son herramientas muy importantes en una que permiten a los ingresar datos que sean orocesaoos por es

llPHPU

Desarrollo web con PHP "'------------------

seíecctona una tarjeta.

tngresa tu n1' de tarjeta

Credimás ¿Deseas g.n.'lbar esta tarjeta como frecuente? r""""'""""""'"""""""""""'"""""""""""''

¿Con que nombre? ,_...._.._. .- ...-... -.....,,._. . .....-.-·-~

Selecciona la operación

clave Internet (6 dígitos)

ingresa tu clave Internet usando el teclado virtual

r un Fo

lario

La sintaxis para crear un formulario es la siguiente:

<Form> </Form> Dentro de la etiqueta <Form> se debe utilizar los siguientes atributos: Action Method Enctype

En este atributo se indica la dirección electrónica a donde se enviarán y procesarán los datos que un usuario ingresa el en formulario.

130

Para los primeros ejemplos podemos escribir el nombre de cualquier Web aunque no exista porque inicialmente nos concentraremos en la creaciĂłn de los dentro de un y su procesamiento.

Este atributo es opcional y se utiliza cuando deseamos enviarÂˇ los datos

los

En un formulario se ingreso de los datos:

de controles para el

crear los

de Son los controles mĂĄs utilizados en el ingreso de los datos y permiten ingresar los datos de manera muy sencilla utilizando una lĂnea de texto. Apellidos:

Nombres: Correo:

Las cajas texto se aceptar varias lĂneas de texto

uuc:;uc;;1

definir

tal manera que puedan

crear dos

para

..........................

usuario los elementos.

hacer

Listas Desplegadas rncintr'\c En este tipo de listas los Y?A se muestran desplegados o visualizados para ser seleccionados. 010

Botón Enviar Este control llamado también permite enviar la información ingresada en el formulario al sitio Web y en la forma indicada según el valor asignado en las propiedades Action y Method.

Este control llamado también Reset permite eliminar ingresados el en el o

o limpiar los datos las modificaciones

Como se explica más adelante, usted puede cambiar el título de estos botones:

134

___________________

__../Capitulo 1 Páginas HTML

Crear Cajas de Texto Para crear de texto se se verá mas adelante, esta etiqueta tambiénnos ayuda a crear otros controles. La etiqueta Input utiliza los

atributos:

Este se para el control que desea mostrar en el formulario para el ingreso de datos. Para crear una de textos se le asignar el valor Type

= "Text"

Name un al el valor que el usuario ingresa y lo podemos utilizar como una variable. nc.v·mn·o

Las

".'.l!<:"ll'"ll"'l~l"'llo

de cuornn1n de textos llamada NomCiiente:

con una

Desarrollo

web con PHP , ..... __

El titulo que el usuario debe visualizar se puede escribir corno un texto normal dentro del formulario como se muestra en el siguiente ejemplo: <html> <body> <Form Action=MiPaginaWeb.Com Methodo=Post>

Nombre del Cliente: <Input Type=l'Text'' Name="NomCliente"> </Form> </body> </html>

En las siguientes instrucciones de despuĂŠs del mensaje para el usuario:

c1rYH'"lin

se realiza un salto de lĂnea

Methodo=Post>

<html>

Nombres · :<Br> Name='Nomf.liente''

Size=35><Br>

Distrito :<Br> · Name=rDisf'Iiente"

Size=25><Br>

Name=TejCliente''

Size=l S>

Telefono :<Br> </Form> </body> <zhtml>

de textos.

Value Este atributo se utiliza para estantecer un valor de ingreso predeterminado en una caja de texto. Las siguientes ejemplo permiten ingresar los apellidos, nombres, distrito y utilizando diferentes tamaĂąos de cajas de texto y asignan en forma predeterminada el distrito Chiclayo.

<html> <body> <Form Action=Mil'agina.Web.Com Methodo=Post> Apellidos:<Br> <Input Type=Text'' Name="ApeCliente" Size=35><Br> Nombres :<Br> Size=35><Br> <Input Type='Text" Distrito :<Br> <Input Type='Text'' Name="DisCliente" Size=25 V alue=" ChĂclayo" ><Br> Telefono :<Br> <Input Typc='Tcxt'' Name="TelCliente" Size=l5> </Form> </bodv>

138

MaxLength atributo se utiliza para la rnaxnna que el usuario puede ingresar en una caja de texto. Las siguientes instrucciones de ejemplo nombres Ruc de clientes. el

caracteres

ingresar apellidos, 1 caracteres como

<body> Apellidos:<Br> Nombres :<Br> Ruc :<Br> <Input Type='Text" </Form> </body> </html>

1 Nombres: 1

Ruc: 1

Password r-assworo es se le al en Text. Si utiliza este valor, cada uno de los caracteres que digite el usuario en la texto se por para el ingreso contraseĂąas.

Desarrollo web con Las siguientes instrucciones de ejemplo los aoeuioos y la contrase単a el cliente tener. Para la contrase単a se utiliza el valor Password. Observe que la ingresar la contrase単a no se visualizan los caracteres se digitan. <html> <body>. <For Action=MiPagina Web.Com Methodo=Post> Apellidos: <Br> <Input Type=t'Text" Name="ApeCliente" Size=35><Br> Nombres <Br> <Input Type='Text" Name=t'NomCliente'' Size=35 ><Br> Contrase単a :<Br> <Input Type=I'Password" Name="PasCliente"> </Fo1m> </body> </html>

Para crear cajas de texto texto se utiliza la etiqueta <TextArea> </TextArea> Sus atributos son los

140

Las

instrucciones de textos con

de ,...,,,..,..,.,.,,..,, .....

con una

<Html> <body> <Form Action=MiPagina Web.Com Methodo=Post> Observaciones: <Br> <Text.Area Name=t'Obs"> </TextArea> </Form> </Html> Observaciones:

mostrar en el control.

Cols Este atributo permite establecer la cantidad de columnas que se deben mostrar en el ,,,,.,..., . con una muestran un columnas caja de textos con múltiples líneas llamada Obs con 5 filas y <Html> <Form Action=MiPaginaWeb.Com Methodo=Post> Observaciones: <Br> <TextArea Name=Obs" Rows=5 Cols=25> </TextArea> </Form> </Html> 1

Las siguientes instrucciones crean una página Web con cajas de texto utilizando los atributos y valores explicados:

<Html> <Head> <Title> Registro de Clientes </Title> </Head> <body> <Hl> DATOS DEL CLIENTE </Hl> <Form Action=MiPagina Web.Com Methodo=Post> Apellidos:<Br> <Input Type='Text" Name="ApeCliente" Size~35><Br> Nombres :<Br> <Input Type="Text" Name="NomCliente" Size=35 ><Br> Distrito :<Br> <Input Type="Text" Name="DisCliente" Size=25 Value="Chiclayo"><Br> Ruc :<Br> <Input Type=Text" Name="RucCliente" MaxLength= 11 ><Br> Contraseña :<Br> <Input Type=T'assword'' Name="PasCliente"><Br> Sugerencias:<Br> <TextArea Name="SugCliente'' Rows=4 Cols=25> </TextArea> </Form> </body> </Html>

142

--------------------,._,.JI' muestra el

Capitulo 1 Páginas HTML con las

·.·

e valor

En la creación de los controles Radio Buttons también se atributos:

los si-

IPHPU

Desarrollo web con PHP "..___

Este atributo permite asignarle un nombre a cada uno de los radio. buttons que forman un grupo. Todos los Radio Buttons de un mismo grupo deben llevar el mismo nombre. Name

= "Nombre

del Grupo"

Yalue En este atributo se indica el valor que se debe asignar al nombre del grupo cuando el usuario seleccione un radio button. Cada uno de los radio buttons debe tener un valor diferente. Value = "Valor del Radio Button" Con los atributos anteriores, la sintaxis para crear un radio button es la siguiente: <Input Type="Radio" Name="Nombre" Value="Valor">Título El Título es el texto que debe acompañar a cada Radio Button, Las siguientes instrucciones de ejemplo permiten ingresar los apellidos, nombres y el turno de los alumnos: <html> <body> <Form Action=MiPagina Web.Com .Methodo=Post> Apellidos: <Br> <Input Type="Text" N ame=" ApeAlumno "><Br> Nombres :<Br> <Input Type=Text" Name="NomAlumno"><Br> Turno: <Br> <Input Type="Radio" Name=Turno" Value="M"> Mañana<Br> <Input Type=t'Radio" Name=v'Tumo'' Value="T"> Tarde <Br> <Input Type=t'Radio" Name='Turno'' Value='N"> Noche <Br> </Form> · </body> </html> 144

___________________

_,,/Capitulo

Páginas HTML

Turno:

En el ejemplo si el usuario setecciona el Turno tendrá el T.

el nombre del

Las siguientes instrucciones de ejemplo permiten ingresar los apellidos, sexo y tumo de los alumnos. que cada Radio Buttons tiene nombres nit,or.c~nt.ac-·

<Form Action=MiPaginaWeb.Com Methodo=Post> Apellidos:<Br> Type="Text" Name=''ApeAlumno"><Br> Nombres :<Br> Name=t'Sexo" <Input Type=l'Radio'' Name='Sexo'' Value=t'Mujer"> Turno: <Br> Type=l'Radio'' Name=lTumo" Value=í'M''> Name='Turno''

</html>

145

IPHPI

Desarrollo web con PHP "------------------

Checked Este atributo se utiliza para seleccionar en forma predeterminada button.

un radio

Las siguientes instrucciones permiten el ingreso de los datos anteriores con el sexo masculino y turno tarde seleccionados en forma predeterminada: <html> <body> <Form Action=MiPaginaWeb.Com Methodo=Post> Apellidos:<Br><Input Type=Text" Name="ApeAlumno"><Br> Nombres :<Br><Input Type='Text" Name="NomAlumno"><Br> Sexo: <Br> <Input Type='Radio'' Narne=l'Sexo" Value=l'Hornbre" Checked> Masculino <InputType=t'Radio" Name=t'Sexo" Value='Mujer''> Femenino <Br> Turno: <Br> <Input Type="Radio" Name="Turno" Value="M"> MaĂąana<Br> <Input Type="Radio" Name=Tumo'' Value="T" Checked> Tarde<Br> <Input Type=t'Radio" Name="Turno" Value=l'N''> Noche <Br> </Form> </body> </html>

146

Los Check Box se diferencian de los Radio Button porque permiten que el ""º ·Ci,..,.,,....,.,., hasta todos 1

Para crear Check Boxs se el valor CheckBox en el atributo la como se muestra en el

En la creación de los controles Check Boxs también se utilizan los siguientes

Este atributo permite asignarle un nombre a cada uno de los Check Box que Box de un llevar un nombre diferente.

Name = "Nombre

En este atributo se indica el valor Box el lo <'." .....

1"""""'"'''"''"''""

se debe asignar al nombre del Check uno los Box tener

Desarrollo web con PHP "------------------el mismo valor para

procesarlo

cuando se envíe a un sitio Web.

="Valor del Con los atributos anteriores, la sintaxis para crear un Check Box es la siguiente: <Input Type="CheckBox" Name="Nombre" Value="Valor"> Título El Título es el texto que debe acompañar a Las siguientes instrucciones de ejemplo nombres y el deporte o deportes que

Check Box.

noi·rn•·tan

los apellidos,

un estudiante:

<html> <body> <Form Action=MiPaginaWeb.Com Methodo=Post> Apellidos: <Br><Input Type=t'Text" N ame=" ApeAlumno "><Br> Nombres :<Br><Input Name="NomAlumno"><Br> Deporte: <Br> <Input Type="CheckBox" Name=t'Voley" Value=l'Si''> Voley <Br> <Input Type="CheckBox" Name=t'Futbol" Value=I'Si''> Futbol<Br> <Input Type=t'Checklsox'' Name=t'Box" Value="Si"> Box<Br> <Input Type="CheckBox" Name="Karate'' Value="Si"> Karate<Br> </Fonn> </body> </html>

____

...........

_____,/Capitulo

1 Páginas HTM[

si el usuario Fútbol, el nombre Futbol el nombre de cada se

Este atributo se utiliza seleccionar en forma predeterminada Check Box. siguientes instrucciones de ejemplo permiten ingresar los apellidos, y el deporte deportes que un estudiante. En forma se Futbol y Karate.

<Form Action=MiPagínaWeb.Com Apellidos:<Br><Input Type=t'Text'' Name=--=''ApeAlumno"><Br> Nombres Type=Text" Name="NomAlumno"><Br> .L•-'-"''H'-'./'UV

<Input Type="CheckBox" Name='Box'' Value=l'Si''> <Input Type="Check.Box" Name="Karate" Value="Si" Checked> Karate<Br>

Las listas desplegables son aquellas donde el usuario puede seleccionar cualquiera de los elementos almacenados pero antes debe hacer clic en la flecha hacia abajo para desplegar los elementos disponibles. Para crear una lista desplegable se utiliza la etiqueta Select como se muestra en la siguiente sintaxis:

<Select> </Select> Dentro de la etiqueta Select se utilizan los siguientes atributos:

Name Este atributo permite asignarle un nombre a la Lista Desplegable

<Select Name="Nombre de la Lista"> </Select> Cada uno de los elementos u opciones que el usuario puede seleccionar de la lista se crean con la etiqueta

<Optlon Value="Valor"> Titulo El valor es aquel que tomarĂĄ el nombre de la lista cuando se selecciona el elemento de la lista. El Titulo es el texto que acompaĂąa a cada Elemento u opciĂłn de la lista. Las siguientes instrucciones de ejemplo permiten ingresar los apellidos, nombres y la especialidad de un estudiante. Para la especialidad se utiliza una 150

<html> <Form Action=Mil'agina Web.Com Methodo=Post> Apellidos:<Br><Input Type='Text'' <:1m.::•=" 1'1

<Select N ame=t'Especialidad"> <Option Value=YAl)"> Administración

Cuando el usuario hace clic en elementos:

flecha hacia oenaro

se muestra

Si el usuario selecciona Administración, el nombre esoecancao tendrá el valor Como se puede observar, en forma predeterminada siempre se selecciona el primer elemento de la lista. t:'OIOr>I"'•"'''"'~'"

en su etiqueta Option.

otro

Ol~>l'V'll'.:t.l"'IT'A

n 1s1

llPHPU

Desarrollo web con PHP '---------------<Option Value="Valor'' Selected

> Titulo

<html> <body> <Form Action=MiPaginaWeb.Com Methodo=Post> Apellidos:<Br><Input Type="Text" Name="ApeAlumno"><Br> Nombres :<Br><Input Type="Text" Name="NomAlumno"><Br> Especilidad: <Br> <Select Name=t'fispecialidad''> <Option Value=t'Cl''> Computacion <Option Value="CO"> Contabilidad <Option Value="AD" Selected> Administracion <Option Value="DE"> Derecho </Select> </Forro> </body> </html>

Crear listas desplegadas Las listas desplegadas son aquellas donde el usuario puede seleccionar cualquiera de los elementos almacenados sin necesidad de hacer clic en la flecha hacia abajo como en las listas desplegables porque los elementos ya se muestran desplegados. Para crear una lista desplegable tambiĂŠn se utiliza la etiqueta Select. Dentro la etiqueta Select se utilizan los siguientes atributos:

152

---------------------'/Capitulo 1 Páginas HTMl

atributo es el desplegadas. cuantos los ,..,.,,..,......,,..,,,..'I",..,,... vertical.

11"'11"1111"'".U"

m¡,~nT'I"\

OIOmiC•r'\'l'l'"\C'

,,,....,...,,....,.,,,..,. de

=•=,,,,.,,,..,.

n.~rn..,1'!",e,,.., 1r1nr•t:i.C'"'-r

y la un estucrame una lista desplegada con 3 elementos:

153

llPHPll

Desarrollo web con PHP "---------------

<html> <body> <Form Action=MiPaginaWeb.Com Methodo=Post> Apellidos:<Br><Input Type="Text" Name="ApeAlumno"><Br> Nombres :<Br><Input Type="Text"Name="NomAlumno"><Br> Especilidad: <Br> <Select Name="Especialidad" Size=3> <Option Value=l'Cl''> Computacion <Option Value="CO"> Contabilidad <Option Value="AD"> Administracion <Option Value="DE"> Derecho </Select> </Form> </body> </html>

Apellidos:

Crear el botón Submit Como ya se explicó, el botón Submit llamado también Enviar permite enviar la información ingresada en el formulario hacia un sitio Web.

Para crear un botón Enviar debe asignar a la propiedad Type de la etiqueta Input el valor Submit. input 154

un <html>

<zhtml>

Desarrollo

se este "'"''"''11'1'"•" ,...,,,.,,.1'"'11'~•+,,.,. en el formulario o cancelar las modificaciones reanzaoas. 1

crear un botón Reset el valor Reset. siguientes instrucciones muestran el formulario

~n1·0r11 ...r

con un botón

<html> <body> <Form Action=Mil'agina Web.Com Methodo=Post> Apellidos:<Br><Input Type=Text" Name="ApeAlumno"><Br> Nombres :<Br><Input Type='Text" N ame="NomAlumno "><Br> Especilidad: <Br> <Select Name="Especialidad" Size=3> <Option Value="CI"> Computacion <Option Value="CO"> Contabilidad <Option Value="AD"> Administracion <Option Value="DE"> Derecho </Select> <Br><Br> <Input Type=Submit> <Input Type=Reset> </Form> </body> </html>

156

utilizar los siguientes atribu-

Name

orc>o1e~aa1a se botรณn Enviar. Ejemplo:

cuando se desea ,.,, ...,,.....,.n,,"'.11,.

En el siguiente ejemplo se ha creado un formulario para ingresarlos ,..11c nti:::~c en texto y sin usar tablas: 1

<Html> <Head> <Title> Registro de Clientes </Title> </Head> <body> <Hl> DATOS DEL CLIENTE </Hl> <Form Action=MiPaginaWeb.Com Methodo=Post> Apellidos:<Br> <Input Type="Text" Name="ApeCliente" $ize=35><Br> Nombres :<Br> <Input Type=Text" Name="NomCliente" Size=35 ><Br> Distrito :<Br> <Input Type="Text" Name="DisCliente" Size=25 Value="Chiclayo"><Br> Ruc :<Br> <Input Type=Text" Name="RucCliente" MaxLength=l l><Br> Contraseña :<Br> <Input Type="Password" Name="PasClienteº><Br> Sugerencias:<Br> <TextArea Name="SugCliente" Rows=4 Cols=25> </TextArea> </Form> </body> </Html> El formulario que se crea con las instrucciones anteriores se mostrará de la siguiente manera en la página Web:

158

<Html> <Head> <Title> Registro de Clientes </Title> </Head> <body> <Hl> DATOS DEL CLIENTE </Hl> <Form Action=MiPaginaWeb.Com Methodo=Post> Apellidos: <Input Type=Text" Name="ApeCliente" Size=35><Br> Nombres : <Input Type="Text" Name="NomCliente" Size=35 ><Br> Distrito: <Input Type=Text'' Name="DisCliente" Size=25 Value="Chiclayo"><Br> Ruc: <Input Type="Text" Name="RucCliente" MaxLength=l l><Br> Contraseña : <Input Type=T'assword" Name="PasCliente"><Br> Sugerencias: <TextArea Name="SugCliente" Rows=4 Cols=25> </TextArea> <Br><Br> <Input Type=Submit> <Input Type=Reset> </Form> </body> </Html> El resultado de las instrucciones anteriores será el siguiente:

160

y en la

texto.

Utilizando la etiqueta Center se puede centrar todo el formulario Web como se muestra en el siguiente ejemplo.

Instrucciones para crear el formulario anterior: <Html> <Head> <Title> Registro de Clientes

162

en la pรกgina

<íTr>

<Tr> Narne=Tiisüliente" </Tr>

Td> <rfr> <Tr> <Td>Contraseña :</Td> </Tr> <Td>Sugerencias:</Td>

</Tr> <Tr 63

<Td Colspan=2><1nput Type=Submit> <Input Type=Reset></Td> </Tr> </Form> </Center> </body> </Html> Como se puede observar, los usuarios que utilizan el formulario no visualizan la tabla porque ha sido creada sin un borde. <Table> </Table>

Ejemplo Nยบ 131 Las siguientes instrucciones muestran un formulario en el centro de la pรกgina Web para ingresar los apellidos, nombres y turno de los alumnos utilizando una tabla:

DATOS DEL ALUl\li~O

164

Instrucciones <Html> <Head> <Title> Registro de Alumnos <!Tit!e>

<Center> <Form Act1m1=1\lllt-''aama1WE~b. Crn Methodo=Post> <Table> <Tr> <Th corsean= DEL </Tr> <Tr> <Td> Apellidos </Td> <Td> Type=Text" Name="ApeAlumno"> </Td> </Tr> <Tr> <Td> Nombres </Td> <Td> Type='Text" Name="NomAlumno"> </Td> </Tr> <Tr> <Td></Td> <Td> Turno <Sr> Name="Turno" Value="M"> MaÃ±ana<Br> <Input Name=Turno" value='T"> Tarde=Br> <Input Type="Radio" Name="Turno" Value="N"> Noche<Br> </Td> ' </Tr> <Tr ALIGN=CENTER> <T d Colspan=3> <Input Type="SubMit" Value="Registrar"> <Input Value="Cancelar"> </Td> </Tr> </Table> </Form> <Center> </Body> </Html> 1

165

llPHPll

Desarrollo web con PHP "'-----------------

Ejemplo Nยบ 132 Las siguientes instrucciones muestran un formulario en el centro de la pรกgina Web para ingresar los apellidos, nombres y turno de los alumnos utilizando una tabla:

Turno

l\โ ขfaiimla Tarde

Noche

166

<Title> Alumnos </Head> <Body>

<Table> <Tr> <Th vOl!SOé::tn=

</Tr> <Tr> <Td> <Td> </Tr> <Tr>

l\Jr.mhroc

</Td> </Tr> <Td> <Input Type="Radio" Narne=Turno" Value="M"> Mañana<Br> <Input <fTd> <Td>

167

UPHPll

Desarrollo web con PHP '----------------

Deporte: <Br> <Input Type="CheckBox" Name="Voley" Value="Si"> Voley <Br> <Input Type="CheckBox" Name="Futbol" Value="Si"> Futbol<Br> <Input Type="CheckBox" Name="Box" Value="Si"> Box<Br> <!Td> <!Tr> <Tr ALIGN=CENTER> <Td Colspan=2>

<Br> <Input Type= SubMit" Value="Registrar"> <Input Type="Reset" Value="Cancelar"> 11

<!Td> </Tr> </Table> </Form> <Center> </Body> </Html> El procesamiento de un formulario se exonca en usando PHP.

168

siguientes capÃtulos