Apprenez à coder avec HTML et CSS

1. Bienvenue: Hé, tout le monde. Mon nom est Emily Maskin et je suis super excité de vous apprendre sur HTML et CSS. Je suis un développeur web depuis près de 10 ans et j' aime constamment trouver de nouvelles façons de faire de beaux sites Web. Ce cours est idéal pour tous ceux qui ont jamais pensé, je veux apprendre à coder, mais je ne sais pas par où commencer. HTML et CSS sont le moyen idéal pour plonger vos orteils car vous pouvez facilement voir les résultats de ce que vous créez d'une manière très directe et visuelle. À la fin de cette classe, vous serez en mesure de créer une belle page de profil pour vous-même ou pour quelqu'un d'autre. C' est un excellent moyen de mettre en valeur vos nouvelles compétences et de vous promouvoir en même temps. Tout ce dont vous avez besoin pour commencer est un éditeur de texte. J' ai fourni des liens de téléchargement dans la description de la classe à quelques liens populaires pour vous de choisir. Alors commençons et j'ai hâte de voir ce que tu trouves. 2. Anatomie d'un site Web: Il faut beaucoup de langues et de technologies différentes pour créer un site Web, ou du moins pour en faire un qui est plus complexe que celui-ci. Une façon utile de penser les parties d'un site Web est comme des parties du corps humain. D' abord, nous avons le squelette. C' est la structure, les différentes pièces qui s'assemblent ensemble. C' est HTML. Les sites Web ont tous certains composants HTML de base, comme une tête qui va au-dessus d'un corps. Dans la tête et le corps, il y a beaucoup d'éléments HTML possibles, et ils peuvent surtout aller dans n'importe quel ordre, mais à ce stade, métaphores du squelette commencent à devenir bizarres, alors peut-être que nous n'y irons pas. Maintenant quoi ? Notre squelette a besoin de peau, tout d'abord. Les vêtements seraient aussi bons, peut-être les cheveux et le maquillage. C' est CSS. C' est ce qui vous permet de transformer informations structurées pures en quelque chose que les gens aimeraient vraiment regarder. Maintenant, à un moment donné, nous allons probablement vouloir que cette personne fasse quelque chose. Ils ont besoin de comportements, d'actions, de souvenirs, de personnalité. C' est là que JavaScript et parfois, d'autres langages entrent en jeu, mais pour l'instant, ne vous inquiétez pas, nous allons seulement couvrir HTML et CSS dans cette classe. 3. Préparer: Prenons une minute pour nous préparer. Tout d'abord, nous allons créer un dossier sur le bureau. C' est là que nous allons sauver tout notre travail. Vous pouvez appeler ce dossier tout ce que vous voulez. Vous pouvez même le laisser comme dossier sans titre si vous le souhaitez. Je vais appeler la mienne Emily. Maintenant, ouvrons notre éditeur de texte, j'utilise atom et nous allons juste commencer un nouveau fichier et nous allons taper bonjour, monde dedans. Maintenant, nous allons l'enregistrer dans le dossier que nous venons de créer sur le bureau et nous appelons ce fichier index.html. C' est ce que vous enregistrez toujours la page principale d'un site Web comme, enregistrez-le et puis nous allons ouvrir notre navigateur Web et nous allons simplement ouvrir ce fichier directement dans le navigateur. Alors ouvert, voici mon fichier index.html et nous pouvons voir le texte bonjour, monde. 4. Introduction à HTML: HTML est essentiellement un moyen de mettre contenu d'un site Web dans des conteneurs afin de créer une structure. HTML utilise des balises au début et à la fin des éléments de contenu. En général, chaque élément de contenu commence par une balise d'ouverture et se termine par une balise de fermeture. Par exemple, une <p> balise est utilisée pour créer un paragraphe. Voyons comment nous pouvons en mettre un autour de notre texte Hello, monde. Nous commençons par la balise d'ouverture au début, qui est juste un p entre crochets pointus. Ensuite, nous ajoutons notre contenu. Ensuite, nous mettons la balise de fermeture à la fin, qui est la même que la balise d'ouverture, sauf avec une barre oblique avant la p. Chaque fois que vous avez une balise avec ou sans contenu à l'intérieur, elle s'appelle un élément. Il existe également un tas de balises que vous pouvez utiliser pour créer des en-têtes et des sous-titres sur votre page. Ce sont h1, h2, h3, et cetera, tout au long de h6. Par défaut, ceux-ci deviennent plus petits au fur et à mesure que la liste continue. H1 est le plus grand, puis h2, et cetera. Par exemple, nous pourrions placer un titre au-dessus de notre paragraphe Hello, world en utilisant une balise h1. Maintenant, selon le navigateur que nous utilisons, ce code va aboutir à quelque chose comme ça. Voici notre élément h1 et notre élément p en dessous. Ce n'est pas encore particulièrement beau, mais c'est bon. C' est là que CSS entrera dans, dans une vidéo ultérieure. Ensuite, nous avons des tags div. divs sont principalement utilisés pour regrouper d'autres éléments ensemble. Par exemple, disons que nous voulions mettre une bordure autour de ces éléments ou mettre une couleur d'arrière-plan derrière eux ou les déplacer vers une autre partie de la page, un div pourrait nous aider à faire n'importe quoi de cela. Comme vous pouvez le voir ici, balises peuvent être imbriquées, ce qui signifie que nous mettons un élément à l'intérieur d'un autre. Nous nichons des étiquettes tout le temps. Sinon, il n'y aurait vraiment pas de bon moyen d'organiser notre contenu. La seule astuce avec l'imbrication est que vous devez vous rappeler de fermer les balises dans le bon ordre. Rappelez-vous comment nous avons dit qu'un élément est un conteneur. Donc, tout comme ces poupées russes, vous devez fermer chaque intérieur avant de pouvoir fermer la prochaine. 5. Écrivons un code: Allez-y et supprimez le monde bonjour de votre fichier index.html, et nous allons commencer à écrire du html. Donc, tous les documents html commencent par la déclaration de type doc, qui ressemble à ceci. C' est juste pour dire au navigateur que nous allons utiliser html. Sur la ligne suivante, créons une balise html. Voici la balise d'ouverture et la balise de fermeture. Puis à l'intérieur de ça, où nous allons mettre tout notre code, nous allons créer une étiquette head et une balise body. Nous mettons des informations sur la page dans la tête et le contenu réel que nous voulons afficher dans le corps. Commençons par le corps et donnons à notre page un titre. Donc, nous allons utiliser la balise h1 et cela peut être tout ce que vous voulez. Je vais appeler le mien à propos de moi. Enregistrez-le et maintenant si nous revenons au navigateur et actualisons, vous devriez voir le titre que vous venez de créer. Donnons maintenant trois paragraphes à notre document. Ceux-ci peuvent être aussi longs ou aussi courts que vous le souhaitez. Tu peux écrire un roman. Je vais garder la mienne courte et douce. Alors je dirai : « Je m'appelle Emily. Je suis un développeur web. J' aime mon chat. » Encore une fois sauver et il y a mes trois paragraphes. Enfin, ajoutons un titre. Le titre est ce qui apparaît dans l'onglet de votre navigateur. Comme ce n'est pas le contenu qui s'affiche sur la page elle-même, il va dans la balise head au lieu du corps. Je vais lui donner, « Titre de la page d'Emily  », et retourner dans le navigateur, rafraîchir et ici dans l'onglet, vous pouvez le voir dit page d'Emily. 6. Tout sur les attributs: Les balises ne font pas grand-chose par elles-mêmes, autrement que de créer une structure. L' étape suivante consiste à leur donner des attributs. Liez des éléments ou des balises, utilisez des attributs pour fournir l'adresse du lien. Créons une balise, un représente l'ancre en passant. Après votre troisième paragraphe, vous pouvez simplement créer une balise, et nous allons d'abord placer le texte que nous voulons afficher entre les balises d'ouverture et de fermeture, comme nous l'avons déjà vu. Je veux créer un lien vers mon site personnel, donc je vais juste mettre mon site Web. Vous pouvez également créer un lien vers votre Twitter ou une vidéo sur YouTube, site Web de votre entreprise ou tout ce que vous voulez. Ensuite, nous donnerons une balise et chaque attribut HREF, qui lui indiquera à quelle URL lier. À l'intérieur de la balise d'ouverture juste après l'a, nous allons mettre un espace, puis ajouter un attribut de HREF, qui signifie référence hypertexte, et le définir égal à l'URL à laquelle vous voulez lier, et cela va entre guillemets. Dans mon cas, c'est http://emilymaskin.com, et si nous revenons à la page et actualisons, il y a mon lien. Les images sont un autre élément qui repose sur des attributs. Ils ont besoin d'un attribut source pour leur indiquer quelle image réelle afficher. Allez-y et trouvez deux images à inclure sur votre page. Vous allez les enregistrer dans le même dossier que nous avons créé sur le bureau. Vous pouvez utiliser les images que vous avez déjà sur votre ordinateur en les copiant dans ce dossier. Ou vous pouvez trouver des images en ligne et les télécharger dans ce dossier. Donnez à vos images des noms assez simples lorsque vous les enregistrez, comme me.jpg, si c'est une photo de vous, afin que vous puissiez facilement les référencer plus tard. J' ai déjà ajouté le mien. J' ai choisi des photos de mon chat Lucy. N' hésitez pas à mettre la vidéo en pause et à revenir une fois que vous êtes prêt. Ajoutez maintenant une balise d'image qui est IMG à votre document. Vous remarquerez ici sur le mien que l'étiquette semble un peu différente des autres. Il n'a pas de balise d'ouverture et de balise de fermeture car les images ne contiennent pas de contenu, elles sont le contenu. Maintenant, nous allons donner la balise image et l'attribut source SRC et le définir égal au nom de votre premier fichier image. Encore une fois, il entre guillemets. Pour moi, c'est Lucy1.jpg. Nous allons également lui donner un attribut alt. Alt est utilisé pour fournir des textes pour montrer si, pour raison quelconque, il y a une erreur de chargement de l'image, et il est également important pour l'accessibilité, par exemple, pour les utilisateurs avec lecteur d'écran. Je lui donnerai des textes de Mon chat Lucy. Maintenant, sauvegardons et revenons. Voilà mon image. Si le tien est sorti énorme, comme le mien, ne vous inquiétez pas pour l'instant. Nous allons régler ça très bientôt. Maintenant de votre propre chef, vous pouvez faire la même chose pour votre deuxième image, et ensuite nous reviendrons dans la prochaine vidéo. 7. Introduction au CSS: Nous utilisons CSS pour styliser les éléments en disant essentiellement, « Hey navigateur, chaque fois que vous voyez un élément correspondant à cette description, faites-le. » Nous le faisons en utilisant ce format. Je sais que ça ne rend pas les choses plus claires, alors voyons à quoi ça ressemble en pratique. Par exemple, tout le texte de toutes les balises de paragraphe apparaîtra en rouge. Essayons ça. Ajoutez une balise de style à l'intérieur de votre balise head. À l'intérieur, il ajoutera H1, accolades, couleur, côlon, rouge, point-virgule. Cela va tourner votre cap en rouge. Les couleurs de base comme ; rouge, vert, bleu, et cetera sont reconnues comme des mots. Sinon, nous pouvons utiliser des codes hexadécimaux tels que FF0000 qui est également rouge. Si nous retournons et nous rafraîchissons, rien ne change, ce que nous attendrions. Si vous allez sur HTML color codes.com, vous pouvez jouer avec trouver la nuance exacte de la couleur exacte que vous recherchez. Certains autres styles que vous pouvez donner au texte sont la taille de la police, qui est mesurée en pixels. Donnons ce 60 pixes. C' est assez grand. Famille de polices, donc c'est des choses comme Times New Roman, Arial. Personnellement, j'aime Garamond. Aligner le texte, nous irons avec le centre. Voyons à quoi ça ressemble jusqu'à présent. Notre cap est maintenant de 60 pixels, il est centré et il est en Garamond. Essayons de mettre une bordure autour de notre en-tête. bordures nécessitent trois valeurs, c'est-à-dire la largeur, le style et la couleur. Voici un exemple : bordure, deux pixels, solide, bleu. Sauvegardez et retournez en arrière. Que c'est un peu serré en haut et en bas. Ajoutons un peu d'espace dans la boîte, donc nous allons utiliser le rembourrage pour le faire. Rembourrage lui donner 20 pixels, enregistrer et revenir en arrière. Ok, il y a un peu plus d'espace là-bas. C'est plutôt bien. Peut-être devrions-nous aussi donner à cette boîte une couleur de fond. Utilisons un code hexadécimal cette fois. On va aller avec une nuance de gris clair. Il se trouve que je connais déjà celle-là. Mais encore une fois, vous pouvez simplement aller sur HTML color codes.com et trouver n'importe quelle nuance que vous pourriez souhaiter. Ajoutons également une marge en dessous. Nous allons mettre un 100 pixels sous le titre. Maintenant, si nous revenons en arrière et rafraîchissons, nous pouvons voir que nous avons un fond gris clair et un 100 pixels en dessous. Il ne va certainement pas gagner de prix de design. Mais j'espère que vous pouvez voir le potentiel ici. Essayez de jouer avec certaines de ces propriétés sur vos balises H1, P, A et div. 8. Se trouver spécifique avec les cours: Vos images sont sorties énormes comme les miennes ? Nous pouvons utiliser la propriété width pour les réduire, donc ici nous allons utiliser l'image comme sélecteur et lui donner une largeur de 300 pixels, enregistrer et revenir en arrière, et maintenant nos images sont belles et petites. Voyez-vous des problèmes avec cette approche ? Et si vous ne vouliez pas que vos deux images soient de la même taille. Nous pouvons utiliser l'attribut de classe pour cibler un ou plusieurs éléments spécifiques tout en ignorant les autres, alors donnons à une image une classe de petit et une une une classe de grand, maintenant nous pouvons changer la largeur du petit à 300 pixels en ajoutant petit à notre sélecteur d'image et il est important qu'il n'y ait pas d'espace autour du point ici parce que cela fera quelque chose de différent, qui est un peu hors de portée de cette classe. Maintenant, nous pouvons revenir en arrière et rafraîchir, et nous voyons que seul le premier est réduit à 300 pixels, et l'autre est de retour à être énorme. Alors maintenant, changeons le second pour que nous puissions faire l'image point grand, et nous allons donner à cela une largeur de 500 pixels, enregistrer et rafraîchir, et maintenant un peu plus grand, mais toujours assez raisonnable. Une autre chose que vous pourriez vouloir changer ici est le fait que les images en ce moment apparaissent à côté de l' autre et à côté du lien Mon site Web au lieu d'être une au-dessus de la suivante, cela arrive parce que les éléments d'image et les éléments de lien tous afficher en ligne par défaut, et ce que signifie display en ligne est qu'ils ne prennent que la place dont ils ont besoin, et nous essaierons d'en tenir autant que possible sur la même ligne. L' opposé de l'affichage en ligne est le bloc d'affichage, et cela indique à l'élément d'aller à la ligne suivante même s'il y a encore de la place. Donc, nous pouvons revenir à nos sélecteurs d'images et faire en sorte que les deux images s'affichent, et puis si nous actualisons et revenons en arrière, maintenant c'est l'un au-dessus de l'autre, maintenant vous pouvez aller de l'avant et jouer avec certaines des autres propriétés CSS que nous avons apprises, peut-être que vous voulez créer des marges entre les images, peut-être que vous voulez tout centrer, devenir fou et vous amuser. 9. Révision: Regardons ce qu'on a appris. Tout d'abord, nous avons appris à configurer un nouveau fichier HTML. Ensuite, nous avons appris certaines des balises HTML que vous pouvez utiliser pour ajouter du contenu à votre page. Nous avons appris comment donner des attributs aux éléments afin de leur fournir plus d'informations. Ensuite, nous avons appris quelques propriétés CSS et comment les appliquer. Nous avons utilisé l'attribut class pour cibler des éléments individuels ou des sous-ensembles d'éléments. Nous avons appris quelques-unes des nombreuses propriétés CSS que vous pouvez utiliser pour styliser votre site Web. Si vous voulez en savoir plus sur certains des autres, consultez le lien dans la description de la classe ou juste les propriétés CSS de Google. Pour votre projet de classe, je vous invite à créer une page de profil sur vous-même ou quelqu'un d'autre. Utilisez le HTML et le CSS que nous avons appris aujourd'hui pour ajouter du contenu à votre page et le styliser. Amusez-vous et soyez créatif. J' espère que vous avez apprécié cette introduction au HTML et CSS, et je suis tellement excité de voir vos projets.