Le langage html /css

Le langage du web : HTML/CSS



Nous allons nous intéresser à un acteur fondamental du développement web, le couple HTML+CSS (Hyper Text Markup Langage et Cascading Style Sheets).

Le langage HTML

HTML

La programmation d’une page Web repose sur l’utilisation d’un langage de description appelé « HTML » (HyperText Markup Language). Le langage HTML utilise des balises pour délimiter le début et la fin de chaque ins-truction lue par le navigateur.

Chaque instruction HTML est délimitée par une balise ouvrante < élément> et une balise fermante </élément>. Ces balises sont invisibles à l’écran mais elles permettent au navigateur d’interpréter ce qu’il doit afficher

Voici un premier exemple de page HTML

Observer le code en identifiant bien l'ouverture et la fermeture des balises

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
	<title> le lycée </title>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>
   <h1> Notre site</h1>
   <ul>
	<li> comsommation énergétique du web</li>
	 <ul>
		<li> Les datacenters</li>
		<li> netflix</li>
	 </ul><!--ligne 15-->
   </ul><!--ligne 16-->
  </body>
</html>

Rendez-vous sur ce site qui va nous permettre de travailler le code html en travaillant de manière déportée

Dans la partie HTML copiez/collez le contenu du code précédent. Puis cliquez sur run.

  1. Que fait l'élément h1?
  2. A quoi sert la ligne 15, et la 16?
  3. A quoi sert l'élément ul?
  4. Amusez-vous à modifier le code.

Dans l'encadré CSS ( en haut à droite ), testez le code suivant:


    h1{
        color:red;
    }
    body{
        background-color: blue;
    }

changez la couleur du titre et de l'arrière plan puis amusez vous.

Adaptation distanciel

Environnement de developpement

JSFIDDLE est un très bel outil, mais il ne peut pas être utilisé pour la réalisation d'un vrai site internet (ou d'une vraie application web).


Ouvrir le logiciel Visual Studio Code se trouvant sur votre bureau et créer un fichier que vous nommerez : index.html.
Sauvegardez-le dans vos fichiers perso.
Copiez collez le code suivant : : 
<!doctype html>
<html lang="fr">
    <head> 
        <meta charset="utf-8"> 
        <title>mon super site!</title>
    </head>
    <body> 
        <h1>Hello World! Ceci est un titre</h1>
        <p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
    </body> 
</html>
Tester votre code à l'aide d'un navigateur web (Firefox ou Chrome) en “double-cliquant” sur le fichier index.html
A partir de maintenant vous pouvez choisir un fil conducteur ( film, sport, humour, passion...) et modifier votre page

Astuce ! La combinaison de Touche : Maj+Alt+F permet une indentation automatique.

Dans ce dernier code, vous reconnaissez le code se trouvant entre les balises <body> :

<body>
......
</body>

Tout votre code HTML devra se trouver entre ces 2 balises.

Quelles sont les autres balises?

La première ligne (<!doctype html>) permet d'indiquer au navigateur que nous utiliserons la dernière version du HTML, le fameux HTML5.

La balise <html> est obligatoire, l'attribut lang="fr" permet d'indiquer au navigateur que nous utiliserons le français pour écrire notre page.

Les balises <head>...</head> délimitent ce que l'on appelle l'en-tête. L'en-tête contient, dans notre exemple, 2 balises : la balise <meta charset="utf-8"> qui permet de définir l'encodage des caractères (utf-8)(nous reviendrons sur cette notion) et la balise <title> qui définit le titre de la page (attention ce titre ne s'affiche pas dans le navigateur, ne pas confondre avec la balise <h1>).

Les liens vers un site internet externe

Un lien externe est un lien vers une page pointée par son URL.

Ce type de lien est un exemple de lien hypertexte.

Le code en langage html ci-dessous 

 <a href="https://www.societe-informatique-de-france.fr/"> Société informatique</a>

conduit à l'affichage suivant sur la page web : Société informatique .

  1. Cliquez sur le lien ci-dessus : que se passe-t-il ?

  2. Quel est le rôle de la balise <a> ?

  3. Quel est le rôle de l'attribut href ?

  4. Dans votre fichier index.html, ajoutez un lien vers un site de votre choix. ( vous pouvez ajouter target="blank" dans le lien pour ouvrir un onglet)

Les images

La balise <img>

On utilise l'élément <img> pour placer les images. Deux attributs sont obligatoires :

  • L'attribut src pour spécifier le nom du fichier image à charger. Les fichiers image doivent impérativement être aux formats GIF ou JPG.
  • L'attribut alt pour indiquer un contenu alternatif, c'est à dire un texte à afficher à la place de l'image lorsque, pour différentes raisons, elle n'apparaît pas.

 <img src="img/jardinforet.jpg" alt="c'est pas un jardin mais une blague">

c'est pas un jardin mais une blague
Recherchez une image libre de droit.
Insérer l'image dans votre page avec votre commentaire.
Pour une bonne pratique vous créerez un répertoire img dans lequel vous mettrez vos images.

Pour les plus rapide...


essayez de déplacer ou redimensionner l'image. A vous de trouver les bonnes balises;-) vous pouvez également créer un lien sur une image.

Les vidéos

Pour ne pas alourdir la séquence, nous ne traiterons pas ensemble de l'implémentation des videos, si cela vous intéresse vous pouvez vous rendre ici

Rendez vous sur youtube. Choisissez une vidéo sur l'histoire du web et insérer là dans votre page web.

CSS

CSS

Le langage CSS (Cascading Style Sheets) permet de définir le style graphique d’une page Web (arrière-plan, type et taille des polices de caractères, etc.). La modification du style d’un élément dans une feuille de style se répercute automatiquement à toutes les pages HTML qui y font appel

body{
	background-color: white;/*ligne 2*/
	font-family: "OpenSans", sans-serif;
	padding: 5px 25px;
	font-size: 18px;/*ligne 5*/
	margin: 0;
	color: purple;
}
h1{
	font-family: "Merryweather",serif;
 	font-size: 32px;
    color: #FF0000;
}

Retournez sur le site de jsfiddle est copiez/collez le code précédent dans la case CSS. En ayant pris la peine de récupérer votre code html du début d'activité. Appuyez sur run.

  1. Quels sont les éléments modifiés pas le fichier css?
  2. Dans la ligne remplacez 18 par 32. A quoi sert l'attribut font-size?
  3. Dans la ligne 2 , remplacer white par green. Que fait l'attribut background-color?
  4. Que fait l'attribut color ?
  5. Amusez-vous à modifier

Voici une arborescence "type" :

arborescence pour développer du web

Pour la suite, vous pouvez modifier ce que vous avez commencé ou utiliser un modéle:

  • Vous pouvez vous inspirer du site ci-dessous en créant des liens, modifiant le contenu.... il est téléchargeable ici pour l'utiliser, vous devez le décompresser dans votre dossier snt personnel

    • Vous remarquerez la présence de la ligne de code ci-dessous dans le fichier html. Elle sert à faire le lien entre le fichier html et css.

    <link rel="stylesheet" href="css/style.css" >

    Ainsi vous indiquer à votre fichier HTML le chemin de votre CSS.

    Tout est prêt pour commencer à styliser votre site.

    Utilisez le lien suivantpour modifier ce que vous voulez.

    Quartier libre pour modifier votre premier site !!

    N'hésitez pas à chercher sur le web si vous voulez aller plus loin, le monde est vaste...