Guia HTML Parte2 de 2

DISEÑO DE PAGINAS WEB CON HTML Y
JAVASCRIPT
HTML Guía de aprendizaje

Segunda parte
Fuente: https://aprende-web.net
Más acerca de las Imágenes <img></img>

Como vimos previamente para incluir una imagen en una página HTML debemos guardarla
previamente en la carpeta raíz de nuestra Web (o en alguna de sus carpetas secundarias), o bien tener
localizada la URL o dirección de la imagen en otra página Web.
Para incluir imágenes usaremos la etiqueta <img/> que llevará obligatoriamente el atributo
src="URL_de_la_imagen".
Otro atributo que, si no es obligatorio, es muy recomendable es el atributo alt="texto". Como

valor se suele escribir un texto corto que es el que aparecerá en el caso de que el navegador no pueda
cargar la imagen. Este texto suelen mostrarlo algunos navegadores en un recuadro al pasar el ratón por
encima de la imagen.
La sintaxis de una etiqueta de imagen en su forma básica será la siguiente:

<img src="URL_de_la_imagen" alt="texto_explicativo"/>
Cambiar el tamaño de la imagen

Para cambiar las dimensiones de una imagen podemos usar los atributos height=" " (alto) y
width=" " (ancho) en la etiqueta img, para definir el alto y el ancho de la imagen.
Los valores de los atributos height=" " y width=" " pueden ser números, que el navegador
interpreta como píxeles; o también porcentajes, que indican el tanto por ciento de espacio que ocupa la
imagen dentro de su elemento contenedor, caso de que no tuviera elemento contenedor, éste sería la
página (elemento body).
Posición de la imagen
Las imágenes son elementos en linea, por lo que una imagen insertada dentro de un texto se comportará
como un elemento más del texto.
Esto puede quedar bien con imágenes muy pequeñas, que no superen la altura de una línea de texto,
pues alrededor de la imagen se mostrará una sola línea de texto que se colocará en la parte inferior de la
imagen.
Ejemplo 1: Codigo HTML

Esta imagen está integrada en el texto pero
<p>Esta imagen <img src="objetos/internet2.jpg" como es muy pequeña no distorsiona la página.
alt="mundo"> está integrada en el texto pero
como es muy pequeña no distorsiona la
página.</p>
Ejemplo 2: Codigo HTML
<p>Esta imagen <img src="objetos/internet.jpg"

alt="Internet"> está integrada en el texto y como
es muy grande deja espacio en blanco alrededor
suyo.</p>
Esta imagen está

integrada en el texto y como es muy grande deja
espacio en blanco alrededor suyo.
Alineación de imágenes
Lo habitual es integrar la imagen en el texto de forma que la imagen quede a un lado de la página y el
texto cubriendo todo el otro lado. Esto lo conseguimos con el atributo align="left" (imagen a la
izquierda), o align="right" (imagen a la derecha). Este atributo debemos insertarlo dentro de la
etiqueta de imagen:
Ejemplo: Alineación izquierda
<img src="objetos/internet.jpg" alt="internet"

align="left"/>este es texto de ejemplo
este es texto de
ejemplo
<img src="objetos/internet.jpg" alt="internet" este es texto de
align="right"/>este es texto de ejemplo ejemplo
Bordes y márgenes
El atributo border="..." define un borde del tamaño indicado alrededor de la imagen. Su valor es
un número que expresa los píxeles de grosor que tendrá el borde.
Los atributos vspace="..." y hspace="..." indican el espacio libre, en pixeles, que tiene que
colocarse entre la imagen y los otros elementos que la rodean. vspace indica los margenes laterales,
mientras que hspace indica el margen superior e inferior.
Imágenes de fondo
Para ello en la etiqueta <body> incluiremos el atributo background="URL_de_la_imagen" .
el código será así:
<body background="imagenes/fondo.gif">
La imagen se repite en forma de mosaico hacia la izquierda y hacia abajo hasta completar toda la
página. La siguiente página de ejemplo tiene esta imagen de fondo:
imagen:
Favicon
Un favicon es la pequeña imagen que se muestra en la pestaña del navegador o en la lista de
marcadores (favoritos). En la barra de dirección, el tamaño del favicon es bastante reducido, 16x16
píxeles, pero en otros lugares como los marcadores puede tener un tamaño mayor (24x24, 32x32,
48x48 o 64x64).
Ejemplo: Algunas formas de insertar favicon
<link rel="icon" type="image/png" href="imagen.png" sizes="64x64">
<link rel="icon" type="image/svg+xml" href="imagen.svg" sizes="any">
<link rel="icon" type="image/vnd.microsoft.icon" href="imagen.ico" sizes="16x16

