Que es un HTML?
Es un ARBOL de etiquetas (tags),
Es un Lenguaje , PERO NO DE PROGRAMACION , es de Estructura.
Pertenece al Paradigma DECLARATIVO(no nos importa el como , sino el que ,
por eso es declarativo)
Etiquetas de estructura
<aside> : contenido relacionado al principal
<nav> : navegación
<header> Encabezado del sitio o elemento
<main> contenido principal
<section> y <article> contenido secundario
<footer> pie de pagina
<div> contenedor genérico
Las etiquetas contienen atributos
Que tenemos en el < HEAD >?
Tenemos Metadatos, (Codificacion : UTF-8, que sea responsive :viewport,
width-device…. ,el SEO : posicionamiento de la web , description ,autor,
keywords)
Enlaces a recursos externos (como por ejemplo fonts el favicon),
Scripts que son necesarios para el funcionamiento y la presentación del
documento HTML
Aquí también va el <title> y los estilos a través de un <link
rel=”stylesheet” href=” [Link]”>, y los archivos js (aunque si no
usamos librerías externas , generalmente va en el body)
EJEMPLO DE ESTRUCTURA
Que hay en el <body>?
Contenido visible de la pagina web : texto, imágenes, videos, enlaces ,
formularios y otros elementos interactivos.
Etiquetas de contenido :
<p> párrafo
<h1> <h2> <h3> … heading MAYOR NUMERO , MENOR IMPORTANCIA
Etiquetas de contenido HTML
H1 : Solo UNO por pagina
Etiquetas multimedia
<img> la mas comun
<figure> se usa para encadenar una imagen con si descripción<figcaption>
EJEMPLO DE BODY
IMPORTANTE en el input incluir un label y el placeholder( en el label en el
for que coincida con el input)
Etiquetas de Estructura
<ul> lista desordenada
<li> lista
EJEMPLO DE UN NAVBAR
EJEMPLO DE UN MAIN
CLASE 2
Que es CSS?
Es un lenguaje de hojas de estilo, utilizado para CONTROLAR la presentación
y el diseño visual de documentos HTML y XML en una pagina web.
Colores , fuentes ,márgenes, espaciado , diseñado de columnas , tamaños
de texto , efectos visuales , etc.. .
EJEMPLO DE SINTAXIS
UNIDADES CSS
Algunas propiedades aceptan unidades : padding, margin , width , heigth
Absolutas: Tamaño FIJO , px ,cm ,mm , s.
Relativas: Toman su valor dependiendo de la referencia a una valor de otra
propiedad % , rem, em, vh,vw.
COLORES CSS
.Hexadecimal, RGB, HSL. Nombres en ingles .
CENTRAR EN CSS
Margin :0 auto;
Que hace el margin : 0 auto?
Centra elementos , Asignamos :0 al margen superior e inferior y un valor
auto para los márgenes izquierdo y derecho.
El valor auto: permite al navegador calcular automáticamente el tamaño
del margen.
Como funciona margin: 0 auto?
El elemento que quiero centrar debe ser un elemento de nivel de bloque o
un elemento con display : block; .
El elemento debe tener un ancho explicito especificado ( como width : 60%)
Text-aling: center, centra el texto
Que es el span?
Permite modificar mi estilo html , personalizarlo
Selectores:
PseudoSelectores:
CSS-Especificidad
Que valores serán tomados en cuenta por navegar de acuerdo a que tan
especifico es su selector.
ID Y Clases
- Un ID es único en toda la pagina HTML ( especificidad alta)
- Se utiliza el # para designar un ID
Clases
- Una clase se puede aplicar a múltiples elementos HTML
- Se utiliza el . para designar una class
- Un elemento puede tener múltiples clases
- Son menos especificas que los IDs
- Son muy útiles para aplicar estilos comunes a múltiples elementos
LA REGLA
CLASE 3 Position
Que es position?
Es un atributo CSS de todos los elementos HTML, que indica como se
posicionara esa etiqueta.
Que nos permite position ?
Controlar como se va a posicionar una etiqueta en la pagina web en relación
con sus elementos secundarios y con el flujo normal del documento.
CUANDO USAMOS POSITION PODEMOS AFECTAR 4 PROPIEDADES:
-top
-bottom
-left
-rigth
Position puede tomar 5 valores : Static, fixed, relative, absolute, sticky.
Static: Es el valor predeterminado para todas las etiquetas [Link] colocan
en el flujo normal del [Link] :left,rigth,top y bottom (no sirven
para el static).Todo es static , hasta que nosotros lo digamos.
Fixed: Mantiene un elemento fijo en la navegación del [Link]
respeta el flujo del [Link] usa para la NAV BAR,o alguna ventana
[Link] posiciona en relación a la ventana del navegador.
Permanece en la misma posición incluso cuando se desplaza la
pagina .util para crear : barras de navegación. Si : left,rigth, top y bottom.
Absolute: Permiten que los elementos se superpongan en referencia a la
pantalla o en referencia a un padding y se coloquen exactamente donde
se desee utilizando ,left,rigth,top y [Link] por ejemplo se quiere
posicionar un objeto en el medio de la pantalla , no bastara con (left: 50%
; top: 50%;) , habrá que agregar un transform: translate(-%50,-%50); que
lo que hará es restarle esa mitad a dicho objeto y posicionarlo en el
centro de la [Link] es fijo , es [Link] cuando usamos absolute
rodeado de static.
Relative:
Se utiliza en la clase padre para hacer relativo a un objeto y por ejemplo
centrar algo dentro de ella
Se colocan dentro del flujo normal del documento
Se usa frecuentemente en un elemento padre para establecer un contexto
de posicionamiento para sus elementos hijos
Si: left,rigth,top,bottom.
Sticky:Parece similar al relavite+ fixed.
Un elemento se mantiene relativo hasta que se cumple una cierta condición
( como desplazarse a una posición especifica en la pagina ), momento en el
que se convierte en un elemento fijo.
CLASE 4
FlexBox
- Es un modelo unidimensional. ( o una fila o una columna)
- Se utiliza para crear diseños y distribuir elementos en una pagina
web.(layouts)
EJES;
- Puedes colocar o distribuir tus elementos en una dirección : fila o
columna.
- Fila se aplica por default.
ROW
- Al espeificar row o row-reverse los elementos HIJOS se colocaran uno
al lado del otro.
Flex-direction: row;
Gap : 1 rem; (le da separación entre ellos)
El display flex se lo aplicamos siempre al padre
Justify-content: center ( centra el elemento hijo)
Flex-wrap:nowrap; lo que hace es hacer responsive el contenido que tiene
el flex
CONVENCION:
body{
Font-size:62.5%;
// 10 px= 1 rem//
}