TP Web : Les langages de base des pages Web le HTML et le CSS
En premier lieu il faut dire que les langages HTML et CSS sont deux véritables standards sans concurrent.
Ils sont donc à la base de tout projet de développement Web. ( site de e-commerce, blog, appli,…) L’objectif de ce TP est de créer une page Web voir un petit site Web en la codant sur le thème
suivant : un lieu balade/promenade ou une activité de loisir que vous avez réalisée cet été.
Lorsque l’on code, vous devez bien vous dire que rien n’est « magique » : Tout le code que vous écrirez dans votre vie reposera sur des règles et des mécanismes. Les connaître vous permettra de beaucoup
mieux comprendre comment est écrite une page Web
Les enregistrements se feront régulièrement sur votre dossier personnel dans un dossier SNT sous dossier « Le Web ».
Activité 1 : pages web et lignes de code. (Livre p62)
Une page Web est affichable par un navigateur.
Q1 Citer des exemples de navigateurs.
Q2 Que signifie HTML ? Quel est son rôle ? Q3 Que signifie CSS ? Quel est son rôle ? Travail à Faire
Repérer (Doc1 p62) les balises indispensables au fonctionnement d’une page Web
Repérer les paires de balises (= une entrante et une fermante) et les balises orphelines (=seule)
Ouvrir l’outil « Bloc Notes » (Démarrer/Tous les Programmes/Accessoires) puis recopier la liste d’instruction suivante
Dans l’en-tête (=head) indiquez
que vous utilisez les caractères utf-8
le titre de la page
lien vers la feuille de style (vu plus tard)
Dans le body (=corps) recopier les instructions suivantes
<h1>Mon titre principal</h1>
<h2>Mon titre secondaire</h2>
<p>Mon premier paragraphe</p>
<p>Mon second paragraphe</p> Penser à clôturer votre balise html
Fin Activité1 :
Enregistrer votre travail sous le format fichier texte (.txt)
Enregistrer une copie de ce document « enregistrer sous » en format html (.html) Type de format, Tous les fichiers et indiquer un Nom du fichier du genre
Activité1Web.html
1) Ouvrir votre document .html avec un navigateur (Firefox)
Vous venez de créer votre première page WEB, Félicitations….
Activité 2 : Identifications et Utilisations de quelques balises
Utilisation de Brackets
Nous procéderons maintenant à l’édition de nos pages web avec le logiciel Brackets.
Pour cela ouvrir Brackets. Dans le menu Fichier, cliquer sur Nouveau et y copier-coller le code précédent.
Dans le menu Fichier, cliquer sur Enregistrer et dans Type sélectionner Web Files et écrire index.html dans Nom du fichier.
Le Navigateur ouvrira toujours le fichier index.html comme page d’accueil, ensuite découlerons les autres pages html
Créer, coder une page Web, un petit site Web sur le thème suivant
un lieu balade/promenade, une activité de loisir que vous avez réalisée cet été.
Dans votre dossier travail/SNT, créer un dossier pour votre site web Exemple «LeSitedeNOM-NOM.com »
Utiliser le logiciel « Brackets », ouvrir le fichier Index
/commun/2ndX/SNT/LeWEB/ExempleSITE/index.html
Le code s’affiche, cliquer sur pour afficher la page web correspondante
Enregistrer le fichier sous index.html dans votre dossier
travail/SNT/LeWeb/ LeSitedeNOM-NOM.com
Q1 Quel est le titre de la page lue par le navigateur
Q2 Quel est le titre de plus haute importance affiché sur la page web Q3 Quel est le nom du fichier correspondant à la photo
Q4 Quelle est la première phrase du paragraphe affiché
UTILISATION DES BALISES HTML
Ci-joint, un site permettant d’expliquer l’utilisation des balises, il pourra être votre référence, avancer doucement en l’utilisant. Attention, chaque faute de frappe va
vous mener à l’erreur.
https://www.pierre-giraud.com/html-css/cours-complet/elements-balises-attributs-html.php et http://numerique.ostralo.net/html_css/
Etape 1 : Dans un premier temps,donnez un titre général et un sous-titre à votre page Web grâce à une balise comme le montre le code HTML du document 3p63. Quelle sont-elles ? Les utiliser et donner le titre « Ma promenade/activité de l’été » et un sous-titre indiquant si c’est une activité solo, entre amis ou en famille.
On peut demander un retour à la ligne par la balise <br> (balise orpheline = s’utilisant seule).
Etape 2 : Mettez votre sous-titre à la ligne grâce à l’ajout d’un élément br
Etape 3 : Dans le body ajouter un lien hypertexte nommé Illustration renvoyant vers une photo de l’activité/du lieu de votre promenade comme le montre le document 4p63.
Pour ce faire aller chercher l’adresse d’une image en ligne en faisant Ouvrir l’image dans un nouvel onglet et copier l’adresse de l’image pour créer le lien hypertexte.
Remarque : Dans l’élément a (pour "anchor" ou ancre en anglais) il y a un attribut href (pour hypertexte référence)
L’élément img, servant à insérer une image dans une page HTML, va lui demander deux attributs : src et alt exemple dans l’exercice 6p73.
L'attribut src va prendre comme valeur le nom et l’emplacement de l’image tandis que l'attribut alt va afficher un texte alternatif dans le cas où l’image ne serait pas disponible (pour les non voyants par exemple).
Etape 4 : Dans le body Insérer une photo que vous aurez préalablement enregistrée dans votre dossier TPWeb1, dossier /Images
Vous pouvez trouver un photographie libre de droit sur https://commons.wikimedia.org ou une de vos photographies personnelles…
Etape 5 : Copier coller le texte ci-dessous en le plaçant dans le corps de code (=body) en utilisant l’élément paragraphe p comme on peut le voir sur le code HTML du document 3p63.
Remarque : la mise en forme se fera à l’activité-étape suivante.
Je vous présente ici une de mes sorties/activités que j’ai réalisé cet été. Je réalise pour cela une page Web assez simple. Je vous présente maintenant un tableau qui indique la ville et le mois où j’ai réalisé cette promenade/activité.
Etape 6 : On s’aidera de l’exercice 4p72 pour réaliser la consigne du texte paragraphe en italique.
Prolongements : En vous inspirant du document 1 p62 découvrir ce que fait l’utilisation conjointe les paires de balises entrante fermante <ul><ul/> et <li> <li/>
De même dans un texte découvrir ce que fait la paire entrante fermante <b><b/> ainsi que la paire entrante fermante <i><i/> en encadrant un mot de ce texte avec cette paire de balises.
Faire de même avec <h2>Une de mes balades/activités<h2/>.
Créer un lien hypertexte nommé "page 1.html" ou vous écrirez une ou deux lignes sur les personnes avec qui vous avez fait votre balade ou le(s) lieu(x) où vous pratiquez votre activité.
Coder correctement cette deuxième page dans un nouveau fichier nommé "page 1.html" dans Brackets.
Nous vous Félicitons pour le travail accompli, votre site doit prendre forme dans le contenu, maintenant, nous allons le rendre attrayant et plus
agréable et créant une feuille de Style CSS
Activité 3 : Gérer l’apparence d’un site par le CSS.
Utilisation de Brackets
Dans le menu Fichier, cliquer sur Nouveau.
Dans le menu Fichier, cliquer sur Enregistrer et dans Type sélectionner Web Files et écrire feuilledestyle.css dans Nom du fichier.
Remarquez que l’avantage de cette méthode (une parmi d’autres) est d’harmoniser le style de toutes les pages d’un même site WEB en renvoyant à la même feuille de style
Comme nous l’avons vu jusqu'à présent une page HTML est écrit comme des sortes de boites imbriquées les uns dans les autres.
On remarque que Brackets mes des indentations (=alinéas) afin de matérialiser cela et rendre l’écriture du code plus aisée.
Nous allons faire la même démarche pour la mise en forme de la page Web grâce à la feuilledestyle.css que vous allez créer.
Observer le document 2p63 le code CSS contient:
Un sélecteur body contient diverses
propriétés comme background-color font-family padding font- size
séparées par des ; attention de ne pas les oublier
Etape 7 : Sur le modèle des documents 2 et 3 p 62-63 :
a. trouver dans le code HTML du doc 3 une balise pour lier votre feuilledestyle.css à votre code html et le faire.
b. trouver le sélecteur pour modifier la propriété couleur de fond (background-color) de la page web en dodgerblue
c. trouver le sélecteur pour modifier la propriété couleur de fond de votre titre en vert (=green) d. trouver le sélecteur pour modifier la propriété couleur de fond de votre titre en burlywood e. trouver un sélecteur pour mettre la police des paragraphes en couleur brown, en gras (font-
weight: bold) et penché (font-style : oblique) avec en police d’écriture "Comic Sans MS", cursive, sans-serif" avec une taille de 20px (20pixels)
f. Avec la propriété text-align centrer vos titres , sous-titres et votre texte de paragraphe.
Etape 8 : Dans la feuille de style appliquer petit à petit et observer ce que fait chaque ligne de code : td{
border: 1px solid black;
padding: 20px 20px;
font-weight: bold;
}
table{
border-collapse: collapse;
}
tr:nth-child(even) { background: #EEE }
tr:nth-child(odd) { background: #BBB }
Q2 ) HyperText Markup Language, soit en français « langage de balisage hypertexte » Q3) CSS est le diminutif de Cascading StyleSheets, ou feuilles de styles en cascade.
N’utilisez jamais le HTML pour la mise en forme !
Si vous faussez le tout en déclarant par exemple des titres qui n’en sont pas, vous pervertissez le rôle du HTML et cela va impacter fortement la qualité de votre page web, sa validité et votre référencement global.
Q4) Balises de bases :
< !DOCTYPE html>
<html> et </html> ou </html>
<head> et </head> ou <head/>
<body> et </body> ou <body/>
Dans le bon enchaînement de balises:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
lieu de promenade/loisir explication
</body>
</html>
On constate que seul le texte de l’élément body apparait. Dans le body tout apparait à la suite.
Un “élément” est formé d’une paire de balises ouvrante et fermante ( ou d’une balise orpheline) et d'un contenu entre les balises
Q 5) Balises <h1> et <h2>
Bibiliographie : https://www.pierre-giraud.com/html-css/cours-complet/elements-balises-attributs-html.php