24x24 36x36 48x48">
TABLAS
Definición
Una tabla es una estructura que consta de una serie de casillas distribuidas en filas y columnas.
Elementos básicos de una tabla:
 Tabla: Espacio rectangular dividido por líneas horizontales y verticales de manera que se
forman diferentes compartimentos o casillas.
 Fila: cada una de las líneas horizontales de casillas de que consta la tabla.
 Columna: Cada una de las líneas verticales de casillas de que consta la tabla.
 Celda: Cada una de las casillas de la tabla.
Etiquetas básicas
Para crear una tabla sencilla en HTML deberemos seguir los siguientes pasos:
 El contenido de la tabla debe estar incluido entre las etiquetas <table> ... </table>
 Cada fila debe estar incluida entre las etiquetas <tr> ...</tr>
 Dentro de la etiqueta de fila (<tr> ...</tr>) incluiremos las etiquetas de celda: <td>
(contenido de la celda)</td>. por cada celda que haya en la fila incluiremos una
etiqueta <td> ...</td>, incluso si la celda esta vacía.
 Debemos poner en todas las filas (Etiquetas <tr>) el mismo número de celdas (etiquetas
<td>) para que la tabla quede de forma homogénea.
Ejemplo: Tabla sencilla.

<table>
<tr>
Fila 1,
<td>Fila 1, columna 1</td> Fila 1, Columna 1 Fila 1, Columna 3
<td>Fila 1, columna 2</td> Columna 2
<td>Fila 1, columna 3</td> F 2, C 1 F 2, C 2 F 2, C 3
</tr>
<tr> F 3, C 1 F 3, C 2 F 3, C 3
<td>F 2, C 1</td>
<td>F 2, C 2</td>
<td>F 2, C 3</td>
</tr>
<tr>
<td>F 3, C 1</td>
<td>F 3, C 2</td>
<td>F 3, C 3</td>
</tr>
</table>
Otras etiquetas
La etiqueta <th> ... <th> se emplea igual que la etiqueta <td> ... </td> y sustituye a ésta
para indicar que una celda es cabecera de tabla (se usa al principio de la columna o de la fila). Aunque
en principio el resultado es el mismo que si se usa la etiqueta <td>, (con la excepción de que la celda
con etiqueta <th> aparece en negrita) es conveniente diferenciar los dos tipos de celda si se van a
aplicar distintos estilos CSS en la cabecera y en el contenido de la tabla.
La etiqueta <caption>....</caption> se emplea para insertar un título a la tabla. Debe
colocarse justo después de la etiqueta <table>, y antes de la primera etiqueta <tr>
Ejemplo: tabla mas completa
TABLA DE EJEMPLO
<table>
<caption>TABLA DE EJEMPLO</caption> COLUMNA 1 COLUMNA 2 COLUMNA 3
<tr> FILA 1 F 1, C 1 F 1, C 2 F 1, C 3
<td></td>
<th>COLUMNA 1</th> FILA 2 F 2, C 1 F 2, C 2 F 2, C 3
<th>COLUMNA 2</th> FILA 3 F 3, C 1 F 3, C 2 F 3, C 3
<th>COLUMNA 3</th>
</tr>
<tr>
<th>FILA 1</th>
<td>F 1, C 1</td>
<td>F 1, C 2</td>
<td>F 1, C 3</td>
</tr>
<tr>
<th>FILA 2</th>
<td>F 2, C 1</td>
<td>F 2, C 2</td>
<td>F 2, C 3</td>
</tr>
<tr>
<th>FILA 3</th>
<td>F 3, C 1</td>
<td>F 3, C 2</td>
<td>F 3, C 3</td>
</tr>
</table>
Bordes
Las celdas de la tabla aparecen por defecto sin un borde definido. esto se puede cambiar usando el
atributo border en la etiqueta <table>, el valor de este atributo es un número que nos indicará el
grosor del borde medido en pixels.
Ejemplo:
<table border="2"> ... </table>
Tamaño de celdas
Podemos modificar el tamaño de las celdas de la tabla, para ello utilizaremos los atributos height
(alto) y width (ancho). Los atributos pueden colocarse en cualquiera de las celdas, pero hay que tener
en cuenta que si se modifica el ancho de una celda, se modifica también el tamaño de la columna, y al
modificar el alto de una celda, modificamos el alto de la fila.
Alineación
Por defecto el texto dentro de las celdas marcadas por la etiqueta td aparece alineado a la derecha y
centrado respecto a la vertical. En las celdas con la etiqueta th el texto aparece por defecto centrado en
horizontal y en vertical, y además en negrita. Esto puede cambiarse y alinearlo de diferentes formas.
Podemos alinear el texto de las celdas igual que si fuera un párrafo mediante el atributo align. Los
valores que puede tomar el atributo son left (izquierda) center (centrado) o right (derecha)
aplicado a las etiquetas td o th .
También podemos alinear el texto de la celda en vertical, mediante el atributo valign. Los valores
que puede tomar el atributo son top (posición superior), middle (en el centro) o bottom (posición
inferior). lo aplicaremos igualmente a las etiquetas td o th .
Separación entre celdas

