F r a n c k V i d a l C N R S C R É E R S A P A G E W E B A V E C K O M P O Z E R. KompoZer

Dimension: px

Commencer à balayer dès la page:

Download "F r a n c k V i d a l C N R S C R É E R S A P A G E W E B A V E C K O M P O Z E R. KompoZer"

André Delorme
il y a 7 ans
Total affichages :

1 KompoZer

Ordinateur de l ENIAC (Electronic Numerical Integrator And Computer) - 1948 F r a n c k V i d a l C N R S - 2 0 1 2 Avant?

2 Ordinateur de l ENIAC (Electronic Numerical Integrator And Computer) F r a n c k V i d a l C N R S Avant? 1948 : Premier ordinateur 1972 : ARPANET 40 machines militaires 1977 : THEORYNET 100 machines 1980 : ARPANET + CSNET = INTERNET 1988 : machines 1994 : Grand public 69 pays 2.2 millions machines 2007 : 2 milliards d utilisateurs

3 Web? WWW = World Wide Web

4 Kesako? SGBD MySQL HTML DHTML XHTML FLASH Site statique (BIPT) PHP JAVA Serveur Site dynamique (Google)

5 Kesako? n IP Internet Protocol Numéro de machine codé sur 32 bits Le réseau général La machine

6 Kesako? URL Uniform Resource Locator Format de nommage universel pour désigner une ressource sur Internet /geode Le protocole Le nom du serveur Le chemin

7 Se faire voir? En 24 heures nouveaux articles Wiki heures vidéos sur Youtube 400 millions de tweets 540 millions de SMS 552 millions connectés Facebook 4.5 milliards de recherches Google 145 milliards de mails échangés

8 Sous quelle forme? Page facebook Page web Compte twitter Blog Flickr - Panoramio

9 Se faire voir? 663 millions de sites actifs (mai 2012) + 5 % par mois Plusieurs dizaines de milliards de pages

10 Quels logiciels? Dreamweaver Golive KompoZer

11 Combien ça coûte? Exemple site prestataire privé 2 heures de rencontre Séance photo Création + hébergement + référencement + suivi 10 actualisations / an

12 Combien ça coûte? Exemple site personnel Logiciel création = 0 à 441 (Dreamweaver) Création + mise à jour = 0 Nom de domaine = 0 à 40 mois Hébergement = 0 à 47 par an

13 HTML? HTML : HyperText Markup Langage <!-- DATE DE CREATION: 18/03/ > <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

14 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> =

HTML? Html = 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

15 HTML? Html = 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> Balises de structures imbriquées : <TABLE> <TR> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> </TABLE> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

16 KOMPOZER? G r a t u i t O p e n s o u r c e C r é a t i o n s i t e s G e s t i o n s i t e s W Y S I W Y G

17 KOMPOZER? Nvu < 2005 Mozilla Composer < 2006 KompoZer 2010 BLUEGRIFFON > 2013 Meilleur mais non pédagogique!

18 Ecrans de base Fenêtre de travail Changement de mode de création

19 Ecrans de base CONCEPTION SOURCE MIXTE

20 Corps - Body MENU Format Couleurs et fonds de page

21 Propriétés - Métas MENU Format Titre et propriétés de la page

22 Corps et Propriétés

23 Insérer du texte MENU Format

24 Insérer de l image MENU Insertion Image

25 Insérer des liens MENU Insertion lien

26 Insérer des ancres MENU Insertion ancre MENU Insertion Lien liste déroulante : #nom Lien vers ancre Ancre

27 Insérer des tableaux PENSEZ LA MISE EN PAGE EN TABLEAUX!! MENU Insertion tableau

28 Insérer des frames bandeau.html + menu.html + corps.html = index.html <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>exemple de page à frames</title> </head> Exemple à télécharger sur BIPT / liens utiles <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>

29 Feuilles de style? Distinguer contenu (html) et contenant (css) Créer une nouvelle page sans caractéristiques Enregistrer

30 Créer feuille de style Outil Editeur CSS (ou icône ou F11) Nouvelle règle Créer la règle de style pour les différents niveaux

31 Appliquer feuille de style Sélectionner texte ou zone Fenêtre corps de texte Choisir un style

32 Feuilles de style

33 Exporter feuille de style 2 fichiers indépendant : Un fichier html Un fichier style (css) Editeur CSS Exporter la feuille Donner un nom Enregistrer h1 { font-family: A Yummy Apology; font-size: large; color: #000066; background-color: yellow;} h2 { font-family: Academy Engraved LET; fontsize: x-large; color: #ffcc00; background-color: #cc66cc;}

34 Lier feuille de style externe Créer page Editeur CSS Feuille liée Parcourir Créer la feuille de style Sélectionner texte

Documents pareils

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information