1
00:00:00,000 --> 00:00:06,986

2
00:00:06,986 --> 00:00:10,450
>> 祈るFARNHAM：今日、私はするつもりだ
HTMLについて少し話し、

3
00:00:10,450 --> 00:00:12,330
ハイパーテキストマークアップ言語。

4
00:00:12,330 --> 00:00:14,450
あなたは、これらの日どこにでもHTMLを参照してください。

5
00:00:14,450 --> 00:00:17,190
実際には、あなたがこれを見ている場合
ブラウザ内のビデオ、あなたがしている

6
00:00:17,190 --> 00:00:19,120
今のHTMLを見て。

7
00:00:19,120 --> 00:00:22,760
HTMLはプログラミング言語ではありません、
むしろ、それが使用するマークアップ言語の

8
00:00:22,760 --> 00:00:25,460
ページをレンダリングするためのWebブラウザ
インターネット上の。

9
00:00:25,460 --> 00:00:30,410
>> だから、書いているかを正確に、頼むかもしれない
異なるHTMLでWebページ

10
00:00:30,410 --> 00:00:33,574
プログラミングでプログラムを書くことから
C言語のような言語？

11
00:00:33,574 --> 00:00:38,010
さて、Cは非常に厳しいとの言語です
である必要があり、構文規則

12
00:00:38,010 --> 00:00:39,880
それを実行する前にコンパイル。

13
00:00:39,880 --> 00:00:43,070
あなたは今まで含めるのを忘れてしまった場合
ステートメントの末尾にセミコロン

14
00:00:43,070 --> 00:00:46,660
あなたのCコードは、私が話しているか知っている
厳密な構文に関しては約。

15
00:00:46,660 --> 00:00:50,360
>> Webブラウザは、しかし、もう少しです
それはHTMLになると寛容。

16
00:00:50,360 --> 00:00:53,860
あなたのHTMLは文法的でなくても、
正しい、あなたのページは、まだ可能性があり

17
00:00:53,860 --> 00:00:57,150
それは可能性があり、ブラウザによって表示されますが、
あなたが意図したとおりに見ていない。

18
00:00:57,150 --> 00:00:59,640
だから、に常に最善です
ルールに従います。

19
00:00:59,640 --> 00:01:01,990
直感を得るための最良の方法
物事がどのように機能するかについては、ある

20
00:01:01,990 --> 00:01:03,300
例を経る。

21
00:01:03,300 --> 00:01:07,360
>> それでは、私たちがここにあることは基本的なものです
Webページの青写真。

22
00:01:07,360 --> 00:01:10,690
おそらく、多くのことに気づいた
山括弧の間にある。

23
00:01:10,690 --> 00:01:12,900
さて、それらは単にタグです。

24
00:01:12,900 --> 00:01:15,810
タグは、基本的には、Webブラウザに通知
つまり、ちょっと、何か

25
00:01:15,810 --> 00:01:17,150
あなたのように来ている。

26
00:01:17,150 --> 00:01:20,770
しかし覚えておいて、あなたが開くたびに
タグは、あなたがされれば、それを閉じる必要があり

27
00:01:20,770 --> 00:01:21,750
それを使用して行う。

28
00:01:21,750 --> 00:01:24,690
>> だから例えば、私はセクションを開き、
オープンして、コードの

29
00:01:24,690 --> 00:01:26,960
ブラケット本体、閉じ括弧。

30
00:01:26,960 --> 00:01:31,280
私はその後、私の、この場合には、いくつかのテキストを追加
私はに行ってきましたし、最初のウェブページ

31
00:01:31,280 --> 00:01:35,540
このセクションを閉じる、私が使用して、ほぼ
この時間を除いて同一のタグ

32
00:01:35,540 --> 00:01:37,660
フォワードボディの前にスラッシュ。

33
00:01:37,660 --> 00:01:41,140
一般的に、これはあなたがしている形式です
あなたが開いているときはいつでも使用するつもり

34
00:01:41,140 --> 00:01:42,680
とタグを閉じる。

35
00:01:42,680 --> 00:01:47,900
一緒に、開始タグと終了タグ
要素と呼ばれるものが構成されている。

36
00:01:47,900 --> 00:01:51,870
>> あなたが最初の行を見ると、あなたがよ
続く感嘆符を参照してください

37
00:01:51,870 --> 00:01:53,350
のDOCTYPE HTML。

38
00:01:53,350 --> 00:01:56,280
これは実際にはブラウザを語っている
ファイルは、ウェブページであること

39
00:01:56,280 --> 00:01:58,280
HTMLで記述された。

40
00:01:58,280 --> 00:02:01,970
HTMLタグは、基本的に言います、
ここではいくつかのHTMLが付属しています。

41
00:02:01,970 --> 00:02:04,950
その後、我々はしてheadタグを持っている
その中にタイトルタグ。

42
00:02:04,950 --> 00:02:09,430
あなたのように考えることができheadタグ
ために来る構成するHTMLコード

