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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN 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
페이지를 렌더링하는 웹 브라우저
인터넷에서.

9
00:00:25,460 --> 00:00:30,410
>> 그래서 당신이 작성하는 방법을 정확하게 요청할 수 있습니다
다른 HTML에서 웹 페이지

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
>> 웹 브라우저하지만, 조금 더있다
이 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
>> 그래서 우리가 여기있는 것은 기본입니다
웹 페이지에 대한 청사진.

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
태그는 기본적으로 웹 브라우저를 알려
즉,이 봐, 뭔가

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
그럼 우리가 함께 머리 태그가
그 안에 제목 태그.

42
00:02:04,950 --> 00:02:09,430
당신이로 생각할 수있는 머리 태그
에 포함되어 HTML 코드

43
00:02:09,430 --> 00:02:12,670
웹 페이지의 대량
실제 내용.

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
다음 웹 페이지의 몸은, 오는
귀하의 웹 사이트의 실제 고기와 뼈.

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
우리의 웹 페이지가 너무 동성애 아니라,
하지만 걱정하지 마십시오.

50
00:02:36,810 --> 00:02:39,210
우리는 곧 그것을 단장합니다.

51
00:02:39,210 --> 00:02:44,070
>> 그래서 위의 HTML, 우리는 당신에게 아주주지
웹 페이지에 대한 기본 템플릿,

52
00:02:44,070 --> 00:02:46,310
아무것도 공상, 그냥 맨손으로 뼈.

53
00:02:46,310 --> 00:02:49,160
하지만 웹 페이지를 만드는거야 경우,
나는 무엇을 추가 할 경우

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
하나는 위의 그림.

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
>> 내가 여기 할거야 것은을 사용합니다
로 표시 속성 및 확인

84
00:04:36,860 --> 00:04:40,780
이미지에 대한 링크를,의는, CS50 TV를 가정 해 봅시다.

85
00:04:40,780 --> 00:04:44,460
그런 식으로, 사람들이 나에 클릭 할 때마다,
자신의 브라우저로 이동됩니다

86
00:04:44,460 --> 00:04:47,810
또 다른, 아마도 더 많은
유용한 웹 페이지.

87
00:04:47,810 --> 00:04:51,040
I는의 크기를 최소화하기 위해 가졌다
우리의 웹 페이지이기 때문에 약간의 텍스트

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 웹 페이지에 대한 탭을 클릭합니다.

92
00:05:04,410 --> 00:05:08,970
>> 마지막으로,이 전 스타일에 갈거야 가정 해 봅시다
이 웹 사이트 나중에 CSS를 사용하여.

93
00:05:08,970 --> 00:05:11,730
CSS는로 알려져 있습니다 무엇입니까
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
여기, 두 개의 서로 다른 종류의 설정
내 코드를 구성하는 데 도움이되는 식별자.

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 및 클래스 특성
유사하게 작동합니다.

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
영향에 대한 조직의 특성
내 웹 페이지의 미학.

108
00:06:03,730 --> 00:06:07,600
>> 부문 톱 내의 모든
유사 따라 연주하거나이있을 것이다

109
00:06:07,600 --> 00:06:12,010
에 HTML의 I 그룹의 다른 그룹
클래스 이미지와 비슷한 모습을 공유 할 것입니다.

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과 웹 페이지를 만들 수 있습니다.

113
00:06:21,480 --> 00:06:25,280
HTML은 다른 기능들을 가지고
다른 언어와 결합 할 때

114
00:06:25,280 --> 00:06:29,220
CSS 및 자바 스크립트와 같은, 정말 수
페이지에 띄는.

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
>> 내 이름은 Daven 파넘입니다.

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
내 이름은 Daven 파넘입니다.

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