[Jouer de la musique] 

DAVID MALAN J: Cela est CS50 et ceci est le début de la semaine 7. Donc accueillir à nouveau. Et vous souvenez peut-être que dans le problème mis en quatre, il y avait un peu d'une chasse au trésor pour certains fabuleux prix grâce à quoi après avoir récupéré les photos de Le personnel à la fois ici et à New Haven, vous avez été mis au défi de trouver le plus grand nombre de ces informaticiens que vous pouviez. Et nous avons un ensemble tas de soumissions. Ai pensé partager quelques-uns ici avec vous aujourd'hui. 

Et nous afficherons tous ces en ligne. Mais surtout, je voulais attirer votre attention to-- bien un, Sam était dans un assez grand nombre d'entre eux généralement posant comme ça. Mais il semble que des ce matin, le gagnant a été une certaine personne nommée Ken avec 24 du personnel capturé à la caméra ou un peu plus quand vous prenez en compte plusieurs membres du personnel dans les images. On voit ici Ken prochaine à Marie à New Haven. 

Maintenant, Ken, cependant, se tourne out est peu de cas de coin qui est pas encore arrivé auparavant. Il se trouve que cela n'a pas eu lieu me mettre en copie fine problème fixé quatre qui dit que les membres du personnel sont inéligible pour les prix fabuleux parce que Ken est, bien sûr, l'un des les photographes de notre personnel. Maintenant, avec cela dit, il l'origine m'a écrit pour dire s'il vous plaît de ne pas poster ces photos en ligne. Je pense en grande partie parce que la plupart des photos que ce photographe a pris l'air un petit quelque chose de ce genre. Et similaires. 

Mais Ken voudrait que je vous rassure qu'il est un très bon photographe, il est un professionnel, il prend photos qui ne sont pas floues, qui sont mieux au point, et il a pris un certain nombre de notre propre personnel. Mais plutôt que de reconnaître que Ken, ce que nous avons pensé que nous ferions est d'aller dans la liste des étudiants réels qui ont soumis. Et il se trouve que Lance avec 15 photos de ce matin était notre gagnant. 

Et photographié ici est Lance avec Colton, avec Skaz, avec moi-même, et avec Sam. Mais il se trouve que des 11h46, donc il ya tout juste un peu, Je suis retourné à mon e-mail et trouvé que nous avions encore un plus de soumission par un étudiant du nom de Bonnie dont l'email dit que cela. Ne vais pas mentir, je suis faisant cela pendant la classe. Et ensuite procédé à attacher simplement 14 photos, un timide de Lance de 15. 

Mais dans les photos de Bonnie, il se out étaient plusieurs membres du personnel, Sam parmi eux, de sorte que nous nous pensions voudrais faire est de reconnaître que ces deux. Donc, en plus d'obtenir l'Dropbox l'espace que tout le monde qui a participé reçoit, ces deux sections sera également recevoir un bon déjeuner traiteur pour eux et leur section accouple la semaine prochaine. Et si vous allez entendre parler de nous, Lance et Bonnie, à ce sujet. Donc grand bravo à eux. Maintenant, ceux d'entre vous qui feriez comme le déjeuner, plus généralement, savoir que CS50 déjeuner à Cambridge et New Haven est ce vendredi. Accédez au site slash RSVP de CS50. Et maintenant un mot sur les séminaires. Plus curricularly. Donc, nous approchons de la point de semestre où vous devriez commencer penser à des projets définitifs. Et en fait, dans juste un peu, sera soi-disant propositions pré être raison. Donc pré propositions sont destinées à être assez faible impact et vraiment juste une occasion pour de composer une courte note vos collègues de l'enseignement pour informer lui ce que vous vous penser peut-être envie de faire pour votre projet final. 

Maintenant, de nombreux étudiants finissent faire basé sur le Web des projets définitifs. Et bien sûr, nous sommes juste maintenant dans cette dernière semaine et au-delà de plonger dans la programmation web. Donc, ne vous inquiétez pas si vous ont absolument aucune idée de comment vous construire les idées qui vous pourriez avoir dans votre esprit. Ceci est vraiment juste une fonction de forçage pour vous aider à réfléchir et à parler avec votre TF à ce sujet. Mais pour vous aider avec ça, et avec des projets finaux en fin de compte, savoir que CS50 a une tradition d'offrir des séminaires. 

Et ceux-ci sont facultatives, les mains sur, ou donner des conférences en fonction des opportunités pour en savoir plus sur des sujets qui sont un petit accessoire à le cours de syllabus, mais néanmoins merveilleuse matériau à conduire des projets définitifs. Et donc cela est la liste qui est Personnel CS50 ici à New Haven ont mis au point pour Cette année, environ iOS programmation, Android la programmation, le développement de jeux, et des grappes de plus d'outils et les langues et les techniques. 

Alors gardez un œil sur le site de la CS50. Et en attendant, si vous souhaitez inscrivez votre intérêt pour toutes ces choses, aller au registre de barre oblique de CS50. Et nous allons ensuite un suivi quant à la jours et les heures de vol et les lieux et tout sera plus everything-- être écoutés et également disponible sur demande après si vous ne pouvez pas réellement faire. Alors sans plus tarder, nous quitté la dernière fois avec GET. 

Et ce fut comme le message qui était l'intérieur de l'enveloppe virtuelle, rappeler, que nous sommes passés d'un routeur à la routeur entre un navigateur Web et une bande serveur. Et ce message avait l'air un petit quelque chose comme ça. Tel est le message que plus mystérieux était en fait à l'intérieur d'une enveloppe écrit sur un morceau de papier dont la première ligne dit littéralement, obtenir slash. 

Et tout comme un contrôle de santé mentale, ce slash ne représentent? Qu'est-ce que veut dire quand slash demandant un site web? Vous demandez tout le temps. La plupart chaque fois que vous visitez un site Web, vous ne tapez pas dans un nom de fichier. Vous avez probablement juste aller à Facebook.com, entrer, gmail.com, ou similaire. Et ce qui ne représente slash? Qu'est-ce fichier? Ou quelle page, spécifiquement? 

L'indice, oui. Donc, la page par défaut. Donc, si vous ne spécifiez pas un fichier nommer que nous allons commencer à voir, vous êtes en fait juste demandant me donner la page par défaut de Facebook ou donnez-moi ma boîte de réception ou de donner moi la page par défaut de nouvelles sur le site de CNN ou similaire. Et un serveur répond alors à ce message avec quelque chose comme ça, en disant oui, je parler version HTTP 1.1. 

200, qui est un état code que nous, les humains, rarement jamais voir parce qu'il est bon. Parce que cela signifie OK, la demande a été reçu et manipulé correctement. Et le type de contenu apparemment dans la réponse est très souvent, mais pas toujours, texte. Et précisément, HTML. Et cela est en fait où nous regardons aujourd'hui. 

Donc, en fait, je vais aller de l'avant et ouvrir un navigateur. Je vais utiliser Chrome, vous pouvez utiliser plus d'un navigateur dans les semaines à venir. Nous recommandons généralement Chrome car il est particulièrement bon pour les développeurs de logiciels. Il a beaucoup de construit dans des outils qui facilitent de développer non seulement HTML et CSS, choses que nous allons commencer à parler aujourd'hui, mais aussi d'autres langues aussi. 

Et je vais aller de l'avant et aller to-- Je vais configuration, cliquez sur ou à droite cliquer n'importe où sur une page web. Et je vais aller à Inspecter l'élément. Et je vais modifier mon écran, juste un peu ici. Passons ce au fond. Donc, cela est ce qu'on appelle Inspecteur de Chrome. Donc, cela ressemble à un débogage outil intégré dans Chrome. 

Chacun d'entre vous ont déjà cette si vous avez été en utilisant Chrome. Et il vous permet de voir ce qui se passe sur sous le capot d'une page web. Donc, nous allons effectivement prendre un regarder cela comme suit. Il a beaucoup plus de fonctionnalités et nous nous soucions aujourd'hui. Mais il ya ces onglets ici. Éléments, le réseau, les sources, calendrier, et quelques autres trucs. Je vais cliquer sur Réseau pour un moment. 

Et il est un peu écrasante au premier coup d'œil ici. Mais ce que je vais faire est de laisser moi de simplifier un peu. Je vais tourner sur le enregistrement de la lumière de sorte qu'il est rouge. Et je vais dire préserver journal. Et cela est juste un peu chose I figured out au fil du temps que cela va sauver tout ce qui arrive dans le navigateur. Et maintenant, je vais aller à http://facebook.com. 

En fait, nous allons faire www pour faire bonne mesure, slash. Entrer. Ainsi, un grand nombre d'URL vous pourriez avez visité. Et maintenant web de Facebook Page arrive au sommet. Et puis tout un tas de choses a volé par le bas. Et de fait, il se trouve que lorsque vous visitez Facebook.com, vous n'êtes pas seulement faire une requête HTTP, il se trouve que cela va Facebook.com envoie 41 de ces enveloppes, chacun avec sa propre requête GET, comme indiqué, mais derrière l'écran ici, au bas de l'écran, il indique que, en effet, mon navigateur a présenté 41 demandes. 

Et au total, elle a transféré 861 kilo-octets et il a fallu, pour une raison autant que huit secondes pour télécharger tout cela. Voilà donc fait un peu bizarre que le site de Facebook faudrait que longtemps, mais qu'il en soit ainsi dans ce cas. Maintenant, tout cela, je ne se soucient pas vraiment à propos de l'exception de la demande la plus élevée. Allons donc à celui-ci ici et laissez-moi un zoom arrière pour un instant. 

Et laissez-moi Zoomer sur cette. Donc ce que je l'ai fait à gauche, même si il ya beaucoup de choses ici est que je l'ai souligné Facebook.com puis Notez que je défilement vers le bas, défilement vers le bas, défilement vers le bas, de demander têtes. Et vous verrez que Chrome montre moi essentiellement les composants internes de la demande que je faisais. Il est pas tout à fait le formatage dans la même chemin, mais remarquez, il ya mention obtenir, Indication Il ya mention de l'hôte, Facebook.com, le chemin, ou une barre, qui est le fichier que je demandé. 

Et puis, si je fais défiler sauvegarder, nous allons effectivement voir que ce que Facebook est retourné pour moi est l'ensemble de ces têtes. Donc, à l'intérieur de cette enveloppe virtuelle sont en effet un grand nombre de paires clé-valeur. Un mot, un colon, et ensuite une valeur. Un mot, un colon, et une valeur. On les appelle des têtes. Et il ya beaucoup plus de détails ici nous nous soucions réellement en ce moment. 

Mais cela est en second lieu à dernier là-bas, remarquer, que le serveur de Facebook.com, bien dit voici un peu de texte HTML. Donc, tout cela pour dire que lorsque vous demandez une web page d'un navigateur à un serveur, ce serveur répond avec une enveloppe de son propre à l'intérieur de laquelle est texte. En d'autres termes, HTML. Langage Signalétique Hyper Text. Qui est une autre langue que nous vous présentons aujourd'hui que les humains ou ordinateurs génèrent pour mettre en oeuvre des pages web. 

Plus précisément, nous allons regarder cela. Je vais maintenant revenir sur le site de Facebook. Et je vais tout simplement le contrôle-clic ou clic droit et cliquez sur source de la page. Et même si vous ne l'utilisez Chrome, IE peut faire cela, Firefox peut faire cela, Safari peut le faire, même si le menu options peuvent regarder un peu différent. Et cela est le HTML que Mark et société à Facebook ont ​​écrit. 

Et collectivement, cette langue ici met en œuvre le bleu et la page blanche que nous avons vu il ya un instant. Maintenant, cela est un peu écrasante. Mais si nous regardons en haut à gauche, nous sommes va commencer à voir quelques modèles. Il ressemble à il ya beaucoup de ces équerre ouverte et puis il ya ce mot-clé HTML. Voici une autre ouverte équerre et la tête. 

Voici, si nous défiler vers le bas et vers le bas et vers le bas, je suis aller de l'avant et essayer à la recherche de quelque chose. Il chemin au cours sur la droite voici corps de console ouverte. Et rappeler de la dernière le temps que nous avons proposé que la page web simple qu'un humain pourrait écrire pourrait ressembler à un petit quelque chose de ce genre. Balise HTML Open, tête ouverte tag, ouvert balise de titre, puis le titre fermé, tête fermée, ouverte balise body, un texte, le corps fermé, HTML fermée. 

Mais une pause ici pour un moment. Ce code, même si vous avez il n'a jamais écrit avant mais ne comprends toujours pas ce qui se passe, semble assez bon. Droit, il est très propre. Il est très stylistiquement belle. Un grand nombre d'indentation et de l'espace blanc. Facebook est pas. Alors, pourquoi est tellement Facebook pire que moi à écrire du HTML? Apparemment. 

Droite, cela ressemble à un sur cinq pour le style. Il ya une raison convaincante pour eux de couper ces coins. Très bien, donc ils ne veulent pas rendre plus facile pour vous de lire. Donc, dans un certain sens, ils sont obscurcir il, une sorte de brouillage, il au moins esthétiquement si qu'il est plus difficile pour Myspace pour aller arracher leur page d'accueil et le code HTML pour elle. Il se trouve que les programmes cependant, y compris Chrome, nous pouvons nettoyer cette place Super facilement. Donc, il est pas tout à fait comme la raison. Quoi d'autre pourrait être la cause. Ouais. Ouais, données sur les coûts d'espace blanc. Que voulez-vous dire? Oui exactement. Si vous frappez la touche de tabulation d'un lot ou la barre d'espace, examiner les implications. Ainsi, chaque touche de votre clavier est un [Inaudible] représentée comme un octet. 

Donc supposer que Mark ou l'un des développeurs ces jours-ci frappe la barre d'espace qu'une seule fois dans cette page HTML représente la page d'accueil de Facebook. Et Facebook a beaucoup des utilisateurs de ces jours. Donc supposer que la page d'accueil de Facebook est visité par un milliard de personnes aujourd'hui. Et quelqu'un sur Facebook a frapper la barre d'espace qu'une seule fois. 

Donc, un octet supplémentaire, un milliard de demandes, combien plus les données sont Facebook transférer sur Internet parce que quelqu'un a frappé le barre d'espace sur son clavier? Un milliard d'octets, ou d'un gigaoctet de les données sont envoyées à partir de serveurs de Facebook de personnes à travers le monde sans raison valable. Maintenant, cela est juste un espace. 

Imaginez si nous avons réellement nettoyer ce chose et en retrait et ajouté beaucoup d'espace blanc et tabulations et des espaces, vous vous retrouvez gigaoctets de dépenses, sinon terra octets de plus d'espace. Et si super dans la commune monde réel de développement web est de rapetisser votre code. Et nous finirons par voir comment vous pourriez le faire. 

