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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN FARNHAM: Σήμερα, είμαι πρόκειται να
μιλήσουμε λίγο για HTML,

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

4
00:00:12,330 --> 00:00:14,450
Βλέπετε HTML παντού αυτές τις μέρες.

5
00:00:14,450 --> 00:00:17,190
Στην πραγματικότητα, αν το βλέπεις αυτό
βίντεο σε ένα πρόγραμμα περιήγησης, είστε

6
00:00:17,190 --> 00:00:19,120
βλέποντας HTML τώρα.

7
00:00:19,120 --> 00:00:22,760
HTML δεν είναι μια γλώσσα προγραμματισμού,
Αντιθέτως, είναι μια γλώσσα σήμανσης που χρησιμοποιείται από

8
00:00:22,760 --> 00:00:25,460
web browsers για να αποδώσει τις σελίδες
στο διαδίκτυο.

9
00:00:25,460 --> 00:00:30,410
>> Έτσι, μπορείτε να ρωτήσετε, πώς ακριβώς γράφει
μια ιστοσελίδα σε HTML διαφορετικές

10
00:00:30,410 --> 00:00:33,574
από το γράψιμο ενός προγράμματος σε έναν προγραμματισμό
γλώσσα όπως η C;

11
00:00:33,574 --> 00:00:38,010
Λοιπόν, C είναι μια γλώσσα με πολύ αυστηρή
συντακτικούς κανόνες, που πρέπει να είναι

12
00:00:38,010 --> 00:00:39,880
καταρτίζονται πριν να μπορεί να τρέξει.

13
00:00:39,880 --> 00:00:43,070
Εάν έχετε ξεχάσει ποτέ να περιλαμβάνουν
ερωτηματικό στο τέλος του υπομνήματος

14
00:00:43,070 --> 00:00:46,660
κώδικα C, ξέρετε τι μιλώ
περίπου σε σχέση με αυστηρή σύνταξη.

15
00:00:46,660 --> 00:00:50,360
>> Προγράμματα περιήγησης στο Web όμως, είναι λίγο πιο
επιεικής όταν πρόκειται για HTML.

16
00:00:50,360 --> 00:00:53,860
Ακόμη και αν η HTML σας δεν είναι συντακτικά
σωστή, η σελίδα σας μπορεί να είναι ακόμα

17
00:00:53,860 --> 00:00:57,150
εμφανίζονται από ένα πρόγραμμα περιήγησης, αλλά ότι θα μπορούσε
δεν φαίνονται όπως θα θέλατε.

18
00:00:57,150 --> 00:00:59,640
Έτσι, είναι πάντα καλύτερο να
ακολουθούν τους κανόνες.

19
00:00:59,640 --> 00:01:01,990
Ο καλύτερος τρόπος για να πάρετε μια διαίσθηση
σχετικά με το πώς λειτουργούν τα πράγματα είναι να

20
00:01:01,990 --> 00:01:03,300
να περάσουν από ένα παράδειγμα.

21
00:01:03,300 --> 00:01:07,360
>> Έτσι, αυτό που έχουμε εδώ είναι μια βασική
σχέδιο για μια ιστοσελίδα.

22
00:01:07,360 --> 00:01:10,690
Θα παρατηρήσει πιθανώς πολλά πράγματα
ανάμεσα σε γωνιακές παρενθέσεις.

23
00:01:10,690 --> 00:01:12,900
Λοιπόν, αυτά είναι απλώς ετικέτες.

24
00:01:12,900 --> 00:01:15,810
Ετικέτες ενημερώνουν βασικά προγράμματα περιήγησης στο Web
ότι, hey, κάτι

25
00:01:15,810 --> 00:01:17,150
έρχεται το δρόμο σας.

26
00:01:17,150 --> 00:01:20,770
Να θυμάστε όμως, κάθε φορά που ανοίγετε ένα
ετικέτα, θα πρέπει να το κλείσει όταν είστε

