TECNOLOGÍAS INFORMÁTICAS A
PRIMER CUATRIMESTRE 2024
CRONOGRAMA DE
LA CLASE
REPASO PAUTAS PARCIAL.
REPASO GENERAL ANTES DEL
SEGUNDO PARCIAL.
MODELO DE CAJA
Los elementos de un documento HTML son considerados
como cajas rectangulares invisibles al usuario y en las que
se pueden aplicar ciertas propiedades para ubicar unos
elementos respecto de otros.
margin
(margen exterior)
border (borde)
height (alto)
padding
(margen interior)
width (ancho)
content (elemento)
CSS: PROPIEDAD DISPLAY
Todos los elementos de una página web deben tener
un tipo de representación, que es la forma en la que
se va a comportar. HTML, por defecto, usa los dos
tipos básicos: inline y block.
Con CSS podemos cambiar el comportamiento a otros
valores. Los fundamentales son:
HTML: ETIQUETAS <div> Y <span>
<div> Contenedor genérico en bloque para otros elementos.
<span> Contenedor genérico en línea para otros elementos.
Elemento div 1
Elemento div 2
Elemento div 3
Elemento span 1 Elemento span 2 Elemento span 3
ETIQUETAS HTML SEMÁNTICAS PARA ESTRUCTURA
CSS: UNIDADES ABSOLUTAS
Unidades estáticas o de tamaño fijo.
CSS: UNIDADES RELATIVAS
Unidades que dependen de otros factores.
CSS: UNIDADES RELATIVAS AL VIEWPORT
Porcentaje concreto del tamaño específico
del viewport (ventana gráfica o área visible
en la pantalla de un dispositivo).
CSS: PROPIEDAD position
Modifica la posición en donde aparecen los diferentes
elementos y su contenido.
Coordenadas de posición
CSS: PROPIEDAD position
CSS: FLEXBOX
Flexbox es un sistema de disposición de elementos
flexibles en donde los elementos se adaptan
y colocan automáticamente.
Flexbox es un sistema de elementos flexibles diseñado
para crear estructuras de una sola dimensión.
EJE
PRINCIPAL
(MAIN AXIS)
EJE
CONTENDOR ITEMS SECUNDARIO
(CROSS AXIS)
CSS: PSEUDOCLASES
Las pseudoclases son etiquetas adicionales que
permiten seleccionar elementos HTML en función
de su estado o relación con el usuario.
selector :pseudoclase {
propiedad
: valor
;
propiedad
: valor
;
}
CSS: PSEUDOCLASES
Pseudoclases de interacción
Pseudoclases de estructura
Pseudoclases de ubicación
Pseudoclases de combinación lógica
CSS: PSEUDOCLASES
INTERACCIÓN:
UBICACIÓN:
COMBINACIÓN
LÓGICA:
CSS: PSEUDOCLASES
ESTRUCTURA:
CSS: PSEUDOELEMENTOS
Los pesudoelementos permiten hacer referencia
a determinadas partes de un elemento.
selector ::pseudoelemento {
propiedad
: valor
;
propiedad
: valor
;
}
CSS: PSEUDOELEMENTOS
CSS: CUSTOM PROPERTIES
Las Propiedades personalizadas,también conocidas
como variables, son un mecanismo de CSS que permite dar
un valor personalizado a las propiedades CSS.
Definir una propiedad
personalizada.
Usar una propiedad
personalizada.
Ámbito de una propiedad personalizada.
CSS: FUNCIONES MATEMÁTICAS
HTML: FORMULARIOS
Los formularios web son una forma de
interacción entre un usuario y un sitio o
aplicación web.
HTML: ETIQUETA <form>
Elemento contenedor con un
componente semántico específico
para formularios.
HTML: Etiquetas y atributos a utilizar
HTML: ATRIBUTOS ETIQUETA <input>
HTML: ETIQUETA <input> que
actúa sobre el formulario en general
HTML: ETIQUETA <datalist>
Permite crear una lista con posibles valores
pero a la vez abierta a añadir nuevos valores
por el usuario.
