Travaux Pratiques : le langage HTML

Dimension: px

Commencer à balayer dès la page:

Download "Travaux Pratiques : le langage HTML"

Bérengère Lachance
il y a 7 ans
Total affichages :

1 Travaux Pratiques : le langage HTML Objectif : Ce TP couvre l'écriture d'une page Web en langage html4, en utilisant des balises non décorées. Puis l'utilisation d'un éditeur html pour enrichir la présentation de la page. On étudiera ensuite le code html généré par cet éditeur et on changera la mise en forme réalisée. L objectif du TP est de prendre conscience de ce qu est l «hypertexte» et des balises sous-jacentes au code HTML généré par un outil comme Frontpage. Partie 1 : Ecriture d une page Web en langage HTML sans éditeur spécialisé Marche à suivre : Etape 1 : Ouvrir un éditeur de texte simple (le Bloc-notes sous Windows XP) : menu démarrer / onglet "Tous les programmes" / Accessoires / Bloc-notes Etape 2 : Ecrivez dans cet éditeur le squelette d une page html : <html> <head> <title> Placez ici le titre de votre page Web ( il sera affiché dans la barre de titre du navigateur) </title> </head> <body> Votre texte sera inséré ici. </body> </html> Etape 3 : Choisissez un sujet que vous connaissez bien et écrivez un petit essai sur ce sujet dans la partie BODY de la page Web. <BODY> CSS à quoi ça sert? Les feuilles de style en cascade (ou Cascading Style Sheets en anglais) servent à pouvoir automatiser la mise en page de nombreuses pages web sur un site. Le résultat est une maintenance plus facile du site en cas de modification de la mise en page, et une réalisation beaucoup plus rapide. Nous allons étudier en quoi les CSS sont efficaces et comment profiter de leur utilisation dans le cadre de la réalisation d'un petit site web. </BODY>

2 Etape 4 : Placer dans votre texte des balises de structure pour faire apparaître les titres, les listes, les paragraphes. Rappel sur les balises de structure : titres : <h1></h1> à <h6></h6> paragraphes : <p></p>, et retour à la ligne <br> listes : <ul></ul> pour la liste et <li></li> pour chaque élément <h1>css à quoi ça sert?</h1> <p>les feuilles de style en cascade (ou Cascading Style Sheets en anglais) servent à pouvoir automatiser la mise en page de nombreuses pages web sur un site. Le résultat est une maintenance plus facile du site en cas de modification de la mise en page, et une réalisation beaucoup plus rapide.</p> <p>nous allons étudier en quoi les CSS sont efficaces et comment profiter de leur utilisation dans le cadre de la réalisation d'un petit site web.</p> Etape 5 : Placer dans votre texte des balises sémantiques pour mettre en évidence les mots importants, utilisez l italique (mode emphase, balise em) et le gras (mode fort, balise strong). Rappel sur les balises sémantiques : emphase : <em> </em> renforcé : <strong> </strong> citation : <cite></cite> code informatique : <code></code> <h1>css à quoi ça sert?</h1> <p>les <strong>feuilles de style en cascade</strong> (ou <em>cascading Style</em> Sheets en anglais) servent à pouvoir automatiser la mise en page de nombreuses pages web sur un site. Le résultat est une maintenance plus facile du site en cas de modification de la mise en page, et une réalisation beaucoup plus rapide.</p> <p>nous allons étudier en quoi les CSS sont efficaces et comment profiter de leur utilisation dans le cadre de la réalisation d'un petit site web.</p> Etape 6 : Insérer un lien hypertexte (ou hyperlien) dans votre page web, vers une page externe à votre site (et en rapport avec le sujet de votre page). <a href=" W3C - World Wide Web Consortium</a> Etape 7 : Insérer une image sur votre page Web, image que vous serez allés chercher sur Internet (Utiliser Google search spécialisé pour les Images). <img src=" alt="image à afficher"> Exemple complet : une page Web sur les CSS <html> <head>