27
00:01:20,770 --> 00:01:21,750
γίνει χρησιμοποιώντας αυτό.

28
00:01:21,750 --> 00:01:24,690
>> Έτσι, για παράδειγμα, να ανοίξω ένα τμήμα
κώδικα με ανοιχτό

29
00:01:24,690 --> 00:01:26,960
σώμα νυχιού κλείσιμο παρένθεσης.

30
00:01:26,960 --> 00:01:31,280
Στη συνέχεια να προσθέσετε κάποιο κείμενο, στην περίπτωση αυτή, μου
πρώτη σελίδα web, στη συνέχεια, όταν πήγα να

31
00:01:31,280 --> 00:01:35,540
Κλείνουμε αυτό το τμήμα, μπορώ να χρησιμοποιήσω σχεδόν μια
ταυτόσημη ετικέτα εξαίρεση αυτή τη φορά με ένα

32
00:01:35,540 --> 00:01:37,660
κάθετος πριν από το σώμα.

33
00:01:37,660 --> 00:01:41,140
Σε γενικές γραμμές, αυτή είναι η μορφή που είστε
πρόκειται να χρησιμοποιήσετε κάθε φορά που ανοίγετε

34
00:01:41,140 --> 00:01:42,680
και το κλείσιμο ετικέτες.

35
00:01:42,680 --> 00:01:47,900
Μαζί, ένα open tag και μια ετικέτα τέλους
συνθέτουν αυτό που ονομάζεται ένα στοιχείο.

36
00:01:47,900 --> 00:01:51,870
>> Αν κοιτάξετε την πρώτη γραμμή, θα είστε
δείτε ένα θαυμαστικό που ακολουθείται από

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

38
00:01:53,350 --> 00:01:56,280
Αυτό είναι πραγματικά ακριβώς λέει το πρόγραμμα περιήγησής σας
ότι το αρχείο είναι μια ιστοσελίδα

39
00:01:56,280 --> 00:01:58,280
γραμμένο σε HTML.

40
00:01:58,280 --> 00:02:01,970
Η ετικέτα HTML ουσιαστικά λέει,
εδώ έρχεται μερικές HTML.

41
00:02:01,970 --> 00:02:04,950
Στη συνέχεια έχουμε μια ετικέτα κεφάλι με
ένα τίτλο ετικέτα στο εσωτερικό του.

42
00:02:04,950 --> 00:02:09,430
Η ετικέτα της κεφαλής που μπορείτε να σκεφτείτε ως
περιλαμβάνει κώδικα HTML που έρχεται για

43
00:02:09,430 --> 00:02:12,670
το μεγαλύτερο μέρος της ιστοσελίδας σας
πραγματικό περιεχόμενο.

44
00:02:12,670 --> 00:02:16,700
>> Σε γενικές γραμμές, θα βάλει τον τίτλο του σας
ιστοσελίδα εδώ, αν και υπάρχουν μερικοί

45
00:02:16,700 --> 00:02:19,350
άλλες ετικέτες που μπορούν να εμφανιστούν
ως εδώ καλά.

46
00:02:19,350 --> 00:02:25,020
Έπειτα έρχεται το σώμα της ιστοσελίδας σας, η
πραγματικό κρέας και τα κόκαλα της ιστοσελίδας σας.

47
00:02:25,020 --> 00:02:28,910
Στο παράδειγμά μας, έχουμε απλά βάλτε μια απλή
φράση, πρώτη μου ιστοσελίδα,

48
00:02:28,910 --> 00:02:34,100
η οποία, αν τρέξουμε το site μας, θα δούμε
λίγο κάτι σαν αυτό.

49
00:02:34,100 --> 00:02:36,810
Η ιστοσελίδα μας δεν είναι πάρα πολύ queer,
αλλά μην ανησυχείτε.

50
00:02:36,810 --> 00:02:39,210
Θα το καλλωπίζω σύντομα.

