COMIENZO Laboratorios Guia de HTML

Laboratorio practico de Desarrollo de Pagina WEB
Ejemplo 1: Cabecera
<html>
<head> </head>
<body>
Bienvenidos al curso de HTML
</body>
</html>
Ejemplo 2: Aplicando Titulo a la Ventana.

<html>
<head> <title>Curso de HTML</title> </head>
<body>
</body>
</html>
Ejemplo 3: Aplicando Color

<html>
<body bgcolor=”#C0D9D9” text=”#000000”>
</body>
</html>
Ejemplo 4: Aplicando signo de grados.

<html>
<body bgcolor=”#C0D9D9” text=”#000000”>
Cuando la temperatura es menor a 15°c hace bastante frío.
Este es un ejemplo de página WEB :)
</body>
</html>
Ejemplo 5: Aplicando regla horizontal y mas atributos.

<html>
<body bgcolor="#C0D9D9" text="#000000">
Bienvenidos al curso de HTML<br>
<hr align=center width=50%><br>
Cuando la temperatura es menor a 15°c hace
bastante frío.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de página WEB :)<br>
</body>
</html>
Ejemplo 6: Encabezados.
<html>
<h1 align="center">
Bienvenidos al curso de HTML</h1><br>
<h2>Bienvenidos</h2>
bastante frío.<br>
Este es un ejemplo de página WEB :)<br>
</body>
</html>
Ejemplo 7: Formatos y Atributos de Textos.

<html>
<h1 align="center">
Bienvenidos al curso de HTML</h1><br>
bastante frío.<br>
Este es un ejemplo de página WEB <b><i>:)</i></b><br>
<b>Este texto esta con negrillas</b><br>
<u>Este texto esta con subrayado</u><br>
<i>Este texto esta con inclinación itálica</i><br>
Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>
</body>
</html>
Ejemplo 8: Tipos de Fuentes.

<html>
<h1 align="center">
Bienvenidos al curso de HTML</h1> <br>
bastante frío.<br>
Este es un ejemplo de página WEB <b><i>:)</i></b><br>
<b>Este texto esta con negrillas</b><br>
<u>Este texto esta con subrayado</u><br>
<i>Este texto esta con inclinación itálica</i><br>
Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>
<font color="red"><font size=7>B</font>o</font><font color="yellow">
li</font><font color="green">via</font><br>
</body>
</html>
Ejemplo 9: Imagenes.
<html>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Información General</h2>
Este curso muestra los conceptos básicos del uso de
etiquetas e instrucciones en la elaboración de
documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br>
<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center>
<br>
Es muy importante saber ubicar los gráficos y combinar
de buena manera los colores para brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una página WEB es muy importante, pues provee a nuestro
trabajo una ventana al mundo.<br>
</body>
</html>
Ejemplo 10: Tablas

<html>
<center><h1>
<hr width=50%><br>
<h2>Información General</h2>
Este curso muestra los conceptos básicos del uso de
etiquetas e instrucciones en la elaboración de
documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br>
<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center>
<br>
Es muy importante saber ubicar los gráficos y combinar
de buena manera los colores para brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una página WEB es muy importante, pues provee a nuestro
trabajo una ventana al mundo.<br>
<br><center>
<table width=80% align=center border=3>
<tr><th colspan=3>Directorio Telefónico</th></tr>
<tr align=center>
<td width=40% bgcolor="#C0C0C0">
Nombre
</td>
Teléfono
</td>
E-Mail
</td>
</tr>
<tr>
<td>
José Rodríguez
</td>
<td>
223454
</td>
<td>jose@prueba.com.bo</td>
</tr>
<tr>
<td>
Carolina Nuñez
</td>
<td>
453444
</td>
<td>carolina@prueba.com.bo</td>
</tr>
</table>
<br></center>
</body>
</html>
Ejemplo 11: Viñetas

