Quelques bases de l'HTML - Licence 3 MIAGEverel/TEACHING/11-12/... · 2013-09-10 · HTML 4 Savoir écrire une page html minimale 5 Connaitre les di érents t yp es de do cument (DOCTYPE)

Quelques bases de l'HTMLLi en e 3 MIAGESébastien Verelverel�i3s.uni e.frwww.i3s.uni e.fr/∼verelUniversité de Ni e Sophia-Antipolis16 janvier 2011

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 enseignementBase de la réation de site web

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 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 HTML4 Savoir é rire une page html 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 ontenusPrin ipaux domaines de l'informatique


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"Sébastien Verel CSW

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éveloppementSébastien Verel CSW

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 Language1991 : HTML (Tim Bernes-Lee)1996 : CSS (Cas ading Style Sheets)1998 : XML2000 : XHTML (eXtensible HyperText Markup Language)2010 : HTML5 / CCS3


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 ?


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 pageSé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 HTMLmise 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" />Sé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 html 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 :<p>paragraphe</p> ou bien ? <p>paragraphe<p>


Introdu tionPremiers pas dans le langagePremiers ontenusLes 5 prin ipes de base1 toute balise ouvrante doit être fermée :<p>paragraphe</p> ou bien ? <p>paragraphe<p>2 les balises et les attributs doit être é rits en minus ule :<BR /> ou bien ? <br />


Introdu tionPremiers pas dans le langagePremiers ontenusLes 5 prin ipes de base1 toute balise ouvrante doit être fermée :<p>paragraphe</p> ou bien ? <p>paragraphe<p>2 les balises et les attributs doit être é rits en minus ule :<BR /> ou bien ? <br />3 les valeurs et les attributs doivent apparaitre entre apostrophes(quotes) ou guillements (double quotes) :<div id="valide"> pas bien </div><div id=nonvalide> bien </div>Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusLes 5 prin ipes de base1 toute balise ouvrante doit être fermée :<p>paragraphe</p> ou bien ? <p>paragraphe<p>2 les balises et les attributs doit être é rits en minus ule :<BR /> ou bien ? <br />3 les valeurs et les attributs doivent apparaitre entre apostrophes(quotes) ou guillements (double quotes) :<div id="valide"> pas bien </div><div id=nonvalide> bien </div>4 haque attribut doit avoir une valeur :<p id="debut"> je voulais te dire </p><p id> trop tard appelle demain</p>Sébastien Verel CSW

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

Introdu tionPremiers pas dans le langagePremiers ontenusPremière page (version HTML5)<!DOCTYPE html><html><head><meta harset="utf-8" /><title>Houaa super</tiltle></head><body> e i n'est pas rien.</body></html> Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusElement ra ine <html>Avant les do types étaient ompliqués, tant mieux pour vous et vosdes endants.La balise (non vide) <html> a deux �ls :

< head > : en-tête du do ument< body > : orps du do ument


Introdu tionPremiers pas dans le langagePremiers ontenusLes do typesXHTML 1.0 type transitional : pro he de l'html< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http ://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 type stri t : pro he de l'xml : sans balise en lienave la présentation< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri t//EN""http ://www.w3.org/TR/xhtml1/DTD/xhtml1-stri t.dtd">XHTML 1.0 type frameset : pour mettre des adres dans lespages (beurk)< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http ://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1 : très peu utliser< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >Sé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>Par exemple,<meta harset="utf-8" />Pour indiquer l'en odage du texte, les odes pour les ara tères"spé iaux" (iso-8859-1, OEM 775, et .).Sébastien Verel CSW

Introdu tionPremiers pas dans le langagePremiers ontenusCommentaireLes ommentaires sont indispensables pour omprendre votre ode ... plus tardTout le monde peut lire vos ommentaires ( her he ' odesour e de la page')


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 : paragrapheparagraphes<p>un petit paragraphe</p>


Introdu tionPremiers pas dans le langagePremiers ontenusStru turation du texte : odeblo k de ode<pre>int al ul(int i) {return i + 1;}</pre>


Introdu tionPremiers pas dans le langagePremiers ontenusStru turation du texte : itationCitation<blo kquote>un petit pour l'hommeun grand pas pour l'humanité</blo kquote>


Introdu tionPremiers pas dans le langagePremiers ontenusPassage à la ligneEt hop un saut de ligne<br />


Introdu tionPremiers pas dans le langagePremiers ontenusStru turation du texte : titres<h1>Super super super super important</h1><h2>Super important</h2><h3>Très important</h3><h4>important tout de m&e ir ;me</h4><h5>peu important omme tout le monde</h5><h6>important moi jamais</h6>

Documents

Quelques bases de l'HTML - Licence 3 MIAGEverel/TEACHING/11-12/... · 2013-09-10 · HTML 4 Savoir écrire une page html minimale 5 Connaitre les di érents t yp es de do cument (DOCTYPE)