[Παίζει μουσική] DAVID J Malan: Αυτό είναι CS50 και αυτή είναι η αρχή της εβδομάδας 7. Έτσι, καλωσορίζουμε πίσω. Και ίσως θυμάστε ότι στο πρόβλημα που τέσσερις, υπήρχε ένα κομμάτι από ένα κυνήγι οδοκαθαριστών για ορισμένα υπέροχα δώρα σύμφωνα με την οποία μετά από να ανακτήσει τις φωτογραφίες του προσωπικό τόσο εδώ όσο και στο New Haven, που κλήθηκαν να βρεθεί, όπως πολλοί από τους οι εν λόγω επιστήμονες της πληροφορικής, όπως θα μπορούσατε. Και έχουμε ένα ολόκληρο δέσμη των υποβολών. Σκέφτηκα ότι θα μοιραστώ μερικές βρίσκομαι σήμερα μαζί σας. Και θα καταχωρήσετε όλα αυτά στο διαδίκτυο. Αλλά κυρίως, θα ήθελα να επιστήσω την προσοχή σας to-- καλά μία, Sam ήταν σε αρκετά από αυτά γενικά παρουσιάζουν σαν αυτό. Αλλά φαίνεται ότι από Σήμερα το πρωί, ο νικητής είχε ένα ορισμένο κάποιον που ονομάζεται Ken με 24 του προσωπικού συλληφθεί στην κάμερα ή λίγα περισσότερα αν λάβεις υπ ' αντιπροσωπεύουν πολλαπλές προσωπικού στις φωτογραφίες. Στη φωτογραφία εδώ είναι ο Ken επόμενο στην Παναγία στο New Haven. Τώρα, ο Ken, όμως, γυρίζει έξω είναι κομμάτι μιας υπόθεσης γωνία ότι δεν έχει ακόμη συμβεί πριν. Αποδεικνύεται ότι δεν συνέβη για να βάλω ψιλά γράμματα στο πρόβλημα έθεσε τέσσερις που λέει ότι το προσωπικό είναι επιλέξιμες για τα υπέροχα δώρα επειδή Ken είναι, φυσικά, ένα από τα οι φωτογράφοι για το προσωπικό μας. Τώρα, με ότι είπε, μου έγραψε αρχικά να πω Παρακαλώ μην υστέρων αυτές τις φωτογραφίες στο διαδίκτυο. Νομίζω ότι σε μεγάλο μέρος επειδή οι περισσότερες από τις φωτογραφίες ότι αυτή η φωτογράφος πήρε δείτε λίγο κάτι σαν αυτό. Και τα παρόμοια. Αλλά ο Ken θα θέλατε να σας καθησυχάσω ότι αυτός είναι ένας πολύ καλός φωτογράφος, Είναι επαγγελματίας, παίρνει φωτογραφίες που δεν είναι θολές, που είναι καλύτερα στην εστίαση, και πήρε αρκετά από το δικό μας προσωπικό. Αλλά όχι μόνο αναγνωρίζουν Ken, τι σκεφτήκαμε να κάνουμε έχει περάσει από τη λίστα πραγματική φοιτητές οι οποίοι υπέβαλαν. Και αποδεικνύεται ότι με Λανς 15 φωτογραφίες από το πρωί ήταν ο νικητής μας. Και εδώ είναι που απεικονίζεται Λανς με Colton, με Skaz, με τον εαυτό μου, και με τον Sam. Αλλά τότε αποδεικνύεται ότι από 11:46 π.μ., έτσι μόλις πριν από λίγο, Πήγα πίσω στο e-mail μου και βρήκε ότι είχαμε ένα ακόμα υποβολής από έναν μαθητή που ονομάζεται Μπόνι οποίων το ηλεκτρονικό ταχυδρομείο είπε μόνο αυτό. Δεν πρόκειται να πει ψέματα, είμαι αυτόν τον τρόπο κατά τη διάρκεια της κατηγορίας. Και στη συνέχεια προχώρησε να επισυνάψετε μόνο 14 φωτογραφίες, μια ρίψη του Lance 15. Αλλά σε φωτογραφίες Bonnie του, αποδεικνύεται έξω ήταν πολλά μέλη του προσωπικού, Σαμ μεταξύ τους, έτσι ώστε ό, τι νομίζαμε θα κάνουμε είναι να αναγνωρίσουμε τα δύο από αυτά. Έτσι, εκτός από να πάρει το Dropbox χώρο που ο καθένας που συμμετείχε λαμβάνει, αυτά τα δύο τμήματα θα είναι επίσης λαμβάνετε ένα ωραίο γεύμα μέριμνα για τους και το τμήμα τους ζευγαρώνει την ερχόμενη εβδομάδα. Και έτσι θα ακούσετε από εμάς, Λανς και Bonnie, γι 'αυτό. Έτσι, μεγάλο συγχαρητήρια σε αυτούς. Τώρα, όσοι από εσάς θα όπως το γεύμα γενικότερα ξέρετε ότι το γεύμα CS50 στο Κέιμπριτζ και New Haven είναι αυτή την Παρασκευή. Πηγαίνετε στην ιστοσελίδα κάθετο RSVP CS50 του. Και τώρα μια λέξη για σεμινάρια. Περισσότερα curricularly. Έτσι είμαστε πλησιάζει η το σημείο του εξαμήνου όπου θα πρέπει να ξεκινήσετε σκεφτόμαστε τελικό έργων. Και στην πραγματικότητα, μέσα σε μόλις ένα κομμάτι, θα λεγόμενη προ προτάσεις να οφείλεται. Έτσι οι προ προτάσεις γραφτό να είναι αρκετά χαμηλό αντίκτυπο και πραγματικά απλά μια ευκαιρία για μπορείτε να συνθέσετε ένα σύντομο σημείωμα διδασκαλία τους συναδέλφους σας να ειδοποιήσουν αυτόν ή αυτήν ό, τι είστε εσείς που σκέφτεστε ίσως να θέλετε να κάνετε για την τελική του έργου σας. Τώρα, πολλοί φοιτητές καταλήγουν κάνει web-based τελικό έργων. Και βέβαια, είμαστε απλά τώρα την περασμένη εβδομάδα σε αυτό το και πέρα ​​από την κατάδυση στον προγραμματισμό web. Έτσι, για να μην ανησυχείτε αν δεν έχουν απολύτως καμία ιδέα για το πώς θα οικοδομήσουμε τις ιδέες που μπορεί να έχετε στο μυαλό σας. Αυτό είναι πραγματικά ακριβώς ένα αναγκάζοντας λειτουργία για να σας πάρει να σκεφτόμαστε και να μιλάμε με TF σας γι 'αυτό. Αλλά για να σας βοηθήσει με αυτό, και με τελικό έργα εν τέλει, Γνωρίζουμε ότι CS50 έχει παράδοση να προσφέρουν σεμινάρια. Και αυτά είναι προαιρετικά, τα χέρια επάνω, ή διάλεξη που βασίζεται στις ευκαιρίες να μάθουν περισσότερα σχετικά με τα θέματα που είναι λίγο βοηθητικές για την πορεία του διδακτέα ύλη, αλλά παρόλα αυτά υπέροχα υλικό για να οδηγήσει την τελική έργων. Και έτσι αυτή είναι η λίστα που είναι CS50 προσωπικό εδώ στο New Haven έχουν καταλήξει για την φέτος για iOS προγραμματισμού, το Android προγραμματισμό, την ανάπτυξη του παιχνιδιού, και τσαμπιά των περισσότερων εργαλείων και τις γλώσσες και τις τεχνικές. Έτσι παρακολουθούμε στην ιστοσελίδα του CS50 του. Και εν τω μεταξύ, αν θέλετε να δηλώσετε το ενδιαφέρον σας σε κάποιο από αυτά, πηγαίνετε στο μητρώο κάθετο CS50 του. Και στη συνέχεια θα ακολουθήσει ως προς το ημέρες και ώρες πτήσης και θέσεις και πιο everything-- όλα θα να είναι σε συνεχή ροή και επίσης διαθέσιμες σε πρώτη ζήτηση αφού, αν δεν μπορείτε να το κάνετε πραγματικά. Έτσι, χωρίς άλλη καθυστέρηση, εμείς σταμάτησε την τελευταία φορά με την GET. Και αυτό ήταν σαν το μήνυμα που ήταν στο εσωτερικό του εικονικού φακέλου, υπενθυμίζουν, ότι περάσαμε από router σε router να δρομολογητή μεταξύ ενός web browser και ένα web διακομιστή. Και αυτό το μήνυμα φαινόταν κάτι σαν αυτό. Αυτό ήταν το πιο απόκρυφες μήνυμα ότι ήταν στην πραγματικότητα μέσα από ένα περίβλημα γραμμένο σε ένα κομμάτι χαρτί του οποίου η πρώτη γραμμή λέει στην κυριολεξία, να πάρει κάθετος. Και ακριβώς όπως μια επιταγή λογική, τι έκανε ο κάθετος συμβολίζουν; Τι σημαίνει όταν κάθετος ζητώντας μια ιστοσελίδα; Μπορείτε να ζητήσετε όλη την ώρα. Σχεδόν κάθε φορά που επισκέπτεστε μια ιστοσελίδα, μπορείτε στην πραγματικότητα, δεν πληκτρολογήσετε ένα όνομα αρχείου. Πιθανότατα απλά πηγαίνετε στο Facebook.com, εισάγετε, gmail.com, ή τα παρόμοια. Και τι κάθετο παριστάνουν; Τι αρχείο; Ή ό, τι σελίδα, συγκεκριμένα; Ο δείκτης, ναι. Έτσι προεπιλεγμένη σελίδα. Έτσι, αν δεν ορίσετε ένα αρχείο Ονομα όπως θα αρχίσουμε να βλέπουμε, είστε πραγματικά ακριβώς που ζητούν να μου δώσει την αρχική σελίδα της στο Facebook ή να μου δώσει inbox μου ή να δώσει μένα η προεπιλεγμένη σελίδα των ειδήσεων στην ιστοσελίδα του CNN ή τα παρόμοια. Και ένας διακομιστής αποκρίνεται στη συνέχεια ότι το μήνυμα με κάτι όπως αυτό, λέγοντας ναι, μιλούν έκδοση HTTP 1.1. 200, το οποίο είναι μια κατάσταση κώδικα που εμείς οι άνθρωποι σπάνια δει ποτέ γιατί είναι καλό. Διότι αυτό σημαίνει ΟΚ, το αίτημα παρελήφθη και χειρίζεται σωστά. Και ο τύπος περιεχομένου προφανώς στην απόκριση είναι αρκετά συχνά, αλλά όχι πάντα, το κείμενο. Και συγκεκριμένα, HTML. Και αυτό είναι στην πραγματικότητα όπου θα δούμε σήμερα. Έτσι, στην πραγματικότητα, είμαι πρόκειται να πάει μπροστά και να ανοίξει ένα πρόγραμμα περιήγησης. Πάω να χρησιμοποιήσετε το Chrome, μπορείτε να χρησιμοποιήσετε πιό οποιοδήποτε πρόγραμμα περιήγησης στις εβδομάδες που έρχονται. Σας προτείνουμε γενικά Chrome επειδή είναι ιδιαίτερα καλό για την ανάπτυξη λογισμικού. Έχει μια μεγάλη ενσωματωμένο εργαλεία που διευκολύνουν να αναπτύξουν όχι μόνο HTML και CSS, τα πράγματα θα αρχίσουμε να μιλάμε σήμερα, αλλά και άλλες γλώσσες, όπως καλά. Και Πάω να προχωρήσει και να πάει to-- Πάω να ελέγξει κλικ ή δεξί κάντε κλικ οπουδήποτε σε μια ιστοσελίδα. Και Πάω να πάει να επιθεωρήσει Element. Και Πάω να τσιμπιά μου οθόνη μόλις λίγο εδώ. Επιτρέψτε μου να περάσω αυτό προς τα κάτω. Έτσι, αυτό είναι αυτό που ονομάζεται Επιθεωρητής του Chrome. Έτσι, αυτό είναι σαν ένα εντοπισμού σφαλμάτων εργαλείο που έχει δημιουργηθεί στο Chrome. Όλοι σας έχετε ήδη αυτό αν έχετε χρησιμοποιήσει το Chrome. Και αυτό σας επιτρέπει να δείτε τι συμβαίνει σχετικά με κάτω από την κουκούλα κάποιας ιστοσελίδας. Ας λάβει πράγματι ένα εξετάσουμε αυτό το θέμα ως εξής. Έχει τον τρόπο πιο χαρακτηριστικά και εμείς ενδιαφερόμαστε για σήμερα. Αλλά υπάρχει αυτές τις καρτέλες εδώ. Στοιχεία, το δίκτυο, τις πηγές, χρονοδιάγραμμα, και κάποια άλλα πράγματα. Πάω να κάνετε κλικ στο Δίκτυο για μια στιγμή. Και είναι λίγο συντριπτική με την πρώτη ματιά εδώ. Αλλά τι Πάω να κάνουμε είναι να αφήσουμε μένα λίγο απλοποιηθεί. Πάω να ενεργοποιήσετε το σημειώνοντας ελαφρά έτσι ώστε να είναι κόκκινο. Και Πάω να πω διατήρηση ημερολογίου. Και αυτό είναι μόνο ένα μικρό πράγμα κατάλαβα την πάροδο του χρόνου που πρόκειται να αποθηκεύσετε όλα όσα συμβαίνουν στο πρόγραμμα περιήγησης. Και τώρα είμαι πρόκειται να πάει να http://facebook.com. Στην πραγματικότητα, ας κάνουμε www για το καλό μέτρο, κάθετος. Enter. Έτσι, μια διεύθυνση URL που πολλοί από μπορεί να έχετε επισκεφτεί. Και τώρα το web του Facebook σελίδα εμφανίζεται στην κορυφή. Και τότε ένα σωρό πράγματα πέταξε στο κάτω μέρος. Και στην πραγματικότητα, αποδεικνύεται ότι όταν επισκέπτεστε Facebook.com, δεν είστε μόνο κάνοντας ένα αίτημα HTTP, αποδεικνύεται ότι πρόκειται να Facebook.com στέλνει 41 των εν λόγω φακέλων, καθένα με τη δική του αίτηση GET, όπως υποδεικνύεται, αν και πίσω από την οθόνη εδώ, στο κάτω μέρος της οθόνης, δείχνει ότι, πράγματι, μου Ο περιηγητής έκανε 41 τα αιτήματα. Και συνολικά, μετέφερε 861 kilobytes και πήρε για κάποιο λόγο όσο οκτώ δευτερόλεπτα για να κατεβάσετε όλα αυτά. Έτσι, αυτό είναι πραγματικά λίγο περίεργο ότι η περιοχή του Facebook θα πάρει ότι μακριά, αλλά έτσι είναι σε αυτή την περίπτωση. Τώρα, όλα αυτά εγώ δεν ενδιαφέρονται πραγματικά περίπου, εκτός από το κορυφαίο αίτημα. Έτσι, ας πάμε σε αυτό το ένα εδώ και επιτρέψτε μου σμίκρυνση για μια στιγμή. Και επιτρέψτε μου να εστιάσετε σε αυτό. Έτσι, αυτό που έχω κάνει στο αριστερό παρόλο υπάρχει μια παρτίδα σε εξέλιξη εδώ Είναι έχω επισημανθεί Facebook.com και, στη συνέχεια, παρατηρήσετε ότι είμαι κύλιση προς τα κάτω, κύλιση προς τα κάτω, πηγαίνοντας προς τα κάτω, να ζητήσει κεφαλίδες. Και θα δείτε ότι το Chrome εμφανίζει Θέλω κατ 'ουσίαν, τα εσωτερικά περιεχόμενα την αίτηση που έκανα. Δεν είναι μορφοποίηση ακριβώς το ίδιο τρόπο, αλλά παρατηρήσετε υπάρχει αναφορά πάρει, παρατηρήσετε υπάρχει αναφορά του κράτους μέλους υποδοχής, Facebook.com, η διαδρομή, ή κάθετος, το οποίο είναι το αρχείο ζήτησα. Και στη συνέχεια, αν μετακινηθείτε δημιουργία αντιγράφων ασφαλείας, θα πραγματικότητα δείτε ότι αυτό επέστρεψε στο Facebook για μένα είναι όλα αυτά τα κεφαλίδες. Έτσι, μέσα από αυτήν την εικονική φάκελος Πράγματι, είναι πολλά ζεύγη κλειδιών αξίας. Μια λέξη, ένα κόλον, και στη συνέχεια μια τιμή. Μια λέξη, μια άνω και κάτω τελεία, και μια τιμή. Αυτά είναι που ονομάζεται κεφαλίδες. Και δεν υπάρχει τρόπος για περισσότερη λεπτομέρεια από ό, τι εδώ που πραγματικά νοιάζονται για το δικαίωμα τώρα. Αλλά αυτή είναι η δεύτερη σε τελευταίο εκεί κάτω, Παρατηρήστε, ότι ο διακομιστής του Facebook.com, πράγματι είπε εδώ έρχεται κάποιο κείμενο HTML. Έτσι, όλα αυτά είναι να πούμε ότι όταν ζητάτε ένα web σελίδα από ένα πρόγραμμα περιήγησης σε μια διακομιστή, αυτός ο διακομιστής απαντά με ένα περίβλημα της δικής του εντός του οποίου είναι κειμένου. Με άλλα λόγια, HTML. HyperText Markup Language. Ποια είναι άλλη γλώσσα ότι έχουμε εισαγάγει σήμερα ότι οι άνθρωποι παράγουν ή υπολογιστές προκειμένου να εφαρμοστεί ιστοσελίδων. Συγκεκριμένα, ας ρίξουμε μια ματιά σε αυτό. Πάω τώρα να πάω πίσω στην ιστοσελίδα του Facebook. Και Πάω να απλά ελέγχου κλικ ή δεξί κλικ και κάντε κλικ στο Προβολή προέλευσης σελίδας. Και ακόμα κι αν δεν χρησιμοποιείτε το Chrome, IE να το κάνετε αυτό, ο Firefox μπορεί να κάνει αυτό, Safari μπορεί να το κάνετε αυτό, ακόμη και αν το μενού επιλογές μπορεί να μοιάζει λίγο διαφορετικό. Και αυτό είναι το HTML του σήματος αυτού και Η εταιρεία στο Facebook έχουν γράψει. Και συλλογικά, αυτή η γλώσσα εδώ υλοποιεί το μπλε και το λευκό σελίδα που είδαμε πριν από λίγο. Τώρα, αυτό είναι λίγο συντριπτική. Αλλά αν κοιτάξουμε επάνω στο επάνω αριστερό μέρος, είμαστε Θα αρχίσουμε να βλέπουμε κάποια μοντέλα. Μοιάζει υπάρχουν πολλά αυτών των ανοικτών αγκύλη και στη συνέχεια να υπάρχει αυτή η λέξη-κλειδί HTML. Εδώ είναι ένα άλλο ανοιχτό αγκύλη και το κεφάλι. Εδώ είναι, αν μετακινηθείτε προς τα κάτω και προς τα κάτω και προς τα κάτω, είμαι πρόκειται να προχωρήσει και να δοκιμάσετε να ψάξετε για κάτι. Υπάρχει τρόπος πάνω στη δεξιά εδώ είναι ανοικτό σώμα της βάσης. Και ανάκλησή του από την τελευταία φορά που είχαμε προτείνει ότι το απλούστερο web σελίδα ότι ένας άνθρωπος θα μπορούσε να γράψει μπορεί να μοιάζει λίγο κάτι σαν αυτό. Ανοίξτε ετικέτα HTML, ανοικτή κεφαλή ετικέτα, ανοικτή ετικέττα τίτλου, Στη συνέχεια κλειστά τίτλο, κλειστή κεφαλή, ανοιχτή ετικέτα σώμα, κάποιο κείμενο, κλειστό σώμα, κλειστή HTML. Αλλά μια παύση εδώ για μια στιγμή. Αυτός ο κωδικός, ακόμη και αν έχετε ποτέ δεν γράφτηκε πριν αλλά ακόμα δεν καταλαβαίνω τι συμβαίνει, φαίνεται αρκετά καλό. Δεξιά, είναι πολύ καθαρό. Είναι πολύ ωραίο στυλιστικά. Πολλοί βαθούλωμα και λευκό χώρο. Facebook δεν είναι. Γιατί λοιπόν είναι τόσο πολύ Facebook χειρότερα από ό, τι στο γράψιμο HTML; Προφανώς. Δεξιά, αυτό είναι σαν ένα από τους πέντε για το στυλ. Υπάρχει ένας καθοριστικός λόγος για να μειώσουν αυτές τις γωνίες. Εντάξει, έτσι δεν θέλουν να καταστήσει ευκολότερο για σας να το διαβάσετε. Έτσι, κατά κάποιο τρόπο, είναι συσκοτίζοντας αυτό, το είδος της κρυπτογράφησης τουλάχιστον αισθητικά έτσι ότι είναι πιο δύσκολο για Myspace να πάει και να καταληστεύουν τους αρχική σελίδα και το HTML για αυτό. Αποδεικνύεται ότι με τα προγράμματα όμως, συμπεριλαμβανομένων Chrome, μπορούμε να καθαρίσει αυτό επάνω σούπερ εύκολα. Έτσι δεν είναι αρκετά ότι είναι ο λόγος. Τι άλλο θα μπορούσε να είναι η αιτία. Ναι. Ναι, τα στοιχεία άσπρο διάστημα έξοδα. Τι εννοείς? Ναι, ακριβώς. Εάν πατήσετε το πλήκτρο Tab για την παρτίδα ή την πλήκτρο διαστήματος, να εξετάσει τις επιπτώσεις. Έτσι, κάθε πλήκτρο στο πληκτρολόγιό σας είναι ένα [Δεν ακούγεται] εκπροσωπήθηκαν ως ένα byte. Έτσι, ας υποθέσουμε ότι ο Μάρκος ή σε οποιοδήποτε προγραμματιστές αυτές τις μέρες χτυπά το spacebar μόνο μία φορά σε αυτή τη σελίδα HTML που αντιπροσωπεύει την αρχική σελίδα του Facebook. Και το Facebook έχει πολλά των χρηστών αυτές ημέρες. Έτσι, ας υποθέσουμε ότι η αρχική σελίδα του Facebook επισκέπτεται από ένα δισεκατομμύριο άνθρωποι σήμερα. Και κάποιος στο Facebook έχει χτύπησε το πλήκτρο διαστήματος μόλις μία φορά. Έτσι, ένα επιπλέον byte, ένα δισεκατομμύριο αιτήματα, πόσα περισσότερα δεδομένα είναι το Facebook μεταφορά μέσω του διαδικτύου επειδή κάποιος χτύπησε το πλήκτρο διαστήματος στο πληκτρολόγιο του; Ένα δισεκατομμύριο bytes, ή ένα gigabyte αποστέλλονται δεδομένα από το Facebook servers για τους ανθρώπους γύρω από το κόσμο για κανέναν καλό λόγο. Τώρα, αυτό είναι μόνο ένα χώρο. Φανταστείτε να καθαρίσετε πραγματικά αυτό το πράγμα και είναι στοιχισμένες και προστίθεται πολλά λευκά χώρο και χαρακτήρες tab και χώρους, θα καταλήξετε gigabytes των δαπανών, αν δεν terra bytes περισσότερο χώρο. Και έτσι σούπερ κοινό στο πραγματικό κόσμο της ανάπτυξης ιστοσελίδων είναι να minify κωδικό σας. Και θα δούμε τελικά πώς μπορείτε να το κάνετε αυτό. Αλλά σήμερα, θα αρχίσετε να γράφετε κώδικα ότι στην πραγματικότητα είναι αναγνώσιμα από εμάς τους ανθρώπους. Αποδεικνύεται, όμως, αν πάτε πίσω σε αυτό το εργαλείο στο Chrome Ελέγξτε Element, στο παρελθόν, ήμασταν στην καρτέλα Δίκτυο. Αποδεικνύεται ότι αν πάτε να το Καρτέλα στοιχεία, αυτό που πραγματικά να δείτε είναι του Chrome αρκετά τυπωμένο εκδοχή της ίδιας HTML. Έτσι έχουμε το deobfuscated. Έτσι δεν είναι καμία αντιστοιχία για έναν υπολογιστή. Και τώρα μπορείτε πραγματικά κάντε κλικ γύρω και να αρχίσει για να δείτε την ιεραρχία που είναι μια ιστοσελίδα. Ας κάνουν ακριβώς αυτό. Πάω να πάει μπροστά και να ανοίξει για Mac μου ένα πρόγραμμα που ονομάζεται επεξεργασίας κειμένου. Και να υπενθυμίσω ότι αυτό είναι μόνο ένα εξαιρετικά απλό πρόγραμμα κειμένου. Τα Windows διαθέτουν Notepad.exe. Και Πάω στα Πλήρη πληκτρολογήστε την ακόλουθη. Doc τύπου HTML, ανοιχτό βραχίονα HTML, έκλεισε βραχίονα HTML, έχουμε το κεφάλι της σελίδας εδώ, το άκρο της κεφαλής της σελίδας εδώ, ένας τίτλος θα είναι όπως, hello world. Και στη συνέχεια, εδώ κάτω, χρειαζόμαστε το σώμα της ιστοσελίδας. Κλειστό το σώμα. Και στη συνέχεια εδώ, hello world. Εντάξει. Έτσι, έχουμε γράψει ένα σούπερ γρήγορο ιστοσελίδας. Πάω να το αποθηκεύσετε ως hello.html στην επιφάνεια εργασίας μου. My Mac πρόκειται να διαμαρτύρονται, νομίζοντας ότι, περιμένετε ένα λεπτό, αυτό είναι ένα αρχείο κειμένου, κάντε θέλετε να το ονομάσετε .txt; Αλλά όχι, θέλω να χρησιμοποιήσω HTML τελεία. Και τότε τι είναι ωραίο αν μου απλά κάντε διπλό κλικ σε αυτό το αρχείο, hello.html, εδώ είναι η ιστοσελίδα μου. Δυστυχώς, είμαι ο μόνο άτομο στον κόσμο οι οποίοι μπορούν να επισκεφθούν αυτή τη σελίδα αυτή τη στιγμή. Διότι πού θα ζήσουν τα φαινόμενα; Είναι στο Mac μου, σωστά; Ποια είναι άχρηστο. Όπως κανείς σε αυτή την αίθουσα πόσο μάλλον στο διαδίκτυο μπορούν να επισκεφθούν πραγματικά αυτή τη σελίδα. Έτσι, σήμερα, θα πρέπει να προσθέσω ένα ακόμη στοιχείο. Και για να γίνει αυτό, θα πάω να να προχωρήσει και να ανοίξει σύννεφο 9. Έτσι Cloud 9 είναι φυσικά σύννεφο που βασίζεται υπηρεσία-- CS50 IDE-- που έχει όλα τους χώρους εργασίας μας τρέχει κάπου στο διαδίκτυο. Και αυτό σημαίνει ότι όλα τα αρχεία μας είναι ήδη προσιτές στο κοινό. Ας πάμε μπροστά και να το κάνουμε αυτό. Πάω να πάει μπροστά και να δημιουργήσετε ένα νέο αρχείο NCS50IDE. Πάω να το αποθηκεύσετε ως πριν όπως hello.html και πατήστε αποθήκευση. Και τώρα ακριβώς για να εξοικονομήσετε χρόνο, θα πάω να προχωρήσει και να αντιγράψετε επικολλήσετε αυτόν τον κώδικα αντί να πληκτρολογήσετε ξανά. Και να το αποθηκεύσετε. Και έτσι τώρα έχω ένα hello.html αρχείο που ονομάζεται. Αλλά πώς μπορώ να κάνω πραγματικότητα ανοίξτε το ως μια ιστοσελίδα; Λοιπόν, αποδεικνύεται η ενσωματωμένη στο CS50 IDE δεν είναι μόνο ένας compiler σαν κλαγγή και ένα πρόγραμμα εντοπισμού σφαλμάτων, όπως και GDB τσαμπιά από άλλα προγράμματα, υπάρχει πραγματικά ένα πλήρες web server τρέχει μέσα CS50 IDE. Όλοι σας, δηλαδή, έχετε το δικό σας web server. Και ένα web server είναι απλά ένα κομμάτι λογισμικού των οποίων ο σκοπός της ζωής είναι να εξυπηρετήσει έως και ιστοσελίδες. Για να ακούσετε για αιτήσεις από προγράμματα περιήγησης και ανταποκριθεί με λίγη εικονική φακέλους εντός της οποίας είναι η περιεχόμενο που έχω γράψει. Έτσι, αυτό το web server είναι πραγματικά δωρεάν και ανοιχτού κώδικα. Σε περίπτωση ανοικτού κώδικα σημαίνει ακριβώς λογισμικό που κάποιος άλλος έχει γραμμένο ότι όλοι μας μπορούμε να πραγματικά να δείτε και να κατεβάσετε ακόμα και αλλάξετε τον πηγαίο κώδικα. Και αυτό λέγεται Apache. Και το κάναμε λίγο πιο εύκολο να χρήση σε CS50IDE καλώντας το Apache 50. Έτσι ώστε να μπορεί πράγματι κατανοούν την ακόλουθη. Πάω να πω Apache 50 αρχή. Και τότε είμαι απλώς πρόκειται να πω τελεία. Και βλέπουμε κάποια κάπως απόκρυφες μήνυμα λέγοντας ρύθμιση του Apache έγγραφο [? ομάδα;] στο σπίτι, ubuntu, όποια και αν είναι, κάθετο χώρο εργασίας. Ξεκινώντας web server Apache 2 επιτυχώς. Έτσι, τα πολυλογώ, εγώ Μόλις έσπρωξε ένα κουμπί και να μετατραπεί σε ένα web server ο οποίος είναι τώρα ακούει στο διαδίκτυο στη θύρα TCP 80 σε μια συγκεκριμένη διεύθυνση. Και λέει εδώ, και Αυτό θα αλλάξει με βάση σχετικά με το όνομα χρήστη σας και σε άλλους παράγοντες, αλλά παρατηρήσετε τώρα αν κάνω κλικ αυτό, IDE50 dot jharvard και έτσι και έτσι, παρατηρήσετε ότι όλο αυτό το διάστημα για το παρελθόν πολλές εβδομάδες, μπορεί να έχετε Παρατηρήσαμε ότι δικό σας όνομα χρήστη είναι ενσωματωμένο στο πάνω δεξί χέρι γωνιά της CS50IDE. Και αυτό πράγματι έχει όλα αυτά εγκαίρως η διεύθυνση στην οποία μπορείτε να επισκεφθείτε όλα τα αρχεία σας μέσω του διαδικτύου. Μέχρι τώρα, δεν έχει σημασία, επειδή σε C, που σε γενικές γραμμές θέλουν τα πράγματα τρέχει σε ένα τερματικό, δεν είναι στο διαδίκτυο. Αλλά σήμερα, αρχίζουμε γράφοντας web-based κώδικα ότι θέλουμε προσβάσιμη στις δημόσιες διευθύνσεις URL. Λοιπόν, τι Πάω να κάνετε είναι να πατήσετε αυτό το URL. Και παρατηρώ ότι βλέπω μια αρκετά άσχημο δείκτη, μια λίστα καταλόγου, αλλά τι αρχείο πηδά έξω σε σας ίσως; Hello.html. Αυτό συμβαίνει γιατί έχω αποθηκεύσει το αρχείο στο χώρο εργασίας μου. Και ό, τι έχω πει Apache τον web server είναι να κοιτάξουμε στον κατάλογο χώρου εργασίας του Δαβίδ. Και αφήνετε κανέναν στο κόσμο δείτε αυτά τα αρχεία. Και πράγματι, αν τώρα κάντε κλικ στο hello.html, Βλέπω μέσα σε αυτήν την καρτέλα ακριβώς αυτό το αρχείο. Τώρα παρατηρήσετε, σύννεφο πράττειν 9 του κάτι λίγο χρήσιμο για εμάς. Εντός CS50 IDE, παρατηρήσετε υπάρχει ξαφνικά μια γραμμή διευθύνσεων. Αυτό συμβαίνει γιατί ακόμα κι αν είμαστε χρησιμοποιώντας το Chrome για να επισκεφθείτε CS50IDE, στο εσωτερικό του CS50IDE είναι η δική του έκδοση ενός web browser αυτή τη στιγμή. Και έτσι αντί περιπλέκουν τα πράγματα ως έχουν, Πάω να πάει μπροστά και απλά αντιγράψτε αυτό το URL. Πάω να πάει μπροστά και απλά ανοίξει το δικό του παράθυρο μου Chrome. Έτσι, δεν υπάρχει μαγική εδώ, δεν CS50IDE. Είμαι ακριβώς πρόκειται να επικολλήσετε κυριολεκτικά μου J Χάρβαρντ διεύθυνση URL και πατήστε Enter. Και ιδού, τώρα, και θεωρητικά, ο καθένας στο διαδίκτυο, αν έχω ρυθμιστεί δικαιώματα κατάλληλα, μπορούν να επισκεφθούν αυτό το αρχείο. Και έτσι τώρα, αν μου είπε hello.html, voila, εκεί είναι απίστευτα απογοητευτικό ιστοσελίδα μου. Ας κάνουμε ένα γρήγορο έλεγχο λογικότητας. Επειδή όλα αυτά είναι εννοιολογική συσταθεί. Και εμείς δεν έχουμε πραγματικά πολύ Σας διδάξει πώς να γράψετε HTML per se. Έτσι Οποιεσδήποτε ερωτήσεις τώρα σχετικά με το τι ακριβώς συνέβη; Ναι. Μήπως CS50 κατέχουν αυτές τις ιστοσελίδες; Με ποια έννοια? Καλή ερώτηση. Έτσι CS50 έχει στην κυριότητά CS50.io. Έχουμε πράγματι αγοράσει αυτό το όνομα τομέα. Και από τη φύση σας παιδιά σύνδεση στο CS50IDE, σε όλους σας να πάρετε ό, τι λέγεται ένα subdomain. Έτσι IDE50-Malan, ή IDE50-Rob.CS50.io, ότι είναι μοναδική διεύθυνση σας μέσα το όνομα τομέα μας. Έτσι, για τους σκοπούς του μαθήματος, έχετε τη δική σας μοναδική διεύθυνση. Αλλά έχουμε απλοποιήσει τα πράγματα από την αγορά του τομέα ανωτάτου επιπέδου, CS50 dot I / O και, στη συνέχεια, όλοι οι άλλοι είναι μέσα από αυτό, να το πω έτσι. Και θα επανέλθουμε σε αυτό σε μια-δυο εβδομάδες κατά πάσα πιθανότητα, ιδιαίτερα στο τελικό σχέδιο χρόνο, όταν κάποιοι από εσάς ίσως να θέλετε να αποκτήσετε το δικό σας ονόματα τομέα. Είναι στην πραγματικότητα σχετικά απλή. Εντάξει. Ας το κάνουμε τώρα αυτό. Πάω να πάει πίσω στο CS50IDE, όπου το αρχείο μου τώρα, hello.html, δεν είναι και τόσο ενδιαφέρουσα. Θα ήθελα να κάνω κάτι λίγο καλύτερο από αυτό. Έτσι, Πάω να κάνω κάτι τέτοιο. Επιτρέψτε μου ανοιχτό paragraphs.html. Έτσι, αυτό είναι ένα αρχείο που έγραψα πριν. Στην κορυφή του, όπως πάντα, έχουμε σχόλια. Αλλά σε HTML, σχόλια κοιτάξουμε λίγο διαφορετικό. On line τρεις και η γραμμή 14, που δείτε τη σύνταξη για να ξεκινήσει ένα σχόλιο και στο τέλος ένα σχόλιο. Αλλά κανένα από τα πράγματα σε μεταξύ των θεμάτων λειτουργικά. Είναι απλά μια σημείωση για μια ανθρώπινο τι συμβαίνει εδώ. Και ακριβώς όπως μια γρήγορη λογική ελέγξτε, αν μετακινηθείτε προς τα κάτω, ποια είναι η προφανής νέα ετικέτα που εισάγαμε; Οι ετικέτες μέχρι στιγμής έχουμε δει είναι ανοιχτά βραχίονα HTML, το κεφάλι, τον τίτλο, και το σώμα. Αλλά τι είναι προφανώς νέος τώρα; Ναι, έτσι σ. Η ετικέτα p ή tag παραγράφου. Και τότε ακριβώς δανειστεί κάποια προεπιλογή Λατινικό κείμενο να αποτελέσει σκέψεις μου. Διότι αυτό που ήθελα να αποδεικνύουν είναι το πώς μπορείτε να αντιπροσωπεύουν παραγράφους κειμένου σε μορφή HTML. Και έτσι αυτό που έχει αρχίσει να συμβεί εδώ είναι ότι υπάρχει ήδη ανάπτυξη ενός προτύπου. Και επιτρέψτε μου να προχωρήσει και να το κάνουμε αυτό. Επιτρέψτε μου πρώτα να απενεργοποιήσετε Apache. Και Πάω να το πω για να ξεκινήσει η ίδια και πάλι στο εσωτερικό της σημερινής πηγής επτά μ κατάλογο. Έτσι ώστε να έχω πρόσβαση σε όλα. Και τώρα, αν πάω πίσω στο Αυτή η λίστα καταλόγου, παρατηρήσετε βλέπω κάθε αρχείο από σήμερα. Και θα δείτε στην επόμενη ομάδα πρόβλημα, θα να σας δώσει οδηγίες για να κάνει ακριβώς αυτό. Αν ανοίξω paragraphs.html, αυτό θα μπορούσε καθώς μοιάζει με μια γλώσσα προγραμματισμού σε σας εάν δεν μιλάτε ή να διαβάσουν τα λατινικά. Αλλά αυτό είναι μόνο τρεις παραγράφους του κειμένου που είναι σημειωμένο σε μορφή HTML. Και παρατηρήστε την παράγραφο διαλείμματα μεταξύ τους. Επειδή αποδεικνύεται, και ακόμα κι αν μπορούσε να αφήσει να το κάνετε αυτό, ενώ στον πραγματικό κόσμο, αν θέλετε να βάλετε γραμμή διαλείμματα μεταξύ των πραγμάτων, ίσως πολύ απλά το κάνετε αυτό και να χτυπήσει Αποθήκευση. Και τώρα, αν μου reload εδώ, προειδοποίηση ότι τα πάντα απλά θολώνει μαζί σε μία μόνο σταγόνα του κειμένου. Επειδή HTML είναι το είδος της μια χαζή γλώσσα. Έχει ως στόχο να χρησιμοποιηθούν σε τέτοια ένας τρόπος που το πρόγραμμα περιήγησης θα είναι μόνο κάνει ρητά τι θα πει να κάνουμε. Έτσι, αν δεν το πείτε να μου δώσει μια νέα παράγραφο, δεν πρόκειται να δούμε μια νέα παράγραφο. Και στην πραγματικότητα, αυτό που ο Ο περιηγητής πρόκειται να κάνει Είναι ακόμα και αν πατήσετε Enter, ας πούμε ξανά και ξανά και πάλι, κίνηση με αυτόν τον τρόπο το κείμενο προς τα κάτω στην οθόνη και στη συνέχεια να αποθηκεύσετε και στη συνέχεια να φορτώσετε εκ νέου, ο browser θα να καταρρεύσει όλο αυτό το λευκό κενό σε ένα μόνο, ορατό κενό. Εντάξει. Έτσι, αυτό είναι το tag παραγράφου. Και ναι, ποιο είναι το σχέδιο ότι είναι αναπτυσσόμενες εδώ; Λοιπόν, φαίνεται να είναι η περίπτωση κατά την οποία HTML είναι όλα σχετικά με την έναρξη μιας ετικέτας και τελειώνει μια ετικέτα. Και τι είναι μια ετικέτα; Λοιπόν, αυτό είναι απλά ένα κομμάτι της σύνταξης. Ανοίξτε βραχίονα, μια λέξη-κλειδί, κλειστή στήριγμα, είναι μια ετικέτα. Ή να ξεκινήσετε την ετικέτα. Και στη συνέχεια, όταν είστε γίνεται να εκφραστείς, όπως στην τελειώσετε με την παράγραφο, κάνετε να το πω έτσι αντίθετο. Αλλά το αντίθετο δεν είναι αρκετά προς τα πίσω. Μπορείτε απλά να προτάξετε την ίδια ετικέτα του ονομασία με κάθετο σαν αυτό. Εντάξει. Έτσι, δεν είναι όλα τόσο συναρπαστικό. Και στην πραγματικότητα, δεν είμαστε καθιστώντας το web όλοι ότι περισσότερο ενδιαφέρον. Τι γίνεται αν θέλω να κάνω τα πράγματα μεγαλύτερα και τολμηρό; Έτσι αποδεικνύεται ότι εδώ είναι ένα παράδειγμα σε headings.html, όπου στο σώμα μου, Έχω μια ετικέτα Η1, Η2, Η3, τέσσερα, πέντε, ή έξι, τα οποία όλα φαίνεται αρκετά απόκρυφες. Αλλά αν πάω να ανοίξει αυτό παράδειγμα, ας ρίξουμε μια ματιά. Headings.html. Έτσι, τα προγράμματα περιήγησης από προεπιλογή μπορεί να σας δώσει το κείμενο ότι είναι μεγάλες και τολμηρές ανόμοιων μεγεθών. Η1 είναι μεγάλη. Η6 είναι μικρότερο και, στη συνέχεια, οτιδήποτε άλλο στο μεταξύ. Έτσι ώστε να είναι ενδιαφέρουσα, αλλά ακόμα δεν είναι πραγματικά το διαδίκτυο ξέρω. Τι γίνεται αν θέλουμε να έχω κάτι σαν μια λίστα. . Έτσι, εδώ είναι μια λίστα με κουκκίδες τρία από τα σπίτια του Χάρβαρντ. Πώς μπορείτε να κάνετε για αυτό; Λοιπόν, ρίξτε μια ματιά στο list.html. Και εδώ βλέπουμε μια λίγο funkiness αλλά ας εξετάσουμε τι συμβαίνει. Έτσι, με βάση αυτό που μόλις είδαμε, UL σημαίνει μη διατεταγμένη λίστα. Μη αριθμημένη λίστα με κουκκίδες σημαίνει ακριβώς. Δεν υπάρχει κανένας αριθμός. Υπάρχει επίσης κάτι που ονομάζεται κατάλογο, το οποίο είναι ένα ΕΓ σε ετικέτα παραγγείλει. Στη συνέχεια LI, στοιχείο της λίστας είναι το μόνο που σημαίνει. Και έτσι αυτόματα αριθμούς τα πάντα για σένα. Αλλά και πάλι, όλα εσοχή μου και άσπρο διάστημα είναι μόνο για το καλό μου. Το πρόγραμμα περιήγησης δεν είναι στην πραγματικότητα πρόκειται για τη φροντίδα. Έτσι, ακόμη κι αν δεν μπορούσε να το κάνετε αυτό, ακριβώς για να είναι σαφής, δεν θα πρέπει, ακόμη και αν ο browser θα εξακολουθεί να είναι σε θέση να το καταλάβουν μια χαρά. Είμαι χτύπημα στο reload μου πρόγραμμα περιήγησης, είμαι κλικ reload και καμία αλλαγή συμβαίνει επειδή το πρόγραμμα περιήγησης ακόμα κάνει ακριβώς αυτό που της λέτε. Εντάξει. Έτσι, όλα αυτά είναι μόνο κείμενο. Τώρα, ας κάνουμε κάτι πιο ενδιαφέρον. Πάω να πάει μπροστά και να δανειστώ ένα μέρος αυτής της HTML. Πάω να πάει μπροστά και να δημιουργήσετε ένα νέο αρχείο εδώ. Και θα καλέσετε αυτό το rick.html. Έχουμε δυσανάλογα κάτι μεταχειρισμένα ρολό ονομάζεται Rick σε αυτό κατηγορία φέτος, δεν ξέρω, αυτό ακριβώς συνέβη με βιολογικό τρόπο. Και τώρα πήρε εκτός ελέγχου. Έτσι, είμαι απλώς πρόκειται να πάει με αυτό. Και αν πάω στο Google Εικόνες και Rick Astley. Αν δεν ξέρετε γιατί κάνουμε αυτό, απλά να διαβάσετε σχετικά με την Wikipedia. Κάθε φορά που κάνετε κλικ στο σύνδεσμο, κάποιος είναι ήδη γέλιο κάπου. Και επιτρέψτε μου να πάω εκεί ahead-- πάμε, ας δείτε αυτή την εικόνα. Έτσι, εδώ έχουμε ένα εικόνας στο Google Images. Και ας υποθέσουμε ότι αυτό είναι λογικά παντού στο διαδίκτυο. Έτσι, Πάω να υποθέσουμε ότι είναι εντάξει για μένα να θέσει πραγματικά αυτό στην ιστοσελίδα μου. Πάω να πάει μπροστά και αντιγράψτε το URL της εικόνας. Και τώρα αν πάω πίσω στο Cloud 9, ας δούμε τι μπορώ να κάνω εδώ. Έτσι, εδώ είναι απλά μια ιστοσελίδα. Αυτό είναι Rick Astley, χαχα, Πάω τώρα να πάω πίσω στο πρόγραμμα περιήγησής μου, να φορτώσετε εκ νέου, και ενδιαφέρουσα. Πού είναι ο Rick; Έτσι, επιτρέψτε μου να δούμε τι συνέβη. Στην πραγματικότητα, Πάω να προσποιούνται όπως δεν έκανα αυτό. [Δεν ακούγεται] τον έβαλε εδώ. Θα επανέλθω στο θέμα αυτό σε μια στιγμή. Τόσο εδώ είναι rick.html. Έτσι, αυτό δεν είναι Rick Astley. Έτσι αποδεικνύεται μπορούμε πραγματικά να τον προσθέσουμε εδώ. Αυτό είναι Rick Astley. Πάω να πω να μου δώσει μια εικόνα της οποίας πηγή είναι η ιστοσελίδα που μόλις αντιγράψατε, το οποίο προφανώς είναι μια ευτυχής κάτι γενέθλια ή άλλες. Και τώρα πάω να κλείστε την ετικέτα όπως αυτό. Έτσι, αυτό ολοκληρώνει πολύ μεγάλη. Να σημειωθεί όμως ότι όλα έχω γίνεται είναι ανοικτό στήριγμα εικόνα, πηγή με ένα χαρακτηριστικό του αυτό. Και αυτό είναι ένα πραγματικά μεγάλο URL. Και στο τέλος, παρατηρήσετε αυτό. Γιατί έχω κάνει κάθετο γωνία βραχίονα αντί, όπως και κάθε άλλη ετικέτα, που έχει ένα ανοικτό βραχίονα IMG, έκλεισε βραχίονα; Απλώς πάρτε μια εικασία, ακόμη και αν δεν έχουν καμία απολύτως εξοικείωση με την HTML πριν. Έτσι είναι το πώς κλείνει η εντολή, αλλά γιατί μήπως δεν κάνει πραγματικά έξυπνο έχει νόημα να κάνουμε κάτι λίγο πιο verbose όπως κοντά την εικόνα; Ναι. Ναι. Απλά σημασιολογικά, δεν υπάρχει καμία αίσθηση της ξεκινώντας μια εικόνα και να τελειώνει μια εικόνα, είναι είτε υπάρχει είτε δεν είναι. Γι 'αυτό δεν έχει νόημα να αφήσει ένα κενό για οτιδήποτε άλλο στο εσωτερικό μιας εικόνας. Απλά δεν μπορούμε να το κάνουμε αυτό. Και έτσι η σύνταξη γενικά θα είναι ακριβώς να κάνει το κάθετο εσωτερικό της ανοικτής ετικέτας ή την ετικέτα έναρξης και στη συνέχεια χτύπησε Αποθήκευση. Έτσι, αν μπορώ τώρα να φορτώσετε εκ νέου αυτό το αρχείο, τώρα Έχω μια καλή ιστοσελίδα μαγείρεμα εδώ. Και θα μπορούσαμε σίγουρα πραγματικά ενοχλήσει τους ανθρώπους με την ενσωμάτωση, αντί όπως ένα σύνδεσμο στο YouTube. Και στην πραγματικότητα, κάθε φορά έχετε πάει ποτέ στο YouTube, και επιτρέψτε μου να πραγματικά λάθος Rick κυλήσει τον εαυτό μου εδώ. Έτσι Rick ρολό. Έτσι Rick roll-- Πάω να πάει εδώ. [Παίζει μουσική] Εντάξει, ένα άτομο άρεσε αυτό. Έτσι παρατηρήσετε όλο αυτό το διάστημα, εάν κάντε κλικ στο σύνδεσμο Share, μπορείτε φυσικά λάβετε τη διεύθυνση URL ώστε να μπορέσετε να ενσωματώσετε σε ένα μήνυμα ηλεκτρονικού ταχυδρομείου ή σε ιατροδικαστική εικόνα ή σε ένα πρόβλημα που ή σε μια διαφάνεια. Και τώρα, αν αντί να κάνετε κλικ στο embed, παρατηρήσετε ότι όλο αυτό το διάστημα, αυτά τα πράγματα ήταν εκεί. Πάω να πάει μπροστά και να αντιγράψετε αυτό. Και μόνο έτσι μπορούμε να το δούμε καλύτερα, είμαι πρόκειται να το επικολλήσετε στο πρόγραμμα επεξεργασίας κειμένου μου. Σημειώστε ότι αυτό τι Το YouTube έχει να σας πω. Κάθε φορά που επισκέπτεστε ένα Βίντεο από το YouTube, αν θέλετε να ενσωματώσετε το βίντεο στον υπολογιστή σας ιστοσελίδα, απλά να αρπάξει αυτό. Έτσι, αυτό είναι ένα ακόμη Ετικέτα HTML που ονομάζεται iframe. Ή ένα στο πλαίσιο της γραμμής. Έτσι φαίνεται πάρα πολύ λίγο περισσότερο σύνθετη από όλους τους άλλους. Έτσι αποδεικνύεται ότι η εικόνα ετικέτα και προφανώς η ετικέτα iframe λαμβάνουν τα λεγόμενα χαρακτηριστικά. Και αυτό είναι μια άλλη κομμάτι της σύνταξης σε HTML. Εκτός από την ετικέτα του όνομα, ανοικτό στήριγμα όνομα ετικέτας, μπορείτε να ελέγξετε τη συμπεριφορά της ετικέτας έχοντας ένα σωρό χαρακτηριστικού ισούται με την αξία. Χαρακτηριστικό είναι ίση αξία. Και έτσι, για παράδειγμα, Το YouTube μας λέει αν θέλετε το πλάτος αυτού του βίντεο να είναι 420 pixels και το ύψος να είναι 315 pixels, που είναι πώς να το εκφράσει σε μορφή HTML. Η πηγή του βίντεο πρόκειται να είναι τόσο πολύ το URL του YouTube και, στη συνέχεια, κάποια άλλα πράγματα όπως περίγραμμα πλαισίου είναι μηδέν, έτσι ώστε κατά πάσα πιθανότητα σημαίνει ότι υπάρχει χωρίς περίγραμμα γύρω από το θέμα. Να επιτρέψει την πλήρη οθόνη πιθανώς σημαίνει ότι ο χρήστης να κάνετε κλικ σε ένα κουμπί και στην πραγματικότητα πλήρη οθόνη το βίντεο. Έτσι, αν θέλω πραγματικά να είναι εντυπωσιακό εδώ στο Rick dot HTML, αντί να χρησιμοποιήσει την ετικέτα εικόνας, αφήστε Θέλω να διαγράψετε ότι, αντί να επικολλήσετε αυτό. Και τώρα reload. Και τώρα εδώ είμαστε πάλι. Εντάξει, αυτό είναι αρκετό. Εντάξει έτσι θα προσπαθήσω δεν είναι δύσκολο να το κάνουμε αυτό και πάλι. Λοιπόν, τι είναι μερικά από τα φαστ φουντ εδώ; Έτσι HTML, ως άσχημο όπως αυτές τις ιστοσελίδες είναι, στην πραγματικότητα είναι αρκετά απλή. Δεν είναι μια γλώσσα προγραμματισμού. Δεν έχει λειτουργίες. Δεν έχει βρόχους. Δεν έχει προϋποθέσεις. Το μόνο που έχει είναι δεκάδες διαφορετικές ετικέτες, καθένα από τα οποία έχει μηδέν ή περισσότερα χαρακτηριστικά. Και στην πραγματικότητα, αυτό που είναι διασκεδαστικό για HTML όπως μπορείτε να αρχίσετε να βουτήξει είναι ότι είναι πολύ αυτο teachable. Το μόνο που χρειάζεται είναι η κατανόηση του γενικού πλαισίου της HTML. Τι είναι μια ετικέτα, αυτό είναι ένα χαρακτηριστικό, πως μπορείτε πραγματικά να διαμορφώσετε μια ιστοσελίδα ως εξής. Και όλα τα άλλα είναι στην πραγματικότητα το αποτέλεσμα του κοιτώντας ψηλά σε ένα online αναφοράς ή googling πώς να το κάνουμε κάποια τεχνική ή όπως έχουμε δει, κοιτάζοντας την πηγή του Facebook κώδικα, κοιτάζοντας μια ιστοσελίδα ότι σας αρέσει σε αυτό είναι πηγαίο κώδικα και την κατανόηση του πώς οι προγραμματιστές εκεί πραγματικότητα που τα πράγματα έξω. Έτσι, μπορούμε να κάνουμε τις εικόνες, καθώς και. Και στην πραγματικότητα, το κάναμε πριν από λίγο. Επιτρέψτε μου να πάω μπροστά και απλά να σας δείξω. Εδώ είναι μερικά δείγματα κώδικα. Αν ποτέ θέλετε να δείτε γκρινιάρης γάτα. Έτσι παρατηρούμε ότι μπορώ έχουν μια ετικέτα εικόνας εδώ. Και έχω ένα σχόλιο πάνω από αυτό. Έχω μια εναλλακτική λύση το κείμενο για την προσβασιμότητα. Έτσι, κάποιος που είναι με τη χρήση μιας οθόνης αναγνώστη για λόγους όρασης μπορεί πραγματικά να έχουν στη συνέχεια τους ανάγνωσης οθόνης λένε γκρινιάρηδες γάτα. Διότι εάν δεν μπορούν δείτε την εικόνα, που μπορούμε τουλάχιστον να έχουμε τον υπολογιστή τους να τους πει προφορικά τι είναι. Και η πηγή του αρχείου είναι cat.jpeg. Έτσι, στην πραγματικότητα, αν ήθελα πραγματικά να πάρετε έξυπνο, τι θα μπορούσα να έχω done-- Υπόσχομαι να μην πάει σε Rick Astley, έτσι Πάω στο google για μια γάτα αντ 'αυτού. Και αν πάω στο Google Images εδώ, και θεωρούμε ότι ότι αυτή είναι μια εικόνα της γάτας μου. Ας υποθέσουμε ότι έχω τον έλεγχο κλικ ή το δεξί κλικ σε αυτό, κατά λάθος ανατριχιαστικό. Και cat.jpeg Πάω να αποθηκεύσετε στην επιφάνεια εργασίας μου. Επιτρέψτε μου τώρα να πάμε πίσω στο σύννεφο 9. Παρατηρήστε ότι εδώ, μπορώ να πάει να φορτώσει τα τοπικά αρχεία. Και αν μου αρπάξει αυτό αρχείο, cat.jpeg, προειδοποίηση ότι μπορώ να το μεταφέρετε και να το ρίξουν στο σύννεφο 9 και πρόκειται να φωνάζεις σε μένα εδώ. Επειδή έχουμε ήδη Σας δίνεται ένα αρχείο cat.jpeg, αλλά είναι εξαιρετικά εύκολο να πιάσε μια φωτογραφία που έχετε λαμβάνονται από το Facebook ή το Flickr ή παρόμοια και στην πραγματικότητα drag and drop το σε σύννεφο 9 και στη συνέχεια να το κάνει μέρος της δική σας προσωπική ιστοσελίδα ή πρόβλημα που επτά ή οκτώ, όπως θα δούμε σύντομα. Και στη συνέχεια, όταν επισκεφθείτε, τέλος, ότι η γάτα, υποθέτοντας ότι θα κατεβάσει την ίδια γάτα, ειδοποίηση that-- ότι ήταν αξιολάτρευτη. Τι θα δείτε είναι κάτι σαν αυτό το πρόσωπο εδώ. Έτσι τα αρχεία που αναφορά σε μια ιστοσελίδα μπορεί να είναι είτε τοπική στη δική σας λογαριασμό ή σε κάποιο απομακρυσμένο άλλο server όπως στην περίπτωση του Rick Astley φωτογραφία λίγο πριν. Έτσι, όταν else-- τι άλλο μπορούμε να κάνουμε εδώ; Έτσι, ας ρίξουμε μια ματιά στα παρακάτω. Ξέρετε τι είδους κρυώσει; Έχουμε μέχρι στιγμής έχει κάνει πολύ στατικές ιστοσελίδες. Θέλω να μπαχαρικό πράγματα ως εξής. Θέλω να κάνω τη δική μου μηχανή αναζήτησης. Έτσι για να κάνει μια μηχανή αναζήτησης, ας να προχωρήσει και να αρχίσει να κάνει αυτό. Πάω να πάει μπροστά και να δημιουργήσουν ένα νέο αρχείο που ονομάζεται search.html. Και έχουμε prefabed εκδόσεις σε απευθείας σύνδεση. Ωχ. Μην επικολλήσετε στο παράθυρο του τερματικού σας. Προκάτ εκδόσεις σε απευθείας σύνδεση. Και Πάω να ξεκινήσει ως εξής. Έτσι, εδώ είναι η αρχή της ένα αρχείο που ονομάζεται search.html. Πάω να το αποθηκεύσετε σε πηγαίο κατάλογο του σήμερα. Πάω να καλέσω αυτήν την αναζήτηση. Στην πραγματικότητα, θα κάνουμε το καλύτερο. CS50 αναζήτησης και στην πραγματικότητα το εμπορικό σήμα. Και τώρα, Πάω να πω κάτι σαν Η1 CS50 αναζήτησης. Και στη συνέχεια, εδώ κάτω, Η2 σύντομα. Και ακριβώς για να ανακεφαλαιώσουμε, H1 και Η2 σημαίνει ό, τι αντίστοιχα; Ναι, τόσο μεγάλη και τολμηρή, και δεν είναι τόσο μεγάλη, αλλά ακόμα τολμηρό. Έτσι, αν μπορώ να σώσει αυτό και να πάει πέρα ​​από εδώ, Ας δούμε το search.html αρχείο. Εντάξει, και αυτό είναι right-- [δεν ακούγεται]. Αναμονή. Ο David είναι συγκεχυμένη. Ω, αυτό είναι ακριβώς εκεί. Ο David είναι ένας ηλίθιος. ΕΝΤΆΞΕΙ. Έτσι, εκεί που είναι. Έτσι CS50 αναζήτηση σύντομα. Έτσι τώρα, ας συνθέτουν αυτό που κάναμε την περασμένη εβδομάδα. Όταν μιλήσαμε για το μηχανική χαμηλότερο επίπεδο HTTP. Και αυτές οι νέες ιδέες της HTML, η οποία απέχει μόλις Αυτή η γλώσσα σήμανσης, όπου μπορείτε πείτε ένα πρόγραμμα περιήγησης ακριβώς τι πρέπει να κάνετε και να εφαρμόσει τη δική μας μηχανή αναζήτησης. Έτσι, αντί απλά λέγοντας σύντομα, είμαι πρόκειται να εισαγάγει κάτι που ονομάζεται μια ετικέτα μορφή. Και σε αυτή τη μορφή, Πάω να έχουν κάτι σαν ένα πεδίο εισαγωγής. Και το όνομα αυτής της εισόδου πεδίο, Πάω να το ονομάσουμε Q. Και ο τύπος αυτό το πεδίο εισαγωγής Πάω να πω είναι απλά "κείμενο". Και ένα πεδίο κειμένου, όπως θα Βλέπετε, είναι απλώς ένα πλαίσιο κειμένου. Και έτσι δεν αισθάνονται εδώ για να οτιδήποτε στο εσωτερικό του σε αυτό το σημείο. Και έτσι είμαι απλώς πρόκειται για να κλείσει την ετικέτα με το ότι κάθετος δεξιά στην ίδια την ετικέτα. Και τότε Πάω να έχουν μια άλλη είσοδο. Τύπος εισόδου ισοδυναμεί με την υποβάλετε. Και τότε Πάω να κλείσετε αυτό ένα πάρα πολύ. Και τώρα είμαι πρόκειται να πάει πίσω εδώ. Και ήδη βλέπουμε, αν και αρκετά άσχημο, έχω Είναι η αρχή της δική μου σελίδα αναζήτησης εδώ. Στην πραγματικότητα, επιτρέψτε μου να προσπαθήσω να καθαρίσει αυτό επάνω λίγο. Αποδεικνύεται ότι για το είσοδος εδώ, μπορώ να έχω ένα άλλο χαρακτηριστικό που ονομάζεται κράτησης θέσης. Και ήθελα να δω κάτι σαν λέξεις-κλειδιά, ή πιο συγκεκριμένα, το ερώτημα για το q. Και παρατηρήσετε, τώρα, έχω Αυτό το είδος του γκρι κείμενο ότι εξαφανίζεται ως Μόλις αρχίσω να πληκτρολογείτε, αλλά είναι μάλλον κάτι έχετε δει σε άλλες ιστοσελίδες. Δεν μου αρέσει πραγματικά το κουμπί Υποβολή. Έτσι είμαι πραγματικά πρόκειται να δώσει το Κουμπί Υποβολή αξία της αναζήτησης. Και τώρα, αν φορτώσετε εκ νέου, παρατηρούμε ότι κουμπί μου γίνεται ονομάζεται αναζήτηση. Ξέρετε, εγώ πραγματικά δεν όπως το λογότυπο εδώ. Έτσι γεννήτρια Google γραμματοσειράς. Θέλω να μπαχαρικό αυτό επάνω περαιτέρω. Έτσι CS50 αναζήτηση. Επιτρέψτε μου να δημιουργήσω το δικό μου λογότυπο. Αυτό φαίνεται ωραίο. Έτσι, τώρα επιτρέψτε μου να σώσει αυτό το as-- έλα. Πού είναι αυτό που συμβαίνει; Εκεί. ΕΝΤΆΞΕΙ. Αναπάντητες αυτό. Αποθήκευση ως. Stupid προγράμματα περιήγησης. Stand by, θα πάμε να διορθώσετε αυτό μια για πάντα. Εκεί πάμε. Εντάξει. Λυπάμαι. Ρεπό. Τώρα αυτό είναι funky. Έξοδος από πλήρη οθόνη. Εντάξει. Τώρα, σαν ένα κανονικό πρόσωπο, Αποθήκευση εικόνας ως. Logo.gif. Τώρα θα πάω να μπω σε CS50IDE και Πάω να αρπάξει απλώς το λογότυπο, Πάω να το σύρετε σε μου πηγή επτά κατάλογο, αρχείο υπάρχει ήδη, είμαι εντάξει με αυτό. Έτσι, Πάω να το παρακάμψετε γιατί ήδη είχε. Και τώρα πώς μπορώ να απαλλαγούμε από αυτό; Ας πάμε μπροστά και να κάνουμε εδώ πηγή εικόνας ισούται logo.gif. Κλείστε αυτό. Αποθηκεύσετε. Και τώρα αν πάω πίσω στην αναζήτηση μου σελίδα, τώρα ψάχνει αρκετά καλό. Εντάξει, έτσι ώστε να μην έχει αρκετά κάνει κάτι χρήσιμο. Στην πραγματικότητα, επιτρέψτε μου να προσπαθήσω αναζήτηση για μια γάτα και να δούμε τι θα συμβεί. Γάτες. Ανάθεμα. Αυτό δεν είναι μόνο να λειτουργήσει, προφανώς. Έτσι ποια είναι η βασικό κομμάτι που λείπει εδώ; Δεξιά, ακόμα κι αν δεν ξέρετε οποιοδήποτε HTML, Έχω αρχίσει τη σήμανση μέχρι το έντυπο τηλέφωνο και το έχω πει πώς να πάρει εισροών, να μου δώσει ένα πλαίσιο κειμένου και ένα κουμπί υποβολής, τι κομμάτι είναι προφανώς λείπει; Ας υποθέσουμε ότι θέλουμε να πάρει πραγματικά αυτό το πράγμα λειτουργεί σωστά. Τι πρέπει να κάνουμε; Έχουμε ανάγκη να εφαρμοστεί το πίσω άκρο βάση δεδομένων ή η ίδια η μηχανή αναζήτησης, και ότι πρόκειται να πάρει ένα πάρα πολύ χρόνο, ειλικρινά. Έτσι θυμηθείτε αυτό που κάναμε την προηγούμενη φορά. Έτσι, αν ψάχνετε για κάτι στο Google και έχετε εκ των προτέρων απενεργοποιημένη, ανάκληση, άμεση έρευνα. Έτσι, επιτρέψτε μου να το βγάζεις έτσι ώστε αυτή η πραγματικά συμπεριφέρεται σαν ένα παλαιότερο πρόγραμμα περιήγησης του σχολείου, αν μπορώ τώρα ψάξετε για κάτι σαν τις γάτες, Υπενθυμίζουμε τι η διεύθυνση URL μοιάζει. Είναι αρκετά κρυπτική. Αλλά ενσωματωμένα εκεί, ανάκληση, είναι η αναζήτηση κάθετος. Ερωτηματικό q ισούται με γάτες. Και αυτό φαίνεται να μου δώσει ένα σωρό των αποτελεσμάτων αναζήτησης. Έτσι, ξέρετε τι Πάω να κάνω; Πάω να δανειστώ Google για μόλις ένα λεπτό. Πάω να πάει πέρα ​​από εδώ και θα πάω να πω ότι αυτό αποτελεί ενέργεια ή προορισμού, να το πω έτσι, θα πρέπει κυριολεκτικά να είναι το Google. Και η μέθοδος που ήθελα με τη χρήση θα είναι να πάρετε. Λοιπόν, τι είναι ενέργεια; Δράσης αλλόκοτα ονομάζεται, αλλά αυτό σημαίνει ότι μόνο που πρόκειται να χειριστεί η δράση αυτής της μορφής; Όταν κάνω κλικ στο κουμπί Αναζήτηση, όπου θα πρέπει το αποτέλεσμα να πάτε; Και αν εγώ τώρα πάω πίσω στη φόρμα μου εδώ και επαναλάβετε τη φόρτωση της ιστοσελίδας μου και τώρα αναζήτηση για κάτι σαν το σκύλο, παρατηρήσετε τώρα Έχω εκ νέου σε εφαρμογή της Google. Σωστά; Αν θέλω να ψάξετε για κάτι αλλιώς, λειτουργεί όχι μόνο για τα σκυλιά, λειτουργεί επίσης για τις γάτες. Λειτουργεί, επίσης, για CS50. Και εντάξει, αυτό είναι μόνο υπό whelming, έτσι δεν είναι; Εντάξει, αλλά λειτουργεί πραγματικά. Έτσι τι πραγματικά συμβαίνει; Έτσι έχω διδάξει browser μου, χρησιμοποιώντας HTML, για να πάρετε είσοδο από το χρήστη και στην πραγματικότητα να στείλετε αυτή τη συνεισφορά σε έναν απομακρυσμένο server μέσω HTTP. Και γιατί ο φυλλομετρητής μου κατανοεί HTTP, πραγματικά κατασκευάσει το URL, έτσι ώστε ό, τι Θα καταλήξετε πάνω στο πρόγραμμα περιήγησης, Παρατηρήστε τι συμβαίνει όταν έψαξα για το σκυλί. Αν κάνω κλικ αναζήτησης, παρατηρούμε ότι η διεύθυνση URL αλλάζει, όπως είχα την πρόθεση να google.com/search~~V ερώτημα ισούται με το σκυλί. Και αυτό γιατί με τη μορφή ξέρει, επειδή η μέθοδος είναι να πάρει, να προσαρτήσει απλά το URL εκεί. Τώρα, αυτές οι ιστοσελίδες είναι ακόμα άσχημο. Ας εισαγάγει ένα άλλο κομμάτι της σύνταξης, αν μπορούμε σήμερα. Και αυτό είναι κάτι γνωστό ως επικαλυπτόμενα φύλλα στυλ. Επιτρέψτε μου λοιπόν να ρίξουμε μια ματιά στο Αυτό το παράδειγμα εδώ και δείτε αν μπορούμε να συμπεράνουμε τι συμβαίνει. Αυτό είναι CSS0.html. Και αυτό είναι όπου τα πράγματα να πάρει λίγο άσχημο. Διότι, δυστυχώς, στον κόσμο του διαδικτύου, HTML από μόνη της δεν μπορεί να κάνει τα πάντα. Και έτσι, αν θέλετε να στυλιζάρω ιστοσελίδα σας, χρειάζεται πραγματικά να επικεντρωθεί η αισθητική με έναν διαφορετικό τρόπο. Έτσι, εδώ, έχω το σώμα του ιστού μου σελίδα στο εσωτερικό του οποίου είναι ένα μεγάλο div. Και ένα div σημαίνει ακριβώς διαίρεση. Έτσι είναι σαν μια σκέψη, αλλά δεν έχει τα ίδια σημασιολογία της παραγράφου του κειμένου. Αυτό σημαίνει απλά για να το πρόγραμμα περιήγησης, έρχεται εδώ μια μεγάλη ορθογώνια περιοχή του ιστού μου σελίδα, θέλω να το χειριστεί ειδικά. Τώρα, γραμμή 21 είναι που αρχίζει η div. Και απλά ρίξτε μια εικασία. Ποια είναι η επίδραση της γραμμής 21, σχετικά με την υπόλοιπο των περιεχομένων της σελίδας; Κεντράρισμα. Αυτά. Έτσι δεν έχουμε δει έναν τρόπο στην πραγματικότητα κεντράρισμα του κειμένου. Στην πραγματικότητα, μηχανή αναζήτησής μου, σε αντίθεση με την πραγματική της Google, ήταν όλα δικαιολογείται πάνω προς τα αριστερά. Και έτσι τώρα στην γραμμή 21, λέω, hey πρόγραμμα περιήγησης, δημιουργήστε ένα τμήμα της σελίδας. Απλά να μου δώσει ένα μεγάλο, αόρατο τετράγωνο. Αυτό είναι το πώς θέλω να σκεφτείτε την ιστοσελίδα. Και τότε στυλιζάρω ως ακολούθως. Μέσα από αυτά τα εισαγωγικά, τώρα, είναι μια δεύτερη γλώσσα Ορίσαμε σήμερα που ονομάζεται επικαλυπτόμενα φύλλα στυλ. Ευτυχώς, δεν είναι πολύ μια γλώσσα προγραμματισμού, Έτσι είναι πολύ περιορισμένες στο συντακτικό της, αλλά επίσης πολύ περιορισμένη λειτουργικότητα του λαμβάνοντας υπόψη ότι η HTML είναι όλα σχετικά με σήμανση ασφαλείας των δεδομένων μιας ιστοσελίδας και η δομή μιας ιστοσελίδας. CSS είναι γενικά περίπου το τελευταίο μίλι, η αισθητική, να πάρει το μέγεθος και το χρώμα και το τοποθέτηση ακριβώς δεξιά σε μια ιστοσελίδα. Και πράγματι, σχηματίζεται με βασικά ζευγάρια αξίας. Ένα ακίνητο όπως αυτό, το κείμενο ευθυγράμμιση, που ακολουθείται από μια άνω και κάτω τελεία, ακολουθούμενο από την αξία του ότι ιδιοκτησίας, η οποία στην προκειμένη περίπτωση είναι το κέντρο. Και τώρα μπορείτε να παρατηρήσετε μπορούν να φωλιάζουν αυτά τα πράγματα. Αν ήθελα πάντα σε ότι Έχω να επισημανθεί στο κέντρο, γι 'αυτό έχω γραμμή 21 και η αντίστοιχη γραμμή 31. Αλλά ας υποθέσουμε ότι τώρα θέλω να πω John Χάρβαρντ, Καλώς ήλθατε στην ιστοσελίδα μου. Σύμβολο πνευματικής ιδιοκτησίας Ιωάννη Χάρβαρντ. Και ας υποθέσουμε ότι θέλω το πρώτο του αυτές οι γραμμές να είναι αρκετά μεγάλη. 36 εικονοστοιχεία. Έτσι, αυτό είναι ένα αξιοπρεπές μέγεθος. Και ήθελα το βάρος του να είναι τολμηρή. Στη συνέχεια, όμως κάτω από αυτό, Θέλω μικρότερο κείμενο. Και κάτω από αυτό, θέλω ακόμα και το μικρότερο κείμενο. Λυπάμαι. Σήμερα αισθάνεται σαν ένα ρεπό. Έτσι τώρα, τι κάνω για να εκφράσω αυτό; Εδώ στη γραμμή 22 είναι ένα ενσωματωμένο div ή ένθετων div, αν θέλετε. Έχει πάρα πολύ τη δική του ετικέτα στυλ. Θα καθορίσετε ένα μέγεθος γραμματοσειράς 36. Μπορώ να ορίσω έναν βάρος γραμματοσειρά με έντονη γραφή. Εδώ κάτω, μπορώ να προσδιορίσω μόνο 24 pixels. Και τέλος, στη γραμμή 28, που προσδιορίζει 12. Έτσι ακριβώς όπως ένα γρήγορο έλεγχο λογικότητας και ως ανθρώπινο ανάγνωση αυτό, ποιες λέξεις στην οθόνη είναι στην πραγματικότητα πρόκειται να είναι με έντονα γράμματα; Ποιες γραμμές είναι πραγματικά τολμηρή; Απλά John Harvard. Σωστά; Επειδή ακριβώς η γραμμή 22 λέει hey πρόγραμμα περιήγησης, εδώ είναι ένα τμήμα της σελίδας. Κάντε το μέγεθος της γραμματοσειράς 36 σημείο. Κάντε το βάρος γραμματοσειράς τολμηρή. Μόλις φτάσετε το αντίστοιχη ετικέτα τέλους ή κλειστή ετικέτα στη γραμμή 24, ότι τα μέσα, hey πρόγραμμα περιήγησης, σταματήσουμε να κάνουμε ό, τι είναι αυτό που κάνει. Και ειδοποίηση να είναι σαφής, ακόμη και αν γραμμή 22 έχει όλα αυτά τα χαρακτηριστικά όπως το ύφος, όταν κλείστε την ετικέτα στη γραμμή 24, Σας αναφέρω μόνο το όνομα της ετικέτας. Δεν επαναλάβετε το στυλ λέξη ή κάτι που είναι μέσα από αυτά τα εισαγωγικά. Και έτσι αν εξετάσουμε αυτό το θέμα τώρα στο πρόγραμμα περιήγησής μου, ας ρίξουμε Μια ματιά στο τελικό αποτέλεσμα. Άσε με να φύγω μπροστά σε αυτό το αρχείο, το οποίο είναι CSS 0. Και εξακολουθεί να είναι αρκετά απλό, αλλά να πάρει αρκετά ενδιαφέρουσα. Αλλά τελικά του εκεί άλλα πράγματα που μπορώ να κάνω εδώ, και με κίνδυνο να καταστεί Αυτό το εντελώς αποτρόπαιο, Παρατηρούμε ότι κατά τη γνώμη μου το σώμα της ιστοσελίδας μου, Μπορώ να κάνω κάτι αστείο όπως bg ή το χρώμα του φόντου. Και γρήγορα, ποιο είναι το αγαπημένο σας χρώμα; Πράσινο άκουσα. Εντάξει. Έτσι τώρα, αν χτύπησα reload τώρα, έχουμε ένα πράσινο web σελίδα. Εντάξει, έτσι ώστε να μην είναι κακό. Και τώρα, αν θέλω να κάνω αυτό πραγματικά δροσερό, μπορώ να κάνω το χρώμα του κειμένου μου ακόμα και το κόκκινο. Ας δούμε λοιπόν τι αυτό μοιάζει. Τώρα ψάχνει αρκετά καλό. Και εδώ κάτω, αν πραγματικά θέλετε να το χάος με κάποιον ή αν θέλετε να ένας από εκείνους τους ανθρώπους που προσπαθεί να σας ξεγελάσει και να επισκεφθείτε ένα web σελίδα επειδή έχουν ξεγέλασε Google στη σκέψη ότι υπάρχει μια ολόκληρη δέσμη λέξεις-κλειδιά like-- ας δούμε, να φορτώσετε εκ νέου. Που πηγε? Και μας εκεί. Εντάξει. Έτσι λέω αυτό ως ένα μέρος, θα μιλήσουμε για αυτά τα πράγματα μέσα σε λίγες εβδομάδες όταν μιλάμε για της ασφάλειας, αν πράγματι ενσωματώσετε ολόκληρη ματσάκια λέξεις-κλειδιά σε μια ιστοσελίδα, ακόμα και αν δεν είναι ορατές σε μια ανθρώπινο, κάποιος όπως το Google, φυσικά, μπορεί ακόμα να βρει πραγματικά αυτό. Εντάξει, έτσι ώστε να είναι αρκετά ειδεχθή αρκετά γρήγορα. Και στην πραγματικότητα, δεν είναι όλα ότι πολύ σε αντίθεση με τη δική μου ιστοσελίδα σελίδα ως ένα προπτυχιακό, η οποία Άρχισα googling γύρω για να βρείτε προηγούμενες εκδόσεις των παλιών δικτυακών τόπων μου. Θα ήταν πολύ κακό. Στην πραγματικότητα, βρήκα ένα ακριβώς πριν το μάθημα. Αλλά υπάρχουν και χειρότερα εκεί έξω. Αυτό προφανώς ήταν μου αρχική σελίδα πίσω στο 1996. Προφανώς Νόμιζα ότι ήταν σκόπιμο να ζητήσει από τους ανθρώπους το όνομά τους προτού να μπορέσουν να πραγματικά να δείτε την ιστοσελίδα μου. Και τότε τους έδειξα κάτι ηλίθιο, κατά πάσα πιθανότητα. Θα σκάψουν περισσότερο για την επόμενη φορά. Αλλά για τώρα, ας να εξετάσει ένα κομμάτι του σχεδιασμού. Έχουμε μιλήσει για το στυλ. Και αυτή τη σελίδα μέχρι σήμερα και πιο ό, τι έχω γράψει είναι αρκετά καθαρό στυλιστικά. Αλλά τι γίνεται με το σχεδιασμό; Λοιπόν, υπάρχουν πολλά πλεονασμού σε ό, τι έχω κάνει εδώ. Έχω αναφερθεί η λέξη χρώμα σε μερικά σημεία. Έχω αναφερθεί το μέγεθος της γραμματοσειράς σε ένα ζευγάρι των τόπους και τολμηρό σε μια-δυο θέσεις. Και ουσιαστικά, είμαι συνεργασίας ανάμειξη δύο γλώσσες. Έχω HTML με ετικέτες μου και μου Χαρακτηριστικά και, στη συνέχεια, ξαφνικά, μεταξύ εισαγωγικά, έχω η δεύτερη γλώσσα σήμερα που ονομάζεται CSS, η οποία και πάλι, είναι ακριβώς αυτά Τα ζεύγη κλειδιών αξία ή τα ακίνητα διαχωρίζονται με άνω και κάτω τελεία. Αποδεικνύεται ότι πολύ όπως στη C, όπου θα μπορεί να αρχίσει να συνυπολογίσει κάποια κώδικα σε αρχεία κεφαλίδας, έτσι μπορούμε να κάνουμε το ίδιο σε μορφή HTML. Και ένα βήμα προς αυτό είναι ως ακολούθως. Σημειώστε ότι αυτή η έκδοση, είναι CSS1.html δομικά ακριβώς την ίδια ιστοσελίδα. Έτσι έχω ένα σωρό των divs, αλλά αυτή τη φορά, έχω πάρει απαλλαγούμε από το περιτύλιγμα div όπως θα δείτε. Και έχω δώσει αυτές τις τρεις divs κορυφή, μέση και κάτω, μοναδικά αναγνωριστικά. Αυτό είναι καλό, γιατί από δίνοντας αυτές τις διαιρέσεις της σελίδας μοναδικών αναγνωριστικών, Μπορώ να τους αναφορά και αλλού. Που? Λοιπόν, επιτρέψτε μου να μετακινηθείτε προς τα επάνω. Και μέχρι στιγμής, όποτε έχουμε εξετάσει επικεφαλής μιας ιστοσελίδας, τι είναι η μόνη ετικέτα που είχαμε στο ο επικεφαλής μιας ιστοσελίδας; Λίγο πιο δυνατά. Απλά ο τίτλος μέχρι στιγμής. Αλλά τελικά του εκεί μερικά άλλα πράγματα μπορείτε να βάλετε εκεί, ένα από τα η οποία έχει καλέσει μια ετικέτα στυλ. Έτσι, πριν από λίγο, κοιτάξαμε σε ένα χαρακτηριστικό στυλ. Βγάζει υπάρχει μια ετικέτα στυλ. Ανήκει στο εσωτερικό της ο επικεφαλής μιας ιστοσελίδας. Και σήμερα παρατηρούμε ότι αυτό που κάνω. Έχω στο εσωτερικό του αυτό ετικέτα στυλ το εξής. Είμαι κυριολεκτικά παραπέμπουν στη γραμμή 20 η το όνομα της ετικέτας που θέλω να στυλιζάρω. Τότε θα έχετε ανοίξει σγουρά τιράντες και έκλεισε σγουρά στήριγμα. Έτσι, παρόμοια στο πνεύμα με C, αλλά πάλι, αυτό δεν είναι μια συνάρτηση, αυτό είναι μόνο μια συντακτική λεπτομέρεια εδώ. Και τότε φυσικά, εγώ λέω το πρόγραμμα περιήγησης, hey πρόγραμμα περιήγησης, κάνει ολόκληρο το σώμα της σελίδας έχουν στοίχιση κειμένου του κέντρου. Και τότε αυτό που λέει το εξής. Γεια σου πρόγραμμα περιήγησης, αν δείτε μια HTML στοιχείο ή ετικέτα στην σελίδα που έχει ένα μοναδικό αναγνωριστικό των κορυφαίων, έτσι ώστε το σύμβολο δίεσης εδώ σημαίνει μόνο μοναδική ιδέα της κορυφής, προχωρήστε και να κάνει το μέγεθος της γραμματοσειράς του 36 και το βάρος της γραμματοσειράς τολμηρό. Γεια σου πρόγραμμα περιήγησης, ένα στοιχείο του οποίου ID είναι το μεσαίο, το κάνουν 24 pixels. Και hey πρόγραμμα περιήγησης, αν δείτε ένα ιδέα του πυθμένα, το 12 pixels κάνουν. Το αποτέλεσμα στο τέλος είναι ακριβώς το SAM. Αν πάω σε CSS 1, η σελίδα έχει την ίδια εμφάνιση. Αλλά είμαστε ένα βήμα προς ελαφρώς καλύτερο σχεδιασμό. Επιτρέψτε μου τώρα να επιστρέψω εδώ για να CSS2 και να δούμε τι άλλο έχω κάνει. Τώρα η σελίδα είναι πραγματικά, πραγματικά καθαρό. Στην πραγματικότητα, μπορώ να χωρέσει όλα το περιεχόμενο σε μια σελίδα εδώ. Αλλά τι νέα ετικέτα έχω εισήγαγε, προφανώς; Link. Και δεν είναι το καλύτερο όνομα για μια ετικέτα, επειδή δεν είναι μια σύνδεση με την έννοια ότι το ξέρουμε, αλλά αυτό σημαίνει μια σύνδεση σε κάποιο άλλο αρχείο. Αυτό είναι κάτι σαν απότομη περιλαμβάνουν C. Αυτός είναι ο τρόπος με τον HTML να πω hey πρόγραμμα περιήγησης, πάει να πάρει τα περιεχόμενα του το αρχείο που ονομάζεται css2.css. Η σχέση, για μένα, είναι ότι πρόκειται για ένα φύλλο στυλ. Και πράγματι, αυτό είναι το ένα από τα S σε στυλ επικαλυπτόμενα φύλλα μέσα. Αυτό είναι ένα φύλλο στυλ. Είναι ακριβώς το αρχείο κειμένου που περιέχει ένα σωρό ιδιοκτησίας. Είναι ένα σωρό στυλ ότι θέλετε να εφαρμόσετε σε μια σελίδα. Και έτσι αυτό είναι προφανώς αναφέρεται σε ένα δεύτερο αρχείο. Και αν μπορώ να ανοίξω αυτό, CSS2.css, παρατηρήσετε ότι όλα τα έχω κάνει Είναι αντιγραφή και επικόλληση όλων αυτό σε αυτό το αρχείο. Και τώρα, ακόμη και αν δεν έχετε κωδικοποιημένα αυτά τα πράγματα πριν, εξετάζουν ακριβώς με το παροιμιώδης καπέλο μηχανική σχετικά, γιατί αυτό είναι ένα καλύτερο σχεδιασμό πιθανότατα; Factoring από αυτές τις ιδιότητες CSS, τη θέση τους σε δικό τους αρχείο. Ακόμα κι αν λυθεί αυτό Πριν πρόβλημα, όπως πέντε λεπτά στην πρώτη έκδοση. Εμείς δεν έχουμε βελτιωθεί η σελίδα στυλιστικά, αυτό είναι ακριβώς καλύτερα σχεδιασμού κατά κάποιο τρόπο. Γιατί νομίζεις? Ναι. Πιο ευέλικτη πώς; Ναι. Έτσι, εάν θέλετε να πάτε πίσω και να αλλάξει τα πράγματα, τώρα, έχετε ένα μέρος όπου μπορείτε να αλλάξετε τα πράγματα. Και στην πραγματικότητα, κάτι όπως το πρόβλημα που επτά, όπου θα εφαρμόσουν μια ιστοσελίδα χρηματιστηριακές συναλλαγές, ότι πρόκειται να έχουν μια σωρό σελίδες. Και θα ήταν πραγματικά ενοχλητικό, αν αποφασίσετε, hm, Δεν μου αρέσει 24 εικονοστοιχεία, θέλω να είναι 28 pixels ή ελαφρώς μεγαλύτερο. Και τότε πρέπει να κάνουμε παγκόσμια βρείτε και να αντικαταστήσετε ή να ανοίξετε όλα τα αρχεία της ιστοσελίδας σας απλά να αλλάξει πραγματικά μία τιμή. Με factoring από αυτά τα στυλ σε ένα κεντρικό σημείο, τώρα μπορείτε να ανοίξετε ένα αρχείο κειμένου σε CS50IDE σε οποιοδήποτε πρόγραμμα, αλλάξετε, να το αποθηκεύσετε, και να γίνει. Έχετε πολλαπλασιάζονται εκείνα αλλαγές παντού. Και αυτό θα ήταν το ίδιο σε ένα αρχείο dot h, καθώς και. Έτσι, οποιεσδήποτε ερωτήσεις έτσι στιγμής σε αυτή τη σύνταξη; Εντάξει, έτσι έχουμε κάνει ό, τι φαίνεται εκτός από το να εφαρμόσει υπερσυνδέσμους. Και έτσι πάμε μπροστά και να το κάνουμε αυτό. Επιτρέψτε μου να προχωρήσει και δημιουργήσετε ένα νέο αρχείο εδώ. Πάω να το ονομάσουμε link.html, να θέσει στη σημερινή κώδικα. Και Πάω να κάνω ανοιχτό βραχίονα τύπου doc html. Παρεμπιπτόντως, αυτό το πράγμα με το κορυφή, η δήλωση αυτή του τύπου doc, είναι η μόνη που είναι περίεργα με το θαυμαστικό. Απλά πρέπει να το κάνουμε εκεί και σημαίνει ότι χρησιμοποιείτε HTML έκδοση 5. Παλαιότερες εκδόσεις του γλώσσα είχε πολύ περισσότερο χορδές που χρειάζεται για να τεθεί εκεί. Έτσι, εδώ είναι ένα παράδειγμα που ονομάζεται σύνδεση. Χρειάζομαι ένα σώμα της ιστοσελίδας μου εδώ. Και εδώ, a href ίσων ας πούμε HTTP://www.disney.com και το αγαπημένο μου ιστοσελίδα, θα σας πω. Εντάξει, έτσι, ένα πολύ αθώα, φιλική προς το χρήστη της σελίδας. Αν εγώ τώρα πάω σε κατάλογο μου απαρίθμηση εδώ και να ανοίξει link.html, έχουμε υπερ κειμένου. Και πράγματι, αυτό είναι όπου το H σε HTTP προέρχεται. Πρωτόκολλο μεταφοράς υπερκειμένου είναι σχετικά με τη μεταφορά κειμένων ότι έχει συνδέσμους προς άλλους πόρους. Και πράγματι, εδώ είναι το γνωστό, εάν ρετρό, μπλε λινκ με το ότι, αν πατηθεί, θα με οδηγήσει πράγματι σε Disney.com. Τώρα, Ω, αυτό είναι που βγαίνει σύντομα. Εντάξει, έτσι και τώρα, τι είναι μερικά των επιπτώσεων της αυτό; Και ειλικρινά, ο κόσμος αρχίζει για να πάρετε μια λίγο πιο εξοικειωμένοι και επίσης λίγο πιο τρομακτικό αλλά και λίγο περισσότερο αυτο υποστηριχθούν μόλις αρχίσετε να κατανοήσουν αυτά τα πράγματα. Επειδή οι πιθανότητες είναι, μερικοί από σας, αν πάτε μέσω του Gmail σας φάκελο ανεπιθύμητης αλληλογραφίας ή ακόμα και εισερχόμενά σας, έχετε ίσως πάρει κάποιο είδος ηλεκτρονικού ταχυδρομείου αυτό είναι που σας ζητά να αλλάξετε σας κωδικό ίσως ή ίσως επαληθεύσετε PayPal διαπιστευτήρια ή οτιδήποτε σας. Και στην πραγματικότητα, μπορεί να έχετε λάβει κάτι που όπως λέει κάντε κλικ εδώ για να επαναφέρετε τον κωδικό πρόσβασής σας PayPal. Και τώρα, παρατηρήστε, αν αυτό δεν είναι Disney.com αλλά όπως και badplace.com reload, σημειώστε ότι το κείμενο εδώ θα μπορούσε να πει απολύτως τίποτα. Και στην πραγματικότητα, αυτό είναι μόνο λόγια. Γιατί δεν μπορώ πραγματικά να είναι εξαιρετικά κακόβουλα και να πω http://www.paypal.com. Κάντε κλικ εδώ για να επαναφέρετε το PayPal σας κωδικό και τώρα να φορτώσετε εκ νέου. Αυτό φαίνεται αρκετά νόμιμο, σωστά; Θέλω να πω, εγώ δεν θα κάντε κλικ στο Ένα μήνυμα ηλεκτρονικού ταχυδρομείου που λέει ακριβώς αυτό. Αλλά ανακοίνωση η διχοτόμηση εδώ. Λέει www.paypal.com, και στην πραγματικότητα, περιμένετε ένα λεπτό, ξέρουμε ότι θέλετε το s για την ασφάλεια. Έτσι τώρα, πηγαίνετε στο www.paypal.com HTTPS, αλλά αν δεν έχετε κάνει πριν από αυτό, να πάρει στη συνήθεια της πλανάται πάνω από λίγο συνδέσμους εδώ. Και είναι δύσκολο να δούμε στην οθόνη εκεί, και δεν είναι όλα ότι πιο εύκολο εδώ. Αλλά εδώ μέχρι κάτω στην το μικροσκοπικό γωνία κάνει το πρόγραμμα περιήγησης πραγματικότητα σας ότι θα πάμε πω να badplace.com αντί Paypal.com. Τώρα, πού θα πάμε με αυτό; Όλα τα παραδείγματα που έχουμε κάνει σήμερα, έχουμε σκληρό κωδικοποιούνται και πληκτρολογήσει με το χέρι. Το διαδίκτυο είναι απίστευτα πληκτικός όταν το σκληρό σας κωδικοποιήσει τις ιστοσελίδες σας έτσι ώστε το περιεχόμενο είναι στατική και ποτέ αλλάζει. Φυσικά, όλοι μας αγαπημένες ιστοσελίδες σήμερα, είτε πρόκειται για το Gmail ή το Twitter ή Facebook ή οποιοδήποτε αριθμό άλλων είναι δυναμικές. Είναι αλλάζει ανταπόκριση στις εντολές του χρήστη ακριβώς όπως τα αποτελέσματα αναζήτησης του Google. Και έτσι, την Τετάρτη, αυτό που κάνουμε είναι αφήνουμε HTML και CSS εισαγωγή πίσω μας και παίρνουμε δεδομένο ότι τώρα γνωρίζουν αυτό και έχουμε εισαγάγει μια νέα γλώσσα προγραμματισμού που ονομάζεται PHP, η οποία ήθελε C, πρόκειται να μας δώσει την εξουσία να δημιουργήσει πραγματικά προγράμματα ότι οι ίδιοι παράγουν έξοδο. Σε αυτή την περίπτωση, θα πρέπει να χρησιμοποιούν PHP για να δημιουργήσετε δυναμικά web σελίδες που χρησιμοποιούν αυτή τη νέα γλώσσα. Έτσι, περισσότερα για αυτό την Τετάρτη. Τα λεμε τοτε. [Παίζει μουσική]