[音楽再生] ALLISON BUCHHOLTZ-AU： すべての権利、みんな。 セクションに戻っようこそ。 だから、今日のために私たちの議題は起こっている はるかウェブdevのスタッフオーバー。 私はどのように多くの知らない あなたのpsetを見てきました それがリリースされて以来、 以前の今朝。 私はどのように多くのようにだろう 人々は仕様を読んだことがある、 しかし、あなたはすべてを持っていたどのように見て それを見て7時間のような、の そしてそれは月曜日だと あなたはおそらく、クラスを持っていた 私はそれを前提とするつもりです あなたのほとんどはそうではありません。 あなたは、余分な賛辞を持っている場合。 あなたは基本的に助けている 単純なWebを実装 ブランドの新しいPSETはC、サーバ、 そうあなたたちはモルモットであることを得る。 それは楽しみ、野生の週になるだろう、 私はそれがとても楽しいだろうと思う そしてそれは本当にだろう 実際に良い経験。 だからためにあなたを準備する その、セクション、今日では、 私たちはは、chmod、TCP / IPを行く、としている その後、HTMLとCSSを少し。 最後には、コードを実際よ 簡単なWebページまで一緒に 君たちを助けるためにこの種の取得 もっとそれに慣れ。 そして、あなたをピックアップしていない場合 あなたのクイズは、彼らは、フロントにいる しかし、私はかなり確信して誰もが確信 ここに彼らのクイズを持っています。 また、そのノートに、 ソリューションは、まだアップされない しかし、すぐに私たちは、好きなようにfinish-- 彼らのquizzes--を服用最後の少数の人々 彼らは最大になります。 あなたが質問があれば その間に、 個人的に私にメールして自由に感じる。 私はあなたの個人と対応させていただきます ご質問、私はいつもそうであるように。 だから、そのノートに、chmodの。 だから、基本的にすべてのあなたは chmodコマンドについて知っておく必要がある それは変更するために使われているということです ファイルのパーミッション、右？ だから、それだけでいくつかのシステムはそれを呼び出すだ それがここに言うように、パーミッションを変更する。 そして、あなたは今までに見たい場合は、 何持つファイルを許可、 だけではなく、やっての lsは、あなたがのls -l行うことができます。 lは長い間の略です。 だから、長いリストをやる すべての、そして あなたに多くの、より詳細を与える あなたのファイルのそれぞれについての情報。 そして、あなたは私はsomething--表示されます second--のためにスキップします しかし、次のようなものが表示されます 各ファイルのそこの一番上の行。 そして、我々はそれが何を意味するかを通過します。 そこで、基本的に、変更するには あなたのファイルのパーミッション、 あなただけにchmodを使用したい。 あなたは他のどのようなものだと考えることができます UNIXのlsコマンドまたはCDやその他もろもろのように呼び出します。 それは別のような呼び出しだけのようなものだ。 だから我々はchmodのやるし、我々はよ 通常は3桁の数字を持っている。 行うにはカップルの方法があります。 それは、そのうちの一つ、我々は上に行くよ。 しかし、一般的には、次の3つがあるでしょう 0〜7の各時間の範囲の数字。 だから、一つのことがあるということです 三つの異なるアクセス権 私たちはそれぞれのファイルを与えることができること。 そして、それはある、読みやすい 意味になるRで表さ 少しで。である、ワット 書き込み可能。そして、xは、これは、実行可能である。 私は、電子1、実行可能なことを知って、 そうでないかもしれないほとんどの感覚が、私たち xと共にそれを表す。 その後何が起こるかは、これらのそれぞれである また数表現を持っている。 そこで、1,2、および4があります。 そして、基本的に何が起こるかである これらの3つの数字のそれぞれ ここに対応 異なるユーザーのセット これらのアクセス権は、に関連することを。 だから、最初にそのことを考えることができます 番号は、実際のユーザーに対応 またはファイルの所有者、第二 数は、グループに対応させていただきます そして最後のものはいい 世界へ、OK？ だから何が起こるかは覚えている 2 wはそれらnumbers-- rは4である xは右、1ですか？ あなたはこれらを総括すると、This-- それはあなたにその最初の番号を与えます 我々はchmodコマンドで入力可能性があること。 したがって、この場合には、どのような この番号は次のようになります？ それは、4プラス2プラスになるだろう 右、7 1、？ この場合において、これらの 何も持っていない、 これは右ここだろう [OK]を、700にchmodする翻訳する？ そして、何それが行うのはそれがすべて許可している あなたのユーザへのこれらの許可の。 だから、これは私たちのユーザーを意味します 彼らがやりたいことができます。 彼らは、このファイルを読むことができます。 彼らは、このファイルを実行することができます。 彼らは、このファイルに書き込むことができます。 しかし、グループと世界、なし 一切の権限、OK？ だから、別の方法はそれを書き込むには、我々はできる 、その各々を3桁にchmodを行う どんな和またはそれに相当する 特定のグループは、特定のサブセットである。 または私達は実際には別のことを行うことができます。 ちょっと待って。 我々は、これらのここで何かを行うことができます。 どのようにあなたの多くは、例を見た それはプラスxをchmodするのが好きだったどこに？ あなたが講義で、私が思うことを見ましたか？ だから、すべての略です。 それは、すべてのユーザーにそれを与えることを意味、 これ、私はここに置くのを忘れていました。 しかし、プラスのx、我々の場合 我々が行う場合には、ここに気づく 私たちは何をしているグループchmod--する プラスの権限の話 我々はそれらを与えたい。 だから、これはプラスまたはマイナスすることができます。 Plusは、権限が追加されます。 マイナスは許可を奪う。 かなり直感的な、私は思います。 だからプラスxは、chmodコマンドを意味します。 だから、すべての人々のパーミッションを変更 これはA--であれば許可を追加します。 そして、それはどのような権限を意味しx-- 私たちは皆を付与することになります。 読み取り、書き込み、または実行する？ 聴衆：実行します。 ALLISON BUCHHOLTZ-AU：実行します。 だから我々はすべてのユーザーを与えている このファイルを実行する権限、OK？ 私たちがやりたいのであればどのような 数値形式でその？ だから、数字で覚えている 我々は3つの数字が欲しい。 読者：4。 ALLISON BUCHHOLTZ-AU：それは何でしたか？ 読者：4。 ALLISON BUCHHOLTZ-AU：ない4。 聴衆：0、0、4。 ALLISON BUCHHOLTZ-AU：まあ、私たちが望む 右、すべてのユーザーにそれを与えるには？ だから我々は持っているつもり 各スロットの番号。 それはなるだろう 各スロットの同じ番号 私達はちょうど与えたいので、 誰も実行権限。 だから、実行可能ファイルは、1である しかし正しい軌道に乗って。 だから我々はそのだろうにchmod 111をした場合は、 chmodのプラスxの等価である。 それは皆に意味があるか？ 私たちは、通過するつもりだ 例をいくつ。 だから、大きなお持ち帰り ここで、ここにはありませんで、 ちょうどすべてのユーザーにそれを与えることを意味します。 あなただけの場合はuがある 与えるか、または離れて取る から特定の権限 ユーザーまたは所有者。 gが、グループのためである その結果、真ん中の数字。 その後他の人はあなたが考えることができます 世界のように、その最後の桁。 だからと、私たちは一例に行くよ、 私はいつもの例のように感じるので、 理解することはこれらの事が容易になります。 我々はthis--を経てそうrwx-- また、700のように表すことができた。 それは我々が見えた例です 画像の複数において。 だから、いくつかのファイルを444にchmod どのようなアクセス許可を与えるだろう？ あなたは本当に近かった。 読者：すべてに読み取り可能。 ALLISON BUCHHOLTZ-AU：リード。 右、誰にでもそう読める？ その後それを行う別の方法は何ですか？ 我々はどちらかとchmodコマンドを実行したい場合は Rさんまたはwの、プラスとマイナス、 何その呼び出しは次のようになります？ それは何をchmodのことでしょうか？ 聴衆：プラスR。 ALLISON BUCHHOLTZ-AU：5上のプラスR。 [OK]を、これは、これと同じである ちょうど2つの異なる翻訳 同じことの。 だからで、我々はこれらを持っている。 だから私はあなたたちがしようと書きたい 彼らの反対の方法で、これらの種類。 chmodの555でだから、 それは何を好むでしょうか？ それは、プラスまたはuプラスまたはその他もろもろでしょうか？ Uプラスxに対して、私に3つの数値を与える。 その後何の権限について教えて 私たちは実際に、誰に付与している？ だから私は、君たち2をあげる その上で動作する分。 お互いに話をして自由に感じる。 少しに来た人のために 後半、キャンディーやシャツがあります。 我々は左の3シャツを持っており、 我々はキットカッツとスターバーストを持っている。 だから、グラブをお気軽に この小さな間奏でいくつか。 また、最後のものは注意が必要です。 それは、最後の1のための2つの書き込み可にモードを変更です。 実際に、私はそのドアを閉じてみましょう 君たちは、その上で作業している間。 キャンディは常に必要だ 月曜日の午後に。 [OK]を、ので、555にchmod。 我々はそれを書くことが別の方法は何ですか？ 任意のアイデア？ はい。 読者：プラスRX。 ALLISON BUCHHOLTZ-AU：RプラスRX。 あなたはそれに、RXはずだ理由を説明したいですか？ 読者：あなたが持っているので 5、それは4プラス1のように、 だから、読んだプラス 実行ファイル、そしてそれはすべてのためだ。 ALLISON BUCHHOLTZ-AU：右。 だからここで、5を改めて表明する 我々は、4と1の合計として知る 私たちのトリオの各数であるため そのサブセットの権限の和、 右？ ユーザーのどちらか、 グループ、または世界。 したがって、この場合には、我々は知っている 図5は、図4および1により形成されなければならない。 そして4と1に対応 読み取りと実行を可能とする。 我々は、すべての人にそれを与えている 私たちは、プラスRXます。chmod行うことができます。 そして明らかに、私達はちょうど行きました そこの質問を通して、 だから今、このファイルが実行可能である そして誰にでも読める。 だから何秒約1？ そのいずれかの番号は何だろうか？ 任意のアイデア？ 先に行く。 読者：100 [聞こえない]。 ALLISON BUCHHOLTZ-AU：100。 正確に。 だから、なぜ100を説明したいと思いますか？ 読者：それはのためだから ユーザので、第一の位置にあります。 その後、実行可能×1です。 ALLISON BUCHHOLTZ-AU：その通り。 だから我々は、実行可能ファイルを付与する ただ、ユーザーへの権限。 したがって、この場合には、100となる。 そして、私はすべての答えを持っている 場合の次のスライド上で最大 あなたは物事の多くを書き留めている。 [OK]を、ので、この次は、実際に行われます 2書き込み可にモードを変更して、あなたはそれを行うことができます。 だから、誰もが持っているん どのように可能性のあるアイデア chmodの640はリライト 他の方法で？ あなたが最初にして、ユーザーを変更することができます あなたは、グループが私のヒントで変更することができます。 だから我々はちょうど変えた場合には ここで、この最初の1であるユーザー、 私たちの呼び出しは何でしょうか？ だから、ユーザーが右、uはありますか？ ですからます。chmod uプラス何？ ビー·マイ·エスケイプ？ 聴衆：RW。 ALLISON BUCHHOLTZ-AU：RW。 読み取りのため、読み取りと書き込み、右 これらの合計は6として一緒に、2 wは、4である。 だから我々はchmodのuのプラスRWを取得し、 そして我々はそこに私たちの最初の6を得る。 それでは私たちが今欲しい、4を取得するには 私たちのグループの設定を変更します。 だから我々はchmodのgがプラス何をやろうとしている？ 4は何ですか？ 聴衆：R。 ALLISON BUCHHOLTZ-AU：R。 正確に。 だから我々は所有者を与えている パーミッションを読み書き 私たちは、グループの読み取りを与えている 私たちはここにすべてを持っている権限、。 ビー·マイ·エスケイプ？ 読者：あなたが何かを書くことができれば、 それはあなたがそれを実行することができます意味するものではありません？ ALLISON BUCHHOLTZ-AU：あなた something--に書き込むことができます 私はそれのことを信じていない あなたはそれを実行することができますを意味します。 涼しい。 だから、私達はちょうど経験したことがすべてです。 だから、この次のいずれかに、それはだ だけの種類の一般的なケース あなたが残しておきたいこと あなたの問題は、設定のために気に。 これらは通常の権限である 我々はあなたが使用したいもの。 そう711のために、それが得られ 私たちはもちろん、利用者 すべての権限、どの 意味をなす傾向がある。 そしてそれはで実行可能だ 理にかなっている世界では、グループ、 あなたには、いくつかのディレクトリがある場合、 その中に横断できるようにしたい。 人々がアクセスする必要があります。 任意の非PHPファイルの場合は、あなたが行っている 何をするであろう、644を使用するには？ それは何を意味するか、何ん パーミッションそれが与えるのでしょうか？ だから、所有者は何ができる？ 聴衆：読み取りと書き込み。 ALLISON BUCHHOLTZ-AU：読み取りと書き込み。 その後グループとその他 ちょうど、読むことができます？ その後いずれかのために600にchmod あなたが使用するPHPファイル、 あなたの所有者は、再度、缶 読み取りおよびそれに書き込む しかし、誰もがある だけの種類の遮断。 だから、これは実際になります 時より有用である あなたはあなたの問題に着く 設定された次の週どこ あなたは実際にウェブサイトを構築している。 だから、あなたがこれまでに実行する場合、 どんな奇妙な問題 それが読み込まれないのWHERE 適切に、多分あなた 実行ファイルを追加する必要があります 許可、または多分あなたは、読み取りを必要とする 又は許可を記述します。 人々をトリップする傾向がささいなこと アップ、それは一種のゴーへのようなものだ あなたは来週のPSETを起動したとき。 そして、私はより多くのあなたを与えるだろう 今週のPSETのヒント、 しかし、私は以来、それを見には至っていない それが今朝リリースされました。 しかし、あなたは私が見えているでしょう、私にメール それを時間によって明日は応答します。 だから今、誰もがchmodコマンドと良いのですか？ 任意の長引く疑問？ かなり簡単。 何を追跡するだけの種類 読み取り、書き込み、および番号は、実行 おそらく最も難しい部分です。 、TCP / IPを持つので、すべてのこれらのプロトコル 種類のデータ構造を持つような 先週、それははるかだ 種の取得することが重要 それらのより高いレベルの直感。 これは、我々が行っているCS143はありません ネットワークを実装するか聞いて、 だから、もし大丈夫 理解していない すべてのプロトコルの核心。 理解することが重要何をしていている 種類の彼らが何を表すかのように そしてなぜ彼らは重要だ。 そのようにTCP / IPは、もちろん、それは トランスミッションコントロールプロトコル であるか、インターネットプロトコル、 基本的には基本的に法律のちょうどセット あるいはその規格は、データを伝える それがどのように扱われるべきである、 それがどのようにパケット化されるべきである、 送信され、受信された。 基本的には、ちょうどそれのようにそれはそう ここで言う、チャンスを増加 そのデータがどこになります あなたはそれがに取得したい。 君たちはに行ってきました場合、私は確信している 講義またはオンラインそれを見、 彼は私にはわからないhas-- 彼は今年それをしなかった場合には、 私は去年知って、彼が持っていた 彼はロブの写真を持っていたデモ そして彼はそれをに分割 4封筒に入れて そしてサンダースを渡ってそれを取得しようとしました。 そして、あなたは一種の缶 それをそのように思います。 それは、そのルールのセットだけだ どこかを取得する方法、データを伝える そしてあなたがどうかを知ることができます あなたは、データが不足している あなたがある場合と同じ方法で ノートの複数のページを取って あなたが104ページ、ページでそれらにラベルを付ける 204、あなたは後で勉強する戻る あなたが欠けているsomething-- あなたが知っている304--、ページを見つけることができません 何かが間違っているので、あなた あなたのノートに目を通すことができます もう一度またはあなたの再送信を誰かに頼む 講義では、その日から指摘している。 インターネット上のデータと同じように。 私はのために求めている場合 一部のサーバーから何か そしてそれは送信する必要がある それ複数のパケットでは、 おそらく数に行く それはいくつかの方法で、せ 私は、私が受け取っているはずですどのよ​​うに多くの知っている、 これは10の一つであり、ああ、私に教えて またはこれは、10,000の一つである。 私が組み立て直しに行くそのように 一緒にすべてのピース、 何かが欠けている場合、私は知っている そして私は再びそのを求めることができます。 それは理にかなっていますか？ ルールのセットだけ。 その根底には、[OK]を、ルールのセット？ だから我々はまた話 ポートについて少し。 これは本当にただの標準であること あなたがデータのタイプを知ることができます これらのパケットで送信されている。 私たちは一緒に行く場合 封筒の例は、我々はしないでください それは絵だことを知っている そこにロブ我々はそれを書いていない限り 私たちの封筒の外側に。 だから、ポートは、基本的には同じものです。 それはちょうど何を把握する方法です データのタイプは、送信されている。 だから私たちはすべてを持っている ここで最も一般的なもの。 だから21--これらも親切です の良いもののように知っている。 それは簡単クイズの質問のようなものだ。 ポート80は何をするのでしょうか、などとすることが？ または、ポート443は、何をするのでしょうか？ 知っているので、良いもの。 だから我々はここに持っている、21がファイルである 単に転送プロトコルなので、 ファイル転送を管理する規則。 25、我々はすべて何か あまりにも多く使用し、電子メールがある。 53は、ドメイン名です 基本的なシステム、 のルックアップのだけの種類 ドメイン名のIPアドレス。 だから私はそれがあったかなり確信している あなたなら、講演で言及 のようなものに行く google.com、それはIPアドレスを持っている その、それに関連付けられています。 それは実際にgoogle.comではありません。 だから53ポートです それは実際に取る それを翻訳するの種類の世話 あなたのために、そのIPアドレスに変換する。 その後80および443は、非常に一般的です。 あなたのいずれかがあなたのWeb​​ページを持っているか、 あなたのセキュリティで保護されたWebページを持っている、 そのウェブページの多くはある 今に引き継が移す。 だから、高レベルのようなものだ 転送プロトコルの概要。 私は徹底的にずっと表示されません。 それはクールなもののようなものだ あなたが興味があるなら。 資源がたくさんあり​​ます。 ウィキペディアは実際にある かなり良いページ。 だから私はそれを見ていた ほんの少し前、 ので、私は非常にお勧めします もし興味があるならそれを見て ため、または2年で143を取る 私はそれが隔年だと思います。 だから、これの終わりに、我々はしている Webページや、HTTPの話、 そのため、実際に私たちの次のトピックです 今日我々は、HTMLとCSSに入る前に、 あなたが実際にWebページをコーディングすることができます。 それは楽しいだろう。 私たちは、の写真を持っているでしょう バニー、それは素晴らしいことでしょう。 だから、HTTP、あなたがここに見ることができるように、 素敵な頭字語の一つである 今週、これは ハイパーテキスト転送プロトコル。 だから、もう一度、それだけだ そのルールの別のセット ハイパーテキストを支配する この場合、転送。 学習するので、最良の方法 約これは単なる種のある にそれを打破するために これらの個々の単語 がたくさんあり​​ますので、 そこに、画面上の言葉。 だから我々はハイパーテキストで開始するつもりだ。 だから、「ハイパー、 "あなたが考えることができます 「上」、スーパータイプの事のように。 だから、本当にに連れて行かれ、テキストだけだ 次のレベルなので、それがスーパーテキストのようなものだ、 次のテキストのように。 だから、それだけで、基本的だ 私たちを与えたテキスト よりも多くの情報 通常のテキストは[OK]、しますか？ そこでここでは、この場合には、これはハイパーテキストである。 これは、我々が持っていることを教えてくれる 私たちがしようとしているいくつかのリンク、 これはcs50.net、ある 今cs50.harvard.eduです。 これらのスライドは少し古いです。 そして、それは表示するように起こっている ハイパーリンクとしてこのようなこと、 その後本当にクールウェブサイト。 だから、少しテキスト、だ そこに本当にクールなもののビット。 だから、物事をリンクすることができますし、次のことができます 画像を挿入し、あなたが物事をスタイルすることができます。 そして、あなたが最も精通している事は、 男は、おそらくハイパーテキストで持っている ハイパーテキストマークアップ言語、HTMLは、ある ウェブの全てのコースのどれである 付与された、私たちは私たちの周りを参照してください。その でスローいくつかのCSSスタイルを持つ。 しかし、誰もがあった場合 MySpaceのと本当に大きな、 私はあなたのすべてがHTMLを使用確信している 作成するすべての時間 これらの完璧なプロファイル、右？ それはかもしれないような気が 時代遅れの今の基準が、何でも。 ちょうどlittle--君たち それほど若くはありません。 皆さんの中には私よりも古い。 MySpaceはまだあった 私が若かった事。 私はその昔じゃない。 とにかく、HTMLのハイパーテキストのちょうど形。 だから、ハイパーテキストだけです 追加された機能を持つテキスト。 そのように転送プロトコルと考えられる 説明するよりあやふやだ。 明らかに、transfer-- データの転送だけ。 だから、どちらかのクライアント間で、のような あなたのWeb​​弟、およびサーバ。 だから、基本的には 方法は、インターネットは機能します。 の正確な要求だから、 どのようにこれらの仕事は、私たちがしている 実際に見に行く 例リクエストとレスポンス。 しかし、我々はどのようにを要求 サーバからの情報 そして、サーバーが私たちにどのように応答するかされる 何この転送プロトコルが支配する。 だから、リクエストとレスポンスが持っている ルールのこれらの特定のセットに従うこと。 これは、標準化されているのに関わらず、そのため、 あなたは、インターネットを使っている場合には、 それは常にOK、同じように機能します？ 再び、プロトコルは、ルールのセット。 それはちょうど普通のことだ 同じように相互作用 教授マランはを語ること 誰かが自分の手を拡張する場合、 あなたはそれが礼儀だことを知っている あなたの手を差し伸べ、手を振る。 それは右、プロトコルですか？ だから私は、いくつかの標準化された要求を与える 私はあなたの手を振るしたいです、 そしてあなたは、いくつかの標準化を与える どちら全くのおかげではない応答、 またはあなたが試してみて、私の横に振る可能性 手や多分あなたは試してみるつもりだ と拳が私をバンプ。 そして、我々はそのためのプロトコルを持っていません。 これは、分解します。 しかし、誰もが続く場合 同じプロトコルはもちろん、 それははるかにシームレスになります。 人々は、お互いを知るようになる。 誰もが幸せだ。 だから、ウェブの世界では、 誰もが同じrules--に従います 社会的基準よりもわずかに良好。 しかし、それを、私たちは見てみましょう ここでは例リクエストで。 だから、これはほとんどありませ ここで一番下のキー それはあなたにさまざまな色を伝え、 彼らは何を意味することになっている。 だから、白いちょうどあなたの方法のようです リクエストおよびプロトコルversion-- そのようにメソッド要求、バージョン。 そして、これはいくつかある フィールド名と値 そのフィールドの、どの頂きます 非常に、非常にすぐに入る。 これは、例えば要求がある。 これは私が出て拡張するようなものです、 自分自身を紹介したい。 これはどのようなクライアントである または何Webブラウザ ご使用のサーバに送信することになる。 だから、これはget要求であるので、それはだ サーバーから何かを尋ねる。 そして、HTTP、もちろん、だ そしてそれはバージョン1.1です。 だからここにこの残りの部分は、我々が呼んでいるものです ヘッダと、その追加情報 それは私たちのより良いアイデアを与える 私たちが実際に求めている、 私たちは与えたいと思うことや情報 適切かもしれませんサーバー。 だから、ユーザーエージェントは、いくつかのより多くを与えます 例えばon--説明、ここで、 カール/ 7.24.0は、実際に伝えるために起こっている 我々は、Googleを使用しているサーバー 私たちのブラウザとしてクロム。 だから、あなたが今まで聞いた場合 話す人々について アプリが応答することについて 複数のブラウザに、 これは彼らに何かある あなたがいる場合のため使用します 何ブラウザーを知らない リクエストは、から来ている あなたはそれにデータを調整することはできません。 この場合、ユーザがそのように ただ、この種を与えている 情報を特定する 何ブラウザー約 ユーザーは、現在、[OK]を、使用している？ それでは我々はまた、あるホストを、持っている どこに私たちは実際に行きたいと思っています。 このケースでは、に行きたい apple.com、いくつかのクールな新しいiPadを買う か何か、多分かわいい 私たちの寮の部屋で点灯します。 そして最後に名前の値はちょうどです フィラー、単に一般的なもの 君たちが見るの。 それは実際にない ここで何に対応しています。 だから、同じくらいか、などのを持つことができます あなたはそれぞれの場合に必要として少し。 ほとんどの場合、これらは任意である。 それはちょうど何に依存します あなたは、ブラウザから必要 へ順に、ユーザーからの リクエストを適切に与える。 それとも、何あなたのユーザーに依存 実際にサーバへのあきらめたいと考えています。 だから、多くの、多くを持っている可能性 これらのヘッダーフィールド名 またはあなただけのカップルを持っているかもしれません。 たくさんのことと同じように 私は、このセクションで述べてきたが、 それは実際に状況に依存 のどのようにあなたがこれを使用している。 だから、皆に理にかなっているのでしょうか？ これは一例に過ぎず 要求、ヘッダー、その他もろもろ。 [OK]を、それとなるよう、私たちはいくつかの応答を持っている。 再び、我々は我々のステータスコード、プロトコルを持っている バージョン、および、フィールド名とフィールド いつものように値。 だから私たちのプロトコルバージョンは 私たちの状態コードは200である。 、ことを意味し、[OK] はい、すべてがうまくいった。 ここで何をしたいのです。 サーバタイプ、コンテンツ それを教えてくれるtype--、[OK]を、あなたがしている 一部のテキストのHTMLを取得するつもり。 ここでの長さがあり、ここだ あなたは、接続に何をすべき。 [OK]を、ので、再度、依存 あなたがしているデータについて 内容に応じて、求めて サーバーは、あなたに戻りたい、 あなたはこれらのフィールドの複数を有することができる 名前は、あなたがより少ないがあるかもしれません。 完全に文脈依存。 そして限り、このステータスなど ここでは、コードはもちろん、 200は唯一のものではない あなたは正しい、持っているだろうか？ 私たちは、ステータスコードがたくさんある。 誰もが任意のを覚えていますか 私たちは講義で述べた他の人？ それらの多くは4で始まる。 聴衆：404。 ALLISON BUCHHOLTZ-AU：404、ありますか？ 読者：ファイルが見つかりません？ ALLISON BUCHHOLTZ-AU：ファイルが見つかりません。 正確に。 だから何403はどうですか？ 聴衆：禁断の。 ALLISON BUCHHOLTZ-AU：紫禁城。 それで、あなたはどう思いますか それが書き込み可にモードを変更して意味？ 観客は：それはあなたことを意味します それを読むためのアクセス許可を持っていません。 ALLISON BUCHHOLTZ-AU：その通り。 何らかの方法で、あなたは持っていない それにアクセスする権限は、右？ だから、404、403。 本当に面白いがあります 1その我々は常に 毎年紹介すること 私は、ここで我慢している必要があります 413のような、私はティーポットだされている。 あなたはこれをGoogleのことができます。 それはコードであり、同様にそれは面白いです 413とそれは私がティーポットよだ。 どの私はあなたがする理由がわからない これまでインターネット上であることを必要とし、 私が話を戻そう。 聴衆：たぶん、あなたはお茶のポットだ。 ALLISON BUCHHOLTZ-AU：たぶん サーバーは、お茶のポットです。 誰が知っている？ すべての権利、私たちはしようとしています 実際のコーディングへの移行。 君たちはしようとしているような気がします かなり早くここから出。 観客は：なぜそれをしない 二回：サーバー "と言う？ ALLISON BUCHHOLTZ-AU：フム？ サーバー倍？ それは良い質問です。 私はわからない。 私が分かるだろうと 私はあなたのすべてをメールでお知らせいたします。 [OK]を、それ以外に他の質問？ グッド？ 涼しい。 HTMLとCSS、そして今我々 すべての楽しさの部分に到達する。 だから私は前に述べたように、HTMLの おそらくものの一つです 君たちは、最も精通している。 だから我々はハイパーテキストマークアップ言語を持っている。 私にはないthis--を学ぶための最善の方法 どんな調製されたスライドか何かを持っている HTMLについて君たちのために。 これは、構文を学ぶことは本当にです。 そして、あなたはMySpaceのだったら 一日、あなたはこれをダウンだろう。 だから本当に、最大のものは、 ちょうど練習し、実験する。 私はだろう偉大な資源の一つ 非常にW3Schoolsのある使用をお勧めします。 だから、W、3、その後学校。 彼らはたくさんある CSSでHTML上のリソース、 そして彼らは実際に持っている 事の分割画面のソート どこに彼らはあなたのサンプルコードを与えるでしょう。 あなたはそれをいじることができ、 それを変更し、Updateを押して、 そしてそれはあなたが何を、それを紹介します 実際にWebページにありません。 だから私は非常にそれを使用することをお勧めだろう。 それはかなりクールだ。 あなたはワンセグ障害を得ることはありません ここで物事がうまくいかないとき。 あなたが取得するために管理している場合 HTMLについてワンセグ障害、 私はだから私に知らせてください 本当の興味をそそらことになるだろう。 ので、しかし、それは本当にクールだ あなたは物事を変更することができ、 あなたは彼らがライブ更新され見ることができます。 と私はあなたが多くを得るでしょうと思う HTMLののより直感的に把握 あなたが実際にはいくつかのを過ごす場合には 時間それを使って実験。 私が言っただから、なぜです、 実践と実験。 グーグル、ここから上 アウト、おそらくになります あなたの最高のリソースや友人の一人。 またはBing--私は、マイクロソフトで働いています ので、多分私はビングを言う必要があります。 しかし、ほとんど何 ただ構文であることを行っている、 そうタグが何であるかを理解し、 少なくともCSS--とunderstanding-- 特定の属性を変更する方法。 これは超便利でしょう。 だから我々にはないにもかかわらず、 どんな準備ものを持って、 我々はいくつかのベストプラクティスのようなものを持っている 私たちはあなたたちがしようと遵守したいこと by--またはむしろ、あなたがすべき 追って通知があるまで従う。 だから、すべてのあなたのタグを閉じます。 うまくいけば、誰もがあなたが何を知っているhas--、 これは今は意味がない場合には、 私はそれが意味をなすことを約束する 我々はページをコーディングしているとき。 しかし、すべてのタグを閉じます。 だから、あなたがこれまでにいくつかを持っている場合 ブラケットのヘッダ、 H1は、ブラケット、そのことを確認してください あなたはそれと終わったびに、 あなたはそのヘッダーを閉じます。 W3バリであなたのページを検証します。 あなたのタグを閉じないと、 あなたが予期しない動作を得ることができます。 それはあなたのページが無効であることを言うでしょう あなたがこのバリデータを介して実行した場合。 だから、ときdoubt--で、特に 今週のと来週の上 我々が尋ねるのと同じ方法でpset-- あなたがチェック50とスタイル50を使用するには、 あなたはこの考えることができ あなたの小切手の一つとして、OK？ だから、W3バリデータを渡していない場合。 それは我々があなたを上にドッキングしますものです。 または私は右のあなたを言っている 今、私はあなたを上にドッキングします。 だから、検証していることを確認します。 それは難しいことではありません。 あなたは自分のコードを貼り付け そしてそれは良い仕事をして言うよどちらか またはあなたが逃している 同じように何か そのスタイル50はあなたに伝えます あなたはどこでめちゃくちゃにしている。 その後1最後の事 あなたは分けたいです すべてのことをHTMLでマークアップ、 またはあなたのテキスト、およびあなたのスタイリング。 だから我々は例をやる この後その権利の。 だから、HTMLとCSSは、別々にする必要があります。 そして、私たちは話してことになるだろう モデル·ビュー·コントローラであるMVC、 来週。 君たちはおそらくべき 講義でそれについて学ぶ 明日あなたが持っていた場合 すでに今日それを学んだ。 そして、それはだけの種類のだ 我々は傾向があるパラダイム ウェブを作成するときに使用する 物事を分離するためのページ。 あなたは同じように考えることができます 我々はC言語で機能を分離する傾向があること 我々は物事を見つけるためにハッシュ場所。 それはちょうどへの道だ あなたの人生を容易にする。 これは、属性やコードを分離する あなたは、何度も何度も使用している可能だろう しかし、このように、それは親切 の素晴らしく、きちんとそれを保持しています。 そして、あなたが変更したい場合は、 一つのことは、あなたが一度それを変更 そしてそれは他のどこでも変わった。 だから、それはあなたのためのよりだ 使いやすさと柔軟性。 だから、CSSを使用した、それは非常に似ています HTMLに、代わりにタグの 私は、ちょうど今、私たちに言及していること セレクタと呼ばれるものを使用します。 そして、彼らは基本的にだけの種類 特定のタグを関​​連付ける HTML内の異なる属性を持つ。 私は属性を言うとき、私は意味 フォントの色、フォントスタイルのようなもの、 背景の色、 あなたのテキストの色。 物事のこれらの種類。 それが中央のifのように、 それが右にオフの場合、 それはすべてのinverted--だ場合は、 これらのクールなものの。 どんな文体物事 あなたのテキストに行うことを、 これは私が属性で何を意味するかである。 その後知る二つの主なものはということです メインfactors--の2 selectors-- 一意のIDである。 あなたは、一つだけのためにそれを使用することができます。 そうでなければ、それはあなたに叫ぶために起こっている。 そして、我々はそれを定義するとき CSSファイルでは、意志 ハッシュIDであると 何が私たちが望む属性。 私たちはするつもりだ約束する 例を経る。 それは、より多くの意味をなすでしょう。 クラスには、複数のブロックを参照することができます。 つまり、あなたを持つことができます 第一および第三の段落 場合は、属性の同じ種類を持っている あなたが同じクラスに関連付けます。 そして、我々はそれらを定義するとき CSSで、我々は、ドットクラスを行う クラスは何でもあることと あなたはそれが命名したい。 だから私はこれが正しいと知っている 現在、非常に抽象的。 私たちはコードになるだろう理由です。 私はあなたたちの愛を知っている その、あなたのすべてのしている ので、私を助けに行く これはあなたのWeb​​ページです。 これは、男たちのセクションのWebページです。 だから私の前に何か質問があります PowerPointをオフにする、または何か あなたは私が戻ってスクロールしたい 我々はコーディングを開始する前に？ 読者：あなたはマッチタグを言って、 あなたはセレクタまたはタグを意味していますか？ ALLISON BUCHHOLTZ-AU：次のことができます 同じものと考えること。 それはちょうど別の言葉だ。 私は、セレクタのように、意味。 しかし、セレクタはまた、タグにマッピングされます。 だから、と考えることができます 効果的に同じこと。 私はそれがために起こっていることを約束 我々は、コードより多くの意味。 から何か パワーポイントやご質問 今、実際に私たちの前に 私たちのセクションのページを作成する？ みんな準備はいいですか？ 涼しい。 だから私は1つが開始されている。 私はあなたたちのためにフォントを増やしましょう​​。 [OK]を、ので、今、私たちは持っている 右ここ骨子のWebページ。 我々はいくつかのHTMLを持っている。 我々はいくつかのヘッダを持っている私たち 例示的なウェブページとしてここを参照してください。 いくつかのタイトル、いくつかのフォント。 これらには、[OK]を、タグである？ だから私はあなたのタグを閉じることを意味するとき、私たちが見る ここでは、このブラケットヘッドがあなたの開口部である タグ、およびこのブラケット /ヘッドはOK、それを閉じている？ だから、と考えることができ あなたの場合の条件であなたのブレース またはあなたのforループ。 あなたは初めに1を持っている場合は、 あなたが最後に一つにしたい。 それはまだほとんどの時間を動作します あなたは、閉じタグを持っていない場合は、 しかし、ベストプラクティスは、あなたのタグを閉じている。 だから、この場合には、これを変更してみましょう。 私たちは、セクション7を持っているつもりです。 「第ウェブページ。 " だから、僕はこれを変更するつもりです。 そして、私たちはこっちに行くとあれば、私たち reload--奨めは、保存してreload-- 我々はここでそれをアップに気付く それは右、変更？ 涼しい。 だから、これは、タイトルを変更します。 これは、あなたのタブ上にある何でもある。 だから、これは一種のです 退屈のようなものを探して。 私はみんなのことは知らない。 私たちはここに何かをしたいと思います。 それでは私たちにできることはある ヘッダーはただそこにある。 それでは身体のいくつかの並べ替えをやってみましょう。 だから我々はここでいくつかのボディを持っている。 私はいつも開いてやると 開始するには、私のタグを閉じて、 私はブレースを行うのと同じ方法で。 ああ。 待って、何？ 読者：[聞こえない]。 ALLISON BUCHHOLTZ-AU：ああ。 君たちは私を得た。 よくできました。 ゴールドスター。 [OK]を、私たちはここでいくつかのボディを持っている。 そして今、いくつかのテキストの追加を開始してみましょう。 だから、別のカップルを持っている テキストを追加するためのオプション。 私たちは、ヘッダーのようなものを持っている。 私達はちょうど通常のテキストを持っている。 それでは、ただヘッダから始めましょう。 実際に、君たちがしたい場合 W3スクールのHTMLを引き上げるためには、 あなたはちょっと見て回ることができます そして、何があるかどう 特にあなたが試してみたいこと このWebページで、私たちはそれを行うことができます。 だから、この場合には、ちょうどいくつかのH1をやらせる。 だから、h1は最高ヘッダのようなものです。 それはあなたに何かを与える それは非常に大きく、大胆である。 この場合には、我々がやりたい 当社のウェブページの最初のテキストのため？ 何でも。 君たちはこれを作成しようとしている。 私はちょうど入力するつもりです。 聴衆：ようこそ。 ALLISON BUCHHOLTZ-AU：ようこそ。 [OK]を、私たちはそれを保存して、我々はリロードした場合、 我々は偉大な大歓迎を持っている。 だから、ちょうどので、あなたが見ることができる 違いは、のH6に何かをやらせる。 我々は正しいここで何をしたいですか？ 右？ [OK]を、これだけのことができますので、 違いを参照してください。 サブライム、うん。 だから、あなたが気づけば、h1は、非常に、非常に大規模な。 H6、太字などが挙げられるが、はるかに小さい、 あなたが間にあるすべてのものを持っている。 だから、H2、H3、H4を持つことができます。 これらは、ヘッダーだけである、 ので、あなたがしようとしている場合は、 Webページを作成すること 異なるセクションを有し、 多分あなたは使いたい どこかで、ヘッダー。 涼しい。 だから我々はいくつかの詳細を追加します 私たちの体の中で物事。 私はそれが親切だろうと参照してください。 私たちは絵を持っていた場合のクール。 誰もが多分使用できるような気がします 今は約かわいいウサギの写真、 それで我々は見つけるつもりだ 最初のバニー写真。 君たちがいずれかを持っているかどうかは知りません 私たちが望むどちらに好み。 あなたはどんな嗜好を持っていますか？ ここにこの1？ ダウン。 [OK]をクリックします。 その1それがある。 良い選択。 [OK]を、私たちは私たちの画像を表示するつもりです。 その時に見てください。 その愛らしいものを見てください。 どのように悲しいかもしれない これで月曜日に？ だから我々はちょうどつもりだ 画像のURLをコピーします。 そして私たちがやりたいことだけしてみましょう、です 私たちは、段落のためのいくつかのpを持っていると言う。 私たちは見て "と言うつもりだ かわいいウサギを見てください。 はAwwww D'。」 私は私のバニーが大好きです。 私は自宅でバニーを持っている。 私は私のバニーを欠場。 それでは私たちはdo--するつもりだ 君たちが望むなら私は知らない this--しかしHTMLでGoogleに、 どのようにイメージが含まれる場合があります？ 文字通り、あなたがGoogleの場合は、 "、画像HTMLを含める」 なぜ君たちは私を教えていない このタグは何をすべきですか？ 読者：IMG source-- ALLISON BUCHHOLTZ-AU：IMG source-- 読者：--equals-- ALLISON BUCHHOLTZ-AU：--equals-- 読者：うん--quote--。 ALLISON BUCHHOLTZ-AU：パーフェクト。 ラブリー。 MySpaceの世代、右、参照してください？ 聴衆：ネオペット。 ALLISON BUCHHOLTZ-AU：ネオペット。 [OK]を、ああ。 うわー。 それは狂気をされています。 [OK]をクリックします。 だから私はこの権利を得ることを確認。 涼しい。 だから、これはここでなければなりません。 我々はリロードした場合、その後、私たちは私たちのを持っている ページ上のbunnyがこの愛らしいありませんか？ これはとてもかわいいです。 あなたは素晴らしい、偉大な写真を選びました。 私はそれを掘っています。 [OK]を、私たちは今、この愛らしいバニーを持っている。 我々は、追加することができました イメージ、ちょうどそのように。 そこで、基本的にどんなイメージがあるかどう あなたは、あなたのWeb​​ページに追加する あなたはちょうどこのようにそれを追加することができます。 もう一つは、以下の場合になります あなたがイメージが保存されている と同じフォルダ内に このファイルは、あなただけのことができます その画像の任意の名前を書く 代わりにWebリンクを持つのである。 それはまだ引用符であろう。 それはちょうどようなものだ 我々はthis--名付けていた場合 この写真が保存されていた場合 このHTMLファイルとフォルダ内の 私はそれと編集をしていていること bunny.jpgと呼ばれていました。 我々はまた、それを行うことができ そしてそれは現れるでしょう。 しかし、私はこれが保存されていない ファイルと私はバニーを維持したい、 私たちは、リンクを維持するつもりだ。 聴衆：rabbit.orgとは何ですか？ ALLISON BUCHHOLTZ-AU：rabbit.org。 それはappropriate--だ 見て、あなたがそれを採用することができます。 養子縁組。 bunny.jpg。 私はこのバニーを採用したいと思います。 ああ、神様、それはとてもかわいいです。 [OK]を、私たちは、ヘッダーを追加しました。 私たちは、絵を追加しました。 明らかに、我々は、追加された ここではいくつかのテキスト、右？ 我々は他を追加したい場合 テキストは、我々はこのように行くだろう。 だから、これは別の段落です。 そして、私たちは「これは別の段落です。」と言う また、私は恐ろしいスペルだけど、 ので、私は物事をスペルすることができる。 ちょうどFYI。 だから我々は別のものを持っている ここでは、段落、右？ だから、多分あなたは何かをしたい もう少し面白い単なる 右詰めのようにすべてのテキストを、持っている。 たぶん、あなたはOK、あなたのテキストを中央にしたいですか？ 誰かがそれらを使用したいのであれば あなたの目の前で便利コンピューター そしてあなたがしているどのように教えて このテキストを中央揃えに行く、 聴衆：p個の整列。 ALLISON BUCHHOLTZ-AU：だから p個の整列は「center」に等しい 彼は、みんなそれを殺しています。 y'allのは、ステップアップする必要があります。 そして、私たちは「これは中央に配置されます。 "持っている そして今、我々は何か集中している。 同じように、あなたなら それは左揃えたい、 あなたが整列等号を行うことができます 左、整列、右に等しい。 完全にあなた次第。 私は右ここで行った場合は、この 現在は右揃えだshould--。 読者：アリソン？ 画像ソースによって、なぜではない そこのimg源の近くに？ ALLISON BUCHHOLTZ-AU：申し訳ありません。 この1は次のようになります 今、あなたは良いそこにいる。 今、私たちは良いしている。 読者：あなたは持っていない そこにそれを閉じたりしないように？ ALLISON BUCHHOLTZ-AU：まあ、そうIMG ソースは、これは、画像にjust--さ それだけのに対し、一つの要素として見だ あなたはこれらの残りのために気付いた場合、 私たちは、情報し、いくつかのタグを持っている それが終了タグにしてから関係する。 しかし、イメージと、すべての ちょうど一種の自己完結型。 涼しい。 だから、君たちを作成する方法を知っている ヘッダ、あなたはどのように入力されたテキストに知っている、 あなたは、画像を配置する方法を知っている 今では、あなたは物事を整列させることができます。 あなたもう一つは 行うことができるようにしたいかもしれません 私たちがしているCS--でリストを作成することです 来週のPSETに入るの一種。 我々スタッフ 通常、今週教える と本当によく行く 来週のPSETので、我々はしている ここで物事を重複し、ミキシングの一種。 しかし、それは来週のために役立つことでしょう。 だから我々はいくつかを作成したい場合は、 リスト、我々はそれをどのように行うのでしょうか？ あなたは、この時間を答えることができない。 他の誰かがしなければならない。 それは難しいことではありません、みんな、約束します。 グーグル「順不同リストHTML。」 それは何でしたか？ 読者：[聞こえない]。 ALLISON BUCHHOLTZ-AU：右。 だから我々は、順序または順不同したいですか？ それでは順不同をやってみましょう。 だから我々は、いくつかのULを持っている 順序なしリストの略です。 そして、我々は、各要素のために何がありますか？ それは、独自のタグを必要としていますか？ 私たちは物事を書き始めることができますか？ 聴衆：李。 ALLISON BUCHHOLTZ-AU：李。 それでは、私たちのリストにはなるだろう？ 私たちはここで何をしたいですか？ 私たちは、名前だけを行う。 ただジェイコブを行う。 聴衆：ウサギの食品。 ALLISON BUCHHOLTZ-AU：ウサギの食品。 [OK]を私はこれが好きです。 ウサギの食品。 [OK]を、私たちはニンジンを持っている。 私は、このウサギのテーマが好きです。 私はそれをたくさん掘ってる。 観客は：実は、私は思った ヤコブは合法的であろうと。 ALLISON BUCHHOLTZ-AU：ジェイコブ？ ヤコブはウサギの餌である。 あなたが見た場合にはヤコブの 営業時間から写真、 あなたは彼が持って考えているかもしれません キラーウサギに襲わ。 読者：私は今ウサギを持っている。 私は今キラーウサギを持っている。 ALLISON BUCHHOLTZ-AU： あなたは私をからかっていますか？ 読者：私はそれを次のセクションを持っていきます。 私はそれを持っている。 ALLISON BUCHHOLTZ-AU： これはばかげている。 とにかく。 読者：[聞こえない] 聴衆：ええ、私のプロクター 同様にウサギを持っています。 ALLISON BUCHHOLTZ-AU：私はウサギが欲しい。 [OK]を、誰が本当のウサギへをもたらし 次のセクションで、総ブラウニーポイント。 読者：[聞こえない] 聴衆：ああ、それは本当ではありません。 それはぬいぐるみのウサギだ。 ALLISON BUCHHOLTZ-AU：ああ ええ、我々はこれらを閉じることができます。 RADが見えます。 読者：それは実際には重要ですか？ ALLISON BUCHHOLTZ-AU：それはありません。 これらの事のほとんどで、 あなたは、タグを閉じないでください 悪い何も起こっていない者の時間の99％ 起こるが、それはあまりにも、良いスタイルだします。 ヤコブそう。 そして、我々はレタスを持っている。 聴衆：リンクについては、 それは本当に重要です。 ALLISON BUCHHOLTZ-AU：フム？ 読者：ハイパーリンクしてください。 ALLISON BUCHHOLTZ-AU：ハイパーリンクしてください。 はい、ハイパーリンクは、それを必要としています。 OK、それでは、ここで見てみましょう。 そして、私たちは私たちのリストの近くにあります。 そして、我々はその見てください。 我々はすぐそこ、all--ヤコブを持っている。 ウサギの餌。 Bunniculaのことを思い出す。 読者：[聞こえない] ALLISON BUCHHOLTZ-AU：私は戻って持っています すべての古い学校の参照は、今日、 私はないですか？ ただ、すべての古い学校の参照。 のように持ってきたはず スナックのGogurtsか何か。 聴衆：またはGushers。 ALLISON BUCHHOLTZ-AU：ああ。 [OK]をクリックします。 私が追跡できるかどうかはわかります 来週Gushersダウン。 私はそれを行うことができると思います。 私は、我々が持っているかもしれないと思う オフィスでいくつか。 [OK]を、私たちは別のをたくさん紹介してきた 物事はあなたが右、HTMLで行うことができますか？ そして、あなたはおそらく見ることができるように、それはだ うまくいけば、あまりにintim--ませんnothing-- それがあれば、私が意味するものではありません 誰も軽視する。 あなたは問題がある場合、 私に話を来てください。 しかし、それのほとんどはちょうどです 構文を見て、右か？ あなたが順不同のリストが必要な場合は、 あなたは、リストのいくつかの並べ替えをしたい場合は、 あなたが何かを揃えたい場合、または フォーマット何かが、それはちょうど約すべてです 見上げるの種類 HTML用構文、右？ との一つのことは、 かなりクール実際 あなたが見てみましょうto--行けばある、 私たちが好きな素敵なウェブサイトは何ですか？ 誰もがどんなお気に入りのウェブサイトを持っている オンライン育てるために、OKであることを？ あなたはちょうどCS50をやらせるかを、知っている。 それは素晴らしく、安全で、右ですか？ [OK]を、ここではそうCS50。 ああセクションが今あります​​、見てください。 あなたが道を好きなら、それは見えます。 読者：[聞こえない]。 ALLISON BUCHHOLTZ-AU：私たちはそうではありません メタセクション、みんなをするつもり。 それは起こっていない。 それは、クールになるが、 我々はそれを行うつもりはない。 だから、何ができるかやる あなたが方法を好む場合の対処 これはあなたが常に正しい缶で働く あなたが好きな任意のWebページをクリックしてください あなたがページのソースを表示を行うことができます。 それは、すべてのHTMLが表示されます。 そして、これは実際には本当に良いです 自分のWebページのスタイルを設定する方法。 あなたのWeb​​ページに移動します 本当に好きとHTMLを見て そして、彼らはそれをした方法を見つけ出す。 そして文字通り、限り あなたは物事を引用したように、 限り、あなたはただじゃないように 人から盗む、それはOKです。 特にCS50用 [？金融？]、我々はしている あなたが得ることを期待しての種類 他のウェブサイトからのインスピレーション。 だから、お気軽に。 そのウェブサイトに目を通す あなたは本当にきれいだと思う そして彼らが使用する方法を見つけ出す これらのことを行うためのHTMLとCSS。 ここで見るように、明らかにありま​​す リンクのように我々はここでクラスを持っている。 私たちは、ここにリンクを持っている。 私たちは、リストを持っている。 我々は、おそらくいくつかを持っている どこかで、ここでの写真。 私たちはここにいくつかのクールなスタイルを持っている。 これは次のものである 私たちはやろうとしている。 あなたはこれらを見るたびに、とてもスタイル スタイルブラケット、それは基本的には、CSSだ。 ベン、あなたが疑問を持っていたのですか？ 読者：div要素は何ですか？ ALLISON BUCHHOLTZ-AU：DIV ちょうどdiv要素が何であるかA--のですか？ 聴衆：課。 ALLISON BUCHHOLTZ-AU：課。 ええ、それはただのようなものだ 異なる要素を分離する。 [OK]を、ので、ここで私たちがしているものです 次回に行くつもり。 だから、これは最高のできない場合があり スタイルあなたが気づいた場合、理由 我々は同じページ内にHTMLとスタイルを持って、 そして私たちは実際にそれらを分離したい、 OK？ そして実際に、私を聞かせて 私の右1を開く これは、ことになっているので PDFは、私たちはstyle.cssのを持っている。 だから私たちはここで行うことができますことは、これらのです いくつかのフェードのようなクールなものがあります そして、我々は試してみて、それを行うことが、私は感じることができました 、私はその場でアップする混乱のと同じよう ので、私はあなたにみんなを奨励 自分でそれを試して行く、 しかし、私は今それをするつもりはありません。 だから、あなたたちは、覚えていれば、 あなたは今まで問題セットをヒットした場合、 何かが側からswoops。 これは、フェードと関係がありと トランジションやその他もろもろ。 読者：そして、それはすべてのCSSとHTMLの？ ALLISON BUCHHOLTZ-AU：すべてのCSSとHTML。 うん。 だから、あなたは本当に多くのことを行うことができます CSSとHTMLの持つクールなもの。 私たちの素晴らしいとそう ここでバニーWebページ、我々 少しをするつもりされている それとCSSスタイルのビット。 だから、あなたは今までのスタイルを持っている場合 私たちがここに持っているシート、 あなただけのstyle.cssを呼び出すことができます。 あなたが好きなそれを呼び出すことができます。 重要なのは、我々が行っているということです ここに私たちのweb.htmlでそれを参照する。 だから、私たちがやろうとしていることである we--ので、私はしない混乱これをup--やる 我々は、リンクしようとしている 一緒にこれらの2つのファイル。 だから、同じway--に私が行くよ ここで、Cと同様に描画する。 あなたが持っている場合と同じように、 いくつかのlibrary--と我々が持っているcs50.h-- 私たちのコンパイラはそれをリンクします。 これはちょうど、明示的である 私たちの一部のリンク。 私たちが行うのと同じ方法で、そのように ハッシュ何を、いくつかのファイルをインクルード 私は書くことについての私だけです HTML / CSSのそれの同等。 私達はちょうど、[OK]を、このWebページを言っている [OK]を、このスタイルシートを使用するつもりですか？ だから我々は、スタイルシートに等しいリンクRELを持っている。 そして、我々は、タイプ、CSSを持っている。 その後のhref等しい。 [OK]をクリックします。 だから、このすべては、ここで行った操作を行うことができている 同じものと考える ハッシュとして含まれています。 明らかにそれがもう少し見える 複雑な、しかし、すべての場合において、 それが効果的に同じことだ。 だから、これはほんの一部のリンクです スタイルシートは、タイプtext / cssののだが、 その名はstyle.cssにある。 何が知っておくことが重要です そのウェブページは 私は右働いていることをnow-- web.html と同じフォルダにstyle.css--です。 異なるフォルダであるため、 あなたは実際のルートを与える必要が それへの、またはそれへのパス。 しかしこの場合、我々はそれを維持している 超簡単、それはここになるだろう。 我々はそれを行うのであれば、私はいくつかを持っている 物事はすでにここまでキューに入れられた。 だから我々は起こっているいくつかのボディを持っている 我々の背景色を有するようにその 今はライトブルーです。 私たちが望む場合、我々は、それを変更することができますが 私はこれを正しく覚えていれば、 それだけで水色にそれを変更する必要があります。 そして今、我々は水色の背景を持っている。 そして、我々は誰もがhere--を覚えていることができていた ハッシュIDまたはクラスはどれですか？ 聴衆：ID。 ALLISON BUCHHOLTZ-AU：ID。 涼しい。 だから我々は何をしたいか これらのフォントのどれである または私たちが見て "したいですwhich-- 紫のようにするかわいいバニー」？ 私たちはそれが紫色になりたいと思います。 私はかなりダウンしてそれが紫であることと思います。 だから、あなたが何をすべきかあなたがある IDは、この場合にequals-- 私はここで何を、きれいな色、と述べた。 私たちは、リロードしてください。 突然のすべてが、それは紫色です。 [OK]を、IDを持つので、覚えている それはユニークである必要があり、 私は使用してはいけません どこにもこのID。 しかし、我々が持っているクラスで、として ここではかなりフォントで、 私が使用することができるはずです どこにでもあることを私はしたい。 それでは、ここで、このいずれかを実行してみましょう。 だから我々は、クラスがかなりフォントに等しいと言うことができます。 私たちが今見ればと、私たちは持っている ここでこのクールなかわいいフォント。 ので、多分私は両方をやってみたい。 これであれば[OK]を、私は実際に知らない 仕事に行くのが、私はそれを試してみたい。 そして、これはあなたがCSSとHTMLを学ぶ方法です。 あなたが知っている、似ている 何を、私はこれを試してみたい。 私はそれが動作するように起こっているのかはわからない。 それが動作するかどうか見てみましょう。 その見てください。 今では紫色でだと それはかなりのフォントです。 [OK]を、ので、あなたはこれらすべてを持っている あなたがすることができる異なった事。 あなたが疑問を持っていますか？ 聴衆：うん。 まあ、ただ色が好き あなたが使っている言葉です。 色を行う方法はありますか 進RGBと？ ALLISON BUCHHOLTZ-AU：あなたがすることもできます 進数でそれを行う、私は信じています。 うん。 しかし、それはあなたの場合ちょっとうれしいです それらをルックアップする必要はありません。 あなただけの紫や青、のようにすることができます。 読者：それでは彼らを期待しましょう それが何を意味するか知っている。 ALLISON BUCHHOLTZ-AU：右。 それでは、この読み取りまたはシャルトリューズを作成してみましょう。 なぜあなたは今までにシャルトリューズを選ぶのでしょうか？ それは面白い色です。 [OK]を、ので、明らかに我々は我々を見ることができます 私たちが望むしかし物事を変更することができます。 あなたがcreate--したい場合それでは言わせて 私たちは別のクラスを作成したい。 何人が変更したいのでしょうか？ あなたはプルアップした場合W3Schoolsの」 CSSのドキュメント、 私はあなたたちに床を残す。 我々がしようとするとクールな何かを行うことができます この分の最後のカップルで。 私は一種のあなたに与えてくれたので クールなものがたくさんでクラッシュコース あなたが行うことができます。 しかし、最終的に、あなたなら、私が言ったように ちょうど実験、あなたは多くのことを学びます。 読者：あなたは、そのフォントを検索しましたか？ ALLISON BUCHHOLTZ-AU：ええ、 私は、そのフォントを見上げた。 私は、文字通りのようなので、 私が何をしたto--行きました？ 私はCSSのフォントリストをした、と 私は、フォントのスタックをした、 その後私はここ、見て、のようだった あなたが行うことができ、すべてのクールなフォントです。 だから、この1があった 私は私のクリップボードにコピーしました。 そして私はのようだった、 [OK]を、クール、そこに私達は行く。 すべて完了。 聴衆：だからあなたは確認する必要がありません そのCSSはそのフォントが何であるかを知っている。 ALLISON BUCHHOLTZ-AU：はい。 読者：それは最後に何を言うのですか？ 筆記体？ ALLISON BUCHHOLTZ-AU：筆記体。 うん。 聴衆：背景イメージです。 ALLISON BUCHHOLTZ-AU：背景イメージです。 [OK]をクリックします。 だから、これを行う方法を教えしたいと思います。 私はあなたに、このままにしておきます。 私はちょうど今ここに入力しています。 ホイールは、あなたの手の中にある。 読者：[OK] ALLISON BUCHHOLTZ-AU：OK。 私は何をやっている？ 聴衆：Doing--私が知っていること 中括弧の後に来る。 ALLISON BUCHHOLTZ-AU：OK。 だから、おそらく体内で、私は 私たちはだから、引き受ける 背景イメージでやって。 聴衆：うん、のはそれをやらせる。 ALLISON BUCHHOLTZ-AU：OK。 聴衆：OK、そう背景 コロン、その後、私たち その画像のURLアドレスが必要です。 たぶん疑似コード今のところ、おそらくその。 ALLISON BUCHHOLTZ-AU：何 あなたは私をしたいと思いto-- 読者：私はGIFのように思っています。 ALLISON BUCHHOLTZ-AU：GIF？ それは興味深いものになるだろう。 [OK]を、私はここで何をグーグルのですか？ 聴衆：いいえ、それはあなたの選択です。 ALLISON BUCHHOLTZ-AU：なぜ それはバニーだ場合にwe--ませんが、 私たちが持つべきような気が 素敵な草が茂った芝生か何か。 聴衆：メドウ。 草原。 ALLISON BUCHHOLTZ-AU：草原？ [OK]をクリックします。 聴衆：またはレイチェル·マドー。 ALLISON BUCHHOLTZ-AU： この1はかなり見えます。 ああ、それはしかし、小さなです。 我々は良いサイズの画像を必要としています。 見てみましょう。 ああ、見てください。 これはかなりの草原だ。 あなたは、私がこれを好きなものを、知っている。 のこの1つをコピーしてみましょう。 読者：[OK]を、ので、私はそれがだと思う URL、オープン括弧。 ALLISON BUCHHOLTZ-AU：OK、URL。 読者：次にアドレス。 ALLISON BUCHHOLTZ-AU：OK。 すべての私たちに必要なことですか？ 聴衆：閉じる括弧のセミコロン、 その後スペース、背景ハイフン アタッチメントコロンが固定され、中括弧。 ALLISON BUCHHOLTZ-AU：OK。 それが動作するかどうか見てみましょう。 それがない場合は、それはかなりクールになるだろう。 私は右ここで本当の興奮しています。 それはうまくいきませんでした。 なんでやろ。 聴衆：たぶんURL 引用符でなければなりません。 ALLISON BUCHHOLTZ-AU：たぶん。 そして、これは私たちが、みんなを学ぶ方法です。 聴衆：私たちは、バックグラウンドを持つことができます 色と背景画像？ 聴衆：いいえ。 一方が他方に優先します。 ALLISON BUCHHOLTZ-AU：私は知らんよ。 見てみましょう。 のは、それをチェックアウトして見てみましょう。 聴衆：ああ、多分、ええ。 [VOICESを介在] ALLISON BUCHHOLTZ-AU：OK、これは ここobviously-- I [聞こえない]。 だから、[OK]をクリックします。 聴衆：背景アタッチメント。 ALLISON BUCHHOLTZ-AU：ああ。 読者：[OK]を、私は知らない。 ALLISON BUCHHOLTZ-AU：それ それが動作するはずのように見えます。 あなたはそれがURLの後にコロンだと確信していますか？ 聴衆：いいえ、それはセミコロンです。 ALLISON BUCHHOLTZ-AU：それはセミコロンです。 読者：私はコロンを言った？ ALLISON BUCHHOLTZ-AU：あなたはコロンを言った。 読者：ああ、いや。 ALLISON BUCHHOLTZ-AU：そこに行きます。 聴衆：ああ、待って、今 我々は、テキストを読むことができません。 ALLISON BUCHHOLTZ-AU：今すぐ あなたは、テキストを読むことができません しかし、我々は、背景画像を持っている。 ビー·マイ·エスケイプ？ 読者：DOESのHTML 動的コンテンツをサポートしていますか？ 同様に、あなたはその絵のサイズを変更することができ ウインドウサイズに応じて、 またはCSS--ということです ALLISON BUCHHOLTZ-AU： だから、CSSはそれを行う必要があります。 だから、あなたたちは興味を持っている場合 高度なCSSを学ぶことに、 私は共同教えています 7日にCSSのセミナー。 そして、私はそれが約束 深さに、はるかにすること とはるかにクールやる このセクションのもの。 そして、私の共同先生は次のようである 合計フロントエンドのWeb devのマスター。 だから、それはあなたがしたい場合かなりクールになるでしょう すべてのクールなものを学ぶために そのCSSが行うことができます。 しかし、我々はここで何を持っている 彼の背景アタッチメント fixed--ので、いくつかの固定size--だ しかし、あなたは実際にdynamically--できる あなたは今までのWebページを参照している場合、など 最も優れたウェブページは、行います あなたが調整したとき お使いのブラウザのサイズ、 バックグラウンドを調整するか、どのくらい 表示または右、物事を再フォーマットされている？ だから、それは我々が呼んでいるものです 相対的な位置。 とCSSは、実際にどのように大きなあなたつかむことができます ブラウザの幅があるか、どのように背の高い、 そして、あなたは物事を配置することができます 相対サイズに応じて 絶対的なサイズは対。 そして、それは明らかに、より高度なだ CSSが、それはあなたが行うことができるものです。 あなたが学びたいのであれば 以上が、私のセミナーに来て。 だから、あなたが行うことができるものです。 とCSSは、実際に缶 、CSSとJavaScriptをdo-- 私たちは次のweek--に買ってあげるもの あなたが動的に変化できるようにすることができます することなく、ページ 彼らにすべての時間をリロードします。 そして、あなたはいくつかをやらせる かなりクールなもの。 だから、別の事があります 君たちは何をしたいかもしれない または何かあなたが探検したいですか？ 我々は左の10分を持っている。 我々はまた、早退が、もしできる あなたは、いくつかのより多くのWebのものをやってみたい 我々はできるが、私はないんだけど にあなたを強制しようとして。 しかし、我々はまた、単にお菓子を食べることができます。 読者：テキストを強調表示 白いので、あなたはそれを読むことができます。 ALLISON BUCHHOLTZ-AU：OK。 したがって、この場合には、我々はいくつかのページが欲しい。 聴衆：私たちはそれを行う必要があります ボディので、ページ全体に適用される？ ALLISON BUCHHOLTZ-AU： はい、私たちは実際にできます。 それは良いアイデアです。 だから私たちはあなたを行うhave-- 私たちがどうあるべきか知っていますか？ 私たちはテキストの色を行うことができれば私は知らない。 私が試してみて、するつもりだった ここで別のクラスを作成します。 読者：あなたはとても入手するにはどうすればよい それは提案を持っていること？ ALLISON BUCHHOLTZ-AU：だから 君たちが興味を持っている場合、 これは別のテキストです エディタは崇高と呼ばれる。 次のことができるようにすべき アプライアンスにインストールします。 時にはそれは少しトリッキー取得します。 あなたはそれで助けたい場合は、 私はあなたを助けるために、超うれしい それと、geditのは素晴らしいですので、と あなたはそれをコンパイルすることができますので、それは素晴らしいです 底に、しかし、私は本当に サブライムのようにそれはかなりだから それは物事をするのでしょうか オートコンプリートのような。 だから、あなたは間違いなくお気軽にできます あなたがそれをやってみたいなら、私に知らせてください。 あなただけのGoogleの場合は "サブライム テキスト、「典型的には、それ インストールする方法について説明している 様々なオペレーティングシステム上で。 それは、私は本当にクールです 私の意見では、と思います。 だから、P。 私はちょうどtext--たりできると思う 私達はちょうど色が行うことができ「白。」 そこに。 それでは、私がここでやったことは、私ということです すべてのテキストを変更していない。 しかし、ここでpはちょうどです 我々が持っているタグ、右？ この段落タグ。 だから、僕は、CSS要素を作成した このタグを使って何、[OK]を、言った pは、色が白色にする。 あなたが気づいたのであれば、それが作られ この白とこのホワイト。 それが原因私たちのリストを白にしませんでした それはそれに関連付けられていない。 あなたはを通して行くことができる、あなたがsay--可能性 聴衆：背景色を行います。 ALLISON BUCHHOLTZ-AU：背景色？ 読者：パイプの背景 あなたはpタグを入れて色。 ALLISON BUCHHOLTZ-AU：OK。 あなたはそれが白いたいですか？ 聴衆：ビー·マイ·エスケイプ。 ALLISON BUCHHOLTZ-AU：OK。 そこに行く。 聴衆：それは奇妙なことだ。 ALLISON BUCHHOLTZ-AU： 右、かなりクール？ だから、周りのあなただけの混乱なら、 あなたは多くのことを学ぶつもりだ。 そして、それはかなりクールすることができます。 私はそれが間違いなくもっとだと思う 時々より満足 あなたは待つ必要はありませんので、 あなたのプログラムをコンパイルするため。 あなただけの更新]を打つことができる あなたが、ああ、見て、似ている それが働いた、またはああ、私は今 おそらく何かが足りない。 そして、それは本当にだ何か このクラスの次の部分についてのクールな、 私は、それは間違いだです と思い、確認しやすく あなたが道に沿って行くように対 これらの長いプログラムを書くこと そして希望と祈る それが最後で動作すること。 だからと、私は思います 君たち、すべてが良いようです。 あなたはいつものようにご質問がある場合は、 私に話を来て、私に知らせてくる。 私は右の外になります 次の15分間 あなたが約チャットしたい場合は、 何もかも。 だから私は、あなたがguys--願っ このpsetを持つ幸運。 締め切りは正午金曜日 それが後半にリリースされましたので。 だから私はおそらく見ることになります 木曜日に君たちの多くは、 うまくいけません。 たぶん、あなたはそれがそれまでに行われています。 私は、スーパー誇りに思います。 されていない場合しかし、私は木曜日あなたが表示されます。 また、後半の日付を、使用できる 正午に土曜日にそれを拡張します。 しかし、私はハァッdon't--？ 聴衆：ハロウィン。 ALLISON BUCHHOLTZ-AU： それはハロウィーン、およびBの、 私はそこになるとは思わない 金曜日のオフィス時間で。 だから、本当にそれがによって行わ試してみて、入手できますか 金曜日我々はすべて祝うことができるように 崇敬週末。 すべての権利、私は来週君たちが表示されます。