<html>
<center><h1>
<hr width=50%><br>
<h2>Debemos a comprar</h2><br>
<ul>
<li>Camisas para José</li>
<li>Loción para Daniel</li>
</ul><br>
<h2>Estudiar para mañana</h2><br>
<ol>
<li type=a>Geometría</li>
<li>ciencias Sociales</li>
</ol><br>
<h2>Actividades de la semana</h2><br>
<ol>
<li type=i>Asistir a la Universidad</li>
<li>Comprar Disco</li>
<li>Llevar el auto al mecánico</li>
</ol><br>
<h1>Objetivos</h1>
<ul>El uso de estas etiquetas también puede ayudar a mover
el texto en base a tabulaciones o sangrías de texto, para
diferenciar parrafos o textos de los encabezamientos.
</ul>
</body>
</html>
Ejemplo 12: Hipervinculos
<html>
<head> <title>Página de enlaces</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"
link="#000080" vlink="magenta" alink="black">
<center><h1>
<a name="tope"></a>
Enlaces</h1><br>
<img src="foto.jpg" alt="Foto de Claudia"><br><br>
<a href="index.html">Página Principal
o
Página Uno</a><br>
<a href="pag2.html">Página Dos</a><br>
<a href="pag3.html">Página Tres</a><br>
<br>
<a href="http://www.bolivia-internet.com/">Bolivia en Internet</a><br>
<a href="ftp://ftp.microsoft.com/pub/">FTP de Microsoft</a><br>
<a href="mailto:cae@bolivia-internet.com">Envía comentarios
sobre este manual por E-Mail</a><br>
<br><br>
<a href="#tope">De vuelta arriba</a>
</center>
</body>
</html>
Ejemplo 13: Frames.

<html>
<head> <title>Página de frames</title> </head>
<frameset COLS="20%,*" frameborder=0 framespacing=0 border=0>
<frame name="izquierda" src="pag4.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frameset ROWS="30%,*" frameborder=0 framespacing=0 border=0>
<frame name="superior" src="pag2.html" marginwidth="0"
<frame name="principal" src="pag3.html" marginwidth="0"
</frameset>
</frameset>
<noframes>
<center>
Su navegador no puede desplegar frames.
</center>
</noframes>
</html>
Ejemplo 14: Frames, imagens.

<html>
<head> <title>Página de enlaces</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"
link="#000080" vlink="magenta" alink="black">
<center><h1>
<a name="tope"></a>
Enlaces</h1><br>
<img src="foto.jpg" alt="Foto de Claudia"><br><br>
<a href="index.html" target="principal">Página Principal
o
Página Uno</a><br>
<a href="pag2.html" target="principal">Página Dos</a><br>
<a href="pag3.html" target="principal">Página Tres</a><br>
<br>
<a href="http://www.bolivia-internet.com/" target="principal">Bolivia
en Internet</a><br>
<a href="ftp://ftp.microsoft.com/pub/" target="principal">FTP de
Microsoft</a><br>
<a href="mailto:cae@bolivia-internet.com">Envía comentarios
sobre este manual por E-Mail</a><br>
<br><br>
<a href="#tope">De vuelta arriba</a>
</center>
</body>
</html>
Ejemplo 15 pagina web “ La Chistera “
<html>
<head>
<title>
La chistera - Humor y magia
</title>
</head>
<body>
<center>
<h1>
<img src="imagenes/chistera.gif">
LA CHISTERA - Humor y magia
</h1>
</center>
<h2>
Quienes somos
</h2>
<p>La chistera es un grupo de artistas
dedicados al mundo de la magia, la comedia y el espectáculo.
Entre nosotros podrás encontrar humoristas, magos, showmen,
etc.</p>
<p>Si usted o su empresa necesita crear
un espectáculo y no quiere quedar decepcionado no dude en
escribirnos AHORA MISMO. Nuestra dirección es:</p>
<center>
chistera@chistera.es
</center>
<h2>
Un ejemplo de nuestro repertorio
</h2>
<p>Cada día le mostramos ejemplos
distintos de nuestro amplísimo y novedoso repertorio de chistes:
<blockquote>
Era un tío tan gafe, tan gafe, que se sentó en un pajar y se
clavó la aguja.
</blockquote>
<blockquote>
Doctor, Doctor, ¿cuanto tiempo me queda de vida?
<br>
5... 4... 3... 2...
</blockquote>
</p>
<h2>
Enlaces a páginas relacionadas
</h2>
<p>
<a href="http://www.ciudadfutura.com/areirse
">¡A Reírse Toca, ¡Ja, ja, ja!
</a>: Si te aburres, estás deprimido,
o simplemente quieres reír, pásate por mi página y disfrutarás
de los más de 110 chistes que tiene. ¡Con posibilidad de enviar
tú el tuyo!
<p>
<a href=http://www.geocities.com/BourbonStreet/Delta/3543/ >1er Concurso de feos por
Internet</a>: 1er Concurso de Feos por
Internet participa y gana tu premio. </p>
<p>
<a
href="http://www.geocities.com/Hollywood/8620">Albert
Grau's Web</a>
: En esta pagina encontrarás un listado de dichos
populares, y las 50 cosas que se deberían cambiar para mejorar
la vida terrícola de nuestro querido planeta Tierra
</p>
<hr size="5">
<address>
Página creada por el equipo de programación Web de LA CHISTERA
<br> Ultima actualización: 32-12-1997 ;-)
</address>
</body>
</html>
Ejemplo 16 Sitio web
 como es la estructura general de una página: para crear esta estructura usábamos las etiquetas HTML,
