INTEGRATION WEB :
HTML, CSS
PLAN :
Fonctionnement des sites Web
I. C’est quoi un site Web ?
II. Comment fonctionnent les sites Web ?
III. Les prérequis pour créer un site Web ?
IV. C’est quoi une page Web ?
V. Un éditeur de texte ? Donnez des exemples
VI. Choisissez un éditeur de texte à utiliser, justifiez votre choix ?
VII. Un langage de programmation ?
VIII. Un navigateur ? Le rôle d’un navigateur dans la programmation Web
HTML
• HTML ? Origine, rôle et fonctionnement
• C’est quoi une balise ? Donnez des exemples de cas pratiques
• C’est quoi un attribut ? Donnez des exemples de cas pratiques
• C’est quoi un ID et une CLASSE en HTML
• Différence entre ID et CLASSE (dans quels cas les utiliser)
CSS
• CSS ? Origine, rôle et fonctionnement
• Les différentes manières d’utilisation du CSS dans une page Web
• Donnez des exemples de cas pratiques pour chaque cas d’utilisation
I- C’est quoi un site Web ?
Un site web est un ensemble de pages web qui peuvent être consultées en
suivant des hyperliens à l'intérieur du site. Un site Web est un ensemble de pages
web et de ressources reliées par des hyperliens, défini et accessible par une adresse
web. Un site est développé à l'aide de langages de programmation web, puis hébergé
sur un serveur web accessible via le réseau mondial Internet.
III- Les prérequis pour créer un
site Web ?
• Etape n°1 : Trouver un nom de domaine
• Etape n°2 : Créer une adresse mail générique
• Etape n°3 : Choisir une plateforme pour créer votre site
• Etape n°4 : Choisir un fournisseur d’hébergement
• Etape n°5 : Choisir un thème)
• Etape n°6 : Se pencher sur le logo
• Etape n°7 : Illustrer votre site avec de belles images
• Etape n°8 : Utiliser un logiciel de retouche d’images
• Etape n°9 : Créer un compte Google Analytics
IV- C’est quoi une page Web ?
Une page Web est ce qui fait fonctionner un site Web. C’est un document
unique adapté à vos navigateurs Web (Google Chrome, Internet Explorer, Mozilla
Firefox, Safari, etc.). Il est généralement écrit en langage HTML ou HyperText
Markup Language qui sera présenté sous forme de page Web via des navigateurs
Web.
Quelques différences entre page Web et site Web.
• Une page Web est une partie indépendante d’un site Web contenant
les liens vers d’autres pages Web du site. D’ailleurs, un site Web est
un ensemble de pages Web pertinentes adressées à un localisateur de
ressources uniformes.
• Chaque site Web doit avoir une URL unique, alors que plusieurs pages
Web peuvent porter le même nom jusqu’à ce qu’elles se trouvent dans
des documents différents.
• Le site Web est un emplacement utilisé pour afficher le contenu. En
revanche, une page Web est un contenu à afficher sur le site Web.
• Une URL d’une page Web a une extension telle que HTML, ASP, PHP,
etc. Par contre, l’URL du site Web n’a pas d’extension.
• L’adresse d’une page Web fait partie du nom de domaine et dépend
d’un site Web. Tandis qu’un site Web n’a aucun lien avec l’adresse
d’une page Web.
• La conception et le développement d’une page Web prennent moins
de temps par rapport à un site Web car un site Web contient
plusieurs pages Web.
V- Un éditeur de texte ? Donnez des exemples
Un éditeur de texte est un logiciel destiné à la création et l'édition de fichiers
textes.
Exemple :
[Link] Text
[Link]
[Link]++
[Link] – The HTML Editor
[Link]
[Link]
[Link]
[Link]
[Link]
[Link] Edit
VI-Choisissez un éditeur de texte à
utiliser, justifiez votre choix ?
Pour l’éditeur de texte, j’ai choisis SUBLIME TEXT. Il a l'avantage d'être simple, épuré et facile à
lire dès le départ. Pas de centaines de boutons dont on ne comprend pas à quoi ils servent. Il ne faut
pas croire qu'il est limité. Au contraire : il est possible de l'étendre avec tout un système de plugins.
En somme, Sublime Text est à la fois simple et puissant. Même pour l'usage basique que nous
allons avoir, il s'avèrera très pratique.
VII- Un langage de
programmation ?
• Un langage de programmation est une notation conventionnelle destinée à formuler des
algorithmes et produire des programmes informatiques qui les appliquent.
On peut en citer certains exemples :
1. HTML et CSS.
2. JavaScript.
3. PHP.
4. Ruby.
5. Java.
VIII- Un navigateur ? Le rôle d’un navigateur dans la programmation Web
• Un browser (navigateur Web ou navigateur internet en français) est un logiciel qui permet à son
utilisateur d'accéder à l'ensemble des informations contenues sur le World Wide Web (plus
communément connu sous le nom d'internet).
• Par défaut les navigateurs Web comprennent seulement les 3 langages suivant :
• Le langage HTML.
• Le langage CSS.
• Le langage JavaScript.
• Avec le navigateur, vous pouvez consulter n'importe quel site web. Voici par
exemple un navigateur affichant le célèbre site web Wikipédia :
•Les balises peuvent avoir plusieurs formes :
•<balise> </balise> : elles s'ouvrent et se ferment pour délimiter
le contenu (début et fin d'un titre, par exemple) ;
•<balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire),
elles permettent d'insérer un élément à un endroit précis (par exemple une image).
•Les balises sont parfois accompagnées d'attributs pour donner des indications
• supplémentaires (exemple : <image nom="[Link]" /> ).