Mais aujourd'hui, nous allons commencer à écrire du code qui est en fait lisible par nous les humains. Il se trouve, cependant, si vous revenez à cet outil de Chrome Inspecter l'élément, Auparavant, nous étions sur l'onglet Réseau. Il se trouve que si vous allez à la éléments onglet, ce que vous voyez réellement Chrome est est assez imprimés de même que la version HTML. Nous avons donc deobfuscated il. Donc, il n'y a pas de match pour un ordinateur. Et maintenant vous pouvez réellement cliquez autour et commencer pour voir la hiérarchie qui est une page web. Donc, nous allons effectivement faire. Je vais aller de l'avant et d'ouvrir sur mon Mac un programme appelé modifier le texte. Et de rappeler que ceci est juste un super simple éditeur de texte. Windows a notepad.exe. Et je vais mot à mot tapez la commande suivante. Type Doc HTML, parenthèse ouverte HTML, fermé le support HTML, nous avons la tête de la page ici, l'extrémité de la tête de la page ici, un titre sera comme, bonjour monde. 

Et puis, ici-bas, nous avons besoin le corps de la page Web. Fourgon. Et puis ici, bonjour monde. Bien. Donc, nous avons écrit une page Web super rapide. Je vais l'enregistrer comme hello.html sur mon bureau. Mon Mac me plaindre, pensant que, attendez une minute, ceci est un fichier texte, le faire vous voulez l'appeler .txt? Mais non, je veux utiliser dot HTML. 

Et puis ce qui est bien si je il suffit de double cliquer sur ce fichier, hello.html, voici ma page web. Malheureusement, je suis le seule personne dans le monde qui peut visiter cette page dès maintenant. Parce que là où il ne vit apparemment? Il est sur mon Mac, non? Qui est inutile. Comme personne dans cette salle et encore moins sur l'Internet peut effectivement visiter cette page. Donc, aujourd'hui, nous devons introduire un autre élément. 

Et pour ce faire, je vais aller de l'avant et d'ouvrir nuage 9. Donc Cloud 9 est bien sûr une nuage Clients-- base CS50 IDE-- qui a tous les espaces de travail de nos courir quelque part sur Internet. Et cela signifie que tous nos fichiers sont déjà accessibles au public. Allons donc de l'avant et le faire. Je vais aller de l'avant et créer un nouveau fichier NCS50IDE. Je vais l'enregistrer comme avant comme hello.html et cliquez sur Enregistrer. Et maintenant, juste pour gagner du temps, je vais aller de l'avant et de copier-coller ce code plutôt que de le retaper. Et l'enregistrer. Et maintenant, je dois une hello.html fichier appelé. Mais comment puis-je réellement ouvrir comme une page Web? Eh bien, il se trouve intégré à l'CS50 IDE est non seulement un compilateur comme clang et un débogueur comme GDB et grappes d'autres programmes, il ya en fait une part entière serveur web fonctionnant au sein CS50 IDE. 

Chacun d'entre vous, qui est-à-dire, avoir votre propre serveur web. Et un serveur web est juste un morceau de logiciels dont le but dans la vie est de servir des pages web. Pour écouter les demandes des navigateurs et répondre avec petites enveloppes virtuelles à l'intérieur de laquelle est le contenu que je l'ai écrit. Donc, ce serveur web est la source réellement libre et ouvert. Où open source signifie simplement logiciel que quelqu'un d'autre a écrite que nous pouvons tous réellement voir et télécharger et même modifier le code source. Et il a appelé Apache. 

Et nous avons fait un peu plus facile à utiliser dans CS50IDE en l'appelant 50 Apache. Alors qu'il peut effectivement comprendre la suite. Je vais dire Apache 50 début. Et puis, je vais juste dire dot. Et nous voyons quelque peu un message disant arcanes Document de définition des [Apache? groupe?] à la maison, ubuntu, quelle qu'elle soit, réduire l'espace de travail. A partir serveur Web Apache 2 succès. 

Tant histoire courte, je ont juste poussé un bouton et allumé un serveur Web qui est maintenant écoute sur Internet sur le port TCP 80 à une adresse spécifique. Et il est dit ici, et cela va changer en fonction sur votre nom d'utilisateur et d'autres facteurs, mais remarquez maintenant si je clique sur ce, IDE50 dot jharvard et ainsi et donc, vous remarquerez que tout ce temps depuis plusieurs semaines, vous pourriez avoir remarqué que votre propre nom d'utilisateur est incorporé dans la main en haut à droite coin de CS50IDE. 

Et qui a été effectivement tout cela chronométrer l'adresse à laquelle vous pouvez visiter tous vos fichiers via le web. Jusqu'à présent, il n'a pas compté, parce que dans C, vous généralement veulent que les choses en cours d'exécution dans un terminal, pas sur le web. Mais aujourd'hui, nous commençons l'écriture de code basé sur le Web que nous ne voulons accessible à URL publiques. Donc ce que je vais faire est de cliquer cette URL. 

Et remarque que je vois un assez Indice laid, un répertoire, mais ce fichier vous saute au doute? Hello.html. Voilà parce que je sauvé le fichier dans mon espace de travail. Et ce que je l'ai dit Apache le serveur Web est de regarder dans l'espace de travail le répertoire de David. Et laisser personne dans le monde de voir ces fichiers. 

Et en effet, si je maintenant cliquer sur hello.html, Je vois dans cet onglet exactement ce fichier. Maintenant, remarquez, nuage de 9 DOING quelque chose d'un peu utile pour nous. Dans CS50 IDE, Indication Il ya soudain une barre d'adresse. En effet, même si nous sommes utilisant Chrome pour visiter CS50IDE, intérieur de CS50IDE est son propre version d'un navigateur web en ce moment. Et donc plutôt que de compliquer les choses en tant que telle, Je vais aller de l'avant et il suffit de copier cette URL. Je vais aller de l'avant et juste ouvrir mon propre fenêtre Chrome. Donc il n'y a pas de magie ici, pas CS50IDE. Je vais juste coller littéralement mon J Harvard URL et appuyez sur Entrée. Et voila, maintenant, moi, et en théorie, tout le monde sur l'Internet, si je l'ai configuré autorisations de manière appropriée, peut visiter ce fichier. Et maintenant, si je disais hello.html, voila, il est ma page web incroyablement décevante. Alors, faisons un test de cohérence rapide. Parce que tout cela conceptuel est mise en place. Et nous avons fait pas vraiment vous appris à écrire en HTML soi. Vous avez des questions à ce jour sur ce qui vient de se passer? Oui. CS50 ne possèdent ces pages web? Dans quel sens? Bonne question. Donc CS50 de possède CS50.io. Nous avons en effet acheté ce nom de domaine. Et par la nature de vous les gars connectant à CS50IDE, vous obtenez tout ce qu'on appelle un sous-domaine. 

Donc IDE50-Malan, ou IDE50-Rob.CS50.io, qui est votre adresse unique dans notre nom de domaine. Donc, pour les fins de la formation, vous avez votre propre adresse unique. Mais nous avons simplifié les choses par l'achat du domaine de premier niveau, CS50 dot I / O, puis tout le monde est à l'intérieur de cela, pour ainsi dire. Et nous allons revenir à ce que dans quelques semaines probablement, en particulier au projet final temps, quand certains d'entre vous pourrait vouloir obtenir vos propres noms de domaine. Il est en fait relativement simple. Bien. Alors, faisons maintenant ceci. Je vais retourner dans CS50IDE, où mon dossier en ce moment, hello.html, est pas tout à fait intéressant. Je voudrais faire quelque chose un peu mieux que cela. Donc, je vais faire quelque chose comme ça. Permettez-moi de paragraphs.html ouverte. Donc, cela est un fichier je l'ai écrit à l'avance. Au sommet de celui-ci, comme toujours, nous avons des commentaires. Mais en HTML, commentaires regarder un peu différent. Sur la troisième ligne et la ligne 14, vous voir la syntaxe pour commencer un commentaire et mettre fin à un commentaire. 

Mais aucune de ces choses dans entre les questions fonctionnellement. Il est juste une note à un humaine ce qui se passe ici. Et juste comme un bon sens rapide vérifier, si je fais défiler vers le bas, Quelle est la nouvelle évidente tag que nous avons mis en place? Les balises jusqu'à présent, nous avons vu sont ouverts support de HTML, la tête, le titre et le corps. Mais ce qui est évidemment nouvelle maintenant? 

Ouais, donc p. La balise p ou balise de paragraphe. Et puis je viens emprunté de défaut Texte latin pour constituer mes paragraphes. Parce que ce que je voulais démontrer comment vous pourriez représenter paragraphes de texte en HTML. Et donc ce qui est de commencer à produire ici est qu'il ya déjà un modèle de développement. Et laissez-moi aller de l'avant et le faire. Permettez-moi de commencer par désactiver Apache. Et je vais le dire à lui-même commencer de nouveau à l'intérieur de la source d'aujourd'hui sept m répertoire. Alors que je avoir accès à tout. 

Et maintenant, si je reviens à cette liste de répertoires, remarque je vois tous les fichiers à partir d'aujourd'hui. Et vous verrez dans le prochaine série de problème, nous allons vous donner des instructions pour faire exactement cela. Si je ouvre paragraphs.html, cela pourrait ainsi ressembler à un langage de programmation à vous si vous ne parlez pas ou lire le latin. Mais cela est à seulement trois paragraphes de texte qui sont marqués en HTML. 

Et remarquez paragraphe pauses entre eux. Parce qu'il se trouve, et même si vous pourrait être enclin à le faire, alors que dans le monde réel, si vous voulez mettre en ligne pauses entre les choses, vous pourriez tout simplement faire et cliquez sur Enregistrer. Et maintenant, si je recharge ici, un avis que tout simplement brouille ensemble en une seule goutte de texte. Parce que le HTML est une sorte de langage muet. 

Il est destiné à être utilisé dans un tel une façon que le navigateur ne faire explicitement ce que vous lui demandez de faire. Donc, si vous ne dites pas qu'il me donner un nouveau paragraphe, tu ne vas pas pour voir un nouveau paragraphe. Et en fait, ce que le navigateur va faire est, même si vous appuyez sur Entrée, disons encore et encore et encore, se déplaçant de cette façon de texte bas sur l'écran, puis sauvegarder puis rechargez, le navigateur va à l'effondrement de tout cet espace blanc en un seul, les espaces visibles. Bien. Voilà donc la balise de paragraphe. Et alors quel est le motif qui se développe ici? Eh bien, il semble être le cas que HTML est tout au sujet de commencer un tag et se terminant une balise. Et qu'est-ce qu'un tag? Eh bien, il est juste un morceau de syntaxe. Ouvrir le support, un mot-clé, support fermé, est une balise. Ou balise de début. Et puis quand vous êtes fait vous exprimer, comme dans vous avez terminé avec le paragraphe, vous faites ainsi dire en face. Mais l'inverse est pas tout à fait à l'envers. 

Il vous suffit de préfixer la même étiquette de nom avec une barre oblique comme ça. Bien. Donc, pas tout à fait passionnant. Et en fait, nous ne faisons pas la web tout cela plus intéressant. Que faire si je veux faire des choses plus grandes et audacieuses? Donc, il se trouve que voici un exemple dans headings.html, où, dans mon corps, Je dois une balise H1, H2, H3, quatre, cinq, six ou, qui sembler assez mystérieux. Mais si je vais ouvrir cette exemple, nous allons jeter un coup d'oeil. Headings.html. 

Donc navigateurs par défaut peuvent donner vous texte qui est gros et gras de tailles disparates. H1 est grande. H6 est plus petit et puis tout le reste entre les deux. Voilà donc intéressant, mais encore pas vraiment le web, je sais. Que faire si nous voulons je dois quelque chose comme une liste. . Alors, voici une liste à puces de trois des maisons de Harvard. 

Comment avez-vous fait cela? Eh bien, jetez un oeil à list.html. Et ici, nous voyons une peu de funkiness mais nous allons examiner ce qui se passe. Donc, sur la base de ce que vous venez de voir, UL signifie liste non ordonnée. Liste non ordonnée signifie simplement puces. Il n'y a pas de chiffres. Il ya aussi quelque chose appelé un liste, qui est un OL au tag ordonné. Puis LI, élément de la liste est tout ce qu'il signifie. 

Et donc automatiquement numéros tout pour vous. Mais encore une fois, toute ma indentation et l'espace blanc est juste pour l'amour de moi. Le navigateur est pas effectivement aller aux soins. Ainsi, même si vous ne pouviez pas faire, pour être clair, vous ne devriez pas même si Le navigateur sera encore être en mesure de comprendre très bien. Je suis frappé de rechargement dans mon navigateur, je cliquant reload et aucun changement qui se passe parce que le navigateur encore faire exactement ce que je lui dis de faire. 

Bien. Donc, tout cela est juste le texte. Maintenant, nous allons faire quelque chose de plus intéressant. Je vais aller de l'avant et emprunter un peu de cette HTML. Je vais aller de l'avant et créer un nouveau fichier ici. Et nous appelons cette rick.html. Nous avons de façon disproportionnée quelque chose d'occasion appelé un rouleau rick dans ce classe cette année, je ne sais pas, il vient de se passer organiquement. 

Et maintenant, il a obtenu hors de contrôle. Donc je vais juste aller avec elle. Et si je vais à Google Images et Rick Astley. Si vous ne savez pas pourquoi nous faisons cela, il suffit de lire sur Wikipedia. Chaque fois que vous avez cliqué sur le lien, quelqu'un riait quelque part. Et laissez-moi aller ahead-- il nous allons, nous allons voir ce image. 

Nous avons donc ici un image dans Google Images. Et supposons que cela est raisonnablement partout sur l'internet. Donc, je vais supposer qu'il est OK pour moi pour réellement mettre cela en ma page web. Je vais aller de l'avant et copier URL de l'image. Et maintenant, si je reviens vers le Cloud 9, nous allons voir ce que je peux faire ici. Donc ici est juste une page web. Ceci est Rick Astley, haha, Je vais maintenant revenir à mon navigateur, recharger, et intéressant. 

Où est Rick? Alors laissez-moi voir ce qui est arrivé. En fait, je vais faire comme si je ne le faisais pas. [Inaudible] le mettre ici. Nous y reviendrons dans un instant. Alors, voici rick.html. Donc, ce ne est pas de Rick Astley. Donc, il se trouve que nous pouvons effectivement l'ajouter ici. Ceci est de Rick Astley. Je vais dire me donner une image dont source est l'URL Je viens de copier, ce qui est apparemment heureux quelque chose d'anniversaire ou autre. 

Et maintenant, je vais fermer le tag comme ceci. Donc, ce tire à super long. Mais remarque que tout ce que je fait image de parenthèse ouverte est, la source avec un attribut de cette. Et il est vraiment une URL longue. Et à la fin, le remarquer. Slash Pourquoi ai-je fait équerre au lieu de, comme toute autre étiquette, ayant une parenthèse ouverte, IMG, support fermé? Il suffit de prendre une supposition même si vous avoir aucune connaissance que ce soit avec HTML avant. 

Donc, il est de savoir comment il ferme la commande, mais pourquoi t-il pas vraiment intuitive sentiment de faire quelque chose d'un peu plus verbose comme proche image? Ouais. Ouais. Juste sémantiquement, il n'y a aucun sens de à partir d'une image et se terminant une image, il est ou on ne l'est pas. Donc, il n'a pas de sens de laisser un espace pour rien d'autre à l'intérieur d'une image. Vous ne pouvez pas faire cela. Et si la syntaxe serait généralement juste de faire la barre oblique à l'intérieur de l'étiquette ouverte ou la balise de début et puis appuyez sur Enregistrer. 

Donc, si je recharger maintenant ce fichier, maintenant Je dois une bonne page web cuisson ici. Et nous pourrions certainement vraiment ennuyer les gens en incorporant à la place comme un lien YouTube. Et en fait, à tout moment vous avez jamais allé sur YouTube, et laissez-moi en fait accidentellement Rick me rouler ici. Alors Rick rouleau. Alors Rick Roll-- je vais aller ici. 

[Jouer de la musique] 

OK, une personne qui aimait. Donc remarquer tout ce temps, si vous cliquez sur le lien Partager, vous, bien sûr obtenir l'URL que vous pouvez réellement Intégrer dans un courriel ou une image légale ou dans un ensemble de problèmes ou dans un diaporama. Et maintenant, si je clique sur la place intégration, remarquer que tout ce temps, ce genre de choses a été là. Je vais aller de l'avant et de copier ce. 

Et juste pour que nous puissions mieux voir, je suis va coller dans mon éditeur de texte. Notez que ce ce que YouTube vous a dit. Chaque fois que vous visitez un YouTube vidéo, si vous vouloir intégrer la vidéo sur votre page web, il suffit de saisir cela. Donc, cela est encore un autre Tag HTML appelé une iframe. Ou un dans le cadre de la ligne. Donc, il semble trop un peu plus complexe de tous les autres. Donc, il se trouve que l'image tag et apparemment la balise iframe prendre ce que l'on appelle des attributs. 

Et ceci est un autre morceau de syntaxe HTML. En plus de l'étiquette de nom, ouvert support nom de la balise, vous pouvez contrôler le comportement de l'étiquette en ayant tout un tas d'attribut est égal à la valeur. Attribut égale valeur. Et ainsi, par exemple, YouTube nous dit si vous voulez la largeur de cette vidéo être 420 pixels et la hauteur être 315 pixels, qui est comment vous exprimez en HTML. 

La source de la vidéo va être cette longue URL YouTube puis quelques autres trucs comme cadre frontière est égal à zéro, ce qui signifie probablement qu'il ya aucune bordure autour de la chose. Autoriser le plein écran sans doute signifie que l'utilisateur peut cliquer sur un bouton et en fait plein écran la vidéo. Donc, si je veux vraiment être impressionnante ici à Rick dot HTML, plutôt que d'utiliser la balise d'image, laissez- me supprimer, au lieu coller ce. Et maintenant recharger. Et maintenant, nous y revoilà. Très bien, ça suffit. Tous droits alors je vais essayer difficile de ne pas refaire cela. Alors, quelles sont quelques-uns des plats à emporter ici? Donc, HTML, aussi laid que ces pages Web sont, est en fait assez simple. Il est pas un langage de programmation. Il ne possède pas de fonctions. Il ne possède pas de boucles. Il ne possède pas de conditions. Tout ce qu'il a est des dizaines de différentes étiquettes, dont chacun a zéro ou plusieurs attributs. Et en fait, ce qui est amusant à propos HTML que vous commencez à plonger dans est qu'il est très auto enseignable. 

Tout ce qu'il faut est une compréhension du cadre général de HTML. Qu'est-ce qu'un tag, ce qui est un attribut, comment voulez-vous configurez en fait une page Web comme suit. Et tout le reste est vraiment le résultat de regarder dans une référence en ligne ou googler comment faire certaines technique ou, comme nous l'avons vu, en regardant la source de Facebook code, en regardant un site Web que vous aimez à son code source et comprendre comment les développeurs là-bas effectivement mis les choses. 

Donc, nous pouvons faire des images. Et en fait, nous l'avons fait il ya un moment. Permettez-moi aller de l'avant et juste vous montrer. Voici quelques exemples de code. Si jamais vous voulez voir Grumpy Cat. Donc remarquerez que je peux avoir une balise d'image ici. Et je dois un commentaire dessus. Je dois une alternative texte pour l'accessibilité. Donc, quelqu'un qui est à l'aide d'un écran lecteur pour des raisons de la vue peut en fait alors leur lecteur d'écran dire Grumpy Cat. Parce que si ils ne peuvent pas voir l'image, ils peut au moins avoir leur ordinateur leur dire verbalement ce qu'il est. Et la source de ce fichier est cat.jpeg. Donc, en fait, si je voulais vraiment obtenir intelligent, ce que je pourrais avoir done-- Je promets de ne pas aller à Rick Astley, de sorte Je vais google pour un chat à la place. Et si je vais à Google Images ici, et nous supposerons que ce soit une photo de mon chat. 

Supposons que je dois le contrôle cliqué ou clic droit, sur ce, accidentellement effrayant. Et je vais cat.jpeg pour sauver sur mon bureau. Permettez-moi maintenant de revenir à Cloud 9. Remarquez qu'ici, je peux aller à télécharger des fichiers locaux. Et si je prends cette fichier, cat.jpeg, préavis que je peux le faire glisser et déposez-le dans Cloud 9 et il va me crier dessus ici. 

Parce que nous avons déjà vous a donné un fichier cat.jpeg, mais il est super facile à prendre une photo que vous avez prise de Facebook ou Flickr ou similaires et effectivement glisser-déposer dans les nuages ​​9 et ensuite faire partie de votre propre personnel site web ou un problème mis sept ou huit comme nous le verrons bientôt. Et puis quand vous enfin visiter ce chat, en supposant que je téléchargé ce même chat, that-- préavis qui était adorable. 

Qu'est-ce que vous verriez est quelque chose comme ce visage ici. Ainsi, les fichiers que vous référence à l'intérieur d'une page Web peut être soit locale dans votre propre compte ou à distance sur un autre serveur comme dans le cas de la Rick Photo Astley il ya un peu. Alors, où ce else-- pouvons-nous faire ici? Donc, nous allons jeter un oeil à ce qui suit. Vous savez ce qui est cool? 

Nous avons jusqu'à présent été prise pages web très statiques. Je veux pour pimenter les choses comme suit. Je veux faire mon propre moteur de recherche. Donc, pour faire un moteur de recherche, de laisser aller de l'avant et de commencer à faire cela. Je vais aller de l'avant et de créer un nouveau fichier appelé search.html. Et nous avons prefabed versions en ligne. Oups. Ne pas coller dans votre fenêtre de terminal. Versions préfabriquées ligne. Et je vais commencer comme suit. Alors, voici le début de un fichier appelé search.html. Je vais l'enregistrer dans le répertoire source d'aujourd'hui. Je vais appeler cette recherche. En fait, nous allons faire mieux. CS50 Recherche et effectivement il marque. Et maintenant, je vais dire quelque chose comme H1 CS50 Recherche. Et puis ici, H2 bientôt. Et juste pour rappel, H1 et H2 dire ce que respectivement? 

