[PDF] Création de pages Web Dynamiques - Luc Brun

HTTP 1 0 CGI python CSS JavaScript HTML Création de pages Web Dynamiques – p 2/75 ments affichés), multiple (sélection de plusieurs éléments)

[PDF] Comment enregistrer des pages Web (pages html) ?

22 mar 2005 · pages Web (pages html) ? - Ressources numériques - Foires aux questions - FAQ - Ecrits numériques - Date de mise en ligne : mardi 22 mars 

[PDF] Un éditeur de pages Web - Chingatome

N'apportant aucun formatage, il est l'outil préféré des feuilles de styles pour apporter à plusieurs lignes et/ou à plusieurs éléments HTML le même formatage; il est 

[PDF] Créer des pages « Web » - Euler

Le dynamisme des pages et le fait que le langage HTML sert de cible à la La page précédente sera soumise à plusieurs mises en forme grâce à des feuilles 

[PDF] Créer des pages « Web » - mediaeduscoleducationfr - Ministère

Le dynamisme des pages et le fait que le langage HTML sert de cible à la La page précédente sera soumise à plusieurs mises en forme grâce à des feuilles 

[PDF] Chapitre 12 Créer des pages Web - The Document Foundation Wiki

16 avr 2018 · Enregistrer vos documents comme fichiers HTML utiliser l'Assistant Web pour créer plusieurs types de pages web standards à partir de

[PDF] Tutoriel - Page personnelle

Pour cela nous allons d'abord voir les bases du code HTML et CSS Pour coder dans en modifiant un seul fichier, de modifier le style sur l'ensemble des pages Lucile Laulin 3 La balise div permet d'avoir plusieurs éléments dans une

[PDF] Créer des pages web avec OOo

7 mar 2004 · 2 Créer ses pages web : méthode 6 D'autres méthodes de création de pages html En créer plusieurs, si nécessaire (pas trop )

[PDF] Publisher et la production Html

Iufm Reims – Jacques Bresson – Création Html avec Publisher page 1/3 demander une composition professionnelle, sur plusieurs pages avec arrière plan

[PDF] Apprendre le langage Html - lehtmlcom

Le langage Html étant un ensemble de balises et d'attributs, il nous paraît utile La syntaxe de ces liens entre plusieurs pages, est simple mais entraînera de 

[PDF] changer la couleur d'une seule page word 2013

[PDF] couleur fond de page word 2010

[PDF] exercice verbe être au présent ? imprimer

[PDF] cycle de vie du papillon maternelle

[PDF] cycle de vie du papillon ce2

[PDF] de la chenille au papillon cycle 3

[PDF] métamorphose chenille papillon cycle 2

[PDF] cycle de vie du papillon ce1

[PDF] le cycle de vie du papillon

[PDF] de la chenille au papillon maternelle

[PDF] hygiène et sécurité au laboratoire d'analyses médicales

[PDF] manuel qualité laboratoire 15189

[PDF] ovide les amours pdf

[PDF] les 16 metamorphoses d ovides pdf

[PDF] resume des 16 metamorphoses

Tutoriel

Cr

´eer et mettre en forme sa page personnelle

Lucile Laulin

2018

Table des mati

`eres

1Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2Base du code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2.1 Le code HTML

2

2.2 Le code CSS

3

3Comprendre et utiliser le HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3.1 Structure

4

3.2 Le texte

5

3.3 Liens

5

3.3.1 Liens usuels

5

3.3.2 Un autre type de liens

6

3.4 Listes

6 3.5 ´El´ements de code suppl´ementaires.. . . . . . . . . . . . . . . . . . . . . . . . 7

4Comprendre et utiliser le CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

4.1 Fonctionnement

8

4.1.1 Structure

8 4.1.2 ´El´ements modifiables.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

4.2 Positionnement

9

4.2.1 Marges et espacement

9

4.2.2 Autres techniques

10

4.3 Style du texte

10

4.3.1 Cas g

´en´eral. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

4.3.2 Cas des liens

11

4.4 Style des boˆıtes

11

4.5 Images et arri

`ere plan. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4.6 Le menu de navigation

