Activités HTML avec Ace HTML

(1)

Activités HTML avec Ace HTML act-html-ace

Activités HTML avec Ace HTML

Code: act-html-ace

Originaux

url: http://tecfa.unige.ch/guides/tie/html/act-html-ace/act-html-ace.html

url: http://tecfa.unige.ch/guides/tie/pdf/files/act-html-ace.pdf

Auteurs

• Vivian Synteta

• Version: 0.9 (modifié le 25/5/01)

Prérequis:

• Savoir utiliser un logiciel d’édition (éditeur de texte, Word, etc.)

• Internet et WWW de base

Module technique précédent: internet (à option) Module technique précédent: www-tech

(2)

Activités HTML avec Ace HTML - . act-html-ace-4

Modules techniques:

Module technique: html-intro

Module technique: html-forms (pour les exercices à la fin)

Module technique suppl.: act-html (mêmes exercices sans outil HTML)

Objectifs:

• Ce module présente brièvement le logiciel AceHTML:

url: http://freeware.acehtml.com/

• A la fin on propose une activité HTML complète

(3)

Activités HTML avec Ace HTML - 1. La barre d’outils de AceHTML act-html-ace-5

1. La barre d’outils de AceHTML

Les différents outils:

Ligne du haut:

• Menu classique d’une application Ligne du bas à gauche:

• exploitation classique d’un document (nouveau document, ouvrir, enregistrer, imprimer)

• prévisualisation dans le(s) browser(s)

• outils de vérification du code html Ligne du bas à droite:

• La plupart des balises possibles à ajouter classées dans des catégories

(4)

Activités HTML avec Ace HTML - 2. Ajouter des balises act-html-ace-6

2. Ajouter des balises

Les balises HTML sont classées dans 9 catégories (onglets):

• Balises de base (polices, titres, formattage, paragraphs, couleurs, etc.):

• Balises plus spécialisées (liens, images, body, etc.) :

• Balises pour les Tableaux, Frames, et Listes:

• Balises pour créer des formulaires:

• et plein d’autres pour CSS (feuille de style), Java applets, Javascript, etc.

(5)

Activités HTML avec Ace HTML - 3. Les outils les plus importants act-html-ace-7

3. Les outils les plus importants

Parmi tous les outils qui éxistent dans AceHTML on peut mettre l’accent sur les suivants:

• Les vérificateurs de code:

• Les outils pour gérer les fichiers:

• Les outils pour visualiser la page HTML:

(6)

Activités HTML avec Ace HTML - 4. Titres, séparateurs et paragraphes act-html-ace-8

4. Titres, séparateurs et paragraphes

Consignes:

Pour choisir le niveau du titre, pour insérer un séparateur ou pour créer un paragraphe, il faut cliquer sur les outils entourés ci-dessus. Résultat:

Code:

<h1>Titre de niveau 1</h1>

<hr>

<p>Nouveau paragraphe

(7)

Activités HTML avec Ace HTML - 5. Les Listes act-html-ace-9

5. Les Listes

Consignes:

Pour créer des listes à puces, numérotées ou des listes de définitions, il faut cliquer sur les outils entourés ci-dessus. Résultat:

Code: (pour une liste numérotée)

<ol>

<lh>Titre de la liste</lh>

<li>Elément 1</li>

<li>Elément 2</li>

...

</ol>

(8)

Activités HTML avec Ace HTML - 6. Les Liens act-html-ace-10

6. Les Liens

6.1 Liens externes

Comment faire?

1. Sélectionner le texte qui fera l’objet du lien 2. Cliquer sur l’outil de liens externes

3. Dans la fenêtre qui s’est ouverte, taper l’URL du site vers lequel vous voulez pointer puis fermer la fenêtre.

4. Le texte sélectionné apparaît en souligné

5. Vérifier que le lien marche en visualisant la page dans le browser

(9)

• Exemple:

(10)

6.2 Liens internes

Les liens internes sont couramment utilisés en haut d’une page lorsque le

document est relativement long (plus qu’un écran standard) afin de permettre au lecteur de prendre connaissance du contenu du document. Ces liens internes font ainsi office de table des matières.

Comment faire?

1. Sélectionner le texte qui fera l’objet du lien 2. Cliquer sur l’outil de liens internes

3. Dans la fenêtre qui s’est ouverte, taper le nom de ce nouveau lien et choissisez le mot ou la phrase vers laquelle il pointe puis fermer la fenêtre.

4. Le texte sélectionné apparaît en souligné et une ancre est crée sur le mot ou la phrase de destination

5. Vérifier que le lien marche en visualisant la page dans le browser

(11)

(12)

Activités HTML avec Ace HTML - 7. Activité HTML: créer un mini site pédagogique act-html-ace-14

7. Activité HTML: créer un mini site pédagogique

7.1 Consignes générales: organisation des fichiers

• Créer un répertoire "votre_nom" dans lequel vous allez mettre toutes les pages de votre site

• Créer un répertoire "images" (à l’intérieur du répertoire "votre_nom") dans lequel vous mettrez toutes les images se trouvant sur votre site (ex: icons de navigation)

• Le nom de vos pages ne doit contenir ni accent, ni espace, ni apostrophe et doit se terminer par .html ( ou .htm )

• Voir la structure des fichiers ci-dessous:

(13)

7.2 Etape par étape

• Créer une page d’accueil qui s’appellera welcome.html (ou welcome.htm) présentant votre site. Cette page comportera:

• un mode de navigation permettant d’accéder aux autres pages du site

• une brève description du contenu du site

• un moyen de contacter le webmaster

• Créer une page présentant la raison d’être du site, ses objectifs, etc.

• Créer une page "ressources" qui comportera :

• des références bibliographiques éventuelles

• des liens vers des sites de référence en la matière

• Exemple: sample.html

• Créer une page "communication" qui comportera les éléments suivants (ou faites une maquette si vous n’avez pas de référence concrète) :

• un forum de discussion

• d’autres outils de communication de votre choix

• Créer d’autres pages. Par exemple, si le site est un site de support à un cours

présentiel, il peut y avoir une page avec le programme du cours, une page avec les nom et e-mail des participants, une page avec les exercices, etc.

(14)

7.3 Organiser la navigation

• Depuis chaque page de votre site, il devra être possible de retourner à la page d’accueil. Eventuellement, d’accéder à n’importe quelle page du site (barre de navigation de style tableau).

7.4 Maquette

welcome.html

admin.html communication.html ressources.html

images

A C R

H A C R

H A C R H A C R H A C R

Home