HTML + CSS
¿Qué vimos la clase anterior?
Rutas, enlaces, imágenes, videos,
fondos con css y selectores nuevos
Algunas cosas que ya vimos:
<img> h2{...}
<a></a> #pie{...}
<video></video> .columna{...}
<audio></audio> #pie img{...}
3
Episodio III
La “venganza” semántica y los
formularios de registro
Contenido
◎ Tags HTML (Foco semántico I)
◉ strong, em, cite, abbr, mark
◎ Tags para Formularios
◉ input (text, email, password, submit)
◉ radio buttons / checkboxes
◉ combobox (select + option)
◉ textarea
◉ atributo required
◉ atributo name
◎ CSS Pseudo selectores (hover, active, focus)
Y ¿qué es la semántica?
Algo que debemos tener en cuenta y mucho.
Los sitios web son hechos para humanos...
Y ¿qué es la semántica?
o og le !
p a ra G
.. . y
Algo que debemos tener en cuenta y mucho.
Los sitios web son hechos para humanos.
HTML Semántico
Uso de etiquetas HTML para
reforzar el significado del
contenido de nuestro sitio
web.
Ayuda mucho al S.E.O.
Tags Semánticos
== Importancia ==
<strong>Texto importante a destacar.</strong>
<b>Texto simple en negrilla.</b>
(no semántico)
Definición: por defecto el texto se ve en negrilla en los dos casos. El
tag que aporta semántica es <strong>.
Tags Semánticos
== Énfasis ==
<em>Texto objeto de énfasis.</em>
<i>Texto simple en cursiva.</i>
(no semántico)
Definición: por defecto el texto se ve en cursiva en los dos casos.
El tag que aporta semántica es <em>.
Tags Semánticos
== Resaltado ==
<mark>Parte de texto a resaltar</mark>
Definición: por defecto el texto queda con fondo de color amarillo. Su
objetivo es llamar la atención del usuario/buscador.
Tags Semánticos
== Citas ==
<cite>Parte de texto a citar.</cite>
Definición: por defecto el texto se ve en cursiva. El tag define el
título de una “obra”. Ej: un libro, una pintura, una canción, una
película, una serie de Tv, etc.
Tags Semánticos
== Abreviatura ==
<abbr title=”World Wide Web Consortium”>
W3C
</abbr>
Definición: abreviación o acrónimo. Versión corta (representada por
siglas) de algo con más significado.
Formularios HTML
Sistema para capturar datos.
Necesita de lenguajes
adicionales para su
completo funcionamiento.
Funcionamiento de un
Formulario en HTML
Capturar Validar Procesar
Definamos!
Un formulario está compuesto por “3 partes” para su completo
funcionamiento. Éstas son:
Capturar Validar Procesar
HTML Javascript PHP, CGI, etc...
(Cliente) (Cliente) (Servidor)
-TAMBIEN
VALIDAN!-
Tags para formularios
== Contenedor ==
<form action=”script.php” method=”post”>
...
</form>
Definición: tag MUY importante, sin éste el formulario no funciona
(action puede aparecer como action=””, esto significa que los datos
se envian al mismo archivo!).
TODOS los controles de un formulario van anidados dentro.
Tags para formularios
== Contenedor ==
<fieldset>
<legend> Datos personales </legend>
...
</fieldset>
Definición:
<fieldset> : agrupa campos relacionados (dibuja una caja para
agrupar los campos)
<legend> : asigna un "título" a este grupo de campos .
Atributos en <fieldset>: disabled, form, name
https://www.w3schools.com/tags/tag_fieldset.asp
Tags para formularios
== Rótulos ==
<label>Nombre y apellido:</label>
Definición: tag que acompaña a un campo del form (<input>, en el
próximo slide!). El texto se muestra en el browser e indica la
información que es requerida por este campo. Cada <input> deberá
llevar su <label>.
Tags para formularios
== Campos unilínea ==
<input type=”text” name=”usuario”>
<input type=”email” name=”correo”>
<input type=”tel” name=”telefono”>
<input type=”number” name=”cantidad”>
Definición: tag MULTIFUNCIÓN, cambiando el valor de su atributo
type podemos obtener distintos tipos de campos. El atributo name lo
identifica y diferencia de los demás campos, además de servir para
procesar la información del mismo del lado del servidor.
Tags para formularios
== Campos unilínea ==
<input type=”url” name=”sitioWeb”>
<input type=”password” name=”contraseña”>
<input type=”file” name=”tu_foto”>
<input type=”submit” value=”ENVIAR”>
Definición: tag MULTIFUNCIÓN, cambiando el valor de su atributo
type podemos obtener distintos tipos de campos. El atributo name lo
identifica y diferencia de los demás campos además de servir para
procesar la información del mismo del lado del servidor.
Tags para formularios
== Opciones ==
<input type=”radio” name=”estado_civil”>
<input type=”radio” name=”estado_civil”>
<input type=”checkbox” name=”hobbies”>
<input type=”checkbox” name=”hobbies”>
Definición: type=”radio” genera un botón de única opción (no se
pueden elegir más de una), type=”checkbox” genera una casilla de
verificación. Permite elegir varias opciones.
Tags para formularios
== Campo multilínea ==
<textarea name=”mensaje”> </textarea>
Definición: campo para escribir varias líneas de texto. Usado
generalmente para la opción “tu mensaje”, “comentarios”, textos de
posts en foros, en los form, etc..
.
Tags para formularios
== Desplegable ==
<select name=”pais”>
<option value=”Ar”>Argentina</option>
<option value=”Br”>Brasil</option>
<option value=”Co”>Colombia</option>
</select>
Definición: combobox ó dropdown de única selección. Agrupa
muchas opciones en un solo control. Tiene 7 (siete) atributos
posibles (https://www.w3schools.com/tags/tag_select.asp)
Tags para formularios
== Desplegable ==
<select name=”pais”>
<optgroup label=”Sur América”>
<option value=”Ar”>Argentina</option>
<option value=”Br”>Brasil</option>
<option value=”Co”>Colombia</option>
</optgroup>
</select>
Definición: usado para agrupar opciones relacionadas dentro de un
dropdown.
Tags para formularios
== Botones ==
<button type=”submit”>Enviar</button>
<button type=”reset”>Borrar</button>
<button type=”button”>Otra acción</button>
Definición: botones de acción para enviar, borrar o generar otro tipo
de acción, permite anidamiento de otros tags.
Atributo
== required ==
<input type=”email” required>
Definición: hace que un campo sea obligatorio y arroja una alerta si
no se ha ingresado datos en el mismo. Dependiendo del tipo de
campo el alerta puede variar.
Cuando validemos con JS o PHP (del lado Servidor), este atributo no
será necesario.
Atributo
== placeholder ==
<input type=”email” placeholder="user@email.com">
Definición: permite insertar un texto de ayuda para el usuario, que
describe el valor esperado en este campo y lo muestra en el mismo
con una fuente transparente
Practiquemos
Realizar el punto #1 y #2 de la guía de ejercicios.
Más de CSS
Nuevas propiedades y pseudo selectores
Propiedades de CSS
== Redimensión ==
resize: none;
Otros valores:
◎ [both | horizontal | vertical]
Definición: permite definir si queremos redimensionar un elemento.
Su uso más común suele darse para el tag <textarea>.
Pseudo Selectores CSS
== Sintaxis ==
Ejemplo basico
selector:pseudo {
propiedad: valor;
}
Ejemplo concreto
.destacado:hover {
color: red;
}
(Cuando paso el mouse por los elementos con la clase
.destacado, el color cambia a “red”)
Definición: un pseudo selector nos permite controlar eventos
especiales de un elemento. Suelen ser aplicados sobre un selector
existente.
Pseudo selectores CSS
== :hover ==
a { a:hover {
text-decoration: none; text-decoration: underline;
} }
Definición: controla el estado “rollover” de cualquier elemento.
Lo que definamos con este selector, solo será visible al posar el
cursor sobre el elemento.
Pseudo selectores CSS
== :focus ==
input { input:focus {
background-color: #ff0000; background-color: #000000;
} }
Definición: controla el estado de los campos de un formulario cuando
ubicamos el cursor dentro del campo.
Practiquemos
Realizar el punto #3 de la guía de ejercicios.
Gracias!
¿Consultas?