HEAD y BODY.
 Como dar título a la página con la etiqueta TITLE.
 Como crear encabezados con las etiquetas H1, H2, H3, H4, H5, H6.
Como introducir párrafos de texto normal con la etiqueta P y alinearlos a nuestro gusto.
 Como crear otros párrafos con BLOCKQUOTE y ADDRESS, y en este mismo capítulo párrafos
preformateados con PRE.
 Como dividir el texto con saltos de línea o líneas horizontales de distintos grosores y tamaños.
 También hemos aprendido a insertar en nuestras páginas los dos elementos que más fama han dado
al World Wide Web: los enlaces hipertexto y las imágenes.
 Vimos también como dar distintos formatos al exto, t tanto formatos lógicos (EM, STRONG, CODE,
etc.) como físicos (B, I, TT, BIG, SMALL, SUB, SUP, etc.).
 Y por último en este breve resumen hemos de mencionar la creación, recién aprendida de diversos
tipos de listas (UL, OL, DL, MENU y DIR)
La plantilla estará compuesta por el logo, el letrero de "Los Alpes Agencia de viajes" y de una firma de
los creadores de la página. El código de esta plantilla es: <HTML>
<HEAD>
<TITLE>
Agencia de viajes LOS ALPES
</TITLE>
</HEAD>
<BODY>
<A NAME="arriba">
<CENTER>
<IMG SRC="img/logo.gif">
<IMG SRC="img/losalpes.gif">
</CENTER>
Contenido de la página
<HR>
<ADDRESS>
Web realizado por el equipo de
<FONT COLOR="#800000">
Conquista la web
</FONT>
<BR>
Última actualización: Enero de 2001
</ADDRESS>
</BODY>
</HTML>
El siguiente paso es programar la presentación, esta consta de un eslogan, una lista de enlaces a las
secciones de la página y dos imágenes atractivas, todo ello centrado:
<CENTER>
<UL>
<LI>
<A HREF="mes.html">
Nuestras principales OFERTAS del mes
</A>
<LI>
<A HREF="#alpes">
LOS ALPES - 20 años a su servicio
</A>
<LI>
<A HREF="#medida">
Viajes a su medida
</A>
<LI>
<A HREF="#donde">
Dónde encontrarnos
</A>
</UL>
<IMG SRC="img/ski.gif">
<IMG SRC="img/montanas.gif">
</CENTER>
HR (con WIDTH y SIZE), H3, BIG, STRONG, BLOCKQUOTE, CITE,

P (ALIGN), OL y PRE.
<A HREF="#Andorra">
ANDORRA
</A>

