Manual Básico de HTML David Carani Quispe
Manual Básico de HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir
hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces
(hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con
inserciones multimedia (gráficos, sonido. etc)
La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos,
párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes
efectos que se quieren dar (especificar los lugares del documento donde se debe poner
cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho
hipertexto se realice por un programa especializado (como Mosaic, o Netscape).
1.- ESTRUCTURA BÁSICA DE UNA PÁGINA WEB
El principio esencial del lenguaje HTML, es el uso de las etiquetas (tags) que funcionan de
la siguiente manera:
< XXX > Inicio de una etiqueta
</ XXX > Cierre de una etiqueta
Las letras de las etiquetas pueden estar en minúsculas o mayúsculas indistintamente.
El hipertexto debe ser grabado con el nombre index.html en alguna ubicación en el disco
duro. Al asignar la extensión .html ya se crea un hipertexto.
Una página web está dividida en dos zonas principales: el encabezamiento y el cuerpo de la
página. Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben
estar incluidas en el archivo HTML de manera obligatoria.
<!DOCTYPE html>
<html>
<head>
<title> Titulo de la página </title>
</head>
<body>
//*desarrollo del documento html*//
</body>
</html>
Estas tres etiquetas fundamentales son:
<html> </html> Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo.
Todo el documento HTML debe estar entre estas etiquetas.
<head> </head> Cabecera, se detalla el encabezado de la página WEB.
<body> </body> Cuerpo de la página, donde se desarrolla el contenido global del
documento HTML.
Manual Básico de HTML David Carani Quispe
Dentro de la cabecera hay información del documento, que no se edita en la pantalla
principal del navegador que es utilizado para visualizar el documento HTML,
principalmente la información encontrada en la cabecera es el título del documento:
<title> Titulo del documento </title>
El titulo debe ser breve y descriptivo de su contenido.
Dentro del cuerpo esta todo lo que queremos editar en la pantalla principal(textos,
imágenes, etc.).
2.- ETIQUETAS
Toda etiqueta abierta debe cerrarse. En caso de no cerrarse el error podría causar confusión
al navegador.
2.1 Títulos de Encabezamiento
HTML, dispone de seis encabezados, o tipo de letras pre definidos de distinto tamaño, que
se utilizan para marcar los títulos o resaltes en las páginas.
Son etiquetas que formatean el texto como un titular, para lo cual asignan un tamaño mayor
de letra y colocan el texto en negrita.
<h1> Nivel de encabezado 1</h1>
<h2> Nivel de encabezado 2</h2>
<h3> Nivel de encabezado 3</h3>
<h4> Nivel de encabezado 4</h4>
<h5> Nivel de encabezado 5</h5>
<h6> Nivel de encabezado 6</h6>
La etiqueta tiene el siguiente atributo:
Align : Este atributo permite alinear el texto del párrafo Permite ubicar el encabezamiento a
la izquierda, centro o derecha de la pantalla.
<h1 align="left">....... </h1> Ubica el encabezamiento a la izquierda de la página.
<h1 align="center">... </h1> Ubica el encabezamiento al centro de la página.
<h1 align="right">..... </h1> Ubica el encabezamiento a la derecha de la página.
<center> … </center> Centra todo lo que este dentro de ella, ya sea textos, imágenes,
etc. (no lo soportan todos los navegadores).
Los encabezados implican también una separación en párrafos, así que todo lo que
escribamos dentro de estas etiquetas, se colocará en un párrafo independiente.
Manual Básico de HTML David Carani Quispe
Comentarios no visibles en la pantalla
A veces es muy útil escribir comentarios en el documento HTML, sobre el código que
escribimos, nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no
queremos que se vean en la pantalla.
Esto se consigue encerrando dichos comentarios entre estos dos símbolos:
<!-- y -->
Ejemplo
Manual Básico de HTML David Carani Quispe
2.2 Formato y Atributos de Texto – Tipo de Letra
Algunas de las marcas que permiten especificar la tipografía de los caracteres son los
siguientes:
La etiqueta <p> o de párrafo, indica el inicio y el final de oraciones a exhibir con un solo
párrafo. Si queremos separar el texto en distintos párrafos debemos usar esta etiqueta.
<p> ….. </p>
El atributo align permite alinear el texto del párrafo.
<p align="left"> ……. </p>
<p align="center"> ..... </p>
<p align="right"> ….. </p>
La etiqueta <pre> significa texto “pre-formateado” y se usa para conservar espacios y
saltos de línea en cuerpos de texto. Esta etiqueta resulta útil en el formateo de un párrafo
completo que el autor quisiera que el navegador cliente lo exhibiese palabra por palabra.
<pre> ….. </pre>
La etiqueta <br> permite partir un párrafo empezando una línea nueva pero sin dejar
espacio (salto de línea). tiene el mismo efecto que un retorno de carro, Es una etiqueta
especial, pues no precisa de etiqueta de cierre.
<br>
La etiqueta <hr> dibuja una línea horizontal de separación (admite atributos) manera
predeterminada. Es etiqueta especial, porque no necesita de cierre.
<hr>
La etiqueta <blockquote> se utiliza para destacar una cita textual dentro del texto general.
Deja márgenes en ambos lados, por eso se utiliza para poner sangría.
<blockquote> ..… </blockquote>
Formatos:
<b> ….. </b> Negritas, resalta un texto con negrillas.
<u> ….. </u> Subrayado, resalta un texto con subrayado.
<i> ….. </i> Cursiva, resalta el texto con inclinación itálica (Cursiva).
<tt> ….. </tt> Teletipo, muestra el texto especificado en una fuente de ancho fijo.
<sub> … </sub> Subíndice, muestra el texto especificado como subíndice.
<sup> … </sup> Superindice, muestra el texto especificado como superíndice
Manual Básico de HTML David Carani Quispe
<var> … </var> Variables, muestra el texto especificado en una fuente más pequeña, de
ancho fijo.
<em> … </em> Énfasis, se dará énfasis al texto que se contiene. EL navegador resaltará
este texto con negrillas e inclinación italica.
<strong> ….. </strong> Grueso, resalta el texto en negritas.
Recuerde que puede combinar entre si todas estas etiquetas. Veamos un ejemplo para
demostrar el uso de las últimas 4 etiquetas que se vieron.
Ejemplo
Manual Básico de HTML David Carani Quispe
2.3 Listas
En HTML a menudo nos interesa presentar las cosas en forma de listas, y tal cual en un
editor de texto podemos escoger entre tres tipos distintos:.
- Listas desordenadas (no numeradas)
- Listas ordenadas (numeradas)
- Listas de definición.
<li> … </li> Nos muestra el texto como un elemento de línea en una lista.
<ul> … </ul> Las Lista Desordenada (Unordered Lists) sirven para presentar cosas que,
por no tener orden determinado, no necesitan ir precedidas por un número. También son
utilizados para fines de sangría u tabulaciones.
Estructura:
<ul>
<li> Elemento1 </li>
<li> Elemento2 </li>
<li> Elemento3 </li>
<li> ElementoN </li>
</ul>
Toda lista está dentro de la etiqueta <ul> y </ul>, cada elemento va precedida de la etiqueta
<li> (list item).
Se puede anidar una lista dentro de otra:
<ul>
<li> Frutas </li>
<ul>
<li> Manzana </li>
<li> Durazno </li>
<li> Frutilla </li>
</ul>
<li> Verduras </li>
<li> Cereales </li>
<li> Lácteos </li>
</ul>
<ol> … </ol> Las Listas Ordenadas (Ordered Lists) sirven para presentar elementos en un
orden determinado. Su estructura es similar a la anterior. La diferencia es que aparecerá
automáticamente un numero correlativo para cada elemento.
<ol>
<li> Elemento1 </li>
<li> Elemento2 </li>
<li> Elemento3 </li>
<li> ElementoN </li>
</ol>
Manual Básico de HTML David Carani Quispe
Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.
<ol>
<li> Frutas </li>
<ol>
<li> Manzana </li>
<li> Durazno </li>
<li> Frutilla </li>
</ol>
<li> Verduras </li>
<li> Cereales </li>
<li> Lácteos </li>
</ol>
<dl> … </dl> Las Listas de Definición, como su nombre indica, son apropiados para
glosarios (o definiciones de términos). Toda la lista debe ir englobada entre esta etiqueta.
A diferencia de las dos anteriores, cada reglón de la listas tiene dos partes:
- El nombre del elemento a definir, que se consigue con la etiqueta <dt> (def. term.)
- La definición del elemento, que se consigue con la etiqueta <dd> (def. definition)
<dl>
<dt> Frutas </dt>
<dd> Manzana </dd>
<dt> Durazno </dt>
<dd> Frutilla </d>
</dl>
Ejemplo
Manual Básico de HTML David Carani Quispe
3. ENLACES
Los enlaces de hipertexto (o hiperenlaces) son el elemento característico de la web porque
permiten que las páginas se relacionen entre sí. La sencillez y libertad con que se pueden
enlazar archivos, imágenes y páginas situadas en servidores distintos son el motivo del
éxito de la web.
Un enlace de hipertexto tiene dos partes:
- Enlace, el elemento (texto o imagen) sobre el que se puede hacer clic con el ratón,
- Destino, el elemento (página web, imagen, archivo, etc) que se muestra al hacer
clic en el enlace
Los enlaces tienen la siguiente estructura:
<a href=” xxxxx ”> …yyyyy… </a>
Donde:
xxxxx es el destino del enlace (no olvide las comillas)
yyyyy es el texto indicativo del enlace (tiene un color especial y subrayado)
Podemos tener diferentes formas de enlace, entre elos veremos los siguientes:
3.1 Enlace Interno
En el caso de documentos o textos muy extensos, nos puede interesar dar un salto desde un
lugar a otro en el mismo documento, texto o página que queremos saltar.
<a href=”#LINEA”> …Texto… </a>
#LINEA es el destino del enlace, el sitio dentro de la página donde queremos saltar.
(LINEA puede ser cualquier palabra donde queremos saltar).
Texto es la palabra/palabras que aparecerá en la pantalla en color y en forma de hipertexto.
En el sitio exacto a donde queremos saltar, se debe poner la siguiente etiqueta:
<a name=”LINEA”> </a>
3.2 Enlace con otra Página
Lo más frecuente es que tengamos varias páginas desarrolladas, una inicial (principal) y
potras conectadas a ellas, e incluso conectadas entre ellas mismas.
Supongamos que estamos desarrollando la página index.html y a esta queremos enlazar
otra página denominado EJEMPLO1.html; en este caso, simplemente escribimos el
nombre y la extensión del archivo al cual queremos enlazar.
<a href=”EJEMPLO1.html”> Enlace a ejemplo1 </a>
Si queremos enlazar a un sitio concreto de la otra página, solo debemos marcar la ubicación
exacta del salto.
Manual Básico de HTML David Carani Quispe
- Enlace en la página principal para realizar la llamada al lugar exacto.
<a href=”EJEMPLO1.html#LINEA”> Enlace a ejemplo1 </a>
- Ubicación exacta en la página de enlace
<a name=”LINEA”> </a>
Es la marca que colocaremos para realizar el enlace desde la página principal
Si la página al que queremos acceder se encuentra almacenado en otro directorio,
subdirectorio u otro archivo, entonces el llamado a esa página tendría que ser:
<a href=”archivo/EJEMPLO1.html”> Enlace a ejemplo1 </a>
A la inversa, si queremos saltar desde una página a otra que está en el directorio anterior
solo se debe escribir:
<a href=”../EJEMPLO1.html”> Enlace a ejemplo1 </a>
Esos dos puntos colocados al principio hacen que se dirija al directorio anterior. Obsérvese
que debe utilizar el símbolo / para indicar los subdirectorios.
3.3 Enlace Remoto
Para realizar enlaces con páginas que están fuera de nuestro sistema (páginas en servidores
distintos), es necesario conocer su dirección completa o URL (Uniform Resource Locator).
El URL puede ser la dirección de una página Web, dirección de fttp, fttps, etc.
Una vez conocida la dirección URL,
Ejemplo: https://www.juegos.com
Escribimos el destino del enlace en la etiqueta de nuestra página.
<a href=”https://www.juegos.com”> Pagina de Juegos </a>
Es importante copiar la dirección correctamente respetando la mayúsculas, minúsculas,
números, signos y otros porque los servidores UNIX si las distingue.
3.4 Enlace con Direcciones de Correo
Para realizar el enlace a una dirección de e-mail debes respetar el siguiente sintaxis:
mailto: seguido de la dirección e-mail
En la estructura de la etiqueta tenemos:
<a href=”mailto:direccion de e-mail”> Texto de enlace </a>
Ejemplo:
<a href=”mailto:[email protected]”> [email protected] </a>
Manual Básico de HTML David Carani Quispe
Ejemplo:
Manual Básico de HTML David Carani Quispe
4. IMÁGENES
Para insertar una imagen en nuestra página HTML, debemos tener la imagen definida y
el lugar donde se encuentra almacenado.
Con el comando img src (image source, fuente de la imagen), se indica que se quiere cargar
una imagen con el nombre que se encuentra guardada.
La estructura de la etiqueta es:
<img src=”nombre-de-imagen.jpg”>
Dentro de la etiqueta se puede añadir otros comandos como alt donde se introduce una
descripción indicativa de la imagen (una palabra o frase breve).
Hay casos en los que las se utilizan las imágenes como enlaces a otra página para ello es
necesario utilizar este comando.
<img src=”nombre-de-imagen.jpg” alt=”descripción”>
Si en caso la imagen se encuentra almacenada en otro archivo, se debe indicar también el
lugar donde se encuentra la imagen.
<img src=”archivo/nombre-de-imagen.jpg”>
Las imágenes deben ser graduadas en formato gif (máximo 256 colores para dibujos), en
formato jpg (para imagen de fotografía) o en formato png
Un aspecto muy importante es tener en cuenta el tamaño y la dimensión de las imágenes
para que estas no excedan el tamaño de nuestra página.
Debemos ajustar la imagen de la siguiente forma:
<img src="imagen1.png" height="75" width="130” alt=" ">
Height : Alto de la imagen
Width : Ancho de la imagen
También podemos definir la posición de la imagen con respecto al texto, es posible
colocarlos entre dos párrafo, con un titular a un lado. Se puede ubicar arriba, al medio o
abajo con respecto al titular.
<img src="imagen1.png" align=”top”> Titular alineado arriba
<img src="imagen1.png" align=”middle”> Titular alineado en medio
<img src="imagen1.png" align=”bottom”> Titular alineado abajo
Manual Básico de HTML David Carani Quispe
Si queremos lograr un diseños de página más elegante rodeado de textos, se puede alinear
la imagen con el comando align dentro de la etiqueta img.
<img src="/texto/imagen1.png" align=”left”> Alinea a la izquierda de la pagina
<img src="/texto/imagen1.png" align=”center”> Alinea al centro de la pagina
<img src="/texto/imagen1.png" align=”right”> Alinea a la derecha de la pagina
Si se quiere interrumpir el proceso de relleno del texto a los lados de la imagen, para que
salte hasta debajo de ella, o dejar un espacio en blanco, se puede emplear atributos de la
etiqueta br.
<br clear=”left”> Busca el primer margen libre (clear) a la izquierda
<br clear=”right”> Busca el primer margen libre a la derecha
<br clear=”all”> Busca el primer margen libre a ambos lados
Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra página.
Para este caso se utilizan generalmente imágenes pequeñas (iconos) aunque se pueden
utilizar cualquier tipo de imagen.
Si tenemos una imagen denominada dibujo1.gif dentro de la página ejemplo1.html
entonces debemos realizar el llamado de la siguiente forma:
<a href=”ejemplo1.html”> <img src="dibujo1.gif”> </a>
Para limitar el tamaño de la imagen como enlace solo definimos el alto y el ancho del
mismo.
<a href=”ejemplo1.html”><img src="dibujo1.gif” height="75" width="130”></a>
Pulsando la imagen comprobamos que efectivamente enlaza con la página deseada.
Obsérvese que la imagen de enlace está rodeado de un rectángulo de color normal. Si no se
desea que aparezca ese rectángulo, hay que incluir dentro la etiqueta de imagen el atributo
border=”0”.
<a href=”ejemplo1.html”> <img src="dibujo1.gif” border=”0”> </a>
También podemos utilizar una imagen para enlazar con otra imagen. Por ejemplo, si
queremos enlazar con la imagen grafico1.jpg desde la imagen dibujo1.gif debemos
configurar de la siguiente forma:
<a href=”grafico1.jpg”> <img src="dibujo1.gif”> </a>
Manual Básico de HTML David Carani Quispe
Por último, otra posibilidad es la de utilizar un texto para realizar el enlace con la imagen.
<a href=”dibujo1.gif”> párrafo de texto </a>
Manual Básico de HTML David Carani Quispe
5. FONDOS Y COLORES
Se puede cambiar el fondo de dos maneras diferentes:
a) Con un color uniforme
b) Con una imagen
También se pueden aplicar en:
c) Colores de texto y de enlaces
a) Fondos con un Color Uniforme
Se consigue introduciendo el comando bgcolor en la etiqueta body (cuerpo de la pagina).
<body bgcolor=”#XXYYZZ”>
XX Numero indicativo de la cantidad de color rojo
YY Numero indicativo de la cantidad de color verde
ZZ Numero indicativo de la cantidad de color azul
Recordemos la numeración hexadecimal que se caracteriza por tener 16 digitos:
0 1 2 3 4 5 6 7 8 9 A B C D E F (A=10, B=11, C=12, D=13, E=14, F=15)
Es decir que el número menor es 00 y el mayor es FF (hasta 255). Así por ejemplo el color
#FF0000 resalta el máximo color rojo y cero a los otros dos colores. Los colores mas
simples son:
#FF0000 Rojo #FFFFFF Blanco #FF00FF Magenta
#00FF00 Verde #000000 Negro #00FFFF Celeste
#0000FF Azul #FFFF00 Amarillo #CCCCCC Gris
Para hacer un color más oscuro. Hay que reducir el número del componente, dejando los
otros dos invariables como se muestra a continuación:
Rojo #FF0000 se puede hacer más oscuro con #AA0000 o aún más oscuro con #550000
Para hacer que un color tenga un tono más suave, se deben variar los otros dos colores en
números más altos haciéndolo más claro.
Para obtener un color rosa podemos combinar #FF7070
Para obtener un color plomo podemos combinar #C0C0C0
Para obtener un color naranja podemos combinar #FF4000
Así podemos ir combinando los diferentes colores colores.
Manual Básico de HTML David Carani Quispe
b) Fondo con una Imagen
El fondo de una página puede ser también una imagen, ya sea en formato gif o jpg. Esta
imagen se repite varias veces por toda la página, como un mosaico.
No todos los navegadores soportan este formato.
La estructura de la etiqueta se define:
<body background=”imagen.jpg”>
<body background=”imagen.gif”>
Hay que prever la posibilidad de que quien acceda a nuestra página no haya deshabilitado la
carga automática de imágenes en cuyo caso tampoco cargaría la imagen como fondo y solo
vería el fondo estándar.
Esto podría ser muy perjudicial si hemos escogido unos colores para el texto y los enlaces
que no contrastan bien con el fondo. La solución a este problema es añadir dentro de la
etiqueta <body> los comandos background y bgcolor en el mismo orden teniendo cuidado
de no escoger un color uniforme al de la imagen de fondo seleccionada.
Si queremos tener de fondo de pantalla la imagen océano.jpg escogemos entonces un fondo
azul claro #CCFFFF y la etiqueta quedaría de la siguiente forma:
<body background=”océano.jpg” bgcolor=”#CCFFFF”>
De esta forma si no se habilitara automáticamente la imagen en la página, lo primero que se
verá es el fondo de color uniforme que luego es reemplazado por la imagen de fondo.
c) Colores de texto y de enlaces
Podemos variar los colores habituales del texto y de los enlaces, personalizar los textos y
enlaces de manera que sea más presentable nuestra página.
Se puede escoger los colores del texto y de los enlaces añadiendo a la etiqueta <body> los
siguientes comandos:
text color de texto link color de los enlaces
vlink color de los enlaces visitados alink color de los enlaces activos
Entonces la etiqueta con todos los comandos queda:
<body bgcolor=”#xxyyzz” text=”#xxyyzz” link=”#xxyyzz” vlink=”#xxyyzz”
alink=”#xxyyzz”>
Esta forma de configurar los colores tendrá efecto en todos los textos y enlaces de la página
desarrollada.
Manual Básico de HTML David Carani Quispe
También podemos utilizar una etiqueta de color de la fuente con la que se puede cambiar
solo una parte del texto.
<font color=”#XXYYZZ”> Este texto es de color XXYYZZ </font>
Los códigos de los colores son los mismos que vimos anteriormente.
Se puede utilizar estas etiquetas con todos los comandos para cambiar los colores de textos
y de los enlaces en los fondos con un color uniforme y fondos con imagen.
Manual Básico de HTML David Carani Quispe
6. BOTONES
Los botones, solamente utilizan un ícono para representar una funcionalidad no tienen un
nombre especifico.
<button> … </button>, dentro de la etiqueta se coloca el contenido que irá dentro del
botón.
Para arreglar esto debemos proveer un nombre para el botón que describa la funcionalidad
de este.
<button name="favorito" type="button"> pulse aquí </button>
Tiene la particularidad que se pueden colocar dentro del botón los contenidos que se desee,
es decir, entre la etiqueta de apertura y cierre se puede colocar texto a voluntad, pero
también otras etiquetas HTML, como imágenes, saltos de línea, negritas o lo que podamos
necesitar.
Veamos un ejemplo:
Si queremos que una imagen nos sirva de botón.
<button name="favorito" type="button"> <img src=”imagen1.jpg”> </button>
Si queremos que el botón nos sirva de enlace.
<a href=”Nom-Pagina”><button name="favorito" type="button">Pulse aquí </button></a>
Manual Básico de HTML David Carani Quispe
7. TABLAS
En HTML también podemos incluir arreglos en tablas. Las tablas son un modo sencillo de
disponer los textos en columnas o de añadir un titular a una ilustración pero se tiene más
aplicaciones.
La etiqueta <table> </table> puede ser una poderosa herramienta de formato, se puede
hacer uso de esta etiqueta para ubicar textos e imágenes con precisión, en cualquier lugar de
la página
La estructura de la etiqueta se define:
- Esta etiqueta engloba a todas la demás
<table>
<!—mas etiquetas-->
</table>
Se puede presentar los datos tabulados con un borde, haciendo las tablas más presentables,
y el grosor es de n pixeles.
<table border=”n”>
<!—mas etiquetas-->
</table>
Las etiquetas necesarias para formar las tablas son:
<tr> … </tr> Permite formar cada fila de la tabla, hay que repetirlas tantas veces como
filas queramos que tenga la tabla.
<td> … </td> Permite formar las celdas que contendrá cada fila, hay que repetirlas tantas
veces como celdas deba tener la fila. .
<th> … </th> Se utiliza para colocar encabezamientos en negritas sobre las columnas.
. La estructura de la tabla queda:
<table border=”n”>
<tr>
<th>columna1</th><th>columna2</th><th>columna3</th>
<td>fila.celda1</td><td>fila-celda2</td><td>fila-celda3</td>
</tr>
</table>
La cantidad de filas y de columnas se deben repetir cuantas veces requiera la tabla.
Manual Básico de HTML David Carani Quispe
Manual Básico de HTML David Carani Quispe
8. FORMULARIOS
Los formularios en HTML sirven con el propósito de recolectar información proporcionada
por los visitantes del sitio, la cual es luego enviada nuevamente al servidor.
Para su correcto funcionamiento es importante que el formulario provisto en HTML sea
acompañado de un código del lado servidor, al que denominaremos "agente procesador",
que se encargará de recibir y procesar la información como el autor vea conveniente.
Este procesamiento puede consistir en, por ejemplo, el almacenamiento de la información o
su envío mediante correo electrónico
Entonces, un formulario es un conjunto de controles (botones, cajas de texto, casillas de
verificación, botones radio, etc) que permiten al usuario introducir datos y enviarlos al
servidor web para su procesamiento.
<form> … </form> Es básicamente un contenedor para controles. Cada control en un
formulario está pensado para recolectar información ingresada por los usuarios, en formas
que pueden ir desde líneas de texto a subida de archivos, pasando por opciones, fechas,
contraseñas y mucho más.
Una vez que los usuarios han rellenado el formulario con los datos, pueden enviarlo de
regreso al servidor para que el agente procesador administre la información recolectada.
La estructura general del formulario es:
<form>
.
[conjunto de controles]
.
</form>
Los atributos más importantes de esta etiqueta son:
<form action=”ejemplo.php” method="POST" enctype=”text/plain”>
..
--- Cuerpo del formulario ---
(Elementos para introducir los datos)
--- Botones de envió y de borrado ---
.. .
</form>
Manual Básico de HTML David Carani Quispe
ACTION indica la acción que se debe efectuar y que los datos sean enviados a la dirección
indicada (por ejemplo, un script de PHP).
METHOD define la manera de enviar los datos al servidor:
method=”POST” los valores enviados se añaden a la dirección indicada en el atributo
action.
method=”GET” los valores se envían de forma separada.
Si el atributo “method” no está establecido, el formulario se comporta como si el valor
fuera “get”
enctype=”text/plain” se consigue que las respuestas las recibamos como un archivo de
texto. Perfectamente legible sin codificar.
8.1 Cuerpo del Formulario (Elementos para introducir los datos)
La introducción de datos se consigue por medio de la etiqueta:
|<input type=”XXX” name=”YYY” value=”ZZZ”>
XXX Es la palabra que indica el tipo de datos a introducir.
YYY Es el nombre que le asignamos a la variable de introducción de datos.
ZZZ Es la palabra asociada a un elemento.
Para una mejor comprensión podemos dividir el cuerpo del formulario en tres clases:
a) Introducción por medio de texto (una línea)
<input type="text" name="nombre" value="texto” id="identificador" size="tamaño" />
type Indica el tipo de campo de entrada de datos que vamos a utilizar.
Dependiendo del tipo que indiquemos obtendremos un resultado u otro.
Los valores que puede tener el atributo type son:
“text”, “password”, “checkbox”, “radio”, “submit”, “reset”, “file”, “hidden”, “image” y
“button”.
name Es el nombre del campo el cual se enviará desde el formulario al servidor.
Manual Básico de HTML David Carani Quispe
value Es el valor por defecto que tendrá el campo de texto y que le aparecerá al usuario
al cargar el formulario.
id Es el identificador del campo.
Es importante ya que será el nombre por el cual podremos identificar, de forma
unívoca, al campo.
size será el tamaño del campo. Es decir, el número de caracteres que podríamos insertar
en el campo de texto.
Cuando enviemos el formulario al servidor, se guarda en la combinación name = value para
ser enviada.
Campo Texto. El campo de texto, como bien indica su nombre, es el que nos permite
insertar texto en un formulario. El usuario podrá insertar texto visible sobre el campo.
<form action=”ejemplo.php” method="POST" >
<p> Escribe tu Apellido </p>
<input type="text" name="apellido" value="Apellido" />
<input type="submit" value="Enviar" /> ---botón de envió---
</form>
Campo Contraseña. Cuando un usuario inserte una contraseña dentro de un formulario
necesitaremos, casi seguro, que el valor de la contraseña no aparezca y que por el contrario
aparezcan caracteres como asteriscos.
<form action=”ejemplo.php” method="POST" >
<p> Escribe tu Contraseña </p>
<input type="password" name="contraseña" value="password" id=”clase” size=”20” />
<input type="submit" value="Enviar" /> ---botón de envió---
</form>
Campo Checkbox. Nos permite capturar un dato del usuario mediante un elemento de
check. El check puede tener dos valores, seleccionado o no seleccionado.
Manual Básico de HTML David Carani Quispe
<form action=”ejemplo.php” method="POST" >
<p> Seleccione una opción </p>
<input type="checkbox" name="nombre" value="dato" />
<input type="submit" value="Enviar" /> ---botón de envió---
</form>
b) Introducción por medio de textos (múltiples línea)
Un elemento algo más avanzado que el campo de entrada de datos es el área de texto.
Mediante un área de texto tenemos la capacidad de que el usuario inserte una gran cantidad
de datos y además que esos datos puedan estar en diferentes líneas.
<textarea name="nombre” rows="numerofilas" cols="numerocolumnas"></textarea>
Los atributos que nos encontramos en un textarea son:
rows Indica el número de filas que tiene el área de texto.
cols Indica el número de columnas que tiene el área de texto.
name Al igual que sucede con otros elementos del formulario, name contiene el nombre
del campo, el cual será enviado al servidor para ser procesado
Si queremos crear un área de texto de 20 filas por 100 columnas en el que un usuario pueda
insertar un comentario tendríamos el siguiente código
<form action=”ejemplo.php” method="POST" >
<p> introduce tus comentarios</p>
<textarea name=”Comentarios” rows=”20” cols=”100”>
</textarea>
<input type="submit" value="Enviar" /> ---botón de envió---
</form>
c) Introducción por medio de menús
Otro elemento que podemos insertar dentro de un formulario es un combo de opciones. Es
decir, un elemento en el que el usuario pueda elegir un elemento o varios de una lista.
<select name="nombre" size="valoresvisibles" multiple="multiple">
<option> Opción1 </option>
<option> Opción2 </option>
<option> Opción3 </option>
<option> Opción4 </option>
</select>
Manual Básico de HTML David Carani Quispe
Los atributos que encontramos son:
name Al igual que en anteriores casos sirve para dar un nombre al campo que se enviará
al servidor.
size Indica el número de opciones que aparecen visibles por defecto. En el caso de que
haya más opciones que las elegidas por defecto lo que nos aparecerá será un scroll para
poder localizar todas.
multiple Nos servirá para poder elegir varias de las opciones. Es decir, para tener una
elección múltiple.
Si queremos que una de las opciones del combo vaya marcada, aplicamos:
<form action=”ejemplo.php” method="POST" >
<p> Seleccione una opción</p>
<select name=”ColorPreferido” >
<option> Rojo </option>
<option> Azul </option>
<option> Blanco </option>
<option> Naranja </option>
<option> Celeste </option>
</select>
<input type="submit" value="Enviar" /> ---botón de envió---
</form>
d) Introducción por medio de botones
Botones.
Una vez que hemos insertado campos de texto en nuestro formulario es hora de insertar
botones.
Mediante los botones podremos realizar operaciones de envío del formulario, de
manipulación de datos, borrado,…
Existen dos formas de insertar botones dentro de un formulario:
- El elemento input
- El elemento button
Manual Básico de HTML David Carani Quispe
La primera, recurre nuevamente al elemento input que hemos visto anteriormente para los
campos de texto.
La sintaxis para un botón mediante un elemento input será
<input type="button" value="TextoBoton" />
Si bien, este botón no hace nada por sí solo; tenemos que darle un comportamiento para que
el botón tenga funcionalidad.
Botones de envío
En el caso del elemento input podemos poner botones de otras dos formas y en estos casos
ya con funcionalidad. Estos son los tipos “submit” y “reset”.
Para crear un botón que nos envíe los datos del formulario al servidor tenemos el tipo
“submit”.
Su sintaxis es:
<input type="submit" value="TextoBotón"/>
El otro tipo de botón con funcionalidad es el que nos permite el borrado de los datos del
formulario. Para ello tenemos el tipo “reset”.
La sintaxis de es:
<input type="reset" value="TextoBotón"/>
Cuando el usuario pulse sobre el botón de borrado. Todos los valores que el usuario haya
insertado en el formulario se eliminarán.
Elemento button
Como hemos visto hasta ahora los botones que hemos insertado han sido mediante el
elemento “input”, si bien contamos con otro elemento para poner botones en el formulario
que es el elemento “button”. Cuya funcionalidad es la misma que la del elemento “input”.
La sintaxis del elemento button es:
<button type="TipoBoton" name="nombre" value="ValorBoton"></button>
Dependiendo del tipo de atributo que asignamos al “type” obtendremos un comportamiento
u otro:
submit crea un botón para el envío de formulario.
reset crea un botón para el borrado de datos del formulario.
button crea un botón normal.
Manual Básico de HTML David Carani Quispe
Manual Básico de HTML David Carani Quispe
Señala el inicio y final de una tabla. Sus atributos son:
Align Establece la alineación de la tabla o texto mediante ALIGN=LEFT o
ALIGN=RIGHT
Bgcolor Establece el color de fondo de las celdas de la tabla
Border Determina el ancho del borde en pixeles
BorderColor Asigna un color al borde
BorderDark Determina el color de la parte oscura de un borde de 3 dimensiones
BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones
Caption Especifica el titulo para la tabla
Cellpadding Establece la cantidad de espacio libre junto al contenido de
una celda
Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla
Width Determina el ancho de la tabla en pixeles o en un porcentaje
Etiqueta <th> </th>
Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de
una tabla.
Atributos principales:
Colspan especifica el número de celdas que cubre el encabezado
Align Determina la posición del texto del titilo
Etiqueta <tr> </tr>
Indica al navegador que exhiba el texto dentro de una fila; puede también interpretarse
como la etiqueta que define filas.
Atributos principales:
Align Alineación del texto/objetos en toda la fila
Etiqueta <td> </td>
La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de
una tabla.
Align Alineación del texto/objeto de la celda
Bgcolor Color de fondo de la celda
Background imagen de fondo de una celda
Width Ancho de la celda/columna con respecto al ancho de la tabla. Solo precisa definir el
ancho en la primera celda de la columna.
Manual Básico de HTML David Carani Quispe
Recuerde que dentro de una celda, usted puede insertar desde texto o un gráfico hasta una
tabla entera.
