Scribd
Cargar
104 vistas37 páginas

HTML y CSS

Este documento presenta información sobre etiquetas HTML semánticas como <strong>, <em>, <cite>, <abbr> y <mark>, así como etiquetas para formularios como <input>, <radio>, <checkbox>, <select> y <textarea>. También cubre pseudo selectores CSS como :hover y :focus y propiedades como resize. El objetivo es reforzar el significado del contenido en los sitios web y capturar datos de usuarios a través de formularios.

Cargado por

Johan Marrujo Sucno
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
104 vistas37 páginas

HTML y CSS

Este documento presenta información sobre etiquetas HTML semánticas como <strong>, <em>, <cite>, <abbr> y <mark>, así como etiquetas para formularios como <input>, <radio>, <checkbox>, <select> y <textarea>. También cubre pseudo selectores CSS como :hover y :focus y propiedades como resize. El objetivo es reforzar el significado del contenido en los sitios web y capturar datos de usuarios a través de formularios.

Cargado por

Johan Marrujo Sucno
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 37

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="[email protected]">

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?

También podría gustarte