Web Statique Base de la création de sites web

Web Statique Base de la création de sites web Lilian BAZILLE Version 1.0 Février 2015

Table des matières WEB 01 Introduction... 2 1 - Outils du développeur... 2 1.1 - Environnement de travail... 2 1.2 - Editeur... 3 1.3 - Navigateur... 4 2 - HTML : le contenu... 4 2.1 - Structure de base... 4 2.2 - Utilisation des balises... 4 2.3 - Tags... 5 2.4 - Commentaires... 5 2.5 - Balise courantes... 5 2.5.1 - Balise <p>... 5 2.5.2 - Balises de titre... 6 2.5.3 - Balise de mise en forme du texte... 6 2.5.4 - Listes... 7 2.5.5 - Les liens hypertexte... 7 2.5.6 - Les images... 8 2.5.7 - Les tableaux... 8 2.5.8 Balises sémantiques... 9 2.5.9 - Formulaires... 9 Lilian BAZILLE 1 / 10

Introduction WEB 01 Avant de commencer à créer un site web, il faut bien évidemment savoir comment fonctionne le web! Une page web est un (ou plusieurs) fichier(s) interprété(s) par un navigateur web (comme Internet Explorer, Mozilla Firefox...). Il permet de «traduire» le langage de programmation (HTML, PHP, CSS ) pour créer un rendu visuel qui s affiche à l écran de l utilisateur. Ce cours traitera des langages HTML (contenu) et CSS (mise en forme) uniquement. Nous n utiliserons pas de langage dynamique (tel que PHP, Javascript, ASP ) ou de CMS (tel que WordPress, PHPBB, etc.) 1 - Outils du développeur 1.1 - Environnement de travail Avant de commencer à travailler sur des pages web, il est très important de créer un nouveau répertoire, et de placer tout le contenu du site web à l intérieur. C est très important car tous les liens que vous ferez partiront du même dossier que la page courante (ou de la racine dans le cas d un chemin absolu, si le site est hébergé sur un serveur). Quelques recommandations : Figure 1 - Rendu d'une page web sur un navigateur Créer un dossier qui contiendra les images (voir figure 2) : c est très pratique lorsque vous naviguerez dans les dossiers ou que vous rechercherez quelque chose! Pour les gros sites web, il faudra même créer des sous-dossiers PAS DE MAJUSCULES! Ou alors il faudra bien faire attention à les mettre quand vous ferez des liens. Certains serveurs ne prennent pas en compte la casse, d autres pas Pas d espaces non plus! Les URL ne contiennent pas d espace, donc lorsque vous pointez un fichier qui comporte des espaces, cela crée des caractères spéciaux assez bizarres dans la barre d adresse Mieux vaut éviter Il est préférable d appeler sa page d accueil «index.xxx» (où.xxx est l extension). En effet, sur un serveur, c est la page qui sera chargée lorsque vous taperez l adresse du dossier racine. Par exemple, lorsque vous tapez http://www.survivebox.fr/, c est la page index.php qui est chargée. Lilian BAZILLE 2 / 10

Figure 2 - Exemple de répertoire de travail 1.2 - Editeur Vous l avez compris, vos pages web sont éditées dans un langage de programmation bien spécifique (ici HTML). Pour pouvoir modifier ce code source, deux possibilités : Les éditeurs WYSIWYG (What You See Is What You Get) : Permet de créer un site internet simplement sans taper de code. Cependant, on ne peut pas tout faire, et le code généré n est pas très «propre». Non recommandé. Les éditeurs de texte : Cette méthode est à préviligier car c est la vraie méthode pour coder une page HTML. Un éditeur de texte standard suffit (comme le notepad de Windows). Mais il est recommandé d utiliser des éditeurs spécifiques, qui permettent de mettre en avant les balises, comme Notepad++ pour Windows ou Gedit pour Linux (par exemple). Ce cours ne traitera que l édition de page web via un éditeur de texte, car c est la seule façon de réaliser vraiment un site web. Contrairement aux IDE de programmation, ces éditeurs ne corrigeront pas les éventuelles erreurs dans votre code! Figure 3 - Notepad++ (Windows) Lilian BAZILLE 3 / 10

