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

2
00:00:06,986 --> 00:00:10,450
>> Daven Farnham: Hari ini, saya akan
bercakap sedikit tentang HTML,

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

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

5
00:00:14,450 --> 00:00:17,190
Malah, jika anda menonton ini
video dalam pelayar, anda

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

7
00:00:19,120 --> 00:00:22,760
HTML bukanlah bahasa pengaturcaraan,
sebaliknya, ia adalah bahasa markup yang digunakan oleh

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

9
00:00:25,460 --> 00:00:30,410
>> Jadi, anda mungkin bertanya, bagaimana sebenarnya menulis
laman web dalam HTML yang berbeza

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

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

12
00:00:38,010 --> 00:00:39,880
disusun sebelum ia boleh berjalan.

13
00:00:39,880 --> 00:00:43,070
Jika anda pernah lupa untuk memasukkan
koma bertitik pada akhir suatu pernyataan

14
00:00:43,070 --> 00:00:46,660
kod C anda, anda tahu apa yang saya bercakap
kira-kira dalam hal sintaks yang ketat.

15
00:00:46,660 --> 00:00:50,360
>> Pelayar web walaupun, adalah sedikit lebih
Pengampun ketika datang ke HTML.

16
00:00:50,360 --> 00:00:53,860
Walaupun HTML anda tidak sintaksis
betul, halaman anda mungkin masih

17
00:00:53,860 --> 00:00:57,150
dipaparkan oleh pelayar, tetapi ia mungkin
tidak kelihatan seperti yang anda bertujuan.

18
00:00:57,150 --> 00:00:59,640
Jadi ia sentiasa terbaik untuk
mengikut peraturan.

19
00:00:59,640 --> 00:01:01,990
Cara terbaik untuk mendapatkan gerak hati
tentang bagaimana perkara kerja adalah untuk

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

21
00:01:03,300 --> 00:01:07,360
>> Jadi apa yang kita ada di sini adalah asas
pelan tindakan untuk laman web.

22
00:01:07,360 --> 00:01:10,690
Anda mungkin perasan banyak perkara
di antara kurungan bersudut.

23
00:01:10,690 --> 00:01:12,900
Nah, itu cuma tag.

24
00:01:12,900 --> 00:01:15,810
Tags pada dasarnya memberitahu pelayar web
itu, hey, sesuatu

25
00:01:15,810 --> 00:01:17,150
akan datang cara anda.

26
00:01:17,150 --> 00:01:20,770
Ingat walaupun, apabila anda membuka
tag, anda perlu menutup sekali anda

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

28
00:01:21,750 --> 00:01:24,690
>> Sebagai contoh, saya membuka bahagian
kod dengan terbuka

29
00:01:24,690 --> 00:01:26,960
badan pendakap, pendakap rapat.

30
00:01:26,960 --> 00:01:31,280
Saya kemudian menambah beberapa teks, dalam kes ini, saya
Laman web pertama maka apabila saya pergi ke

31
00:01:31,280 --> 00:01:35,540
tutup bahagian, saya menggunakan hampir
tag sama kecuali kali ini dengan

32
00:01:35,540 --> 00:01:37,660
ke hadapan slash sebelum badan.

33
00:01:37,660 --> 00:01:41,140
Secara umum, ini adalah format yang 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, tag terbuka dan tag penutup
mengarang apa yang dipanggil unsur.

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 adalah benar-benar hanya memberitahu pelayar anda
bahawa fail adalah laman web

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

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

41
00:02:01,970 --> 00:02:04,950
Maka kita mempunyai tag kepala dengan
tag tajuk di dalamnya.

42
00:02:04,950 --> 00:02:09,430
Tag kepala anda boleh fikirkan sebagai
yang terdiri daripada kod HTML yang datang untuk

43
00:02:09,430 --> 00:02:12,670
isi kandungan laman web anda
kandungan sebenar.

44
00:02:12,670 --> 00:02:16,700
>> Secara umum, anda meletakkan tajuk anda
Laman web di sini, walaupun terdapat beberapa

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

