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

2
00:00:06,100 --> 00:00:08,790
>> DOUG LLOYD: Έτσι περάσαμε
about-- αν τα μαθηματικά μου είναι σωστή,

3
00:00:08,790 --> 00:00:11,900
Και νομίζω ότι ψάχνει back-- νομίζω
περάσαμε περίπου 35 βίντεο μιλάει

4
00:00:11,900 --> 00:00:15,139
σχετικά με διάφορες πτυχές της C, ίσως
λίγο περισσότερο, ίσως λίγο λιγότερο.

5
00:00:15,139 --> 00:00:16,930
Και εμείς δεν καλύπτουν
πάντα σε C, αλλά εμείς

6
00:00:16,930 --> 00:00:21,170
κάλυψε ένα μεγάλο κομμάτι της
γλώσσα, η συντριπτική πλειοψηφία του,

7
00:00:21,170 --> 00:00:22,882
Σίγουρα για κοινές χρήσεις.

8
00:00:22,882 --> 00:00:25,090
Τώρα θα πάμε να μιλήσουμε
για μια άλλη γλώσσα, HTML.

9
00:00:25,090 --> 00:00:28,180
Και θα πάμε να καλύψει
αυτό σε ένα μόνο βίντεο.

10
00:00:28,180 --> 00:00:29,340
>> Αλλά αυτό πρόκειται να είναι εντάξει.

11
00:00:29,340 --> 00:00:31,410
Αυτό πρόκειται να γίνει πραγματικότητα
κάτι που πρόκειται να το συνηθίσετε.

12
00:00:31,410 --> 00:00:33,535
Τώρα που έχετε το
βασικές αρχές μιας γλώσσας,

13
00:00:33,535 --> 00:00:35,776
Είναι πραγματικά αρκετά εύκολο
να ξεκινήσει την εκμάθηση άλλων.

14
00:00:35,776 --> 00:00:37,650
Έτσι θα πάμε για να ξεκινήσετε
στο βήμα λίγο πίσω

15
00:00:37,650 --> 00:00:43,340
και αποσιωπήσει το βασικό
διαφορές μεταξύ αυτών των γλωσσών

16
00:00:43,340 --> 00:00:45,750
και το είδος σας αφήσει σε αυτό.

17
00:00:45,750 --> 00:00:48,530
Υπάρχει πολλή πραγματικά μεγάλη
πόροι στο διαδίκτυο, το οποίο

18
00:00:48,530 --> 00:00:51,279
θα πάμε για να αρχίσει η διεύθυνση σας
προς γιατί το διαδίκτυο είναι

19
00:00:51,279 --> 00:00:53,340
μια τεράστια αποθήκη πληροφοριών.

20
00:00:53,340 --> 00:00:55,960
Και γι 'αυτό δεν σας αρέσει' ll
να χάσει τον έλεγχο κατ 'ανάγκην

21
00:00:55,960 --> 00:00:58,349
με το να μην έχει την πληροφορία
καλύπτεται σε ένα βίντεο.

22
00:00:58,349 --> 00:01:00,640
Θα εξακολουθεί να είναι σε θέση να πάρει
ό, τι χρειάζεστε και χρήση

23
00:01:00,640 --> 00:01:03,590
η γνώση που έχετε ήδη
δημιουργήθηκε με την κατανόηση C

24
00:01:03,590 --> 00:01:07,130
να κάνει την καμπύλη εκμάθησης για αυτά
άλλες γλώσσες πραγματικά μια πολύ κολακεύει.

25
00:01:07,130 --> 00:01:08,640
Υπόσχομαι.

26
00:01:08,640 --> 00:01:12,770
>> Αλλά ας μιλήσουμε για μια γλώσσα
αυτό είναι πραγματικά θεμελιώδους σημασίας για κάθε web

27
00:01:12,770 --> 00:01:14,830
σελίδα, η οποία είναι η HTML.

28
00:01:14,830 --> 00:01:18,230
HTML είναι το Hyper Text Markup Language.

29
00:01:18,230 --> 00:01:22,700
HTML είναι μια γλώσσα, αλλά είναι
δεν είναι μια γλώσσα προγραμματισμού.

30
00:01:22,700 --> 00:01:23,900
>> HTML δεν έχει μεταβλητές.

31
00:01:23,900 --> 00:01:26,430
Δεν έχει λογική ή
λειτουργίες ή κάτι τέτοιο.

32
00:01:26,430 --> 00:01:30,301
Δεν μπορούμε να κάνουμε οποιοδήποτε
προγραμματισμού per se σε μορφή HTML.

33
00:01:30,301 --> 00:01:32,300
Μερικές φορές θα ακούσετε
άνθρωποι περιγράφουν τους εαυτούς τους

34
00:01:32,300 --> 00:01:35,710
ως HTML προγραμματιστές, η οποία
δεν είναι απολύτως ακριβής.

35
00:01:35,710 --> 00:01:37,980
Δεν μπορούν να γράψουν προγράμματα HTML.

36
00:01:37,980 --> 00:01:40,770
>> HTML χρησιμοποιείται μόνο για να επισημάνετε κείμενο.

37
00:01:40,770 --> 00:01:42,690
Αυτό λέγεται μια γλώσσα σήμανσης.

38
00:01:42,690 --> 00:01:47,680
Και τι είναι αυτό το does-- αυτό markup--
χρησιμοποιούμε τις ετικέτες HTML και σε αυτές τις tags--

39
00:01:47,680 --> 00:01:51,600
Αυτό markup-- σημασιολογικά
ορίζει την δομή μιας σελίδας

40
00:01:51,600 --> 00:01:55,280
και προκαλεί το απλό κείμενο που
υπάρχει μεταξύ ετικετών πρέπει να ερμηνευθεί

41
00:01:55,280 --> 00:01:57,320
από τα προγράμματα περιήγησης με διαφορετικούς τρόπους.

42
00:01:57,320 --> 00:02:00,370
Και ίσως είναι καλύτερα να εξηγήσει
αυτό μέσω μιας απεικόνισης.

43
00:02:00,370 --> 00:02:06,450
>> Εδώ είναι μια πολύ απλή σελίδα HTML, δεν
ένα πρόγραμμα HTML, και πάλι, μια σελίδα HTML.

44
00:02:06,450 --> 00:02:08,680
Και ξέρουμε ότι είναι ένα
Σελίδα HTML, διότι έχουμε

45
00:02:08,680 --> 00:02:11,480
οριοθετούνται τα πάντα με ετικέτες HTML.

46
00:02:11,480 --> 00:02:13,850
Έτσι, αυτό είναι ό, τι μια ετικέτα HTML μοιάζει.

47
00:02:13,850 --> 00:02:15,870
Είναι μεταξύ αγκύλες.

48
00:02:15,870 --> 00:02:18,570
Και παρατηρήσετε στην κορυφή έχουμε
HTML και στο κάτω μέρος,

49
00:02:18,570 --> 00:02:21,400
αφού έχουμε κάνει ό, τι είναι
προφανώς πολλά άλλα HTML,

50
00:02:21,400 --> 00:02:24,310
έχουμε γωνία του στηρίγματος κάθετο HTML.

51
00:02:24,310 --> 00:02:29,262
Έτσι, αυτό το είδος είναι το όριο
μεταξύ του τι είναι η HTML και τι δεν είναι.

52
00:02:29,262 --> 00:02:32,220
Και φυσικά, συμβατικά, μόλις
όπως σας έγραψε όλα τα προγράμματα C

53
00:02:32,220 --> 00:02:35,300
με επεκτάσεις dot C,
όλα τα αρχεία HTML σας

54
00:02:35,300 --> 00:02:37,909
Θα τελειώσω με τελεία επεκτάσεις HTML.

55
00:02:37,909 --> 00:02:39,200
Αλλά εκεί είναι περισσότερο συμβαίνει εδώ.

56
00:02:39,200 --> 00:02:40,658
Δεν έχουμε μόνο αυτές τις ετικέτες HTML.

57
00:02:40,658 --> 00:02:44,010
Έχουμε προφανώς αυτό
πράγμα που ονομάζεται μια ετικέτα κεφάλι.

58
00:02:44,010 --> 00:02:46,010
Λοιπόν, εντάξει, τι είναι αυτό;

59
00:02:46,010 --> 00:02:48,550
>> Καλά ίσως είναι καλύτερο να
διακρίνει μέσω ενός σώματος,

60
00:02:48,550 --> 00:02:50,590
το σώμα είναι το περιεχόμενο της ιστοσελίδας.

61
00:02:50,590 --> 00:02:55,860
Έτσι, ίσως η ετικέτα της κεφαλής ορίζει πράγματα
ότι δεν είναι στο παράθυρο του browser σωστή,

