Tice -Seconde-Page Web

Dimension: px

Commencer à balayer dès la page:

Download "Tice -Seconde-Page Web 2015-2016"

Matthieu Pruneau
il y a 8 ans
Total affichages :

1 Ouvrez une page web, cliquer doit sur la souris et faite afficher le code source de la page. Quelqu un a écrit ce code pour faire afficher cette page. Nous allons nous aussi écrire du code pour faire afficher une page web simple. Tout d abord il faut créer un dossier dans un lecteur du réseau qui contient vos documents : Aller dans poste de travail repérer le lecteur qui porte votre nom y créer un dossier : page web 1 dans lequel vous allez créer un dossier image. Les pages web sont lues par des navigateurs comme Firefox, chrome, safari, internet explorer etc. Comme vous le savez sans doute tout fichier possède une extension, par exemple un fichier photo.jpg est une image, les.avi sont des vidéos etc Les pages web ont pour extension.html On crée (à la main une page web avec le bloc note). Ouvrez le bloc note et écrire ce qui suit : Enregistrez ( enregistrer-sous) ce fichier dans ce le dossier page web 1 sous le nom : mapage.html Un fichier HTML est repéré par des balises. <html> ouverture de la page html <title> ouverture de la balise titre </title> fermeture de la balise titre <body>..ouverture de la balise body <p> ouverture d un paragraphe </p>. </body> </html> fermeture de la page html Veillez à sélectionner «tous les fichiers» et pas «fichier texte» Ouvrez ce fichier avec Firefox et observer le résultat

Tout d abord il faut créer un dossier dans un lecteur du réseau qui contient vos documents : Aller dans poste de travail repérer le lecteur qui porte votre nom y créer un dossier : page web 1 dans

2 Le titre de la page dans les balises <title>.</title> Le contenu du paragraphe dans les balises <body> </body> Fermez le tout et ouvrez le fichier mapage.html avec le bloc note ( ouvrir avec ) et avec Firefox. Votre fichier est donc ouvert deux fois ( avec le bloc note et avec firefox) Rajouter dans le bloc note entre les balises <body> </body> le paragraphe suivant : Les balises <p> et </p> marquent le début et la fin du paragraphe. <p> L Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C est un langage de balisage permettant d écrire de l hypertexte, d où son nom. </p> Enregistrer(fichier/enregistrer) et actualiser dans firefox avec la touche F5. A chaque fois que vous modifierez le bloc note ( fichier / enregistrer ) et actualiser avec F5 dans firefox Quelque soit la façon dont vous avez écrit ce texte, il apparaîtra sur une seule ligne. Pour pouvoir écrire sur plusieurs lignes il faut utiliser la balise : <br> Placez les balises <br> comme suit :

Votre fichier est donc ouvert deux fois ( avec le bloc note et avec firefox) Rajouter dans le bloc note entre les balises <body> </body> le paragraphe suivant : Les balises <p> et </p> marquent le

3 Enregistrer ----actualiser la page html Cette fois ci le texte est écrit comme on l a décidé!! Nous allons maintenant décrire un certain nombre de balises qui permettent de mettre en forme du texte : Un titre : Un titre est souvent un texte écrit en plus gros. On utilise les balises <h1>..</h1> ou bien <h2> </h2> cela va jusqu à h6.. Faire différents essais avec ce qui suit : h1, h2,.,h6 Enregistrer ---actualiser. Et si nous mettions ce titre en rouge avec la balise <font color= #FF2D0C>.</font> Comme cela :

est souvent un texte écrit en plus gros. On utilise les balises <h1>..</h1> ou bien <h2> </h2> cela va jusqu à h6.

Certaine balise comme la balise <br> n ont pas besoin d être fermée.

4 Enregistrer ---actualiser les couleurs sont en hexadécimal. Cherchez sur le web.. Remarque : les balises fonctionne comme les parenthèses en mathématiques. Certaine balise comme la balise <br> n ont pas besoin d être fermée. Pour les balises qui doivent être fermées il faut respecter l ordre. <h1><font color=##ff2d0c> </font></h1> correct : c est comme [ (..) ] <h1><font color=##ff2d0c> </h1> </font> incorrect : c est comme [ (..] ) Faites en sorte que l affichage soit :

