Comment faire un hamburger en HTML - Un tutoriel pour débutant

Savez-vous que les Américains consomment 13 milliards de hamburgers par an, suffisamment pour faire 32 fois le tour de la terre!

Pour garder cet esprit de burgers, apprenons le HTML et le CSS en fabriquant un burger.

Nous devons d’abord énumérer les composants du Burger:

  • Le top bun
  • Feuille de laitue verte
  • Tomate
  • Fromage
  • Pattie
  • Feuille de laitue verte
  • Le bas bun

Nous avons 7 composants dans ce Burger. Le premier problème lors de la création de ce Burger en HTML est que HTML ne comprend pas ces composants; HTML a ses propres composants, ce sont des éléments. Un de ces éléments est "div". Le nom "div" signifie division - une petite division de l'écran.

En HTML, les éléments sont définis en écrivant son nom de balise entre parenthèses angulaires. Par exemple:

définira un élément “div”.

Créez un fichier nommé “burger.html”. N'hésitez pas à utiliser l'éditeur de votre choix (je recommande VS Code). N'oubliez pas de sauvegarder le fichier avec l'extension «.html». Une fois enregistré, si vous double-cliquez sur le fichier, celui-ci s’ouvrira dans votre navigateur Web.

Il n’affiche encore rien.

Regardez, chaque restaurant a une taille différente de composants dans leur Burger, non? Nous n’avons pas encore décrit la taille de l’élément div dans notre code HTML; par conséquent, il affiche une zone de hauteur 0px, c’est pourquoi nous ne le voyons pas.

Donnons à notre élément div des hauteurs, largeurs et couleurs en utilisant ce que l’on appelle «attribut de style» en HTML. La hauteur de chaque composant de notre burger sera de 10px. Nous l'écrirons ainsi:

\
. Simple n'est-ce pas?

Pour écrire plus d'un style, nous le séparons par un point-virgule, comme suit:

. Allez-y, mettez à jour votre fichier burger.html avec ce code et ouvrez-le dans le navigateur.

Notre premier composant de hamburger est affiché; Faisons-en 7 de plus avec des couleurs différentes:

La première version de notre HTML Burger est prête:

Ça n’a pas l’air délicieux, non?

Faisons en sorte que les cases du haut et du bas soient arrondies. Nous pouvons le faire en utilisant la propriété "border-radius" dans le style. Chaque coin d'élément div a une propriété «border-radius» que nous pouvons modifier.

Nous avons ajouté un rayon de 80 px au coin supérieur droit et supérieur gauche du chignon du haut et un rayon de 20 px au coin inférieur droit et inférieur gauche du chignon du bas.

Notre HTML Burger commence à bien paraître:

Améliorons l’apparence de notre Burger en ajoutant un rayon de bordure à tous ses composants; mais avant cela, nous devons organiser notre code, car les propriétés à l'intérieur de style = “…” deviennent plus grandes.

En HTML, nous pouvons utiliser un