Presen HTML

El Lenguaje HTML
Hypertext Markup Language

No es un lenguaje de programacin.
Describe la estructura de un documento
Texto en formato ASCII.
Extensin HTML 0 HTM
Etiquetas con apertura y cierre
No se distingue MAY de ninu. en los tags.
Estructura bsica de un documento
< HTML>
<HEAD>
<TITLE> Ttulo del documento</TITLE>
</HEAD>
<BODY>
Hola Mundo
</BODY>
</HTML>
Cabecera <HEAD> </HEAD>
En <TITLE> se coloca la descripcin que aparecer en el

caption (ttulo) de la ventana del navegador (browser). Este
ttulo adems es el que se ve en el apartado de
Bookmarks y en Favoritos.
Con las marcas <META> .. </META> aparecer
informacin del documento, usado para indicar: autor,
programa que lo gener, palabras clave, etc.
Cuerpo <BODY> .. </BODY>
Delimita el cuerpo del documento HTML. Tiene
algunos parmetros tiles que configuran el
documento:
Bgcolor: Bgcolor=color. Color de fondo del
documento.
Background: Background=FicheroImagen. Imagen
de fondo del documento. No tiene sentido junto al
anterior.
Text: Text=color. Color del texto del documento.
ETIQUETAS
Tamao de letra:<Hn> .. </Hn>
Donde n va de 1 a 6. El 1 representa al tipo de letra ms grande y el 6 al ms
pequeo.
Fuentes: <Font> </Font>
Modificadores de las fuentes de las letras.
Admite muchos modificadores, entre otros:
Size: Size=n. Tamao de la fuente: El n va desde 1 (el ms pequeo) al 7 (el ms
grande)
Face: Face=tipo. Donde tipo es cualquier tipo de letra soportado por el
cliente.
Color: Color=valor. Donde valor es un color: red, blue, .Tambin
puede ir el valor en hexadecimal: RRGGBB.
Prrafos: <P>
Crea un prrafo en el texto. Puede alinearse a la izquierda (por
defecto, sino se indica nada), a la derecha, o al centro.
<p> Texto de un prrafo
<p align=center>Texto al centro
<p align=right>Texto a la derecha
<p align=justify>Texto justifcado
Salto de lnea: <Br>.
Es un salto de lnea (break) sin cambiar de prrafo ni las
propiedades en l definidas. Si el ltimo prrafo est alineado hacia un
lado, esta marca la conserva (no la altera). Crea un salto ms pequeo
que con <p>. Con <p> saltamos de prrafo.
Estilos:
<b> Negrita </b>

<Em> Enfatizado </em>
<i> Itlica</i>
<strong> Realzado </strong>
<tt> Teletipo </tt>
<u> Subrayado </u>
<Strike> Tachado </strike>
<sup> Superndice </sup>
<sub> Subindice </sub>
Tabuladores: <Blockquote> </Blockquote>
Crea un texto tabulado. Se pueden anidar tabulaciones.
Un cdigo como el siguiente:
<blockquote>
Tabulacin 1
<br> Tabulacin 2
<br> Tabulacin 3
<blockquote>
Tabulacion 3.1
<br> Tabulacion 3.2
</blockquote>
Tabulacin 4
<br> Tabulacion 5
</blockquote>
Divisiones: <DIV> </DIV>
Es semejante al <P>, pero no existe distancia entre prrafos (saltos
de lnea ms pequeos).
Ej:
<div align=center> Texto al centro
<br> Salto de lnea
</div>
<div align=left> Texto a la izquierda
<br> Salto de lnea
</div>
Lneas de Separacin: <HR>
Dibuja una lnea horizontal. Si no se indica lo contrario, tiene una
anchura de pantalla entera y de grosor fino (2). Tiene diversos
modificadores:
Size: Size=n . Indica el alto de la lnea
Align: Align=left, right, center. Hacia donde se alinea.
Noshade: No mostrar sombra
Width: Width=tamao%. Si no se indica el % el tamao va en pxeles
(con el % indica qu
o porcentaje de la pantalla va a ocupar)
Color: Color de la lnea.
Ej:
Esto es una lnea:
<hr>
Otra con altura 10 pxeles:
<hr size=10>
Y otra con alineacin a la izquierda, de 100 pxeles y sin sombra
<hr size=10 align=left noshade width=100>
Igual que la anterior (pero con 5% de pantalla ) y adems de color verde.
<hr size=10 align=left noshade width=5% color=green>
Texto preformateado: <PRE> .. </PRE>
Se visualiza el texto tal cual, con todos los espacios en blanco,
saltos de lnea. El problema es que el formato de <font> no lo
acepta; utiliza la fuente por defecto Courier.
Nota: Sin utilizar el texto preformateado, podemos usar la secuencia de

