>> [Παίζει μουσική]
David J Malan: Εντάξει, καλώς ήρθατε πίσω.
Αυτό είναι CS50.
Αυτό είναι το τέλος της εβδομάδας επτά.
Και αυτό είναι το τέλος αυτής της οδοκαθαριστής κυνήγι από το πρόβλημα που τέσσερις
ότι μπορείτε να ανακαλέσετε.
Μετά την ανάκτηση όλων των αυτά τα αρχεία JPEG του προσωπικού,
που είχαν προσβληθεί, αν θέλετε, για να φωτογραφίσει τον εαυτό σας με όσες
από εκείνους τους λαούς, όπως μπορείτε.
Πήραμε ένα σωρό παρατηρήσεις κατά τη διάρκεια των τελευταίων εβδομάδων,
Πράγματι, αρκετά δεξιά πριν από το μεσημέρι Σήμερα, μερικά από τα οποία είναι εκείνα που εδώ,
αλιεύονται εδώ in-- φαίνεται like-- Annenberg Hall σε ώρες γραφείου, ένα εδώ
στο σπίτι του Lowell με τον Nick.
Εδώ Ραμόν που αλιεύονται στο τηλέφωνο.
Αυτό ήταν σε ένα γεύμα CS50.
Αυτό ήταν ο Ιάσονας στο skype με μια πιο δημιουργική συμμαθητή,
που του τηλεφώνησα με αυτόν τον τρόπο.
Δεν ξέρω τι ήταν αυτό.
>> [Γέλια]
>> David J Malan: Αλλά ότι αξίζει ένα gigabyte.
Εδώ είναι Chang, ο οποίος κυριολεκτικά έτρεξε από το στάδιο
να αποφύγει να φωτογραφηθεί ένα ημέρα, αλλά τελικά πιάστηκε.
Εδώ είναι ο Νικ.
Και εδώ είναι η Alison κάτω από τα πεδία.
Και Zamyla ακόμη βρέθηκε σε ένα διαγωνισμό χορού.
Έτσι θα πάμε μέσα Αυτές οι φωτογραφίες, να καταλάβω
ο οποίος υπέβαλε την πλέον το νωρίτερο, και ανταμοιβή
ένα υπέροχο βραβείο, όπως υποσχέθηκε στο spec.
Και εμείς, επίσης, θα ακολουθήσει μέχρι περίπου ο χώρος που συμμετείχε.
>> Ένα ζευγάρι των announcements-- έτσι το μεσημεριανό γεύμα είναι, και πάλι, αυτή την Παρασκευή στις 13:15.
Αν θέλετε να ενωθούν μαζί μας, RSVP εκείνη τη διεύθυνση URL εδώ.
Jason εμφανίζεται και πάλι εδώ από ένα των τμημάτων ένα-δύο χρόνια
πίσω, κάτι που συνέβη να πέσει στις Απόκριες.
Και πράγματι, ο ίδιος ντυμένος ως ένα κολοκύθα το συγκεκριμένο έτος.
Αν παρακολουθήσετε αυτή την ενότητα από το 2011 το τμήμα του
οκτώ, αν είστε περίεργοι, σε CS50.tv, νομίζω
Αυτό ήταν το έτος κατά το οποίο αντλία αέρα του δούλευε.
>> Αν στη συνέχεια να παρακολουθήσετε το παρόμοιο τμήμα το 2012,
θα δείτε αυτό το Jason πολύ ξεφουσκώσει, δεδομένου ότι το κοστούμι δεν λειτούργησε,
το οποίο είναι μόνο για να πω αυτή την Παρασκευή, αν θέλετε
ήθελε να χαράξει μια κολοκύθα με Daven και Gabe και τους άλλους, RSVP στα κεφάλια
σε cs50.harvard.edu διεύθυνση.
Υπόσχεται να είναι μεγάλη διασκέδαση.
Daven, μας λένε, έχει χαραγμένη κολοκύθες όλη του τη ζωή.
Γαβριήλ από τη Βραζιλία έχει ποτέ χαραγμένη μια κολοκύθα για το Halloween.
Έτσι είναι εκεί μαζί τους, όπως μαθαίνει.
>> Σεμινάρια, meanwhile-- έτσι θα μάθετε σύντομα
για το ποιες είναι οι προσδοκίες μας είναι για το τελικό σχέδιο, το οποίο κατ 'ουσίαν
θα βράζει κάτω για να το σχεδιασμό και την εφαρμογή
τα περισσότερα από κάθε έργο που παρουσιάζουν ενδιαφέρον για που, αν και υπόκειται στην έγκριση
και καθοδήγηση από τη διδασκαλία τους συναδέλφους σας.
Προς το τέλος του εξάμηνο, έχουμε εισαγάγει έναν αριθμό
των σεμιναρίων, τα οποία είναι προαιρετικά μαθήματα υπό την ηγεσία των υποτρόφων διδασκαλίας και Χάρβαρντ
το προσωπικό, τους φίλους της σε όλη τη διάρκεια πανεπιστημιούπολη, για διάφορα θέματα που
είναι εφαπτόμενο με το υποκείμενη ύλη μαθήματος
αλλά παρ 'όλα αυτά ισχύουν, διασκέδαση, και διαφορετικά για δυνητικούς τελικούς έργα.
>> Για παράδειγμα, το πρώτο, αν θέλετε για να εγγραφείτε, το κεφάλι το URL εκεί.
Και αυτό είναι το lineup για σεμινάρια μόνη φετινή.
Αλλά συνειδητοποιούν έχουμε δεκάδες σεμινάρια από το παρελθόν, το σύνολο των οποίων
συνδέονται στο μενού Σεμινάρια επιλογή της ιστοσελίδας του μαθήματος.
Έτσι, εάν σκέφτεστε για την πέρα από τη ζώνη άνεσής σας
ή μαζεύοντας μερικές νέες δεξιότητες, για παράδειγμα, τον προγραμματισμό iPhone
εφαρμογές με Swift, μια νέα γλώσσα από την Apple ή Objective-C
ή Android apps ή προγραμματισμού [; cue?] λαμπτήρες πυράκτωσης, ή οποιοδήποτε από τα θέματα
εδώ και περισσότερο, λόγω επιταγή από την σελίδα εγγραφής.
>> Έτσι αρχίσαμε και ολοκληρώθηκαν στις Τη Δευτέρα με την εξέταση HTTP.
Έτσι γρήγορη refresher-- HTTP, HyperText Transfer Protocol.
Αλλά τι σημαίνει αυτό στην πράξη;
Τι σημαίνει αυτό στην πράξη;
Είναι ότι ένα χέρι;
Ξέρω ότι είστε ακριβώς το ξύσιμο το κεφάλι σας.
Αλλά θέλετε να προτείνουν τι HTTP είναι;
>> ΚΟΙΝΟ: Πώς υπολογιστές επικοινωνούν με [δεν ακούγεται].
David J Malan: Έχασα το τελευταίο μέρος.
Πώς οι υπολογιστές επικοινωνούν with--
>> Διακομιστές στο Διαδίκτυο: ΚΟΙΝΟ.
David J Malan: Good-- με το διαδίκτυο servers, και συγκεκριμένα, web servers.
Επειδή η ανάκληση, υπάρχει μια δέσμη των υπηρεσιών στο διαδίκτυο, ορισμένες από τις οποίες
μπορείτε να χρησιμοποιήσετε πιθανώς καθημερινά μεταξύ συνομιλία και το μήνυμα, το chat, και το web, και το ηλεκτρονικό ταχυδρομείο,
και τα παρόμοια.
Και HTTP είναι ακριβώς το πρωτόκολλο ότι η web browsers
μιλούν κατά την επικοινωνία με διακομιστές web, και το αντίστροφο.
Και το ανάλογο στο ανθρώπινο κόσμο μπορεί να είναι,
Θα ήθελα να εκφράσω το χέρι μου για να ταρακουνήσει κάποια άλλα ανθρώπινα και αυτός ή αυτή
αναγνωρίζει με την επέκταση του ή το χέρι της, καθώς και.
Έτσι, αυτό είναι απλά ένα πρωτόκολλο, ένα σύνολο των συμβάσεων.
>> Και τι πράγματι είναι αυτές οι συμβάσεις;
Λοιπόν, να αρχίσει να βράζει κάτω για να στέλνοντας μηνύματα εμπρός και πίσω,
όπως απεικονίζεται εδώ.
Και υπάρχει μια-δυο τρόπους με τους το οποίο μπορείτε να στείλετε αυτά τα μηνύματα.
Και ίσως το πιο κοινό είναι γνωστή ως get.
Και θα δούμε μια αντίθεση σε αυτό πριν από καιρό.
>> Αλλά μια αίτηση GET από ένα πρόγραμμα περιήγησης στο διακομιστή μοιάζει με αυτό.
Είναι ένα μάτσο κείμενο που βάζει εσωτερικό ενός εικονικού περιβλήματος.
Στο εξωτερικό του εν λόγω περιβλήματος πάει ένα ζευγάρι κομμάτια των στοιχείων.
Τι χρειάζεται για να πάει για το φάκελο, να το πω έτσι,
προκειμένου να πάρετε μια αίτηση, όπως Αυτό από μένα σε έναν web server;
Ναι.
>> ΚΟΙΝΟ: Η διεύθυνση IP σας.
>> David J Malan: Η διεύθυνση IP μου στο πεδίο Από, να το πω έτσι,
και φυσικά, το IP διεύθυνση του παραλήπτη.
Αλλά στην περίπτωση ενός πακέτου web, χρειαζόμαστε λίγο περισσότερη λεπτομέρεια
Δεν είναι μόνο αρκεί για να στείλετε ένα φάκελο σε ένα διακομιστή,
επειδή αυτός ο διακομιστής θα μπορούσε να είναι ακούγοντας για διαφορετικούς τύπους
της κίνησης στο διαδίκτυο.
Λοιπόν, τι άλλο χρειαζόμαστε Εκτός από την IP του παραλήπτη;
Ναι;
>> ΚΟΙΝΟ: Είναι το TCP;
David J Malan: Καλή.
TCP--
>> ΚΟΙΝΟ: Διεύθυνση.
>> David J Malan: Διεύθυνση, ή το λιμάνι, όπως λέγεται.
Κοντά, αλλά ένας αριθμός θύρας TCP.
Και υπάρχει μια δέσμη από αυτά.
Αλλά σίγουρα η πιο εξοικειωμένοι πρέπει τελικά
είναι 80, το οποίο είναι η προεπιλογή που χρησιμοποιείται για την κυκλοφορία Ιστού.
Και ένα άλλο οικείο ένα σύντομα θα είναι 443,
το οποίο χρησιμοποιείται για την ασφαλή web κυκλοφορίας, διευθύνσεις URL που ξεκινούν με https.
>> Έτσι, αυτό είναι ό, τι συμβαίνει στο εσωτερικό του εν λόγω φακέλου.
Και να πάρει / σημαίνει απλά, δίνουν μου η προεπιλεγμένη ιστοσελίδα.
Δώσε μου τη ρίζα του σκληρού οδηγείτε σε αυτό το web server.
Και ελπίζουμε, το διαδίκτυο server θα απαντήσει με, OK
και τον αριθμό 200, το οποίο είναι ακριβώς μια σύμβαση λέγοντας, ναι, όλα
είναι πράγματι το σωστό.
Εδώ είναι η σελίδα.
Ο τύπος της ιστοσελίδας πρόκειται να να είναι κείμενο, αλλά πιο συγκεκριμένα, HTML,
το οποίο είμαστε έτοιμοι να βουτήξει πίσω στο.
Και το dot dot dot μόνο μέσα, εδώ είναι η HTML.
Και αυτό είναι όπου είμαστε σηκώστε την ιστορία σήμερα,
στην πραγματικότητα γράφοντας HTML, HyperText Markup Language, το οποίο
είναι η γλώσσα στην οποία Οι ιστοσελίδες γραμμένο.
Δεν είναι μια γλώσσα προγραμματισμού.
Δεν υπάρχει καμία λειτουργία ή βρόχους ή όρους.
Είναι μια γλώσσα σήμανσης, καθώς δούμε και πάλι σήμερα,
που σας επιτρέπει να καθορίσετε πώς να δομήσει και να στυλιζάρω
αισθητικά μια ιστοσελίδα.
>> Έτσι, αυτό ήταν το ένα και μόνο σελίδα που πραγματικά
κοίταξε, αν εν συντομία, τη Δευτέρα.
Και παρατηρήσετε μερικά βασικά χαρακτηριστικά.
Υπάρχει μια πολύ ανοιχτή γωνία βραχίονα και στενή γωνία βραχίονα.
Στο μεταξύ εκείνων γωνία παρενθέσεις είναι τα λόγια.
Και θα πάμε να ξεκινήσετε καλώντας αυτές τις λέξεις ετικέτες.
Έτσι, ανοικτή κεφαλή βραχίονα και το κεφάλι κλειστό βραχίονα
είναι τα ανοιχτά και κλειστά ετικέτες, ή οι ετικέτες έναρξης και λήξης
αντίστοιχα, ενός στοιχείου HTML, όπως θα την αποκαλούμε, που ονομάζεται το κεφάλι.
Και ισχύει η ίδια ορολογία στο σώμα σε HTML και ούτω καθεξής.
>> Και τι ωραίο είναι HTML-- και μάλιστα, θα
περάσουν τρομερά λίγο χρόνο σε αυτό, γιατί θα ως επί το πλείστον απλά να καταλάβω
τι δυνατότητες έχει, όταν στην πραγματικότητα έχουν ένα συγκεκριμένο πρόβλημα
να solve-- θα βρείτε ότι ένα πρόγραμμα περιήγησης είναι αρκετά χαζός.
Είναι ακριβώς πρόκειται να do-- δεν σε αντίθεση με α computer-- τι θα πει να κάνουμε.
Και έτσι, όταν έχετε ανοιχτά βραχίονα HTML στην κορυφή
εκεί, ότι κατ 'ουσίαν απλά σημαίνει, hey, πρόγραμμα περιήγησης,
εδώ έρχεται μια ιστοσελίδα γραμμένη σε HTML.
>> Όταν βλέπει ανοιχτό βραχίονα το κεφάλι, που σημαίνει απλά,
hey, πρόγραμμα περιήγησης, εδώ έρχεται το κεφάλι, ή το ανώτατο τμήμα της ιστοσελίδας μου.
Όταν βλέπει ένα κλειστό βραχίονα το κεφάλι, που σημαίνει απλά, hey,
ότι είναι για το κεφάλι.
Αναμονή για κάτι άλλο.
Και αυτό το κάτι άλλο είναι προφανώς πρόκειται να είναι το σώμα.
Και όταν δεν έχετε μια ετικέτα, όπως έχετε μόνο ένα γεια, κόμμα, τον κόσμο,
ότι είναι ακριβώς πρόκειται να είναι πρώτες κείμενο που τελικά εμφανίζεται στην οθόνη.
>> Τώρα, θα παρατηρήσετε πάρα πολύ η οδόντωση εδώ.
Μπορείτε πιθανώς να συμπεράνουμε πώς είμαστε το stylizing.
Κάθε φορά που ανοίγω μια ετικέτα, να το πω έτσι, μου περίπτωση.
Και κάθε φορά που κλείνω μια ετικέτα, εγώ un-παύλα,
παρόμοια στο πνεύμα με άγκιστρα.
Και πέρα ​​από αυτό, είμαι το είδος της χρησιμοποιώντας την κρίση μου.
Παρατηρήστε ότι δεν έκαναν τον κόπο χτύπημα Εισάγετε στο εσωτερικό του εν λόγω τίτλο ετικέτα.
Γιατί;
Λοιπόν, εγώ μόλις αποφάσισε φαινόταν μια λίγο καθαριστικό για μένα, το ανθρώπινο,
όχι μόνο να ενοχλεί το κάνουμε αυτό.
Έτσι και πάλι, δεν υπάρχει κάποια κρίση απαιτεί μόνο
όπως υπάρχει σε C ή σε οποιαδήποτε γλώσσα.
>> Αλλά παρατηρήσετε επίσης ότι αυτή η εσοχή προσφέρεται για ένα νοητικό μοντέλο,
να μην περιπλέξει πάνω από αυτό.
Αλλά ένα δέντρο, σωστά;
Αν νομίζετε ότι ένα web σελίδα, προφανώς γραμμένο
όπως αυτό, ως όμορφα εσοχή με αυτόν τον τρόπο,
μπορείτε σχεδόν να σκεφτείτε την ανοιχτή βραχίονα HTML κλειστό βραχίονα ετικέτα που οριοθετούν
η ρίζα ενός κόμβου, ένα οικογενειακό δέντρο κόμβο στυλ με το στυλ των δέντρων
κοιτάξαμε την περασμένη Παρασκευή.
>> Και πράγματι, έχουμε στη δεξιά εδώ τι θα καλέσετε μια DOM, D-Ο-Μ, το έγγραφο
αντικείμενο μοντέλο, ένα φανταχτερό τρόπο λέγοντας ένα δέντρο που αντιπροσωπεύει την εν HTML.
Και παρατηρήσετε ότι η HTML έχει, θα έλεγα, σαν ένα οικογενειακό δέντρο, δύο παιδιά.
Στα αριστερά είναι το κεφάλι.
Στα δεξιά είναι το σώμα.
>> Και ακριβώς όπως μια ανόητη άσκηση σκέψης, κεφάλι, φυσικά, έχει πόσα παιδιά
σύμφωνα με αυτή τη δομή;
Έτσι, μόνο ένα, title-- και γι 'αυτό έχουμε
το βέλος πηγαίνει από το κεφάλι προς τον τίτλο.
Έτσι είναι σαν εκείνο το πρόσωπο στο οικογενειακό δέντρο είχε μόνο έναν απόγονο.
Και τότε ο ίδιος τίτλος μπορεί να να λέγεται ότι έχουν ένα παιδί πάρα πολύ.
>> Υπενθυμίζεται ότι η HTML που είχε Γεια σας, κόμμα, ο κόσμος από κάτω.
Και έχω απλά να γίνει μέσα σε ένα οβάλ, αντί ενός ορθογωνίου μόνο
να μεταφέρω σημασιολογικά ότι παρόλο είναι ένας κόμβος στο δέντρο, να το πω έτσι,
αυτό είναι το είδος της θεμελιωδώς διαφορετική.
Δεν είναι μια ετικέτα.
Ή, πιο σωστά, δεν είναι ένα στοιχείο.
Είναι απλά ένας κόμβος κειμένου, αν θέλετε.
Αλλά αυτά είναι εντελώς αυθαίρετη ανθρώπινη συμβάσεις.
Αυτό είναι ακριβώς τώρα ο τρόπος μου που αντιπροσωπεύουν αυτό που θα ως αδρανές
καλέστε το έγγραφο.
>> Και, παρεμπιπτόντως, το πράγμα στο το σούπερ επάνω αριστερή γωνία,
ανοικτό στήριγμα θαυμαστικό doc τύπου HTML, αυτό μοιάζει με μια ετικέτα,
αλλά αυτό είναι το ηλίθιο υπόθεση γωνία όπου ότι είναι ακριβώς εκεί, αντιγραφεί και επικολληθεί
να δηλώσουν τα προγράμματα περιήγησης Αυτή είναι η HTML 5 έκδοση.
Ο κόσμος αλλάζει συνεχώς ό, τι το πρώτη γραμμή του κώδικα σε μια σελίδα θα πρέπει να είναι.
Αυτό σημαίνει απλά την έκδοση 5.
Έτσι, δεν είναι αρκετά μοιάζουν με τους άλλους.
>> Εντάξει, έτσι με αυτό είπε, θα εκτιμήσουν τώρα
αυτό αρκετά αυτό το ηλίθιο τατουάζ κάποιος πήρε.
>> [Γέλια]
>> David J Malan: Εντάξει, και τώρα ας πραγματικά βουτιά
να κάνουν κάτι με αυτό.
Θα υπενθυμίσω ότι η τελευταία φορά Άνοιξα τη συσκευή CS50
και έκανα κάτι σαν απλό όσο το άνοιγμα του gedit.
Και έχω αποθηκεύσει το αρχείο, ακόμη και σε desktop-- μου πουθενά special--
ως hello.html.
>> Έτσι, επιτρέψτε μου να κάνω ότι again-- hello.html Enter.
Και τώρα σε αυτό το αρχείο, Πάω να να προχωρήσει και να επαναλάβει ό, τι εμείς απλά
saw-- doc τύπου html Τότε Πάω να κάνει ανοιχτό βραχίονα html κλειστό βραχίονα.
Και στη συνέχεια, Πάω να preemptively ανοίξει και να κλείσει την ετικέτα.
Γιατί;
Ακριβώς γι 'αυτό μην ξεχάσετε αργότερα.
Είναι απλά καλή πρακτική, όπως το άνοιγμα και το κλείσιμο άγκιστρα όλα με τη μία.
>> Και τότε τι ήρθε το επόμενο βήμα;
Μπορείτε να σκεφτείτε το τατουάζ.
>> ΚΟΙΝΟ: Η κεφαλή.
>> David J Malan: Το κεφάλι.
Και στη συνέχεια, εδώ, εγώ είχε τον τίτλο, νομίζω.
Και ο τίτλος ήταν αυθαίρετα, Γεια σας, τον κόσμο κοντά τίτλο.
Και στη συνέχεια, εδώ κάτω, το σώμα, του course-- τότε κλείνουμε την ετικέτα του σώματος.
Και τότε μόνο κάπως πλεονασμό, Είχα το ίδιο πράγμα εδώ κάτω.
>> Γι 'αυτό και ισχυρίζονται ότι αυτή είναι μια ιστοσελίδα.
Αυτό είναι κάτι που θα μπορούσε τώρα ζωντανά στο διαδίκτυο,
μολονότι βεβαίως, είναι κυριολεκτικά που ζουν στην επιφάνεια εργασίας μου τώρα.
Αλλά πράγματι, εάν ελαχιστοποιηθεί το gedit, Θα δείτε στην επιφάνεια εργασίας μου στο εικονίδιό του.
Ακόμη και αν αυτή είναι η συσκευή, θα μπορούσατε να το κάνετε αυτό σε Mac OS
χωρίς TextEdit ή Παράθυρα με το Notepad ακόμη.
>> Και αν πάω μπροστά και διπλό κλικ ότι ακόμη και select-- καλά, ας
δεν επιλέξετε ότι επειδή Chrome δεν είναι το άνοιγμα.
Ας πάμε μπροστά και να ανοίξει Chrome.
Και στη συνέχεια να κάνουμε Command-O για ανοιχτή Και πλοηγηθείτε στην επιφάνεια εργασίας μου
και να ανοίξει το αρχείο.
Αυτό είναι το πώς ερμηνεύει ένα πρόγραμμα περιήγησης HTML, πάνω προς τα κάτω, αριστερά προς τα δεξιά.
Γεια σου, εδώ είναι το πρόγραμμα περιήγησης HTML.
Εδώ είναι το κεφάλι.
Εδώ είναι ο τίτλος.
Εδώ είναι το σώμα.
Και πράγματι, αυτό είναι το πώς καθιστά αυτή την ιστοσελίδα.
>> Αλλά παρατηρήσετε τη διεύθυνση URL.
Κανένας από εσάς θα μπορούσε να σηκώσει αυτό το συγκεκριμένο σελίδα για φορητούς υπολογιστές σας τώρα,
ακόμη και στο εσωτερικό του σας συσκευή μέσω αυτής της διεύθυνσης URL,
επειδή το αρχείο: // δείχνει ότι είναι στην πραγματικότητα στο σύστημα αρχείων μου, σκληρό δίσκο μου,
δεν είναι δικά σας.
Έτσι, αυτό δεν είναι όλα αυτά χρήσιμη.
>> Ας προχωρήσουμε τώρα προς χρησιμοποιώντας μια πραγματική web server.
Και αυτό αποδεικνύεται από τη συσκευή CS50 Είναι κάτι περισσότερο από ένα περιβάλλον όπου
μπορείτε να γράψετε κώδικα C και την κατάρτιση και να τρέχει σαν έχετε κάνει.
Επίσης, έχει διαμορφωθεί από το προσωπικό, που αντιπροσωπεύουν ένα τυπικό web
server που είναι στο διαδίκτυο, μία που θα μπορούσε να πληρώσει για
ή ένα που είναι στο λεγόμενο νέφος.
>> Και τρέχει πρότυπο ελεύθερη ανοικτού κώδικα
λογισμικό, για παράδειγμα, κάτι ονομάζεται Apache, το οποίο είναι ίσως
εξακολουθεί να είναι το πιο δημοφιλές web λογισμικό διακομιστή στον κόσμο
ότι χιλιάδες ιστοσελίδες χρησιμοποιούν σήμερα.
Και αυτό επίσης έχει ακόμη λογισμικού όπως MySQL,
η οποία είναι ένας διακομιστής βάσης δεδομένων ότι θα πάρει τελικά με,
το οποίο είναι μόνο για να πω Μπορώ να ξεκινήσω τη θεραπεία
συσκευής μου ως ένα πλήρες σέρβερ ότι δεν είμαι πληρώνουν για αλλού.
Ζει μόνο για τις δικές μου φορητό υπολογιστή για σκοπό την ανάπτυξη και την ευκολία.
>> Οπότε ας πάμε μπροστά και να να επωφεληθούν από αυτό.
Πάω να πάει μπροστά και ανοίξει ένα παράθυρο τερματικού.
Και Πάω να πάει μπροστά και move-- πραγματικότητα, πρώτα είμαι
πρόκειται να περιηγηθείτε στην επιφάνεια εργασίας μου.
Αν κάνω ls, υπάρχει hello.html.
Και Πάω να πάει μπροστά και να αρχίσετε να χρησιμοποιείτε
ένα νέο κατάλογο έχουμε δεν χρησιμοποιείται πριν από σήμερα.
>> hello.html-- Πάω να μετακινήσετε να ../vhosts για εικονική hosts--
περισσότερα για αυτό το future-- και, στη συνέχεια, σε έναν κατάλογο που ονομάζεται localhost,
το οποίο είναι το παρωνύμιο που έχει δοθεί σε σχεδόν κάθε υπολογιστή, είτε πρόκειται για ένα Mac, PC,
ή Linux υπολογιστή, και στη συνέχεια, ειδικά σε έναν κατάλογο που έχουμε,
το προσωπικό που έχουν ήδη δημιουργηθεί για σας, όταν έχετε κατεβάσει τη συσκευή που ονομάζεται
δημόσια.
Και όπως υποδηλώνει το όνομά του, κάτι Έβαλα σε αυτόν το φάκελο, στη θεωρία,
πρόκειται τώρα να δημόσια, τουλάχιστον για τους ανθρώπους
που έχουν άμεση σύνδεση με τον υπολογιστή μου.
>> Έτσι, τώρα επιτρέψτε μου να πάει μπροστά και κάνει cd με ίδιο κατάλογο
έτσι μπορώ να δω τι είναι συμβαίνει και πληκτρολογήστε ls.
Και πράγματι, αυτή είναι η μόνο πράγμα εκεί.
Έχω ισχυρίζονται τώρα ότι επειδή έχω βάλει αυτό αρχείο hello.html μέσα από έναν κατάλογο
που ονομάζεται δημόσια μέσα του έναν κατάλογο ονομάζεται localhost μέσα από έναν κατάλογο
ονομάζεται vhosts, η οποία χάρη στο προσωπικό CS50
έχει προ-ρυθμιστεί ώστε να είναι η ρίζα του web server σας,
Τώρα μπορώ να κάνω ελπίζω αυτό.
>> Πάω να ανοίξει μια νέα καρτέλα.
Και Πάω να μην πάει στο αρχείο: //.
Πάω να χρησιμοποιήσει πραγματική http / localhost, η οποία
πάλι, είναι το ψευδώνυμο για το δικό μου server.
Και τότε εγώ είμαι πρόκειται να πάει σε ό, τι το όνομα αρχείου, ακριβώς για να είναι σαφές;
Πού είναι αυτή η ιστορία ίσως πάει;
hello.html.
>> Έτσι με άλλα λόγια, θέλω τώρα αυτό είναι το δικό μου υπολογιστή, τη δική μου συσκευή,
σαν να είναι ένα πραγματικό διακομιστή.
Ψευδώνυμο του είναι localhost.
Αλλά σκεφτείτε localhost όπως όπως Facebook.com google.com, οτιδήποτε.
Είναι απλά τοπικό όνομα μου.
Και τότε το τελικό θέλω είναι η ρίζα του σκληρού δίσκου, να το πω έτσι,
ή η ρίζα του web server, ergo το κάθετο και στη συνέχεια,
hello.html το όνομα του αρχείου.
>> Επιτρέψτε μου σμίκρυνση και πατήστε Enter.
Και πράγματι, υπάρχει τώρα ιστοσελίδας μου.
Έτσι είναι ελαφρώς διαφορετική.
Και είναι εξίσου απογοητευτικό.
Αυτή είναι η παλιά έκδοση.
Επιτρέψτε μου να συρρικνωθεί τη γραμματοσειρά πίσω.
Αυτό είναι το παλιό.
Αυτό είναι το νέο.
Αλλά τι είναι θεμελιωδώς συμβαίνει τώρα είναι ότι HTTP που χρησιμοποιείται.
>> Ας κάνουμε αυτό το λίγο πιο σαφής ή, αν θέλετε, λίγο πιο περίπλοκη.
Επιτρέψτε μου να πάω στην κάτω δεξιά γωνία της συσκευής μου.
Και παρατηρήσετε ότι όλα αυτά φορά, έχει υπάρξει ένας αριθμός.
Αυτή είναι η μοναδική διεύθυνση του CS50 συσκευή σας.
Είναι μια ιδιωτική διεύθυνση, όπως υπονοείται από το 172.16,
πράγμα που σημαίνει απλά μόνο σας φυσικά μπορούν να έχουν πρόσβαση σε αυτό το web server.
Τα πάντα είναι τοίχος προστασίας και όμορφα προστατευμένο από το υπόλοιπο
του κόσμου εξαιτίας αυτού αντιμετώπιση.
>> Και τώρα αν παρατηρήσετε αν πάω να Αυτή η διεύθυνση, όχι σε συσκευή μου,
αλλά στο Mac OS-- Πάω να πάει πίσω εδώ.
Αυτό είναι το Mac μου τώρα.
Και τώρα Πάω να ανοίξει Αυτή η έκδοση του Chrome εδώ.
Και Πάω να μεταβείτε στη διεύθυνση http: //172.16.25 / Και ξεχνώ την rest-- 133.
>> Έτσι, Πάω να επισκεφθείτε από το Mac μου ότι η διεύθυνση IP /hello.html Enter.
Και τώρα βλέπω από το Mac μου ότι CS50 συσκευή μου, ο οποίος είναι
Διεύθυνση IP είναι ότι αριθμό, πράγματι συμπεριφέρεται
σαν έναν web server στο διαδίκτυο.
Δεν έχει ένα ωραίο και εύκολο να θυμάμαι το όνομα, όπως Facebook.com,
αλλά αυτό είναι μέσω HTTP Προφανώς, ακόμη και αν Chrome
Είναι το είδος της απλούστευσης του κόσμου για εμάς, αλλά δεν μας δείχνει HTTP.
Αλλά αυτό είναι πράγματι ακριβώς αυτό.
Chrome είναι μόνο εξοικονόμηση κάποια πληκτρολογήσεις αυτές τις μέρες.
Και αυτό είναι που βλέπουμε τώρα.
>> Έτσι, αυτό είναι όλα ωραία και καλά.
Αλλά αυτό είναι ένα αρκετά απογοητευτικό σελίδα.
Επιτρέψτε μου να πάω και να κάνω κάτι τώρα είναι λίγο διαφορετικά.
Έτσι, επιτρέψτε μου να πάω πίσω στο gedit.
Και αντί Γεια σας, κόσμο, ας βάλουμε μια εικόνα.
Και υποστήριξε από before-- επιτρέψτε μου να πάω σε δημόσιο κατάλογο localhost μου.
Και επιτρέψτε μου να πάει μπροστά και να αντιγράψετε ένα σωρό αρχεία από σήμερα
από το φάκελο Dropbox μου σε εδώ.
>> Τώρα αν εγώ τύπου LS, δείτε σε όλα αυτά τα αρχεία
ότι έχω διανέμεται από το ιστοσελίδα του μαθήματος πριν από σήμερα,
ένα εκ των οποίων είναι ακόμη hello.html.
Έτσι, υπάρχει η μία.
Και υπενθυμίζω αυτό το ανόητο ένα από την τελευταία time-- cat.jpg.
Έτσι, επιτρέψτε μου να προσπαθήσω να ενσωματώσετε cat.jpg στο εσωτερικό της ιστοσελίδας μου.
>> Πάω να πάει μπροστά και να κάνει cat.jpg, αποθηκεύστε.
Επιτρέψτε μου να πάω πίσω στο Chrome.
Και επιτρέψτε μου να μεγεθύνετε το γραμματοσειρά και τώρα να φορτώσετε εκ νέου.
Ωχ, όπου έβαλα αυτό;
Standby-- έχω ακόμα την παλιά έκδοση από τον υπολογιστή μου ανοιχτό.
Έτσι, επιτρέψτε μου να πάω σε vhost μου, μου localhost, δημόσιες μου, και hello.html.
Έτσι, τώρα επιτρέψτε μου να πάει μπροστά και λένε cat.jpg εσωτερικό του σώματος
όπου θέλω να είναι εμφανίζονται και να φορτώσετε εκ νέου.
Φυσικά, αυτό δεν είναι σωστό.
>> Γι 'αυτό χρειάζεται να πείτε στον browser ένα μικρό πιο συνειδητά ό, τι θέλω να κάνω.
Απλά πληκτρολογώντας το όνομα είναι προφανώς δεν επαρκεί.
Έτσι, υπενθυμίζουν ότι δεν υπήρχε άλλος ετικέτα, εικόνα, img για συντομία.
Αυτό είναι απλά επειδή οι άνθρωποι Δεν μου αρέσει το είδος πλήρους λέξεις.
Και τότε μπορούμε να κάνουμε source = "cat.jpg".
>> Και τώρα πάω να κάνω ένα πράγμα διαφορετικό εδώ.
Ακόμα κι αν όλα ετικέτες μας έχουν μέχρι στιγμής
είχε αυτή την ιδέα ενός ξεκινήσει ετικέτα και μια ετικέτα τέλους,
ότι στην πραγματικότητα δεν κάνει αίσθηση για μια εικόνα, σωστά;
Μια εικόνα είναι είτε υπάρχει είτε δεν υπάρχει.
Και έτσι οι άνθρωποι έχουν έρθει με μία απλούστερη σύμβαση.
Όταν έχετε ένα tag που μπορεί τόσο αρχίζει και τελειώνει στο ίδιο time--
μπορεί να είναι άδειο, έτσι για να speak-- μόνο να θέσει το κάθετο εσωτερικό της ετικέτας
στο τέλος.
Τώρα, επιτρέψτε μου να πάω πίσω στον browser μου.
Hit Ανανέωση Γαμώτο, κάτι που είναι λάθος.
Έχετε δει πιθανώς αυτό κατά καιρούς στο διαδίκτυο,
ακόμη και αν δεν ήταν το ελάττωμά σας.
Είναι λάθος του web server.
Τι ωδές αυτό φαίνεται να δείχνουν;
Είναι σπασμένα.
Αυτός είναι όπου ανήκει η εικόνα.
Ναι;
>> ΚΟΙΝΟ: Αλλά δεν το κάνει έχουν πρόσβαση στην εικόνα.
>> David J Malan: Δεν κάνει έχουν πρόσβαση στην εικόνα.
Αυτό, ή ακόμα χειρότερα, ίσως δεν υπάρχει ακόμη.
Ας δούμε αν μπορούμε να μην μπορεί να διαγνώσει ότι.
Ανάκληση από την τελευταία φορά ότι, αν στο Chrome, στη συσκευή,
ή ακόμα και στο Mac ή το PC σας, πηγαίνετε στο μενού Developer
και να πάει με τα Εργαλεία για προγραμματιστές επιλογή, η οποία κατά πάσα πιθανότητα έχετε
δεν χρησιμοποιείται πολύ ή ποτέ.
Και αν πάω στο Δίκτυο και επαναλάβετε τη φόρτωση της σελίδας,
ας δούμε πραγματικά στο HTTP αιτήσεις που γίνονται.
>> Μοιάζει hello.html είναι Πράγματι ΟΚ, εξ ου και το 200.
Αλλά cat.jpg είναι 403.
Έτσι δεν είναι ένα 404.
Αρχείο πιθανότατα υπάρχει.
403 σημαίνει απαγορευμένη.
Έτσι, αυτό είναι μια μικρή σύγχυση.
Πάω να πάει πίσω στο τερματικό παράθυρο μου.
Επιτρέψτε μου να μεγεθύνετε μέχρι εδώ.
Και επιτρέψτε μου να κάνω ένα ls.
Υπάρχει αυτά τα ίδια αρχεία.
>> Τώρα, επιτρέψτε μου να κάνω μια ls-l, που έχετε ίσως
χρησιμοποιούνται πριν να δούμε το αρχείο μεγέθη ίσως ή χρονικές σφραγίδες.
Και βλέπουμε ένα σωρό συντριπτική πληροφορίες.
Αλλά παρατηρήσετε μερικές λεπτομέρειες.
Εδώ είναι hello.html σε αυτό σειρά εδώ και εδώ είναι cat.jpg.
Και είναι ακριβώς η συσκευή είναι φιλικό τονίζοντας JPEG του χρήστη
σε μωβ σαν αυτό.
Αλλά τι άλλο είναι διαφορετικό δίπλα το μέγεθος του αρχείου και το όνομα του αρχείου;
>> ΚΟΙΝΟ: [δεν ακούγεται].
David J Malan: Ναι, υπάρχει δύο R είναι εδώ.
Παρατηρήστε τι hello.html έχει συμβαίνει.
Έτσι αποδεικνύεται ότι το όνομα του Αυτό το δημόσιο κατάλογο είναι σημαντικό.
Τίποτα σε αυτόν τον κατάλογο προορίζεται να είναι δημόσια.
Αλλά δεν είναι επαρκής απλά για να ρίξει τα αρχεία εκεί.
Θα πρέπει, επίσης, να αλλάξετε η λειτουργία των αρχείων,
να αλλάξετε τα δικαιώματα του το αρχείο σε προληπτικά δεν
είναι η προεπιλεγμένη ρύθμιση, το οποίο είναι ότι δεν μπορώ παρά να διαβάσει
και το γράφω, που είναι ο ιδιοκτήτης.
Θέλω όλο τον κόσμο όλοι να να είναι σε θέση να διαβάσει το αρχείο μου, να το πω έτσι.
Διαβάστε ακριβώς σημαίνει το δείτε.
>> Και πράγματι, όπως θα δείτε στο πρόβλημα έθεσε επτά, που είναι ό, τι σημαίνουν αυτοί οι Ε του.
Σημαίνουν αυτοί οι δύο R αφήσει ο καθένας αλλού στον κόσμο το διαβάσετε επίσης,
ειδικά τώρα που είναι σε αυτόν τον κατάλογο.
Έτσι, ο απλούστερος τρόπος για να διορθωθεί αυτό είναι να πηγαίνετε στην γραμμή μου και να κάνω chmod για αλλαγή
Λειτουργία και στη συνέχεια να κάνουμε ένα + r, συνολικά, όλοι, όλοι, συν r για ανάγνωση,
και στη συνέχεια cat.jpg Enter.
Τίποτα δεν φαίνεται να συμβαίνει, το οποίο συνήθως σημαίνει ένα καλό πράγμα.
Έτσι ls-l again-- τώρα ας δούμε cat.jpg.
Και αυτή η άδεια φαίνεται να έχουν αλλάξει.
Παρεμπιπτόντως, αν κάνετε ένα λάθος και, για παράδειγμα,
μόλις έκανε your-- δεν know-- δοκίμιο δημοσίως προσβάσιμη από ατύχημα,
μπορείτε να κάνετε το αντίθετο, chmod a-R.
Αν και ειλικρινά, δεν θα πρέπει να να είναι στο δημόσιο κατάλογο
ούτως ή άλλως, αν αυτή είναι η ανησυχία.
>> Έτσι τώρα ας πάμε πίσω στο browser και reload μου.
Και Πάω να κάνετε κλικ το μικρό Ghostbusters
το σύμβολο για να καθαρίσει το μέρος αυτό της οθόνη ώστε να μπορούμε να δούμε νέες αιτήσεις.
Και μάλιστα, εδώ είναι Grump γάτα από πριν.
Αλλά το πιο σημαντικό, τεχνικά, υπάρχει
ο αριθμός 200, η ​​οποία σημαίνει ότι πήραμε το ΟΚ.
Εντάξει, έτσι ώστε να είναι όλα ωραία και καλά.
Αλλά δεν κάνουμε το καλύτερο των δικτυακών τόπων,
ούτε θα πάμε να προσπαθήσουμε πολύ σκληρά για να κάνουν το μοντέρνο των δικτυακών τόπων σήμερα.
Αλλά ας κάνουμε τουλάχιστον κάτι σούπερ εξοικειωμένοι πριν κροτάλισμα
εκτός από μερικές άλλες ετικέτες.
Έτσι υποθέτω ότι δεν θέλουν απλά μια γάτα εδώ.
Ας υποθέσουμε ότι εγώ πραγματικά θέλουν αυτό το γάτα να συνδεθεί με κάτι.
>> Θα μπορούσα, για παράδειγμα, κάνει κάτι τέτοιο.
ένα για την άγκυρα href για υπερ equals-- αναφοράς
και ας κάνουμε κάτι όπως www.google.com κοντά
παραθέσω κοντά βραχίονα.
Και τώρα ψάξετε για γάτες.
Κλείστε άγκυρα ετικέτας.
Έτσι, αυτό έχει μόνο ένα είδος ριζικά νέες λεπτομέρειες.
Η ετικέτα φυσικά, είναι διαφορετική.
Είναι το όνομα για μια άγκυρα href ή υπερ αναφοράς.
>> Αλλά το πιο σημαντικό, δεν υπάρχει Αυτή η συντακτική χαρακτηριστικό εδώ.
Αυτό είναι ό, τι θα αρχίσουμε καλώντας δεν είναι μια ετικέτα, αλλά ένα χαρακτηριστικό.
Και ένα χαρακτηριστικό είναι κάτι που τροποποιεί τη συμπεριφορά μιας ετικέτας.
Και αυτό το χαρακτηριστικό, href, μέσα τροποποιούν τη συμπεριφορά αυτής της άγκυρας
έτσι ώστε όταν κάποιος κάνει κλικ εκεί, πηγαίνει σε αυτό το URL εδώ.
Και, φυσικά, ότι η διεύθυνση URL είναι η Google.
>> Εν τω μεταξύ, τι είναι αυτό κείμενο εδώ πρόκειται να είναι;
Λοιπόν, αυτό πρόκειται να είναι ό, τι η ανθρώπινη πραγματικότητα
βλέπει ως το υπογραμμισμένο σύνδεσμο, τόσο απλό όσο αυτός.
Οπότε ας προσπαθήσουμε αυτό.
Επιτρέψτε μου να το αποθηκεύσετε.
Είμαι ακόμα σε hello.html.
Αλλά στις εκδόσεις σε απευθείας σύνδεση, θα δείτε τα πραγματικά ονόματα των αρχείων που προ-παρασκευασμένα.
Επιτρέψτε μου να προχωρήσει και να φορτώσετε εκ νέου.
Και τώρα είναι μια πολύ απογοητευτικό σελίδα ακόμα.
Αλλά αν αιωρούνται πάνω there-- και είναι λίγο μικρό,
but-- μπορείτε να δείτε στο κάτω μέρος αριστερή γωνία της οθόνης σας,
αυτό είναι πράγματι πρόκειται να google.com.
Και αν εγώ κλικ σε αυτό, θα χτυπήστε ελαφρά με τον τρόπο με την πραγματική της Google.
>> Να σημειωθεί όμως εδώ μια ευκαιρία για εκμετάλλευση, ακριβώς όπως μια άκρη.
Και θα επανέλθουμε σε άλλο θέματα ασφάλειας πριν από καιρό.
Επειδή υπάρχει αυτή η διχοτόμηση μεταξύ όπου μπορείτε να πάτε και τι να σας πω,
θα μπορούσατε να κάνετε κάτι σαν this-- http://www.google.com.
Εντάξει, και τώρα αν μπορώ reload Μετά την αποθήκευση αυτή τη σελίδα,
μοιάζει Πάω να πάει στο Google.
Αλλά δεν υπάρχει κανένας λόγος για τον οποίο Πρέπει να πάτε στο Google, σωστά;
Θα μπορούσα πραγματικά να πάμε σε κάτι σαν badguy.com, επαναλάβετε τη φόρτωση της σελίδας εδώ.
Και ειδοποίηση, εξακολουθεί να μοιάζει με το Google.
Και μόνο αν είμαι απότομη αρκεί να αιωρείται πάνω από εδώ
βλέπω ότι είναι ακόμη πρόκειται να πάει σε μια διαφορετική θέση.
>> Έτσι, αν έχετε πάρει ποτέ Ένα μήνυμα ηλεκτρονικού ταχυδρομείου, ειδικά
ένα από Paypal, ή φαινομενικά από το Paypal
σας ζητά να συνδεθείτε στο λογαριασμό σας, αυτό
Γι 'αυτό δεν πρέπει ποτέ να ποτέ κλικ σε συνδέσεις σε μηνύματα ηλεκτρονικού ταχυδρομείου,
ειλικρινά, οποιεσδήποτε συνδέσεις σε μηνύματα ηλεκτρονικού ταχυδρομείου.
Εάν γνωρίζετε ότι έχετε πραγματική τα χρήματα στο Paypal ή τράπεζα
της Αμερικής ή η Fidelity ή οποιαδήποτε ιστοσελίδα, πληκτρολογήστε χειροκίνητα στο.
Επειδή δούμε πόσο εύκολο είναι να εξαπατήσει κάποιος με την παρουσίαση ό, τι
μοιάζει με ένα σύνδεσμο.
Αλλά στην πραγματικότητα θα μπορούσε να πάνε απολύτως πουθενά.
>> Και υπάρχει πολύ μεγαλύτερη απειλές από αυτό.
Στην πραγματικότητα, αυτό είναι ένα κομμάτι της εφαπτομένης τώρα, αλλά ένα
από τις καλύτερες που έχω δει ποτέ η οποία έκτοτε έχει κλείσει,
είναι κάποιος που οδήγησε τους ανθρώπους to-- έτσι αυτό θα μπορούσε να πει,
κάντε κλικ εδώ για να συνδεθείτε στο σας λογαριασμού, ένα τραπεζικό λογαριασμό.
Και αυτό ήταν η Τράπεζα της Δύσης.
>> Έτσι, κάποιος αγόρασε αυτό.
Και αυτό είναι λίγο πιο εύκολο να δείτε σε ένα μονο απόσταση γραμματοσειράς μεγεθύνεται
μέσα σε ένα προβολέα 30-πόδι.
Αλλά όταν είναι μικρή γραμματοσειρά σε ένα e-mail που λαμβάνετε,
Αυτό μοιάζει bankofthewest.com, Δεν bankofthevvest.com,
το οποίο κάποιος είχε πληρώσει $ 10 για να αγοράσετε.
Και τότε αυτό τους οδήγησε στην ισοδύναμο κάποια κακή ιστοσελίδα.
>> Και θα δείτε too-- πραγματικά μπορούμε να κάνουμε this-- αν πάω στην πραγματική ιστοσελίδα,
bankofthewest.com, και πάλι, ανάκληση από την τελευταία φορά
ότι αν αυτή είναι η ιστοσελίδα τους και είσαι περίεργος για το πώς λειτουργεί,
μπορείτε σίγουρα να πάτε στο Εργαλεία για προγραμματιστές του Chrome.
Και μπορείτε να δείτε όλα τα HTML όμορφα διαμορφωμένη εκεί.
>> Αλλά περισσότερο στο σημείο, μπορείτε cam-- ας κλείσει
this-- μπορείτε να πάτε στο View Προγραμματιστής Προβολή προέλευσης.
Γιατί δεν μπορώ απλά να αντιγράψετε όλα αυτά και στη συνέχεια θα
μπορεί να πάει σε μικρό παράθυρο του gedit μου εδώ και κάνει τη δική μου ιστοσελίδα.
Αποθηκεύστε αυτό το hello.html.
Και ίσως αυτό πρόκειται να σπάσει, γιατί δεν είναι αυτό το εύκολο συνήθως.
Αλλά τώρα, αν έχω reload δική μου σελίδα στο τη δική μου συσκευή CS50 και χτύπησε reload,
Εντάξει, κάποια πράγματα έσπασε.
Αλλά είμαι αρκετά κοντά για να έχουν δική μου τραπεζικό ιστοσελίδα, σωστά;
Όλα αυτά HTML--
>> [Γέλια]
>> David J Malan: --I δεν actually-- και εσείς
Γνωρίζουμε ότι υπάρχει κάποιος εκεί έξω που θα κάνετε κλικ στην πραγματικότητα αυτές τις συνδέσεις πάρα πολύ.
Έτσι, προφανώς, κάποια πράγματα έσπασε.
Αλλά αυτό πρόκειται να οδηγήσει μας σε μια συζήτηση,
άσκοπα τώρα, ως προς το τι CSS, επικαλυπτόμενα φύλλα στυλ, είναι,
και πώς μπορείτε πραγματικά κατεβάστε τα άλλα αρχεία HTML
και αρχεία JPEG αρχεία GIF που θα η ιστοσελίδα μπορεί να χρησιμοποιεί.
Αλλά όλα αυτά είναι κατορθωτός.
Αλλά πραγματικά βράζει κάτω Αυτά τα πολύ απλή ευρετική.
>> Έτσι τώρα ας αποβουτυρωμένο μέσα από μια μερικά άλλα παραδείγματα HTML
ακριβώς για να σας δώσει μια αίσθηση από ό, τι άλλο μπορείτε να κάνετε.
Για παράδειγμα, αυτό είναι list.html.
Ας υποθέσουμε ότι ήθελα να κάνω μια ιστοσελίδα με έναν κατάλογο των σπιτιών στο τετραπλό.
Θα ήθελα να χρησιμοποιήσετε την ετικέτα UL για μη λίστα και, στη συνέχεια, το παιδί στοιχείου λίστας
και στη συνέχεια να επαναλάβει over-- ή λίστα, rather-- τα σπίτια στην ερώτηση.
>> Και αν μπορώ να ανοίξω αυτό επάνω, ας το κάνουμε αυτό.
Ας πάμε να μην hello.html, αλλά να list.html.
Γαμώτο.
Πώς μπορώ να το διορθώσω αυτό;
Είναι το ίδιο θέμα όπως και πριν, σωστά;
Έτσι, επιτρέψτε μου να κάνω chmod-- oops-- chmod a + r του list.html.
Και τώρα, αν πάω πίσω στο πρόγραμμα περιήγησής μου και κάντε κλικ στο κουμπί Ανανέωση, εκεί είναι.
Έτσι, αν έχετε ποτέ ήθελε να κάνει μια λίστα με κουκκίδες, μπορείτε να το κάνετε αυτό.
Αν θέλετε να είστε σούπερ φανταχτερό και να μια διατεταγμένη λίστα, δεν είναι μια μη διατεταγμένη λίστα,
αλλάξετε εκείνους με όλη, επαναλάβετε τη φόρτωση της σελίδας, και τώρα ο browser θα αριθμήσει για εσάς.
>> Τι άλλο μπορούμε να κάνουμε;
Λοιπόν, ένα ζευγάρι των others-- αν έχεις καιρό παραγράφους του text--
για παράδειγμα, ορισμένες Λατινικό κείμενο όπως this--
και θέλετε σε ξεχωριστές παραγράφους, ανοιχτή p, κοντά σ για την ετικέτα παραγράφου.
Και θα το κάνει ξανά και ξανά.
Και αν μπορώ τώρα να ανοίξει αυτό το αρχείο, paragraphs.html, καλά, αυτό
είναι να πάρει ενοχλητικό.
Έτσι τώρα ας πάμε πίσω για να μου προτροπή, chmod a + r r αστέρων .html--
ένα ωραίο μικρό άγρια ​​κάρτα να το πω έτσι.
Θα πρέπει να οριστεί το σύνολο των Τα προβλήματα αυτά για μένα.
Ας reload.
Υπάρχουν τρεις παραγράφους.
>> Και τώρα ας πάμε μπροστά και να ανοίξει ένα άλλο.
Πόσο περίπου τραπέζι;
Θα παρατηρήσετε τον πίνακα εμφάνιση λίγο πιο περίπλοκη.
Αλλά είναι το ίδιο idea-- open tag, open tag,
ανοικτή, ανοικτή, ανοικτή, κοντά ετικέτα, ανοιχτό ετικέτα.
Και αυτά συμβαίνουν για να σταθεί για πίνακας, του οποίου τα σύνορα είναι προφανώς
πρόκειται να είναι ένα πάχος 1-- ανεξαρτήτως ότι η σειρά means-- τραπέζι, τραπέζι
δεδομένων, το οποίο σημαίνει ένα κύτταρο.
Και αν πάω πίσω στο πρόγραμμα περιήγησής μου εδώ και να πάει να table.html,
μπορείτε να δείτε κάτι όπως αυτό, αποτρόπαια.
Αλλά θα φτάσουμε στο σημείο όπου μπορούμε πραγματικά
κάνει τα πράγματα πιο όμορφη από ό, τι αυτό.
>> Έτσι, επιτρέψτε μου να ορίζουν για τώρα.
Υπάρχει τσαμπιά από περισσότερες ετικέτες.
Και HTML είναι υπέροχο να πάρει γιατί, ειλικρινά, το μόνο που χρειάζεται να κάνετε
είναι να εξετάσουμε τις υπάρχουσες ιστοσελίδες με το οποίο είστε εξοικειωμένοι.
Και είστε όπως, OH, αυτό είναι το πώς έκαναν αυτό αισθητικά.
>> Ή μπορείτε να αναζητήσετε οποιοδήποτε σε απευθείας σύνδεση πόρων ως προς το πώς λειτουργεί HTML,
και θα δείτε ότι υπάρχει μια ολόκληρο το λεξιλόγιο άλλες ετικέτες.
Αλλά με το απλό νοητικό μοντέλο και μόνο ότι σχεδόν σε κάθε ετικέτα ανοίγετε
πρέπει να κλείσει, πραγματικά δεν αρκεί για να διδάξει τον εαυτό του
HTML μετά κατανοήσουν Αυτές οι βασικές ιδέες των ετικετών
και τα χαρακτηριστικά και η καλή διαμόρφωση ότι έχουμε μιλήσει για αυτό,
κλείσιμο τίποτα που θα μπορούσαμε να ανοίξει έτσι ώστε να μην συγχέουμε ένα πρόγραμμα περιήγησης.
Έτσι, ας ρίξουμε αυτό να Μια πιο ενδιαφέρουσα επίπεδο
πηγαίνοντας προς την πραγματική.
Και ας πάμε στο Mac μου εδώ, στο google.com.
Και τώρα notice-- ας κάνουμε αυτό.
Είμαι gong να πάει στο Ρυθμίσεις, Ρυθμίσεις αναζήτησης.
Θέλω να απενεργοποιήσετε αυτό το ενοχλητικό στιγμή Αποτελέσματα πράγμα όπου αμέσως
αρχίζει να ανταποκρίνεται στην πληκτρολόγηση σας.
Ας κάνουμε αυτό το παλαιότερο σχολείο έτσι μπορούμε πραγματικά να δούμε τι συμβαίνει.
>> Έτσι, Πάω να σώσει μου Ρυθμίσεις Google εδώ.
Και τώρα notice-- Πάω να αναζήτηση για κάτι σαν τις γάτες.
Και αυτό είναι ακόμα κάνει αυτόματη πλήρεις εδώ, αλλά βασίζεται σε πράγματα
οι άνθρωποι έχουν πληκτρολογήσει στο παρελθόν.
Αλλά παρατηρήστε τι πρόκειται να συμβεί.
>> Στη διεύθυνση URL αυτή τη στιγμή είναι αυτό, μόνο για το google.com.
Και από τεχνική άποψη, αυτό είναι κάθετος.
Το Google είναι μόνο εξοικονόμηση ένα χαρακτήρα και δεν μας το δείχνει.
Μας παρουσιάζουν https, απλά να είναι εξαιρετικά καθησυχαστικό το γεγονός ότι είμαστε
σε μια ασφαλή ή κρυπτογραφημένα σελίδα.
>> Έτσι, επιτρέψτε μου να πάει μπροστά και να ψάξετε για τις γάτες.
Τώρα αυτό πήρε πραγματικά συντριπτική γρήγορα.
Κοιτάξτε το μήκος αυτής της διεύθυνσης.
Αλλά αποδεικνύεται ότι τα περισσότερα από αυτά τα πράγματα στο URL είναι στην πραγματικότητα αρκετά άχρηστο.
Πάω να ξεκινήσει τη διαγραφή πράγματα που δεν καταλαβαίνω.
Βλέπω γάτες.
Καταλαβαίνω τις γάτες.
Δεν ξέρω γιατί οι γάτες είναι και πάλι εκεί.
Πραγματικά δεν ξέρω τι αυτή η ανοησία είναι.
Έτσι, είμαι απλώς πρόκειται να κρατήσει την προβολή και τη διαγραφή πράγματα
ότι δεν καταλαβαίνω, απόσταξη του URL σε ακριβώς αυτό.
>> Τώρα, επιτρέψτε μου να εισέλθουν και πάλι.
Μοιάζει με το Google εξακολουθεί να λειτουργεί.
Έτσι, για κάποιο λόγο, από όπου και αν την προσθήκη ενός πολλά πράγματα από προεπιλογή URL τους.
Αλλά αυτό δεν είναι απολύτως απαραίτητο.
Έτσι τι είναι ωραίο για αυτό;
Λοιπόν, επιτρέψτε μου να πάει μπροστά και ανοίξει Επιθεωρητής του Chrome.
Υπάρχει ένα μικρό συντόμευση ποντικιού για αυτό.
>> Πηγαίνετε στην καρτέλα Δίκτυο.
Και τώρα επιτρέψτε μου να φορτώσετε εκ νέου Αυτή η σελίδα για μια ακόμη φορά.
Και κρατάω Shift.
Παρεμπιπτόντως, προγράμματα περιήγησης τείνουν να αποθηκεύουν προσωρινά ή να αποθηκεύσετε
πληροφορίες μόνο για χάρη της αποτελεσματικότητας του.
Αλλά συνήθως, κρατώντας το Shift και επαναφόρτωση θα αναγκάσει τα πάντα
για να ξεκινήσετε από την αρχή από την αρχή.
Και αυτό είναι που θέλω να κάνω εδώ.
>> Και παρατηρήσετε όλα αυτά σειρές που μόλις εμφανίστηκε.
Αποδεικνύεται ότι σε κάθε δεδομένη διαδίκτυο σελίδα, θα μπορούσε να υπάρχει μόνο ένα αρχείο
involved-- hello.html-- ή εκεί μπορεί να είναι 52, όπως στην προκειμένη περίπτωση.
Όταν επισκεφθείτε google.com, προφανώς, ο φυλλομετρητής μου
ξεκινά 52 ξεχωριστές αιτήσεις HTTP.
Γιατί συμβαίνει αυτό;
>> Λοιπόν, να δούμε τι είναι μέσα αυτής της ιστοσελίδας επάνω στην κορυφή.
Δεν υπάρχει μόνο το κείμενο, αλλά υπάρχει πραγματική εικόνες
γάτες πάνω προς τα δεξιά.
Υπάρχει ένα πολύχρωμο λογότυπο επάνω εδώ στα αριστερά.
Υπάρχουν όλα αυτά τα εικονίδια για ένα μικρόφωνο και ούτω καθεξής.
Υπάρχουν πολλά κομμάτια, κτίριο μπλοκ, κομμάτια μηδέν, αν θέλετε,
σε αυτή την ιστοσελίδα.
Και αυτό το πρόγραμμα περιήγησης κάνει πάνω να πάρει το πρώτο αρχείο, το οποίο
Είναι αυτή η γραμμή εδώ, είναι κατ 'ουσίαν επανάληψη πάνω από την κορυφή HTML
προς τα κάτω, αριστερά προς τα δεξιά, ψάχνει για πράγματα όπως ετικέτες εικόνας ή άλλες ετικέτες
που είναι να αναφερθεί άλλα αρχεία και όταν τους βλέπει, πάει και τους φέρνει
μέσω HTTP, βιώσιμη σύνολό μεταφορά φακέλου,
και στη συνέχεια να τα εμφανίζει στην κατάλληλη τοποθεσία στην ιστοσελίδα.
>> Αλλά παρατηρήσετε εδώ, αν έχω επικεντρωθεί στην οι πρώτες γάτες ρίξει, αναζήτηση,
παρατηρήσετε ότι, πράγματι, είναι χρησιμοποιώντας το HTTP 1.1.
Και, δυστυχώς, η Google Chrome τώρα στην έκδοση 39
Είναι το είδος της dumbing πράγματα κάτω και δεν μας δείχνει τις πραγματικές κεφαλίδες.
Αλλά τι ήταν πράγματι έστειλε είναι ένα αίτημα για να μην περικοπούν, αλλά / αναζήτησης; q = γάτες.
>> Τώρα, γιατί είναι αυτό σημαντικό;
Λοιπόν, Πάω να συμπεράνουμε από αυτό ότι αν η Google
υποστηρίζει ερωτήματα αυτής της μορφής, γιατί Δεν μπορώ να εφαρμόσουν τη δική μου αναζήτηση
κινητήρα για CS50, αλλά μόνο το μπροστινό μέρος τέλος, μόνο η γραφική διεπαφή χρήστη.
Και εμείς θα αναθέσουν το πίσω άκρο, η πραγματική αποτελέσματα αναζήτησης στο Google.
>> Λοιπόν, πώς μπορώ να κάνω αυτό;
Λοιπόν, επιτρέψτε μου να πάω σε gedit εδώ.
Και επιτρέψτε μου να πάει μπροστά και να ανοίξει μέχρι, ας πούμε, ένα νέο αρχείο.
Και Πάω να σώσει αυτό προσωρινά η αναζήτηση-0.html.
Και στη συνέχεια, τελικά, θα γρήγορα προς τα εμπρός για το ένα μου προ-παρασκευασμένα.
>> Και Πάω να γρήγορα μαστίγιο μέχρι τύπου doc
html ανοικτό στήριγμα html κοντά βραχίονα html.
Στη συνέχεια, Πάω να κάνω το κεφάλι στενή κεφαλή CS50 ανοιχτό τίτλο
Αναζήτηση αντί της αναζήτησης της Google.
Εδώ κάτω Πάω να έχουν το σώμα, κάτω εδώ κοντά σώματος.
Και τώρα χρειάζομαι CS50 αναζήτησης.
Και πραγματικά, ας οικοδομήσουμε αυτό σταδιακά.
Πάω να προχωρήσει και να κλείσει αυτό και πραγματικά να το θέσω σε δημόσιο κατάλογο μου.
Έτσι, δώστε μου μόνο μια στιγμή.
αναζήτηση-0.html-- Πάω να χρονικά αποκαλούν search.html.
Πάω να το chmod a + r search.html.
Και τώρα πάω να το ανοίξετε.
Εντάξει, έτσι ώστε να ήταν γρήγορη.
Αλλά ο στόχος ήταν απλά για να μας πάρει στο σημείο
έχουν αυτό το κείμενο αρχείο που ονομάζεται search.html.
Έτσι, δεν έχουν και πολλά να δούμε ακόμα.
Πράγματι, αν πάω στον browser μου, και πάει να search.html, αυτό είναι όλο.
Αλλά ξέρετε τι;
Μπορώ να είμαι λίγο πιό φανταχτερό.
Διάβασα σε ένα βιβλίο ότι δεν υπάρχει μια ετικέτα κλάσης ονομάζεται h1.
Και Πάω να πάει μπροστά και χρησιμοποιεί το εν λόγω ανοικτό h1 και κοντά h1.
Ανανέωση της σελίδας.
Και τώρα είναι η μεγαλύτερη και πιο τολμηρή, δεν είναι όλα αυτά ενδιαφέροντα,
αλλά τουλάχιστον δομικά πιο ενδιαφέρουσα.
Τώρα, όμως, επιτρέψτε μου να εισαγάγει μια άλλη ετικέτα.
Αποδεικνύεται ότι υπάρχει μια ετικέτα μορφή.
Και επιτρέψτε μου να κλείσει αυτή την ετικέτα.
Και αυτό αποδεικνύεται εκεί για μια ετικέτα εισόδου που
έχει ένα χαρακτηριστικό που ονομάζεται τύπου, το οποίο είναι ο τύπος δεδομένων του πεδίου,
αν θέλετε.
Και πρόκειται να είναι του τύπου κειμένου.
Και η αξία του θα να είναι CS50 αναζήτησης.
Κλείστε ετικέτα.
Και εκεί πρόκειται να είναι καμία έννοια του το άνοιγμα και το κλείσιμο με ξεχωριστές ετικέτες.
>> Επιτρέψτε μου να επανέλθω εδώ και δείτε τι συμβαίνει, φορτώσετε εκ νέου.
Να πάρει ενδιαφέρουσα.
Μοιάζει σαν να είναι ένα πεδίο κειμένου.
Και στην πραγματικότητα, δεν ήθελα να θέσει μια τιμή εκεί ακόμα.
Επιτρέψτε μου να επιστρέψω εδώ και πραγματικά να πάρει απαλλαγούμε από αυτή την τιμή για να κρατήσει το απλό.
Αντί της αξίας, αυτό που ήθελα για να δώσει αυτό το πράγμα ήταν ένα όνομα.
Και δεν ξέρω τι είναι, γι 'αυτό θα επανέλθω σε αυτό.
>> Αλλά κάτω από αυτό, θέλω να κάνουμε input type = υποβάλει.
Και αυτή η τιμή θα είναι CS50 αναζήτησης.
Και θα δείτε γιατί αναπτύσσει την αξία σε αυτό.
Όταν φορτώσετε εκ νέου, φαίνεται να έχω τώρα οι απαρχές της δικής μου αναζήτησης
κινητήρα, σούπερ ειδεχθή, αν και ειλικρινά, είναι
δεν είναι μια πολύ αναπνοής από ό, τι Προεπιλεγμένη σελίδα της Google μοιάζει.
>> Αν πάω εδώ τώρα, μπορώ να πληκτρολογήσετε γάτες και ελπίζουμε κάντε κλικ στο Αναζήτηση.
Αλλά δεν είμαι αρκετά γίνει ακόμα, γιατί δεν έχουν εφαρμοστεί,
Προφανώς, μια βάση δεδομένων.
Δεν έχω ανιχνεύσει το διαδίκτυο για τα αποτελέσματα αναζήτησης.
Γι 'αυτό χρειάζεται να αναθέσουν ότι στο Google.
Λοιπόν, πώς μπορώ να το κάνω αυτό;
>> Λοιπόν, πρώτα απ 'όλα πρέπει να προσθέσετε και δράση
αποδίδουν σε μορφή tag μου ότι είναι http://www.google.com/search.
Και ξέρω ότι μόνο από το να έχουν προκύπτει από την εξέταση εκ του σύνεγγυς
στο URL τους.
Και τώρα να λάβει μια εικασία.
Τι θα πρέπει αυτό το πεδίο κειμένου πιθανώς να κληθεί, με βάση το πού ήρθαμε
από πριν;
>> ΚΟΙΝΟ:? Q.
>> David J Malan:? Q.
Και δεν χρειαζόμαστε πραγματικά ερώτηση σηματοδοτήσει αποδεικνύεται, αλλά το q είναι πράγματι,
q για το ερώτημά πιθανότατα από προεπιλογή, μόνο και μόνο επειδή αυτό είναι
τι ο Larry και ο Sergey ήρθε με τα χρόνια.
Έτσι τώρα επιτρέψτε μου να φορτώστε ξανά αυτήν τη σελίδα.
Δεν φαίνονται όλα αυτά διαφορετικά.
Αλλά τώρα δείτε τι συμβαίνει.
>> Αν πληκτρολογήσετε γάτες και κάντε κλικ CS50 Αναζήτηση και να αφήσει να πάει,
παρατηρήσετε παίρνω χτυπημένα μακριά την πραγματική της Google.
Τώρα, η Google είναι μια μικρή ενοχλητικό το ότι είναι
προσαρτώντας μια πρόσθετη παράμετρο, αν θέλετε, στη διεύθυνση URL.
Αυτό είναι όλο δρώμενο αυτόματα από την πλευρά της Google.
>> Το σημαντικό στοιχείο είναι ότι μου φαίνεται να έχουν δημιουργήσει αυτό το αίτημα εδώ.
Και πράγματι, αυτό είναι ό, τι συμβαίνει.
Όταν έχετε HTML που μοιάζει με αυτό, αυτό
Είναι το είδος των web developers σημειογραφίας για το ρητό, να προχωρήσει και να δημιουργήσετε μια φόρμα
ότι όταν έχει υποβληθεί, πρόκειται να πάει σε αυτό το URL.
Και όταν η διεύθυνση URL έχει παράσχει τιμές για τα πράγματα όπως q,
δεν πηγαίνουν ακριβώς σε αυτό το URL.
Στην πραγματικότητα, πηγαίνετε στην ερώτηση σήμα και, στη συνέχεια, q = γάτες.
Προσάρτηση την παράμετρο, η Παραμέτρου HTTP σαν αυτό.
>> Και ακριβώς για να είναι εξαιρετικά ακριβή, τι να συναχθεί here--
αλλά θα είμαι πιο explicit-- είναι ότι η μέθοδος που θέλετε να χρησιμοποιήσετε
είναι να πάρει, αντί για κάτι σαν υστέρων, το οποίο θα τελικά να δούμε.
Έτσι, με λίγα λόγια, απλά με την κατανόηση HTML και χρησιμοποιώντας μερικές αρκετά απλή ετικέτες,
μπορούμε τώρα να αρχίσουμε να δημιουργούμε τη δική μας μπροστά τελικό χρήστη
διεπαφή με ένα αναζήτηση κινητήρα πίσω από αυτό.
>> Αλλά αυτό, φυσικά, είναι αρκετά φρικτή.
Έτσι, επιτρέψτε μου να πραγματικά να ανοίξει μια ελαφρώς καλύτερη έκδοση.
Αυτό είναι το ένα που παρασκευάζεται στο εκ των προτέρων ότι έχει κάποια σχόλια.
Αλλά θα δείτε ότι έχω λίγο πολύ να ανασυνταχθεί.
Έτσι, αυτό είναι ήδη διαθέσιμα στο διαδίκτυο.
Και εγώ έτυχε να preemptively πηγαίνετε στο https μόνο για να κρατήσει το απλό.
>> Και τώρα ας ανοίξει ένα επόμενη επανάληψη αυτού.
Είναι η έκδοση 1, αντί του 0.
Τι πηδά έξω σε σας ως ελαφρώς διαφορετικά σε αυτό το παράδειγμα;
>> ΚΟΙΝΟ: [δεν ακούγεται].
>> Ναι, υπάρχει αυτό το κείμενο Κέντρο Στοίχιση.
Αυτό είναι λίγο περίεργο μέχρι εδώ.
Αλλά αυτό είναι πράγματι νέα.
Και ίσως να μαντέψετε τι πρόκειται να συμβεί.
Αν πάω στο πρόγραμμα περιήγησής μου τώρα και να επισκεφθείτε αναζήτηση-1.html,
είναι σχεδόν το ίδιο πράγμα.
Αλλά αυτό είναι ένα βήμα πιο κοντά στην είναι λίγο πιο όμορφη.
Είναι ακόμα άσχημο, αλλά πιο όμορφη από το γεγονός ότι τουλάχιστον ό, τι είναι τώρα επικεντρωμένη.
>> Έτσι αποδεικνύεται ότι αυτό που είμαι με τη χρήση είναι μια άλλη γλώσσα εντελώς ονομάζεται
CSS, επικαλυπτόμενα φύλλα στυλ.
Και CSS, ειλικρινά, είναι το είδος της, κατά την προσωπική μου γνώμη,
μια atrociously σχεδιασμένη γλώσσα.
Είναι πολύ ενοχλητικό να θυμόμαστε όλες οι διάφορες λεπτομέρειες.
Αλλά αυτό είναι ό, τι stylizes η ολόκληρο το παγκόσμιο ιστό σήμερα.
Έχω προσβεβλημένος κάποιος.
Εντάξει.
Έτσι, ας πάμε πίσω και να δω πώς είμαστε στην πραγματικότητα, χρησιμοποιώντας αυτή.
Και αποδεικνύεται, τουλάχιστον είναι πραγματικά μια πολύ απλή γλώσσα.
Είναι απλά βασικά ζευγάρια αξίας, ακίνητα και τις αξίες, τις ιδιότητες και τις αξίες.
Πράγματι, εδώ είναι ένα τέτοια περιουσία και αξία.
>> Απλά χρησιμοποιώντας το στυλ αποδίδουν στην ετικέτα το σώμα μου
και του δίνει μια αξία από ένα λέξη του παχέος εντέρου και μια άλλη λέξη,
ή μια ιδιότητα και μια τιμή, Ι μπορεί να επηρεάσει την αισθητική
της ιστοσελίδας, δεν αναγκαστικά η δομή ακόμα,
αλλά η αισθητική του.
Και μόνο από Googling γύρω, συνειδητοποιώ ότι τα φύλλα CSS, το στυλ με υπερχείλιση,
υποστηρίζει μια ιδιότητα που ονομάζεται text-align, η αξία των οποίων μπορεί να
να αριστερά, δεξιά ή στο κέντρο, για παράδειγμα.
>> Έτσι τώρα όταν reload Αυτή η σελίδα, τι είχα πάρει
Ήταν μια επικεντρωμένη σελίδα, αλλά εξακολουθεί να είναι αρκετά άσχημο.
Ας πάμε μπροστά και να ανοίξει μέχρι την έκδοση 2 της αναζήτησης.
Και τώρα παρατηρήσετε έχω κάνει λίγο περισσότερο.
Παρατηρήστε ότι εδώ στο εσωτερικό της κεφαλής ετικέτα, μπορεί να υπάρχουν περισσότερα από τον τίτλο.
Στην πραγματικότητα, υπάρχει μια ετικέτα στυλ.
Και αυτό είναι όπου παίρνει μόνο ένα λίγο βρώμικο βλέπουμε CSS μερικές φορές.
>> Ανακοίνωση που φαίνεται να έχω κάτι ότι δομικά μοιάζει πολύ διαφορετική.
Αλλά εδώ είναι το όνομα του η ετικέτα που θέλω να στυλιζαρισμένο.
Εδώ είναι παλιοί φίλοι μας σγουρά τιράντες και κλειστό σγουρά κηδεμόνα.
Και τότε εδώ είναι ότι ιδιοκτησίας και την αξία του.
>> Αν φορτώσετε αυτό το αρχείο, search2.html, Το τελικό αποτέλεσμα είναι το ίδιο.
Αλλά αυτό είναι ένα βήμα προς την καλύτερη σχεδίαση.
Με factoring αυτό το CSS, έχω δεν θα ανακατευτούν με HTML μου.
Και πράγματι, όπως θα δούμε, θα μπορούσα επαναχρησιμοποίηση αυτών των ιδιοτήτων και των αξιών.
Αν ήθελα να κάνω ματσάκια τμήματα της ιστοσελίδας μου στο κέντρο,
Δεν έχω να πληκτρολογήσετε style = text-align κέντρο σε όλη τη χώρα.
Μπορώ να βάλω σε ένα μέρος ίσως, ήθελε επάνω στην κορυφή.
>> Αλλά ακόμη και αυτό δεν είναι η καλύτερη σχεδίαση.
Στην πραγματικότητα, ένα από τα πράγματα που θα μάθετε καθώς περνούν όλο και περισσότερο χρόνο με
web προγραμματισμό είναι ότι το περισσότερο που μπορείτε να διαμορφώστε τα πράγματα και παράγοντας τα πράγματα έξω
όπως .h αρχεία ας παράγοντα πράγματα έξω, ήθελε helpers.c ας παράγοντα πράγματα έξω
πριν από λίγες psets.
Ομοίως, θα μπορούσαμε να θέλουν να επιτύχουν αυτό.
>> Έτσι παρατηρούμε στην έκδοση τρεις από search.html έχω
καθαριστεί ο επικεφαλής της η σελίδα και απλά βάλτε
σε αυτό, μια ετικέτα συνδέσμου, η οποία αντιθέτως προς το όνομα,
δεν σας δώσει μια υπερ-σύνδεση.
Συνδέει σε ένα άλλο αρχείο από τον τρόπο της ένα href η αξία των οποίων στην περίπτωση αυτή,
είναι η αναζήτηση-3.css
Έτσι αντιλαμβάνομαι θα πάμε γρήγορα.
Όμως, όλα τα κάνω είναι είδος της κινείται γύρω από τα πράγματα.
Επιτρέψτε μου ανοιχτό αναζήτησης 3.css.
Εκεί είναι, τίποτα πραγματικά για αυτό.
Απλώς αντιγραφεί και επικολληθεί σε ένα νέο αρχείο, όπως και εμείς συνυπολογίζονται πράγματα έξω
σε άλλα αρχεία πριν.
Και η result-- εντελώς underwhelming--
πρόκειται να είναι ακριβώς το ίδιο.
Αλλά είμαστε διακινούνται toward-- Όχι, δεν είναι.
Ω, ξέρω γιατί.
>> Έτσι φαίνεται να είναι ένα bug.
Και αυτό είναι κατά κάποιο τρόπο.
Αλλά επιτρέψτε μου να ανοίξει την καρτέλα μου στο Δίκτυο.
Επιτρέψτε μου να επαναλάβετε τη φόρτωση της σελίδας.
Αχ, γιατί είναι το CSS δεν εφαρμόζεται;
Λοιπόν, το αρχείο CSS, ομοίως, έχει για να δοθεί άδεια, να το πω έτσι.
Και είναι πάρα πολύ αυτή τη στιγμή απαγορεύεται.
Έτσι, επιτρέψτε μου να κάνω ένα chmod a + r της αστέρι dot CSS-- whoops--
είμαστε dot CSS είναι ακριβώς η επέκταση αρχείου για αρχεία CSS.
Τώρα, επιτρέψτε μου να πάω πίσω για να browser και reload μου.
Εντάξει, είναι λίγο καλύτερα.
>> Τώρα, επιτρέψτε μου να κάνω ένα τελευταίο πράγμα.
Σε αναζήτηση-4.html.
Έχω μια έκδοση που μόλις σκέφτηκα ήταν δροσερό τρόπο, αν και πολύ πιο
περίπλοκη.
Ας δούμε το πρώτο αποτέλεσμα.
Κλείστε αυτό να μας δώσει περισσότερο χώρο.
Αλλάξτε αυτή την αναζήτηση-4, Enter.
>> Και τώρα ένα σωρό πράγματα είναι σπασμένα.
Πάω να πάει πίσω σε κατάλογο μου εδώ.
Και τώρα είμαι απλώς πρόκειται να κάνουμε ένα chmod a + r σε file--
γιατί ξέρω ότι exists-- ονομάζεται logo.gif, η οποία είναι μια εικόνα.
Και τώρα να φορτώσετε εκ νέου.
Και wow-- έτσι τώρα είμαι πολύ κοντά, ειλικρινά,
να αρέσει η έκδοση του Google το 1999, και ειλικρινά, η έκδοση του Google το 2014,
σωστά;
>> Γι 'αυτό που συμβαίνει σήμερα στην ιστοσελίδα τους, τελικά, αν μπορώ να ψάξω για τις γάτες.
Και πράγματι είναι.
Αλλά τι έκανα με διαφορετικό τρόπο σε αυτή την έκδοση 4;
Γι 'αυτό και δεν θα σταθώ πάρα πολύ σε αυτό εδώ.
Θα δείτε αυτό το πρόβλημα έθεσε επτά τελικά.
Αλλά παρατηρήσετε έκανα μερικά πράγματα.
>> Έχω εισήγαγε ένα div ετικέτα, η οποία είναι η διαίρεση,
παρόμοια στο πνεύμα με μια ετικέτα παραγράφου.
Αλλά μια διαίρεση είναι ακριβώς όπως, εδώ είναι ένα ορθογώνιο αόρατη περιοχή
της οθόνης.
Ας δώσει μια μοναδική αναγνωριστικό, ένα υποσέλιδο, απλά
έτσι ώστε να μπορούμε να μιλήσουμε για είναι σε μορφή HTML μας αλλού.
Εδώ είναι ένα άλλο div της σελίδας του οποίου η ταυτότητα δεν πρόκειται να είναι το περιεχόμενο.
Είναι το περιεχόμενο της σελίδας.
Και εδώ είναι η επικεφαλίδα της σελίδας.
>> Με άλλα λόγια, έχω ουσιαστικά σε HTML είμαι διανοητικά
την προβολή αυτής της ιστοσελίδας, όπως τρεις συνιστώσες, μια κεφαλίδα
μέχρι εδώ με αυτό το αόρατο τετράγωνο, το περιεχόμενο στη μέση, και στη συνέχεια
το υποσέλιδο κάτω κάτω, ακόμα και αν και δεν βλέπουμε αυτά τα πράγματα.
Επειδή θέλω να το κεφάλι μου σελίδα εδώ, ή σε ένα αρχείο .css,
Μπορώ να χρησιμοποιήσω αυτήν τη σύνταξη.
>> Header δεν είναι μια ετικέτα.
Είναι ένα αναγνωριστικό έτσι αποδεικνύεται ότι με τον τρόπο #header,
Μπορώ να ισχύουν πλέον μία ή περισσότερες ιδιότητες στην κεφαλίδα.
Μπορώ να κάνω το ίδιο περιεχόμενο, η ίδια για το περιεχόμενο εδώ.
>> Έτσι, για παράδειγμα, στο κάτω μέρος της σελίδας, προειδοποίηση όλες αυτές οι ιδιότητες είμαι προσθέτοντας.
Και ξέρω ότι υπάρχουν μόνο από την ανάγνωση up σχετικά με την τεκμηρίωση για CSS.
Μέγεθος γραμματοσειράς πρόκειται να είναι smaller-- έτσι κάποια σχετικό μέγεθος της γραμματοσειράς.
Το βάρος θα είναι τολμηρή.
Margin-- πόσα εικονοστοιχεία γύρω it-- είναι 20 pixels.
Και αυτό πρόκειται να είναι στο κέντρο.
>> Αλλά τώρα, η σελίδα μοιάζει με αυτό.
Αν δεν είμαι ευχαριστημένος με αντίγραφο μου εκεί,
Θα μπορούσα να κάνω κάτι σαν κόκκινο χρώμα.
Και τότε μπορώ να σώσω αυτό, φορτώσετε εκ νέου, και τώρα έχω στυλιζαρισμένο το υποσέλιδο.
Έτσι, αυτό είναι ακριβώς υπαινίχθηκε στην εξουσία από ό, τι μπορείτε να κάνετε σε μια ιστοσελίδα
για να αλλάξουμε τα πράγματα γύρω.
>> Και ακόμη πιο δροσερές από αυτό, αν θέλετε να σακί γύρω με πραγματικές ιστοσελίδες,
δεν μπορείτε να αλλάξετε τους μόνιμα.
Αλλά αν έχω ανοίξει Επιθεωρητής του Chrome και πάλι
και εγώ δεν πάω στην αριστερή πλευρά εδώ, το οποίο δείχνει HTML του Facebook,
αλλά εμφανίζεται στη δεξιά πλευρά όλων των CSS της,
Μπορείτε είτε να και αλλάξουν τα πράγματα σχετικά με τη μύγα.
Έτσι, επιτρέψτε μου να προχωρήσει και να το κάνουμε αυτό.
>> Επιτρέψτε μου να πάει μπροστά και ελέγχου κάντε κλικ σε αυτό το τυχαία λέξη εδώ,
υπογράψουν, και κάντε κλικ στο κουμπί Έλεγχος Στοιχείων.
Chrome άλματα πολύ βολική για να η ετικέτα H1 ότι το Facebook χρησιμοποιεί.
Και παρατηρήσετε εδώ Facebook έχει το είδος των νωχελικά
σκληρό κωδικοποιούνται μέγεθος γραμματοσειράς ως ιδιοκτησία εδώ.
>> Έτσι, το δροσερό πράγμα όμως είναι ότι αν μπορώ πραγματικά να πάμε εδώ
και να πω, ω, το Facebook, δεν μου αρέσει ότι 64 pixels, μπορούμε τώρα να αλλάξουμε το Facebook.
Φυσικά, είμαστε μόνο αυτό αλλάζει για μένα προσωπικά αυτή τη στιγμή.
Αλλά αυτό είναι μόνο μια άλλη εργαλείο στην εργαλειοθήκη μας
ότι πρόκειται να μας επιτρέψει να τσιμπιά και να καταλάβω και να διαγνώσουν
θέματα στις δικές μας ιστοσελίδες.
Και θα μπορούσαμε παρομοίως να πάει πάνω εδώ, το οποίο είναι το ίδιο πράγμα.
Αν πραγματικά θέλετε να πάρετε φανταχτερό, εγώ σημαίνει ότι, τώρα μπορείτε να μεταλλάσσονται πραγματικά τη σελίδα
και να κάνουμε τρελά πράγματα.
>> Γιατί, λοιπόν, είναι όλα αυτά χρήσιμη;
Λοιπόν, τελικά, είμαστε πρόκειται να θέλουν να είναι
είναι σε θέση να δημιουργήσουν ιστοσελίδες που οδηγούνται από τη δική πίσω άκρα μας,
όχι μόνο από την Google και outsourcing το πίσω άκρο εκεί.
Είμαστε πραγματικά θέλουν το αξία, για παράδειγμα,
της δράσης της μηχανής αναζήτησης μας χαρακτηριστικό να μην πάει σε κάποιον άλλο,
αλλά σε κάτι σαν search.php, όπου search.php είναι στο δικό μας server,
όχι για κάποιον άλλο.
>> Και έτσι για να φτάσουμε εκεί, στην πραγματικότητα Πρέπει να εισαγάγουν μια νέα γλώσσα.
Έτσι, έχουμε ήδη εξετάσει σε μία νέα γλώσσα εδώ, ή δύο πραγματικά, HTML
και CSS.
Αλλά στην πραγματικότητα είναι ακριβώς δομικές και αισθητικές γλώσσες.
Δεν είστε προγραμματισμού γλώσσες per se.
Και αυτό είναι περίπου όσο επίσημης χρόνο, όπως θα δαπανήσουν για αυτούς.
Επειδή θα αρχίσουμε τώρα για τη μετάβαση σε PHP.
>> Έτσι, η PHP είναι μια πραγματική γλώσσα προγραμματισμού.
Είναι μια γλώσσα scripting με την έννοια ότι είναι
προορίζεται να είναι ελαφρύτερο βάρος από ό, τι κάτι σαν C.
Και αυτό είναι μια ερμηνευμένη γλώσσα, πράγμα που σημαίνει ότι δεν έχει συνταχθεί.
Έτσι, με λίγα λόγια, ό, τι σήμαινε όταν χρησιμοποιείται μια γλώσσα όπως η C
και εμείς έπρεπε να το υπολογίσουν;
Τι σημαίνει να καταρτίζουν C πηγαίο κώδικα;
ΚΟΙΝΟ: [δεν ακούγεται].
David J Malan: το ξαναπώ;
ΚΟΙΝΟ: [δεν ακούγεται].
David J Malan: Τέλεια.
Είναι μετατρέπεται σε δυαδικό.
Είναι μετατρέπεται σε μηδενικά και αυτοί από την πραγματική αγγλική γλώσσα που μοιάζει με τον πηγαίο κώδικα.
Και τότε μπορούμε πραγματικά εκτελέσετε αυτά τα μηδενικά και αυτοί
με διέλευση τους μέσα από το CPU κάνοντας διπλό κλικ σε ένα εικονίδιο
ή την εκτέλεση μιας εντολής.
>> PHP και Python και Ruby και Perl και JavaScript
και τσαμπιά των άλλων Οι γλώσσες ερμηνεύονται
γλώσσα, τα οποία δηλαδή δεν τα συγκεντρώνουν.
Αντίθετα, μπορείτε να τους ταΐσει ως συμβολή στην ένα πρόγραμμα που ονομάζεται διερμηνέα.
Και ότι διερμηνέα, που κάποιος άλλος έγραψε,
διαβάζει τον πηγαίο κώδικα επάνω σας προς τα κάτω, αριστερά προς τα δεξιά και ακριβώς μεταφράζει
αυτές οι γραμμές και κάνει ό, τι λέτε.
>> Έτσι αν συναντήσετε ένα γραμμή που λέει εκτύπωσης,
δεν μετατρέπει αναγκαστικά εκτύπωσης στα αντίστοιχα μηδενικά και μονάδες.
Έχει ακριβώς αυτό διερμηνέα, όπως ένα μεγάλο αν η κατάσταση που λέει,
αν διδασκαλίας προγραμματιστής είναι εκτύπωσης, στη συνέχεια, κάντε τα εξής.
Γι 'αυτό ερμηνεύει μόνο από το είδος του συλλογισμού
μέσα από ό, τι είστε το λέει για να το κάνετε.
>> Και PHP είναι μία από αυτές τις γλώσσες.
Και PHP χρόνια πριν είχε σχεδιαστεί ακριβώς για web προγραμματισμό.
Και αυτό ήταν αρχικά ένα πολύ ατημέλητη βρώμικο γλώσσα.
Και πράγματι, υπάρχει μια τεράστια ποσού των επισφαλών κώδικα PHP εκεί έξω.
Αλλά η ίδια η γλώσσα έχει ωριμάσει όλα αυτά τα χρόνια,
τόσο πολύ έτσι ώστε τώρα είναι πραγματικά ένα υπέροχο επόμενο βήμα
παιδαγωγικά από C επειδή είναι τόσο καταρημένη εξοικειωμένοι με τα πάντα
έχετε μόλις δει τις τελευταίες εβδομάδες.
>> Η μία αρχική διαφορά θα δούμε είναι ότι δεν υπάρχει κύρια λειτουργία πια.
Όταν ξεκινήσετε το γράψιμο κώδικα, είναι ακριβώς πρόκειται να πάρει εκτελεστεί δεν έχει σημασία τι,
όπως θα δούμε σε λίγο.
Εν τω μεταξύ, εδώ είναι ό, τι ένα μεταβλητή μοιάζει στην PHP.
Είναι λίγο διαφορετικό, αλλά μόνο ελάχιστα.
>> Στην PHP, δεν υπάρχει ισχυρή πληκτρολόγηση.
Υπάρχει εβδομάδα δακτυλογράφηση, πράγμα που σημαίνει ακριβώς εκεί
είναι οι τύποι δεδομένων, όπως χορδές και αριθμών και άλλα πράγματα.
Αλλά μην κάνετε τον κόπο διευκρινίζοντας τι είναι πια.
PHP είναι στοιχεία έξω για σας.
Το σύμβολο του δολαρίου είναι απλώς μια απόφαση ότι οι άνθρωποι PHP έκανε ετών
Πριν τέτοια ώστε κάθε μεταβλητή στην PHP μόλις ξεκινά με το σύμβολο του δολαρίου.
Είναι πραγματικά το είδος των χρήσιμων σε ότι πηδά έξω σε σας λίγο περισσότερο.
>> Αλλά μετά από αυτό, αυτή η Είναι μια κατάσταση κατά την PHP.
Τι είναι διαφορετικό σε σχέση με C;
Trick question-- τίποτα, το οποίο είναι πραγματικά πολύ ωραίο.
Boolean εκφράσεις σε PHP-- η ίδια.
Boolean εκφράσεις με και έναντι ή, διακόπτες, loops, βρόχους, loops-- ΟΚ,
αυτό είναι διαφορετικό.
>> Έτσι, αποδεικνύεται ότι υπάρχει μια μερικά άλλα χαρακτηριστικά της PHP.
Ένας από αυτούς είναι στην πραγματικότητα αυτό, η οποία είναι θαυμάσια βολικό.
Αν $ αριθμοί είναι ένας πίνακας που έχετε δηλωθεί προηγουμένως σε ένα πρόγραμμα,
Έχετε αυτό το φανταχτερό για κάθε κατασκεύασμα ότι αντί να κάνει όλα αυτά
ενοχλητικό Ι ισούται με 0, Ι είναι λιγότερο από αυτό, [; I ++;],
για κάθε αριθμούς ως αριθμό, όπου κάθε των αξιών αυτών σύμβολο του δολαρίου είναι μόνο
μια μεταβλητή, και το τελευταίο μπορείτε να σκεφτείτε ως Ι
Θα μπορούσατε να καλέσετε οτιδήποτε θέλετε.
Κάλεσα τον αριθμό.
Αυτό πρόκειται να μετακινηθείτε πάνω η σειρά ονομάζεται αριθμούς.
Και σε κάθε επανάληψη, είναι πρόκειται για αυτόματη ενημέρωση
για σας ο αριθμός σύμβολο του δολαρίου μεταβλητή έτσι ώστε να έχετε συνεχώς
έχουν πρόσβαση στη μεταβλητή θέλετε χωρίς να χρειάζεται να κάνει οποιαδήποτε αγκύλη
σημειογραφία ή ευρετηρίαση σε μια σειρά.
>> Από εκεί και πέρα, έχουμε ακόμα τα πράγματα όπως συστοιχίες, που είναι σχεδόν το ίδιο,
εκτός του ότι είναι πολύ κοινό, όπως θα δείτε, τόσο σε PHP και JavaScript
να προ προετοιμάσει μια σειρά χρησιμοποιώντας αγκύλες.
C χρησιμοποιεί αγκύλες.
Έτσι είναι ελαφρώς διαφορετικές, ακόμη και αν εμείς δεν χρησιμοποιούν πραγματικά ότι η τέχνασμα πολύ.
>> Αλλά ακόμη πιο δυναμικά, Η PHP έχει συνειρμική συστοιχίες,
το οποίο είναι ένα φανταχτερό τρόπο του λέγοντας πίνακες κατακερματισμού.
Στην πραγματικότητα, εάν θέλετε να δηλώσετε μια hash πίνακας σε PHP, σε αντίθεση με C-- πόσες
γραμμές του κώδικα πήρε για να πράγματι εφαρμόσει ένα πίνακα κατακερματισμού σε C;
Ή πόσες γραμμές κώδικα είναι λαμβάνει για την εφαρμογή ενός πίνακα κατακερματισμού στη C;
Έτσι είναι πιθανώς πολύ, σωστά;
Είναι μερικές δεκάδες, ίσως 100 ή 200.
Είναι προβληματικό.
Ή είναι για να είναι, όπως θα δείτε σύντομα, μη τετριμμένη
να εφαρμόσει ένα πίνακα κατακερματισμού [Δεν ακούγεται] και επίσης μια δοκιμή.
Αλλά στην PHP-- και ειλικρινά, μάλλον δεν θα πρέπει να σας πω αυτό
μέχρι Monday-- σε PHP, εάν θέλετε ένα τραπέζι, γίνεται.
Αυτό είναι ένα hash table-- έτσι με μία γραμμή κώδικα.
Και
>> Πολλοί γλώσσες κάνουμε αυτό.
Καλή διασκέδαση με το chipset πέντε.
Έτσι, πολλές γλώσσες κάνουν αυτό.
Θα σας δώσω αυτές τις αφαιρέσεις ότι οι άλλοι άνθρωποι, άλλοι προγραμματιστές,
έχουν δημιουργήσει για εσάς, έτσι ώστε μπορείτε να σταθείτε στους ώμους τους
και να αρχίσετε να χρησιμοποιείτε τις ιδέες που είναι σούπερ συναρπαστικό, όπως πίνακες κατακερματισμού και δέντρα
και προσπαθεί.
Αλλά δεν χρειάζεται απαραιτήτως να εφαρμόσουν αυτά τα πράγματα στον εαυτό σας.
>> Και έτσι, τελικά, τι θα πάμε να χρησιμοποιήσετε το PHP για
είναι δυνητικά γράφοντας προγράμματα της λεγόμενης γραμμής εντολών.
Θα μπορούσαμε να αναδημιουργήσει κάθε πρόγραμμα έχουμε γράψει αυτό το εξάμηνο μέχρι στιγμής,
εκτός ίσως ξεμπλοκάρισμα η οποία χρησιμοποιεί SPL, το οποίο είναι ειδικό για C τη στιγμή.
Αλλά κάθε άλλο πρόβλημα που, σίγουρα Mario και ο Καίσαρας
και Vigenere και [? Ρωγμή;] και μετά, εμείς
θα μπορούσε να επανεξετάσει την εφαρμογή σε PHP, και ίσως λίγο πιο εύκολα.
>> Αλλά αυτό που είμαστε τελικά θα να χρησιμοποιήσετε το PHP είναι web προγραμματισμό.
Και θα πάμε να εισαγάγει την επόμενη εβδομάδα ένα νοητικό μοντέλο, ένα πρότυπο που ονομάζεται
MVC, θέα μοντέλο ελεγκτή, το οποίο αν έχετε κάνει τον προγραμματισμό
πριν σε Python ή Ruby ή αλλού, θα
μπορεί να ξέρει αυτής της ομάδας με Κάγκελα και Django και τα παρόμοια.
Αλλά αν είστε νέοι στην αυτό πάρα πολύ, θα δείτε
ότι αυτό είναι πράγματι ένα πολύ φυσικό επέκταση του παραγοντοποίηση
και το είδος του σχεδιασμού του κώδικα που έχουμε
έχουν κάνει στο Γ Εμείς πάμε τώρα εφαρμόζουν ορισμένα από αυτά τα μαθήματα σε PHP
έτσι ώστε, τελικά, είμαστε εφαρμογή δικές μας ιστοσελίδες.
Και αν είστε το είδος του γοητεύονται ή έκπληκτος
ότι θα πάμε να κάνουμε όλα τα τόσο γρήγορα,
συνειδητοποιούν ότι σχεδόν κάθε εξάμηνο, σχεδόν το 90%
των φοιτητών CS50, συμπεριλαμβανομένων εκείνων που δεν έχουν προγραμματιστεί πριν,
καταλήγουν να κάνουν την τελική έργα που βασίζονται σε web προγραμματισμό.
Και έτσι θα δείτε ότι οι αποδόσεις είναι υψηλά στις εβδομάδες που έρχονται.
Γι 'αυτό και θα σας δούμε στη συνέχεια, τη Δευτέρα.
>> ΟΜΙΛΗΤΗΣ 1: Και τώρα, Deep Σκέψεις από Daven Farnham.
Hash πίνακες.
>> [Γέλια]