Synthèse fonctionnement des sites
Les navigateurs
Pour découvrir les sites web on utilise un navigateur. Ces derniers sont a utiliser en connaissance de cause car ils permettent aux différents sites visités de connaître notre historique de navigation notamment.
Le html
Le html. Son acronyme signifie « langage de balisage d'hypertexte » car il permet en effet de réaliser de l'hypertexte à base d'une structure de balisage
Le css
Le « Cascading Style Sheets » ou « feuille de styles en cascade » s'est imposé dans les années 2000. Comme son nom l'indique, il permet de styler les textes d'une page Web : définir leur taille, leur couleur ou l'alignement d'un paragraphe. L'utilisation de feuilles de style au format CSS repose sur l'idée de séparation du contenu et de la mise en forme.
Accès au code source d'une page
Pour accéder au code source d'une page Web, il faut commencer par réaliser un clic droit sur la page. Dans le menu contextuel, il faut ensuite sélectionner la commande Inspecter.
Environnement de programmation
L'environnement de programmation peut-être un simple éditeur de texte comme notpad++ un éditeur de programmation qui se veut universel comme visual studio code ou un éditeur spécialisé comme brackets. En ligne Codepen peut-être utilisé.
Les navigateurs
Pour découvrir les sites web on utilise un navigateur. Ces derniers sont a utiliser en connaissance de cause car ils permettent aux différents sites visités de connaître notre historique de navigation notamment.
Le html
Le html. Son acronyme signifie « langage de balisage d'hypertexte » car il permet en effet de réaliser de l'hypertexte à base d'une structure de balisage
Le css
Le « Cascading Style Sheets » ou « feuille de styles en cascade » s'est imposé dans les années 2000. Comme son nom l'indique, il permet de styler les textes d'une page Web : définir leur taille, leur couleur ou l'alignement d'un paragraphe. L'utilisation de feuilles de style au format CSS repose sur l'idée de séparation du contenu et de la mise en forme.
Accès au code source d'une page
Pour accéder au code source d'une page Web, il faut commencer par réaliser un clic droit sur la page. Dans le menu contextuel, il faut ensuite sélectionner la commande Inspecter.
Environnement de programmation
L'environnement de programmation peut-être un simple éditeur de texte comme notpad++ un éditeur de programmation qui se veut universel comme visual studio code ou un éditeur spécialisé comme brackets. En ligne Codepen peut-être utilisé.
Synthèse commandes de base
Balises
Les balises entourées de chevrons servent à indiquer à la page html ce qu'elle doit faire de la valeur des attributs. On en distingue deux types :
les balises paires composée d'une balise ouvrante <titre> et une balise fermante </titre> qui indique que le titre se termine.
les balises orphelines qu' s'écrivent <titre>
Les attributs
Prenons la balise <image > que nous venons de voir. Seule, elle ne sert pas à grand-chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher : <image nom="photo.jpg">
Dans le cas d'une balise fonctionnant « par paire », on ne met les attributs que dans la balise ouvrante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 juillet 1969 :
<citation auteur="Neil Armstrong" date="21/07/1969"> C'est un petit pas pour l'homme, mais un bond de géant pour l'humanité. </citation>
Structure de base d'une page
Ce code correspond au code minimal que doit contenir toute page web.
<!DOCTYPE html>
<html>
___<head>
______<meta charset="utf-8" />
______<title>Titre</title>
___</head>
___<body>
___</body>
</html>
Balises
Les balises entourées de chevrons servent à indiquer à la page html ce qu'elle doit faire de la valeur des attributs. On en distingue deux types :
les balises paires composée d'une balise ouvrante <titre> et une balise fermante </titre> qui indique que le titre se termine.
les balises orphelines qu' s'écrivent <titre>
Les attributs
Prenons la balise <image > que nous venons de voir. Seule, elle ne sert pas à grand-chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher : <image nom="photo.jpg">
Dans le cas d'une balise fonctionnant « par paire », on ne met les attributs que dans la balise ouvrante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 juillet 1969 :
<citation auteur="Neil Armstrong" date="21/07/1969"> C'est un petit pas pour l'homme, mais un bond de géant pour l'humanité. </citation>
Structure de base d'une page
Ce code correspond au code minimal que doit contenir toute page web.
<!DOCTYPE html>
<html>
___<head>
______<meta charset="utf-8" />
______<title>Titre</title>
___</head>
___<body>
___</body>
</html>
Synthèse organisez le texte
Paragraphe et titre
Le paragraphe sera placé entre les balise <body>. La balise <p> et </p>est utilisée pour délimiter les paragraphes.
Pour sauter des lignes il faut employer plusieurs fois cette balise.
Aller à la ligne dans un paragraphe sans sauter une ligne. On utilise la balise orpheline suivante <br /> qui sera obligatoirement à l'intérieur d'un paragraphe.
Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, les titres deviennent utiles. On a le droit d'utiliser six niveaux de titres différents. Dans la pratique ,on n'utilise que les balises <h1> , <h2> et <h3>
La mise en valeur
Ces mise en valeurs sont à utiliser dans la balise <p> d'un paragraphe.
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>
Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie « fort » et le texte appariera en gras.
La balise <mark> permet de faire ressortir visuellement une portion de texte. On veut qu'il se distingue du reste du texte en étant surligné.
Le rôle de ses balises est d'indiquer le sens du texte. Ainsi, <strong> indique à l'ordinateur que ce texte est important mais sans plus. Une des utilité de ses balises est de permettre aux robots des moteurs de recherche de trouver des sites pertinent pour une recherche.
Les listes
Liste non ordonnée :
<ul>
___<li>Fraises</li>
___<li>Framboises</li>
___<li>Cerises</li>
</ul>
Les listes ordonnées donc numérotées
<ol>
___<li>Fraises</li>
___<li>Framboises</li>
___<li>Cerises</li>
</ol>
Paragraphe et titre
Le paragraphe sera placé entre les balise <body>. La balise <p> et </p>est utilisée pour délimiter les paragraphes.
Pour sauter des lignes il faut employer plusieurs fois cette balise.
Aller à la ligne dans un paragraphe sans sauter une ligne. On utilise la balise orpheline suivante <br /> qui sera obligatoirement à l'intérieur d'un paragraphe.
Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, les titres deviennent utiles. On a le droit d'utiliser six niveaux de titres différents. Dans la pratique ,on n'utilise que les balises <h1> , <h2> et <h3>
La mise en valeur
Ces mise en valeurs sont à utiliser dans la balise <p> d'un paragraphe.
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>
Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie « fort » et le texte appariera en gras.
La balise <mark> permet de faire ressortir visuellement une portion de texte. On veut qu'il se distingue du reste du texte en étant surligné.
Le rôle de ses balises est d'indiquer le sens du texte. Ainsi, <strong> indique à l'ordinateur que ce texte est important mais sans plus. Une des utilité de ses balises est de permettre aux robots des moteurs de recherche de trouver des sites pertinent pour une recherche.
Les listes
Liste non ordonnée :
<ul>
___<li>Fraises</li>
___<li>Framboises</li>
___<li>Cerises</li>
</ul>
Les listes ordonnées donc numérotées
<ol>
___<li>Fraises</li>
___<li>Framboises</li>
___<li>Cerises</li>
</ol>
Synthèse liens
Lien vers un autre site
Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a> . Mais il faut ajouter un attribut, href , pour indiquer vers quelle page le lien doit conduire.
<p>Pour visiter <a href="https://wendling.xyz">Un site sur les sciences de l'ingénieur</a> ?<br />
Fait par un prof du lycée Tocqueville à Grasse</p>
Lien vers une page de son site
Deux pages situées dans un même dossier
<p>Pour aller à la page 2 il suffit de cliquer ici <a href="page2.html">la page 2</a> ?</p>
Deux pages situées dans dossier enfant
<a href="contenu/page2.html">
Page situé plus haut dans l'arborescence
<a href="../page2.html">
Lien vers une ancre
Création de l'ancre avec ancre dans la même page
<h2 id="mon_ancre">Titre</h2>
L'ancre est plus bas sur la même page
<a href="#mon_ancre">Aller vers l'ancre</a>
L'ancre est située dans une autre page
<a href="index.html#jardin">Le jardin</a>
target="_blank" fait en sorte que lien hypertexte ouvre un nouvel onglet
href="mailto:NOMDUMAIL@MAIL.COM" crée un lien hypertexte qui ouvre la boîte mail avec un nouveau message vide
href="NOMDEFICHIER.EXTENSION" crée un lien hypertexte qui permet de télécharger un fichier que vous avez placé au préalable dans le même dossier que votre page web.
Lien vers un autre site
Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a> . Mais il faut ajouter un attribut, href , pour indiquer vers quelle page le lien doit conduire.
<p>Pour visiter <a href="https://wendling.xyz">Un site sur les sciences de l'ingénieur</a> ?<br />
Fait par un prof du lycée Tocqueville à Grasse</p>
Lien vers une page de son site
Deux pages situées dans un même dossier
<p>Pour aller à la page 2 il suffit de cliquer ici <a href="page2.html">la page 2</a> ?</p>
Deux pages situées dans dossier enfant
<a href="contenu/page2.html">
Page situé plus haut dans l'arborescence
<a href="../page2.html">
Lien vers une ancre
Création de l'ancre avec ancre dans la même page
<h2 id="mon_ancre">Titre</h2>
L'ancre est plus bas sur la même page
<a href="#mon_ancre">Aller vers l'ancre</a>
L'ancre est située dans une autre page
<a href="index.html#jardin">Le jardin</a>
target="_blank" fait en sorte que lien hypertexte ouvre un nouvel onglet
href="mailto:NOMDUMAIL@MAIL.COM" crée un lien hypertexte qui ouvre la boîte mail avec un nouveau message vide
href="NOMDEFICHIER.EXTENSION" crée un lien hypertexte qui permet de télécharger un fichier que vous avez placé au préalable dans le même dossier que votre page web.
Synthèse Faire le lien entre html et css
Balise img et attributs src et alt
Cette balise <img> est toujours insérée dans une balise <p> et comporte un attribut src qui indique le chemin vers votre image et un attribut alt qui donne une description alternative de celle-ci.
<p>Voici une très belle photo que j'ai trouvée sur Unsplash :<br>
<img src="images/paysage.jpg" alt="Photo de plage vue du dessus" />
</p>
Quelques effets
Une bulle sur vos images avec l'attribut tittle
<img src="montagnes.png" title="Alors, envie de vous balader n'est-ce pas ?" alt="Chemin de randonnée au milieu des montagnes">
Une miniature cliquable
<p>Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br>
___<a href="images/montagne.jpg"><img src="images/montagne_mini.jpg" alt="Chemin de randonnée au milieu des montagnes" title="Cliquez pour agrandir" ></a>
</p>
Balise img et attributs src et alt
Cette balise <img> est toujours insérée dans une balise <p> et comporte un attribut src qui indique le chemin vers votre image et un attribut alt qui donne une description alternative de celle-ci.
<p>Voici une très belle photo que j'ai trouvée sur Unsplash :<br>
<img src="images/paysage.jpg" alt="Photo de plage vue du dessus" />
</p>
Quelques effets
Une bulle sur vos images avec l'attribut tittle
<img src="montagnes.png" title="Alors, envie de vous balader n'est-ce pas ?" alt="Chemin de randonnée au milieu des montagnes">
Une miniature cliquable
<p>Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br>
___<a href="images/montagne.jpg"><img src="images/montagne_mini.jpg" alt="Chemin de randonnée au milieu des montagnes" title="Cliquez pour agrandir" ></a>
</p>
Synthèse Faire le lien entre css et html
Rôle du CSS
CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web.
Pour écrire le code CSS, on crée un fichier séparé portant l'extension .css comme style.css
Pour lier les fichiers CSS et HTML, on rajoute une ligne dans la balise :
<head> </head>
du fichier HTML :
<link href="style.css" rel="stylesheet">
Forme du fichier CSS
En CSS, on sélectionne les portions de la page HTML qu'on veut modifier, et on change leur présentation avec des propriétés CSS :
balise1
{
propriete1: valeur1;
propriete2: valeur2;
}
Comment sélectionner la portion du fichier html
toutes les balises d'un même type, en écrivant simplement leur nom ;
h1par exemple;certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class ou id
.nom-classe
#nom-id
uniquement les balises qui se trouvent à l'intérieur d'autres balises h3, em...
Rôle du CSS
CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web.
Pour écrire le code CSS, on crée un fichier séparé portant l'extension .css comme style.css
Pour lier les fichiers CSS et HTML, on rajoute une ligne dans la balise :
<head> </head>
du fichier HTML :
<link href="style.css" rel="stylesheet">
Forme du fichier CSS
En CSS, on sélectionne les portions de la page HTML qu'on veut modifier, et on change leur présentation avec des propriétés CSS :
balise1
{
propriete1: valeur1;
propriete2: valeur2;
}
Comment sélectionner la portion du fichier html
toutes les balises d'un même type, en écrivant simplement leur nom ;
h1par exemple;certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class ou id
.nom-classe
#nom-id
uniquement les balises qui se trouvent à l'intérieur d'autres balises h3, em...