escape &nbsp para incluir ms de un espacio en blanco. En caso
contrario, se sustituyen todos los espacios en blanco por un nico
espacio.
Ej:
<Pre> Texto preformateado con
mltiples espacios En blanco y en varias
Lneas
</pre>
Sin preformateo incluyo espacios con
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp vale!
Comentarios: 
Los comentarios pueden incluir una o ms lneas:
Listas:
Listas numeradas: <OL> . </OL>
LI: <LI> Elemento de la lista. No hace falta cerrarlo.
Type: Type=1,A,a,I,i. Tipo de vieta a la izquierda del item
1: Numrico (valor por defecto): 1,2,3
A: Letras maysculas A, B, C
a: Letras minsculas a, b, c,
I: Nmeros romanos maysculas: I, II, III, IV .
i: Nmeros romanos minsculas: i, ii, iii, iv .
Start: Start=posicion. En qu elemento vamos a comenzar
Listas NO numeradas: <UL> . </UL>
LI: <LI> Elemento de la lista. No hace falta cerrarlo.
Type: Type=circle, square, disk (valor por defecto)
Listas de definicin: <DL> </DL>
Es una lista de trminos y sus correspondientes
definiciones.
Ej:
<DL>
<DT> Trmino 1 <DD> Definicin Trmino 1
<DT> Trmino 2 <DD> Definicin Trmino 2
</DL>
Tablas: <TABLE> </TABLE>
Permite dibujar una tabla. Es un objeto muy utilizado en las
pginas web, ya que permite organizar y clasificar la informacin.
TR: <TR> </TR> . Delimita una fila de la tabla.
TD: <TD> </TD>. Delimita una columna (o una celda)
dentro de una fila.
Permite diversos parmetros como:
<TABLE ....... <TR.......... <TD..............
Border: Border=valor. Establece el borde que delimita la tabla. Si es 0 (o no
aparece especificado) no dibuja borde.
Width: Width=valor%. Anchura en pxeles de la tabla, fila o celda (o en % de
la pantalla).
Height: Height=valor%. Altura en pxeles de la tabla, fila o celda (o en % de
la pantalla).
Bgcolor: Bgcolor=color. Color de fondo de la tabla, fila o celda
BorderColor: Bordercolor=color. Color del borde de la tabla y el borde de las
celdas.
Background: Background=fichero. Imagen de fondo de la tabla. La imagen
prevalece sobre el color de fondo de toda la tabla, excepto en aquellas filas o
celdas donde se ha especificado un color diferente.
Align: Align=alineacin. Alinear la tabla horizontalmente en la pantalla (left,
right, center). Tambin para alinear el texto de dentro de una celda respecto de sta.
Left es el valor por defecto.
Valign: Valign=alineacin. Alinear el texto verticalmente dentro de una celda
(top, middle, bottom). Middle es el valor por defecto.
Cellspacing: Cellspacing=separacin. Cellspacing. Espacio de separacin entre
celdas de la tabla (0,1,2 )
Cellpadding: Cellpadding=separacin. Espacio de separacin (relleno) entre el
texto de la celda y el borde de sta.
Rowspan: Rowspan=numfilas. Une dos o ms filas en una.
Colspan: Colspan=numColumnas. Une dos o ms columnas en una.
Enlaces: <a href=Documento.htm>Texto que enlaza
</a>
Los enlaces pueden ser del tipo htm, e-mail, ftp,. en fin, cualquier
clase de fichero o programa.
Para saltar a un documento utilizamos la forma:
<a href=documento.htm>Texto que se resaltar</a>.
<a href=mailto:nombre@nada.com> Correo </a>
<a href=ftp://rutaDeUnServidorFTP>Bajar Ficheros</a>
<a href=c:\windows\system32\calc.exe>Calculadora</a>
Las comillas sern siempre necesarias en nombre largos con espacios
en blanco entre las palabras.
Si queremos saltar a una parte concreta de un documento, ya sea desde l
mismo o desde otro, hay que crear primero un ancla de destino de la forma:
<a name=destino> </a>.
Y para llamarlos, el enlace tiene que tener una # precedindole.
<a href=#destino>Ir a destino</a>
<a href=H0.htm#destino2>Ir a destino2 del documento H0.htm</a>
Los destinos (<a name=.>) no pueden estar repetidos en un documento,
para no crear ambigedad. No pueden tener espacios en blanco en el nombre,
ni utilizar caracteres especiales
Img: <img src=ficheroImagen>
Permite mostrar una imagen en el documento. Los parmetros que
lo configuran son los siguientes:
Alt: Alt=texto. Texto alternativo a la imagen, por si sta no pudiera cargarse.
Como siempre, si el texto tiene ms de una palabra separada por espacios en
blanco, son necesarias las comillas.
Align: Align=alineacin. Alineacin del texto respecto de la imagen. Puede
tener valores: top, bottom y middle. Tambin permite left y right pero es difcil
de controlar la posicin de la imagen respecto del texto adyacente. Un truco
muy utilizado es utilizar una tabla, que tenga como celda alguna imagen,
distribuyendo el texto alrededor de las otras celdas
Width: Width=numPixels%. Sin el % es la anchura en pxeles de la imagen;
con el % indica el porcentaje de escalado de la imagen.
Height: Height=numPixels%. Sin el % es la altura en pxeles de la imagen;
con el % indica el porcentaje de escalado de la imagen.
Hspace: Hspace=numPixels. Nmero de pxeles que se dejarn como espacio
horizontal entre la imagen y el texto adyacente.
Vspace: Vspace=numPixels. Nmero de pxeles que se dejarn como espacio
vertical entre la imagen y el texto adyacente.
Border: Border=numPixels. Grosor del borde de la imagen.
Las imgenes se utilizan frecuentemente junto a los enlaces:
Ej: Clickeando sobre la imagen abriremos la pgina indicada
<a href="http:\\www.carm.es\educacion">
<img border=0 src=J:\Imagenes\verona.jpg alt="foto de Verona">
</a>
Paneles: <Frameset> <Frame>
</Frame></Frameset>
Permite dividir el documento en marcos (zonas independientes en pantalla). NO
hay que colocar el tag BODY en el documento HTML.
Frameset:
<Frameset Rows=divisionHor1%, divisionHor2%, > </Frameset>.
<Frameset Cols=divisionVer1%, divisionVer2%, > </Frameset>.
Indica la geometra de los paneles en que se va a dividir la pantalla. Se indica una
divisin de tipo horizontal o de tipo vertical. Juntos no pueden ir, pero s se pueden
anidar.
BorderColor: BorderColor=Color. Indica el color del borde de la pgina.
FrameBorder: FrameBorder=Yes (valor por defecto), No. Indica si aparece borde o no.
Frame:<Frame src=pagina.htm> </Frame>.
Dentro de cada Frameset indicamos qu pginas van a situarse en cada panel.
Name: Name=Nombre. Nombre que se le da al panel. Se utilizar posteriormente
con los tags <target>
Scrolling: scrolling=Yes, No, Auto. Indica si se muestran las barras de
desplazamiento.
Yes: Aparecen, aunque no hagan falta.
No: No aparecen, aunque s hagan falta
Auto: Valor por defecto. Slo aparecen si hacen falta.
Noresize: Establece que el panel NO se puede redimensionar. Obviamente, influir
tambin en los paneles contiguos.
Target: <a href=pagina.htm target=MarcoDestino>
Para establecer un marco diferente al actual hay que hacerlo a travs del
tag Target.
<a href=OtraPagina.htm target=medio> Ir a Otra Pgina </a>
Como vemos, el atributo TARGET nos permite mostrar el resultado de un enlace en el