Por defecto las celdas aparecen separadas unas de otras mediante una pequeña separación. Podemos
aumentar o disminuir esta separación mediante el atributo cellspacing cuyo valor es un número
que indicará los píxeles que deben estar separados. Si su valor es cero desaparece la separación entre
las celdas. El atributo debe aplicarse a la etiqueta table.
Color de fondo y bordes

Podemos modificar el color de los bordes de la tabla mediante el atributo bordercolor. Este
atributo debemos insertarlo en la etiqueta table y afecta a toda la tabla.
También podemos cambiar el color de fondo de las celdas de la tabla, para ello usaremos el atributo
bgcolor, el cual puede insertarse en las etiquetas de celda (td o th) o en las etiquetas de fila (tr),
en este último caso el cambio de color afectará a toda la fila.
Secciones de la tabla: thead, tbody, tfoot

Permite organizar la tabla en 3 secciones: cabecera, cuerpo y pie de la tabla
Ejemplo:
<table border="1" style=”width: 100%”>
<caption>Titulo
de tabla</caption>
<colgroup>
<col
style="width: 20%"/>
<col
<col
</colgroup>
<thead>
<tr>
<th rowspan="2">Tabla Avanzada</th>
<th colspan="2">Cabecera Múltiples

Columnas</th>
</tr>
<tr>
<th>Primera Col. Cab.</th>
<th>Segunda Col. Cab.</th>

</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Pie de tabla.</td>

</tr>
</tfoot>
<tbody>
<tr>
<th>Fila 1</th>
<td>Fila 1 Columna 1</td>

</tr>
<tr>
<th>Fila 2</th>

</tr>
</tbody>
</table>
Fusión de celdas
Fusionar celdas consiste en unir varias celdas en una, haciendo que ésta ocupe el espacio de varias filas
o columnas.
Fusión de celdas en la misma fila
Para que una celda ocupe dos o más columnas dentro de la misma fila, se utiliza el atributo colspan.
El valor de este atributo es el número de columnas que queremos que ocupe la celda.
Ejemplo: fusión de celdas
<table width="80%" border="1" Column Columna Columna Column

cellspacing="0" cellpadding="5"> a1 2 3 a4
<tr>
Fusión celdas F1-C2
<th>Columna 1</th> F1-C1 F1-C4
<th>Columna 2</th> y F1-C3
<th>Columna 3</th> Fusión celdas F2- Fusión celdas F2-
<th>Columna 4</th> C1 y F2-C2 C3 y F2-C4
</tr>
<tr> Fusión celdas F3-C1, F3-C2, F3-C3 y
<td> F1-C1</th> F3-C4
<td colspan="2"> Fusión celdas F1-
C2 y F1-C3</td>
<td> F1-C4</td>
</tr>
<tr>
<td colspan="2">Fusión celdas F2-
C1 y F2-C2</td>
C3 y F2-C4</td>
</tr>
<tr>
C1, F3-C2, F3-C3 y F3-C4</td>
</tr>
</table>
Fusión de celdas en la misma columna