<A HREF="#Orlando">
ORLANDO
</A>
<P ALIGN="center">
...
</P>
Ejemplo 17 tabla
<HTML>
<HEAD>
<TITLE>Practica 3</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION>SuperOFERTA viaje a Nueva Zelanda</CAPTION>
... Aquí iremos insertando el resto del código ...
</TABLE>
</BODY>
</HTML>
Crear la primera fila
<TR><TH ROWSPAN=2 COLSPAN=2></TH>
Las celdas con dos columnas

<TR>
<TH ROWSPAN=2 COLSPAN=2></TH>
<TH COLSPAN=2>Hoteles 3 estrellas</TH>
<TH ROWSPAN=2>Hoteles 4 estrellas</TH>
</TR>
Agregando la Segundo fila
<TR>
<TH>Sólo alojamiento</TH>
<TH>Pensión completa</TH>
</TR>
Expandiendo a dos filas mas
<TR>
<TH ROWSPAN="2">1 semana</TH>
<TH>Avión turista</TH>
<TD>700 USD</TD>
<TD>1000 USD</TD>
<TD ROWSPAN="2" ALIGN="center">1500 USD</TD>
</TR>
Expandiendo dos mas
<TR>
<TH>Avión preferente</TH>
<TD>850 USD</TD>
<TD>1150 USD</TD>
</TR>
Ultima fila
<TR>
<TH COLSPAN="2">2 semanas</TH>
<TD>1300 USD</TD>
<TD>1850 USD</TD>
<TD>2600 USD</TD>
</TR>
Dando acabados
<CAPTION>
<FONT SIZE="+2" COLOR="#FF0000">
SuperOFERTA viaje a Nueva Zelanda
</FONT>
</CAPTION>
Centramos las celdas

<TD ALIGN="center">700 USD</TD>
Escrito la tabla completa será
<TABLE CELLSPACING="2" CELLPADDING="2" BORDER="1">

<CAPTION><FONT SIZE="+2" COLOR="#FF0000">SuperOFERTA viaje a Nueva
Zelanda</FONT></CAPTION>
<TR><TH ROWSPAN="2" COLSPAN="2"></TH>
<TH COLSPAN="2">Hoteles 3 estrellas</TH>
<TH ROWSPAN="2">Hoteles 4 estrellas</TH>
</TR>
<TR><TH>Sólo alojamiento</TH>
<TH>Pensión completa</TH>
</TR>
<TR><TH ROWSPAN="2">1 semana</TH>
<TH>Avión turista</TH>
<ALIGN="center">700 USD</TD>
<TD ROWSPAN="2" ALIGN="center">1500 USD</TD>
</TR>
<TR><TH>Avión preferente</TH>
</TR>
<TR><TH COLSPAN="2">2 semanas</TH>
</TR>
</TABLE>
Realizar el código completo
Ejemplo 18 frames
<HTML>
<HEAD>
<TITLE>LOS ALPES - Encabezado</TITLE>
<BASE TARGET="principal">
</HEAD>
<BODY LINK="#FED354" VLINK="#EDB301" ALINK="#FFFF00"
BGCOLOR="#335142" TEXT="#71AC84"
BACKGROUND="img/tratilea.jpg">
<A NAME="arriba"></A>
<CENTER>
<TABLE ALIGN="center" border="0">
<TR>
<TD><IMG SRC="img/logo.gif" WIDTH=90 HEIGHT=99 BORDER=0
ALT="[LOGO]"></TD>
<TD><IMG SRC="img/losalpes.gif" WIDTH=440
HEIGHT=99 BORDER=0 ALT="LOS ALPES - Agencia de
Viajes"></TD>
</TR>
<TR>
<TD COLSPAN="2">
<A HREF="main.htm"><IMG SRC="img/boton0.jpg"
WIDTH=110 HEIGHT=48 BORDER=0 ALT="Página
principal"></A>
<A HREF="medida.htm"><IMG SRC="img/boton1.jpg"
WIDTH=136 HEIGHT=48 BORDER=0 ALT="Viajes a su
medida"></A>
<A HREF="mes.htm"><IMG SRC="img/boton2.jpg"
WIDTH=136 HEIGHT=48 BORDER=0 ALT="Ofertas del Mes"></A>
<A HREF="superofe.htm"><IMG SRC="img/boton3.jpg"
WIDTH=136 HEIGHT=48 BORDER=0 ALT="La
superOFERTA"></A></TD>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Ejemplo 18 parte del formulario