Ouais, donc gros et gras, et pas aussi grand, mais toujours audacieux. Donc, si je sauve ce et je vais ici, Voyons le fichier search.html. Tout droit, et celui-ci droite- est [inaudible]. Etre prêt. David est confus. Oh, il est juste là. David est un idiot. D'ACCORD. Tiens voilà. Donc la recherche CS50 bientôt. Alors maintenant, nous allons synthétiser ce que nous avons fait la semaine dernière. 

Où nous avons parlé du inférieurs mécanique de niveau de HTTP. Et ces nouvelles idées du HTML, qui est juste ce langage de balisage où vous dire à un navigateur exactement quoi faire et mettre en place notre propre moteur de recherche. Donc, au lieu de simplement disant à venir, je suis va introduire quelque chose appelé un tag de formulaire. Et sous cette forme, je vais avoir quelque chose comme un champ de saisie. 

Et le nom de cette entrée terrain, je vais l'appeler Q. Et le type de ce champ de saisie Je vais dire est juste "texte". Et un champ de texte, comme nous allons voir, est tout simplement une zone de texte. Et il ne détecte pas ici pour avoir rien à l'intérieur de celui-ci à ce point. Et donc je vais simplement à fermer la balise avec ce barre oblique à droite dans la balise même. Et puis je vais avoir une autre entrée. Type d'entrée est égale à soumettre. Et puis je vais fermer celui-là aussi. 

Et maintenant, je vais revenir ici. Et déjà nous voyons, quoique assez laid, je l'ai obtenu les débuts de ma propre page de recherche ici. En fait, je vais essayer de nettoyer ce jusqu'à un peu. Il se trouve que sur le entrée ici, je peux avoir un autre attribut appelé espace réservé. Et je pourrais voir quelque chose comme mots-clés, ou plus spécifiquement, pour interroger q. 

Et remarquez, maintenant, je dois ce genre de texte gris qui disparaît en tant que Dès que je commence à taper, mais il est probablement quelque chose vous avez vu dans d'autres pages Web. Je ne l'aime pas vraiment sur le bouton Envoyer. Donc, je vais en fait pour donner le Bouton Soumettre une valeur de recherche. Et maintenant, si je recharge, vous remarquerez que mon bouton est nommé recherche. Vous savez, je ne fais pas vraiment comme le logo ici. Donc générateur Google police. 

Je veux pour pimenter cette place plus loin. Donc la recherche CS50. Permettez-moi de créer mon propre logo. Qui semble intéressante. Alors maintenant, permettez-moi de sauver ce as-- viens. Où est ce que ça va? Là. D'ACCORD. Manqué. Enregistrer sous. Navigateurs stupide. Stand by, nous allons résoudre ce problème une fois pour toutes. Nous y voilà. Bien. Pardon. Jour de congé. Maintenant cela est funky. Quitter le mode plein écran. Bien. 

Maintenant, comme une normale personne, l'image enregistrer sous. Logo.gif. Maintenant, je vais aller dans CS50IDE et Je vais simplement prendre le logo, Je vais le faire glisser dans ma source de sept répertoire, fichier existe déjà, je suis OK avec ça. Donc, je vais l'écraser parce que je l'avais déjà. Et maintenant, comment puis-je me débarrasser de cela? 

Allons de l'avant ici et de faire source de l'image est égale logo.gif. Fermer cette. Sauvegarder. Et maintenant, si je reviens à ma recherche la page, maintenant il regarde assez bon. Tout droit, de sorte qu'il n'a pas tout à fait quelque chose d'utile fait. En fait, permettez-moi Essayez pour un chat et voir ce qui arrive. Chats. Bon sang. Il ne fonctionne pas seulement, apparemment. Alors, quelle est la pièce maîtresse ce qui manque ici? 

Droit, même si vous ne connaissez pas HTML, Je l'ai commencé le marquage de la forme de téléphone et je l'ai dit il comment obtenir des intrants, me donner une zone de texte et un bouton de soumission, ce morceau est apparemment manquant? Supposons que nous voulons réellement obtenir cette chose fonctionne correctement. Que devons-nous faire? Nous avons besoin de mettre en œuvre l'extrémité arrière base de données ou le moteur de recherche lui-même, et que cela va prendre un beaucoup de temps, franchement. 

Alors rappelez-vous ce que nous avons fait la dernière fois. Donc, si vous recherchez quelque chose sur Google et vous avez au préalable éteint, rappel, la recherche instantanée. Alors permettez-moi éteindre ça de sorte que cette réalité se comporte comme un navigateur ancienne école, si je cherche maintenant à quelque chose comme les chats, rappeler ce que l'URL ressemble. Il est assez énigmatique. Mais embarqué là-dedans, rappel, est la recherche de barre oblique. Question mark q est égal à chats. 

Et cela semble me donner tout un tas de résultats de recherche. Donc, vous savez ce que je vais faire? Je vais emprunter Google pendant juste une minute. Je vais aller sur ici et je vais dire ce qui constitue une action ou destination, pour ainsi dire, devrait être littéralement Google. Et la méthode que je voulais à l'utilisation va être obtenir. 

Alors, quelle est l'action? Action est bizarrement nommé, mais cela signifie simplement qui va gérer l'action de ce formulaire? Lorsque je clique sur Rechercher, où le résultat devrait aller? Et si je vais maintenant revenir à ma forme ici et recharger ma page Web et maintenant chercher quelque chose comme chien, remarque maintenant Je l'ai re mis en place Google. Droit? 

Si je veux chercher quelque chose d'autre, il travaille non seulement pour les chiens, il fonctionne également pour les chats. Il travaille également pour CS50. Et OK, ceci est juste sous écrasante, est-ce pas? Très bien, mais il fonctionne réellement. Donc ce qui est réellement été en cours? Donc, je l'ai appris mon navigateur, en utilisant HTML, de prendre d'entrée de l'utilisateur et effectivement envoyer cette entrée à un serveur distant via HTTP. 

Et parce que mon navigateur comprend HTTP, il fait construire l'URL afin que ce Je me retrouve plus dans mon navigateur, remarquer ce qui se passe quand je cherchais chien. Si je clique sur Recherche, vous remarquerez que l'URL change que je comptais à google.com/search~~V requête équivaut chien. Et cela est parce que la forme sait, parce que la méthode est d'obtenir, pour simplement juxtaposer à cette URL il. 

Maintenant, ces pages web sont toujours laid. Donc, nous allons introduire un autre morceau de syntaxe si nous le pouvons aujourd'hui. Et ceci est quelque chose de connu que des feuilles de style en cascade. Alors permettez-moi de jeter un oeil à cet exemple ici et voir si nous pouvons en déduire ce qui se passe. Ceci est CSS0.html. Et ceci est où les choses obtenir un peu laid. Parce que malheureusement, dans le monde du web, HTML seul ne peut pas tout faire. Et donc si vous voulez styliser votre page web, vous avez réellement besoin de se concentrer sur la l'esthétique d'une manière différente. Donc ici, je dois le corps de mon web page à l'intérieur de ce qui est une grande div. Et un div signifie simplement division. Donc, il est comme un paragraphe, mais il n'a pas la même sémantique d'un paragraphe de texte. 

