Manual HTML

Resumen de html
Inicio :
1)
Estrucctura de una pagina :
pseudocodigo
<nombre de la codificacin>
<cabecera>
<titulo> escribimos el titulo de la pagina <fin del titulo>
<fin de la cabecera>
<cuerpo>
<fin del cuerpo>
<fin_del nombre de la codificacion>
Codificado:
<html>
<head>
<title> primera pagina </title>
</head>
<body>
</body>
</html>
2) Formas de las sentencias para cada etiqueta:
<etiqueta atributos1 = atributos2 = atributos3 =atrib.=> </etiqueta>
3) Encabezados:
Tenemos los siguientes:
Jerarqua = menor tamao mayor tamao
h6 h5 h4 h3h2h1
formato para los encabezados:
< hi>palabras a escribir </hi> ; donde , i={1,2,3,4,5,6 }
4) Como ubicar un texto o una frase en nuestra pagina:
Recordar : align ,es un atributo
<p align= center > ..texto </p> //ubica en el centro
<p align= left > ..texto </p> //ubica en el lado izquierdo
<p align= right> ..texto </p> //ubica en el lado derecho
Observacin: <p> texto</p>//me crea un doble salto de lnea
5) Como colocar una lnea:
<hr>//si lo colocamos asi sin atributos nos genera una lnea horizontal en toda la
pagina
..pero
Si ponemos <hr size = 3 width= 50% >
Size=determina el grosor de la lnea
Width=porcentaje de la linea
Ademas: <hr size = 3 width= 50% align =centro izqui derech >
<p align="center"><hr size ="3" width=50%></p>
6)
Si quisiramos escribir un texto con sangra osea algo asi :
Seor jose :
(*)
Atte moiss rejets le doy
me comunico ante usted
..
.
Solamente agregamos la etiqueta :blockquote ;asi escribimos asi,nos saldra como escribimos
en(*):
Seor jose :
<blockquote>
Atte. moiss rejets le doy
me comunico ante usted
</blockquote>
7) Salto de linea :
texto<br>texto
8) Como agregar una direccion o un comentario al final de la pagina :

