Para
crear los menus de nuestro sitio web usaremos las listas, incluyendo dentro de
estas el enlace correspondiente.
Mas
adelante le daremos forma a todas las etiquetas para que su visualización en el
navegador sea mas correcta, ese formato lo daremos cuando empecemos con CSS.
Son
una parte muy importante dentro de nuestros documentos web, ya que permiten
obtener datos del usuario, como por ejemplo un formulario de contacto, o de
pedidos.
Se
abren y cierran con la etiqueta “form”.
Dentro
pondremos etiquetas “label” para mostrar que solicitamos en el campo que
obtendrá el dato, estos los indicamos con la etiqueta “input”.
Dentro
de los inputs podemos incluir diferentes tipos: textos, números, fechas, campos
de selección, de opciones, botones, etc.
La
etiqueta form, indicara a que pagina mandara los datos y de que forma post o
get, con get los datos se verán dentro de la url en el navegador, con post no
serán visibles directamente es algo mas seguro.
El
siguiente formulario incluye las bases de estos:
<!DOCTYPE html>
<html>
<head>
<title>
Formulario
</title>
</head>
<body>
<h1>Formulario</h1><br/>
<form action="#" method="post">
<legend>Formulario de contacto</legend>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" placeholder="Escribe aqui tu nombre"/><br/>
Los
labels los asignamos a los campos de introducción de datos indicando el mismo
nombre, “label for=”nombre”.
El
“placeholder” que aparece en el input de nombre, indicara al usuario que debe
escribir en el, desaparece al tomar el foco en el.
En el
código podras ver como poner un input en modo password, para que al escribir se
vea el carácter * y no el que se este introduciendo, esto se realiza poniendo
el type=”password”.
El
resto del código es autoexplicativo, cópialo y haz pruebas añadiendo y quitando
opciones.
Para crear tablas en nuestro documento HTML usaremos la etiqueta “table”, dentro de esta etiqueta introducimos la etiqueta “tr” que indica la fila, para incluir elementos dentro de cada fila usaremos la etiqueta “td”.
Para diferenciar la cabecera de la tabla podemos usar “th” dentro de su fila marcada por “tr”.
Si queremos que se muestre el borde de la tabla se lo indicaremos dentro de la apertura de la etiqueta “table” incluyendo “border=1”.
Otra propiedad importante como puedes ver en el código siguiente es la propiedad “colspan”, en este caso le indicamos que ocupe 2 columnas.
Otra parte importante de cualquier sitio web son los enlaces, tanto internos (dentro del documento) como externos (dirigidos a otros sitios web).
Para ello usaremos la etiqueta “a” en la que indicaremos en la propiedad “href” a donde queremos dirigirnos.
Con la propiedad “target” indicamos que el documento se abra en una pestaña distinta del navegador, si no incluimos esta opción, el documento se abrirá en la pestaña activa.
Para insertar imágenes en nuestro documento web usaremos la etiqueta “img”, pasándole con “src” la ruta al archivo imagen que queremos mostrar, indicando en la propiedad “alt” un texto alternativo por si falla la carga de la imagen.
El ancho y alto podemos incluirlo también antes de cerrar la etiqueta “img”, aunque normalmente se incluye en un archivo externo CSS que es el que dara el formato visual a nuestra web, separando asi el contenido HTML de la visualización que daremos con CSS.
Un ejemplo de código HTML para agregarla a nuestro documento podría ser asi:
<img src="img/jose.jpg" alt="Imagen de Jose" title="Imagen" widht="80px" height="80px"/>