Cela signifie simplement le navigateur, voici une grande zone rectangulaire de mon site web la page, je tiens à le manipuler spécialement. Maintenant, la ligne 21 est où cette div commence. Et il suffit de prendre une supposition. Quel est l'effet de la ligne 21 sur la reste du contenu de la page? Centrant. C'est tout. Donc, on n'a pas vu un moyen de effectivement centrage du texte. 

En fait, mon moteur de recherche, contrairement à la réelle Google, tout a été justifiée sur la gauche. Et donc maintenant à la ligne 21, je veux dire, hey navigateur, créer une division de la page. Donnez-moi juste un gros rectangle invisible. Voilà comment je veux réfléchir à la page Web. Et puis de styliser comme suit. A l'intérieur de ces citations, maintenant, est une langue seconde que nous avons présenté aujourd'hui appelés feuilles de style en cascade. Heureusement, il est trop pas un langage de programmation, il est donc très limité dans sa syntaxe, mais aussi très limité dans ses fonctionnalités alors que HTML est tout au sujet marquant les données d'une page Web et la structure d'une page Web. CSS est généralement d'environ la last mile, l'esthétique, obtenir la taille et la couleur et de la placement tout à fait exact dans une page Web. En effet, il est formé avec des paires de valeurs clés. 

Une propriété de ce type, le texte aligner, suivi de deux points, suivie par la valeur de cette la propriété, qui dans ce cas est le centre. Et maintenant, vous remarquerez pouvez imbriquer ces choses. Si je voulais tout dans ce Je l'ai souligné à être centré, Voilà pourquoi je dois la ligne 21 et la ligne correspondante 31. Mais supposons maintenant envie de dire John Harvard, bienvenue à ma page d'accueil. 

Symbole de copyright John Harvard. Et si je veux que le premier ces lignes d'être assez grand. 36 pixels. Voilà donc une taille décente. Et je voulais son poids à être audacieux. Mais en dessous, Je veux plus petit texte. Et ci-dessous, je veux texte encore plus petit. Pardon. Aujourd'hui se sent comme un jour de congé. 

Alors maintenant, que fais-je pour exprimer cela? Ici, sur la ligne 22 est un lecteur intégré div ou div imbriquée, si vous voulez. Il a aussi sa propre étiquette de style. Je précise une taille de police de 36. Je précise un poids de la police de caractères gras. Ici-bas, je ne spécifient que 24 pixels. Et enfin, dans la ligne 28, je précise 12. Ainsi, tout comme un test de cohérence rapide et comme une lecture humaine présente, quels mots sur l'écran sont passe réellement à être audacieux? Quelles lignes sont réellement audacieuse? 

Juste John Harvard. Droit? Parce que, tout comme la ligne 22 dit hey navigateur, voici une division de la page. Faites-en la taille 36 points. Faire le poids de gras. Dès que vous atteignez le balise de fin correspondante ou une étiquette fermée sur la ligne 24, que des moyens, hé navigateur, Arrêtez de faire tout ce que vous faites. Et préavis pour être clair, même si ligne 22 a tous ces attributs comme le style, lorsque vous fermer la balise dans la ligne 24, vous ne mentionnez le nom de la balise. 

Vous ne répétez pas le style de texte ou tout ce qui est à l'intérieur de ces citations. Et si je regarde cela maintenant dans mon navigateur, prenons Un regard sur le résultat final. Laisse moi partir avance à ce fichier, qui est CSS 0. Et il est encore assez simple, mais obtenir assez intéressant. Mais il se trouve qu'il ya d'autres choses que je peux faire ici, et au risque de faire cela complètement hideux, remarquer ici que dans mon corps de ma page Web, Je peux faire quelque chose de drôle comme BG ou la couleur d'arrière-plan. 

Et rapide, quel est votre couleur préférée? Green I entendu. Bien. Alors maintenant, si je frappe rechargement maintenant, nous avons une page web vert. Très bien, alors qui est pas mal. Et maintenant, si je veux faire ce vraiment cool, je peux faire de la couleur de mon texte même rouge. Voyons donc à quoi cela ressemble. Maintenant, il est à la recherche assez bonne. Et ici, si vous avez vraiment vouloir salir avec quelqu'un ou si vous voulez être une de ces personnes qui essaie de vous inciter à visiter un web page, car ils ont dupé Google dans la pensée, il ya tout un tas de mots clés like-- Voyons voir, recharger. Où est-il allé? Et il nous ce. Bien. Donc, je dis cela en passant, nous allons parler de ce genre de choses en quelques semaines lorsque nous parlons de la sécurité, si vous avez réellement grappes entières incorporer de mots-clés dans une page Web, même si elles ne sont pas visibles à un humaine, quelqu'un comme Google, bien sûr, peut encore effectivement trouver cela. Très bien, alors qui est assez hideuse assez rapidement. 

Et en fait, il est pas tout que beaucoup de différence de mon propre site web la page comme un cycle, qui Je commencé googler autour de trouver les versions antérieures de mes anciens sites. Il était assez mauvais. En fait, je ne trouve l'un juste avant la classe. Mais il ya pire là-bas. Ce fut apparemment mon la page d'accueil en 1996. Apparemment, je pensais qu'il était approprié de demander aux gens leur nom Avant qu'ils ne puissent voir réellement ma page web. 

Et puis je leur ai montré quelque chose de stupide, probablement. Je vais creuser jusqu'à plus pour la prochaine fois. Mais pour l'instant, nous allons envisager un peu de design. Nous avons parlé de style. Et cette page à ce jour et plus tout ce que je l'ai écrit est assez propre stylistiquement. Mais qu'en est-conception? Eh bien, il ya beaucoup de redondance dans ce que je fais ici. 

Je l'ai mentionné le mot couleur dans quelques endroits. Je l'ai mentionné la taille de police dans un couple de lieux et audacieuse dans quelques endroits. Et fondamentalement, je suis co mêlant les deux langues. Je dois HTML avec mes tags et mon attributs et puis tout d'un coup, entre guillemets, je dois la deuxième langue aujourd'hui appelé CSS, qui encore une fois, est tout simplement ceux-ci paires de valeurs clés ou ces propriétés séparées par des virgules. 

Il se trouve que beaucoup comme en C où nous peut commencer à factoriser du code dans les fichiers d'en-tête, de sorte que nous pouvons faire la même chose en HTML. Et une étape pour que est la suivante. Notez que cette version, est CSS1.html Structurellement la même page Web exacte. Donc, je dois tout un tas des divs, mais cette fois, je l'ai débarrassé de l'emballage div comme vous le verrez. 

Et je lui ai donné ces trois divs haut, au milieu et en bas, des identifiants uniques. Cela est agréable, parce que, par en donnant à ces divisions des pages des identificateurs uniques, Je peux les référencer ailleurs. Où? Eh bien, permettez-moi de défiler vers le haut. Et jusqu'à présent, chaque fois que nous avons examiné à la tête d'une page web, ce qui est la seule étiquette que nous avons eu dans la tête d'une page Web? Un peu plus fort. Juste le titre jusqu'à présent. Mais il se trouve qu'il ya quelques autres choses vous pouvez mettre là-dedans, un des lequel elle est appelée une balise de style. Donc, il ya un moment, nous nous sommes penchés à un attribut de style. Avère qu'il ya une balise de style. Il appartient à l'intérieur de la tête d'une page Web. Et maintenant remarqué ce que je fais. Je dois l'intérieur de cette balise de style suivantes. Je littéralement mentionner sur la ligne 20 du Nom d'un tag que je veux pour styliser. 