<FORM>
<P>Nombre completo:
<INPUT TYPE="text"
NAME="nombre"
SIZE="30">
<P>Dirección:
<INPUT TYPE="text"
NAME="direccion"
SIZE="50">
<P>Ciudad:
<INPUT TYPE="text"
NAME="ciudad"
SIZE="20">
Código Postal:
<INPUT TYPE="text"
NAME="c.p."
SIZE="6"
MAXLENGTH="5">
<P>Teléfono:
<INPUT TYPE="text"
NAME="telefono"
SIZE="10"
MAXLENGTH="9">
<P>Fax:
<INPUT TYPE="text"
NAME="FAX"
SIZE="10"
MAXLENGTH="9">
<P>Email:
<INPUT TYPE="text"
NAME="email"
SIZE="30">
<P>Catálogo:
<SELECT>
<OPTION VALUE="nacional">
Nacional
<OPTION VALUE="internacional" SELECTED>

Internacional
<OPTION VALUE="completo">
Completo
</SELECT>
<P>
<INPUT TYPE="image"
BORDER="0"
SRC="img/enviar.jpg"
VALUE="Enviar">
</FORM>
EJERCICIOS DE FORMULARIOS:
<HTML> anonimo
<HEAD> Nombre :
<TITLE>MI PRIMERA PAGINA WEB</TITLE> perez
Apellidos :
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<FORM ACTION="mailto:jluis@upv.es" METHOD="POST"
NAME="primero">
Nombre :
<INPUT TYPE="text" SIZE="20" MAXLENGTH="20" NAME="nombre"
VALUE="anonimo">
Apellidos:
<INPUT TYPE="text" SIZE="20" MAXLENGTH="20" NAME="apellidos">
</form>
</BODY>
</HTML>
form1.html
<FORM ACTION="mailto:jluis@upv.es" METHOD="POST" NAME="primero"> pepito
<BR> Nombre :
Nombre: perez
Apellidos :
<INPUT TYPE="text" SIZE="20" MAXLENGTH="20" MAME="nombre">
****
Apellidos: Clave :
<INPUT TYPE="text" SIZE="20" MAXLENGTH="20" NAME="apellidos">
<P>Clave:
<INPUT TYPE="password" SIZE="8" MAXLENGTH="8" NAME="contraseña">
</FORM>
form2.html
<p> pepito
Has utilizado alguna vez el sistema operativo LINUX. Nombre :
<br> perez
Apellidos :
SI
****
<input type="radio" checked name="LINUX" value="SI"> Clave :
NO Que sistema operativo conoces:
<input type="radio" name="LINUX" value="NO"
<p> Windows
<br>
Macintosh
<div align=center>
<INPUT TYPE="submit" VALUE="Enviar formulario"> UNIX
Has utilizado alguna vez el sistema
operativo LINUX.
SI NO
form3.html
En que mesa estas sentado: Idem que antes + Enviar
<BR> En que mesa estas sentado:
<INPUT TYPE="image" NAME="plano" SRC="imagen1.gif"
align="bottom" border="5" width="569" height="163">
</FORM>
form4.html
<INPUT TYPE="submit" VALUE="Enviar formulario"> pedro
<INPUT TyPE="reset" VALUE="Limpiar el formulario"> Nombre:
</form> guerra
Apellidos:
</BODY>
****
</HTML> Clave:
Enviar Limpiar
form5.html
<FORM ACTION="mailto:jluis@upv.es" FORD
METHOD="POST" NAME="primero"> SEAT
<SELECT NAME="ciudades"> NISSAN
OPEL
<OPTION>VALENCIA
RENAULT
<OPTION>MURCIA
<OPTION>CASTELLON Enviar forniulario Limpiar el formulario
<OPTION>ZARAGOZA
</SELECT>
<SELECT NAME="coches" MULTIPLE SIZE="5">
<OPTION>FORD
<OPTION>SEAT
<OPTION>NISSAN
<OPTION>OPEL
<OPTION>RENAULT
<OPTION>PEUGEOT
<OPTION>FIAT
</SELECT>
<P>
<INPUT TYPE="submit" VALUE="Enviar forniulario">
<INPUT TYPE="reset" VALUE="Limpiar el formulario">
</form> form6.html
</BODY>
</HTML>
<FORM ACTION="mailto:jluis@ upv.es" METHOD="POST"
NAME="primero">
<TEXTAREA NAME=" comentarios" ROWS="5"
COLS="20"></textarea>
<P>
<INPUT TYPE="submit" VALUE="Enviar">
<INPUT TYPE="reset" VALUE="Limpiar"> Enviar Limpiar
</FORM> </BODY></HTML>
form7.html
Nombre: Apellidos:
Clave:
Que sistema operativo conoces:
Windows Macintosh UNIX
Has utilizado alguna vez el sistema operativo LINUX.
SI NO
Enviar Limpiar
form8.html
Encuesta sobre conocimientos informáticos.
1.- Que sistema operativo utilizas:
Windows
97
98
Macintosh
UNIX
Ninguno
2.- Que procesador de textos utilizas con más frecuencia,
2.1.- Windows
Wordpad
Bloc de notas
Word
95
97
Wordperfect
Ninguno
2.2.- MS-DOS
Edit
Word
Ninguno
Código de la encuesta:
<HTML>
<HEAD>
<TITLE>MI PRIMERA PAGINA WEB</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<FORM ACTION="mailto:anaserigo@terra.es" METHOD="POST"
NAME="primero">
<DL>
<DT><FONT SIZE="+2"><B>Encuesta sobre conocimientos
informáticos.</B></FONT>
<DL>1.- Que sistema operativo utilizas:
<DD>Windows<INPUT TYPE="checkbox" NAME="Windows"
VALUE="Win"></DD>
<DL>
<DL>
<DT>
<DD><input type="radio" checked name="Vl" value="97">97</DD>
<DD><input type="radio" name="Vl" value="98">98</DD>
</dl>
</DL>
<DD>Macintosh<INPUT TYPE="checkbox" CHECKED NAME="Macintosh"
VALUE="Mac"></DD>
<DD>UNIX<INPUT TYPE="checkbox" NAME="UNIX" VALUE="UNIX"></DD>
<DD>Ninguno<input type="checkbox" NAME="ninguno"
value="no"></DD>
<DT>2.- Que procesador de textos utilizas con más
frecuencia,</DT>
<DL>
<DT>2.1.- Windows
<DL>
<DD>Wordpad<INPUT TYPE="checkbox" NAME="Wordpad"

