HTML 5
Recomendaciones sobre el presente Manual.
• Puedes probar todos los ejemplos, copiando el código y pegando ese código
en un documento nuevo en el bloc de notas de windows , guarda el archivo con
el nombre que nombre.html (extensión .html), ejemplo “hola.html”.
• Se recomienda que al crear el Micro Sitio web , guardes todos los
archivos.html, las imágenes, videos, etc en una sola carpeta, así mismo la
página principal del micro sitio web debe tener el nombre de “Index.html”.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
HTML 5
HTML es un lenguaje informático que se utiliza para crear
e interpretar documentos de texto e imágenes, conocidos
popularmente como páginas web.
Su nombre se deriva del acrónimo Hyper Text Markup
Language (Lenguaje de marcado de hipertexto) y
nos permite escribir texto de una manera estructurada
mediante etiquetas que marcan el inicio y el fin de cada
elemento del documento lo que hace a éste un lenguaje
completamente semántico, es decir, que no definimos el
aspecto de las cosas, sino lo que significan.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
La palabra hipertexto quiere decir "texto
que contiene enlaces" por lo que cada
que visitas un sitio web y das clic en una
palabra, haz hecho clic en un hipertexto.
En la actualidad un documento de
hipertexto es considerado un
documento multimedia ya que puede estar
constituido por imágenes, audios, videos,
etc.
Html se basa en las llamadas etiquetas o
(tags) encerradas entre los signos de < >.
Generalmente en pares de etiquetas con
algunas excepciones.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Html 5 Es la quinta revisión del estándar de
HTML
Estructura básica de un página web.
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
<!DOCTYPE html>
Está etiqueta especifica al navegador de qué
tipo de documento se trata.
Es parte del estándar y es recomendable
usarla.
<html> </html>
Indica inicio y fin del documento
<head> </head>
Es la cabecera del documento si es necesario
agregarla ya que en ella reside la información
del documento (título de la página).
<body> </body>
Obligatoria en ella reside todo el contenido
visible de la página.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiquetas dentro de la etiqueta <head>
</head>
<title> Título de la página </title>
Contiene el título de la página web.
<meta> Contiene información importante para
un buscador. Esta etiqueta no se cierra.
<meta name=“description” content=“Sitio web
de programación multimedia” />
<meta name=“author” content=“Lotzy chiu”/>
<meta name=“keywords”
content=“programación multimedia”/>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Estas etiquetas sirven para que los buscadores (como
Google, Bing, etc.) puedan consultar la información de la
página y así buscar coincidencias con lo que el usuario
pretende encontrar.
A través de esta etiqueta pueden especificarse los atributos
name y content. El atributo name indica el tipo de
información, y el atributo content indica el valor de dicha
información.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Tipo Significado
author Autor de la página
classification Palabras para clasificar la página en los
buscadores
description Descripción del contenido de la página
generator Programa utilizado para crear la página
keywords Palabras clave de la página
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta Body
Dentro de esta etiqueta se localizan todos los elementos
visibles.
etiqueta h1 el tamaño del texto es el más grande y llega al
h6 más pequeño
<body>
<h1> Título más grande </h1>
<h2> Título dos </h2>
<h3> Título tres </h3>
<h4> Título cuatro </h4>
<h5> Título cinco </h5>
<h6> Título seis </h6>
</body>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
LOS ATRIBUTOS QUE PODRÁN AÑADIRSE A
LA ETIQUETA <BODY> SON:
BGCOLOR=”color o nombre del color”, para
indicar el fondo del documento
TEXT=”color o nombre del color”, para indicar el
color del texto del documento.
LINK=”color o nombre del color”, para indicar el
color del texto de enlace.
VLINK=”color o nombre del color”, para indicar el
color del texto de los enlaces ya visitados.
ALINK=”color o nombre del color” , para indicar el
color que se pondra el texto del enlace en el
momento de su activación.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
El atributo que se encarga de determinar la
imagen de fondo es background=”nombre
del archivo grafico”.
EJEMPLO:
<!DOCTYPE HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”BLUE”
TEXT=”BLACK” LINK=”BLUE”>
</BODY>
</HTML>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta <p> </p>
Párrafos de textos.
<p> Entre los hombres como entre las naciones el
respeto al derecho ajeno es la paz </p>
<br> salto de línea
<br>
<br>
<p> otro parráfo </p>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
PARRAFOS Y SALTOS DE LINEA
Para empezar veremos la etiqueta <p> que se utiliza para
separar párrafos. como para html todo el texto es continuo,
necesitamos algún mecanismo para indicar el principio y fin
de un párrafo.
Las marcas son <p> y </p>, aunque el uso de la ultima es
opcional.
Otra etiqueta útil es <br>. esta etiqueta solo tiene una marca
inicial y se usa para cambiar de línea. como un enter.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
EJEMPLO
<!DOCTYPE HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”BLUE” TEXT=”BLACK” LINK=”BLUE”>
<P> HOLA MUNDO , QUE BIEN ME SIENTA CONOCER HTML<BR>PERO ME
GUSTARIA SABER MUCHO MAS.
</BODY>
</HTML>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
TEXTO CON FORMATO PREESTABLECIDO.
A pesar de repetir que html no reconoce tabulaciones, saltod
de línea, etc. una etiqueta que permite introducri texto con
formato es la etiqueta <pre> y </pre> todo lo que se ponga
dentro de la etiqueta texto con saltos, tabulaciones etc sera
respetado.
EJEMPLO
<!DOCTYPE HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”BLUE” TEXT=”BLACK” LINK=”BLUE”>
<PRE>
LISTA DE MESES Y AÑOS IMPORTANTES
MES AÑO
1979 NACI YO
1986 NACIO MI HERMANA
2001 ME GRADUE
</PRE>
</BODY>
</HTML>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Estilos de texto
<b> se utiliza para el texto en negritas
<i> se utiliza texto en cursiva
<u> subrayar texto
<tt>typewriter
<blink> texto intermitente
<big> texto grande
<small> texto pequeño
<sup>superindice
<sub>subindice
<address>direccion o firma
<blockquote>bloque de texto como una cita con tabulación y cursiva
<cite>muestra el texto como una cita.
<code> codigo de programa
<strike> texto tachado
<center> centra texto en pantalla
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Fuentes
La etiqueta <font> permite controlar casi el tipo de un bloque
de texto atributos.
size tamaño de la fuente y face tipo de fuente
color el color de la fuente.
Ejemplo
<!DOCTYPE html>
<head>
<title></title>
</head>
<body bgcolor=”blue” text=”black” link=”blue”>
<font size=”6” face=”arial” color=”black”> este es un texto
tamaño 6 con tipo de fuente arial color negro </font>
</body>
</html>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta <ol></ol>
Listas ordenadas para enumerar un conjunto de
elementos.
Ejemplo
<ol>
<li> Cuaderno </li>
<li> Diccionario </li>
</ol>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Código anterior completo
Resultado
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta de Imágenes
Src Ruta de la imagen
Width ancho
Height alto
Align alineación
<img src=“perrito.jpg” width=“350” height=“200” align=“center”>
Nota:
Nombre del archivo de
imagen y extensión
.jpg, .png, .gif, etc
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Alineación de imagenes con texto
El atributo align permite alinear la imagen respecto al texto en función de los
siguientes valores.
left(izquierda) texto a la derecha de la imagen
rigth(derecha) texto a la izquierda de la imagen
align=top alinea la parte superior de la imagen con el borde superior de la linea
align=texttop alinea la parte superior de la imagen con el texto que más altura
alcanza en la línea.
align=middle alinea la línea base del texto con la mitad de la imagen.
align=absmiddle alinea el punto medio vertical de la línea de texto con la mitad de
la imagen.
align=bottom alinea el borde inferior del texto con el borde inferior de la imagen.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Ejemplo
<!DOCTYPE html>
<head>
<title>Insertar una IMAGEN</title>
</head>
<body text=“black” link=“blue”>
<img src=“garfield.gif” align=“rigth”>
<br>
</body>
</html>
Es importante entender que en src=”va la ruta donde se
encuentra el archivo y el nombre del archivo de imagen.”
Si no se pone la ruta correcta el navegador no sabrá donde
buscar la imagen y puede que no muestre dicha imagen. Es
mejor tener todo dentro de una carpeta.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Tamaño y borde de una imagen
Para poder ponerle borde a una imagen debemos utilizar la
propiedad borde. Si su valor es 0, la imagen aparecerá sin
borde.
Otras propiedades son:
width y height(anchura y altura)
Nota: Carpeta ,
con la página
html y la
imagen
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Ejemplo Insertar.html
<!DOCTYPE html>
<head>
<title>Insertar IMAGEN</title>
</head>
<body text="black" link="blue">
<img src="garfield.png" align="rigth" border=3 width=100 height=100>
<br>
</body>
</html>
Nota: Resultado en el
navegador web
Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta de Listas sin orden
Generalmente cuando queremos utilizar viñetas
<ul>
<li> Cuaderno </li>
<li> Diccionario </li>
</ul>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta de enlaces o ligas.
Otra función que caracteriza al lenguaje html es el hipertexto.
poder moverse a otros documentos.
Para poder hacer un enlace se utiliza la etiqueta
<a href=“destino del enlace”> texto indicativo del enlace </a>
<a href="lvirtual.com.mx">Enlace a sitio web lvirtual </a>
<a href=“pagina1.html”>Enlace a página 1 </a>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Tipos de enlaces
Enlace a un punto de la misma página
Cuando se trabaja con documentos muy
extensos o índices suelen ponerse enlaces
desde el principio del documento al final del
mismo, y viceversa, así se agiliza la lectura del
documento por un usuario.
El primer paso consiste en marcar las distintas
zonas del documento a las que se desea poder
acceder de manera inmediata, inicio y final del
documento por ejemplo. O por temas.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Así pues, en el principio del documento añadiremos la
línea de código siguiente:
<a name=”iniciodocumento”>
Hemos marcado el inicio como un punto.
Ahora nos situamos al final del mismo y añadimos esta
otra línea
< a name=”finaldocumento”>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Una vez marcadas las distintas zonas del documento vamos
a situar en el mismo documento los enlaces que nos
permitirán ir de arriba abajo de la página con un clic del rato
en los enlaces.
En el inicio y final del documento añadimos la siguientes
líneas respectivamente.
<a href=”#finaldocumento”> pulsa aquí para ir al final de esta
página</a>
<a href=”#iniciodocumento”>pulsa aquí para ir al inicio de la
página </a>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Enlaces a otros sitios
Cuando se dispone de varias páginas, es normal que desde
una de ellas se pueda acceder a otra y, desde esta otra a una
tercera, etc. pues bien, el procedimiento es similar al anterior,
sólo que esta vez, deberemos especificar el nombre del
archivo que contiene la página a la que se quiere acceder.
imaginemos tener dos páginas. una principal.html y otra
secundaria.html.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Ejemplos:
principal.html
<!DOCTYPE html>
<head>
<title> frases celebres</title>
</head>
<body text=”black” link=”blue”>
<a href=”secundaria.html> frases sobre el exito</a>
</body>
</html>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
secundaria.html
<!DOCTYPE html>
<head>
<title>fases sobre el exito</title>
</head>
<body text=”black” link=”blue”>
<cita>
el éxito no es para los que piensan que pueden hacer algo
sino para quienes lo hacen.
</body>
</html>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Video y audio
<video src=“ruta.mp4” width=“640” height=“340”>
<p> el navegador no soporta el elemento de video</p>
</video>
<audio src=“ruta.mp3” controls=“controls”>
<p> el navegador no soporta el elemento de video</p>
</audio>
El atributo controls es booleano y hace que se muestre el
reproductor de audio de cada navegador, muestra el
reproducir, pausa, volumen, etc.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
<audio width="300" height="32" src="micancion.mp3"
controls="controls" autoplay="autoplay" preload=""></audio>
SRC: Nos enlaza el archivo de audio que queremos reproducir.
CONTROLS: Nos permite implementar los controles del reproductor por
defecto del navegador como, botón play-pause, seek y volumen.
AUTOPLAY: Nos permite reproducir el archivo de audio desde que se
carga la página.
PRELOAD: Nos carga un poco el archivo de audio antes de iniciar la
reproducción en el buffer para que no se trabe por reproducir más de lo
que carga.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
El navegador no soporta este video.
</video>
</body>
</html>
Nota: Carpeta , con la página .html del ejemplo del código disponible
en está diapositiva y el video.
Cabe mencionar que en el ejemplo el archivo de video se llama
“movie.mp4” o la opción dos disponible en formato “movie.ogg”.
Recuerda que existen diferentes formatos de video (.mp4, .mov, .ogg,
.wmf , .asf, .avi, .wmv, etc).
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta embed
La etiqueta que gestiona el sonido( entre otras cosas)
asociada al atributo src.
Presenta en pantalla una ventana de control de audio con las
clásicas funciones de avance, retroceso, ejecución y stop.
Las dimensiones de esta ventana pueden modificarse
mediante los atributos width y height, que son la altura y
anchura de la ventana respectivamente.
Si se desea que no aparezca la ventana de control, se
deberá activar el atributo hidden asignándole el valor true.
el atributo loop funciona de la misma manera que en explorer,
sin embargo, al disponer de una ventana de control de audio,
si queremos que el archivo se ejecute automáticamente
cuando se cargue la pagina deberemos asignar el atributo
autostart el valor true. Guadalajara, Jalisco,
.Autora: Maestra Lotzy Beatriz Fonseca Chiu México. Marzo 2015.
El siguiente código de ejemplo reproduce
automáticamente una sola vez el archivo
mp3 musica.mp3 sin mostrar ninguna
ventana de control:
<embed src=”musica1.mp3” width=100
height=55 hidden=true autostart=true>
Archivo
musica.html
Nota: Carpeta , con la página musica.html y el
audio .mp3 llamado musica1.mp3.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Ejemplo : embed para reproducir video.
NOTA:
“Recordemos que para reproducir los diferentes formatos de videos e igual de
audios se necesita que los diferentes navegadores (chrome, o explorer o
mozilla, firefox, tengan instalados los codec para reproducir dichos formatos de
video).”
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta iframe
Permite inserta contenido de paginas de tercero en nuestro
sitio web:
Ejemplo:
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
“Resultado” del código
.html anterior
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta Figure y figcaption
Representa una figura ilustrada
como parte del documento.
Ejemplo:
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
“Resultado” del código
.html anterior
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
Autora: Maestra Lotzy Beatriz Fonseca Chiu México. Marzo 2015.
Etiqueta nav
Define una sección que solamente contiene enlaces de
navegación. Ejemplo : barranavegacion.html
Resultado en el
navegador
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta section
Define una sección en un documento.
La etiqueta <section> y su correspondiente etiqueta de
cierre </section> se utilizan para encerrar el código
correspondiente a una sección genérica dentro de un
documento o aplicación. Normalmente, un bloque de texto al
que perfectamente le podríamos colocar un título o
encabezado. Además, todo el contenido que engloba ha de
guardar cierta relación entre sí.
.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta article
Define contenido autónomo que podría existir
independientemente del resto del contenido.
<section>
<header> <h1> Listado de noticias </h1> </header>
<article> <header> <h2> Noticia 1 </h2> </header>
</article>
<article> <header> <h2> Noticia 2 </h2> </header>
</article>
<article> <header> <h2> Noticia 3 </h2> </header>
</article>
</section>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta aside
Nos sirve para rodear todo aquel contenido que no es
directamente contenido principal del que estamos hablando o
del que estamos tratando en esa página en concreto. La
norma dice que se use para todo aquel contenido tangencial
al contenido principal de la página.
EJEMPLO:
<aside>
<h1> Publicidad </h1>
((CODIGO DE LA PUBLICIDAD))
</aside>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta footer
Define el pie de una página o sección. Usualmente contiene
un mensaje de derechos de autoría, algunos enlaces a
información legal o direcciones para dar información de
retroalimentación.
EJEMPLO:
<footer>
<p> Posted by: Lotzy Chiu </p>
<p> Información de contacto </p>
</footer>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta mark
Representa el texto resaltado, es decir, una
extensión de texto marcado para fines de
referencia, debido a su relevancia en un
contexto particular.
EJEMPLO:
< p > La amistad es un don que a los hombres
dieron los cielos por ella y por el honor <mark>
resaltar “bien vale la pena perder la vida”
</mark> texto </p>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
RESULTADO
Guadalajara, Jalisco,
México. Marzo 2015.
Los formularios
La etiqueta que nos permite definir el inicio de un formulario
es <form> y el final </form>
Tambien podemos encontrar las etiquetas que definen los
campos de entrada <input>, las que definen los campos de
selección <select> y las areas de texto <textarea> .
Ejemplo
<form>
<form action=fichero de tratamiento method=post/get>
elementos del formulario
</form>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Los atributos de la etiqueta <form>
action. atributo que determina la acción que debe realizarse al
pulsar el boton de ejecución.
method. indica el método de transferencia de la información
introducida en el formulario. pueden emplearse los métodos
get y post.
el metodo get envía la información atreves de una variable
llamada query_string. por el contrario, el método post utiliza
dos variables: content_length, que contiene la longitud de
datos enviados, y content_type, que son los datos
propiamente.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Definición de campos de entrada <input>
La etiqueta <input> se emplea para definir todos los
elementos del formulario, como botones, cajas de texto,
casillas de verificación, etc.
El atributo que determina el tipo de elemento es type.
Los distintos tipos de entradas son:
checkbox. cuadro vacío de selección. permite selecciones múltiples.
hidden. se utiliza para pasar los datos adquiridos en un formulario a
otro sin que se visualice nada en la pantalla.
text. como su nombre indica se utiliza para la entrada de textos.
password. permite la introducción de texto visualizándose para cada
carácter un asterisco.
radio. circulo vacío de selección. solo permite una opción entre varias.
reset. borra todos los datos introducidos en el formulario.
submit. envía la información del formulario.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Checkbox
Esta opción se utiliza para elegir una serie de
opciones disponibles pudiéndose realizar selecciones
múltiples.
Los elementos de este tipo requieren como mínimo
los atributos name y value, que indican
respectivamente el nombre del tipo grupo de tipos y
el valor del campo.
También podemos incluir el atributo checked cuando
queramos que esa opción aparezca seleccionada por
defecto.
Ejemplo.
<input type=”checkbox” name=”sistema” value=”win8”
checked>windows8<br>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Text
Valor por defecto del atributo type. define una zona
de entrada de texto simple que puede tomar como
atributos opcionales los siguientes:
maxlength. atributo que delimita el numero máximo
de caracteres que pueden ser introducidos. el
numero de caracteres por defecto es ilimitado.
size. especifica la cantidad de espacio reservada
para introducir el texto.
value. permite poner un valor inicial para la casilla.
Ejemplo:
nombre<input type=”text” name=”nombre”><br>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
password
Este tipo se utiliza generalmente para la introducción de
claves de acceso. el texto que va escribiendo en la ventana
no es legible por curiosos.
Ejemplo
introduzca nombre de usuario:<input name=”usuario”><br>
contraseña:<input type=”password” name=”pass”>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Radio
Esta opción es similar a checkbox pero solo permite elegir
una opción entre todas.
Los elementos de este tipo requieren como minimo los
atributos name y value.
Recordemos que el atributo checked permite seleccionar por
defecto una opción .
<input type=”radio” name=”edad” value=”-18”>menos de 18
años <br>
<input type=”radio” name=”edad” value=”18-25”checked>entre
18 y 25 años <br>
<input type=”radio” name=”edad” value=”25-35”>entre 25 y 35
años <br>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Reset
Hay poco que decir acerca de este tipo. como su nombre
indica, se usa para eliminar del formulario todos los valores
introducidos.
Su aspecto es el de un botón y su nombre se especifica con el
atributo value.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Submit
Es el botón que se encarga de enviar el formulario. al igual
que en el caso anterior, la etiqueta del botón se determina
mediante el atributo value.
<input type=”submit” value=”pulsa aqui para enviar el
formulario”>
<input type=”reset” value=”pulsa aqui para borrar todos los
datos”>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Definición de campos de selección<select>
La etiqueta <select></select> permite al usuario
seleccionar una opción de un conjunto de
elementos mostrados como una lista desplegable,
donde cada una de las opciones se introduce
mediante el elemento option. con el atributo select
podemos visualizar una determinada opción de la
lista.
Los atributos son:
multiple. por defecto solo puede ser seleccionada
una sola opción. este atributo permite seleccionar
más, pulsando la tecla ctrl junto con la opción.
name. atributo que especifica el nombre de la lista
de selección.
size. atributo que determina el numero de items
visibles superior a 1.- en este caso muestra una
barra de desplazamiento lateral.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Ejemplo:
<select name=”hardware” size=”3”>
<option select> impresora
<option> monitor
<option> scanner
<option> raton
</select>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Área de texto <textarea>
La etiqueta de inicio <textarea> y de final
<textarea> permite representar un capo de texto
de múltiples líneas. presenta los siguientes atributos:
cols. determina el numero de caracteres de ancho de
la ventana de texto.
name. nombre del campo.
rows. establece el numero de líneas visibles del área
de texto en caracteres.
wrap. establece los saltos de línea según los
siguientes valores:
off. no se producen saltos de línea automáticos y el
texto es enviado exactamente como fue escrito.
virtual. se usa el salto de línea automático para
mostrar el texto en pantalla. physical. utiliza saltos de
línea automáticos y envía el texto de idéntica manera.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Ejemplo:
<textarea name=”editorial” rows=6 cols=64>
editorial
isla cedros 2626
guadalajara jal
</textarea>
<textarea name=”ventanavacia” rows=6 cols=64> </textarea>
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Ejemplo del
formulario.html
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Resultado en el
navegador ejemplo
formulario.html
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Etiqueta DataList
Un DataList en HTML5 es una lista de opciones
predefinidas que le podemos pasar al elemento
INPUT le podemos aplicar un DataList en HTML5.
Ejemplo:
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
Bibliografía:
Gauchat D. (2013). El gran libro de HTML5, CSS3 &
Javascript. Marcombo.
Autora: Maestra Lotzy Beatriz Fonseca Chiu Guadalajara, Jalisco,
México. Marzo 2015.
