[Lecture de musique]
ALLISON BUCHHOLTZ-UA: Très bien, tout le monde.
Bienvenue à la section.
Donc, notre ordre du jour pour aujourd'hui va sur beaucoup plus web dev choses.
Je ne sais pas combien de vous avez vu vos psets
étant donné qu'il a été relâché plus tôt ce matin.
Je voudrais que le nombre de de gens ont lu les spécifications,
mais voyant que vous avez eu tout de, comme, sept heures pour regarder ce
et il est un lundi et vous avez probablement eu classe,
Je vais supposer que plupart d'entre vous ne l'ont pas.
Si vous avez, bravo supplémentaires.
>> Vous êtes essentiellement aider mettre en place un web simple
serveur en C, qui est un nouveau jeu de processeurs de la marque, si vous les gars arrivent à être les cobayes.
Ça va être un plaisir, la semaine sauvage, mais je pense que ce sera beaucoup de plaisir
et ce sera une très bonne expérience en fait.
Donc, pour vous préparer à que, dans la section aujourd'hui,
nous allons aller chmod, TCP / IP, et puis un peu de HTML et CSS.
>> A la fin, nous allons en fait le code une simple page web ensemble
pour vous aider les gars genre de faire plus familiarisé avec cela.
Et puis si vous ne l'avez pas ramassé vos questionnaires, ils sont à l'avant,
mais je suis sûr que tout le monde ici a leur questionnaire.
Et aussi sur cette note, solutions ne sont pas encore en place,
mais dès que nous aimons finish--, la dernières quelques personnes qui prennent leur quizzes--
ils seront en place.
Si vous avez des questions pendant ce temps,
hésitez pas à me contacter personnellement.
Je vais répondre à votre personne questions, comme je le fais toujours.
>> Donc, sur cette note, chmod.
Donc, fondamentalement, tout ce que vous besoin de savoir à propos de chmod
est qu'il est utilisé pour changer les permissions de fichiers, non?
Donc, il est seulement certains systèmes appellent une changer les permissions, comme il est dit ici.
Et si jamais vous voulez voir les autorisations que le fichier a,
au lieu de simplement faire ls, vous pourriez faire ls -l.
L signifie longue.
>> Alors vous allez faire de longues listes de tout, et il
vous donnera beaucoup plus détaillée d'informations sur chacun de vos fichiers.
Et vous verrez quelque chose-- je suis va sauter pour une second--
mais vous verrez quelque chose de similaire à cette ligne haut il pour chaque fichier.
Et nous allons passer en revue ce que cela signifie.
>> Donc, fondamentalement, à changer les permissions des fichiers,
vous voulez juste utiliser la commande chmod.
Vous pouvez penser que tout autre UNIX appeler comme ls ou cd ou autres joyeusetés.
Il est juste un peu d'un autre appel comme.
>> Donc, nous faisons chmod et puis nous allons trois chiffres généralement.
Il ya deux façons de le faire il, dont nous allons passer en revue.
Mais généralement, vous aurez trois chiffres allant de 0 à 7 chaque fois.
>> Donc, une chose est qu'il ya trois types de droits
que nous pouvons donner à chaque fichier.
Et il est lisible, ce qui est représenté par R, qui fera sens
dans un peu; w, qui est écriture; et exécutable, qui est x.
Je sais que le e un exécutable, peut-être pas le plus de sens, mais nous
représenter avec x.
>> Et puis ce qui se passe est chacun de ces ont également la représentation des nombres.
Nous avons donc 1, 2 et 4.
Et dans le fond ce qui se passe est chacun de ces trois nombres
ici correspond à une ensemble différent d'utilisateurs
qui se rapportent à ces autorisations.
>> Ainsi, vous pouvez penser de cette première nombre correspondant à l'utilisateur actuel
ou le propriétaire du fichier, la seconde nombre correspond au groupe,
et la dernière référence dans le monde, OK?
Donc ce qui arrive est de se rappeler ceux numbers-- r est 4, w est 2,
x est 1, non?
This-- si vous les résumer, qui vous donne ce premier numéro
que nous pourrions entrée dans notre chmod.
>> Donc dans ce cas, ce serait ce nombre est?
Ce serait 4 plus 2 plus 1, qui est un 7, à droite?
Et dans ce cas, ces ne pas avoir quoi que ce soit,
si ce droit serait ici traduire à chmod 700, OK?
Et ce que cela fait est qu'il accorde tous de ces autorisations à votre utilisateur.
>> Cela signifie donc notre utilisateur peuvent faire ce qu'ils veulent.
Ils peuvent lire ce fichier.
Ils peuvent exécuter ce fichier.
Ils peuvent écrire dans ce fichier.
Mais le groupe et dans le monde, ne autorisations que ce soit, OK?
>> Donc, une autre façon d'écrire, nous pouvons chmod de trois chiffres, dont chacune
tout ce qui correspond à la somme ou que groupe spécifique est, sous-ensemble spécifique.
Ou nous pouvons réellement faire autre chose.
Attendez.
Nous pouvons faire quelque chose avec ces ici.
>> Combien d'entre vous ont vu un exemple où il était comme à chmod a plus x?
Avez-vous vu que dans la leçon, je pense?
Donc A représente pour tous.
Cela signifie donner à tous les utilisateurs, qui je oublié de mettre ici.
>> Mais un plus x, si nous remarquer ici, si nous faisons
à chmod-- ce groupe nous sommes parler ainsi que les autorisations
nous voulons leur donner.
Donc, cela peut être un avantage ou un inconvénient.
Plus ajoute permission.
Moins enlève permission.
Assez intuitif, je pense.
>> Ainsi, un plus x signifie chmod.
Donc changer les autorisations de toutes les personnes Si cela est une des autorisations d'ajout A-.
Et x-- cela signifie que l'autorisation nous nous accordons tous.
Lire, écrire ou exécuter?
>> PUBLIC: Exécuter.
>> ALLISON BUCHHOLTZ-UA: Exécuter.
Donc, nous donnons tous les utilisateurs l'autorisation d'exécuter ce fichier, OK?
Alors que faire si nous voulions faire que la forme numérique?
Alors rappelez-vous avec numérique, nous voulons trois numéros.
>> PUBLIC: 4.
ALLISON BUCHHOLTZ-UA: Quel était ce?
PUBLIC: 4.
ALLISON BUCHHOLTZ-UA: Non 4.
PUBLIC: 0, 0, 4.
ALLISON BUCHHOLTZ-UA: Eh bien, nous voulons donner à tous les utilisateurs, non?
Nous allons donc avoir un certain nombre dans chaque fente.
Ça va être la même nombre dans chaque logement
parce que nous voulons simplement donner chacun autorisations exécutables.
Donc exécutable est 1, mais sur la bonne voie.
>> Donc, si nous ne chmod 111 qui serait l'équivalent de chmod a plus x.
Cela fait-il sens à tout le monde?
Nous allons passer par quelques exemples.
>> Ainsi, la grande emporter ici est un est pas ici,
mais un moyen juste donner à tous les utilisateurs.
u est si vous voulez juste à donner ou à emporter
une autorisation spécifique de l'utilisateur ou le propriétaire.
g est pour le groupe, de sorte que chiffre du milieu.
Et puis d'autres que vous pouvez penser comme le monde, ce dernier chiffre.
>> Donc, avec cela, nous allons passer à un exemple, parce que je me sens comme exemples toujours
faire ces choses plus faciles à comprendre.
Donc, nous sommes allés à travers rwx-- this-- pourrait également être représenter 700.
Voilà l'exemple que nous avons examiné au plus de l'image.
Donc chmod 444 sur certains fichiers donnerait les autorisations?
Vous étiez très proche.
PUBLIC: lisible à tous.
ALLISON BUCHHOLTZ-UA: lisible.
Donc lisible pour tout le monde, non?
Et puis ce qui est une autre façon de le faire?
Si nous voulons faire avec chmod soit de w de r ou, plus et des moins,
ce serait cet appel ressembler?
Il serait chmod quoi?
>> PUBLIC: un plus r.
>> ALLISON BUCHHOLTZ-UA: un r + du 5.
OK, si cela est le même que celui, seulement deux traductions différentes
de la même chose.
Donc, avec cela, nous avons ces.
Donc, je veux que vous les gars pour essayer d'écrire ce genre de dans leur sens inverse.
>> Donc, avec chmod 555, ce serait-il?
Serait-ce un plus ou U plus ou quoi?
Pour plus x u, donnez-moi les trois chiffres.
Et dites-moi au sujet de ce autorisations nous sommes en train de l'octroi et à qui?
>> Donc, je vais vous donner deux gars minutes pour travailler.
Sentez-vous libre de parler les uns avec les autres.
Pour ceux d'entre vous qui sont venus dans un peu tard, il ya des bonbons et des chemises.
Nous avons trois chemises à gauche, et nous avons Kit Kats et Starbursts.
Donc hésitez pas à venir grab certains dans ce petit intermède.
>> En outre, le dernier est délicate.
Il est deux chmods pour le dernier.
En fait, permettez-moi de fermer la porte tandis que vous les gars travaillent sur cela.
Bonbons est toujours nécessaire le lundi après-midi.
>> OK, donc chmod 555.
Quel est un autre moyen que nous pourrions écrire?
Toutes les idées?
Oui.
>> PUBLIC: un rx plus.
>> ALLISON BUCHHOLTZ-UA: R Plus rx.
Voulez-vous expliquer pourquoi il avait être rx?
>> PUBLIC: Parce que vous avez 5, de sorte que ce 4 plus 1,
de sorte que a lu plus de exécutable, et il est pour tous.
ALLISON BUCHHOLTZ-UA: Droit.
Il suffit donc de rappeler, ici 5 on sait que la somme de 4 et 1,
parce que chaque numéro de notre trio est la somme des autorisations pour ce sous-ensemble,
droit?
Soit l'utilisateur, la groupe, ou dans le monde.
Donc dans ce cas, nous savons que 5 doit être formé par 4 et 1.
>> Et 4 et correspondent à une lisible et exécutable.
Nous sommes le donner à tout le monde, afin que nous puissions faire un chmod rx plus.
Et évidemment, nous sommes allés à travers les questions là-bas,
maintenant ce fichier est exécutable et lisibles par tous.
>> Alors que dire de la seconde?
Quel pourrait être le nombre de que l'on est?
Toutes les idées?
Aller de l'avant.
>> PUBLIC: 100 [inaudible].
>> ALLISON BUCHHOLTZ-UA: 100.
Exactement.
Alors voulez-vous expliquer pourquoi 100?
PUBLIC: Parce qu'il est pour le utilisateur, il est donc en première position.
Et puis x exécutable est 1.
ALLISON BUCHHOLTZ-UA: Exactement.
Donc, nous accordons exécutable des autorisations à l'utilisateur juste.
Donc dans ce cas, il serait de 100.
Et je dois toutes les réponses sur la diapositive suivante en cas
vous écrivez beaucoup de choses.
>> OK, donc ce prochain est réellement fait avec deux chmods, vous pourriez le faire.
Donc, quelqu'un at-il une idée de comment vous pourriez
obtenir chmod 640 réécrite dans l'autre sens?
Vous pouvez modifier l'utilisateur d'abord et ensuite vous pouvez changer le groupe est mon soupçon.
>> Donc, si nous étions juste en train de changer la utilisateur, qui est cette première ici,
ce pourrait être notre appel?
Ainsi, l'utilisateur est u, non?
Donc chmod u plus de quoi?
Mmhmm?
>> PUBLIC: rw.
ALLISON BUCHHOLTZ-UA: rw.
Droit, pour lire et écrire, parce lecture est 4, p est égal à 2, ceux somme ainsi que six.
Nous obtenons donc chmod u plus RW, et nous obtenons notre premier 6 il.
>> Alors pour obtenir le 4, nous voulons maintenant à modifier nos réglages de groupe.
Nous allons donc faire chmod g plus ce?
Qu'est-ce qu'un 4?
>> PUBLIC: r.
ALLISON BUCHHOLTZ-UA: r.
Précisément.
Nous sommes donc en donnant au propriétaire lecture et écriture
et nous donnons la lecture de groupe autorisations, que nous avons tous ici.
Mmhmm?
>> Public: Si vous pouvez écrire quelque chose, que cela implique que vous pouvez l'exécuter?
>> ALLISON BUCHHOLTZ-UA: Vous peut écrire quelque chose--
Je ne crois pas qu'il implique que vous pouvez exécuter.
Laisser refroidir.
Voilà donc tout ce que nous venons de traverser.
Donc, sur ce côté-ci, il est cas juste un peu de communes
que vous voulez garder dans l'esprit pour votre problème réglé.
Ce sont généralement les autorisations que nous aimons vous utilisez.
>> Donc, pour 711, qui donne nous, bien sûr, l'utilisateur
toutes les autorisations, qui tend à faire sens.
Et puis il est exécutable par le groupe dans le monde, ce qui est logique
si vous avez un répertoire, vous veulent être en mesure de traverser en elle.
Les gens doivent avoir accès.
>> Pour tout fichier non PHP, vous allez à utiliser 644, qui ferait quoi?
Qu'est-ce que cela implique, ou ce que autorisations ne donnent que?
Ainsi, le propriétaire peut quoi?
PUBLIC: Lire et écrire.
ALLISON BUCHHOLTZ-UA: Lire et écrire.
Et puis groupe et les autres peut seulement lire, non?
Et puis chmod 600 pour toute Les fichiers PHP que vous utilisez,
votre propriétaire, encore une fois, peut lire et écrire pour elle
mais tout le monde est juste un peu bloqué.
>> Donc, ce sera effectivement être plus utile quand
vous arrivez à votre problème mettre la semaine prochaine où
vous êtes en train de construire un site web.
Donc, si jamais vous rencontrez des problèmes étranges
où il est pas chargement correctement, peut-être vous
besoin d'ajouter un exécutable autorisation, ou peut-être vous avez besoin d'une lecture
ou écrire permission.
Les petites choses qui ont tendance à déclencher personnes , mais qui est un peu comme le go-to
lorsque vous démarrez le jeu de processeurs de la semaine prochaine.
Et je voudrais vous donner plus conseils sur le jeu de processeurs de cette semaine,
mais je dois encore regarder depuis il a été libéré ce matin.
Mais vous écrivez-moi, je vais avoir l'air à elle au moment où je réponds demain.
>> Alors maintenant, tout le monde est bon avec chmod?
Toutes les questions qui persistent?
Assez simple.
Juste sorte de garder la trace de ce que lire, écrire, et exécuter des numéros sont
est probablement la partie la plus difficile.
>> Donc, avec TCP / IP, toutes ces protocoles, un peu comme avec vos structures de données
la semaine dernière, il est beaucoup plus important de genre de se
une intuition de niveau supérieur d'entre eux.
Cela ne veut pas CS143 où nous allons vous demander de mettre en place un réseau,
de sorte que vous serez très bien si vous ne comprenez pas
le Nitty Gritty de tous les protocoles.
Ce qui est important à comprendre est un peu comme ce qu'ils représentent
et pourquoi ils sont importants.
>> Ainsi, le protocole TCP / IP, bien entendu, il est la Transmission Control Protocol
ou Internet Protocol, qui est fondamentalement juste un ensemble de lois essentiellement
ou normes qui racontent données comment il doit être manipulé,
comment il devrait être mis en paquets, transmettre et recevoir.
Alors qu'il est fondamentalement, tout comme il dit ici, augmente les chances
que les données obtient où vous voulez en venir.
>> Je suis sûr que si vous les gars sont allés à conférence ou regardé en ligne,
il has-- Je ne sais pas si il l'a fait cette année,
mais je sais que l'an dernier, il avait un démonstration où il avait une photo de Rob
et il scinder en quatre et le mettre dans des enveloppes
et a essayé de le faire passer Sanders.
Et vous pouvez genre de penser de cette façon.
Il est juste un ensemble de règles qui dire la façon d'obtenir des données quelque part
et vous permet de savoir si vous manquez données,
de la même manière que si vous êtes prenant plusieurs pages de notes
et vous devez les étiqueter avec la page 104, à la page 204, et vous retournez à étudier plus tard
et vous manquez quelque chose-- vous ne pouvez pas trouver la page que vous savez 304--
quelque chose qui ne va pas, si vous peut regarder à travers vos notes
nouveau ou demandez à quelqu'un de vous renvoyer la conférence note de ce jour.
De la même façon que des données sur l'Internet.
Si je demande quelque chose de certain serveur
et il a besoin d'envoyer dans plusieurs paquets,
va probablement nombre d'une certaine façon, laisser
me sais combien je l'aurais reçu, et dites-moi, oh, ceci est l'un des 10
ou ce est l'un des 10000.
De cette façon, quand je vais à remonter tous les morceaux ensemble,
Je sais que si quelque chose est manquant et je peux demander ça.
Est-ce logique?
Tout un ensemble de règles.
A sa base, un ensemble de règles, OK?
>> Donc, nous avons également parlé d'un peu de ports.
Ceci est vraiment juste une norme vous permet de savoir quel type de données
qui est transmis dans ces paquets.
Si nous allons avec notre exemple enveloppe, nous ne faisons pas
sait qu'il est une image de Rob là à moins que nous l'écrivons
à l'extérieur de notre enveloppe.
Donc ports sont fondamentalement la même chose.
Il est juste une façon de comprendre ce que le type de données est en cours de transmission.
>> Donc, nous avons tous de la la plupart des plus communs ici.
Donc, ce sont aussi 21-- genre de comme de bonnes choses à savoir.
Il est le genre de question quiz facile.
Soyez comme, qu'est-ce que le port 80 faire?
Ou, qu'est-ce que le port 443 faire?
Donc, de bonnes choses à savoir.
>> Nous avons donc ici, 21 est fichier protocole de transfert, si juste
les règles qui régissent le transfert de fichiers.
25, quelque chose que nous avons tous utiliser beaucoup trop, est email.
53 est le nom de domaine système, qui est essentiellement
juste une sorte de recherche pour le adresse IP d'un nom de domaine.
>> Donc, je suis sûr qu'il était mentionné dans la leçon, si vous
aller à quelque chose comme google.com, il dispose d'une adresse IP
qui est associé avec elle.
Il est pas vraiment google.com.
Et si 53 est le port qui prend réellement
soins de genre de la traduire en cette adresse IP pour vous.
Et puis 80 et 443 sont très fréquents.
Soit vous avez votre page Web ou vous avez votre page Web sécurisée,
que beaucoup de pages Web sont le transfert de plus maintenant.
>> Voilà donc sorte de haut niveau aperçu de protocole de transfert.
Je ne vois pas beaucoup plus en profondeur.
Il est le genre de trucs cool si vous êtes intéressé.
Il ya beaucoup de ressources.
Wikipedia est en fait une assez bonne page.
Donc, je le regardais Il ya juste un peu de temps,
alors je vous recommande fortement regarder si vous êtes intéressé
ou prendre 143 en deux ans en raison Je pense qu'il est tous les deux ans.
>> Donc, sur la fin de cela, nous sommes parler de pages web et HTTP,
qui est en fait notre prochain sujet de aujourd'hui avant d'aller en HTML et CSS
et vous pouvez réellement coder une page web.
Ce sera amusant.
Nous avons des photos de lapins et il sera grand.
>> Donc, HTTP, comme vous pouvez le voir ici, est l'un des beaux acronymes
pour cette semaine, ce qui est Hypertext Transfer Protocol.
Encore une fois, il est juste un autre ensemble de règles qui
régit hypertexte transférer, dans ce cas.
Donc meilleure façon d'apprendre à ce sujet est juste un peu
à décomposer en ces mots individuels
parce qu'il ya beaucoup de mots sur l'écran il.
>> Nous allons donc commencer par hypertexte.
Donc, "hyper", vous pouvez penser "Au-dessus", comme super-type chose.
Donc, il est vraiment juste texte tiré de la niveau suivant, il est comme super texte,
comme le texte suivant.
Donc, il est fondamentalement juste texte qui nous donne
plus d'informations que texte normal fait, OK?
>> Donc dans ce cas ici, cela est hypertexte.
Cela nous dit que nous avons un lien que nous allons,
qui est cs50.net, qui est maintenant cs50.harvard.edu.
Ces lames sont un peu vieux.
Et il va afficher comme cela, comme un lien hypertexte,
et puis un site vraiment cool.
>> Donc son texte, qui est un peu peu de choses vraiment cool là-dedans.
Ainsi, vous pouvez lier les choses et vous pouvez insérer des images et vous pouvez définir le style des choses.
Et la chose la plus familière que vous les gars ont probablement avec hypertexte
est HyperText Markup Language, HTML, ce qui bien sûr est tout le web
que nous voyons autour de nous, accordé avec un peu de style CSS jeté.
>> Mais si quelqu'un était vraiment grande avec MySpace,
Je suis sûr que vous avez tous utilisé HTML tout le temps pour créer
ces profils parfaits, non?
Je me sens comme cela pourrait être un référence obsolète maintenant, mais peu importe.
Juste un little-- vous les gars ne sont pas que beaucoup plus jeune.
Certains d'entre vous sont plus âgés que moi.
MySpace était encore un chose quand je étais jeune.
Je ne suis pas si vieux.
>> Quoi qu'il en soit, HTML juste une forme de l'hypertexte.
Donc hypertexte est juste texte avec des fonctions supplémentaires.
Donc, le protocole de transfert est probablement la chose la plus incertain à expliquer.
De toute évidence, transfer-- il suffit de transférer des données.
Donc, soit entre le client, comme votre frère web et un serveur.
Donc, fondamentalement juste le façon dont l'Internet fonctionne.
>> Ainsi, la demande de exact comment ces travaux, nous sommes
effectivement nous pencher sur un exemple de demande et de réponse.
Mais la façon dont nous demandons des informations d'un serveur
et comment le serveur répond à nous est ce ce protocole de transfert régit.
Ainsi, la demande et la réponse ont de suivre ces ensemble de règles spécifiques.
Il est normalisé de telle sorte que, peu importe où vous utilisez l'Internet,
il fonctionne toujours de la même, OK?
>> Encore une fois, le protocole, un ensemble de règles.
Il est juste une normale interaction de la même manière
que le professeur Malan parle si quelqu'un étend la main,
vous savez qu'il est courtoisie à atteindre le vôtre sortir et leur serrer la main.
Voilà un protocole, non?
>> Donc, je donne quelques formulaires standardisés de demande, qui est que je veux vous serrer la main,
et vous donner quelques standardisé réponse, qui est soit non merci
ou vous pouvez essayer et me serrer main ou peut-être vous allez essayer
et poing bosse moi.
Et nous ne disposons pas d'un protocole pour cela.
Il se décompose.
Mais si tout le monde suit la même protocole, bien sûr,
il va beaucoup plus transparente.
Les gens apprennent à se connaître les uns les autres.
Tout le monde est heureux.
>> Ainsi, dans le monde du web, tout le monde suit le même rules--
légèrement mieux que les normes sociales.
Mais avec cela, nous verrons à une demande d'exemple ici.
Donc, il ya cette petite clé ici sur le fond
qui vous indique les différentes couleurs, ce qu'ils sont censés dire.
>> Donc blanc est comme votre méthode demande et protocole version--
si la demande de la méthode, la version.
Et puis ce sont quelques-uns nom de champ et la valeur
de ce domaine, que nous aller dans très, très peu de temps.
Donc ceci est un exemple de demande.
Ceci est comme moi étendant sur, vouloir me présenter.
>> Ceci est ce que le client ou ce que votre navigateur Web
serait envoi de votre serveur.
Donc, ceci est une requête GET, il est donc demander quelque chose à partir du serveur.
Et il est, bien sûr, HTTP et il est la version 1.1.
>> Donc, le reste de cet ici est ce que nous appelons la tête, et son information supplémentaire
ce qui nous donne une meilleure idée de ce que nous sommes en train de demander,
ou de l'information que nous voulons donner le serveur qui pourraient être pertinentes.
Donc User-Agent donne un peu plus Description on-- par exemple, ici,
boucle / 7.24.0 qui se passe réellement à dire le serveur que nous utilisons Google
Chrome comme notre navigateur.
Donc si jamais vous entendez sur les gens qui parlent
de faire une application sensible pour plusieurs navigateurs,
ceci est quelque chose qu'ils utiliserait parce que si vous
Je ne sais pas quel navigateur la demande provient,
vous ne pouvez pas personnaliser les données à ce sujet.
Donc dans ce cas, l'utilisateur est juste de donner ce genre
des informations d'identification sur ce navigateur
votre utilisateur utilise actuellement, OK?
>> Alors nous avons également l'hôte, qui est où nous sommes en train de vouloir aller.
Dans ce cas, nous voulons aller à apple.com, acheter des nouveaux iPads fraîches
ou quelque chose, peut-être mignon lumières dans nos salles de dortoir.
Et la valeur de nom à la fin est juste une charge, juste une chose générale
pour vous les gars à voir.
Il ne fait pas réellement correspondre à rien ici.
>> Ainsi, vous pouvez avoir autant ou aussi peu que vous voulez dans chaque cas.
La plupart du temps, ces éléments sont optionnels.
Tout dépend de ce que vous avez besoin à partir du navigateur,
de votre utilisateur pour donner correctement la demande.
Ou cela dépend de ce que votre utilisateur veut réellement donner sur le serveur.
Ainsi, vous pouvez avoir beaucoup, beaucoup de ces noms de champs d'en-tête
ou vous pourriez juste avoir un couple.
Comme pour beaucoup de choses Je l'ai déjà dit dans cette section,
cela dépend vraiment du contexte de la façon dont vous utilisez ce.
>> Alors, est-ce que fait sens pour tout le monde?
Ceci est juste un exemple de une demande, en-têtes, ainsi de suite.
OK, donc avec cela, nous avons une réponse.
>> Encore une fois, nous avons notre code de statut, le protocole la version, puis le nom et le champ domaine
valoriser comme toujours.
Donc, notre version du protocole et notre code d'état est de 200.
OK, ce qui signifie que, oui, tout allait bien.
Voici ce que vous voulez.
>> Le type de serveur, le contenu bien-- il nous dit, OK, vous êtes
allez obtenir un texte HTML.
Voici la longueur de celui-ci et est ici ce que vous devez faire avec la connexion.
OK, à nouveau, en fonction sur les données que vous
demander, en fonction de ce que le serveur veut revenir à vous,
vous pouvez avoir plus de ces champs noms, vous pourriez avoir moins.
Totalement dépendant du contexte.
>> Et dans la mesure où ce statut code ici, bien sûr,
200 est la seule à ne pas vous pourriez avoir, non?
Nous avons beaucoup de codes d'état.
Quelqu'un se souvient l'un des d'autres que nous avons mentionné dans la leçon?
Beaucoup d'entre eux commencent par 4.
>> PUBLIC: 404.
>> ALLISON BUCHHOLTZ-UA: 404, qui est?
>> PUBLIC: File not found?
>> ALLISON BUCHHOLTZ-UA: Fichier non trouvé.
Exactement.
Alors que sur 403?
Public: Interdit.
ALLISON BUCHHOLTZ-UA: Interdite.
Alors, que pensez-vous ce qui signifie avec chmods?
>> PUBLIC: Cela signifie que vous ne pas avoir la permission de le lire.
>> ALLISON BUCHHOLTZ-UA: Exactement.
D'une certaine manière, vous ne devez pas l'autorisation d'accès, droit?
Donc, 404, 403.
Il ya un vraiment drôle un que nous avons toujours
présenter chaque année que Je l'ai mis ici,
comme 413, qui est que je suis une théière.
Vous pouvez google cela.
Il est drôle comme, qui est le code 413 et il est je suis une théière.
Ce que je ne sais pas pourquoi vous le feriez jamais besoin que sur l'Internet,
mais je digresse.
PUBLIC: Peut-être que vous êtes un pot de thé.
ALLISON BUCHHOLTZ-UA: Peut-être le serveur est un pot de thé.
Qui sait?
Très bien, alors nous sommes sur le point de la transition vers réel codage.
Je me sens comme vous les gars allez sortir d'ici assez rapidement.
>> Public: Pourquoi faut-il dire "serveur: deux fois?
>> ALLISON BUCHHOLTZ-UA: Hm?
Serveur deux fois?
Voilà une bonne question.
Je ne suis pas sûr.
Je vais me renseigner et Je vais tout vous envoyer un courriel.
>> OK, d'autres questions en dehors de ça?
Bonne?
Laisser refroidir.
>> HTML et CSS, et maintenant nous accéder à toutes les parties amusantes.
Donc, comme je l'ai mentionné avant, HTML est probablement l'une des choses
vous les gars êtes le plus familier.
Nous avons donc HyperText Markup Language.
>> La meilleure façon d'apprendre this-- Je ne sais pas avoir toutes les diapositives ou tout préparés
pour vous les gars avec HTML.
Il est vraiment à propos de l'apprentissage de la syntaxe.
Et si vous étiez dans le MySpace jour, vous auriez cette baisse.
>> Alors, vraiment, la chose la plus importante est juste pour pratiquer et expérimenter.
L'une des grandes ressources Je voudrais hautement recommandé d'utiliser est W3Schools.
Il suffit donc de W, 3, puis les écoles.
Ils ont beaucoup de ressources sur HTML, CSS sur,
et ils ont en fait un scission sorte d'écran de chose
où ils vont vous donner des exemples de code.
Vous pouvez jouer avec lui, modifier, et appuyez sur Mise à jour,
et ça va vous montrer ce qu'il fait réellement à la page Web.
>> Donc, je recommande fortement d'utiliser cela.
Il est assez cool.
Vous ne recevrez pas les défauts seg ici quand les choses vont mal.
Si vous parvenez à obtenir un défaut de seg avec HTML,
laissez-moi le sais parce que je suis va être intrigué réel.
Mais il est vraiment cool parce que vous pouvez changer les choses,
vous pouvez voir les mises à jour en direct.
Et je pense que vous aurez une bien compréhension plus intuitive de HTML
si vous avez réellement juste passer un peu de temps à expérimenter avec lui.
Voilà pourquoi je l'ai dit, pratique et expérience.
>> Google, à partir d'ici sur, sera probablement
l'une de vos meilleures ressources et amis.
Ou Bing-- je travaille chez Microsoft, alors peut-être devrais-je dire Bing.
Mais à peu près tout va juste être la syntaxe,
Ainsi, comprendre ce que les balises sont, understanding-- au moins avec CSS--
comment changer certains attributs.
Ça va être super utile.
>> Ainsi, même si nous ne le faisons pas avoir des choses préparées,
nous ne devons genre de certaines des meilleures pratiques que nous voulons vous les gars d'essayer et de se conformer
by-- ou plutôt, vous devriez respecter jusqu'à nouvel ordre.
Donc fermer toutes vos balises.
Espérons que tout le monde has-- vous savez quoi, si cela n'a pas de sens en ce moment,
Je vous promets que ce sera logique lorsque nous le codage de la page.
Mais fermer toutes vos balises.
Donc si jamais vous avez un peu de en-tête qui est support,
H1, support, assurez-vous que chaque fois que vous en avez fini avec cela,
vous fermez cet en-tête.
Validez votre page avec W3 Validator.
Si vous ne fermez pas vos balises, vous pouvez obtenir un comportement inattendu.
Il dira que votre page est invalide si vous l'exécutez à travers ce validateur.
Alors, quand en doubt-- et surtout sur cette semaine et de la semaine prochaine
pset-- de la même manière que nous demandons vous employez le chèque et le style 50 50,
vous pourriez penser de cette comme l'un de vos chèques, OK?
>> Donc, si elle ne passe pas le W3 Validator.
Voilà quelque chose que nous allons vous accoster sur.
Ou je vous le dis droit maintenant, je vais vous accoster sur.
Donc, assurez-vous qu'il valide.
Il est pas difficile.
Vous collez simplement dans votre code et il va dire soit bon travail
ou vous êtes absent quelque chose de la même manière
ce style 50 vous dit où vous gâcher.
>> Et puis une dernière chose est que vous voulez séparer
votre balisage, qui est tout ce que HTML ou votre texte et votre style.
Donc, nous allons faire un exemple de ce droit après cela.
Donc, HTML et CSS doivent être séparées.
Et nous allons parler de MVC, qui est Model View Controller,
prochaine semaine.
Vous devriez probablement apprendre à ce sujet dans la leçon
demain si vous aviez déjà appris aujourd'hui.
>> Et il est juste une sorte de un paradigme que nous avons tendance
à utiliser lors de la création web pages pour séparer les choses.
Vous pouvez penser de la même façon que nous avons tendance à fonctions séparées dans C
où nous hachage de trouver des choses.
Il est juste un moyen de vous rendre la vie plus facile.
Il sépare les attributs ou code vous utilisez encore et encore,
mais de cette manière, il genre de garde il est agréable et soigné.
Et si vous voulez changer une chose, vous changez une fois
et il a changé partout ailleurs.
Il est donc plus pour votre facilité et flexibilité.
>> Donc, avec CSS, il est très similaire à HTML, mais au lieu de balises
que je l'ai mentionné tout à l'heure, nous utiliser ce qu'on appelle des sélecteurs.
Et ils fondamentalement juste genre de associer un certain tag
en HTML avec des attributs différents.
Et quand je dis attributs, je veux dire choses comme la couleur de la police, style de police,
la couleur de l'arrière-plan, la couleur de votre texte.
Ces sortes de choses.
Comme si elle est centrée, si elle est sur la droite,
si elle est inverted-- tous de ces choses cool.
Les choses stylistiques que vous faites pour votre texte,
ce que je veux dire avec des attributs.
>> Et puis deux choses principales à savoir est que selectors-- deux de la factors-- principal
sont ID, qui est unique.
Vous ne pouvez utiliser que pour une chose.
Sinon, il va crier à vous.
Et quand nous le définissons dans un fichier CSS, il sera
être ID hachage et puis quels sont les attributs que nous voulons.
Je vous promets que nous allons passer par un exemple.
Il va faire beaucoup plus de sens.
>> Classe peut se référer à plusieurs blocs.
Ainsi, vous pouvez avoir votre premier et troisième alinéas
avoir le même genre d'attributs si vous les associez à la même classe.
Et quand nous les définissons en CSS, nous faisons une classe de points,
avec classe étant ce que vous voulez qu'il soit nommé.
>> Donc, je sais que cela est bon maintenant très abstrait.
Voilà pourquoi nous allons code.
Je sais que vous l'amour que, et vous êtes tous
va me aider parce que ceci est votre page web.
Ceci est la page web de notre section, les gars.
Donc, y at-il des questions avant que je éteindre le PowerPoint, ou quoi que ce soit
vous voulez me pour revenir en arrière avant de commencer à coder?
>> PUBLIC: Quand vous dites les balises de match, voulez-vous dire sélecteurs ou mots-clés?
ALLISON BUCHHOLTZ-UA: Vous pouvez les considérer comme la même chose.
Il est juste des mots différents.
Je veux dire, comme sélecteurs.
Mais sélecteurs carte également les tags.
Ainsi, vous pouvez les considérer comme des effectivement la même chose.
Je vous promets que ça va faire plus de sens quand on code.
Quelque chose de la PowerPoint ou des questions
en ce moment avant que nous créer la page de notre section?
Tout le monde est prêt?
Laisser refroidir.
>> Je dois donc on a commencé.
Permettez-moi augmenter la police pour vous les gars.
OK, donc en ce moment, nous avons juste un squelette de la page web ici.
>> Nous avons peu de HTML.
Nous avons une en-tête, qui nous voir ici comme exemple de page web.
Certaines titre, certains police.
Ce sont des balises, OK?
Alors, quand je veux fermer vos balises, nous voyons ici cette tête de support est votre ouverture
tag, et ce support / Tête est fermer, OK?
>> Ainsi, vous pouvez penser à cela comme vos accolades dans vos si les conditions
ou votre pour les boucles.
Si vous avez une au début, vous voulez un à la fin.
Il faudra encore travailler la plupart du temps Si vous ne disposez pas d'une balise fermée,
mais la meilleure pratique est de fermer les balises.
>> Donc dans ce cas, nous allons changer cela.
Nous allons avoir une section sept.
"Section page Web."
Donc je vais juste changer cela.
>> Et si nous dépassons ici et nous reload-- dois enregistrer et reload--
nous remarquons que ici il a changé, non?
Laisser refroidir.
Donc, cela change le titre.
Ceci est tout ce qui est sur votre onglet.
>> Donc, ce genre est de regarder un peu ennuyeux.
Je ne sais pas pour les gars.
Je pense que nous voulons quelque chose d'autre ici.
>> Donc, ce que nous pouvons faire est de le tête est juste là.
Faisons une sorte de corps.
Donc, nous avons un corps ici.
Je fais toujours ouverte et fermer les balises pour commencer,
de la même manière que je fais accolades.
Ah.
Attendez, quoi?
>> PUBLIC: [inaudible].
ALLISON BUCHHOLTZ-UA: Ah.
Les gars, vous me GOT.
Bon travail.
Étoile d'or.
>> OK, nous avons donc certains corps ici.
Et maintenant, nous allons commencer à ajouter du texte.
Donc, vous avez un autre couple options pour l'ajout de texte.
Nous avons des choses comme les en-têtes.
Nous avons juste le texte normal.
Donc, nous allons commencer avec juste un en-tête.
En fait, si vous voulez les gars à tirer vers le haut HTML W3 école,
vous pouvez genre de regarder autour de et si il ya quelque chose
en particulier que vous voulez essayer avec cette page web, nous pouvons le faire.
Donc dans ce cas, nous allons juste faire un peu de h1.
Donc h1 est comme la plus haute tête.
Il vous donnera quelque chose qui est très grand et gras.
>> Et dans ce cas, que voulons-nous pour le premier texte sur notre page Web?
Rien.
Les gars, vous allez créer ce fichier.
Je vais juste à taper.
PUBLIC: Bienvenue.
>> ALLISON BUCHHOLTZ-UA: Bienvenue.
OK, donc si nous les sauvegardons et le chargement, nous avons un grand grand accueil.
Donc, pour que vous puissiez voir la différences, nous allons faire quelque chose sur H6.
Que voulons-nous ici?
Droit?
>> OK, alors juste pour que vous le pouvez voir la différence.
Ouais, Sublime.
Donc, si vous remarquez, h1, très, très grand.
h6, comme gras, mais beaucoup plus petit, et vous avez tout le reste.
Donc, vous pourriez avoir h2, h3, h4.
Et ce ne sont que des en-têtes, Donc, si vous essayez
à créer une page Web qui a différentes sections,
peut-être que vous voulez utiliser têtes quelque part.
>> Laisser refroidir.
Donc, nous allons ajouter un peu plus choses dans notre corps.
Je vois que ce serait un peu cool si nous avions une image.
Je me sens comme tout le monde pourrait peut-être utiliser une image mignonne de lapin droite environ maintenant,
de sorte que nous allons trouver un lapin image première.
>> Je ne sais pas si vous avez des préférences sur lequel on nous veulent.
Avez-vous des préférences?
Celui-là?
Down.
D'accord.
Que l'on est.
Les bons choix.
>> OK, donc nous allons voir notre image.
Regardez ça.
Regardez cette chose adorable.
Comment pourriez-vous être triste un lundi avec cela?
>> Donc, nous allons juste à copier le URL de l'image.
Et ce que nous voulons faire est, disons simplement dire que nous avons un p pour paragraphe.
Nous allons dire: «Regardez regarder le lapin mignon.
d'awwww. "
I love my lapins.
Je dois un lapin à la maison.
Je manque mon lapin.
Donc, ce que nous allons do-- Je ne sais pas si vous voulez les gars
à google this-- mais avec HTML, comment pourriez-vous inclure une image?
Littéralement, si vous google "Inclure l'image HTML"
Pourquoi ne pas vous les gars me disent ce cette balise doit être?
>> PUBLIC: img source--
>> ALLISON BUCHHOLTZ-UA: img source--
PUBLIC: --equals--
ALLISON BUCHHOLTZ-UA: --equals--
PUBLIC: --quote-- ouais.
ALLISON BUCHHOLTZ-UA: Parfait.
Belle.
Voir, MySpace génération, non?
Public: Neopets.
ALLISON BUCHHOLTZ-UA: Neopets.
Oh, OK.
Sensationnel.
Il a été fou.
D'accord.
>> Donc, assurez-je obtenir ce droit.
Laisser refroidir.
Donc, ce devrait être ici.
Et puis si le chargement, nous avons notre lapin de la page est-ce pas adorable?
>> Cela est si mignon.
Vous avez choisi un grand, grand photo.
Je creuse il.
>> OK, nous avons donc cette adorable lapin maintenant.
Nous avons pu ajouter une l'image, juste comme ça.
Donc, fondamentalement, si il ya une image vous voulez ajouter à votre page Web,
vous pouvez l'ajouter comme ça.
Une autre chose serait si vous avez l'image stockée
dans le même dossier que ce fichier, il vous suffit de
écrire ce que le nom de cette image est au lieu d'avoir un lien Web.
>> Il serait encore entre guillemets.
Il serait juste comme si nous avions appelé this--
si cette image avait été sauvé dans le dossier de ce fichier HTML
que je suis d'édition et il a été appelé bunny.jpg.
Nous pourrions également faire et il se montrerait.
Cependant, je ne ai pas enregistré dans cette le fichier et je veux garder le lapin,
donc nous allons garder le lien.
>> Public: Quel est rabbit.org?
>> ALLISON BUCHHOLTZ-UA: rabbit.org.
Il est un les circonstances: regardez, vous pouvez adopter.
Adoption.
bunny.jpg.
Je veux adopter ce lapin.
Oh, mon dieu, il est tellement mignon.
>> OK, alors nous avons ajouté des en-têtes.
Nous avons ajouté une photo.
De toute évidence, nous avons ajouté du texte ici, non?
Si nous voulions ajouter d'autres textes, nous allions comme ça.
Voilà donc un autre paragraphe.
>> Et nous disons «ceci est un autre paragraphe."
Aussi, je suis un correcteur orthographique, horrible, afin que je puisse orthographier choses.
Cordialement.
>> Donc, nous avons un autre paragraphe ici, non?
Alors peut-être que vous voulez faire quelque chose un peu plus intéressant que juste
avoir tout votre texte, comme aligné à droite.
Peut-être que vous voulez centrer votre texte, OK?
>> Donc, si quelqu'un veut utiliser ceux ordinateurs à portée de main en face de vous
et me dire comment vous êtes va centrer ce texte,
>> PUBLIC: p align.
>> ALLISON BUCHHOLTZ-UA: Donc, p align égale «centre».
Il a tuer, les gars.
Y'all doivent intensifier.
Et nous avons "Ceci est centrée."
Et maintenant nous avons quelque chose centré.
>> De la même manière, si vous veut il aligné à gauche,
vous pourriez faire égaux align gauche, align égal droit.
Totalement à vous.
Si je l'ai fait ici, alors ce devraient: maintenant il est aligné à droite.
>> PUBLIC: Allison?
Par source de l'image, pourquoi pas il près de la source de img?
ALLISON BUCHHOLTZ-UA: Désolé.
Celui-ci devrait être Maintenant il que vous êtes bon.
Maintenant, nous sommes bons.
PUBLIC: Ne pas vous avez fermer là, ou pas?
ALLISON BUCHHOLTZ-UA: Eh bien, si img la source, celui-ci est just-- avec l'image,
il est juste considéré comme un élément, alors que si vous remarquez pour le reste d'entre eux,
nous avons une étiquette alors que l'information ce qui a trait à, puis une balise de fermeture.
Mais à l'image, tout est juste une sorte d'auto-contenue.
Laisser refroidir.
Alors vous les gars savent comment créer un tête, vous savez comment saisir du texte,
vous savez comment mettre une image maintenant, vous pouvez aligner les choses.
>> Une autre chose que vous voudrez peut-être en mesure de faire
est de créer une liste dans CS- nous sommes genre d'aller dans le pset de la semaine prochaine.
Les choses que nous enseigner généralement cette semaine
va vraiment bien avec l'ensemble de processeurs de la semaine prochaine, donc nous sommes
sorte de mélange, qui se chevauchent choses ici.
Mais ça va être utile pour la semaine prochaine.
>> Donc, si nous voulions créer quelque liste, comment pourrions-nous le faire?
Vous ne pouvez pas répondre à ce temps.
Quelqu'un d'autre doit le faire.
Il est facile, les gars, la promesse.
Google "liste non ordonnée HTML."
Ca ce était quoi?
>> PUBLIC: [inaudible].
ALLISON BUCHHOLTZ-UA: Droit.
Ainsi voulons-nous ordonnée ou non?
Faisons un non ordonnée.
Nous avons donc une certaine ul, qui signifie une liste non triée.
Et qu'est-ce que nous avons pour chaque élément?
Est-il besoin de son propre tag?
Pouvons-nous commencer juste écrire des choses?
>> PUBLIC: li.
>> ALLISON BUCHHOLTZ-UA: li.
Alors, quelle est notre liste va être?
Que voulons-nous ici?
Nous faisons juste des noms.
Il suffit de faire Jacob.
>> aliments de lapin: l'auditoire.
>> ALLISON BUCHHOLTZ-UA: aliments de lapin.
OK I like this.
aliments de lapin.
>> OK, donc nous avons carottes.
I like this thème de lapin.
Je creuse beaucoup.
PUBLIC: En fait, je pensais que Jacob serait légitime.
ALLISON BUCHHOLTZ-UA: Jacob?
Jacob est la nourriture de lapin.
Si vous avez vu Jacob photo de heures de bureau,
vous avez peut-être pensé qu'il a attaqué par un lapin tueur.
>> PUBLIC: Je dois maintenant un lapin.
Je dois un lapin tueur maintenant.
>> ALLISON BUCHHOLTZ-UA: Vous plaisantez je espère?
>> PUBLIC: Je vais amener section suivante.
Je l'ai.
>> ALLISON BUCHHOLTZ-UA: Ceci est ridicule.
Quoi qu'il en soit.
>> PUBLIC: [Inaudible]
>> PUBLIC: Ouais, mon surveillant a un lapin ainsi.
>> ALLISON BUCHHOLTZ-UA: Je veux un lapin.
OK, celui qui apporte un vrai lapin à la section suivante, des bons points au total.
PUBLIC: [Inaudible]
PUBLIC: Oh, il est pas réel.
Il est un lapin en peluche.
>> ALLISON BUCHHOLTZ-UA: Oh oui, nous pouvons fermer ces.
On dirait rad.
Public: Est-ce vraiment important?
ALLISON BUCHHOLTZ-UA: Il ne fait pas.
Avec la plupart de ces choses, vous ne fermez pas la balise,
99% du temps rien de mauvais va se produire, mais il est bon style, aussi.
Alors Jacob.
Et nous avons la laitue.
Public: Pour les liens, il est vraiment important.
ALLISON BUCHHOLTZ-UA: Hm?
Public: Pour hyperliens.
ALLISON BUCHHOLTZ-UA: pour les hyperliens.
Oui, hyperliens besoin.
OK, donc nous allons voir ici.
Et nous avons la fin de notre liste.
Et nous attendons à ce.
Nous avons tous-- Jacob, juste là.
la nourriture de lapin.
Ca me rappelle Bunnicula.
>> PUBLIC: [Inaudible]
ALLISON BUCHHOLTZ-UA: Je ramener Toutes les anciennes références scolaires d'aujourd'hui,
sont-ce pas?
Seulement toutes les anciennes références scolaires.
Aurait apporté comme Gogurts ou quelque chose pour les collations.
>> PUBLIC: Ou diluviennes.
ALLISON BUCHHOLTZ-UA: Oh.
D'accord.
Je vais voir si je peux suivre bas diluviennes de la semaine prochaine.
Je pense que je peux le faire.
Je pense que nous pourrions avoir certains dans le bureau.
>> OK, donc nous avons couvert beaucoup de différent choses que vous pouvez faire avec HTML, non?
Et comme vous pouvez probablement le voir, il est nothing-- espérons-le, pas trop intim--
si elle est, je ne veux pas dire à rabaisser quiconque.
Si vous rencontrez des difficultés, se il vous plaît venir me parler.
>> Mais la plupart de celui-ci est juste regarder la syntaxe, non?
Si vous voulez une liste non ordonnée, si vous voulez une sorte de liste,
si vous souhaitez aligner quelque chose ou Format quelque chose, il est tout au sujet juste
type de recherche jusqu'à la syntaxe HTML, non?
Et une chose qui est assez cool en fait
est si vous allez to-- voyons, ce qui est un beau site que nous aimons?
Quelqu'un at-il des sites préférés qui sont OK pour faire apparaître en ligne?
Vous savez quoi, nous allons juste faire CS50.
Voilà agréable et sûr, non?
>> OK, donc CS50 ici.
Oh, regardez, il ya une section pour le moment.
Si vous aimez la façon dont elle regarde.
>> PUBLIC: [inaudible].
ALLISON BUCHHOLTZ-AU: Nous ne sommes pas va faire méta section, les gars.
Il ne se passe rien.
Ce serait cool, mais on ne va pas le faire.
>> Alors qu'est-ce que vous pourriez faire si vous aimez la façon dont
cela fonctionne est que vous pouvez toujours raison cliquez sur une page web que vous aimez
et vous pouvez faire source de la page.
Il apportera tout le HTML.
Et cela est en fait un très bon façon de styliser votre propre page Web.
Aller à une page Web que vous aimez vraiment et regarder le HTML
et de comprendre comment ils ont fait.
>> Et littéralement, tant que vous citez choses,
aussi longtemps que vous n'êtes pas seulement voler des gens, il est OK.
Surtout pour CS50 [? Finances?], nous sommes
sorte de vous attendre à obtenir l'inspiration de l'autre site.
Donc sentir libre.
Regardez à travers les sites Web qui vous pensez que sont vraiment assez
et comprendre comment ils utilisent HTML et CSS pour faire ces choses.
>> Donc, comme vous le voyez ici, il n'y a évidemment comme des liens et nous avons une classe ici.
Nous avons un lien ici.
Nous avons une liste.
Nous avons probablement une photos ici quelque part.
>> Nous avons quelques style cool ici.
Ceci est la chose suivante nous allons faire.
Donc, le style, chaque fois que vous voyez ces crochets de style, il est essentiellement CSS.
Ben, avez-vous une question?
>> Public: Quel est div?
>> ALLISON BUCHHOLTZ-UA: div est juste A- ce qui est div?
PUBLIC: Division.
ALLISON BUCHHOLTZ-UA: Division.
Oui, il est juste comme séparer les différents éléments.
OK, alors voici ce que nous sommes va aller dans la prochaine.
Donc, cela peut ne pas être le meilleur style, car, si vous remarquez
nous avons HTML et le style dans la même page, et nous voulons en fait de séparer ceux-ci,
D'accord?
Et en fait, laissez-moi ouvrir ma droite
parce que ce qui est censé être le PDF, de sorte que nous avons style.css.
>> Donc, ce que nous pouvons faire ici est de ces ya des choses intéressantes comme certains fondu
et nous pourrions essayer de le faire, mais je me sens comme je le ferais louper ça à la volée,
Je vous encourage donc les gars à aller essayer que sur votre propre,
mais je ne vais pas le faire maintenant.
Donc, si vous les gars, rappelez-vous, si jamais vous frappez ensemble du problème,
quelque chose se précipite dans le côté.
Il a à voir avec le fondu et la transition et ainsi de suite.
>> Public: Et voilà tout CSS et HTML?
>> ALLISON BUCHHOLTZ-UA: Toutes les feuilles CSS et HTML.
Ouais.
Ainsi, vous pouvez faire beaucoup de bien choses cool avec CSS et HTML.
Donc, avec notre impressionnant page Web lapin ici, nous
allez faire un peu peu de style CSS avec elle.
>> Donc si jamais vous avez un style feuille, que nous avons ici,
vous pouvez simplement appeler style.css.
Vous pouvez appeler ça comme vous voulez.
Ce qui est important est que nous allons à référencer dans notre web.html ici.
>> Donc, ce que nous allons faire est nous-- donc je ne plaisante pas cette up--
nous allons relier ces deux fichiers ensemble.
Ainsi, dans le même way-- je vais à établir une analogie avec C ici.
De la même manière que si vous avez certains library-- et nous avons cs50.h--
notre compilateur lie.
Ceci est juste un explicite lien de notre part.
Donc, de la même manière que nous le faisons hachage inclure certains fichiers, ce qui
Je suis sur le point d'écrire est que le HTML / CSS équivalent de cela.
>> Nous disons simplement, OK, cette page web va utiliser cette feuille de style, OK?
Nous avons donc link rel égale à la feuille de style.
Et puis nous avons le type, css.
Et puis est égal href.
>> D'accord.
Donc, tout cela fait ici vous est peut penser à ce que la même chose
comme un hachage comprendre.
Évidemment, il est un peu plus compliqué, mais dans tous les cas,
il est effectivement la même chose.
Donc, ceci est juste une certaine liaison d'un feuille de style, il est de type text / css,
et le nom de celui-ci est style.css.
>> Ce qui est important à savoir est que la page Web
que je travaille droit maintenant-- web.html et style.css-- sont dans le même dossier.
Parce que dans des dossiers différents, vous devez donner la racine réelle
ou à son chemin d'accès.
Mais dans ce cas, nous préférons rester super simple et ça va être ici.
Donc, si nous faisons cela, je dois certains choses déjà en file d'attente ici.
>> Donc, nous avons un corps, qui va d'avoir notre couleur de fond, qui
est dès maintenant en bleu clair.
Nous pouvons changer cela si nous voulons, mais si je me souviens correctement,
il faut juste changer à la lumière bleue.
Et maintenant nous avons un fond bleu clair.
Et nous avons eu ici-- quelqu'un peut-il se rappeler qui est un ID de hachage ou classe?
>> PUBLIC: ID.
>> ALLISON BUCHHOLTZ-UA: ID.
Laisser refroidir.
Donc, ce que nous voulons faire est qui de ces polices
ou desquelles: voulons-nous "Regardez le lapin mignon "pour être violet?
Je pense que nous voulons que, pour être violet.
Je suis assez bas avec qui être violet.
>> Donc, ce que vous faites est que vous ne ID equals-- dans ce cas
Je l'ai dit, ce que, jolie couleur ici.
Nous rechargeons.
Tout d'un coup, il est violet.
OK, donc avec ID, rappelez-vous il doit être unique,
donc je ne serais jamais l'aide cet ID nulle part ailleurs.
Mais avec classe, comme nous l'avons ici avec une jolie police,
Je devrais être en mesure d'utiliser que partout où je veux.
>> Alors, faisons celui-là.
On peut donc dire classe équivaut assez police.
Et si nous regardons maintenant, nous avons cette jolie police fraîche ici.
Alors peut-être que je veux faire à la fois.
OK, en fait je ne sais pas si cela est aller travailler mais je veux essayer.
Et voilà comment vous apprenez CSS et HTML.
Vous êtes comme, vous savez quoi, je veux essayer.
Je ne sais pas si ça va fonctionner.
Voyons voir si cela fonctionne.
>> Et regardez ça.
Maintenant il est en violet et il est une jolie police.
OK, donc vous avez tous ces différentes choses que vous pouvez faire.
Avez-vous une question?
>> PUBLIC: Ouais.
Eh bien, tout comme les couleurs que vous utilisez sont les mots.
Y at-il un moyen de faire des couleurs avec l'hexadécimale RGB?
ALLISON BUCHHOLTZ-UA: Vous pouvez également faire avec hexadécimal, je crois.
Ouais.
Mais il est plutôt agréable si vous ne veulent pas regarder vers le haut.
Vous pouvez juste comme, violet ou bleu.
PUBLIC: Espérons qu'ils savent ce que cela signifie.
ALLISON BUCHHOLTZ-UA: Droit.
Faisons donc cette lecture ou chartreuse.
Pourquoi voudriez-vous jamais choisir chartreuse?
Il est une couleur intéressante.
>> OK, donc évidemment nous pouvons nous voir peut changer les choses mais nous voulons.
Si vous voulez create-- disons nous voulions créer une autre classe.
Que pourriez-vous les gars veulent changer?
Si vous tirez W3Schools » documentation de CSS,
Je laisse la parole à vous les gars.
Nous pouvons essayer de faire quelque chose de cool avec ce dans les deux dernières minutes.
Parce que je suis gentil de votre part donné un Crash Course sur beaucoup de choses cool
que vous pouvez faire.
Mais à la fin, comme je l'ai dit, si vous juste expérience, vous apprendrez beaucoup.
>> Public: Avez-vous regardez cette police?
>> ALLISON BUCHHOLTZ-UA: Ouais, Je levai les yeux cette police.
Donc, comme littéralement, je suis allé to-- qu'ai-je fait?
Je l'ai CSS liste des polices, et alors je l'ai fait pile police,
et puis je me suis dit, regardez, ici sont toutes les polices cool que vous pouvez faire.
Et il y avait celui-ci, de sorte Je l'ai copié à mon presse-papiers.
Et puis je me suis dit, OK, cool, là nous allons.
Tout est fait.
>> PUBLIC: Donc, vous ne devez vous assurer qui sait ce que CSS police est.
>> ALLISON BUCHHOLTZ-UA: Oui.
>> Public: Qu'est-ce qu'il dit à la fin?
Cursive?
>> ALLISON BUCHHOLTZ-UA: Cursive.
Ouais.
>> PUBLIC: image de fond.
>> ALLISON BUCHHOLTZ-UA: l'image de fond.
D'accord.
Donc, vous voulez me dire comment faire.
Je laisse cela à vous.
Je suis juste en tapant ici maintenant.
La roue est entre vos mains.
>> PUBLIC: OK
>> ALLISON BUCHHOLTZ-UA: OK.
Que fais-je?
>> PUBLIC: Doing-- Je sais ce que vient après l'accolade.
ALLISON BUCHHOLTZ-UA: OK.
Donc, probablement dans le corps, je assumerait, parce que nous sommes
faire avec l'image de fond.
>> PUBLIC: Oui, nous allons le faire.
>> ALLISON BUCHHOLTZ-UA: OK.
PUBLIC: OK, donc fond côlon, et puis nous
besoin d'une adresse URL de cette image.
Peut-être que le pseudo-code que pour le moment, peut-être.
>> ALLISON BUCHHOLTZ-UA: Qu'est-ce voulez-vous que je to--
PUBLIC: Je pense comme un GIF.
ALLISON BUCHHOLTZ-UA: Un GIF?
Cela va être intéressant.
OK, qu'est-ce que je googler ici?
>> PUBLIC: Non, ça votre choix.
>> ALLISON BUCHHOLTZ-UA: Pourquoi ne nous-- pas si il est un lapin,
Je pense que nous devrions avoir un belle pelouse ou quelque chose herbeux.
>> PUBLIC: Meadow.
Une prairie.
>> ALLISON BUCHHOLTZ-UA: Une prairie?
D'accord.
PUBLIC: Ou Rachel Maddow.
ALLISON BUCHHOLTZ-UA: Celui-ci semble assez.
Oh, ce est minuscule, cependant.
Nous avons besoin d'une image de bonne taille.
Voyons.
Oh, regarde.
Voilà une jolie prairie.
Vous savez quoi, je l'aime celui-ci.
Disons copier celui-ci.
>> PUBLIC: OK, donc je pense qu'il est l'URL, les parenthèses ouvertes.
>> ALLISON BUCHHOLTZ-UA: OK, URL.
>> PUBLIC: Puis l'adresse.
>> ALLISON BUCHHOLTZ-UA: OK.
Est-ce là tout ce qu'il faut?
>> PUBLIC: Fermer parenthèses point-virgule, et puis espace, fond trait d'union
attachement côlon fixe, et une accolade.
>> ALLISON BUCHHOLTZ-UA: OK.
Voyons voir si cela fonctionne.
Ça va être assez cool si il le fait.
Je suis très excité ici.
Cela n'a pas fonctionné.
Je me demande pourquoi.
PUBLIC: Peut-être que l'URL doit être entre guillemets.
ALLISON BUCHHOLTZ-UA: Peut-être.
Et voilà comment nous apprenons, les gars.
>> PUBLIC: Pouvons-nous avoir fond couleur et image de fond?
>> PUBLIC: Non
Un prévaut sur les autres.
>> ALLISON BUCHHOLTZ-UA: Je ne sais pas.
Voyons.
Allons voir et voir.
>> PUBLIC: Oh, peut-être, oui.
[Interposition VOIX]
>> ALLISON BUCHHOLTZ-UA: OK, cela est obviously-- je [inaudible] ici.
Donc OK.
PUBLIC: attachement de fond.
ALLISON BUCHHOLTZ-UA: Ah.
>> PUBLIC: OK, je ne sais pas.
ALLISON BUCHHOLTZ-UA: Il semble que cela devrait fonctionner.
Etes-vous sûr qu'il est colon après l'URL?
>> PUBLIC: Non, il est le point-virgule.
ALLISON BUCHHOLTZ-UA: Il est point-virgule.
PUBLIC: Ai-je dit côlon?
ALLISON BUCHHOLTZ-UA: Vous avez dit un colon.
PUBLIC: Oh non.
ALLISON BUCHHOLTZ-UA: Là vous allez.
PUBLIC: Oh, attendez, maintenant nous ne pouvons pas lire le texte.
ALLISON BUCHHOLTZ-UA: Maintenant vous ne pouvez pas lire le texte,
mais nous avons l'image de fond.
Mmhmm?
>> Public: Est-ce que HTML soutenir le contenu dynamique?
Comme, pourriez-vous redimensionner cette image en fonction de la taille de la fenêtre,
ou est-ce un CSS--
>> ALLISON BUCHHOLTZ-UA: Donc CSS doit le faire.
Donc, si vous les gars sont intéressés dans l'apprentissage CSS avancées,
Je suis co-enseignement une séminaire sur CSS sur le 7ème.
Et je promets que ce sera beaucoup plus en profondeur
et faire beaucoup plus froid choses dans cette section.
Et mon co-enseignant est comme totale frontal maître web dev.
Donc ça va être assez cool si vous voulez de se renseigner sur toutes les choses cool
que CSS peut faire.
>> Mais ce que nous avons ici avec son attachement de fond
fixed-- il est donc certain size-- fixe mais vous pouvez réellement dynamically--
Si jamais vous voyez des pages web, que la plupart des pages Web de qualité feront,
lorsque vous réglez le taille de votre navigateur,
il ajuste le fond ou combien est de montrer ou reformate les choses, non?
Voilà ce que nous appelons positionnement relatif.
>> Et CSS peut effectivement saisir la taille de votre la largeur du navigateur est ou quelle taille il est,
et vous pouvez positionner choses en fonction des tailles relatives
par rapport à la taille absolue.
Et qui est évidemment plus avancé CSS, mais qui est quelque chose que vous pouvez faire.
Si vous voulez apprendre plus, venez à mon séminaire.
>> Voilà donc quelque chose que vous pouvez faire.
Et CSS peut effectivement do-- CSS et JavaScript
que nous verrons dans la prochaine week-- peut vous permettre de modifier dynamiquement
pages sans avoir à les recharger tout le temps.
Et vous arrivez à faire un peu de trucs assez cool.
>> Donc, il ya une autre chose que vous les gars pourraient vouloir faire
ou tout ce que vous voulez explorer?
Nous avons 10 minutes.
Nous pouvons aussi partir plus tôt, mais si vous voulez faire un peu plus de choses web,
nous pouvons, mais je ne suis pas va vous forcer à.
Mais on peut aussi simplement manger des bonbons.
PUBLIC: Sélectionnez le texte blanc afin que vous puissiez le lire.
ALLISON BUCHHOLTZ-UA: OK.
Donc dans ce cas, nous voulons une certaine p.
PUBLIC: Devrions-nous le faire dans le corps, il applique donc à toute la page?
ALLISON BUCHHOLTZ-UA: Oui, nous pouvons.
Voilà une bonne idée.
Donc, nous vous faisons have-- savons ce que nous devrions être?
Je ne sais pas si nous pouvons faire la couleur du texte.
Je vais essayer et créer une autre classe ici.
>> Public: Comment obtenez-vous si qu'il dispose des suggestions?
ALLISON BUCHHOLTZ-UA: Donc, si vous les gars sont intéressés,
ceci est un autre texte éditeur appelé Sublime.
Vous devriez être capable de l'installer sur votre appareil.
Parfois, il devient un peu difficile.
Si vous voulez aider, Je suis super heureux de vous aider
avec elle, parce que gedit est grande et il est génial parce que vous pouvez compiler
sur le fond, mais je vraiment comme Sublime, car il est assez
et il ne faire les choses comme l'auto-complétion.
>> Ainsi, vous pouvez certainement sentir libre de laissez-moi savoir si vous voulez le faire.
Si vous venez de Google "Sublime texte, "il généralement
a des instructions sur la façon d'installer sur différents systèmes d'exploitation.
Il est vraiment cool, je penser, à mon avis.
Ainsi, p.
Je pense que je peux faire ou text-- nous pouvons juste faire couleur est «blanc».
Là.
>> Donc, ce que je faisais ici est que je ne pas changer tout le texte.
Mais p est seulement un tag que nous avons, non?
Cette balise de paragraphe.
Donc, je viens de créer un élément de CSS dit, OK, rien de ce tag
p, faire ressortir le blanc.
>> Donc, si vous avez remarqué, il fait ce blanc et ce blanc.
Il n'a pas fait notre liste blanche parce que il est pas associé à cela.
Vous pouvez aller à travers et vous pouvez say--
>> Public: Avez-couleur de fond.
>> ALLISON BUCHHOLTZ-UA: Couleur de fond?
>> PUBLIC: Contexte de tuyau en couleur où vous mettez la balise p.
>> ALLISON BUCHHOLTZ-UA: OK.
Vous voulez blanc?
PUBLIC: Mmhmm.
ALLISON BUCHHOLTZ-UA: OK.
Là vous allez.
Public: Ce est bizarre.
ALLISON BUCHHOLTZ-UA: Plutôt cool, non?
Donc, si vous venez de perdre son temps, vous allez apprendre beaucoup de choses.
Et il peut être assez cool.
Je pense qu'il est certainement plus gratifiant que parfois
parce que vous ne devez pas attendre pour votre programme à compiler.
Vous pouvez juste frapper Actualiser et vous êtes comme, oh, regardez,
il a travaillé, ou oh, je suis probablement manquer quelque chose.
Et ce quelque chose qui est vraiment cool sur cette prochaine partie de la classe,
est il est certainement, je les pensées, les plus faciles à vérifier
comme vous allez le long du chemin par rapport à avoir à écrire ces programmes longs
et qui souhaitent et prier qu'il fonctionne à la fin.
>> Donc, avec cela, je pense que vous les gars semblez tous bien.
Si vous avez des questions, comme toujours, venir me parler, viens me le faire savoir.
Je serai juste à l'extérieur pour les 15 prochaines minutes
si vous souhaitez discuter de rien et tout.
>> Je vous souhaite donc guys-- bonne chance avec ce jeu de processeurs.
La date limite est le vendredi à midi parce qu'il a été publié à la fin.
Je vais donc probablement verrais Beaucoup d'entre vous les gars, le jeudi,
mais heureusement pas.
Peut-être que vous l'avez fait d'ici là.
Je serais super fier.
>> Mais sinon, je vais vous voir jeudi.
Vous pouvez également utiliser une date tardive, qui l'étend au samedi à midi.
Mais je don't-- hein?
>> PUBLIC: Halloween.
>> ALLISON BUCHHOLTZ-UA: Il est l'Halloween, a et b,
Je ne pense pas qu'il y aura être des heures de bureau le vendredi.
Alors, vraiment ne pas essayer et obtenir fait par Vendredi afin que nous puissions tous célébrer
Week-end Hallow.
Très bien, je vous vois la semaine prochaine.