HTML y CSS

HTML Y CSS
BORDER-BOX: border-box le dice al navegador tomar en cuenta para cualquier valor

que se especifique de borde o de relleno para el ancho o alto de un elemento. Es
decir, si se define un elemento con un ancho de 100 pixeles.
:ROOT: La pseudo-clase :root de CSS selecciona el elemento raíz de un árbol que

representa el documento. En HTML, :root representa el elemento <html> y es idéntico al
selector html, excepto que su especificidad es mayor. Utilizado como variable global.
SECTION: Representa una sección genérica de un documento. Sirve para determinar qué
contenido corresponde a qué parte de un esquema. Piensa en el esquema como en el índice
de contenido de un libro; un tema común y subsecciones relacionadas.
<section>
<h1>Encabezado</h1>
<p>Un montón de contenido impresionante.</p>
</section>
BTN O BUTTON:
Para crear botones Bootstrap 4 propone utilizar la etiqueta "button", "a" o
"input" y define una serie de clases:
btn
btn-primary
btn-secondary
btn-success
btn-info
btn-warning
btn-danger
btn-dark
btn-light
btn-link
Siempre debemos asignar la clase btn y alguna de las otras clases con un
significado propio indicado por su color.
Cada una de estas clases define un estilo particular para un botón y tiene un
significado que nos ayudan a definir en que caso los debemos utilizar:
 btn-primary : Es un botón que se destaca entre un conjunto de

botones.
 btn-secondary : Es un botón no tan importante como btn-primary.
 btn-success : Se utiliza para indicar una acción exitosa (por ejemplo

luego de registrarse a un servicio donde se muestra un botón para ir a
la página principal del sitio)
 btn-info : Es un botón para información.
 btn-warning : Es un botón que nos informa que debemos tener

cuidado con la acción que tiene asociado el botón.
 btn-danger : Indica que la acción que tiene asociado el botón es

peligrosa.
 btn-dark : Muestra un botón oscuro.
 btn-light : Muestra un botón claro.
 btn-link : Convierte al botón como un hipervínculo, haciendo que

disminuya su importancia.
CSS
LISTAS:
Para empezar una etiqueta para cada tipo distinto de lista, por ejemplo, para crear una
lista no ordenada será necesario usar la etiqueta UL (su instrucción de inicio será
). Una vez hemos abierto la lista deberemos insertar, como hemos dicho antes,
cada uno de los elementos de lista. Para ello usaremos una nueva etiqueta (o dos
en algún caso) que dependerá del tipo de lista. En el caso de la lista no ordenada
los elementos se introducen con la etiqueta de una única instrucción LI, por
ejemplo:
<UL>
<LI>Analista de Sistemas
<LI>Webmaster
<LI>Informática Administrativa
<LI>etc.
<UL>
LISTAS ORDENADAS:
Las listas ordenadas nos permiten mostrar un conjunto de elementos o sucesos con un
orden estricto. Por ejemplo, cuando hacemos una descripción con un orden cronológico,
en donde no se puede alterar el orden de la descripción. Para incluir tales elementos,
HTML nos ofrece la etiqueta
LISTAS NO ORDENADAS:
¿Qué es meta charset? Es un set de caracteres que reconoce la Pc de la misma manera que
una calculadora identifica números. Cada uno de los caracteres se representa con un número
conocido como punto de código y esto crea un canal de comunicación para codificar y
decodificar contenido. La computadora almacena los caracteres como uno o más bytes. Un
ejemplo es el conjunto de caracteres ASCII que representa todos los caracteres en inglés y los
caracteres de control especiales con números del 0 al 127. Sin embargo, la mayoría de los
charset solo funcionan para idiomas específicos y reconocen caracteres limitados, lo que
dificulta o imposibilita la codificación. Sin embargo, en la actualidad, Unicode es el conjunto de
caracteres más confiable y universalmente aceptado debido a su facilidad para traducir
códigos y números.Puedes ver el meta charset en el encabezado de tu código html.
Lang El atributo de HTML lang especifica el idioma principal del contenido de un documento;
para establecer el idioma que se quiere usar, se debe agregar el atributo a la etiqueta <html>:
<html Lang=”es”>
CSS
CSS son las siglas de Cascading Style Sheets (en español, hojas de estilo en cascada), y es un
lenguaje que define el estilo de la presentación de páginas de Internet. Se usa comúnmente en
conjunto con HTML, donde la parte de HTML define la estructura de la página, y la parte de
CSS define la presentación de la página, esto es, aspectos como colores, tipos de letra,
márgenes, dimensiones, entre otros.
CSS se utiliza para dar formato a documentos HTML y XML, separando el contenido de la
presentación.
 Atributos: Son las palabras que usaremos para indicar cual estilo queremos
modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font",
si es el fondo, el atributo "background", etc.
 Valores: Son para definir cómo vamos a modificar el atributo, o la propiedad que le
daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo
"font" y el valor "red".
 Selectores: Se usan para definir sobre cuales elementos HTML vamos a aplicar los
estilos, si queremos definir un estilo para toda la página, debemos usar el selector
"body" que se refiere a la etiqueta
del documento HTML.
los mismos están formados por:
 Selector: El selector le dice al navegador web que directiva o directivas de una página tienen