46
00:02:19,350 --> 00:02:25,020
Seterusnya datang tubuh laman web anda, yang
daging dan tulang sebenar laman web anda.

47
00:02:25,020 --> 00:02:28,910
Dalam contoh kita, kita baru sahaja meletakkan mudah
ayat, Webpage Pertamaku,

48
00:02:28,910 --> 00:02:34,100
yang, jika kita menjalankan laman web kami, akan kelihatan
sesuatu yang kecil seperti ini.

49
00:02:34,100 --> 00:02:36,810
Laman web kami tidak terlalu aneh,
tetapi jangan bimbang.

50
00:02:36,810 --> 00:02:39,210
Kami akan merapikan ia tidak lama lagi.

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

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

53
00:02:46,310 --> 00:02:49,160
Tetapi jika saya membuat laman web,
bagaimana jika saya ingin menambah

54
00:02:49,160 --> 00:02:50,760
gambar, katakan, diri saya sendiri?

55
00:02:50,760 --> 00:02:52,760
Well, saya boleh melakukannya.

56
00:02:52,760 --> 00:02:55,460
Terdapat beberapa cara untuk
menambah imej ke laman web anda.

57
00:02:55,460 --> 00:02:59,780
Jika imej berada dalam folder yang sama dengan
fail HTML anda, anda boleh membuat pautan kepada

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

59
00:03:01,950 --> 00:03:05,910
>> Anda membuka dengan tag imej diikuti
oleh dalam atribut Alt dalam

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

61
00:03:07,240 --> 00:03:12,030
Nilai atribut Alt adalah hanya beberapa
teks alternatif dalam kes pengguna tidak boleh

62
00:03:12,030 --> 00:03:13,580
melihat imej.

63
00:03:13,580 --> 00:03:19,680
Sebagai alternatif, anda juga boleh mengandungi pautan ke
imej melalui URL penuh, seperti ini.

64
00:03:19,680 --> 00:03:24,180
Kini, laman web yang tidak benar-benar wujud,
tetapi jika terdapat gambar

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

66
00:03:27,760 --> 00:03:29,930
imej di laman web saya.

67
00:03:29,930 --> 00:03:35,590
Sama ada cara, anda berakhir dengan yang lebih
laman web lebih cantik, sesuatu seperti ini.

68
00:03:35,590 --> 00:03:39,730
>> Baik, itu agak sejuk, tetapi saya jenis
daripada mahu beberapa teks di sini juga.

69
00:03:39,730 --> 00:03:43,020
Jadi mari kita hanya menambah sesuatu
super mudah di atas yang

70
00:03:43,020 --> 00:03:45,210
imej, seperti pengepala.

71
00:03:45,210 --> 00:03:50,830
Semua yang saya lakukan setakat ini adalah menggunakan pengepala
tag, H1, dan satu baris tag, br.

72
00:03:50,830 --> 00:03:54,900
Tag header membuat fon sedikit
sedikit lebih besar dan lebih menonjol.

73
00:03:54,900 --> 00:03:58,930
Perpecahan slogan, di pihak yang lain
tangan, adalah jenis sejuk.

74
00:03:58,930 --> 00:04:03,720
Tidak seperti kebanyakan tag lain, anda tidak perlu
pembukaan dan penutup rehat tag, hanya

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

76
00:04:05,120 --> 00:04:10,420
Ini kerana rehat tiada kandungan
dan oleh itu, satu elemen kosong.

77
00:04:10,420 --> 00:04:14,940
>> Elemen kosong seperti ini, anda boleh membuka
dan berhampiran pada masa yang sama hanya dengan

78
00:04:14,940 --> 00:04:20,420
termasuk tanda palang ke hadapan di
akhir pengisytiharan awal.

79
00:04:20,420 --> 00:04:24,390
Jadi sekarang laman web saya kelihatan sedikit
sesuatu seperti ini.

80
00:04:24,390 --> 00:04:27,410
Lebih baik, tetapi ia jenis merasakan
seperti buntu.