De forma análoga a lo visto anteriormente, podemos fusionar varias celdas contiguas que estén en la
misma columna; para ello utilizaremos el atributo rowspan. Al igual que en el caso anterior, el valor
del atributo será el número de celdas que queramos fusionar.
Formularios
El formulario consta de unos mecanismos en donde el usuario responde a una serie de preguntas. Para
ello puede escribir en una serie de cajas la información solicitada, y/o también elegir entre una o varias
opciones disponibles, las cuales pueden o no formar una lista.
El lenguaje HTML puede crear formularios con cajas de texto y botones que mandan información, si
bien mediante HTML sólo podremos enviarlo a un correo electrónico.
La mayoría de las páginas que tienen formularios utilizan también otros tipos de programación como
PHP, java, phython o ASP, junto con bases de datos, de forma que estos programas guardan y procesan
la información de forma automática.
Elementos HTML del formulario
Un formulario debe ir siempre dentro de la etiqueta <form> .... </form>. Tanto los elementos
para mandar información como los adicionales (textos, imágenes, elementos explicativos sobre la
información que se debe mandar, etc.) deben ir encerrados dentro de estas etiquetas.
Los elementos de formulario que recogen información, como botones y cuadros de texto, se denominan
"campos de formulario" o "controles de formulario". La mayoría de controles se crean con la etiqueta
<input>.
Atributos de la etiqueta form
Dentro de la etiqueta form debemos insertar algunos atributos:
action
El atributo action indica dónde va a ser enviado el formulario.
<form action="procesar/pagina_procesado.php" ...>

method
El atributo method se encarga de especificar la forma en la que el formulario es enviado. Los dos
valores posibles que puede tomar esta atributo son post y get. Normalmente y, salvo que digamos lo
contrario, daremos siempre el valor post.
Campos de texto.
Texto corto
Para crear una caja en la que escribir un texto corto, donde se introduce un dato simple, usaremos la
etiqueta input con el atributo y valor type="text". El atributo name="tipo_de_dato"
también es necesario, ya que nos indicará al recibirlo que tipo de dato queremos recoger. El código
básico para este campo de texto será el siguiente:
<input type="text" name="tipo_de_dato"/>;
otros atributos
Aunque no son imprescindibles podemos insertar en este tipo de campos otros atributos que pueden
sernos útiles:
 size: define el tamaño de la caja a lo ancho. Su valor es un número que indicará cuantos
caracteres (letras o espacios en blanco) va a ocupar. Si el texto ocupa más sitio que la caja sólo
veremos el final del mismo, pero será válido igualmente.
 maxlength Define el máximo de caracteres de texto que puede ser introducido en el
formulario, Indica el máximo de texto que puede ser escrito, a partir del cual no nos dejará
escribir más.
 value Este atributo indica el texto que aparecerá escrito en la caja por defecto cuando se
cargue la página. El texto que insertemos como valor de este atributo es el que se mostrará por
defecto. Normalmente las cajas de texto aparecen vacías, pero mediante este atributo en la caja
de texto vemos ya escrito este texto.
Texto oculto
podemos crear una etiqueta de texto oculto, que funciona igual que la anterior, pero en la cual los
caracteres que escribimos permanecen ocultos, en su lugar se muestran unos puntos gruesos que los
sustituyen. Este tipo de etiquetas son los que se emplean para introducir contraseñas.
Para ello usaremos la etiqueta input con el atibuto y valor: type="password" . su aspecto es el
siguiente:
<p><input type="password" name="clave"/></p>
Texto largo
Si queremos que nos puedan enviar un texto más largo (como una opinión, un comentario, etc.),
utilizaremos otro tipo de etiqueta, que mostrará en la pantalla una caja más grande. para ello
utilizaremos la etiqueta <textarea> con su cierre correspondiente </textarea>.
Al igual que en las etiquetas anteriores debemos escribir el atributo name para asociar la etiqueta a un
tipo de datos.
Esta etiqueta admite dos atributos para cambiar el ancho y el alto de la caja de texto. estos son:
 rows: define el número de líneas del campo de texto, es decir, su altura o filas de texto que
