Share
Bienvenue à la troisième leçon de notre série Web Design for Kids, Structure HTML!
Nous allons apprendre à écrire notre site structure avec HTML. Cette structure nous préparera pour le contenu du site, que nous ajouterons dans la prochaine leçon..
Si nous comparions le processus de conception de sites Web à un bâtiment (comme un bâtiment de Tuts + Town!), Le code HTML serait quelque chose de similaire à celui du bâtiment. fondation et encadrement; c'est la base à partir de laquelle tout est construit.
Important! Les fichiers que nous allons créer dans cette leçon peuvent être téléchargés ici..
Nous avons déjà beaucoup parlé de HTML dans cette série, mais nous n’avons pas encore parlé de ce qu’il est. exactement, autre qu'une "langue secrète super cool". Le Web est une question de langues et de communication, et le HTML est une partie importante de tout cela..
HyperText Markup Language, HTML, est un langage qui marque le contenu d'un site pour un navigateur à comprendre et à afficher. Il donne une structure à un ancien fichier texte qu'un navigateur ne pourrait pas lire autrement.
Par exemple, nous ne pouvons pas taper un paragraphe dans nos éditeurs de texte et attendre d'un navigateur qu'il sache simplement que c'est un paragraphe. Le texte du paragraphe doit être à l'intérieur du balisage HTML correct, d'un paragraphe ou élément (un peu de texte drôle comme le ici montre juste que ce texte est aussi du code).
HTML est construit de éléments qui ont une signification importante, comme l'élément de paragraphe mentionné ci-dessus. Chaque élément a une balise d'ouverture (le début) et une balise de fermeture (la fin), le contenu du site étant écrit entre ces deux balises..
Ces balises d'ouverture et de fermeture pour chaque élément sont écrites entre crochets (comme celles-ci: < >), bien qu'une balise de fermeture ait aussi une barre oblique (comme ceci: < / >).
Dans le cours précédent, nous avons élaboré la conception de notre site Web et il est maintenant temps de préparer la structure ou le cadrage de cette conception..
Nous allons commencer par ajouter quelques notes générales à l'aperçu de notre site afin de vous donner une meilleure idée de la meilleure façon de la cartographier..
Dans le corps de notre fichier html, nous aurons plusieurs éléments principaux: un entête, une principale une partie et un bas de page.
Nous avons également parlé de la configuration des fichiers de site dans la leçon précédente. Nous allons donc maintenant mettre ces connaissances en pratique.!
Rappelles toi: "Index" est le nom du fichier et ".html" est l'extension qui indique le type de fichier.
Les sites Web peuvent être constitués de très nombreuses pages. La page principale s'appelle toujours "index.html" pour indiquer "Hé, c'est ici que tout commence!"
Maintenant, écrivons enfin du HTML.
Maintenant, nous pouvons ajouter notre structure. Encore une fois, pensez à cela comme à la construction d'un bâtiment, nous devons mettre en place le cadrage.
Le tout premier morceau de HTML que nous écrirons est le qui dit au navigateur "Hé, c'est un document HTML!"
Ensuite, en vertu de cela, nous avons besoin de la élément:
Tout le reste sera imbriqué dans cet élément.
"Comme un nid d'oiseau?" Eh bien, peut-être plus comme poupées gigognes, ou pour rester avec notre thème de la ville soignée, des bâtiments imbriqués. L'imbrication est ce qui se passe quand on place un élément à l'intérieur d'un autre.
Le morceau de code ci-dessous montre une imbrication d'élément de paragraphe dans l'élément du corps, car il vit entre les balises d'ouverture et de fermeture du corps.
Cet élément de paragraphe est imbriqué dans l'élément body.
Nous facilitons la lecture du code de notre fichier HTML en appuyant sur imbriqué éléments plus à droite. Comme ça:
OK, retour au travail…
Maintenant, niché dans cette html élément nous voudrons ajouter un tête élément.
le tête contiendra le Titre de notre page, qui apparaîtra dans un onglet du navigateur. Beaucoup de nidification!
Tuts Town
Beaucoup de ce qui est inclus dans le tête d'un document HTML n'apparaît pas sur le site Web lui-même, mais aide plutôt à indiquer aux moteurs de recherche, tels que Google, en quoi consiste notre site Web.
De plus, lorsque nous créerons un nouveau fichier pour ajouter des styles à celui-ci, nous connecterons ces deux documents par le biais d’un lien ajouté dans le répertoire. tête. Donc, c'est un peu comme un centre de contrôle en coulisse que les visiteurs de notre site Web ne peuvent pas voir pour la plupart.
Tout sur notre site que nous verrons dans le navigateur sera imbriqué dans le corps, et c'est là que le plaisir commence vraiment!
le entête L'élément n'est pas le même que le tête élément dont nous avons déjà parlé. le entête vit dans le corps et contient généralement toutes les choses au sommet d'un site.
La toute première chose que nous avons en haut de notre site est un en-tête contenant du texte et une image de Tuts + Town.
Tuts Town
Nous ajouterons seulement le entête pour l'instant pour préparer le contenu à inclure.
La partie principale du site Tuts + Town contient les informations les plus importantes. Notre site Web contient la liste des entreprises de la ville. Ainsi, tout ce contenu vivra dans un élément appelé principale.
Nous allons parler des petits conteneurs (comme les trois groupes différents: sommeil, nourriture et magasin) au sein de cette plus grande principale conteneur dans la prochaine leçon lorsque nous ajoutons le contenu.
le bas de page est la partie tout à la fin du site. Nous y verrons généralement des liens, tels que Facebook et Twitter, ou un petit texte informant simplement les personnes qui ont créé le site..
Nous allons ajouter une phrase fièrement en disant que nous avons fait le site dans le bas de page élément.
Rappelles toi: à ce stade, nous ajoutons encore des éléments imbriqués dans le corps.
Faisons maintenant un dernier bilan de notre structure HTML.
Il est facile d’oublier les balises de fermeture, ce qui causerait les erreurs sur notre site Internet. Nous voulons nous assurer que chaque tag que nous avons ouvert a une balise de fermeture.
On dirait que tout est fermé! Il est temps de commencer à ajouter du contenu à cette structure super solide que nous avons créée.
HTML nous permet de rédiger des notes utiles dans notre travail. Ces notes ne seront pas affichées sur notre site Web, mais sont excellentes pour ajouter des informations utiles à d'autres concepteurs qui consultent notre code..
Le fichier HTML de cette leçon (que vous pouvez télécharger) contient plusieurs notes pour nous aider à mieux la comprendre..
Dans cette leçon, nous avons appris à propos de quoi HTML c'est quoi éléments sont, comment nid ces éléments et comment configurer une structure HTML de base avec des éléments de conteneur courants.
Dans la prochaine leçon, nous ajouterons le texte et les images de notre site à la nouvelle structure..
On se voit en ville!
Accentsconagua