Comment créer une page Web HTML. Comment créer une page Web. Démonstration de la structure d'un document HTML
Ou, ou mieux encore, les quatre, car beaucoup Éléments HTML sont présentés différemment dans divers programmes visualisation, et il est bien préférable de garder cette différence sous contrôle.
En plus du navigateur, nous aurons besoin d'au moins une sorte d'éditeur de texte, par exemple le Bloc-notes de Windows ou le Bloc-notes, mais Dreamweaver est idéal. Le programme est nécessaire pour préparer les fichiers HTML et le navigateur est nécessaire pour visualiser et contrôler ce qui a été produit. A l'aide de ces outils nous créerons nous-mêmes un site WEB ordinateur local, nous le placerons ensuite sur l'un des serveurs WWW sur Internet, rendant ainsi vos pages WEB accessibles au monde entier.
Préparer la création d'un site WEB
A titre d'exemple, préparons des pages WEB pour une entreprise. Appelons-la "Société SD", disons qu'elle travaille sur le terrain systèmes automatiques gestion. L'objectif du site WEB est de faire connaître au monde entier l'entreprise, son champ d'activité, et de trouver des partenaires et des clients.
Les fichiers de notre site WEB nécessitent un dossier séparé.
Créez un dossier nommé WEB sur n'importe quel disque dur de votre ordinateur. Lançons maintenant le programme Notepad et mettons-nous au travail.
Ouvrez un programme, par exemple le Bloc-notes, en cliquant sur le bouton Démarrer de la barre des tâches et en sélectionnant Programmes - Accessoires - Bloc-notes dans le menu qui apparaît.
Vous pouvez utiliser n'importe quel autre éditeur de texte. Mais dans dans ce cas vous devez enregistrer le fichier sous texte brut pour éviter d'être inclus dans Document WEB marques de formatage tierces.
Commençons par présenter les principales balises qui déterminent la structure de tout document HTML. Rappelons que dans le code HTML, vous pouvez utiliser n'importe quelle casse de caractères - supérieurs ou inférieurs.
1ères balises
Saisissez les balises principales suivantes à l'aide du clavier, en plaçant l'une d'entre elles, sans compter la balise de fermeture, dans la ligne la plus récente.
Pour saisir des balises appariées, vous pouvez utiliser des opérations de copier-coller via le tampon Échange Windows Avec par l'ajout suivant barre oblique /.
Rappelons que le 1er et le dernier les balises signifient le début et la fin du document, élément
… définit le titre de la page WEB, l'élément …
- le corps du document, et dans l'élément nous sommes sur à l'heure actuelle indiquer le titre de la page WEB.
Entre l'ouvreur
et fermeture utilisez des balises pour insérer le titre du document - SD Company. Cet élément devrait ressembler à ceci :
Société SD
Rappelons que le titre d'une page WEB doit être petit et montrer au maximum son contenu.
Notre prochaine tâche est d'insérer dans le corps du document entre les balises
…
un petit texte de salutation aux invités de la page WEB.
Insérer une ligne vide entre les balises
Et
et saisissez-y le texte suivant :
Bienvenue sur la page de l'entreprise SD ! Ici vous découvrirez nos activités, produits logiciels notre entreprise et les équipements que nous produisons.
Pour chaque page WEB vous pouvez retrouver la couleur de fond et la couleur du texte. Cela se fait en utilisant les attributs bgcolor et text de la balise d'ouverture.
. Il existe deux options pour définir une couleur comme valeur d'attribut :
indication verbale du nom de la couleur, par exemple blanc. HTML fournit seize de ces noms ;
une désignation numérique en notation hexadécimale, par exemple "#ffffff" - blanc comme neige, qui montre comment la couleur est formée à partir des couleurs principales - rougeâtre, verdâtre et bleu.
Coloration de la première page WEB
Naturellement, l’indication verbale de la couleur est plus confortable et compréhensible. D'un autre côté, les désignations numériques offrent plus de possibilités car elles permettent d'indiquer réellement n'importe laquelle des 16 777 215 couleurs, tandis que les désignations verbales sont limitées à seulement seize couleurs.
Listons quelques noms de couleurs : noir (foncé), gris (grisâtre), rouge (rougeâtre), vert (verdâtre), aqua (bleu).
A titre d'exemple, nous utilisons une couleur bleue pour le fond de notre page WEB, et une couleur jaunâtre pour le texte.
Insérez-le dans la balise d'ouverture
attributs bgcolor="blue" et text="jaune". Cette balise devrait ressembler à :
En plus d'indiquer la couleur, pour Contexte WEB pages, vous pouvez également utiliser un croquis préparé à l’avance. Mais nous en reparlerons à l'avenir.
Dans la fenêtre du programme Notepad, sélectionnez la commande de menu Fichier - Enregistrer. La boîte de dialogue Enregistrer sous apparaît à l'écran.
Ouvrez le dossier WEB que vous avez créé précédemment, dans lequel tous les fichiers doivent être enregistrés. Fichiers WEB site.
Dans le champ de saisie Nom du fichier, saisissez other.html - c'est ainsi que nous appellerons ce fichier.
Attention : vous devez préciser l'extension du nom du fichier HTML pour que le navigateur puisse l'ouvrir. Vous pouvez également écrire du HTML, mais il s'agit d'un format obsolète et strictement déconseillé.
Voyons le résultat du travail
Vous pouvez désormais consulter les résultats de notre travail.
Sans le fermer, réduisez la fenêtre du Bloc-notes.
A l'aide de l'Explorateur (Explorateur Windows), ouvrez le dossier WEB dans lequel vous avez enregistré l'autre fichier.html et double-cliquez sur son icône. Le navigateur par défaut sera lancé et l'autre document.html s'ouvrira dans sa fenêtre.
Vous voyez, le titre de la fenêtre du navigateur indique le titre du document que nous avons saisi dans l'élément
, et la couleur de l'arrière-plan et du texte de la page est la même que celle indiquée dans la balise . Le texte apparaît dans un paragraphe et est aligné à gauche.
La taille de la police du texte peut être plus grande ou plus petite dans votre navigateur que sur l'image. Dans ce cas, sélectionnez la commande de menu Affichage - Taille de police - Moyen (Affichage - Taille du texte - Moyen) dans Navigateur Internet Explorateur à installer taille moyenne fonte.
Il faut comprendre que divers navigateurs peut afficher le contenu du 1er et le même différemment Fichier HTML. Parce que quand Développement WEB pages, il est préférable de toujours afficher le résumé dans tous les navigateurs les plus populaires - Internet Explorer, Opéra, Mozilla. Dans ce cas, vous serez persuadé que l’invité de votre site WEB verra exactement ce que vous souhaitez lui montrer.
Affichez le fichier créé dans un autre navigateur. A ce stade des travaux, les différences ne seront pas perceptibles.
Sans fermer, réduisez les fenêtres du navigateur.
Parce que dans l'élément
Nous avons saisi le texte sans le diviser en paragraphes, puis dans le navigateur il est affiché comme 1er paragraphe et aligné à gauche. Nous devons maintenant donner au texte un aspect plus joli.
Messieurs, bonne humeur à tous) Aujourd'hui, j'ai décidé d'écrire un article sur le sujet - Comment créer votre propre page Web. J'ai été inspiré par ce sujet par des lecteurs et amis qui, pour une raison quelconque, ne font toujours pas la distinction entre les types de sites et de pages sur Internet. J'appelle très rarement quelque chose une page Web))) Cependant, beaucoup de mes amis le disent souvent. Surtout pour eux, j'ai décidé de décrire les principaux types de pages Web que vous pouvez créer vous-même afin d'avoir une sorte de représentation de vous-même en ligne.
Avant de créer une page Web, vous devez absolument créer un email ou adresse email. J'ai décrit les options de création dans cet article - . Et si vous disposez d’une adresse email, passons aux options de création de votre page web personnelle. Poursuivez votre lecture pour découvrir comment vous aider à créer votre propre page Web.
Site d'une page
La méthode la plus ancienne))) Pour cela, vous devez apprendre les bases du langage HTML. Faire cela à notre époque n'est pas du tout nécessaire ; il existe un million de services, qui seront discutés ci-dessous. Cependant, si vous souhaitez comprendre comment fonctionne un site Web et, en partie, Internet, essayez de créer vous-même un site Web d'une page. J'ai décrit comment procéder dans l'article -. Il existe des options pour créer un site Web d'une page à l'aide de créateurs de sites Web et de plateformes gratuites.
Page sur le réseau social VKontakte
Je pense qu'à notre époque, la phrase : « Je me suis créé une page sur Internet » s'applique surtout au réseau social Vkontakte. VK est le plus populaire réseau social dans la CEI. Créer votre page ici ne prend que 1 minute. Par ailleurs, des dizaines de fonctions utiles pour les activités sur Internet. J'ai beaucoup écrit sur VKontakte et je prévois d'en écrire encore plus)) Avec ce réseau social, vous pouvez...
VKontakte vous permet également de créer une URL pratique vers votre page Web, au lieu de l'URL standard lors de l'enregistrement http://vk.com/id8032931. Ensuite, vous pouvez le changer en un beau - http://vk.com/vasheimya.vashafamiliya.
Page Facebook
Si VKontakte est le réseau social le plus populaire de la CEI, alors Facebook est le réseau social n°1 au monde. Facebook est considéré comme destiné aux personnes avancées Utilisateurs russophones))) Mais personnellement, je pense que tout cela est dû au fait que Facebook est très populaire et pratique.
Tout comme sur VKontakte, vous pouvez vous attribuer une belle adresse pour votre page Web. Manuel complet- J'ai décrit comment créer une page Web sur Facebook dans l'article -.
Blogue
Un blog est mon option la plus recommandée pour créer votre propre page Web. Le blog offre des milliers d’opportunités de réalisation de soi et est très simple à utiliser. Souvent aussi gratuit que les pages Web des réseaux sociaux. Je vous propose une sélection d'articles sur la création d'une page web à l'aide d'un blog :
- rapide, mais avec des frais d'hébergement et un domaine séparé.
est une plateforme de blogs de Google. Intégré à de nombreux services Google. Très pratique si vous êtes un fan de Google))
est la plateforme de blogs qui se développe le plus dynamiquement. J'ai lu des statistiques dans une publication américaine selon lesquelles Tumblr est plus populaire parmi les enfants américains de 12 à 13 ans que Facebook !!! Je pense que c'est un indicateur de la commodité et du développement de cette plateforme.
— voici les manuels de presque toutes les plateformes de blogs connues, y compris celles ci-dessus.
Agenda
Voici toutes les principales options pour créer votre page Web ou, en d’autres termes, votre présence sur le Web. Littéralement 1 minute et vous êtes déjà immergé dans l'espace du World Wide Web. Bonne navigation sur le Web !
Bonjour, chers lecteurs du blog. Avec cet article, nous allons commencer à apprendre les bases du langage HTML.
Vous savez probablement déjà que le principal Langue Internet est langage hypertexte Balisage HTML(Langage de balisage hypertexte). Dans cet article, nous découvrirons notions de base HTML et apprenez à créer des pages WEB simples.
Commençons par le plus important, regardons comment ça marche World Wide Web—Internet. Pour produire des pages Web, vous créez des fichiers écrits en HTML et les placez sur un serveur Web. Après cela, n'importe quel navigateur installé sur un appareil ayant accès à Internet, qu'il s'agisse d'un ordinateur, d'un téléphone ou d'une tablette, peut trouver vos pages Web.
Serveur Web- Ce ordinateur ordinaire avec spécial logiciel avec accès Internet. Il écoute en permanence les requêtes des navigateurs concernant les pages Web, les images, les fichiers audio et vidéo. Ayant reçu une requête pour l'une de ces ressources, le serveur la recherche et l'envoie au navigateur.
Navigateur- Ce programme spécial, conçu pour naviguer sur des sites Web tels qu'Internet Explorer. À l'aide d'un navigateur, vous parcourez des sites Web en cliquant sur des liens. Tout clic de ce type amène le navigateur à demander la page HTML au serveur Web, à recevoir une réponse et à afficher la page dans sa fenêtre. C'est lors de l'affichage de la page que le langage HTML commence à fonctionner ; il indique tout au navigateur sur la structure et le contenu de la page web. Utilisation des commandes - balises, HTML indique au navigateur où commencent les paragraphes de texte, quelle partie du texte constitue un titre et où insérer des tableaux et même des images. Et les balises sont des mots entre crochets, par exemple
,
,
.
Une boutique en ligne est nécessaire de toute urgence, et il est temps de apprendre le HTML, CSS, PHP et autres technologies ne sont pas disponibles. Ensuite, vous pouvez simplement louer une boutique en ligne avec des fonctionnalités entièrement mises en œuvre et une optimisation pour les moteurs de recherche.
Langage HTML et ses balises
La première version du langage HTML est apparue en 1992. Au moment de 2013, la spécification est en cours d'élaboration nouvelle version HTML numéro 5. Le développement de cette spécification est réalisé par l'organisation Mondial Web Consortium, ou W3C en abrégé. L'organisation W3C développe d'autres standards Web. Vous pouvez vous familiariser avec ces normes sur leur site Web www.w3.org. À propos, de nombreux navigateurs Web prennent déjà en charge certains Capacités HTML 5.
Je suggère de commencer à apprendre le HTML tout de suite avec un exemple. Créons donc notre première page Web. Tout éditeur de texte est adapté à la création de pages WEB. Je suggère d'abord d'utiliser Windows intégré Bloc-notes(en général, à l'avenir, je recommande d'utiliser pour éditer du code html). Vous pouvez le trouver : « Démarrer->Tous les programmes->Accessoires->Bloc-notes ». Créons une page sur les voitures. Alors, ouvrez le Bloc-notes et tapez-y le texte suivant :
Exemple de page Web
Site sur les voitures.
Bienvenue sur notre site automobile. Vous trouverez ici de nombreux articles intéressants et utiles sur voitures. Le site contient des descriptions de nombreuses voitures importées et nationales.
Ensuite, enregistrez la page Web créée dans un fichier nommé index.html. Dans ce cas, dans la boîte de dialogue d'enregistrement du fichier, vous devez définir le codage sur UTF-8 et mettre le nom du fichier entre guillemets, sinon le Bloc-notes ajoutera extension txt, et notre fichier s'appellera index.htm.txt :
Il ne reste plus qu'à ouvrir le fichier créé dans le navigateur et à regarder le résultat. Pour ce faire, vous pouvez utiliser le Navigateur WindowsInternet Microsoft Explorer, ou tout autre navigateur installé sur votre ordinateur, en double-cliquant sur le fichier index.html ou en faisant glisser le fichier sur l'icône du navigateur. Ouvrez-le et voyez quelque chose comme ceci :
Nous avons donc créé une page Web dans le Bloc-notes qui, bien qu'un peu simple, contient déjà un gros titre et un paragraphe de texte automatiquement divisé en lignes et contient une partie en gras.
Qu'est-ce qu'une balise ?
Parlons maintenant davantage de la structure des pages. Regardons le fragment :
Site sur les voitures
.
Ici, nous voyons le texte qui apparaît sur la page comme titre, entouré de balises
Et
. Qu'est-ce qu'une balise en HTML ?
Balise HTML- Ce mots ordinaires et les caractères placés entre crochets, par exemple
,
,
. Alors tague
est la balise d'ouverture, balise
balise de fermeture, et le texte entre eux est appelé le contenu de la balise. Marquez également
et étiquette
sont appelés balises appariées. Ensemble, la balise d'ouverture, le contenu et la balise de fermeture forment un élément de document HTML. Il existe également des éléments constitués d'une balise d'ouverture :
Donc tag jumelé
définit un élément d'en-tête de premier niveau. Il y a six niveaux de rubriques au total, ce sont les éléments
—
.
Les éléments peuvent être en bloc ou en ligne (texte). Éléments de bloc effectuer un formatage structurel de la page. Les éléments de bloc sont toujours affichés sur la page avec nouvelle ligne et sont en retrait de éléments voisins. Éléments en ligne effectuer un formatage de texte direct ou un formatage logique. Élément
est un élément de bloc.
C'est tout pour moi !!! Rendez-vous dans les prochains articles !
Le site est en réalité une collection de fichiers de code en plusieurs langues. Et le code peut être écrit dans n’importe quel éditeur de texte normal, même dans le Bloc-notes. Bien sûr, il est préférable d'utiliser des logiciels plus avancés, comme Notepad++ ou des programmes de développement à part entière. Bon, d'accord, voyons comment créer un site Web dans le bloc-notes en utilisant HTML et css.
Comment créer un site Web à partir de zéro en HTML dans le Bloc-notes – instructions étape par étape
Et ici c'est le nôtre mot-clé–HTML. C’est à partir de ce langage que commence la création d’un site internet. Il est impossible d’imaginer le développement Web sans cela. C'est comme essayer de faire cuire une soupe sans eau. Ne vous précipitez pas pour fermer la page si vous êtes un zéro absolu en HTML. Dans ce instructions étape par étape Nous allons créer ensemble un site Web simple, et j'essaierai d'expliquer les morceaux de code que nous ajouterons au bloc-notes.
Étape 1 : Créer des fichiers
Pour créer un site Web HTML dans le bloc-notes, vous devez commencer par créer deux document texte dans certains dossier vide. L'un devrait recevoir l'extension .html et la seconde .css. Les noms peuvent être n'importe quoi. Attention, pas site.html.txt, mais site.html.
Pour ce faire, lors de l'enregistrement manuel du document, ajoutez-y une extension à l'aide d'un point. On fait la même manipulation avec le deuxième fichier, mais on lui donne l'extension .css. Oh ouais, n'oublie pas de sélectionner l'encodage UTF-8.
Étape 2. Pose de la structure
Les fichiers ont été créés et vous pouvez commencer à travailler. Ouvrez le document HTML. C'est ici que se dérouleront les principaux travaux. L'élément constitutif de ce langage est constitué de balises, des mots spéciaux entre crochets qui indiquent au navigateur ce qu'il doit afficher sur une page Web.
Insérons quelque chose dans notre document, sinon il est complètement vide.
Bonjour le monde!
Bonjour le monde!
Du coup, on a inséré un tas de balises d’un coup et peut-être que vous ne comprenez rien. Essayez d'ouvrir la page dans votre navigateur. Là tu verras les mots "Bonjour le monde" si tout est fait correctement. Il s’agit en fait de la page Web la plus simple.
html est un conteneur pour toutes les autres balises. Il contient la page Web entière. Tout en haut, nous avons indiqué le type de document. étiquette de tête– il s’agit d’informations de service sur la page. Ici, nous utilisons la balise
définissez le nom de la page qui sera affichée dans la ligne du navigateur en haut. Ensuite, nous définissons l'encodage et incluons le fichier CSS à l'aide de la balise <link> .</p><p>Comme vous pouvez le voir, il existe des balises appariées et simples. Maintenant, je ne m'attarderai pas là-dessus en détail, cela dépend des fonctions remplies par l'équipe.</p><h3>Étape 3 : Planification</h3><p>Laissons maintenant le code tranquille pendant une minute et réfléchissons. À votre avis, de quoi consiste une ressource Web typique ? Bien sûr, il y en a beaucoup sur le réseau et ils sont tous différents, mais il y a des éléments structurels identiques, non ? Par exemple, vertical et <a href="https://olegshein.ru/fr/reviews/gorizontalnoe-menyu-v-vk-kak-sdelat-menyu-vkontakte-polnoe/">menus horizontaux</a>, les colonnes latérales, les en-têtes (tout en haut où se trouve le logo) et le pied de page (le bas du site).</p><p>Voyons donc comment créer notre premier site Web simple. Dans ce domaine, tout doit commencer par la planification. Il est nécessaire de mettre en évidence les parties structurelles du futur modèle, en quoi il consistera. Disons que notre modèle simple aura un en-tête, une partie de corps, une colonne latérale et un pied de page ou pied de page (la même chose).</p><h3>Étape 4. Commençons !</h3><p>Cela signifie que nous avons besoin de 4 blocs principaux. En HTML, il est possible d'imbriquer un nombre illimité d'autres balises dans une balise appariée, je suggère donc la méthode suivante : <br>Créez un conteneur commun dans lequel tous nos 4 blocs principaux seront situés.</p><p>Revenons donc au code. Nous l'écrirons dans la balise body, puisqu'elle représente la future page. Vous pouvez supprimer l'inscription en toute sécurité <b>"Bonjour le monde"</b>, et écris ceci :</p><p> <div id="main">
<div id="header">C'est notre chapeau</div>
<div id="sidebar">Ceci est une barre latérale</div>
<div id="content">C'est du contenu</div>
<div id="footer">Sous-sol</div>
</div>
</p><p>Ainsi, nous avons créé un grand bloc dans lequel nous avons placé les 4 restants. Le bloc en HTML est créé par paires <a href="https://olegshein.ru/fr/malfunction/raznica-mezhdu-class-i-id-na-primere-tega-div-blochnaya-verstka-tegov-div/">balise div</a>, qui n'a pas <a href="https://olegshein.ru/fr/malfunction/kak-nazyvaetsya-kanal-na-kotorom-v-kakoe-dolzhno-byt-imya-klyuchevoe-slovo--/">attributs requis</a>, mais j'ai immédiatement ajouté un identifiant unique (identifiant) à chacun d'eux afin de le délivrer plus tard <a href="https://olegshein.ru/fr/communications-and-the-internet/css-primer-opisanie-markirovannogo-spiska-pravila-css-dlya-nastroiki/">apparence</a> via CSS.</p><p>Copiez ce code pour vous-même et actualisez la page dans votre navigateur. Pour l’instant, vous ne voyez que 4 lignes de texte devant vous, mais ce n’est pas grave, maintenant nous allons les transformer en site Web !</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/2-1.jpg' height="89" width="160" loading=lazy loading=lazy><br></p><h3>Étape 5. CSS nous aidera</h3><p>Commençons maintenant à concevoir nos blocs. Bien entendu, vous devez commencer par le plus grand conteneur. Nous avons créé un fichier CSS au tout début, mais nous n'y avons jamais rien écrit. Il est temps de résoudre ce problème. Ajoutons-y le code suivant :</p><p>*( dimensionnement de la boîte : border-box ) #main ( largeur : 810 px ; marge : 0 auto ; bordure : 5 px noir uni )</p><p>La première règle définit le comportement des blocs afin que le remplissage et les bordures n'augmentent pas leur largeur. Plus loin dans le code nous faisons référence au bloc avec l'identifiant main , pour ce faire, il suffit de mettre un hachage et d'ajouter le nom de l'identifiant. Immédiatement après, ils ouvrent <a href="https://olegshein.ru/fr/malfunction/php-logicheskie-vyrazheniya-operacii-v-php-operator-figurnye-skobki/">croisillons</a>, qui répertorie les règles d'apparence qui s'appliqueront à l'élément.</p><p>Nous définissons la largeur du conteneur global sur 810 pixels, la règle automatique margin: 0 place le bloc au centre, c'est-à-dire que notre site sera bien affiché au centre et non appuyé sur le bord gauche. La dernière propriété, border, ajoute une bordure noire pleine de chaque côté du bloc.</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/3-1.jpg' height="98" width="181" loading=lazy loading=lazy><br></p><p>Eh bien, nous avons créé des styles pour le conteneur principal. Sur la page web nous affichons toujours 4 lignes de texte, mais dans un cadre noir. Passons à autre chose.</p><p>Il est maintenant temps de personnaliser l’apparence des quatre principaux éléments constitutifs de notre page. Je fournirai immédiatement le code et le commenterai ci-dessous.</p><p>#header( hauteur : 100 px ; bordure inférieure : 5 px noir uni ) #sidebar( largeur : 200 px ; hauteur : 500 px ; flotteur : gauche ; bordure droite : 5 px noir uni ) #content( largeur : 600 px ; flotteur : droite ; hauteur : 500px ) #footer( hauteur : 75px ; clair : les deux ; bordure supérieure : 5px noir uni ; )</p><p>Comme vous pouvez l'imaginer, j'accède simplement aux éléments avec <a href="https://olegshein.ru/fr/instructions/your-apple-id-was-used-use-different-apple-ids-for-icloud-and-itunes/">différents identifiants</a>, les décrivant de haut en bas. Tout d'abord, les styles sont définis pour l'en-tête - j'ai défini la hauteur sur 100 pixels et une bordure en bas afin qu'elle soit séparée du reste des blocs.</p><p>Mais ensuite les choses deviennent plus intéressantes. Le fait est que par défaut les blocs sont affichés de haut en bas si vous les écrivez simplement en code HTML et non <a href="https://olegshein.ru/fr/security/kak-rabotaet-konferenc-svyaz-dopolnitelnye-ogranicheniya-i/">règles supplémentaires</a> ne demandez pas. Mais la colonne latérale n’est qu’une colonne latérale, à afficher à côté de la partie principale de la page. Comment faire cela ? Regardez, nous définissons la hauteur, la largeur, le cadre et une autre propriété de la barre latérale (float : gauche).</p><p>Cette règle signifie que l'élément sera poussé vers le bord gauche du parent (c'est-à-dire l'élément parent - le bloc #main). Super, nous allons maintenant définir la même propriété sur le bloc avec le contenu et elle sera également appuyée sur le bord gauche, mais après la colonne latérale.</p><p>Bien sûr, le contenu prend plus de largeur, car c’est ainsi qu’il devrait être, mais nous définissons la hauteur de la même manière. Sur un vrai site Web, il y aura généralement beaucoup d’informations dans le bloc principal, vous n’avez donc pas du tout besoin de définir la hauteur. Il en va de même pour une barre latérale si des informations y sont constamment ajoutées. Mais à titre d'exemple, nous avons explicitement spécifié la hauteur afin que les tailles des blocs soient clairement visibles.</p><p>Enfin, il reste à décrire le dernier bloc - <b>pied de page</b>. Cela donne une petite hauteur, un cadre avec une hauteur et une autre nouvelle propriété pour nous. Il s'agit de la propriété clear avec la valeur Both . Pourquoi l'écrire ? Nous avons pressé les deux blocs précédents vers le bord gauche. Ils sont devenus ce qu'on appelle les blocs flottants, mais par défaut, les blocs ordinaires peuvent ne pas remarquer les blocs flottants et les écraser.</p><p>Pour éviter que cela ne se produise, notre sous-sol a reçu la commande suivante : regardez, <a href="https://olegshein.ru/fr/applied/obychnyi-blok-launcher-1-1-0-blocklauncher-pro-dlya-android-obnovlenno-poslednyaya-versiya/">bloc régulier</a>, il y en a deux qui flottent au-dessus de vous. Remarquez-les et placez-vous plus bas qu’eux. C'est la commande essentiellement donnée par la propriété clear: Both, qui force un bloc régulier à être positionné en dessous de tous les blocs flottants.</p><p>Super, actualisez maintenant la page dans votre navigateur. Eh bien, cela ressemble déjà beaucoup plus à un site Web, du moins dans sa structure.</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-v-bloknote.jpg' width="100%" loading=lazy loading=lazy></p><h3>Étape 6. Décorez le site</h3><p>Le suivant, très <a href="https://olegshein.ru/fr/pots/kak-skryt-informaciyu-v-feisbuk-kak-nastroit-feisbuk-pod-sebya-osnovnye-etapy/">étape intéressante</a>– ajoutons quelques couleurs à notre site. Laissez-le en avoir plus d'un <a href="https://olegshein.ru/fr/oshibki-i-devajjsov/kak-sdelat-belyi-fon-na-foto-kak-sdelat-fon-fotografii-belym/">fond blanc</a>, mais quelque chose de plus intéressant. Vous pouvez définir l'arrière-plan de deux manières :</p><ul><li>Contexte général pour l'ensemble du site à la fois, en l'attribuant au conteneur commun #main</li><li>Si chacun des blocs principaux doit avoir sa propre nuance de couleur, vous devez alors définir une couleur pour chacun séparément. Mais il vaut mieux ne pas trop s'emballer - un en-tête rouge, un contenu vert et un sous-sol jaune n'auront pas l'air très bien, je vous le dis tout de suite</li>
</ul><p>Je suggère de le faire en utilisant la première méthode. J'ai trouvé une jolie teinte bleu clair dans un service en ligne, que je propose d'utiliser comme fond du site. Ajoutez la propriété suivante aux styles généraux de conteneur :</p><p>#main( arrière-plan : #B3C1E6 )</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/fon.jpg' width="100%" loading=lazy loading=lazy></p><p>Nous mettons à jour la page et veillons à ce que notre site présente une belle palette de couleurs bleu clair. Maintenant, je propose d'avancer un peu au niveau de la conception - laissez l'arrière-plan de l'en-tête et du pied de page être plus sombre que celui des autres blocs. Vous pouvez ajouter les lignes de code suivantes :</p><p>#en-tête, #pied de page (arrière-plan : #9091DA)</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/4-1.jpg' width="100%" loading=lazy loading=lazy></p><p>Ici, nous avons postulé <a href="https://olegshein.ru/fr/malfunction/what-type-of-screen-matrix-is-best-for-a-smartphone-displays-igzo-a-new-face-of-the-technique-of-apple/">nouvelle technologie</a>– deux blocs séparés par des virgules et <a href="https://olegshein.ru/fr/oshibki-i-devajjsov/operacionnaya-sistema-linux-mint-18-russkaya-versiya-osnovnye/">nouveau fond</a> s’appliquera aux deux.</p><h3>Étape 7. Travailler sur l'en-tête</h3><p>Les travaux ultérieurs consisteront à décorer des blocs individuels pour les rendre plus attrayants. Commençons par l'en-tête. Qu'avons-nous habituellement dans notre chapeau ? Droite, <a href="https://olegshein.ru/fr/download/krasivoe-nazvanie-kompanii-v-konsoli-chrome-udobnye-vozmozhnosti-konsoli/">beau nom</a> site internet et logo. C'est ce que nous ajouterons.</p><p>Je suggère de commencer par le logo. Puisque nous créons le site avec <a href="https://olegshein.ru/fr/instructions/yandeks-korporativnaya-pochta-dlya-domenov-vhod-servisy-elektronnoi-pochty-dlya/">en utilisant HTML</a>, placez le logo de cette langue dans le coin gauche de l'en-tête. J'ai trouvé ce joli logo sur Internet.</p><p>Il doit être téléchargé et placé dans le même dossier où le document HTML est stocké. <br>Voyons maintenant :</p><p>#header (arrière-plan : # 9091DA url (html.jpeg) centre sans répétition à 5 %)</p><p>J'ai appelé l'image html, et son format est jpeg, voici donc l'entrée. Ensuite, nous avons également spécifié les commandes suivantes : l'image d'arrière-plan ne doit pas être répétée, mais doit être placée avec un décalage horizontal de 5 % par rapport au début du bloc et centrée verticalement. La position horizontale est toujours enregistrée en premier, puis la position verticale.</p><p>Naturellement, si votre image s'appelle différemment ou a un format différent, vous devez alors modifier légèrement le code donné. Super, nous avons un logo. Il est temps de supprimer l'inscription - c'est l'en-tête du site et de mettre un beau titre à sa place. Supprimez le texte de l'en-tête et collez-le ici <a href="https://olegshein.ru/fr/application/watch-os-4-ne-ustanavlivaetsya-novye-elementy-interfeisa-drugie-novye/">nouvel élément</a>:</p><p> <div id="header">
<div id="title">Nom du site</div>
</div>
</p><p>Il faut maintenant le formaliser :</p><p>#titre (taille de la police : 32 px ; flotteur : gauche ; marge-gauche : 200 px ; famille de polices : Tahoma ; couleur : jaune ; rembourrage supérieur : 20 px ; ombre du texte : 0 0 5px orange ; )</p><p>Nous avons défini un nombre décent de styles : taille de police, famille de polices, titre à gauche, remplissage à gauche, couleur, haut. <a href="https://olegshein.ru/fr/oshibki-i-devajjsov/margin-ili-padding-razmyshleniya-o-tom-chto-i-gde-ispolzovat-padding-margin-i-border-zadaem/">rembourrage</a> et l'ombre du texte. Cela ne sert à rien d'expliquer comment fonctionne chaque propriété maintenant, il suffit donc de copier le code et de le coller dans la feuille de style (fichier css).</p><p>Ça y est, le simple chapeau est prêt. Bien entendu, sur un vrai site Web, il peut contenir d’autres liens, adresses, etc. Eh bien, ajoutons quelque chose pour plus de réalisme. Ce code html doit être inséré dans le contenu de l'entête du site.</p><p> <ul id="about">
<li>À propos de nous</li>
<li>Blogue</li>
<li>Retour</li>
</ul>
</p><p>Il génère une liste de leurs trois liens. En réalité ils doivent mener quelque part, mais chez nous c'est simple <a href="https://olegshein.ru/fr/download/skachat-gotovye-shablony-gramot-gramoty-shablony-pustye/">liens vides</a>. Nous créerons également une liste et des liens dans celle-ci.</p><p>#about( float: right; list-style: none; margin-right: 50px ) #about a( color: jaune; )</p><h3>Étape 8. Créer un menu dans la colonne latérale</h3><p>Habituellement, la colonne latérale contient le menu du site et bien d'autres <a href="https://olegshein.ru/fr/the-sounds-and-music/vidzhet-chasy-raznye-poyasa-dlya-android-pochemu-stoit-skachat-chasy-na/">différents widgets</a>. Faisons là un menu simple. Encore une fois, la liste avec laquelle nous avons déjà affiché les liens dans l'en-tête nous y aidera, mais comme le menu principal est censé être plus grand, il y aura plus de liens.</p><p> <ul class="menu">
<li>Élément de menu1</li>
<li>Élément de menu2</li>
<li>Élément de menu3</li>
<li>Élément de menu4</li>
<li>Élément de menu5</li>
<li>Élément de menu6</li>
</ul>
</p><p>Menu (style de liste : aucun)</p><p>En fait, je n'ai écrit qu'une seule règle ici : j'ai supprimé les marqueurs des éléments de la liste, tout le reste va bien. Vous pouvez également ajouter un titre avant le menu et le concevoir d'une manière ou d'une autre. Vous pouvez le faire vous-même. Les titres sont écrits dans des balises appariées <h1> - <h6>, où le premier est le plus grand (titre de l'article) et le dernier le plus petit, il n'est souvent pas utilisé du tout. Pour le titre du menu dans la colonne latérale, il est optimal d'utiliser <h3>.</p><h3>Étape 9. Concevoir le bloc de contenu</h3><p>Eh bien, pourquoi l'officialiser là ? Vous devez ajouter du texte pour que cela ressemble à un vrai site Web avec un article.</p><p> <h1>Titre de l'article</h1>
<p>Et ici, il y aura un article...</p>
<p>Le contenu de l'article est divisé en paragraphes et sous-titres...</p>
<h2>Sous-titre de l'article</h2>
</p><p>N'importe quel contenu peut être inséré dans un bloc de contenu. Les paragraphes qu'il contient constituent le contenu principal et les balises h1-h2 forment les titres et sous-titres. Étiqueter <b>h1</b> doit être le seul sur la page.</p><p>Dans ce cas, la conception consiste à déterminer la couleur du texte. Par exemple, vous pouvez mettre du marron. Les titres peuvent être surlignés dans une teinte légèrement différente. Je ne donnerai aucun code ici, vous pouvez le découvrir vous-même.</p><h3>Étape 10. Décorer le sous-sol</h3><p>Pour être honnête, je n’ai aucune envie de mettre quoi que ce soit au sous-sol pour le moment. Sur les sites réels, il contient des informations sur les droits d'auteur, parfois des menus et des liens vers d'autres sites. Je vais juste écrire le mot copyright ici et le centrer comme ceci :</p><p>#footer(text-align: center)</p><h3>Étape 11. Oh non, plus aucune étape</h3><p>C'est tout, en fait. Processus de création <a href="https://olegshein.ru/fr/communications-and-the-internet/vordpress-sozdat-kak-sozdat-svoi-blog-samostoyatelno/">le modèle le plus simple</a> sur HTML peut être considéré comme complet. Nous avons un logo, un nom de site, un menu, un article, un pied de page. En général, c'est un site très primitif, mais toujours un site.</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-tselikom.jpg' width="100%" loading=lazy loading=lazy></p><p>Bien sûr, le site est tel qu'on ne veut plus jamais le consulter, mais cela ne change rien à l'essence. Bien paraître est le travail d’un concepteur de sites Web.</p><h3>Que devrions-nous en faire ensuite ?</h3><p>Le but de cet article était simplement de vous montrer comment créer un site Web simple en utilisant HTML et CSS. Vous pouvez travailler sur sa conception et le résultat peut être quelque chose d’attrayant. Mais vous devez quand même vous rappeler qu’il s’agit d’un site statique. Si vous y ajoutez de nouvelles pages, cela se fait manuellement, en créant de nouveaux documents HTML.</p><p>Cette méthode de gestion d’un site internet appartient au passé, même si elle présente des avantages. Pour mettre un site Web en ligne, vous devez télécharger tous les fichiers html, la feuille de style et les images nécessaires sur un hébergement, payant ou gratuit. Vous devez également enregistrer le nom du site pour qu'il s'appelle quelque chose. Un domaine de troisième niveau peut être obtenu gratuitement auprès de nombreuses entreprises, mais vous devrez payer pour un domaine de deuxième niveau. <b>(.ru, .com, .ua, etc.)</b></p><p>Ce que nous avons fait avec vous au cours de cet article s’appelle la mise en page d’un site Web. Si vous souhaitez gérer votre site à l'aide d'un outil pratique <a href="https://olegshein.ru/fr/error-itunes/nvu-skachat-russkuyu-versiyu-vizualnyi-html-redaktor-ustanovka/">éditeur visuel</a>, alors la mise en page déjà réalisée devra être intégrée à l'un des moteurs populaires. Meilleur avec <b>WordPress</b>.</p><p>Ce <a href="https://olegshein.ru/fr/malfunction/fotoshop-istoriya-versii-vse-versii-fotoshop-opisanie-i-osobennosti/">sujet séparé</a>– l’intégration est à bien des égards beaucoup plus compliquée que la mise en page elle-même. Pour apprendre à créer des sites Web pour le moteur, vous devez suivre une bonne formation. <a href="https://olegshein.ru/fr/application/svedeniya-o-sisteme-windows-rukovodstvo-po-bystromu-vyboru/">Informations gratuites</a> sur Internet, vous n'en aurez peut-être pas assez. J'ai décrit le processus de création d'un site sur WordPress, mais vous n'y trouverez pas d'informations sur la façon d'intégrer <a href="https://olegshein.ru/fr/instructions/mezhgorodskie-perevozki-gruzov-shablon-html-gotovye-shablony-dizainov/">modèle HTML</a> avec un moteur.</p><p>L'article présentait la méthode dite de mise en page en blocs, c'est-à-dire que nous placions tout le contenu dans des blocs. Aujourd’hui, c’est encore la méthode la plus populaire. En général, il est conseillé d'utiliser des balises HTML5 dans le processus plutôt que de simples blocs, mais par souci de simplicité, l'option la plus simple a été utilisée dans cet article.</p><p>J'espère que vous avez au moins une idée minimale de la façon de créer un site Web HTML dans le Bloc-notes ou tout autre éditeur de texte.</p>
<p>Comment faire un site internet html ?</p>
<p>Cette question est posée par les utilisateurs qui décident de créer eux-mêmes un site Web.</p>
<p>Les webmasters novices qui décident d'apprendre à créer des sites Web commencent à rechercher des informations sur Internet ou dans des didacticiels.</p>
<p>Du coup, le webmaster commence à comprendre qu’il est impossible de créer un site internet à part entière sans connaissance du langage HTML.</p>
<blockquote><p>Le problème est que le langage de balisage <a href="https://olegshein.ru/fr/malfunction/html-istoriya-razvitiya-yazyka-razmetki-giperteksta-istoriya/">hypertexte HTML</a> spécialement conçu pour faciliter la création de pages Web. Et sans connaissances de base en HTML, il est assez difficile de créer une page Internet.</p>
</blockquote>
<p>Mais il y a des situations où il n'y a absolument pas de temps pour étudier <a href="https://olegshein.ru/fr/applied/osnovy-html-dlya-nachinayushchih-osnovy-yazyka-web-programmirovaniya/">les bases du HTML</a>, et créer un site Web est tout simplement nécessaire. Est-il possible de créer soi-même un site Web HTML en utilisant n'importe quel service ou programme ?</p>
<p>Pour répondre à cette question, il faut tout d’abord déterminer ce que <a href="https://olegshein.ru/fr/security/kak-izmenit-srok-deistviya-parolya-windows-10-minimalnyi-srok/">actions minimes</a> doit être fait pour qu’un site Web apparaisse sur Internet.</p>
<p><b>Mais en fait, tout ce dont vous avez besoin c'est :</b></p>
<ul><li>Créer une page Web sous forme de fichier ( <a href="https://olegshein.ru/fr/the-sounds-and-music/kak-podpis-perenesti-v-elektronnyi-vid-kak-podpisat-dokument/">document électronique</a>) d'un certain format. Pour être plus précis, il faudrait <a href="https://olegshein.ru/fr/application/fail-index-php-board-avtomaticheskoe-opredelenie-dvizhka-foruma/">fichier d'index</a> Avec <a href="https://olegshein.ru/fr/download/how-to-change-the-file-extension-to-html-changing-the-file-extension/">extension HTML</a> ou htm.</li>
<li>La page doit être sur Internet et doit être accessible <a href="https://olegshein.ru/fr/the-sounds-and-music/kak-sdelat-postoyannyi-dostup-k-udalennomu-kompyuteru-udalennyi/">accès permanent</a>. Il doit être placé sur <a href="https://olegshein.ru/fr/system-and-update/kak-udalitsya-iz-twitter-navsegda-kak-navsegda-udalit-akkaunt-v-tvittere/">service spécial</a>(hébergement).</li>
</ul><p>Si nous parlons du service, alors pour commencer, une telle page peut être placée sur un hébergement gratuit, dont l'inscription ne prend pas plus de cinq minutes. Il existe suffisamment de services de ce type sur Internet. Vous pouvez simplement taper la requête suivante dans un moteur de recherche : « <a href="https://olegshein.ru/fr/applied/kak-postavit-server-na-hostinge-kak-postavit-server-mainkraft-na/">hébergement gratuit</a>» et sélectionnez celui qui convient le mieux dans la liste proposée. Après quoi, vous devrez vous inscrire. L’un de ces sites d’hébergement bien connus est le site « uCoz ».</p>
<p>Eh bien, j'espère qu'il n'y a aucun problème avec l'hébergement du site.</p>
<h2>Comment créer des pages de site Web sans connaissance du HTML</h2>
<p>Vous pouvez créer une telle page, même en utilisant du texte <a href="https://olegshein.ru/fr/communications-and-the-internet/ofisnyi-redaktor-word-referat-tekstovyi-redaktor-word-dlya/">Éditeur de mots</a>, que possèdent presque tous les utilisateurs d’ordinateurs. Pour ce faire, nous écrivons un article en ajoutant des images et des graphiques.</p>
<p>Bref, tous ces éléments qui rendront l’article intéressant. En conséquence, une fois l'article prêt, nous le concevons de la manière dont nous aimerions le voir sur Internet.</p>
<p>En conséquence, nous avons reçu une page Web. Désormais, lorsque nous téléchargeons le fichier créé sur l'hébergement, tout le monde pourra voir le site sur Internet.</p>
<p><b>Cette méthode de création de pages Internet présente un gros inconvénient :</b></p>
<p>Word génère beaucoup de choses inutiles <a href="https://olegshein.ru/fr/pots/kod-html-raspolozheniya-v-centre-kak-v-html-sdelat-vyravnivanie/">code HTML</a>. Par conséquent, cette méthode de création de sites n’a pas été distribuée.</p>
<h2>Créer un site Web HTML dans le Bloc-notes</h2>
<p>Il serait beaucoup plus pratique et correct de créer un site Web dans le programme Notepad. Ce <a href="https://olegshein.ru/fr/download/udalenie-vstroennyh-programm-android-kak-udalyat-obychnye-ili-standartnye/">programme standard</a> pour Windows.</p>
<p>Lançons le programme.</p>
<p><b>Vous devez d'abord vous inscrire <a href="https://olegshein.ru/fr/security/pravilnaya-struktura-html-dokumenta-i-kod-stranicy-osnovnye-kody-html/">Structure HTML</a> document qui a <a href="https://olegshein.ru/fr/reviews/ponyatie-i-vidy-translyatorov-i-kompilyatorov-sleduet-vybrat/">vue suivante</a>:
</b></p>
<p><html></html>— balises définissant le début et la fin du document ;</p>
<p><head></head>— les balises responsables du titre de cette page ;</p>
<p><title>— des balises indiquant le nom du site ;
— cette balise contient le code du site.
Exemple de structure de document de site Web en HTML
La première ligne du document précise la version en langage HTML.
Écrivons-le ce code dans le Bloc-notes et enregistrez-le au format .html.
Ensuite, ouvrez-le dans n'importe quel navigateur et si tout est correct, il s'ouvrira page blanche. Ensuite, vous devrez déterminer le design du site : l'emplacement de l'en-tête, la position du menu, où sera situé le texte.
J'ai choisi cette mise en page : en haut du site il y a un en-tête, en dessous il y a 4 boutons, un menu à gauche et du texte à droite.
Pour créer un tel site, vous devez effectuer un balisage à l'aide de tableaux.
Sur langage HTML le tableau est défini par des balises
, et la ligne du tableau est
, colonnes -
.
Le tableau ressemblera à ceci :
8 et 33 - les termes ouvrent et ferment la table ;
14 et 21 - les lignes ouvrent et ferment une ligne dans ce tableau ;
15, 16, 17, 18 lignes – ouvrez et fermez la colonne ;
Lignes 22 et 25 - ouvrez et fermez la colonne. Dans ce cas, l'attribut colspan=”1” est le nombre de colonnes, width=”170” et height=”317” sont la largeur et la longueur de la cellule ;
27 et 30 - ouvrez et fermez à nouveau la colonne. Dans ce cas, l'attribut colspan=”3” signifie que la cellule est étirée en 3 colonnes. Ses dimensions sont : width=”510” et height=”317”.
C'est ainsi qu'une page est créée à l'aide de tableaux.
Si vous supprimez l'attribut border=”1” dans la 8ème ligne, le tableau deviendra invisible, ce que nous ferons.
Pour créer un modèle de site Web, vous aurez besoin Programme Adobe Photoshop.
Ouvrez le programme et créez nouveau document"Fichier" - "Nouveau".
Spécifiez la largeur, la hauteur, la résolution, le mode couleur et l'arrière-plan.
Nous écrivons tout comme indiqué ici :
S'ouvrira document vierge. Maintenant, vous devez faire la même chose que dans document HTML. Nous le divisons en cellules de tableau à l'aide de guides.
Pour afficher la règle, activez sa « Vue » - « Règles » et retirez les guides directement de la règle et créez un modèle, comme sur la figure :
Pour plus de clarté, sélectionnez le fond de notre site et peignez-le, par exemple, d'une couleur verdâtre. Pour ce faire, vous devez créer dans Photoshop nouveau calque, cliquez sur la barre d’outils « Color Picker » et entrez la couleur que nous avons choisie. Appuyez sur les touches de raccourci Alt + Retour arrière et le document sera coloré dans la couleur que nous avons spécifiée. De cette façon, vous pouvez choisir n'importe quelle couleur.
Continuons à créer le site en HTML. Vous devez maintenant baliser le menu du site, l'en-tête, les boutons, etc.
Créons un nouveau calque, pour lequel nous prenons l'outil " Zone rectangulaire" Sélectionnez l'en-tête du site et, en maintenant enfoncées les touches Alt + Retour arrière, peignez sur l'en-tête. Appuyez ensuite une fois sur Ctrl + T tout en maintenant enfoncé Touche ALT, réduisez le bouchon.
Cela devrait ressembler à quelque chose comme :
Nous réalisons d'autres zones du site de la même manière. Vous pouvez changer la couleur, créer un cadre pour les blocs, ajouter une ombre, appliquer un dégradé. Pour ce faire, sélectionnez le calque avec le serrage Touche Ctrl et utilisez les fonctions de Photoshop.
Choisir fonction requise Ex : accident vasculaire cérébral. Nous indiquons sa taille en pixels et en couleur.
Nous créons d'autres éléments sur le site de la même manière.
Nous écrivons des noms sur les boutons, vous pouvez les écrire en HTML ou vous pouvez immédiatement créer des boutons graphiques. Sélectionnez l'outil « Texte » et faites des inscriptions sur les boutons. Par exemple : Accueil, Services, Contacts, etc.
Nous ajoutons une image à l’en-tête du site et glissons-déposons simplement l’image et la plaçons dans le bloc supérieur du site. Vous pouvez redimensionner l'image en utilisant Ctrl + T.
Découpons le modèle en morceaux et sauvegardons le tout dans dossier séparé dans le format requis.
Prenez l'outil de coupe et sélectionnez chaque zone du site.
Nous sauvons tout. Allez dans le menu, sélectionnez « Fichier » -> « Enregistrer pour le Web ». Enregistrez au format .jpeg ou .png.
Résultat : sur le bureau il y a un dossier avec blocs prêts à l'emploi futur site. Déplaçons ces fichiers vers notre dossier de site.
Passons à la chose la plus importante - création de code HTML pages. À ce stade, vous devez placer toutes les parties du modèle dans le document, ajouter du texte pour page d'accueil, notez le menu, etc.
Ci-dessous le résultat final :
Je pense qu’il n’est pas difficile de comprendre ce qui se passe ici.
Ligne 10 – définissez l'en-tête du site avec l'attribut background ;
15, 16, 17, 18 – insérer des boutons et ajouter des liens ;
Ligne 22 – définissez l'arrière-plan du menu avec l'attribut background ;
23 à 28 lignes – nous écrivons les éléments du menu du site ;
Ligne 33 – texte du site Web.
Il s’avère qu’il n’y a rien de compliqué à créer un site Web en HTML.
En conséquence, nous avons appris à créer un site Web en HTML.
Ça y est, notre site est prêt !
Oui, il s’agit bien sûr d’une simple page créée en HTML.
Mais vous savez déjà comment le modèle et la mise en page sont créés, ce qui signifie que vous pouvez commencer à en apprendre davantage. des moyens compliqués améliorations du site.
Essayez de commencer petit et si vous apprenez à créer pages simples, au fil du temps, vous pourrez créer quelque chose de plus. Le plus important n’est pas d’abandonner l’apprentissage, vous apprendrez bientôt à créer des sites Web professionnels.
