Cours WEB Initiation === ## HTML :::info Si un exercice comporte un :hand:, appelez un formateur avant de passer à la suite afin qu'il vous le valide. ::: ### Exercice 1 :hand: 1) Creez un fichier `page.html`, ouvrez le puis écrivez y du texte (une phrase quelconque). 2) Ouvrez à present ce fichier avec votre explorateur web `(firefox, chrome, etc)`. > Vous devriez voir apparaitre votre texte sur une page blanche. ### Cours 1 Le HTML est un language fixe, il n'est pas possible de creer des animations simplement avec ce language mais il représente la base solide sur laquelle tous les autres languages web s'appuient. Le language fonctionne avec un systeme de balises (des boites) inscritent de cette façon : ```htmlmixed= <balise> <texte> Salut ! </texte> </balise> ``` Dans cet exemple, nous avons une balise du nom de `balise` dans laquelle se trouve une autre balise se nommant `texte` qui contient elle même ce texte : "Salut !". Pour ouvrir une balise (donc une fameuse boite), il suffit d'écrire son nom entre "<" et ">" de la manière suivante : `<boite>`. En HTML il faut toujours fermer les balise que l'on ouvre, vous fermerez les balises de la manière suivante : `</boite>`. Nous avons simplement ajoutés un '/' avant le nom. ### Exercice 2 :hand: Je vais donc vous donner vos premières armes dans ce monde terrible de boites. | Balise | description | | ---- | ----- | | p | Balise contenant un paragraphe | | h1 | Balise contenant un titre principale | | h2 | Balise contenant un titre un peu moins important | | h3 | Balise contenant un titre encore un peu moins important | | hx | Je pense que vous avez compris l'idée :expressionless: | | h6 | Balise contenant le plus petit des titres | 1) Ecrivez un petit texte avec des titres et des paragraphes. ### Cours 2 Ces quelques lignes ne sont pas très propres, voici donc une page standard que nous allons décortiquer : ```htmlmixed= <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"/> <title>Mon mega site !</title> <link rel="stylesheet" href="style.css"/> <script src="script.js"></script> </head> <body> Le corps de la page sera ici. </body> </html> ``` Le `<!doctype html>` est un standard qui permet de préciser à votre navigateur web que la page est du type HTML. Entendez y `document type html`. La balise `<html>` contiendra l'intégralité de votre page en HTML. Elle se termine par une fermeture de balise comme les autres : `</html>`. Vous remarquerez cependant que la balise comporte à l'interieur de son ouverture le texte : `lang="fr"`. Cela s'appel un **attribut**. Dans ce cas precis nous parlons de l'attribut *lang* qui definit la langue de votre page (entre guillemets). La balise `<head>` comporte toutes les données d'entête de votre page, tout ce qui n'a pas pour but d'être le contenu mais l'enrobage de la page. Les informations contenus dans le head sont principalement des informations pour le navigateur et non pour l'utilisateur. La balise `<body>` par oposition comporte le corps de la page, tout les composants à afficher. Dans ce cas prècis, la page ne comporte qu'un simple texte. `<meta charset="utf-8"/>` Comme vous commencez à avoir l'habitude, vous devriez reperer facilement le nom et les attributs de la balise. **Meta** correspond aux Metadonnées de la page, dans ce cas précis, l'attribut charset définit la page en UTF-8 et non en ASCII (par defaut). Ce dernier étant un standard américain, vous n'auriez pas pu écrire d'accents. Nous ne nous attarderons pas longtemps dessus. Si vous n'avez pas compris, revenez dessus pendant l'exercice 3. Vous aurez peut-être remarqués que la balise meta n'est pas fermée ! C'est tout a fait normal car en HTML, si votre balise n'a pas pour but de contenir quoi que ce soit, elle peut alors s'autofermer. On dit que c'est une balise **autofermante**. Pour auto-fermer une balise, on note simplement un '/' après son nom à l'ouverture. On passe alors de ceci : `<boite></boite>` à ceci `<boite/>` Notez cependant que cette dernière notation n'est pas obligatoire, elle permet simplement une meilleure lisibilité de votre code. Vous devriez normalement à ce stade comprendre la balise `<title>Mon mega site !</title>` qui permet de définir le titre de la page. Les balises `<link rel="stylesheet" href="style.css"/>` et `<script src="script.js"></script>` sont respectivement les balise qui indique où se trouvent les fichiers CSS et JS de la page. Ils ne sont pour le moment pas utiles, nous reviendrons dessus plus tard. ### Exercice 3 :hand: 1) Copiez l'exemple de page dans votre fichier html. 2) Copiez le texte suivant dans la balise `body` : ``` C'est à la montagne que j'ai vue l'épée d'Excalibure. ``` 3) Observez le resultat puis retirez la balise `meta`. 4) Recharger la page et expliquez le resultat. ### La suite Le HTML t'a permis de placer des elements de base à l'écran, il existe un très grand nombre de balise pouvant te permettre de faire des tableaux, des listes, des formulaires, des boutons ... Internet n'attend que toi ! ## CSS Nous allons maintenant parler d'un language très lié au HTML, le CSS. Ces deux derniers forment un couple que l'on ne voit presque jamais l'un sans l'autre. Le CSS te permettera de customiser ta page pour la rendre bien plus agréable. ### Cours 1 Le CSS est la boite de maquillage du HTML ! Sans lui, la page reste fonctionnelle, et sera simplement très simple. Souvenez vous de la ligne `<link rel="stylesheet" href="style.css"/>` dans votre `head`. Il est grand temps de vous en parler ! La balise `link` permettant, comme son nom l'indique de creer un lien avec une autre page, comporte ici deux attributs que sont : `rel` qui désigne le type de donnée ( ici, une feuille de style ). `href` qui désique le fichier dans lequel se trouve le fameux code. ### Exercice 1 :hand: 1) Créez dans le même dossier que votre `page.html` un autre fichier du nom de `style.css` et copiez le texte suivant dedans : ```CSS body { background-color: red; } ``` 2) Actualisez la page html et expliquez le resultat. > Vous devriez avoir une page dont le font est rouge. ### Exercice 2 :hand: Nous allons donc tester un peu vos capacités d'adaptation. Creez une page comportant : 1) un gros titre en vert 2) un sous-titre en bleu 3) un paragraphe en gras ### Cours 2 Bien ! Vous commencez à avoir une idée de ce que peut faire le CSS. J'aimerai donc à présent vous parler d'un problème que vous risquez de rencontrer très vite si vous vous contentiez de ces quelques connaissances précédentes. ```htmlmixed= <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"/> <title>La vie</title> <link rel="stylesheet" href="style.css"/> <script src="script.js"></script> </head> <body> <p> Le lion </p> <p> Le Boulot </p> <p> L'âne </p> <p> Le Chêne </p> <p> L'Humain </p> </body> </html> ``` Prennez rapidement connaissance de cette page et demandez vous comment vous pourriez faire pour colorer les animaux (dont l'humain) en rouge, les arbres en vert et l'humain en gras ? Si vous pensez avoir trouvé une solution, essayez là ! Que vous y arriviez ou non, vous aurez compris le problème. En vérité, il est impossible de le faire sans quelques connaissances supplémentaires. En HTML ( donc sur ta page `page.html`), deux types d'attributs sont très souvent utilisés, les `class` et les `id`. La **class** d'une balise est la (ou les) catégorie dans laquelle vous pouvez la placer. Les class sont faites pour être utilisés par plusieurs balises. L'**id** d'une balise est son identifiant, il lui est propre et il serait incorrect de donner le même id à deux mêmes balises. :::info Je ne metterai maintenant en règle générale que le contenu de la balise 'body'. ::: Voici un petit exemple : ```htmlmixed=10 <h1 class="homme" id="jack">Je suis Jack</h1> <h1 class="femme" id="kate">Je suis Kate</h1> <h1 class="homme" id="charlie">Je suis Charlie</h1> ``` ```css= h1.homme { color: pink; } h1.femme { color: blue; } h1#jack{ font-size: 60px; } ``` Je vous conseil fortement d'essayer ce code, de la manipuler et d'essayer de le comprendre. Nous comprenons ici que 'femme' ou 'homme' sont des categories generales et ne definissent pas qu'une personne. Il faut donc les définir par des class. Le prenom de la personne dans le cas présent la définie elle et personne d'autre. Il est donc logique de le noter en id. En css, `.femme` représente toutes les balises dont la class est "femme". `h1.femme` représente donc tout les h1 de la class "femme". Dans la même logique, `#jack` représente la balise dont l'id est "jack". ::: info on peut avoir plusieurs class ou id indépendants : ```htmlmixed=10 <h1 class="homme brun"></h1> ``` sera sélectionné par : ```css= h1{} ``` ```css= h1.homme{} ``` ```css= h1.brun{} ``` et même ```css= h1.homme.brun{} ``` ::: ### Exercice 3 :hand: 1) Résolvez le problème exprimé au début du cours 2 avec vos nouvelles connaissances.