frame que queramos indicando el nombre de dicho frame. Existen, adems, ciertos
valores que puede tomar este atributo que tienen un significado especial:
TARGET="_blank" Fuerza que el documento referenciado por el enlace sea

mostrado en una nueva ventana del navegador.
TARGET="_parent" Este valor provoca que el documento sea mostrado en el
FRAMESET padre del frame actual.
TARGET="_top" Fuerza a que el enlace sea mostrado usando todo el espacio
de la ventana del navegador destruyendo toda estructura de frames. Este valor
debe ser usado siempre que creemos un enlace a una pgina externa a nuestro
sitio web.
Formularios: <Form> . </Form>
Permiten al usuario interactuar con la pgina, a travs de la introduccin de datos. Para ello se
utilizan controles muy tpicos en la programacin visual como son las cajas de texto, casillas de
verificacin, listas, etc.
Cada uno de estos controles se identificar con un nombre de variable .Cuando el formulario se
enva al programa de tratamiento, ste recibe el identificador de cada control y su valor
asociado.
El formulario es enviado al servidor cuando se pulsa un botn especial llamado de sumisin
(submit). Hasta entonces podemos movernos por el formulario sin que ocurra ningn suceso
externo a la pgina (no as interno). La marca <FORM> tiene la forma completa:
<FORM METHOD=metodo ACTION=url_del_script>,
donde mtodo puede tomar el valor get o post y url_del_script es la direccin del servidor
donde est el programa ejecutable que va a tratar el form.
Los elementos que pueden integrar un formulario son de tres tipos:
Clase <Input>: datos de entrada (campos de edicin y botones).
Clase <Select>: listas .
Clase <Textarea>: zona de edicin de texto libre.
Estos tendrn en comn dos atributos (ninguno de los dos es obligatorio):
o Name: indica el nombre de la variable.
o Value: especifica el valor de esa variable.
CLASE <INPUT>
Hay varios tipos de controles input. Se especifican mediante el atributo
Type
o Type=tipo
donde tipo puede ser: text, submit, image, reset, checkbox, radio,
password.
TEXT: Es una caja de texto. Es el tipo por defecto, por tanto no hace falta
especificarlo si queremos un control de esta clase.
o Size: Indica el tamao de la caja. Se mide en n de caracteres.
Maxlength: Indica el n mximo de caracteres.
<input type=text name=txtNombre value=Sin Nombre size=20
maxlength=15>
SUBMIT: Es el botn que origina el envo de todos los datos del