form10.html
Miscelánea:
Tu Nombre: Tu Clave:
Archivos a Enviar: Manual de Html Programa Mapthis Archivo de Ayuda
Tu Edad : Menos de 20 años Entre 20 y 40 años Mas de 40 años

pagina personal
Como encontraste mi página :
Tus Comentarios:
Enviar Borrar
código:
<head>
<TITLE>mi Página</TITLE>
</HEAD>
<body>
<FORM action = "mailto:jluis@upv.es" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Clave: <INPUT type = password name = clave size = 8 >
<P>
Archivos a Enviar:
<INPUT type = checkbox name = archivo value = "Manual" > Manual de Html
<INPUT type = checkbox name = archivo value ="Mapthis" > Programa Mapthis
<INPUT type = checkbox name = archivo value ="Help" > Archivo de Ayuda
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 años
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años
<INPUT type = radio name = edad value = "+40" > Mas de 40 años
<P>
<INPUT type = hidden name = lugar value = "pagina personal" >
Como encontraste mi página :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Por el buscador Ole
<OPTION>Por el buscador Yahoo
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA>
<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>
</BODY>
</HTML>
form11.html
Teclea tu nombre y apellidos:
Elige un tema:
ciencia arte
literatura
Marca tus aficiones:
deporte
música
lectura
pesca
Introduce la contraseña:
Enviar datos Borrar datos
<html> Ver código fuente Cerrar ventana

