1
00:00:00,000 --> 00:00:03,486
>> [Παίζει μουσική]

2
00:00:03,486 --> 00:00:10,460

3
00:00:10,460 --> 00:00:14,250
>> DAVID J Malan: Αυτό είναι CS50 και
αυτή είναι η αρχή της εβδομάδας 7.

4
00:00:14,250 --> 00:00:15,060
Έτσι, καλωσορίζουμε πίσω.

5
00:00:15,060 --> 00:00:17,540
Και ίσως θυμάστε ότι
στο πρόβλημα που τέσσερις,

6
00:00:17,540 --> 00:00:21,510
υπήρχε ένα κομμάτι από ένα κυνήγι οδοκαθαριστών
για ορισμένα υπέροχα δώρα σύμφωνα με την οποία

7
00:00:21,510 --> 00:00:24,219
μετά από να ανακτήσει τις φωτογραφίες του
προσωπικό τόσο εδώ όσο και στο New Haven,

8
00:00:24,219 --> 00:00:27,468
που κλήθηκαν να βρεθεί, όπως πολλοί από τους
οι εν λόγω επιστήμονες της πληροφορικής, όπως θα μπορούσατε.

9
00:00:27,468 --> 00:00:29,550
Και έχουμε ένα ολόκληρο
δέσμη των υποβολών.

10
00:00:29,550 --> 00:00:31,930
Σκέφτηκα ότι θα μοιραστώ μερικές
βρίσκομαι σήμερα μαζί σας.

11
00:00:31,930 --> 00:00:35,100
>> Και θα καταχωρήσετε όλα αυτά στο διαδίκτυο.

12
00:00:35,100 --> 00:00:39,310
Αλλά κυρίως, θα ήθελα να
επιστήσω την προσοχή σας to-- καλά μία,

13
00:00:39,310 --> 00:00:42,670
Sam ήταν σε αρκετά από αυτά
γενικά παρουσιάζουν σαν αυτό.

14
00:00:42,670 --> 00:00:45,750
Αλλά φαίνεται ότι από
Σήμερα το πρωί, ο νικητής

15
00:00:45,750 --> 00:00:51,170
είχε ένα ορισμένο κάποιον που ονομάζεται Ken με
24 του προσωπικού συλληφθεί στην κάμερα

16
00:00:51,170 --> 00:00:54,600
ή λίγα περισσότερα αν λάβεις υπ '
αντιπροσωπεύουν πολλαπλές προσωπικού στις φωτογραφίες.

17
00:00:54,600 --> 00:00:58,300
Στη φωτογραφία εδώ είναι ο Ken επόμενο
στην Παναγία στο New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Τώρα, ο Ken, όμως, γυρίζει
έξω είναι κομμάτι μιας υπόθεσης γωνία

19
00:01:01,300 --> 00:01:02,880
ότι δεν έχει ακόμη συμβεί πριν.

20
00:01:02,880 --> 00:01:05,713
Αποδεικνύεται ότι δεν συνέβη
για να βάλω ψιλά γράμματα στο πρόβλημα

21
00:01:05,713 --> 00:01:09,710
έθεσε τέσσερις που λέει ότι το προσωπικό είναι
επιλέξιμες για τα υπέροχα δώρα

22
00:01:09,710 --> 00:01:13,130
επειδή Ken είναι, φυσικά, ένα από τα
οι φωτογράφοι για το προσωπικό μας.

23
00:01:13,130 --> 00:01:16,820
Τώρα, με ότι είπε,
μου έγραψε αρχικά να πω

24
00:01:16,820 --> 00:01:19,180
Παρακαλώ μην υστέρων αυτές τις φωτογραφίες στο διαδίκτυο.

25
00:01:19,180 --> 00:01:21,630
Νομίζω ότι σε μεγάλο μέρος
επειδή οι περισσότερες από τις φωτογραφίες

26
00:01:21,630 --> 00:01:24,499
ότι αυτή η φωτογράφος πήρε δείτε
λίγο κάτι σαν αυτό.

27
00:01:24,499 --> 00:01:25,040
Και τα παρόμοια.

28
00:01:25,040 --> 00:01:28,990
>> Αλλά ο Ken θα θέλατε να σας καθησυχάσω
ότι αυτός είναι ένας πολύ καλός φωτογράφος,

29
00:01:28,990 --> 00:01:33,190
Είναι επαγγελματίας, παίρνει
φωτογραφίες που δεν είναι θολές,

30
00:01:33,190 --> 00:01:37,270
που είναι καλύτερα στην εστίαση, και
πήρε αρκετά από το δικό μας προσωπικό.

31
00:01:37,270 --> 00:01:40,370
Αλλά όχι μόνο αναγνωρίζουν
Ken, τι σκεφτήκαμε να κάνουμε

32
00:01:40,370 --> 00:01:43,390
έχει περάσει από τη λίστα
πραγματική φοιτητές οι οποίοι υπέβαλαν.

33
00:01:43,390 --> 00:01:48,640
Και αποδεικνύεται ότι με Λανς
15 φωτογραφίες από το πρωί

34
00:01:48,640 --> 00:01:50,030
ήταν ο νικητής μας.

35
00:01:50,030 --> 00:01:55,730
>> Και εδώ είναι που απεικονίζεται Λανς με Colton,
με Skaz, με τον εαυτό μου, και με τον Sam.

36
00:01:55,730 --> 00:02:00,230
Αλλά τότε αποδεικνύεται ότι από
11:46 π.μ., έτσι μόλις πριν από λίγο,

37
00:02:00,230 --> 00:02:04,380
Πήγα πίσω στο e-mail μου και βρήκε
ότι είχαμε ένα ακόμα υποβολής

38
00:02:04,380 --> 00:02:08,300
από έναν μαθητή που ονομάζεται Μπόνι
οποίων το ηλεκτρονικό ταχυδρομείο είπε μόνο αυτό.

39
00:02:08,300 --> 00:02:10,800
Δεν πρόκειται να πει ψέματα, είμαι
αυτόν τον τρόπο κατά τη διάρκεια της κατηγορίας.

40
00:02:10,800 --> 00:02:17,620
Και στη συνέχεια προχώρησε να επισυνάψετε μόνο
14 φωτογραφίες, μια ρίψη του Lance 15.

41
00:02:17,620 --> 00:02:22,690
>> Αλλά σε φωτογραφίες Bonnie του, αποδεικνύεται
έξω ήταν πολλά μέλη του προσωπικού, Σαμ

42
00:02:22,690 --> 00:02:25,960
μεταξύ τους, έτσι ώστε ό, τι νομίζαμε
θα κάνουμε είναι να αναγνωρίσουμε τα δύο από αυτά.

43
00:02:25,960 --> 00:02:29,240
Έτσι, εκτός από να πάρει το Dropbox
χώρο που ο καθένας που συμμετείχε

44
00:02:29,240 --> 00:02:33,900
λαμβάνει, αυτά τα δύο τμήματα θα είναι επίσης
λαμβάνετε ένα ωραίο γεύμα μέριμνα για τους

45
00:02:33,900 --> 00:02:36,100
και το τμήμα τους
ζευγαρώνει την ερχόμενη εβδομάδα.

46
00:02:36,100 --> 00:02:38,970
Και έτσι θα ακούσετε από εμάς,
Λανς και Bonnie, γι 'αυτό.

47
00:02:38,970 --> 00:02:40,002
Έτσι, μεγάλο συγχαρητήρια σε αυτούς.

48
00:02:40,002 --> 00:02:42,210
Τώρα, όσοι από εσάς θα
όπως το γεύμα γενικότερα

49
00:02:42,210 --> 00:02:45,320
ξέρετε ότι το γεύμα CS50 στο Κέιμπριτζ
και New Haven είναι αυτή την Παρασκευή.

50
00:02:45,320 --> 00:02:48,510
Πηγαίνετε στην ιστοσελίδα κάθετο RSVP CS50 του.

51
00:02:48,510 --> 00:02:49,800
Και τώρα μια λέξη για σεμινάρια.

52
00:02:49,800 --> 00:02:50,730
Περισσότερα curricularly.

53
00:02:50,730 --> 00:02:52,490
Έτσι είμαστε πλησιάζει η
το σημείο του εξαμήνου

54
00:02:52,490 --> 00:02:55,200
όπου θα πρέπει να ξεκινήσετε
σκεφτόμαστε τελικό έργων.

55
00:02:55,200 --> 00:02:59,309
Και στην πραγματικότητα, μέσα σε μόλις ένα κομμάτι, θα
λεγόμενη προ προτάσεις να οφείλεται.

56
00:02:59,309 --> 00:03:01,850
Έτσι οι προ προτάσεις γραφτό να
είναι αρκετά χαμηλό αντίκτυπο και πραγματικά

57
00:03:01,850 --> 00:03:04,109
απλά μια ευκαιρία για
μπορείτε να συνθέσετε ένα σύντομο σημείωμα

58
00:03:04,109 --> 00:03:06,900
διδασκαλία τους συναδέλφους σας να ειδοποιήσουν
αυτόν ή αυτήν ό, τι είστε εσείς που σκέφτεστε

59
00:03:06,900 --> 00:03:09,140
ίσως να θέλετε να κάνετε για την τελική του έργου σας.

60
00:03:09,140 --> 00:03:11,730
>> Τώρα, πολλοί φοιτητές καταλήγουν
κάνει web-based τελικό έργων.

61
00:03:11,730 --> 00:03:13,800
Και βέβαια, είμαστε απλά
τώρα την περασμένη εβδομάδα σε αυτό το

62
00:03:13,800 --> 00:03:15,890
και πέρα ​​από την κατάδυση στον προγραμματισμό web.

63
00:03:15,890 --> 00:03:18,200
Έτσι, για να μην ανησυχείτε αν
δεν έχουν απολύτως καμία ιδέα για το πώς

64
00:03:18,200 --> 00:03:21,594
θα οικοδομήσουμε τις ιδέες που
μπορεί να έχετε στο μυαλό σας.

65
00:03:21,594 --> 00:03:24,510
Αυτό είναι πραγματικά ακριβώς ένα αναγκάζοντας λειτουργία
για να σας πάρει να σκεφτόμαστε και να μιλάμε

66
00:03:24,510 --> 00:03:25,650
με TF σας γι 'αυτό.

67
00:03:25,650 --> 00:03:28,810
Αλλά για να σας βοηθήσει με αυτό, και
με τελικό έργα εν τέλει,

68
00:03:28,810 --> 00:03:31,750
Γνωρίζουμε ότι CS50 έχει παράδοση
να προσφέρουν σεμινάρια.

69
00:03:31,750 --> 00:03:36,084
>> Και αυτά είναι προαιρετικά, τα χέρια επάνω,
ή διάλεξη που βασίζεται στις ευκαιρίες

70
00:03:36,084 --> 00:03:39,000
να μάθουν περισσότερα σχετικά με τα θέματα που είναι
λίγο βοηθητικές για την πορεία του

71
00:03:39,000 --> 00:03:43,310
διδακτέα ύλη, αλλά παρόλα αυτά υπέροχα
υλικό για να οδηγήσει την τελική έργων.

72
00:03:43,310 --> 00:03:46,840
Και έτσι αυτή είναι η λίστα που είναι
CS50 προσωπικό εδώ στο New Haven

73
00:03:46,840 --> 00:03:48,600
έχουν καταλήξει για την
φέτος για iOS

74
00:03:48,600 --> 00:03:50,730
προγραμματισμού, το Android
προγραμματισμό, την ανάπτυξη του παιχνιδιού,

75
00:03:50,730 --> 00:03:54,480
και τσαμπιά των περισσότερων εργαλείων
και τις γλώσσες και τις τεχνικές.

76
00:03:54,480 --> 00:03:56,780
>> Έτσι παρακολουθούμε στην ιστοσελίδα του CS50 του.

77
00:03:56,780 --> 00:04:00,110
Και εν τω μεταξύ, αν θέλετε να
δηλώσετε το ενδιαφέρον σας σε κάποιο από αυτά,

78
00:04:00,110 --> 00:04:02,510
πηγαίνετε στο μητρώο κάθετο CS50 του.

79
00:04:02,510 --> 00:04:05,770
Και στη συνέχεια θα ακολουθήσει ως προς το
ημέρες και ώρες πτήσης και θέσεις

80
00:04:05,770 --> 00:04:09,090
και πιο everything-- όλα θα
να είναι σε συνεχή ροή και επίσης διαθέσιμες σε πρώτη ζήτηση

81
00:04:09,090 --> 00:04:11,750
αφού, αν δεν μπορείτε να το κάνετε πραγματικά.

82
00:04:11,750 --> 00:04:15,800
Έτσι, χωρίς άλλη καθυστέρηση, εμείς
σταμάτησε την τελευταία φορά με την GET.

83
00:04:15,800 --> 00:04:19,610
>> Και αυτό ήταν σαν το μήνυμα που ήταν
στο εσωτερικό του εικονικού φακέλου, υπενθυμίζουν,

84
00:04:19,610 --> 00:04:23,960
ότι περάσαμε από router σε router να
δρομολογητή μεταξύ ενός web browser και ένα web

85
00:04:23,960 --> 00:04:24,487
διακομιστή.

86
00:04:24,487 --> 00:04:26,695
Και αυτό το μήνυμα φαινόταν
κάτι σαν αυτό.

87
00:04:26,695 --> 00:04:29,700
Αυτό ήταν το πιο απόκρυφες μήνυμα ότι
ήταν στην πραγματικότητα μέσα από ένα περίβλημα

88
00:04:29,700 --> 00:04:34,440
γραμμένο σε ένα κομμάτι χαρτί του οποίου η
πρώτη γραμμή λέει στην κυριολεξία, να πάρει κάθετος.

89
00:04:34,440 --> 00:04:37,830
>> Και ακριβώς όπως μια επιταγή λογική,
τι έκανε ο κάθετος συμβολίζουν;

90
00:04:37,830 --> 00:04:40,455
Τι σημαίνει όταν κάθετος
ζητώντας μια ιστοσελίδα;

91
00:04:40,455 --> 00:04:43,070

92
00:04:43,070 --> 00:04:44,250
Μπορείτε να ζητήσετε όλη την ώρα.

93
00:04:44,250 --> 00:04:47,333
Σχεδόν κάθε φορά που επισκέπτεστε μια ιστοσελίδα, μπορείτε
στην πραγματικότητα, δεν πληκτρολογήσετε ένα όνομα αρχείου.

94
00:04:47,333 --> 00:04:50,960
Πιθανότατα απλά πηγαίνετε στο Facebook.com,
εισάγετε, gmail.com, ή τα παρόμοια.

95
00:04:50,960 --> 00:04:52,260
Και τι κάθετο παριστάνουν;

96
00:04:52,260 --> 00:04:53,506
Τι αρχείο;

97
00:04:53,506 --> 00:04:54,630
Ή ό, τι σελίδα, συγκεκριμένα;

98
00:04:54,630 --> 00:04:59,642

99
00:04:59,642 --> 00:05:00,720
>> Ο δείκτης, ναι.

100
00:05:00,720 --> 00:05:01,810
Έτσι προεπιλεγμένη σελίδα.

101
00:05:01,810 --> 00:05:04,810
Έτσι, αν δεν ορίσετε ένα αρχείο
Ονομα όπως θα αρχίσουμε να βλέπουμε,

102
00:05:04,810 --> 00:05:07,750
είστε πραγματικά ακριβώς που ζητούν
να μου δώσει την αρχική σελίδα της στο Facebook

103
00:05:07,750 --> 00:05:10,800
ή να μου δώσει inbox μου ή να δώσει
μένα η προεπιλεγμένη σελίδα των ειδήσεων

104
00:05:10,800 --> 00:05:12,510
στην ιστοσελίδα του CNN ή τα παρόμοια.

105
00:05:12,510 --> 00:05:15,220
Και ένας διακομιστής αποκρίνεται στη συνέχεια
ότι το μήνυμα με κάτι

106
00:05:15,220 --> 00:05:18,420
όπως αυτό, λέγοντας ναι,
μιλούν έκδοση HTTP 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, το οποίο είναι μια κατάσταση
κώδικα που εμείς οι άνθρωποι σπάνια

108
00:05:21,130 --> 00:05:22,790
δει ποτέ γιατί είναι καλό.

109
00:05:22,790 --> 00:05:26,640
Διότι αυτό σημαίνει ΟΚ, το αίτημα
παρελήφθη και χειρίζεται σωστά.

110
00:05:26,640 --> 00:05:28,960
Και ο τύπος περιεχομένου
προφανώς στην απόκριση

111
00:05:28,960 --> 00:05:31,170
είναι αρκετά συχνά, αλλά όχι πάντα, το κείμενο.

112
00:05:31,170 --> 00:05:32,580
Και συγκεκριμένα, HTML.

113
00:05:32,580 --> 00:05:34,760
Και αυτό είναι στην πραγματικότητα
όπου θα δούμε σήμερα.

114
00:05:34,760 --> 00:05:37,140
>> Έτσι, στην πραγματικότητα, είμαι πρόκειται να πάει
μπροστά και να ανοίξει ένα πρόγραμμα περιήγησης.

115
00:05:37,140 --> 00:05:40,410
Πάω να χρησιμοποιήσετε το Chrome, μπορείτε να χρησιμοποιήσετε
πιό οποιοδήποτε πρόγραμμα περιήγησης στις εβδομάδες που έρχονται.

116
00:05:40,410 --> 00:05:42,410
Σας προτείνουμε γενικά Chrome
επειδή είναι ιδιαίτερα

117
00:05:42,410 --> 00:05:43,750
καλό για την ανάπτυξη λογισμικού.

118
00:05:43,750 --> 00:05:46,070
Έχει μια μεγάλη ενσωματωμένο
εργαλεία που διευκολύνουν

119
00:05:46,070 --> 00:05:49,800
να αναπτύξουν όχι μόνο HTML και CSS,
τα πράγματα θα αρχίσουμε να μιλάμε σήμερα,

120
00:05:49,800 --> 00:05:51,530
αλλά και άλλες γλώσσες, όπως καλά.

121
00:05:51,530 --> 00:05:55,530
>> Και Πάω να προχωρήσει και να πάει to--
Πάω να ελέγξει κλικ ή δεξί

122
00:05:55,530 --> 00:05:57,210
κάντε κλικ οπουδήποτε σε μια ιστοσελίδα.

123
00:05:57,210 --> 00:05:59,070
Και Πάω να πάει να επιθεωρήσει Element.

124
00:05:59,070 --> 00:06:03,850
Και Πάω να τσιμπιά μου
οθόνη μόλις λίγο εδώ.

125
00:06:03,850 --> 00:06:05,790
Επιτρέψτε μου να περάσω αυτό προς τα κάτω.

126
00:06:05,790 --> 00:06:08,140
Έτσι, αυτό είναι αυτό που ονομάζεται
Επιθεωρητής του Chrome.

127
00:06:08,140 --> 00:06:11,010
Έτσι, αυτό είναι σαν ένα εντοπισμού σφαλμάτων
εργαλείο που έχει δημιουργηθεί στο Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Όλοι σας έχετε ήδη αυτό
αν έχετε χρησιμοποιήσει το Chrome.