form.
<input type=submit name=Enviar value="ENVIAR DATOS">
IMAGE: Es un botn equivalente al de Submit, pero con una imagen. Se pulsa
sobre la imagen para generar el envo. Aqu el valor establecido en value no
tiene sentido.
o Src: Indica de dnde obtenemos la imagen.
o Width, Height: Anchura y altura de la imagen
<input type=image name=MiImagen src=winxp.gif width=200 height=60>
RESET : Restablece al valor por defecto que tienen todos los controles
(establecido en el campo Value). Slo borra los controles que estn dentro de
las marcas del formulario al que pertenece.
<input type=reset name=boton2 value="BORRAR DATOS">
CHECKBOX: Visualiza una casilla de verificacin. Se pueden tener varias

marcadas a la vez.
o Checked: El atributo checked hace que esa casilla est seleccionada
<INPUT TYPE=checkbox checked name=transporte1 value=coche>Coche
<br>
<INPUT TYPE=checkbox name=transporte2 value=moto>Moto
RADIO: Visualiza una casilla de opcin y escoge una nica opcin entre
varias, que son mutuamente excluyentes. Las opciones son mutuamente
excluyentes entre las que tienen el mismo nombre (propiedad name).
<INPUT TYPE=radio name=sexo value=hombre>Hombre <br>

<NPUT TYPE=radio checked name=sexo value=mujer>Mujer<br>
PASSWORD : Es similar a un tipo TEXT pero los caracteres escritos se

reemplazan por asteriscos (para introducir claves)
<INPUT TYPE=password size=15 maxlength=5 name=T1

value="Este texto no se vera">
CLASE <SELECT>
Permite definir listas de seleccin.
<SELECT NAME=... [SIZE=n][MULTIPLE]> ... </SELECT>

Declaracin de una lista seleccionable.
Size: indica la altura (n de lneas) de la lista.

Multiple indica si podemos hacer una seleccin mltiple de la lista.
<OPTION [SELECTED] [value=]>:
Establecemos cada uno de los tems que conforman la lista.
Selected: Indica si por defecto va a estar seleccionada esa opcin .
<select name=D1 multiple size=3>

<option selected value=1>Elemento1
<option value=2>Elemento2
<option selected value=3>Elemento3
<option value=4>Elemento4
</select>
CLASE <TEXTAREA>
- Ventana de texto libre.
<TEXTAREA NAME=... rows=m cols=n> ... </TEXTAREA>
Rows: Indica el n de filas que va a tener de altura el control.

Cols: Indica el n de columnas que va a tener de anchura.
<textarea name=S1 rows=5 cols=20>

Esto
est dentro
del
textarea
</textarea>
Como usar los datos de un formulario
Requiere la puesta en accin de unos programillas llamados CGIs , La etiqueta FORM
consta de un atributo llamado ACTION donde debemos especificar la direccin URL del
programa CGI donde deben enviarse los datos. Adems debe usarse otro atributo,
METHOD, para indicarle cmo se mandarn estos datos. Este atributo puede tomar dos
valores GET y POST; omitiendo todos los detalles, podemos decir que el primero se usa
con formularios pequeos, mientras que el segundo ser el escogido para formularios
donde la cantidad de informacin es grande.
Envo de datos usando correo electrnico

<FORM ACTION=mailto:milogin@midireccion.es ENCTYPE="text/plain"
METHOD="post">

</FORM>
La funcin del atributo ENCTYPE="text/plain" es enviar los datos sin ninguna codificacin.
Esto es conveniente para facilitar la lectura de los mismos
<?
mail($dire,texto asunto,$cuerpo);
?>
Envo de ficheros usando
formularios
En primer lugar debemos hacer uso del atributo ENCTYPE especificando que los
datos que se van a enviar desde este formulario al servidor sern de tipo
multipart/form-data, despus debemos usar ACTION para especificar la
direccin de un programa del servidor-
<FORM ENCTYPE="multipart/form-data"ACTION="http://www.miservidor.es/cgi-
bin/cogefichero">
<!-- ... --<
</FORM<
En lo que al control en s se refiere usaremos de nuevo la etiqueta INPUT, esta vez
con TYPE="file". El navegador lo mostrar como una caja de texto junto con un
botn que permitir al usuario buscar entre sus archivos el que quiere enviar. Un
ejemplo con el cdigo completo sera:
<FORM ENCTYPE="multipart/form-data ACTION="http://www.miservidor.es/cgi-bin/cogefichero">

Enviar el fichero:
<INPUT NAME="fichero_usuario" TYPE="file">
<INPUT TYPE="submit" VALUE="Enviar fichero">
</FORM>

Presen HTML

Uploaded by

Document Information

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

Presen HTML

Uploaded by

Copyright:

Available Formats

El Lenguaje HTML

Hypertext Markup Language

En <TITLE> se coloca la descripcin que aparecer en el

<b> Negrita </b>

Nota: Sin utilizar el texto preformateado, podemos usar la secuencia de

<a href=OtraPagina.htm target=medio> Ir a Otra Pgina </a>

Como vemos, el atributo TARGET nos permite mostrar el resultado de un enlace en el

TARGET="_blank" Fuerza que el documento referenciado por el enlace sea

SUBMIT: Es el botn que origina el envo de todos los datos del

CHECKBOX: Visualiza una casilla de verificacin. Se pueden tener varias

<INPUT TYPE=radio name=sexo value=hombre>Hombre <br>

PASSWORD : Es similar a un tipo TEXT pero los caracteres escritos se

<INPUT TYPE=password size=15 maxlength=5 name=T1

<SELECT NAME=... [SIZE=n][MULTIPLE]> ... </SELECT>

Size: indica la altura (n de lneas) de la lista.

<select name=D1 multiple size=3>

Rows: Indica el n de filas que va a tener de altura el control.

<textarea name=S1 rows=5 cols=20>

Envo de datos usando correo electrnico

<FORM ENCTYPE="multipart/form-data ACTION="http://www.miservidor.es/cgi-bin/cogefichero">

You might also like