Html et CSS - Créer une mise en page de site Web

1. Introduction au cours: Bienvenue dans cette série de vidéos où vous apprendrez comment vous pouvez facilement créer votre propre site Web en utilisant seulement HTML et CSS. Dans cette série, j'ai vraiment fait un site Web simple en utilisant seulement HTML et CSS. Non seulement vous apprendrez à faire un site Web, mais vous apprendrez également le site Web. Conception de flux de travail que je crois que si vous suivez, va certainement augmenter votre productivité dans cette ville est vraiment rendre ce site, bien qu'il semble simple. Mais en construisant cela, vous apprendrez le processus fondamental et le processus de conception Web qui sont très cruciaux dans le processus de conception Web . Tout d'abord, je vais vous apprendre à créer une mise en page. Ce site Web est un site web à deux colonnes avec une structure simple. Ensuite, j'utiliserai HTML et CSS pour concevoir cette mise en page et après avoir conçu la mise en page, j'ajouterai du contenu dans cette façon, créant un site Web qui est d'abord vous avez conçu la charge, soit sur papier, soit sur n'importe quelle sorte de peinture ou Photoshopped, puis le donner à la vie en utilisant HTML et CSS, puis en ajoutant du contenu, votre processus de développement sera tellement plus facile et bien organisé. abord, laissez-moi vous dire, ce cours n'est pas destiné à un débutant complet qui ne connaît rien du HTML et du CSS. Je suppose que vous avez une compréhension très basique sur HTML et CSS comme, disons, par exemple, par exemple, vous savez ce que sont les balises d'en-tête, balises de paragraphe, hôtel cible CSS I D et changer la couleur de fond à Sitra. Si vous voulez en savoir plus sur les bases de HTML et CSS, vous pouvez aller sur le site bleu des trois écoles. Ils ont un peu étonnant va organiser le contenu, sorte que cela étant dit, commençons. 2. Conférence principale: abord, laissez-moi vous montrer la mise en page que j'ai conçu en utilisant le Victor Sort en ligne gratuit pour lequel est également appelé Vector V E C P. R. Il suffit de rechercher sur Google et vous trouverez ceci. C' est un programme incroyable pour faire de l'art Victor en ligne. Ici, je viens d'utiliser des formes de base orteil construire une pente. Cette mise en page est divisée en différentes sections. Ce hors de la boîte noire est le rappeur qui tiendra tous nos éléments à l'intérieur de la page, le hachage ou le signe de livre en face. Hors de ce rappeur signifie que je vais déclarer ceci comme un I d dans mon Dave. Après cela, j'ai le chef de section qui sera un live avec un en-tête d'idée. Et à l'intérieur de cela, j'ai le logo qui sera aussi un live avec un logo I D. Alors j'ai ce bar jamais. Après cela, je n'ai pas un autre Div avec un conteneur i d qui contiendra notre contenu principal et cela doit section gauche et droite. La section gauche a un peu off autour de la personne qualifiée et la section droite a un peu maintenant 73%. Et en bas Ici, j'ai le pied de page avec I d photo. J' espère donc que la structure de cette charge est claire pour vous. Maintenant que nous avons fait un Lion, il est temps de le citer. Donc, dans cette série de vidéos, je vais utiliser Corp dans lequel est un outil en ligne pour écrire html, CSS et JavaScript. Vous pouvez également utiliser un éditeur de texte comme le texte sublime ou le crochet Plus pack plus si vous aimez faire ce site Web. Mais ici, je vais utiliser Corp dans lequel sera parfait pour ce tutoriel. Alors commençons. Aller au tribunal, rendu Io et créer un véhicule, puis cliquez ici pour faire une nouvelle épingle. Ceci est le General Interferes Off Corp dans cette partie gauche est divisé en trois sections pour évaluer chaque démon CSS et code JavaScript. Et dans la section de droite, vous verrez la sortie de ce tutoriel. Je n'aurai pas besoin de Js ou de JavaScript, donc je vais le minimiser. Non, nous allons déjà créer notre html Marco d'abord. D' abord, je vais faire un droit réparateur. Hash it up et poitrine stub Corbyn va automatiquement créer le David Idea Rapper tout notre contenu ira à l'intérieur de ce rappeur Donc c'est une boîte noire que je vous ai montré dans notre design bas. Donc, à l'intérieur de ce rappeur, je vais créer le Dave avec l'en-tête d'idée. Et puis à l'intérieur de l'obstacle, je vais créer un accord avec le logo de l'idée. Je crée le lucratif à l'intérieur de l'additif de tête. Depuis notre logo est présent à l'intérieur du plus dur Non après la tête. Oh, je vais créer la barre de talons et après cela je vais créer le conteneur. Et si vous voyez notre design, je dois vivre à l'intérieur de ce conteneur, la partie gauche et de la partie tardive. Je vais donc créer ces primitives à l'intérieur de ce conteneur et enfin à l'extérieur du conteneur. Je vais créer la section photo. Donc, c'est tout ce que nous avons à écrire pour le balisage HTML. Maintenant vient le style amusant partie deux permis. abord, nous allons réinitialiser toutes les balises en utilisant un strict, puis dit la marge à zéro et la séparation 20 et famille étrangère Ariel, si vous écrivez FF et appuyez sur onglet le tribunal quand sera ou terminé, afin de donner une famille étrangère hors antenne. Après cela, je vais cibler le rappeur, Alors laissez-moi donner une bordure de couleur rouge afin que vous puissiez voir tous les éléments qui vont à l'intérieur de ce rappeur. Ensuite, je vais cibler l'en-tête. Donnons-lui un peu de 100 % et la hauteur de 100 pixels. Découvrez comment un rappeur s'est développé pour contenir cet en-tête. Maintenant, changeons la couleur d'arrière-plan pour cela. Je vais utiliser une valeur de cœur hexadécimal. Vous pouvez avoir n'importe quelle couleur que vous aimez, mais pour ce tutoriel j'ai ce site Web qui fournissent diable marqué Donc je vais juste cliquer sur ce bleu électron qui va copier le X marqué dans le presse-papiers et maintenant je peux le coller ici pour obtenir le couleur d'arrière-plan. Laissez-moi supprimer ce vit parce que par défaut c'est 100% donc je n'ai pas à l'écrire. Maintenant, sélectionnons le local. Je vais lui donner une hauteur de 50 pixels et ditto 100 pixels et donnons-lui une couleur de fond . G est parti. Laisse-moi changer la hauteur. 200 pixels. C' est stupide. Alors écrivons 80 pixels. OK, c'est bien. Maintenant, permettez-moi de donner un rappel principal à un orteil de séparation afin de créer un peu d'espace. Droit ? Mordre 20 pixels. Ainsi, cela appliquera un rembourrage de 20 pixels sur le dessus, le bas gauche et le côté droit. Cet oiseau rappeur signifie l'espace intérieur et la marge signifie l'espace extérieur. Maintenant positionnons notre logo en premier. Augmentons l'orteil 200 pixels Maintenant, c'est bon ici. Je vais lui donner une position relative et elle est le top 20 pixel ou faire 10 pixels et gauche 20 pixels. Donc, cela va déplacer le logo par rapport à la tête de la Laissez-moi un peu plus de 2150 pixels. Après cela, ajoutons un nombre. Donnez-lui un cœur de 70 photos de et ils sont cultivés couleur de cette lumière trois et donnez une marge Top off 10 picks afin qu'il ne colle pas avec le plus dur après la barre nerveuse, je vais cibler le conteneur. Donc, d'abord, je vais lui donner une bordure verte pour voir si l'opposition de la section gauche et droite correctement. Ensuite, je vais cibler la section gauche. Donc ici, je vais lui donner une hauteur de 400 pixels. Voyez comment Lacandona s'est agrandie. Signification sont la section gauche a été créée à l'intérieur du conteneur. Maintenant, donnons-le. Donc, je veux que cette section de gauche occupe 25% de ce conteneur donc je vais écrire. Choisi 25% et enfin lui donner une couleur de fond. Alors je vais choisir ce bleu verdâtre. Tu vois, notre section gauche a occupé 25% de son esprit, ce qui est le diff avec I d conteneur. Augmentons la hauteur de cette image à 600. Maintenant, c'est bon. Maintenant, je vais cibler la bonne section. Donc ici, je vais donner une hauteur de 600 pixel et un peu de 73%. Je ne lui donne pas un vainqueur sur 75% parce que si je l'ai fait 75 personne, alors il n'y aura pas d'espace entre la gauche et la droite. Donc, pour avoir la marge, je le fais 73%. Et enfin, je vais changer la couleur de fond. Mais cette couleur de feuille de menthe de canard. Il y a donc une section de taux. Ne vous inquiétez pas, c'est ici en bas. Donc, pour avoir ce côte-à-côte, nous devons les planter. Donc premier étage, la section droite deux ici, vous remarquerez que la section est sorti offre conteneur qui est cette bordure verte. Donc, c'est parce que le lieu a planté et l'élément il sort du flux normal du document. Donc, le débit normal est de haut en bas. C' est pourquoi cela a évolué vers le haut. Pour réparer cela, nous devons nettoyer la flûte. Mais d'abord, nous allons flotter notre section gauche. Qui a laissé si droit flotteur gauche ? Non. Vous pouvez voir à la fois notre position correctement, mais notre extérieur sa cantina, même le rappeur principal Container. Alors répare ça. Nous devons dégager le flotteur pour ce niveau. Ajoutez un pseudo-sélecteur sur le conteneur. Donc conteneur droit, puis à deux-points. Et juste après qu'ils soient dans ce bon contenu Colin, double condition marque, bloc d'affichage et effacer les deux. C' est donc une astuce utilisée pour nettoyer les planchers et faire venir l'élément à leur plancher normal . Normalcy sont à gauche et la section droite est dans son parent, qui est le conteneur d'idée de davit. Donnons donc une marge supérieure au conteneur. Dites marge. Top 10 pixels. Non, enfin, nous allons créer la photo. Donc droite trouvé photo, lui donner la hauteur de 100 fixateur et lui permet la couleur de fond de cette rivière américaine. Et j'imagine les 10 premiers pixels. Laissez-moi changer l'esprit de la bonne section. 74 %. Mais ça a l'air bien. Donc, félicitations, vous avez fait votre à deux-points mise en page du site Web en utilisant HTML et CSS. Alors maintenant, il est temps d'ajouter le contenu dans une mise en page pour en faire un site fonctionnel. Donc d'abord, je vais ajouter un texte à l'intérieur de la locomotive. Pour cela, je vais créer ses trois étiquettes d'en-tête. Et à l'intérieur, je vais écrire le nom de la société. Tu peux écrire n'importe quoi. Non, faisons d'abord cette barre de navigation. Je vais créer la navigation Manu à l'intérieur de l'en-tête, puis je vais créer la navigation à l'intérieur de la barre de Knave. Donc d'abord, créons-le à l'intérieur de la tête de section. façon la plus courante de créer une barre de navigation est d'utiliser une liste Norden. Donc, je vais créer un A nordeste. Et à l'intérieur de cela, j'aurai des éléments de liste qui contiendront un lien. Donc, à droite, vous serez ensuite abaissé à l'intérieur et appuyez sur l'onglet Cour peut créer le marché pour vous. Puis à l'intérieur de l'élément de liste droite A et appuyez sur le haut pour faire le lien dans la livre droite X Chef . Donc, si vous cliquez sur ce lien, il n'ira nulle part. Et puis à l'intérieur d'une balise, à droite, le nom de l'élément de menu. Donc, c'est notre Manu, mais cela ne ressemble pas à un menu de navigation. Nous devons ajouter quelques CS est de le faire paraître bien. Mais d'abord, laissez-moi positionner ce X trois élément à l'intérieur du bas afin qu'ils hachent logo. C' est trois et à l'intérieur de cette bonne position absolue. Ensuite, je vais donner un top 20 pixel ou dire, 30 pixel. Il a l'air droit. Alors maintenant, nous allons travailler avec Domino. Première cible, l'élément U, puis flottait vers la droite. Après cela, je vais cibler l'élément Allié et faire l'affichage en ligne, donc cela placera l'élément côte à côte. Permettez-moi de donner une marge supérieure à l'élément U First, marge droite, top 30 pixel ou disons, 40 Dixon. En outre, donnons un taux de marge de 40 pixels pour créer un peu d'espace dans le côté gauche. Ensuite, je vais cibler le type A si droit hachage A. Et à l'intérieur de cela, j'écrirai une décoration de texte. Aucun. Cela va supprimer le sous-jacent Maintenant, donnons un combat de couleur et appliquez votre pardon sur 20 pixel de tous les côtés. Donc c'est comme ça que nous faisons notre menu de navigation ? Non, supprimons la couleur d'arrière-plan de cet en-tête. Attends, Attends, euh, aux enchères parce que j'ai une couleur blanche. Alors changez la couleur en noir, et maintenant c'est faux. Je vais également supprimer la couleur de fond du logo. Maintenant, je vais ajouter des habitations à effet ho en utilisant la pseudo classe sur si droite, en-tête U l I un deux-points sur Et puis à l'intérieur de cette première, laissez-moi donner une bordure inférieure pour voir à quoi il ressemble. C' est un peu bon look, mais je vais ajouter une bordure de tous les côtés afin de retirer le fond. Non, ça a l'air bien. Donc c'est le naba à l'intérieur de la tête de section. Non. Créons ce menu dans le nab notre live pour cela. Je vais juste couper cette liste et goûter à l'intérieur du Nath Bharti. Je dois faire un peu de changement dans mon CSS. Il suffit donc de supprimer l'en-tête de hachage et de le remplacer par le hachage. Jamais parce que notre élément ul est maintenant à l'intérieur du nerf. Bardo. Ensuite, supprimez la marge supérieure à l'intérieur de la valeur de hachage. Eh bien, parce que je n'ai pas besoin de l'espace négatif qui pousse le menu vers le haut et ensuite je vais donner une marge supérieure de 20 pixels. Il devrait y avoir de l'espace ici, laissez-moi changer la marge à 25. Non, c'est bon. Je sais que nous avons un logo et une navigation créés. Ajoutons du contenu dans la section de gauche. Donc, à l'intérieur de la section de gauche, je vais créer ses trois balises avec les nouvelles de texte, puis j'ajouterai un paragraphe hors du texte fictif. Donc il suffit d'écrire P, puis plus grand que signer et écrire. Chargez-le et appuyez sur l'enveloppe Up Corp les insérer automatiquement. Ça prend pour toi. Copiez et collez ceci une fois de plus et changez la rue H pour travailler. Nous avons donc le contenu placé à l'intérieur de la section gauche. Il est temps de corriger certains CS est le premier. Je vais cibler l'impôt successoral à l'intérieur de la section gauche, donc je vais donner une séparation de 30 pixels et ensuite centrer ce texte. Diminons la fête en 20 pixels. Ok, maintenant, allons cibler la section gauche de Peter livre droite et p ici. Voyons comment justifier ressemble. Donc, je suis aligné par texte. Justifiez maintenant. Ça n'a pas l'air bien. Changez-le au centre. Ok, donc je vais donner une marge inférieure de 10 pixels ou peut-être quatre pour le réparer. Alors maintenant, changeons la couleur de fond de cette section de gauche à quelque chose qui semble bien ici. Je vais choisir la couleur, que j'ai utilisé pour le jamais. J' ai donc installé un Google chrome Extension politica. C' est un outil génial pour choisir la couleur de n'importe quel site Web, alors cliquez sur cette extension et maintenant cliquez sur l'option choisir la couleur de la hauteur et maintenant juste prendre votre plus sur la couleur que vous voulez choisir. Et lorsque vous voyez la couleur dans cette boîte carrée supérieure, il suffit de cliquer. La couleur sera copiée dans le presse-papiers. Maintenant, je vais juste basé cette couleur dans la propriété de couleur d'arrière-plan de la section gauche aussi simple que cela. Donc, permettez-moi d'ajouter le soulignement vers la balise pour le rendre debout. Remarque un peu Ici pour ce tutoriel, j'ai ajouté, j'ai ajouté, sont la tête et un peu de temps de paragraphe. Mais vous pouvez également créer un menu de côté si vous le souhaitez. Alors, c'est la bonne section. Alors allez à l'intérieur de la section de taux, vivre et créer un Jordan tang et droite. Bienvenue sur mon site web. Ensuite, je vais créer une balise de paragraphe avec du texte factice. Ajoutons un autre mieux. Donc, encore une fois, je vais copier tout ce contenu twin p et coller pour avoir un peu plus de contenu. Changeons le H un orteil souffert à Gaza. Ils sont encore de l'espace. Donc, encore une fois, je vais copier et coller une chose de plus et nous allons changer. C' est 12 contenus de plus maintenant. Je crois que j'ai assez de contenu. Vous pouvez en ajouter plus si vous voulez, mais je vais m'arrêter ici maintenant. Ajoutons un peu. Voir ancestral à la H one et Pitak à l'intérieur de la section droite. D' abord, je vais cibler la balise H 1. Essayons une marge à gauche. 20 pixels. Oh, peut-être que 30 le choisissent. Laissons-le pour l'instant. Nous allons changer cela plus loin après avoir mangé style orteil un paragraphe. Cible suivante, le type de paragraphe. Permettez-moi de lui donner un texto. La ligne de marge du centre de la propriété laissée 30 le choisit ou peut-être 10 le choisit. Donc, ces paragraphes sont très proches les uns des autres. Donc, je vais ajouter un fond de marge ou 20 pixels pour créer un peu d'espace pour de bon. Je pense maintenant que je peux changer le style H un. Déplaçons le vers le centre en utilisant la propriété du texte Aligner le centre. Donc maintenant je n'ai pas besoin de la marge, donc supprimez ceci, mais je vais ajouter un bas de marge de 10 pixels afin de faire plus de place dans le bas. Maintenant, il est temps de changer la couleur d'arrière-plan. Donc, je vais choisir à nouveau le critique en utilisant l'outil de sélecteur de couleurs, puis le tester dans la bonne section. Couleur d'arrière-plan. Ok, Notre site Web a maintenant du contenu. Je n'ai pas besoin de ces bordures vertes, alors enlevez la frontière. Permettez-moi d'ajouter un peu de marge orteil haut cette étiquette H une. Donc la marge parle 20 pixel. Non, c'est bon. Enfin, il est temps d'ajouter du contenu à une photo. J' ajouterai du texte très basique à l'intérieur d'une photo, donc j'utiliserai sa balise quatre. Et à l'intérieur de cela, j'ai averti un symbole copulé pour cette u peut écrire sur copie pour cent et puis j'ai mis tout droit réservé qu'un symbole de pipe et fait par vous. Maintenant, composez ce texte. Laisse-moi d'abord aligné ça au centre, puis Al Gore se sépare pour 20 pixels ou peut-être 30 pixels No. 40 pixels. Non, c'est bon. Et enfin, je vais changer la couleur de fond de cette eau pour la même couleur grise que nous avons utilisée pour toute notre section. Donc, enfin sont simples. Upside est prêt, et nous l'avons fait en utilisant uniquement HTML et CSS. Alors maintenant que vous avez créé votre site Web à deux colonnes, il est temps de développer les compétences acquises dans cette ville vidéo. Donc, essayez de faire trois colonnes site Web ou quatre colonnes. Il suffit de rechercher sur Google trois colonnes ou quatre colonnes. Les oreilles sont bruyantes. Vous aurez plus de tous et de ce petit ami conçu la mise en page pour vous-même et après la mise en page est faite, puis ajoutez le contenu. Je peux parier que si vous suivez ce principe qui est d'abord conçu le Seigneur en papier ou tout programme graphique et ensuite mis en œuvre en utilisant le HTML et CSS, puis ajouter du contenu, vous serez en mesure de supporter n'importe quel site web un. J' espère que vous avez appris quelque chose de ma série de vidéos. Et si vous le faites, je vous demande de bien vouloir revoir et un pouce levé. Cela m'aide énormément et le maintient motivé pour prendre plus de contrôle. Merci