Débuter en conception Web pour les créatifs, les apprenants visuels et tout autre personne

1. Ce c'est de quoi de ce cours: On dit que le codage est la nouvelle alphabétisation. Bien qu'il puisse ne pas remplacer toutes les autres formes d'alphabétisation dans un avenir proche, il s'agit d'un ensemble de compétences formidables à posséder. Que vous cherchiez à mettre à jour votre ensemble de compétences actuel, vous avez une idée que vous voulez donner vie ou vous êtes simplement intéressé à en apprendre davantage. Cette classe va vous donner les bases dont vous avez besoin. Bienvenue sur le Web design pour les créatifs, les apprenants visuels et tout le monde. Je suis Marc Nischan, et j'enseigne des objets textuels pour créer des gens au College for Creative Studies à Detroit et ici sur le partage des compétences. Quand je me suis intéressé pour la première fois au web, c'était il y a plus de 20 ans. époque, j'étais cuisinier à temps partiel et rocker à temps plein et je voulais créer un site web pour mon groupe. La quête d'acquérir ces compétences s'est transformée en carrière et depuis 20 ans, j'ai gagné ma vie en design graphique, en construisant des sites web et en concevant pour le web et les mobiles. Ce n'était pas toujours facile pour moi de saisir les concepts. En tant qu'apprenant visuel, j'ai dû trouver mes propres moyens de faire en sorte que cette information soit logique. Mais ça a été une carrière enrichissante. J'ai apprécié le travail. Cela m'a donné beaucoup de souplesse, et j'aime partager ce que j'ai appris avec d'autres dans l'espoir que cela puisse les aider à atteindre certains de leurs objectifs. Dans cette classe, ce que nous allons apprendre, sont les cinq éléments d'une page Web de base. Vous allez apprendre différents outils et techniques pour vous aider à démarrer et écrire votre code, nous allons parler de la façon dont votre navigateur pense du code que vous écrivez. Nous allons construire une mise en page avec des images et des liens et discuter de la façon dont nous pouvons ajouter du style à cela pour changer l'apparence de celui-ci. Ça va être amusant et à la fin, vous aurez construit votre propre page web. Commençons. 2. outils: Hey tout le monde, bienvenue à la conception web de base pour les apprenants visuels créatifs et tout le monde. Je suis contente que tu aies décidé de suivre ce cours. Je vais vous parler un peu d'Internet. Nous utilisons Internet maintenant, mais vous ne savez probablement pas qu'au début, en 1977, il s'appelait Arpanet et c'était un très petit réseau d'ordinateurs qui a été créé pour résoudre le problème du partage des données sur de grandes distances. Ça a évolué un peu depuis. Il était à l'origine juste le texte et les liens hypertexte étaient le seul élément interactif réel pour ces sites Web. Il a grandi dans l'Internet que nous connaissons aujourd'hui, mais en substance, il est encore très similaire. Il y a des données stockées sur un ordinateur quelque part, un serveur, qui est essentiellement sur un disque dur gigantesque, utilisé pour servir des données. Ensuite, il est transmis sur un tas de fils à votre ordinateur et interprété par un client, qui est votre navigateur. Votre navigateur lit les données ainsi que les informations nécessaires pour organiser ces données sur une page. Cette information est un langage de balisage et il organise l'hypertexte, et c'est là qu'il obtient son nom, Hypertext Markup Language, et c'est HTML. C' est avec cela que nous allons travailler pour construire notre page Web de base aujourd'hui. Pour cette classe, vous n'aurez pas besoin d'un serveur. Cependant, si vous voulez obtenir un nom de domaine et un hébergement, je vais vous montrer comment publier votre site Web. À la fin de cette classe, vous serez un développeur web publié. Si ce n'est pas le cas, vous pouvez toujours travailler localement sur votre ordinateur et faire votre projet directement dans votre propre navigateur. Nous n'avons pas besoin d'un serveur ou de quoi que ce soit comme ça. Nous allons travailler sur des fichiers sur votre ordinateur. C' est ce qu'on appelle un environnement de développement local. Pour ce faire, vous allez vouloir vous procurer un logiciel, un IDE, qui est un environnement de développement intégré. Fondamentalement, c'est juste un mot de fantaisie pour un éditeur de texte. Maintenant, de retour dans l'ancien, ou vieux jours, je devais écrire mes pages Web dans Word et les enregistrer en tant que point HTML, les ouvrir dans un navigateur et voir si elles ressemblaient à ce que je pensais qu'elles allaient ressembler. C' est beaucoup plus sophistiqué aujourd'hui. Mais il y a beaucoup d'outils qui vont vous être beaucoup plus utiles qu'un document Word. Il y a deux IDE que je veux que vous vérifiiez. Le premier est Adam.io, qui est produit par GitHub. Le second est parenthèses point IO, produit par Adobe. Il y a beaucoup de soutien pour eux. Beaucoup de plug-ins tiers qui sont libres que les gens pour gérer des choses comme la mise en évidence de la syntaxe dans les marges automatiques et presque tout ce que vous pouvez ramasser. Allez télécharger un de ces IDE. Je vais utiliser Adam pour nos démos. L' un ou l'autre va bien marcher. Pour commencer, nous devons trouver une base à domicile où notre projet va vivre. Vous devriez peut-être créer un fichier sur votre bureau appeler un site Web, appelez-le ce que vous voulez et tous nos fichiers vont vivre dans ce dossier. Nous commencerons par créer ce qui est essentiellement le centre du système solaire pour votre site web, la page index. Par défaut, les navigateurs recherchent une page appelée Index lorsqu'ils arrivent à un dossier. Allez-y, ouvrez votre IDE et créez index.html et enregistrez-le dans votre dossier que vous avez créé pour héberger ce site Web. Une fois que vous avez fait cela, vous aurez fait la première étape vers la création de notre page Web. 3. Anatomie d'une page Web: Nous avons notre IDE, nous avons notre page d'index. Jetons un coup d'oeil dans un navigateur et voyons à quoi il ressemble lorsque le navigateur le rend. Ça ne ressemble à rien. Il n'y a rien là-bas. Voyons ce qui se passe quand on colle des mots là-dedans et qu'ils courent tous ensemble. Nous avons besoin d'un langage de balisage pour structurer ces mots. L' essence de la mise en page Web est que vous mettez des boîtes à l'intérieur des boîtes, à l'intérieur des boîtes, et la balise HTML n'est rien de plus qu'une boîte pour contenir vos mots, images ou vidéos. Il y a des dizaines et des dizaines de balises HTML, et ils ont tous des comportements spécifiques que votre navigateur comprend. Jetons un coup d'oeil au code derrière la page d'accueil de Wikipédia. Vous pouvez voir que tout ce contenu est contenu dans diverses balises HTML. Certaines de ces balises HTML sont contenues par encore plus de balises HTML. page Web la plus primordiale se compose de cinq de ces éléments. DOCTYPE, la balise HTML, la balise head, la balise body et la balise title. Nous allons commencer avec cette collection d' éléments HTML pour nous aider à construire notre page Web de base. Allez dans votre IDE et dans notre page index.html, nous allons écrire la balise DOCTYPE. Le DOCTYPE est la balise qui indique à votre navigateur quel ensemble d'instructions utiliser lors du rendu de votre page Web. Nous travaillons en HTML5 et il a un DOCTYPE très simple. Mais laissez-moi vous montrer à quoi ressemble l'un des DOCTYPES pour HTML4. Quand ils ont écrit HTML5, ils ont grandement simplifié la syntaxe et tout le monde était beaucoup plus heureux en conséquence. Le DOCTYPE commence toujours par un bang. Maintenant, vous pouvez reconnaître ce caractère comme point d'exclamation, mais il est souvent appelé un bang dans la programmation, donc ils sont la caractéristique : les crochets d'angle, le bang, le mot DOCTYPE dans toutes les majuscules, puis HTML. Et c'est tout. Ensuite, nous avons la balise HTML. C' est la plus grande boîte. Tout se passe dans cette boîte et cette étiquette a un ouvreur et un plus proche. C' est exactement la même chose, sauf pour la barre oblique pour la balise de fermeture qui permet à votre navigateur de savoir que cette balise est terminée et que la case est complète. À l'intérieur de la balise HTML se trouvent la tête et le corps. Maintenant, j'aime penser à ça comme nos têtes et nos corps. La balise head est l'endroit où la plupart des méta-informations vont. Ce sont des informations que vous ne verrez pas nécessairement et j'aimerais y penser comme les pensées de la page Web. La tête et la carrosserie ensemble pour former l'image complète. Ensuite, il y a notre cinquième étiquette primordiale, la balise de titre. À l'intérieur de la balise title se trouvent les mots que vous voulez apparaître dans le petit onglet de votre navigateur. Faites tirer votre IDE. Nous allons écrire du code dans la toute prochaine leçon et jeter un oeil à notre page Web primordiale. On se voit là-bas. 4. Commençons de codage !: C' est ça. Le moment que vous attendiez tous. Êtes-vous prêt à écrire du code ? Ouvrez votre IDE et tirez la page d'index. Maintenant, je vais marcher à travers, n' hésitez pas à taper avec moi si vous le voulez, mais je laisserai une occasion après avoir terminé de taper pour le mettre en pause et me rattraper. Je vais écrire les cinq tags et en parler un peu à leur sujet pendant que je vais et nous allons jeter un oeil dans le navigateur quand nous aurons fini et voir notre première page Web primordiale. Ce sera la base sur laquelle nous construisons pour vous arriver au projet fini pour cette classe. On y va. On va commencer par le type de doc. Quiz pop. Quelle est la prochaine ? La balise HTML, la plus grande boîte. Nous HTML, et nous fermons la balise, et nous les divisons afin que nous puissions mettre des choses à l'intérieur de cette boîte. Maintenant, cela va introduire un concept que j'espère que vous suivrez, l'indentation. C' est un excellent moyen de voir visuellement où sont vos boîtes. Parce qu'après avoir eu des dizaines et des dizaines d'entre elles sur l'écran, il peut devenir vraiment difficile de savoir où vous en êtes. HTML, nous le divisons, la balise suivante est la tête. Vous écrivez cela là-dedans et remarquez que je l'ai indenté pour indiquer qu'il est à l'intérieur de son conteneur parent, la balise HTML. Maintenant, il va avoir un frère, la balise du corps. C'est aussi en retrait. On y va, et maintenant notre dernière étiquette, la balise de titre. La balise de titre vit à l'intérieur de la tête. Encore une fois, ici, j'ai mis le titre de ma page en retrait , je la ferme, et j'ai appuyé sur O, nous avons une page web primordiale. Si j'ouvre ceci dans le navigateur en ce moment, vous ne verrez rien sauf le titre car il n'y a toujours pas de contenu dans le corps. Écrivons les mots Hello World à l'intérieur du corps juste pour qu'il y ait quelque chose à voir. Il s'agit d'une première passe typique à une étape de projet à prendre. Vous faites ce qu'on appelle le Hello World juste pour prouver que vous pouvez faire fonctionner le truc. Allez-y et mettez la vidéo en pause dès maintenant. Si vous n'avez pas tapé le long, obtenez votre code pour ressembler à mon code, et nous allons jeter un coup d'oeil. Ici, vous avez créé votre première page Hello World, bienvenue dans le monde du développement web, et nous allons nous appuyer sur cela pour rassembler le reste de notre projet. Félicitations. 5. « Le DOM »: Ok, jusqu'à maintenant, nous avons bougé à un rythme assez attractif. Je vais accélérer un peu le rythme alors que nous commencerons à travailler sur notre projet final. C' est ce que va être notre projet final. C' est une page web assez simple. Il y a quelques liens et quelques images. Souviens-toi que je t'ai dit que construire une page Web c'est mettre des boîtes à l'intérieur des boîtes. Votre ensemble de boîtes codées unique est un modèle, à partir de ce que vous allez voir dans le navigateur lorsque vous jetez un oeil à votre page Web. Ce modèle a un nom. Pour le navigateur, il s'agit du modèle d'objet de document. Souvenez-vous que, il est raccourci au DOM. Ça va probablement venir un peu plus tard. Ce que nous allons faire maintenant, c'est construire le modèle de notre projet. Ouvrez votre éditeur de texte et tapez avec moi. Si vous avez besoin de mettre la vidéo en pause et de rattraper le retard, nous allons poser la structure de base de notre projet ici. On y va. J' ai joint quelques dossiers de projet. Juste en dessous de la vidéo, vous verrez quatre onglets. Accédez à votre projet et cliquez sur FinalProject.txt. Prenez le premier morceau de prose que vous voyez là-bas, copiez-le, puis nous allons le coller dans notre fichier texte. Écrivons notre monde de bonjour et commençons à personnaliser cette mise en page. Nous pouvons appeler cela l' échantillonneur Whitman et ce sont essentiellement deux poèmes de Walt Whitman que nous utilisons comme juste du contenu pour construire notre page Web autour. Commençons à construire des boîtes ici. Nous avons le corps comme deuxième plus grande boîte à l'intérieur ce HTML et nous allons continuer à subdiviser jusqu'à ce que nous obtenions notre contenu où nous le voulons. Commençons par une balise div. C' est une nouvelle étiquette, peut-être pour vous, je ne sais pas. C' est dans ce tutoriel. Un div est juste une autre boîte. Tous ces noms de balises différents ne sont que d'autres cases, mais certaines d'entre elles ont des comportements spécifiques dont nous pouvons profiter. Le div est juste une grande boîte et ensuite nous allons mettre une balise de paragraphe autour de notre texte. Tout est proprement mis en retrait. Vous pouvez voir le flux des boîtes ici. Comme nous allons dans une nouvelle boîte, nous allons dans notre indentation et comme nous sortons de la boîte, comme nous sortons. Cela vous aide à voir où vous en êtes pendant que vous codez. Vous pouvez en quelque sorte penser à ce que cela pourrait ressembler lorsque vous le visualisez réellement dans le navigateur. Enroulons un tag H1 autour de notre titre ici. C' est juste l'en-tête un et votre navigateur sait ce que signifie cette balise H1. Cela signifie qu'il a une certaine taille de police, il a une certaine marge autour d'elle et il se comporte d'une certaine manière. Plus précisément, un en-tête va essayer d'aller et de remplir l'espace tout le long de la boîte dans laquelle il se trouve alors qu'un paragraphe essaiera d'envelopper l'intérieur de la boîte dans laquelle il se trouve. Voyons ce que nous avons jusqu'à présent. On rafraîchit ça, regarde ça. On a un H1 et des textos. D' accord, c'est toujours assez moche, alors mettons-nous d'autres choses ici. Mettons également un espace réservé pour nos liens. Je mets un tuyau ici, c'est le symbole vertical. C' est tout le chemin sur le côté droit de votre clavier au-dessus de la barre oblique inverse. Jetez un coup d'œil à ça. Vous pouvez voir comment nos boîtes s'empilent les unes sur les autres, continuons à modifier cela pour obtenir ce que nous voulons. 6. Styles de base et CSS: Nous tenons pour acquis que lorsque nous faisons l'expérience d'une page Web, cela va être très attrayant visuellement. Il y avait un moment où il n'y avait même pas d'images sur Internet. Notre page Web ressemble à ça en ce moment. C' est juste du texte brut, alors ajoutons une image pour lui donner un peu d'intérêt visuel et ensuite nous allons commencer à poser dans des styles pour affiner complètement notre design. Nous y voilà. J'ai téléchargé les deux images qui sont attachées à la classe. L' un s'appelle Pionniers, l'autre s'appelle Walden. Ce seront les images de nos deux pages. Commençons par les mettre. Les images ont leur propre tag spécial, c'est l'étiquette image, I-M-G. Il y a un petit groupe de tags qui sont comme ça. Ils n'ont pas d'ouverture et de fermeture de leurs étiquettes auto-fermant. Ils se ferment automatiquement avec une barre oblique et un support. La balise image a quelques attributs qui vont nous aider. Le plus important pour nous sera la source. On va lui dire où se trouve cette image. Nous disons que la source est égale, il doit être entre guillemets et nous allons mettre pioneers.jpeg là. Sauvegardons ça et jetons un coup d'oeil. Voilà notre photo. Il y a d'autres choses que vous pouvez mettre ici comme le titre de l'image ou le texte Alt qui peut être lu par un lecteur d'écran. Je vais laisser quelques textes Alt ici et crédit pixels.com pour m'avoir donné cette photo gratuite à utiliser. Pixels est un site qui a toutes sortes de grande photographie en stock libre. Vous remarquerez que ce texte n'apparaît nulle part dans notre page Web. Maintenant, sur les sites Web plus grands qui ont beaucoup et beaucoup d'images, il est assez courant d'avoir des images dans leur propre dossier. Maintenant, l'image a disparu et vous voyez ce lien cassé et le texte alt est affiché comme une alternative à la photo manquante. Nous devons faire attention aux informations que nous donnons dans notre source ici. Si je tape des images/pionniers, maintenant il peut trouver la photo à nouveau. Ces chemins de fichiers vont devenir importants à mesure que nous entrons dans leçons plus complexes et j'ai une deuxième et une troisième classe après cela où nous aborderons des sujets plus avancés. Cette structure de fichier de base est quelque chose à faire attention. J' essaie de tout garder dans un fichier pour cette première classe juste pour garder ça facile cependant. On va y aller, pas de photo spéciale. Reprenons ça ici. Répare mon lien et on est de retour dans les affaires. La prochaine chose que nous allons faire est d'ajouter des éléments vraiment simples appelés règles horizontales. Ce n'est qu'une ligne qui traverse la page. Ils sont aussi des étiquettes à fermeture automatique. h, copions ça et posons un autre en bas ici. Faisons un de plus pour qu'il corresponde au design. Une autre balise auto-fermante que vous pouvez utiliser est la balise break, donc br avec une barre oblique et un crochet d'angle. Regardons ça, rafraîchissons et nous avons nos deux lignes là-bas et il y a une pause sous le mot Walt Whitman. C' est un retour supplémentaire de la même hauteur qu'une ligne de texte. D' autres simples sont des choses comme la balise forte. Si nous prenons cela et regardons, cela crée un type de visage gras. Il y avait une balise en gras, c'était juste un B, mais il a été déprécié en faveur d'une balise plus descriptive et la raison en est que écran et les lecteurs de braille et des choses comme ça utilisent. Le concept de gras n'existe pas dans la parole, mais le contexte de l'accent, voir par exemple, existe, donc nous utilisons l'italique pour mettre l'accent dans le texte. Jetons un coup d'oeil là-bas. Tu vois qu'on a des italiques. Mais pour un lecteur d'écran, il pourrait le lire avec un peu plus fort ou une voix plus énergique. Ce sont quelques-uns des styles de base qui sont disponibles pour nous. Maintenant, nous allons devenir un peu plus sophistiqués. Nous allons commencer à écrire du code à l'intérieur de ces balises. Nous allons donner des attributs à ces boîtes, ça va affecter leur apparence. Une des choses qui est vraiment ennuyeux à propos de cette page en ce moment est comment elle est alignée à gauche. Mettons-le dans une boîte qui a une largeur inférieure à notre écran et qui est centrée. Lorsque vous écrivez des styles en ligne. Ce sont des styles en ligne car ils sont à l'intérieur de ces balises. Il y a des façons plus sophistiquées de le faire que nous aborderons dans le prochain cours, mais pour l'instant c'est un moyen rapide et facile de se familiariser avec les styles. Nous commençons par l'attribut de style, le style est égal et le mettons entre guillemets et disons que la largeur va être de 800 pixels. Px est l'abréviation des pixels et jetez un oeil à cela. Il y a un deux-points ici, pas un égal mais un deux-points. C' est ce qu'on appelle une paire de valeur de clé. C' est la clé et c'est la valeur et c' un modèle très commun dans le codage pour le web. Vous le verrez dans les langages de programmation et toutes sortes de choses. Centrez-le maintenant que c'est une certaine largeur fixe, nous avons une balise de marge ou un style de marge que nous pouvons utiliser. Si nous disons marge auto, le navigateur va lire cela et il va mettre la même quantité de marge de chaque côté de cette boîte. Ça va le centrer. Jetons un coup d'oeil. Ça a déjà l'air mieux. Et ça ? Lorsque vous utilisez des styles, il y a un effet en cascade qui conduit au nom des feuilles de style en cascade. Il dit essentiellement que le dernier style qu'il lit est le style qu'il va utiliser. Jetons un coup d'oeil à un style que nous pouvons appliquer au corps : style = « couleur » et je vais utiliser un gris, 33333. Je termine les styles avec le point-virgule, c'est vraiment important. Le navigateur ne sait pas où se terminer s'il ne voit pas l'un de ceux dans la déclaration de style. Cette touche de couleur va faire référence à la couleur de la police. Je viens de le rendre un peu plus léger gris pas si noir. Ici, faisons quelque chose de vraiment dramatique. Tapons du rouge là-dedans et voyons ce qu'on obtient, tout est rouge. Maintenant, pour démontrer de cette façon que les styles cascade, je vais descendre à notre h1 et dire style = « couleur : bleu ». Notez que même si toute la page Web était rouge, quand elle a rencontré un style qui était plus profond à l'intérieur des boîtes qui était différent, elle différait de celle-ci, donc nous avons du bleu là. Avons-nous d'autres boîtes imbriquées ? Non, nous ne le faisons pas. Mais nous pourrions y aller et le faire pour chacun de ces tags. Je vais m'en débarrasser parce qu'on n'utilise pas ça maintenant. allons nettoyer quelques choses très rapidement et ensuite nous allons passer à la section suivante qui va être de type personnalisé. Finissons nos petites boîtes ici. Je vais copier cette balise de rupture et en mettre une à la fin de chaque ligne de ce poème et ce que cela va faire est de l'enlever de ce comportement d'emballage que nous avons vu. Il y avait aller, il empile, agréable et soigné. Je vais me débarrasser de ce texte rouge . Maintenant, nous avons nos boîtes d'affilée, elles sont empilées. Vous pouvez voir le dom ici. Nos boîtes s'empilent les unes sur les autres. Nous avons notre forme de base ensemble. Continuons à coiffer certains de ce type et à nous éloigner de ces styles de type par défaut. 7. Ajouter un type personnalisé: L' une des choses les plus importantes que vous pouvez faire pour votre page Web est d'avoir un bon oeil de type. Il y a des polices de caractères par défaut qui viennent avec Mac et Windows, et nous pouvons utiliser certaines d'entre elles. Nous pouvons également utiliser des polices de caractères tierces. Je vais vous guider à travers les différences. Il existe deux types de polices de base. C' est un euphémisme, mais dans le but de cette classe, parlons de Serif et Sans Serif, ou de Serif et Sans Serif, selon l'endroit où vous venez. Un Serif est ce petit pied, ces petites choses Audi collantes sur une police. Ils sont censés vous aider à guider vos yeux à travers les lettres. Donc, c'est parfois, c'est la police par défaut, mais je pourrais aussi spécifier quelque chose de différent, comme font-family, sans-serif, et là je vais. Je crois que c'est Arial, je pense que c'est la valeur par défaut. Il y a quelques valeurs par défaut pour un Serif et Sans Serif. Je peux faire quelque chose comme profiter des polices de caractères inter-navigateurs, qui rendront à la fois sur Mac et PC. On y va. Voici la liste. Il y a 1, 2, 3, 4, 5, 6 que vous pouvez utiliser sur l'une ou l'autre plate-forme. Essayons Comic Sans. Parce que j'ai deux mots ensemble, je dois les mettre entre guillemets. Sinon, le navigateur va seulement lire le premier mot et arrêter. Il ne reconnaîtra pas le nom complet de la police. Lorsque vous imbriquez des guillemets, vous devez utiliser une combinaison de guillemets doubles et de guillemets simples, et puisque j'ai déjà utilisé des guillemets doubles, je vais utiliser des guillemets simples ici et mettre Comic Sans MS dedans et une virgule, et je laisse cette déclaration de police Sans Serif. Ce qu'il s'agit de votre pile de polices, et cela va de la police la plus désirée jusqu'à la police la moins désirée ou par défaut. La raison en est que vous n' avez pas réellement 100 % de certitude que la police que vous spécifiez sera sur la machine d'un utilisateur. Les polices système ne viennent pas avec votre site Web. Vous référencez une police qui vit sur un ordinateur local. Sur votre ordinateur, il va avoir fière allure, vous pouvez spécifier. Mec, je ne sais pas. Voyons voir. Je ne sais pas si j'ai du homard ici. Mais je peux spécifier une police que j'aime, une police fantaisie, Gotham, et elle serait rendue sur ma machine. Mais si la personne qui télécharge la page Web n'a pas également Gotham installé, il va juste par défaut à n'importe quel texte que vous avez spécifié ensuite. Ou si vous n'avez rien spécifié, il va juste rendre Times New Roman, qui est à quoi ressemble la page Web jusqu'à présent. Ici, j'ai Comic Sans MS, et je dis que si ce n'est pas disponible, utilisez n'importe quel type Sans Serif. Voyons ce que nous obtenons. Oh mon garçon, il est là. Bande dessinée Sans. Je pense que cela a la distinction douteuse d'être la police la plus détestée sur Internet. Voyons pourquoi tu détestes Comic Sans, conçu pour les pirates. Je te laisserai lire sur Comic Sans sur ton temps libre. Ce qui est important ici, c'est que vous comprenez la pile de polices, parce que nous allons utiliser une police Google pour vraiment mettre un bon type ici, et nous allons spécifier une pile de polices parce que cette police va provenir du CDN de Google ou réseau de distribution de contenu. Si, pour une raison quelconque, vous perdez la connectivité réseau ou, je ne sais pas, la police n'est plus prise en charge, vous aurez une pile de polices qui vous sauvera. Je vais spec Helvetica et puis un [inaudible]. On y va, Helvetica, un peu plus gentil qu'Arial, à mon avis. Maintenant, allons jeter un oeil aux polices gratuites de Google. Il y a beaucoup de sites de polices gratuits là-bas. Google facilite l'intégration de polices personnalisées. Google.com/polices. Ils ont des centaines et des centaines de polices. Vous pouvez trier par Serif, Sans Serif, Affichage, Écriture manuscrite. Nous allons chercher une police que j'ai déjà choisie appelée Josefin Slab. C'est là. J' ai appuyé sur ce bouton « Plus », ce petit dialogue apparaît, et à partir de cette boîte de dialogue, je peux obtenir des instructions sur la façon d'intégrer cette police. C' est super facile. Je copie ce lien dans la tête, et on n'a rien d'autre là-haut, donc on commence à remplir ça. Ceci est un exemple classique de cette partie de pensées du site, que la distribution tête-corps ou scission, peu importe ce que vous voulez l'appeler. C' est quelque chose que vous ne voyez pas réellement , mais c'est dire à votre navigateur de télécharger ceci. Il n'y aura pas de lien sur votre page web qui dit, Josefin Slab ou autre. L' autre chose que vous devez faire maintenant est de l'ajouter dans vos déclarations. Je vais mettre Josefin Slab, Helvetica, puis San Serif. Jetons un coup d'oeil à ça. On y va. C'est facile. Maintenant, nous avons un peu de travail à faire. C' est petit. Allons et appelons-le. Je vais déplacer cette déclaration vers notre div principale ici. J' ai ma largeur, j'ai la marge auto, mettons la famille de polices là-dedans. Je n'ai pas besoin du mot style égal parce que je suis déjà à l'intérieur d'une balise de style. Débarrassez-vous de ces citations supplémentaires, là. Pour le corps, je vais spécifier une couleur, un peu plus clair gris. Maintenant, pour cela, je vais faire notre taille de police par défaut pour toute la page, 18 pixels. On y va, un peu plus grand, c'est un peu plus facile à lire, et on va faire un peu plus ici. Mettons un peu d'accent sur le titre de notre page. ce moment, je viens d'avoir ces deux espaces réservés pour nos liens, qui sont à venir dans la section suivante. Je vais vous présenter la balise span. Balise Span ressemble beaucoup à une balise de paragraphe. C' est fait pour tenir du texte. J' ajoute cette boîte afin que nous puissions cibler spécifiquement le texte qui est à l'intérieur de celui-ci. Faisons une balise de style. Je vais dire que la taille de la police est de 27 pixels, et j'ai un petit titre. On dirait que j'ai besoin de lui donner un peu de place. Mettons un espace ici, peut-être même un tableau de bord, que diriez-vous de ça ? On y va. Là, vous pouvez voir à quel point il est facile de faire une mise en page vraiment agréable en utilisant les polices gratuites de Google. Passons maintenant à la section suivante. Nous allons relier ces pages, dont une que nous n'avons pas encore créée, et nous aurons terminé notre projet. 8. Ajouter des liens: Eh bien, tu l'as fait jusqu'à la fin. Nous avons encore une chose à faire avant la fin de notre projet. Jusqu' à présent, vous avez écrit tout le code nécessaire pour faire une page Web de base. Maintenant, nous allons ajouter quelques liens et les connecter, donc nous avons un site de deux pages. Les liens peuvent fonctionner de différentes manières selon la façon dont vous en avez besoin. Jetons un coup d'oeil à l'anatomie de base d'un lien. Ils ont utilisé la balise d'ancrage, qui est juste un et ils doivent être fermés. Ils ont aussi besoin d'un href. Le href est essentiellement l'adresse de l'endroit où vous voulez qu'ils aillent. Ils peuvent accéder à des liens qui se trouvent sur la même page Web. Ils peuvent accéder à des fichiers qui se trouvent également sur votre même site Web ou accéder à d'autres sites Web. Dites si vous mettez l'URL de Google là et que nous actualisons la page. On y va, ça va à Google. Nous pouvons aussi faire quelque chose comme si nous avions une très longue page, permettez-moi de dupliquer ce paragraphe un tas de fois et nous allons faire semblant que c'est une longue page de texte. On peut donner une pièce d'identité à l'une de ces choses. Appelons le chapitre un et changez notre href en chapitre un avec un hachage devant lui et il fera un lien vers le bas de la page vers le chapitre un. La façon dont nous allons l'utiliser est de créer un lien vers une autre page Web. Commençons par créer cette page. Vous pouvez cliquer avec le bouton droit de la souris et faire un doublon et le nommer Walden. Maintenant, nous devons changer tout le code qui est du premier poème au second poème. Je vais ouvrir ce fichier texte qui a les avantages dedans, copier et puis juste remplacer tout ce texte avec lui. Grâce à la magie de la vidéo qui n'a pris qu'une seconde. Écrivons un lien qui va aller à notre page Walden. Une chose, n'oublie pas le changement de photo. Permet de changer la photo très rapidement. Nous sommes sur Walden, alors faisons ce lien vers notre page d'index. Ensuite, allons à notre page d'index et faites-le lien vers Walden. Je vais avoir ce point de lien vers l'index. Il va juste se lier à lui-même. Rien ne se passera vraiment quand vous cliquez dessus. Cela ira à notre page walden.html. Lorsque nous nous rafraîchissons, nous devrions avoir deux liens qui nous permettent d'aller et venir. On n'a jamais écrit de lien pour celui-ci, donc ça ne va pas apparaître. Revenons en arrière et ajoutons ça très vite. Eh bien, vous pouvez voir qu'il est branché et qu'il passe d'une page à l'autre. J' ajoute principalement ce lien juste pour la cohérence visuelle. C' est mieux. Nous n'avons pas ce saut sous-jacent maintenant. Voilà, tu y vas. Vous avez un site Web de deux pages qui fonctionne. Si vous avez acheté l'hébergement et le nom de domaine, je vais vous montrer comment le mettre en place et le publier sur Internet et bien sûr, vous pouvez prendre cela et faire ce que vous voulez avec. Vous pouvez remplacer une police Google différente, une image différente. Vous pouvez mettre plus de textes, moins de texte. Vous pouvez y ajouter des pages supplémentaires. Je vais faire quelques cours supplémentaires sur le partage de compétences que je vais nous montrer comment faire mise en page avancée et créer un site Web à part entière. Quelque chose qui ressemble un peu plus à ce que vous avez l'habitude d'interagir sur le web. Mais pour l'instant, ça vous fait commencer. Félicitations, vous êtes un développeur web de base. 9. Édition et réconciliation: Ok, voyons si on peut mettre ça sur Internet pour toi. Il y a beaucoup et beaucoup de fournisseurs de domaine et de fournisseurs d'hébergement. J' utilise DreamHost depuis longtemps, probablement 15 ans. Ils avaient été vraiment fiables. Il y en a beaucoup d'autres, mais c'est celui que je vais traverser dans cette démo. C' est vraiment assez simple. Tout ce que vous faites est de prendre vos fichiers et de les mettre dans un autre dossier sur Internet et les domaines pointés vers elle, et nous tapons dans un navigateur, boom, il apparaît. Je vais vous accompagner à travers ça. Aussi, je veux que vous me laissiez quelques commentaires et que vous me disiez sur la classe, si elle manquait quelque chose, si elle vous apprenait tout ce que vous vouliez savoir, si vous pouviez penser à une critique constructive. Je suis toujours ouvert à l'entendre parce que je veux faire ces cours les outils les plus utiles pour vous qu'ils puissent être. D' accord. Jetons un coup d'oeil ici pour mettre votre site en direct. Encore une fois, félicitations. J' espère voir dans certaines classes futures, je vais enseigner un sur la mise en page CSS, puis un sur le Responsive Design. Alors je te verrai là-bas. Merci beaucoup et en avoir un bon. D'accord. On est prêts à mettre ça sur Internet. Il existe un certain nombre de clients FTP gratuits. FTP est File Transfer Protocol, et c'est la connexion que vous pouvez utiliser pour mettre vos fichiers sur votre serveur. Un client que j'aime est FileZilla, c'est gratuit. L' autre est Cyberduck. Vous pouvez rechercher l'un ou l'autre de ceux-ci et les télécharger, les ouvrir et ils ressemblent à ceci. Voici Cyberduck, il a un aspect très propre de type Mac OS et vous, fondamentalement, vous faites glisser des choses de votre Finder Window dedans. L' autre est FileZilla qui est beaucoup plus d'une vue hiérarchique. Celui qui correspond le mieux à la facture vue. Je vais utiliser Cyberducks. C' est si facile à voir. J' ai mis un dossier de test ici à la fin d'un domaine que je gère juste pour vous montrer ceci. Tout ce que nous avons à faire est de récupérer les fichiers de notre site, les faire glisser vers le fichier que nous voulons utiliser. Maintenant, si vous ne l'avez jamais fait auparavant, ça peut être un peu déroutant et vous pourriez ne pas l'obtenir correctement la première fois. Il y a généralement un fichier HTTP public, ou peut-être que c'est juste votre nom de domaine. Mais il y aura un certain nombre de fichiers là-haut en fonction du service que vous utilisez. Si vous utilisez DreamHost, c'est votre nom de domaine, vous verrez marcnischan.com. Vous pouvez ouvrir ça et déposer les fichiers là-dedans, aller sur marcnischan.com et il vient tout de suite. Ici, nous allons, faites glisser les fichiers là-bas, déposez-les, et nous devrions être en mesure d'aller dans un navigateur tout de suite et de les voir immédiatement. Ils sont là. C'est en direct sur Internet en ce moment. C' était aussi facile que ça. Chaque fois que vous effectuez une modification localement, vous remplacez simplement les fichiers sur le serveur et les mettez à jour. C' est ça. C'est ainsi que vous publiez un site Web. La dernière chose que vous devez faire pour terminer le cours est de télécharger une image en tant que capture d'écran de votre site terminé, ou peut-être même poster une URL si vous avez décidé de l'héberger.