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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Hari ini, aku akan
berbicara sedikit tentang HTML,

3
00:00:10,450 --> 00:00:12,330
HyperText Markup Language.

4
00:00:12,330 --> 00:00:14,450
Anda melihat HTML di mana-mana hari ini.

5
00:00:14,450 --> 00:00:17,190
Bahkan, jika Anda menonton ini
video dalam browser, Anda

6
00:00:17,190 --> 00:00:19,120
melihat HTML sekarang.

7
00:00:19,120 --> 00:00:22,760
HTML bukan merupakan bahasa pemrograman,
bukan, itu adalah bahasa markup yang digunakan oleh

8
00:00:22,760 --> 00:00:25,460
web browser untuk membuat halaman
di internet.

9
00:00:25,460 --> 00:00:30,410
>> Jadi, Anda mungkin bertanya, bagaimana sebenarnya menulis
halaman web dalam HTML yang berbeda

10
00:00:30,410 --> 00:00:33,574
dari menulis sebuah program dalam pemrograman sebuah
bahasa seperti C?

11
00:00:33,574 --> 00:00:38,010
Nah, C adalah bahasa dengan sangat ketat
aturan sintaksis yang perlu

12
00:00:38,010 --> 00:00:39,880
dikompilasi sebelum bisa dijalankan.

13
00:00:39,880 --> 00:00:43,070
Jika Anda pernah lupa untuk menyertakan
titik koma pada akhir pernyataan di

14
00:00:43,070 --> 00:00:46,660
kode C Anda, Anda tahu apa yang saya bicarakan
tentang dalam hal sintaks yang ketat.

15
00:00:46,660 --> 00:00:50,360
>> Web browser meskipun, sedikit lebih
memaafkan ketika datang ke HTML.

16
00:00:50,360 --> 00:00:53,860
Bahkan jika HTML Anda tidak sintaksis
benar, halaman Anda mungkin masih

17
00:00:53,860 --> 00:00:57,150
ditampilkan oleh browser, tapi mungkin
tidak terlihat seperti yang Anda inginkan.

18
00:00:57,150 --> 00:00:59,640
Jadi selalu yang terbaik untuk
mengikuti aturan.

19
00:00:59,640 --> 00:01:01,990
Cara terbaik untuk mendapatkan intuisi
tentang bagaimana hal-hal bekerja adalah untuk

20
00:01:01,990 --> 00:01:03,300
pergi melalui contoh.

21
00:01:03,300 --> 00:01:07,360
>> Jadi apa yang kita miliki di sini adalah dasar
cetak biru untuk halaman web.

22
00:01:07,360 --> 00:01:10,690
Anda mungkin melihat banyak hal
di antara tanda kurung siku.

23
00:01:10,690 --> 00:01:12,900
Nah, mereka hanya tag.

24
00:01:12,900 --> 00:01:15,810
Tags dasarnya menginformasikan web browser
itu, hey, sesuatu

25
00:01:15,810 --> 00:01:17,150
yang datang dengan cara Anda.

26
00:01:17,150 --> 00:01:20,770
Ingat juga, setiap kali Anda membuka
tag, Anda perlu untuk menutupnya setelah Anda

27
00:01:20,770 --> 00:01:21,750
selesai menggunakannya.

28
00:01:21,750 --> 00:01:24,690
>> Jadi misalnya, saya buka bagian sebuah
kode dengan terbuka

29
00:01:24,690 --> 00:01:26,960
braket tubuh, braket dekat.

30
00:01:26,960 --> 00:01:31,280
Saya kemudian menambahkan beberapa teks, dalam hal ini, saya
Halaman web pertama kemudian ketika saya pergi ke

31
00:01:31,280 --> 00:01:35,540
tutup bagian ini, saya menggunakan hampir satu
tag identik kecuali kali ini dengan

32
00:01:35,540 --> 00:01:37,660
garis miring sebelum tubuh.

33
00:01:37,660 --> 00:01:41,140
Secara umum, ini adalah format Anda
akan menggunakan setiap kali Anda membuka

34
00:01:41,140 --> 00:01:42,680
dan menutup tag.

35
00:01:42,680 --> 00:01:47,900
Bersama-sama, sebuah tag terbuka dan tag akhir
menulis apa yang disebut elemen.

36
00:01:47,900 --> 00:01:51,870
>> Jika anda melihat baris pertama, Anda akan
melihat tanda seru diikuti oleh

37
00:01:51,870 --> 00:01:53,350
DOCTYPE html.

38
00:01:53,350 --> 00:01:56,280
Ini benar-benar hanya memberitahu browser Anda
bahwa file tersebut adalah halaman web

39
00:01:56,280 --> 00:01:58,280
ditulis dalam HTML.

40
00:01:58,280 --> 00:02:01,970
Tag HTML pada dasarnya mengatakan,
di sini datang beberapa HTML.

41
00:02:01,970 --> 00:02:04,950
Kemudian kita memiliki tag head dengan
tag judul di dalamnya.

