html, javascript, xhtml & css

Download HTML, Javascript, Xhtml & Css

Post on 06-Dec-2015

26 views

Category:

Documents

5 download

Embed Size (px)

DESCRIPTION

HTML, Javascript, Xhtml & Css

TRANSCRIPT

  • design graphique / web design

    // HTML, JavascriptXHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loc Swiny contact mr@sweeen.com

  • 2HTML, Javascript, XHTML & CSS

    // sommaire

    // page. 03// page. 06// page. 11// page. 15// page. 16// page. 24// page. 27// page. 32// page. 36// page. 40// page. 46

    // page. 47// page. 50// page. 54// page. 57// page. 58

    // page. 59

    // page. 64// page. 68// page. 72// page. 81// page. 82// page. 91// page. 92

    // page. 97

    HTML01. Introduction au langage HTML02. Introduction aux principes gnraux du webdesign et premire maquette03. HTML, les bases04. La balise 05. Texte / alignement, formatage, listes06. Liens07. Images & Map08. Tableaux09. Frames & I-Frames10. Formulaires11. Rcapitulatif des balises les plus courantes

    JAVASCRIPT13. Introduction au Javascript14. Menus dynamiques15. Popup16. Full screen17. Restriction daccs au contenu

    XHTML18. Introduction au XHTML

    CSS19. Introduction et principe de base20. Slecteurs21. Proprits22. Cascades et conflits dhritage23. Positionnement24. Feuille de style pour limpression25. Trucs & astuces

    LEXIQUE GENERAL

  • 3HTML, Javascript, XHTML & CSS

    01. Introduction au langage HTML

    I. HISTORIQUE

    II. QUI UTILISE LE HTML ?

    III. APPRENDRE LE HTML

  • 4HTML, Javascript, XHTML & CSS

    Le HTML ou HyperTexte Markup Language est le langage de publication utilis sur le World Wide Web.

    Trs facile matriser, il sagit tout simplement dun langage balises (tags" au format ASCII), dlimites entre crochets et affines dans leur formes par des attributs ; ces instructions places dans un simple fichier texte au format .html (ou .htm) sont ensuite interprtes par les diffrents navigateurs pour en faire apparaitre le contenu sur votre cran

    I. HISTORIQUE

    Cest Tim Berners-Lee qui a crit et dvelopp ce langage pour rpondre aux besoins du systme dchange dinformations quil venait dinventer : le World Wide Web.

    Pour expliciter physiquement ces changes entre machine, un protocole spcifique a t mis en place, cest le HTTP (Hyper Text Transfert Protocol) ; moyen simple et efficace daccder sur un rseau des documents lis entre eux par des hyperliens.

    Ecrits en HTML, les documents senchanent les uns les autres par un simple clic de souris et sont transports jusquau lecteur grce au protocole HTTP.

    Un leger point historique...

    1991 / HTML 1.0 Le language HTML voit le jour au au CERN (Centre dtudes et de recherches nuclaires) situ prs de Genve. Il y a peu de balises : on peut cependant insrer des images, crer des liens hypertextes, mais tout cela en noir, sur un fond gris, et sans interface graphique !

    1995 / HTML 2.0 Cette norme voit apparatre des possibilits de mise en page avec des tableaux.

    1996 / HTML 3.0 De nouvelles balises et de nouveaux attributs sont insres. Listes, Cartes cliquables, Frames...

    1998 / HTML 4.0 Outre de nouvelles commandes (I-Frames), un nouveau principe rvolutionnaire de mise en page sparant le fond et la forme est mis en place, ce sont les feuilles de style en cascade (css / cascading style sheet).

    2000 / XHTML Mise jour majeure du langage qui devient XHTML. Cest lavnement du Web 2.0.

    2010 / HTML 5.0 (?)La mise en place dune nouvelle standardisation du langage XHTML est prvue pour la nouvelle dcennie venir. Que nous rserve telle ?!

    II. QUI UTILISE LE HTML ?

    Avant darriver au stade de produit fini permettant la consultation par linternaute des informations quil contient, la vie dun site Internet se construit en suivant plusieurs tapes dont la construction HTML nest quun des jalons.

    Dans le process moderne de la construction dun produit de communication interactive, ce sont les intgrateurs, situs juste aprs les infographistes et juste avant les developpeurs (ingnieurs informaticiens responsables de limplmentation des fonctions dynamiques du produit) qui sont en charge de la construction des pages HTML.

    Ils y incluent textes, images, documents flash, sons et vidos en fonction des recommandations graphiques des studios cratifs et cest eux tout particulirement que lon demande une excellente connaissance du code.

    01. Introduction au HTML

  • 5HTML, Javascript, XHTML & CSS 01. Introduction au HTML

    III. APPRENDRE LE HTML

    Si vous navez jamais consult le code source dune page HTML, connectez-vous sur une page avec votre navigateur favori et consultez son fichier source" (Affichage/Source, ou Afficher la source" avec le clic droit de la souris lorsque le pointeur est sur la page).

    De par sa structure des plus lmentaire ainsi que par sa simplicit physique, apprendre le HTML pour integrer un ensemble de pages web et les rendre cohrentes entre elles ne ncessite aucune comptence en terme de langage de programmation.

    On peut crire du HTML avec un diteur de texte de base (Notepad, ou Simple Text), ou en utilisant un traitement de texte condition denregistrer le fichier au format texte seulement", avec lextension .html.

    On peut galement utiliser des diteurs interface dintgration accompagne de type Dreamweaver, mais il est toutefois recommand de bien connatre la base du langage pour les utiliser correctement afin den optimiser les flux de production.

    A larrive, la phase la plus dlicate de la construction dun produit de communication interactive ne rside pas dans son intgration mais plus dans la comprhension et lapplication des process et mthodes qui vont rendre sa cration plus fonctionnelle, fluide et efficace.

    Ce que nous allons voir ensemble...

  • 6HTML, Javascript, XHTML & CSS

    02. Introduction auw principes gnraux du webdesign & premire maquetteI. GENERALITES

    II. UN PEU DORDRE ET DE MTHODE

    III. LE CONTENU

    IV. LARCHITECTURE 1. Arborescence 2. Liens 3. Modularit

    V. LA FORME 1. Zoning 2. Format technique 3. Format visuel

  • 7HTML, Javascript, XHTML & CSS

    I. GENERALITES

    Avant de se lancer dans lhabillage graphique ou mme lintgration dun produit, il convient de rflchir sa finalit et den dfinir le contenu, larchitecture, et la forme gnrale...

    Pour ce faire des outils sont votre disposition : le brief cratif, le benchmark de referencement sectoriel, une bonne connaissance de la typologie, des contraintes dintgration et de larchitecture de linformation des sites internet (cf. Methodologie des metiers du design interactif).

    Ajoutez lensemble un gout prononc pour la culture design et ses publications, votre curiosit naturelle, une bibliothque de sources graphiques bien fournie (images bitmap & vectorielles, fontes, brosses photoshop...) et un peu de talent... mais noubliez jamais quau dbut tout commence toujours par une page blanche et un stylo pour esquisser vos premires recherches.

    II. UN PEU DORDRE ET DE MTHODE

    Avant mme denvisager toute activit productive, prenez le temps dadopter une logique de traitement et dordonnancement de vos dossiers de travail. Travailler avec une nomenclature de classification redondante vous permettra de gagner un temps prcieux lors du dveloppement de projets futurs.

    Bien quen la matire il nexiste aucune rgle pr-tablie, il vous est conseill dadopter la nomenclature suivante :

    # production# anne# n de dossier_nom du client # admin tous documents de travail fournis ou cres (brief, benchmark, charte graphique etc...) # logos docs .jpg basse dfinition en racine # eps docs illustrator # psd docs photoshop # maquette docs .jpg en racine # psd docs photoshop # print docs .jpg basse dfinition en racine # indd docs indesign # eps docs illustrator # pdf docs exports au format pr-print # psd docs photoshop # sources # images docs images (.jpg, .tiff, .png, etc...) # flash docs .fla et .swf # textes docs redactionnels (.txt, .doc, etc...) # web docs .html finaux # arborescence variable (cf. IV. larchitecture) Quitte optimiser votre process de developpement, vous pouvez mme crer un rpertoire _dossier type" contenant les dossiers pr-cres que vous naurez plus qua dupliquer er renommer la cration de tout nouveau projet

    02. Introduction au webdesign

  • 8HTML, Javascript, XHTML & CSS

    III. LE CONTENU

    La dfinition du contenu de tout produit de communication interactive est certainement un des points les plus important dgager en amont du projet. Cest sa dfinition exhaustive qui vous permettra de calibrer correctement le contenu de chaque rubrique et donc de le valoriser de faon la plus efficace possible.

    Il nest en effet rien de plus dsagrable consulter quune page au contenu mal calibr, soit parce que trop vide" soit parce que trop riche" en information. Une bonne dfinition des contenus donnera vos visiteurs lenvie de revenir sur votre produit, cest donc une phase de construction ne surtout pas ngliger.

    Matrisez le sujet abord : Mme si vous ntes pas familier du produit trait, prenez le temps de vous renseigner sur ce dernier, vous serez pr la suite plus laise lorsquil sagira darchitecturer linfo.

    Dgagez les principales rubriques : Soyez mme de proposer un rubriquage le plus cohrent possible par rapport au produit traiter ; ce faisant en devancant la demande du client vous eviterez lecueil dune arborescence mal quilibre.

    Prparez vos sources : Runissez et contrlez textes, paragraphes, orthographe, images, contenus interactifs... plus vous aurez une vision complte de la quantit de contenu integrer, plus votre produit sera cohrent et efficace.

    IV. LARCHITECTURE

    Sous peine de courir trs vite la catastrophe (dans le cas de produits la profondeur consquente et/ou volutive) et de perdre un temps prcieux lors de la phase dintgration, dgagez au plus tt larchitecture physique (arboresc