129
00:06:13,520 --> 00:06:17,169
Και αυτό σας επιτρέπει να δείτε τι συμβαίνει
σχετικά με κάτω από την κουκούλα κάποιας ιστοσελίδας.

130
00:06:17,169 --> 00:06:19,210
Ας λάβει πράγματι ένα
εξετάσουμε αυτό το θέμα ως εξής.

131
00:06:19,210 --> 00:06:21,251
Έχει τον τρόπο πιο χαρακτηριστικά
και εμείς ενδιαφερόμαστε για σήμερα.

132
00:06:21,251 --> 00:06:22,760
Αλλά υπάρχει αυτές τις καρτέλες εδώ.

133
00:06:22,760 --> 00:06:25,890
Στοιχεία, το δίκτυο, τις πηγές,
χρονοδιάγραμμα, και κάποια άλλα πράγματα.

134
00:06:25,890 --> 00:06:27,800
Πάω να κάνετε κλικ στο
Δίκτυο για μια στιγμή.

135
00:06:27,800 --> 00:06:30,500
>> Και είναι λίγο συντριπτική
με την πρώτη ματιά εδώ.

136
00:06:30,500 --> 00:06:34,190
Αλλά τι Πάω να κάνουμε είναι να αφήσουμε
μένα λίγο απλοποιηθεί.

137
00:06:34,190 --> 00:06:37,560
Πάω να ενεργοποιήσετε το
σημειώνοντας ελαφρά έτσι ώστε να είναι κόκκινο.

138
00:06:37,560 --> 00:06:39,140
Και Πάω να πω διατήρηση ημερολογίου.

139
00:06:39,140 --> 00:06:41,015
Και αυτό είναι μόνο ένα μικρό
πράγμα κατάλαβα

140
00:06:41,015 --> 00:06:44,120
την πάροδο του χρόνου που πρόκειται να αποθηκεύσετε
όλα όσα συμβαίνουν στο πρόγραμμα περιήγησης.

141
00:06:44,120 --> 00:06:50,030
Και τώρα είμαι πρόκειται να πάει
να http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Στην πραγματικότητα, ας κάνουμε www
για το καλό μέτρο, κάθετος.

143
00:06:52,690 --> 00:06:53,643
Enter.

144
00:06:53,643 --> 00:06:56,180
Έτσι, μια διεύθυνση URL που πολλοί από
μπορεί να έχετε επισκεφτεί.

145
00:06:56,180 --> 00:06:58,830
Και τώρα το web του Facebook
σελίδα εμφανίζεται στην κορυφή.

146
00:06:58,830 --> 00:07:02,350
Και τότε ένα σωρό
πράγματα πέταξε στο κάτω μέρος.

147
00:07:02,350 --> 00:07:04,830
Και στην πραγματικότητα, αποδεικνύεται ότι
όταν επισκέπτεστε Facebook.com,

148
00:07:04,830 --> 00:07:09,320
δεν είστε μόνο κάνοντας ένα αίτημα HTTP,
αποδεικνύεται ότι πρόκειται να Facebook.com

149
00:07:09,320 --> 00:07:14,320
στέλνει 41 των εν λόγω φακέλων,
καθένα με τη δική του αίτηση GET,

150
00:07:14,320 --> 00:07:18,360
όπως υποδεικνύεται, αν και πίσω από την οθόνη
εδώ, στο κάτω μέρος της οθόνης,

151
00:07:18,360 --> 00:07:24,040
δείχνει ότι, πράγματι, μου
Ο περιηγητής έκανε 41 τα αιτήματα.

152
00:07:24,040 --> 00:07:29,689
>> Και συνολικά, μετέφερε 861
kilobytes και πήρε για κάποιο λόγο

153
00:07:29,689 --> 00:07:31,730
όσο οκτώ δευτερόλεπτα
για να κατεβάσετε όλα αυτά.

154
00:07:31,730 --> 00:07:33,790
Έτσι, αυτό είναι πραγματικά λίγο περίεργο
ότι η περιοχή του Facebook θα πάρει ότι

155
00:07:33,790 --> 00:07:35,600
μακριά, αλλά έτσι είναι σε αυτή την περίπτωση.

156
00:07:35,600 --> 00:07:39,520
Τώρα, όλα αυτά εγώ δεν ενδιαφέρονται πραγματικά
περίπου, εκτός από το κορυφαίο αίτημα.

157
00:07:39,520 --> 00:07:46,440
Έτσι, ας πάμε σε αυτό το ένα εδώ
και επιτρέψτε μου σμίκρυνση για μια στιγμή.

158
00:07:46,440 --> 00:07:47,754
>> Και επιτρέψτε μου να εστιάσετε σε αυτό.

159
00:07:47,754 --> 00:07:50,670
Έτσι, αυτό που έχω κάνει στο αριστερό παρόλο
υπάρχει μια παρτίδα σε εξέλιξη εδώ

160
00:07:50,670 --> 00:07:53,360
Είναι έχω επισημανθεί
Facebook.com και, στη συνέχεια,

161
00:07:53,360 --> 00:07:56,540
παρατηρήσετε ότι είμαι κύλιση προς τα κάτω,
κύλιση προς τα κάτω, πηγαίνοντας προς τα κάτω,

162
00:07:56,540 --> 00:07:58,330
να ζητήσει κεφαλίδες.

163
00:07:58,330 --> 00:08:01,720
Και θα δείτε ότι το Chrome εμφανίζει
Θέλω κατ 'ουσίαν, τα εσωτερικά περιεχόμενα

164
00:08:01,720 --> 00:08:02,810
την αίτηση που έκανα.

165
00:08:02,810 --> 00:08:06,130
Δεν είναι μορφοποίηση ακριβώς το ίδιο
τρόπο, αλλά παρατηρήσετε υπάρχει αναφορά πάρει,

166
00:08:06,130 --> 00:08:09,481
παρατηρήσετε υπάρχει αναφορά του κράτους μέλους υποδοχής,
Facebook.com, η διαδρομή, ή κάθετος,

167
00:08:09,481 --> 00:08:10,730
το οποίο είναι το αρχείο ζήτησα.

168
00:08:10,730 --> 00:08:12,930
>> Και στη συνέχεια, αν μετακινηθείτε
δημιουργία αντιγράφων ασφαλείας, θα πραγματικότητα

169
00:08:12,930 --> 00:08:17,270
δείτε ότι αυτό επέστρεψε στο Facebook
για μένα είναι όλα αυτά τα κεφαλίδες.

170
00:08:17,270 --> 00:08:21,040
Έτσι, μέσα από αυτήν την εικονική φάκελος
Πράγματι, είναι πολλά ζεύγη κλειδιών αξίας.

171
00:08:21,040 --> 00:08:23,130
Μια λέξη, ένα κόλον, και στη συνέχεια μια τιμή.

172
00:08:23,130 --> 00:08:25,050
Μια λέξη, μια άνω και κάτω τελεία, και μια τιμή.

173
00:08:25,050 --> 00:08:26,160
Αυτά είναι που ονομάζεται κεφαλίδες.

174
00:08:26,160 --> 00:08:31,860
Και δεν υπάρχει τρόπος για περισσότερη λεπτομέρεια από ό, τι εδώ
που πραγματικά νοιάζονται για το δικαίωμα τώρα.

175
00:08:31,860 --> 00:08:33,750
>> Αλλά αυτή είναι η δεύτερη σε
τελευταίο εκεί κάτω,

176
00:08:33,750 --> 00:08:38,809
Παρατηρήστε, ότι ο διακομιστής του Facebook.com,
πράγματι είπε εδώ έρχεται κάποιο κείμενο HTML.

177
00:08:38,809 --> 00:08:41,409
Έτσι, όλα αυτά είναι να πούμε
ότι όταν ζητάτε ένα web

178
00:08:41,409 --> 00:08:44,300
σελίδα από ένα πρόγραμμα περιήγησης σε μια
διακομιστή, αυτός ο διακομιστής απαντά

179
00:08:44,300 --> 00:08:47,630
με ένα περίβλημα της δικής του
εντός του οποίου είναι κειμένου.

180
00:08:47,630 --> 00:08:49,020
Με άλλα λόγια, HTML.

181
00:08:49,020 --> 00:08:50,590
HyperText Markup Language.

182
00:08:50,590 --> 00:08:53,200
Ποια είναι άλλη γλώσσα
ότι έχουμε εισαγάγει σήμερα

183
00:08:53,200 --> 00:08:57,740
ότι οι άνθρωποι παράγουν ή υπολογιστές
προκειμένου να εφαρμοστεί ιστοσελίδων.

184
00:08:57,740 --> 00:08:59,580
>> Συγκεκριμένα, ας ρίξουμε μια ματιά σε αυτό.

185
00:08:59,580 --> 00:09:03,277
Πάω τώρα να πάω πίσω
στην ιστοσελίδα του Facebook.

186
00:09:03,277 --> 00:09:05,360
Και Πάω να απλά
ελέγχου κλικ ή δεξί κλικ

187
00:09:05,360 --> 00:09:07,634
και κάντε κλικ στο Προβολή προέλευσης σελίδας.

188
00:09:07,634 --> 00:09:10,550
Και ακόμα κι αν δεν χρησιμοποιείτε το Chrome,
IE να το κάνετε αυτό, ο Firefox μπορεί να κάνει αυτό,

189
00:09:10,550 --> 00:09:14,060
Safari μπορεί να το κάνετε αυτό, ακόμη και αν το μενού
επιλογές μπορεί να μοιάζει λίγο διαφορετικό.

190
00:09:14,060 --> 00:09:18,990
Και αυτό είναι το HTML του σήματος αυτού και
Η εταιρεία στο Facebook έχουν γράψει.

191
00:09:18,990 --> 00:09:24,640
>> Και συλλογικά, αυτή η γλώσσα εδώ
υλοποιεί το μπλε και το λευκό σελίδα

192
00:09:24,640 --> 00:09:26,370
που είδαμε πριν από λίγο.

193
00:09:26,370 --> 00:09:28,030
Τώρα, αυτό είναι λίγο συντριπτική.

194
00:09:28,030 --> 00:09:31,400
Αλλά αν κοιτάξουμε επάνω στο επάνω αριστερό μέρος, είμαστε
Θα αρχίσουμε να βλέπουμε κάποια μοντέλα.

195
00:09:31,400 --> 00:09:34,140
Μοιάζει υπάρχουν πολλά
αυτών των ανοικτών αγκύλη

196
00:09:34,140 --> 00:09:35,970
και στη συνέχεια να υπάρχει αυτή η λέξη-κλειδί HTML.

197
00:09:35,970 --> 00:09:38,330
Εδώ είναι ένα άλλο ανοιχτό
αγκύλη και το κεφάλι.

198
00:09:38,330 --> 00:09:41,560
>> Εδώ είναι, αν μετακινηθείτε προς τα κάτω
και προς τα κάτω και προς τα κάτω, είμαι

199
00:09:41,560 --> 00:09:43,820
πρόκειται να προχωρήσει και να δοκιμάσετε
να ψάξετε για κάτι.

200
00:09:43,820 --> 00:09:48,510
Υπάρχει τρόπος πάνω στη δεξιά
εδώ είναι ανοικτό σώμα της βάσης.

201
00:09:48,510 --> 00:09:50,800
Και ανάκλησή του από την τελευταία
φορά που είχαμε προτείνει

202
00:09:50,800 --> 00:09:53,364
ότι το απλούστερο web σελίδα
ότι ένας άνθρωπος θα μπορούσε να γράψει

203
00:09:53,364 --> 00:09:55,030
μπορεί να μοιάζει λίγο κάτι σαν αυτό.

204
00:09:55,030 --> 00:09:58,430
Ανοίξτε ετικέτα HTML, ανοικτή κεφαλή
ετικέτα, ανοικτή ετικέττα τίτλου,

205
00:09:58,430 --> 00:10:03,230
Στη συνέχεια κλειστά τίτλο, κλειστή κεφαλή, ανοιχτή
ετικέτα σώμα, κάποιο κείμενο, κλειστό σώμα,

206
00:10:03,230 --> 00:10:04,720
κλειστή HTML.

207
00:10:04,720 --> 00:10:06,290
>> Αλλά μια παύση εδώ για μια στιγμή.

208
00:10:06,290 --> 00:10:09,030
Αυτός ο κωδικός, ακόμη και αν έχετε
ποτέ δεν γράφτηκε πριν

209
00:10:09,030 --> 00:10:11,864
αλλά ακόμα δεν καταλαβαίνω
τι συμβαίνει, φαίνεται αρκετά καλό.

210
00:10:11,864 --> 00:10:12,821
Δεξιά, είναι πολύ καθαρό.

211
00:10:12,821 --> 00:10:14,120
Είναι πολύ ωραίο στυλιστικά.

212
00:10:14,120 --> 00:10:16,190
Πολλοί βαθούλωμα και λευκό χώρο.

213
00:10:16,190 --> 00:10:18,020
Facebook δεν είναι.

214
00:10:18,020 --> 00:10:23,190
Γιατί λοιπόν είναι τόσο πολύ Facebook
χειρότερα από ό, τι στο γράψιμο HTML;

215
00:10:23,190 --> 00:10:24,310
Προφανώς.

216
00:10:24,310 --> 00:10:26,899
>> Δεξιά, αυτό είναι σαν ένα
από τους πέντε για το στυλ.

217
00:10:26,899 --> 00:10:29,315
Υπάρχει ένας καθοριστικός λόγος
για να μειώσουν αυτές τις γωνίες.

218
00:10:29,315 --> 00:10:31,069

219
00:10:31,069 --> 00:10:33,860
Εντάξει, έτσι δεν θέλουν να
καταστήσει ευκολότερο για σας να το διαβάσετε.

220
00:10:33,860 --> 00:10:36,940
Έτσι, κατά κάποιο τρόπο, είναι
συσκοτίζοντας αυτό, το είδος της κρυπτογράφησης

221
00:10:36,940 --> 00:10:40,260
τουλάχιστον αισθητικά έτσι
ότι είναι πιο δύσκολο για Myspace

222
00:10:40,260 --> 00:10:42,705
να πάει και να καταληστεύουν τους
αρχική σελίδα και το HTML για αυτό.

223
00:10:42,705 --> 00:10:45,080
Αποδεικνύεται ότι με τα προγράμματα
όμως, συμπεριλαμβανομένων Chrome,

224
00:10:45,080 --> 00:10:47,020
μπορούμε να καθαρίσει αυτό επάνω σούπερ εύκολα.

225
00:10:47,020 --> 00:10:49,420
Έτσι δεν είναι αρκετά ότι είναι ο λόγος.

226
00:10:49,420 --> 00:10:51,290
Τι άλλο θα μπορούσε να είναι η αιτία.

227
00:10:51,290 --> 00:10:51,790
Ναι.

228
00:10:51,790 --> 00:10:54,680

229
00:10:54,680 --> 00:10:55,890
Ναι, τα στοιχεία άσπρο διάστημα έξοδα.

230
00:10:55,890 --> 00:10:56,598
Τι εννοείς?

231
00:10:56,598 --> 00:11:02,250

232
00:11:02,250 --> 00:11:02,979
Ναι, ακριβώς.

233
00:11:02,979 --> 00:11:06,020
Εάν πατήσετε το πλήκτρο Tab για την παρτίδα ή την
πλήκτρο διαστήματος, να εξετάσει τις επιπτώσεις.

234
00:11:06,020 --> 00:11:10,060
Έτσι, κάθε πλήκτρο στο πληκτρολόγιό σας είναι ένα
[Δεν ακούγεται] εκπροσωπήθηκαν ως ένα byte.

235
00:11:10,060 --> 00:11:14,560
>> Έτσι, ας υποθέσουμε ότι ο Μάρκος ή σε οποιοδήποτε προγραμματιστές
αυτές τις μέρες χτυπά το spacebar μόνο μία φορά

236
00:11:14,560 --> 00:11:17,899
σε αυτή τη σελίδα HTML που
αντιπροσωπεύει την αρχική σελίδα του Facebook.

237
00:11:17,899 --> 00:11:19,690
Και το Facebook έχει πολλά
των χρηστών αυτές ημέρες.

238
00:11:19,690 --> 00:11:24,030
Έτσι, ας υποθέσουμε ότι η αρχική σελίδα του Facebook
επισκέπτεται από ένα δισεκατομμύριο άνθρωποι σήμερα.

239
00:11:24,030 --> 00:11:27,020
Και κάποιος στο Facebook έχει
χτύπησε το πλήκτρο διαστήματος μόλις μία φορά.

240
00:11:27,020 --> 00:11:29,890
>> Έτσι, ένα επιπλέον byte,
ένα δισεκατομμύριο αιτήματα,

241
00:11:29,890 --> 00:11:32,790
πόσα περισσότερα δεδομένα είναι το Facebook
μεταφορά μέσω του διαδικτύου

242
00:11:32,790 --> 00:11:37,160
επειδή κάποιος χτύπησε το
πλήκτρο διαστήματος στο πληκτρολόγιο του;

243
00:11:37,160 --> 00:11:41,660
Ένα δισεκατομμύριο bytes, ή ένα gigabyte
αποστέλλονται δεδομένα από το Facebook servers

244
00:11:41,660 --> 00:11:43,626
για τους ανθρώπους γύρω από το
κόσμο για κανέναν καλό λόγο.

245
00:11:43,626 --> 00:11:44,750
Τώρα, αυτό είναι μόνο ένα χώρο.

246
00:11:44,750 --> 00:11:48,866
>> Φανταστείτε να καθαρίσετε πραγματικά αυτό
το πράγμα και είναι στοιχισμένες και προστίθεται

247
00:11:48,866 --> 00:11:50,990
πολλά λευκά χώρο και
χαρακτήρες tab και χώρους,

248
00:11:50,990 --> 00:11:53,656
θα καταλήξετε gigabytes των δαπανών,
αν δεν terra bytes περισσότερο χώρο.

249
00:11:53,656 --> 00:11:56,640
Και έτσι σούπερ κοινό στο
πραγματικό κόσμο της ανάπτυξης ιστοσελίδων

250
00:11:56,640 --> 00:11:58,950
είναι να minify κωδικό σας.

251
00:11:58,950 --> 00:12:01,280
Και θα δούμε τελικά
πώς μπορείτε να το κάνετε αυτό.

252
00:12:01,280 --> 00:12:04,630
>> Αλλά σήμερα, θα αρχίσετε να γράφετε κώδικα
ότι στην πραγματικότητα είναι αναγνώσιμα από εμάς τους ανθρώπους.

253
00:12:04,630 --> 00:12:10,120
Αποδεικνύεται, όμως, αν πάτε πίσω
σε αυτό το εργαλείο στο Chrome Ελέγξτε Element,

254
00:12:10,120 --> 00:12:12,030
στο παρελθόν, ήμασταν στην καρτέλα Δίκτυο.

255
00:12:12,030 --> 00:12:15,430
Αποδεικνύεται ότι αν πάτε να το
Καρτέλα στοιχεία, αυτό που πραγματικά να δείτε

