2.Construire votre première page Web

Construire votre première page Web - SAGProfProg - HTML CSS - Programmation, Développement web, Développement d'application, Génie Logiciel, Langage de programmation, Application web, Tutos, Informatique, Système d'information, Administration d'application

Si vous le pouvez, imaginez une époque antérieure à l'invention d'Internet. Les sites Web n'existaient pas et les livres, imprimés sur papier et bien reliés, étaient votre principale source d'information. Il a fallu beaucoup d'efforts - et de lectures - pour retrouver l'information exacte que vous recherchiez.

Aujourd'hui, vous pouvez ouvrir un navigateur Web, accéder au moteur de recherche de votre choix et effectuer une recherche. Toutes les informations imaginables sont à portée de main. Et il y a de fortes chances que quelqu'un quelque part ait créé un site Web avec votre recherche exacte à l'esprit.

Dans ce livre, je vais vous montrer comment créer vos propres sites Web en utilisant les deux langages informatiques les plus répandus : HTML et CSS.

Avant de commencer notre voyage pour apprendre à créer des sites Web avec HTML et CSS, il est important de comprendre les différences entre les deux langues, la syntaxe de chaque langue et une terminologie commune.

Qu'est-ce que HTML et CSS ?

HTML, HyperText Markup Language, donne une structure et une signification au contenu en définissant ce contenu comme, par exemple, des titres, des paragraphes ou des images. CSS, ou feuilles de style en cascade, est un langage de présentation créé pour styliser l'apparence du contenu, en utilisant, par exemple, des polices ou des couleurs.

Les deux langages, HTML et CSS, sont indépendants l'un de l'autre et doivent le rester. CSS ne doit pas être écrit à l'intérieur d'un document HTML et vice versa. En règle générale, HTML représentera toujours le contenu et CSS représentera toujours l'apparence de ce contenu.

Avec cette compréhension de la différence entre HTML et CSS, mettons nous dans le HTML plus en détail.

Comprendre les termes HTML courants

Lors de vos débuts avec HTML, vous rencontrerez probablement de nouveaux termes, souvent étranges. Au fil du temps, vous vous familiariserez de plus en plus avec chacun d'eux, mais les trois termes HTML courants avec lesquels vous devriez commencer sont les éléments, les balises et les attributs.

Éléments

Les éléments sont des désignateurs qui définissent la structure et le contenu des objets dans une page. Certains des éléments les plus fréquemment utilisés incluent plusieurs niveaux de titres (identifiés comme éléments <h1> à <h6>) et de paragraphes (identifiés comme élément <p>) ; la liste continue pour inclure les éléments <a>, <div>, <span>, <strong> et <em>, et bien d'autres.

Les éléments sont identifiés par l'utilisation de crochets angulaires inférieur à et supérieur à, < >, entourant le nom de l'élément. Ainsi, un élément ressemblera à ceci :

<a>

Mots clés

L'utilisation de crochets angulaires inférieur à et supérieur à entourant un élément crée ce que l'on appelle une balise. Les balises apparaissent le plus souvent dans des paires de balises ouvrantes et fermantes.

Une balise ouvrante marque le début d'un élément. Il se compose d'un signe inférieur à suivi du nom d'un élément, puis se termine par un signe supérieur à ; par exemple, .

Une balise fermante marque la fin d'un élément. Il se compose d'un signe inférieur à suivi d'une barre oblique et du nom de l'élément, puis se termine par un signe supérieur à ; par exemple, <div>.

Le contenu qui se situe entre les balises d'ouverture et de fermeture est le contenu de cet élément. Un lien d'ancrage, par exemple, aura une balise d'ouverture de et une balise de fermeture de . Ce qui se situe entre ces deux balises sera le contenu du lien d'ancrage.

Ainsi, les balises d'ancrage ressembleront un peu à ceci :

<a>...</a>

Les attributs

Les attributs sont des propriétés utilisées pour fournir des informations supplémentaires sur un élément. Les attributs les plus courants incluent l'attribut id, qui identifie un élément ; l'attribut class, qui classe un élément ; l'attribut src, qui spécifie une source de contenu intégrable ; et l'attribut href, qui fournit une référence de lien hypertexte vers une ressource liée.

