C2 lenguaje html

Temas











2.1 Introducción.
2.2 Representación de documentos.
2.3 Tipos de datos básicos.
2.4 Estructura global de un documento.
2.5 Elementos básicos: texto, vínculos, listas,
tablas, objetos, imágenes y aplicaciones.
2.6 Estructura y disposición.
2.7 Formularios.

Indicadores
1. Introducción a HTML.
Reporte sobre leguaje de marcas HTML, sentencias básicas, las palabras
reservadas del lenguaje de marcas.
Prácticas de los elementos básicos del lenguaje de marcas, tales como: texto,
vínculos, listas, tablas.
Prácticas de los elementos básicos del lenguaje de marcas, tales como:
elementos multimedia.
2. Consideraciones importantes en HTML.
Practicas sobre el manejo de formularios.
Reporte sobre ejercicios de compatibilidad con diferentes navegadores web.
Ensayo sobre los estándares vigentes. De sitios web 3wc
3. Portafolio digital de evidencias
Evidencias: Introducción al HTML.
Evidencias: Consideraciones importantes en HTML.
Evidencias: Proyecto integrador

2.1 Introducción.
HTML : (“Hiper Text Mark Up
Language”)
Lenguaje para formatear texto con el
fin de distribuir documentos en
Internet. Basta un editor de texto
básico, como el worpad, notepad de
windows para escribir el código fuente,
interpretado por un navegador como
MS-internet Explorer 3.0, Navigator
3.0 o superiores.

2.1 Introducción.
Marcas
Las marcas delimitan elementos de un documento como cabeceras,
párrafos, etc y son utilizadas para dar un tratamiento diferente al texto
que se encuentre entre las marcas.
En HTML las marcas se delimitan con los signos < (inferior a) y >
(superior a). Un texto marcado tendrá por tanto este aspecto:
...texto normal <marca> texto afectado por la marca </marca> resto del
texto... Un ejemplo podría ser resaltar un texto en negrita, para ello se
emplea la marca <B> y quedaría de la siguiente forma: ...texto normal
<B> texto en negrita </B> resto del texto...

