Diseño de Sitios Web
Diseño de Sitios Web
Diseño de Sitios Web
UNIDAD Nº I
Estructura de HTML
1 www.iplacex.cl
SEMANA 2
Consideraciones previas
2 www.iplacex.cl
Introducción
En la lección anterior aprendiste los conceptos básicos para crear una página web con
algunas etiquetas más comunes de HTML. En esta ocasión, veremos principalmente la
creación de un formulario, junto con ello conocerás el uso de nuevas etiquetas.
3 www.iplacex.cl
Ideas fuerza
4 www.iplacex.cl
Desarrollo
2. Title
Una etiqueta muy importante dentro del documento es la etiqueta <title>, que a pesar de
no ser obligatoria para que este se ejecute, es la que mostrará en el navegador el nombre
de nuestra página web.
Cuando esta etiqueta no se incluye, la pestaña del navegador mostrará la ruta en la que
se encuentra almacenado el documento.
El titulo se declara dentro de la cabecera, es decir, entre las etiquetas <head></head>
Ejemplo:
Con título:
5 www.iplacex.cl
UTF-8:
La etiqueta meta charset sirve para indicar al navegador que estemos utilizando, el tipo
de codificación de caracteres que tiene nuestro documento. UTF-8 es el estándar de
HTML5, pues es el sistema de codificación más extendido y con más soporte, en
comparación a otros.
Esta etiqueta debe ir en la cabecera, entre las etiquetas <head></head>
Formularios:
Los formularios HTML se presentan para que el usuario ingrese alguna clase de dato y
son muy útiles a la hora de recolectar información. Un formulario se define con las
etiquetas <form></form> y deben ir dentro del cuerpo de la página.
Dentro de las etiquetas form debe ir cualquier tipo de input (entrada), es decir, los
elementos que permitirán ingresar información.
2.2 Input:
Es de suma importancia conocer los distintos tipos de la etiqueta input, esto se definirá
con el atributo type, el que cambiará según el tipo de dato que deseemos pedirle al
6 www.iplacex.cl
usuario. Cada tipo de input tendrá su propia manera de declararse, a continuación, se
presentan los tipos más comúnmente utilizados:
Text:
Las entradas de texto funcionan para ingresar cualquier tipo de dato, pues acepta todo
tipo de caracteres.
Es importante para diferenciar el tipo de input, poner el atributo type=”text” que es lo que
indicará que es una entrada de texto.
El atributo name le asigna un nombre distintivo a la entrada input.
Para que un texto sea registrable, es necesario que tenga un name, sea visible y esté
habilitado.
A continuación, te mostramos los tipos de input que se pueden generar a partir del atributo
type.
7 www.iplacex.cl
Algunos de ellos, permiten validar estos campos, ya que restringen el tipo de datos que
se pueden ingresar. Por ejemplo, el atributo type=”number”, solo permite ingresar números
y el atributo type=”email”, valida que lo ingresado este en formato correo.
Radio:
Los llamados radio buttons o botones de radio, funcionan para que el usuario pueda
seleccionar una opción entre varias dadas.
En este caso, cada opción debe ser un input independiente, pero los conjuntos de
opciones deben tener siempre el mismo nombre, si no se cumple esta regla y un input
radio tiene un nombre diferente, se considerará de un conjunto aparte.
Es importante dar un valor (value) a cada opción, así definirás el valor que se rescatara
de la opción seleccionada.
El texto que se pondrá seguido de cada etiqueta input será el que se verá en la página
web.
Checkbox
Los checkbox, al igual que los radio buttons, representan una serie de opciones, pero, al
contrario, permiten seleccionar más de una opción.
Los inputs de tipo checkbox son independientes, por lo que cada uno debe tener un
nombre único y distintivo.
Es importante dar un valor (value) a cada opción, así definirás el valor que se rescatara
de la opción seleccionada.
El texto que se pondrá seguido de cada etiqueta input será el que se verá en la página
web.
8 www.iplacex.cl
Button:
Con un input de tipo button es posible agregar un botón dentro del formulario.
En el atributo value se debe agregar el texto que será visible dentro del botón.
El atributo name le asigna un nombre distintivo a la entrada input.
2.3 Tablas:
Una tabla HTML contiene filas combinadas con columnas, en ellas se puede ordenar el
contenido que será mostrado en la web. Para crear una tabla lo primero que deberás hacer
es declarar las etiquetas <table></table>
El atributo border que se muestra en el ejemplo servirá para dar un borde de 1 píxel a la
tabla y a cada uno de sus elementos.
Filas:
9 www.iplacex.cl
Encabezado:
Dentro de cada fila, será necesario hacer columnas, en este caso estamos trabajando con
sólo dos columnas en donde la primera fila contendrá el encabezado, que se declarará
con las etiquetas <th></th>. Los encabezados mostrarán letra en negrita para
diferenciarse del resto de filas.
10 www.iplacex.cl
Celdas de datos:
Contrario a los encabezados, las celdas de datos no destacarán el texto y servirán para
mostrar los datos correspondientes a la columna a su columna. Esta celda será declarada
con las etiquetas <td></td>.
Sin espacios
Resultado:
11 www.iplacex.cl
Con 5 espacios
Resultado:
HTML5:
HTML5 es la versión más actual de HTML en la cual se añadieron nuevos elementos,
como etiquetas y atributos para facilitar la organización y conseguir un código más
ordenado. Algunas etiquetas nuevas son:
12 www.iplacex.cl
Hagamos un ejercicio. Programaremos un sitio web con un formulario y tabla, como se ve
en la imagen:
13 www.iplacex.cl
Para obtener este resultado, utilizamos el siguiente código en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mi web iplacex</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Formulario simple</h1>
<form>
<table border="1">
<tr>
<td>Nombre:</td>
<td><input type="text" name="nombre"></td>
</tr>
<tr>
<td>Genero:</td>
<td>
<input type="radio" name="genero" value="masculino"> Masculino
<input type = "radio" name="genero" value="femenino">Femenino
<input type="radio" name="genero" value="otro">Otro
</td>
</tr>
<tr>
<td> Mascotas: </td>
<td>
<input type="checkbox" name="mascota1" value="perro">Perro
<input type="checkbox" name="mascota2" value="gatos">Gato
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Aceptar" name="btn"></td>
</tr>
</table>
</form>
</body>
</html>
14 www.iplacex.cl
Conclusión
La función principal de un formulario es almacenar y guardar los datos para que queden
registrados fácilmente. Es fundamental construir formularios bien diseñados para que los
usuarios puedan entender lo que se les solicita completar.
Una de las ventajas de utilizar e implementar formularios con HTML, es que son fáciles de
diseñar y totalmente personalizables. Cada atributo dentro de una etiqueta, entrega ciertas
características específicas para el comportamiento de una entrada de datos.
Si bien, aprendimos a crear campos de textos específicos para formularios, estos, no van
a interactuar o almacenar información en algún lugar, ya que necesitan conectarse a un
servidor a través de un lenguaje de programación que funciones del lado del servidor,
como por ejemplo PHP.
15 www.iplacex.cl
Bibliografía
• Celaya Luna, Ainoa. (2010). Creación de páginas web: HTML 5. Editorial ICB.
https://www.iplacex.cl/biblioteca
16 www.iplacex.cl
17 www.iplacex.cl