Le modèle d`index aura besoin de balisage HTML standard pour la tête et le corps, ainsi que des sections de navigation pour relier les autres pages du site que nous n`avons pas encore créé, et aux sections qui affichent le texte introductif et les données de livre. Une grande partie de la structure HTML et de navigation sera la même dans chaque page de notre site. Au lieu de dupliquer le code réutilisable sur chaque page, vous pouvez utiliser le langage de création de modèles Django pour déclarer un modèle de base, puis l`étendre pour remplacer uniquement les bits qui sont différents pour chaque page spécifique. HTML, HyperText Markup Language, donne la structure et la signification du contenu en définissant ce contenu comme, par exemple, des en-têtes, des paragraphes ou des images. CSS, ou feuilles de style en cascade, est un langage de présentation créé pour Styer l`apparence du contenu, en utilisant, par exemple, des polices ou des couleurs. La ligne 1 définit certaines valeurs par défaut pour le document, telles que le texte et la couleur d`arrière-plan, la largeur de la bordure à ajouter autour du texte, etc. Certaines personnes ne seront pas la peine d`énoncer explicitement des valeurs par défaut comme celles-ci, et la plupart des navigateurs modernes appliqueront leurs propres valeurs par défaut, mais c`est une bonne idée, car il vous permet plus de contrôle sur la façon dont votre site Web va regarder sur différents navigateurs. JavaScript est un langage de programmation basé sur la logique qui peut être utilisé pour modifier le contenu du site Web et le faire se comporter de différentes manières en réponse aux actions d`un utilisateur. Les utilisations courantes de JavaScript incluent les boîtes de confirmation, les appels à l`action et l`ajout de nouvelles identités aux informations existantes. Vous voyez, HTML, développé de retour en 1990, n`était pas vraiment destiné à montrer des informations de formatage physique. Il était initialement destiné uniquement à définir le contenu structurel d`un document, comme les en-têtes par rapport aux paragraphes. HTML a dépassé ces nouvelles fonctionnalités de conception, et CSS a été inventé et publié en 1996: toutes les mises en forme peuvent être supprimées des documents HTML et stockées dans des fichiers CSS (. CSS) distincts.

Dans le processus, nous allons discuter de ce qui est connu comme le modèle de boîte et comment il fonctionne avec HTML et CSS. Nous allons également examiner quelques nouvelles propriétés CSS et utiliser certaines des valeurs de longueur que nous avons abordées dans la leçon 3. Commençons. Avant de commencer notre voyage pour apprendre à construire 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 certaine terminologie commune. À la fin de la fonction de vue, nous appelons la fonction Render () pour créer une page HTML et renvoyer la page en tant que réponse. Cette fonction de raccourci encapsule un certain nombre d`autres fonctions pour simplifier un cas d`utilisation très courant. La fonction Render () accepte les paramètres suivants: chaque élément de chaque page est conforme au modèle de boîte, donc c`est incroyablement important. Prenons un coup d`oeil, avec quelques nouvelles propriétés CSS, pour mieux comprendre ce que nous travaillons avec. En tant que concepteurs Web et développeurs frontaux, nous avons le luxe d`assister à un certain nombre de grandes conférences dédiées à notre métier. Nous allons faire notre propre Conférence, styles Conference, et de construire un site Web pour elle tout au long des leçons suivantes.

C`est parti! La plupart des navigateurs ont ce qu`on appelle les outils de développement. Ces outils nous permettent d`inspecter un élément sur une page, de voir où cet élément réside dans le document HTML et de voir les propriétés et les valeurs CSS qui lui sont appliquées. La plupart de ces outils incluent également un diagramme de modèle de boîte pour afficher la taille calculée d`un élément. Pour vous montrer ce que fait CSS à un site Web, regardez les deux captures d`écran suivantes. La première capture d`écran est le billet de blog de mon collègue, mais montré en HTML de base, et la deuxième capture d`écran est que le même billet de blog avec HTML et CSS.

Comments are closed.