62
00:02:55,860 --> 00:02:59,410
αλλά είναι κάπως σημαντικό για μας
Η ιστοσελίδα που αποδίδονται σωστά.

63
00:02:59,410 --> 00:03:02,490
Για παράδειγμα, στο εσωτερικό του
ετικέτα κεφάλι έχουμε ετικέτες τίτλου.

64
00:03:02,490 --> 00:03:05,500
>> Έτσι τίτλο είναι hello world,
ότι είναι πραγματικά πρόκειται να είναι αυτό

65
00:03:05,500 --> 00:03:08,797
εμφανίζεται στην καρτέλα στο Chrome
ή σε σαφάρι ή Firefox--

66
00:03:08,797 --> 00:03:11,880
Όποια και αν είναι το πρόγραμμα περιήγησης σας prefer-- ότι είναι
τι πρόκειται να εμφανιστούν στον τίτλο.

67
00:03:11,880 --> 00:03:14,800
Και πριν καρτέλες θα δείξει
σε όλο το παράθυρο του προγράμματος περιήγησης

68
00:03:14,800 --> 00:03:19,710
και μπορείτε να έχετε μόνο μία σελίδα
ανοίξει σε ένα παράθυρο του προγράμματος περιήγησης σε έναν χρόνο.

69
00:03:19,710 --> 00:03:22,160
Έτσι, αυτό πρόκειται να είναι η
τίτλος της σελίδας επάνω μου στην καρτέλα

70
00:03:22,160 --> 00:03:24,600
ή το μπαρ παράθυρο του προγράμματος περιήγησης, hello world.

71
00:03:24,600 --> 00:03:28,611
Και τότε το περιεχόμενο του μου
Η ιστοσελίδα θα είναι παγκόσμια, γεια σου.

72
00:03:28,611 --> 00:03:31,360
Έτσι, ας ρίξουμε μια ματιά σε αυτό που ορισμένοι
πράγμα όπως αυτό μπορεί να μοιάζει.

73
00:03:31,360 --> 00:03:33,210
Αυτή είναι μια αρκετά απλή σελίδα HTML.

74
00:03:33,210 --> 00:03:35,970
Έτσι, είμαι εδώ στο CS50 IDE μου και
Έχω μεγεθυνθεί σε λίγο.

75
00:03:35,970 --> 00:03:38,290
Και είμαι απλώς πρόκειται να
ανοίξει ένα γεια dot HTML

76
00:03:38,290 --> 00:03:42,000
και να σας δείξω ότι αυτό είναι λίγο πολύ
το περιεχόμενο της σελίδας που είδαμε πριν.

77
00:03:42,000 --> 00:03:45,240
Απλά μου ετικέτες HTML, το κεφάλι,
ετικέτες τίτλου, το σώμα, και ούτω καθεξής.

78
00:03:45,240 --> 00:03:47,320
Έχω εσοχή να είναι καθαρό.

79
00:03:47,320 --> 00:03:51,530
>> Και τότε τι μπορώ να κάνω μου
IDE είναι μόνο προεπισκόπηση της σελίδας.

80
00:03:51,530 --> 00:03:52,630
Και εκεί θα πάμε.

81
00:03:52,630 --> 00:03:56,070
Το περιεχόμενο της σελίδας μου είναι ο κόσμος,
γειά σου, και δεν βλέπω τίποτα

82
00:03:56,070 --> 00:03:58,500
Από τις ετικέτες κεφάλι εκεί.

83
00:03:58,500 --> 00:03:59,980
Είναι ακριβώς το περιεχόμενο του σώματος.

84
00:03:59,980 --> 00:04:00,780
Παγκόσμιο, γεια σου.

85
00:04:00,780 --> 00:04:03,700
Και πάλι το σώμα μόνο
είπε, κόσμο, γειά σου.

86
00:04:03,700 --> 00:04:06,160
Το άλλο μέρος λείπει.

87
00:04:06,160 --> 00:04:07,610
>> Έτσι, αυτό είναι πραγματικά όλα είναι.

88
00:04:07,610 --> 00:04:11,370
Αυτή είναι μια πολύ απλή βασική σελίδα HTML.

89
00:04:11,370 --> 00:04:14,280
Τώρα έχω εσοχή HTML μου
είναι πολύ όμορφο και οργανωμένο,

90
00:04:14,280 --> 00:04:15,840
αλλά δεν έχω πραγματικά να.

91
00:04:15,840 --> 00:04:17,959
Θα μπορούσε να φανεί πολύ άσχημο.

92
00:04:17,959 --> 00:04:19,467
Και αυτό θα εξακολουθεί να λειτουργεί.

93
00:04:19,467 --> 00:04:21,050
Αυτό θα είναι ακριβώς η ίδια ιστοσελίδα.

94
00:04:21,050 --> 00:04:23,100
Έχω μόλις πάρει απαλλαγούμε από
όλο το λευκό κενό.

95
00:04:23,100 --> 00:04:24,820
>> Όπως αποδεικνύεται, άσπρο διάστημα είναι δεδομένα.

96
00:04:24,820 --> 00:04:28,540
Και έτσι, όταν θα στείλουμε τα στοιχεία από
αποστολέα στο δέκτη, από το διακομιστή

97
00:04:28,540 --> 00:04:30,670
με τον πελάτη, τα δεδομένα κοστίζει χρήματα.

98
00:04:30,670 --> 00:04:34,460
Και έτσι για να απαλλαγούμε από κενό
είναι πραγματικά μια καλή ιδέα

99
00:04:34,460 --> 00:04:37,320
εάν είστε κάποιος που υπηρετεί
μέχρι μια πολύ περιεχόμενο ιστοσελίδων.

100
00:04:37,320 --> 00:04:39,820
Είναι μια κακή ιδέα, αν είστε
κάποιος που είναι μάθηση αυτά τα πράγματα

101
00:04:39,820 --> 00:04:41,528
και θέλετε να έχετε
αυτό πολύ καλά οργανωμένη.

102
00:04:41,528 --> 00:04:43,810
Αυτό είναι πολύ πιο εύκολο να αναλύσει από αυτό.

103
00:04:43,810 --> 00:04:45,540
Αλλά είναι λειτουργικά ισοδύναμες.

104
00:04:45,540 --> 00:04:48,720
>> Η οδόντωση και άλλα τέτοια
στην πραγματικότητα δεν έχει σημασία σε μορφή HTML.

105
00:04:48,720 --> 00:04:53,634
Αυτό που έχει σημασία είναι το άνοιγμα και ετικέτες
κλείσιμο ετικέτες με τη σωστή σειρά.

106
00:04:53,634 --> 00:04:55,050
Ανακοίνωση για το τι συνέβη εδώ, όμως.

107
00:04:55,050 --> 00:04:58,450
Η σήμανση μας δίνει έναν τρόπο να
επικοινωνούν επιπλέον πληροφορίες

108
00:04:58,450 --> 00:04:59,940
σχετικά με το τι έχουμε γράψει.

109
00:04:59,940 --> 00:05:03,130
Το Hello, World μέρος ήταν
ερμηνεύεται ως τίτλος.

110
00:05:03,130 --> 00:05:06,410
Και ο κόσμος, γεια μέρος ήταν
ερμηνεύεται ως περιεχόμενο

111
00:05:06,410 --> 00:05:09,090
ή τι θα έπρεπε να είναι
ορατή στην ιστοσελίδα μου.

112
00:05:09,090 --> 00:05:12,167
>> Υπάρχουν πάνω από 100 αυτών των διαφορετικών
ετικέτες και πολλές εξαιρετικές πηγές

113
00:05:12,167 --> 00:05:13,000
σε απευθείας σύνδεση για να τα βρείτε.

114
00:05:13,000 --> 00:05:14,900
Εμείς πάμε να μιλήσουμε για μια
μερικά από αυτά σε αυτό το βίντεο, μερικά

115
00:05:14,900 --> 00:05:16,440
του πραγματικά θεμελιώδη πράγματα.

116
00:05:16,440 --> 00:05:18,440
Αλλά εμείς δεν πρόκειται Συζήτηση
για όλα αυτά επειδή

117
00:05:18,440 --> 00:05:20,250
θα ήταν εξαντλητική να το πράξουν.

118
00:05:20,250 --> 00:05:22,880
>> Ένα άλλο πράγμα που μπορείτε να κάνετε, όμως,
είναι να ανοίξει τα εργαλεία για την ανάπτυξη.

119
00:05:22,880 --> 00:05:26,069
Και αν θυμάστε από
βίντεο μας στο HTTP,

120
00:05:26,069 --> 00:05:27,860
Εξήγησα πώς να ανοίξει
τα εργαλεία για την ανάπτυξη.

