Utilizamos cookies propias y de terceros para mejorar la experiencia de navegación, y ofrecer contenidos y publicidad de interés. Al continuar con la navegación entendemos que se acepta nuestra política de cookies.
Me imagino
que debemos estar con muchas ganas de esta clase, ya que veremos puntos
importantes para el desarrollo de un sitio web.
Anclas
Cuando
escuchamos hablar de anclas (anchor) nos estamos refiriendo a enlaces
o vínculos en el mismo documento html. No quiero decir en el mismo
sitio, sino en el MISMO HTML en donde esta el vínculo, esto es
muy normal cuando encontramos un índice en el top del html y los
párrafos a donde vinculo, están por debajo de este índice.
Realizaremos
un breve índice. Coloquen en el html tres lineas donde la primera
diga, IR A PÁRRAFO UNO, en la segunda línea dirá:
IR A PÁRRAFO DOS, y en la tercera pondrán obviamente IR
A PÁRRAFO TRES.
Por debajo
de este pequeño índice colocaremos un párrafo donde
tendrá por lo menos 100 líneas, y asi colocaremos el segundo
y el tercero, vale copiar y pegar jeje =0)
¿Listo?
¡Manos
a la obra!
Al comienzo
del primer párrafo vamos a colocar el siguiente código...
<a name="uno"></a>
Al comienzo
del segundo párrafo vamos a colocar el siguiente código...
<a name="dos"></a>
Al comienzo
del tercer párrafo vamos a colocar el siguiente código...
<a name="tres"></a>
y vamos a vincular
las líneas del índice:
<a href="#uno">IR AL PÁRRAFO UNO</a>
<br>
<a href="#dos">IR AL PÁRRAFO DOS</a><br>
<a href="#tres">IR AL PÁRRAFO TRES</a><br>
Cuando utilizamos
el tag a "href" que ya conocemos desde la clase pasada, veremos
que por medio de ese tag colocábamos la ruta y listo, cuando nos
encontramos con la ruta igual al del html donde estamos parados colocamos
solamente un # y contiguo el nombre de la marca que hemos colocado, en
este caso uno, dos y tres.
Tengamos
en cuenta que ahora que hemos colocado marcas en un html, también
podemos llamar a determinadas partes de un html en un vínculo o
link desde otro html, por ejemplo, estoy en un html pirulo y realizo
un link al parrafo tres del html, entonces cuando vinculo coloco lo siguiente...
<a href="anclas.html#tres">IR AL PÁRRAFO
TRES</a><br>
¿Notan
la diferencia? estoy indicándole normalmente el vínculo
a un html y agrego la marca del sector al cual quiero en especial de ese
html, en este caso el ancla tres.
¿Quién
no ha completado un formulario de subscripción, de consulta, de...de...?
Quien no lo haya realizado haga click
aqui y mande uno de prueba y eso es lo que armaremos ahora. =0P
Les
paso el código fuente de un formulario completito pero sin la opcion
de validar formulario, es decir sin el CAMPO OBLIGATORIO, ya que es por
medio de javascript y en otro curso veremos el desarrollo del mismo.
Como
verán en el código abrimos normalmente el html, colocamos
el título que deseamos, los meta, lo que uno quiera, en este formulario
no he colocado meta tags, luego en el body, le indico al html que necesito
"capturar" data que el usuario va a completar y por eso abro
el formulario con el tag form <form> y cuando terminamos el formulario
cerraremos con </form>.
Bien,
si desean mantengan abierto el formulario que tenemos de ejemplo asi vamos
observando lo que realizamos cada vez que incorporamos código,
primero leámos con atención el siguiente cuadro:
TAG FORM <FORM> </FORM>
Method
GET
(envía hasta 255 caracteres)
POST
(envía más de 255 caracteres)
Debo destacar que no es la única definición pero por
ser principiantes por ahora con esto nos basta par comenzar sin
complicaciones. =0O
Action
la
ruta del motor (cgi,pl) que nos va a manejar la data, a una base de
datos como a un correo electrónico. Ejemplo del formulario
en este curso, un cgi gratuito: action="http://www.melodysoft.com/cgi-bin/form.cgi"
(CAJAS DE TEXTO) TAG INPUT <INPUT> </INPUT>
Type
<input
type="text">, le indicamos que es para incorporar texto,
si es para password colocaremos, type=password.
name
<input
type="text" name="nombre"> nombre que asignaremos
al campo de texto para "ordenar y entender"y darle un nombre
a la variable.
size
<input
type="text" name="nombre" size="40">,
tamaño de caracteres que le damos al campo para que se vea
en el formulario.
maxlength
maxlength="8"
Significa que hasta 8 caracteres el usuario podrá ingresar
en el campo.
value
Texto
por defecto que tendrá la caja, por ejemplo.... ingrese su
nombre aquí.
(CAJAS
PARA COMENTARIOS)
TAG TEXTAREA<TEXTAREA> </TEXTAREA>
name
<textarea
name="comentario">, como indicamos antes, nombre de la
variable
cols
<textarea
name="comentario" cols="40">, columnas que
ocupará la caja del texto a ingresar.(en cantidad de caracteres,
por eso 40)
wrap
<textarea
name="comentario" cols="40" wrap="VIRTUAL">
ajuste de caracteres al final de cada línea de texto.
rows
<textarea
name="comentario" cols="40" wrap="VIRTUAL"
rows="3"> Filas que ocupará la caja de texto y
colocamos el numero de lineas, filas.
(CASILLAS
DE OPCIÓN)
es una variante del input type=RADIO
name
<input
type="radio" name="sexo">
value
<input
type="radio" name="sexo" value="femenino">
aquí le colocamos el valor activado, el usuario al marcar aquí,
veremos el valor como respuesta, en este caso, femenino
Si
tenemos varias opciones para que elija uno o solo uno podemos realizar
el radio, a todos en name le colocamos en mismo (sexo) como en el
formulario y en value la opcion que elije la persona (femenino o masculino.)
(CASILLAS
DE CHEQUEO)
es una variante del input type=CHECKBOX
Por
medio de este medio el usuario puede hacer tilde en uno o mas de uno,
por eso lo utilizamos por ejemplo en subscripciones, consultas, opciones
donde preguntamos para que respondan en varias respuestas a la vez.
(PEDIDO
DE PASSWORD)
es una variante del input type=PASSWORD
Campos
ocultos para guiar al cgi o al motor que utilicemos, estos por defecto
funcionan en el 99 % de los casos, estos no se ven salvo en el código
fuente del html.
Celdas
y celdas de cabecera: <td> y <th> (celda predeterminada por
html como cabecera).
atributos
ejemplo
y explicación
valign
<td width="20" height="30" valign="top">
alineamos
con la verticalidad que queremos, top, bottom o middle
rowspan
<td
rowspan="2"> esta celda ocupa dos líneas
colspan
<td
colspan="2"> esta celda ocupa dos columnas
width
<td width="20" height="30"> ancho
height
<td
width="20" height="30"> alto
bgcolor
<td
background="imagenes/fondo.jpg"> fondo de la celda de
color
background
fondo de la celda con una imágen
Un
ejemplo para que realicen. Pensemos lo siguiente: abrimos el tag tabla
y luego indicamos cuántas celdas deseamos en la tabla, así
vamos formando las filas...entonces luego de abrir el tag tabla, fijense
que habro el tag tr, significa, abro linea y abro celda con el tag Td,
cierro td, cierro tr y abro tr nuevamente y asi vamos formando la tabla,
por líneas y celdas, por consecuencia se van formando las columnas.
A
cada celda la puedo diferenciar con diferentes fondos, tipografías,
lo que uno desee, así que podemos pensar que se puede colocar un
fondo a la celda y un fondo a la tabla diferente entre si:
Cuando
deseamos que sea tipo un diccionario, un índice, abrimos con el
tag <dl> y en vez de <li> utilizamos <dt> y la definición
si fuera un diccionario sería con el tag <dd>:
Ejemplo
Veremos...
<dl>
<dt>Image & Art
<dd>Un sitio pensado para todos
<dt>Yahoo
<dd>Un portal
</dl>
Image & Art
Un sitio pensado para todos
Yahoo
Un portal
Nos
vemos en la próxima entrega donde veremos:
Frames o marcos, mapeo de imágenes, sonidos=)
Crear cuenta