51
00:02:39,210 --> 00:02:44,070
>> Έτσι, η παραπάνω HTML, θα σας δώσει μια πολύ
βασικό πρότυπο για μια ιστοσελίδα,

52
00:02:44,070 --> 00:02:46,310
φανταχτερό τίποτα, μόνο τα γυμνά κόκαλα.

53
00:02:46,310 --> 00:02:49,160
Αλλά αν είμαι δημιουργία ιστοσελίδων,
τι κι αν θέλετε να προσθέσετε ένα

54
00:02:49,160 --> 00:02:50,760
εικόνα της, ας πούμε, τον εαυτό μου;

55
00:02:50,760 --> 00:02:52,760
Λοιπόν, μπορώ να το κάνω αυτό.

56
00:02:52,760 --> 00:02:55,460
Υπάρχουν δύο τρόποι για να
προσθέσετε εικόνες στην ιστοσελίδα σας.

57
00:02:55,460 --> 00:02:59,780
Αν η εικόνα είναι στον ίδιο φάκελο όπως
HTML αρχείο σας, μπορείτε να συνδεθείτε με το

58
00:02:59,780 --> 00:03:01,950
εικόνα μέσω της διαδρομής σαν αυτό.

59
00:03:01,950 --> 00:03:05,910
>> Θα ανοίξει με μια ετικέτα εικόνας που ακολουθείται
από το Alt χαρακτηριστικό στο

60
00:03:05,910 --> 00:03:07,240
πηγή εικόνας.

61
00:03:07,240 --> 00:03:12,030
Η αξία του ιδιότητα Alt είναι μερικά μόνο
εναλλακτικό κείμενο σε περίπτωση που ο χρήστης δεν μπορεί να

62
00:03:12,030 --> 00:03:13,580
δείτε την εικόνα.

63
00:03:13,580 --> 00:03:19,680
Εναλλακτικά, μπορείτε επίσης να συνδέσετε σε
εικόνων μέσω ενός πλήρη διεύθυνση URL, όπως αυτό.

64
00:03:19,680 --> 00:03:24,180
Τώρα, ότι η ιστοσελίδα δεν υπάρχει πραγματικά,
αλλά αν υπήρχε μια εικόνα της

65
00:03:24,180 --> 00:03:27,760
μου σε αυτή τη διεύθυνση, θα μπορούσα να χρησιμοποιήσω
η πηγή URL να συμπεριλάβει

66
00:03:27,760 --> 00:03:29,930
εικόνα του στην ιστοσελίδα μου.

67
00:03:29,930 --> 00:03:35,590
Είτε έτσι είτε αλλιώς, θα καταλήξετε με ένα πολύ
όμορφη ιστοσελίδα, κάτι σαν αυτό.

68
00:03:35,590 --> 00:03:39,730
>> Λοιπόν, αυτό είναι αρκετά δροσερό, αλλά το είδος
της θέλουν κάποιο κείμενο εδώ.

69
00:03:39,730 --> 00:03:43,020
Οπότε ας προσθέσω κάτι
εξαιρετικά απλό πάνω από το

70
00:03:43,020 --> 00:03:45,210
εικόνα, όπως και η μπάλα.

71
00:03:45,210 --> 00:03:50,830
Όλα τα έχω κάνει μέχρι στιγμής είναι να χρησιμοποιήσετε την κεφαλίδα
ετικέτα, H1, και ένα διάλειμμα γραμμή ετικέτα, br.

72
00:03:50,830 --> 00:03:54,900
Η ετικέτα κεφαλίδα κάνει το γραμματοσειράς λίγο
λίγο μεγαλύτερο και πιο εμφανή.

73
00:03:54,900 --> 00:03:58,930
Η ετικέτα αλλαγής γραμμής, από την άλλη
Αντίθετα, είναι είδος δροσερό.

74
00:03:58,930 --> 00:04:03,720
Σε αντίθεση με τις περισσότερες άλλες ετικέτες, δεν έχετε
ένα άνοιγμα και το κλείσιμο διάλειμμα ετικέτα, απλά