<head>
<title>form3</title>
</head>
<body bgcolor="#ffff99" text="#996699">
<form action="mailto:pati2906@hotmail.com" method="post" name="primero">
<hr>
<blockquote>
<blockquote>
<blockquote>
Teclea tu nombre y apellidos: <input type="text" size="22" maxlength="30"
name="nombre">
<p>
<p>Elige un tema:
<blockquote>
<p><input type="radio" name="tema" value="ciencia" checked>ciencia
<input type="radio" name="tema" value="arte">arte
<input type="radio" name="tema" value="literatura">literatura
</blockquote>
<p>Marca tus aficiones:
<blockquote>
<p><input type="checkbox" name="deporte" checked>deporte
<p><input type="checkbox" name="música" checked>música
<p><input type="checkbox" name="lectura">lectura
<p><input type="checkbox" name="pesca">pesca
</blockquote>
<p>Introduce la contraseña: <input type="password" name="contraseña">
</blockquote>
</blockquote>
</blockquote>
<div align="center">
<input type="submit" value="Enviar datos">
<input type="reset" value="Borrar datos">
<p>
<input type="button" value="Ver código fuente" onclick='window.location="view-
source:" + window.location.href'>
<input type="button" value="Cerrar ventana" onclick="window.close();">
</div>
<hr>
</form>
</body>
</html>
form12.html
Botones de comando para abrir ficheros
Tablas Listas ¿Ver foto?
<html>
<head>
</head>
<h2 align="center">Botones de comando para abrir ficheros </h2>
<hr>
<p>
<TABLE align="center">
<TR>
<TD>
<FORM METHOD="POST" ACTION="../tablas/tabla6.html">
<INPUT TYPE="SUBMIT" VALUE="Tablas">
</FORM>
</TD>
<TD>
<FORM METHOD="POST" ACTION="../listas/lista7.html">
<INPUT TYPE="SUBMIT" VALUE="Listas">
</FORM>
</TD>
<TD>
<FORM METHOD="POST" ACTION="../imagenes/esquel.jpg">
<INPUT TYPE="SUBMIT" VALUE="¿Ver foto?">
</FORM>
</TD>
</TR>
</TABLE>
<p>
<hr>
</body>
</html>
form13.html
Optgroup
95
Enviar consulta Restablecer
Ver ficheros:
Examinar ...
Enviar
<html>
<head>
</head>
<h2 align="center">Optgroup </h2>
<hr>
<div align="center">
<FORM METHOD="post" ACTION="mailto:"pati2906@hotmail.com"">
<pre>
<select name="SO" bgcolor="yellow">
<optgroup label="WINDOWS">
<option bgcolor="olive">95
<option>98
<option>NT
<option>2000
</optgroup>
<optgroup label="LINUX">
<option>Debian
<option>Red Hat
<option>Mandrake
<option>Suse
</optgroup>
</select>
<input type="submit" bgcolor="red"> <input type="reset">
<hr>
<p>
<p>
<h2>Ver ficheros:</h2>
<input type="file">
<input type="submit" value="Enviar">
</pre>
</FORM>
form14.html
Mantenimiento de clientes
Datos identificativos
Nombre:
Apellidos:
Dirección:
Ciudad:
Banco:
Agencia:
Cuenta:
Tipo de pago
Contado
Crédito
Forma de pago
30 días
60 días
90 días
Enviar Reinicializar
<html>
<head>
</head>
<body bgcolor="#ffffcc" text="#996699">
<table bgcolor="#008080" width="100%">
<tbody>
<tr>
<td align="center"><font color="#00ff00" size="4">Mantenimiento de clientes </td>
</tr>
</tbody>
</table>
<FORM METHOD="post" ACTION="mailto:"user@hotmail.com"">

