• By Alexander Jenni
• In Design
• Posted January 24, 2015

Rédaction de votre première page Web

Une fois que vous avez une idée du type de page Web que vous souhaitez créer, vous devrez commencer à écrire des HTML et des CSS. HTML est un langage de balisage qui a été créé uniquement pour créer des pages Web. L'idée est que, à leur entièreté, les pages Web ne sont qu'un tas de textes et d'images disposés sur l'écran de différentes façons, et le balisage est juste un moyen d'attacher des instructions sur la façon de créer ces textes et ces images. Par exemple, prenez cette liste simple de chemins sur codeschool.com: Il semble que beaucoup de choses se passent, mais si nous supprimes tout le formatage visuel, cela ressemblera à ceci: Une liste empilée des chemins scolaires des codes Maintenant, il y a beaucoup moins de choses à faire. La seule différence entre les deux est que pour générer la capture d'écran dans la deuxième image, nous avons supprimé tout le code CSS et laissé juste le code HTML en place - code HTML qui ressemble beaucoup à ceci:

Les mots «Chemins», «Cours» et «Écrans d'écran» ne sont que du texte, mais en les mettant dans ces balises <nav> et <li>, le navigateur Web sait les afficher comme une liste à puces. La balise <img> est utilisée pour charger une image - dans ce cas, l'icône de badge circulaire qui représente ce Chemin d'apprentissage. <H2> signifie «titre 2» - vous pouvez considérer les mots-clés comme des mots-clés décrivant les principales sections d'une page. Enfin, <p> est court pour "paragraphe", et chaque fois que vous devez afficher un texte simple sur une page Web, il sera probablement dans une balise <p>. Les balises <main> et <section> ne sont qu'un moyen de grouper ce contenu à un niveau encore plus élevé. Par exemple, chaque balise <img>, <h2> et <p>est enveloppée dans une balise <section> pour montrer que ces trois sont toutes des informations connexes. Chacune de ces sections fait partie de la zone principale de la page, de sorte que se comporte dans une balise <main>. Il existe plus de 100 balises HTML spécifiques qui ont tous un but différent, et au moins savoir comment trouver la bonne étiquette qui correspond à votre besoin spécifique est une partie importante d'un développeur web.

Quel navigateur dois-je utiliser?

Le navigateur Web sait comment prendre toutes ces étiquettes et le contenu en elles et les afficher en tant que page Web. Mais si tous les navigateurs ont la possibilité d'afficher des pages Web, alors pourquoi n'y a-t-il qu'un seul au lieu de plusieurs? Eh bien, chaque navigateur implémente le rendu de HTML et CSS un peu différemment. Il s'agit en fait d'une source de stress pour les développeurs web: ils n'ont aucun moyen de contrôler quel navigateur Web un utilisateur connaîtra avec son site, de sorte qu'il passe beaucoup de temps à peaufiner CSS pour s'assurer qu'il affiche le plus près possible de tous les autres Navigateurs.

Styling the Page

Alors que HTML est une langue de balisage utilisée pour organiser le contenu sur une page, CSS est une langue distincte pour changer le style de la manière dont ces balises sont affichées. Nous avons commencé cet article en supprimant tous les CSS, alors regardons comment nous pouvons ajouter CSS. Il est préférable de stocker votre code CSS dans un fichier séparé à partir de votre code HTML, puis de le lier à partir de votre code HTML. Par exemple, si vous avez un fichier CSS nommé main.css dans le même dossier qu'un fichier HTML nommé index.html, vous lieriez à partir de du fichier index, comme ceci: Ensuite, dans main.css, vous pouvez écrire des règles CSS qui modifient la façon dont les balises HTML apparaissent dans un navigateur. Rappelez-vous comment nos sections ressemblaient à des boîtes avec une image et du texte, mais lorsque nous avons retiré le fichier CSS, ces boîtes ont disparu? Nous pourrions les ajouter de nouveau comme suit: Ce CSS sélectionne toutes les étiquettes de section et applique quatre propriétés à ces balises. Qu'en est-il du menu de navigation? Nous voulons que ces liens Chemins / Cours / Screencasts apparaissent de gauche à droite au lieu d'être empilés de haut en bas, et nous pourrions accomplir cela comme ceci: Ce CSS supprime les points de balle de chacun des trois éléments de la liste, puis l'affichage: la règle en ligne indique les éléments de la liste pour afficher de gauche à droite. À l'instar des balises HTML, il existe des centaines de propriétés CSS et quelques douzaines de façons différentes de choisir les balises HTML pour appliquer ces règles, et même si un développeur Web n'a pas nécessairement besoin de mémoriser toutes ces propriétés, il faut que ce soit familier. Comment rechercher ceux dont ils ont besoin et les mettre en pratique.

• 28
• 355
• 107