que someterse al estilo.
 Bloque de declaración: El bloque comienza con una llave de apertura ({) y termina con una
llave de cierre (}).
 Declaración: Entre las llaves de apertura y de cierre de la declaración, se añade una o más
declaraciones o instrucciones de formato. Cada declaración tiene dos partes: una propiedad y
un valor, y además acaban en un punto y coma.
 Propiedad: CSS ofrece un amplio rango de opciones de formato, que se llaman propiedades.
Una propiedad es una palabra que indican un cierto estilo de efecto.
 Valor: Finalmente se puede expresar la creatividad asignando un valor a una propiedad CSS.
Las diferentes propiedades CSS requieren tipos específicos de valores: un color, una longitud
(como 16px, o 5em), o una clave especifica (como top, center o bottom).
PROPIEDADES DEL TEXTO:
font-family y se utiliza para indicar el tipo de letra con el que se muestra el texto. Mediante el
nombre genérico de una familia tipográfica: los nombres genéricos no se refieren a ninguna
fuente en concreto, sino que hacen referencia al estilo del tipo de letra. Las familias genéricas
definidas son serif (tipo de letra similar a Times New Roman), sans-serif (tipo Arial), cursive
(tipo Comic Sans), fantasy (tipo Impact) y monospace (tipo Courier New).
font-size. Además de todas las unidades de medida relativa y absoluta y el uso de porcentajes,
CSS permite utilizar una serie de palabras clave para indicar el tamaño de letra del texto:
 tamaño_absoluto: indica el tamaño de letra de forma absoluta mediante alguna de las

siguientes palabras clave: xx-small, x-small, small, medium, large, xlarge, xx-large.
 tamaño_relativo: indica de forma relativa el tamaño de letra del texto mediante dos palabras
clave (larger, smaller) que toman como referencia el tamaño de letra del elemento padre.
CSS recomienda indicar el tamaño del texto en la unidad em o en porcentaje (%). Además, es
habitual indicar el tamaño del texto en puntos (px) cuando el documento está específicamente
diseñado para imprimirlo.
Una vez indicado el tipo y el tamaño de letra, es habitual modificar otras características como
su grosor (texto en negrita) y su estilo (texto en cursiva). La propiedad que controla la anchura
de la letra es font-weight.
La propiedad que define la alineación del texto se denomina text-align. Los valores definidos
por CSS permiten alinear el texto según los valores tradicionales: a la izquierda (left), a la
derecha (right), centrado (center) y justificado (justify).
El interlineado de un texto se controla mediante la propiedad line-height, que permite

controlar la altura ocupada por cada línea de texto.
Text-decoration: El valor underline subraya el texto, por lo que puede confundir a los usuarios
haciéndoles creer que se trata de un enlace. El valor overline añade una línea en la parte
superior del texto, un aspecto que raramente es deseable. El valor line-through muestra el
texto tachado con una línea continua, por lo que su uso tampoco es muy habitual. Por último,
el valor blink muestra el texto parpadeante y se recomienda evitar su uso por las molestias que
genera a la mayoría de usuarios.
La propiedad text-transform permite mostrar el texto original transformado en un texto

completamente en mayúsculas (uppercase), en minúsculas (lowercase) o con la primera letra
de cada palabra en mayúscula (capitalize).
CSS también permite controlar la separación entre las letras que forman las palabras y la
separación entre las palabras que forman los textos. La propiedad que controla la separación
entre letras se llama letter-spacing
Por último, CSS define unos elementos especiales llamados "pseudo-elementos" que permiten
aplicar estilos a ciertas partes de un texto. En concreto, CSS permite definir estilos especiales a
la primera frase de un texto y a la primera letra de un texto.
Propiedades para los hipervínculos
Es posible utilizar propiedades para definir distintos formatos para un hipervínculo

dependiendo del estado en que se encuentre. Un hipervínculo se puede clasificar en cuatro
estados:
 Visitado (visited): El usuario ya visitó el enlace
 Flotante (hover): El usuario ha situado el curso sobre el enlace, pero no lo ha visitado
 Activo (active): El usuario pincha en el hipervínculo
 Normal (link): El usuario no interacciona de ninguna de las anteriores maneras con el

hipervínculo.
Estilo definido para toda una página: Podemos definir, en la cabecera del documento, estilos
para que sean aplicados a toda la página. Es una manera muy cómoda de darle forma al
documento y muy potente, ya que estos estilos serán seguidos en toda la página y nos
ahorraremos así muchas etiquetas HTML que apliquen forma al documento. Además, si
deseamos cambiar los estilos de la página lo haremos de una sola vez. Este ejemplo es más
complicado, puesto que se utiliza la sintaxis CSS de manera más avanzada.
Unidades Relativas Adoptan el valor relativo al tamaño del documento, del monitor,
impresora, etc, según el caso y son las siguientes:
 px: la más utilizada es el Pixel.
 ex: se refiere a la altura de la "x”
 em: también llamada "cuadratín" es relativa al tamaño de letra definido por fontsize.
