KOMPOZER Qu est ce que le langage HTML? Qu est ce que Kompozer? Les écrans de Kompozer Créer une page Le corps Insérer du texte Insérer de l image Insérer des liens Insérer des ancres Insérer des tableaux Insérer des cadres Publier son site
0 Qu est ce que le langage HTML? HTML : HyperText Markup Langage Structure d un fichier HTML (d une page web) : <!-- DATE DE CREATION: 18/03/2004 --> <HTML> Commentaires <HEAD> <TITLE></TITLE> <META NAME="Description" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Author" CONTENT=«test"> <META NAME="Generator" CONTENT="WebExpert"> </HEAD> En-tête «méta données» Fichier <BODY> Bonjour! </BODY> </HTML> données Corps
0 Qu est ce que le langage HTML? Données intra-balises et de description générale <TABLE WIDTH=50% BORDER=1 ALIGN="CENTER" BGCOLOR="#00FF00" BORDERCOLOR="#808080"> <TR> <TD ALIGN="JUSTIFY" VALIGN="MIDDLE">DESS</TD> <TD ALIGN="JUSTIFY" VALIGN="MIDDLE">MONTAGNE</TD> </TR> <TR> <TD ALIGN="JUSTIFY" VALIGN="MIDDLE">OPTION</TD> <TD ALIGN="JUSTIFY" VALIGN="MIDDLE">WEB</TD> </TR> </TABLE> <BODY BGCOLOR="#808080" TEXT="#000080" LINK="#FF0000" VLINK="#00FF00" ALINK="#800000"> <FONT FACE="Dauphin" COLOR="#FFFFFF">Allo maman bobo</font> </BODY>
0 Qu est ce que le langage HTML? Le HTML n est pas un langage de programmation, c est un simple fichier texte contenant des balises de mise en forme. Balises simples : <BR> <P> Balises de mise en forme de texte ou d image : UNE BALISE DE MISE EN FORME OUVERTE <> DOIT TOUJOURS ETRE FERMEE </> <b>bravo</b> <i>bravo</i> <center><b>bravo</b></center> <TABLE> <HTML> Balises de structures imbriquées : <TR> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> </TABLE> <HEAD> </HEAD> <BODY> </BODY> </HTML>
1 Qu est ce que Kompozer? Logiciel de création de pages html (type Dreamweaver, Golive ) Outil WYSIWYG : what you see is what you get composition visuelle du résultat sans avoir à programmer directement sur les lignes de code Outil gratuit et Open source (anciennement NVU) complet pour la création et la gestion de sites Internet Téléchargement et liens utiles en français : http://www.frenchmozilla.fr/kompozer/
2 Les écrans de Kompozer Fenêtre de travail LANCER KOMPOZER Changement de mode de création
2 Les écrans de Kompozer 3 possibilités d affichage de la page sous Kompozer : Conception : visualisation de type navigateur Mixte : type navigation + code source de la zone de travail Source :UniquementlecodesourceHTMLdetoute la page Il est souvent pratique de vérifier certaines caractéristiques directement sur le code source
3 Créer une page Le corps On commence par gérer en amont les caractéristiques de base de la page : les couleurs de fonds, de texte : c est le corps (body) Menu FORMAT Couleurs et fonds de page On gère également les métadonnées qui seront inscrites dans les premières lignes de codes (et recherchées par les moteurs) : titre, auteur Menu FORMAT Titre et propriétés de la page
4 Insérer du texte Tout simplement écrire dans la fenêtre de travail Sélectionner le texte Lui donner des caractéristiques Menu FORMAT Pour tester des paragraphes : utiliser le faux texte «bolo bolo» (Lorem Ipsum) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
5 Insérer de l image Menu INSERTION Image Attention à bien vérifier l emplacement de l image : il faut structurer son site web avec des répertoires et des sous-répertoires propres qui seront transférés intégralement sur serveur Attention aux noms des images
6 Insérer des liens Menu INSERTION Lien Penser à spécifier la fenêtre et le cadre ATTENTION : Kompozer ne sait pas générer des pages de cadre, il faut le programmer avant
7 Insérer des ancres Une ancre permet de faire un lien à l intérieur d une page pour aller directement vers une position pointée Générer une page avec suffisamment de texte Commencer par créer l endroit ciblé dans le texte Menu INSERTION Ancre Puis sélectionner le mot qui pointera vers l ancre Menu INSERTION Lien Liste déroulante : #nom de l ancre Lien vers ancre Ancre
8 Insérer des tableaux 90% de la mise en page d une page Internet est réalisée sous forme de tableau. Il faut s habituer à structurer toute son information (texte, images ) sous forme de tableaux imbriqués et mis en page Menu INSERTION Tableau
9 Insérer des cadres Kompozer ne sait pas générer des cadres (frames), c est-à-dire des pages composées de plusieurs pages. Il faut le faire via un autre outil (traitement de texte par exemple) <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>exemple de frames</title> </head> <frameset rows="185,*" cols="*" framespacing="0" frameborder="no" border="0"> <frame src="bandeau.html" name="haut" scrolling="auto" noresize="noresize" id="topframe" title="topframe" /> <frameset rows="*" cols="204,*" framespacing="0" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="auto" noresize="noresize" id="leftframe" title="leftframe" /> <frame src="corps.html" name="corps" scrolling="auto" id="mainframe" title="mainframe" /> </frameset> </frameset> <noframes><body> </body> </noframes></html> Bandeau.html corps.html Voici un exemple de page HTML composée de 3 fichiers montés en cadre
10 Publier son site Plusieurs solutions pour publier son site : Générer directement sa page web sur un serveur d accueil gratuit (type Google site), dans le même principe que la gestion de blog Créer sa page personnelle chez soi et la transférer chez un hébergeur via des outils de type ftp (avec les abonnements Internet ou téléphone le prestataire propose souvent de l espace disque pour page Internet) Avoir son propre serveur Se faire connaitre : Acheter son propre nom de domaine Se déclarer aux moteurs de recherche Se faire des liens «amis»