meta données pour cette page
  •  

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
web:bases:htmlcssjs [28/12/2022 21:37] – [Modifier - Panel] laureweb:bases:htmlcssjs [05/01/2023 14:00] (Version actuelle) – [CSS] laure
Ligne 1: Ligne 1:
 ===Web de Base :  HTML CSS JS === ===Web de Base :  HTML CSS JS ===
 +
 +{{tag>web code exemples ressources}}
 <WRAP group> <WRAP group>
 <WRAP twothirds column> <WRAP twothirds column>
Ligne 14: Ligne 16:
 ➕  Frameworks "sympas" ➕  Frameworks "sympas"
 ➕  Outils "utiles" ➕  Outils "utiles"
 +
 +===🎁 Ressources Vrac===
 +🎥[[https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g|Playlist Youtube "Web Demystified"]] par Jérémie Patonnier de son temps chez mozilla. 
 +
 +===👀 Veille Vrac ===
 +les 3 dernières pages marquées sur le sujet "web" : 
 +{{rss>http://www.liens.chiquette.fr/feed/atom?&searchtags=web description 3 date 1d }} 
  
  
Ligne 26: Ligne 35:
  100% cousu-main, réalisé en suivant [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3|un cours OpenClassRoom]] en 2020  100% cousu-main, réalisé en suivant [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3|un cours OpenClassRoom]] en 2020
   * **[[https://attrapli.com/| 🫶 1 page site d'Attrapli]] **    * **[[https://attrapli.com/| 🫶 1 page site d'Attrapli]] ** 
- un projet qu'on a gagné 2 blueribbon de Makers avec à la Villette,  +un projet qu'on a gagné 2 blueribbon de Makers avec à la Villette fin 2019,  
-un site où j'ai intégré les visuels de mon chéri à un template d'[[https://html5up.net/|HTML5Up]]+\\ un site où j'ai intégré les visuels de mon chéri à un template d'[[https://html5up.net/|HTML5Up]]
  
  
Ligne 42: Ligne 51:
 </WRAP> </WRAP>
 </WRAP> </WRAP>
 +
 +==== HTML ====
 +<WRAP group>
 +<WRAP half column>
 +<lead>C'est le langage des pages web que nous consultons. </lead>Il consiste en une série de balisées qui structurent le contenu et le décrivent, permettant aux différents navigateur d'afficher les informations et les médias. Une page HTML se structure toujours de la même façon: ''HEAD'' contient les meta données et des ressources supplémentaires + ''BODY'' où on placera tout le contenu à afficher. 
 +
 +<button type="primary"  size="lg" block="true" collapse="pagebase"> Voir le code  
 +<badge>Cliquez pour dérouler </badge></button>
 +
 +<collapse id="pagebase" collapsed="true">
 +<badge> Télécharger le code en cliquant sur son titre en bleu : </badge>
 +
 +<file html pageEx.html [enable_line_numbers="true"]>
 +<!DOCTYPE html>
 +<html lang="fr">
 +<head>
 +<title>un titre</title>
 +<meta charset="UTF-8"> 
 +<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, maximum-scale=5"> 
 +<meta name="description" content="une description du document" />
 +<link rel="stylesheet" href="des_styles.css">
 +</head>
 +
 + <body>
 +ici tout le contenu à afficher
 +</body>
 +</html>
 +
 +</file>
 +</collapse>
 +</WRAP>
 +
 +<WRAP half column>
 +==Ressources==
 +[[https://developer.mozilla.org/fr/docs/Web/HTML/Element#content_sectioning|Les balises HTML et leurs rôles]]
 +
 +[[https://validator.w3.org/|le validateur de balisage du W3C]]
 +
 +
 +</WRAP>
 +</WRAP>
 +
 +==== CSS ====
 +<WRAP group>
 +<WRAP half column>
 +colonnes
 +</WRAP>
 +
 +<WRAP half column>
 +
 +<WRAP group>
 +<WRAP half column>
 +
 +
 +<WRAP group>
 +<WRAP half column>
 +
 +===Ressources ===
 +[[https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors|Liste complète des sélecteurs W3C]]
 +</WRAP>
 +
 +<WRAP half column>
 +=== prises de tête ===
 +[[une image de fond format portrait]]
 +</WRAP>
 +</WRAP>
 +
 +
 +</WRAP>
 +
 +<WRAP half column>
 +
 +</WRAP>
 +</WRAP>
 +
 +
 +
 +</WRAP>
 +</WRAP>
 +
 +=== JavaScript ===
 +<WRAP group>
 +<WRAP half column>
 +colonnes
 +</WRAP>
 +
 +<WRAP half column>
 +
 +</WRAP>
 +</WRAP>
 +
 +=== Images & illustrations ===
 +<WRAP group>
 +<WRAP half column>
 +colonnes
 +</WRAP>
 +
 +<WRAP half column>
 +
 +</WRAP>
 +</WRAP>
 +
 +=== Frameworks "sympas" ===
 +<WRAP group>
 +<WRAP half column>
 +colonnes
 +</WRAP>
 +
 +<WRAP half column>
 +
 +</WRAP>
 +</WRAP>
 +
 +=== Outils "utiles" ===
 +<WRAP group>
 +<WRAP half column>
 +colonnes
 +</WRAP>
 +
 +<WRAP half column>
 +
 +</WRAP>
 +</WRAP>
 +
 +
 +
 +