256
00:12:15,430 --> 00:12:19,230
είναι του Chrome αρκετά τυπωμένο
εκδοχή της ίδιας HTML.

257
00:12:19,230 --> 00:12:20,640
Έτσι έχουμε το deobfuscated.

258
00:12:20,640 --> 00:12:22,472
Έτσι δεν είναι καμία αντιστοιχία για έναν υπολογιστή.

259
00:12:22,472 --> 00:12:24,430
Και τώρα μπορείτε πραγματικά
κάντε κλικ γύρω και να αρχίσει

260
00:12:24,430 --> 00:12:27,630
για να δείτε την ιεραρχία που είναι μια ιστοσελίδα.

261
00:12:27,630 --> 00:12:28,780
Ας κάνουν ακριβώς αυτό.

262
00:12:28,780 --> 00:12:32,120
Πάω να πάει μπροστά και να ανοίξει για
Mac μου ένα πρόγραμμα που ονομάζεται επεξεργασίας κειμένου.

263
00:12:32,120 --> 00:12:35,490
Και να υπενθυμίσω ότι αυτό είναι μόνο
ένα εξαιρετικά απλό πρόγραμμα κειμένου.

264
00:12:35,490 --> 00:12:37,490
Τα Windows διαθέτουν Notepad.exe.

265
00:12:37,490 --> 00:12:39,820
Και Πάω στα Πλήρη
πληκτρολογήστε την ακόλουθη.

266
00:12:39,820 --> 00:12:44,650
Doc τύπου HTML, ανοιχτό βραχίονα
HTML, έκλεισε βραχίονα HTML,

267
00:12:44,650 --> 00:12:49,000
έχουμε το κεφάλι της σελίδας εδώ,
το άκρο της κεφαλής της σελίδας εδώ,

268
00:12:49,000 --> 00:12:52,310
ένας τίτλος θα είναι όπως, hello world.

269
00:12:52,310 --> 00:12:56,660
>> Και στη συνέχεια, εδώ κάτω, χρειαζόμαστε
το σώμα της ιστοσελίδας.

270
00:12:56,660 --> 00:12:58,050
Κλειστό το σώμα.

271
00:12:58,050 --> 00:13:00,700
Και στη συνέχεια εδώ, hello world.

272
00:13:00,700 --> 00:13:01,270
Εντάξει.

273
00:13:01,270 --> 00:13:03,350
Έτσι, έχουμε γράψει ένα σούπερ γρήγορο ιστοσελίδας.

274
00:13:03,350 --> 00:13:06,675
Πάω να το αποθηκεύσετε ως
hello.html στην επιφάνεια εργασίας μου.

275
00:13:06,675 --> 00:13:09,050
My Mac πρόκειται να διαμαρτύρονται,
νομίζοντας ότι, περιμένετε ένα λεπτό,

276
00:13:09,050 --> 00:13:11,091
αυτό είναι ένα αρχείο κειμένου, κάντε
θέλετε να το ονομάσετε .txt;

277
00:13:11,091 --> 00:13:13,300
Αλλά όχι, θέλω να χρησιμοποιήσω HTML τελεία.

278
00:13:13,300 --> 00:13:16,140
>> Και τότε τι είναι ωραίο αν μου
απλά κάντε διπλό κλικ σε αυτό το αρχείο,

279
00:13:16,140 --> 00:13:18,600
hello.html, εδώ είναι η ιστοσελίδα μου.

280
00:13:18,600 --> 00:13:22,564
Δυστυχώς, είμαι ο
μόνο άτομο στον κόσμο

281
00:13:22,564 --> 00:13:23,980
οι οποίοι μπορούν να επισκεφθούν αυτή τη σελίδα αυτή τη στιγμή.

282
00:13:23,980 --> 00:13:26,734
Διότι πού θα ζήσουν τα φαινόμενα;

283
00:13:26,734 --> 00:13:27,650
Είναι στο Mac μου, σωστά;

284
00:13:27,650 --> 00:13:28,470
Ποια είναι άχρηστο.

285
00:13:28,470 --> 00:13:30,390
Όπως κανείς σε αυτή την αίθουσα
πόσο μάλλον στο διαδίκτυο

286
00:13:30,390 --> 00:13:31,598
μπορούν να επισκεφθούν πραγματικά αυτή τη σελίδα.

287
00:13:31,598 --> 00:13:33,820
Έτσι, σήμερα, θα πρέπει να
προσθέσω ένα ακόμη στοιχείο.

288
00:13:33,820 --> 00:13:36,720
>> Και για να γίνει αυτό, θα πάω να
να προχωρήσει και να ανοίξει σύννεφο 9.

289
00:13:36,720 --> 00:13:40,090
Έτσι Cloud 9 είναι φυσικά
σύννεφο που βασίζεται υπηρεσία-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- που έχει όλα τους χώρους εργασίας μας
τρέχει κάπου στο διαδίκτυο.

291
00:13:44,890 --> 00:13:48,330
Και αυτό σημαίνει ότι όλα τα αρχεία μας
είναι ήδη προσιτές στο κοινό.

292
00:13:48,330 --> 00:13:49,830
Ας πάμε μπροστά και να το κάνουμε αυτό.

293
00:13:49,830 --> 00:13:53,670
Πάω να πάει μπροστά και να
δημιουργήσετε ένα νέο αρχείο NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Πάω να το αποθηκεύσετε ως πριν
όπως hello.html και πατήστε αποθήκευση.

295
00:13:58,819 --> 00:14:01,860
Και τώρα ακριβώς για να εξοικονομήσετε χρόνο, θα πάω
να προχωρήσει και να αντιγράψετε επικολλήσετε αυτόν τον κώδικα

296
00:14:01,860 --> 00:14:03,470
αντί να πληκτρολογήσετε ξανά.

297
00:14:03,470 --> 00:14:04,550
Και να το αποθηκεύσετε.

298
00:14:04,550 --> 00:14:07,550
Και έτσι τώρα έχω ένα
hello.html αρχείο που ονομάζεται.

299
00:14:07,550 --> 00:14:09,710
Αλλά πώς μπορώ να κάνω πραγματικότητα
ανοίξτε το ως μια ιστοσελίδα;

300
00:14:09,710 --> 00:14:14,120
Λοιπόν, αποδεικνύεται η ενσωματωμένη στο CS50
IDE δεν είναι μόνο ένας compiler σαν κλαγγή

301
00:14:14,120 --> 00:14:16,670
και ένα πρόγραμμα εντοπισμού σφαλμάτων, όπως και GDB
τσαμπιά από άλλα προγράμματα,

302
00:14:16,670 --> 00:14:21,140
υπάρχει πραγματικά ένα πλήρες
web server τρέχει μέσα CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Όλοι σας, δηλαδή,
έχετε το δικό σας web server.

304
00:14:23,900 --> 00:14:26,850
Και ένα web server είναι απλά ένα κομμάτι
λογισμικού των οποίων ο σκοπός της ζωής

305
00:14:26,850 --> 00:14:28,220
είναι να εξυπηρετήσει έως και ιστοσελίδες.

306
00:14:28,220 --> 00:14:32,490
Για να ακούσετε για αιτήσεις από προγράμματα περιήγησης και
ανταποκριθεί με λίγη εικονική φακέλους

307
00:14:32,490 --> 00:14:35,290
εντός της οποίας είναι η
περιεχόμενο που έχω γράψει.

308
00:14:35,290 --> 00:14:38,372
Έτσι, αυτό το web server είναι
πραγματικά δωρεάν και ανοιχτού κώδικα.

309
00:14:38,372 --> 00:14:40,830
Σε περίπτωση ανοικτού κώδικα σημαίνει ακριβώς
λογισμικό που κάποιος άλλος έχει

310
00:14:40,830 --> 00:14:43,480
γραμμένο ότι όλοι μας μπορούμε να
πραγματικά να δείτε και να κατεβάσετε ακόμα και

311
00:14:43,480 --> 00:14:44,780
αλλάξετε τον πηγαίο κώδικα.

312
00:14:44,780 --> 00:14:46,150
Και αυτό λέγεται Apache.

313
00:14:46,150 --> 00:14:51,450
>> Και το κάναμε λίγο πιο εύκολο να
χρήση σε CS50IDE καλώντας το Apache 50.

314
00:14:51,450 --> 00:14:53,780
Έτσι ώστε να μπορεί πράγματι
κατανοούν την ακόλουθη.

315
00:14:53,780 --> 00:14:56,560
Πάω να πω Apache 50 αρχή.

316
00:14:56,560 --> 00:14:58,910
Και τότε είμαι απλώς πρόκειται να πω τελεία.

317
00:14:58,910 --> 00:15:01,080
Και βλέπουμε κάποια κάπως
απόκρυφες μήνυμα λέγοντας

318
00:15:01,080 --> 00:15:04,640
ρύθμιση του Apache έγγραφο [? ομάδα;]
στο σπίτι, ubuntu, όποια και αν είναι,

319
00:15:04,640 --> 00:15:05,770
κάθετο χώρο εργασίας.

320
00:15:05,770 --> 00:15:08,280
Ξεκινώντας web server
Apache 2 επιτυχώς.

321
00:15:08,280 --> 00:15:11,330
>> Έτσι, τα πολυλογώ, εγώ
Μόλις έσπρωξε ένα κουμπί

322
00:15:11,330 --> 00:15:18,000
και να μετατραπεί σε ένα web server ο οποίος είναι τώρα
ακούει στο διαδίκτυο στη θύρα TCP

323
00:15:18,000 --> 00:15:20,587
80 σε μια συγκεκριμένη διεύθυνση.

324
00:15:20,587 --> 00:15:22,420
Και λέει εδώ, και
Αυτό θα αλλάξει με βάση

325
00:15:22,420 --> 00:15:26,550
σχετικά με το όνομα χρήστη σας και σε άλλους παράγοντες,
αλλά παρατηρήσετε τώρα αν κάνω κλικ αυτό,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard και έτσι και
έτσι, παρατηρήσετε ότι όλο αυτό το διάστημα

327
00:15:30,211 --> 00:15:31,960
για το παρελθόν πολλές
εβδομάδες, μπορεί να έχετε

328
00:15:31,960 --> 00:15:35,200
Παρατηρήσαμε ότι δικό σας όνομα χρήστη
είναι ενσωματωμένο στο πάνω δεξί χέρι

329
00:15:35,200 --> 00:15:37,130
γωνιά της CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> Και αυτό πράγματι έχει όλα αυτά
εγκαίρως η διεύθυνση στην οποία μπορείτε να

331
00:15:41,050 --> 00:15:43,574
επισκεφθείτε όλα τα αρχεία σας μέσω του διαδικτύου.

332
00:15:43,574 --> 00:15:45,990
Μέχρι τώρα, δεν έχει σημασία,
επειδή σε C, που σε γενικές γραμμές

333
00:15:45,990 --> 00:15:48,073
θέλουν τα πράγματα τρέχει σε ένα
τερματικό, δεν είναι στο διαδίκτυο.

334
00:15:48,073 --> 00:15:50,800
Αλλά σήμερα, αρχίζουμε
γράφοντας web-based κώδικα

335
00:15:50,800 --> 00:15:53,350
ότι θέλουμε
προσβάσιμη στις δημόσιες διευθύνσεις URL.

336
00:15:53,350 --> 00:15:56,100
Λοιπόν, τι Πάω να
κάνετε είναι να πατήσετε αυτό το URL.

337
00:15:56,100 --> 00:16:00,880
>> Και παρατηρώ ότι βλέπω μια αρκετά
άσχημο δείκτη, μια λίστα καταλόγου,

338
00:16:00,880 --> 00:16:04,090
αλλά τι αρχείο πηδά έξω σε σας ίσως;

339
00:16:04,090 --> 00:16:05,210
Hello.html.

340
00:16:05,210 --> 00:16:07,870
Αυτό συμβαίνει γιατί έχω αποθηκεύσει
το αρχείο στο χώρο εργασίας μου.

341
00:16:07,870 --> 00:16:12,310
Και ό, τι έχω πει Apache τον web server
είναι να κοιτάξουμε στον κατάλογο χώρου εργασίας του Δαβίδ.

342
00:16:12,310 --> 00:16:15,300
Και αφήνετε κανέναν στο
κόσμο δείτε αυτά τα αρχεία.

343
00:16:15,300 --> 00:16:19,050
>> Και πράγματι, αν τώρα
κάντε κλικ στο hello.html,

344
00:16:19,050 --> 00:16:22,180
Βλέπω μέσα σε αυτήν την καρτέλα ακριβώς αυτό το αρχείο.

345
00:16:22,180 --> 00:16:26,430
Τώρα παρατηρήσετε, σύννεφο πράττειν 9 του
κάτι λίγο χρήσιμο για εμάς.

346
00:16:26,430 --> 00:16:29,480
Εντός CS50 IDE, παρατηρήσετε υπάρχει
ξαφνικά μια γραμμή διευθύνσεων.

347
00:16:29,480 --> 00:16:33,690
Αυτό συμβαίνει γιατί ακόμα κι αν είμαστε
χρησιμοποιώντας το Chrome για να επισκεφθείτε CS50IDE,

348
00:16:33,690 --> 00:16:37,940
στο εσωτερικό του CS50IDE είναι η δική του
έκδοση ενός web browser αυτή τη στιγμή.

349
00:16:37,940 --> 00:16:40,820
Και έτσι αντί
περιπλέκουν τα πράγματα ως έχουν,

350
00:16:40,820 --> 00:16:42,955
Πάω να πάει μπροστά
και απλά αντιγράψτε αυτό το URL.

351
00:16:42,955 --> 00:16:45,330
Πάω να πάει μπροστά και απλά
ανοίξει το δικό του παράθυρο μου Chrome.

352
00:16:45,330 --> 00:16:47,800
Έτσι, δεν υπάρχει μαγική εδώ, δεν CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Είμαι ακριβώς πρόκειται να επικολλήσετε κυριολεκτικά
μου J Χάρβαρντ διεύθυνση URL και πατήστε Enter.

354
00:16:51,800 --> 00:16:54,750
Και ιδού, τώρα, και
θεωρητικά, ο καθένας

355
00:16:54,750 --> 00:16:57,700
στο διαδίκτυο, αν έχω ρυθμιστεί
δικαιώματα κατάλληλα,

356
00:16:57,700 --> 00:16:58,720
μπορούν να επισκεφθούν αυτό το αρχείο.

357
00:16:58,720 --> 00:17:03,230
Και έτσι τώρα, αν μου είπε
hello.html, voila, εκεί

358
00:17:03,230 --> 00:17:06,366
είναι απίστευτα απογοητευτικό ιστοσελίδα μου.

359
00:17:06,366 --> 00:17:07,740
Ας κάνουμε ένα γρήγορο έλεγχο λογικότητας.

360
00:17:07,740 --> 00:17:09,710
Επειδή όλα αυτά
είναι εννοιολογική συσταθεί.

361
00:17:09,710 --> 00:17:13,180
Και εμείς δεν έχουμε πραγματικά πολύ
Σας διδάξει πώς να γράψετε HTML per se.

362
00:17:13,180 --> 00:17:16,084
Έτσι Οποιεσδήποτε ερωτήσεις τώρα
σχετικά με το τι ακριβώς συνέβη;

363
00:17:16,084 --> 00:17:18,549

364
00:17:18,549 --> 00:17:19,049
Ναι.

365
00:17:19,049 --> 00:17:24,290

366
00:17:24,290 --> 00:17:25,800
Μήπως CS50 κατέχουν αυτές τις ιστοσελίδες;

367
00:17:25,800 --> 00:17:26,460
Με ποια έννοια?

368
00:17:26,460 --> 00:17:28,947

369
00:17:28,947 --> 00:17:29,530
Καλή ερώτηση.

370
00:17:29,530 --> 00:17:32,429
Έτσι CS50 έχει στην κυριότητά CS50.io.

371
00:17:32,429 --> 00:17:33,970
Έχουμε πράγματι αγοράσει αυτό το όνομα τομέα.

372
00:17:33,970 --> 00:17:37,240
Και από τη φύση σας παιδιά
σύνδεση στο CS50IDE,

373
00:17:37,240 --> 00:17:39,270
σε όλους σας να πάρετε ό, τι λέγεται ένα subdomain.

374
00:17:39,270 --> 00:17:46,840
>> Έτσι IDE50-Malan, ή IDE50-Rob.CS50.io,
ότι είναι μοναδική διεύθυνση σας μέσα

375
00:17:46,840 --> 00:17:47,730
το όνομα τομέα μας.

376
00:17:47,730 --> 00:17:50,850
Έτσι, για τους σκοπούς του μαθήματος,
έχετε τη δική σας μοναδική διεύθυνση.

377
00:17:50,850 --> 00:17:55,150
Αλλά έχουμε απλοποιήσει τα πράγματα από
την αγορά του τομέα ανωτάτου επιπέδου, CS50 dot

378
00:17:55,150 --> 00:17:58,050
I / O και, στη συνέχεια, όλοι οι άλλοι είναι
μέσα από αυτό, να το πω έτσι.

379
00:17:58,050 --> 00:17:59,890
Και θα επανέλθουμε σε αυτό
σε μια-δυο εβδομάδες κατά πάσα πιθανότητα,

380
00:17:59,890 --> 00:18:01,930
ιδιαίτερα στο τελικό σχέδιο
χρόνο, όταν κάποιοι από εσάς

381
00:18:01,930 --> 00:18:03,596
ίσως να θέλετε να αποκτήσετε το δικό σας ονόματα τομέα.

382
00:18:03,596 --> 00:18:06,270
Είναι στην πραγματικότητα σχετικά
απλή.

383
00:18:06,270 --> 00:18:06,770
Εντάξει.

384
00:18:06,770 --> 00:18:07,880
Ας το κάνουμε τώρα αυτό.

385
00:18:07,880 --> 00:18:11,910
Πάω να πάει πίσω στο
CS50IDE, όπου το αρχείο μου τώρα,

386
00:18:11,910 --> 00:18:14,710
hello.html, δεν είναι και τόσο ενδιαφέρουσα.

387
00:18:14,710 --> 00:18:17,130
Θα ήθελα να κάνω κάτι
λίγο καλύτερο από αυτό.

388
00:18:17,130 --> 00:18:19,440
Έτσι, Πάω να κάνω κάτι τέτοιο.

389
00:18:19,440 --> 00:18:21,510
Επιτρέψτε μου ανοιχτό paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Έτσι, αυτό είναι ένα αρχείο που έγραψα πριν.

391
00:18:23,560 --> 00:18:26,480
Στην κορυφή του, όπως
πάντα, έχουμε σχόλια.

392
00:18:26,480 --> 00:18:28,730
Αλλά σε HTML, σχόλια
κοιτάξουμε λίγο διαφορετικό.

393
00:18:28,730 --> 00:18:33,270
On line τρεις και η γραμμή 14, που
δείτε τη σύνταξη για να ξεκινήσει ένα σχόλιο

394
00:18:33,270 --> 00:18:34,020
και στο τέλος ένα σχόλιο.

395
00:18:34,020 --> 00:18:36,820
>> Αλλά κανένα από τα πράγματα σε
μεταξύ των θεμάτων λειτουργικά.

396
00:18:36,820 --> 00:18:40,250
Είναι απλά μια σημείωση για μια
ανθρώπινο τι συμβαίνει εδώ.

397
00:18:40,250 --> 00:18:43,040
Και ακριβώς όπως μια γρήγορη λογική
ελέγξτε, αν μετακινηθείτε προς τα κάτω,

398
00:18:43,040 --> 00:18:46,820
ποια είναι η προφανής νέα
ετικέτα που εισάγαμε;

399
00:18:46,820 --> 00:18:52,130
Οι ετικέτες μέχρι στιγμής έχουμε δει είναι ανοιχτά
βραχίονα HTML, το κεφάλι, τον τίτλο, και το σώμα.

400
00:18:52,130 --> 00:18:54,400
Αλλά τι είναι προφανώς νέος τώρα;

401
00:18:54,400 --> 00:18:55,200
>> Ναι, έτσι σ.

402
00:18:55,200 --> 00:18:57,320
Η ετικέτα p ή tag παραγράφου.

403
00:18:57,320 --> 00:19:01,182
Και τότε ακριβώς δανειστεί κάποια προεπιλογή
Λατινικό κείμενο να αποτελέσει σκέψεις μου.

404
00:19:01,182 --> 00:19:03,390
Διότι αυτό που ήθελα να
αποδεικνύουν είναι το πώς μπορείτε να

405
00:19:03,390 --> 00:19:05,859
αντιπροσωπεύουν παραγράφους κειμένου σε μορφή HTML.

406
00:19:05,859 --> 00:19:08,400
Και έτσι αυτό που έχει αρχίσει να συμβεί
εδώ είναι ότι υπάρχει ήδη

407
00:19:08,400 --> 00:19:09,657
ανάπτυξη ενός προτύπου.

408
00:19:09,657 --> 00:19:10,990
Και επιτρέψτε μου να προχωρήσει και να το κάνουμε αυτό.

409
00:19:10,990 --> 00:19:12,760
Επιτρέψτε μου πρώτα να απενεργοποιήσετε Apache.

410
00:19:12,760 --> 00:19:17,340
Και Πάω να το πω για να ξεκινήσει η ίδια
και πάλι στο εσωτερικό της σημερινής πηγής επτά

411
00:19:17,340 --> 00:19:18,420
μ κατάλογο.

412
00:19:18,420 --> 00:19:20,100
Έτσι ώστε να έχω πρόσβαση σε όλα.

413
00:19:20,100 --> 00:19:22,230
>> Και τώρα, αν πάω πίσω στο
Αυτή η λίστα καταλόγου,

414
00:19:22,230 --> 00:19:24,846
παρατηρήσετε βλέπω κάθε αρχείο από σήμερα.

415
00:19:24,846 --> 00:19:26,720
Και θα δείτε στην
επόμενη ομάδα πρόβλημα, θα

416
00:19:26,720 --> 00:19:28,594
να σας δώσει οδηγίες
για να κάνει ακριβώς αυτό.

417
00:19:28,594 --> 00:19:35,210
Αν ανοίξω paragraphs.html, αυτό θα μπορούσε
καθώς μοιάζει με μια γλώσσα προγραμματισμού

418
00:19:35,210 --> 00:19:36,970
σε σας εάν δεν μιλάτε ή να διαβάσουν τα λατινικά.

419
00:19:36,970 --> 00:19:40,525
Αλλά αυτό είναι μόνο τρεις παραγράφους
του κειμένου που είναι σημειωμένο σε μορφή HTML.

420
00:19:40,525 --> 00:19:43,100
>> Και παρατηρήστε την παράγραφο
διαλείμματα μεταξύ τους.

421
00:19:43,100 --> 00:19:46,400
Επειδή αποδεικνύεται,
και ακόμα κι αν

422
00:19:46,400 --> 00:19:49,210
μπορούσε να αφήσει να το κάνετε αυτό,
ενώ στον πραγματικό κόσμο,

423
00:19:49,210 --> 00:19:51,370
αν θέλετε να βάλετε γραμμή
διαλείμματα μεταξύ των πραγμάτων,

424
00:19:51,370 --> 00:19:55,680
ίσως πολύ απλά
το κάνετε αυτό και να χτυπήσει Αποθήκευση.

425
00:19:55,680 --> 00:19:59,460
Και τώρα, αν μου reload εδώ, προειδοποίηση
ότι τα πάντα απλά θολώνει μαζί

426
00:19:59,460 --> 00:20:01,100
σε μία μόνο σταγόνα του κειμένου.

427
00:20:01,100 --> 00:20:03,570
Επειδή HTML είναι το είδος της μια χαζή γλώσσα.

428
00:20:03,570 --> 00:20:07,230
>> Έχει ως στόχο να χρησιμοποιηθούν σε τέτοια
ένας τρόπος που το πρόγραμμα περιήγησης θα είναι μόνο

429
00:20:07,230 --> 00:20:09,920
κάνει ρητά τι θα πει να κάνουμε.

430
00:20:09,920 --> 00:20:12,890
Έτσι, αν δεν το πείτε
να μου δώσει μια νέα παράγραφο,

431
00:20:12,890 --> 00:20:14,569
δεν πρόκειται να δούμε μια νέα παράγραφο.

432
00:20:14,569 --> 00:20:16,360
Και στην πραγματικότητα, αυτό που ο
Ο περιηγητής πρόκειται να κάνει

433
00:20:16,360 --> 00:20:20,020
Είναι ακόμα και αν πατήσετε Enter,
ας πούμε ξανά και ξανά

434
00:20:20,020 --> 00:20:23,190
και πάλι, κίνηση με αυτόν τον τρόπο το κείμενο
προς τα κάτω στην οθόνη και στη συνέχεια να αποθηκεύσετε

435
00:20:23,190 --> 00:20:26,610
και στη συνέχεια να φορτώσετε εκ νέου, ο browser θα
να καταρρεύσει όλο αυτό το λευκό κενό

436
00:20:26,610 --> 00:20:29,021
σε ένα μόνο, ορατό κενό.

437
00:20:29,021 --> 00:20:29,520
Εντάξει.

438
00:20:29,520 --> 00:20:30,869
Έτσι, αυτό είναι το tag παραγράφου.

439
00:20:30,869 --> 00:20:32,910
Και ναι, ποιο είναι το σχέδιο
ότι είναι αναπτυσσόμενες εδώ;

440
00:20:32,910 --> 00:20:37,450
Λοιπόν, φαίνεται να είναι η περίπτωση κατά την οποία
HTML είναι όλα σχετικά με την έναρξη μιας ετικέτας

441
00:20:37,450 --> 00:20:38,460
και τελειώνει μια ετικέτα.

442
00:20:38,460 --> 00:20:39,300
Και τι είναι μια ετικέτα;

443
00:20:39,300 --> 00:20:41,160
Λοιπόν, αυτό είναι απλά ένα κομμάτι της σύνταξης.

444
00:20:41,160 --> 00:20:44,400
Ανοίξτε βραχίονα, μια λέξη-κλειδί,
κλειστή στήριγμα, είναι μια ετικέτα.

445
00:20:44,400 --> 00:20:45,510
Ή να ξεκινήσετε την ετικέτα.

446
00:20:45,510 --> 00:20:48,590
Και στη συνέχεια, όταν είστε
γίνεται να εκφραστείς,

447
00:20:48,590 --> 00:20:52,300
όπως στην τελειώσετε με την παράγραφο,
κάνετε να το πω έτσι αντίθετο.

448
00:20:52,300 --> 00:20:55,480
Αλλά το αντίθετο δεν είναι αρκετά προς τα πίσω.

449
00:20:55,480 --> 00:21:00,630
>> Μπορείτε απλά να προτάξετε την ίδια ετικέτα του
ονομασία με κάθετο σαν αυτό.

450
00:21:00,630 --> 00:21:01,130
Εντάξει.

451
00:21:01,130 --> 00:21:02,570
Έτσι, δεν είναι όλα τόσο συναρπαστικό.

452
00:21:02,570 --> 00:21:05,270
Και στην πραγματικότητα, δεν είμαστε καθιστώντας το
web όλοι ότι περισσότερο ενδιαφέρον.

453
00:21:05,270 --> 00:21:07,630
Τι γίνεται αν θέλω να κάνω
τα πράγματα μεγαλύτερα και τολμηρό;

454
00:21:07,630 --> 00:21:11,780
Έτσι αποδεικνύεται ότι εδώ είναι ένα παράδειγμα
σε headings.html, όπου στο σώμα μου,

455
00:21:11,780 --> 00:21:17,280
Έχω μια ετικέτα Η1, Η2, Η3,
τέσσερα, πέντε, ή έξι, τα οποία όλα

456
00:21:17,280 --> 00:21:18,310
φαίνεται αρκετά απόκρυφες.

457
00:21:18,310 --> 00:21:21,010
Αλλά αν πάω να ανοίξει αυτό
παράδειγμα, ας ρίξουμε μια ματιά.

458
00:21:21,010 --> 00:21:22,490
Headings.html.

459
00:21:22,490 --> 00:21:27,030
>> Έτσι, τα προγράμματα περιήγησης από προεπιλογή μπορεί να σας δώσει το κείμενο
ότι είναι μεγάλες και τολμηρές ανόμοιων μεγεθών.

460
00:21:27,030 --> 00:21:28,070
Η1 είναι μεγάλη.

461
00:21:28,070 --> 00:21:31,240
Η6 είναι μικρότερο και, στη συνέχεια,
οτιδήποτε άλλο στο μεταξύ.

462
00:21:31,240 --> 00:21:34,170
Έτσι ώστε να είναι ενδιαφέρουσα, αλλά ακόμα
δεν είναι πραγματικά το διαδίκτυο ξέρω.

463
00:21:34,170 --> 00:21:36,870
Τι γίνεται αν θέλουμε να έχω
κάτι σαν μια λίστα. .

464
00:21:36,870 --> 00:21:40,190
Έτσι, εδώ είναι μια λίστα με κουκκίδες
τρία από τα σπίτια του Χάρβαρντ.

465
00:21:40,190 --> 00:21:41,600
>> Πώς μπορείτε να κάνετε για αυτό;

466
00:21:41,600 --> 00:21:45,410
Λοιπόν, ρίξτε μια ματιά στο list.html.

467
00:21:45,410 --> 00:21:47,870
Και εδώ βλέπουμε μια
λίγο funkiness

468
00:21:47,870 --> 00:21:49,630
αλλά ας εξετάσουμε τι συμβαίνει.

469
00:21:49,630 --> 00:21:56,182
Έτσι, με βάση αυτό που μόλις είδαμε,
UL σημαίνει μη διατεταγμένη λίστα.

470
00:21:56,182 --> 00:21:57,640
Μη αριθμημένη λίστα με κουκκίδες σημαίνει ακριβώς.

471
00:21:57,640 --> 00:21:58,431
Δεν υπάρχει κανένας αριθμός.

472
00:21:58,431 --> 00:22:01,850
Υπάρχει επίσης κάτι που ονομάζεται
κατάλογο, το οποίο είναι ένα ΕΓ σε ετικέτα παραγγείλει.

473
00:22:01,850 --> 00:22:05,350
Στη συνέχεια LI, στοιχείο της λίστας είναι το μόνο που σημαίνει.

474
00:22:05,350 --> 00:22:07,790
>> Και έτσι αυτόματα
αριθμούς τα πάντα για σένα.

475
00:22:07,790 --> 00:22:11,270
Αλλά και πάλι, όλα εσοχή μου
και άσπρο διάστημα είναι μόνο για το καλό μου.

476
00:22:11,270 --> 00:22:13,050
Το πρόγραμμα περιήγησης δεν είναι
στην πραγματικότητα πρόκειται για τη φροντίδα.

477
00:22:13,050 --> 00:22:16,670
Έτσι, ακόμη κι αν δεν μπορούσε να
το κάνετε αυτό, ακριβώς για να είναι σαφής,

478
00:22:16,670 --> 00:22:19,880
δεν θα πρέπει, ακόμη και αν
ο browser θα εξακολουθεί

479
00:22:19,880 --> 00:22:22,130
να είναι σε θέση να το καταλάβουν μια χαρά.

480
00:22:22,130 --> 00:22:24,590
Είμαι χτύπημα στο reload μου
πρόγραμμα περιήγησης, είμαι κλικ reload

481
00:22:24,590 --> 00:22:26,760
και καμία αλλαγή συμβαίνει
επειδή το πρόγραμμα περιήγησης ακόμα

482
00:22:26,760 --> 00:22:29,550
κάνει ακριβώς αυτό που της λέτε.

483
00:22:29,550 --> 00:22:30,050
>> Εντάξει.

484
00:22:30,050 --> 00:22:31,340
Έτσι, όλα αυτά είναι μόνο κείμενο.

485
00:22:31,340 --> 00:22:33,730
Τώρα, ας κάνουμε κάτι πιο ενδιαφέρον.

486
00:22:33,730 --> 00:22:36,660
Πάω να πάει μπροστά και να
δανειστώ ένα μέρος αυτής της HTML.

487
00:22:36,660 --> 00:22:40,910
Πάω να πάει μπροστά και να
δημιουργήσετε ένα νέο αρχείο εδώ.

488
00:22:40,910 --> 00:22:43,370
Και θα καλέσετε αυτό το rick.html.

489
00:22:43,370 --> 00:22:46,190

490
00:22:46,190 --> 00:22:48,916
Έχουμε δυσανάλογα
κάτι μεταχειρισμένα

491
00:22:48,916 --> 00:22:51,290
ρολό ονομάζεται Rick σε αυτό
κατηγορία φέτος, δεν ξέρω,

492
00:22:51,290 --> 00:22:53,880
αυτό ακριβώς συνέβη με βιολογικό τρόπο.

493
00:22:53,880 --> 00:22:55,397
>> Και τώρα πήρε εκτός ελέγχου.

494
00:22:55,397 --> 00:22:56,730
Έτσι, είμαι απλώς πρόκειται να πάει με αυτό.

495
00:22:56,730 --> 00:22:59,700
Και αν πάω στο Google
Εικόνες και Rick Astley.

496
00:22:59,700 --> 00:23:02,450

497
00:23:02,450 --> 00:23:06,170
Αν δεν ξέρετε γιατί κάνουμε
αυτό, απλά να διαβάσετε σχετικά με την Wikipedia.

498
00:23:06,170 --> 00:23:11,520
Κάθε φορά που κάνετε κλικ στο σύνδεσμο,
κάποιος είναι ήδη γέλιο κάπου.

499
00:23:11,520 --> 00:23:14,860
Και επιτρέψτε μου να πάω εκεί ahead--
πάμε, ας δείτε αυτή την εικόνα.

500
00:23:14,860 --> 00:23:16,750
>> Έτσι, εδώ έχουμε ένα
εικόνας στο Google Images.

501
00:23:16,750 --> 00:23:19,390
Και ας υποθέσουμε ότι αυτό είναι
λογικά παντού στο διαδίκτυο.

502
00:23:19,390 --> 00:23:22,570
Έτσι, Πάω να υποθέσουμε ότι είναι εντάξει για μένα
να θέσει πραγματικά αυτό στην ιστοσελίδα μου.

503
00:23:22,570 --> 00:23:24,820
Πάω να πάει μπροστά
και αντιγράψτε το URL της εικόνας.

504
00:23:24,820 --> 00:23:28,600
Και τώρα αν πάω πίσω στο Cloud
9, ας δούμε τι μπορώ να κάνω εδώ.

505
00:23:28,600 --> 00:23:30,630
Έτσι, εδώ είναι απλά μια ιστοσελίδα.

506
00:23:30,630 --> 00:23:39,020
Αυτό είναι Rick Astley, χαχα,
Πάω τώρα να πάω πίσω

507
00:23:39,020 --> 00:23:43,510
στο πρόγραμμα περιήγησής μου, να φορτώσετε εκ νέου, και ενδιαφέρουσα.

508
00:23:43,510 --> 00:23:44,530
>> Πού είναι ο Rick;

509
00:23:44,530 --> 00:23:46,050
Έτσι, επιτρέψτε μου να δούμε τι συνέβη.

510
00:23:46,050 --> 00:23:49,114
Στην πραγματικότητα, Πάω να
προσποιούνται όπως δεν έκανα αυτό.

511
00:23:49,114 --> 00:23:50,280
[Δεν ακούγεται] τον έβαλε εδώ.

512
00:23:50,280 --> 00:23:52,520
Θα επανέλθω στο θέμα αυτό σε μια στιγμή.

513
00:23:52,520 --> 00:23:54,200
Τόσο εδώ είναι rick.html.

514
00:23:54,200 --> 00:23:56,070
Έτσι, αυτό δεν είναι Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Έτσι αποδεικνύεται μπορούμε
πραγματικά να τον προσθέσουμε εδώ.

516
00:23:59,680 --> 00:24:00,830
Αυτό είναι Rick Astley.

517
00:24:00,830 --> 00:24:06,680
Πάω να πω να μου δώσει μια εικόνα της οποίας
πηγή είναι η ιστοσελίδα που μόλις αντιγράψατε, το οποίο

518
00:24:06,680 --> 00:24:09,110
προφανώς είναι μια ευτυχής
κάτι γενέθλια ή άλλες.

519
00:24:09,110 --> 00:24:13,280
>> Και τώρα πάω να
κλείστε την ετικέτα όπως αυτό.

520
00:24:13,280 --> 00:24:15,170
Έτσι, αυτό ολοκληρώνει πολύ μεγάλη.

521
00:24:15,170 --> 00:24:17,740
Να σημειωθεί όμως ότι όλα έχω
γίνεται είναι ανοικτό στήριγμα εικόνα,

522
00:24:17,740 --> 00:24:20,270
πηγή με ένα χαρακτηριστικό του αυτό.

523
00:24:20,270 --> 00:24:21,530
Και αυτό είναι ένα πραγματικά μεγάλο URL.

524
00:24:21,530 --> 00:24:23,720
Και στο τέλος, παρατηρήσετε αυτό.

525
00:24:23,720 --> 00:24:29,530
Γιατί έχω κάνει κάθετο γωνία βραχίονα
αντί, όπως και κάθε άλλη ετικέτα,

526
00:24:29,530 --> 00:24:33,590
που έχει ένα ανοικτό βραχίονα
IMG, έκλεισε βραχίονα;

527
00:24:33,590 --> 00:24:37,040
Απλώς πάρτε μια εικασία, ακόμη και αν
δεν έχουν καμία απολύτως εξοικείωση

528
00:24:37,040 --> 00:24:40,410
με την HTML πριν.

529
00:24:40,410 --> 00:24:42,710
>> Έτσι είναι το πώς κλείνει
η εντολή, αλλά γιατί

530
00:24:42,710 --> 00:24:45,850
μήπως δεν κάνει πραγματικά έξυπνο
έχει νόημα να κάνουμε κάτι λίγο πιο

531
00:24:45,850 --> 00:24:48,820
verbose όπως κοντά την εικόνα;

532
00:24:48,820 --> 00:24:51,400
Ναι.