caben. si al escribir se sobrepasan, la caja muestra una barra de desplazamiento en su parte
derecha.
 cols: define el número de columnas del campo de texto medido en número de caracteres, es
decir la anchura o número de caracteres que se pueden escribir por línea.
Para que aparezca un texto predefinido dentro de la etiqueta no usaremos el atributo value sino que
escribiremos el texto que queramos que aparezca entre las etiquetas
<textarea>texto_a_mostrar</textarea>.
<p><textarea name="comentario" rows="5" cols="50">Escribe aquí tu comentario: </textarea></p>
Botones.
Botones radio
Los botones radio presentan varias opciones de la que deberá marcarse sólo una. Si se intentan elegir
dos opciones, al elegir la segunda se desactiva la primera. pero esto lo veremos mejor mediante un
Ejemplo:
Si queremos que una de las opciones aparezca ya marcada al cargarse la página le incluiremos también
el atributo checked="checked". En el ejemplo anterior podríamos haberlo incluido en alguna de
las líneas de la siguiente manera:
<p><input type="radio" name="estacion" value="primavera" checked="checked"/> Primavera </p>
En este caso la primera opción aparecería marcada al cargar la página.
Ejemplo: botones radio
Checkbox
También llamadas cajas de validación son también botones de opciones, pero en este caso podemos
marcar uno o varios a la vez, ya que al marcar uno no se desactivan los otros, pues cada botón es
independiente del resto.
Al igual que en los botones radio se puede dejar una o varias opciones ya marcadas al cargar la página
mediante el atributo checked="checked". Este atributo puede escribirse simplemente checked.
Listas de opciones.
Listas desplegables
Dentro de un formulario podemos poner también una lista desplegable en la que el usuario puede elegir
una o varias opciones.
El código necesario para este tipo de listas es el siguiente:
 La lista entera debe estar encerrada dentro de la etiqueta <select> ... </select>
 Dentro de la etiqueta <select> ... </select> escribiremos las opciones de la lista
mediante las etiquetas <option> texto_de_la_opción </option>; es decir, en el
ejemplo anterior para la primera opción escribiremos <option>rojo</option>; para la
segunda <option>amarillo </option> y así sucesivamente hasta completar todas las
opciones.
 Al igual que en los campos anteriores debemos insertar el atributo name en la etiqueta select
para tener una referencia en los datos recibidos del campo al que se refieren.
Ejemplo: lista desplegables
La etiqueta <select> puede llevar varios atributos aparte del atributo name. Todos ellos son
opcionales. Estos son:
 size: Indica el número de opciones que veremos en la lista. El resto lo veremos mediante la
barra lateral de desplazamiento. Su valor es por tanto un número.
 multiple: Permite seleccionar más de un elemento de la lista. La elección de más de un
elemento se hace igual que con el explorador Windows, con las teclas CTRL o SHIFT. Su valor
es siempre multiple="multiple"
Las etiquetas option también pueden ser modificadas por varios atributos. estos son:
 selected: Indica el valor que se ve por defecto (al cargar la página), que será aquél que lleve
esta etiqueta. al igual que en el caso anterior, su valor será siempre
selected="selected" .
 value: Indica el valor o texto que será mandado al correo o programa de procesamiento, en
caso de que queramos que éste sea distinto del texto de la opción. Su valor será el texto o valor
que queramos mandar (value="texto").
Botón de envio
<input type="submit" value="texto">
La etiqueta y atributo input type="submit" es la que indica que éste es el botón de envio. El
atributo value indica cual es el texto que incluiremos dentro del botón .
botón de borrado
Este botón sirve para borrar todos los campos del formulario y dejarlos en sus valores predeterminados.
El código HTML de este botón es parecido al del anterior, lo único que cambia es el valor del atributo
type el cual es reset. por tanto su código HTML será el siguiente:
<input type="reset" value="texto">
Envío de archivos adjuntos

