1 00:00:00,000 --> 00:00:03,486 >> [Jouer de la musique] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> DAVID MALAN J: Cela est CS50 et ceci est le début de la semaine 7. 4 00:00:14,250 --> 00:00:15,060 Donc accueillir à nouveau. 5 00:00:15,060 --> 00:00:17,540 Et vous souvenez peut-être que dans le problème mis en quatre, 6 00:00:17,540 --> 00:00:21,510 il y avait un peu d'une chasse au trésor pour certains fabuleux prix grâce à quoi 7 00:00:21,510 --> 00:00:24,219 après avoir récupéré les photos de Le personnel à la fois ici et à New Haven, 8 00:00:24,219 --> 00:00:27,468 vous avez été mis au défi de trouver le plus grand nombre de ces informaticiens que vous pouviez. 9 00:00:27,468 --> 00:00:29,550 Et nous avons un ensemble tas de soumissions. 10 00:00:29,550 --> 00:00:31,930 Ai pensé partager quelques-uns ici avec vous aujourd'hui. 11 00:00:31,930 --> 00:00:35,100 >> Et nous afficherons tous ces en ligne. 12 00:00:35,100 --> 00:00:39,310 Mais surtout, je voulais attirer votre attention to-- bien un, 13 00:00:39,310 --> 00:00:42,670 Sam était dans un assez grand nombre d'entre eux généralement posant comme ça. 14 00:00:42,670 --> 00:00:45,750 Mais il semble que des ce matin, le gagnant 15 00:00:45,750 --> 00:00:51,170 a été une certaine personne nommée Ken avec 24 du personnel capturé à la caméra 16 00:00:51,170 --> 00:00:54,600 ou un peu plus quand vous prenez en compte plusieurs membres du personnel dans les images. 17 00:00:54,600 --> 00:00:58,300 On voit ici Ken prochaine à Marie à New Haven. 18 00:00:58,300 --> 00:01:01,300 >> Maintenant, Ken, cependant, se tourne out est peu de cas de coin 19 00:01:01,300 --> 00:01:02,880 qui est pas encore arrivé auparavant. 20 00:01:02,880 --> 00:01:05,713 Il se trouve que cela n'a pas eu lieu me mettre en copie fine problème 21 00:01:05,713 --> 00:01:09,710 fixé quatre qui dit que les membres du personnel sont inéligible pour les prix fabuleux 22 00:01:09,710 --> 00:01:13,130 parce que Ken est, bien sûr, l'un des les photographes de notre personnel. 23 00:01:13,130 --> 00:01:16,820 Maintenant, avec cela dit, il l'origine m'a écrit pour dire 24 00:01:16,820 --> 00:01:19,180 s'il vous plaît de ne pas poster ces photos en ligne. 25 00:01:19,180 --> 00:01:21,630 Je pense en grande partie parce que la plupart des photos 26 00:01:21,630 --> 00:01:24,499 que ce photographe a pris l'air un petit quelque chose de ce genre. 27 00:01:24,499 --> 00:01:25,040 Et similaires. 28 00:01:25,040 --> 00:01:28,990 >> Mais Ken voudrait que je vous rassure qu'il est un très bon photographe, 29 00:01:28,990 --> 00:01:33,190 il est un professionnel, il prend photos qui ne sont pas floues, 30 00:01:33,190 --> 00:01:37,270 qui sont mieux au point, et il a pris un certain nombre de notre propre personnel. 31 00:01:37,270 --> 00:01:40,370 Mais plutôt que de reconnaître que Ken, ce que nous avons pensé que nous ferions 32 00:01:40,370 --> 00:01:43,390 est d'aller dans la liste des étudiants réels qui ont soumis. 33 00:01:43,390 --> 00:01:48,640 Et il se trouve que Lance avec 15 photos de ce matin 34 00:01:48,640 --> 00:01:50,030 était notre gagnant. 35 00:01:50,030 --> 00:01:55,730 >> Et photographié ici est Lance avec Colton, avec Skaz, avec moi-même, et avec Sam. 36 00:01:55,730 --> 00:02:00,230 Mais il se trouve que des 11h46, donc il ya tout juste un peu, 37 00:02:00,230 --> 00:02:04,380 Je suis retourné à mon e-mail et trouvé que nous avions encore un plus de soumission 38 00:02:04,380 --> 00:02:08,300 par un étudiant du nom de Bonnie dont l'email dit que cela. 39 00:02:08,300 --> 00:02:10,800 Ne vais pas mentir, je suis faisant cela pendant la classe. 40 00:02:10,800 --> 00:02:17,620 Et ensuite procédé à attacher simplement 14 photos, un timide de Lance de 15. 41 00:02:17,620 --> 00:02:22,690 >> Mais dans les photos de Bonnie, il se out étaient plusieurs membres du personnel, Sam 42 00:02:22,690 --> 00:02:25,960 parmi eux, de sorte que nous nous pensions voudrais faire est de reconnaître que ces deux. 43 00:02:25,960 --> 00:02:29,240 Donc, en plus d'obtenir l'Dropbox l'espace que tout le monde qui a participé 44 00:02:29,240 --> 00:02:33,900 reçoit, ces deux sections sera également recevoir un bon déjeuner traiteur pour eux 45 00:02:33,900 --> 00:02:36,100 et leur section accouple la semaine prochaine. 46 00:02:36,100 --> 00:02:38,970 Et si vous allez entendre parler de nous, Lance et Bonnie, à ce sujet. 47 00:02:38,970 --> 00:02:40,002 Donc grand bravo à eux. 48 00:02:40,002 --> 00:02:42,210 Maintenant, ceux d'entre vous qui feriez comme le déjeuner, plus généralement, 49 00:02:42,210 --> 00:02:45,320 savoir que CS50 déjeuner à Cambridge et New Haven est ce vendredi. 50 00:02:45,320 --> 00:02:48,510 Accédez au site slash RSVP de CS50. 51 00:02:48,510 --> 00:02:49,800 Et maintenant un mot sur les séminaires. 52 00:02:49,800 --> 00:02:50,730 Plus curricularly. 53 00:02:50,730 --> 00:02:52,490 Donc, nous approchons de la point de semestre 54 00:02:52,490 --> 00:02:55,200 où vous devriez commencer penser à des projets définitifs. 55 00:02:55,200 --> 00:02:59,309 Et en fait, dans juste un peu, sera soi-disant propositions pré être raison. 56 00:02:59,309 --> 00:03:01,850 Donc pré propositions sont destinées à être assez faible impact et vraiment 57 00:03:01,850 --> 00:03:04,109 juste une occasion pour de composer une courte note 58 00:03:04,109 --> 00:03:06,900 vos collègues de l'enseignement pour informer lui ce que vous vous penser 59 00:03:06,900 --> 00:03:09,140 peut-être envie de faire pour votre projet final. 60 00:03:09,140 --> 00:03:11,730 >> Maintenant, de nombreux étudiants finissent faire basé sur le Web des projets définitifs. 61 00:03:11,730 --> 00:03:13,800 Et bien sûr, nous sommes juste maintenant dans cette dernière semaine 62 00:03:13,800 --> 00:03:15,890 et au-delà de plonger dans la programmation web. 63 00:03:15,890 --> 00:03:18,200 Donc, ne vous inquiétez pas si vous ont absolument aucune idée de comment 64 00:03:18,200 --> 00:03:21,594 vous construire les idées qui vous pourriez avoir dans votre esprit. 65 00:03:21,594 --> 00:03:24,510 Ceci est vraiment juste une fonction de forçage pour vous aider à réfléchir et à parler 66 00:03:24,510 --> 00:03:25,650 avec votre TF à ce sujet. 67 00:03:25,650 --> 00:03:28,810 Mais pour vous aider avec ça, et avec des projets finaux en fin de compte, 68 00:03:28,810 --> 00:03:31,750 savoir que CS50 a une tradition d'offrir des séminaires. 69 00:03:31,750 --> 00:03:36,084 >> Et ceux-ci sont facultatives, les mains sur, ou donner des conférences en fonction des opportunités 70 00:03:36,084 --> 00:03:39,000 pour en savoir plus sur des sujets qui sont un petit accessoire à le cours de 71 00:03:39,000 --> 00:03:43,310 syllabus, mais néanmoins merveilleuse matériau à conduire des projets définitifs. 72 00:03:43,310 --> 00:03:46,840 Et donc cela est la liste qui est Personnel CS50 ici à New Haven 73 00:03:46,840 --> 00:03:48,600 ont mis au point pour Cette année, environ iOS 74 00:03:48,600 --> 00:03:50,730 programmation, Android la programmation, le développement de jeux, 75 00:03:50,730 --> 00:03:54,480 et des grappes de plus d'outils et les langues et les techniques. 76 00:03:54,480 --> 00:03:56,780 >> Alors gardez un œil sur le site de la CS50. 77 00:03:56,780 --> 00:04:00,110 Et en attendant, si vous souhaitez inscrivez votre intérêt pour toutes ces choses, 78 00:04:00,110 --> 00:04:02,510 aller au registre de barre oblique de CS50. 79 00:04:02,510 --> 00:04:05,770 Et nous allons ensuite un suivi quant à la jours et les heures de vol et les lieux 80 00:04:05,770 --> 00:04:09,090 et tout sera plus everything-- être écoutés et également disponible sur demande 81 00:04:09,090 --> 00:04:11,750 après si vous ne pouvez pas réellement faire. 82 00:04:11,750 --> 00:04:15,800 Alors sans plus tarder, nous quitté la dernière fois avec GET. 83 00:04:15,800 --> 00:04:19,610 >> Et ce fut comme le message qui était l'intérieur de l'enveloppe virtuelle, rappeler, 84 00:04:19,610 --> 00:04:23,960 que nous sommes passés d'un routeur à la routeur entre un navigateur Web et une bande 85 00:04:23,960 --> 00:04:24,487 serveur. 86 00:04:24,487 --> 00:04:26,695 Et ce message avait l'air un petit quelque chose comme ça. 87 00:04:26,695 --> 00:04:29,700 Tel est le message que plus mystérieux était en fait à l'intérieur d'une enveloppe 88 00:04:29,700 --> 00:04:34,440 écrit sur un morceau de papier dont la première ligne dit littéralement, obtenir slash. 89 00:04:34,440 --> 00:04:37,830 >> Et tout comme un contrôle de santé mentale, ce slash ne représentent? 90 00:04:37,830 --> 00:04:40,455 Qu'est-ce que veut dire quand slash demandant un site web? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Vous demandez tout le temps. 93 00:04:44,250 --> 00:04:47,333 La plupart chaque fois que vous visitez un site Web, vous ne tapez pas dans un nom de fichier. 94 00:04:47,333 --> 00:04:50,960 Vous avez probablement juste aller à Facebook.com, entrer, gmail.com, ou similaire. 95 00:04:50,960 --> 00:04:52,260 Et ce qui ne représente slash? 96 00:04:52,260 --> 00:04:53,506 Qu'est-ce fichier? 97 00:04:53,506 --> 00:04:54,630 Ou quelle page, spécifiquement? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> L'indice, oui. 100 00:05:00,720 --> 00:05:01,810 Donc, la page par défaut. 101 00:05:01,810 --> 00:05:04,810 Donc, si vous ne spécifiez pas un fichier nommer que nous allons commencer à voir, 102 00:05:04,810 --> 00:05:07,750 vous êtes en fait juste demandant me donner la page par défaut de Facebook 103 00:05:07,750 --> 00:05:10,800 ou donnez-moi ma boîte de réception ou de donner moi la page par défaut de nouvelles 104 00:05:10,800 --> 00:05:12,510 sur le site de CNN ou similaire. 105 00:05:12,510 --> 00:05:15,220 Et un serveur répond alors à ce message avec quelque chose 106 00:05:15,220 --> 00:05:18,420 comme ça, en disant oui, je parler version HTTP 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, qui est un état code que nous, les humains, rarement 108 00:05:21,130 --> 00:05:22,790 jamais voir parce qu'il est bon. 109 00:05:22,790 --> 00:05:26,640 Parce que cela signifie OK, la demande a été reçu et manipulé correctement. 110 00:05:26,640 --> 00:05:28,960 Et le type de contenu apparemment dans la réponse 111 00:05:28,960 --> 00:05:31,170 est très souvent, mais pas toujours, texte. 112 00:05:31,170 --> 00:05:32,580 Et précisément, HTML. 113 00:05:32,580 --> 00:05:34,760 Et cela est en fait où nous regardons aujourd'hui. 114 00:05:34,760 --> 00:05:37,140 >> Donc, en fait, je vais aller de l'avant et ouvrir un navigateur. 115 00:05:37,140 --> 00:05:40,410 Je vais utiliser Chrome, vous pouvez utiliser plus d'un navigateur dans les semaines à venir. 116 00:05:40,410 --> 00:05:42,410 Nous recommandons généralement Chrome car il est particulièrement 117 00:05:42,410 --> 00:05:43,750 bon pour les développeurs de logiciels. 118 00:05:43,750 --> 00:05:46,070 Il a beaucoup de construit dans des outils qui facilitent 119 00:05:46,070 --> 00:05:49,800 de développer non seulement HTML et CSS, choses que nous allons commencer à parler aujourd'hui, 120 00:05:49,800 --> 00:05:51,530 mais aussi d'autres langues aussi. 121 00:05:51,530 --> 00:05:55,530 >> Et je vais aller de l'avant et aller to-- Je vais configuration, cliquez sur ou à droite 122 00:05:55,530 --> 00:05:57,210 cliquer n'importe où sur une page web. 123 00:05:57,210 --> 00:05:59,070 Et je vais aller à Inspecter l'élément. 124 00:05:59,070 --> 00:06:03,850 Et je vais modifier mon écran, juste un peu ici. 125 00:06:03,850 --> 00:06:05,790 Passons ce au fond. 126 00:06:05,790 --> 00:06:08,140 Donc, cela est ce qu'on appelle Inspecteur de Chrome. 127 00:06:08,140 --> 00:06:11,010 Donc, cela ressemble à un débogage outil intégré dans Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Chacun d'entre vous ont déjà cette si vous avez été en utilisant Chrome. 129 00:06:13,520 --> 00:06:17,169 Et il vous permet de voir ce qui se passe sur sous le capot d'une page web. 130 00:06:17,169 --> 00:06:19,210 Donc, nous allons effectivement prendre un regarder cela comme suit. 131 00:06:19,210 --> 00:06:21,251 Il a beaucoup plus de fonctionnalités et nous nous soucions aujourd'hui. 132 00:06:21,251 --> 00:06:22,760 Mais il ya ces onglets ici. 133 00:06:22,760 --> 00:06:25,890 Éléments, le réseau, les sources, calendrier, et quelques autres trucs. 134 00:06:25,890 --> 00:06:27,800 Je vais cliquer sur Réseau pour un moment. 135 00:06:27,800 --> 00:06:30,500 >> Et il est un peu écrasante au premier coup d'œil ici. 136 00:06:30,500 --> 00:06:34,190 Mais ce que je vais faire est de laisser moi de simplifier un peu. 137 00:06:34,190 --> 00:06:37,560 Je vais tourner sur le enregistrement de la lumière de sorte qu'il est rouge. 138 00:06:37,560 --> 00:06:39,140 Et je vais dire préserver journal. 139 00:06:39,140 --> 00:06:41,015 Et cela est juste un peu chose I figured out 140 00:06:41,015 --> 00:06:44,120 au fil du temps que cela va sauver tout ce qui arrive dans le navigateur. 141 00:06:44,120 --> 00:06:50,030 Et maintenant, je vais aller à http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> En fait, nous allons faire www pour faire bonne mesure, slash. 143 00:06:52,690 --> 00:06:53,643 Entrer. 144 00:06:53,643 --> 00:06:56,180 Ainsi, un grand nombre d'URL vous pourriez avez visité. 145 00:06:56,180 --> 00:06:58,830 Et maintenant web de Facebook Page arrive au sommet. 146 00:06:58,830 --> 00:07:02,350 Et puis tout un tas de choses a volé par le bas. 147 00:07:02,350 --> 00:07:04,830 Et de fait, il se trouve que lorsque vous visitez Facebook.com, 148 00:07:04,830 --> 00:07:09,320 vous n'êtes pas seulement faire une requête HTTP, il se trouve que cela va Facebook.com 149 00:07:09,320 --> 00:07:14,320 envoie 41 de ces enveloppes, chacun avec sa propre requête GET, 150 00:07:14,320 --> 00:07:18,360 comme indiqué, mais derrière l'écran ici, au bas de l'écran, 151 00:07:18,360 --> 00:07:24,040 il indique que, en effet, mon navigateur a présenté 41 demandes. 152 00:07:24,040 --> 00:07:29,689 >> Et au total, elle a transféré 861 kilo-octets et il a fallu, pour une raison 153 00:07:29,689 --> 00:07:31,730 autant que huit secondes pour télécharger tout cela. 154 00:07:31,730 --> 00:07:33,790 Voilà donc fait un peu bizarre que le site de Facebook faudrait que 155 00:07:33,790 --> 00:07:35,600 longtemps, mais qu'il en soit ainsi dans ce cas. 156 00:07:35,600 --> 00:07:39,520 Maintenant, tout cela, je ne se soucient pas vraiment à propos de l'exception de la demande la plus élevée. 157 00:07:39,520 --> 00:07:46,440 Allons donc à celui-ci ici et laissez-moi un zoom arrière pour un instant. 158 00:07:46,440 --> 00:07:47,754 >> Et laissez-moi Zoomer sur cette. 159 00:07:47,754 --> 00:07:50,670 Donc ce que je l'ai fait à gauche, même si il ya beaucoup de choses ici 160 00:07:50,670 --> 00:07:53,360 est que je l'ai souligné Facebook.com puis 161 00:07:53,360 --> 00:07:56,540 Notez que je défilement vers le bas, défilement vers le bas, défilement vers le bas, 162 00:07:56,540 --> 00:07:58,330 de demander têtes. 163 00:07:58,330 --> 00:08:01,720 Et vous verrez que Chrome montre moi essentiellement les composants internes 164 00:08:01,720 --> 00:08:02,810 de la demande que je faisais. 165 00:08:02,810 --> 00:08:06,130 Il est pas tout à fait le formatage dans la même chemin, mais remarquez, il ya mention obtenir, 166 00:08:06,130 --> 00:08:09,481 Indication Il ya mention de l'hôte, Facebook.com, le chemin, ou une barre, 167 00:08:09,481 --> 00:08:10,730 qui est le fichier que je demandé. 168 00:08:10,730 --> 00:08:12,930 >> Et puis, si je fais défiler sauvegarder, nous allons effectivement 169 00:08:12,930 --> 00:08:17,270 voir que ce que Facebook est retourné pour moi est l'ensemble de ces têtes. 170 00:08:17,270 --> 00:08:21,040 Donc, à l'intérieur de cette enveloppe virtuelle sont en effet un grand nombre de paires clé-valeur. 171 00:08:21,040 --> 00:08:23,130 Un mot, un colon, et ensuite une valeur. 172 00:08:23,130 --> 00:08:25,050 Un mot, un colon, et une valeur. 173 00:08:25,050 --> 00:08:26,160 On les appelle des têtes. 174 00:08:26,160 --> 00:08:31,860 Et il ya beaucoup plus de détails ici nous nous soucions réellement en ce moment. 175 00:08:31,860 --> 00:08:33,750 >> Mais cela est en second lieu à dernier là-bas, 176 00:08:33,750 --> 00:08:38,809 remarquer, que le serveur de Facebook.com, bien dit voici un peu de texte HTML. 177 00:08:38,809 --> 00:08:41,409 Donc, tout cela pour dire que lorsque vous demandez une web 178 00:08:41,409 --> 00:08:44,300 page d'un navigateur à un serveur, ce serveur répond 179 00:08:44,300 --> 00:08:47,630 avec une enveloppe de son propre à l'intérieur de laquelle est texte. 180 00:08:47,630 --> 00:08:49,020 En d'autres termes, HTML. 181 00:08:49,020 --> 00:08:50,590 Langage Signalétique Hyper Text. 182 00:08:50,590 --> 00:08:53,200 Qui est une autre langue que nous vous présentons aujourd'hui 183 00:08:53,200 --> 00:08:57,740 que les humains ou ordinateurs génèrent pour mettre en oeuvre des pages web. 184 00:08:57,740 --> 00:08:59,580 >> Plus précisément, nous allons regarder cela. 185 00:08:59,580 --> 00:09:03,277 Je vais maintenant revenir sur le site de Facebook. 186 00:09:03,277 --> 00:09:05,360 Et je vais tout simplement le contrôle-clic ou clic droit 187 00:09:05,360 --> 00:09:07,634 et cliquez sur source de la page. 188 00:09:07,634 --> 00:09:10,550 Et même si vous ne l'utilisez Chrome, IE peut faire cela, Firefox peut faire cela, 189 00:09:10,550 --> 00:09:14,060 Safari peut le faire, même si le menu options peuvent regarder un peu différent. 190 00:09:14,060 --> 00:09:18,990 Et cela est le HTML que Mark et société à Facebook ont ​​écrit. 191 00:09:18,990 --> 00:09:24,640 >> Et collectivement, cette langue ici met en œuvre le bleu et la page blanche 192 00:09:24,640 --> 00:09:26,370 que nous avons vu il ya un instant. 193 00:09:26,370 --> 00:09:28,030 Maintenant, cela est un peu écrasante. 194 00:09:28,030 --> 00:09:31,400 Mais si nous regardons en haut à gauche, nous sommes va commencer à voir quelques modèles. 195 00:09:31,400 --> 00:09:34,140 Il ressemble à il ya beaucoup de ces équerre ouverte 196 00:09:34,140 --> 00:09:35,970 et puis il ya ce mot-clé HTML. 197 00:09:35,970 --> 00:09:38,330 Voici une autre ouverte équerre et la tête. 198 00:09:38,330 --> 00:09:41,560 >> Voici, si nous défiler vers le bas et vers le bas et vers le bas, je suis 199 00:09:41,560 --> 00:09:43,820 aller de l'avant et essayer à la recherche de quelque chose. 200 00:09:43,820 --> 00:09:48,510 Il chemin au cours sur la droite voici corps de console ouverte. 201 00:09:48,510 --> 00:09:50,800 Et rappeler de la dernière le temps que nous avons proposé 202 00:09:50,800 --> 00:09:53,364 que la page web simple qu'un humain pourrait écrire 203 00:09:53,364 --> 00:09:55,030 pourrait ressembler à un petit quelque chose de ce genre. 204 00:09:55,030 --> 00:09:58,430 Balise HTML Open, tête ouverte tag, ouvert balise de titre, 205 00:09:58,430 --> 00:10:03,230 puis le titre fermé, tête fermée, ouverte balise body, un texte, le corps fermé, 206 00:10:03,230 --> 00:10:04,720 HTML fermée. 207 00:10:04,720 --> 00:10:06,290 >> Mais une pause ici pour un moment. 208 00:10:06,290 --> 00:10:09,030 Ce code, même si vous avez il n'a jamais écrit avant 209 00:10:09,030 --> 00:10:11,864 mais ne comprends toujours pas ce qui se passe, semble assez bon. 210 00:10:11,864 --> 00:10:12,821 Droit, il est très propre. 211 00:10:12,821 --> 00:10:14,120 Il est très stylistiquement belle. 212 00:10:14,120 --> 00:10:16,190 Un grand nombre d'indentation et de l'espace blanc. 213 00:10:16,190 --> 00:10:18,020 Facebook est pas. 214 00:10:18,020 --> 00:10:23,190 Alors, pourquoi est tellement Facebook pire que moi à écrire du HTML? 215 00:10:23,190 --> 00:10:24,310 Apparemment. 216 00:10:24,310 --> 00:10:26,899 >> Droite, cela ressemble à un sur cinq pour le style. 217 00:10:26,899 --> 00:10:29,315 Il ya une raison convaincante pour eux de couper ces coins. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 Très bien, donc ils ne veulent pas rendre plus facile pour vous de lire. 220 00:10:33,860 --> 00:10:36,940 Donc, dans un certain sens, ils sont obscurcir il, une sorte de brouillage, il 221 00:10:36,940 --> 00:10:40,260 au moins esthétiquement si qu'il est plus difficile pour Myspace 222 00:10:40,260 --> 00:10:42,705 pour aller arracher leur page d'accueil et le code HTML pour elle. 223 00:10:42,705 --> 00:10:45,080 Il se trouve que les programmes cependant, y compris Chrome, 224 00:10:45,080 --> 00:10:47,020 nous pouvons nettoyer cette place Super facilement. 225 00:10:47,020 --> 00:10:49,420 Donc, il est pas tout à fait comme la raison. 226 00:10:49,420 --> 00:10:51,290 Quoi d'autre pourrait être la cause. 227 00:10:51,290 --> 00:10:51,790 Ouais. 228 00:10:51,790 --> 00:10:54,680 229 00:10:54,680 --> 00:10:55,890 Ouais, données sur les coûts d'espace blanc. 230 00:10:55,890 --> 00:10:56,598 Que voulez-vous dire? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Oui exactement. 233 00:11:02,979 --> 00:11:06,020 Si vous frappez la touche de tabulation d'un lot ou la barre d'espace, examiner les implications. 234 00:11:06,020 --> 00:11:10,060 Ainsi, chaque touche de votre clavier est un [Inaudible] représentée comme un octet. 235 00:11:10,060 --> 00:11:14,560 >> Donc supposer que Mark ou l'un des développeurs ces jours-ci frappe la barre d'espace qu'une seule fois 236 00:11:14,560 --> 00:11:17,899 dans cette page HTML représente la page d'accueil de Facebook. 237 00:11:17,899 --> 00:11:19,690 Et Facebook a beaucoup des utilisateurs de ces jours. 238 00:11:19,690 --> 00:11:24,030 Donc supposer que la page d'accueil de Facebook est visité par un milliard de personnes aujourd'hui. 239 00:11:24,030 --> 00:11:27,020 Et quelqu'un sur Facebook a frapper la barre d'espace qu'une seule fois. 240 00:11:27,020 --> 00:11:29,890 >> Donc, un octet supplémentaire, un milliard de demandes, 241 00:11:29,890 --> 00:11:32,790 combien plus les données sont Facebook transférer sur Internet 242 00:11:32,790 --> 00:11:37,160 parce que quelqu'un a frappé le barre d'espace sur son clavier? 243 00:11:37,160 --> 00:11:41,660 Un milliard d'octets, ou d'un gigaoctet de les données sont envoyées à partir de serveurs de Facebook 244 00:11:41,660 --> 00:11:43,626 de personnes à travers le monde sans raison valable. 245 00:11:43,626 --> 00:11:44,750 Maintenant, cela est juste un espace. 246 00:11:44,750 --> 00:11:48,866 >> Imaginez si nous avons réellement nettoyer ce chose et en retrait et ajouté 247 00:11:48,866 --> 00:11:50,990 beaucoup d'espace blanc et tabulations et des espaces, 248 00:11:50,990 --> 00:11:53,656 vous vous retrouvez gigaoctets de dépenses, sinon terra octets de plus d'espace. 249 00:11:53,656 --> 00:11:56,640 Et si super dans la commune monde réel de développement web 250 00:11:56,640 --> 00:11:58,950 est de rapetisser votre code. 251 00:11:58,950 --> 00:12:01,280 Et nous finirons par voir comment vous pourriez le faire. 252 00:12:01,280 --> 00:12:04,630 >> Mais aujourd'hui, nous allons commencer à écrire du code qui est en fait lisible par nous les humains. 253 00:12:04,630 --> 00:12:10,120 Il se trouve, cependant, si vous revenez à cet outil de Chrome Inspecter l'élément, 254 00:12:10,120 --> 00:12:12,030 Auparavant, nous étions sur l'onglet Réseau. 255 00:12:12,030 --> 00:12:15,430 Il se trouve que si vous allez à la éléments onglet, ce que vous voyez réellement 256 00:12:15,430 --> 00:12:19,230 Chrome est est assez imprimés de même que la version HTML. 257 00:12:19,230 --> 00:12:20,640 Nous avons donc deobfuscated il. 258 00:12:20,640 --> 00:12:22,472 Donc, il n'y a pas de match pour un ordinateur. 259 00:12:22,472 --> 00:12:24,430 Et maintenant vous pouvez réellement cliquez autour et commencer 260 00:12:24,430 --> 00:12:27,630 pour voir la hiérarchie qui est une page web. 261 00:12:27,630 --> 00:12:28,780 Donc, nous allons effectivement faire. 262 00:12:28,780 --> 00:12:32,120 Je vais aller de l'avant et d'ouvrir sur mon Mac un programme appelé modifier le texte. 263 00:12:32,120 --> 00:12:35,490 Et de rappeler que ceci est juste un super simple éditeur de texte. 264 00:12:35,490 --> 00:12:37,490 Windows a notepad.exe. 265 00:12:37,490 --> 00:12:39,820 Et je vais mot à mot tapez la commande suivante. 266 00:12:39,820 --> 00:12:44,650 Type Doc HTML, parenthèse ouverte HTML, fermé le support HTML, 267 00:12:44,650 --> 00:12:49,000 nous avons la tête de la page ici, l'extrémité de la tête de la page ici, 268 00:12:49,000 --> 00:12:52,310 un titre sera comme, bonjour monde. 269 00:12:52,310 --> 00:12:56,660 >> Et puis, ici-bas, nous avons besoin le corps de la page Web. 270 00:12:56,660 --> 00:12:58,050 Fourgon. 271 00:12:58,050 --> 00:13:00,700 Et puis ici, bonjour monde. 272 00:13:00,700 --> 00:13:01,270 Bien. 273 00:13:01,270 --> 00:13:03,350 Donc, nous avons écrit une page Web super rapide. 274 00:13:03,350 --> 00:13:06,675 Je vais l'enregistrer comme hello.html sur mon bureau. 275 00:13:06,675 --> 00:13:09,050 Mon Mac me plaindre, pensant que, attendez une minute, 276 00:13:09,050 --> 00:13:11,091 ceci est un fichier texte, le faire vous voulez l'appeler .txt? 277 00:13:11,091 --> 00:13:13,300 Mais non, je veux utiliser dot HTML. 278 00:13:13,300 --> 00:13:16,140 >> Et puis ce qui est bien si je il suffit de double cliquer sur ce fichier, 279 00:13:16,140 --> 00:13:18,600 hello.html, voici ma page web. 280 00:13:18,600 --> 00:13:22,564 Malheureusement, je suis le seule personne dans le monde 281 00:13:22,564 --> 00:13:23,980 qui peut visiter cette page dès maintenant. 282 00:13:23,980 --> 00:13:26,734 Parce que là où il ne vit apparemment? 283 00:13:26,734 --> 00:13:27,650 Il est sur mon Mac, non? 284 00:13:27,650 --> 00:13:28,470 Qui est inutile. 285 00:13:28,470 --> 00:13:30,390 Comme personne dans cette salle et encore moins sur l'Internet 286 00:13:30,390 --> 00:13:31,598 peut effectivement visiter cette page. 287 00:13:31,598 --> 00:13:33,820 Donc, aujourd'hui, nous devons introduire un autre élément. 288 00:13:33,820 --> 00:13:36,720 >> Et pour ce faire, je vais aller de l'avant et d'ouvrir nuage 9. 289 00:13:36,720 --> 00:13:40,090 Donc Cloud 9 est bien sûr une nuage Clients-- base CS50 290 00:13:40,090 --> 00:13:44,890 IDE-- qui a tous les espaces de travail de nos courir quelque part sur Internet. 291 00:13:44,890 --> 00:13:48,330 Et cela signifie que tous nos fichiers sont déjà accessibles au public. 292 00:13:48,330 --> 00:13:49,830 Allons donc de l'avant et le faire. 293 00:13:49,830 --> 00:13:53,670 Je vais aller de l'avant et créer un nouveau fichier NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Je vais l'enregistrer comme avant comme hello.html et cliquez sur Enregistrer. 295 00:13:58,819 --> 00:14:01,860 Et maintenant, juste pour gagner du temps, je vais aller de l'avant et de copier-coller ce code 296 00:14:01,860 --> 00:14:03,470 plutôt que de le retaper. 297 00:14:03,470 --> 00:14:04,550 Et l'enregistrer. 298 00:14:04,550 --> 00:14:07,550 Et maintenant, je dois une hello.html fichier appelé. 299 00:14:07,550 --> 00:14:09,710 Mais comment puis-je réellement ouvrir comme une page Web? 300 00:14:09,710 --> 00:14:14,120 Eh bien, il se trouve intégré à l'CS50 IDE est non seulement un compilateur comme clang 301 00:14:14,120 --> 00:14:16,670 et un débogueur comme GDB et grappes d'autres programmes, 302 00:14:16,670 --> 00:14:21,140 il ya en fait une part entière serveur web fonctionnant au sein CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Chacun d'entre vous, qui est-à-dire, avoir votre propre serveur web. 304 00:14:23,900 --> 00:14:26,850 Et un serveur web est juste un morceau de logiciels dont le but dans la vie 305 00:14:26,850 --> 00:14:28,220 est de servir des pages web. 306 00:14:28,220 --> 00:14:32,490 Pour écouter les demandes des navigateurs et répondre avec petites enveloppes virtuelles 307 00:14:32,490 --> 00:14:35,290 à l'intérieur de laquelle est le contenu que je l'ai écrit. 308 00:14:35,290 --> 00:14:38,372 Donc, ce serveur web est la source réellement libre et ouvert. 309 00:14:38,372 --> 00:14:40,830 Où open source signifie simplement logiciel que quelqu'un d'autre a 310 00:14:40,830 --> 00:14:43,480 écrite que nous pouvons tous réellement voir et télécharger et même 311 00:14:43,480 --> 00:14:44,780 modifier le code source. 312 00:14:44,780 --> 00:14:46,150 Et il a appelé Apache. 313 00:14:46,150 --> 00:14:51,450 >> Et nous avons fait un peu plus facile à utiliser dans CS50IDE en l'appelant 50 Apache. 314 00:14:51,450 --> 00:14:53,780 Alors qu'il peut effectivement comprendre la suite. 315 00:14:53,780 --> 00:14:56,560 Je vais dire Apache 50 début. 316 00:14:56,560 --> 00:14:58,910 Et puis, je vais juste dire dot. 317 00:14:58,910 --> 00:15:01,080 Et nous voyons quelque peu un message disant arcanes 318 00:15:01,080 --> 00:15:04,640 Document de définition des [Apache? groupe?] à la maison, ubuntu, quelle qu'elle soit, 319 00:15:04,640 --> 00:15:05,770 réduire l'espace de travail. 320 00:15:05,770 --> 00:15:08,280 A partir serveur Web Apache 2 succès. 321 00:15:08,280 --> 00:15:11,330 >> Tant histoire courte, je ont juste poussé un bouton 322 00:15:11,330 --> 00:15:18,000 et allumé un serveur Web qui est maintenant écoute sur Internet sur le port TCP 323 00:15:18,000 --> 00:15:20,587 80 à une adresse spécifique. 324 00:15:20,587 --> 00:15:22,420 Et il est dit ici, et cela va changer en fonction 325 00:15:22,420 --> 00:15:26,550 sur votre nom d'utilisateur et d'autres facteurs, mais remarquez maintenant si je clique sur ce, 326 00:15:26,550 --> 00:15:30,211 IDE50 dot jharvard et ainsi et donc, vous remarquerez que tout ce temps 327 00:15:30,211 --> 00:15:31,960 depuis plusieurs semaines, vous pourriez avoir 328 00:15:31,960 --> 00:15:35,200 remarqué que votre propre nom d'utilisateur est incorporé dans la main en haut à droite 329 00:15:35,200 --> 00:15:37,130 coin de CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> Et qui a été effectivement tout cela chronométrer l'adresse à laquelle vous pouvez 331 00:15:41,050 --> 00:15:43,574 visiter tous vos fichiers via le web. 332 00:15:43,574 --> 00:15:45,990 Jusqu'à présent, il n'a pas compté, parce que dans C, vous généralement 333 00:15:45,990 --> 00:15:48,073 veulent que les choses en cours d'exécution dans un terminal, pas sur le web. 334 00:15:48,073 --> 00:15:50,800 Mais aujourd'hui, nous commençons l'écriture de code basé sur le Web 335 00:15:50,800 --> 00:15:53,350 que nous ne voulons accessible à URL publiques. 336 00:15:53,350 --> 00:15:56,100 Donc ce que je vais faire est de cliquer cette URL. 337 00:15:56,100 --> 00:16:00,880 >> Et remarque que je vois un assez Indice laid, un répertoire, 338 00:16:00,880 --> 00:16:04,090 mais ce fichier vous saute au doute? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 Voilà parce que je sauvé le fichier dans mon espace de travail. 341 00:16:07,870 --> 00:16:12,310 Et ce que je l'ai dit Apache le serveur Web est de regarder dans l'espace de travail le répertoire de David. 342 00:16:12,310 --> 00:16:15,300 Et laisser personne dans le monde de voir ces fichiers. 343 00:16:15,300 --> 00:16:19,050 >> Et en effet, si je maintenant cliquer sur hello.html, 344 00:16:19,050 --> 00:16:22,180 Je vois dans cet onglet exactement ce fichier. 345 00:16:22,180 --> 00:16:26,430 Maintenant, remarquez, nuage de 9 DOING quelque chose d'un peu utile pour nous. 346 00:16:26,430 --> 00:16:29,480 Dans CS50 IDE, Indication Il ya soudain une barre d'adresse. 347 00:16:29,480 --> 00:16:33,690 En effet, même si nous sommes utilisant Chrome pour visiter CS50IDE, 348 00:16:33,690 --> 00:16:37,940 intérieur de CS50IDE est son propre version d'un navigateur web en ce moment. 349 00:16:37,940 --> 00:16:40,820 Et donc plutôt que de compliquer les choses en tant que telle, 350 00:16:40,820 --> 00:16:42,955 Je vais aller de l'avant et il suffit de copier cette URL. 351 00:16:42,955 --> 00:16:45,330 Je vais aller de l'avant et juste ouvrir mon propre fenêtre Chrome. 352 00:16:45,330 --> 00:16:47,800 Donc il n'y a pas de magie ici, pas CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Je vais juste coller littéralement mon J Harvard URL et appuyez sur Entrée. 354 00:16:51,800 --> 00:16:54,750 Et voila, maintenant, moi, et en théorie, tout le monde 355 00:16:54,750 --> 00:16:57,700 sur l'Internet, si je l'ai configuré autorisations de manière appropriée, 356 00:16:57,700 --> 00:16:58,720 peut visiter ce fichier. 357 00:16:58,720 --> 00:17:03,230 Et maintenant, si je disais hello.html, voila, il 358 00:17:03,230 --> 00:17:06,366 est ma page web incroyablement décevante. 359 00:17:06,366 --> 00:17:07,740 Alors, faisons un test de cohérence rapide. 360 00:17:07,740 --> 00:17:09,710 Parce que tout cela conceptuel est mise en place. 361 00:17:09,710 --> 00:17:13,180 Et nous avons fait pas vraiment vous appris à écrire en HTML soi. 362 00:17:13,180 --> 00:17:16,084 Vous avez des questions à ce jour sur ce qui vient de se passer? 363 00:17:16,084 --> 00:17:18,549 364 00:17:18,549 --> 00:17:19,049 Oui. 365 00:17:19,049 --> 00:17:24,290 366 00:17:24,290 --> 00:17:25,800 CS50 ne possèdent ces pages web? 367 00:17:25,800 --> 00:17:26,460 Dans quel sens? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Bonne question. 370 00:17:29,530 --> 00:17:32,429 Donc CS50 de possède CS50.io. 371 00:17:32,429 --> 00:17:33,970 Nous avons en effet acheté ce nom de domaine. 372 00:17:33,970 --> 00:17:37,240 Et par la nature de vous les gars connectant à CS50IDE, 373 00:17:37,240 --> 00:17:39,270 vous obtenez tout ce qu'on appelle un sous-domaine. 374 00:17:39,270 --> 00:17:46,840 >> Donc IDE50-Malan, ou IDE50-Rob.CS50.io, qui est votre adresse unique dans 375 00:17:46,840 --> 00:17:47,730 notre nom de domaine. 376 00:17:47,730 --> 00:17:50,850 Donc, pour les fins de la formation, vous avez votre propre adresse unique. 377 00:17:50,850 --> 00:17:55,150 Mais nous avons simplifié les choses par l'achat du domaine de premier niveau, CS50 dot 378 00:17:55,150 --> 00:17:58,050 I / O, puis tout le monde est à l'intérieur de cela, pour ainsi dire. 379 00:17:58,050 --> 00:17:59,890 Et nous allons revenir à ce que dans quelques semaines probablement, 380 00:17:59,890 --> 00:18:01,930 en particulier au projet final temps, quand certains d'entre vous 381 00:18:01,930 --> 00:18:03,596 pourrait vouloir obtenir vos propres noms de domaine. 382 00:18:03,596 --> 00:18:06,270 Il est en fait relativement simple. 383 00:18:06,270 --> 00:18:06,770 Bien. 384 00:18:06,770 --> 00:18:07,880 Alors, faisons maintenant ceci. 385 00:18:07,880 --> 00:18:11,910 Je vais retourner dans CS50IDE, où mon dossier en ce moment, 386 00:18:11,910 --> 00:18:14,710 hello.html, est pas tout à fait intéressant. 387 00:18:14,710 --> 00:18:17,130 Je voudrais faire quelque chose un peu mieux que cela. 388 00:18:17,130 --> 00:18:19,440 Donc, je vais faire quelque chose comme ça. 389 00:18:19,440 --> 00:18:21,510 Permettez-moi de paragraphs.html ouverte. 390 00:18:21,510 --> 00:18:23,560 Donc, cela est un fichier je l'ai écrit à l'avance. 391 00:18:23,560 --> 00:18:26,480 Au sommet de celui-ci, comme toujours, nous avons des commentaires. 392 00:18:26,480 --> 00:18:28,730 Mais en HTML, commentaires regarder un peu différent. 393 00:18:28,730 --> 00:18:33,270 Sur la troisième ligne et la ligne 14, vous voir la syntaxe pour commencer un commentaire 394 00:18:33,270 --> 00:18:34,020 et mettre fin à un commentaire. 395 00:18:34,020 --> 00:18:36,820 >> Mais aucune de ces choses dans entre les questions fonctionnellement. 396 00:18:36,820 --> 00:18:40,250 Il est juste une note à un humaine ce qui se passe ici. 397 00:18:40,250 --> 00:18:43,040 Et juste comme un bon sens rapide vérifier, si je fais défiler vers le bas, 398 00:18:43,040 --> 00:18:46,820 Quelle est la nouvelle évidente tag que nous avons mis en place? 399 00:18:46,820 --> 00:18:52,130 Les balises jusqu'à présent, nous avons vu sont ouverts support de HTML, la tête, le titre et le corps. 400 00:18:52,130 --> 00:18:54,400 Mais ce qui est évidemment nouvelle maintenant? 401 00:18:54,400 --> 00:18:55,200 >> Ouais, donc p. 402 00:18:55,200 --> 00:18:57,320 La balise p ou balise de paragraphe. 403 00:18:57,320 --> 00:19:01,182 Et puis je viens emprunté de défaut Texte latin pour constituer mes paragraphes. 404 00:19:01,182 --> 00:19:03,390 Parce que ce que je voulais démontrer comment vous pourriez 405 00:19:03,390 --> 00:19:05,859 représenter paragraphes de texte en HTML. 406 00:19:05,859 --> 00:19:08,400 Et donc ce qui est de commencer à produire ici est qu'il ya déjà 407 00:19:08,400 --> 00:19:09,657 un modèle de développement. 408 00:19:09,657 --> 00:19:10,990 Et laissez-moi aller de l'avant et le faire. 409 00:19:10,990 --> 00:19:12,760 Permettez-moi de commencer par désactiver Apache. 410 00:19:12,760 --> 00:19:17,340 Et je vais le dire à lui-même commencer de nouveau à l'intérieur de la source d'aujourd'hui sept 411 00:19:17,340 --> 00:19:18,420 m répertoire. 412 00:19:18,420 --> 00:19:20,100 Alors que je avoir accès à tout. 413 00:19:20,100 --> 00:19:22,230 >> Et maintenant, si je reviens à cette liste de répertoires, 414 00:19:22,230 --> 00:19:24,846 remarque je vois tous les fichiers à partir d'aujourd'hui. 415 00:19:24,846 --> 00:19:26,720 Et vous verrez dans le prochaine série de problème, nous allons 416 00:19:26,720 --> 00:19:28,594 vous donner des instructions pour faire exactement cela. 417 00:19:28,594 --> 00:19:35,210 Si je ouvre paragraphs.html, cela pourrait ainsi ressembler à un langage de programmation 418 00:19:35,210 --> 00:19:36,970 à vous si vous ne parlez pas ou lire le latin. 419 00:19:36,970 --> 00:19:40,525 Mais cela est à seulement trois paragraphes de texte qui sont marqués en HTML. 420 00:19:40,525 --> 00:19:43,100 >> Et remarquez paragraphe pauses entre eux. 421 00:19:43,100 --> 00:19:46,400 Parce qu'il se trouve, et même si vous 422 00:19:46,400 --> 00:19:49,210 pourrait être enclin à le faire, alors que dans le monde réel, 423 00:19:49,210 --> 00:19:51,370 si vous voulez mettre en ligne pauses entre les choses, 424 00:19:51,370 --> 00:19:55,680 vous pourriez tout simplement faire et cliquez sur Enregistrer. 425 00:19:55,680 --> 00:19:59,460 Et maintenant, si je recharge ici, un avis que tout simplement brouille ensemble 426 00:19:59,460 --> 00:20:01,100 en une seule goutte de texte. 427 00:20:01,100 --> 00:20:03,570 Parce que le HTML est une sorte de langage muet. 428 00:20:03,570 --> 00:20:07,230 >> Il est destiné à être utilisé dans un tel une façon que le navigateur ne 429 00:20:07,230 --> 00:20:09,920 faire explicitement ce que vous lui demandez de faire. 430 00:20:09,920 --> 00:20:12,890 Donc, si vous ne dites pas qu'il me donner un nouveau paragraphe, 431 00:20:12,890 --> 00:20:14,569 tu ne vas pas pour voir un nouveau paragraphe. 432 00:20:14,569 --> 00:20:16,360 Et en fait, ce que le navigateur va faire 433 00:20:16,360 --> 00:20:20,020 est, même si vous appuyez sur Entrée, disons encore et encore 434 00:20:20,020 --> 00:20:23,190 et encore, se déplaçant de cette façon de texte bas sur l'écran, puis sauvegarder 435 00:20:23,190 --> 00:20:26,610 puis rechargez, le navigateur va à l'effondrement de tout cet espace blanc 436 00:20:26,610 --> 00:20:29,021 en un seul, les espaces visibles. 437 00:20:29,021 --> 00:20:29,520 Bien. 438 00:20:29,520 --> 00:20:30,869 Voilà donc la balise de paragraphe. 439 00:20:30,869 --> 00:20:32,910 Et alors quel est le motif qui se développe ici? 440 00:20:32,910 --> 00:20:37,450 Eh bien, il semble être le cas que HTML est tout au sujet de commencer un tag 441 00:20:37,450 --> 00:20:38,460 et se terminant une balise. 442 00:20:38,460 --> 00:20:39,300 Et qu'est-ce qu'un tag? 443 00:20:39,300 --> 00:20:41,160 Eh bien, il est juste un morceau de syntaxe. 444 00:20:41,160 --> 00:20:44,400 Ouvrir le support, un mot-clé, support fermé, est une balise. 445 00:20:44,400 --> 00:20:45,510 Ou balise de début. 446 00:20:45,510 --> 00:20:48,590 Et puis quand vous êtes fait vous exprimer, 447 00:20:48,590 --> 00:20:52,300 comme dans vous avez terminé avec le paragraphe, vous faites ainsi dire en face. 448 00:20:52,300 --> 00:20:55,480 Mais l'inverse est pas tout à fait à l'envers. 449 00:20:55,480 --> 00:21:00,630 >> Il vous suffit de préfixer la même étiquette de nom avec une barre oblique comme ça. 450 00:21:00,630 --> 00:21:01,130 Bien. 451 00:21:01,130 --> 00:21:02,570 Donc, pas tout à fait passionnant. 452 00:21:02,570 --> 00:21:05,270 Et en fait, nous ne faisons pas la web tout cela plus intéressant. 453 00:21:05,270 --> 00:21:07,630 Que faire si je veux faire des choses plus grandes et audacieuses? 454 00:21:07,630 --> 00:21:11,780 Donc, il se trouve que voici un exemple dans headings.html, où, dans mon corps, 455 00:21:11,780 --> 00:21:17,280 Je dois une balise H1, H2, H3, quatre, cinq, six ou, qui 456 00:21:17,280 --> 00:21:18,310 sembler assez mystérieux. 457 00:21:18,310 --> 00:21:21,010 Mais si je vais ouvrir cette exemple, nous allons jeter un coup d'oeil. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> Donc navigateurs par défaut peuvent donner vous texte qui est gros et gras de tailles disparates. 460 00:21:27,030 --> 00:21:28,070 H1 est grande. 461 00:21:28,070 --> 00:21:31,240 H6 est plus petit et puis tout le reste entre les deux. 462 00:21:31,240 --> 00:21:34,170 Voilà donc intéressant, mais encore pas vraiment le web, je sais. 463 00:21:34,170 --> 00:21:36,870 Que faire si nous voulons je dois quelque chose comme une liste. . 464 00:21:36,870 --> 00:21:40,190 Alors, voici une liste à puces de trois des maisons de Harvard. 465 00:21:40,190 --> 00:21:41,600 >> Comment avez-vous fait cela? 466 00:21:41,600 --> 00:21:45,410 Eh bien, jetez un oeil à list.html. 467 00:21:45,410 --> 00:21:47,870 Et ici, nous voyons une peu de funkiness 468 00:21:47,870 --> 00:21:49,630 mais nous allons examiner ce qui se passe. 469 00:21:49,630 --> 00:21:56,182 Donc, sur la base de ce que vous venez de voir, UL signifie liste non ordonnée. 470 00:21:56,182 --> 00:21:57,640 Liste non ordonnée signifie simplement puces. 471 00:21:57,640 --> 00:21:58,431 Il n'y a pas de chiffres. 472 00:21:58,431 --> 00:22:01,850 Il ya aussi quelque chose appelé un liste, qui est un OL au tag ordonné. 473 00:22:01,850 --> 00:22:05,350 Puis LI, élément de la liste est tout ce qu'il signifie. 474 00:22:05,350 --> 00:22:07,790 >> Et donc automatiquement numéros tout pour vous. 475 00:22:07,790 --> 00:22:11,270 Mais encore une fois, toute ma indentation et l'espace blanc est juste pour l'amour de moi. 476 00:22:11,270 --> 00:22:13,050 Le navigateur est pas effectivement aller aux soins. 477 00:22:13,050 --> 00:22:16,670 Ainsi, même si vous ne pouviez pas faire, pour être clair, 478 00:22:16,670 --> 00:22:19,880 vous ne devriez pas même si Le navigateur sera encore 479 00:22:19,880 --> 00:22:22,130 être en mesure de comprendre très bien. 480 00:22:22,130 --> 00:22:24,590 Je suis frappé de rechargement dans mon navigateur, je cliquant reload 481 00:22:24,590 --> 00:22:26,760 et aucun changement qui se passe parce que le navigateur encore 482 00:22:26,760 --> 00:22:29,550 faire exactement ce que je lui dis de faire. 483 00:22:29,550 --> 00:22:30,050 >> Bien. 484 00:22:30,050 --> 00:22:31,340 Donc, tout cela est juste le texte. 485 00:22:31,340 --> 00:22:33,730 Maintenant, nous allons faire quelque chose de plus intéressant. 486 00:22:33,730 --> 00:22:36,660 Je vais aller de l'avant et emprunter un peu de cette HTML. 487 00:22:36,660 --> 00:22:40,910 Je vais aller de l'avant et créer un nouveau fichier ici. 488 00:22:40,910 --> 00:22:43,370 Et nous appelons cette rick.html. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Nous avons de façon disproportionnée quelque chose d'occasion 491 00:22:48,916 --> 00:22:51,290 appelé un rouleau rick dans ce classe cette année, je ne sais pas, 492 00:22:51,290 --> 00:22:53,880 il vient de se passer organiquement. 493 00:22:53,880 --> 00:22:55,397 >> Et maintenant, il a obtenu hors de contrôle. 494 00:22:55,397 --> 00:22:56,730 Donc je vais juste aller avec elle. 495 00:22:56,730 --> 00:22:59,700 Et si je vais à Google Images et Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 Si vous ne savez pas pourquoi nous faisons cela, il suffit de lire sur Wikipedia. 498 00:23:06,170 --> 00:23:11,520 Chaque fois que vous avez cliqué sur le lien, quelqu'un riait quelque part. 499 00:23:11,520 --> 00:23:14,860 Et laissez-moi aller ahead-- il nous allons, nous allons voir ce image. 500 00:23:14,860 --> 00:23:16,750 >> Nous avons donc ici un image dans Google Images. 501 00:23:16,750 --> 00:23:19,390 Et supposons que cela est raisonnablement partout sur l'internet. 502 00:23:19,390 --> 00:23:22,570 Donc, je vais supposer qu'il est OK pour moi pour réellement mettre cela en ma page web. 503 00:23:22,570 --> 00:23:24,820 Je vais aller de l'avant et copier URL de l'image. 504 00:23:24,820 --> 00:23:28,600 Et maintenant, si je reviens vers le Cloud 9, nous allons voir ce que je peux faire ici. 505 00:23:28,600 --> 00:23:30,630 Donc ici est juste une page web. 506 00:23:30,630 --> 00:23:39,020 Ceci est Rick Astley, haha, Je vais maintenant revenir 507 00:23:39,020 --> 00:23:43,510 à mon navigateur, recharger, et intéressant. 508 00:23:43,510 --> 00:23:44,530 >> Où est Rick? 509 00:23:44,530 --> 00:23:46,050 Alors laissez-moi voir ce qui est arrivé. 510 00:23:46,050 --> 00:23:49,114 En fait, je vais faire comme si je ne le faisais pas. 511 00:23:49,114 --> 00:23:50,280 [Inaudible] le mettre ici. 512 00:23:50,280 --> 00:23:52,520 Nous y reviendrons dans un instant. 513 00:23:52,520 --> 00:23:54,200 Alors, voici rick.html. 514 00:23:54,200 --> 00:23:56,070 Donc, ce ne est pas de Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Donc, il se trouve que nous pouvons effectivement l'ajouter ici. 516 00:23:59,680 --> 00:24:00,830 Ceci est de Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Je vais dire me donner une image dont source est l'URL Je viens de copier, ce qui 518 00:24:06,680 --> 00:24:09,110 est apparemment heureux quelque chose d'anniversaire ou autre. 519 00:24:09,110 --> 00:24:13,280 >> Et maintenant, je vais fermer le tag comme ceci. 520 00:24:13,280 --> 00:24:15,170 Donc, ce tire à super long. 521 00:24:15,170 --> 00:24:17,740 Mais remarque que tout ce que je fait image de parenthèse ouverte est, 522 00:24:17,740 --> 00:24:20,270 la source avec un attribut de cette. 523 00:24:20,270 --> 00:24:21,530 Et il est vraiment une URL longue. 524 00:24:21,530 --> 00:24:23,720 Et à la fin, le remarquer. 525 00:24:23,720 --> 00:24:29,530 Slash Pourquoi ai-je fait équerre au lieu de, comme toute autre étiquette, 526 00:24:29,530 --> 00:24:33,590 ayant une parenthèse ouverte, IMG, support fermé? 527 00:24:33,590 --> 00:24:37,040 Il suffit de prendre une supposition même si vous avoir aucune connaissance que ce soit 528 00:24:37,040 --> 00:24:40,410 avec HTML avant. 529 00:24:40,410 --> 00:24:42,710 >> Donc, il est de savoir comment il ferme la commande, mais pourquoi 530 00:24:42,710 --> 00:24:45,850 t-il pas vraiment intuitive sentiment de faire quelque chose d'un peu plus 531 00:24:45,850 --> 00:24:48,820 verbose comme proche image? 532 00:24:48,820 --> 00:24:51,400 Ouais. 533 00:24:51,400 --> 00:24:52,000 Ouais. 534 00:24:52,000 --> 00:24:55,620 Juste sémantiquement, il n'y a aucun sens de à partir d'une image et se terminant une image, 535 00:24:55,620 --> 00:24:56,870 il est ou on ne l'est pas. 536 00:24:56,870 --> 00:25:00,960 Donc, il n'a pas de sens de laisser un espace pour rien d'autre à l'intérieur d'une image. 537 00:25:00,960 --> 00:25:02,010 Vous ne pouvez pas faire cela. 538 00:25:02,010 --> 00:25:03,720 Et si la syntaxe serait généralement juste 539 00:25:03,720 --> 00:25:07,910 de faire la barre oblique à l'intérieur de l'étiquette ouverte ou la balise de début 540 00:25:07,910 --> 00:25:09,020 et puis appuyez sur Enregistrer. 541 00:25:09,020 --> 00:25:13,350 >> Donc, si je recharger maintenant ce fichier, maintenant Je dois une bonne page web cuisson ici. 542 00:25:13,350 --> 00:25:15,100 Et nous pourrions certainement vraiment ennuyer les gens 543 00:25:15,100 --> 00:25:17,010 en incorporant à la place comme un lien YouTube. 544 00:25:17,010 --> 00:25:19,350 Et en fait, à tout moment vous avez jamais allé sur YouTube, 545 00:25:19,350 --> 00:25:22,190 et laissez-moi en fait accidentellement Rick me rouler ici. 546 00:25:22,190 --> 00:25:25,770 Alors Rick rouleau. 547 00:25:25,770 --> 00:25:29,592 Alors Rick Roll-- je vais aller ici. 548 00:25:29,592 --> 00:25:31,900 >> [Jouer de la musique] 549 00:25:31,900 --> 00:25:33,730 >> OK, une personne qui aimait. 550 00:25:33,730 --> 00:25:37,270 Donc remarquer tout ce temps, si vous cliquez sur le lien Partager, vous, bien sûr 551 00:25:37,270 --> 00:25:41,390 obtenir l'URL que vous pouvez réellement Intégrer dans un courriel ou une image légale 552 00:25:41,390 --> 00:25:43,730 ou dans un ensemble de problèmes ou dans un diaporama. 553 00:25:43,730 --> 00:25:49,055 Et maintenant, si je clique sur la place intégration, remarquer que tout ce temps, ce genre de choses 554 00:25:49,055 --> 00:25:49,680 a été là. 555 00:25:49,680 --> 00:25:50,910 Je vais aller de l'avant et de copier ce. 556 00:25:50,910 --> 00:25:54,000 >> Et juste pour que nous puissions mieux voir, je suis va coller dans mon éditeur de texte. 557 00:25:54,000 --> 00:25:55,860 Notez que ce ce que YouTube vous a dit. 558 00:25:55,860 --> 00:25:57,693 Chaque fois que vous visitez un YouTube vidéo, si vous 559 00:25:57,693 --> 00:26:00,410 vouloir intégrer la vidéo sur votre page web, il suffit de saisir cela. 560 00:26:00,410 --> 00:26:03,350 Donc, cela est encore un autre Tag HTML appelé une iframe. 561 00:26:03,350 --> 00:26:04,590 Ou un dans le cadre de la ligne. 562 00:26:04,590 --> 00:26:08,680 Donc, il semble trop un peu plus complexe de tous les autres. 563 00:26:08,680 --> 00:26:11,950 Donc, il se trouve que l'image tag et apparemment la balise iframe 564 00:26:11,950 --> 00:26:13,370 prendre ce que l'on appelle des attributs. 565 00:26:13,370 --> 00:26:15,710 >> Et ceci est un autre morceau de syntaxe HTML. 566 00:26:15,710 --> 00:26:19,240 En plus de l'étiquette de nom, ouvert support nom de la balise, 567 00:26:19,240 --> 00:26:23,780 vous pouvez contrôler le comportement de l'étiquette en ayant tout un tas d'attribut 568 00:26:23,780 --> 00:26:24,860 est égal à la valeur. 569 00:26:24,860 --> 00:26:26,290 Attribut égale valeur. 570 00:26:26,290 --> 00:26:28,100 Et ainsi, par exemple, YouTube nous dit 571 00:26:28,100 --> 00:26:31,990 si vous voulez la largeur de cette vidéo être 420 pixels et la hauteur 572 00:26:31,990 --> 00:26:35,470 être 315 pixels, qui est comment vous exprimez en HTML. 573 00:26:35,470 --> 00:26:38,480 >> La source de la vidéo va être cette longue URL YouTube 574 00:26:38,480 --> 00:26:40,830 puis quelques autres trucs comme cadre frontière est égal à zéro, 575 00:26:40,830 --> 00:26:43,500 ce qui signifie probablement qu'il ya aucune bordure autour de la chose. 576 00:26:43,500 --> 00:26:45,450 Autoriser le plein écran sans doute signifie que l'utilisateur 577 00:26:45,450 --> 00:26:47,840 peut cliquer sur un bouton et en fait plein écran la vidéo. 578 00:26:47,840 --> 00:26:52,870 Donc, si je veux vraiment être impressionnante ici à Rick dot HTML, 579 00:26:52,870 --> 00:26:58,490 plutôt que d'utiliser la balise d'image, laissez- me supprimer, au lieu coller ce. 580 00:26:58,490 --> 00:27:00,810 Et maintenant recharger. 581 00:27:00,810 --> 00:27:02,500 Et maintenant, nous y revoilà. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Très bien, ça suffit. 584 00:27:06,020 --> 00:27:08,970 Tous droits alors je vais essayer difficile de ne pas refaire cela. 585 00:27:08,970 --> 00:27:11,400 Alors, quelles sont quelques-uns des plats à emporter ici? 586 00:27:11,400 --> 00:27:15,130 Donc, HTML, aussi laid que ces pages Web sont, est en fait assez simple. 587 00:27:15,130 --> 00:27:16,467 Il est pas un langage de programmation. 588 00:27:16,467 --> 00:27:17,550 Il ne possède pas de fonctions. 589 00:27:17,550 --> 00:27:18,410 Il ne possède pas de boucles. 590 00:27:18,410 --> 00:27:19,535 Il ne possède pas de conditions. 591 00:27:19,535 --> 00:27:22,900 Tout ce qu'il a est des dizaines de différentes étiquettes, dont chacun 592 00:27:22,900 --> 00:27:24,620 a zéro ou plusieurs attributs. 593 00:27:24,620 --> 00:27:27,320 Et en fait, ce qui est amusant à propos HTML que vous commencez à plonger dans 594 00:27:27,320 --> 00:27:29,560 est qu'il est très auto enseignable. 595 00:27:29,560 --> 00:27:32,880 >> Tout ce qu'il faut est une compréhension du cadre général de HTML. 596 00:27:32,880 --> 00:27:36,510 Qu'est-ce qu'un tag, ce qui est un attribut, comment voulez-vous configurez en fait une page Web 597 00:27:36,510 --> 00:27:37,250 comme suit. 598 00:27:37,250 --> 00:27:40,720 Et tout le reste est vraiment le résultat de regarder dans une référence en ligne 599 00:27:40,720 --> 00:27:43,080 ou googler comment faire certaines technique ou, comme nous l'avons vu, 600 00:27:43,080 --> 00:27:45,371 en regardant la source de Facebook code, en regardant un site Web 601 00:27:45,371 --> 00:27:48,710 que vous aimez à son code source et comprendre comment les développeurs là-bas 602 00:27:48,710 --> 00:27:50,550 effectivement mis les choses. 603 00:27:50,550 --> 00:27:52,180 >> Donc, nous pouvons faire des images. 604 00:27:52,180 --> 00:27:53,994 Et en fait, nous l'avons fait il ya un moment. 605 00:27:53,994 --> 00:27:55,410 Permettez-moi aller de l'avant et juste vous montrer. 606 00:27:55,410 --> 00:27:56,770 Voici quelques exemples de code. 607 00:27:56,770 --> 00:27:58,380 Si jamais vous voulez voir Grumpy Cat. 608 00:27:58,380 --> 00:28:00,620 Donc remarquerez que je peux avoir une balise d'image ici. 609 00:28:00,620 --> 00:28:02,090 Et je dois un commentaire dessus. 610 00:28:02,090 --> 00:28:04,490 Je dois une alternative texte pour l'accessibilité. 611 00:28:04,490 --> 00:28:07,250 Donc, quelqu'un qui est à l'aide d'un écran lecteur pour des raisons de la vue 612 00:28:07,250 --> 00:28:10,172 peut en fait alors leur lecteur d'écran dire Grumpy Cat. 613 00:28:10,172 --> 00:28:11,880 Parce que si ils ne peuvent pas voir l'image, ils 614 00:28:11,880 --> 00:28:14,504 peut au moins avoir leur ordinateur leur dire verbalement ce qu'il est. 615 00:28:14,504 --> 00:28:18,020 Et la source de ce fichier est cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 Donc, en fait, si je voulais vraiment obtenir intelligent, ce que je pourrais avoir done-- 617 00:28:22,472 --> 00:28:25,680 Je promets de ne pas aller à Rick Astley, de sorte Je vais google pour un chat à la place. 618 00:28:25,680 --> 00:28:28,290 Et si je vais à Google Images ici, et nous supposerons 619 00:28:28,290 --> 00:28:30,040 que ce soit une photo de mon chat. 620 00:28:30,040 --> 00:28:35,070 >> Supposons que je dois le contrôle cliqué ou clic droit, sur ce, accidentellement 621 00:28:35,070 --> 00:28:35,630 effrayant. 622 00:28:35,630 --> 00:28:40,320 Et je vais cat.jpeg pour sauver sur mon bureau. 623 00:28:40,320 --> 00:28:44,700 Permettez-moi maintenant de revenir à Cloud 9. 624 00:28:44,700 --> 00:28:48,150 Remarquez qu'ici, je peux aller à télécharger des fichiers locaux. 625 00:28:48,150 --> 00:28:51,530 Et si je prends cette fichier, cat.jpeg, préavis 626 00:28:51,530 --> 00:28:54,674 que je peux le faire glisser et déposez-le dans Cloud 9 627 00:28:54,674 --> 00:28:56,090 et il va me crier dessus ici. 628 00:28:56,090 --> 00:28:59,000 >> Parce que nous avons déjà vous a donné un fichier cat.jpeg, 629 00:28:59,000 --> 00:29:01,430 mais il est super facile à prendre une photo que vous avez 630 00:29:01,430 --> 00:29:03,220 prise de Facebook ou Flickr ou similaires 631 00:29:03,220 --> 00:29:05,678 et effectivement glisser-déposer dans les nuages ​​9 et ensuite faire 632 00:29:05,678 --> 00:29:07,970 partie de votre propre personnel site web ou un problème 633 00:29:07,970 --> 00:29:10,442 mis sept ou huit comme nous le verrons bientôt. 634 00:29:10,442 --> 00:29:12,150 Et puis quand vous enfin visiter ce chat, 635 00:29:12,150 --> 00:29:16,610 en supposant que je téléchargé ce même chat, that-- préavis qui était adorable. 636 00:29:16,610 --> 00:29:19,160 >> Qu'est-ce que vous verriez est quelque chose comme ce visage ici. 637 00:29:19,160 --> 00:29:21,810 Ainsi, les fichiers que vous référence à l'intérieur d'une page Web 638 00:29:21,810 --> 00:29:26,050 peut être soit locale dans votre propre compte ou à distance sur un autre serveur 639 00:29:26,050 --> 00:29:29,670 comme dans le cas de la Rick Photo Astley il ya un peu. 640 00:29:29,670 --> 00:29:32,990 Alors, où ce else-- pouvons-nous faire ici? 641 00:29:32,990 --> 00:29:34,890 Donc, nous allons jeter un oeil à ce qui suit. 642 00:29:34,890 --> 00:29:36,160 Vous savez ce qui est cool? 643 00:29:36,160 --> 00:29:39,330 >> Nous avons jusqu'à présent été prise pages web très statiques. 644 00:29:39,330 --> 00:29:41,830 Je veux pour pimenter les choses comme suit. 645 00:29:41,830 --> 00:29:44,344 Je veux faire mon propre moteur de recherche. 646 00:29:44,344 --> 00:29:47,010 Donc, pour faire un moteur de recherche, de laisser aller de l'avant et de commencer à faire cela. 647 00:29:47,010 --> 00:29:52,570 Je vais aller de l'avant et de créer un nouveau fichier appelé search.html. 648 00:29:52,570 --> 00:29:54,890 Et nous avons prefabed versions en ligne. 649 00:29:54,890 --> 00:29:56,027 Oups. 650 00:29:56,027 --> 00:29:57,610 Ne pas coller dans votre fenêtre de terminal. 651 00:29:57,610 --> 00:29:58,744 Versions préfabriquées ligne. 652 00:29:58,744 --> 00:30:00,160 Et je vais commencer comme suit. 653 00:30:00,160 --> 00:30:04,490 Alors, voici le début de un fichier appelé search.html. 654 00:30:04,490 --> 00:30:07,510 Je vais l'enregistrer dans le répertoire source d'aujourd'hui. 655 00:30:07,510 --> 00:30:09,079 Je vais appeler cette recherche. 656 00:30:09,079 --> 00:30:10,370 En fait, nous allons faire mieux. 657 00:30:10,370 --> 00:30:13,600 CS50 Recherche et effectivement il marque. 658 00:30:13,600 --> 00:30:17,500 Et maintenant, je vais dire quelque chose comme H1 CS50 Recherche. 659 00:30:17,500 --> 00:30:20,930 Et puis ici, H2 bientôt. 660 00:30:20,930 --> 00:30:23,230 Et juste pour rappel, H1 et H2 dire ce que respectivement? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Ouais, donc gros et gras, et pas aussi grand, mais toujours audacieux. 663 00:30:30,320 --> 00:30:37,375 Donc, si je sauve ce et je vais ici, Voyons le fichier search.html. 664 00:30:37,375 --> 00:30:42,560 Tout droit, et celui-ci droite- est [inaudible]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Etre prêt. 667 00:30:49,110 --> 00:30:49,945 David est confus. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Oh, il est juste là. 670 00:30:54,080 --> 00:30:54,860 David est un idiot. 671 00:30:54,860 --> 00:30:55,420 D'ACCORD. 672 00:30:55,420 --> 00:30:56,660 Tiens voilà. 673 00:30:56,660 --> 00:30:58,350 Donc la recherche CS50 bientôt. 674 00:30:58,350 --> 00:31:00,370 Alors maintenant, nous allons synthétiser ce que nous avons fait la semaine dernière. 675 00:31:00,370 --> 00:31:03,400 >> Où nous avons parlé du inférieurs mécanique de niveau de HTTP. 676 00:31:03,400 --> 00:31:05,780 Et ces nouvelles idées du HTML, qui est juste 677 00:31:05,780 --> 00:31:08,890 ce langage de balisage où vous dire à un navigateur exactement quoi faire 678 00:31:08,890 --> 00:31:10,740 et mettre en place notre propre moteur de recherche. 679 00:31:10,740 --> 00:31:12,520 Donc, au lieu de simplement disant à venir, je suis 680 00:31:12,520 --> 00:31:14,810 va introduire quelque chose appelé un tag de formulaire. 681 00:31:14,810 --> 00:31:19,610 Et sous cette forme, je vais avoir quelque chose comme un champ de saisie. 682 00:31:19,610 --> 00:31:22,450 >> Et le nom de cette entrée terrain, je vais l'appeler Q. 683 00:31:22,450 --> 00:31:26,240 Et le type de ce champ de saisie Je vais dire est juste "texte". 684 00:31:26,240 --> 00:31:29,130 Et un champ de texte, comme nous allons voir, est tout simplement une zone de texte. 685 00:31:29,130 --> 00:31:32,830 Et il ne détecte pas ici pour avoir rien à l'intérieur de celui-ci à ce point. 686 00:31:32,830 --> 00:31:35,320 Et donc je vais simplement à fermer la balise avec ce 687 00:31:35,320 --> 00:31:38,099 barre oblique à droite dans la balise même. 688 00:31:38,099 --> 00:31:39,890 Et puis je vais avoir une autre entrée. 689 00:31:39,890 --> 00:31:43,480 Type d'entrée est égale à soumettre. 690 00:31:43,480 --> 00:31:45,320 Et puis je vais fermer celui-là aussi. 691 00:31:45,320 --> 00:31:46,840 >> Et maintenant, je vais revenir ici. 692 00:31:46,840 --> 00:31:49,520 Et déjà nous voyons, quoique assez laid, je l'ai 693 00:31:49,520 --> 00:31:52,460 obtenu les débuts de ma propre page de recherche ici. 694 00:31:52,460 --> 00:31:55,150 En fait, je vais essayer de nettoyer ce jusqu'à un peu. 695 00:31:55,150 --> 00:31:57,330 Il se trouve que sur le entrée ici, je peux avoir 696 00:31:57,330 --> 00:31:59,910 un autre attribut appelé espace réservé. 697 00:31:59,910 --> 00:32:05,165 Et je pourrais voir quelque chose comme mots-clés, ou plus spécifiquement, pour interroger q. 698 00:32:05,165 --> 00:32:07,820 >> Et remarquez, maintenant, je dois ce genre de texte gris 699 00:32:07,820 --> 00:32:10,440 qui disparaît en tant que Dès que je commence à taper, 700 00:32:10,440 --> 00:32:12,930 mais il est probablement quelque chose vous avez vu dans d'autres pages Web. 701 00:32:12,930 --> 00:32:14,650 Je ne l'aime pas vraiment sur le bouton Envoyer. 702 00:32:14,650 --> 00:32:18,320 Donc, je vais en fait pour donner le Bouton Soumettre une valeur de recherche. 703 00:32:18,320 --> 00:32:21,680 Et maintenant, si je recharge, vous remarquerez que mon bouton est nommé recherche. 704 00:32:21,680 --> 00:32:24,140 Vous savez, je ne fais pas vraiment comme le logo ici. 705 00:32:24,140 --> 00:32:27,140 Donc générateur Google police. 706 00:32:27,140 --> 00:32:28,820 >> Je veux pour pimenter cette place plus loin. 707 00:32:28,820 --> 00:32:30,660 Donc la recherche CS50. 708 00:32:30,660 --> 00:32:31,870 Permettez-moi de créer mon propre logo. 709 00:32:31,870 --> 00:32:33,080 Qui semble intéressante. 710 00:32:33,080 --> 00:32:36,945 Alors maintenant, permettez-moi de sauver ce as-- viens. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 Où est ce que ça va? 713 00:32:43,120 --> 00:32:43,620 Là. 714 00:32:43,620 --> 00:32:44,160 D'ACCORD. 715 00:32:44,160 --> 00:32:44,980 Manqué. 716 00:32:44,980 --> 00:32:47,740 Enregistrer sous. 717 00:32:47,740 --> 00:32:49,470 Navigateurs stupide. 718 00:32:49,470 --> 00:32:51,700 Stand by, nous allons résoudre ce problème une fois pour toutes. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Nous y voilà. 721 00:32:58,590 --> 00:32:59,090 Bien. 722 00:32:59,090 --> 00:32:59,600 Pardon. 723 00:32:59,600 --> 00:33:00,750 Jour de congé. 724 00:33:00,750 --> 00:33:02,310 Maintenant cela est funky. 725 00:33:02,310 --> 00:33:03,160 Quitter le mode plein écran. 726 00:33:03,160 --> 00:33:04,150 Bien. 727 00:33:04,150 --> 00:33:06,870 >> Maintenant, comme une normale personne, l'image enregistrer sous. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Maintenant, je vais aller dans CS50IDE et Je vais simplement prendre le logo, 730 00:33:13,194 --> 00:33:15,360 Je vais le faire glisser dans ma source de sept répertoire, 731 00:33:15,360 --> 00:33:17,002 fichier existe déjà, je suis OK avec ça. 732 00:33:17,002 --> 00:33:19,210 Donc, je vais l'écraser parce que je l'avais déjà. 733 00:33:19,210 --> 00:33:20,630 Et maintenant, comment puis-je me débarrasser de cela? 734 00:33:20,630 --> 00:33:24,670 >> Allons de l'avant ici et de faire source de l'image est égale logo.gif. 735 00:33:24,670 --> 00:33:25,490 Fermer cette. 736 00:33:25,490 --> 00:33:26,050 Sauvegarder. 737 00:33:26,050 --> 00:33:30,560 Et maintenant, si je reviens à ma recherche la page, maintenant il regarde assez bon. 738 00:33:30,560 --> 00:33:33,610 Tout droit, de sorte qu'il n'a pas tout à fait quelque chose d'utile fait. 739 00:33:33,610 --> 00:33:37,000 En fait, permettez-moi Essayez pour un chat et voir ce qui arrive. 740 00:33:37,000 --> 00:33:38,890 Chats. 741 00:33:38,890 --> 00:33:39,420 Bon sang. 742 00:33:39,420 --> 00:33:41,400 Il ne fonctionne pas seulement, apparemment. 743 00:33:41,400 --> 00:33:43,760 Alors, quelle est la pièce maîtresse ce qui manque ici? 744 00:33:43,760 --> 00:33:49,100 >> Droit, même si vous ne connaissez pas HTML, Je l'ai commencé le marquage de la forme de téléphone 745 00:33:49,100 --> 00:33:54,130 et je l'ai dit il comment obtenir des intrants, me donner une zone de texte et un bouton de soumission, 746 00:33:54,130 --> 00:33:55,730 ce morceau est apparemment manquant? 747 00:33:55,730 --> 00:33:58,975 Supposons que nous voulons réellement obtenir cette chose fonctionne correctement. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Que devons-nous faire? 750 00:34:05,360 --> 00:34:08,860 Nous avons besoin de mettre en œuvre l'extrémité arrière base de données ou le moteur de recherche lui-même, 751 00:34:08,860 --> 00:34:11,210 et que cela va prendre un beaucoup de temps, franchement. 752 00:34:11,210 --> 00:34:13,380 >> Alors rappelez-vous ce que nous avons fait la dernière fois. 753 00:34:13,380 --> 00:34:18,230 Donc, si vous recherchez quelque chose sur Google et vous avez au préalable éteint, 754 00:34:18,230 --> 00:34:20,355 rappel, la recherche instantanée. 755 00:34:20,355 --> 00:34:22,230 Alors permettez-moi éteindre ça de sorte que cette réalité 756 00:34:22,230 --> 00:34:26,650 se comporte comme un navigateur ancienne école, si je cherche maintenant à quelque chose comme les chats, 757 00:34:26,650 --> 00:34:28,190 rappeler ce que l'URL ressemble. 758 00:34:28,190 --> 00:34:29,449 Il est assez énigmatique. 759 00:34:29,449 --> 00:34:33,000 Mais embarqué là-dedans, rappel, est la recherche de barre oblique. 760 00:34:33,000 --> 00:34:35,100 Question mark q est égal à chats. 761 00:34:35,100 --> 00:34:37,760 >> Et cela semble me donner tout un tas de résultats de recherche. 762 00:34:37,760 --> 00:34:39,134 Donc, vous savez ce que je vais faire? 763 00:34:39,134 --> 00:34:41,650 Je vais emprunter Google pendant juste une minute. 764 00:34:41,650 --> 00:34:43,670 Je vais aller sur ici et je vais dire 765 00:34:43,670 --> 00:34:47,850 ce qui constitue une action ou destination, pour ainsi dire, 766 00:34:47,850 --> 00:34:49,330 devrait être littéralement Google. 767 00:34:49,330 --> 00:34:52,590 Et la méthode que je voulais à l'utilisation va être obtenir. 768 00:34:52,590 --> 00:34:53,560 >> Alors, quelle est l'action? 769 00:34:53,560 --> 00:34:55,760 Action est bizarrement nommé, mais cela signifie simplement 770 00:34:55,760 --> 00:34:58,120 qui va gérer l'action de ce formulaire? 771 00:34:58,120 --> 00:35:00,820 Lorsque je clique sur Rechercher, où le résultat devrait aller? 772 00:35:00,820 --> 00:35:05,300 Et si je vais maintenant revenir à ma forme ici et recharger ma page Web 773 00:35:05,300 --> 00:35:09,000 et maintenant chercher quelque chose comme chien, remarque maintenant 774 00:35:09,000 --> 00:35:10,850 Je l'ai re mis en place Google. 775 00:35:10,850 --> 00:35:11,350 Droit? 776 00:35:11,350 --> 00:35:14,141 >> Si je veux chercher quelque chose d'autre, il travaille non seulement pour les chiens, 777 00:35:14,141 --> 00:35:16,400 il fonctionne également pour les chats. 778 00:35:16,400 --> 00:35:21,930 Il travaille également pour CS50. 779 00:35:21,930 --> 00:35:24,310 Et OK, ceci est juste sous écrasante, est-ce pas? 780 00:35:24,310 --> 00:35:25,920 Très bien, mais il fonctionne réellement. 781 00:35:25,920 --> 00:35:27,360 Donc ce qui est réellement été en cours? 782 00:35:27,360 --> 00:35:31,340 Donc, je l'ai appris mon navigateur, en utilisant HTML, de prendre d'entrée de l'utilisateur 783 00:35:31,340 --> 00:35:35,810 et effectivement envoyer cette entrée à un serveur distant via HTTP. 784 00:35:35,810 --> 00:35:39,120 >> Et parce que mon navigateur comprend HTTP, il fait 785 00:35:39,120 --> 00:35:43,500 construire l'URL afin que ce Je me retrouve plus dans mon navigateur, 786 00:35:43,500 --> 00:35:45,660 remarquer ce qui se passe quand je cherchais chien. 787 00:35:45,660 --> 00:35:49,270 Si je clique sur Recherche, vous remarquerez que l'URL change que je comptais 788 00:35:49,270 --> 00:35:52,770 à google.com/search~~V requête équivaut chien. 789 00:35:52,770 --> 00:35:56,020 Et cela est parce que la forme sait, parce que la méthode est d'obtenir, 790 00:35:56,020 --> 00:35:59,560 pour simplement juxtaposer à cette URL il. 791 00:35:59,560 --> 00:36:01,730 >> Maintenant, ces pages web sont toujours laid. 792 00:36:01,730 --> 00:36:04,890 Donc, nous allons introduire un autre morceau de syntaxe si nous le pouvons aujourd'hui. 793 00:36:04,890 --> 00:36:07,640 Et ceci est quelque chose de connu que des feuilles de style en cascade. 794 00:36:07,640 --> 00:36:10,720 Alors permettez-moi de jeter un oeil à cet exemple ici et voir 795 00:36:10,720 --> 00:36:12,380 si nous pouvons en déduire ce qui se passe. 796 00:36:12,380 --> 00:36:14,520 Ceci est CSS0.html. 797 00:36:14,520 --> 00:36:16,532 Et ceci est où les choses obtenir un peu laid. 798 00:36:16,532 --> 00:36:18,490 Parce que malheureusement, dans le monde du web, 799 00:36:18,490 --> 00:36:20,920 HTML seul ne peut pas tout faire. 800 00:36:20,920 --> 00:36:22,920 Et donc si vous voulez styliser votre page web, 801 00:36:22,920 --> 00:36:28,370 vous avez réellement besoin de se concentrer sur la l'esthétique d'une manière différente. 802 00:36:28,370 --> 00:36:33,090 Donc ici, je dois le corps de mon web page à l'intérieur de ce qui est une grande div. 803 00:36:33,090 --> 00:36:34,700 Et un div signifie simplement division. 804 00:36:34,700 --> 00:36:38,060 Donc, il est comme un paragraphe, mais il n'a pas la même sémantique 805 00:36:38,060 --> 00:36:39,180 d'un paragraphe de texte. 806 00:36:39,180 --> 00:36:40,940 >> Cela signifie simplement le navigateur, voici 807 00:36:40,940 --> 00:36:45,210 une grande zone rectangulaire de mon site web la page, je tiens à le manipuler spécialement. 808 00:36:45,210 --> 00:36:47,420 Maintenant, la ligne 21 est où cette div commence. 809 00:36:47,420 --> 00:36:48,770 Et il suffit de prendre une supposition. 810 00:36:48,770 --> 00:36:53,080 Quel est l'effet de la ligne 21 sur la reste du contenu de la page? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Centrant. 813 00:36:56,311 --> 00:36:56,810 C'est tout. 814 00:36:56,810 --> 00:36:58,830 Donc, on n'a pas vu un moyen de effectivement centrage du texte. 815 00:36:58,830 --> 00:37:00,996 >> En fait, mon moteur de recherche, contrairement à la réelle Google, 816 00:37:00,996 --> 00:37:03,040 tout a été justifiée sur la gauche. 817 00:37:03,040 --> 00:37:07,430 Et donc maintenant à la ligne 21, je veux dire, hey navigateur, créer une division de la page. 818 00:37:07,430 --> 00:37:09,450 Donnez-moi juste un gros rectangle invisible. 819 00:37:09,450 --> 00:37:11,490 Voilà comment je veux réfléchir à la page Web. 820 00:37:11,490 --> 00:37:13,870 Et puis de styliser comme suit. 821 00:37:13,870 --> 00:37:16,900 A l'intérieur de ces citations, maintenant, est une langue seconde 822 00:37:16,900 --> 00:37:19,969 que nous avons présenté aujourd'hui appelés feuilles de style en cascade. 823 00:37:19,969 --> 00:37:22,010 Heureusement, il est trop pas un langage de programmation, 824 00:37:22,010 --> 00:37:26,470 il est donc très limité dans sa syntaxe, mais aussi très limité dans ses fonctionnalités 825 00:37:26,470 --> 00:37:30,670 alors que HTML est tout au sujet marquant les données d'une page Web 826 00:37:30,670 --> 00:37:32,130 et la structure d'une page Web. 827 00:37:32,130 --> 00:37:35,320 CSS est généralement d'environ la last mile, l'esthétique, 828 00:37:35,320 --> 00:37:40,160 obtenir la taille et la couleur et de la placement tout à fait exact dans une page Web. 829 00:37:40,160 --> 00:37:43,000 En effet, il est formé avec des paires de valeurs clés. 830 00:37:43,000 --> 00:37:46,290 >> Une propriété de ce type, le texte aligner, suivi de deux points, 831 00:37:46,290 --> 00:37:49,720 suivie par la valeur de cette la propriété, qui dans ce cas est le centre. 832 00:37:49,720 --> 00:37:51,910 Et maintenant, vous remarquerez pouvez imbriquer ces choses. 833 00:37:51,910 --> 00:37:56,780 Si je voulais tout dans ce Je l'ai souligné à être centré, 834 00:37:56,780 --> 00:38:00,270 Voilà pourquoi je dois la ligne 21 et la ligne correspondante 31. 835 00:38:00,270 --> 00:38:04,820 Mais supposons maintenant envie de dire John Harvard, bienvenue à ma page d'accueil. 836 00:38:04,820 --> 00:38:06,530 >> Symbole de copyright John Harvard. 837 00:38:06,530 --> 00:38:09,180 Et si je veux que le premier ces lignes d'être assez grand. 838 00:38:09,180 --> 00:38:10,450 36 pixels. 839 00:38:10,450 --> 00:38:11,530 Voilà donc une taille décente. 840 00:38:11,530 --> 00:38:13,240 Et je voulais son poids à être audacieux. 841 00:38:13,240 --> 00:38:15,450 Mais en dessous, Je veux plus petit texte. 842 00:38:15,450 --> 00:38:19,980 Et ci-dessous, je veux texte encore plus petit. 843 00:38:19,980 --> 00:38:20,480 Pardon. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Aujourd'hui se sent comme un jour de congé. 846 00:38:26,940 --> 00:38:29,840 >> Alors maintenant, que fais-je pour exprimer cela? 847 00:38:29,840 --> 00:38:34,580 Ici, sur la ligne 22 est un lecteur intégré div ou div imbriquée, si vous voulez. 848 00:38:34,580 --> 00:38:36,190 Il a aussi sa propre étiquette de style. 849 00:38:36,190 --> 00:38:38,160 Je précise une taille de police de 36. 850 00:38:38,160 --> 00:38:40,460 Je précise un poids de la police de caractères gras. 851 00:38:40,460 --> 00:38:43,360 Ici-bas, je ne spécifient que 24 pixels. 852 00:38:43,360 --> 00:38:45,960 Et enfin, dans la ligne 28, je précise 12. 853 00:38:45,960 --> 00:38:49,070 Ainsi, tout comme un test de cohérence rapide et comme une lecture humaine présente, 854 00:38:49,070 --> 00:38:52,545 quels mots sur l'écran sont passe réellement à être audacieux? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Quelles lignes sont réellement audacieuse? 857 00:38:58,760 --> 00:38:59,570 >> Juste John Harvard. 858 00:38:59,570 --> 00:39:00,070 Droit? 859 00:39:00,070 --> 00:39:05,940 Parce que, tout comme la ligne 22 dit hey navigateur, voici une division de la page. 860 00:39:05,940 --> 00:39:07,920 Faites-en la taille 36 points. 861 00:39:07,920 --> 00:39:09,460 Faire le poids de gras. 862 00:39:09,460 --> 00:39:11,920 Dès que vous atteignez le balise de fin correspondante 863 00:39:11,920 --> 00:39:15,340 ou une étiquette fermée sur la ligne 24, que des moyens, hé navigateur, 864 00:39:15,340 --> 00:39:17,640 Arrêtez de faire tout ce que vous faites. 865 00:39:17,640 --> 00:39:21,020 Et préavis pour être clair, même si ligne 22 a tous ces attributs 866 00:39:21,020 --> 00:39:24,430 comme le style, lorsque vous fermer la balise dans la ligne 24, 867 00:39:24,430 --> 00:39:25,940 vous ne mentionnez le nom de la balise. 868 00:39:25,940 --> 00:39:29,990 >> Vous ne répétez pas le style de texte ou tout ce qui est à l'intérieur de ces citations. 869 00:39:29,990 --> 00:39:32,860 Et si je regarde cela maintenant dans mon navigateur, prenons 870 00:39:32,860 --> 00:39:38,060 Un regard sur le résultat final. Laisse moi partir avance à ce fichier, qui est CSS 0. 871 00:39:38,060 --> 00:39:41,814 Et il est encore assez simple, mais obtenir assez intéressant. 872 00:39:41,814 --> 00:39:43,980 Mais il se trouve qu'il ya d'autres choses que je peux faire ici, 873 00:39:43,980 --> 00:39:46,490 et au risque de faire cela complètement hideux, 874 00:39:46,490 --> 00:39:48,630 remarquer ici que dans mon corps de ma page Web, 875 00:39:48,630 --> 00:39:53,930 Je peux faire quelque chose de drôle comme BG ou la couleur d'arrière-plan. 876 00:39:53,930 --> 00:39:56,670 >> Et rapide, quel est votre couleur préférée? 877 00:39:56,670 --> 00:39:57,720 Green I entendu. 878 00:39:57,720 --> 00:39:58,750 Bien. 879 00:39:58,750 --> 00:40:02,920 Alors maintenant, si je frappe rechargement maintenant, nous avons une page web vert. 880 00:40:02,920 --> 00:40:04,710 Très bien, alors qui est pas mal. 881 00:40:04,710 --> 00:40:08,350 Et maintenant, si je veux faire ce vraiment cool, je peux faire de la couleur de mon texte 882 00:40:08,350 --> 00:40:09,360 même rouge. 883 00:40:09,360 --> 00:40:10,870 Voyons donc à quoi cela ressemble. 884 00:40:10,870 --> 00:40:12,230 Maintenant, il est à la recherche assez bonne. 885 00:40:12,230 --> 00:40:15,460 Et ici, si vous avez vraiment vouloir salir avec quelqu'un 886 00:40:15,460 --> 00:40:17,487 ou si vous voulez être une de ces personnes qui 887 00:40:17,487 --> 00:40:20,570 essaie de vous inciter à visiter un web page, car ils ont dupé Google 888 00:40:20,570 --> 00:40:27,610 dans la pensée, il ya tout un tas de mots clés like-- Voyons voir, recharger. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 Où est-il allé? 891 00:40:30,680 --> 00:40:31,530 Et il nous ce. 892 00:40:31,530 --> 00:40:32,030 Bien. 893 00:40:32,030 --> 00:40:34,905 Donc, je dis cela en passant, nous allons parler de ce genre de choses en quelques semaines 894 00:40:34,905 --> 00:40:36,740 lorsque nous parlons de la sécurité, si vous avez réellement 895 00:40:36,740 --> 00:40:38,852 grappes entières incorporer de mots-clés dans une page Web, 896 00:40:38,852 --> 00:40:41,810 même si elles ne sont pas visibles à un humaine, quelqu'un comme Google, bien sûr, 897 00:40:41,810 --> 00:40:43,250 peut encore effectivement trouver cela. 898 00:40:43,250 --> 00:40:45,820 Très bien, alors qui est assez hideuse assez rapidement. 899 00:40:45,820 --> 00:40:48,420 >> Et en fait, il est pas tout que beaucoup de différence de mon propre site web 900 00:40:48,420 --> 00:40:51,480 la page comme un cycle, qui Je commencé googler autour de trouver 901 00:40:51,480 --> 00:40:53,690 les versions antérieures de mes anciens sites. 902 00:40:53,690 --> 00:40:54,500 Il était assez mauvais. 903 00:40:54,500 --> 00:40:56,650 En fait, je ne trouve l'un juste avant la classe. 904 00:40:56,650 --> 00:40:58,620 Mais il ya pire là-bas. 905 00:40:58,620 --> 00:41:01,534 Ce fut apparemment mon la page d'accueil en 1996. 906 00:41:01,534 --> 00:41:04,200 Apparemment, je pensais qu'il était approprié de demander aux gens leur nom 907 00:41:04,200 --> 00:41:05,991 Avant qu'ils ne puissent voir réellement ma page web. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> Et puis je leur ai montré quelque chose de stupide, probablement. 910 00:41:11,920 --> 00:41:13,450 Je vais creuser jusqu'à plus pour la prochaine fois. 911 00:41:13,450 --> 00:41:16,220 Mais pour l'instant, nous allons envisager un peu de design. 912 00:41:16,220 --> 00:41:17,444 Nous avons parlé de style. 913 00:41:17,444 --> 00:41:19,735 Et cette page à ce jour et plus tout ce que je l'ai écrit 914 00:41:19,735 --> 00:41:21,890 est assez propre stylistiquement. 915 00:41:21,890 --> 00:41:23,320 Mais qu'en est-conception? 916 00:41:23,320 --> 00:41:25,990 Eh bien, il ya beaucoup de redondance dans ce que je fais ici. 917 00:41:25,990 --> 00:41:28,156 >> Je l'ai mentionné le mot couleur dans quelques endroits. 918 00:41:28,156 --> 00:41:31,630 Je l'ai mentionné la taille de police dans un couple de lieux et audacieuse dans quelques endroits. 919 00:41:31,630 --> 00:41:34,870 Et fondamentalement, je suis co mêlant les deux langues. 920 00:41:34,870 --> 00:41:38,100 Je dois HTML avec mes tags et mon attributs et puis tout d'un coup, 921 00:41:38,100 --> 00:41:40,100 entre guillemets, je dois la deuxième langue aujourd'hui 922 00:41:40,100 --> 00:41:43,830 appelé CSS, qui encore une fois, est tout simplement ceux-ci paires de valeurs clés ou ces propriétés 923 00:41:43,830 --> 00:41:45,280 séparées par des virgules. 924 00:41:45,280 --> 00:41:47,700 >> Il se trouve que beaucoup comme en C où nous 925 00:41:47,700 --> 00:41:50,550 peut commencer à factoriser du code dans les fichiers d'en-tête, 926 00:41:50,550 --> 00:41:53,520 de sorte que nous pouvons faire la même chose en HTML. 927 00:41:53,520 --> 00:41:56,030 Et une étape pour que est la suivante. 928 00:41:56,030 --> 00:42:02,230 Notez que cette version, est CSS1.html Structurellement la même page Web exacte. 929 00:42:02,230 --> 00:42:05,250 Donc, je dois tout un tas des divs, mais cette fois, je l'ai 930 00:42:05,250 --> 00:42:07,220 débarrassé de l'emballage div comme vous le verrez. 931 00:42:07,220 --> 00:42:12,390 >> Et je lui ai donné ces trois divs haut, au milieu et en bas, des identifiants uniques. 932 00:42:12,390 --> 00:42:14,760 Cela est agréable, parce que, par en donnant à ces divisions 933 00:42:14,760 --> 00:42:18,715 des pages des identificateurs uniques, Je peux les référencer ailleurs. 934 00:42:18,715 --> 00:42:19,215 Où? 935 00:42:19,215 --> 00:42:21,070 Eh bien, permettez-moi de défiler vers le haut. 936 00:42:21,070 --> 00:42:24,070 Et jusqu'à présent, chaque fois que nous avons examiné à la tête d'une page web, ce qui est 937 00:42:24,070 --> 00:42:28,560 la seule étiquette que nous avons eu dans la tête d'une page Web? 938 00:42:28,560 --> 00:42:29,740 Un peu plus fort. 939 00:42:29,740 --> 00:42:30,799 Juste le titre jusqu'à présent. 940 00:42:30,799 --> 00:42:32,590 Mais il se trouve qu'il ya quelques autres choses 941 00:42:32,590 --> 00:42:35,840 vous pouvez mettre là-dedans, un des lequel elle est appelée une balise de style. 942 00:42:35,840 --> 00:42:37,850 Donc, il ya un moment, nous nous sommes penchés à un attribut de style. 943 00:42:37,850 --> 00:42:39,150 Avère qu'il ya une balise de style. 944 00:42:39,150 --> 00:42:41,200 Il appartient à l'intérieur de la tête d'une page Web. 945 00:42:41,200 --> 00:42:42,840 Et maintenant remarqué ce que je fais. 946 00:42:42,840 --> 00:42:46,540 Je dois l'intérieur de cette balise de style suivantes. 947 00:42:46,540 --> 00:42:51,190 Je littéralement mentionner sur la ligne 20 du Nom d'un tag que je veux pour styliser. 948 00:42:51,190 --> 00:42:53,489 >> Ensuite, je dois ouverte accolade et fermé accolade. 949 00:42:53,489 --> 00:42:56,030 Donc, dans le même esprit à C, mais de plus, ce ne sont pas une fonction, 950 00:42:56,030 --> 00:42:57,796 ceci est juste un détail syntaxique ici. 951 00:42:57,796 --> 00:43:00,170 Et puis bien sûr, je dis le navigateur, hé navigateur, 952 00:43:00,170 --> 00:43:05,210 rendre l'ensemble du corps de la page avoir un alignement du texte de centre. 953 00:43:05,210 --> 00:43:06,930 Et puis, cela veut dire ce qui suit. 954 00:43:06,930 --> 00:43:12,600 Hey navigateur, si vous voyez une page HTML élément ou tag dans la page qui 955 00:43:12,600 --> 00:43:17,040 possède un identifiant unique de haut, de sorte que le symbole dièse ici signifie simplement 956 00:43:17,040 --> 00:43:21,010 idée unique de haut, aller de l'avant et de faire sa taille de police 36 957 00:43:21,010 --> 00:43:22,490 et son poids de gras. 958 00:43:22,490 --> 00:43:26,840 >> Hey navigateur, un élément dont ID est moyenne, faire 24 pixels. 959 00:43:26,840 --> 00:43:31,070 Et hé navigateur, si vous voyez une idée de fond, faire 12 pixels. 960 00:43:31,070 --> 00:43:33,540 L'effet à la fin est exactement le sam. 961 00:43:33,540 --> 00:43:36,500 Si je vais dans CSS 1, le la page a la même apparence. 962 00:43:36,500 --> 00:43:39,810 Mais nous sommes un pas vers un peu mieux la conception. 963 00:43:39,810 --> 00:43:44,850 Permettez-moi maintenant de revenir ici pour CSS2 et vois ce que je l'ai fait. 964 00:43:44,850 --> 00:43:48,030 >> Maintenant, la page est vraiment, vraiment propre. 965 00:43:48,030 --> 00:43:50,730 En fait, je peux adapter tous le contenu sur une page ici. 966 00:43:50,730 --> 00:43:54,270 Mais ce nouveau tag ai-je introduit, de toute évidence? 967 00:43:54,270 --> 00:43:54,770 Lien. 968 00:43:54,770 --> 00:43:57,853 Et il est pas le meilleur nom pour une étiquette, parce qu'il est pas un lien dans le sens 969 00:43:57,853 --> 00:44:00,780 que nous connaissons, mais cela signifie un lien dans un autre fichier. 970 00:44:00,780 --> 00:44:02,890 Ceci est un peu comme forte comprennent en C. 971 00:44:02,890 --> 00:44:06,280 >> Ceci est la manière HTML à-dire bon navigateur, 972 00:44:06,280 --> 00:44:10,240 aller chercher le contenu de le fichier appelé css2.css. 973 00:44:10,240 --> 00:44:12,880 La relation, pour moi, est qu'il est une feuille de style. 974 00:44:12,880 --> 00:44:17,980 Et en effet, voilà ce que l'un des S de feuilles dans des moyens de style en cascade. 975 00:44:17,980 --> 00:44:20,350 Ceci est une feuille de style. 976 00:44:20,350 --> 00:44:23,120 Il est juste le fichier texte contenant tout un tas de propriété. 977 00:44:23,120 --> 00:44:25,940 Il ya tout un tas de styles que vous souhaitez appliquer à une page. 978 00:44:25,940 --> 00:44:28,860 >> Et donc cela est apparemment se référant à un second fichier. 979 00:44:28,860 --> 00:44:32,970 Et si je l'ouvre que, CSS2.css, remarque que tout ce que je l'ai fait 980 00:44:32,970 --> 00:44:35,900 est de copier et coller tous de ce dans ce fichier. 981 00:44:35,900 --> 00:44:38,220 Et maintenant, même si vous avez jamais codé ce genre de choses auparavant, 982 00:44:38,220 --> 00:44:40,700 il suffit de considérer avec le proverbiale chapeau de génie 983 00:44:40,700 --> 00:44:44,220 , pourquoi est-ce un meilleure conception sans doute? 984 00:44:44,220 --> 00:44:48,910 Affacturage sur ces propriétés CSS, les mettre dans leur propre fichier. 985 00:44:48,910 --> 00:44:51,330 Même si nous avons résolu ce Il ya problème comme cinq minutes 986 00:44:51,330 --> 00:44:52,600 dans la toute première version. 987 00:44:52,600 --> 00:44:55,730 >> Nous avons pas amélioré la Page stylistiquement, 988 00:44:55,730 --> 00:44:57,520 cela est juste mieux conception dans un certain sens. 989 00:44:57,520 --> 00:44:58,990 Pourquoi pensez-vous? 990 00:44:58,990 --> 00:45:01,510 Ouais. 991 00:45:01,510 --> 00:45:02,260 Plus souple comment? 992 00:45:02,260 --> 00:45:05,040 993 00:45:05,040 --> 00:45:05,540 Ouais. 994 00:45:05,540 --> 00:45:07,373 Donc, si vous voulez aller en arrière et changer les choses, 995 00:45:07,373 --> 00:45:09,540 Maintenant, vous avez un seul endroit où vous pouvez changer les choses. 996 00:45:09,540 --> 00:45:11,622 Et en fait, pour quelque chose comme problème réglé sept, 997 00:45:11,622 --> 00:45:13,690 où nous mettons en œuvre une Stock site commercial, 998 00:45:13,690 --> 00:45:15,523 que ça va avoir un tas ensemble de pages. 999 00:45:15,523 --> 00:45:17,620 Et ce serait vraiment ennuyeux si vous décidez, hm, 1000 00:45:17,620 --> 00:45:21,630 Je ne l'aime pas vraiment 24 pixels, je veux que ce soit 28 pixels ou légèrement plus grand. 1001 00:45:21,630 --> 00:45:23,550 Et puis avoir à faire mondiale rechercher et remplacer 1002 00:45:23,550 --> 00:45:27,560 ou d'ouvrir tous les fichiers de votre site Web simplement pour réellement changer une valeur. 1003 00:45:27,560 --> 00:45:31,290 En tenant compte de ces styles dans un endroit central, 1004 00:45:31,290 --> 00:45:34,720 Vous pouvez maintenant ouvrir un fichier texte dans CS50IDE dans un programme, 1005 00:45:34,720 --> 00:45:36,479 modifier, l'enregistrer, et fait. 1006 00:45:36,479 --> 00:45:38,270 Vous avez propagées ceux changements partout. 1007 00:45:38,270 --> 00:45:42,450 Et ce serait la même chose dans un fichier dot h ainsi. 1008 00:45:42,450 --> 00:45:46,697 De sorte que toute questions ainsi jusqu'ici sur cette syntaxe? 1009 00:45:46,697 --> 00:45:48,530 Très bien, alors nous avons tout fait il semble 1010 00:45:48,530 --> 00:45:51,170 sauf effectivement mettre en œuvre des hyperliens. 1011 00:45:51,170 --> 00:45:52,740 Et nous allons donc aller de l'avant et le faire. 1012 00:45:52,740 --> 00:45:54,830 Laissez-moi aller de l'avant et créer un nouveau fichier ici. 1013 00:45:54,830 --> 00:45:59,970 Je vais l'appeler lien.html, mettre dans le code d'aujourd'hui. 1014 00:45:59,970 --> 00:46:03,000 >> Et je vais faire ouverte support de type doc html. 1015 00:46:03,000 --> 00:46:05,970 En aparté, cette chose à la top, ce doc déclaration de type, 1016 00:46:05,970 --> 00:46:08,420 il est le seul qui est bizarre avec le point d'exclamation. 1017 00:46:08,420 --> 00:46:12,100 Vous avez juste à faire là-bas et il signifie que nous utilisons la version de HTML 5. 1018 00:46:12,100 --> 00:46:14,460 Les anciennes versions de langue avait beaucoup plus longtemps 1019 00:46:14,460 --> 00:46:16,400 chaînes que vous aviez besoin d'y mettre. 1020 00:46:16,400 --> 00:46:18,620 Donc, voici un exemple appelé lien. 1021 00:46:18,620 --> 00:46:20,950 >> Je besoin d'un corps de ma page web ici. 1022 00:46:20,950 --> 00:46:29,770 Et ici, equals href disons HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 et mon site préféré, nous dirons. 1024 00:46:35,420 --> 00:46:38,550 Très bien, alors une très Page anodin, convivial. 1025 00:46:38,550 --> 00:46:42,950 Si je vais maintenant dans mon répertoire Liste des ici et ouvrir lien.html, 1026 00:46:42,950 --> 00:46:44,780 nous avons hyper-texte. 1027 00:46:44,780 --> 00:46:47,410 >> Et en effet, ce est là H dans le HTTP vient. 1028 00:46:47,410 --> 00:46:51,580 Protocole de transfert hypertexte est sur le transfert de texte 1029 00:46:51,580 --> 00:46:53,840 qui a des liens hypertextes vers d'autres ressources. 1030 00:46:53,840 --> 00:46:58,210 Et en effet, voici le familier, si rétro, lien que si vous cliquez dessus, 1031 00:46:58,210 --> 00:47:02,607 seront effectivement me conduire à Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Maintenant, oh, qui va sortir bientôt. 1033 00:47:03,940 --> 00:47:08,970 Très bien, alors maintenant, ce sont quelques-uns des implications de cette situation? 1034 00:47:08,970 --> 00:47:11,610 >> Et franchement, le monde commence pour obtenir un peu plus familier 1035 00:47:11,610 --> 00:47:15,090 et aussi un peu effrayant mais aussi un peu plus 1036 00:47:15,090 --> 00:47:17,840 auto défendable fois que vous commencez à comprendre ces choses. 1037 00:47:17,840 --> 00:47:21,610 Parce que les chances sont, certains d'entre vous, si vous allez grâce à votre dossier spam de Gmail ou même 1038 00:47:21,610 --> 00:47:23,990 votre boîte de réception, vous avez probablement obtenu une sorte de e-mail 1039 00:47:23,990 --> 00:47:26,980 que cela vous demandant de changer votre mot de passe peut-être ou peut-être vérifier 1040 00:47:26,980 --> 00:47:28,910 vos identifiants PayPal ou quoi. 1041 00:47:28,910 --> 00:47:34,510 >> Et en fait, vous avez peut-être reçu quelque chose qui dit comme cliquer ici 1042 00:47:34,510 --> 00:47:42,260 pour réinitialiser votre mot de passe PayPal. 1043 00:47:42,260 --> 00:47:44,130 Et maintenant, remarquez, si ce ne sont pas Disney.com 1044 00:47:44,130 --> 00:47:51,600 mais comme badplace.com et recharger, noter que le texte ici 1045 00:47:51,600 --> 00:47:53,710 pouvait dire quoi que ce soit. 1046 00:47:53,710 --> 00:47:55,260 Et en fait, ce sont juste des mots. 1047 00:47:55,260 --> 00:48:04,610 Pourquoi ne puis-je réellement être super malveillants et dire http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Cliquez ici réinitialiser votre PayPal mot de passe et maintenant recharger. 1049 00:48:14,090 --> 00:48:16,220 Ce semble assez légitime, non? 1050 00:48:16,220 --> 00:48:20,470 Je veux dire, je ne serais pas cliquer sur un e-mail qui dit exactement cela. 1051 00:48:20,470 --> 00:48:22,450 Mais remarquez la dichotomie ici. 1052 00:48:22,450 --> 00:48:26,880 Il dit www.paypal.com, et en fait, attendez une minute, 1053 00:48:26,880 --> 00:48:29,210 nous savons que vous voulez la s pour la sécurité. 1054 00:48:29,210 --> 00:48:35,450 Alors maintenant, aller à www.paypal.com HTTPS, mais si vous ne l'avez jamais fait ça avant, 1055 00:48:35,450 --> 00:48:38,182 ne prendre l'habitude de planant au-dessus des petits liens ici. 1056 00:48:38,182 --> 00:48:39,890 Et il est difficile de voir sur l'écran il, 1057 00:48:39,890 --> 00:48:41,340 et il est pas si facile ici. 1058 00:48:41,340 --> 00:48:43,615 Mais ici, en chemin vers le bas le minuscule petit coin 1059 00:48:43,615 --> 00:48:45,740 le navigateur ne fait vous que nous allons dire 1060 00:48:45,740 --> 00:48:48,850 à badplace.com lieu de Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Maintenant, où allons-nous avec ça? 1062 00:48:51,620 --> 00:48:54,859 Tous les exemples que nous avons fait aujourd'hui, nous avons codé en dur et tapé manuellement. 1063 00:48:54,859 --> 00:48:56,900 Le web est incroyablement sans intérêt lorsque vous dur 1064 00:48:56,900 --> 00:48:59,844 coder vos pages web afin que le contenu est statique et ne change jamais. 1065 00:48:59,844 --> 00:49:01,760 Bien entendu, l'ensemble de notre sites préférés aujourd'hui, 1066 00:49:01,760 --> 00:49:04,470 que ce soit Gmail ou Twitter Facebook ou un nombre quelconque d'autres 1067 00:49:04,470 --> 00:49:05,290 sont dynamiques. 1068 00:49:05,290 --> 00:49:07,340 Ils changent en réponse à une entrée utilisateur 1069 00:49:07,340 --> 00:49:08,840 tout comme les résultats de recherche Google. 1070 00:49:08,840 --> 00:49:12,415 >> Et le mercredi, ce que nous faisons est nous laissons HTML et CSS mise en place 1071 00:49:12,415 --> 00:49:14,290 derrière nous et nous prenons pour acquis que nous maintenant 1072 00:49:14,290 --> 00:49:16,640 le savoir et nous introduisons un nouveau langage de programmation 1073 00:49:16,640 --> 00:49:19,050 appelé PHP, qui aiment C, va nous donner 1074 00:49:19,050 --> 00:49:22,450 le pouvoir de créer effectivement des programmes générer une sortie qui eux-mêmes. 1075 00:49:22,450 --> 00:49:25,900 Dans ce cas, nous allons utiliser PHP à générer dynamiquement web 1076 00:49:25,900 --> 00:49:27,340 pages utilisant cette nouvelle langue. 1077 00:49:27,340 --> 00:49:28,989 Donc plus à ce mercredi. 1078 00:49:28,989 --> 00:49:29,530 À plus tard. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [Jouer de la musique] 1081 00:49:37,380 --> 00:52:38,864