43
00:02:09,430 --> 00:02:12,670
あなたのWeb​​ページのの大部分
実際のコンテンツ。

44
00:02:12,670 --> 00:02:16,700
>> 一般的に、あなたのタイトルを置く
ここで、ウェブページ、いくつかはありますが

45
00:02:16,700 --> 00:02:19,350
表示されることが他のタグ
ここにも。

46
00:02:19,350 --> 00:02:25,020
次のWebページの本体は、付属してい
あなたのウェブサイトの実際の肉と骨。

47
00:02:25,020 --> 00:02:28,910
この例では、単純に入れてきた
文、私の最初のウェブページ、

48
00:02:28,910 --> 00:02:34,100
これ、私たちは私たちのサイトを実行すると、検索します
このような小さなもの。

49
00:02:34,100 --> 00:02:36,810
弊社のWebページには、あまりにも奇妙ではありません、
しかし、心配しないでください。

50
00:02:36,810 --> 00:02:39,210
我々はすぐにそれを飾るだろう。

51
00:02:39,210 --> 00:02:44,070
>> したがって、上記のHTML、私たちはあなたを非常にあげる
Webページの基本テンプレート、

52
00:02:44,070 --> 00:02:46,310
空想は何もない、ただ裸の骨。

53
00:02:46,310 --> 00:02:49,160
しかし、私は、Webページを作成していた場合、
私が追加したい場合はどう

54
00:02:49,160 --> 00:02:50,760
私自身、言う、の絵？

55
00:02:50,760 --> 00:02:52,760
まあ、私はそれを行うことができます。

56
00:02:52,760 --> 00:02:55,460
する方法はいくつかあります
あなたのサイトに画像を追加。

57
00:02:55,460 --> 00:02:59,780
画像は、同じフォルダ内にある場合
HTMLファイルは、あなたがリンクすることができ

58
00:02:59,780 --> 00:03:01,950
このようなパスを介して画像。

59
00:03:01,950 --> 00:03:05,910
>> あなたは、その後、画像タグで開く
におけるalt属性インによって

60
00:03:05,910 --> 00:03:07,240
イメージのソース。

61
00:03:07,240 --> 00:03:12,030
alt属性の値はいくつかある
場合の代替テキスト、ユーザーができない

62
00:03:12,030 --> 00:03:13,580
画像を参照してください。

63
00:03:13,580 --> 00:03:19,680
別の方法としては、にリンクすることができます
このような完全なURLを経由して画像。

64
00:03:19,680 --> 00:03:24,180
今、そのウェブサイトは実際に存在していない、
しかしの絵があった場合には

65
00:03:24,180 --> 00:03:27,760
そのアドレスで私は、私が使用することができます
インクルードするソ​​ースURL

66
00:03:27,760 --> 00:03:29,930
私のウェブサイト上でそのイメージ。

67
00:03:29,930 --> 00:03:35,590
いずれにしても、あなたはずっとで終わる
きれいウェブサイト、次のようなもの。

68
00:03:35,590 --> 00:03:39,730
>> まあ、それはかなりクールだが、私は親切
のここにもいくつかのテキストが欲しい。

69
00:03:39,730 --> 00:03:43,020
それでは、ただ何かを追加してみましょう
上記の超簡単

70
00:03:43,020 --> 00:03:45,210
ヘッダのようなイメージ。

71
00:03:45,210 --> 00:03:50,830
私がこれまで行ってきたすべてのヘッダーを使用している
タグ、H1、および改行タグ、BR。

72
00:03:50,830 --> 00:03:54,900
ヘッダータグは、フォントが少しします
少し大きく、より目立つ。

73
00:03:54,900 --> 00:03:58,930
他に改行タグ、
手が冷たいの一種である。

74
00:03:58,930 --> 00:04:03,720
他のほとんどのタグとは異なり、次のものがありません
開閉ブレークタグだけ

75
00:04:03,720 --> 00:04:05,120
1は、上に示した。

76
00:04:05,120 --> 00:04:10,420
ブレークはコンテンツがないためです
そして、したがって、空の要素である。

77
00:04:10,420 --> 00:04:14,940
>> このような空要素は、あなたが開くことができます
単に同時に閉じる

78
00:04:14,940 --> 00:04:20,420
にスラッシュを含む
初期化宣言の終わり。

79
00:04:20,420 --> 00:04:24,390
だから今私のウェブサイトが少し見える
このようなもの。

80
00:04:24,390 --> 00:04:27,410
より良いが、それはちょっと感じている
行き止まりのような。

81
00:04:27,410 --> 00:04:30,850
脇に行くためにどこにもあります
このメイン·ページから。

82
00:04:30,850 --> 00:04:33,075
さて、で、その問題を修正しましょう
リンクを含む。

83
00:04:33,075 --> 00:04:36,860
>> 私がここで何をするつもりだと、使用している
属性には、Aと表記して作る