42
00:02:04,950 --> 00:02:09,430
Tag kepala yang dapat Anda pikirkan sebagai
terdiri dari kode HTML yang datang untuk

43
00:02:09,430 --> 00:02:12,670
sebagian besar halaman web Anda
konten yang sebenarnya.

44
00:02:12,670 --> 00:02:16,700
>> Secara umum, Anda menempatkan judul Anda
halaman web di sini, meskipun ada beberapa

45
00:02:16,700 --> 00:02:19,350
tag lain yang dapat muncul
di sini juga.

46
00:02:19,350 --> 00:02:25,020
Selanjutnya muncul halaman web tubuh Anda, yang
daging dan tulang yang sebenarnya dari situs Anda.

47
00:02:25,020 --> 00:02:28,910
Dalam contoh kita, kita hanya menempatkan sederhana
kalimat, My Webpage Pertama,

48
00:02:28,910 --> 00:02:34,100
yang, jika kita menjalankan situs kami, akan terlihat
sedikit sesuatu seperti ini.

49
00:02:34,100 --> 00:02:36,810
Halaman web kami tidak terlalu aneh,
tapi jangan khawatir.

50
00:02:36,810 --> 00:02:39,210
Kami akan merapikan itu segera.

51
00:02:39,210 --> 00:02:44,070
>> Jadi HTML di atas, kami akan memberikan Anda yang sangat
template dasar untuk halaman web,

52
00:02:44,070 --> 00:02:46,310
tidak ada yang mewah, hanya tulang-tulang.

53
00:02:46,310 --> 00:02:49,160
Tapi kalau aku membuat halaman web,
bagaimana jika saya ingin menambahkan

54
00:02:49,160 --> 00:02:50,760
gambar, katakanlah, diriku sendiri?

55
00:02:50,760 --> 00:02:52,760
Yah, aku bisa melakukan itu.

56
00:02:52,760 --> 00:02:55,460
Ada beberapa cara untuk
menambahkan gambar ke situs Anda.

57
00:02:55,460 --> 00:02:59,780
Jika gambar di folder yang sama dengan
file HTML Anda, Anda dapat link ke

58
00:02:59,780 --> 00:03:01,950
gambar melalui jalan seperti ini.

59
00:03:01,950 --> 00:03:05,910
>> Anda membuka dengan tag gambar diikuti
by di Alt atribut di

60
00:03:05,910 --> 00:03:07,240
sumber gambar.

61
00:03:07,240 --> 00:03:12,030
Nilai Alt atribut itu hanya beberapa
teks alternatif dalam hal pengguna tidak bisa

62
00:03:12,030 --> 00:03:13,580
lihat gambar.

63
00:03:13,580 --> 00:03:19,680
Atau, Anda juga dapat membuat link ke
gambar melalui URL lengkap, seperti ini.

64
00:03:19,680 --> 00:03:24,180
Sekarang, situs web yang tidak benar-benar ada,
tetapi jika ada gambar

65
00:03:24,180 --> 00:03:27,760
saya di alamat itu, saya bisa menggunakan
URL sumber untuk memasukkan

66
00:03:27,760 --> 00:03:29,930
citranya di website saya.

67
00:03:29,930 --> 00:03:35,590
Either way, Anda berakhir dengan banyak
situs cantik, sesuatu seperti ini.

68
00:03:35,590 --> 00:03:39,730
>> Nah, itu cukup keren, tapi aku agak
dari ingin beberapa teks di sini juga.

69
00:03:39,730 --> 00:03:43,020
Jadi mari kita menambahkan sesuatu
super sederhana di atas

70
00:03:43,020 --> 00:03:45,210
gambar, seperti header.

71
00:03:45,210 --> 00:03:50,830
Semua yang telah saya lakukan sejauh ini adalah menggunakan header
tag, H1, dan istirahat tag line, br.

72
00:03:50,830 --> 00:03:54,900
Header tag membuat font sedikit
sedikit lebih besar dan lebih menonjol.

73
00:03:54,900 --> 00:03:58,930
Tag line istirahat, di sisi lain
tangan, agak dingin.

74
00:03:58,930 --> 00:04:03,720
Tidak seperti kebanyakan tag lain, Anda tidak memiliki
tag pembukaan dan penutupan istirahat, hanya

75
00:04:03,720 --> 00:04:05,120
salah satu yang ditunjukkan di atas.

76
00:04:05,120 --> 00:04:10,420
Hal ini karena istirahat tidak memiliki konten
dan karena itu, elemen kosong.

77
00:04:10,420 --> 00:04:14,940
>> Elemen kosong seperti ini, Anda dapat membuka
dan dekat secara bersamaan hanya dengan

78
00:04:14,940 --> 00:04:20,420
termasuk garis miring di
akhir deklarasi awal.

79
00:04:20,420 --> 00:04:24,390
Jadi sekarang website saya terlihat sedikit
sesuatu seperti ini.

80
00:04:24,390 --> 00:04:27,410
Lebih baik, tapi jenis rasanya
seperti jalan buntu.

81
00:04:27,410 --> 00:04:30,850
Ada tempat lain untuk pergi ke samping
dari halaman utama ini.