Selectores de Clases: También podemos usar el “.” para definir un estilo y que éste aplique a
todas las etiquetas HTML que tengan la propiedad ‘class=”nombreClase”’. Este tipo de estilo se
utiliza de manera tal que el programador pueda crear su propio estilo y aplicarlo cuantas veces
quiera.
Selectores ID: En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página.
Aunque puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe
otro selector más eficiente en este caso. El selector de ID permite seleccionar un elemento de
la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un
elemento de la página porque el valor del atributo id no se puede repetir en dos elementos
diferentes de una misma página. La sintaxis de los selectores de ID es muy parecida a la de los
selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.).
Selector descendiente El selector descendiente se utiliza para encontrar objetos dentro de

otros objetos. Por ejemplo, si quisiéramos darle un estilo a cualquier link dentro de algún
párrafo, usaríamos lo siguiente:
TABLAS:
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar
distintos contenidos.
Pueden ser utilizadas principalmente para listar datos como agendas, resultados y
otros datos de una forma organizada. Nada más lejos de la realidad. Una tabla nos
permite organizar y distribuir los espacios de la manera más óptima. Nos puede ayudar
a generar texto en columnas como los periódicos, prefijar los tamaños ocupados por
distintas secciones de la página o poner de una manera sencilla un pie de foto a una
imagen.
Bordes y colores
Para mejorar el aspecto de nuestras tablas, lo primero que querremos hacer es jugar con la
anchura del borde. Para ello se ha definido el parámetro border de la etiqueta <table>, que
define la anchura de todos los bordes de la tabla en pixels. Si se especifica con valor 0, el borde
no se visualiza. El color del borde lo controla el parámetro bordercolor, que se aplica al tag
<td>. Este parámetro toma valores hexadecimales o nombres de colores predefinidos, según el
alfabeto inglés.
DIVS:
Podemos insertar una capa a través de las etiquetas <div> y </div>,

que como ya vimos, sirven para agrupar bloques de texto. A tener en cuenta para el uso de los
Divs.
Las capas (div) no son más que unos recuadros, que pueden situarse en cualquier parte de
la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y
solaparse entre sí, lo que proporciona grandes posibilidades de diseño.
Las partes que componen cada caja y su orden de visualización desde el punto de vista del
usuario son las siguientes:
.
Contenido (content): se trata del contenido HTML del elemento (las palabras de un
párrafo, una imagen, el texto de una lista de elementos, etc.)
.
Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
.
Borde (border): línea que encierra completamente el contenido y su relleno.
.
Imagen de fondo (background image): imagen que se muestra por detrás del contenido
y el espacio de relleno.
.
Color de fondo (background color): color que se muestra por detrás del contenido y el
espacio de relleno.
Padding
Con padding establecemos la distancia de “relleno” entre el límite interior de la caja y el
exterior (borde). Si queremos poner un padding de 20 píxeles para toda la caja, lo haríamos
así:
Podemos establecer un padding distinto para cada lado, usando los sufijos -top (superior), -
bottom (inferior), left (izquierda) y right (derecha):
padding-top: 10px;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 20px;
Márgenes
Los márgenes se controlan con la propiedad margin, y es la distancia entre el borde de la
caja y los elementos que la rodean. En cuanto a la forma de usarla, es igual que con la
propiedad padding, así que la forma de escribir y los atajos es exactamente la misma. Por
ejemplo, si queremos márgenes superior e inferior de 20 píxeles, y laterales de 5 píxeles:
La propiedad border-radius nos permite crear esquinas redondeadas sin la necesidad de

imágenes o marcas adicionales como lo hacíamos anteriormente que teníamos que cortar los
bordes redondeados en photoshop y crear una cantidad de div para dar un aspecto agradable
a un bloque o div.
Posicionamiento
Los navegadores crean y posicionan de forma automática todas las cajas o divs que forman
cada página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se
muestran. Podemos encontrar las siguientes posiciones o situaciones:
Posicionamiento normal o estático (STATIC): se trata del posicionamiento que utilizan los
navegadores si no se indica lo contrario.
Posicionamiento relativo (RELATIVE):
variante del posicionamiento normal que consiste en
posicionar una caja según el posicionamiento normal y después desplazarla respecto de
su posición original.
Posicionamiento absoluto (ABSOLUTE): la posición de una caja se establece de forma absoluta
respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva
posición del elemento.
Posicionamiento fijo (FIXED): variante del posicionamiento absoluto que convierte una caja en
un elemento inamovible, de forma que su posición en la pantalla siempre es la misma
independientemente del resto de elementos e independientemente de si el usuario sube o
baja la página en la ventana del navegador.
Posicionamiento flotante: se trata del modelo más especial de posicionamiento, ya que
desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la
que se encuentran.
El posicionamiento de una caja se establece mediante la propiedad position. El significado
de cada uno de los posibles valores de la propiedad position es el siguiente:
static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se
ignoran los valores de las propiedades
top, right, bottom y left.
relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se
controla con las propiedades
top, right, bottom y left.
absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja también
se controla con las propiedades top, right, bottom y left,
pero su interpretación es mucho más compleja, ya que el origen de coordenadas del