Les attributs sont définis dans la balise d'ouverture, après le nom d'un élément. Généralement, les attributs incluent un nom et une valeur. Le format de ces attributs se compose du nom de l'attribut suivi d'un signe égal, puis d'une valeur d'attribut entre guillemets. Par exemple, un élément incluant un attribut href ressemblera à ceci :

<a href="http://google.com/">Google</a>

Le code précédent affichera le texte "Google" sur la page Web et amènera les utilisateurs à http://google.com/ en cliquant sur le texte "Google". L'élément d'ancrage est déclaré avec les balises d'ouverture et de fermeture englobant le texte, et l'attribut et la valeur de référence du lien hypertexte sont déclarés avec href="http://google.com" dans la balise d'ouverture.

Maintenant que vous savez ce que sont les éléments HTML, les balises et les attributs, jetons un coup d'œil à la création de notre première page Web. Si quelque chose semble nouveau ici, pas de soucis, nous le déchiffrerons au fur et à mesure

Configuration de la structure du document HTML

Les documents HTML sont des documents en texte brut enregistrés avec une extension de fichier .html plutôt qu'une extension de fichier .txt. Pour commencer à écrire du HTML, vous avez d'abord besoin d'un éditeur de texte brut avec lequel vous êtes à l'aise. Malheureusement, cela n'inclut pas Microsoft Word ou Pages, car ce sont des éditeurs de texte enrichi. Deux des éditeurs de texte brut les plus populaires pour écrire du HTML et du CSS sont Dreamweaver et Sublime Text. Les alternatives gratuites incluent également Notepad ++ pour Windows et TextWrangler pour Mac.

Tous les documents HTML ont une structure obligatoire qui inclut la déclaration et les éléments suivants : <!DOCTYPE html>, <html>, <head> et <body>.

La déclaration de type de document, ou <!DOCTYPE html>, informe les navigateurs Web de la version de HTML utilisée et est placée au tout début du document HTML. Comme nous allons utiliser la dernière version de HTML, notre déclaration de type de document est simplement <!DOCTYPE html>. Après la déclaration du type de document, l'élément <html> signifie le début du document.

À l'intérieur de l'élément <html>, l'élément <head> identifie le haut du document, y compris toutes les métadonnées (informations accompagnant la page). Le contenu de l'élément <head> n'est pas affiché sur la page Web elle-même. Au lieu de cela, il peut inclure le titre du document (qui s'affiche dans la barre de titre de la fenêtre du navigateur), des liens vers des fichiers externes ou toute autre métadonnée utile.

Tout le contenu visible de la page Web relèvera de l'élément <body>. Une répartition d'une structure de document HTML typique ressemble à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Celle-ci est une page Web</p>
  </body>
</html>

Le code précédent montre le document commençant par la déclaration de type de document, <!DOCTYPE html>, suivie directement par l'élément <html>. À l'intérieur de l'élément <html> viennent les éléments <head> et <body>. L'élément <head> comprend l'encodage des caractères de la page via la balise <meta charset="utf-8"> et le titre du document via l'élément <title>. L'élément <body> comprend un titre via l'élément <h1> et un paragraphe via l'élément <p>. Étant donné que le titre et le paragraphe sont imbriqués dans l'élément <body>, ils sont visibles sur la page Web.

Lorsqu'un élément est placé à l'intérieur d'un autre élément, également appelé imbriqué, il est judicieux d'indenter cet élément pour que la structure du document reste bien organisée et lisible. Dans le code précédent, les éléments <head> et <body> étaient imbriqués et mis en retrait dans l'élément <html>. Le modèle d'indentation des éléments se poursuit à mesure que de nouveaux éléments sont ajoutés à l'intérieur des éléments <head> et <body>.

Éléments à fermeture automatique

Dans l'exemple précédent, l'élément <meta> n'avait qu'une seule balise et n'incluait pas de balise de fermeture. N'ayez crainte, c'était intentionnel. Tous les éléments ne sont pas constitués de balises ouvrantes et fermantes. Certains éléments reçoivent simplement leur contenu ou leur comportement à partir d'attributs au sein d'une seule balise. L'élément <meta> est l'un de ces éléments. Le contenu de l'élément <meta> précédent est affecté à l'aide de l'attribut et de la valeur charset. D'autres éléments à fermeture automatique courants incluent

