Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Classe de première SI HTML Table des matières 1. Le fonctionnement des sites we

Classe de première SI HTML Table des matières 1. Le fonctionnement des sites web......................................................................................................2 2. HTML et CSS : deux langages pour créer un site web.....................................................................3 2.1. Les rôles de HTML et CSS.......................................................................................................3 2.2. Les différentes versions de HTML et CSS...............................................................................3 3. Les navigateurs.................................................................................................................................4 4. Les balises et leurs attributs..............................................................................................................5 5. Structure de base d'une page HTML5..............................................................................................6 5.1. Le doctype.................................................................................................................................7 5.2. La balise <html>.......................................................................................................................7 5.3. L'en-tête <head> et le corps <body>........................................................................................7 5.4. L'encodage (charset).................................................................................................................7 5.5. Le titre principal de la page......................................................................................................7 5.6. Les commentaires.....................................................................................................................8 6. Organiser son document...................................................................................................................8 6.1. Les paragraphes........................................................................................................................8 6.2. Sauter une ligne........................................................................................................................9 6.3. Les titres....................................................................................................................................9 6.4. La mise en valeur....................................................................................................................10 7. Les listes....................................................................................................................................10 7.1. Liste non ordonnée..................................................................................................................10 7.2. Liste ordonnée.........................................................................................................................11 8. Créer des liens.................................................................................................................................11 8.1. Un lien vers un site.................................................................................................................11 8.2. Un lien vers une page locale...................................................................................................12 8.3. Un lien vers une ancre............................................................................................................12 8.4. Lien vers une ancre située dans une autre page......................................................................13 8.5. Un lien pour envoyer un e-mail..............................................................................................13 8.6. Un lien pour télécharger un fichier.........................................................................................13 9. Les images......................................................................................................................................13 9.1. Les différents formats d'images..............................................................................................13 9.2. Insérer une image....................................................................................................................13 9.3. Les figures...............................................................................................................................14 4-html.odt 1 Classe de première SI 1. Le fonctionnement des sites web HTML, de CSS sont des langages informatiques qui permettent de créer des sites web. Tous les sites web sont basés sur ces langages. Ils sont à la base même du Web. Le langage HTML a été inventé par Tim Berners-Lee et Robert Caillau en 1991 au CERN1. Tim Berners-Lee a créé le World Wide Web Consortium (W3C) qui définit les nouvelles versions des langages liés au Web. De nombreuses personnes confondent Internet et le Web. Le Web fait partie d'Internet. Internet est un réseau mondial d'ordinateurs interconnectés entre eux. Tim Berners-Lee n'est donc pas l'inventeur d'Internet, c'est « seulement » l'inventeur du Web. 1 Centre Euporéen de la Recherche Nucléaire 4-html.odt 2 Classe de première SI 2. HTML et CSS : deux langages pour créer un site web Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte), il faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc. 2.1. Les rôles de HTML et CSS Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Il y a deux langages qui se complètent car ils ont des rôles différents : • HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… • CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996. HTML HTML + CSS • Le HTML définit le contenu. • Le CSS permet de définir la présentation : couleurs, image de fond, marges, taille du texte… 2.2. Les différentes versions de HTML et CSS Au fil du temps, les langages HTML et CSS ont beaucoup évolué. Dans la toute première version de HTML (HTML 1.0) il n'était même pas possible d'afficher des images ! Voici un très bref historique de ces langages. • HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991. • HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec 4-html.odt 3 Classe de première SI l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des versions suivantes du HTML. Les règles et le fonctionnement de cette version sont donnés par le W3C2. • HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des images, etc. • HTML 4 : il s'agit de la version la plus répandue du HTML. Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames (qui découpent une page web en plusieurs parties), des tableaux plus complexes, des améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la première fois d'exploiter des feuilles de style CSS ! • HTML 5 : c'est LA dernière version. Encore assez peu répandue, elle fait beaucoup parler d'elle car elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc. • CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères, etc. • CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS rajoute de nombreuses options. On peut désormais utiliser des techniques de positionnement très précises, qui nous permettent d'afficher des éléments où on le souhaite sur la page. • CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement attendues comme les bordures arrondies, les dégradés, les ombres, etc. 3. Les navigateurs Le navigateur est le programme qui nous permet de visualiser les sites web. Le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Si le code CSS dit « Les titres sont en rouge », alors le navigateur affichera les titres en rouge. Le rôle du navigateur est donc essentiel ! Il existe de nombreux navigateurs différents. Voici les principaux à connaître : Navigateur OS Téléchargement Commentaires Google Chrome Windows Mac Linux Téléchargement Le navigateur de Google, simple d'emploi et très rapide. Mozilla Firefox Windows Mac Linux Téléchargement Le navigateur de la fondation Mozilla, célèbre et réputé. 2 World Wide Web Consortium 4-html.odt 4 Classe de première SI Navigateur OS Téléchargement Commentaires Internet Explorer Windows Téléchargement (Déjà installé sur Windows) Le navigateur de Microsoft, qui équipe tous les PC Windows. Safari Windows Mac Téléchargement (Déjà installé sur Mac OS X) Le navigateur d'Apple, qui équipe tous les Mac. Opera Windows Mac Linux Téléchargement Il est moins utilisé mais propose de nombreuses fonctionnalités. La plupart des navigateurs sur smartphones sont les mêmes que sur ordinateur, dans une version plus légère adaptée aux mobiles. Tout dépend du type de téléphone. • iPhone : sur l'iPhone d'Apple, le navigateur utilisé est Safari Mobile. Il s'agit d'une version light et néanmoins très complète de Safari pour ordinateur. • Android : les portables sous Android bénéficient du navigateur Chrome Mobile. Là encore, il s'agit d'une version adaptée aux mobiles. • Windows Phone : sous Windows Phone, on retrouve… Internet Explorer Mobile ! Le principe est le même que pour les précédents navigateurs : il s'agit d'une version dédiée aux mobiles. Les navigateurs pour mobiles prennent en charge la plupart des dernières fonctionnalités de HTML et CSS. De plus, le système de mise à jour automatisé des mobiles garantit que les utilisateurs auront le plus souvent les dernières versions. 4. Les balises et leurs attributs Les pages HTML sont constituées de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour les internautes, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher. Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des symboles < et >, comme ceci : <balise> Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc. On distingue deux types de balises : 1. Les balises en paires Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent : <title>Ceci est un titre</title> On distingue une balise ouvrante (<title>) et une balise fermante (</title>) qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises… n'est pas un titre. 4-html.odt 5 Classe de première SI 2. Les balises orphelines Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ». Une balise orpheline s'écrit comme ceci : <img /> Les attributs viennent les compléter les balises pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci : <balise attribut="valeur"> La balise <img /> que nous venons de voir. Seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher : <img src="photo.jpg" /> L'ordinateur comprend alors qu'il doit afficher l'image contenue uploads/Litterature/ 4-html.pdf