Quelques bases de l'XHTML Création Site Web - Licence 2...

Quelques bases de l'XHTMLCréation Site WebLi en e 2 MASSSébastien Verelverel�i3s.uni e.frwww.i3s.uni e.fr/∼verelÉquipe S oBi - Université de Ni e Sophia-Antipolis17,19 septembre 2009

Introdu tionPremiers pas dans le langagePremiers ontenusPrésentationMaître de onféren es depuis septembre 2006.Re her he :Con eption et étude d'algorithmes d'optimisation inspirés de labiologie (I3S, Sophia-Antipolis),Modélisation de systèmes ognitifs (LUTIN)Enseignement :Algorithmique, systèmes omplexes, web, et .pour tous les niveauxSébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusPrésentationConta t : pour tout e qui on erne l'enseignement ( orre tions,absen es, demande d'expli ation, ompléments, orientation, ...)verel�i3s.uni e.frwww.i3s.uni e.fr/~verel : page web de l'enseignementbureau petit Valrose 426tel. 04.94.92.07.69.83

Sébastien Verel CSW

www.i3s.unice.fr/~verel

Introdu tionPremiers pas dans le langagePremiers ontenusBut de et enseignementCréation Site Web (CSW)

Comprendre les prin ipes de la programmation webCréer une page webSébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusInformation sur l'enseignementbut, obje tifs, et . f : www.i3s.uni e.fr/~verel


www.i3s.unice.fr/~verel

Introdu tionPremiers pas dans le langagePremiers ontenusHoraires10 séan es de TD sur ma hine :mer redi de 17h15 à 19h15, PV 310vendredi de 10h15 à 12h15, PV 310Alternan e des groupes : 1 semaine sur 2 ours le mer redi


Introdu tionPremiers pas dans le langagePremiers ontenusEvaluationDS : Vendredi 31 o tobre 08, 10h15-12h15, Salle PV310(Obligatoire pour tous)Projet P : à rendre pour la semaine du 1 au 5 dé embre 08(Obligatoire pour tous)Note �nale = 0.5 DS + 0.5 PSébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusObje tifs de la séan e 11 Connaitre les dates importantes de la programmation web2 Connaitre les prin ipes de l'internet3 Connaitre les prin ipes fondamentaux du langage XHTML4 Savoir é rire une page xhtml minimale5 Connaitre les di�érents types de do ument (DOCTYPE)6 Savoir é rire un paragraphe7 Savoir é rire une itation et une adresse8 Savoir é rire un titre9 Connaitre les ara tères a entués et les ara tères spé iaux10 Savoir passer une ligneSébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusPlan1 Introdu tion2 Premiers pas dans le langage3 Premiers ontenus


Introdu tionPremiers pas dans le langagePremiers ontenusDé�nition d'OrdinateurEn 1955, "ordinateur" : tradu tion J. Perret de " ele troni datapro essing ma hine " ( ma hine éle tronique de traitement desdonnées ).−→ e que beau oups de langues nomme � al ulateur� ( omputer)Dé�nition A adémie française de 1967Une ma hine automatique qui permet d'e�e tuer, dans le adre deprogrammes de stru ture pré-établis, des ensembles d'opérationsarithmétiques et logiques à des �ns s ienti�ques, administratives ou omptables. Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusDé�nition informatiqueEn 1962, Philippe Dreyfus employa le mot informatique pour dé�nirle traitement automatique de l'information.Maintenant e mot est employé dans beau oup de langues (horsanglaise)−→ Informatique : omposé des 2 mots information etautomatique.Dé�nition A adémie fran aise de 1967 (o� ialisation)S ien e du traitement rationnel, notamment à l'aide de ma hinesautomatiques, de l'information, onsidérée omme le support de onnaissan es dans les domaines s ienti�que, é onomique et so ial.Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenus? ? ? (né vers 780 - mort vers 850)Algorithme : vient du nom du mathémati ien perse du IXième siè leA Musa Abdullah Abu ibn al-Khwarizmi MuhammadB Abu Abdullah Muhammad ibn Musa al-KhwarizmiC Abu Muhammad Abdullah Musa ibn al-KhwarizmiD al-Khwarizmi ibn Abdullah Abu Muhammad MusaRéponse : B


Introdu tionPremiers pas dans le langagePremiers ontenusPrin ipaux domaines de l'informatiqueLe al ul : faire des al uls et des prédi tions de plus en plusautomatique et rapide.De nos jours, on parle de "Computational biology" ou de"Computational s ien e"Le traitement de données : organiser, sto ker, exploiter lesdonnéesse teur en plein développementLa ommuni ation : web, et .ré ent dans l'informatiqueSébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusPrin ipe d'internetPrin ipe d'internetLe réseau internet met en onta t les utilisateurs par le biais de leurmatériel informatique respe tif.(rappel) net : �let, réseau


Introdu tionPremiers pas dans le langagePremiers ontenusQuelques dates1969 : 4 premiers ordinateurs relié par ARPA (Advan edResear h Proje ts Agen y) : ARPANET1973 : mise en pla e du proto ole TCP/IP≈ 1983 : naissan e du réseau de réseaux : internet