<br>    <embed>    <hr>    <img>    <input>    <link>    <meta>    <param>    <source>    <wbr>

La structure décrite ici, utilisant le type de document <!DOCTYPE html> et les éléments <html>, <head> et <body>, est assez courante. Nous voudrons garder cette structure de document à portée de main, car nous l'utiliserons souvent lorsque nous créerons de nouveaux documents HTML.

Validation des codes

Peu importe à quel point nous sommes prudents lors de l'écriture de notre code, nous ferons inévitablement des erreurs. Heureusement, lors de l'écriture de HTML et de CSS, nous avons des validateurs pour vérifier notre travail. Le W3C a construit des validateurs HTML et CSS qui analysent le code à la recherche d'erreurs. La validation de notre code l'aide non seulement à s'afficher correctement sur tous les navigateurs, mais nous aide également à nous enseigner les meilleures pratiques d'écriture de code.

En pratique

En tant que concepteurs Web et développeurs front-end, nous avons le luxe d'assister à un certain nombre de grandes conférences dédiées à notre métier. Nous allons créer notre propre conférence, Styles Conference, et créer un site Web pour celle-ci tout au long des leçons suivantes. Nous y voilà!

1- Ouvrons notre éditeur de texte, créons un nouveau fichier nommé index.html et enregistrons-le dans un emplacement que nous n'oublierons pas. Je vais créer un dossier sur mon bureau nommé "styles- conference" et y enregistrer ce fichier ; n'hésitez pas à faire de même.

2- Dans le fichier index.html, ajoutons la structure du document, y compris le type de document <!DOCTYPE html> et les éléments <html>, <head> et <body>.

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

3- À l'intérieur de l'élément <head>, ajoutons les éléments <meta> et <title>. L'élément <meta> doit inclure l'attribut et la valeur charset appropriés, tandis que l'élément <title> doit contenir le titre de la page, disons "Styles Conference".

<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
</head>

4- À l'intérieur de l'élément <body>, ajoutons les éléments <h1> et <p>. L'élément <h1> doit inclure l'en-tête que nous souhaitons inclure - utilisons à nouveau "Styles Conference" et l'élément <p> doit inclure un simple paragraphe pour introduire notre conférence.

<body>
  <h1>SAGProfProg</h1>
  <p>Elle est une entreprise fournisseuse de Tutos. Elle s'intéresse principalement à l'Ingénierie Logicielle</p>
</body>

5- Il est maintenant temps de voir comment nous avons fait ! Allons chercher notre fichier index.html (le mien se trouve dans le dossier "styles-conference" sur mon bureau). Double-cliquer sur ce fichier ou le faire glisser dans un navigateur Web l'ouvrira pour que nous l'examinions.

Changeons un peu de vitesse, en nous éloignant du HTML, et jetons un coup d'œil au CSS. N'oubliez pas que HTML définira le contenu et la structure de nos pages Web, tandis que CSS définira le style visuel et l'apparence de nos pages Web.

Comprendre les termes CSS courants

En plus des termes HTML, il existe quelques termes CSS courants avec lesquels vous voudrez vous familiariser. Ces termes incluent les sélecteurs, les propriétés et les valeurs. Comme pour la terminologie HTML, plus vous travaillez avec CSS, plus ces termes deviendront une seconde nature.

Sélecteurs

Au fur et à mesure que des éléments sont ajoutés à une page Web, ils peuvent être stylisés à l'aide de CSS. Un sélecteur désigne exactement à quel(s) élément(s) de notre code HTML cibler et appliquer des styles (tels que la couleur, la taille et la position). Les sélecteurs peuvent inclure une combinaison de différents qualificatifs pour sélectionner des éléments uniques, tout dépend de la spécificité que nous souhaitons être. Par exemple, nous pouvons vouloir sélectionner chaque paragraphe sur une page, ou nous pouvons ne vouloir sélectionner qu'un seul paragraphe spécifique sur une page.

Les sélecteurs ciblent généralement une valeur d'attribut, telle qu'une valeur d'id ou de classe, ou ciblent le type d'élément, tel que <h1> ou <p>.

Dans CSS, les sélecteurs sont suivis d'accolades, {}, qui englobent les styles à appliquer à l'élément sélectionné. Le sélecteur ici cible tous les éléments <p>.