5 Réussi???? On peut également décider de la position de ce titre : à droite, au centre ou à gauche avec l attribut de balise suivant : <h1 align=center>.</h1> <h1 align=left>.</h1> <h1 align=right>.</h1> Faites différents essais Cet attribut fonctionne également sur la balise paragraphe : <p align=center>. Il existe aussi un attribut pour la taille du texte : <font size=x>..</font> x allant de 1 à 7 Ces attributs sont cumulables : <p align=center> <font color=#ff44d0 size=5>ceci est un texte rose centré de taille 5</font></p> Rajouter cette ligne de code Couleur de fond Pour mettre une couleur de fond de page il faut utiliser l attribut bgcolor de la balise <body> Attention on ne crée pas une nouvelle balise <body> celle-ci existe déjà On rajoute dans la balise <body> l attribut : bgcolor=#ffff99 <body bgcolor= #FFFF99> faites le enregistrez---actualiser

.</font> x allant de 1 à 7 Ces attributs sont cumulables : <p align=center> <font color=#ff44d0 size=5>ceci est un texte rose centré de taille 5</font></p> Rajouter cette ligne de code Couleur de

6 Image de fond Pour mettre une image de fond il faut utiliser l attribut background de la balise <body> (même remarque : une seule balise <body>) On rajoute dans la balise <body> à la place de l attribut bgcolor ; l attribut background=image\ nomcompletdel image <body background=image\image_fond.png> Image_fond.png est une image de fond que vous aurez choisi sur le web (l enregistrer dans le dossier image prévu à cet effet. ( l extention (.png) pourrait être aussi (.jpg),(.jpeg) etc Texte en gras : On utilise la balise : <b> ceci est un texte en gras</b> Mettez cet exemple dans un nouveau paragraphe Texte en italique : On utilise la balise : <i> ceci est un texte en italique</i> Mettez cet exemple dans un nouveau paragraphe Tracer une ligne de séparation C est la balise <hr> qui permet de faire cela (elle n a pas besoin d être fermée) Testez là Cette balise possède quelques attributs.. <hr color=#3333ff size=4 > Vous pouvez également rajouter ceci <hr color=#3333ff size=4 width=50> Lien vers une page web : Dans un premier temps on rajoute dans la balise <body> un attribut de couleur des liens (en violet) <body background=image\image_fond.png link=#663366> Pour faire un lien vers une page web à partir d un mot : nous allons rajouter ce qui suit : <b><a href=" Lycée jean Moulin </a></b>

png est une image de fond que vous aurez choisi sur le web (l enregistrer dans le dossier image prévu à cet effet. ( l extention (.png) pourrait être aussi (.jpg),(.

7 Testez le lien. Insérer une image Pour insérer une image il faut que celle-ci soit enregistrée dans le dossier image du dossier page web 1 La balise correspondante est : <img src = image\nomdel image.jpg > Avec quelques attributs : width=x : largeur en pixel height=y : hauteur de y pixels. border=x : bordure de x pixels. alt="texte" : affiche ce texte lorsque l'image n'est pas affichable title="texte" affiche une infobulle ATTENTION : les images que vous voulez insérer dans votre page web doivent impérativement être enregistrées dans le dossier image que vous avez créé. Création d un tableau Voici le début d un code pour créer un tableau ( d un emploi du temps ) <table style="border-color: #ec1261; border-width: 2px; background-color: #e7de17; height: 10px;" border="2" cellspacing="2" cellpadding="5" width="10" align="center"> <tbody> <tr> <td>lundi</td> <td>mardi</td> <td>mercredi</td> <td>jeudi</td> <td>vendredi</td> </tr> <tr> <td>8h</td> </tr> </tbody> </table> Ce code est à comprendre puis à compléter, pour faire apparaître dans votre page web votre emploi du temps. Il faudra rajouter autant de <tr> <td>8h</td> </tr> Que nécessaire pour obtenir le résultat souhaité

alt="texte" : affiche ce texte lorsque l'image n'est pas affichable title="texte" affiche une infobulle ATTENTION : les images que vous voulez insérer dans votre page web doivent impérativement être

8 Travail à faire : Réaliser une page web qui vous présente. Votre nom, prénom, classe Votre photo ou un avatar (tux de préférence) Vos centres d intérêts Un lien vers un site web que vous aimez Vos projets d avenir Votre emploi du temps de la semaine (sous forme de tableau)

préférence) Vos centres d intérêts Un lien vers un site web que vous

Documents pareils

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...