Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
e incluso
sonidos.
Dinmica: la informacin aunque este almacenada, puede ser actualizada por el que
la public, sin que el usuario deba utilizar su soporte tcnico.
Resultado
,
,
Caracteres de control: en HTML existen 4 caracteres de control que se usan para formar
etiquetas, establecer parmetros, etc. Para poder emplearlo debemos escribir el siguiente
cdigo.
Cdigo
<
>
&
"
Resultado
<
>
&
Ahora vamos a crear nuestra primera pgina en la que vamos a empezar a utilizar etiqueta y
atributos, para ellos vamos a utilizar el bloc de notas.
Marca
<html>: lo primero que tenemos que indicar es que el texto que estamos
Utilidad
Permite definir un grafico de fondo para la pantalla
Permite definir el color de fondo de la pgina
Cuando es igual a Fixed el grafico definido como fondo de la
pgina permanecer inmvil aunque utilicemos las barras de
text
link
Vlink
Alink
desplazamiento
Cambia el color del texto
Cambia el color de un enlace no visitado (por defecto azul )
Cambia el color de un enlace ya visitado (por defecto purpura)
Cambia el color que toma un enlace mientras lo estamos pulsando
Leftmargin y topmargin
Prrafo: inserta automticamente con un salto de lnea al final del prrafo y crea el espacio
entre los prrafos de nuestro documento el atributo es <p>.</p>.
Los atributos ms importante que podemos utilizar dentro de un prrafo son:
Etiqueta
<p> </p>
Utilidad
Sirve para delimitar un prrafo insertar una lnea en blanco
<center></center>
<pre width= X> </pre>
<address></address>
<blockquote></ blockquote >
<BR>
Utilidad
Texto en negrita
Texto en cursiva
Subraya el texto
Tacha el texto
Representa al texto en otro tipo de letra paso fijo
Letra en superindice
Utilidad
Letra subndice
Incrementa el tamao de la letra
Disminuye el tamao de la letra
Formato de fuente
<font face=arial> tipo de letra </font>
<font color=blue> color de la letra</font>
<font size=14> tamao de la letra </Font>
Imgenes en una pgina. Background: permite definir una imagen de fondo en pantalla.
Para incluir imgenes en nuestra pgina utilizamos la etiqueta<img> de esta manera.
<img src=imagen. Alt= descripcin>
DATOS PERSONALES
Nombre..
Apellido.
Telfono
Direccin
E-mail.
Existen varios tipos de lista en HTML y todas ellas se pueden meter una dentro de otras.
Formando arboles
Todos los tipos tienen el siguiente formato
<tipo-lista>
<li> primer elemento </li>
<li> segundo elemento </li>
<tipo-lista>
Lista desordenadas: la etiqueta <ul> nos permite presentar lista de elementos sin orden
alguno esta etiqueta admite los siguientes atributos
Parmetro
Type= disc , circle , square
Utilidad
Indica al navegador el dibujo que proceder a cada
elemento de la lista. Tambin se admite como parmetro de
<li>
Ejemplo
<ul><b>lista desordenada</b>
<li>primer elemento</li>
<li>segundo elemento</li>
</ul>
<ul type=circle><b>lista desordenada circulo</b>
<li>primer elemento</li>
<li>segundo elemento</li>
</ul>
Lista ordenadas: la etiqueta <ol> nos permite presentar listas de elementos ordenados de
menor a mayor. Los elementos de la lista ira precedido normalmente por un nmero.
Esta etiqueta <ol>admite esto parmetro
Parmetro
Type=1, a, A, i, I
Utilidada
Indica al navegador el tipo de numeracin que preceder a cada
Start=num
Value=num
Lista anidadas:
<ul>
<li>UNO<ul>
<li>uno</li>
<li>dos</li>
</ul>
</li>
<li>DOS</li>
<li>TRES</li>
</ul>
Capitulo V: FRAMES
Un marco es una ventana independiente dentro de la ventana general del navegador. Cada marco
tendr sus bordes y su propia barra de desplazamiento.
Para crearlo necesitaremos un documento HTML especifico, el cual contiene los marcos
FRAMES y la que hace los llamados a los otros.
Deber existir o se creara una segunda pgina (a modo de ejemplo) la cual llamaremos
men.html y la que har los llamados a las distinta pginas
Crearemos otra a la que llamaremos principal, en donde se visualizara los llamados que se
haga desde la pgina men.html
Ejemplo
<html>
<head> <title> primera pagina con marco</title></head>
<frameset cols=20%,80%>
<frame name= menu src= men.html>
<frame name= principal src= principal.html>
</frameset>
</html>
Frameset: se sustituye el <body> por el <frameset> el cual se divide la ventana actual (sea la
general o un marco) en varias ventanas definidas o por el parmetro cols, rows este separado
por comas, se define el nmero de marco y el tamao de cada uno.
Frame: define las caractersticas de un marco los parmetros que admite son los siguientes:
Parmetro
Name
Utilidad
Asigna nombre a un marco para que despus podramos
Src
Scrolling
referirnos a el
Indica la direccin del documento
Decide si se coloca una barra de desplazamiento . su valor
por defecto auto.
Noframes= define lo que vera el usuario en caso que el navegador no soporte frame.
Enlace gracias al parmetro target podemos ubicar los llamados. Lo hacemos de la siguiente forma
<a href= pagina.html target= principal>
Ejemplo utilizando cols y rows
<frameset cols= 20% , 80%>
<frame name= indice src= indice.html>
<frame rows= *,80%>
<frame name= principal src= introduccion.html>
<frame name ejemplo src= ejemplo.html>
<frameset rows= 15%, *,75>
</frameset>
</frameset>
Captulo VI: TABLAS
Las tablas son las forma ms clara de organizar la informacin, tambin es el modo mas adecuado
para maquetar textos y grficos. De una manera mas controlada que con los parmetros align.
Una tabla es un conjunto de filas y columnas organizadas que forman una celda
La marca: <table> </table>
Las tabla se define de la siguiente manera: primero, las caracterstica de la tabla, luego la de cada
fila y dentro de esta, cada celda.
Ejemplo
<table>
<tr>
<td> primera celda</td>
<td>segunda celda</td>
</tr>
<tr>
<td> ahora estoy en otra fila</td>
</tr>
Parmetro y utilidad de la tabla<table>
Parmetro
Border
Cellspacing
Cellpading
Utilidad
Especifica el grosor del borde de la tabla
Define el nmero de pixeles que separara la celda
Define el nmero de pixeles haba entre el borde de una
celda y su anchura
Especifica anchura de la tabla
Alinea la tabla ((left), (right) o (center))
Width
Align
Utilidad
Alinea el contenido ((left), (right) o (center))
Alinea el contenido de las celdas verticalmente arriba
(top), abajo (bottom) o centro (middle)
Utilidad
Alinea el contenido ((left), (right) o (center))
Alinea el contenido de las celdas verticalmente arriba
Width
Nowrap
Colspam
espacio
Especifica el nmero de celdas de fila que se sita a la
Rowspam
derecha
Especifica el nmero de celdas de columna situada debajo
de la actual que se une a esta
La marca <form> </form> todos los elemento de un formulario deben estar encerrado entre
esta marca. Caben destacar tres parmetros
action define el URL que deber gestionar el formulario, puede ser una
direccin de correo, en cuyo caso se deber aadir el parmetro ENCTYPE= text/
plain para que lo que recibamos resulte legible.
El control <Input> lo utilizamos como un campo de entrada de datos, los atributos vendrn
dados por el atributo type que determinara el tipo del campo de entrada.
Marca <text> permite al usuario a introducir texto en nuestro campo del formulario.
<input type= text>
<input type= password> permite introducir texto pero con la diferencia que no se muestra.
Atributo para modificar
Parmetro
size
maxlength
value
utilidad
Tamao de la caja de texto
Nmero mximo de caracteres a introducir el usuario
Texto por defecto que contendr la caja
Textarea: cuando el usuario va a introducir mas de una lnea dentro de una caja de texto
utilizaremos la siguiente etiqueta:
<textarea rows=6 cols=35> aqu se escribe el texto</textarea>
Hidden
<input type= hidden name=curso de. Value=html>
Botones submit y reset:
El boton submit se utiliza para mandar al formulario.
El botn reset para limpiar todo lo que haya mandado el usuario.
<input type=submit>
<input type=reset>
Checkbox: es una casilla de verificacin, representa una opcin, si o no. Son distinta
opciones con el mismo nombre que representa un campo de seleccin mltiple.
Si incluimos el atributo checked estaremos indicando que el estado inicial de ese campo
es seleccionado.
Ejemplo
<h1> que maraca de coche prefieres: </h1>
<input type= checkbox name= coche_ferrari value=Ferrari checked> ferrari
<input type= checkbox name= coche_porsche value=porsche checked> Porsche
<input type= checkbox name= coche_toyota value=toyota checked> Toyota
Radio: para que el usuario decida entre varias opciones
<input name= respuesta type= radio value= mal> <BR>
<input name= respuesta type= radio value= bien> <BR>
<input name= respuesta type= radio value= regular> <BR>
Nota: para asociar varios botones a una misma variables les pondremos a todas ellos el
mismo name, tambin se puede utilizar el parmetro checked para que se active el
botn por defecto.
Image: un grafico tambin se puede declarar como elemento de entrada ejemplo
<input type=image src=image.gif alt=pulsa>
Este elemento se comportara del mismo modo que el botn submit.
Campos de seleccin
<select> y <option>
El <select> se utiliza para realizar lista de valores desplegables para emplearla debemos
utilizar dos etiquetas.
Ejemplo
< select name= navegador>
<option>netscape
<option>explorer
<option>opera
<option>lynx
<option>otro
</select>
IFRAME : es un marco flotante que puede estar colocado en cualquier parte de la pgina.
La ventaja que tiene sobre los frames o marcos tradicionales es que se puede colocar donde
sea necesario, sin partir la pgina en varias partes y adems puede ser dinmico.
<table>
<tr><td><iframe name=miframe flotante src= menu.html width= 700 height= 550
frameborder=
scrolling=
yes
margin
width=2
margin
height=4
align=left>.</iframe></td></tr></table>
NOTA: para que la dems pgina se carguen en el iframe debern colocarse de la siguiente
manera.
<a href= prueba target= miframe flotante> inicio