p { ... }

Propriétés

Une fois qu'un élément est sélectionné, une propriété détermine les styles qui seront appliqués à cet élément. Les noms de propriété tombent après un sélecteur, entre accolades, {}, et immédiatement avant un deux-points, : . Il existe de nombreuses propriétés que nous pouvons utiliser, telles que background, color, font-size, height et width, et de nouvelles propriétés sont souvent ajoutées. Dans le code suivant, nous définissons les propriétés color et font-size à appliquer à tous les éléments <p>.

p {
  color: ...;
  font-size: ...;
}

Valeurs

Jusqu'à présent, nous avons sélectionné un élément avec un sélecteur et déterminé le style que nous aimerions appliquer avec une propriété. Nous pouvons maintenant déterminer le comportement de cette propriété avec une valeur. Les valeurs peuvent être identifiées comme le texte entre les deux-points, :, et le point-virgule, ;. Ici, nous sélectionnons tous les éléments et définissons la valeur de la propriété color sur orange et la valeur de la propriété font-size sur 16 pixels.

p {
  color: orange;
  font-size: 16px;
}

Pour résumer, en CSS, notre ensemble de règles commence par le sélecteur, qui est immédiatement suivi d'accolades. Entre ces accolades se trouvent des déclarations composées de paires de propriétés et de valeurs. Chaque déclaration commence par une propriété, suivie de deux-points, de la valeur de la propriété et enfin d'un point-virgule.

C'est une pratique courante d'indenter les paires de propriété et de valeur entre les accolades. Comme avec HTML, ces indentations aident à garder notre code organisé et lisible.

Connaître quelques termes courants et la syntaxe générale de CSS est un bon début, mais nous avons encore quelques éléments à apprendre avant de plonger trop profondément. Plus précisément, nous devons examiner de plus près le fonctionnement des sélecteurs dans CSS.

Travailler avec les sélecteurs

Les sélecteurs, comme mentionné précédemment, indiquent quels éléments HTML sont stylisés. Il est important de bien comprendre comment utiliser les sélecteurs et comment ils peuvent être exploités. La première étape consiste à se familiariser avec les différents types de sélecteurs. Nous allons commencer par les sélecteurs les plus courants : les sélecteurs de type, de classe et d'ID.

Sélecteurs de types

Les sélecteurs de type ciblent les éléments par leur type d'élément. Par exemple, si nous souhaitons cibler tous les éléments de division,<div> , nous utiliserons un sélecteur de type de div. Le code suivant montre un sélecteur de type pour les éléments de division ainsi que le code HTML correspondant qu'il sélectionne.

CSS

div { ... }

HTML

<div>...</div>          
<div>...</div>

Sélecteurs de classe

Les sélecteurs de classe nous permettent de sélectionner un élément en fonction de la valeur de l'attribut de classe de l'élément. Les sélecteurs de classe sont un peu plus spécifiques que les sélecteurs de type, car ils sélectionnent un groupe particulier d'éléments plutôt que tous les éléments d'un même type.

Les sélecteurs de classe nous permettent d'appliquer les mêmes styles à différents éléments à la fois en utilisant la même valeur d'attribut de classe sur plusieurs éléments.

Dans CSS, les classes sont désignées par un point, ., suivi de la valeur de l'attribut de classe. Ici, le sélecteur de classe sélectionnera tout élément contenant la valeur d'attribut de classe awesome, y compris les éléments de division et de paragraphe.

CSS

.awesome { ... }

HTML

<div class="awesome">...</div>
<p class="awesome">...</p>

Sélecteurs d'ID

Les sélecteurs d'ID sont encore plus précis que les sélecteurs de classe, car ils ciblent un seul élément unique à la fois. Tout comme les sélecteurs de classe utilisent la valeur d'attribut de classe d'un élément comme sélecteur, les sélecteurs d'ID utilisent la valeur d'attribut id d'un élément comme sélecteur.

Quel que soit le type d'élément sur lequel elles apparaissent, les valeurs d'attribut id ne peuvent être utilisées qu'une seule fois par page. S'ils sont utilisés, ils doivent être réservés aux éléments significatifs.