121
00:05:27,860 --> 00:05:32,020
Σε Chrome είναι συνήθως το πλήκτρο F12
να ανοίξει η γραμμή εργαλείων του έργου.

122
00:05:32,020 --> 00:05:35,909
Στη συνέχεια, αντί της επιλογής του Δικτύου
καρτέλα, μπορείτε να επιλέξετε την καρτέλα Στοιχεία.

123
00:05:35,909 --> 00:05:37,700
Και αν φορτώσετε ένα web
σελίδα, θα είστε πραγματικά

124
00:05:37,700 --> 00:05:40,280
δείτε την HTML που δημιουργεί αυτή την ιστοσελίδα.

125
00:05:40,280 --> 00:05:44,090
Και έτσι μπορείτε να μάθετε πολλά για HTML
κοιτάζοντας αγαπημένες σας ιστοσελίδες

126
00:05:44,090 --> 00:05:48,474
και να δει πώς θα οικοδομήσουμε το
διάφορα κομμάτια από αυτά που σας αρέσει.

127
00:05:48,474 --> 00:05:50,890
Έτσι, ίσως υπάρχει αυτό το δροσερό
μοτίβο ή κάτι τέτοιο.

128
00:05:50,890 --> 00:05:52,140
Πώς θα το κάνουν με την HTML;

129
00:05:52,140 --> 00:05:55,630
Λοιπόν, μπορείτε απλά να ανοίξει προγραμματιστή σας
εργαλείων και αιωρείται πάνω από το στοιχείο

130
00:05:55,630 --> 00:05:57,700
και να δούμε τι ακριβώς κάνει HTML.

131
00:05:57,700 --> 00:05:59,450
Οπότε αυτό είναι ένα πραγματικά
καλός τρόπος για να μάθετε HTML,

132
00:05:59,450 --> 00:06:02,330
και συστήνω
μπορείτε να το κάνετε, τόσο για να μάθουν HTML

133
00:06:02,330 --> 00:06:04,930
αλλά και να μάθει λίγο
λίγο για κάποιες από τις επιλογές

134
00:06:04,930 --> 00:06:07,050
έχετε στη διάθεσή σας
εργαλεία για την ανάπτυξη, η οποία

135
00:06:07,050 --> 00:06:10,200
σίγουρα θα έρθει σε πρακτικό όσο
θα αρχίσει να κάνει πιο εντατική διαδίκτυο

136
00:06:10,200 --> 00:06:11,090
προγραμματισμού.

137
00:06:11,090 --> 00:06:14,080
>> Έτσι, ας ρίξουμε μια ματιά σε ένα
ζευγάρι των κοινών ετικέτες HTML.

138
00:06:14,080 --> 00:06:17,210
Και θα βγάλουμε και ρίξτε μια ματιά
ποιες είναι αυτές οι ετικέτες θα καταστήσει επίσης

139
00:06:17,210 --> 00:06:20,490
όπως κοιτάζοντας κάποια αρχεία στο IDE μου.

140
00:06:20,490 --> 00:06:26,330
Έτσι, εδώ είναι τρεις πολύ βασικές ετικέτες για
μικροαλλαγές την οπτική εμφάνιση του κειμένου.

141
00:06:26,330 --> 00:06:29,050
Υπάρχει ετικέτες Β, Ι ετικέτες, ετικέτες και U.

142
00:06:29,050 --> 00:06:33,170
Και αντίστοιχα, αυτό που κάνουν είναι
καθιστούν το κείμενο μεταξύ τους με έντονους χαρακτήρες,

143
00:06:33,170 --> 00:06:35,430
πλάγια γραφή, υπογράμμιση και.

144
00:06:35,430 --> 00:06:40,430
Ας δούμε τι θα δούμε
όπως σε μια πραγματική ιστοσελίδα στο IDE μου.

145
00:06:40,430 --> 00:06:43,390
>> Έτσι, εδώ στο IDE μου έχω ένα
αρχείο που ονομάζεται BIU dot HTML.

146
00:06:43,390 --> 00:06:46,770
BIU dot HTML είναι ακριβώς
έντονα, πλάγια, υπογράμμιση.

147
00:06:46,770 --> 00:06:47,830
Θα το ανοίξουμε.

148
00:06:47,830 --> 00:06:51,810
>> Και θα δούμε πως εδώ
έχουν αυτό το κείμενο είναι τολμηρή ετικέτες Β.

149
00:06:51,810 --> 00:06:54,010
Αυτό το κείμενο είναι πως ετικέτες πλάγια γραφή.

150
00:06:54,010 --> 00:06:56,307
Και το κείμενο αυτό είναι υπογραμμισμένο U ετικέτες.

151
00:06:56,307 --> 00:06:57,640
Τι είναι αυτή η μετάβαση να μοιάζει;

152
00:06:57,640 --> 00:06:59,473
Λοιπόν και πάλι, το μόνο που έχω
να κάνετε είναι να πάτε εδώ

153
00:06:59,473 --> 00:07:04,690
στο πρόγραμμα περιήγησής μου, το πρόγραμμα περιήγησης στο αρχείο μου, κάντε κλικ στην επιλογή
Προεπισκόπηση, και αυτό είναι αυτό που έρχεται.

154
00:07:04,690 --> 00:07:07,520
>> Το κείμενο ανάμεσα στο Β
ετικέτες είναι πράγματι τώρα τολμηρή.

155
00:07:07,520 --> 00:07:10,720
Το κείμενο στο μεταξύ Ι
ετικέτες είναι πράγματι τώρα πλάγια γραφή.

156
00:07:10,720 --> 00:07:14,634
Και το κείμενο ανάμεσα στο U
ετικέτες είναι πράγματι τώρα υπογράμμισε.

157
00:07:14,634 --> 00:07:15,550
Έτσι, αυτό είναι πολύ καλό.

158
00:07:15,550 --> 00:07:18,450
Τώρα ξέρετε πώς να κάνετε το κείμενο
κοιτάξουμε λίγο πιο φανταχτερό

159
00:07:18,450 --> 00:07:20,360
ή να σχεδιάσετε έμφαση σε ορισμένα πράγματα.

160
00:07:20,360 --> 00:07:25,530
Ένα άλλο ζευγάρι των κοινών ετικέτες εδώ
παράγραφο ετικέτες, ετικέτες P, και την κεφαλίδα,

161
00:07:25,530 --> 00:07:27,980
την οποία έχω εδώ που παρέχονται ως HX.

162
00:07:27,980 --> 00:07:32,520
>> Αυτές οι ετικέτες P, αυτές οι ετικέτες παράγραφο,
σπάσει το κείμενό σας επάνω σε παραγράφους.

163
00:07:32,520 --> 00:07:34,646
Δεν είναι αρκετό απλά να
πατήστε Enter και να αφήσει χώρους,

164
00:07:34,646 --> 00:07:37,186
διότι ο υπολογιστής είναι μόνο για
να κάνει αυτό που της λέτε να κάνουμε

165
00:07:37,186 --> 00:07:39,450
και αγνοεί λευκό
χώρος για το μεγαλύτερο μέρος.

166
00:07:39,450 --> 00:07:41,636
Έτσι δεν μπορούμε απλά να πατήσετε Enter
και αναμένουμε τον υπολογιστή μας

167
00:07:41,636 --> 00:07:43,760
να ερμηνεύσει ότι θέλουμε
για να ξεκινήσετε μια νέα παράγραφο.

168
00:07:43,760 --> 00:07:47,670
Πρέπει να δηλώσω ρητά αυτό
είναι ένα paragraph-- αυτό είναι another--

169
00:07:47,670 --> 00:07:50,740
περικλείοντας το καθένα σε ένα σύνολο ετικετών P.

170
00:07:50,740 --> 00:07:54,560
>> Και έχουμε επίσης αυτές τις επιλογές
για H ετικέτες, αυτές τις ετικέτες κεφαλίδας.

171
00:07:54,560 --> 00:07:57,000
Έχουμε έξι διαφορετικά επίπεδα
του κεφαλίδες, ένα, δύο, τρία,

172
00:07:57,000 --> 00:08:01,110
τέσσερα, πέντε, έξι, τα οποία είναι
προοδευτικά και μεγαλύτερα

173
00:08:01,110 --> 00:08:01,710
κεφαλίδες.

174
00:08:01,710 --> 00:08:04,360
Και παίρνουν μικρότερες και
και μικρότερα και μικρότερα.

175
00:08:04,360 --> 00:08:07,690
Έτσι, έχουμε μια επικεφαλίδα ανώτερο επίπεδο, ένα δεύτερο
κεφαλίδα επίπεδο, και ούτω καθεξής, και ούτω καθεξής.

176
00:08:07,690 --> 00:08:10,480
>> Ας ρίξουμε μια ματιά σε μερικά ίσως
Ετικέτες P και μερικές ετικέτες κεφαλίδας