75
00:04:03,720 --> 00:04:05,120
το ένα που δείχνεται παραπάνω.

76
00:04:05,120 --> 00:04:10,420
Αυτό συμβαίνει επειδή διάλειμμα δεν έχει περιεχόμενο
και ως εκ τούτου, ένα άδειο στοιχείο.

77
00:04:10,420 --> 00:04:14,940
>> Κενά στοιχείων όπως αυτό, μπορείτε να ανοίξετε
και κλείνουν ταυτόχρονα απλά

78
00:04:14,940 --> 00:04:20,420
συμπεριλαμβανομένης μιας καθέτου κατά τη
τέλος της αρχικής δήλωσης.

79
00:04:20,420 --> 00:04:24,390
Έτσι τώρα την ιστοσελίδα μου φαίνεται λίγο
κάτι σαν αυτό.

80
00:04:24,390 --> 00:04:27,410
Καλύτερα, αλλά το είδος του αισθάνεται
σαν ένα αδιέξοδο.

81
00:04:27,410 --> 00:04:30,850
Δεν υπάρχει πουθενά αλλού να πάνε στην άκρη
από την κεντρική σελίδα.

82
00:04:30,850 --> 00:04:33,075
Λοιπόν, ας καθορίσει ότι από
συμπεριλαμβανομένου ενός συνδέσμου.

83
00:04:33,075 --> 00:04:36,860
>> Τι Πάω να κάνουμε εδώ είναι να χρησιμοποιήσετε ένα
γνώρισμα που συμβολίζεται με Α και να κάνει το

84
00:04:36,860 --> 00:04:40,780
εικόνα μια σύνδεση με, ας πούμε, CS50 τηλεόραση.

85
00:04:40,780 --> 00:04:44,460
Με αυτόν τον τρόπο, κάθε φορά που κάποιος κάνει κλικ σε μένα,
browser τους θα κατευθυνθούν προς

86
00:04:44,460 --> 00:04:47,810
άλλο, ίσως περισσότερο
χρήσιμο, web σελίδα.

87
00:04:47,810 --> 00:04:51,040
Είχα να ελαχιστοποιήσετε το μέγεθος της
κείμενο λίγο γιατί ιστοσελίδα μας είναι

88
00:04:51,040 --> 00:04:52,470
όλο και πιο προηγμένες.

89
00:04:52,470 --> 00:04:54,590
Αλλά ευτυχώς, είναι ακόμη σαφής.

90
00:04:54,590 --> 00:04:59,460
Η ιστοσελίδα μου φαίνεται ακριβώς το ίδιο μόνο
τώρα, κάθε φορά που κάνω κλικ πάνω στην εικόνα,

91
00:04:59,460 --> 00:05:04,410
browser μου θα ανοίξει ένα άλλο
καρτέλα για την ιστοσελίδα CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Τέλος, ας πω ότι πρόκειται για το στυλ
αυτή την ιστοσελίδα αργότερα χρησιμοποιώντας CSS.

93
00:05:08,970 --> 00:05:11,730
CSS είναι αυτό που είναι γνωστό ως
επικαλυπτόμενων φύλλων στυλ.

94
00:05:11,730 --> 00:05:15,230
Και ουσιαστικά παρέχει μια αποτελεσματική
τρόπο για να επεξεργαστείτε και το ύφος

95
00:05:15,230 --> 00:05:16,910
παρόμοια μπλοκ κώδικα.

96
00:05:16,910 --> 00:05:21,290
Θέλω να αρχίσει να οργανώνει HTML μου
καταστήσει ευκολότερη για το στυλ αργότερα.

97
00:05:21,290 --> 00:05:26,900
Εδώ, έχω δημιουργήσει δύο διαφορετικά είδη
αναγνωριστικά για να σας βοηθήσει να οργανώσετε τον κωδικό μου.