Dans CSS, les sélecteurs d'ID sont indiqués par un signe dièse, #, suivi de la valeur de l'attribut id. Ici, le sélecteur d'ID sélectionnera uniquement l'élément contenant la valeur d'attribut id de shayhowe.

CSS

#shayhowe { ... }

HTML

<div id="shayhowe">...</div>

Sélecteurs supplémentaires

Les sélecteurs sont extrêmement puissants, et les sélecteurs décrits ici sont les sélecteurs les plus courants que nous rencontrerons. Ces sélecteurs ne sont également qu'un début. De nombreux sélecteurs plus avancés existent et sont facilement disponibles. Lorsque vous vous sentez à l'aise avec ces sélecteurs, n'ayez pas peur de vous pencher sur certains des sélecteurs les plus avancés.

Très bien, tout commence à se mettre en place. Nous ajoutons des éléments à une page dans notre HTML, et nous pouvons ensuite sélectionner ces éléments et leur appliquer des styles à l'aide de CSS. Relions maintenant les points entre notre HTML et CSS, et faisons en sorte que ces deux langages fonctionnent ensemble.

Référencement CSS

Afin que notre CSS parle à notre HTML, nous devons référencer notre fichier CSS dans notre HTML. La meilleure pratique pour référencer notre CSS est d'inclure tous nos styles dans une seule feuille de style externe, qui est référencée depuis l'élément <head> de notre document HTML. L'utilisation d'une seule feuille de style externe nous permet d'utiliser les mêmes styles sur l'ensemble d'un site Web et d'apporter rapidement des modifications à l'ensemble du site.

Autres options pour ajouter du CSS

D'autres options pour référencer CSS incluent l'utilisation de styles internes et en ligne. Vous pouvez rencontrer ces options dans la nature, mais elles sont généralement mal vues, car elles rendent la mise à jour des sites Web fastidieuse et peu maniable.

Pour créer notre feuille de style CSS externe, nous voudrons utiliser à nouveau l'éditeur de texte de notre choix pour créer un nouveau fichier de texte brut avec une extension de fichier .css. Notre fichier CSS doit être enregistré dans le même dossier, ou un sous-dossier, où se trouve notre fichier HTML.

Dans l'élément <head> du document HTML, l'élément <link> est utilisé pour définir la relation entre le fichier HTML et le fichier CSS. Parce que nous établissons un lien vers CSS, nous utilisons l'attribut rel avec une valeur de feuille de style pour spécifier leur relation. De plus, l'attribut href (ou référence de lien hypertexte) est utilisé pour identifier l'emplacement, ou le chemin, du fichier CSS. Prenons l'exemple suivant d'un élément <head> de document HTML qui fait référence à une seule feuille de style externe.

<head>
  <link rel="stylesheet" href="main.css">
</head>

Pour que le CSS s'affiche correctement, le chemin de la valeur de l'attribut href doit être directement corrélé à l'endroit où notre fichier CSS est enregistré. Dans l'exemple précédent, le fichier main.css est stocké au même emplacement que le fichier HTML, également appelé répertoire racine.

Si notre fichier CSS se trouve dans un sous-répertoire ou un sous-dossier, la valeur de l'attribut href doit être corrélée à ce chemin en conséquence. Par exemple, si notre fichier main.css était stocké dans un sous-répertoire nommé stylesheets, la valeur de l'attribut href serait stylesheets/main.css, en utilisant une barre oblique pour indiquer le déplacement dans un sous-répertoire.

À ce stade, nos pages commencent à prendre vie, lentement mais sûrement. Nous n'avons pas trop approfondi le CSS, mais vous avez peut-être remarqué que certains éléments ont des styles par défaut que nous n'avons pas déclarés dans notre CSS. C'est le navigateur qui impose ses propres styles CSS préférés pour ces éléments. Heureusement, nous pouvons écraser ces styles assez facilement, ce que nous ferons ensuite en utilisant les réinitialisations CSS.

Utilisation des réinitialisations CSS

Chaque navigateur Web a ses propres styles par défaut pour différents éléments. La façon dont Google Chrome affiche les en-têtes, les paragraphes, les listes, etc. peut être différente de celle d'Internet Explorer. Pour assurer la compatibilité entre navigateurs, les réinitialisations CSS sont devenues largement utilisées.