177
00:08:10,480 --> 00:08:13,110
σε δράση σε μια ιστοσελίδα.

178
00:08:13,110 --> 00:08:18,180
Έτσι, εδώ στο IDE μου έχω ένα αρχείο που ονομάζεται
PH dot HTML, PH είναι παραγράφους

179
00:08:18,180 --> 00:08:18,970
και ετικέτες κεφαλίδας.

180
00:08:18,970 --> 00:08:20,709
Ανοίξτε το επάνω.

181
00:08:20,709 --> 00:08:23,000
Εκεί είναι μια παρτίδα σε εξέλιξη εδώ
γιατί έχω βάλει κάποια lorem

182
00:08:23,000 --> 00:08:24,660
Ipsum, μερικά μόνο τυχαίο κείμενο εδώ.

183
00:08:24,660 --> 00:08:27,284
Γι 'αυτό θα σμίκρυνση λίγο
επειδή υπάρχει τόσο πολύ να πάει στο.

184
00:08:27,284 --> 00:08:31,980
Να σημειωθεί όμως ότι έχω στο πολύ
κορυφή εδώ έχω ένα Η1, ένα επίπεδο ένα,

185
00:08:31,980 --> 00:08:32,802
header ετικέτα.

186
00:08:32,802 --> 00:08:36,010
Στη συνέχεια, έχω μια παράγραφο, η οποία είναι μόλις
μια δέσμη των τυχαίων text-- lorem ipsum--

187
00:08:36,010 --> 00:08:38,720
η προεπιλεγμένη τυπική συμπλήρωση κειμένου.

188
00:08:38,720 --> 00:08:41,970
Έτσι έχω δύο σημεία στο εσωτερικό του ότι
επίπεδο μία επικεφαλίδα και, στη συνέχεια, κάτω από Ι

189
00:08:41,970 --> 00:08:46,850
έχουν ένα επίπεδο δύο κεφαλίδα εδώ στη γραμμή 24,
ένα δεύτερο επίπεδο κεφαλίδα, και άλλα δύο

190
00:08:46,850 --> 00:08:47,840
παραγράφους.

191
00:08:47,840 --> 00:08:51,910
Λοιπόν, τι σημαίνει αυτό μοιάζει με
αν μπορώ να το δείτε σε προεπισκόπηση μου;

192
00:08:51,910 --> 00:08:53,790
Ας δούμε.

193
00:08:53,790 --> 00:08:55,730
>> Έτσι παρατηρούμε ότι η
κεφαλίδα πρώτο επίπεδο εδώ

194
00:08:55,730 --> 00:08:58,420
είναι στην πραγματικότητα πολύ λίγο μεγαλύτερο
από τη δεύτερη επικεφαλίδα επιπέδου.

195
00:08:58,420 --> 00:08:59,940
Γι 'αυτό και χρησιμοποιείται H1 ετικέτες.

196
00:08:59,940 --> 00:09:03,820
Και παρατηρώ ότι οι ετικέτες P μας επιτρέψει
να σπάσει τα πράγματα σε παραγράφους.

197
00:09:03,820 --> 00:09:07,500
Αν είχαμε πάρει απαλλαγούμε από αυτά τα tags P
και στην πραγματικότητα απλά βάλτε είσοδο ή Επιστροφές

198
00:09:07,500 --> 00:09:10,110
στο μεταξύ ό, τι ελπίζαμε ότι θα
είναι οι διαφορετικές σκέψεις,

199
00:09:10,110 --> 00:09:13,193
όλοι θα μόλις slam μαζί και
δεν θα έχουν αυτό το ωραίο παράγραφο

200
00:09:13,193 --> 00:09:15,840
διαχωρισμού με χώρο πάνω και κάτω.

201
00:09:15,840 --> 00:09:18,300
Και έτσι αυτό είναι που την παράγραφο
ετικέτες και τις ετικέτες κεφαλίδας

202
00:09:18,300 --> 00:09:22,440
συνήθως χρησιμοποιούνται για να κάνουν για να επιστήσει
προσοχή σε τμήματα της ιστοσελίδας μας

203
00:09:22,440 --> 00:09:23,550
με αυτόν τον τρόπο.

204
00:09:23,550 --> 00:09:27,560
>> Έπειτα επάνω είναι μερικές ετικέτες που χρησιμοποιούμε
να χτίσει τις λίστες στην ιστοσελίδα μας.

205
00:09:27,560 --> 00:09:30,820
Έτσι έχουμε unordered
lists-- ULs-- τα οποία είναι απλά

206
00:09:30,820 --> 00:09:34,090
λίστες με κουκκίδες, διέταξε
καταλόγου που numbered--

207
00:09:34,090 --> 00:09:37,680
OLs-- και στο εσωτερικό του είτε
ένα από αυτά πρέπει να έχουμε

208
00:09:37,680 --> 00:09:40,600
σύνολα πώς να δείξει στοιχεία της λίστας, LI.

209
00:09:40,600 --> 00:09:44,370
Και έτσι έχουμε ανοιχτά ετικέτα UL
και βάζουμε στοιχεία στο εσωτερικό του.

210
00:09:44,370 --> 00:09:46,920
Και στη συνέχεια, όταν τελειώσετε με
ότι, μπορούμε να κλείσουμε την ετικέτα UL.

211
00:09:46,920 --> 00:09:49,850
>> Και ομοίως μπορούμε να έχουμε
μια εντολή ή αριθμημένη λίστα

212
00:09:49,850 --> 00:09:51,560
και να θέσει τα στοιχεία λίστας μέσα από αυτό.

213
00:09:51,560 --> 00:09:53,350
Έτσι, ας ρίξουμε μια ματιά
σε ένα ζευγάρι των καταλόγων

214
00:09:53,350 --> 00:09:57,230
και τι θα
καθιστούν ως επί CS50 IDE.

215
00:09:57,230 --> 00:10:00,640
Έτσι έχω εδώ σε ένα IDE μου
αρχείο που ονομάζεται λίστες dot HTML.

216
00:10:00,640 --> 00:10:03,100
Ας ρίξουμε μια ματιά.

217
00:10:03,100 --> 00:10:08,482
>> Και η ειδοποίηση εδώ έχω μια μη διατεταγμένη
λίστα με πέντε πράγματα σε αυτό.

218
00:10:08,482 --> 00:10:11,440
Και τότε έχω μια διατεταγμένη λίστα, και
Έχω αλλάξει η ετικέτα λίγο,

219
00:10:11,440 --> 00:10:11,939
έτσι δεν είναι;

220
00:10:11,939 --> 00:10:13,152
Έχω πει έναρξη ισούται με έξι.

221
00:10:13,152 --> 00:10:16,110
Αποδεικνύεται με μια ταξινομημένη λίστα μου
να ορίσετε το σημείο εκκίνησης όπου

222
00:10:16,110 --> 00:10:20,130
Έχω want-- από προεπιλογή θα είναι ένα--
προσθέτοντας απλά αυτό το λεγόμενο χαρακτηριστικό

223
00:10:20,130 --> 00:10:21,190
να ΕΓ ετικέτα μου.

224
00:10:21,190 --> 00:10:23,572
Και έτσι αυτός ο κατάλογος θα
αρχίσουμε να μετράμε σε έξι.

225
00:10:23,572 --> 00:10:26,780
Έτσι, τα στοιχεία αυτής της αριθμημένης λίστας
θα πρέπει να είναι έξι, επτά, οκτώ, εννέα, δέκα,

226
00:10:26,780 --> 00:10:29,930
επειδή υπάρχουν πέντε στοιχεία
στη λίστα, σε αντίθεση με ένα,

227
00:10:29,930 --> 00:10:33,770
δύο, τρεις, τέσσερις, πέντε, η οποία
θα συνέβαινε αν είχα πει ΕΓ

228
00:10:33,770 --> 00:10:36,730
χωρίς να προσδιορίζει το χαρακτηριστικό εκκίνησης.

229
00:10:36,730 --> 00:10:41,594
>> Έτσι θα προεπισκόπηση ακριβώς αυτό ώστε να μπορείτε
να πάρετε μια αίσθηση για το τι συμβαίνει εδώ.

230
00:10:41,594 --> 00:10:42,260
Και εκεί θα πάμε.

231
00:10:42,260 --> 00:10:44,610
Υπάρχει λίστα μου.

232
00:10:44,610 --> 00:10:47,810
Τα πρώτα πέντε στοιχεία είναι
επιτυγχάνεται με την εντολή ή λίστες με κουκκίδες.

233
00:10:47,810 --> 00:10:51,010
Και τα επόμενα πέντε στοιχεία
είναι μια ξεχωριστή διέταξε λίστα

234
00:10:51,010 --> 00:10:52,980
ξεκινώντας από έξι.