1.3 - Navigateur Pour visualiser le résultat, il faudra évidemment disposer d un navigateur web. Pour les pages basiques, les rendus seront équivalents, mais pour certaines propriétés CSS complexes, le rendu peut varier. Il est donc parfois utile d essayer son site sur différents navigateurs pour vérifier que son site peut s afficher correctement (beaucoup de propriétés CSS sont incompatibles avec d anciennes versions d Internet Explorer par exemple). Les principaux navigateurs sont : Windows Internet Explorer Opéra Mozilla Firefox Apple Safari Google Chrome 2 - HTML : le contenu 2.1 - Structure de base Un fichier HTML doit toujours avoir la même structure, pour respecter les normes et être décodé de la bonne manière par les navigateurs web. Type du document (ici page HTML) Titre de la page Paramètres pour l indexation Tout le contenu visible de la page se trouve ici Figure 4 - Structure de base d'une page HTML NOTE : Il est possible de créer une page qui ne contient pas toutes ces balises. Néanmoins, il est nécessaire de les mettre pour une meilleure compatibilité et un respect des normes HTML 5 (vous pouvez vérifier votre fichier sur http://validator.w3.org/. 2.2 - Utilisation des balises La structure de base donne un aperçu du fonctionnement de la syntaxe HTML. Tout fonctionne à base de balises. Une balise est délimitée par les caractères < et >. Les balises fonctionnent par paires, c est-à-dire qu il y a des balises ouvrantes et des balises fermantes (qui commencent par un /). Figure 5 - Exemple de balises Chaque type de balise a un effet particulier. C est le texte situé entre la balise ouvrante et la balise fermante qui est impacté. Par exemple pour la balise <strong> (qui met le texte en grand) : Lilian BAZILLE 4 / 10

Figure 6 - Effet de la balise strong Vous remarquerez que le saut de ligne dans le code HTML n a pas affecté l affichage du texte dans le navigateur. L agencement du texte dans l éditeur sert juste au développeur pour s y retrouver. Il existe également des balises auto fermantes, qui fonctionnent toutes seules (pas d ouvrante ni de fermante). Ces balises s écrivent de la manière <balise />. Comme on ne peut pas placer de texte dedans, elles ont un usage assez spécifique. Par exemple la balise <br /> permet de sauter une ligne. Enfin, il faut savoir que les balises peuvent s imbriquer les unes dans les autres. Si l on reprend la structure d un fichier HTML (figure 4), la balise <title> est imbriquée dans la balise <head>, elle-même dans la balise <html>. 2.3 - Tags Les tags permettent de spécifier un paramètre dans une balise. La syntaxe est la suivante : <balise attribut="valeur"> </balise> C est le cas par exemple, pour la balise d image <img> qui a besoin du lien vers l image pour pouvoir l afficher. Une balise peut contenir plusieurs attributs, séparés par un espace. 2.4 - Commentaires Les commentaires permettent de structurer votre code HTML. C est un texte qui est visible uniquement lorsque l on regarde le code source, et qui n a strictement aucun effet sur la page (ils sont même parfois utilisés pour rendre inopérants certains morceaux de code). Attention cependant, toute personne qui visualiserai votre page, peut afficher le code source, et donc les commentaires! 2.5 - Balise courantes Figure 7 - Utilisation de la balise <br/> <!--Texte en commentaire --> Figure 8 - Syntaxe d'un commentaire 2.5.1 - Balise <p> La balise <p> sert à créer des paragraphes. Tout élément texte doit être inclus dans un paragraphe (même un mot isolé!). Entre deux paragraphes, un saut de ligne est effectué. Notons que l on peut utiliser la balise <br/> vu précédemment pour faire un petit saut de ligne au sein d un paragraphe. Lilian BAZILLE 5 / 10