Les réinitialisations CSS prennent chaque élément HTML commun avec un style prédéfini et fournissent un style unifié pour tous les navigateurs. Ces réinitialisations impliquent généralement la suppression de toute taille, marges, rembourrages ou styles supplémentaires et d'atténuer ces valeurs. Parce que CSS cascade de haut en bas - nous en reparlerons bientôt - notre réinitialisation doit être tout en haut de notre feuille de style. Cela garantit que ces styles sont lus en premier et que tous les différents navigateurs Web fonctionnent à partir d'une base de référence commune.

Il existe un tas de réinitialisations différentes disponibles, qui ont toutes leurs propres points forts. L'une des réinitialisations les plus populaires est la réinitialisation d'Eric Meyer, qui a été adaptée pour inclure des styles pour les nouveaux éléments HTML5.

Si vous vous sentez un peu plus aventureux, il y a aussi Normalize.css, créé par Nicolas Gallagher. Normalize.css se concentre non pas sur l'utilisation d'une réinitialisation matérielle pour tous les éléments communs, mais plutôt sur la définition de styles communs pour ces éléments. Cela nécessite une meilleure compréhension du CSS, ainsi qu'une prise de conscience de ce que vous aimeriez que vos styles soient.

Compatibilité et tests entre navigateurs

Comme mentionné précédemment, différents navigateurs rendent les éléments de différentes manières. Il est important de reconnaître la valeur de la compatibilité et des tests entre navigateurs. Les sites Web n'ont pas besoin d'avoir exactement la même apparence dans tous les navigateurs, mais ils doivent être proches. Les navigateurs que vous souhaitez prendre en charge et dans quelle mesure sont une décision que vous devrez prendre en fonction de ce qui convient le mieux à votre site Web.

En tout, il y a une poignée de choses à surveiller lors de l'écriture de CSS. La bonne nouvelle est que tout est possible, et avec un peu de patience, nous allons tout comprendre.

En pratique

Reprenons là où nous nous sommes arrêtés pour la dernière fois sur notre site Web de conférence, voyons si nous pouvons ajouter un peu de CSS.

1- Dans notre dossier "styles-conference", créons un nouveau dossier nommé "assets". Nous stockerons tous les actifs de notre site Web, tels que nos feuilles de style, images, vidéos, etc., dans ce dossier. Pour nos feuilles de style, allons-y et ajoutons un autre dossier nommé "stylesheets" dans le dossier "assets".

2- À l'aide de notre éditeur de texte, créons un nouveau fichier nommé main.css et enregistrons-le dans le dossier "stylesheets" que nous venons de créer.

3- En regardant notre fichier index.html dans un navigateur Web, nous pouvons voir que les éléments <h1> et <p> ont chacun des styles CSS par défaut. Plus précisément, ils ont chacun une taille de police et un espacement uniques autour d'eux. En utilisant la réinitialisation d'Eric Meyer, nous pouvons atténuer ces styles, permettant à chacun d'eux d'être stylé à partir de la même base. Pour ce faire, allons sur le site Web d'Eric, copiez sa réinitialisation et collez-la en haut de notre fichier main.css.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

4- Notre fichier main.css commençant à prendre forme, connectons-le à notre fichier index.html. En ouvrant le fichier index.html dans notre éditeur de texte, ajoutons l'élément <link> dans notre élément <head>, juste après l'élément <title>.

5- Étant donné que nous allons référencer une feuille de style dans l'élément <link>, ajoutons l'attribut de relation, rel, avec une valeur de feuille de style.

6- Nous souhaitons également inclure une référence de lien hypertexte, à l'aide de l'attribut href, vers notre fichier main.css. N'oubliez pas que notre fichier main.css est enregistré dans le dossier "stylesheets", qui se trouve dans le dossier "assets". Par conséquent, la valeur de l'attribut href, qui est le chemin d'accès à notre fichier main.css, doit être assets/stylesheets/main.css.

<head>
  <meta charset="utf-8">
  <title>SAGProfProg</title>
  <link rel="stylesheet" href="assets/stylesheets/main.css">
</head>

Il est temps de vérifier notre travail et de voir si notre HTML et CSS s'entendent. Maintenant, l'ouverture de notre fichier index.html (ou l'actualisation de la page si elle est déjà ouverte) dans un navigateur Web devrait afficher des résultats légèrement différents qu'auparavant.