533
00:24:51,400 --> 00:24:52,000
Ναι.

534
00:24:52,000 --> 00:24:55,620
Απλά σημασιολογικά, δεν υπάρχει καμία αίσθηση της
ξεκινώντας μια εικόνα και να τελειώνει μια εικόνα,

535
00:24:55,620 --> 00:24:56,870
είναι είτε υπάρχει είτε δεν είναι.

536
00:24:56,870 --> 00:25:00,960
Γι 'αυτό δεν έχει νόημα να αφήσει ένα κενό
για οτιδήποτε άλλο στο εσωτερικό μιας εικόνας.

537
00:25:00,960 --> 00:25:02,010
Απλά δεν μπορούμε να το κάνουμε αυτό.

538
00:25:02,010 --> 00:25:03,720
Και έτσι η σύνταξη
γενικά θα είναι ακριβώς

539
00:25:03,720 --> 00:25:07,910
να κάνει το κάθετο εσωτερικό
της ανοικτής ετικέτας ή την ετικέτα έναρξης

540
00:25:07,910 --> 00:25:09,020
και στη συνέχεια χτύπησε Αποθήκευση.

541
00:25:09,020 --> 00:25:13,350
>> Έτσι, αν μπορώ τώρα να φορτώσετε εκ νέου αυτό το αρχείο, τώρα
Έχω μια καλή ιστοσελίδα μαγείρεμα εδώ.

542
00:25:13,350 --> 00:25:15,100
Και θα μπορούσαμε σίγουρα
πραγματικά ενοχλήσει τους ανθρώπους

543
00:25:15,100 --> 00:25:17,010
με την ενσωμάτωση, αντί
όπως ένα σύνδεσμο στο YouTube.

544
00:25:17,010 --> 00:25:19,350
Και στην πραγματικότητα, κάθε φορά
έχετε πάει ποτέ στο YouTube,

545
00:25:19,350 --> 00:25:22,190
και επιτρέψτε μου να πραγματικά λάθος
Rick κυλήσει τον εαυτό μου εδώ.

546
00:25:22,190 --> 00:25:25,770
Έτσι Rick ρολό.

547
00:25:25,770 --> 00:25:29,592
Έτσι Rick roll-- Πάω να πάει εδώ.

548
00:25:29,592 --> 00:25:31,900
>> [Παίζει μουσική]

549
00:25:31,900 --> 00:25:33,730
>> Εντάξει, ένα άτομο άρεσε αυτό.

550
00:25:33,730 --> 00:25:37,270
Έτσι παρατηρήσετε όλο αυτό το διάστημα, εάν
κάντε κλικ στο σύνδεσμο Share, μπορείτε φυσικά

551
00:25:37,270 --> 00:25:41,390
λάβετε τη διεύθυνση URL ώστε να μπορέσετε να
ενσωματώσετε σε ένα μήνυμα ηλεκτρονικού ταχυδρομείου ή σε ιατροδικαστική εικόνα

552
00:25:41,390 --> 00:25:43,730
ή σε ένα πρόβλημα που ή σε μια διαφάνεια.

553
00:25:43,730 --> 00:25:49,055
Και τώρα, αν αντί να κάνετε κλικ στο embed,
παρατηρήσετε ότι όλο αυτό το διάστημα, αυτά τα πράγματα

554
00:25:49,055 --> 00:25:49,680
ήταν εκεί.

555
00:25:49,680 --> 00:25:50,910
Πάω να πάει μπροστά και να αντιγράψετε αυτό.

556
00:25:50,910 --> 00:25:54,000
>> Και μόνο έτσι μπορούμε να το δούμε καλύτερα, είμαι
πρόκειται να το επικολλήσετε στο πρόγραμμα επεξεργασίας κειμένου μου.

557
00:25:54,000 --> 00:25:55,860
Σημειώστε ότι αυτό τι
Το YouTube έχει να σας πω.

558
00:25:55,860 --> 00:25:57,693
Κάθε φορά που επισκέπτεστε ένα
Βίντεο από το YouTube, αν

559
00:25:57,693 --> 00:26:00,410
θέλετε να ενσωματώσετε το βίντεο στον υπολογιστή σας
ιστοσελίδα, απλά να αρπάξει αυτό.

560
00:26:00,410 --> 00:26:03,350
Έτσι, αυτό είναι ένα ακόμη
Ετικέτα HTML που ονομάζεται iframe.

561
00:26:03,350 --> 00:26:04,590
Ή ένα στο πλαίσιο της γραμμής.

562
00:26:04,590 --> 00:26:08,680
Έτσι φαίνεται πάρα πολύ λίγο περισσότερο
σύνθετη από όλους τους άλλους.

563
00:26:08,680 --> 00:26:11,950
Έτσι αποδεικνύεται ότι η εικόνα
ετικέτα και προφανώς η ετικέτα iframe

564
00:26:11,950 --> 00:26:13,370
λαμβάνουν τα λεγόμενα χαρακτηριστικά.

565
00:26:13,370 --> 00:26:15,710
>> Και αυτό είναι μια άλλη
κομμάτι της σύνταξης σε HTML.

566
00:26:15,710 --> 00:26:19,240
Εκτός από την ετικέτα του
όνομα, ανοικτό στήριγμα όνομα ετικέτας,

567
00:26:19,240 --> 00:26:23,780
μπορείτε να ελέγξετε τη συμπεριφορά της ετικέτας
έχοντας ένα σωρό χαρακτηριστικού

568
00:26:23,780 --> 00:26:24,860
ισούται με την αξία.

569
00:26:24,860 --> 00:26:26,290
Χαρακτηριστικό είναι ίση αξία.

570
00:26:26,290 --> 00:26:28,100
Και έτσι, για παράδειγμα,
Το YouTube μας λέει

571
00:26:28,100 --> 00:26:31,990
αν θέλετε το πλάτος αυτού του βίντεο
να είναι 420 pixels και το ύψος

572
00:26:31,990 --> 00:26:35,470
να είναι 315 pixels, που είναι
πώς να το εκφράσει σε μορφή HTML.

573
00:26:35,470 --> 00:26:38,480
>> Η πηγή του βίντεο πρόκειται
να είναι τόσο πολύ το URL του YouTube

574
00:26:38,480 --> 00:26:40,830
και, στη συνέχεια, κάποια άλλα πράγματα
όπως περίγραμμα πλαισίου είναι μηδέν,

575
00:26:40,830 --> 00:26:43,500
έτσι ώστε κατά πάσα πιθανότητα σημαίνει ότι υπάρχει
χωρίς περίγραμμα γύρω από το θέμα.

576
00:26:43,500 --> 00:26:45,450
Να επιτρέψει την πλήρη οθόνη πιθανώς
σημαίνει ότι ο χρήστης

577
00:26:45,450 --> 00:26:47,840
να κάνετε κλικ σε ένα κουμπί και
στην πραγματικότητα πλήρη οθόνη το βίντεο.

578
00:26:47,840 --> 00:26:52,870
Έτσι, αν θέλω πραγματικά να είναι
εντυπωσιακό εδώ στο Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
αντί να χρησιμοποιήσει την ετικέτα εικόνας, αφήστε
Θέλω να διαγράψετε ότι, αντί να επικολλήσετε αυτό.

580
00:26:58,490 --> 00:27:00,810
Και τώρα reload.

581
00:27:00,810 --> 00:27:02,500
Και τώρα εδώ είμαστε πάλι.

582
00:27:02,500 --> 00:27:04,979

583
00:27:04,979 --> 00:27:06,020
Εντάξει, αυτό είναι αρκετό.

584
00:27:06,020 --> 00:27:08,970
Εντάξει έτσι θα προσπαθήσω
δεν είναι δύσκολο να το κάνουμε αυτό και πάλι.

585
00:27:08,970 --> 00:27:11,400
Λοιπόν, τι είναι μερικά από τα φαστ φουντ εδώ;

586
00:27:11,400 --> 00:27:15,130
Έτσι HTML, ως άσχημο όπως αυτές τις ιστοσελίδες
είναι, στην πραγματικότητα είναι αρκετά απλή.

587
00:27:15,130 --> 00:27:16,467
Δεν είναι μια γλώσσα προγραμματισμού.

588
00:27:16,467 --> 00:27:17,550
Δεν έχει λειτουργίες.

589
00:27:17,550 --> 00:27:18,410
Δεν έχει βρόχους.

590
00:27:18,410 --> 00:27:19,535
Δεν έχει προϋποθέσεις.

591
00:27:19,535 --> 00:27:22,900
Το μόνο που έχει είναι δεκάδες
διαφορετικές ετικέτες, καθένα από τα οποία

592
00:27:22,900 --> 00:27:24,620
έχει μηδέν ή περισσότερα χαρακτηριστικά.

593
00:27:24,620 --> 00:27:27,320
Και στην πραγματικότητα, αυτό που είναι διασκεδαστικό για
HTML όπως μπορείτε να αρχίσετε να βουτήξει

594
00:27:27,320 --> 00:27:29,560
είναι ότι είναι πολύ αυτο teachable.

595
00:27:29,560 --> 00:27:32,880
>> Το μόνο που χρειάζεται είναι η κατανόηση
του γενικού πλαισίου της HTML.

596
00:27:32,880 --> 00:27:36,510
Τι είναι μια ετικέτα, αυτό είναι ένα χαρακτηριστικό,
πως μπορείτε πραγματικά να διαμορφώσετε μια ιστοσελίδα

597
00:27:36,510 --> 00:27:37,250
ως εξής.

598
00:27:37,250 --> 00:27:40,720
Και όλα τα άλλα είναι στην πραγματικότητα το αποτέλεσμα
του κοιτώντας ψηλά σε ένα online αναφοράς

599
00:27:40,720 --> 00:27:43,080
ή googling πώς να το κάνουμε κάποια
τεχνική ή όπως έχουμε δει,

600
00:27:43,080 --> 00:27:45,371
κοιτάζοντας την πηγή του Facebook
κώδικα, κοιτάζοντας μια ιστοσελίδα

601
00:27:45,371 --> 00:27:48,710
ότι σας αρέσει σε αυτό είναι πηγαίο κώδικα και
την κατανόηση του πώς οι προγραμματιστές εκεί

602
00:27:48,710 --> 00:27:50,550
πραγματικότητα που τα πράγματα έξω.

603
00:27:50,550 --> 00:27:52,180
>> Έτσι, μπορούμε να κάνουμε τις εικόνες, καθώς και.

604
00:27:52,180 --> 00:27:53,994
Και στην πραγματικότητα, το κάναμε πριν από λίγο.

605
00:27:53,994 --> 00:27:55,410
Επιτρέψτε μου να πάω μπροστά και απλά να σας δείξω.

606
00:27:55,410 --> 00:27:56,770
Εδώ είναι μερικά δείγματα κώδικα.

607
00:27:56,770 --> 00:27:58,380
Αν ποτέ θέλετε να δείτε γκρινιάρης γάτα.

608
00:27:58,380 --> 00:28:00,620
Έτσι παρατηρούμε ότι μπορώ
έχουν μια ετικέτα εικόνας εδώ.

609
00:28:00,620 --> 00:28:02,090
Και έχω ένα σχόλιο πάνω από αυτό.

610
00:28:02,090 --> 00:28:04,490
Έχω μια εναλλακτική λύση
το κείμενο για την προσβασιμότητα.

611
00:28:04,490 --> 00:28:07,250
Έτσι, κάποιος που είναι με τη χρήση μιας οθόνης
αναγνώστη για λόγους όρασης

612
00:28:07,250 --> 00:28:10,172
μπορεί πραγματικά να έχουν στη συνέχεια τους
ανάγνωσης οθόνης λένε γκρινιάρηδες γάτα.

613
00:28:10,172 --> 00:28:11,880
Διότι εάν δεν μπορούν
δείτε την εικόνα, που

614
00:28:11,880 --> 00:28:14,504
μπορούμε τουλάχιστον να έχουμε τον υπολογιστή τους
να τους πει προφορικά τι είναι.

615
00:28:14,504 --> 00:28:18,020
Και η πηγή του αρχείου είναι cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Έτσι, στην πραγματικότητα, αν ήθελα πραγματικά να
πάρετε έξυπνο, τι θα μπορούσα να έχω done--

617
00:28:22,472 --> 00:28:25,680
Υπόσχομαι να μην πάει σε Rick Astley, έτσι
Πάω στο google για μια γάτα αντ 'αυτού.

618
00:28:25,680 --> 00:28:28,290
Και αν πάω στο Google Images
εδώ, και θεωρούμε ότι

619
00:28:28,290 --> 00:28:30,040
ότι αυτή είναι μια εικόνα της γάτας μου.

620
00:28:30,040 --> 00:28:35,070
>> Ας υποθέσουμε ότι έχω τον έλεγχο κλικ
ή το δεξί κλικ σε αυτό, κατά λάθος

621
00:28:35,070 --> 00:28:35,630
ανατριχιαστικό.

622
00:28:35,630 --> 00:28:40,320
Και cat.jpeg Πάω
να αποθηκεύσετε στην επιφάνεια εργασίας μου.

623
00:28:40,320 --> 00:28:44,700
Επιτρέψτε μου τώρα να πάμε πίσω στο σύννεφο 9.

624
00:28:44,700 --> 00:28:48,150
Παρατηρήστε ότι εδώ, μπορώ να
πάει να φορτώσει τα τοπικά αρχεία.

625
00:28:48,150 --> 00:28:51,530
Και αν μου αρπάξει αυτό
αρχείο, cat.jpeg, προειδοποίηση

626
00:28:51,530 --> 00:28:54,674
ότι μπορώ να το μεταφέρετε και να
το ρίξουν στο σύννεφο 9

627
00:28:54,674 --> 00:28:56,090
και πρόκειται να φωνάζεις σε μένα εδώ.

628
00:28:56,090 --> 00:28:59,000
>> Επειδή έχουμε ήδη
Σας δίνεται ένα αρχείο cat.jpeg,

629
00:28:59,000 --> 00:29:01,430
αλλά είναι εξαιρετικά εύκολο να
πιάσε μια φωτογραφία που έχετε

630
00:29:01,430 --> 00:29:03,220
λαμβάνονται από το Facebook
ή το Flickr ή παρόμοια

631
00:29:03,220 --> 00:29:05,678
και στην πραγματικότητα drag and drop το
σε σύννεφο 9 και στη συνέχεια να το κάνει

632
00:29:05,678 --> 00:29:07,970
μέρος της δική σας προσωπική
ιστοσελίδα ή πρόβλημα

633
00:29:07,970 --> 00:29:10,442
που επτά ή οκτώ, όπως θα δούμε σύντομα.

634
00:29:10,442 --> 00:29:12,150
Και στη συνέχεια, όταν
επισκεφθείτε, τέλος, ότι η γάτα,

635
00:29:12,150 --> 00:29:16,610
υποθέτοντας ότι θα κατεβάσει την ίδια γάτα,
ειδοποίηση that-- ότι ήταν αξιολάτρευτη.

636
00:29:16,610 --> 00:29:19,160
>> Τι θα δείτε είναι
κάτι σαν αυτό το πρόσωπο εδώ.

637
00:29:19,160 --> 00:29:21,810
Έτσι τα αρχεία που
αναφορά σε μια ιστοσελίδα

638
00:29:21,810 --> 00:29:26,050
μπορεί να είναι είτε τοπική στη δική σας
λογαριασμό ή σε κάποιο απομακρυσμένο άλλο server

639
00:29:26,050 --> 00:29:29,670
όπως στην περίπτωση του Rick
Astley φωτογραφία λίγο πριν.

640
00:29:29,670 --> 00:29:32,990
Έτσι, όταν else-- τι
άλλο μπορούμε να κάνουμε εδώ;

641
00:29:32,990 --> 00:29:34,890
Έτσι, ας ρίξουμε μια ματιά στα παρακάτω.

642
00:29:34,890 --> 00:29:36,160
Ξέρετε τι είδους κρυώσει;

643
00:29:36,160 --> 00:29:39,330
>> Έχουμε μέχρι στιγμής έχει κάνει
πολύ στατικές ιστοσελίδες.

644
00:29:39,330 --> 00:29:41,830
Θέλω να μπαχαρικό πράγματα ως εξής.

645
00:29:41,830 --> 00:29:44,344
Θέλω να κάνω τη δική μου μηχανή αναζήτησης.

646
00:29:44,344 --> 00:29:47,010
Έτσι για να κάνει μια μηχανή αναζήτησης, ας
να προχωρήσει και να αρχίσει να κάνει αυτό.

647
00:29:47,010 --> 00:29:52,570
Πάω να πάει μπροστά και να δημιουργήσουν
ένα νέο αρχείο που ονομάζεται search.html.

648
00:29:52,570 --> 00:29:54,890
Και έχουμε prefabed εκδόσεις σε απευθείας σύνδεση.

649
00:29:54,890 --> 00:29:56,027
Ωχ.

650
00:29:56,027 --> 00:29:57,610
Μην επικολλήσετε στο παράθυρο του τερματικού σας.

651
00:29:57,610 --> 00:29:58,744
Προκάτ εκδόσεις σε απευθείας σύνδεση.

652
00:29:58,744 --> 00:30:00,160
Και Πάω να ξεκινήσει ως εξής.

653
00:30:00,160 --> 00:30:04,490
Έτσι, εδώ είναι η αρχή της
ένα αρχείο που ονομάζεται search.html.

654
00:30:04,490 --> 00:30:07,510
Πάω να το αποθηκεύσετε σε
πηγαίο κατάλογο του σήμερα.

655
00:30:07,510 --> 00:30:09,079
Πάω να καλέσω αυτήν την αναζήτηση.

656
00:30:09,079 --> 00:30:10,370
Στην πραγματικότητα, θα κάνουμε το καλύτερο.

657
00:30:10,370 --> 00:30:13,600
CS50 αναζήτησης και στην πραγματικότητα το εμπορικό σήμα.

658
00:30:13,600 --> 00:30:17,500
Και τώρα, Πάω να πω
κάτι σαν Η1 CS50 αναζήτησης.

659
00:30:17,500 --> 00:30:20,930
Και στη συνέχεια, εδώ κάτω, Η2 σύντομα.

660
00:30:20,930 --> 00:30:23,230
Και ακριβώς για να ανακεφαλαιώσουμε, H1 και
Η2 σημαίνει ό, τι αντίστοιχα;

661
00:30:23,230 --> 00:30:26,750

662
00:30:26,750 --> 00:30:30,320
>> Ναι, τόσο μεγάλη και τολμηρή, και
δεν είναι τόσο μεγάλη, αλλά ακόμα τολμηρό.

663
00:30:30,320 --> 00:30:37,375
Έτσι, αν μπορώ να σώσει αυτό και να πάει πέρα ​​από εδώ,
Ας δούμε το search.html αρχείο.

664
00:30:37,375 --> 00:30:42,560
Εντάξει, και αυτό
είναι right-- [δεν ακούγεται].

665
00:30:42,560 --> 00:30:46,980

666
00:30:46,980 --> 00:30:49,110
Αναμονή.