Podemos pedir al usuario que nos envíe junto con el formulario un archivo adjunto, para ello usaremos
el código input type="file" el atributo name también es imprescindible para poder recibir
correctamente los datos: el código HTML de este tipo de campo será el siguiente:
<input type="file" name="archivo">
Al incluir un control para adjuntar archivos, es obligatorio añadir el atributo enctype en la etiqueta
<form> del formulario.
El valor del atributo enctype en este caso debe ser multipart/form-data; por tanto la etiqueta
form para poder adjuntar un archivo debe tener el siguiente aspecto:
<form action="..." method="post" enctype="multipart/form-data">
Campos ocultos
En algunos casos, aparte de los datos enviados por el usuario, puede resultar útil enviar datos definidos
por nosotros mismos que ayuden al programa a procesar el formulario. He aquí un ejemplo de su
código:
<input type=hidden name="sitio" value="http://aprende-web.net/">
Botones normales
Su aspecto es similar al de los botones de envío y borrado. Como en éstos, el atributo value indica el
texto que introducimos en el botón:
El código de el botón anterior es el siguiente:
<input type="button" value="botón normal" name="boton1">
Agrupación de etiquetas
Es posible mejorar el aspecto de un formulario agrupando varias etiquetas en un mismo apartado. Para
ello utilizaremos la etiqueta <fieldset> ... </fieldset>. Dentro de ella incluiremos varios
campos. Esta etiqueta agrupa dentro de un cuadro a los campos incluidos dentro de ella.
Además también podemos poner una cabecera o título al cuadro que forma la etiqueta fieldset
mediante la etiqueta: <legend>texto</legend>, la cual debe estar también incluida en la
etiqueta fieldset.
Ejemplo:fieldset
Mediante la etiqueta fieldset se crea un cuadro que agrupa varios elementos del formulario. En un
formulario podemos incluir varias etiquetas fieldset con sus correspondientes etiquetas legend,
creando así varios apartados dentro del formulario
Widgets HTML5 para
formularios
En la sección anterior, analizamos el elemento <input> , que abarca
los valores originales del atributo type disponible desde los
primeros días de HTML. Ahora veremos en detalle la funcionalidad de
los controles de formulario más nuevos, incluidos algunos tipos de
entrada nuevos, que se agregaron en HTML5 para permitir la
recopilación de tipos específicos de datos.
Nota Importante: Aún no en todos los navegadores están soportados,

por favor probarlos en diferentes navegadores y sacar su propia
conclusión.
Campo de dirección de correo electrónico

Este tipo de campo se establece utilizando el valor de email para el
atributo type dentro de un tag input:
Ejemplo:
<input type="email" id="email" name="email">
Cuando se usa este type , el usuario debe escribir una dirección de

correo electrónico válida en el campo. Cualquier otro contenido hace
que el navegador muestre un error cuando se envía el formulario.
También puede usar el atributo multiple en combinación con el tipo de

entrada de email para permitir que se ingresen varias direcciones de
correo electrónico en la misma entrada (separadas por comas):
Ejemplo:
<input type="email" id="email" name="email" multiple>

En algunos dispositivos, especialmente en dispositivos táctiles con teclados
dinámicos como teléfonos inteligentes, se puede presentar un teclado virtual
diferente que sea más adecuado para ingresar direcciones de correo electrónico,
incluida la tecla @.
Campo de búsqueda
Los campos de búsqueda están destinados a usarse para crear cuadros de búsqueda en páginas y
aplicaciones. Este tipo de campo se establece mediante la search valor para el atributo de type:
Ejemplo:
<input type="search" id="search" name="search">
La principal diferencia entre un campo de text y un campo de search es cómo el navegador le da estilo
a su apariencia.
A menudo, los campos tipo search se representan con esquinas redondeadas, a veces también muestran
una "Ⓧ", que borra el campo de cualquier valor al hacer clic. ", que borra el campo de cualquier valor al hacer clic.
Campo de número de teléfono