desplazamiento depende del posicionamiento de su elemento contenedor.
fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma
forma que, en el posicionamiento absoluto, pero en este caso el elemento permanece
inamovible en la pantalla.
La propiedad position no permite controlar el posicionamiento flotante, que se establece
con otra propiedad llamada float .
CSS define cuatro propiedades llamadas top, right, bottom y left para controlar el
desplazamiento de las cajas posicionadas.
Posicionamiento normal o estático:
El posicionamiento normal o estático es el modelo que utilizan por defecto los navegadores
para mostrar los elementos de las páginas. En este modelo, sólo se tiene en cuenta si el
elemento es de bloque o en línea, sus propiedades width y height y su contenido.
Posicionamiento flotante
Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente
se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la
izquierda o más a la derecha de la posición en la que originalmente se encontraba.
Cuando se posiciona una caja de forma flotante: La caja deja de pertenecer al flujo normal
de la página, lo que significa que el resto de cajas ocupan el lugar dejado por la caja flotante.
La caja flotante se posiciona lo más a la izquierda o lo más a la derecha posible de la posición
en la que se encontraba originalmente.
Posicionamiento relativo
El posicionamiento relativo desplaza una caja respecto de su posición original establecida
mediante el posicionamiento normal. El desplazamiento de la caja se controla con las

propiedades top, right, bottom y left.
El valor de la propiedad top se interpreta como el desplazamiento entre el borde superior
de la caja en su posición final y el borde superior de la misma caja en su posición original.
De la misma forma, el valor de las propiedades left, right y bottom indica respectivamente el
desplazamiento entre el borde izquierdo/derecho/inferior de la caja en su posición final y el
borde izquierdo/derecho/inferior de la caja original.
Uno de los principales motivos para la creación del posicionamiento float fue precisamente
la posibilidad de colocar imágenes alrededor de las cuales fluye el texto.
La propiedad clear permite modificar el comportamiento por defecto del posicionamiento
flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante.
<p style="clear: left;">...</p>
La propiedad clear indica el lado del elemento HTML que
no debe ser adyacente a ninguna caja posicionada de forma
flotante. Si se indica el valor left, el elemento se desplaza de
forma descendente hasta que pueda colocarse en una línea en la
que no haya ninguna caja flotante en el lado izquierdo.

Visualización
Las propiedades display y visibility controlan la visualización de los elementos. Las dos
propiedades permiten ocultar cualquier elemento de la página.
La diferencia entre ambas propiedades es que, mientras display oculta por completo un
elemento haciendo que los demás elementos ocupen su lugar, la propiedad visibility hace que
los otros elementos que componen la página respeten la posición de éste y reserven su
espacio.
La propiedad "display"
En realidad, la propiedad display modifica la forma en la que se
visualiza un elemento. Los valores más utilizados son inline, block y none.
block: Muestra un elemento como si fuera un
elemento de bloque, independientemente del tipo de
elemento que se trate.
inline: Visualiza un elemento en forma de elemento
en línea, independientemente del tipo de elemento
que se trate.
none: Oculta un elemento y hace que desaparezca
de la página.
La propiedad display: inline se puede utilizar en las listas (<ul>, <ol>) que se quieren mostrar
horizontalmente
.
display: block se emplea frecuentemente para los enlaces que forman el menú de
navegación.
La propiedad "visibility"
Visibility es una propiedad mucho más sencilla que display, pues sus posibilidades son
mucho más limitadas y únicamente permite hacer visibles o invisibles los elementos de una
página. Los valores posibles para visibility son:
Visibility: normal: Es el valor por defecto.
Visibility hidden: convierte una caja en invisible para que no muestre sus contenidos. El
resto de elementos de la página se muestran como si la caja todavía fuera visible, por lo
que en el lugar donde originalmente se mostraba la caja invisible, ahora se muestra un
hueco vacío
Visibility: collapse: sólo se puede utilizar en las filas, grupos de filas, columnas y grupos
de columnas de una tabla. Su efecto es similar al de la propiedad display, ya que oculta
completamente la fila y/o columna y se pueden mostrar otros contenidos en ese lugar. Si
se utiliza el valor collapse sobre cualquier otro tipo de elemento, su efecto es idéntico al
valor hidden.
La propiedad overflow (contenido sobrante)
Normalmente, los contenidos de un elemento se pueden mostrar

en el espacio reservado para ese elemento. Sin embargo, en algunas
ocasiones el contenido de un elemento no cabe en el espacio reservado
para ese elemento y se desborda.
La situación más habitual en la que el contenido sobresale de su
espacio reservado es cuando se establece la anchura y/o altura de un
elemento mediante la propiedad width y/o height.
CSS define la propiedad overflow para controlar la forma en la
que se visualizan los contenidos que sobresalen (sobrantes) de un elemento.
overflow: visible: Es el valor por defecto.
overflow: hidden: el contenido sobrante se oculta y únicamente se visualizará la parte
del contenido que cabe dentro de la zona reservada para el elemento.
overflow: scroll: solamente se visualiza el contenido que cabe dentro de la zona reservada
para el elemento, pero se muestran barras de scroll que permiten visualizar el resto
del contenido.
overflow: auto: el comportamiento depende del navegador, aunque normalmente es
el mismo que la propiedad scroll. Obviamente, es un comportamiento totalmente
desaconsejado.
PROPIEDAD Z-INDEX:
El valor más común de la propiedad z-index es un número entero. Aunque la
especificación oficial permite los números negativos, en general se considera
el número 0 como el nivel más bajo. Por lo tanto, cuanto más alto sea el valor más
"cerca" del usuario se mostrará la capa (una caja con valor z-index:10 se mostrará por
encima que otra con valor z-index:9).
La propiedad z-index sólo tiene efecto en los elementos posicionados, por lo
que es obligatorio que la propiedad z-index vaya acompañada de la propiedad position.
Si debes posicionar un elemento, pero no quieres moverlo de su posición original ni afectar al

