[音楽再生] DAVID Jマラン：これはCS50であり、 これは、週7の開始です。 だから、戻って歓迎します。 そして、あなたはそれを思い出して 問題の4つのセット、 スカベンジャーハントのビットがありました これにより、いくつかの素晴らしい賞品のために あなたは写真を回復した後、 両方こことニューヘブンのスタッフが、 あなたはのような多くを見つけるために、チャレンジしました あなたができる限り、それらのコンピュータ科学者。 そして、我々は、全体を持っています 提出の束。 私はいくつかを共有しようと思いました あなたと今日ここに。 そして、我々はこれらのオンラインのすべてを投稿します。 しかし、特に、私はしたかったです よく1 to--あなたの注意を引きます、 サムはそれらのかなりの数にありました 一般的にこのようなポーズ。 しかし、それはのように、その表示されます 今朝、勝者 特定の誰かがでケンに選ばれました カメラでキャプチャされ、スタッフの24 あなたに取る場合、または少数のより多くの 写真に複数のスタッフを占めています。 こちらの写真は次のケンです ニューヘブンのメアリーに。 今、ケンは、しかし、ターン アウトコーナーケースのビットです それはまだ前に起こっていません。 それが起こらなかったことが判明 私には問題で細かい活字を置くために スタッフであることを述べている4を設定 素晴らしい賞品の対象外 ケンは、もちろん、の1つであるため スタッフの写真家。 さて、そうは言って、彼 もともと言って私を書きました オンラインこれらの写真を投稿しないでください。 私は、大部分で考えます 写真のほとんどのため、 この写真は見ていたこと このような小さなもの。 等が挙げられます。 しかし、ケンは私があなたを安心させたいです 彼は非常に良い写真だと、 彼は、彼がプロとります ぼやけていない写真、 その焦点に優れている、と彼 私たち自身のスタッフのかなりの数を取りました。 しかし、唯一認めるのではなく、 我々は我々が行うだろうと思って何ケン、 のリストを通過さ 提出され、実際の学生。 そして、それはそれでランスが判明 今朝のように15の写真 私たちの勝者でした。 そして、ここで描かれるが、コルトンとランスであります Skazと、自分自身と、そしてサムと。 しかし、それが判明しているのように 11:46ので、ほんの少し前に、 私は私の電子メールに戻って、見つかりました 我々はまだもう一つの提出があったこと ボニーという名前の学生が そのメールには、これだけを述べました。 嘘をつくつもりはない、私はよ 授業中にこれを行います。 そして、ちょうど添付を進め 14写真、ランスの15の内気な1。 しかし、ボニーの写真では、ターン サムは、複数のスタッフ出ました これらの中でも、私たちは私たちが考えたもの どうなるこれらの両方を認めるです。 だから、Dropboxのを得ることに加えて、 誰もが参加したスペース 受け取り、これらの2つのセクションでは、また意志 彼らのために素敵な仕出し弁当を受け取ります そのセクション この来週かみ合います。 そして、あなたは私たちから聞こえます、 それについてランスとボニー、。 彼らにそう大きなおめでとう。 さて、あなたのそれらは誰でしょう 昼食のような、より一般的に ケンブリッジでそのCS50ランチを知っています ニューヘブンは今週の金曜日です。 CS50のウェブサイトのスラッシュRSVPに移動します。 そして今、セミナーの言葉。 もっとcurricularly。 だから我々は近づいています 学期のポイント あなたが開始する場所 最終的なプロジェクトについて考えます。 そして、実際には、少しだけで、意志 いわゆるプリ提案が原因である可能。 だから、事前の提案はに意図されています 本当にかなり低い影響であると ためだけのチャンス あなたは短いメモを構成します 知らせるためにあなたの指導員 彼または彼女はあなたの考えているもの あなたの最終的なプロジェクトのために何をしたいかもしれません。 今、多くの学生が終わります Webベースの最終的なプロジェクトをやって。 そしてもちろん、私たちはしています このようになりまし先週 およびWebプログラミングへのダイビングを超えました。 だから場合は、心配しないように どのように絶対にないアイデアを持っていません あなたはその考えを建設します あなたはあなたの心を持っている可能性があります。 これは実際には強制関数であります あなたが考え、話しを取得します それについてのあなたのTFと。 しかし、それのお手伝いをし、 最終的に、最終的なプロジェクトで、 CS50は、伝統を持っていることを知っています セミナーを提供しています。 そして、これらは、上の手はオプションです、 や講義の機会に基づいて、 あるトピックについての詳細を学ぶために コー​​スのほとんどに補助 シラバス、それでも素晴らしいです 最終的なプロジェクトを推進するための材料。 そして、これはだリストです。 ここでニューヘブンのCS50スタッフ 用が出ています iOSの約今年 プログラミング、アンドロイド プログラミング、ゲーム開発、 より多くのツールのと房 そして言語と技術。 だからCS50のウェブサイトに目を離さありません。 そしてその間に、あなたがしたい場合 これらのいずれかであなたの興味を登録し、 CS50のスラッシュ・レジスタにアクセスしてください。 そして、私たちはその後のようフォローアップします 日と飛行時間と場所 そして、everything--ほとんどすべては意志 オンデマンドでストリーミングも利用できること あなたが実際にそれを作ることができない場合は後。 だから、難しい話は抜きにして、我々 GETとの最後の時間をオフに左。 そして、これがされたメッセージのようでした 仮想エンベロープの内側に、リコール、 我々は、ルータにルータから渡されたこと Webブラウザとウェブとの間のルータ サーバー。 そして、そのメッセージが見えました このような小さなもの。 これは、より難解なメッセージでした 封筒の中に実際にありました 一枚の紙に書かれました 最初の行は文字通り、スラッシュを得ると言います。 そして、ちょうど健全性チェックとして、 スラッシュが何を意味するのですか？ スラッシュは何を意味しているとき ウェブサイトを要求しますか？ あなたはすべての時間を要求します。 あなたは、あなたのウェブサイトを訪問するほとんどの任意の時間 実際にファイル名を入力しないでください。 あなたはおそらく、Facebook.comに行きます 、gmail.comなどを入力してください。 スラッシュは何を表すのでしょうか？ どのファイル？ または特異的に何ページ、？ インデックス、ええ。 デフォルトのページそう。 ですから、ファイルを指定しない場合 私たちが見ることから始めましょうとして名前を付け、 あなたは実際には要求しています 私のFacebookのデフォルトページを与えます または私は私の受信トレイを与えるか、または与えます 私ニュースのデフォルトページ CNNのウェブサイト上など。 そして、サーバは、応答します 何かでそのメッセージ このように、私は、そう言って HTTPバージョン1.1を話します。 ステータス200、 私たちはめったにない人間コード それは良いことだので、これまで参照してください。 それはOK、要求を意味しているので 受信し、適切に処理されていました。 そして、コンテンツの種類 明らかに応答して、 かなり頻繁に、常にではないが、テキストです。 具体的には、HTML。 そして、それは実際のです ここで、我々が今日見てください。 だから実際には、私は行くつもりです 先に、ブラウザを開きます。 私はあなたが使用することができ、Chromeを使用するつもりです 来て数週間でほとんどすべてのブラウザ。 我々は、一般的にChromeをお勧めします それは特にだから ソフトウェア開発者のための良いです。 これを内蔵の多くを持っています それを簡単にするツール HTMLとCSSだけでなく開発するために、 物事私たちは、今日の話を始めましょう、 だけでなく、他の言語にも。 そして、私は先に行くと行くつもりですto-- 私は、クリックまたは右を制御するつもりです Webページ上の任意の場所をクリックします。 そして、私は要素を点検するために行くつもりです。 そして、私は私を微調整するつもりです ここで画面が少しだけ。 私は一番下にこれを移動してみましょう。 だから、これはと呼ばれるものです Chromeのインスペクタ。 だから、これはデバッグのようなものです このツールは、クロームに組み込まれました。 あなたのすべては、すでにこれを持っています あなたはChromeを使用してきた場合。 そして、それはあなたが何が起こっているのか確認することができます 一部のWebページのボンネットの下に。 それでは、実際に見てみましょう 次のようにこれを見て。 これは、方法より多くの機能を持っています 私たちは今日気に。 しかし、ここの上にこれらのタブがあります。 要素、ネットワーク、ソース、 タイムライン、およびいくつかの他のもの。 私はをクリックするつもりです 一瞬のためのネットワーク。 そして、それは少し圧倒的です ここに一見。 しかし、私はするつもりですが許可されます 私はそれを少し簡略化します。 私はオンにするつもりです それは赤だように、光を記録します。 そして、私は、ログを保存すると言うつもりです。 そして、これはほんの少しです 私は考え出したもの 保存するために起こっているの経時 ブラウザで起こるすべて。 そして今、私は行くつもりです http://facebook.comへ。 実際には、のは、WWWをやらせます 良い測定のために、スラッシュ。 入力します。 多くのだからURL あなたが訪問している可能性があります。 そして今、Facebookのウェブ ページが一番上にアップします。 そして、その後の全体の束 ものは下部にあることで飛びました。 実際には、ことが判明 あなたがFacebook.comを訪問したとき、 あなただけの1つのHTTPリクエストを行っていません、 それはFacebook.comに行くことが判明 これらの封筒の41を送信し、 独自のget要求とそれぞれ、 スクリーンの後ろにもかかわらず、示されるように、 ここでは、画面の下部に、 それは、確かに、私のことを示しています ブラウザは、41の要求をしました。 合計では、861を転送しました キロバイト、それが何らかの理由で取りました 最大8つの秒 そのすべてをダウンロードします。 だから、実際には少し奇妙です Facebookのサイトはそれを取るだろうと 長い間、そのように、この場合にあってもよいです。 さて、このすべては、私は本当に気にしません 一番上の要求を除いています。 それでは、右ここでこの1に行きましょう 私はちょっとズームアウトしてみましょう。 そして、私はこれにズームインできます。 だから私は、にもかかわらず、左に何をやりましたか こっちで起こっがたくさんあり​​ます 私が強調表示されました Facebook.comして、 、私はスクロールダウンしていていることがわかり 、下にスクロール下にスクロール ヘッダーを要求します。 そして、あなたはChromeが表示されていることがわかります 私基本的に内側の内容 私が作った要求の。 それは全く同じで書式いません 方法が、取得の言及があると気づきます、 通知ホストの言及があり、 Facebook.com、パス、またはスラッシュ、 これは私が要求されたファイルです。 そして、私はスクロールする場合 バックアップ、我々は実際によ 何Facebookが返されることを確認 私には、これらのヘッダのすべてです。 だから、その仮想エンベロープの内側 実際にキーと値のペアがたくさんあり​​ます。 単語、コロン、およびその値。 単語、コロン、および値。 これらは、ヘッダと呼ばれています。 ところで、より詳細には、よりここにあります 私たちは実際に今気に。 しかし、これは2番目です そこに最後の1、 予告、Facebook.comのサーバーこと、 確かに、ここで述べたいくつかのテキストのHTMLを付属しています。 だから、このすべてが言うことです それは、Webを要求したとき にブラウザからページ サーバーは、そのサーバーが応答 自己のエンベロープ その内のテキストです。 つまり、HTML。 ハイパーテキストマークアップ言語。 どの他の言語で 今日はご紹介していること 人間やコンピュータが生成していること ためにウェブページを実装します。 具体的には、のは、このを見てみましょう。 私はすぐに戻って行くつもりです Facebookのウェブサイトへ。 そして、私はちょうどに行きますよ コントロールのクリック、または右クリック そして、ページのソースを表示をクリックしてください。 そして、あなたはChromeを使用しない場合でも、 IEはこれを行うことができ、Firefoxはこれを行うことができ、 Safariはあっても、メニューかかわらず、これを行うことができます オプションは少し違って見えるかもしれません。 そして、これは、HTMLのマークであり、 フェイスブックでの会社が書かれています。 そして、ここでは総称して、この言語 青と​​白のページを実装 私たちは一瞬前に見たこと。 さて、このビットが圧倒的です。 我々は左上を見上げるなら、私たちはしています いくつかのパターンを見に開始する予定。 たくさんあり​​ますように見えます これらの開角ブラケットの そして、このキーワードのHTMLがあります。 ここでは別のオープンです アングルブラケットとヘッド。 我々は下にスクロールした場合ここで、あります ダウンダウン、私はよ 先に行くとしようとするつもり 何かを検索します。 そこ途中以上の右側に ここでは、オープンブラケット本体です。 そして最後からリコール 私たちが提案された時間 最も簡単なWebページその 人間が書くかもしれません このような小さなになります。 オープンHTMLタグ、オープンヘッド タグ、オープンタイトルタグ、 その後、閉じたタイトル、閉鎖性頭部、オープン bodyタグ、テキストの一部は、身体を閉じ、 HTMLは閉じました。 しかし、ちょっとここで一時停止。 このコード、あなたがきた場合でも、 それを前に書かれたことはありません それでもかなり理解していません 何が起こっているのか、なかなか良さそうです。 右、それは非常にきれいです。 それは非常に文体うれしいです。 インデントや空白がたくさん。 Facebookのではありません。 なぜFacebookはそんなにあり HTMLを書くことで、私よりも悪いですか？ どうやら。 右、これは、1つのようなものです スタイルのための5つのうち。 説得力のある理由があります 彼らのためにこれらのコーナーをカットします。 すべての権利なので、彼らはしたくありません それが簡単にあなたがそれを読んでできるようにするため。 だから、ある意味では、彼らがしています それを難読化、ソートのそれをスクランブル 少なくとも審美的にそう それはMyspaceのために難しくなっていること 行くとそのリッピングします ホームページとそれ用のHTML。 それは、プログラムとことが​​判明 クロムを含むけれども、 我々は、超簡単にこれをクリーンアップすることができます。 だから、その理由としてそれほどではありません。 他に何が原因である可能性があります。 うん。 うん、ホワイトスペースコストデータ。 どういう意味ですか？ うん、まさに。 あなたは[Tab]キーロットまたはヒットした場合 スペースバーは、意味を考えてみましょう。 だから、キーボードのすべてのキーがあります [聞こえない] 1バイトとして表現。 だから、マークまたは開発者のいずれかを考えます これらの日は、一度だけ、スペースバーをヒット このHTMLページでその Facebookのホームページを表します。 そしてFacebookはたくさん持っています ユーザーのこれらの日。 だから、Facebookのホームページと仮定 今日億人が訪れています。 Facebookで誰かが持っています 一度だけ、スペースバーを押してください。 だから、一つの追加のバイト、 億を要求、 どれだけ多くのデータがFacebookのです インターネットを介して転送します 誰かがヒットするので 彼または彼女のキーボードのスペースバー？ 億バイト、1ギガバイトのか データは、Facebookのサーバーから送信されています 周りの人へ 正当な理由なく世界。 さて、それはただ1スペースです。 我々は実際にこれをきれい場合を想像 事アップし、それをインデントして、コメントを追加 ホワイトスペースの多くと タブ文字とスペース、 あなたが支出ギガバイトに終わります、 そうでない場合はテラバイトのスペースより。 だから超共通で Web開発の実際の世界 あなたのコードを縮小することです。 そして、私たちは最終的に表示されます どのようにこれを行う可能性があります。 しかし、今日、私たちはコードを書き始めましょう それは私たち人間が実際に読みやすいです。 あなたが戻って行く場合は、しかし、判明します Chromeでこのツールに要素を点検し、 以前、我々は、[ネットワーク]タブにありました。 それはあなたがに行けばことが判明 あなたが実際に見るものの要素]タブ、 Chromeのかなり印刷されています その同じHTMLのバージョン。 だから我々はそれをdeobfuscatedました。 だから、コンピュータの一致ません。 そして今、あなたが実際にすることができます 周りにクリックして起動します Webページで階層を表示します。 それでは、実際にこれを実行してみましょう。 私が先に行くと上の開くつもりです 私のMacのテキスト編集と呼ばれるプログラム。 そして、これがちょうどであることを思い出します 超シンプルなテキストプログラム。 Windowsはnotepad.exeをしています。 そして、私はそのままに行きますよ 次のように入力します。 ドキュメントタイプのHTM​​L、オープンブラケット HTMLは、ブラケットHTMLを閉じ、 我々は、こちらのページの頭を持っています こちらのページの頭の終わり、 タイトルは、Hello Worldのようになります。 そしてここに至るまで、私たちは必要 Webページのボディ。 クローズドボディ。 そしてここで、Hello Worldの。 大丈夫。 だから我々は、超高速のWebページを書いています。 私はとして保存するつもりです 私のデスクトップ上hello.html。 私のMacのは、文句を言うつもり ちょっと待って、と思って、 これはテキストフ​​ァイルで、行います あなたはそれを.TXT呼びたいですか？ しかし、いや、私は、ドットHTMLを使用したいと思います。 私があればそして素敵なものです ただ、このファイルをダブルクリック hello.html、ここで私のWebページです。 残念ながら、私は 世界で唯一の人物 誰が今、このページを訪問することができます。 ここでそれは明らかに住んでないから？ それは右、私のMac上でですか？ どの無用です。 この部屋には1のように インターネット上ではおろか 実際にそのページを訪問することができます。 だから、今日、私たちのようにする必要があり 別の要素を紹介します。 そして、これを行うには、私はするつもりです 先に行くと、クラウド9を開きます。 だからクラウド9は、Aコースであります クラウドベースのservice-- CS50 私達のワークスペースのすべてを持っていますIDE-- インターネット上のどこかに実行されています。 そして、それは私たちのファイルのすべてを意味します すでに公的にアクセス可能です。 それでは、先に行くと、これをやらせます。 私は先に行くつもりだと 新しいファイルNCS50IDEを作成します。 以前のように私はそれを保存するつもりです hello.htmlとして、[保存]をクリックします。 そして今、ちょうど時間を節約するために、私は行きますよ 先に行くと、このコードをコピー＆ペーストします のではなく、それを再入力します。 そして、それを保存します。 そして今、私は持っています ファイルがhello.htmlと呼ばれます。 しかし、どのように私は実際に行います Webページとしてそれを開きますか？ まあ、それはCS50に組み込ま判明します IDEが打ち鳴らすようなコンパイラであるだけでなく、 GDBのようなデバッガと 他のプログラムの房、 本格的な実際にはあります CS50、IDE内で実行されているWebサーバ。 あなたのすべては、すなわち、 ユーザー独自のWebサーバーを持っています。 そして、Webサーバは単に作品です その目的は生活の中でのソフトウェアの Webページを提供することです。 ブラウザからの要求をリッスンし、 少し仮想封筒で応答 その内側にあります 私が書いた内容。 したがって、このWebサーバがあります 実際にフリーでオープンソース。 どこにオープンソースだけの意味 他の誰かが持っているソフトウェア 私たちのすべてのことができていることを書かれて 実際に見るとでもダウンロードして、 ソースコードを変更します。 そして、それは、Apacheと呼ばれています。 そして、私たちはすることが少し楽に作りました Apacheの50を呼び出すことによって、CS50IDEに使用します。 実際にできるように 次のことを理解しています。 私は、Apache 50スタートを言うつもりです。 そして私はちょうどドットを言うつもりです。 そして、我々はややいくつかを見ます 言って不可解なメッセージ Apacheのドキュメント[設定？グループ？] ホームには、Ubuntu、それが何であれ、 ワークスペースを大幅に削減します。 Webサーバの起動 正常にApacheの2。 だから、長い話を短く、私は ただボタンをプッシュしています そして今のWebサーバーをオン TCPポート上のインターネット上でリスニング 特定のアドレスに80。 そしてそれはここに言うと、 これは、ベースが変更されます あなたのユーザー名およびその他の要因に、 私はこれをクリックした場合しかし、今気付きます IDE50ドットjharvardなどと そう、そのすべてのこの時間に気付きます 過去数のために 週間、あなたが持っている可能性があります 独自のユーザー名ことに気づきました 右上に埋設されています CS50IDEのコーナー。 そして、実際にこのすべてされていること 時間のことができますのアドレス Web経由ですべてのファイルをご覧ください。 今まで、それは重要だっていません、 一般的にC言語で、あなたのため で実行されている事が必要 ターミナルではなく、ウェブ上。 しかし、今日、私たちは開始します ウェブベースのコードを書きます 我々はしたいん パブリックURLでアクセスできます。 だから、私はするつもりです 行うには、次のURLをクリックです。 そして、私はかなり見ているに気づきます 醜いインデックス、ディレクトリのリスト、 しかし、どのようなファイルは、おそらくあなたに飛び出し？ Hello.html。 私が保存されているためです 私のワークスペース内のファイル。 そして、何私は、WebサーバのApacheを指示しました Davidのワークスペースディレクトリに見ています。 そして、中に誰を聞かせて 世界はこれらのファイルを参照してください。 そして実際、今、私の場合 hello.htmlをクリックして、 私は、このタブ内に正確にそのファイルを参照してください。 今、クラウド9のやって気付きます 私たちのために少し役立つ何か。 CS50 IDE内では、あります注意してください 突然アドレスバー。 私たちがしているにもかかわらずだからです CS50IDEを訪問するChromeを使用して、 CS50IDEの内部には、独自のです 今、Webブラウザのバージョン。 そしてそうではなく、 以下のようなものを複雑に、 私は先に行くつもりです そしてちょうどこのURLをコピーしてください。 私は先に、ちょうど行くつもりです 自分のChromeウィンドウを開きます。 だからここに魔法、ノーCS50IDEはありません。 私は文字通り貼り付けるつもりです 私のJハーバードURLと入力し、Enterを押します。 出来上がり、今私と 理論的には、誰も インターネット上で、私は設定した場合 適切なアクセス許可、 このファイルを訪問することができます。 そして今、私が言っている場合 hello.html、ほら、そこに 私の信じられないほどがっかりウェブページです。 それでは、迅速な健全性チェックを実行してみましょう。 そのすべてのため 概念的なセットアップです。 そして、私たちは本当に実際にはいませんでした どのようにHTML自体を記述する方法を教えました。 ご質問、これまで ちょうど起こったものに？ はい。 CS50は、これらのウェブページを所有していますか？ どんな意味で？ 良い質問。 だからCS50のはCS50.io.を所有しています 我々は確かにそのドメイン名を買ってきました。 そして君たちの性質上、 CS50IDEにログイン、 あなたはすべてのサブドメインと呼ばれるものを得ます。 だからマランIDE50-、またはIDE50-Rob.CS50.io、 それはあなたの内で固有のアドレスです 私たちのドメイン名。 そう当然の目的のために、 あなたはあなた自身のユニークなアドレスを持っています。 しかし、我々はによって物事を単純化してきました トップレベルドメイン、CS50ドットを購入 I / Oと、その後他の人です その内、いわば。 そして、我々はそれに戻ってきます おそらく数週間で、 特に最終的なプロジェクトで あなたの時間、ときにいくつかの 独自のドメイン名を取得したい場合があります。 比較的実際です 単純明快。 大丈夫。 それでは、今、これを実行してみましょう。 私はに戻って行くつもりです CS50IDE、どこに私のファイルを今、 hello.html、すべてのこと興味深いものではありません。 私が何かをしたいと思います それよりも少しよりよいです。 だから私はこのような何かをするつもりです。 オープンparagraphs.html私をしてみましょう。 だから、これは私が事前に書いたファイルです。 その上で、のような いつも、私たちはコメントしています。 しかし、HTMLのコメント 少し違って見えます。 ライン3とライン14で、あなた コメントを開始するための構文を参照してください。 コメントを終了します。 しかし、原料のどれもで 機能的に問題の間。 それはちょうどノートです ここで何が起こっているのか人間。 そして、ちょうど迅速な健全性など 私は下にスクロールすると、チェックし、 明白な新しいは何ですか 我々が導入しましタグ？ これまで私たちが見てきたので、タグが開かれています ブラケットHTML、ヘッド、タイトル、ボディ。 しかし、今、明らかに新しい何ですか？ うん、そうP。 pタグまたは段落タグ。 そして、私はいくつかのデフォルトを借り ラテン語のテキストは、私の段落を構成しています。 私が欲しかったものため、 実証どのようにあなたがかもしれないです HTMLでテキストの段落を表します。 だから何が起こることを始めています ここに既にあるということです パターン展開。 そして、私が先に行くと、これを実行してみましょう。 私が最初にApacheをオフにしてみましょう。 そして、私は自分自身を起動するためにそれを伝えるつもりです 再び今日の源7の内部 Mディレクトリ。 私はすべてにアクセスできるように。 そして今、私はに戻った場合 このディレクトリのリスト、 私は今日からすべてのファイルを参照してください注意してください。 そして、あなたはで表示されます 次の問題が設定され、我々はよ あなたに指示を与えます まさにこれを行うため。 私はparagraphs.html開くと、これがかもしれません だけでなく、プログラミング言語のように見えます あなたにあなたはラテン語を話すか読んでいない場合。 しかし、これはわずか3パラグラフです HTMLでマークアップされたテキストの。 そして段落に気付きます それらの間の休憩。 それが判明ので、 とにも関わらず これを行うために傾斜するかもしれません、 現実の世界でのに対し、 あなたが行を挿入したい場合は 物事の間の休憩、 あなたは非常に単純かもしれません これを行うと、保存を押してください。 そして今、私はここでリロードする場合は、通知 そのすべてがちょうど一緒にぼかし テキストのひとつブロブインチ HTMLはダム言語の一種であるので。 このような中で使用されるように意図されています 道ブラウザのみとなり、その 明示的にあなたがすることを教え何をすべきか。 だから、あなたがそれを教えていない場合 私に新しい段落を与え、 あなたは新しい段落を参照するつもりはありません。 そして、実際には、どのような ブラウザは何をするだろう あなたが入力してEnterキーを押した場合でもあり、 のは、何度も何度も言わせて そして再び、このテキストの道を移動します 画面上にダウンしてから保存します そしてその後、ブラウザが起こっているリロード その空白をすべて崩壊します 1つだけ、目に見える空白に。 大丈夫。 だから、段落タグです。 だからパターンは何ですか それは、ここで開発していますか？ まあ、それはケースのように思われます HTMLは、すべてのタグの開始についてです タグを終了します。 そして、タグは何ですか？ まあ、それは構文だけの塊です。 オープンブラケット、キーワード、 閉じ括弧は、タグです。 またはタグを開始します。 そして、あなたがいるとき 自分自身を表現行われ、 あなたのように段落で行われています、 あなたは反対のことを話すことを行ってください。 しかし、逆はかなり後方ではありません。 あなたは、単に同じタグの接頭辞 このようなスラッシュで名前を付けます。 大丈夫。 だから、すべてが刺激的ではありません。 そして、実際には、我々が行っていません ウェブすべてのより興味深いです。 私がしたい場合は 大きく、大胆なもの？ だから、ここでの例だということが判明 headings.htmlで、どこで私の体で、 私は、H1タグ、H2、H3を持っています 4つ、5つ、または6、それらのすべて かなり難解なようです。 しかし、私はこれを開く行けば たとえば、のは見てみましょう。 Headings.html。 だから、デフォルトでブラウザを使用すると、テキストを与えることができます それは大きく、本質的に異なるサイズの大胆です。 H1は大きいです。 H6が小さく、その後で その間に他のすべて。 だから面白いのですが、それでも 本当に私が知っているウェブ。 私たちがしたい場合、私は何を持っています リストのようなもの。 。 だからここの箇条書きリストです ハーバード大学の住宅の3。 どのようにこのことについてでしたか？ まあ、するlist.htmlを見てみましょう。 そしてここで、我々が表示さ funkinessの少し しかし、それでは、何が起こっているのか考えてみましょう。 だから、あなたがちょうど見たものに基づいて、 ULは順不同リストの略です。 順序なしリストは、単に箇条書きを意味します。 何の数字はありません。 ANと呼ばれるものもあります タグでOLであるリストを命じました。 そして、LI、リスト項目は、それが意味するすべてです。 そしてそれを自動的に 数あなたのためにすべてを。 しかし、私のインデントの場合も、すべて 空白はちょうど私のためです。 ブラウザではありません 実際に気になるだろう。 だからにもかかわらず、あなたはできませんでした これは、単に明確にするために行います、 あなたもいけないけれども ブラウザはまだでしょう うまくそれを理解することができます。 私は自分でリロードを打ちますよ ブラウザ、私はリロードをクリックしています そして変化は起こっていません まだブラウザため 私はそれが何を教えて正確に何をして。 大丈夫。 これは、すべてのテキストだけです。 今度はもっと面白い何かをしてみましょう。 私は先に行くつもりだと このHTMLの一部を借ります。 私は先に行くつもりだと ここで新しいファイルを作成します。 そして、我々はこのrick.htmlと呼ぶことにします。 私たちは不釣り合いに持っています 何かを使用 この中でリックロールと呼ばれます クラス今年、私は知りません、 それだけで有機的に起こりました。 そして今、それが制御不能に持っています。 だから、僕はそれで行くつもりです。 そして、私はGoogleに行けば 画像とリック・アストリー。 私たちは、なぜあなたがわからない場合 これは、ちょうどウィキペディアをよく読んで。 あなたがリンクをクリックしたたびに、 誰かがどこかで笑っれています。 そして、私がahead--そこに行ってみましょう 我々はのはこの画像を見てみましょう、行きます。 そこでここでは持っています Google画像イメージ。 そしてのはこれがあると仮定しましょう 合理的にどこでもインターネット上で。 だから私はそれが私のためにOKだと仮定するつもりです 実際に私のWebページにこれを入れて。 私は先に行くつもりです および画像のURLをコピーしてください。 そして今、私はクラウドに戻った場合 9、のは、私がここで何ができるかを見てみましょう。 だからここだけのWebページです。 これは（笑）、リック・アストリーあり、 私はすぐに戻って行くつもりです 私のブラウザに、リロード、および興味深いです。 リックはどこにありますか？ だから、私が起こったかを見てみましょう。 実は、私はするつもりです 私はそれをしなかったようなふりをします。 [聞こえない]ここで彼を置きます。 私たちはその瞬間に戻ってそれに来ます。 だからここrick.htmlです。 だから、リック・アストリーではありません。 だから、我々はできるが判明 実際にここで彼を追加します。 これはリック・アストリーです。 私は私にそのイメージを与えると言うつもりです ソースは、私はちょうどコピーしたURLで、これ 明らかに満足しています 誕生日の何かまたは他の。 そして今、私はするつもりです このようなタグを閉じます。 だから、これはスーパーロングラップしています。 しかし、すべて私がしたことに気づきます オープンブラケット画像が行われ、 この属性を持つソース。 そして、それは本当に長いURLです。 そして、一番最後に、これに気づきます。 なぜ私が行っているスラッシュ角括弧 代わりに、他のすべてのタグのように、 オープンブラケットを持ちます、 IMG、ブラケットを閉じて？ ただでさえ、あなたの場合の推測を取ります 全く馴染みがありません 前のHTMLと。 だから、それが閉じ方法です コマンドが、なぜ それは本当に直感的でありません もう少し何かをする意味 近い画像のような冗長な？ うん。 うん。 ただ、意味的に、音痴はありません イメージを起動し、画像を終了、 それはどちらかありますかそうではありません。 だから、ギャップを残してしても意味がありません 画像の内部何か他のもののために。 あなたはちょうどそれを行うことはできません。 そしてそう構文 一般的にちょうどになります 内部スラッシュを行うには 開始タグまたは開始タグの [保存]を押します。 だから私は今、今、このファイルをリロードする場合 私はここで良いWebページの料理を持っています。 そして、我々は確かに可能性 本当に人を困らせます 代わりに埋め込むことで YouTubeのリンクなどがあります。 そして、実際には、任意の時間 あなたは、YouTubeに行ってきました そして、誤って実際に私を聞かせて リックはここで自分自身をロールバックします。 だから、リックロール。 だからリックroll--私はここに行くつもりです。 [音楽再生] [OK]を、一人はそれを好きでした。 あなたのであれば、すべてのこの時間に気付きます もちろん、あなたを共有リンクをクリックします そのあなたが実際にできるURLを取得 メールや法医学の画像に埋め込みます または問題に設定するか、スライドインチ そして今、私が代わりに埋め込みをクリックした場合、 気づくそのすべてのこの時間、このようなもの ありました。 私が先に行くと、これをコピーするつもりです。 そして、ちょうど私たちは私は、それをよりよく見ることができます 私のテキストエディタに貼り付けしよう。 このことに注意してくださいどのような YouTubeはあなたを語ってきました。 あなたが訪問するたびに YouTubeのビデオ、あなたの場合 あなたのビデオを埋め込みたいです Webページは、単にこれをつかみます。 だから、これはまた別であります HTMLタグはインラインフレームと呼ばれます。 またはラインフレームインチ だから、それはあまりにももう少し見えます すべての他のものよりも複雑。 だから、画像ことが判明 タグと明らかにIFRAMEタグ 属性と呼ばれるものになります。 そして、これは別です HTMLの文法の一部。 タグのに加えて、 名前、オープンブラケットタグ名、 あなたは、タグの動作を制御することができます 属性の全体の束を有することにより 値に等しいです。 属性が値に等しいです。 だから例えば、 YouTubeは私たちに語っています あなたはこのビデオの幅が必要な場合 420ピクセル、高さに 315ピクセルに、それはです どのようにHTMLでそれを表現します。 ビデオのソースが起こっています その長いYouTubeのURLにします して、いくつかの他のもの 枠線のように、ゼロであります おそらくありますことを意味するように 事の周りに境界線はありません。 おそらく、フルスクリーンを許可します ユーザーことを意味 ボタンをクリックすると、 実際にフルスクリーンビデオ。 だから私は本当にになりたい場合 リック・ドットHTMLでここで印象的な、 ではなく、イメージタグを使用してみましょう 私はそれを削除し、代わりにこれを貼り付けます。 そして今、リロード。 そして今、ここで我々は再び行きます。 すべての権利、それは十分です。 すべての権利、私がしようとしますので、 ハード再びそれをしません。 だからここに持ち帰りのいくつかは何ですか？ これらのウェブページのような醜いように、HTML、 あり、実際にはかなり簡単です。 これは、プログラミング言語ではありません。 これは、機能を持っていません。 これは、ループを持っていません。 これは、条件を持っていません。 それが持っているすべては、何十ものです 異なるタグ、その各々の ゼロ以上の属性を持っています。 そして、実際には、何を約楽しいです あなたにダイビングを始めると、HTML それは非常に自己教えやすいということです。 それが取るすべては理解しています HTMLの一般的なフレームワークの。 タグとは何ですか、属性は何ですか、 あなたが実際にWebページを設定する方法 次のように。 そして、他のすべてが本当に結果であります オンラインリファレンスで検索します またはいくつかを実行する方法をグーグル 技術や私たちが見てきたように、 Facebookのソースを見て コー​​ド、ウェブサイトを見て あなたがそれを好きなことをすると、ソースコードだと そこにどのように開発者を理解します 実際に物事を打ち出しました。 だから我々は、同様に画像を行うことができます。 そして実際に、我々は一瞬前にそれをやりました。 私が先に行くとあなたをちょうど見せしましょう​​。 ここではいくつかのサンプルコードです。 あなたは気難しい猫を参照してください。 だから、私ができることに注意してください ここでイメージタグを持っています。 そして、私はそれ以上のコメントを持っています。 私は選択肢を持っています アクセシビリティのためのテキスト。 画面を使用しますので、誰か 視力の理由のためにリーダー 実際にその後、彼らを持つことができます スクリーンリーダーは気難しい猫を言います。 彼らはことができない場合ので、 画像を参照してください、彼ら 少なくとも自分のコンピュータを持つことができます それが何であるかを口頭でそれらを教えてください。 そして、そのファイルのソースがcat.jpegです。 だから実際には、私が本当にしたい場合 私が持っていることができるもの、賢い取得done-- 私は、リック・アストリーに行くことを約束しません 私の代わりに猫のためのgoogleするつもりです。 そして、私はGoogle画像検索に行けば ここで、我々は仮定します これは私の猫の絵です。 私はコントロールがクリックさがあると または右誤って、この上でクリック 不気味。 そしてcat.jpeg私は行きますよ 私のデスクトップに保存します。 私は今、クラウド9に戻りましょう。 そのここで注意してください、私がすることができます ローカルファイルをアップロードするために行きます。 そして、私はこれをつかむ場合 ファイル、cat.jpeg、予告 私はそれをドラッグすることができることと クラウド9にドロップします それがここで私に叫ぶだろう。 我々はすでにたので あなたcat.jpegファイルを与えられました、 それはに超簡単です あなたがきた写真をつかみます Facebookのから取ら Flickrや状又は そして実際にそれをドラッグ＆ドロップ クラウド9にし、それを作ります あなた自身の個人の一部 Webサイトまたは問題 我々はすぐにわかるよう七、八を設定します。 そして、ときに 最終的にはその猫を訪問し、 私は、同じ猫をダウンロードしたと仮定すると、 そのthat--通知が愛らしいました。 あなたが見ることになることです ここで、この顔のようなもの。 だからファイルが Webページ内の参照 あなた自身でローカルのいずれかとすることができます いくつかの他のサーバ上のアカウントまたはリモート リックの場合と同様に、 少し前アストリー写真。 だからここでは何をelse-- 他に我々はここで行うことができますか？ それでは、次のを見てみましょう。 あなたは種類のクールなものを知っていますか？ 我々はこれまでに作ってきました 非常に静的なWebページ。 私は次のように物事をスパイスにしたいです。 私は自分の検索エンジンを作りたいです。 そうしてみましょう、検索エンジンを作るために 先に行くと、これをやって起動。 私が先に行くと、作成するつもりです sea​​rch.htmlのと呼ばれる新しいファイル。 そして、私たちはオンライン版をprefabedています。 おっと。 端末ウィンドウに貼り付けないでください。 オンラインプレハブバージョン。 そして、私は次のように開始するつもりです。 だからここの始まりです sea​​rch.htmlのと呼ばれるファイル。 私はそれを保存するつもりです 今日のソースディレクトリ。 私は、この検索を呼ぶつもりです。 実は、私たちはそれを改善するでしょう。 CS50の検索と、実際にはそれをブランド。 そして今、私が言おうとしています H1 CS50検索のようなもの。 そしてここに至るまで、H2はすぐに来ます。 そして、ちょうど要約に、H1および H2は何それぞれ意味ですか？ うん、そう大きくて大胆な、と 同じ大きさ、それでも大胆ではありません。 だから私はこれを保存し、こっちに行けば、 それでは、ファイルsearch.htmlのを見てみましょう。 すべての権利、およびこの1 [聞こえない] right--です。 待機する。 ダビデは混乱しています。 ああ、それはすぐそこです。 ダビデは馬鹿です。 OK。 だから、それはあります。 だからCS50検索はすぐに来ます。 だから今、の合成ましょう 我々は先週やりました。 我々は話をどこについて HTTPの下位レベルの力学。 そして、これらの新しいアイデア ちょうどあるHTMLの あなたこのマークアップ言語 正確に何を行うには、ブラウザに伝えます 私たちの独自の検索エンジンを実装しています。 だからだけではなく 私は、すぐに来ていると言って 紹介しよう 何かがformタグと呼ばれます。 そして、この形式では、私はするつもりです 入力フィールドのようなものを持っています。 そして、この入力の名前 フィールドが、私はそれを呼び出すつもりだQ. そして、この入力フィールドの種類 私は「テキスト」であると言うつもりです。 テキストフ​​ィールドと、として、我々はよ 参照、単なるテキストボックスです。 そしてそれは、持っているためにここに感知しません この時点でその中の何でも。 そして、私は単純に行きますよ それにタグを閉じます forwardタグ自体に右スラッシュ。 そして私はするつもりです 一つの他の入力を持っています。 入力タイプは提出等しいです。 そして私はするつもりです あまりにもこの1を閉じます。 そして今、私はここに戻って行くつもりです。 そして、すでに我々が表示され、 かなり醜いとはいえ、私はしました の始まりを持って ここに私自身の検索ページ。 実際に、私がしてみましょう 少しこれをクリーンアップします。 それは上のが判明 ここで入力、私が持つことができます プレースホルダと呼ばれる別の属性。 そして、私はキーワードのようなものが表示される場合があり、 またはより具体的には、Qを照会します。 そして今、私が持っている、気づきます 灰色のテキストのこの種 それはのように消えます すぐに私は入力を始めると、 しかし、それはおそらく何か あなたは他のウェブページで見てきました。 私は実際に送信]ボタンが好きではありません。 だから私は実際に与えるつもりです ボタンを検索の値を提出してください。 そして今、私はリロードすれば、ことがわかり 私のボタンは、名前の検索になります。 あなたが知っている、私は本当にしないでください ここにロゴなどがあります。 だから、Googleのフォントジェネレータ。 私はこれをさらに盛り上げるたいです。 だからCS50検索。 私は私自身のロゴを作成してみましょう。 それは良さそうに見えます。 だから今私はこれが来るas--保存してみましょう。 それはどこに行くのですか？ そこ。 OK。 それを逃しました。 保存します。 愚かなブラウザ。 スタンバイ、我々はするつもりです 一度、すべてのためにこれを修正します。 そうしよう。 大丈夫。 ごめんなさい。 休みの日。 さて、これはファンキーです。 フルスクリーンを終了します。 大丈夫。 さて、通常のように 人物、として画像を保存します。 logo.gifを。 今私はCS50IDEに行くつもりだし、 私は単純にロゴをつかむつもりです、 私はにそれをドラッグするつもりです 私のソース7ディレクトリ、 ファイルがすでに存在している、私はそれでOKです。 だから私はそれを上書きするつもりです 私はすでにそれを持っていたので。 そして今、どのように私はこれを取り除くのですか？ それでは、ここで先に行くと、やってみましょう 画像ソースはlogo.gifを等しくなります。 これを閉じます。 セーブ。 そして今、私は私の検索に戻る場合 ページには、今ではかなり良い見ています。 すべての権利、それはない持つように 非常に便利な何もして。 実際に、私は検索してみましょう 猫のために何が起こるかを参照してください。 猫。 畜生。 それはちょうど明らかに、動作しません。 だから、重要な部分は何ですか それがここに欠けていますか？ 右、あなたが任意のHTMLを知らなくても、 私は携帯電話の形をマークアップ開始しました 私は、入力を取得するにはどのようにそれを言いました 私はテキストボックスと送信ボタンを与え、 何個は明らかに不足していますか？ 私たちが実際に取得したいとし このことは、正常に動作し。 私たちは何をする必要がありますか？ 我々は、バックエンドを実装する必要が データベースや検索エンジン自体、 それが取ることになるだろう 時間の全体の多く、率直に言って。 だから我々は最後の時間何をしたか覚えています。 だから、Googleで何かを検索する場合 あなたは事前に、オフにしています リコール、インスタント検索。 だから、私はそれをオフにしてみましょう 実際にこのように 古い学校のブラウザのように動作し、 私は今、猫のようなものを検索する場合、 URLがどのように見えるかを思い出してください。 これは非常に不可解です。 しかし、そこに埋め込まれ、 リコールは、スラッシュ検索です。 疑問符qは猫に等しいです。 そしてそれは私を与えるように思われます 検索結果の全体の束。 だから、私は何をするつもりだ知っていますか？ 私は借りるつもりです わずか数分のためのGoogle。 私はオーバー行くつもりです ここで、私は言うつもりです この作用を形成すること、又は いわば先、 文字通りグーグルでなければなりません。 そして、この方法は、私が欲しかったです 使用して取得することになるだろう。 だから、アクションは何ですか？ アクションは不気味という名前が付けられ、 それはちょうど意味します 誰が処理するために起こっています このフォームのアクション？ 私が検索をクリックすると、 結果は行くべきですか？ そして私は今、私のフォームに戻る場合 ここで、私のWebページをリロードします そして今、何かを検索 犬のように、今気付きます 私はGoogleに再実装しています。 右？ 私は何かを検索する場合 他に、それだけではなく、犬のために働きます、 それはまた、猫のために働きます。 また、CS50のために働きます。 そして、[OK]を、これは単にです 圧倒的な下、そうではありませんか？ すべての権利、それが実際に動作します。 だから、実際に何が起こっているされていますか？ だから私は使用して、私のブラウザを教えてきました HTMLは、ユーザからの入力を取ります そして実際にその入力を送ります リモートサーバにHTTPを使用して。 そして、私のブラウザのため HTTPは、実際、理解します どのようにURLを作成 私は、私のブラウザでオーバー終わります 何が起こるか気づきます ときに私は犬を探しました。 私が検索をクリックすると、ことに気づきます 私が意図したとおりにURLが変更 クエリが犬に等しいgoogle.com/search~~Vします。 そして、それはフォームためです この方法は、取得しているので、知っています、 単にそこにそのURLに追加します。 さて、これらのウェブページはまだ醜いです。 それでは、他のものを紹介しましょう 構文の作品たちができるならば、今日。 そして、これは既知のものです カスケードスタイルシートなど。 だから、私は見てみましょう ここで、この例とを参照してください。 我々は何が起こっているのか推測することができます。 これはCSS0.htmlです。 そして、これはどこのものです 少し醜い取得します。 残念ながらそのため、 ウェブの世界では、 HTMLだけではすべてを行うことはできません。 だから、あなたがしたい場合は あなたのWeb​​ページのスタイル設定、 あなたが実際に焦点を当てる必要があります 別の方法で美学。 だからここに、私は私のウェブの体を持っています これの内部ページは大きなdiv要素です。 そして、divがちょうど部門を意味します。 だから、段落のようだが、それ 同じ意味を持っていません テキストの段落の。 これはただの手段に ブラウザは、ここに来ます 私のWebの大きな矩形領域 ページには、私は特別にそれを処理します。 そのdiv要素が始まる今、21行です。 そして、ちょうど推測を取ります。 上のライン21の効果は何ですか ページの内容の残りの部分？ それをセンタリング。 それで全部です。 だから我々はの方法を見ていません 実際にテキストをセンタリング。 実際には、私の検索エンジン、 実際のグーグルとは異なり、 すべての左に渡って正当化されました。 そして今ライン21で、私はちょっと、と言っています ブラウザは、ページの部門を作成します。 ちょうど私は大きな、目に見えない四角形を与えます。 それは私がしたい方法です Webページを考えてみてください。 次のようにして、それを型にはめます。 これらの引用符の内側には、 今、第二言語です 今日は導入することを カスケードスタイルシートと呼ばれます。 ありがたいことに、それはあまりにもではありません プログラミング言語 ので、その構文は非常に限られたですが、 また、非常にその機能に制限 HTMLはすべてに約あるのに対し、 ウェブページのデータをマークアップ ウェブページの構造。 CSSは一般に約 ラストマイル、美学、 サイズと色となって Webページで正確に適切な配置。 実際、それが形成されています キーと値のペアを持ちます。 この、テキストなどのプロパティ コロンに続いて、合わせ、 その値が続きます この場合には、中心であるプロパティ、。 そして今、あなたに気付きます 巣これらの事をすることができます。 私はその中にすべてのものを望んでいた場合 私は、中央揃えするに強調表示して、 私はライン21を持っている理由ですし、 対応するライン31。 しかし、今ジョンを言いたいと仮定 ハーバード大学は、私のホームページへようこそ。 著作権記号ジョン・ハーバード。 そして、私は最初の必要があるとし これらの行は、かなり大きなものとなります。 36ピクセル。 だから、まともなサイズです。 そして、私はその重量が太字になりたかったです。 しかし、その下の、 私は、小さいテキストが欲しいです。 そして、その下に、私が欲しいです さらに小さなテキスト。 ごめんなさい。 今日はオフの日のように感じています。 だから今、私はこれを表現するために何をやっていますか？ ここではライン22に埋設されています div要素またはネストされたdiv要素、可能ならば。 それはあまりにも独自のスタイルタグを持っています。 私は36のフォントサイズを指定します。 私は太字のフォントの太さを指定します。 ここでダウン、私は24ピクセルを指定します。 そして最後に、28行目で、私は12を指定します。 だから迅速な健全性チェックなど これを読んで、人間として、 画面上のどの言葉です 実際に大胆になるだろうか？ どの行が実際に大胆がありますか？ ちょうどジョン・ハーバード。 右？ 22行目はちょっと言うと同じようにあるので ブラウザは、こちらのページの一部門です。 それはフォントサイズ36ポイントを作ります。 フォントの太さを太字にします。 すぐに達するよう 対応する終了タグ またはライン24上の閉じタグ、 その手段、ちょっとブラウザ、 それはあなたがやっているであるものは何でもやって停止します。 とにもかかわらず、明確にすることに気付きます ライン22は、これらの属性のすべてを持っています スタイルのように、ときに 24行目でタグを閉じて、 あなただけのタグの名前を言及しています。 あなたは、単語のスタイルを繰り返さありませんか これらの引用符の内側だもの。 そして私は今、これを見てそうだとすれば 私のブラウザでは、のは見てみましょう 最終結果を見て。私が行ってみよう 先にCSS 0で、このファイルに。 そしてそれはまだかなり平野です、 しかし、非常に興味深い取得。 しかし、それはそこのが判明 私はここで行うことができます他のもの、 そして作るのリスクのあります この完全に恐ろしいです、 ここでその中に気づく私の 私のWebページの本体、 私は変な何かを行うことができます BGや背景色などがあります。 そして、迅速、あなたの好きな色は何ですか？ グリーン私は聞きました。 大丈夫。 だから今、私は今、リロードがヒットした場合、 我々は、緑のWebページを持っています。 すべての権利なので、それは悪くはありません。 そして今、私はこれをしたい場合は、本当に クールな、私は私のテキストの色を作ることができます でも赤。 それでは、これはどのようなものか見てみましょう。 今ではかなり良い見ています。 そして、ダウンここで、本当にあなたの場合 誰かを台無しにしたいです または、あなたがなりたい場合 それらの人々の1人 ウェブを訪問にあなたをだまししようとします ページ彼らがGoogleにだまされてきたので、 思考に全体の束があります キーワードのリロード、見てみましょうlike--。 それはどこに行きましたか？ そして、私たちがそれ。 大丈夫。 だから私はさておき、私たちとわかるようにこれを言います 数週間のうちにこのようなものについての話 我々はについて話すとき セキュリティ、実際にあなたの場合 埋め込む全体房の Webページ内のキーワード、 彼らはには見えない方にも Googleのような人間、誰かは、もちろん、 まだ実際にこれを見つけることができます。 すべての権利、それはかなりですので、 かなり迅速に恐ろしいです。 実際には、すべてではありません そのくらい自分のウェブとは異なり、 学部としてページ、これは 私は見つけるために周りグーグル開始しました 私の古いウェブサイトの過去のバージョン。 それはかなり悪かったです。 実際に、私は見つけました ただクラスの前に1。 しかし、そこに悪いことがあります。 これは明らかに私のでした バック1996年のホームページ。 どうやら私はそれがだと思いました 人々に自分の名前を聞いて、適切な 彼らはことができる前に 実際に私のWebページを参照してください。 そして、私はそれらを示しました 愚かな何か、おそらく。 私は次回のためにもっと掘りますよ。 しかし、今のところ、してみましょう デザインを少し考えてみましょう。 私たちはスタイルについて説明しました。 これまで、このページと 私が書いたほとんどのすべて 文体はかなりきれいです。 しかし、どのようなデザインは？ まあ、多くの冗長性があります 何で私がここでやってきました。 私は言葉を述べました 場所のカップルで色。 私はのカップルでフォントサイズを述べました 場所のカップルでの場所で大胆。 そして、基本的に、私は共同です 二つの言語を混入。 私はタグとしてHTMLを持っている私の 属性と、その後突然、 引用符の間に、私が持っています 第二言語今日 再び、ちょうどこれらと呼ばれるCSS、 キーと値のペア、またはこれらの特性 コロンで区切られました。 それは、その多くが判明します 我々C言語のように 取り除くために始めることができます ヘッダファイルにいくつかのコード、 私たちはHTMLで同じことを行うことができます。 次のようにそして、それに向けてのステップです。 このバージョンは、CSS1.htmlであることに注意してください 構造的にまったく同じウェブページ。 だから私は、全体の束を持っています div要素が、この時、私はしました ラッパーの脱却 あなたがわかるようDIV。 そして、私はこれらの3つのdivを与えてくれました 上部、中央、下、一意のID。 によるので、これは、いいです これらの部門を与えます ページ一意の識別子の、 私は他の場所でそれらを参照することができます。 どこ？ まあ、私が上にスクロールしてみましょう。 そして、これまで、いつでも我々は見てきました Webページの先頭に、何 私たちが持っていた唯一のタグ Webページの頭？ 少し大きな声で。 これまでのところだけでタイトル。 しかし、それはそこのが判明 いくつか他のもの あなたは、そこにのいずれかを置くことができます それがスタイルタグと呼ばれています。 それで先ほど、私たちが見て style属性で。 スタイルタグがありますが判明。 これは、内部​​の所属します Webページのヘッド。 そして今、私がやっているものに気づきます。 私はこの内持ちます スタイルタグの後。 私は、文字通り20行に言及してい 私はスタイル設定するタグの名前。 それから私は、オープン中括弧を持っています そして、中括弧を閉じました。 Cとその精神においては非常に似てますが、 再び、これは、関数ではなく、 これは、ここでは単に構文的な詳細です。 そしてもちろん、私が言っています ブラウザ、ちょっとブラウザ、 ページの全体の体を作ります 中央のテキストの配置を持っています。 そして、これは以下のように言っています。 ねえブラウザは、HTMLが表示された場合 ページ内の要素またはタグその 上部の一意の識別子を有し、 そう、ハッシュ記号は、ここだけの意味します トップのユニークなアイデア、先に行きます そのフォントサイズ36を作ります 大胆かつそのフォントの太さ。 ねえ、ブラウザ、その要素 IDが24ピクセルにし、真ん中です。 そして、あなたが表示された場合、ブラウザねえ 下部のアイデアは、それ12ピクセルにします。 最後に効果 正確にSAMがあります。 私はCSSの1に入る場合は、 ページは同じに見えます。 しかし、我々は一歩です わずかに良いデザイン。 私は今、CSS2にここに戻って行こう そして私がやった他に何を参照してください。 今のページは本当に、本当にきれいです。 実際に、私はすべてを収めることができます こちらのページの内容。 しかし、どのような新しいタグ私を持っています 明らかに、導入されましたか？ リンク。 そして、それは、タグの最高の名前ではありません それはある意味で、リンクではないので 我々はそれを知っているが、このことは、 いくつかの他のファイル内のリンク。 これは、Cに種のようなシャープなどがあります これは、HTMLでの方法です ちょっとブラウザを言って、 の内容を取りに行きます ファイルはcss2.cssと呼ばれます。 関係、私には、 それはスタイルシートであるということです。 そして実際、それは何の1 カスケードスタイルシート手段のSさん。 これは、スタイルシートです。 それは含む単なるテキストフ​​ァイルです プロパティの全体の束。 これは、スタイルの全体の束です あなたは、ページに適用すること。 そして、これは明らかです 第二のファイルを参照します。 そして、私はそれを開いた場合、CSS2.css、 すべて私がやったことに気付きます すべてをコピーして貼り付けています このファイルにこれの。 そして今、あなたがきた場合であっても決して 前にこのようなものをコード化され、 ただで検討 ことわざエンジニアリング帽子 なぜこのaは、上 おそらく、よりよい設計？ これらのCSSプロパティを因数分解、 自分のファイルにそれらを置きます。 我々はこれを解決したとしても 5分前のような問題 非常に最初のバージョンです。 我々は改善されていませんでした 文体ページ、 これはちょうど良いです ある意味でデザイン。 どうして...と思うのですか？ うん。 より柔軟な方法？ うん。 どこに行きたいのであれば 背中や状況を変えます、 今、あなたは一つの場所を持っています どこに物事を変更することができます。 そして、実際には、何かのため 以下のような問題は、7セット 我々は実装します場所 株式取引のウェブサイト、 それが持っているために起こっています ページの全体の束。 そして、それは本当にだろう 迷惑なあなたが判断した場合、HM、 私は本当に私が欲しい、24ピクセルを好きではありません それは28ピクセルまたはわずかに大きいことにします。 そして、しなければなりません グローバルな検索と置換 またはあなたのウェブサイトのすべてのファイルを開きます 単に実際の値を変更します。 これらのスタイルを因数分解することにより、 一つの中央の場所に、 あなたは今、1つのテキストフ​​ァイルを開くことができます CS50IDEで任意のプログラムに、 それを変更し、それを保存、およびdone。 あなたはそれらを伝播してきました どこにでも変化します。 そして、それは同じです ドットHファイルでも同様に。 このようにしてそうご質問 これまでこの構文の？ すべての権利、私たちはしました それはそう、すべてを行います 実際にハイパーリンクを実装除きます。 そしてそれでは、先に行くと、これをやらせます。 私は先に行ってみようと ここで新しいファイルを作成します。 私はそれを呼び出すつもりです link.html、今日のコードに入れます。 そして、私はオープンするつもりです ブラケットドキュメントタイプのHTM​​L。 さておき、この事として、 トップ、このドキュメント型宣言、 それは奇妙なだけです 感嘆符を持ちます。 あなたはそこにそれをしなければならないし、それ 私たちは、HTMLバージョン5を使用していることを意味します。 古いバージョンの 言語ははるかに長くいました あなたがそこに置くために必要な文字列。 そこでここでは、リンクと呼ばれる例があります。 私はここで私のWebページの本体が必要です。 そしてここで、hrefの等号 それでは、HTTP://www.disney.comを言わせて 私のお気に入りのウェブサイトは、我々は言うでしょう。 すべての権利なので、非常に 無害な、ユーザーフレンドリーなページ。 私は今、自分のディレクトリに移動した場合 商品一覧はこちらとlink.htmlを開き、 私たちは、ハイパーテキストを持っています。 そして実際、これはどこにあります HTTPでのHはから来ています。 ハイパーテキスト転送プロトコル テキストの転送についてです それは、他のリソースへのハイパーリンクを持っています。 そして実際、ここでは、よく知られています レトロな場合、青色のリンクをクリックした場合に、 実際Disney.comに私をリードします。 今、ああ、それはすぐに出て来ています。 すべての権利、今、何をしているいくつかの この場合の影響の？ そして率直に言って、世界が開始します もう少し慣れます また、少し怖いです だけでなく、もう少し あなたが始めると自己弁護 これらのことを理解します。 オッズは、あなたのいくつか、あなたが行く場合であるため、 Gmailの迷惑メールフォルダを介して、あるいは あなたの受信トレイ、あなたはおそらくしました 電子メールのいくつかの種類を得て それはあなたを変更するように求めています パスワード多分または多分確認します あなたのPayPalのアカウント情報やその他もろもろ。 そして、実際には、あなたが受けている可能性があります ここにクリックのように述べているもの あなたのPayPalパスワードをリセットします。 そして今、場合には、注意してください これはDisn​​ey.comではありません しかし、のようなbadplace.comと ここにテキストことに注意して、リロード 全く何も言うことができます。 そして実際に、これはただの言葉です。 なぜ私は実際に超悪質なことはありません そして、http://www.paypal.comを言います。 こちらをクリックしてあなたのPayPalをリセット パスワードと今リロード。 これは右、かなり正当に見えますか？ 私が意味する、私は上をクリックしないであろう ただこれを言う電子メール。 しかし、ここで二分法に気づきます。 それはwww.paypal.com言い、 実際に、ちょっと待って、 私たちは、あなたがしたいことを知っています セキュリティのための。 だから今、www.paypal.com HTTPSに行き、 しかし、あなたは前にこれをやったことがない場合は、 の習慣を身に取得するのですか ここで少し、リンクの上にマウスを移動。 そして、それは見ることが難しいです そこに、画面上で、 そして、それはここではないすべてのことに簡単です。 しかし、方法ダウン、ここで 小さな小さなコーナー 実際にブラウザを行います 私たちが行っていることを教えてくれ Paypal.comの代わりにbadplace.comします。 さて、ここで我々はこの一緒に行くのですか？ 我々が今日やったすべての例、 我々はハードコーディングされており、手動で入力しました。 ウェブは、信じられないほどです 興味のないときには、ハード そのコンテンツので、あなたのウェブページをコーディング 静的であり、変更することはありません。 もちろん、私たちのすべての お気に入りのウェブサイト今日、 それは、GmailやTwitterのかですか Facebookや他の任意の数 動的です。 彼らは、で変更しています ユーザ入力に応答し ちょうどGoogleの検索結果のように。 だから水曜日に、我々は何をすべきかです 我々は、HTMLやCSSの導入を残します 我々が取ると、私たちの背後にあります 今、私たちは当然のために それを知っていると私たちは紹介 新しいプログラミング言語 などと呼ばPHP、 Cは、私たちを与えるために起こっています 実際にプログラムを作成する力 自身が出力を生成すること。 ここでは、使用しています PHPは動的にウェブを生成します この新しい言語を使用してページ。 だから、もっとその上で水曜日に。 あなたを参照してください。 [音楽再生]