Se puede crear un campo especial para completar números de teléfono usando tel como
el valor del atributo type:
<input type="tel" id="tel" name="tel">
Cuando se accede a través de un dispositivo táctil con un teclado dinámico, la mayoría de los
dispositivos mostrarán un teclado numérico cuando se encuentre type="tel" , lo que significa que este
tipo es útil siempre que un teclado numérico sea útil, y no solo tiene que usarse para teléfono números.
Campo URL
Se puede crear un tipo especial de campo para ingresar direcciones web utilizando el valor url para el
atributo type :
<input type="url" id="url" name="url">
Este tipo de campo agrega restricciones especiales de validación al campo. El navegador informará un
error si no se ingresa ningún protocolo (como http: :), o si la URL está mal formada.
En los dispositivos con teclados dinámicos, el teclado predeterminado a menudo mostrará algunos o
todos los caracteres web como dos puntos, punto y barra diagonal como teclas predeterminadas.
Campo numérico
Los controles para ingresar números se pueden crear con un type de number <input> .
Este control se parece a un campo de texto, pero solo permite números de punto
flotante, y generalmente proporciona botones en forma de rueda giratoria para
aumentar y disminuir el valor del control. En dispositivos con teclados dinámicos,
generalmente se muestra el teclado numérico.
<input type="number" name="age" id="age" min="1" max="10" step="2">
Slider controls
<label for="price">Choose a maximum house price: </label>
<input type="range" name="price" id="price" min="50000" max="500000" step="100"
value="250000">
<output class="price-output" for="price"></output>
Date and time pickers
datetime-local
<input type="datetime-local" name="datetime" id="datetime">
month
<input type="month" name="month" id="month">
time
<input type="time" name="time" id="time">
week
<input type="week" name="week" id="week">
Constraining date/time values

<label for="myDate">When are you available this summer?</label>
<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7"
id="myDate">
Color picker control

<input type="color" name="color" id="color">

Guia HTML Parte2 de 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia HTML Parte2 de 2

Cargado por

Copyright:

Formatos disponibles

DISEÑO DE PAGINAS WEB CON HTML Y

HTML Guía de aprendizaje

Más acerca de las Imágenes <img></img>

Otro atributo que, si no es obligatorio, es muy recomendable es el atributo alt="texto". Como

La sintaxis de una etiqueta de imagen en su forma básica será la siguiente:

Cambiar el tamaño de la imagen

Ejemplo 1: Codigo HTML

Ejemplo 2: Codigo HTML

<p>Esta imagen <img src="objetos/internet.jpg"

Esta imagen está

<img src="objetos/internet.jpg" alt="internet"

<link rel="icon" type="image/svg+xml" href="imagen.svg" sizes="any">

<link rel="icon" type="image/vnd.microsoft.icon" href="imagen.ico" sizes="16x16

Ejemplo: Tabla sencilla.

Separación entre celdas

Color de fondo y bordes

Secciones de la tabla: thead, tbody, tfoot

<th rowspan="2">Tabla Avanzada</th>

<th colspan="2">Cabecera Múltiples

<th>Primera Col. Cab.</th>

<th>Segunda Col. Cab.</th>

<td colspan="3">Pie de tabla.</td>

<td>Fila 1 Columna 1</td>

<td>Fila 1 Columna 2</td>

<td>Fila 2 Columna 1</td>

<td>Fila 2 Columna 2</td>

Ejemplo: fusión de celdas

<table width="80%" border="1" Column Columna Columna Column

Fusión de celdas en la misma columna

<form action="procesar/pagina_procesado.php" ...>

Ejemplo: botones radio

Ejemplo: lista desplegables

<input type="reset" value="texto">

Envío de archivos adjuntos

<form action="..." method="post" enctype="multipart/form-data">

Nota Importante: Aún no en todos los navegadores están soportados,

Campo de dirección de correo electrónico

<input type="email" id="email" name="email">

Cuando se usa este type , el usuario debe escribir una dirección de

También puede usar el atributo multiple en combinación con el tipo de

<input type="email" id="email" name="email" multiple>

<input type="search" id="search" name="search">

Campo de número de teléfono

<input type="tel" id="tel" name="tel">

<input type="url" id="url" name="url">

<input type="number" name="age" id="age" min="1" max="10" step="2">

Date and time pickers

Constraining date/time values

Color picker control

También podría gustarte