Création de site internet

Pages: 13 (3241 mots) Publié le: 1 mars 2011
langage HTML et CSS

Exercice 1. pour comprendre le html et le css : création d'une page web avec notepad++ 2

préparation et création de la page index.htm 2
insertion d'une image 4
lien hypertexte 5
utilisation d'une feuille de style 5

Exercice 2. exercice d'entraînement.(charlotte aux fraises) 6

Exercice 3. installation du logiciel kompozer sur une clé usb. 6téléchargement des fichiers 6
installation 7
traduction française 8

Exercice 4. Utilisation du logiciel d'édition kompozer. 9

Exercice 5. utilisation de dreamweaver (paris-brest) 10

préparation 10
modes d'édition 12
modifiez une propriété de balise 13
modifiez la feuille de style 14
traitement rapide d'une image avec un éditeur en ligne 15
copier/coller avec nettoyage duformat 18
liste à puce de type "image" et style css 18
style ID 21
classes de style 23
outil de palette de couleurs 24

Exercice 6. création et utilisation d'une feuille de style avec kompozer.(musee.css) 27

préparation 28
tableau 28
textes 29
styles 30
export de la feuille de style 31
style table.colonne 32
style td#cellule_titre 32
style td#contenu 33menu et liens hypertextes 34
style pour les liens hypertextes 34
image 35
duplication de la page index.html 36
changement de style d'un lien hypertexte au survos de la souris 37

Exercice 7. création et utilisation d'une feuille de style avec dreamweaver.(musee.css) 37

html et css 38
duplication de page et menu 39

Exercice 8. analyse et utilisation d'une feuille de style cssexistante.(r_tutorial) 40

préparation 40
utiliser un style de page : padding et margin 43
réutilisation d'une classe de style 46
passage en largeur fixe 47

Exercice 9. exercice d'entraînement (morvan) avec dreamweaver ou kompozer 48

préparation 49
Première page : positionnement, feuille de style. 49
feuille de style 49
formatage du titre et classe de style. 50création de plusieurs plage liées 50

remarque générale :
Travaillez de préférence sur votre clé USB. Sinon créez un dossier à votre nom (nom + prénom) dans le dossier de votre session.
Créez un dossier pour chaque exercice : c'est essentiel car parfois les fichiers portent le même nom pour des exercices différents (index.html).

1. pour comprendre le html et le css : création d'unepage web avec notepad++

Un fichier html n'est rien d'autre qu'un fichier texte (ascii) contenant : du texte à afficher, des indications sur la mise en forme (balises), des indications sur les images à insérer, etc.
L'extension html ou htm du fichier indique au système d'exploitation (ex : windows, linux) qu'il faut ouvrir le fichier avec un navigateur web (Mozilla Firefox, Internet Explorer) etnon avec un simple éditeur de texte.
préparation et création de la page index.htm

Créez un dossier de nom "paris_brest". Dans ce dossier créez un fichier texte de nom "index.htm" et ouvrez-le avec notepad++.
copiez-collez dans index.htm le texte suivant :

à propos du Paris-Brest

Copiez sur wikipedia le texte d'explication sur le paris-brest (la pâtisserie).

[pic]

et collez-le dansindex.htm dans la section Body.

[pic]

Enregistrez index.htm et ouvrez-le avec Firefox pour vérifier.

[pic]

Ajoutez un paragraphe "Paris-Brest" au format "Titre 1" en l'encadrant des balises et

[pic]

Enregistrez et testez dans Firefox en réactualisant la page (bouton [pic] ou raccourci F5)

[pic]

Pour centrer le titre ajoutez la propriété align="center" dans la balise[pic]

Vérifiez dans Firefox :

[pic]

insertion d'une image

Récupérez sur internet l'image de Paris-Brest ci-dessous et enregistrez-la dans le dossier "Paris_Brest" sous le nom "paris-brest" (nom complet : paris-brest.jpg)

[pic]

Retournez à Notepad++ et insérez une ligne pour faire apparaître l'image :

Le Paris-Brest

Vérifiez dans firefox :

[pic]

lien hypertexte...
Lire le document complet

Veuillez vous inscrire pour avoir accès au document.

Vous pouvez également trouver ces documents utiles

  • La création d'un site internet
  • Environnement juridique de création d'un site internet
  • Site internet
  • Creation-site
  • Analyse sémiotique de site internet
  • Web experience site internet
  • Projet de site internet
  • Cahier des charges site internet

Devenez membre d'Etudier

Inscrivez-vous
c'est gratuit !