12

5Un exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

5.1 Mise en place

14

5.2 Le contenu

15

5.3 La mise en forme

16

5.4 Conclusion

19

2 Base du code Tutoriel - Cr

´eer et mettre en forme sa page personnelle

1

Intr oduction

Ce tutoriel a pour objectif de vous aider `a cr´eer une page personnelle originale. L"id´ee est

de voir comment passer de la figure 1 `a quelque chose d"un peu plus complet comme la figure 2 et enfin `a une mise en forme comme la figure 3 si vous le souhaitez.Figure 1

Figure 2

Figure 3

Pour cela nous allons d"abord voir les bases du codeHTMLetCSS. Pour coder dans ces deux langages il existe plusieurs possibilit´es : Utiliser un ´ editeurde texte, comme p arexemple Sublime Text 3. Cela permet de coder simplement, l"´editeur connaˆıt beaucoup de langages et mettra les mots cl´es en valeur. Pour l"aper¸cu vous n"aurez plus qu"`a ouvrir vos fichiers.htmldans votre navigateur internet pr´ef´er´e. Utiliser un logicie l"tout en un" comme BlueGriffon. C"est un logiciel de cr´eation de pages web dans lequel on a directement un aper¸cu de ce qu"on fait. On peut utiliser alternativement l"outil de code ou bien les ´el´ements propos´es par le logiciel. On modifie alors `a la fois le contenu et l"apparence. Personnellement j"ai commenc´e avec BlueGriffon pour me familiariser avec les langages, mais je l"ai vite trouv´e limit´e si l"on fait de la mise en forme un peu pouss´ee. 2

Base du code

2.1

Le code HTML

LeHTML, pourHyperText Markup Languageest un langage permettant de d´efinir les diff´erents ´el´ements d"une "page" qu"on observe avec un navigateur internet : les titres, le menu de navigation, les liens... C"est avec ce langage que l"on donne du contenu `a une page web.

Code pour la figure 1

Voicile titre de ma page !

Bonjouret bienvenue sur ma page .

Lucile Laulin 2 © 2018

2 Base du code Tutoriel - Cr

´eer et mettre en forme sa page personnelle

Les ´el´ements entres"appelent des balises : ce sont elles qui disent au navigateur ce qu"il doit faire (nous verrons ensuite que l"on peut lui dire comment effectuer l"action). Par exemple ici

...

correspond au titre de la page et

...

au contenu d"un paragraphe. Nous verrons cela plus en d´etails dans la partie 3. Il faut savoir que malgr´e ce que vous pourrez donner comme indication de code, l"affichage peut diff´erer d"un navigateur `a l"autre ! 2.2

Le code CSS

LeCSS, pourCascading Style Sheetsest un langage utilis´e pour mettre en forme une page web. En bref, c"est ce qui va rendre votre page web plus "jolie", ce qui sert `a la mettre en forme. Il y a trois mani`eres d"ajouter du style `a votre page : en a joutantle co dedans v osbalises HTML`a l"aide destyle="...", en a joutantau d ´ebutde v otrefic hier.htmldes balises, en cr ´eantun fic hier.css`a part et en l"appelant dans votre fichier.html.

Style dans la balise paragraphe

Voicile titre de ma page !

Ce paragraphe est style

La technique ci-dessus va modifier le paragraphe en cours, mais pas les suivants. Avec les

deux techniques suivantes la modification de style s"appliquera `a tous les ´el´ements de la cat´egorie. On utilisera plutˆot l"une ou l"autre des techniques selon la situation. Ainsi on choisira la deuxi`eme si on a peu de style `a modifier, et la troisi`eme sinon. Style en d´ebut de codep{ background color blue border :2 px solid black color white font size :1.3 em padding :0.5 em

Ce paragraphe est style !

Avec la seconde technique, si l"on veut modifier la mise en forme sur toutes les pages, il

faudrait modifier l"en-tˆete