Hola a todos estos son los apuntes de cosas nuevas e importantes que tomé de este curso del profe Diego de Granda (se los recomiendo totalmente)
<!--Lo siguiente sirve para que los robots del navegador me ayuden a posicionar mi
página web en ese buscador-->
<head>
<meta name="robots" content="index, follow">
<head>
<!--Me ayuda a darle una descripción a una imagen o citar su fuente-->
<figure>
<figcaption>Esta es una imagen X</figcaption>
</figure>
<!--Se utiliza para que cargue el video apenas cargue la pág web-->
<video preload="auto"></video>
<!--Se usa para que el navegador tenga el mismo video en el formato que pueda renderizar-->
<video preload="auto">
<source src="./videoX.mp4" />
<source src="./videoX.mpg" />
</video>
<!--Formulario con un input tipo calendario (fecha+hora)-->
<form action="">
<label for="calendario">
<span>Calendario</span>
<input type="datetime-local" id="calendario" name="calendario">
</label>
<input type="submit">
</form>
Cuando se tiene el valor de atributo - inherit va a heredar el valor de ese atributo del padre más cercano que tenga ese atributo escrito explícitamente
ejm: Font-size:inherit, buscara del padre más proximo que tenga font-size:30px;
Para que el fondo cubra todo el height aunq se cambie la altura de la ventana, poner:
height: 100vh;
Tamaños relativos
<!--Si le ponemos a:-->
html {
font-size: 62.5%
}
body {
font-size:1.6 rem;
}
<!--
entonces ese 1.6rem equivaldría a 16 pixeles, es decir el porcentaje sería más fácil de calcular, si es 3.5rem sería 3.5x10=35px;-->
<!--
Propiedad: Display
En un elemento con display:inline no se puede usar margin ni padding arriba ni abajo, solo derecha e izquierda. Tampoco se puede aplicar width o height.
En un elemento con display:block el contenido del elemento toma el 100% del width, se puede usar margin y padding por todos los lados.
En un elemento con display:inline-block, se puede usar margin y padding por todos lados, así como darle width y height, y el contenido es del mismo tamaño que el elemento.
Etiquetas como p y div vienen por Default con un display:block
Etiquetas como span viene por Default con un display:inline
Display: inline,inline-block y block; se aplican y actúa sobre los hijos
Display: flex; se aplica a los padres y actúa sobre sus hijos
Display: flex;
Align-items: baseline Va a dejar el box del tamaño del contenido que tenga
Flex-grow: 1; se aplica al mismo hijo es para que rellene el espacio vacío
Imágenes Responsive
Imágenes Responsive: con ésta buena práctica los sitios webs cargaran óptimamente las imágenes según el dispositivo o tamaño de viewport que tenga el usuario
Solamente renderizará la imagen justa y necesaria:
<main>
<picture>
<source media="(min-width:1300px)" srcset="./imgs/large.jpg" />
<source media="(min-width:1000px)" srcset="./imgs/medium.jpg" />
<img src="./imgs/small.jpg" alt="Esuna imágen de ejemplo" />
</picture>
</main>
Accesibilidad
- Semántica en HTML, ya que hay programas que dicen a usuarios con problemas visuales en que sección o espacio de la web están navegando, por eso es bueno usar las étiquetas correspondientes, como main, header, footer, etc.
- Textos, se recomienda usar tamaños de fuentes relativa (rem) en vez de un tamaño absoluto (px), ya que permite modificar el tamaño de nuestra web automáticamente en el navegador.
- El atributo label ayuda a enfocarme diréctamente en el input y nos ayuda a que otro software pueda indicar el contenido de este al usuario.
El atributo alt permite mediante screen readers leer una imagen que haya en la pag web y también si se nos rompe el enlace figure la descripción de esa
imagen.
El atributo title es una pequeña descripción de un elemento tipo imagen o link que aparece al hacerle hover a este.
Curso Definitivo de HTML y CSS