98
00:05:26,900 --> 00:05:31,170
Έχω χρησιμοποιήσει το χαρακτηριστικό ID μέσα σε ένα
διαίρεση, ή την ετικέτα div, και έχω χρησιμοποιήσει μια

99
00:05:31,170 --> 00:05:34,120
Class αποδίδουν στο εσωτερικό
ένα άλλο tag div.

100
00:05:34,120 --> 00:05:37,190
>> ID και Class χαρακτηριστικά
λειτουργούν με παρόμοιο τρόπο.

101
00:05:37,190 --> 00:05:41,210
Η μόνη διαφορά είναι ότι μπορείτε να έχετε μόνο
ένα στοιχείο, η ειδική ταυτότητα, αλλά

102
00:05:41,210 --> 00:05:43,600
οποιοσδήποτε αριθμός στοιχείων
μπορούν να μοιραστούν μια τάξη.

103
00:05:43,600 --> 00:05:47,690
Έτσι, για παράδειγμα, μπορώ να χρησιμοποιήσω την κατηγορία
εικόνα πολλές φορές, αλλά δεν μπορώ

104
00:05:47,690 --> 00:05:50,533
δημιουργήσετε ένα άλλο τμήμα
με την κορυφή ID.

105
00:05:50,533 --> 00:05:54,750
Αν και δεν έχω πάει σε CSS,
σε άλλη γλώσσα που χρησιμοποιείται συνήθως

106
00:05:54,750 --> 00:05:59,700
παράλληλα με HTML, μόλις αρχίσω styling
κώδικά μου με CSS, μπορώ να χρησιμοποιήσω αυτά τα

107
00:05:59,700 --> 00:06:03,730
οργανωτικά χαρακτηριστικά για την επιρροή
την αισθητική της ιστοσελίδας μου.

108
00:06:03,730 --> 00:06:07,600
>> Τα πάντα μέσα στο κορυφαίο τμήμα
θα έχουν παρόμοια προσδιορισμούς ή

109
00:06:07,600 --> 00:06:12,010
άλλη ομάδα της ομάδας Ι σε HTML η
class εικόνα θα μοιράζονται μια παρόμοια εμφάνιση.

110
00:06:12,010 --> 00:06:15,700
Αυτό είναι πολύ πιο εύκολο από ό, τι προσπαθείτε να επεξεργαστείτε
και εικόνων στυλ ή μπλοκ

111
00:06:15,700 --> 00:06:17,690
κείμενο ξεχωριστά.

112
00:06:17,690 --> 00:06:21,480
>> Έτσι, πήγαμε πάνω από τα βασικά για το πώς
να κάνει μια ιστοσελίδα με HTML.

113
00:06:21,480 --> 00:06:25,280
HTML έχει ένα σωρό άλλα χαρακτηριστικά γνωρίσματα επίσης
ότι όταν συνδυάζεται με άλλες γλώσσες

114
00:06:25,280 --> 00:06:29,220
όπως CSS και JavaScript, μπορεί πραγματικά
να κάνουν τις σελίδες ξεχωρίζουν.

115
00:06:29,220 --> 00:06:32,960
Ο καλύτερος τρόπος για να πάρει άνετα με
HTML είναι απλά να βρωμίσει γύρω με αυτό,

116
00:06:32,960 --> 00:06:35,120
να δούμε τι λειτουργεί και τι όχι.

117
00:06:35,120 --> 00:06:36,570
>> Το όνομά μου είναι Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Αυτό είναι CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Έτσι, για παράδειγμα, μπορώ να χρησιμοποιήσω
η εικόνα τάξη -

121
00:06:45,690 --> 00:06:48,028
Όχι, υπάρχουν τόσα πολλά χαρακτηριστικά.

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

123
00:06:52,500 --> 00:06:53,950
Το όνομά μου είναι Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Αυτό είναι το CS 650.

125
00:06:58,560 --> 00:06:59,810
Θέλω να πω CSS.

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

127
00:07:02,325 --> 00:07:03,575
Αυτό είναι CSS.

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