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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Dnes, budu
mluvit trochu o HTML,

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

4
00:00:12,330 --> 00:00:14,450
Vidíte HTML všude v těchto dnech.

5
00:00:14,450 --> 00:00:17,190
Ve skutečnosti, pokud se díváte na to
videa v prohlížeči, jste

6
00:00:17,190 --> 00:00:19,120
vidět HTML teď.

7
00:00:19,120 --> 00:00:22,760
HTML není programovací jazyk,
spíše, že je to značkovací jazyk používaný

8
00:00:22,760 --> 00:00:25,460
webové prohlížeče k vykreslování stránek
na internetu.

9
00:00:25,460 --> 00:00:30,410
>> Takže můžete se ptát, jak se přesně píše
webové stránky ve formátu HTML odlišné

10
00:00:30,410 --> 00:00:33,574
od psaní programu v programování
jazyk C?

11
00:00:33,574 --> 00:00:38,010
No, C je jazyk s velmi přísná
syntaktických pravidel, která musí být

12
00:00:38,010 --> 00:00:39,880
sestaven před tím, než může běžet.

13
00:00:39,880 --> 00:00:43,070
Pokud jste někdy zapomněl zahrnout
středník na konci příkazu v

14
00:00:43,070 --> 00:00:46,660
Váš kód v C, víte, o čem mluvím
o v souvislosti s přísnou syntaxi.

15
00:00:46,660 --> 00:00:50,360
>> Webové prohlížeče i když jsou trochu více
odpuštění, pokud jde o HTML.

16
00:00:50,360 --> 00:00:53,860
I když vaše HTML není syntakticky
správné, vaše stránka může být stále

17
00:00:53,860 --> 00:00:57,150
zobrazit prohlížeči, ale to by mohlo
nevypadá, jak jste zamýšleli.

18
00:00:57,150 --> 00:00:59,640
Takže je to vždy lepší, aby
dodržovat pravidla.

19
00:00:59,640 --> 00:01:01,990
Nejlepší způsob, jak získat intuici
o tom, jak věci fungují, je

20
00:01:01,990 --> 00:01:03,300
projít příklad.

21
00:01:03,300 --> 00:01:07,360
>> Takže to, co tu máme, je základní
plán pro webové stránky.

22
00:01:07,360 --> 00:01:10,690
Asi jste si všimli, hodně věcí
mezi špičaté závorky.

23
00:01:10,690 --> 00:01:12,900
No, to jsou jen tagy.

24
00:01:12,900 --> 00:01:15,810
Tagy podstatě informovat webových prohlížečů
že, hej, co

25
00:01:15,810 --> 00:01:17,150
přichází vaše cesta.

26
00:01:17,150 --> 00:01:20,770
Pamatujte, že při každém otevření
tag, musíte zavřít jednou jste

27
00:01:20,770 --> 00:01:21,750
provádí použitím.

28
00:01:21,750 --> 00:01:24,690
>> Tak například, otevřu sekci
kódu s otevřenou

29
00:01:24,690 --> 00:01:26,960
držák tělo, úzkým držák.

30
00:01:26,960 --> 00:01:31,280
Pak jsem přidat nějaký text, v tomto případě, my
První webové stránky pak, když jsem šel do

31
00:01:31,280 --> 00:01:35,540
Zavři tuto sekci, já používám téměř
identické tag mimo tuto dobu se

32
00:01:35,540 --> 00:01:37,660
lomítko před tělem.

33
00:01:37,660 --> 00:01:41,140
Obecně platí, že se jedná o formát jste
bude používat vždy, když se otevírá

34
00:01:41,140 --> 00:01:42,680
a uzavírací tagy.

35
00:01:42,680 --> 00:01:47,900
Společně otevřený tag a koncový tag
skládat, co se nazývá prvek.

36
00:01:47,900 --> 00:01:51,870
>> Podíváte-li se na prvním řádku, budete si muset vybrat
viz vykřičník následovaný

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

38
00:01:53,350 --> 00:01:56,280
To je opravdu jen vyprávění svého prohlížeče
že soubor je webová stránka

39
00:01:56,280 --> 00:01:58,280
psány v HTML.

40
00:01:58,280 --> 00:02:01,970
HTML tag v podstatě říká,
tady je nějaký HTML.

41
00:02:01,970 --> 00:02:04,950
Pak máme značku hlavy s
název značky uvnitř.

42
00:02:04,950 --> 00:02:09,430
Tag si můžete myslet jako hlava
obsahující HTML kód, který je pro

43
00:02:09,430 --> 00:02:12,670
Převážná část vaší webové stránky je
skutečný obsah.

