La clase inicia con un repaso de lo visto anteriormente, se revisa de la estructura semántica de una pagina web html y consultaremos las propiedades de CSS, pero a continuación se comparte un link para revisar el ejemplo de structure-html:
Repaso de etiquetas semánticas
etiqueta <ul></ul>
El elemento ul representa una lista no ordenada de ítems que, en contraste con las lista ordenadas (elemento ol), no produce significados diferentes si el orden de los ítems es alterado. Los ítems de ambas listas, ordenadas y no ordenadas, son representados por el elemento li.
La etiqueta Ol representa una lista ordenada de ítems. El siguiente ejemplo muestra un uso muy básico del elemento ol. Resulta fácil notar cómo el significado se vería profundamente alterado si el orden de los ítems fuera cambiado.
Atributos
<ol reversed> contar en reversa 5. 4. 3. 2. 1
<ol start=»8″> contar desde el numero seleccionado 8-9-10
<ol type=»I»> contar en numero romano I II III – A B C – a b c – i ii iii iv
El elemento main
Es un contenedor para los temas centrales de un documento o sección. Este contenido central puede interpretarse como todo lo que resta luego de quitar anuncios, encabezados (header), pies (footer), secciones de navegación (nav), vínculos relacionados y otros elementos secundarios.
El elemento main tiene mayor importancia para personas con discapacidades, que habitualmente acceden a la web a través de programas especiales como los navegadores de voz. En tales casos, los navegadores pueden ser instruidos para ir directamente al contenido principal del documento o sección (main), saltándose toda la información menos relevante.
Aunque no existen restricciones acerca del número de elementos main en un documento, sólo uno puede estar visible (no tener el atributo hidden presente) por vez.
FontAwesome.com
Libreria para insertar iconos web, el siguiente es para colocar en el Head
<script src=»https://kit.fontawesome.com/638bbdcbb4.js» crossorigin=»anonymous»></script>
Luego cuando me registro puedo ir a buscar mi icono y copiar el código para colocarlo en html
<i class=»fa-solid fa-thumbs-up fa-5x»></i>
<i class=»fa-brands fa-whatsapp-square fa-5x»></i>
Insertar tipografía de Google Font
Elegir la tipografía y copiar el link a HEAD.
abajo se sitúa el CSS para insertarlo.
con la característica font-weight: 100; puedo determinar el grosor de la tipografía.
Principales propiedades CSS
El lenguaje CSS que estamos usando actualmente es la versión 2.1 que es estándar y la 3.0 que todavía no está terminada de definir pero ya se está usando. La versión 3.0 agrega nuevas propiedades, que se suman a las anteriores. A continuación describo las principales propiedades:
Font-family:
Define la familia tipográfica. Es conveniente poner una lista de dos o tres tipografías separadas por coma, porque si el usuario no tiene instalada la tipografía que nosostros elegimos, el navegador opta por mostrar la siguiente que debería ser una similar, si tampoco la tiene instalada, mostrará la tipografía por defecto.
Tenemos 3 opciones para definir la elección de la familia tipográfica:1) usar una de las fuentes más comunes (web safe fonts) que muy probablemente tenga instalada el usuario (Arial, Verdana, Trebuchet, Georgia, san serif, Times), 2) subir nuestra propia fuente con una propiedad nueva que se llama @font-face, o 3) usar una fuente de Google Font, que en este momento es lo más recomendable. El sitio es: http://www.google.com/fonts/.
Font-size:
Define el tamaño de la fuente y el valor se puede escribir en pixels o en ems. En este momento se recomienda usar ems. Los dos son valores relativos, el pixel es un valor relativo a la resolución de la pantalla, pero el em es relativo al tamaño de la fuente definida por el usuario. Si el usuario no cambió la configuración, el valor por defecto de los textos en todos los navegadores es de 16px. Entonces 1em = 16px.
Color:
Define el color de la tipografía. Los colores se pueden escribir de 3 formas distinas: con sistema hexadecimal, por ejemplo: #FF0000 (es rojo). Con los nombres de los colores (más limitado) por ejemplo: black, red, green. O usando RGB, esta paleta permite agregar el canal alfa para hacer transparencias.
Width:
Define el ancho de un elemento, el valor se puede escribir en pixels, ems o porcentaje.
Max-width o min-width:
Definen el ancho máximo o mínimo de un elemento. Muy importante en sitios adaptables
Height:
Define el alto de un elemento, el valor se puede escribir en pixels, ems o porcentaje.
Max-height o min-height:
Definen el alto máximo o mínimo de un elemento. Muy importante en sitios adaptables
Padding:
Es la distancia desde el borde de un elemento hasta su contenido.
Margin:
Es la distancia entre un elemento y otro (desde el borde de un elemento hacia afuera)
Border:
Define el borde de un elemento, su color, su estilo y grosor.
Background:
Define los fondos de un objeto. El fondo puede ser una imagen o un color. El color puede ser pleno o degradado. La imagen se puede repetir formando una trama (es lo que ocurre por defecto) o se puede especificar que no repita y que se coloque en determinada posición.
https://www.mclibre.org/consultar/htmlcss/css/css-propiedades.html
Actividades:
1) Terminar imagen de su landing page personal.
2) Hacer el HTML de su landing page personal.