235
00:10:52,980 --> 00:10:56,247
Έτσι, αυτό είναι το πώς μπορούμε
δημιουργήσετε τις λίστες χρησιμοποιώντας HTML.

236
00:10:56,247 --> 00:10:58,080
Ένα άλλο πράγμα που ίσως να
θέλουν να κάνουν με την HTML

237
00:10:58,080 --> 00:11:01,520
έχει χτίσει έναν πίνακα
πληροφορίες σειρών και στηλών

238
00:11:01,520 --> 00:11:04,560
να παρουσιάσει τις πληροφορίες σε μια
οργανώνονται κυρίως τρόπο.

239
00:11:04,560 --> 00:11:09,110
Για να το κάνετε αυτό με την HTML μπορούμε να έχουμε μια
πίνακας ορισμού αρχίζει ανοιχτό βραχίονα

240
00:11:09,110 --> 00:11:10,160
τραπέζι.

241
00:11:10,160 --> 00:11:14,680
Και στη συνέχεια στο εσωτερικό του εν λόγω πίνακα που
θα μπορούσε να έχει ένα σύνολο γραμμών, ετικέτες TR

242
00:11:14,680 --> 00:11:15,980
να αναφέρει κάθε γραμμή.

243
00:11:15,980 --> 00:11:22,510
Και τότε TD tags πάει στο εσωτερικό των ετικετών TR
για να καθορίσετε μια στήλη σε μια σειρά.

244
00:11:22,510 --> 00:11:24,340
>> Γιατί ονομάζεται TD και δεν TC;

245
00:11:24,340 --> 00:11:25,940
Λοιπόν, TD σημαίνει δεδομένα του πίνακα.

246
00:11:25,940 --> 00:11:27,900
Συνήθως βάζετε
τις πληροφορίες σας εκεί.

247
00:11:27,900 --> 00:11:29,440
Έτσι, γι 'αυτό είναι η TD και δεν TC.

248
00:11:29,440 --> 00:11:31,140
Είναι λίγο συγκεχυμένη.

249
00:11:31,140 --> 00:11:33,720
>> Έτσι έχετε τραπέζι και ετικέτες
στο εσωτερικό των ετικετών σας τραπέζι

250
00:11:33,720 --> 00:11:35,600
έχετε έναν αριθμό γραμμών, TRs.

251
00:11:35,600 --> 00:11:40,030
Και μέσα σε κάθε γραμμή που έχετε
TDS για τον αριθμό των στηλών

252
00:11:40,030 --> 00:11:42,880
ότι θέλετε να έχετε
στη συγκεκριμένη σειρά.

253
00:11:42,880 --> 00:11:47,730
Ας ρίξουμε μια ματιά σε ένα πολύ
απλό πίνακα πάνω σε CS50 IDE.

254
00:11:47,730 --> 00:11:49,730
>> Έτσι έχω εδώ ένα αρχείο
που ονομάζεται dot πίνακα HTML.

255
00:11:49,730 --> 00:11:53,390
Ας ρίξουμε μια ματιά στο
τι μοιάζει.

256
00:11:53,390 --> 00:11:56,225
Ότι υπάρχει μια παρτίδα σε εξέλιξη εδώ, αλλά
αν παρατηρήσετε έχω ένα ανοιχτό πίνακα.

257
00:11:56,225 --> 00:11:57,850
Αρχίζω με τον ορισμό πίνακα.

258
00:11:57,850 --> 00:12:02,100
Και στη συνέχεια, στην πρώτη μου σειρά μου προφανώς
έχουν τέσσερις στήλες, ένα, δύο, τρία,

259
00:12:02,100 --> 00:12:02,660
τέσσερα.

260
00:12:02,660 --> 00:12:04,290
Και τότε είμαι γίνει με αυτή τη γραμμή.

261
00:12:04,290 --> 00:12:07,750
>> Τότε θα ξεκινήσει μια άλλη σειρά και
κάνουν δύο, τέσσερις, έξι, οκτώ.

262
00:12:07,750 --> 00:12:08,850
Ολοκληρώστε αυτή τη γραμμή.

263
00:12:08,850 --> 00:12:11,410
Κάνετε μια άλλη σειρά, τρεις, έξι, εννέα, 12.

264
00:12:11,410 --> 00:12:14,830
Και στη συνέχεια μια τελευταία σειρά, τέσσερις,
οκτώ, 12, και αν και είναι

265
00:12:14,830 --> 00:12:16,560
λίγο κόψει εδώ, 16.

266
00:12:16,560 --> 00:12:17,710
>> Τελείωσα αυτή τη γραμμή.

267
00:12:17,710 --> 00:12:18,970
Τελείωσα το τραπέζι.

268
00:12:18,970 --> 00:12:21,430
Και τότε είμαι γίνει με την HTML μου.

269
00:12:21,430 --> 00:12:22,590
Τι σημαίνει αυτό μοιάζει;

270
00:12:22,590 --> 00:12:26,014

271
00:12:26,014 --> 00:12:27,430
Λοιπόν, δεν είναι πραγματικά πολλά να δείτε.

272
00:12:27,430 --> 00:12:31,690
Έχω οργάνωσε με σαφήνεια τα στοιχεία μου
σε μια κάπως πιο οργανωμένο τρόπο.

273
00:12:31,690 --> 00:12:33,755
Αλλά δεν είναι σούπερ αρκετά εδώ.

274
00:12:33,755 --> 00:12:36,130
Και θα πάμε να ασχοληθεί με
ότι όταν μιλάμε για CSS.

275
00:12:36,130 --> 00:12:38,930
Θα επανεξετάσουμε την ιδέα της
τι κάνουμε για να κάνει μια table--

276
00:12:38,930 --> 00:12:41,260
Ίσως να διαμορφώσετε λίγο καλύτερα;

277
00:12:41,260 --> 00:12:45,070
Αλλά εξακολουθώ να έχω τέσσερις σειρές,
καθεμία από τις οποίες έχει τέσσερις στήλες,

278
00:12:45,070 --> 00:12:48,890
και πραγματικά αυτό που ισοδυναμεί αυτό να είναι ένα
πολύ απλό τέσσερις από τέσσερις πολλαπλασιασμό

279
00:12:48,890 --> 00:12:49,870
τραπέζι.

280
00:12:49,870 --> 00:12:51,690
>> Μόλις λίγες περισσότερες ετικέτες θα μιλήσουμε για.

281
00:12:51,690 --> 00:12:54,617
Ας μιλήσουμε για το
η έννοια της μια φόρμα HTML.

282
00:12:54,617 --> 00:12:57,450
Έτσι, μπορεί να έχετε δει αυτό το
πλαίσιο της υλοτομίας σε μια ιστοσελίδα.

283
00:12:57,450 --> 00:12:59,100
Συνήθως πληκτρολογείτε το όνομα χρήστη σας.

284
00:12:59,100 --> 00:13:01,510
Πληκτρολογείτε τον κωδικό σας,
και είστε καλοί να πάτε.

285
00:13:01,510 --> 00:13:04,170
Αυτό θα ήταν η αρχή μιας φόρμας.

286
00:13:04,170 --> 00:13:05,420
>> Παράκαμψη πάνω div ένα δευτερόλεπτο.

287
00:13:05,420 --> 00:13:07,987
Έχουμε, επίσης, οι εισροές που
είδος χωρέσει μέσα του τις μορφές.

288
00:13:07,987 --> 00:13:10,320
Αυτά είναι τα στοιχεία που
είστε πραγματικά την πληκτρολόγηση σε,

289
00:13:10,320 --> 00:13:12,580
ή τα κουμπιά επιλογής είστε
σημειώνοντας, ή ο έλεγχος

290
00:13:12,580 --> 00:13:14,310
κουτιά που είστε χτυπάει μακριά.

291
00:13:14,310 --> 00:13:15,770
Έτσι, αυτά πάνε μέσα από μορφές.

292
00:13:15,770 --> 00:13:18,500
Και αποτελούν βασικά
κάθε σειρά της μορφής

293
00:13:18,500 --> 00:13:19,887
εάν το έντυπο έχει μορφοποιηθεί καλά.

294
00:13:19,887 --> 00:13:22,220
Στη συνέχεια υπάρχει η έννοια της
Α Τμήμα, το οποίο πραγματικά δεν έχει

295
00:13:22,220 --> 00:13:25,060
ταιριάζουν σε μια συγκεκριμένη κατηγορία
ετικετών, όπως αυτά που έχω

296
00:13:25,060 --> 00:13:26,170
έχουν κάνει στο παρελθόν.

297
00:13:26,170 --> 00:13:29,790
Είναι ακριβώς το είδος του οριοθετεί το
ξεκινώντας από κάποια τυχαία division--