667
00:30:49,110 --> 00:30:49,945
Ο David είναι συγκεχυμένη.

668
00:30:49,945 --> 00:30:52,610

669
00:30:52,610 --> 00:30:54,080
Ω, αυτό είναι ακριβώς εκεί.

670
00:30:54,080 --> 00:30:54,860
Ο David είναι ένας ηλίθιος.

671
00:30:54,860 --> 00:30:55,420
ΕΝΤΆΞΕΙ.

672
00:30:55,420 --> 00:30:56,660
Έτσι, εκεί που είναι.

673
00:30:56,660 --> 00:30:58,350
Έτσι CS50 αναζήτηση σύντομα.

674
00:30:58,350 --> 00:31:00,370
Έτσι τώρα, ας συνθέτουν
αυτό που κάναμε την περασμένη εβδομάδα.

675
00:31:00,370 --> 00:31:03,400
>> Όταν μιλήσαμε για το
μηχανική χαμηλότερο επίπεδο HTTP.

676
00:31:03,400 --> 00:31:05,780
Και αυτές οι νέες ιδέες
της HTML, η οποία απέχει μόλις

677
00:31:05,780 --> 00:31:08,890
Αυτή η γλώσσα σήμανσης, όπου μπορείτε
πείτε ένα πρόγραμμα περιήγησης ακριβώς τι πρέπει να κάνετε

678
00:31:08,890 --> 00:31:10,740
και να εφαρμόσει τη δική μας μηχανή αναζήτησης.

679
00:31:10,740 --> 00:31:12,520
Έτσι, αντί απλά
λέγοντας σύντομα, είμαι

680
00:31:12,520 --> 00:31:14,810
πρόκειται να εισαγάγει
κάτι που ονομάζεται μια ετικέτα μορφή.

681
00:31:14,810 --> 00:31:19,610
Και σε αυτή τη μορφή, Πάω να
έχουν κάτι σαν ένα πεδίο εισαγωγής.

682
00:31:19,610 --> 00:31:22,450
>> Και το όνομα αυτής της εισόδου
πεδίο, Πάω να το ονομάσουμε Q.

683
00:31:22,450 --> 00:31:26,240
Και ο τύπος αυτό το πεδίο εισαγωγής
Πάω να πω είναι απλά "κείμενο".

684
00:31:26,240 --> 00:31:29,130
Και ένα πεδίο κειμένου, όπως θα
Βλέπετε, είναι απλώς ένα πλαίσιο κειμένου.

685
00:31:29,130 --> 00:31:32,830
Και έτσι δεν αισθάνονται εδώ για να
οτιδήποτε στο εσωτερικό του σε αυτό το σημείο.

686
00:31:32,830 --> 00:31:35,320
Και έτσι είμαι απλώς πρόκειται
για να κλείσει την ετικέτα με το ότι

687
00:31:35,320 --> 00:31:38,099
κάθετος δεξιά στην ίδια την ετικέτα.

688
00:31:38,099 --> 00:31:39,890
Και τότε Πάω να
έχουν μια άλλη είσοδο.

689
00:31:39,890 --> 00:31:43,480
Τύπος εισόδου ισοδυναμεί με την υποβάλετε.

690
00:31:43,480 --> 00:31:45,320
Και τότε Πάω να
κλείσετε αυτό ένα πάρα πολύ.

691
00:31:45,320 --> 00:31:46,840
>> Και τώρα είμαι πρόκειται να πάει πίσω εδώ.

692
00:31:46,840 --> 00:31:49,520
Και ήδη βλέπουμε,
αν και αρκετά άσχημο, έχω

693
00:31:49,520 --> 00:31:52,460
Είναι η αρχή της
δική μου σελίδα αναζήτησης εδώ.

694
00:31:52,460 --> 00:31:55,150
Στην πραγματικότητα, επιτρέψτε μου να προσπαθήσω να
καθαρίσει αυτό επάνω λίγο.

695
00:31:55,150 --> 00:31:57,330
Αποδεικνύεται ότι για το
είσοδος εδώ, μπορώ να έχω

696
00:31:57,330 --> 00:31:59,910
ένα άλλο χαρακτηριστικό που ονομάζεται κράτησης θέσης.

697
00:31:59,910 --> 00:32:05,165
Και ήθελα να δω κάτι σαν λέξεις-κλειδιά,
ή πιο συγκεκριμένα, το ερώτημα για το q.

698
00:32:05,165 --> 00:32:07,820
>> Και παρατηρήσετε, τώρα, έχω
Αυτό το είδος του γκρι κείμενο

699
00:32:07,820 --> 00:32:10,440
ότι εξαφανίζεται ως
Μόλις αρχίσω να πληκτρολογείτε,

700
00:32:10,440 --> 00:32:12,930
αλλά είναι μάλλον κάτι
έχετε δει σε άλλες ιστοσελίδες.

701
00:32:12,930 --> 00:32:14,650
Δεν μου αρέσει πραγματικά το κουμπί Υποβολή.

702
00:32:14,650 --> 00:32:18,320
Έτσι είμαι πραγματικά πρόκειται να δώσει το
Κουμπί Υποβολή αξία της αναζήτησης.

703
00:32:18,320 --> 00:32:21,680
Και τώρα, αν φορτώσετε εκ νέου, παρατηρούμε ότι
κουμπί μου γίνεται ονομάζεται αναζήτηση.

704
00:32:21,680 --> 00:32:24,140
Ξέρετε, εγώ πραγματικά δεν
όπως το λογότυπο εδώ.

705
00:32:24,140 --> 00:32:27,140
Έτσι γεννήτρια Google γραμματοσειράς.

706
00:32:27,140 --> 00:32:28,820
>> Θέλω να μπαχαρικό αυτό επάνω περαιτέρω.

707
00:32:28,820 --> 00:32:30,660
Έτσι CS50 αναζήτηση.

708
00:32:30,660 --> 00:32:31,870
Επιτρέψτε μου να δημιουργήσω το δικό μου λογότυπο.

709
00:32:31,870 --> 00:32:33,080
Αυτό φαίνεται ωραίο.

710
00:32:33,080 --> 00:32:36,945
Έτσι, τώρα επιτρέψτε μου να σώσει αυτό το as-- έλα.

711
00:32:36,945 --> 00:32:40,710

712
00:32:40,710 --> 00:32:43,120
Πού είναι αυτό που συμβαίνει;

713
00:32:43,120 --> 00:32:43,620
Εκεί.

714
00:32:43,620 --> 00:32:44,160
ΕΝΤΆΞΕΙ.

715
00:32:44,160 --> 00:32:44,980
Αναπάντητες αυτό.

716
00:32:44,980 --> 00:32:47,740
Αποθήκευση ως.

717
00:32:47,740 --> 00:32:49,470
Stupid προγράμματα περιήγησης.

718
00:32:49,470 --> 00:32:51,700
Stand by, θα πάμε να
διορθώσετε αυτό μια για πάντα.

719
00:32:51,700 --> 00:32:57,650

720
00:32:57,650 --> 00:32:58,590
Εκεί πάμε.

721
00:32:58,590 --> 00:32:59,090
Εντάξει.

722
00:32:59,090 --> 00:32:59,600
Λυπάμαι.

723
00:32:59,600 --> 00:33:00,750
Ρεπό.

724
00:33:00,750 --> 00:33:02,310
Τώρα αυτό είναι funky.

725
00:33:02,310 --> 00:33:03,160
Έξοδος από πλήρη οθόνη.

726
00:33:03,160 --> 00:33:04,150
Εντάξει.

727
00:33:04,150 --> 00:33:06,870
>> Τώρα, σαν ένα κανονικό
πρόσωπο, Αποθήκευση εικόνας ως.

728
00:33:06,870 --> 00:33:08,810
Logo.gif.

729
00:33:08,810 --> 00:33:13,194
Τώρα θα πάω να μπω σε CS50IDE και
Πάω να αρπάξει απλώς το λογότυπο,

730
00:33:13,194 --> 00:33:15,360
Πάω να το σύρετε σε
μου πηγή επτά κατάλογο,

731
00:33:15,360 --> 00:33:17,002
αρχείο υπάρχει ήδη, είμαι εντάξει με αυτό.

732
00:33:17,002 --> 00:33:19,210
Έτσι, Πάω να το παρακάμψετε
γιατί ήδη είχε.

733
00:33:19,210 --> 00:33:20,630
Και τώρα πώς μπορώ να απαλλαγούμε από αυτό;

734
00:33:20,630 --> 00:33:24,670
>> Ας πάμε μπροστά και να κάνουμε εδώ
πηγή εικόνας ισούται logo.gif.

735
00:33:24,670 --> 00:33:25,490
Κλείστε αυτό.

736
00:33:25,490 --> 00:33:26,050
Αποθηκεύσετε.

737
00:33:26,050 --> 00:33:30,560
Και τώρα αν πάω πίσω στην αναζήτηση μου
σελίδα, τώρα ψάχνει αρκετά καλό.

738
00:33:30,560 --> 00:33:33,610
Εντάξει, έτσι ώστε να μην έχει
αρκετά κάνει κάτι χρήσιμο.

739
00:33:33,610 --> 00:33:37,000
Στην πραγματικότητα, επιτρέψτε μου να προσπαθήσω αναζήτηση
για μια γάτα και να δούμε τι θα συμβεί.

740
00:33:37,000 --> 00:33:38,890
Γάτες.

741
00:33:38,890 --> 00:33:39,420
Ανάθεμα.

742
00:33:39,420 --> 00:33:41,400
Αυτό δεν είναι μόνο να λειτουργήσει, προφανώς.

743
00:33:41,400 --> 00:33:43,760
Έτσι ποια είναι η βασικό κομμάτι
που λείπει εδώ;

744
00:33:43,760 --> 00:33:49,100
>> Δεξιά, ακόμα κι αν δεν ξέρετε οποιοδήποτε HTML,
Έχω αρχίσει τη σήμανση μέχρι το έντυπο τηλέφωνο

745
00:33:49,100 --> 00:33:54,130
και το έχω πει πώς να πάρει εισροών,
να μου δώσει ένα πλαίσιο κειμένου και ένα κουμπί υποβολής,

746
00:33:54,130 --> 00:33:55,730
τι κομμάτι είναι προφανώς λείπει;

747
00:33:55,730 --> 00:33:58,975
Ας υποθέσουμε ότι θέλουμε να πάρει πραγματικά
αυτό το πράγμα λειτουργεί σωστά.

748
00:33:58,975 --> 00:34:02,420

749
00:34:02,420 --> 00:34:05,360
Τι πρέπει να κάνουμε;

750
00:34:05,360 --> 00:34:08,860
Έχουμε ανάγκη να εφαρμοστεί το πίσω άκρο
βάση δεδομένων ή η ίδια η μηχανή αναζήτησης,

751
00:34:08,860 --> 00:34:11,210
και ότι πρόκειται να πάρει ένα
πάρα πολύ χρόνο, ειλικρινά.

752
00:34:11,210 --> 00:34:13,380
>> Έτσι θυμηθείτε αυτό που κάναμε την προηγούμενη φορά.

753
00:34:13,380 --> 00:34:18,230
Έτσι, αν ψάχνετε για κάτι στο Google
και έχετε εκ των προτέρων απενεργοποιημένη,

754
00:34:18,230 --> 00:34:20,355
ανάκληση, άμεση έρευνα.

755
00:34:20,355 --> 00:34:22,230
Έτσι, επιτρέψτε μου να το βγάζεις
έτσι ώστε αυτή η πραγματικά

756
00:34:22,230 --> 00:34:26,650
συμπεριφέρεται σαν ένα παλαιότερο πρόγραμμα περιήγησης του σχολείου,
αν μπορώ τώρα ψάξετε για κάτι σαν τις γάτες,

757
00:34:26,650 --> 00:34:28,190
Υπενθυμίζουμε τι η διεύθυνση URL μοιάζει.

758
00:34:28,190 --> 00:34:29,449
Είναι αρκετά κρυπτική.

759
00:34:29,449 --> 00:34:33,000
Αλλά ενσωματωμένα εκεί,
ανάκληση, είναι η αναζήτηση κάθετος.

760
00:34:33,000 --> 00:34:35,100
Ερωτηματικό q ισούται με γάτες.

761
00:34:35,100 --> 00:34:37,760
>> Και αυτό φαίνεται να μου δώσει
ένα σωρό των αποτελεσμάτων αναζήτησης.

762
00:34:37,760 --> 00:34:39,134
Έτσι, ξέρετε τι Πάω να κάνω;

763
00:34:39,134 --> 00:34:41,650
Πάω να δανειστώ
Google για μόλις ένα λεπτό.

764
00:34:41,650 --> 00:34:43,670
Πάω να πάει πέρα ​​από
εδώ και θα πάω να πω

765
00:34:43,670 --> 00:34:47,850
ότι αυτό αποτελεί ενέργεια ή
προορισμού, να το πω έτσι,

766
00:34:47,850 --> 00:34:49,330
θα πρέπει κυριολεκτικά να είναι το Google.

767
00:34:49,330 --> 00:34:52,590
Και η μέθοδος που ήθελα
με τη χρήση θα είναι να πάρετε.

768
00:34:52,590 --> 00:34:53,560
>> Λοιπόν, τι είναι ενέργεια;

769
00:34:53,560 --> 00:34:55,760
Δράσης αλλόκοτα ονομάζεται,
αλλά αυτό σημαίνει ότι μόνο

770
00:34:55,760 --> 00:34:58,120
που πρόκειται να χειριστεί
η δράση αυτής της μορφής;

771
00:34:58,120 --> 00:35:00,820
Όταν κάνω κλικ στο κουμπί Αναζήτηση, όπου
θα πρέπει το αποτέλεσμα να πάτε;

772
00:35:00,820 --> 00:35:05,300
Και αν εγώ τώρα πάω πίσω στη φόρμα μου
εδώ και επαναλάβετε τη φόρτωση της ιστοσελίδας μου

773
00:35:05,300 --> 00:35:09,000
και τώρα αναζήτηση για κάτι
σαν το σκύλο, παρατηρήσετε τώρα

774
00:35:09,000 --> 00:35:10,850
Έχω εκ νέου σε εφαρμογή της Google.

775
00:35:10,850 --> 00:35:11,350
Σωστά;

776
00:35:11,350 --> 00:35:14,141
>> Αν θέλω να ψάξετε για κάτι
αλλιώς, λειτουργεί όχι μόνο για τα σκυλιά,

777
00:35:14,141 --> 00:35:16,400
λειτουργεί επίσης για τις γάτες.

778
00:35:16,400 --> 00:35:21,930
Λειτουργεί, επίσης, για CS50.

779
00:35:21,930 --> 00:35:24,310
Και εντάξει, αυτό είναι μόνο
υπό whelming, έτσι δεν είναι;

780
00:35:24,310 --> 00:35:25,920
Εντάξει, αλλά λειτουργεί πραγματικά.

781
00:35:25,920 --> 00:35:27,360
Έτσι τι πραγματικά συμβαίνει;

782
00:35:27,360 --> 00:35:31,340
Έτσι έχω διδάξει browser μου, χρησιμοποιώντας
HTML, για να πάρετε είσοδο από το χρήστη

783
00:35:31,340 --> 00:35:35,810
και στην πραγματικότητα να στείλετε αυτή τη συνεισφορά
σε έναν απομακρυσμένο server μέσω HTTP.

784
00:35:35,810 --> 00:35:39,120
>> Και γιατί ο φυλλομετρητής μου
κατανοεί HTTP, πραγματικά

785
00:35:39,120 --> 00:35:43,500
κατασκευάσει το URL, έτσι ώστε ό, τι
Θα καταλήξετε πάνω στο πρόγραμμα περιήγησης,

786
00:35:43,500 --> 00:35:45,660
Παρατηρήστε τι συμβαίνει
όταν έψαξα για το σκυλί.

787
00:35:45,660 --> 00:35:49,270
Αν κάνω κλικ αναζήτησης, παρατηρούμε ότι
η διεύθυνση URL αλλάζει, όπως είχα την πρόθεση

788
00:35:49,270 --> 00:35:52,770
να google.com/search~~V ερώτημα ισούται με το σκυλί.

789
00:35:52,770 --> 00:35:56,020
Και αυτό γιατί με τη μορφή
ξέρει, επειδή η μέθοδος είναι να πάρει,

790
00:35:56,020 --> 00:35:59,560
να προσαρτήσει απλά το URL εκεί.

791
00:35:59,560 --> 00:36:01,730
>> Τώρα, αυτές οι ιστοσελίδες είναι ακόμα άσχημο.

792
00:36:01,730 --> 00:36:04,890
Ας εισαγάγει ένα άλλο
κομμάτι της σύνταξης, αν μπορούμε σήμερα.

793
00:36:04,890 --> 00:36:07,640
Και αυτό είναι κάτι γνωστό
ως επικαλυπτόμενα φύλλα στυλ.

794
00:36:07,640 --> 00:36:10,720
Επιτρέψτε μου λοιπόν να ρίξουμε μια ματιά στο
Αυτό το παράδειγμα εδώ και δείτε

795
00:36:10,720 --> 00:36:12,380
αν μπορούμε να συμπεράνουμε τι συμβαίνει.

796
00:36:12,380 --> 00:36:14,520
Αυτό είναι CSS0.html.

797
00:36:14,520 --> 00:36:16,532
Και αυτό είναι όπου τα πράγματα
να πάρει λίγο άσχημο.

798
00:36:16,532 --> 00:36:18,490
Διότι, δυστυχώς,
στον κόσμο του διαδικτύου,

799
00:36:18,490 --> 00:36:20,920
HTML από μόνη της δεν μπορεί να κάνει τα πάντα.

800
00:36:20,920 --> 00:36:22,920
Και έτσι, αν θέλετε να
στυλιζάρω ιστοσελίδα σας,

801
00:36:22,920 --> 00:36:28,370
χρειάζεται πραγματικά να επικεντρωθεί η
αισθητική με έναν διαφορετικό τρόπο.

802
00:36:28,370 --> 00:36:33,090
Έτσι, εδώ, έχω το σώμα του ιστού μου
σελίδα στο εσωτερικό του οποίου είναι ένα μεγάλο div.

803
00:36:33,090 --> 00:36:34,700
Και ένα div σημαίνει ακριβώς διαίρεση.

804
00:36:34,700 --> 00:36:38,060
Έτσι είναι σαν μια σκέψη, αλλά
δεν έχει τα ίδια σημασιολογία

805
00:36:38,060 --> 00:36:39,180
της παραγράφου του κειμένου.

806
00:36:39,180 --> 00:36:40,940
>> Αυτό σημαίνει απλά για να το
πρόγραμμα περιήγησης, έρχεται εδώ

807
00:36:40,940 --> 00:36:45,210
μια μεγάλη ορθογώνια περιοχή του ιστού μου
σελίδα, θέλω να το χειριστεί ειδικά.

808
00:36:45,210 --> 00:36:47,420
Τώρα, γραμμή 21 είναι που αρχίζει η div.

809
00:36:47,420 --> 00:36:48,770
Και απλά ρίξτε μια εικασία.