Ejemplo:
<address>
Autor:webside@hotmacol<br>
URL:http//www.ieeesb.etsit.unp
</address>
9) Como agregar una imagen : *primero se debe de guardar en la carpeta en donde esta
guardado nuestro arhivo (HTML) las imgenes que se usaran en la pagina y luego la
codificacion es la siguiente : <img src = nombre_de_la imagen . extensin_de_la imagen >
Extensin{gif,jpg}
10) Como centrar una frase ,imagen , etc:
<center>texto,imagen,etc..</center>
11) Como crear un texto con hipervnculo asi :
<a href= direccion > /* href.:es el atributo onde se coloca la direccion ejemplo :
(http://www.otroservidor.com/hobbies/index.html)
texto sencible del hiperenlace
</a>
12) Anclas : sirve para que nos enve a una parte de nuestra pgina:
Asi --> <h2> { <a href="#tope">} <p align="center">Trinity Blood</h2>
Lo que esta en {.,,,,,} es un ancla que le estamos agregando al titulo Trinity Blood luego
escribimos en el transcurso de nuestra pagina : <a name="tope"></a>al inicio</a> que es
la forma de que nuestra pagina nos envie directamene hacia donde se ubique la frase :
Trinity Blood
cada vez que demos clic en la frase: al inicio.
13) Atributo title: para que sirve?
Sirve para que nos dea informacin mas detallada osea : al pasar con el Mouse por un
hipertexto nos mostrara un mensaje tal vez de ayuda.
codigo:
title =mensaje que queramos decir
14) Atributos de letra tenemos :
*<b>letra </b>
negrita ==<strong>
*<i> letra</i>
cursiva ==<em>
* <strike>letra a tachar</strike> tachada <s> letra a tachar</s>
*<big>frase </big>
/*aumentamos de tamao la frase ;ojo cuantos mas bigs
anidemos mas grade sera la letra.
*<small>frase</small>
/*disminuye el tamao de la frase =k el anterior
* <u> texto </u>
/* texto subrayado
* super indice : ejemplo :
El 1<sup>er</sup>
*sub indice
:ejemplo:
El H<sub>2</sub>O
Tipos de letra
*<tt>main {} </tt> /*nos muestra las letras como codigo de programacin==<code>
15) Etiqueta font :
<font size=i></font> i={1,2,3,4,5,6,7} ,,obvser: jerarkia segun el tamao:
7654321
Mayor-------- Menor
Tambien podemos anidar asi:
<font size="4">Sleep Nedds <font size="+3">Placebo </font>Listen......</font>
Otra etiqueta importante es :<basefont size=i> i={1,2,3,4,5,6,7} ,,obvser: jerarkia
segun el tamao:
7654321
Mayor-------- Menor
Ojo: esta etiketa sirve para darle tamao a todo el texto y se escribe despus del body.
<font color=#RRFF00>
RR+ 00 FF
BB+ azul
GG+ verde
O tambien
<font color=nom_ingles>
<pre> frase---- </pre>
/*frase ,va ha estar escrito tal como lo escribo
Tildes para caracteres
&[carater ]acute ; /*observar: lo que esta con azul es la sintaxis
Para la
&[carater ]tilde ; /*observar: lo que esta con azul es la sintaxis
<font face=verdana {arial,comic sans }
16)
Listas:
a) listas no odenadas
Sintaxis:
Yo practico:
<UL>
<LI>Ftbol
<LI>Baloncesto fdf
<LI>Tenis
<LI>etc.
</UL>
b) listas odenadas
Sintaxis:
Yo practico:
<ol>
<LI>Ftbol
<LI>Baloncesto
<LI>Tenis
<LI>etc.
</ol>
Em este caso me van a aparece la lista com uma enumeracion
c) listas de glosario
Sintaxis:
Yo practico:
<dt>
<dd>Ftbol
<dd>Baloncesto
<dd>Tenis
<dd>etc.
</dt>
En este caso me van a aparece la lista con una sangria
d) Listas anidadas
<MENU>
<LI>Un nuevo Internet: IPv6
<LI>El WWW cobra vida: ha llegado el
HTML dinmico
<LI>Qu ordenador comprarse:
<OL>
<LI>CPU rpida. Con las siguientes
caractersticas:
<UL>
<LI>Procesador Pentium 166
<LI>CD-ROM 8x
<LI>Tarjeta de sonido 16 bits
<LI>Tarjeta de vdeo con 2 Mb
</UL>
<LI>Impresora a color de buena
definicin.
<LI>Altavoces y cmara de vdeo.
<LI>Escaner color.
<LI>Mdem de velocidad 28K o
superior.
</OL>
</MENU>
Descripcin
El codigo <menu> </menu> /* lo que va ha hacer es de anidarme en una lista ,ademas
soporta <li>para agragar asu lista ,ademsa va a tener la misma sintaxis que <ul>-</ul>
17)
Comentarios en html

18) Fondo de color para la pgina:
Ester codigo va ha ir junto con el <body bgcolor= red > o <body bgcolor=#ffgg00>
<body text= red >/* daria el color para la s letras del texto en general
<body link= red >/*cambia el olor del hiperenlace
<body vlink= red >/*cambia el color para los hiperenlaces ya visitados
<body alink= red >/*cambia el color para los hiperenlaces al presionarlos
19)
Fondos de pagina
<body background =xxx0.jpg >
1..<img src="imagenes/chistera.gif"><h2>LA CHISTERA-Humor y magia</h2>
2..<h2><img src="imagenes/chistera.gif">LA CHISTERA-Humor y magia</h2>
Observacin:
Verificar que no es lo mismo el 1 er, con el 2do codigo
30)
codigo para ubicar una imagen: con respecto a un texto .. /por ejemplo:
<img src=.jpg align=middle>
imagen
top
imagen
bottom
align= middle
se coloca la imagen en medio del texto osea ,la imagen se coloca a la mitad de la imagen.
31)
Texto envolvente:::
Este va ha hacer que < img=src= align =left> O< img=src= align =left>
La imagen que colok tanto en la izkierda o derecha;ya ha ser envuelto o rellenado por el
testo k lo acompae hasta k la imagen termine su tamao..
Para saltar de linea antes que acabe el tamao de la imagen;
<br clear=left> fuerza a dar un salto hacia el margen izquierdo
<br clear=right>fuerza a dar un salto hacia el margen derecho
<br clear=all>fuerza al primer margen libre
32)
Como generar margenes para la imagen
<img align=left vspace=35 hspace=35>
Vspace/****** para la parte vertical
Hspace/****** para la parte horizontal
Atributos para la imagen : hace k al hacerlo la imagen un hiperenlace ,esta no tenga un
borde k lo sombree como tal..
< border=0>
33) como manejar el tamao de la imagen:
Pues con los atributos :::<width= height= >
Si no se pudiera cargar nuestra imagen entonces lo k hacemos es enviar un mensaje para
ello lo que se hace es poner el atributo <alt=mensaje>
34)
Mapas
El codigo es el siguiente:
Primeramente <img src="222.jpg" usemap="#mapa2">/*se declara la imagen
Segundo <map name="mapa2">
Tercero <area shape="rect" coords="498,237,10,10" href="gf.html">
Ultimo </map>
35)
Tablas . si quisieramos crear l hacemos de la siguiente manera:
<table> /*atributos <table border=5>
</table>
<tr> </tr>/* numero de filas
<td></td> /*numero de columnas
Adems si queremos anidarlo lo hacemos asi:
<tr>
<td></td>
</tr>
Encabezados :
<tr> encabezado 1</tr>
<tr>encabezado 2</tr>
Ejemlo de encabezado :
<table border="5">
<th>carlos gallager</th>
<th>lian genaro</th>
<th>carlos gallager</th>
<th>lian genaro</th>
<th>carlos gallager
<th>lian genaro
<th>carlos gallager
<th>lian genaro
<tr>
<td>goo goo</td>
<td>goo dools</td>
<td>colo dools</td>
</tr>
<tr>
<td>boll goo</td>
<td>sonm dools</td>
</tr>
</table>
Descripcin: 1,declaramos la etiketa <table>,ademas del atributo border=num;uego si
keremos un encabezado lo ponemos al inicio importante ,siempre <th></th>para crear las
filas :<tr> </tr>.Y, ademas <td></td>,para las columnas que le querramos agregar.
Cabecera o titulo a la tabla
<table>
<caption align=xxx>nombre o titulo</caption> xxx={top,bottom}
</table>
Enlaces Rel ,Rev
Estos atributos fueron creados para establecer relaciones entre las pginas enlazadas entre
s. Sin embargo no se ha especificado todava para que pueden servir estas relaciones. rel y
rev El nombre rel proviene de (relacin) mientras que rev proviene de (relacin inversa).
Un ejemplo podra consistir en un libro publicado en Internet donde cada captulo se ha
escrito en una pgina (capitulo1.html, capitulo2.html, etc.) Puede ser interesante establecer una
relacin entre cada una de las pginas. As en el captulo 4 se podra emplear lo siguiente:
<a href="capitulo3.html"
rel="anterior">Captulo 3
</a>
<a href="capitulo5.html" rel="siguiente">
Captulo 5</a>
Es decir el captulo 3 se relaciona con el actual (el cuarto) en que es el anterior y el 5 en que
es el siguiente. Un posible uso (futuro) que podra darse a este tipo de relaciones podra ser
con vistas a imprimir el libro completo. El atributo rev establece la misma relacin que rel
pero a la inversa. En el ejemplo anterior hubiese sido equivalente escribir:
<a href="capitulo3.html" rev="anterior">
Captulo 3
</a>
<a href="capitulo5.html" rev="siguiente">
Captulo 5</a>
FRAMES
Target:
Este atributo es una extensin del atributo <a >;de los hiperenlacesfjense. Por ejemplo:
<a href="ventana1.htm"
//le doy la direccion de mi ventana que se emergera
target="segunda ventana">
//el target nos va a mostrar uma ventana nueva ..
abrir
//palabra sencible al pasarlo con el mouse
</a>
//da por concluda el hiperenlace
BASE
EL atributo <base href=http//wwwgoogle.com//txt.htm>//me permite tener o generarme
un a pagina directamente de la cual voy a tomar algunos objetos
Estructura de una pagina:
FRAMES
Para generar los frames o ventanas dentro de una sola hacemos:
<HTML><HEAD><TITLE>framest</TITLE></HEAD>
<frameset rows="33%,*">//parto mi ventana por filas en donde la primera part. vale el
33%.
<frameset cols="33%,*">// parto mi ventana por columnas en donde la primera part. vale el
//33%.
<frame name=map src="map.htm">//le doy un nombre a ese frame y luego la direccion
//el caso segn
</HTML>
Atributos del frame:
Scrolling=auto// las barras solo apareceran solo si la ventana es mas grande.

=yes// las barras de desplazam. apareceran siempre
=no// estas barras no apareceran nunca pero y si es grande la otra ya
fuiste
Noresize =0//va a hacer k no podamos mover los bordes de los frames
Estos valores se dan en pixeles:
Marginheight =100
//alinea el maren superior
Marginwidth =100
//alinea el margen lateral
Incompatibilidad con los frames:

En es caso operamos de la siguiente forma:
<html><head><title>Documento sin título</title></head>
<frameset rows="1,*" cols="*,243" framespacing="0" frameborder="NO" border="0">
<frame src="UntitledFrame-7.htm">
</frameset>
////
--->aca viene el detalle
<noframes>
<body>
</body>
</noframes>
</html>
Frameset anidados
Mas atributos del

bordercolor ="red"
frameborder=0
Mas atributos del
Frameborder=0
border=0
Framespacing=0
frame:
//me permite darle color a los bordes de frames de dicha ventana
//le quita el borde de los frames
frameset:
Mas atributos de href:

Target=_blank //fuerza a que el doc referido por el enlace. Se abra en otra ventana
Target=_self // fuerza a que el doc referido por el enlace. Se abra en la misma ventana
Target=_parent // fuerza a que el doc referido por el enlace. Se abra en frameset padre
Target=_top// a abrirse destruye todos los frames que se encuentren en dicha ventana.
<head>
</head>
(Es conveniente)
Pues los enlaces de estos botones estn en la pagina: principal.
Frame flotante
Nos permite insertar paginas completas a nuestra pagina actual:
<iframe src=juani.htm></iframe> ; en caso de k no soporte el navegador tendramos que
hacer lo siguiente:
<IFRAME SRC="doc.htm">
Tu navegador no soporta frames flotantes, para ver
el contenido ve a <A HREF="doc.htm">doc.htm</A>
</IFRAME>
Atributos del iframe
NAME: Este atributo nos permitir asignarle un nombre al frame de manera que
podamos
referirnos a l por ejemplo para usarle como destino de un enlace usando el
atributo
TARGET.
WIDTH y HEIGTH:para darle tamaos a nuestro frame.
FRAMEBORDER: quitar y poner los bordes. Escribiendo FRAMBORDER="0"
SCROLLING :Este atributo nos permitir quitar o mostrar la barra de desplazamiento.
Con 3 valores : value ,yes,no
Multimedia
Como insertar videos
Formato:
<A HREF="sinfonia_5.au">
quinta sinfona
</A>
Como insertar videos inline.
Formato:
DYNSRC
<IMG DYNSRC="baile.avi"
SRC="baile.gif"
ALT="[Un baile]">
Adems podemos usar los atributos ya conocidos para esta etiqueta como: ALIGN, VSPACE,
HSPACE, WIDTH, HEIGHT.
Adems se agrega otros atributos como:
CONTROLS: Este es un atributo que no toma ningn valor , muestra el vdeo con
controles.
LOOP: Toma como valor un nmero que determina el nmero de veces que el vdeo
ser mostrado.
"-1" el vdeo ser repetido infinitas veces.
START: Determina cuando debe empezar a reproducirse el vdeo. toma dos valores:
con
START="FILEOPEN"(valor por defecto) al cargar la pgina .; con START="MOUSEOVER"
el vdeo no
empezar a reproducirse hasta que el usuario site el cursor sobre l.
LOOPDELAY: [Solo Internet Explorer 4.0] Con este atributo podemos especificar el
retardo en milisegundos que el navegador esperar tras acabar antes de empezar a
reproducir el vdeo de nuevo.
LOWSRC
Mostrar una previsualizacion de una imagen:
<IMG SRC="alta_calidad.gif"
LOWSRC="baja_calidad.gif">; observacin: tambien esto lo podemos usar para crear
una pequea animacin.
Sonido inline
Explorer soporta los siguientes formatos:midi,au,wav.
<BGSOUND SRC="sinfonia_5.au">
Atributos: loop=x//numero de veces que quiero que se reproduzcan
Si(x=-1);entonces se reproducir infinitamente.
Volume:esta entre <-1000,0>en donde si ponemos 0;entonces se oira al max. Volumen.
Balance: esta entre<-1000,1000>
Marquesinas:
<MARQUEE>
Me estoy moviendo
</MARQUEE>
Atributos del marquee:
BGCOLOR: //color para la marquesina
HEIGHT y WIDTH// altura y ancho de la marquesina, los valores se dan en %.
HSPACE y VSPACE//marco entre marquesina y el texto colocado.
Align//comportamiento igual al de una imagen
Atributos de la marquesina:
BEHAVIOR: cambia el comportamiento del texto y toma 3 atributos.
BEHAVIOR="scroll"// por defecto
BEHAVIOR="slide" // pasa una sola vez y se queda en la izquierda
BEHAVIOR="alternate"//rebota de izquierda a derecha
DIRECTION: controla si es de tipo scroll LEFT (izquierda) y RIGHT (derecha)

Loop: numero de veces que aparezca. Scroll=4;scroll=-1 o infinite
SCROLLAMOUNT: movimiento del texto(valor en pixeles )
SCOLLDELAY: tiempo de espera de cada marquesina ( valor en milisegundos)
Controles multimedia:
Behaviors: Comportamientos especiales de los controles y otros elementos de la
pgina.
Effects: Aplica un filtro grfico a cualquier elemento de una pgina.
Hot Spot: Permite especificar acciones a realizar al pulsar en diferentes zonas de la
ventana del navegador.
Mixer: Mezcla varios ficheros de sonido WAV.
Path: Permite crear movimiento de objetos por un camino establecido.
Sequencer: Facilita el control del tiempo en los eventos de nuestra pgina.
Sprite: Sirve para crear animaciones.
Sprite Buttons: Para crear botones animados.
Structured Graphics: Permite incluir en la pgina grficos que pueden ser cambiados
de tamao y rotados por
el navegante.
Plug ins(como insertare objetos)
Es uma forma de insertar diretamente em la pagina documentos de tipo(pdf,mov,wmv)
<embed src=ss.wmv>
Si no agarra ponemos
<NOEMBED>
<IMG SRC="huellas.gif"
WIDTH="640"
</NOEMBED>
Agragar sonido inline com embed
width="0" height="0"// no muestra los controles pero al colocarle nmeros si se van a
mostrar
autostart=true
//hace que empieze ni bien carga la pagina
Applet
Formato:
<APPLET CODE="nombre_applet.class" WIDTH="ancho"
</APPLET>
Pero tambien podemos rutear nuestro applet asi :
HEIGHT="alto">
<APPLET code=TicTacToe.class width=120 height=120 CODEBASE="http://Java.sun.com/applets/TicTacToe/1.1/">

</APPLET>
Atributos del applet:
NAME="nombre del applet": Este atributo es usado para identificar el applet entre el
resto de elementos u otros applets de la pgina obligatorio si posteriormente
queremos que este se comuniquecon cdigo JavaScript.
ALIGN: Con esta etiqueta podremos controlar el alineamiento horizontal de la pgina.
Puede: left, right y center
VSPACE="pixeles": un margen vertical del tamao en pixeles especifi-cado. se refiere
a la distancia entre la parte superior del applet y los elementos de la pgina que estn
sobre l y entre la parte inferior y los elementos
situados debajo.
HSPACE="pixeles": Este atributo nos permite establecer el ancho del margen
horizontal, es decir el
espacio entre el applet y los elementos que estn situados a su derecha y a
suizquierda.
ALT="texto alternativo": Esta etiqueta es usada por aquellos navegadores que s
entienden la etiqueta APPLET, pero no soportan la tecnologa Java.
ARCHIVE="archivo_comprimido"//permite especificar un archivo auxiliar al applet que
contendr todo lo que le sea necesario ya sea(imagen,sonido,etc)
MAYSCRIPT://es por defecto y no posee ningun valor y nos dice que vamos a usar
java script
TITLE="texto": //muestrea un bocadillo cuando pasamos el ratn por encima de este
applet
Etiquetas para applet
<param>//nos sirve para modificar el applet,ojo esta modificacin es de propio de cada
applet;ademas la modificacion se hace con:
name= y value= ;ejemplo:
<APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto">
<PARAM NAME="nombre_parmetro" VALUE="valor_parmetro">//fijarse bien es solo
una etiqueta ademas
pueden ir varios <param>
</APPLET>
<HTML>
<HEAD>
<TITLE>El saludo de Duke</TITLE>
</HEAD>
<BODY>
<APPLET CODE="Animator.class" WIDTH=55 HEIGHT=68>
<PARAM NAME="imagesource" VALUE=".">
<PARAM NAME=ENDIMAGE VALUE=10>
<PARAM NAME=PAUSE VALUE=100>
<PARAM NAME=PAUSES VALUE="2500|100|100|100|100|100|100|100|100|100">
</APPLET>
</BODY>
</HTML>
DESCRIPCION
imagesource nos permite indicar el directorio donde se encuentran las imgenes,
un punto (.): significa el directorio actual. Estas imgenes deben llamarse
obligatoriamente T1.gif, T2.gif, T3.gif,etc.
endimage indica el nmero de imgenes de los que consta la animacin y en esta

ocasin
sern 10, desde T1.gif hasta T2.gif.
pause :permiten controlar las pausas entre las imgenes
pauses : controlamos de manera independiente las pausas que se realizan entre cada
una de las imgenes de manera individual.
OBJECT
Etiqueta mas general que nos va ha permitir insertar cualquier tipo de archivo.
Formato:
<OBJECT>
</OBJECT>
Atributos:
Ademas de :<param> tambien tenemos:
VALUETYPE="...": Este atributo especifica que tipo de valor recibir el parmetro. Hay tres
posibles
valores:
Data: El valor especificado ser pasado al objeto como una cadena de caracteres.
Este es el valor por defecto y antes de la existencia del atributo
VALUETYPE era la nica posibilidad.
Ref: El valor especificado es una direccin URL que indica donde estn
almacenados los valores para dicho parmetro. La direccin debe ser
pasada tal cual al objeto.
Object: El valor es el nombre de otro objeto del mismo documento precedido
del smbolo #.
TYPE="tipo _ mime": Este atributo especifica el tipo mime del valor asignado a este atributo
con VALUE.
Formulario
Formato:
Este cdigo me genera una caja:
<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
Introduzca su nombre: <INPUT TYPE="Text">
</FORM>
</BODY>
</HTML>
Me crea un botn para poder ingresar mis datos a la caja :
<FORM>
Introduzca su nombre: <INPUT TYPE="Text">
<P><INPUT TYPE="Submit"> /*por defecto me arroja ese mensaje en el boton..
</FORM> asi:
<P><INPUT TYPE="Submit" VALUE="Enveme">//con la etiqueta value='', le sobreescriba

//lo que quiero que aparezca en mi boton
Adems le damos un nombre name=xxx ;//a la etiqueta <imput >
Mas atributos: <INPUT TYPE="text" NAME="mitexto">
Size=20 //tamao de la caja
MAXLENGTH = 5 // damos la cantidad de caracteres que queremos que se ingrese
VALUE= // texto por defecto en la caja
Alineamiento de caracteres
ALIGN="top": Alinea verticalmente el control con la parte superior de la lnea en que
es insertado.
ALIGN="bottom": Alinea verticalmente el control con la parte inferior de la lnea.
ALIGN="middle": Sita el control a una altura media entre el resto de elementos de la
lnea.
ALIGN="left": En este caso estamos alineando el control horizontalmente a la
izquierda. Al
contrario de lo que ocurra con las imgenes y con las tablas, el texto no bordear
el control por su derecha
ALIGN="right": Este valor es idntico al anterior en funcionamiento, slo que ahora el
control se
situar a la derecha de la ventana del navegador.
Ejemplo de lo ya aprendido:
<H2><FONT COLOR="#8080FF">Formulario de autenticacin</FONT></H2>
<FORM>
<P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre">
<P>Introduzca su clave: <INPUT TYPE="password" NAME="clave">
<P><INPUT TYPE="submit" VALUE="Enviar">
</FORM>
Se vera asi:
Botones de eleccin.
Crea botones de radio:
<FORM>
<INPUT TYPE="radio">
</FORM>
Para seleccionar:
<INPUT TYPE="radio" CHECKED>
Este codigo nos genera una lista para elegir:
<FORM>
<P><INPUT TYPE="radio" NAME="musica" VALUE="Jazz">Jazz
<P><INPUT TYPE="radio" NAME="musica" VALUE="Pop">Pop
<P><INPUT TYPE="radio" NAME="musica" VALUE="Rock">Rock
<P><INPUT TYPE="radio" NAME="musica" VALUE="Country">Country
</FORM>
Y se vera asi:--
Cajas de seleccin.
Indique su profesin (escoja todas las que procedan):
<FORM>
<P><INPUT TYPE="checkbox" NAME="medico">Mdico
<P><INPUT TYPE="checkbox" NAME="programador" CHECKED>Programador
<P><INPUT TYPE="checkbox" NAME="abogado">Abogado
<P><INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero
<CENTER><INPUT TYPE="submit" VALUE="Enviar"></CENTER>
</FORM>
Se vera asi:
Imagenes:
Tambien podria cambiar el boton normal por el de una imagen , asi:
<CENTER> <INPUT TYPE="image" NAME="envio" SRC="envio.gif">
Crear un botn para el borrado de lo que escribamos:
Como crear un botn general
<INPUT TYPE="button"
VALUE="Pulseme">
Tambien podemos hacer lo siguiente:
VALUE="Texto del botn"
ONCLICK="cdigo de script">
Como cerrar una ventana de una manera mejorado ?
<FORM>
VALUE="Cerrar ventana"
onClick="window.close();">
</FORM>
Como enlazar una ventana de una manera mejorado ?

<FORM>
VALUE="Cargar otra ventana"
onClick="window.location.replace
(button2.html);">
</FORM>
Insertando imagenes en nuestro boton
Primero debemos de elegir el tipo de nuestro boton:
TYPE=submit
//envio
TYPE=reset
//borrado
TYPE=button //generico
<BUTTON name="reset"
type="restablecer">
Restablecer<IMG src="pics/imagen.gif"
alt="">
</BUTTON>
Campos ocultos
"hidden"
Formato:
<INPUT TYPE="hidden"
NAME="nombre"
VALUE="datos">
Ejemplo: {verificar el atributo: type}
<FORM>
<P>Introduzca su nombre:
<INPUT TYPE="text"
NAME="nombre"
TITLE="Introduzca aqu su Nombre"
SIZE="30">
</FORM
TABINDEX
Atributos para que la opcin tabbed se enfoque en una caja de texto segn la numeracin
que le demos .Esto es posible con la etiqueta:
TABINDEX="x"{donde x, puede ser un numero segn el orden que le demos}.
por ejemplo :
identificacin (4 letras):
<INPUT TYPE="password" NAME="clave" TABINDEX="3">
NOTAB
El atributo NOTAB, por su parte indicar que este control est fuera de la lista, y por lo
general ser situado el ltimo de todos.
ejemplo :
<INPUT TYPE="text" NAME="direccion" NOTAB>// notar en que lugar escribo notab
//,observ. lo escribo en la ultima
// lista..
DISABLED
Cuando usamos el atributo DISABLED en un control lo deshabitamos. En general este atributo
nicamente es usado con cajas de texto. ejemplo :
ejemplo:
<INPUT TYPE="text" NAME="texto2" VALUE="Texto inicial" DISABLED>
READONLY
La funcin del atributo READONLY es muy similar, con la nica diferencia de que el control
acta como tal, por ejemplo en una caja de texto podemos seleccionar con el
ratn el texto que hay en ella, pero tampoco podr modificarse el contenido.
ejemplo:
<INPUT TYPE="text" NAME="texto2" VALUE="Texto inicial" READONLY>

<INPUT TYPE="radio" NAME="boton" DISABLED>
OTROS CONTROLES
Cajas de texto multilnea: TEXTAREA
el atributo es: TEXTAREA importante para que el usuario pueda escribir mas abiertamente.
ejemplo:
<FORM>
<TEXTAREA NAME="texto"
ROWS="10"
COLS="50">
Es la mejor que he visto nunca.
</TEXTAREA>
</FORM>
de donde podemos decir o siguiente de los atributos:
NAME: El nombre que queremos asignarle al control. Como siempre, este nombre
ser enviado junto con los datos del rea de texto al mandar el formulario.
ROWS: El nmero de lneas de la caja de texto.
COLS: El nmero de caracteres visibles de cada lnea. Este atributo es similar al
atributo SIZE que vimos en las cajas de texto convencionales.
Ms atributos:
WRAP=OFF: Es el valor por defecto y provocar que el texto sea mostrado en una
sola lnea.
WRAP=SOFT: hace que el propio navegador vuelve a juntar todo el texto que fue
escrito seguido en una sola lnea.
WRAP=HARD: se enva tal y como se ha escrito.
Adems de tambien soportar las etiquetas: ALIGN ,DISABLED,READONLY,TABINDEX, NOTAB
y TITLE.
ejemplo :
<TEXTAREA NAME="nombre"
ROWS="filas"
COLS="columnas"
ALIGN="alineamiento"
WRAP="off | soft | hard">
Texto inicial
</TEXTAREA>
Cuadros de seleccin
Es parecido a un JCombox :
Etiqueta: SELECT
Ejemplo:
Existe una etiqueta que me va a permitir seleccionar una opcin por defecto esta es :
<OPTION SELECTED>Negro
<FORM>
Elija un color:<BR>
<CENTER>
<SELECT NAME="color">
//select es la etiqueta para dicho
<OPTION>Verde
// option, es la forma por la cual agrega las opciones.
<OPTION>Negro
//darse cuenta que en la forma en que se colocan los
<OPTION>Rojo
//option en ese orden se vern.
<OPTION>Azul
</SELECT>
</CENTER>
<INPUT TYPE="submit"
VALUE="Enviar eleccin">
</FORM>
Tambien podemos elegir una listar para seleccionar pero sin caja alguna:
Ejemplo:
SIZE="xx" {donde xx, es el numero de elementos option }
<BODY>
<FORM>
Lista de la compra:<BR>
<CENTER>
<SELECT NAME="compra" SIZE="6">
<OPTION VALUE="Fruta"> Fruta
<OPTION VALUE="Verdura"> Verdura
<OPTION VALUE="Ternera">Ternera
<OPTION VALUE="Mantequilla"> Mantequilla
<OPTION VALUE="Salchichas"> Salchichas
<OPTION VALUE="Pasta"> Pasta
</SELECT>
</CENTER>
<P>
<INPUT TYPE="submit"
VALUE="Enviar lista de la compra">
</FORM>
Qu sucedera si queremos hacer una seleccin mltiple?
Hacemos lo siguiente:
<FORM>
<SELECT NAME="compra" SIZE="2" MULTIPLE>
<OPTION VALUE="Fruta">Fruta
<OPTION VALUE="Verdura">Verdura
</SELECT>
</FORM>
COMO USAR LOS DATOS DE UN FORMULARIO

Como hacer que los datos que se capturen con el formulario puedan ser
enviados a un correo o a otra pagina: cmo puedo hacer que me lleguen los datos?.
necesito los : CGIs, deben encontrarse en algn lugar del servidorWeb. Al enviar un
formulario a uno, ste procesar la informacin y contestar con la respuesta oportuna.
Cmo se enva informacin a un CGI?. Hasta la etiqueta FORM consta de un atributo llamado
ACTION ;donde debemos especificar la direccin URL del programa CGI donde deben
enviarse los datos.
METHOD ; para indicarle cmo se mandarn estos datos. Este atributo puede tomar
dos valores :
**GET
// con formularios pequeos
** POST
// formularios donde la cantidad de informacin es grande
ENCTYPE ; nos permite cambiar el tipo de codificacin
Ejemplo 01:
<FORM METHOD="post"
ACTION="http://www.miservidor.es/cgi-bin/
programaCGI">

</FORM>
Ejemplo 02:
Si no queremos usar ningn tipo de codificacin entonces hacemos lo siguiente:
<FORM ENCTYPE="text/plain"
METHOD="post"...>
</FORM>
observacion :al no usar los cgi s ,nuestros datos se enviaran sin codificacion
alguna.
Formularios sin CGIs

Si queremos enviar nuestros datos especficamente hacia un correo .Este es el formato:
<FORM ACTION="mailto:milogin@midireccion.es"
ENCTYPE="text/plain" // me dice que no use codificacion alguna para el envoi de
// datos
METHOD="post">

</FORM>
ENVO DE FICHEROS USANDO FORMULARIOS
Sintaxis :
<FORM ENCTYPE="multipart/form-data"
ACTION="http://www.miservidor.es/cgi-bin/
/*ruta onde esta el progrma

/*para recepcionar
cogefichero"<
<!-- ... --<
</FORM<
pagina recomendable :
http://www.bio.cam.ac.uk/cgi-lib/ [http://www.bio.cam.ac.uk/cgi-lib/]

Manual HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual HTML

Uploaded by

Copyright:

Available Formats

Resumen de html

Si quisiramos escribir un texto con sangra osea algo asi :

8) Como agregar una direccion o un comentario al final de la pagina :

Estructura de una pagina:

Scrolling=auto// las barras solo apareceran solo si la ventana es mas grande.

Incompatibilidad con los frames:

Mas atributos del

Mas atributos de href:

Pues los enlaces de estos botones estn en la pagina: principal.

DIRECTION: controla si es de tipo scroll LEFT (izquierda) y RIGHT (derecha)

<APPLET code=TicTacToe.class width=120 height=120 CODEBASE="http://Java.sun.com/applets/TicTacToe/1.1/">

endimage indica el nmero de imgenes de los que consta la animacin y en esta

<P><INPUT TYPE="Submit" VALUE="Enveme">//con la etiqueta value='', le sobreescriba

Como enlazar una ventana de una manera mejorado ?

<INPUT TYPE="text" NAME="texto2" VALUE="Texto inicial" READONLY>

COMO USAR LOS DATOS DE UN FORMULARIO

Formularios sin CGIs

ENVO DE FICHEROS USANDO FORMULARIOS

/*ruta onde esta el progrma

You might also like