298
00:13:29,790 --> 00:13:31,670
div-- της σελίδας.

299
00:13:31,670 --> 00:13:33,210
Δεν υπάρχει καμία οπτική διάλειμμα.

300
00:13:33,210 --> 00:13:34,800
Δεν υπάρχει καμία γραμμή.

301
00:13:34,800 --> 00:13:37,180
Δεν είναι συμψηφιστεί ως
ξεχωριστό κομμάτι αυτόματα.

302
00:13:37,180 --> 00:13:39,430
Θα έπρεπε να το στυλ
με αυτόν τον τρόπο να το κάνουμε αυτό.

303
00:13:39,430 --> 00:13:42,110
>> Είναι ακριβώς το είδος του λέει θέλω ένα
κομμάτι του χώρου στην ιστοσελίδα μου,

304
00:13:42,110 --> 00:13:45,190
και είμαι απλώς πρόκειται να καλέσετε
ότι αυτή η διαίρεση της σελίδας μου.

305
00:13:45,190 --> 00:13:47,619
Μπορούμε να βάλουμε τα πράγματα στο εσωτερικό
των divs, και στην πραγματικότητα,

306
00:13:47,619 --> 00:13:49,410
όταν το κεφάλι πάνω σε
IDE σε ένα δεύτερο, θα

307
00:13:49,410 --> 00:13:53,760
βλέπουμε ότι βάζω μου
σχηματιστεί στο εσωτερικό του ένα div.

308
00:13:53,760 --> 00:13:57,050
>> Έτσι έχω εδώ σε ένα IDE μου
αρχείο που ονομάζεται div μορφή dot HTML.

309
00:13:57,050 --> 00:13:59,260
Ας το ανοίξουμε.

310
00:13:59,260 --> 00:14:01,460
Παρατηρήστε ότι, όπως είπα,
div είναι το είδος της αυθαίρετης.

311
00:14:01,460 --> 00:14:01,640
Σωστά;

312
00:14:01,640 --> 00:14:02,973
Δεν σημαίνει τίποτα.

313
00:14:02,973 --> 00:14:05,140
Έτσι έχω μια αυθαίρετη
πρώτο τμήμα της σελίδας μου.

314
00:14:05,140 --> 00:14:07,848
Και τότε αντί του άλλου div
αργότερα, αρχής γενομένης από την γραμμή οκτώ,

315
00:14:07,848 --> 00:14:08,730
Έχω αυτή τη μορφή.

316
00:14:08,730 --> 00:14:13,594
Και στο εσωτερικό του εντύπου έχω μια
αριθμό των εισροών, τα πεδία της φόρμας.

317
00:14:13,594 --> 00:14:16,510
Έτσι έχω ένα πεδίο του οποίου το όνομα είναι A--
πράγμα που δεν σημαίνει τίποτα

318
00:14:16,510 --> 00:14:19,350
δεξιά now-- ότι προφανώς
λαμβάνει κείμενο, ένα άλλο που

319
00:14:19,350 --> 00:14:22,630
λαμβάνει έναν κωδικό πρόσβασης, ένα άλλο που είναι ένα ραδιόφωνο
κουμπί, ένα άλλο που είναι ένα πλαίσιο ελέγχου,

320
00:14:22,630 --> 00:14:24,797
και ένα άλλο που είναι ένα κουμπί Υποβολή.

321
00:14:24,797 --> 00:14:26,630
Λοιπόν, τι κάνει αυτό
όλα μοιάζουν στην πραγματικότητα;

322
00:14:26,630 --> 00:14:27,629
Λοιπόν, ας ρίξουμε μια ματιά.

323
00:14:27,629 --> 00:14:31,010
Θα το ανοίξουμε στο παράθυρο προεπισκόπησης μας.

324
00:14:31,010 --> 00:14:33,557
Σημειώστε ότι αυτό το αυθαίρετο
πρώτη division-- υπάρχει

325
00:14:33,557 --> 00:14:34,640
καμία οπτική διαχωρισμός εδώ.

326
00:14:34,640 --> 00:14:37,150
Δεν έκανα τίποτα, σωστά;

327
00:14:37,150 --> 00:14:38,220
>> Και τότε έχω τη μορφή μου.

328
00:14:38,220 --> 00:14:39,890
Και εγώ δεν κάνω καμία ειδική μορφοποίηση.

329
00:14:39,890 --> 00:14:42,680
Έτσι, η μορφή είναι μόνο μία
μεγάλη σειρά πληροφοριών.

330
00:14:42,680 --> 00:14:46,424
Αν είχα διαμορφωμένη φόρμα μου με διαφορετικό τρόπο,
Θα ήθελα να έχουμε την γραμμή-γραμμή προς γραμμή.

331
00:14:46,424 --> 00:14:47,590
Αλλά εγώ δεν κάνω κανένα στυλ.

332
00:14:47,590 --> 00:14:49,256
Και πάλι, δεν μιλάμε για CSS εδώ.

333
00:14:49,256 --> 00:14:51,030
Εμείς μιλάμε μόνο για HTML.

334
00:14:51,030 --> 00:14:53,980
>> Λοιπόν σε μορφή κειμένου μου, μπορώ να type--
να θυμάστε ότι οι μορφές τύπου κειμένου

335
00:14:53,980 --> 00:14:55,480
έτσι μπορώ να βάλω το όνομά μου.

336
00:14:55,480 --> 00:14:57,330
Και τον κωδικό μου
μπορείτε να πληκτρολογήσετε τον κωδικό πρόσβασης μου.

337
00:14:57,330 --> 00:14:59,740
Και επειδή αυτό το πεδίο
Είναι κωδικό τύπου,

338
00:14:59,740 --> 00:15:01,470
δεν ξέρετε τι είναι το password μου.

339
00:15:01,470 --> 00:15:02,800
Είναι όλες οι κουκκίδες.

340
00:15:02,800 --> 00:15:09,140
>> Μπορώ επίσης να επιλέξετε να μαρκάρω ένα
κουμπί ή ένα πλαίσιο ελέγχου μαρκάρω.

341
00:15:09,140 --> 00:15:10,420
Ή θα μπορούσε να υποβάλει τη μορφή μου.

342
00:15:10,420 --> 00:15:11,810
Και εγώ δεν έκανα τίποτα,
έτσι ώστε όταν η υποβολή της φόρμας μου,

343
00:15:11,810 --> 00:15:13,090
η σελίδα ανανεώνεται μόνο.

344
00:15:13,090 --> 00:15:16,970
Αλλά θα μπορούσα ίσως να διαμορφώσετε μου
Κουμπί Υποβολή για να κάνουμε κάτι άλλο.

345
00:15:16,970 --> 00:15:20,410
Και θα δούμε τι μπορούμε να κάνουμε με
ότι σε μια μελλοντική βίντεο σε PHP.

346
00:15:20,410 --> 00:15:22,520
Αλλά αυτό δημιουργεί ένα πολύ
απλή μορφή που

347
00:15:22,520 --> 00:15:27,360
μπορούν να χρησιμοποιήσουν για να έχουν οι χρήστες αλληλεπιδρούν και
να υποβάλουν πληροφορίες στην ιστοσελίδα μας.

348
00:15:27,360 --> 00:15:29,620
>> Μια τελευταία παρατήρηση πριν
να προχωρήσουμε σε κάποιες άλλες ετικέτες

349
00:15:29,620 --> 00:15:32,040
είναι να ρίξετε μια ματιά σε αυτό
ετικέτα εισόδου για μια ακόμη φορά.

350
00:15:32,040 --> 00:15:35,760
Ανακοίνωση που έχω επισημανθεί
τα άκρα της ετικέτας με κόκκινο χρώμα.

351
00:15:35,760 --> 00:15:39,390
Κάθε άλλη ετικέτα που έχουμε δει μέχρι τώρα έχει
είχε μια αρχή και ένα τέλος, ένα άνοιγμα

352
00:15:39,390 --> 00:15:41,030
ετικέτα και ετικέτα κλεισίματος.

353
00:15:41,030 --> 00:15:42,520
>> Αλλά μια ετικέτα εισόδου δεν κάνει.

354
00:15:42,520 --> 00:15:46,860
Δεν υπάρχει κείμενο που πηγαίνει
μεταξύ ετικέτες εισόδου.

355
00:15:46,860 --> 00:15:49,160
Όλες οι πληροφορίες
εμείς σκοπεύουμε να το μεταφέρω

356
00:15:49,160 --> 00:15:52,640
δεσμεύεται ως μέρος της
Χαρακτηριστικά αυτής της εισόδου.

357
00:15:52,640 --> 00:15:54,690
Ανακοίνωση έχουμε το όνομα εισόδου ισούται με x.

358
00:15:54,690 --> 00:15:55,580
Τύπος ίσο με y.