Figure 9 - Utilisation de la balise <p> 2.5.2 - Balises de titre Les balises de titre permettent de définir des niveaux de titre. Le niveau de titre <h1> est le titre de haut niveau (celui en caractère le plus important), <h2> de second niveau, <h3>, etc. On utilise rarement plus de trois/quatre niveaux de titres. Figure 10 - Utilisation des balises de titre Les balises de titre ne doivent pas être inclues dans des balises de paragraphe <p>! 2.5.3 - Balise de mise en forme du texte Ces balises permettent de modifier l apparence du texte. Attention, certaines anciennes balises permettent de modifier les caractéristiques (couleur, taille, police, etc.) du texte, mais elles ne sont plus d actualité et leur utilisation est prohibé! C est le cas des balises <font>, <center>, etc. Il faudra utiliser le CSS pour modifier ces caractéristiques (cf. partie 3). Malgré tout, il existe quelques balises que l on peut utiliser pour mettre en valeur son texte (même si on privilégiera le CSS si possible!) : La balise <strong> permet d insister sur du texte (généralement en gras) ; La balise <em> permet de mettre le texte en valeur (généralement en italique) ; La balise <sub> permet de mettre le texte en indice ; La balise <sup> permet de mettre le texte en exposant ; La balise <del> permet de barrer le texte ; La balise <q> permet d effectuer une courte citation ; La balise <blockquote> permet d effectuer une longue citation ; La balise <b> permet de mettre le texte en gras (privilégier <strong>); La balise <i> permet de mettre le texte en italique (privilégier <em>) ; Pour pouvoir mettre en forme son site en CSS par la suite, on utilise la balise <div>. Elle permet de créer un «bloc» de texte, dont on pourra par la suite modifier l apparence, la position, etc. Lilian BAZILLE 6 / 10