Ensuite, je dois ouverte accolade et fermé accolade. Donc, dans le même esprit à C, mais de plus, ce ne sont pas une fonction, ceci est juste un détail syntaxique ici. Et puis bien sûr, je dis le navigateur, hé navigateur, rendre l'ensemble du corps de la page avoir un alignement du texte de centre. Et puis, cela veut dire ce qui suit. Hey navigateur, si vous voyez une page HTML élément ou tag dans la page qui possède un identifiant unique de haut, de sorte que le symbole dièse ici signifie simplement idée unique de haut, aller de l'avant et de faire sa taille de police 36 et son poids de gras. 

Hey navigateur, un élément dont ID est moyenne, faire 24 pixels. Et hé navigateur, si vous voyez une idée de fond, faire 12 pixels. L'effet à la fin est exactement le sam. Si je vais dans CSS 1, le la page a la même apparence. Mais nous sommes un pas vers un peu mieux la conception. Permettez-moi maintenant de revenir ici pour CSS2 et vois ce que je l'ai fait. 

Maintenant, la page est vraiment, vraiment propre. En fait, je peux adapter tous le contenu sur une page ici. Mais ce nouveau tag ai-je introduit, de toute évidence? Lien. Et il est pas le meilleur nom pour une étiquette, parce qu'il est pas un lien dans le sens que nous connaissons, mais cela signifie un lien dans un autre fichier. Ceci est un peu comme forte comprennent en C. 

Ceci est la manière HTML à-dire bon navigateur, aller chercher le contenu de le fichier appelé css2.css. La relation, pour moi, est qu'il est une feuille de style. Et en effet, voilà ce que l'un des S de feuilles dans des moyens de style en cascade. Ceci est une feuille de style. Il est juste le fichier texte contenant tout un tas de propriété. Il ya tout un tas de styles que vous souhaitez appliquer à une page. 

Et donc cela est apparemment se référant à un second fichier. Et si je l'ouvre que, CSS2.css, remarque que tout ce que je l'ai fait est de copier et coller tous de ce dans ce fichier. Et maintenant, même si vous avez jamais codé ce genre de choses auparavant, il suffit de considérer avec le proverbiale chapeau de génie , pourquoi est-ce un meilleure conception sans doute? Affacturage sur ces propriétés CSS, les mettre dans leur propre fichier. Même si nous avons résolu ce Il ya problème comme cinq minutes dans la toute première version. 

Nous avons pas amélioré la Page stylistiquement, cela est juste mieux conception dans un certain sens. Pourquoi pensez-vous? Ouais. Plus souple comment? Ouais. Donc, si vous voulez aller en arrière et changer les choses, Maintenant, vous avez un seul endroit où vous pouvez changer les choses. Et en fait, pour quelque chose comme problème réglé sept, où nous mettons en œuvre une Stock site commercial, que ça va avoir un tas ensemble de pages. Et ce serait vraiment ennuyeux si vous décidez, hm, Je ne l'aime pas vraiment 24 pixels, je veux que ce soit 28 pixels ou légèrement plus grand. Et puis avoir à faire mondiale rechercher et remplacer ou d'ouvrir tous les fichiers de votre site Web simplement pour réellement changer une valeur. En tenant compte de ces styles dans un endroit central, Vous pouvez maintenant ouvrir un fichier texte dans CS50IDE dans un programme, modifier, l'enregistrer, et fait. Vous avez propagées ceux changements partout. Et ce serait la même chose dans un fichier dot h ainsi. De sorte que toute questions ainsi jusqu'ici sur cette syntaxe? Très bien, alors nous avons tout fait il semble sauf effectivement mettre en œuvre des hyperliens. Et nous allons donc aller de l'avant et le faire. Laissez-moi aller de l'avant et créer un nouveau fichier ici. Je vais l'appeler lien.html, mettre dans le code d'aujourd'hui. 

Et je vais faire ouverte support de type doc html. En aparté, cette chose à la top, ce doc déclaration de type, il est le seul qui est bizarre avec le point d'exclamation. Vous avez juste à faire là-bas et il signifie que nous utilisons la version de HTML 5. Les anciennes versions de langue avait beaucoup plus longtemps chaînes que vous aviez besoin d'y mettre. Donc, voici un exemple appelé lien. 

Je besoin d'un corps de ma page web ici. Et ici, equals href disons HTTP://www.disney.com et mon site préféré, nous dirons. Très bien, alors une très Page anodin, convivial. Si je vais maintenant dans mon répertoire Liste des ici et ouvrir lien.html, nous avons hyper-texte. 

Et en effet, ce est là H dans le HTTP vient. Protocole de transfert hypertexte est sur le transfert de texte qui a des liens hypertextes vers d'autres ressources. Et en effet, voici le familier, si rétro, lien que si vous cliquez dessus, seront effectivement me conduire à Disney.com. Maintenant, oh, qui va sortir bientôt. Très bien, alors maintenant, ce sont quelques-uns des implications de cette situation? 

Et franchement, le monde commence pour obtenir un peu plus familier et aussi un peu effrayant mais aussi un peu plus auto défendable fois que vous commencez à comprendre ces choses. Parce que les chances sont, certains d'entre vous, si vous allez grâce à votre dossier spam de Gmail ou même votre boîte de réception, vous avez probablement obtenu une sorte de e-mail que cela vous demandant de changer votre mot de passe peut-être ou peut-être vérifier vos identifiants PayPal ou quoi. 

Et en fait, vous avez peut-être reçu quelque chose qui dit comme cliquer ici pour réinitialiser votre mot de passe PayPal. Et maintenant, remarquez, si ce ne sont pas Disney.com mais comme badplace.com et recharger, noter que le texte ici pouvait dire quoi que ce soit. Et en fait, ce sont juste des mots. Pourquoi ne puis-je réellement être super malveillants et dire http://www.paypal.com. 

Cliquez ici réinitialiser votre PayPal mot de passe et maintenant recharger. Ce semble assez légitime, non? Je veux dire, je ne serais pas cliquer sur un e-mail qui dit exactement cela. Mais remarquez la dichotomie ici. Il dit www.paypal.com, et en fait, attendez une minute, nous savons que vous voulez la s pour la sécurité. Alors maintenant, aller à www.paypal.com HTTPS, mais si vous ne l'avez jamais fait ça avant, ne prendre l'habitude de planant au-dessus des petits liens ici. Et il est difficile de voir sur l'écran il, et il est pas si facile ici. Mais ici, en chemin vers le bas le minuscule petit coin le navigateur ne fait vous que nous allons dire à badplace.com lieu de Paypal.com. Maintenant, où allons-nous avec ça? Tous les exemples que nous avons fait aujourd'hui, nous avons codé en dur et tapé manuellement. Le web est incroyablement sans intérêt lorsque vous dur coder vos pages web afin que le contenu est statique et ne change jamais. Bien entendu, l'ensemble de notre sites préférés aujourd'hui, que ce soit Gmail ou Twitter Facebook ou un nombre quelconque d'autres sont dynamiques. Ils changent en réponse à une entrée utilisateur tout comme les résultats de recherche Google. 

Et le mercredi, ce que nous faisons est nous laissons HTML et CSS mise en place derrière nous et nous prenons pour acquis que nous maintenant le savoir et nous introduisons un nouveau langage de programmation appelé PHP, qui aiment C, va nous donner le pouvoir de créer effectivement des programmes générer une sortie qui eux-mêmes. Dans ce cas, nous allons utiliser PHP à générer dynamiquement web pages utilisant cette nouvelle langue. Donc plus à ce mercredi. À plus tard. 

[Jouer de la musique]