359
00:15:55,580 --> 00:15:57,660
Αυτό είναι πραγματικά όλα τα
πληροφορίες που χρειαζόμαστε.

360
00:15:57,660 --> 00:15:59,470
>> Αυτό ονομάζεται tag τον εαυτό κλεισίματος.

361
00:15:59,470 --> 00:16:02,470
Δεν απαιτεί ένα άνοιγμα και ένα
κοντά επειδή το σύνολο των πληροφοριών

362
00:16:02,470 --> 00:16:04,974
περιέχεται στο εσωτερικό του
tag και τα χαρακτηριστικά του.

363
00:16:04,974 --> 00:16:06,390
Έτσι, μερικές φορές θα δείτε αυτό, πάρα πολύ.

364
00:16:06,390 --> 00:16:10,400
Έτσι ακριβώς πρέπει να γνωρίζουν ότι αν έχετε ένα
ετικέτα που είναι εντελώς αυτόνομα,

365
00:16:10,400 --> 00:16:14,170
ανοίγει και κλείνει από μόνη της με
το υποστήριγμα ανοικτή γωνία στην αριστερή

366
00:16:14,170 --> 00:16:17,000
και η γωνία κάθετο
βραχίονα στα δεξιά.

367
00:16:17,000 --> 00:16:20,580
Θα δούμε άλλο ένα από εκείνα
τώρα με ετικέτες εικόνα επίσης.

368
00:16:20,580 --> 00:16:23,300
>> Πριν μιλήσουμε για τις εικόνες, που
Πρέπει να μιλήσουμε για υπερσυνδέσμους.

369
00:16:23,300 --> 00:16:26,080
Αν θέλουμε την ιστοσελίδα μας να είναι
διαδραστικά και να κινηθεί γύρω μας,

370
00:16:26,080 --> 00:16:28,121
θα ήταν ωραίο να είναι σε θέση
να κάνετε κλικ σε ένα από αυτά

371
00:16:28,121 --> 00:16:30,190
ό, τι συνήθως, μια μπλε λινκ.

372
00:16:30,190 --> 00:16:34,440
Αυτό είναι στην πραγματικότητα το πώς χτίζουμε
μια υπερ-σύνδεση στην ιστοσελίδα μας.

373
00:16:34,440 --> 00:16:36,540
Και περιέργως
υπάρχει μια άλλη ετικέτα HTML

374
00:16:36,540 --> 00:16:39,000
ονομάζεται σύνδεση, η οποία δεν είναι μια υπερ-σύνδεση.

375
00:16:39,000 --> 00:16:44,130
Μια εδώ σημαίνει άγκυρα, και
αυτό είναι το πώς θα δείχνουν μια υπερ-σύνδεση.

376
00:16:44,130 --> 00:16:49,150
>> A href ισούται με x τα μέσα πάει να
Η ιστοσελίδα X. Και τα πάντα

377
00:16:49,150 --> 00:16:51,580
μεταξύ της ανοικτής Μια ετικέτα
και η στενή Μια ετικέτα

378
00:16:51,580 --> 00:16:56,010
είναι ό, τι πρόκειται να είναι ότι υπογράμμισε
μπλε κείμενο που μοιάζει με ένα σύνδεσμο

379
00:16:56,010 --> 00:16:57,590
ότι είμαστε εξοικειωμένοι με.

380
00:16:57,590 --> 00:17:01,660
Κάτω από αυτό έχουμε μια ετικέτα εικόνας, η οποία
είναι μια αυτο tag κλεισίματος για την εμφάνιση

381
00:17:01,660 --> 00:17:05,599
μια εικόνα που βρίσκεται στο Χ και
να είστε σε θέση να αλλάξετε

382
00:17:05,599 --> 00:17:08,280
ότι η εικόνα με την ένδειξη
πλάτος και ύψος

383
00:17:08,280 --> 00:17:11,640
και άλλα χαρακτηριστικά σε
ότι dot dot dot εκεί.

384
00:17:11,640 --> 00:17:14,260
>> Στο κάτω μέρος εδώ
έχουμε μια πολύ ενδιαφέρουσα

385
00:17:14,260 --> 00:17:16,170
ψάχνετε ετικέτα που δεν
έχουν μια ετικέτα κλεισίματος.

386
00:17:16,170 --> 00:17:19,410
Είναι θαυμαστικό DOCTYPE HTML.

387
00:17:19,410 --> 00:17:23,300
Έτσι HTML ήταν γύρω από το
αρχές του 1990 για την κατασκευή ιστοσελίδων,

388
00:17:23,300 --> 00:17:25,859
και θα φύγει υποστεί
πολλές αναθεωρήσεις από τότε.

389
00:17:25,859 --> 00:17:28,550
Πιο πρόσφατα, το 2014
υπέστη μια αναθεώρηση

390
00:17:28,550 --> 00:17:33,440
που ονομάζεται HTML5, που είναι τώρα η τρέχουσα
είδος de facto πρότυπο HTML.

391
00:17:33,440 --> 00:17:36,730
>> Για να υποδείξει ότι η ιστοσελίδα μας
σελίδες είναι γραμμένα με HTML5,

392
00:17:36,730 --> 00:17:38,160
Αυτό είναι το πώς θα ξεκινήσετε.

393
00:17:38,160 --> 00:17:40,380
Μπορεί να παραληφθεί αλλά
τι βασικά

394
00:17:40,380 --> 00:17:45,930
μέσα είναι δεν μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις ετικέτες
που είναι το HTML5 ετικέτες, αυτές οι νέες ετικέτες.

395
00:17:45,930 --> 00:17:48,591
Γι 'αυτό και πάντα ξεκινούν
αν είμαστε χρησιμοποιώντας HTML5.

396
00:17:48,591 --> 00:17:51,340
Και όλες οι ετικέτες που έχουμε μιλήσει για
προηγουμένως δεν είναι HTML5 ετικέτες.

397
00:17:51,340 --> 00:17:55,470
Αλλά αυτό θα σήμαινε ότι
HTML5 ετικέτες θα είναι παρόντες.

398
00:17:55,470 --> 00:17:58,400
Και έτσι έχουμε θαυμαστικό
DOCTYPE HTML, η οποία

399
00:17:58,400 --> 00:18:01,280
Είναι στην αρχή της μας
HTML αρχείο, και στη συνέχεια, μετά από αυτό το σημείο

400
00:18:01,280 --> 00:18:04,930
στην πραγματικότητα έχουμε HTML ανοιχτά
tag και να προχωρήσει από εκεί.

401
00:18:04,930 --> 00:18:10,050
>> Το τελευταίο είναι ένα σχόλιο ετικέτας,
που μοιάζει ελαφρώς διαφορετική, πάρα πολύ.

402
00:18:10,050 --> 00:18:12,810
Ξεκινά με γωνία
βραχίονα θαυμαστικό παύλα

403
00:18:12,810 --> 00:18:15,220
εξόρμηση αλλά δεν αγκύλη.

404
00:18:15,220 --> 00:18:20,150
Στο μεταξύ των δύο αυτών στοιχείων υπάρχει
είναι όπου μπορείτε να γράψετε τα σχόλιά σας.

405
00:18:20,150 --> 00:18:28,420
Και ας ρίξουμε μια ματιά σε εικόνες
και τα σχόλια και τις συνδέσεις σε CS50 IDE.

406
00:18:28,420 --> 00:18:32,850
>> Έτσι έχω εδώ ένα αρχείο που ονομάζεται σύνδεσμος εικόνας
dot HTML που θα πάω να ανοίξει.

407
00:18:32,850 --> 00:18:36,420
Και παρατηρήστε έχω ένα ζευγάρι των
σχόλια εδώ στα σχόλια HTML μου.

408
00:18:36,420 --> 00:18:38,990
Έτσι ακριβώς όπως και στην C και άλλα
γλώσσες προγραμματισμού,

409
00:18:38,990 --> 00:18:43,169
HTML απλά με το να είναι μια γλώσσα σήμανσης
δεν έχουν τη δυνατότητα να έχουν σχόλια.

410
00:18:43,169 --> 00:18:45,710
Και έτσι είμαι προφανώς πρόκειται να
τοποθετήσετε μια εικόνα του Rick Astley

411
00:18:45,710 --> 00:18:49,060
κάπου μεταξύ αυτής div
ετικέτα, αυτή η αυθαίρετη διαίρεση.

412
00:18:49,060 --> 00:18:51,497
Προφανώς αυτό το αρχείο είναι
που βρίσκεται στο Rick τελεία JPEG, η οποία

413
00:18:51,497 --> 00:18:53,580
αν έχουμε το κεφάλι πίσω πάνω
δέντρο το αρχείο μου για ένα δευτερόλεπτο,