resto de elementos de la página, puedes utilizar el posicionamiento relativo (position: relative).
Background y sus propiedades

Css3 nos trae nuevas formas de controlar las imágenes de fondo de cajas, div o de sitios
webs completos, se trata de multiple background images. Que nos va a permitir colocar varias
imágenes de fondo, background-size que nos va a permitir personalizar por medio de css el
tamaño de la imagen y adaptarla a su contenedor y background-origin que nos va a permitir
especificar el posicionamiento de una imagen de acuerdo a su área, por ejemplo. A
continuación, veremos cómo se trabaja con ellos.
Ubicación de la imagen de fondo [background-position]

Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la
pantalla. La propiedad background-position te permitirá cambiar este valor por defecto y
posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.
Hay muchas formas diferentes de establecer los valores de la propiedad background
position.
Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo,
el valor '100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200
píxeles del margen superior de la ventana del navegador.
Propiedades [background-size]
Esta propiedad nos permite escalar una imagen dispuesta en el fondo. Estas longitudes se
las puede especificar en píxeles, porcentajes etc. Por ejemplo, si queremos mostrar tres
imágenes dentro de un div con distintos tamaños:
.
Cover: Escala la imagen para el tamaño más pequeño de tal manera que su anchura y su
altura puede caber dentro del área de contenido.
.
Contain: Escala la imagen al tamaño más grande de tal manera que su anchura y su altura
puede caber dentro del área de contenido.
}
Alturas/anchuras máximas y mínimas
CSS define cuatro propiedades que permiten limitar la anchura y altura mínima y máxima
de cualquier elemento de la página. Las propiedades son max-width, min-width, max-height y
min-height. De esta forma, para conseguir un diseño de anchura variable pero controlada, se
podrían utilizar reglas CSS como la siguiente:
#contenedor { min-width: 500px; max-width: 900px;}
CLASE 10
FORMULARIOS:
.
Los formularios nos van a permitir, desde dentro de una presentación web, solicitar
información al visitante. Estarán compuestos por tantos campos como informaciones
queramos obtener. Una vez introducidos los valores en estos campos serán enviados a
una URL donde se procesará toda esta información.
.
Los formularios permiten obtener información de un cliente que visita una Web.
Utilizando esta herramienta un usuario puede enviar datos para que luego sean procesados
en el servidor.
.
Un formulario contiene dos tipos de elementos: campos de datos y control. Los primeros
permiten al usuario introducir información, y los segundos indicar qué debe hacerse con
esos datos. Los datos son ingresados por el usuario, y el control son procesos que en cierta
ocasión se realizan para permitir procesar dicha información.
.
El formulario no es más que una página escrita en HTML como cualquier otra. Lo que
la hace diferente es que permite capturar datos de varias maneras: directamente desde el
teclado, escogiendo un valor de una lista desplegable o seleccionando una opción desde
botones.
Formulario Básico
Todo formulario debe estar encerrado entre el par de etiquetas <FORM> y </FORM>, y
debe ser ubicado en el cuerpo de cualquier documento HTML, es decir, entre el par de
etiquetas
<BODY> y </BODY>. Esta etiqueta <FORM> presenta tres atributos posibles:
Los dos primeros atributos de la tabla son de uso obligatorio para cualquier formulario que
generemos, ya que establecen dónde enviar la información y cómo enviarla. Cuando definimos
un formulario lo hacemos de la siguiente manera:
<form> controles del formulario… </form>.
Destino de la información
El formulario comienza con esta línea:
<FORM ACTION="mailto:alumno@issd.edu.ar" METHOD=POST>
Como dijimos anteriormente todo formulario debe comenzar con la etiqueta <FORM> y
finalizar con </FORM>. El parámetro ACTION define qué es lo que debemos hacer con la
información obtenida, en este caso le indicamos al navegador que nos envié los datos a
nuestra dirección de correo electrónico (en el ejemplo la mandan a issd).
Para empezar, vamos a ver una serie de controles todos los cuales se crean con la etiqueta
INPUT. Para diferenciar entre unos controles y otros se hará uso del atributo TYPE que puede
tomar los siguientes valores: text, password, radio, checkbox, submit, image, reset, file y
hidden.
Cuadro de texto
Esta misma etiqueta será la utilizada para insertar la mayoría de controles acompañada de
TYPE por ejemplo:
<INPUT TYPE="text" SIZE=15 MAXLENGTH=15 NAME="Nombre">
.
Size: Determina la anchura de la caja de texto. El valor por defecto de este atributo es 20
caracteres. En ocasiones convendrá decrementar o incrementar este valor por defecto,
pero en todo caso siempre será conveniente mantener un valor menor de 50 caracteres de
manera que la caja de texto quepa en la mayoría de pantallas
.
Maxlength: Con este atributo limitamos el número máximo de caracteres que pueden ser
escritos en una caja de texto. El valor de este atributo puede ser mayor o menor que el
especificado en SIZE, y que es totalmente independiente.
Value: Sirve para especificar un texto que debe aparecer por defecto en la caja de texto,
antes de que el usuario escriba nada. Este texto suele ser, en general, o bien instrucciones
o bien la respuesta más probable. Veamos un ejemplo que ilustra estos dos casos:
<INPUT TYPE="text" VALUE="Introduzca aquí su nombre">
.
Name: define el nombre que se le da al control, esto puede servir para que el lenguaje
dinámico lo tome como lectura y lo pueda manipular como propio.
.
Placeholder: Por ejemplo, para dar más información sobre el tipo esperado de
información que queremos que el usuario introduzca, que desaparece cuando el control
de formulario adquiere el foco.
En el caso de querer incluir una etiqueta a un elemento utilizamos la etiqueta <LABEL>...