44
00:02:12,670 --> 00:02:16,700
>> Obecně platí, že dal název vašeho
webové stránky zde, ale tam jsou některé

45
00:02:16,700 --> 00:02:19,350
jiné značky, které se mohou objevit
i zde.

46
00:02:19,350 --> 00:02:25,020
Další je tělo vaší webové stránky je,
skutečné maso a kosti z vašich webových stránek.

47
00:02:25,020 --> 00:02:28,910
V našem příkladu jsme jen dát jednoduchý
věta, Moje první webové stránky,

48
00:02:28,910 --> 00:02:34,100
které, když narazíme na našich stránkách, bude vypadat
Trochu něco takového.

49
00:02:34,100 --> 00:02:36,810
Naše webová stránka není příliš divný,
ale nebojte se.

50
00:02:36,810 --> 00:02:39,210
Budeme smrk to brzy.

51
00:02:39,210 --> 00:02:44,070
>> Takže nad HTML, budeme vám velmi
základní šablony pro webové stránky,

52
00:02:44,070 --> 00:02:46,310
nic vymyšleného, ​​jen holé kosti.

53
00:02:46,310 --> 00:02:49,160
Ale když jsem vytvořit webové stránky,
Co když chci přidat

54
00:02:49,160 --> 00:02:50,760
obraz, řekněme, já?

55
00:02:50,760 --> 00:02:52,760
No, můžu to udělat.

56
00:02:52,760 --> 00:02:55,460
Existuje několik způsobů, jak
přidat obrázky do vašich stránek.

57
00:02:55,460 --> 00:02:59,780
Pokud je obraz ve stejné složce jako
váš soubor HTML, můžete propojit se

58
00:02:59,780 --> 00:03:01,950
obrázek přes cestu takhle.

59
00:03:01,950 --> 00:03:05,910
>> Můžete otevřít s tagem obrazu s následným
by v atributu ALT u

60
00:03:05,910 --> 00:03:07,240
Zdroj obrazu.

61
00:03:07,240 --> 00:03:12,030
Hodnota ALT atributu je jen některé
alternativní text v případě, že uživatel nemůže

62
00:03:12,030 --> 00:03:13,580
viz obrázek.

63
00:03:13,580 --> 00:03:19,680
Případně můžete také odkazy na
obrázky pomocí plné URL, jako je tento.

64
00:03:19,680 --> 00:03:24,180
Nyní, že webové stránky ve skutečnosti neexistuje,
ale pokud tam byl obraz

65
00:03:24,180 --> 00:03:27,760
mi na této adrese, mohl bych použít
zdroj URL obsahovat

66
00:03:27,760 --> 00:03:29,930
jeho obraz na mých webových stránkách.

67
00:03:29,930 --> 00:03:35,590
Ať tak či onak, můžete skončit s mnohem
hezčí webové stránky, něco takového.

68
00:03:35,590 --> 00:03:39,730
>> No, to je docela v pohodě, ale nějak jsem
ze chtít nějaký text i zde.

69
00:03:39,730 --> 00:03:43,020
Takže řekněme něco přidat
velmi jednoduchá výše

70
00:03:43,020 --> 00:03:45,210
obrazu, jako je záhlaví.

71
00:03:45,210 --> 00:03:50,830
Všechno, co jsem udělal tak daleko, je použít záhlaví
tag, H1 a zalomení řádku tag, br.

72
00:03:50,830 --> 00:03:54,900
Tag hlavička je písmo trochu
trochu větší a výraznější.

73
00:03:54,900 --> 00:03:58,930
Tag zalomení řádku, na straně druhé
ruka, je docela v pohodě.

74
00:03:58,930 --> 00:04:03,720
Na rozdíl od většiny ostatních značek, nemusíte
otevírání a zavírání přestávka tag, jen

75
00:04:03,720 --> 00:04:05,120
jeden je uvedeno výše.

76
00:04:05,120 --> 00:04:10,420
To je proto, že přestávka nemá žádný obsah
, a je tedy, prázdný element.

77
00:04:10,420 --> 00:04:14,940
>> Prázdné elementy, jako je tato, můžete otevřít
a blízko zároveň jednoduše tím, že

78
00:04:14,940 --> 00:04:20,420
včetně lomítka na
Konec počáteční prohlášení.

79
00:04:20,420 --> 00:04:24,390
Takže teď moje webové stránky vypadá trochu
něco takového.

80
00:04:24,390 --> 00:04:27,410
Lepší, ale tak nějak pocit,
jako slepé uličky.

81
00:04:27,410 --> 00:04:30,850
Není kam jinam jít stranou
z této hlavní stránky.