414
00:18:53,580 --> 00:18:55,490
είναι ένα αρχείο που υπάρχει στο
ο τρέχων κατάλογος.

415
00:18:55,490 --> 00:18:56,031
Έτσι, αυτό είναι εντάξει.

416
00:18:56,031 --> 00:18:57,710
Μπορώ να γίνει αναφορά.

417
00:18:57,710 --> 00:18:59,680
>> Τότε μπορώ να φέρουν εσωτερικές συνδέσεις.

418
00:18:59,680 --> 00:19:05,080
Έτσι παρατηρήσετε στη γραμμή 11 εδώ
href μου γεια τελεία HTML.

419
00:19:05,080 --> 00:19:09,050
Έτσι ώστε να αναφέρεται απλά ένα γεια dot HTML
που υπάρχει στον τρέχοντα κατάλογο.

420
00:19:09,050 --> 00:19:12,980
Και μπορώ επίσης να έχουν εξωτερικά
συνδέσεις με απλά καθορίζοντας HTTPS

421
00:19:12,980 --> 00:19:16,180
για να δείξει ότι δεν μιλάω
για ένα αρχείο στο τρέχοντα κατάλογο μου.

422
00:19:16,180 --> 00:19:19,730
Μιλώ για ένα αρχείο που υπάρχει
κάπου στο διαδίκτυο, το οποίο έχω

423
00:19:19,730 --> 00:19:23,370
να ζητήσει χρησιμοποιώντας το πρωτόκολλο HTTP.

424
00:19:23,370 --> 00:19:25,990
>> Έτσι, ας ρίξουμε μια ματιά σε ό, τι
Αυτή η σελίδα μπορεί να μοιάζει

425
00:19:25,990 --> 00:19:29,500
και ετοιμαστείτε για μια φωτογραφία του Rick
Astley να εμφανιστούν στην οθόνη σας.

426
00:19:29,500 --> 00:19:31,490
Γι 'αυτό θα προεπισκόπηση αυτό.

427
00:19:31,490 --> 00:19:33,800
Υπάρχει Rick Astley κατά τη
κορυφή σε αυτό το αυθαίρετο

428
00:19:33,800 --> 00:19:35,008
διαίρεση έβαλα στην κορυφή.

429
00:19:35,008 --> 00:19:36,960
Και στη συνέχεια κάτω από Ι
έχουν δεσμούς μου, σωστά;

430
00:19:36,960 --> 00:19:39,330
>> Έχω μια σύνδεση με γεια dot HTML.

431
00:19:39,330 --> 00:19:42,860
Και αν κάνω κλικ ότι, παίρνω
κινείται πάνω σε αυτή τη σελίδα

432
00:19:42,860 --> 00:19:47,050
ότι είμαστε πολύ εξοικειωμένοι με από
η αρχή του προγράμματός μας.

433
00:19:47,050 --> 00:19:50,880
Αν έχω εμφανιστεί ξανά αυτή τη σελίδα ανοιχτή, αν μου
ποπ σύνδεσμος εικόνας ανοίξει για μια ακόμη φορά,

434
00:19:50,880 --> 00:19:54,420
Μπορώ επίσης να πάτε στο εξωτερικό
στην ιστοσελίδα του CS50.

435
00:19:54,420 --> 00:19:56,740
Και εκεί εγώ θα see--
σμίκρυνση λίγο here--

436
00:19:56,740 --> 00:20:00,260
θα δούμε CS50 στην ιστοσελίδα είδος
ενσωματωμένο στο μέσον της σελίδας μας.

437
00:20:00,260 --> 00:20:04,670
Γι 'αυτό και ήταν σε θέση να κάνει μια εσωτερική
συνδέουν καθώς και μια εξωτερική σύνδεση.

438
00:20:04,670 --> 00:20:07,200
>> Ο τελευταίος κανόνας με HTML που
θα πάμε να μιλήσουμε για εδώ

439
00:20:07,200 --> 00:20:09,510
είναι ότι η HTML σας θα πρέπει να είναι καλοσχηματισμένα.

440
00:20:09,510 --> 00:20:13,020
Στην C μιλήσαμε πολύ για
η σύνταξη των διαφόρων πραγμάτων.

441
00:20:13,020 --> 00:20:17,650
Στην HTML η σύνταξη πραγματικά
περιστρέφεται γύρω από ετικέτες.

442
00:20:17,650 --> 00:20:19,660
Κάθε ετικέτα που θα ανοίξετε θα πρέπει να κλείσει.

443
00:20:19,660 --> 00:20:22,630
Και στην πραγματικότητα, κάθε ετικέτα που θα ανοίξετε
θα πρέπει να κλείσει με την αντίστροφη σειρά.

444
00:20:22,630 --> 00:20:25,790
>> Έτσι, αν ανοίξετε μια τολμηρή ετικέττα, μια πλάγια γραφή
ετικέτα, και στη συνέχεια μια υπογράμμιση ετικέτα

445
00:20:25,790 --> 00:20:28,120
να κάνει και τα τρία σε ένα
συγκεκριμένο σύνολο των κειμένων,

446
00:20:28,120 --> 00:20:30,070
θα πρέπει να τα κλείσετε με αντίστροφη σειρά.

447
00:20:30,070 --> 00:20:32,270
Έτσι, αν ανοίξει τολμηρή,
πλάγια γραφή, υπογράμμιση, μπορείτε

448
00:20:32,270 --> 00:20:35,240
θέλετε να κλείσετε υπογράμμιση, πλάγια γραφή.

449
00:20:35,240 --> 00:20:39,990
Αυτό το είδος της ενθυλάκωσης είναι ό, τι
κρατά HTML ωραία και οργανωμένα.

450
00:20:39,990 --> 00:20:44,370
>> Σε αντίθεση με C, όμως, συντακτικά λάθη δεν θα
πραγματικά να ακρωτηριάσουν HTML σας, ενδεχομένως.

451
00:20:44,370 --> 00:20:48,730
HTML σας μπορεί να μην είναι καλά
σχηματίζεται, αλλά θα εξακολουθούν να εργάζονται.

452
00:20:48,730 --> 00:20:50,589
Και έτσι αυτά τα λάθη
να ταξινομήσετε των διαφανειών από.

453
00:20:50,589 --> 00:20:52,130
Είναι στο χέρι σας πραγματικά να είμαστε προσεκτικοί.

454
00:20:52,130 --> 00:20:54,760
Μερικές φορές θα αποτύχουν, αλλά
μερικές φορές μπορείτε να πάρετε μακριά με αυτό.

455
00:20:54,760 --> 00:20:56,509
>> Μπορεί να είναι ένα πραγματικά
δύσκολο έργο, όμως,

456
00:20:56,509 --> 00:21:00,660
για να παρακολουθείτε όταν ανοίξατε
μια ετικέτα, όταν το κλειστό,

457
00:21:00,660 --> 00:21:04,110
ιδιαίτερα ως HTML σας
αρχεία πάρει όλο και μεγαλύτερες.

458
00:21:04,110 --> 00:21:05,490
Θα ήθελα κάποια βοήθεια.

459
00:21:05,490 --> 00:21:07,560
Και υπάρχουν σε απευθείας σύνδεση
εργαλεία επικύρωσης που εσείς

460
00:21:07,560 --> 00:21:11,474
να χρησιμοποιήσετε για να ρίξετε μια ματιά στο διαδίκτυο σας
σελίδα και να δούμε αν είναι καλά σχηματισμένες HTML.

461
00:21:11,474 --> 00:21:13,390
Και σίγουρα θα πρέπει να
ρίξτε μια ματιά σε εκείνους

462
00:21:13,390 --> 00:21:16,620
και να αρχίσουν να τα χρησιμοποιούν, όπως σας
αρχίσει να κάνει κάποια δουλειά με την HTML,

463
00:21:16,620 --> 00:21:20,800
γράφοντας HTML, ακριβώς έτσι μπορείτε να πάρετε
κάποιες καλές συνήθειες σχετικά με την οργάνωση

464
00:21:20,800 --> 00:21:24,377
HTML σας σε ένα καλό δρόμο και
καλό στυλ και να διασφαλίσουμε

465
00:21:24,377 --> 00:21:27,210
ότι δεν έχετε κάνει τίποτα που
θα μπορούσε να δημιουργήσει ένα σφάλμα σύνταξης που

466
00:21:27,210 --> 00:21:30,270
θα προκαλέσει ένα κομμάτι της
ένα πρόβλημα κάτω από το δρόμο.

467
00:21:30,270 --> 00:21:31,190
>> Είμαι ο Νταγκ Lloyd.

468
00:21:31,190 --> 00:21:33,450
Αυτό είναι CS50.

469
00:21:33,450 --> 00:21:34,859