2.5.4 - Listes Il existe des balises permettant de créer des listes à puce (balise <ul>) et des listes numérotées (balise <ol>). Chaque élément de la liste est ensuite placé entre les deux balises et délimité par les balises <li>. Figure 11 - Listes NOTE : Il est possible d imbriquer des listes (ou tout autre objet/balise) dans des listes. Il suffit de placer cet élément entre les balises <li> et </li>. Figure 12 - Listes imbriquées 2.5.5 - Les liens hypertexte C est la base d internet! Les liens hypertexte sont rencontrés partout sur le web, ils permettent de rediriger l utilisateur vers une autre page lorsqu il clique dessus. On utilise pour cela la balise <a>. Le texte dans la balise sera cliquable. La balise <a> est toujours suivie de l argument href qui contient l URL de l autre page. Si l URL est sur un autre site internet, il faut utiliser l adresse complète (commençant par http://...). Au contraire, si la page est sur le même site internet, le chemin vers le fichier suffit. Par exemple, si le fichier «page2.html» est dans le même dossier que la page courante, le lien peut être crée de cette manière : Il existe d autres attributs pour la balise <a> : Figure 13 - Exemple de liens title : permet d afficher un texte lorsque la souris passe sur le lien ; target : indique dans quelle page s ouvre le document courant (par défaut dans celui courant). La valeur "_blank" permet d ouvrir la page dans un nouvel onglet. Le lien peut aussi pointer vers une autre balise. Pour cela, il faut que l autre balise ait l attribut ID associé à une chaîne de caractère (notamment utilisé sur les balises <div> ou <p>). Cela permet de revenir vers cet endroit du document, pratique sur les grandes pages. Par exemple : Lilian BAZILLE 7 / 10

<balise id="debut">blablabla</balise> <a href="#debut">revenir au début</a> 2.5.6 - Les images Pour afficher une image, on utilise la balise <img>. C est une balise auto-fermante. Les principaux attributs de cette balise sont les suivants : src (obligatoire) : chemin vers l image ; alt (obligatoire) : texte de remplacement si l image ne peut pas s afficher ; titre : affiche une infobulle avec le texte lors du survol de l image ; Figure 14 - Balise <img> NOTE : Il est tout à fait possible d inclure une balise <img> dans une balise <a>, pour en faire une image cliquable! Par exemple : <a href="http://www.survivebox.fr/"><img src="logosb.png" alt="logo SurviveBox" /></a> 2.5.7 - Les tableaux Il est possible de créer des tableaux en HTML. Pour cela, on utilise la balise <table> qui permet de délimiter la partie au code source dédiée au tableau. A l intérieur, on utilise les balises suivantes : <caption> : légende affichée sous le tableau (optionnel) ; <tr> : défini les lignes du tableau ; <td> : défini les cellules du tableau ; <th> : défini les cellules d en-tête du tableau. Elles ont une mise en forme différente (balise souvent utilisée pour les colonnes). On peut également utiliser l argument border pour définir la taille de la bordure du tableau (mais privilégier le CSS si possible ). On crée donc les tableaux ligne par ligne. Par exemple : Figure 15 - Exemple de tableau Il est également possible de fusionner des cellules entre-elles (en hauteur ou en largeur). L argument colspan permet de fusionner des cellules en ligne, et rowspan des cellules en colonne. Dans les deux cas, la valeur de l argument est le nombre de cellules à fusionner. Par exemple : Lilian BAZILLE 8 / 10

Figure 16 - Tableau avec cellules fusionnées 2.5.8 Balises sémantiques Les balises sémantiques permettent de structurer la page, de la même manière qu avec des <div>. Leur seule particularité, c est qu elles sont déjà prédéfinies. Leur importance sera plus présente avec le CSS. On pourra ainsi donner un style particulier au header, au footer, etc. sans avoir à créer de nouvelles classes. <header> <nav> <section> <article> <aside> <footer> Figure 17 - Structure des balises sémantiques 2.5.9 - Formulaires Un formulaire HTML permet à l utilisateur de remplir différents type de champs avec des informations, qui seront ensuite transmises à une autre page pour être traitées (généralement en PHP). Le formulaire est délimité par les balises <form>. Cette balise peut avoir plusieurs attributs : name : donne un nom au formulaire ; action : défini ce qui sera exécuté lorsque l utilisateur validera le formulaire ; o adresse d une page web dynamique ; o script Javascript ; o etc. ; enctype : défini le format d envoi des données ; method : défini la méthode de transmission des données : o GET : transfère en ASCII des données n excédant pas 100 caractères o POST : transfère en non-ascii des données de taille illimitée (méthode la plus courante) Si on utilise l attribut action, enctype et method n ont pas d utilité. Lilian BAZILLE 9 / 10

Dans le formulaire, on doit maintenant ajouter des champs. La balise du champ est <input>. Cette balise comprend de nombreux attributs, notamment type, qui permet de définir l aspect du champ. Voici les principaux attributs de la balise : name : identifie le champ. Il permet ensuite de traiter les données renvoyées ; type : défini le type du champ input : o text : champ de texte sur une ligne ; o password : champ de texte spécifique pour les mots de passe (contenu caché) ; o checkbox : case à cocher ; o file : champ permettant à l utilisateur d envoyer un fichier ; o image : bouton de validation avec l aspect de l image dont le chemin est dans l attribut src o radio : bouton à cocher permettant une seule valeur parmi plusieurs choix (tous ces champs doivent avoir le même attribut name) ; checked : attribut sans valeur. Permet de définir si le bouton radio est coché par défaut o reset : bouton réinitialisant le contenu de tout le formulaire ; o email : le champ est à remplir par une adresse mail ; o url : le champ est à remplir par une URL ; size : nombre de caractères visibles ; maxlength : nombre de caractères max ; value : défini la chaîne de caractère affichée par défaut dans le champ ; placeholder : texte apparaissant en grisé dans le champ avant la saisie de l utilisateur ; height : défini la hauteur de l élément en pixels ou en pourcentages ; width : défini la largeur de l élément en pixels ou en pourcentages ; required : (sans valeur) oblige l utilisateur à remplir le champ pour valider le formulaire ; Exemple de formulaire : Figure 18 - Formulaire basique Il existe d autres balises permettant de créer des champs. La balise <textarea> qui permet de créer une zone de texte. Ses attributs son rows (nombre de lignes) et cols (nombre de colonnes), et certains attributs similaires à input (comme required, name, etc.). Ce n est pas une balise autofermante, et le texte placé entre les deux balises sera le texte présent par défaut dans la zone de texte. La balise <select> permet de faire une liste déroulante. Chaque choix doit être placé entre deux balises <option> situées au sein des balises <select>. Figure 19 - Formulaire avec zone de texte et liste déroulante Lilian BAZILLE 10 / 10