82
00:04:30,850 --> 00:04:33,075
Nah, mari kita memperbaikinya dengan
termasuk link.

83
00:04:33,075 --> 00:04:36,860
>> Apa yang akan saya lakukan di sini adalah menggunakan
atribut dinotasikan dengan A dan membuat

84
00:04:36,860 --> 00:04:40,780
image link ke, katakanlah, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Dengan cara itu, setiap kali ada yang mengklik pada saya,
browser mereka akan diarahkan untuk

86
00:04:44,460 --> 00:04:47,810
lain, mungkin lebih
berguna, halaman web.

87
00:04:47,810 --> 00:04:51,040
Aku sudah untuk meminimalkan ukuran
teks sedikit karena halaman web kami adalah

88
00:04:51,040 --> 00:04:52,470
semakin maju.

89
00:04:52,470 --> 00:04:54,590
Tapi mudah-mudahan, itu masih jelas.

90
00:04:54,590 --> 00:04:59,460
Website saya tampak persis sama hanya
sekarang, setiap kali saya klik pada gambar,

91
00:04:59,460 --> 00:05:04,410
browser saya akan membuka lain
tab untuk halaman web CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Terakhir, katakanlah aku akan gaya
website ini kemudian menggunakan CSS.

93
00:05:08,970 --> 00:05:11,730
CSS adalah apa yang dikenal sebagai
cascading style sheet.

94
00:05:11,730 --> 00:05:15,230
Dan pada dasarnya menyediakan efisien
cara untuk mengedit dan gaya

95
00:05:15,230 --> 00:05:16,910
blok kode yang sama.

96
00:05:16,910 --> 00:05:21,290
Saya ingin memulai mengatur HTML saya
membuatnya lebih mudah untuk gaya nanti.

97
00:05:21,290 --> 00:05:26,900
Di sini, saya mendirikan dua macam
pengidentifikasi untuk membantu mengatur kode saya.

98
00:05:26,900 --> 00:05:31,170
Saya telah menggunakan ID atribut di dalam
divisi, atau tag div, dan aku telah menggunakan

99
00:05:31,170 --> 00:05:34,120
Kelas atribut dalam
tag div lain.

100
00:05:34,120 --> 00:05:37,190
>> ID dan Kelas atribut
bekerja sama.

101
00:05:37,190 --> 00:05:41,210
Satu-satunya perbedaan adalah Anda hanya dapat memiliki
satu elemen, ID tertentu, tetapi

102
00:05:41,210 --> 00:05:43,600
sejumlah elemen
dapat berbagi kelas.

103
00:05:43,600 --> 00:05:47,690
Jadi misalnya, saya dapat menggunakan kelas
gambar beberapa kali, tapi aku tidak bisa

104
00:05:47,690 --> 00:05:50,533
membuat divisi lain
dengan ID bagian atas.

105
00:05:50,533 --> 00:05:54,750
Meskipun saya belum pergi ke CSS,
bahasa lain yang umum digunakan

106
00:05:54,750 --> 00:05:59,700
bersama HTML, setelah saya mulai styling
kode saya dengan CSS, saya dapat menggunakan ini

107
00:05:59,700 --> 00:06:03,730
atribut organisasi untuk pengaruh
estetika halaman web saya.

108
00:06:03,730 --> 00:06:07,600
>> Semuanya dalam atas divisi
akan memiliki stylings yang sama atau

109
00:06:07,600 --> 00:06:12,010
kelompok lain dari kelompok I HTML ke dalam
image kelas akan berbagi tampilan yang mirip.

110
00:06:12,010 --> 00:06:15,700
Ini jauh lebih mudah daripada mencoba untuk mengedit
dan gaya gambar atau blok

111
00:06:15,700 --> 00:06:17,690
teks secara individual.

112
00:06:17,690 --> 00:06:21,480
>> Jadi kami pergi atas dasar-dasar cara
untuk membuat sebuah halaman web dengan HTML.

113
00:06:21,480 --> 00:06:25,280
HTML memiliki banyak fitur lain juga
bahwa ketika dipasangkan dengan bahasa lain

114
00:06:25,280 --> 00:06:29,220
seperti CSS dan JavaScript, dapat benar-benar
membuat halaman menonjol.

115
00:06:29,220 --> 00:06:32,960
Cara terbaik untuk membiasakan diri dengan
HTML adalah hanya untuk main-main dengan hal itu,

116
00:06:32,960 --> 00:06:35,120
melihat apa yang berhasil, dan apa yang tidak.

117
00:06:35,120 --> 00:06:36,570
>> Nama saya Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Ini adalah CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Jadi misalnya, saya dapat menggunakan
gambar kelas -

121
00:06:45,690 --> 00:06:48,028
Tidak, ada begitu banyak atribut.

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

123
00:06:52,500 --> 00:06:53,950
Nama saya Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Ini adalah CS 650.

125
00:06:58,560 --> 00:06:59,810
Saya ingin mengatakan CSS.

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

127
00:07:02,325 --> 00:07:03,575
Ini adalah CSS.

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