82
00:04:30,850 --> 00:04:33,075
Dobře, pojďme napravit tím,
včetně odkazu.

83
00:04:33,075 --> 00:04:36,860
>> Co budu dělat, je zde použít
atribut označená A, a aby

84
00:04:36,860 --> 00:04:40,780
obrázek odkaz, řekněme, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Tímto způsobem, když někdo klikne na mě,
jejich prohlížeč bude zaměřena na

86
00:04:44,460 --> 00:04:47,810
další, pravděpodobně
užitečné webové stránky.

87
00:04:47,810 --> 00:04:51,040
Měl jsem k minimalizaci velikosti
text, trochu proto, že naše webové stránky je

88
00:04:51,040 --> 00:04:52,470
stále vyspělejší.

89
00:04:52,470 --> 00:04:54,590
Ale doufejme, že je to stále jasné.

90
00:04:54,590 --> 00:04:59,460
Moje webové stránky vypadá přesně stejný jen
teď, když jsem klikněte na obrázek,

91
00:04:59,460 --> 00:05:04,410
můj prohlížeč otevře další
Karta pro webové stránky CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Konečně, řekněme, že budu styl
tento web později pomocí CSS.

93
00:05:08,970 --> 00:05:11,730
CSS je to, co je známo jako
kaskádových stylů.

94
00:05:11,730 --> 00:05:15,230
A to v podstatě poskytuje efektivní
způsob, jak upravit a styl

95
00:05:15,230 --> 00:05:16,910
podobné bloky kódu.

96
00:05:16,910 --> 00:05:21,290
Chci začít organizovat svou HTML do
usnadňují styl později.

97
00:05:21,290 --> 00:05:26,900
Zde jsem nastavit dva různé druhy
identifikátory, které vám pomohou uspořádat svůj kód.

98
00:05:26,900 --> 00:05:31,170
Použil jsem atribut ID uvnitř
rozdělení, nebo div tag, a jsem použil

99
00:05:31,170 --> 00:05:34,120
Atribut Class uvnitř
další div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID a třídy atributy
pracují podobně.

101
00:05:37,190 --> 00:05:41,210
Jediný rozdíl je můžete mít jen
jeden prvek, specifické ID, ale

102
00:05:41,210 --> 00:05:43,600
libovolný počet prvků
mohou sdílet třídu.

103
00:05:43,600 --> 00:05:47,690
Tak například, mohu použít třídu
obrázek několikrát, ale nemůžu

104
00:05:47,690 --> 00:05:50,533
vytvořit další dělení
s ID vrcholu.

105
00:05:50,533 --> 00:05:54,750
I když jsem šel do CSS,
jiný jazyk běžně používá

106
00:05:54,750 --> 00:05:59,700
spolu s HTML, jakmile začnu styl
můj kód s CSS, mohu použít tyto

107
00:05:59,700 --> 00:06:03,730
organizační atributy k vlivu
estetika mé webové stránky.

108
00:06:03,730 --> 00:06:07,600
>> Vše v rámci divize vrcholu
bude mít podobné stylings nebo jakékoliv

109
00:06:07,600 --> 00:06:12,010
Druhá skupina I skupiny do HTML
třída obraz bude sdílet podobný vzhled.

110
00:06:12,010 --> 00:06:15,700
To je mnohem jednodušší než se snažit upravovat
a obrazy styl nebo bloky

111
00:06:15,700 --> 00:06:17,690
textu samostatně.

112
00:06:17,690 --> 00:06:21,480
>> Tak jsme šli přes základy toho, jak
aby webové stránky s HTML.

113
00:06:21,480 --> 00:06:25,280
HTML má spoustu dalších funkcí příliš
že při spárování s jinými jazyky

114
00:06:25,280 --> 00:06:29,220
jako CSS a JavaScriptu, může opravdu
aby stránky vyniknout.

115
00:06:29,220 --> 00:06:32,960
Nejlepší způsob, jak se dostat pohodlně s
HTML je jen pachtit s tím,

116
00:06:32,960 --> 00:06:35,120
vidět, co funguje, a co ne.

117
00:06:35,120 --> 00:06:36,570
>> Jmenuji se Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
To je CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Tak například, mohu použít
obrázek třída -

121
00:06:45,690 --> 00:06:48,028
No, tam je tak mnoho atributů.

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

123
00:06:52,500 --> 00:06:53,950
Jmenuji se Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
To je CS 650.

125
00:06:58,560 --> 00:06:59,810
Chci říct CSS.

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

127
00:07:02,325 --> 00:07:03,575
To je CSS.

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