84
00:04:36,860 --> 00:04:40,780
画像へのリンクを、のは、CS50テレビましょう。

85
00:04:40,780 --> 00:04:44,460
そのように、誰もが私にクリックするたびに、
そのブラウザがに送信されます

86
00:04:44,460 --> 00:04:47,810
別の、おそらくより
便利なWebページ。

87
00:04:47,810 --> 00:04:51,040
私はのサイズを最小化しなければならなかった
弊社のWebページがあるので、少しテキスト

88
00:04:51,040 --> 00:04:52,470
より高度になっ。

89
00:04:52,470 --> 00:04:54,590
うまくいけば、それはまだ明らかだ。

90
00:04:54,590 --> 00:04:59,460
私のウェブサイトは、まったく同じに見えます
今、私は写真をクリックするたびに、

91
00:04:59,460 --> 00:05:04,410
私のブラウザは、別のものを開きます
CS50.tv Webページのタブ。

92
00:05:04,410 --> 00:05:08,970
>> 最後に、のは私がスタイルに行くよと言ってみましょう
後でCSSを使用してこのウェブサイト。

93
00:05:08,970 --> 00:05:11,730
CSSとして知られるものである
カスケードスタイルシート。

94
00:05:11,730 --> 00:05:15,230
そして、それは基本的に、効率的に提供
編集する方法とスタイル

95
00:05:15,230 --> 00:05:16,910
コー​​ドの類似したブロック。

96
00:05:16,910 --> 00:05:21,290
私は自分のHTMLにを整理始めたい
それが簡単に後でスタイルを作る。

97
00:05:21,290 --> 00:05:26,900
ここで、私は2つの異なる種類を設定
私のコードを整理するのに役立つ識別子。

98
00:05:26,900 --> 00:05:31,170
私は内部のID属性を使用しました
分割、divタグ、および私が使ってきた

99
00:05:31,170 --> 00:05:34,120
クラスは、内部の属性
別のdivタグ。

100
00:05:34,120 --> 00:05:37,190
>> idとclass属性
同様に機能します。

101
00:05:37,190 --> 00:05:41,210
唯一の違いは、あなただけ持つことができている
一つの要素、特定のIDが、

102
00:05:41,210 --> 00:05:43,600
任意の数の要素
クラスを共有することができます。

103
00:05:43,600 --> 00:05:47,690
したがって、たとえば、私は、クラスを使用することができます
画像を複数回、しかし私はできません

104
00:05:47,690 --> 00:05:50,533
別の部門を作成
IDトップと。

105
00:05:50,533 --> 00:05:54,750
私は、CSSに入っていないが、
一般的に使用される他の言語

106
00:05:54,750 --> 00:05:59,700
HTMLと一緒に、かつて私はスタイリングを開始
CSSを使用した私のコードは、私はこれらを使用することができます

107
00:05:59,700 --> 00:06:03,730
影響を受けた組織の属性
私のWebページの美学。

108
00:06:03,730 --> 00:06:07,600
>> 部門トップの中のすべて
類似したスタイリングや任意のを持つことになります

109
00:06:07,600 --> 00:06:12,010
へのHTMLの私のグループの他のグループ
クラスImageは、同様の外観を共有することになります。

110
00:06:12,010 --> 00:06:15,700
これは編集しようとするよりもはるかに簡単です
とスタイル画像やブロックの

111
00:06:15,700 --> 00:06:17,690
個別テキスト。

112
00:06:17,690 --> 00:06:21,480
>> だから我々はどのように基礎の上に行ってきました
HTMLでWebページを作る。

113
00:06:21,480 --> 00:06:25,280
HTMLは、あまりにも他の機能の束を持っている
他の言語と組み合わせた場合、その

114
00:06:25,280 --> 00:06:29,220
CSSやJavaScriptのような、本当にできる
ページを目立たせる。

115
00:06:29,220 --> 00:06:32,960
に慣れるための最良の方法
HTMLは、それを周りだけで台無しにされる

116
00:06:32,960 --> 00:06:35,120
どのような動作し、何をしないことを参照して下さい。

117
00:06:35,120 --> 00:06:36,570
>> 私の名前は祈るファーナムです。

118
00:06:36,570 --> 00:06:37,820
これはCS50である。

119
00:06:37,820 --> 00:06:40,640

120
00:06:40,640 --> 00:06:45,690
>> したがって、たとえば、私が使用することができます
クラス画像 - 

121
00:06:45,690 --> 00:06:48,028
いや、非常に多くの属性があります。

122
00:06:48,028 --> 00:06:52,500

123
00:06:52,500 --> 00:06:53,950
私の名前は祈るファーナムです。

124
00:06:53,950 --> 00:06:58,560
これは、CS 650です。

125
00:06:58,560 --> 00:06:59,810
私はCSSを言いたい。

126
00:06:59,810 --> 00:07:02,325

127
00:07:02,325 --> 00:07:03,575
これはCSSです。

128
00:07:03,575 --> 00:07:05,408