810
00:36:48,770 --> 00:36:53,080
Ποια είναι η επίδραση της γραμμής 21, σχετικά με την
υπόλοιπο των περιεχομένων της σελίδας;

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Κεντράρισμα.

813
00:36:56,311 --> 00:36:56,810
Αυτά.

814
00:36:56,810 --> 00:36:58,830
Έτσι δεν έχουμε δει έναν τρόπο
στην πραγματικότητα κεντράρισμα του κειμένου.

815
00:36:58,830 --> 00:37:00,996
>> Στην πραγματικότητα, μηχανή αναζήτησής μου,
σε αντίθεση με την πραγματική της Google,

816
00:37:00,996 --> 00:37:03,040
ήταν όλα δικαιολογείται πάνω προς τα αριστερά.

817
00:37:03,040 --> 00:37:07,430
Και έτσι τώρα στην γραμμή 21, λέω, hey
πρόγραμμα περιήγησης, δημιουργήστε ένα τμήμα της σελίδας.

818
00:37:07,430 --> 00:37:09,450
Απλά να μου δώσει ένα μεγάλο, αόρατο τετράγωνο.

819
00:37:09,450 --> 00:37:11,490
Αυτό είναι το πώς θέλω να
σκεφτείτε την ιστοσελίδα.

820
00:37:11,490 --> 00:37:13,870
Και τότε στυλιζάρω ως ακολούθως.

821
00:37:13,870 --> 00:37:16,900
Μέσα από αυτά τα εισαγωγικά,
τώρα, είναι μια δεύτερη γλώσσα

822
00:37:16,900 --> 00:37:19,969
Ορίσαμε σήμερα
που ονομάζεται επικαλυπτόμενα φύλλα στυλ.

823
00:37:19,969 --> 00:37:22,010
Ευτυχώς, δεν είναι πολύ
μια γλώσσα προγραμματισμού,

824
00:37:22,010 --> 00:37:26,470
Έτσι είναι πολύ περιορισμένες στο συντακτικό της, αλλά
επίσης πολύ περιορισμένη λειτουργικότητα του

825
00:37:26,470 --> 00:37:30,670
λαμβάνοντας υπόψη ότι η HTML είναι όλα σχετικά με
σήμανση ασφαλείας των δεδομένων μιας ιστοσελίδας

826
00:37:30,670 --> 00:37:32,130
και η δομή μιας ιστοσελίδας.

827
00:37:32,130 --> 00:37:35,320
CSS είναι γενικά περίπου το
τελευταίο μίλι, η αισθητική,

828
00:37:35,320 --> 00:37:40,160
να πάρει το μέγεθος και το χρώμα και το
τοποθέτηση ακριβώς δεξιά σε μια ιστοσελίδα.

829
00:37:40,160 --> 00:37:43,000
Και πράγματι, σχηματίζεται
με βασικά ζευγάρια αξίας.

830
00:37:43,000 --> 00:37:46,290
>> Ένα ακίνητο όπως αυτό, το κείμενο
ευθυγράμμιση, που ακολουθείται από μια άνω και κάτω τελεία,

831
00:37:46,290 --> 00:37:49,720
ακολουθούμενο από την αξία του ότι
ιδιοκτησίας, η οποία στην προκειμένη περίπτωση είναι το κέντρο.

832
00:37:49,720 --> 00:37:51,910
Και τώρα μπορείτε να παρατηρήσετε
μπορούν να φωλιάζουν αυτά τα πράγματα.

833
00:37:51,910 --> 00:37:56,780
Αν ήθελα πάντα σε ότι
Έχω να επισημανθεί στο κέντρο,

834
00:37:56,780 --> 00:38:00,270
γι 'αυτό έχω γραμμή 21 και
η αντίστοιχη γραμμή 31.

835
00:38:00,270 --> 00:38:04,820
Αλλά ας υποθέσουμε ότι τώρα θέλω να πω John
Χάρβαρντ, Καλώς ήλθατε στην ιστοσελίδα μου.

836
00:38:04,820 --> 00:38:06,530
>> Σύμβολο πνευματικής ιδιοκτησίας Ιωάννη Χάρβαρντ.

837
00:38:06,530 --> 00:38:09,180
Και ας υποθέσουμε ότι θέλω το πρώτο του
αυτές οι γραμμές να είναι αρκετά μεγάλη.

838
00:38:09,180 --> 00:38:10,450
36 εικονοστοιχεία.

839
00:38:10,450 --> 00:38:11,530
Έτσι, αυτό είναι ένα αξιοπρεπές μέγεθος.

840
00:38:11,530 --> 00:38:13,240
Και ήθελα το βάρος του να είναι τολμηρή.

841
00:38:13,240 --> 00:38:15,450
Στη συνέχεια, όμως κάτω από αυτό,
Θέλω μικρότερο κείμενο.

842
00:38:15,450 --> 00:38:19,980
Και κάτω από αυτό, θέλω
ακόμα και το μικρότερο κείμενο.

843
00:38:19,980 --> 00:38:20,480
Λυπάμαι.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Σήμερα αισθάνεται σαν ένα ρεπό.

846
00:38:26,940 --> 00:38:29,840
>> Έτσι τώρα, τι κάνω για να εκφράσω αυτό;

847
00:38:29,840 --> 00:38:34,580
Εδώ στη γραμμή 22 είναι ένα ενσωματωμένο
div ή ένθετων div, αν θέλετε.

848
00:38:34,580 --> 00:38:36,190
Έχει πάρα πολύ τη δική του ετικέτα στυλ.

849
00:38:36,190 --> 00:38:38,160
Θα καθορίσετε ένα μέγεθος γραμματοσειράς 36.

850
00:38:38,160 --> 00:38:40,460
Μπορώ να ορίσω έναν βάρος γραμματοσειρά με έντονη γραφή.

851
00:38:40,460 --> 00:38:43,360
Εδώ κάτω, μπορώ να προσδιορίσω μόνο 24 pixels.

852
00:38:43,360 --> 00:38:45,960
Και τέλος, στη γραμμή 28, που προσδιορίζει 12.

853
00:38:45,960 --> 00:38:49,070
Έτσι ακριβώς όπως ένα γρήγορο έλεγχο λογικότητας
και ως ανθρώπινο ανάγνωση αυτό,

854
00:38:49,070 --> 00:38:52,545
ποιες λέξεις στην οθόνη είναι
στην πραγματικότητα πρόκειται να είναι με έντονα γράμματα;

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Ποιες γραμμές είναι πραγματικά τολμηρή;

857
00:38:58,760 --> 00:38:59,570
>> Απλά John Harvard.

858
00:38:59,570 --> 00:39:00,070
Σωστά;

859
00:39:00,070 --> 00:39:05,940
Επειδή ακριβώς η γραμμή 22 λέει hey
πρόγραμμα περιήγησης, εδώ είναι ένα τμήμα της σελίδας.

860
00:39:05,940 --> 00:39:07,920
Κάντε το μέγεθος της γραμματοσειράς 36 σημείο.

861
00:39:07,920 --> 00:39:09,460
Κάντε το βάρος γραμματοσειράς τολμηρή.

862
00:39:09,460 --> 00:39:11,920
Μόλις φτάσετε το
αντίστοιχη ετικέτα τέλους

863
00:39:11,920 --> 00:39:15,340
ή κλειστή ετικέτα στη γραμμή 24,
ότι τα μέσα, hey πρόγραμμα περιήγησης,

864
00:39:15,340 --> 00:39:17,640
σταματήσουμε να κάνουμε ό, τι είναι αυτό που κάνει.

865
00:39:17,640 --> 00:39:21,020
Και ειδοποίηση να είναι σαφής, ακόμη και αν
γραμμή 22 έχει όλα αυτά τα χαρακτηριστικά

866
00:39:21,020 --> 00:39:24,430
όπως το ύφος, όταν
κλείστε την ετικέτα στη γραμμή 24,

867
00:39:24,430 --> 00:39:25,940
Σας αναφέρω μόνο το όνομα της ετικέτας.

868
00:39:25,940 --> 00:39:29,990
>> Δεν επαναλάβετε το στυλ λέξη ή
κάτι που είναι μέσα από αυτά τα εισαγωγικά.

869
00:39:29,990 --> 00:39:32,860
Και έτσι αν εξετάσουμε αυτό το θέμα τώρα
στο πρόγραμμα περιήγησής μου, ας ρίξουμε

870
00:39:32,860 --> 00:39:38,060
Μια ματιά στο τελικό αποτέλεσμα. Άσε με να φύγω
μπροστά σε αυτό το αρχείο, το οποίο είναι CSS 0.

871
00:39:38,060 --> 00:39:41,814
Και εξακολουθεί να είναι αρκετά απλό,
αλλά να πάρει αρκετά ενδιαφέρουσα.

872
00:39:41,814 --> 00:39:43,980
Αλλά τελικά του εκεί
άλλα πράγματα που μπορώ να κάνω εδώ,

873
00:39:43,980 --> 00:39:46,490
και με κίνδυνο να καταστεί
Αυτό το εντελώς αποτρόπαιο,

874
00:39:46,490 --> 00:39:48,630
Παρατηρούμε ότι κατά τη γνώμη μου
το σώμα της ιστοσελίδας μου,

875
00:39:48,630 --> 00:39:53,930
Μπορώ να κάνω κάτι αστείο
όπως bg ή το χρώμα του φόντου.

876
00:39:53,930 --> 00:39:56,670
>> Και γρήγορα, ποιο είναι το αγαπημένο σας χρώμα;

877
00:39:56,670 --> 00:39:57,720
Πράσινο άκουσα.

878
00:39:57,720 --> 00:39:58,750
Εντάξει.

879
00:39:58,750 --> 00:40:02,920
Έτσι τώρα, αν χτύπησα reload τώρα,
έχουμε ένα πράσινο web σελίδα.

880
00:40:02,920 --> 00:40:04,710
Εντάξει, έτσι ώστε να μην είναι κακό.

881
00:40:04,710 --> 00:40:08,350
Και τώρα, αν θέλω να κάνω αυτό πραγματικά
δροσερό, μπορώ να κάνω το χρώμα του κειμένου μου

882
00:40:08,350 --> 00:40:09,360
ακόμα και το κόκκινο.

883
00:40:09,360 --> 00:40:10,870
Ας δούμε λοιπόν τι αυτό μοιάζει.

884
00:40:10,870 --> 00:40:12,230
Τώρα ψάχνει αρκετά καλό.

885
00:40:12,230 --> 00:40:15,460
Και εδώ κάτω, αν πραγματικά
θέλετε να το χάος με κάποιον

886
00:40:15,460 --> 00:40:17,487
ή αν θέλετε να
ένας από εκείνους τους ανθρώπους που

887
00:40:17,487 --> 00:40:20,570
προσπαθεί να σας ξεγελάσει και να επισκεφθείτε ένα web
σελίδα επειδή έχουν ξεγέλασε Google

888
00:40:20,570 --> 00:40:27,610
στη σκέψη ότι υπάρχει μια ολόκληρη δέσμη
λέξεις-κλειδιά like-- ας δούμε, να φορτώσετε εκ νέου.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Που πηγε?

891
00:40:30,680 --> 00:40:31,530
Και μας εκεί.

892
00:40:31,530 --> 00:40:32,030
Εντάξει.

893
00:40:32,030 --> 00:40:34,905
Έτσι λέω αυτό ως ένα μέρος, θα
μιλήσουμε για αυτά τα πράγματα μέσα σε λίγες εβδομάδες

894
00:40:34,905 --> 00:40:36,740
όταν μιλάμε για
της ασφάλειας, αν πράγματι

895
00:40:36,740 --> 00:40:38,852
ενσωματώσετε ολόκληρη ματσάκια
λέξεις-κλειδιά σε μια ιστοσελίδα,

896
00:40:38,852 --> 00:40:41,810
ακόμα και αν δεν είναι ορατές σε μια
ανθρώπινο, κάποιος όπως το Google, φυσικά,

897
00:40:41,810 --> 00:40:43,250
μπορεί ακόμα να βρει πραγματικά αυτό.

898
00:40:43,250 --> 00:40:45,820
Εντάξει, έτσι ώστε να είναι αρκετά
ειδεχθή αρκετά γρήγορα.

899
00:40:45,820 --> 00:40:48,420
>> Και στην πραγματικότητα, δεν είναι όλα
ότι πολύ σε αντίθεση με τη δική μου ιστοσελίδα

900
00:40:48,420 --> 00:40:51,480
σελίδα ως ένα προπτυχιακό, η οποία
Άρχισα googling γύρω για να βρείτε

901
00:40:51,480 --> 00:40:53,690
προηγούμενες εκδόσεις των παλιών δικτυακών τόπων μου.

902
00:40:53,690 --> 00:40:54,500
Θα ήταν πολύ κακό.

903
00:40:54,500 --> 00:40:56,650
Στην πραγματικότητα, βρήκα
ένα ακριβώς πριν το μάθημα.

904
00:40:56,650 --> 00:40:58,620
Αλλά υπάρχουν και χειρότερα εκεί έξω.

905
00:40:58,620 --> 00:41:01,534
Αυτό προφανώς ήταν μου
αρχική σελίδα πίσω στο 1996.

906
00:41:01,534 --> 00:41:04,200
Προφανώς Νόμιζα ότι ήταν
σκόπιμο να ζητήσει από τους ανθρώπους το όνομά τους

907
00:41:04,200 --> 00:41:05,991
προτού να μπορέσουν να
πραγματικά να δείτε την ιστοσελίδα μου.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> Και τότε τους έδειξα
κάτι ηλίθιο, κατά πάσα πιθανότητα.

910
00:41:11,920 --> 00:41:13,450
Θα σκάψουν περισσότερο για την επόμενη φορά.

911
00:41:13,450 --> 00:41:16,220
Αλλά για τώρα, ας
να εξετάσει ένα κομμάτι του σχεδιασμού.

912
00:41:16,220 --> 00:41:17,444
Έχουμε μιλήσει για το στυλ.

913
00:41:17,444 --> 00:41:19,735
Και αυτή τη σελίδα μέχρι σήμερα και
πιο ό, τι έχω γράψει

914
00:41:19,735 --> 00:41:21,890
είναι αρκετά καθαρό στυλιστικά.

915
00:41:21,890 --> 00:41:23,320
Αλλά τι γίνεται με το σχεδιασμό;

916
00:41:23,320 --> 00:41:25,990
Λοιπόν, υπάρχουν πολλά πλεονασμού
σε ό, τι έχω κάνει εδώ.

917
00:41:25,990 --> 00:41:28,156
>> Έχω αναφερθεί η λέξη
χρώμα σε μερικά σημεία.

918
00:41:28,156 --> 00:41:31,630
Έχω αναφερθεί το μέγεθος της γραμματοσειράς σε ένα ζευγάρι των
τόπους και τολμηρό σε μια-δυο θέσεις.

919
00:41:31,630 --> 00:41:34,870
Και ουσιαστικά, είμαι συνεργασίας
ανάμειξη δύο γλώσσες.

920
00:41:34,870 --> 00:41:38,100
Έχω HTML με ετικέτες μου και μου
Χαρακτηριστικά και, στη συνέχεια, ξαφνικά,

921
00:41:38,100 --> 00:41:40,100
μεταξύ εισαγωγικά, έχω
η δεύτερη γλώσσα σήμερα

922
00:41:40,100 --> 00:41:43,830
που ονομάζεται CSS, η οποία και πάλι, είναι ακριβώς αυτά
Τα ζεύγη κλειδιών αξία ή τα ακίνητα

923
00:41:43,830 --> 00:41:45,280
διαχωρίζονται με άνω και κάτω τελεία.

924
00:41:45,280 --> 00:41:47,700
>> Αποδεικνύεται ότι πολύ
όπως στη C, όπου θα

925
00:41:47,700 --> 00:41:50,550
μπορεί να αρχίσει να συνυπολογίσει
κάποια κώδικα σε αρχεία κεφαλίδας,

926
00:41:50,550 --> 00:41:53,520
έτσι μπορούμε να κάνουμε το ίδιο σε μορφή HTML.

927
00:41:53,520 --> 00:41:56,030
Και ένα βήμα προς αυτό είναι ως ακολούθως.

928
00:41:56,030 --> 00:42:02,230
Σημειώστε ότι αυτή η έκδοση, είναι CSS1.html
δομικά ακριβώς την ίδια ιστοσελίδα.

929
00:42:02,230 --> 00:42:05,250
Έτσι έχω ένα σωρό
των divs, αλλά αυτή τη φορά, έχω

930
00:42:05,250 --> 00:42:07,220
πάρει απαλλαγούμε από το περιτύλιγμα
div όπως θα δείτε.

931
00:42:07,220 --> 00:42:12,390
>> Και έχω δώσει αυτές τις τρεις divs
κορυφή, μέση και κάτω, μοναδικά αναγνωριστικά.

932
00:42:12,390 --> 00:42:14,760
Αυτό είναι καλό, γιατί από
δίνοντας αυτές τις διαιρέσεις

933
00:42:14,760 --> 00:42:18,715
της σελίδας μοναδικών αναγνωριστικών,
Μπορώ να τους αναφορά και αλλού.

934
00:42:18,715 --> 00:42:19,215
Που?

935
00:42:19,215 --> 00:42:21,070
Λοιπόν, επιτρέψτε μου να μετακινηθείτε προς τα επάνω.

936
00:42:21,070 --> 00:42:24,070
Και μέχρι στιγμής, όποτε έχουμε εξετάσει
επικεφαλής μιας ιστοσελίδας, τι είναι

937
00:42:24,070 --> 00:42:28,560
η μόνη ετικέτα που είχαμε στο
ο επικεφαλής μιας ιστοσελίδας;

938
00:42:28,560 --> 00:42:29,740
Λίγο πιο δυνατά.

939
00:42:29,740 --> 00:42:30,799
Απλά ο τίτλος μέχρι στιγμής.

940
00:42:30,799 --> 00:42:32,590
Αλλά τελικά του εκεί
μερικά άλλα πράγματα

941
00:42:32,590 --> 00:42:35,840
μπορείτε να βάλετε εκεί, ένα από τα
η οποία έχει καλέσει μια ετικέτα στυλ.

942
00:42:35,840 --> 00:42:37,850
Έτσι, πριν από λίγο, κοιτάξαμε
σε ένα χαρακτηριστικό στυλ.

943
00:42:37,850 --> 00:42:39,150
Βγάζει υπάρχει μια ετικέτα στυλ.

944
00:42:39,150 --> 00:42:41,200
Ανήκει στο εσωτερικό της
ο επικεφαλής μιας ιστοσελίδας.

945
00:42:41,200 --> 00:42:42,840
Και σήμερα παρατηρούμε ότι αυτό που κάνω.

946
00:42:42,840 --> 00:42:46,540
Έχω στο εσωτερικό του αυτό
ετικέτα στυλ το εξής.

947
00:42:46,540 --> 00:42:51,190
Είμαι κυριολεκτικά παραπέμπουν στη γραμμή 20 η
το όνομα της ετικέτας που θέλω να στυλιζάρω.