Introdu tionPremiers pas dans le langagePremiers ontenusLe webPrin ipe du webSystème hypertexte publi fon tionnant sur Internet et qui permetde onsulter, ave un navigateur, des pages mises en ligne dans dessites. image de la toile : hyperlien entre les pages web(rappel) web : toile Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusLes dernières dates du jour1986 : SGML, Standart Generalized Markup Language1992 : HTML (Tim Bernes-Lee)1996 : CSS (Cas ading Style Sheets)1998 : XML2000 : XHTML (eXtensible HyperText Markup Language)


Introdu tionPremiers pas dans le langagePremiers ontenusCe oursLe ontenu de e ours est hyper balisé !Dé ouverte des obje tifs de haque séan e par tutoriel


Introdu tionPremiers pas dans le langagePremiers ontenusWebographiehttp ://www.netgerdesign. om/webmastering/webmastering.phphttp ://www.siteduzero. om/tutoriel-3-13666-apprenez-a- reer-votre-site-web.htmlhttp ://fr.selfhtml.orghttp ://www.i3s.uni e.fr/ verel/TEACHING/08-09/progWeb-L3/index.htmltoutes les référen es du W3Chttp ://d abasson.developpez. om/zen garden : di�érents styles ssSébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusBibliographieXHTML et CSS : ours et exer i es Engels, Jean - Eyrolles,DL 2006,HTML, XHTML, CSS, Kevin Turjmann, Po he mi ro,Eyrolles, 2008,HTML : [XHTML-CSS-S ripts℄ Lemainque, Fabri e - Mi roAppli ation, DL 2008,Programmation HTML et JavaS ript Chaléat, Philippe -Eyrolles, DL 2000,Débuter en JavaS ript Powers, Shelley - Eyrolles, DL 2007,Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusComment faire ?Le but est de réer des do uments textes, omment faire ?Prin ipe FONDAMENTALSéparation du ontenu et de la mise en page ontenu : langage XHTMLmise en page : langage CSSSébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusComment dé rire le ontenu ?Dé ouper et stru turer le texte en élémentsChaque élément est délimité par des balises :<nomElement> ontenu </nomElement>ou<nomElement attribut1="valeur1" attribut2="valeur2"attribut3="valeur3"> ontenu </nomElement>ou<nomElementVide attribut1="valeur1" />la stru turation né essite dé�nir le type de do ument (unegrammaire) à interpréterDTD : Do ument De�nition Type (à mettre dans l'ordre)remarques :La mise en forme peut alors être faite ave le CSSUn do ument xhtml est un arbreSébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusLes 5 prin ipes de base1 toute balise ouvrante doit être fermée :paragraphe ou bien ? paragraphe2 les balises et les attributs doit être é rits en minus ule : ou bien ? 3 les valeurs et les attributs doivent apparaitre entre apostrophes(quotes) ou guillements (double quotes) : pas bien bien 4 haque attribut doit avoir une valeur : je voulais te dire trop tard appelle demain5 les éléments doivent être orre tement imbriqués : arrete ton har Ben-Hur arrete ton har Ben-Hur Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusPremière page version "xml"<?xml version="1.0" en oding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri t//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-stri t.dtd"><html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head><title> houa super </tiltle></head><body> omment rien ?</body></html> Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusPremière page version non "xml"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri t//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-stri t.dtd"><html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head><title> houa super </tiltle><meta http-equiv="Content-type" ontent="text/html; harset=iso-8859-1" /></head><body> ommetn rien ?</body></html> Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusElement ra ine <html>3 trois attributs fa ultatifs :xml :lang : indique la langue utilisée par la page (utile pour leréféren ement)dir : dire tion de le ture ltr ou rtlxmlns : url de l'espa e de nomla balise (non vide) <html> a deux �ls :< head > : en-tête du do ument< body > : orps du do umentSébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusEn-tête du do ument ontient informations utiles à l'a� hage :<base>, <link>, <meta>, <s ript>, <style> et <title>

Introdu tionPremiers pas dans le langagePremiers ontenusCara tères spé iaux et a ents&♯ASCII ;Vous trouverez fa ilement la liste sur le web.Les a ents : & la ent ;où : l : une lettrea ent : un a ent : a ute, grave, ir , uml, edil, elig.Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusStru turation du texte : itation et adresseCitation :<blo kquote>un petit pour l'hommeun grand pas pour l'humanité</blo kquote>adresse de onta t :<adress><a href="mailto:verel�i3s.uni e.fr">enseignant</a></adress> Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusStru turation du texte : paragraphe et odeparagraphes :un petit paragrapheblo k de ode :<pre>void al ul(int i) {}</pre> Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusStru turation du texte : titre et passage à la ligneniveaux de titre :<h1> jusqu'à <h6>passage de ligne :

Quelques bases de l'XHTML Création Site Web - Licence 2...

Documents

Transcript of Quelques bases de l'XHTML Création Site Web - Licence 2...