# HTML/CSS
>
Petite synthèse
de choses vues en cours
En évolution… → ça se passe ici.
> Catégorie HTML/CSS
> Petite synthèse
> Progressive Web App
> favicon : les icônes de site web
La « favicon« , c’est l’icône affichée dans l’onglet du navigateur, et dans les favoris. Il y a actuellement 2 formats possibles : le .ico à l’ancienne, et un autre format plus... Voir l'article
# HTML/CSS
> Contourner le cache du navigateur
Quand on travaille sur un site en ligne les navigateurs gardent en mémoire les images et certains scripts après la première visite (le css par ex). Si vous faites une... Voir l'article
# HTML/CSS
> Intégrer une typo à votre site
Pour que votre site affiche votre typo même sur un poste ou elle n’est pas installée, il faut l’embarquer dans votre site internet : on appelle ça une « webfont« . Pour... Voir l'article
# HTML/CSS
> HTML5 audio – video, et video en fond de page…
Pas vraiment un article ou un tuto, mais tout est là !
Et ce n’est même pas compliqué (une fois qu’on a trouvé l’astuce)…
# HTML/CSS
> Flexbox
Quelques liens et ressources sur les blocs Flex :
- une page interactive très complète
- un guide plus court, pratique une fois que vous aurez compris
- un guide exhaustif mais un peu touffu
- un jeu pour apprendre les flexbox
Rappelez-vous la base : on applique flex et ses options sur le bloc parent, et ça agit sur ses enfants directs (mais pas sur leurs enfants à eux).
# HTML/CSS
> Ajuster des images et des images de fond
Voici une page de démo pour comprendre comment on peut ajuster une image (ou une image de fond) dans un format donné, sans la déformer.
Parfait pour des images élastiques !
# HTML/CSS
> Petite synthèse HTML-CSS
Qui sera complétée par la suite… Sélecteurs CSS Pour cibler vos blocs HTML en CSS, vous avez à votre disposition plusieurs syntaxes : article {} sélection par type de balise... Voir l'article
# HTML/CSS
> Récap. CSS : placer, centrer, positionner, etc
Un pdf de 10 pages qui reprend tous les points importants vu en cours.
(MAJ le 17/12/2020)
> Un template de site web vierge
Un dossier de base pour démarrer vos projets web :
- arborescence des dossiers (js, css, img)
- index.html pré-rempli (balises pour le référencement, appels des scripts, etc)
- une feuille de style basique avec un « reset » css simple + quelques aides
# HTML/CSS
> Positions CSS
position: static; par défaut, l’élément fait partie du flux normal de la page position: relative; le mode « triche », permet de déplacer un élmt par rappoort à sa place de départ... Voir l'article
# HTML/CSS
> Les sélecteurs CSS
Comme nous l’avons vu en cours, il y a 3 manières principales de cibler un élément en CSS : par type de balise ex : article {} va sélectionner toutes... Voir l'article
# HTML/CSS
> Structure recommandée d’un site HTML5
Ces balises sont comme des <div>, avec des infos en plus à destination des moteurs de recherche.
Si les robots comprennent mieux votre site, il sera mieux référencé !
> Animations CSS3 en Javascript
Les animations CSS3 c’est super, mais la syntaxe est assez pénible et ce n’est pas évident à temporiser (une anim, puis une autre, et une 3ème au clic, etc). Je... Voir l'article