</LABEL>, esta etiqueta no sólo permite darle un texto a un elemento de un formulario, sino
que comparte el control del mismo. Esto quiere decir que podemos seleccionar no sólo al
elemento, sino que también a su rótulo.
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="fnombre" />
<INPUT TYPE="button" VALUE="Cerrar ventana"

onClick="window.close();">
<INPUT TYPE="button" VALUE="Cargar otra ventana"
onClick="window.location.replace ('button2.html');">
Botones de elección
Estos controles reciben también el nombre de botones de radio,
como traducción directa de su denominación inglesa radio buttons y porque en general los
navegadores suelen darles una forma circular. Para insertar un botón de elección usaremos de
nuevo la etiqueta INPUT, pero esta vez el valor del atributo TYPE será radio:
<INPUT TYPE="radio">
Cuadro de selección
Las cajas de selección guardan ciertos parecidos con los botones de radio, pero además
permitirán seleccionar varias opciones en una lista. Al igual que dichos botones tienen dos
posiciones, seleccionados o no seleccionados, estando en esta última posición inicialmente, a
no ser que hayamos usado el atributo CHECKED. Cada caja de selección es independiente del
resto, y por tanto el valor del atributo NAME debe ser diferente en cada una.
Para insertar una caja de selección debemos usar de nuevo la etiqueta INPUT, pero esta
vez con TYPE="checkbox". Veamos un ejemplo de uso de este tipo de controles:
<FORM>
<P><INPUT TYPE="checkbox" NAME="medico">Médico
<P><INPUT TYPE="checkbox" NAME="programador" CHECKED>Programador
<P><INPUT TYPE="checkbox" NAME="abogado">Abogado
<P><INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero
<CENTER><INPUT TYPE="submit" VALUE="Enviar"></CENTER>
</FORM>
Datos numéricos
<input type="number" … >
Esto crea un tipo especial de campo de entrada para la entrada de números. En la mayoría
de navegadores que lo soportan se presenta como un campo de entrada de texto con un
control que permite incrementar y disminuir su valor.
.
min y max: Como su propio nombre indica, este par de atributos permiten establecer un
límite inferior y superior para los valores que se pueden introducir en un campo de
formulario numérico, como los tipos de entrada numéricos, de rango, fecha y hora (sí,
hasta se pueden utilizar para establecer los límites superior e inferior para las fechas: por
ejemplo, en un formulario de reserva de viajes podrías limitar el selector de fechas para
que sólo permita al usuario seleccionar fechas futuras).
<input type="number" … min="1" max="10">

Sliders
<input type="range">
Crear un control deslizante que permita elegir entre una gama de valores.
Ten en cuenta que, por defecto, esta entrada no suele mostrar el valor
seleccionado, ni siquiera el rango de valores que cubre. A continuación, vemos
otro ejemplo:
<input type="range" name="edad" min="18" max="99" step="1" value="30">
Fecha y Hora
HTML5 tiene diferentes tipos de entrada para la creación de selectores complejos de fecha
y hora, por ejemplo, como los selectores de fecha que se ven en casi todos los sitios de
reservas de vuelos o trenes. Veremos los sientes tags:
datetime: permite elegir una fecha y una hora
month: permite elegir un mes, almacenado internamente como un número entre 1 y 12,
aunque los diferentes navegadores pueden dar mecanismos más elaborados de selección,
como listas de desplazamiento con los nombres de los meses
week: permite elegir semana, almacenada internamente con el formato 2010-W37
(semana 37 del año 2010), mediante un selector de fechas.
Fecha y hora actual: <input type="datetime" name="fechahora" step="1" min="2014-01-

01T00>
Los valores usados en este ejemplo son:

.
min: He puesto que la fecha mínima sea el 1 de enero 2021 a las 00:00.
.
max: He puesto que la fecha máxima sea el 31 de diciembre 2021 a las 12 am.
.
value: Fecha por defecto el 1 de enero 2021 a las 12.
.
step: Que avance en intervalos de 1 en 1
Color
Este tipo de entrada muestra un selector de color. La implementación
de Opera permite al usuario elegir entre una variedad de colores, introducir
valores hexadecimales directamente en un campo de texto o invocar el selector
de color nativo del sistema operativo.
<input type="color">
Búsqueda
<input type="search">
Podría discutirse que el tipo de entrada de búsqueda no es más que una entrada con un estilo
diferente. Por ejemplo, un navegador podría ofrecer al usuario una opción para crear
automáticamente una búsqueda personalizada para un sitio específico.
Teléfono
A la hora de completar un input de tipo tel, un smartphone como el iPhone convierte su
teclado a números de teléfono.
<input type=“tel” name=“telefono”>
Mail
El nuevo tipo <input type="email"> indica al navegador que no debe permitir que se envíe
el formulario si el usuario no ha introducido una dirección de
email válida, pero no comprueba si la dirección existe o no, sólo
si el formato es válido.
Url
<input type="url"> indica al navegador que no debe permitir que se envíe el formulario si
el usuario no ha introducido una URL correcta.
Texto multilínea
si deseamos que el usuario pueda escribir el texto de un mail, o escribir una serie de
comentarios largos, las áreas de texto serán tremendamente útiles. La etiqueta usada para
insertar
este nuevo control es TEXTAREA, que consta de cuatro atributos:
.
NAME: El nombre que queremos asignarle al control. Como siempre, este nombre será
enviado junto con los datos del área de texto al mandar el formulario.
.
ROWS: El número de líneas de la caja de texto.
.
COLS: El número de caracteres visibles de cada línea. Este atributo es similar al atributo
SIZE que vimos en las cajas de texto convencionales.
La etiqueta TEXTAREA está compuesta por una instrucción de

inicio y una instrucción de fin, siendo obligatorio el uso de ambas. Entre
ellas únicamente podrá insertarse texto llano (sin ninguna etiqueta HTML)
y éste será mostrado como contenido inicial del área de texto. Veamos un
ejemplo:
<TEXTAREA NAME="texto" ROWS="10" COLS="50">
Es la mejor que he visto nunca.</TEXTAREA>
Cuadros de selección
Su función será dar a elegir entre una serie de opciones de manera que el usuario pueda
elegir una o varias de ellas. Existen dos formas de mostrar estas opciones, como una lista con
desplazamiento, o mediante una Lista desplegable.
<FORM METHOD="POST" ACTION=" mailto:alumno@issd.edu.ar">
<INPUT TYPE="SUBMIT" VALUE="Enviar">
<INPUT TYPE="RESET" VALUE="Borrar">
<SELECT NAME="lista" MULTIPLE SIZE=3>
<OPTION>Valor 1
<OPTION SELECTED>Valor 2
<OPTION>Valor 3
<OPTION value="Valor 4">Valor 4 especial
Datalist
La nueva etiqueta <datalist> permite automatizar el ingreso de datos.
Genera una lista desplegable de opciones para que el usuario realice su
selección. La ventaja de este control es que reconoce los primeros caracteres
ingresados por el usuario, para “autocompletar” la información.
<label>Selecciona tu país:</label>
<input type="text" name="pais" id="pais" list="paises"/>
<datalist id="paises">
<option value="España" />
<option value="México" />
<option value="Argentina" />
<option value="Perú" />
<option value="Colombia" />
<option value="Otro país" />
</datalist>
Validación de Formularios
Atributo required
El atributo required controla que el campo de entrada tenga contenido. Si no es así, emite
un mensaje o señal de error e impide enviar el formulario. Al incluir el
atributo required dentro de un elemento <input>, automáticamente se hace
obligatorio su llenado y al ser un atributo tipo booleano, solo se requiere su
presencia nada más.
<input type="text" name="nombre" required/>
El atributo pattern
Pattern busca un patrón/expresión regular dentro de un campo de texto y determina si este
lo cumple o no. Por tanto, su función es validar la información introducida por los usuarios.
Utilizando el atributo pattern, conjuntamente con required se logra que se verifique no
solo la presencia de un valor, sino que este valor debe contener un formato, una longitud o un
tipo de dato especifico. Esto último se logra definiendo un patrón con expresiones regulares.
<input type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+>
CLASE 11:
Selectores para
Formularios:
:valid e :invalid
Básicamente la pseudo clase: invalid representa cualquier campo invalido que sea
resultado de una validación (valga la redundancia), lo opuesto ocurre con su
contraparte: valid.
Esto facilita que si un campo contiene un valor inválido pueda adoptar una apariencia
acorde, de esta forma ayudando al usuario a identificar los campos que necesitan ser
verificados.
Estos selectores funcionan a través del atributo HTML required.
Esto es una forma de aplicarle reglas a determinados estados de los campos de
formularios. Su contraparte :valid funciona cuando no se encuentra definido el
atributo required en el elemento HTML y por consecuencia el campo será siempre
valido.
HTML
<form>
< label for=”nombre”>Nombre</label>
< input type=”text” id=”nombre” required/>
< label for=”apellido”>Apellido</label>
< input type=”text” id=”apellido” required/><br/>
< label for=”email”>E-mail</label>
< input type=”email” id=”email” required/><br/>
< label for=”direccion”>Dirección</label>
< input type=”text” id=”direccion”/><br/>
< label for=”nacionalidad”>Teléfono</label>
< input type=”text” id=”telefono”/><br/>
< /form>
read-only, :enabled y :disabled