3 <title>c2i - HTML et CSS</title> </head> <body> <img src="cssom.png"><p>paragraphe d'introduction sans titre : <strong>l'objectif de cette page est de présenter l'intérêt des feuilles de style CSS</strong> (<a href=" <em>cascading Style Sheets</em> </a>) pour la conception de sites web.</p> <h1>css à quoi ça sert?</h1> <p>les <strong>feuilles de style en cascade</strong> (ou <em>cascading Style</em> Sheets en anglais) servent à pouvoir automatiser la mise en page de nombreuses pages web sur un site. Le résultat est une maintenance plus facile du site en cas de modification de la mise en page, et une réalisation beaucoup plus rapide.</p> <p>nous allons étudier en quoi les CSS sont efficaces et comment profiter de leur utilisation dans le cadre de la réalisation d'un petit site web.</p> <h1>travail à réaliser</h1> <p>dans ce paragraphe, nous présentons le <strong>travail à réaliser</strong> lors ce cette première approche des CSS.</p> <h2>description des exercices</h2> <ul> <li><strong>taper le texte de cette page sans mise en forme</strong> (à part tableaux, listes, titres, et balises sémantiques), le texte pourra être récupéré d'un fichier.</li> <li><strong>editer le texte brut</strong>, à l'aide d'un éditeur Web (Frontpage), de façon à obtenir un rendu similaire à celui de cette page (polices, couleurs, fonds...etc)</li> <li>reprendre le fichier de texte brut originel et utiliser le menu Format / Liens de feuille de style en <strong> définissant une feuille de style (css)</strong> pour la page web, utiliser le fichier <code>"feuille_style_bleu.css"</code></li> <li>faire la <strong>même opération</strong> avec la feuille de style : <code> "feuille_style_vert.css" </code></li> </ul> <h2>etude comparative</h2> <table> <tr> <td>méthode de réalisation</td> <td>facile</td> <td>réutilisable</td> </tr> <tr> <td>édition sous Frontpage</td> <td>oui</td> <td>non</td> </tr> <tr> <td>utilisation de CSS</td> <td>oui</td> <td>oui</td> </tr> </table> <h1>conclusion</h1> <p>les feuilles de style sont à privilégier pour la réalisation d'un site web, il en existe de nombreuses déjà utilisables sans avoir à être écrites, dans les logiciels de conception de sites web, ou bien disponibles sur Internet.</p> </body> </html>

4 Partie 2 : Editer cette page de base à l aide d un éditeur html spécialisé (Frontpage) Le but est de transformer la page Web de base qui vient d être écrite pour y intégrer de la couleur et des styles, notamment dans les titres. Marche à suivre : Etape 1 : Sauvegarder votre page Web précédente sous le nom mon_ancienne_page.html Etape 2 : Ouvrir la page Web précédemment réalisée à l aide d un éditeur html WYSIWYG (pour nous Frontpage sous Windows XP) : menu démarrer / onglet "Tous les programmes" / Microsoft Frontpage sous Frontpage, menu Fichier / Ouvrir, sélectionnez votre fichier Etape 3 : Sauvegarder votre page Web sous le nom ma_nouvelle_page.html Etape 4 : Editez cette page Web à l aide de Frontpage de façon à avoir un rendu approchant celui donné en exemple ci-dessous (couleurs, marge de gauche avec image, ). Vous êtes libres de choisir l image que vous voulez pour la marge de gauche, essayez de respecter les couleurs choisies (ton général bleu). Pensez à sauvegardez votre page (ma_nouvelle_page.html).

5 Etape 5 : Ouvrir la page finale que vous avez obtenue avec Frontpage mais cette fois à l aide du Bloc-notes. Lire le code html résultant et essayer de retrouver les balises que vous aviez placées «à la main» auparavant. Etape 6 : On souhaite maintenant modifier la page précédente de façon à avoir une page proche de celle donnée ci-dessous. A l aide de Frontpage, faire les modifications nécessaires dans le fichier ma_nouvelle_page.html pour lui donner cette nouvelle apparence, le sauvegarder sous ma_derniere_page.html. Choisissez une nouvelle image de fond pour la marge de gauche de votre dernière page. Conclusion : Pensez-vous que cette modification d une présentation (bleue) à l autre (verte) a été facile? Pensez-vous pouvoir réaliser facilement cette opération sur 500 pages Web? Les CSS ont comme un de leurs principaux objectifs de faciliter de telles modifications (parfois bien plus importantes) en automatisant l ensemble de la mise en forme des pages Web.

6 ANNEXE : Gestion des couleurs sous Frontpage Voici un exemple de la gestion des couleurs sous Frontpage, on va essayer de changer la couleur d une portion de texte. Une fois l élément choisi, ici le texte sélectionné à la souris, on va utiliser le menu de format pour changer les attributs de couleur de la police. On peut aussi, plus simplement, utiliser l outil de raccourci de colorisation du texte ci-dessous : On peut ensuite soit choisir une des couleurs prédéfinies, soit choisir sa couleur personnelle avec le choix Autres couleurs Si on fait ce choix, voici la fenêtre qui s ouvre : On a dans cette fenêtre un choix bien plus important de couleurs qui sera généralement suffisant. Si ce choix ne vous suffit encore pas, vous pourrez utiliser le bouton personnaliser pour définir entièrement votre couleur. Il est à noter que le code couleur html (RVB) apparaît en haut à droite de la fenêtre pour la couleur sélectionnée, ici Hex={66,99,FF}. Les valeurs de Rouge, Vert, et Bleu allant de 00 (minimum) à FF (maximum) : 00,01,02,03,04,05,06,07,08,09,0A,0B,0C,0D,0E,0F,.,9E,9F,A0,A1,,FE,FF. Dans ce code (appelé hexadécimal) on va de 0 (soit 00) à 255 (soit FF), ce qui permet de définir 256 valeurs pour chaque couleur primaire RVB.

Documents pareils

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations