Introduction à HTML Eugen Dedu UFC, IUT GTR, Montbéliard, 1ère année septembre 2005
2 HTML CSS PHP Publication Introduction - acronymes - ● WWW (World Wide Web, Web plus court) : réseaux d'ordinateurs s'échangant des pages HTML ● HTML (HyperText Markup Language) : “langage” dans lequel les pages sont écrites ● HTTP (HyperText Transfer Protocol) : le procotole (les règles) définissant l'échange entre : – le demandeur d'une page Web d'une certaine adresse (client) – et le fournisseur de la page (serveur)
3 HTML CSS PHP Publication Introduction - protocole HTTP - ● Le client (navigateur) demande la page avec une certaine adresse ● La machine (serveur) machine envoie : – le fichier fichier s'il existe – une erreur sinon – si fichier est un répertoire, envoi de index.html ● exemple : => comme si /index.html ● demander le répertoire, pas la page ! ● Choisir de préférence des minuscules pour les noms des fichiers HTML, avec l'extension.html
4 HTML CSS PHP Publication Introduction - hystorique - ● Auteur : Tim-Berners Lee, 1991 – chercheur à CERN, Genève – but : échanger des informations avec d'autres chercheurs ● Clients Web (navigateurs) : mosaic, netscape, internet explorer, mozilla, konqueror,... ● Serveurs Web : ncsa, apache, iis
5 HTML CSS PHP Publication Netographie ● - consortium WWW – - référence de HTML ● - développement et tutoriaux HTML, DHTML, ASP,... Très complet et pédagogique ● - PHP ● - quickref pour CSS1 et PHP4 ● Toute information sur HTML, en particulier HTML 4
6 HTML CSS PHP Publication Plan ● Structure d'une page HTML – balises ● CSS ● Pages HTML dynamiques – formulaires – PHP ● Publier son site sur Internet, moteurs de recherche
7 HTML CSS PHP Publication
8
9 Structure d'une page HTML - notion de balise (tag) - un hyperlien Balise (case insensitive) Texte Attribut de balise (case insensitive) Ne pas oublier de fermer toute balise !
10 HTML CSS PHP Publication Structure d'une page HTML - division - ● Version de HTML ● En-tête : HEAD – méta-informations – non affiché ● Contenu : BODY – contenu de la page – affiché ● Commentaires : – entre <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Page d'exemple Ma première page HTML. Squelette d'une page HTML (à copier-coller)
11 HTML CSS PHP Publication En-tête d'une page HTML - balises “obligatoires” - ● Codage du texte (Unicode UTF-8, ISO latin 1) – ● Titre – Ma page personnelle
12 HTML CSS PHP Publication En-tête d'une page HTML - balises optionnelles - ● Auteur – ● Description – ● Mots-clé – ● Rafraîchissement automatique – – mieux vaut utiliser les possibilités du serveur Web (ex. :.htaccess)
13 HTML CSS PHP Publication Balises, exemples - mise en forme - ● Gras, italique ● Paragraphe, (les deux sans fermer la balise), alignement ● Barre horizontale (horizontal rule) ● Polices : – couleurs, taille du texte – type de texte : pré-formaté... ● Infobulles : attribut TITLE ● La taille de la page Web dépend de la taille de la fenêtre du navigateur !
14 HTML CSS PHP Publication Balises, exemples - images, liens - ● Images – ● Image de fond – ● Liens (links), pour du texte ou une images – Texte ou image ● Ancres (anchors) – Le loup ● Chemin relatif (au répertoire courant) vs. chemin absolu (avec ou file://)
15 HTML CSS PHP Publication Balises, exemples - titres - ● Structure vs. visualisation ● Structure : headings, 6 niveaux – Titre de premier niveau – Titre de cinquième niveau ● Visualisation : – Titre de cinquième niveau
16 HTML CSS PHP Publication Balises, exemples - listes - ● Listes non numérotées (unordered lists) – – ligne1 – ligne2 – ● Listes numérotées (ordered lists) – (pareil)
17 HTML CSS PHP Publication Balises, exemples - tableaux - ●, ● Each table starts with an optional CAPTION followed by one or more TR elements defining table rows ● Each row has one or more cells defined by TH or TD elements ● Attributes for TABLE elements include WIDTH, BORDER, CELLSPACING and CELLPADDING
18 HTML CSS PHP Publication Balises, exemples - scripts - ● Java, dans le body : – Java applet which draws animated bubbles. ● javascript, flash,...
19 HTML CSS PHP Publication Cadres (frames) - but - ● Diviser la page en plusieurs sous-pages – on regarde une page ou plusieurs ?? => ne s'intègrent pas bien dans le langage HTML ● raison d'exister : fourni par Netscape au début du Web ● Exemples : – une sous-page avec le menu, toujours visible – une sous-page de contenu, suivant le menu – cliquer sur un lien sur une sous-page permet de remplacer une sous-page (ou toutes les pages)
20 HTML CSS PHP Publication Cadres (frames) - création -
21 HTML CSS PHP Publication CSS - fonctionnement - ● CSS = Cascade Style Sheet (“feuilles de style”) – version actuelle : CSS2 ● But : séparer l'information (contenu) de l'affichage (couleurs, police,...) – permet une cohérence de présentation dans tout le site – plus facile à maintenir ● Fichier.css : les règles de présentation d'une classe ● Fichiers HTML : utilisation des règles du fichier.css ● Si modification du.css, toutes les pages HTML voient instantanément la modification !
22 HTML CSS PHP Publication CSS - exemple - ● Fichier a.css : body {background-image: url(/images/logo.jpg); color: black} a:active {color: blue} p.commentaire {background:darkgreen} ● Dans le HEAD de chaque fichier HTML : ● Dans le BODY des fichiers HTML : – Un paragraphe avec comment ● Attribut class : la classe à laquelle l'élément appartient – peut être utilisé dans beaucoup d'éléments
23 HTML CSS PHP Publication CSS - fichier de styles - ● De nombreuses propriétés existent : – couleur – marges – police des caractères –... ● Ex. : marges des paragraphes : – h2 { margin-top: 8em; margin-bottom: 3em } ● Ex. : indentation en début de paragraphe : – p { text-indent: 2em; margin-top: 0; margin-bottom: 0 }
24 HTML CSS PHP Publication Pages HTML dynamiques - formulaires - ●..., formulaire : – ACTION, METHOD, ENCTYPE ●, champ d'entrée : – NAME, TYPE, VALUE, CHECKED, SIZE, MAXLENGTH ●..., liste de sélection : – NAME, MULTIPLE, SIZE ●, option dans une liste de sélection : – SELECTED ●..., zone d'édition : – NAME, ROWS, COLS
25 HTML CSS PHP Publication Pages HTML dynamiques - formulaires - ● – Nom – Accepté – ●
26 HTML CSS PHP Publication Pages HTML dynamiques - formulaires - ● La valeur des champs est rajouté à l'URL – result.php?nom=Beethoven&error=off – rajoutés après ? – les champs sont séparés par & – (la méthode POST fonctionne différemment) ● result.php affiche la page en fonction des paramètres avec lesquels elle est appelée – (voir plus tard pour la lecture des paramètres)
27 HTML CSS PHP Publication Pages HTML dynamiques - buts - ● Comment afficher l'heure courante sur une page Web ? ● Dynamicité : contenu HTML dynamique (texte, images, scripts), en fonction de : – date courante – navigateur – résolution écran –... ● Réutilisation de code HTML, de fichiers textes
28 HTML CSS PHP Publication Pages HTML dynamiques - utilitaires - ● PHP (Php's Hypertext Preprocessor), licence GPL ● ASP (Active Server Pages), commercial (Microsoft) ● Exécutés par le serveur ● Exemple pour php : – le navigateur demande une page php – le serveur reconnaît que ce n'est pas du html, mais du php ● nom du fichier :.php – il exécute le code php ● balise – il renvoie au navigateur le résultat
29 HTML CSS PHP Publication Pages HTML dynamiques - exemple PHP - Iteration 0 Iteration 1 Iteration 2 Iteration 3 En PHP En HTML
30 HTML CSS PHP Publication Pages HTML dynamiques - généralités PHP - ● Ressemble au langage C : – mettre ; après chaque instruction – variables : $a=10; $chaine=”hello world”; ● ne doivent pas être définies ● commencent toujours par $ – if (expr) {... } else {... } – while (expr) {... } – for (... ;... ;...) {...} – printf (ou echo) ● Mais beaucoup plus simple et adapté au Web
31 HTML CSS PHP Publication Pages HTML dynamiques - lecture des paramètres - ● Lecture d'une variable : $titi ● Lecture d'un paramétre de page : $_GET['titi']; ● Exemple : –...
32 HTML CSS PHP Publication Pages HTML dynamiques - erreurs courantes - ● Ne pas passer par le serveur pour les pages PHP ● FORM pas utilisé; c'est lui qui spécifie la destination
33 HTML CSS PHP Publication Publier son site sur Internet ● Lecture des fichiers locaux toujours possible, mais les autres internautes... ? ● Si machine connectée à Internet : – démarrer un serveur Web et mettre les fichiers dans le répertoire approprié ● Sinon : – fournisseurs d'accès à Internet : ● wanadoo ● AOL – transférer les fichiers sur la machine distante
34 HTML CSS PHP Publication Moteurs de recherche - introduction - ● Fonctionnement : – récupèrent (to crawl) des pages Web sur Internet – les stockent dans une base de données (gigantesque) – permettent de chercher des mots dans cette base ● Exemples : – –
35 HTML CSS PHP Publication Moteurs de recherche - utilisation - ● Classement des pages (page ranking) : – pertinence des mots cherchés dans la page (lieu, répétition) – nombre d'autres pages qui pointent vers elle – ( ● Enregitrer un site : – chercher sur le site le lien pour ajouter un site ● ( – inscrire l'adresse de la page principale (accueil) – attendre le crawler de balayer son site (quelques jours)