Este concepto de desactivado significa que el usuario no podrá escribir en el campo si
disabled. El atributo readonly desactiva automáticamente la posibilidad del que
usuario cambie el texto del campo. Puede ser útil cuando una vez enviado el
formulario los campos queden completados pero estáticos sin poder ser modificados.
Formulario de acceso
<div class="container">
<div class="login">
<h1>Iniciar Sección</h1>
<form method="post" action="">
<p><input type="text" name="login" value="" placeholder="Usuario o Email"></p>
<p><input type="password" name="password" value="" placeholder="Clave"></p>
<p class="remember_me">
<label>
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Recordarme en este equipo
</label>
</label>
</p>
<p class="submit">
<input type="submit" name="commit" value="Entrar"></p>
<div class="login-help">
<p>¿Olvidó su contraseña? <a href="#">Haga clic aquí para restablecerla</a>.</p>
</div>
</div>
</form>
</div>
ETIQUETA HR:
Definición. El elemento HTML <hr> representa un cambio de tema entre párrafos (por
ejemplo, un cambio de escena en una historia, un cambio de tema en una sección).
QUE ES UN SELECTOR EN CSS:

Es un patrón de elementos y otros términos que indican al navegador qué elementos
HTML se seleccionan para aplicarles una regla que incluye los valores de las
propiedades CSS.

HTML y CSS

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

HTML y CSS

Cargado por

Copyright:

Formatos disponibles

HTML Y CSS

BORDER-BOX: border-box le dice al navegador tomar en cuenta para cualquier valor

:ROOT: La pseudo-clase :root de CSS selecciona el elemento raíz de un árbol que

 btn-primary : Es un botón que se destaca entre un conjunto de

 btn-secondary : Es un botón no tan importante como btn-primary.

 btn-success : Se utiliza para indicar una acción exitosa (por ejemplo

 btn-info : Es un botón para información.

 btn-warning : Es un botón que nos informa que debemos tener

 btn-danger : Indica que la acción que tiene asociado el botón es

 btn-dark : Muestra un botón oscuro.

 btn-light : Muestra un botón claro.

 btn-link : Convierte al botón como un hipervínculo, haciendo que

los mismos están formados por:

PROPIEDADES DEL TEXTO:

 tamaño_absoluto: indica el tamaño de letra de forma absoluta mediante alguna de las

El interlineado de un texto se controla mediante la propiedad line-height, que permite

La propiedad text-transform permite mostrar el texto original transformado en un texto

Es posible utilizar propiedades para definir distintos formatos para un hipervínculo

 Visitado (visited): El usuario ya visitó el enlace

 Flotante (hover): El usuario ha situado el curso sobre el enlace, pero no lo ha visitado

 Activo (active): El usuario pincha en el hipervínculo

 Normal (link): El usuario no interacciona de ninguna de las anteriores maneras con el

Selector descendiente El selector descendiente se utiliza para encontrar objetos dentro de

Podemos insertar una capa a través de las etiquetas <div> y </div>,

La propiedad border-radius nos permite crear esquinas redondeadas sin la necesidad de

muestran. Podemos encontrar las siguientes posiciones o situaciones:

navegadores si no se indica lo contrario.

Posicionamiento relativo (RELATIVE):

variante del posicionamiento normal que consiste en

posicionar una caja según el posicionamiento normal y después desplazarla respecto de

Posicionamiento absoluto (ABSOLUTE): la posición de una caja se establece de forma absoluta

respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva

posición del elemento.

un elemento inamovible, de forma que su posición en la pantalla siempre es la misma

independientemente del resto de elementos e independientemente de si el usuario sube o

baja la página en la ventana del navegador.

Posicionamiento flotante: se trata del modelo más especial de posicionamiento, ya que

de cada uno de los posibles valores de la propiedad position es el siguiente:

static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se

ignoran los valores de las propiedades

top, right, bottom y left.

relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se

controla con las propiedades

top, right, bottom y left.

absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja también

se controla con las propiedades top, right, bottom y left,

pero su interpretación es mucho más compleja, ya que el origen de coordenadas del

fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma

forma que, en el posicionamiento absoluto, pero en este caso el elemento permanece

La propiedad position no permite controlar el posicionamiento flotante, que se establece

con otra propiedad llamada float .

Posicionamiento normal o estático:

Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente

El posicionamiento relativo desplaza una caja respecto de su posición original establecida

mediante el posicionamiento normal. El desplazamiento de la caja se controla con las

El valor de la propiedad top se interpreta como el desplazamiento entre el borde superior

de la caja en su posición final y el borde superior de la misma caja en su posición original.

la posibilidad de colocar imágenes alrededor de las cuales fluye el texto.

La propiedad clear permite modificar el comportamiento por defecto del posicionamiento

flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante.

<p style="clear: left;">...</p>

La propiedad clear indica el lado del elemento HTML que

no debe ser adyacente a ninguna caja posicionada de forma