81
00:04:27,410 --> 00:04:30,850
Tiada tempat lain untuk pergi mengetepikan
kepada page utama.

82
00:04:30,850 --> 00:04:33,075
Nah, mari kita menetapkan bahawa dengan
termasuk pautan.

83
00:04:33,075 --> 00:04:36,860
>> Apa yang saya akan lakukan ialah menggunakan
menyifatkan ditandakan oleh A dan membuat

84
00:04:36,860 --> 00:04:40,780
imej pautan untuk, katakan, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Dengan cara itu, setiap kali sesiapa klik pada saya,
pelayar mereka akan diarahkan ke

86
00:04:44,460 --> 00:04:47,810
satu lagi, mungkin lebih
berguna, laman web.

87
00:04:47,810 --> 00:04:51,040
Saya terpaksa mengurangkan saiz
teks sedikit kerana laman web kami adalah

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

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

90
00:04:54,590 --> 00:04:59,460
Laman web saya kelihatan betul-betul sama hanya
kini, setiap kali saya klik pada gambar,

91
00:04:59,460 --> 00:05:04,410
pelayar saya akan membuka satu lagi
tekan untuk laman web CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Akhir sekali, katakan saya akan gaya
laman web ini kemudian menggunakan CSS.

93
00:05:08,970 --> 00:05:11,730
CSS adalah apa yang dikenali sebagai
lembaran gaya melata.

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

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

96
00:05:16,910 --> 00:05:21,290
Saya ingin memulakan menganjurkan HTML saya untuk
membuat lebih mudah untuk gaya nanti.

97
00:05:21,290 --> 00:05:26,900
Di sini, saya telah menubuhkan dua jenis
pengenalan untuk membantu menganjurkan kod saya.

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

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

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

101
00:05:37,190 --> 00:05:41,210
Satu-satunya perbezaan adalah anda hanya boleh mempunyai
satu elemen, ID tertentu, tetapi

102
00:05:41,210 --> 00:05:43,600
apa-apa bilangan elemen
boleh berkongsi kelas.

103
00:05:43,600 --> 00:05:47,690
Sebagai contoh, saya boleh menggunakan kelas
imej beberapa kali, tetapi saya tidak boleh

104
00:05:47,690 --> 00:05:50,533
mewujudkan bahagian lain
dengan bahagian atas ID.

105
00:05:50,533 --> 00:05:54,750
Walaupun saya tidak pergi ke dalam CSS,
satu lagi bahasa yang lazim digunakan

106
00:05:54,750 --> 00:05:59,700
bersama HTML, sekali saya mulakan penggayaan
kod saya dengan CSS, saya boleh menggunakan

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

108
00:06:03,730 --> 00:06:07,600
>> Semua dalam golongan bahagian ini
akan mempunyai stylings sama atau mana-mana

109
00:06:07,600 --> 00:06:12,010
kumpulan lain HTML saya kumpulan ke dalam
imej kelas akan berkongsi pandangan yang sama.

110
00:06:12,010 --> 00:06:15,700
Ini adalah lebih mudah daripada cuba untuk mengedit
dan imej gaya atau blok

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

112
00:06:17,690 --> 00:06:21,480
>> Jadi kami pergi ke asas-asas bagaimana
untuk membuat laman web dengan HTML.

113
00:06:21,480 --> 00:06:25,280
HTML mempunyai sekumpulan ciri-ciri lain juga
bahawa apabila dipasangkan dengan bahasa-bahasa lain

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

115
00:06:29,220 --> 00:06:32,960
Cara terbaik untuk mendapatkan selesa dengan
HTML hanya untuk keadaan huru-hara di sekitar dengan itu,

116
00:06:32,960 --> 00:06:35,120
melihat apa kerja-kerja, 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
>> Sebagai contoh, saya boleh menggunakan
imej kelas -

121
00:06:45,690 --> 00:06:48,028
Tidak, terdapat banyak sifat-sifat.

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 mahu 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