<fieldset>
<legend>Datos identificativos</legend>
<pre>
Nombre: <input type="text" name="nombre" size="10" tabindex="1">
Apellidos: <input type="text" name="apellidos" size="40" tabindex="2">
Dirección: <input type="text" name="direccion" size="35" tabindex="3">
Ciudad: <input type="text" name="ciudad" size="25" tabindex="4">
Banco: <input type="text" name="banco" size="25" tabindex="5">

Agencia: <input type="text" name="agencia" size="20" tabindex="6">
Cuenta: <input type="text" name="cuenta" size="35" tabindex="7">
</pre>
</fieldset>
<br>
<fieldset>
<legend>Tipo de pago</legend>
<pre>
<input type="radio" name="tipo_p" value="Contado" tabindex="9">Contado
<input type="radio" name="tipo_p" value="Credito" tabindex="9">Crédito
</pre>
</fieldset>
<fieldset>
<legend>Forma de pago</legend>
<pre>
<input type="checkbox" name="forma_p" value="30" tabindex="10">30 días
</pre>
</fieldset>
<input type="submit" value="Enviar" tabindex="12">

<input type="reset" value="Reinicializar" tabindex="13">
</FORM>
</body>
</html>

COMIENZO Laboratorios Guia de HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

COMIENZO Laboratorios Guia de HTML

Cargado por

Copyright:

Formatos disponibles

Laboratorio practico de Desarrollo de Pagina WEB

Ejemplo 2: Aplicando Titulo a la Ventana.

Ejemplo 3: Aplicando Color

Ejemplo 4: Aplicando signo de grados.

Ejemplo 5: Aplicando regla horizontal y mas atributos.

Ejemplo 7: Formatos y Atributos de Textos.

Ejemplo 8: Tipos de Fuentes.

Ejemplo 10: Tablas

Ejemplo 11: Viñetas

Ejemplo 13: Frames.

Ejemplo 14: Frames, imagens.

Ejemplo 15 pagina web “ La Chistera “

HR (con WIDTH y SIZE), H3, BIG, STRONG, BLOCKQUOTE, CITE,

Crear la primera fila

<TR><TH ROWSPAN=2 COLSPAN=2></TH>

Las celdas con dos columnas

Agregando la Segundo fila

Expandiendo a dos filas mas

Expandiendo dos mas

Centramos las celdas

Escrito la tabla completa será

<TABLE CELLSPACING="2" CELLPADDING="2" BORDER="1">

Ejemplo 18 parte del formulario

<OPTION VALUE="internacional" SELECTED>

Que sistema operativo conoces:

Windows Macintosh UNIX

Has utilizado alguna vez el sistema operativo LINUX.

<TITLE>MI PRIMERA PAGINA WEB</TITLE>

<FORM ACTION="mailto:anaserigo@terra.es" METHOD="POST"

<DT><FONT SIZE="+2"><B>Encuesta sobre conocimientos

<DL>1.- Que sistema operativo utilizas:

<DD>Windows<INPUT TYPE="checkbox" NAME="Windows"

<DD><input type="radio" checked name="Vl" value="97">97</DD>

<DD><input type="radio" name="Vl" value="98">98</DD>

<DD>Macintosh<INPUT TYPE="checkbox" CHECKED NAME="Macintosh"

<DD>UNIX<INPUT TYPE="checkbox" NAME="UNIX" VALUE="UNIX"></DD>

<DD>Ninguno<input type="checkbox" NAME="ninguno"

<DT>2.- Que procesador de textos utilizas con más

<DD>Wordpad<INPUT TYPE="checkbox" NAME="Wordpad"

Archivos a Enviar: Manual de Html Programa Mapthis Archivo de Ayuda

Tu Edad : Menos de 20 años Entre 20 y 40 años Mas de 40 años

Teclea tu nombre y apellidos:

Marca tus aficiones:

Enviar datos Borrar datos

<html> Ver código fuente Cerrar ventana

Botones de comando para abrir ficheros

Tablas Listas ¿Ver foto?

Enviar consulta Restablecer

<FORM METHOD="post" ACTION="mailto:"user@hotmail.com"">

Banco: <input type="text" name="banco" size="25" tabindex="5">

<input type="submit" value="Enviar" tabindex="12">

También podría gustarte