2.1 Introducción.
Atributos de las marcas
Algunas marcas pueden admitir atributos, pudiendo tener cada uno de
estos atributos un valor. Este valor ira entre comillas (") si dicho valor es
alfanumérico.
<marca atributo1=numerico atributo2="alfanumetrico"> Ejemplo:
<pre width=50>
<a href="/home/default.html">

2.2 Representación de
documentos.
Cabecera
La cabecera se emplea para facilitar información acerca del documento y
está delimitada por <HEAD> prólogo </HEAD>.
Dentro de la cabecera podemos destacar el título que indica el nombre
del documento <TITLE> </TITLE>.
<HTML>
<HEAD>
<TITLE> Bienvenido a nuestra guia rápida </TITLE>
</HEAD>
Cuerpo del documento
…</HTML>

documentos.
Cuerpo
El resto del documento residirá entre las marcas <BODY> y
</BODY>. Esta es la estructura mínima que que debe poseer todo
documento HTML:
<HTML><HEAD><TITLE>Bienvenido a la guia
rápida</TITLE></HEAD>
<BODY>
Documento...
</BODY></HTLM>

A continuación describiremos algunos elementos que pueden
aparecer dentro del cuerpo.

documentos.
Encabezado
Los encabezados se emplean para dividir los documentos en
secciones o mas concretamente para marcar los títulos de
esas secciones. Las marcas son del tipo <H#> título </H#>,
donde # puede ser un número cualquiera entre 1 y 6.
Tamaño mayor
<H1>Tamaño mayor</H1> Tamaño menor
<H6>Tamaño menor</H6>

<!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.0//EN">
<html>
<head> <title> MI PRIMERA PAGINA </title>
<META name="keywords" content="HTML,realización páginas
web">
<META name="descripcion" content="Mi primera portada ">
<META name="GENERATOR" content="BOC DE NOTAS Win95">
<META name="author" content="Nombre Apellidos">
<META HTTP-EQUIV="Refresh" content="5";url=pippo.htm>
</head>
<body>
TODO ESTO ES EL CUERPO DE LA PAGINA

</body>
</html>


DOCTYPE: Proporciona información al servidor de web
anfitrión de la página entregando los datos necesarios
para la
Comunicación entre el navegador y el servidor. (no es
Obligatorio) Su forma estándar es la siguiente:
HTML PUBLIC: El documento es público.
IETF: El tipo de HTML público está gestionado por la
Internet
Engineering Task Force.
DTD HTML 4.0: La versión de HTML soportada es la
4.0.
EN: El idioma del documento es el inglés.

META: Son cadenas de códigos que son las primeras que
leen
Los buscadores.
KEYWORDS: Las palabras clave son los términos que, de
manera resumida describen el contenido de una página
web.
AUTHOR: Autor de la página.
DESCRIPCION: Título que aparecerá tras la búsqueda.
GENERATOR: Nombre del editor que se ha generado el
Documento.
NOINDEX: Es cuando se desea que una página NO sea
Indicizada en los motores de búsqueda.
REFRESH: Refrescar la página cada cierto tiempo.

Lenguaje HTML
SEPARADORES DE BLOQUES
<P> (Separador de párrafos, sus atributos son left,
right, center).
<BR> (Salto de línea).
<BLOCKQUOTE> (Párrafos Tabulados).
<HR> (Línea Horizontal, atributos: noshade, width,
size, align).
<PRE> (Texto preformateado).
<CENTER> (Centrado de bloques)

Lenguaje HTML
Fondos y colores de texto
Un cierto número de atributos de la marca BODY permiten
controlar el
color del fondo de la ventana del browser, el color de los
caracteres del
texto, y finalmente el color de los enlaces:
< BODY atributo1 atributo2 atributo3 ... atributoN >
El atributo BGCOLOR
Este atributo permite escoger un color para el fondo de la
página
<BODY BGCOLORS="#rrggbb"> donde "rr" "gg" y "bb" son
valores hexadecimales comprendidos entre 00 y FF que
especifican el grado de saturación de los colores rojo, verde
y azul.
El atributo BACKGROUND

Lenguaje HTML
Fondos y colores de texto
El atributo TEXT
Permite controlar el color del texto estándar, es decir, todo texto
que no especifique un enlace.
<BODY TEXT="#rrggbb">
Los atributos LINK, VLINK y ALINK
Controlan el color de los enlaces:
LINK color del enlace que aún no ha sido visitado.<BODY
LINK="#rrggbb">
ALINK color muy fugaz que aparece cuando se hace clic
sobre el enlace <BODY ALINK="#rrggbb">
VLINK es el color de un enlace que ya ha sido visitado
<BODY VLINK="#rrggbb">

<html>
<head> <title> MI PRIMERA PAGINA </title>
<META name="keywords" content="HTML,realización páginas web">
<META name="descripcion" content="Mi primera portada ">
<META name="GENERATOR" content="BOC DE NOTAS Win95">
<META name="author" content="Nombre Apellidos">
<META HTTP-EQUIV="Refresh" content="5";url=pippo.htm>
</head>
<body bgcolor="#AEAEFF">
Tipo de letra <B>negrita</B>, letra <I>cursiva</I> y letra
<TT>courier</TT>.
<CENTER>Este texto está centrado</CENTER>
<P Align="left">Este texto está alineado a la izquierda</P>
<P Align="center">Este texto está centrado</P>
<P Align="right">Este texto está alineado a la derecha</P>
<font face="Arial“ size=3 color=#008000> texto... <font>

<h1>Cabecera tipo 1</h1>
Internet<img src="imagenes/internet1.jpg" width="98"
height="122">
<p> separador</p>
<ol>
<li>Fichero de imagen</li>
<li>Fichero de sonido</li>
<li>Fichero de video</li>
<ol>
</body>
</html>

2.4 Estructura global de un
documento.

1. Formato Texto
El formateo del texto, o sea, el formato del texto, son una serie de
etiquetas que escribimos en html rodeando la palabra o el texto y que
transforman ese texto en el formato que nosotros le hemos querido
dar.
Negrita

Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La
utilización de cualquiera de ellas es indiferente. Puedes usar la que
prefieras.

La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un
Este palabra la vamos a poner en <b>negrita</b> y esta otra
ejemplo:
<strong>también</strong>
Este palabra la vamos a poner en negrita y esta otra también

Texto
Cursiva: Para escribir un texto en cursiva debemos utilizar la etiqueta
<i> (y por supuesto cerrarla con la etiqueta </i>).
También podemos utilizar la etiqueta <em>. Como en el caso de la
negrita, es indiferente el uso de una u otra. Aquí os dejo un ejemplo:
Este palabra la vamos a poner en <i>cursiva</i> y esta otra
<em>también</em>
Este palabra la vamos a poner en cursiva y esta otra también

Texto
Subrayado: Si queremos que la palabra o el texto quede subrayado,
deberemos rodearlo con la etiqueta <u> y cerrarlo con su
correspondiente etiqueta. O sea, </u>. Así subrayaríamos una frase
importante:

<u>Así subrayaríamos una frase importante</u>
Así subrayaríamos una frase importante

Texto Cabeceras
<h6>Cabecera tipo 6</h6> :
Atributo face
Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a
partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran
completamente y muestran el texto con la fuente que utilizan.

Color, tipo de letra y tamaño
Atributo face
Define el tipo de letra. Este atributo es interpretado por versiones de
Netscape a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las
ignoran completamente y muestran el texto con la fuente que utilizan.
<font face="Comic Sans MS,arial,verdana">Este texto tiene otra
tipografía</font>
face="Comic Sans MS,arial,verdana"

Atributo size
Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo.Si
hablamos en términos absolutos, existen 7 niveles de tamaño distintos
numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor
size="1" para la letra más pequeña o size="7" para la más grande.
<font size=4>Este texto es tamaño 4</font>
<font size=12>Este texto es tamaño 12</font>

Atributo color
El color del texto puede ser definido mediante el atributo color. Cada color
es a su vez definido por un número hexadecimal que esta compuesto a su
vez de tres partes. Cada una de estas partes representa la contribución del
rojo, verde y azul al color en cuestion.

<font color="red">Este texto está en rojo</font>
<font color="#FF0000"> Este texto está en rojo </font>

2. Formato Parrafos
Para indicarle al navegador que queremos poner ese texto en un párrafo,
debemos escribirlo entre las etiquetas <p> y su cierre </p>.
Así el texto quedará dentro de un párrafo, separado por un espacio en
blanco por encima y uno por abajo.
El texto del párrafo lo puedes alinear utilizando la etiqueta align utilizando
los parámetros “center” (para alinearlo al centro), “right” (para alinearlo a la
derecha), “left” (para alinearlo a la izquierda) y “justify” (para justificar el
texto).
Un ejemplo de esta etiqueta con sus respectivos parámetros es el
siguiente:
<p align="center">Este texto se alineará al centro</p>
<p align="right">Este texto se alineará a la derecha</p>
<p align="left">Este texto se alineará a la izquierda</p>

Parrafos saltos de linea
Existen dos etiquetas para indicar que queremos hacer un salto de línea
normal. Son las etiquetas <br> y <br/> ambas son interpretadas igual por el
navegador. Esta etiqueta no hace falta abrirla y cerrarla, sólo con escribirla
el navegador ya la interpreta.

<p > Este texto estará en la primera fila<br/>
Este texto estará en el centro <br/>
Este texto estara a lo ultimo</p>

3. Tablas
Una tabla en html viene marcada por las etiquetas <table> </table>.
Entre esas dos etiquetas definiremos la tabla, las celdas que
queremos, las columnas y las características de cada uno de estos
parámetros. Pero vamos a empezar explicándote la etiqueta <table>.
Ya hemos dicho que esta etiqueta nos indica que empieza una tabla,
pero… ¿podemos predefinir características de esa tabla? Por
supuesto que sí. Una tabla admite muchos parámetros. Nosotros
vamos a explicarte los principales.


La tabla: <table>
Como ya ocurre con la etiqueta body, a una tabla también lo podemos
definir el fondo de la misma. Esto lo podemos conseguir con el
parámetro "bgcolor", que nos pondrá un color de fondo, o "background"
para poner una imagen de fondo. Recuerda que si la imagen es más
pequeña que la tabla, ésta se repetirá tanto a lo ancho como a lo largo.
<table width="100%" border="1" bordercolor="#0000FF"
cellspacing="0" cellpadding="0">
<tr>
<td>holaa</td>
<td>holaa2</td>
</tr>
</table>

Tablas
Las filas: <tr>
Como hemos visto en el encabezado las filas se escriben gracias a las
etiquetas <tr> con su correspondiente cierre </tr>. El contenido de las
columnas que están dentro de la fila lo podemos alínear tanto horizontal
como verticalmente.
Para alinearlo verticalmente utilizaremos el atributo "valign" para poder
alinearlo arriba de la celda ("top"), en el centro ("middle") o debajo
("bottom").
Para alinearlo horizontalmente utilizaremos el atributo "align". Con este
atributo podremos alinear el contenido de las celdas en el centro
("center"), a la izquierda ("left"), a la derecha ("right") o justificado
("justify").
Por supuesto a las filas también les podemos definir el color de fondo
("bgcolor") y el color del borde ("bordercolor").

Tablas
Las celdas <td>
Las celdas que van dentro de cada fila las tenemos que escribirlas con la
etiqueta <td> y su correspondiente cierre </td>.
Al igual que en las filas, en las celdas podemos definir el la alineación del
contenido que está dentro con los atributos "valign" y "align".
Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas
celdas o tantas columnas como indiquemos en él. Para agrupar celdas
utilizaríamos el atributo "colspan" y para agrupar celdas el atributo
"rowspan".
Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir:
<td colspan="2"></td>. Y para agrupar dos filas, la indicación sería la
siguiente: <td rowspan= "2"></td>.

4. Listas
Listas no ordenadas: <ul>Las listas no ordenadas van dentro de la
etiqueta <ul> y de su cierre </ul>. Cada punto que queramos añadir a
la lista, lo haremos dentro de la etiqueta <li> y su cierre.

<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>

Listas ordenadas: <ol>
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol>
</ol>. Cada punto de la lista se escribe con la misma etiqueta que en
las no numeradas: <li>. Pero al ser listas ordenadas los símbolos
serán números y éstos se irán generando automáticamente por orden,
conforme escribamos nuevos puntos.
En las listas ordenadas podemos hacer que el primer punto comience
con el número que nosotros queramos. Lo conseguiremos gracias al
atributo “value”. Los siguientes puntos que escribamos se generarán
automáticamente por orden, partiendo de ese número.

<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>
</ol>

5. Objetos
Insertar objetos: <object> y <param>
La etiqueta <object> permite insertar cualquier tipo de documentos (no
solamente de texto) dentro de un documento html. Para poder mostrar
esos archivos, el navegador suele necesitar plug-ins. Algunos tipos de
documentos necesitan información adicional que se proporciona mediante
la etiqueta <param>.
Ejemplos de inserción de objetos
Insertar una página web
Se puede insertar una página web en una
página web mediante la etiqueta <object>,
como muestra el siguiente ejemplo.

5. Objetos
Insertar una página web
Se puede insertar una página web en una página web mediante la
etiqueta <object>, como muestra el siguiente ejemplo.
<object type="text/html"
data=“objeto_pagina.html"
style="width: 400px; height:200px;" >
ERROR (no puede mostrarse el objeto)
</object>
Deberá crear un archivo de html llamado objeto_pagina.html para mandarlo
llamar

2.5 Elementos básicos: texto, vínculos,
listas, tablas, objetos, imágenes y
aplicaciones.
5. Objetos
Insertar un mapa de google

<object type="text/html"
data="http://maps.google.es/maps?f=q&sou
rce=s_q&
hl=es&geocode=&q=ies+abastos&
ie=UTF8&cid=11271517402525668942&am
p; s=AARTsJqO2-JJ63RN_BaPYqsXhy19WrrDw& ll=39.477148,0.382204&spn=0.023188,0.036478&
z=14&iwloc=A&output=embed"
</object>

aplicaciones.
5. Objetos
Insertar un archivo PDF
Se puede insertar un archivo PDF en cualquier página web, como muestra el
siguiente ejemplo. Para insertar otro archivo PDF habría que indicar la URI del
archivo mediante el atributo data (en el ejemplo, es simplemente ejemplo.pdf).
<object
type="application/pdf"
data="pdf/programacion_web.pdf"
style="width: 400px; height: 550px;" >
</object>

aplicaciones.
5. Objetos
nsertar un vídeo de YouTube
Los vídeos de YouTube están en formato Flash, por lo que se pueden insertar
en una página web mediante la etiqueta <object>, como muestra el siguiente
ejemplo. Para insertar otro vídeo habría que sustituir el código del vídeo en el
atributo data (en el ejemplo, el código del vídeo es vZV-t3KzTpw).
<object type="application/x-shockwave-flash"
data="http://www.youtube.com/v/vZV-t3KzTpw"
<param
name="movie" value="http://www.youtube.com/v/vZVt3KzTpw" />
</object>

6. Imágenes
Atributos de IMG
Los atributos de la imagen pueden ser los siguientes:
ALT="Texto que aparece al situar el cursor sobre la imagen“
También muestra este mismo texto en caso de que el navegador no cargue la imagen.

ALIGN= Nos indica la posición de la imagen respecto del texto. Después del signo igual, pueden i
valores: TOP , MIDDLE, BOTTOM, LEFT y RIGHT .

WIDTH=80, HEIGTH=100: Indican la anchura y altura de la imagen en píxels, en este caso 80x10
píxels.
BORDER=2 Añade un borde, a modo de marco, a la imagen. En este caso de 2 píxels.

HSPACE=10 , VSPACE=15 Especifican el espacio horizontal y vertical que separa la imagen del t
que la rodea, en este caso 10 píxels horizontales y 15 verticales

6. Imágenes
Anchura del borde [border-width]

Color del borde [border-color]
La propiedad border-color define el color del borde. Los valores de esta
propiedad son los valores de color normales, por ejemplo, "#123456" (en
notación hexadecimal), "rgb(123,123,123)" (en notación RGB) o "yellow" (por
nombre del color).

6. Imágenes
Estilo de borde [border-style]
Se puede elegir entre diferentes estilos de borde. Más
abajo se muestran 8 estilos de borde según los interpreta
Internet Explorer 5.5. Todos los ejemplos se muestran con
el valor del color a "oro" y el valor de la anchura a "thick",
pero se pueden mostrar, por supuesto, en otros colores y
grosores
<img src="imagenes/paisaje4.jpg"
width="259" height="194" border="8"
style="border-color:#900; borderstyle:dashed" />

6. Imágenes
<img src="paisaje4.jpg" width="259" height="194" border="8"
aling="bottom" vspace="10" hspace="10" alt="la playa" />
<br />
vspace="10" hspace="10" alt="Cascada" style="border-color:#9C0;
border-style:dashed; aling:middle" />
<br />
aling="bottom" vspace="10" hspace="10" alt="el puente" style="bordercolor:#09F; border-style:groove" />

<div align="center"><img src="paisaje4.jpg"></div>

2.7 Formularios.




Los formularios interactivos permiten a los
autores de páginas Web poner elementos
interactivos en sus páginas, por ejemplo, para
recibir mensajes de sus lectores, de forma similar
a las cartas de respuestas que se encuentra en
algunas revistas.
El lector escribe la información rellenando
campos o haciendo clic sobre botones, y luego
presiona un botón de envío para enviarla a una
dirección URLque se suele dirigir a una dirección
de correo electrónico o a un script dinámico Web
como PHP, ASP o CGI.

2.7 Formularios.









La etiqueta FORM
Los formularios están delimitados con la etiqueta <FORM> ...
</FORM>, que permite reunir varios elementos de formulario, como
botones y casillas de texto y que debe poseer los siguientes
atributos:
METHOD indica cómo se enviarán las respuestas
"POST" es el valor que envía los datos al agente de procesamiento
almacenándolos en el cuerpo del formulario, en tanto que "GET"
envía los datos agregándolos a la dirección URL y separándolos de
la dirección con un signo de interrogación (para aprender más
sobre los métodos POST y GET.
ACTION indica la dirección a la que se enviará la información (un
script CGI o dirección de correo electrónico
(mailto:dirección_de_correo_e@equipo))
Un atributo opcional de la etiqueta FORM es ENCTYPE, que
especifica cómo se codifican los datos del formulario. De cualquier
forma, esto no necesita especificarse, ya que el valor
predeterminado (application/x-www-form-urlencoded) es el único
valor válido. El atributo opcional ACCEPT se usa para
establecer tipos MIME para los datos que el formulario puede

2.7 Formularios.


La etiqueta FORM

Esta es la sintaxis para la etiqueta FORM:
<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-wwwform-urlencoded"> ... </FORM>
Aquí hay algunos ejemplos de las etiquetas FORM:
<FORM METHOD=POST
ACTION="mailto:webmaster@commentcamarche.net">

<FORM METHOD=GET
ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi">

2.7 Formularios.
Dentro de la etiqueta FORM


La etiqueta FORM actúa como una especie de contenedor para
almacenar elementos que permiten al usuario seleccionar o introducir
datos. Todos los datos se enviarán a la dirección URL indicada en el
atributo ACTION de la etiqueta FORM, por el método indicado en el
atributo METHOD.
Se puede insertar cualquier elemento HTML en una
etiqueta FORM (como texto, botones, tablas y enlaces), pero los
elementos interactivos son los más interesantes. Estos elementos
interactivos son:

•La etiqueta INPUT: Todos los botones y casillas de texto
•La etiqueta TEXTAREA: una casilla de texto
•La etiqueta SELECT: una lista de opciones múltiples

2.7 Formularios.


Envío de datos

Cuando se envía un formulario (haciendo clic en el botón de envío), los
datos del formulario se envían a un script CGI bajo la forma de pares
nombre/valor, es decir conjuntos de datos representados por el nombre
del elemento formulario, un signo igual ("=") y luego el valor asociado.
Estos pares nombre/valor se separan unos de otros mediante el
símbolo de unión ("&"). Por lo tanto, los datos que se envían al script se
verán así:
campo1=valor1&field2;=valor2&field3;=valor3
Con el método GET (enviar los datos mediante una dirección URL), la
URL será una cadena como la siguiente:
http://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2

2.7 Formularios.


La etiqueta INPUT

La etiqueta INPUT es una etiqueta esencial para los formularios, ya
que se usa para crear muchos elementos “interactivos”. La sintaxis de
esta etiqueta es la siguiente:

<INPUT type="Nombre de campo" value="Valor predeterminado"
name="Nombre de elemento">El atributo name es esencial, ya que
permite al script CGI reconocer qué campo está asociado con un par
nombre/valor, lo que significa que el nombre del campo estará seguido
de un signo igual ("=") seguido de un valor que el usuario introdujo, o si
el usuario no introdujo ningún valor, por el valor predeterminado de la
etiqueta value.

2.7 Formularios.


La etiqueta INPUT

El atributo type se usa para especificar qué tipo de elemento se
representa con la etiqueta INPUT. Estos son los valores posibles:
checkbox: Las casillas de elección pueden adoptar uno de dos
estados: checked (seleccionado) o unchecked (no seleccionado).
Cuando la casilla es seleccionada, el par nombre/valor se envía al
CGI.
hidden: Este campo, que el navegador no muestra, es para definir
una configuración única que se enviará al CGI como par
nombre/valor.
file: Un campo que permite al usuario especificar una ruta de archivo
que lleva al archivo que se enviará con el formulario. Los tipos de
archivo que pueden ser enviados deben especificarse utilizando el
atributo ACCEPT de la etiqueta FORM.

2.7 Formularios.


La etiqueta INPUT

image: Un botón de envío personalizado que aparece cuando se
ubica una imagen en la ubicación definida por el atributo SRC.
password: Una casilla de texto donde los caracteres escritos
aparecen como asteriscos para camuflar el texto de entrada.
radio: Un botón que permite al usuario elegir entre varias opciones.
Cada uno de estos botones debe tener el mismo atributo name. El
par nombre/valor del botón radio seleccionado se enviará al CGI. Al
aplicar el atributo checked para uno de estos botones se definirá
como seleccionado de forma predeterminada.

2.7 Formularios.


La etiqueta INPUT

reset: Un botón de restauración para quitar todos los elementos en
el formulario y restablecer sus valores predeterminados.
submit: Un botón de envío para enviar el formulario. El texto en el
botón puede definirse usando el atributo value.
text: Una casilla de texto para escribir una línea de texto. El tamaño
de la casilla puede definirse usando el atributo size y la extensión
máxima del texto con el atributo maxlength.

2.7 Formularios.
La etiqueta TEXTAREA


La etiqueta TEXTAREA se usa para definir un cuadro de texto más
grande que la línea simple propuesta por la etiqueta INPUT. Esta
etiqueta tiene los siguientes atributos:

cols: representa el número de caracteres que puede contener un
línea
rows: representa el número de líneas
name: representa el nombre asociado con el cuadro de texto, que
permite su identificación en el par nombre/valor.
readonly: impide que el usuario modifique el texto predeterminado
en el campo
value: representa el valor predeterminado que se enviará al script si
el usuario no ha escrito nada en el cuadro de texto

2.7 Formularios.


La etiqueta SELECT

La etiqueta SELECT sirve para crear una lista desplegable de
elementos (especificados por las etiquetas OPTION dentro de ella).
Los atributos de esta etiqueta son:
name: name: representa el nombre asociado con la casilla de texto,
que permite su identificación en el par nombre/valor.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el número de líneas de la lista (este valor puede ser
más grande que el número de elementos reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista

Ejemplo

<FORM method=post action="formulario.html">
Registro de un usuario
<TABLE width="346" BORDER=0>
<TR>
<TD width="140">Apellido</TD>
<TD width="196">
<INPUT type=text name="apellido">
</TD>
</TR>
<TR>

7. Formularios

<TD>Nombre</TD>
<TD>
<INPUT type=text name="nombre">
</TD>
</TR>
<TR>
<TD>Género</TD>
<TD>
Masculino: <INPUT type=radio name="género" value="M">
<br>Femenino: <INPUT type=radio name="género" value="F">
</TD>
</TR>
<TR>
<TD>Ocupación</TD>
<TD>
<SELECT name="ocupación">
<OPTION VALUE="profesor">Profesor</OPTION>
<OPTION VALUE="estudiante">Estudiante</OPTION>
<OPTION VALUE="ingeniero">Ingeniero</OPTION>
<OPTION VALUE="jubilado">Jubilado</OPTION>
<OPTION VALUE="otro">Otro</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Comentarios</TD>
<TD>
<TEXTAREA rows="3" name="comentarios">
Escriba aquí sus comentarios</TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
Enviar <INPUT type="submit" value="Enviar">
</TD>
</TR>
</TABLE>
</FORM>

2.7 Formularios.


Atributos de formulario y entradas

Enviar

C2 lenguaje html

Más contenido relacionado

La actualidad más candente

Destacado

Similar a C2 lenguaje html

Más de Alejandro Hernandez

Último

C2 lenguaje html