948
00:42:51,190 --> 00:42:53,489
>> Τότε θα έχετε ανοίξει σγουρά τιράντες
και έκλεισε σγουρά στήριγμα.

949
00:42:53,489 --> 00:42:56,030
Έτσι, παρόμοια στο πνεύμα με C, αλλά
πάλι, αυτό δεν είναι μια συνάρτηση,

950
00:42:56,030 --> 00:42:57,796
αυτό είναι μόνο μια συντακτική λεπτομέρεια εδώ.

951
00:42:57,796 --> 00:43:00,170
Και τότε φυσικά, εγώ λέω
το πρόγραμμα περιήγησης, hey πρόγραμμα περιήγησης,

952
00:43:00,170 --> 00:43:05,210
κάνει ολόκληρο το σώμα της σελίδας
έχουν στοίχιση κειμένου του κέντρου.

953
00:43:05,210 --> 00:43:06,930
Και τότε αυτό που λέει το εξής.

954
00:43:06,930 --> 00:43:12,600
Γεια σου πρόγραμμα περιήγησης, αν δείτε μια HTML
στοιχείο ή ετικέτα στην σελίδα που

955
00:43:12,600 --> 00:43:17,040
έχει ένα μοναδικό αναγνωριστικό των κορυφαίων,
έτσι ώστε το σύμβολο δίεσης εδώ σημαίνει μόνο

956
00:43:17,040 --> 00:43:21,010
μοναδική ιδέα της κορυφής, προχωρήστε
και να κάνει το μέγεθος της γραμματοσειράς του 36

957
00:43:21,010 --> 00:43:22,490
και το βάρος της γραμματοσειράς τολμηρό.

958
00:43:22,490 --> 00:43:26,840
>> Γεια σου πρόγραμμα περιήγησης, ένα στοιχείο του οποίου
ID είναι το μεσαίο, το κάνουν 24 pixels.

959
00:43:26,840 --> 00:43:31,070
Και hey πρόγραμμα περιήγησης, αν δείτε ένα
ιδέα του πυθμένα, το 12 pixels κάνουν.

960
00:43:31,070 --> 00:43:33,540
Το αποτέλεσμα στο τέλος
είναι ακριβώς το SAM.

961
00:43:33,540 --> 00:43:36,500
Αν πάω σε CSS 1, η
σελίδα έχει την ίδια εμφάνιση.

962
00:43:36,500 --> 00:43:39,810
Αλλά είμαστε ένα βήμα προς
ελαφρώς καλύτερο σχεδιασμό.

963
00:43:39,810 --> 00:43:44,850
Επιτρέψτε μου τώρα να επιστρέψω εδώ για να CSS2
και να δούμε τι άλλο έχω κάνει.

964
00:43:44,850 --> 00:43:48,030
>> Τώρα η σελίδα είναι πραγματικά, πραγματικά καθαρό.

965
00:43:48,030 --> 00:43:50,730
Στην πραγματικότητα, μπορώ να χωρέσει όλα
το περιεχόμενο σε μια σελίδα εδώ.

966
00:43:50,730 --> 00:43:54,270
Αλλά τι νέα ετικέτα έχω
εισήγαγε, προφανώς;

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
Και δεν είναι το καλύτερο όνομα για μια ετικέτα,
επειδή δεν είναι μια σύνδεση με την έννοια

969
00:43:57,853 --> 00:44:00,780
ότι το ξέρουμε, αλλά αυτό σημαίνει
μια σύνδεση σε κάποιο άλλο αρχείο.

970
00:44:00,780 --> 00:44:02,890
Αυτό είναι κάτι σαν απότομη περιλαμβάνουν C.

971
00:44:02,890 --> 00:44:06,280
>> Αυτός είναι ο τρόπος με τον HTML
να πω hey πρόγραμμα περιήγησης,

972
00:44:06,280 --> 00:44:10,240
πάει να πάρει τα περιεχόμενα του
το αρχείο που ονομάζεται css2.css.

973
00:44:10,240 --> 00:44:12,880
Η σχέση, για μένα,
είναι ότι πρόκειται για ένα φύλλο στυλ.

974
00:44:12,880 --> 00:44:17,980
Και πράγματι, αυτό είναι το ένα από τα
S σε στυλ επικαλυπτόμενα φύλλα μέσα.

975
00:44:17,980 --> 00:44:20,350
Αυτό είναι ένα φύλλο στυλ.

976
00:44:20,350 --> 00:44:23,120
Είναι ακριβώς το αρχείο κειμένου που περιέχει
ένα σωρό ιδιοκτησίας.

977
00:44:23,120 --> 00:44:25,940
Είναι ένα σωρό στυλ
ότι θέλετε να εφαρμόσετε σε μια σελίδα.

978
00:44:25,940 --> 00:44:28,860
>> Και έτσι αυτό είναι προφανώς
αναφέρεται σε ένα δεύτερο αρχείο.

979
00:44:28,860 --> 00:44:32,970
Και αν μπορώ να ανοίξω αυτό, CSS2.css,
παρατηρήσετε ότι όλα τα έχω κάνει

980
00:44:32,970 --> 00:44:35,900
Είναι αντιγραφή και επικόλληση όλων
αυτό σε αυτό το αρχείο.

981
00:44:35,900 --> 00:44:38,220
Και τώρα, ακόμη και αν δεν έχετε
κωδικοποιημένα αυτά τα πράγματα πριν,

982
00:44:38,220 --> 00:44:40,700
εξετάζουν ακριβώς με το
παροιμιώδης καπέλο μηχανική

983
00:44:40,700 --> 00:44:44,220
σχετικά, γιατί αυτό είναι ένα
καλύτερο σχεδιασμό πιθανότατα;

984
00:44:44,220 --> 00:44:48,910
Factoring από αυτές τις ιδιότητες CSS,
τη θέση τους σε δικό τους αρχείο.

985
00:44:48,910 --> 00:44:51,330
Ακόμα κι αν λυθεί αυτό
Πριν πρόβλημα, όπως πέντε λεπτά

986
00:44:51,330 --> 00:44:52,600
στην πρώτη έκδοση.

987
00:44:52,600 --> 00:44:55,730
>> Εμείς δεν έχουμε βελτιωθεί η
σελίδα στυλιστικά,

988
00:44:55,730 --> 00:44:57,520
αυτό είναι ακριβώς καλύτερα
σχεδιασμού κατά κάποιο τρόπο.

989
00:44:57,520 --> 00:44:58,990
Γιατί νομίζεις?

990
00:44:58,990 --> 00:45:01,510
Ναι.

991
00:45:01,510 --> 00:45:02,260
Πιο ευέλικτη πώς;

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Ναι.

994
00:45:05,540 --> 00:45:07,373
Έτσι, εάν θέλετε να πάτε
πίσω και να αλλάξει τα πράγματα,

995
00:45:07,373 --> 00:45:09,540
τώρα, έχετε ένα μέρος
όπου μπορείτε να αλλάξετε τα πράγματα.

996
00:45:09,540 --> 00:45:11,622
Και στην πραγματικότητα, κάτι
όπως το πρόβλημα που επτά,

997
00:45:11,622 --> 00:45:13,690
όπου θα εφαρμόσουν μια
ιστοσελίδα χρηματιστηριακές συναλλαγές,

998
00:45:13,690 --> 00:45:15,523
ότι πρόκειται να έχουν μια
σωρό σελίδες.

999
00:45:15,523 --> 00:45:17,620
Και θα ήταν πραγματικά
ενοχλητικό, αν αποφασίσετε, hm,

1000
00:45:17,620 --> 00:45:21,630
Δεν μου αρέσει 24 εικονοστοιχεία, θέλω
να είναι 28 pixels ή ελαφρώς μεγαλύτερο.

1001
00:45:21,630 --> 00:45:23,550
Και τότε πρέπει να κάνουμε
παγκόσμια βρείτε και να αντικαταστήσετε

1002
00:45:23,550 --> 00:45:27,560
ή να ανοίξετε όλα τα αρχεία της ιστοσελίδας σας
απλά να αλλάξει πραγματικά μία τιμή.

1003
00:45:27,560 --> 00:45:31,290
Με factoring από αυτά τα στυλ
σε ένα κεντρικό σημείο,

1004
00:45:31,290 --> 00:45:34,720
τώρα μπορείτε να ανοίξετε ένα αρχείο κειμένου
σε CS50IDE σε οποιοδήποτε πρόγραμμα,

1005
00:45:34,720 --> 00:45:36,479
αλλάξετε, να το αποθηκεύσετε, και να γίνει.

1006
00:45:36,479 --> 00:45:38,270
Έχετε πολλαπλασιάζονται εκείνα
αλλαγές παντού.

1007
00:45:38,270 --> 00:45:42,450
Και αυτό θα ήταν το ίδιο
σε ένα αρχείο dot h, καθώς και.

1008
00:45:42,450 --> 00:45:46,697
Έτσι, οποιεσδήποτε ερωτήσεις έτσι
στιγμής σε αυτή τη σύνταξη;

1009
00:45:46,697 --> 00:45:48,530
Εντάξει, έτσι έχουμε
κάνει ό, τι φαίνεται

1010
00:45:48,530 --> 00:45:51,170
εκτός από το να εφαρμόσει υπερσυνδέσμους.

1011
00:45:51,170 --> 00:45:52,740
Και έτσι πάμε μπροστά και να το κάνουμε αυτό.

1012
00:45:52,740 --> 00:45:54,830
Επιτρέψτε μου να προχωρήσει και
δημιουργήσετε ένα νέο αρχείο εδώ.

1013
00:45:54,830 --> 00:45:59,970
Πάω να το ονομάσουμε
link.html, να θέσει στη σημερινή κώδικα.

1014
00:45:59,970 --> 00:46:03,000
>> Και Πάω να κάνω ανοιχτό
βραχίονα τύπου doc html.

1015
00:46:03,000 --> 00:46:05,970
Παρεμπιπτόντως, αυτό το πράγμα με το
κορυφή, η δήλωση αυτή του τύπου doc,

1016
00:46:05,970 --> 00:46:08,420
είναι η μόνη που είναι περίεργα
με το θαυμαστικό.

1017
00:46:08,420 --> 00:46:12,100
Απλά πρέπει να το κάνουμε εκεί και
σημαίνει ότι χρησιμοποιείτε HTML έκδοση 5.

1018
00:46:12,100 --> 00:46:14,460
Παλαιότερες εκδόσεις του
γλώσσα είχε πολύ περισσότερο

1019
00:46:14,460 --> 00:46:16,400
χορδές που χρειάζεται για να τεθεί εκεί.

1020
00:46:16,400 --> 00:46:18,620
Έτσι, εδώ είναι ένα παράδειγμα που ονομάζεται σύνδεση.

1021
00:46:18,620 --> 00:46:20,950
>> Χρειάζομαι ένα σώμα της ιστοσελίδας μου εδώ.

1022
00:46:20,950 --> 00:46:29,770
Και εδώ, a href ίσων
ας πούμε HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
και το αγαπημένο μου ιστοσελίδα, θα σας πω.

1024
00:46:35,420 --> 00:46:38,550
Εντάξει, έτσι, ένα πολύ
αθώα, φιλική προς το χρήστη της σελίδας.

1025
00:46:38,550 --> 00:46:42,950
Αν εγώ τώρα πάω σε κατάλογο μου
απαρίθμηση εδώ και να ανοίξει link.html,

1026
00:46:42,950 --> 00:46:44,780
έχουμε υπερ κειμένου.

1027
00:46:44,780 --> 00:46:47,410
>> Και πράγματι, αυτό είναι όπου
το H σε HTTP προέρχεται.

1028
00:46:47,410 --> 00:46:51,580
Πρωτόκολλο μεταφοράς υπερκειμένου
είναι σχετικά με τη μεταφορά κειμένων

1029
00:46:51,580 --> 00:46:53,840
ότι έχει συνδέσμους προς άλλους πόρους.

1030
00:46:53,840 --> 00:46:58,210
Και πράγματι, εδώ είναι το γνωστό,
εάν ρετρό, μπλε λινκ με το ότι, αν πατηθεί,

1031
00:46:58,210 --> 00:47:02,607
θα με οδηγήσει πράγματι σε Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Τώρα, Ω, αυτό είναι που βγαίνει σύντομα.

1033
00:47:03,940 --> 00:47:08,970
Εντάξει, έτσι και τώρα, τι είναι μερικά
των επιπτώσεων της αυτό;

1034
00:47:08,970 --> 00:47:11,610
>> Και ειλικρινά, ο κόσμος αρχίζει
για να πάρετε μια λίγο πιο εξοικειωμένοι

1035
00:47:11,610 --> 00:47:15,090
και επίσης λίγο πιο τρομακτικό
αλλά και λίγο περισσότερο

1036
00:47:15,090 --> 00:47:17,840
αυτο υποστηριχθούν μόλις αρχίσετε
να κατανοήσουν αυτά τα πράγματα.

1037
00:47:17,840 --> 00:47:21,610
Επειδή οι πιθανότητες είναι, μερικοί από σας, αν πάτε
μέσω του Gmail σας φάκελο ανεπιθύμητης αλληλογραφίας ή ακόμα και

1038
00:47:21,610 --> 00:47:23,990
εισερχόμενά σας, έχετε ίσως
πάρει κάποιο είδος ηλεκτρονικού ταχυδρομείου

1039
00:47:23,990 --> 00:47:26,980
αυτό είναι που σας ζητά να αλλάξετε σας
κωδικό ίσως ή ίσως επαληθεύσετε

1040
00:47:26,980 --> 00:47:28,910
PayPal διαπιστευτήρια ή οτιδήποτε σας.

1041
00:47:28,910 --> 00:47:34,510
>> Και στην πραγματικότητα, μπορεί να έχετε λάβει
κάτι που όπως λέει κάντε κλικ εδώ

1042
00:47:34,510 --> 00:47:42,260
για να επαναφέρετε τον κωδικό πρόσβασής σας PayPal.

1043
00:47:42,260 --> 00:47:44,130
Και τώρα, παρατηρήστε, αν
αυτό δεν είναι Disney.com

1044
00:47:44,130 --> 00:47:51,600
αλλά όπως και badplace.com
reload, σημειώστε ότι το κείμενο εδώ

1045
00:47:51,600 --> 00:47:53,710
θα μπορούσε να πει απολύτως τίποτα.

1046
00:47:53,710 --> 00:47:55,260
Και στην πραγματικότητα, αυτό είναι μόνο λόγια.

1047
00:47:55,260 --> 00:48:04,610
Γιατί δεν μπορώ πραγματικά να είναι εξαιρετικά κακόβουλα
και να πω http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Κάντε κλικ εδώ για να επαναφέρετε το PayPal σας
κωδικό και τώρα να φορτώσετε εκ νέου.

1049
00:48:14,090 --> 00:48:16,220
Αυτό φαίνεται αρκετά νόμιμο, σωστά;

1050
00:48:16,220 --> 00:48:20,470
Θέλω να πω, εγώ δεν θα κάντε κλικ στο
Ένα μήνυμα ηλεκτρονικού ταχυδρομείου που λέει ακριβώς αυτό.

1051
00:48:20,470 --> 00:48:22,450
Αλλά ανακοίνωση η διχοτόμηση εδώ.

1052
00:48:22,450 --> 00:48:26,880
Λέει www.paypal.com,
και στην πραγματικότητα, περιμένετε ένα λεπτό,

1053
00:48:26,880 --> 00:48:29,210
ξέρουμε ότι θέλετε
το s για την ασφάλεια.

1054
00:48:29,210 --> 00:48:35,450
Έτσι τώρα, πηγαίνετε στο www.paypal.com HTTPS,
αλλά αν δεν έχετε κάνει πριν από αυτό,

1055
00:48:35,450 --> 00:48:38,182
να πάρει στη συνήθεια της
πλανάται πάνω από λίγο συνδέσμους εδώ.

1056
00:48:38,182 --> 00:48:39,890
Και είναι δύσκολο να δούμε
στην οθόνη εκεί,

1057
00:48:39,890 --> 00:48:41,340
και δεν είναι όλα ότι πιο εύκολο εδώ.

1058
00:48:41,340 --> 00:48:43,615
Αλλά εδώ μέχρι κάτω στην
το μικροσκοπικό γωνία

1059
00:48:43,615 --> 00:48:45,740
κάνει το πρόγραμμα περιήγησης πραγματικότητα
σας ότι θα πάμε πω

1060
00:48:45,740 --> 00:48:48,850
να badplace.com αντί Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Τώρα, πού θα πάμε με αυτό;

1062
00:48:51,620 --> 00:48:54,859
Όλα τα παραδείγματα που έχουμε κάνει σήμερα,
έχουμε σκληρό κωδικοποιούνται και πληκτρολογήσει με το χέρι.

1063
00:48:54,859 --> 00:48:56,900
Το διαδίκτυο είναι απίστευτα
πληκτικός όταν το σκληρό σας

1064
00:48:56,900 --> 00:48:59,844
κωδικοποιήσει τις ιστοσελίδες σας έτσι ώστε το περιεχόμενο
είναι στατική και ποτέ αλλάζει.

1065
00:48:59,844 --> 00:49:01,760
Φυσικά, όλοι μας
αγαπημένες ιστοσελίδες σήμερα,

1066
00:49:01,760 --> 00:49:04,470
είτε πρόκειται για το Gmail ή το Twitter ή
Facebook ή οποιοδήποτε αριθμό άλλων

1067
00:49:04,470 --> 00:49:05,290
είναι δυναμικές.

1068
00:49:05,290 --> 00:49:07,340
Είναι αλλάζει
ανταπόκριση στις εντολές του χρήστη

1069
00:49:07,340 --> 00:49:08,840
ακριβώς όπως τα αποτελέσματα αναζήτησης του Google.

1070
00:49:08,840 --> 00:49:12,415
>> Και έτσι, την Τετάρτη, αυτό που κάνουμε είναι
αφήνουμε HTML και CSS εισαγωγή

1071
00:49:12,415 --> 00:49:14,290
πίσω μας και παίρνουμε
δεδομένο ότι τώρα

1072
00:49:14,290 --> 00:49:16,640
γνωρίζουν αυτό και έχουμε εισαγάγει
μια νέα γλώσσα προγραμματισμού

1073
00:49:16,640 --> 00:49:19,050
που ονομάζεται PHP, η οποία ήθελε
C, πρόκειται να μας δώσει

1074
00:49:19,050 --> 00:49:22,450
την εξουσία να δημιουργήσει πραγματικά προγράμματα
ότι οι ίδιοι παράγουν έξοδο.

1075
00:49:22,450 --> 00:49:25,900
Σε αυτή την περίπτωση, θα πρέπει να χρησιμοποιούν
PHP για να δημιουργήσετε δυναμικά web

1076
00:49:25,900 --> 00:49:27,340
σελίδες που χρησιμοποιούν αυτή τη νέα γλώσσα.

1077
00:49:27,340 --> 00:49:28,989
Έτσι, περισσότερα για αυτό την Τετάρτη.

1078
00:49:28,989 --> 00:49:29,530
Τα λεμε τοτε.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [Παίζει μουσική]

1081
00:49:37,380 --> 00:52:38,864