DOUG LLOYD: Έτσι περάσαμε about-- αν τα μαθηματικά μου είναι σωστή, Και νομίζω ότι ψάχνει back-- νομίζω περάσαμε περίπου 35 βίντεο μιλάει σχετικά με διάφορες πτυχές της C, ίσως λίγο περισσότερο, ίσως λίγο λιγότερο. Και εμείς δεν καλύπτουν πάντα σε C, αλλά εμείς κάλυψε ένα μεγάλο κομμάτι της γλώσσα, η συντριπτική πλειοψηφία του, Σίγουρα για κοινές χρήσεις. Τώρα θα πάμε να μιλήσουμε για μια άλλη γλώσσα, HTML. Και θα πάμε να καλύψει αυτό σε ένα μόνο βίντεο. 

Αλλά αυτό πρόκειται να είναι εντάξει. Αυτό πρόκειται να γίνει πραγματικότητα κάτι που πρόκειται να το συνηθίσετε. Τώρα που έχετε το βασικές αρχές μιας γλώσσας, Είναι πραγματικά αρκετά εύκολο να ξεκινήσει την εκμάθηση άλλων. Έτσι θα πάμε για να ξεκινήσετε στο βήμα λίγο πίσω και αποσιωπήσει το βασικό διαφορές μεταξύ αυτών των γλωσσών και το είδος σας αφήσει σε αυτό. Υπάρχει πολλή πραγματικά μεγάλη πόροι στο διαδίκτυο, το οποίο θα πάμε για να αρχίσει η διεύθυνση σας προς γιατί το διαδίκτυο είναι μια τεράστια αποθήκη πληροφοριών. Και γι 'αυτό δεν σας αρέσει' ll να χάσει τον έλεγχο κατ 'ανάγκην με το να μην έχει την πληροφορία καλύπτεται σε ένα βίντεο. Θα εξακολουθεί να είναι σε θέση να πάρει ό, τι χρειάζεστε και χρήση η γνώση που έχετε ήδη δημιουργήθηκε με την κατανόηση C να κάνει την καμπύλη εκμάθησης για αυτά άλλες γλώσσες πραγματικά μια πολύ κολακεύει. Υπόσχομαι. 

Αλλά ας μιλήσουμε για μια γλώσσα αυτό είναι πραγματικά θεμελιώδους σημασίας για κάθε web σελίδα, η οποία είναι η HTML. HTML είναι το Hyper Text Markup Language. HTML είναι μια γλώσσα, αλλά είναι δεν είναι μια γλώσσα προγραμματισμού. 

HTML δεν έχει μεταβλητές. Δεν έχει λογική ή λειτουργίες ή κάτι τέτοιο. Δεν μπορούμε να κάνουμε οποιοδήποτε προγραμματισμού per se σε μορφή HTML. Μερικές φορές θα ακούσετε άνθρωποι περιγράφουν τους εαυτούς τους ως HTML προγραμματιστές, η οποία δεν είναι απολύτως ακριβής. Δεν μπορούν να γράψουν προγράμματα HTML. 

HTML χρησιμοποιείται μόνο για να επισημάνετε κείμενο. Αυτό λέγεται μια γλώσσα σήμανσης. Και τι είναι αυτό το does-- αυτό markup-- χρησιμοποιούμε τις ετικέτες HTML και σε αυτές τις tags-- Αυτό markup-- σημασιολογικά ορίζει την δομή μιας σελίδας και προκαλεί το απλό κείμενο που υπάρχει μεταξύ ετικετών πρέπει να ερμηνευθεί από τα προγράμματα περιήγησης με διαφορετικούς τρόπους. Και ίσως είναι καλύτερα να εξηγήσει αυτό μέσω μιας απεικόνισης. 

Εδώ είναι μια πολύ απλή σελίδα HTML, δεν ένα πρόγραμμα HTML, και πάλι, μια σελίδα HTML. Και ξέρουμε ότι είναι ένα Σελίδα HTML, διότι έχουμε οριοθετούνται τα πάντα με ετικέτες HTML. Έτσι, αυτό είναι ό, τι μια ετικέτα HTML μοιάζει. Είναι μεταξύ αγκύλες. Και παρατηρήσετε στην κορυφή έχουμε HTML και στο κάτω μέρος, αφού έχουμε κάνει ό, τι είναι προφανώς πολλά άλλα HTML, έχουμε γωνία του στηρίγματος κάθετο HTML. Έτσι, αυτό το είδος είναι το όριο μεταξύ του τι είναι η HTML και τι δεν είναι. Και φυσικά, συμβατικά, μόλις όπως σας έγραψε όλα τα προγράμματα C με επεκτάσεις dot C, όλα τα αρχεία HTML σας Θα τελειώσω με τελεία επεκτάσεις HTML. Αλλά εκεί είναι περισσότερο συμβαίνει εδώ. Δεν έχουμε μόνο αυτές τις ετικέτες HTML. Έχουμε προφανώς αυτό πράγμα που ονομάζεται μια ετικέτα κεφάλι. Λοιπόν, εντάξει, τι είναι αυτό; 

Καλά ίσως είναι καλύτερο να διακρίνει μέσω ενός σώματος, το σώμα είναι το περιεχόμενο της ιστοσελίδας. Έτσι, ίσως η ετικέτα της κεφαλής ορίζει πράγματα ότι δεν είναι στο παράθυρο του browser σωστή, αλλά είναι κάπως σημαντικό για μας Η ιστοσελίδα που αποδίδονται σωστά. Για παράδειγμα, στο εσωτερικό του ετικέτα κεφάλι έχουμε ετικέτες τίτλου. 

Έτσι τίτλο είναι hello world, ότι είναι πραγματικά πρόκειται να είναι αυτό εμφανίζεται στην καρτέλα στο Chrome ή σε σαφάρι ή Firefox-- Όποια και αν είναι το πρόγραμμα περιήγησης σας prefer-- ότι είναι τι πρόκειται να εμφανιστούν στον τίτλο. Και πριν καρτέλες θα δείξει σε όλο το παράθυρο του προγράμματος περιήγησης και μπορείτε να έχετε μόνο μία σελίδα ανοίξει σε ένα παράθυρο του προγράμματος περιήγησης σε έναν χρόνο. Έτσι, αυτό πρόκειται να είναι η τίτλος της σελίδας επάνω μου στην καρτέλα ή το μπαρ παράθυρο του προγράμματος περιήγησης, hello world. Και τότε το περιεχόμενο του μου Η ιστοσελίδα θα είναι παγκόσμια, γεια σου. Έτσι, ας ρίξουμε μια ματιά σε αυτό που ορισμένοι πράγμα όπως αυτό μπορεί να μοιάζει. Αυτή είναι μια αρκετά απλή σελίδα HTML. Έτσι, είμαι εδώ στο CS50 IDE μου και Έχω μεγεθυνθεί σε λίγο. Και είμαι απλώς πρόκειται να ανοίξει ένα γεια dot HTML και να σας δείξω ότι αυτό είναι λίγο πολύ το περιεχόμενο της σελίδας που είδαμε πριν. Απλά μου ετικέτες HTML, το κεφάλι, ετικέτες τίτλου, το σώμα, και ούτω καθεξής. Έχω εσοχή να είναι καθαρό. 

Και τότε τι μπορώ να κάνω μου IDE είναι μόνο προεπισκόπηση της σελίδας. Και εκεί θα πάμε. Το περιεχόμενο της σελίδας μου είναι ο κόσμος, γειά σου, και δεν βλέπω τίποτα Από τις ετικέτες κεφάλι εκεί. Είναι ακριβώς το περιεχόμενο του σώματος. Παγκόσμιο, γεια σου. Και πάλι το σώμα μόνο είπε, κόσμο, γειά σου. Το άλλο μέρος λείπει. 

Έτσι, αυτό είναι πραγματικά όλα είναι. Αυτή είναι μια πολύ απλή βασική σελίδα HTML. Τώρα έχω εσοχή HTML μου είναι πολύ όμορφο και οργανωμένο, αλλά δεν έχω πραγματικά να. Θα μπορούσε να φανεί πολύ άσχημο. Και αυτό θα εξακολουθεί να λειτουργεί. Αυτό θα είναι ακριβώς η ίδια ιστοσελίδα. Έχω μόλις πάρει απαλλαγούμε από όλο το λευκό κενό. 

Όπως αποδεικνύεται, άσπρο διάστημα είναι δεδομένα. Και έτσι, όταν θα στείλουμε τα στοιχεία από αποστολέα στο δέκτη, από το διακομιστή με τον πελάτη, τα δεδομένα κοστίζει χρήματα. Και έτσι για να απαλλαγούμε από κενό είναι πραγματικά μια καλή ιδέα εάν είστε κάποιος που υπηρετεί μέχρι μια πολύ περιεχόμενο ιστοσελίδων. Είναι μια κακή ιδέα, αν είστε κάποιος που είναι μάθηση αυτά τα πράγματα και θέλετε να έχετε αυτό πολύ καλά οργανωμένη. Αυτό είναι πολύ πιο εύκολο να αναλύσει από αυτό. Αλλά είναι λειτουργικά ισοδύναμες. 

Η οδόντωση και άλλα τέτοια στην πραγματικότητα δεν έχει σημασία σε μορφή HTML. Αυτό που έχει σημασία είναι το άνοιγμα και ετικέτες κλείσιμο ετικέτες με τη σωστή σειρά. Ανακοίνωση για το τι συνέβη εδώ, όμως. Η σήμανση μας δίνει έναν τρόπο να επικοινωνούν επιπλέον πληροφορίες σχετικά με το τι έχουμε γράψει. Το Hello, World μέρος ήταν ερμηνεύεται ως τίτλος. Και ο κόσμος, γεια μέρος ήταν ερμηνεύεται ως περιεχόμενο ή τι θα έπρεπε να είναι ορατή στην ιστοσελίδα μου. 

Υπάρχουν πάνω από 100 αυτών των διαφορετικών ετικέτες και πολλές εξαιρετικές πηγές σε απευθείας σύνδεση για να τα βρείτε. Εμείς πάμε να μιλήσουμε για μια μερικά από αυτά σε αυτό το βίντεο, μερικά του πραγματικά θεμελιώδη πράγματα. Αλλά εμείς δεν πρόκειται Συζήτηση για όλα αυτά επειδή θα ήταν εξαντλητική να το πράξουν. 

Ένα άλλο πράγμα που μπορείτε να κάνετε, όμως, είναι να ανοίξει τα εργαλεία για την ανάπτυξη. Και αν θυμάστε από βίντεο μας στο HTTP, Εξήγησα πώς να ανοίξει τα εργαλεία για την ανάπτυξη. Σε Chrome είναι συνήθως το πλήκτρο F12 να ανοίξει η γραμμή εργαλείων του έργου. Στη συνέχεια, αντί της επιλογής του Δικτύου καρτέλα, μπορείτε να επιλέξετε την καρτέλα Στοιχεία. Και αν φορτώσετε ένα web σελίδα, θα είστε πραγματικά δείτε την HTML που δημιουργεί αυτή την ιστοσελίδα. Και έτσι μπορείτε να μάθετε πολλά για HTML κοιτάζοντας αγαπημένες σας ιστοσελίδες και να δει πώς θα οικοδομήσουμε το διάφορα κομμάτια από αυτά που σας αρέσει. Έτσι, ίσως υπάρχει αυτό το δροσερό μοτίβο ή κάτι τέτοιο. Πώς θα το κάνουν με την HTML; Λοιπόν, μπορείτε απλά να ανοίξει προγραμματιστή σας εργαλείων και αιωρείται πάνω από το στοιχείο και να δούμε τι ακριβώς κάνει HTML. Οπότε αυτό είναι ένα πραγματικά καλός τρόπος για να μάθετε HTML, και συστήνω μπορείτε να το κάνετε, τόσο για να μάθουν HTML αλλά και να μάθει λίγο λίγο για κάποιες από τις επιλογές έχετε στη διάθεσή σας εργαλεία για την ανάπτυξη, η οποία σίγουρα θα έρθει σε πρακτικό όσο θα αρχίσει να κάνει πιο εντατική διαδίκτυο προγραμματισμού. 

Έτσι, ας ρίξουμε μια ματιά σε ένα ζευγάρι των κοινών ετικέτες HTML. Και θα βγάλουμε και ρίξτε μια ματιά ποιες είναι αυτές οι ετικέτες θα καταστήσει επίσης όπως κοιτάζοντας κάποια αρχεία στο IDE μου. Έτσι, εδώ είναι τρεις πολύ βασικές ετικέτες για μικροαλλαγές την οπτική εμφάνιση του κειμένου. Υπάρχει ετικέτες Β, Ι ετικέτες, ετικέτες και U. Και αντίστοιχα, αυτό που κάνουν είναι καθιστούν το κείμενο μεταξύ τους με έντονους χαρακτήρες, πλάγια γραφή, υπογράμμιση και. Ας δούμε τι θα δούμε όπως σε μια πραγματική ιστοσελίδα στο IDE μου. 

Έτσι, εδώ στο IDE μου έχω ένα αρχείο που ονομάζεται BIU dot HTML. BIU dot HTML είναι ακριβώς έντονα, πλάγια, υπογράμμιση. Θα το ανοίξουμε. 

Και θα δούμε πως εδώ έχουν αυτό το κείμενο είναι τολμηρή ετικέτες Β. Αυτό το κείμενο είναι πως ετικέτες πλάγια γραφή. Και το κείμενο αυτό είναι υπογραμμισμένο U ετικέτες. Τι είναι αυτή η μετάβαση να μοιάζει; Λοιπόν και πάλι, το μόνο που έχω να κάνετε είναι να πάτε εδώ στο πρόγραμμα περιήγησής μου, το πρόγραμμα περιήγησης στο αρχείο μου, κάντε κλικ στην επιλογή Προεπισκόπηση, και αυτό είναι αυτό που έρχεται. 

Το κείμενο ανάμεσα στο Β ετικέτες είναι πράγματι τώρα τολμηρή. Το κείμενο στο μεταξύ Ι ετικέτες είναι πράγματι τώρα πλάγια γραφή. Και το κείμενο ανάμεσα στο U ετικέτες είναι πράγματι τώρα υπογράμμισε. Έτσι, αυτό είναι πολύ καλό. Τώρα ξέρετε πώς να κάνετε το κείμενο κοιτάξουμε λίγο πιο φανταχτερό ή να σχεδιάσετε έμφαση σε ορισμένα πράγματα. Ένα άλλο ζευγάρι των κοινών ετικέτες εδώ παράγραφο ετικέτες, ετικέτες P, και την κεφαλίδα, την οποία έχω εδώ που παρέχονται ως HX. 

Αυτές οι ετικέτες P, αυτές οι ετικέτες παράγραφο, σπάσει το κείμενό σας επάνω σε παραγράφους. Δεν είναι αρκετό απλά να πατήστε Enter και να αφήσει χώρους, διότι ο υπολογιστής είναι μόνο για να κάνει αυτό που της λέτε να κάνουμε και αγνοεί λευκό χώρος για το μεγαλύτερο μέρος. Έτσι δεν μπορούμε απλά να πατήσετε Enter και αναμένουμε τον υπολογιστή μας να ερμηνεύσει ότι θέλουμε για να ξεκινήσετε μια νέα παράγραφο. Πρέπει να δηλώσω ρητά αυτό είναι ένα paragraph-- αυτό είναι another-- περικλείοντας το καθένα σε ένα σύνολο ετικετών P. 

Και έχουμε επίσης αυτές τις επιλογές για H ετικέτες, αυτές τις ετικέτες κεφαλίδας. Έχουμε έξι διαφορετικά επίπεδα του κεφαλίδες, ένα, δύο, τρία, τέσσερα, πέντε, έξι, τα οποία είναι προοδευτικά και μεγαλύτερα κεφαλίδες. Και παίρνουν μικρότερες και και μικρότερα και μικρότερα. Έτσι, έχουμε μια επικεφαλίδα ανώτερο επίπεδο, ένα δεύτερο κεφαλίδα επίπεδο, και ούτω καθεξής, και ούτω καθεξής. 

Ας ρίξουμε μια ματιά σε μερικά ίσως Ετικέτες P και μερικές ετικέτες κεφαλίδας σε δράση σε μια ιστοσελίδα. Έτσι, εδώ στο IDE μου έχω ένα αρχείο που ονομάζεται PH dot HTML, PH είναι παραγράφους και ετικέτες κεφαλίδας. Ανοίξτε το επάνω. Εκεί είναι μια παρτίδα σε εξέλιξη εδώ γιατί έχω βάλει κάποια lorem Ipsum, μερικά μόνο τυχαίο κείμενο εδώ. Γι 'αυτό θα σμίκρυνση λίγο επειδή υπάρχει τόσο πολύ να πάει στο. Να σημειωθεί όμως ότι έχω στο πολύ κορυφή εδώ έχω ένα Η1, ένα επίπεδο ένα, header ετικέτα. Στη συνέχεια, έχω μια παράγραφο, η οποία είναι μόλις μια δέσμη των τυχαίων text-- lorem ipsum-- η προεπιλεγμένη τυπική συμπλήρωση κειμένου. Έτσι έχω δύο σημεία στο εσωτερικό του ότι επίπεδο μία επικεφαλίδα και, στη συνέχεια, κάτω από Ι έχουν ένα επίπεδο δύο κεφαλίδα εδώ στη γραμμή 24, ένα δεύτερο επίπεδο κεφαλίδα, και άλλα δύο παραγράφους. Λοιπόν, τι σημαίνει αυτό μοιάζει με αν μπορώ να το δείτε σε προεπισκόπηση μου; Ας δούμε. 

Έτσι παρατηρούμε ότι η κεφαλίδα πρώτο επίπεδο εδώ είναι στην πραγματικότητα πολύ λίγο μεγαλύτερο από τη δεύτερη επικεφαλίδα επιπέδου. Γι 'αυτό και χρησιμοποιείται H1 ετικέτες. Και παρατηρώ ότι οι ετικέτες P μας επιτρέψει να σπάσει τα πράγματα σε παραγράφους. Αν είχαμε πάρει απαλλαγούμε από αυτά τα tags P και στην πραγματικότητα απλά βάλτε είσοδο ή Επιστροφές στο μεταξύ ό, τι ελπίζαμε ότι θα είναι οι διαφορετικές σκέψεις, όλοι θα μόλις slam μαζί και δεν θα έχουν αυτό το ωραίο παράγραφο διαχωρισμού με χώρο πάνω και κάτω. Και έτσι αυτό είναι που την παράγραφο ετικέτες και τις ετικέτες κεφαλίδας συνήθως χρησιμοποιούνται για να κάνουν για να επιστήσει προσοχή σε τμήματα της ιστοσελίδας μας με αυτόν τον τρόπο. 

Έπειτα επάνω είναι μερικές ετικέτες που χρησιμοποιούμε να χτίσει τις λίστες στην ιστοσελίδα μας. Έτσι έχουμε unordered lists-- ULs-- τα οποία είναι απλά λίστες με κουκκίδες, διέταξε καταλόγου που numbered-- OLs-- και στο εσωτερικό του είτε ένα από αυτά πρέπει να έχουμε σύνολα πώς να δείξει στοιχεία της λίστας, LI. Και έτσι έχουμε ανοιχτά ετικέτα UL και βάζουμε στοιχεία στο εσωτερικό του. Και στη συνέχεια, όταν τελειώσετε με ότι, μπορούμε να κλείσουμε την ετικέτα UL. 

Και ομοίως μπορούμε να έχουμε μια εντολή ή αριθμημένη λίστα και να θέσει τα στοιχεία λίστας μέσα από αυτό. Έτσι, ας ρίξουμε μια ματιά σε ένα ζευγάρι των καταλόγων και τι θα καθιστούν ως επί CS50 IDE. Έτσι έχω εδώ σε ένα IDE μου αρχείο που ονομάζεται λίστες dot HTML. Ας ρίξουμε μια ματιά. 

Και η ειδοποίηση εδώ έχω μια μη διατεταγμένη λίστα με πέντε πράγματα σε αυτό. Και τότε έχω μια διατεταγμένη λίστα, και Έχω αλλάξει η ετικέτα λίγο, έτσι δεν είναι; Έχω πει έναρξη ισούται με έξι. Αποδεικνύεται με μια ταξινομημένη λίστα μου να ορίσετε το σημείο εκκίνησης όπου Έχω want-- από προεπιλογή θα είναι ένα-- προσθέτοντας απλά αυτό το λεγόμενο χαρακτηριστικό να ΕΓ ετικέτα μου. Και έτσι αυτός ο κατάλογος θα αρχίσουμε να μετράμε σε έξι. Έτσι, τα στοιχεία αυτής της αριθμημένης λίστας θα πρέπει να είναι έξι, επτά, οκτώ, εννέα, δέκα, επειδή υπάρχουν πέντε στοιχεία στη λίστα, σε αντίθεση με ένα, δύο, τρεις, τέσσερις, πέντε, η οποία θα συνέβαινε αν είχα πει ΕΓ χωρίς να προσδιορίζει το χαρακτηριστικό εκκίνησης. 

Έτσι θα προεπισκόπηση ακριβώς αυτό ώστε να μπορείτε να πάρετε μια αίσθηση για το τι συμβαίνει εδώ. Και εκεί θα πάμε. Υπάρχει λίστα μου. Τα πρώτα πέντε στοιχεία είναι επιτυγχάνεται με την εντολή ή λίστες με κουκκίδες. Και τα επόμενα πέντε στοιχεία είναι μια ξεχωριστή διέταξε λίστα ξεκινώντας από έξι. Έτσι, αυτό είναι το πώς μπορούμε δημιουργήσετε τις λίστες χρησιμοποιώντας HTML. Ένα άλλο πράγμα που ίσως να θέλουν να κάνουν με την HTML έχει χτίσει έναν πίνακα πληροφορίες σειρών και στηλών να παρουσιάσει τις πληροφορίες σε μια οργανώνονται κυρίως τρόπο. Για να το κάνετε αυτό με την HTML μπορούμε να έχουμε μια πίνακας ορισμού αρχίζει ανοιχτό βραχίονα τραπέζι. Και στη συνέχεια στο εσωτερικό του εν λόγω πίνακα που θα μπορούσε να έχει ένα σύνολο γραμμών, ετικέτες TR να αναφέρει κάθε γραμμή. Και τότε TD tags πάει στο εσωτερικό των ετικετών TR για να καθορίσετε μια στήλη σε μια σειρά. 

Γιατί ονομάζεται TD και δεν TC; Λοιπόν, TD σημαίνει δεδομένα του πίνακα. Συνήθως βάζετε τις πληροφορίες σας εκεί. Έτσι, γι 'αυτό είναι η TD και δεν TC. Είναι λίγο συγκεχυμένη. 

Έτσι έχετε τραπέζι και ετικέτες στο εσωτερικό των ετικετών σας τραπέζι έχετε έναν αριθμό γραμμών, TRs. Και μέσα σε κάθε γραμμή που έχετε TDS για τον αριθμό των στηλών ότι θέλετε να έχετε στη συγκεκριμένη σειρά. Ας ρίξουμε μια ματιά σε ένα πολύ απλό πίνακα πάνω σε CS50 IDE. 

Έτσι έχω εδώ ένα αρχείο που ονομάζεται dot πίνακα HTML. Ας ρίξουμε μια ματιά στο τι μοιάζει. Ότι υπάρχει μια παρτίδα σε εξέλιξη εδώ, αλλά αν παρατηρήσετε έχω ένα ανοιχτό πίνακα. Αρχίζω με τον ορισμό πίνακα. Και στη συνέχεια, στην πρώτη μου σειρά μου προφανώς έχουν τέσσερις στήλες, ένα, δύο, τρία, τέσσερα. Και τότε είμαι γίνει με αυτή τη γραμμή. 

Τότε θα ξεκινήσει μια άλλη σειρά και κάνουν δύο, τέσσερις, έξι, οκτώ. Ολοκληρώστε αυτή τη γραμμή. Κάνετε μια άλλη σειρά, τρεις, έξι, εννέα, 12. Και στη συνέχεια μια τελευταία σειρά, τέσσερις, οκτώ, 12, και αν και είναι λίγο κόψει εδώ, 16. 

Τελείωσα αυτή τη γραμμή. Τελείωσα το τραπέζι. Και τότε είμαι γίνει με την HTML μου. Τι σημαίνει αυτό μοιάζει; Λοιπόν, δεν είναι πραγματικά πολλά να δείτε. Έχω οργάνωσε με σαφήνεια τα στοιχεία μου σε μια κάπως πιο οργανωμένο τρόπο. Αλλά δεν είναι σούπερ αρκετά εδώ. Και θα πάμε να ασχοληθεί με ότι όταν μιλάμε για CSS. Θα επανεξετάσουμε την ιδέα της τι κάνουμε για να κάνει μια table-- Ίσως να διαμορφώσετε λίγο καλύτερα; Αλλά εξακολουθώ να έχω τέσσερις σειρές, καθεμία από τις οποίες έχει τέσσερις στήλες, και πραγματικά αυτό που ισοδυναμεί αυτό να είναι ένα πολύ απλό τέσσερις από τέσσερις πολλαπλασιασμό τραπέζι. 

Μόλις λίγες περισσότερες ετικέτες θα μιλήσουμε για. Ας μιλήσουμε για το η έννοια της μια φόρμα HTML. Έτσι, μπορεί να έχετε δει αυτό το πλαίσιο της υλοτομίας σε μια ιστοσελίδα. Συνήθως πληκτρολογείτε το όνομα χρήστη σας. Πληκτρολογείτε τον κωδικό σας, και είστε καλοί να πάτε. Αυτό θα ήταν η αρχή μιας φόρμας. 

Παράκαμψη πάνω div ένα δευτερόλεπτο. Έχουμε, επίσης, οι εισροές που είδος χωρέσει μέσα του τις μορφές. Αυτά είναι τα στοιχεία που είστε πραγματικά την πληκτρολόγηση σε, ή τα κουμπιά επιλογής είστε σημειώνοντας, ή ο έλεγχος κουτιά που είστε χτυπάει μακριά. Έτσι, αυτά πάνε μέσα από μορφές. Και αποτελούν βασικά κάθε σειρά της μορφής εάν το έντυπο έχει μορφοποιηθεί καλά. Στη συνέχεια υπάρχει η έννοια της Α Τμήμα, το οποίο πραγματικά δεν έχει ταιριάζουν σε μια συγκεκριμένη κατηγορία ετικετών, όπως αυτά που έχω έχουν κάνει στο παρελθόν. Είναι ακριβώς το είδος του οριοθετεί το ξεκινώντας από κάποια τυχαία division-- div-- της σελίδας. Δεν υπάρχει καμία οπτική διάλειμμα. Δεν υπάρχει καμία γραμμή. Δεν είναι συμψηφιστεί ως ξεχωριστό κομμάτι αυτόματα. Θα έπρεπε να το στυλ με αυτόν τον τρόπο να το κάνουμε αυτό. 

Είναι ακριβώς το είδος του λέει θέλω ένα κομμάτι του χώρου στην ιστοσελίδα μου, και είμαι απλώς πρόκειται να καλέσετε ότι αυτή η διαίρεση της σελίδας μου. Μπορούμε να βάλουμε τα πράγματα στο εσωτερικό των divs, και στην πραγματικότητα, όταν το κεφάλι πάνω σε IDE σε ένα δεύτερο, θα βλέπουμε ότι βάζω μου σχηματιστεί στο εσωτερικό του ένα div. 

Έτσι έχω εδώ σε ένα IDE μου αρχείο που ονομάζεται div μορφή dot HTML. Ας το ανοίξουμε. Παρατηρήστε ότι, όπως είπα, div είναι το είδος της αυθαίρετης. Σωστά; Δεν σημαίνει τίποτα. Έτσι έχω μια αυθαίρετη πρώτο τμήμα της σελίδας μου. Και τότε αντί του άλλου div αργότερα, αρχής γενομένης από την γραμμή οκτώ, Έχω αυτή τη μορφή. Και στο εσωτερικό του εντύπου έχω μια αριθμό των εισροών, τα πεδία της φόρμας. Έτσι έχω ένα πεδίο του οποίου το όνομα είναι A-- πράγμα που δεν σημαίνει τίποτα δεξιά now-- ότι προφανώς λαμβάνει κείμενο, ένα άλλο που λαμβάνει έναν κωδικό πρόσβασης, ένα άλλο που είναι ένα ραδιόφωνο κουμπί, ένα άλλο που είναι ένα πλαίσιο ελέγχου, και ένα άλλο που είναι ένα κουμπί Υποβολή. Λοιπόν, τι κάνει αυτό όλα μοιάζουν στην πραγματικότητα; Λοιπόν, ας ρίξουμε μια ματιά. Θα το ανοίξουμε στο παράθυρο προεπισκόπησης μας. Σημειώστε ότι αυτό το αυθαίρετο πρώτη division-- υπάρχει καμία οπτική διαχωρισμός εδώ. Δεν έκανα τίποτα, σωστά; 

Και τότε έχω τη μορφή μου. Και εγώ δεν κάνω καμία ειδική μορφοποίηση. Έτσι, η μορφή είναι μόνο μία μεγάλη σειρά πληροφοριών. Αν είχα διαμορφωμένη φόρμα μου με διαφορετικό τρόπο, Θα ήθελα να έχουμε την γραμμή-γραμμή προς γραμμή. Αλλά εγώ δεν κάνω κανένα στυλ. Και πάλι, δεν μιλάμε για CSS εδώ. Εμείς μιλάμε μόνο για HTML. 

Λοιπόν σε μορφή κειμένου μου, μπορώ να type-- να θυμάστε ότι οι μορφές τύπου κειμένου έτσι μπορώ να βάλω το όνομά μου. Και τον κωδικό μου μπορείτε να πληκτρολογήσετε τον κωδικό πρόσβασης μου. Και επειδή αυτό το πεδίο Είναι κωδικό τύπου, δεν ξέρετε τι είναι το password μου. Είναι όλες οι κουκκίδες. 

Μπορώ επίσης να επιλέξετε να μαρκάρω ένα κουμπί ή ένα πλαίσιο ελέγχου μαρκάρω. Ή θα μπορούσε να υποβάλει τη μορφή μου. Και εγώ δεν έκανα τίποτα, έτσι ώστε όταν η υποβολή της φόρμας μου, η σελίδα ανανεώνεται μόνο. Αλλά θα μπορούσα ίσως να διαμορφώσετε μου Κουμπί Υποβολή για να κάνουμε κάτι άλλο. Και θα δούμε τι μπορούμε να κάνουμε με ότι σε μια μελλοντική βίντεο σε PHP. Αλλά αυτό δημιουργεί ένα πολύ απλή μορφή που μπορούν να χρησιμοποιήσουν για να έχουν οι χρήστες αλληλεπιδρούν και να υποβάλουν πληροφορίες στην ιστοσελίδα μας. 

Μια τελευταία παρατήρηση πριν να προχωρήσουμε σε κάποιες άλλες ετικέτες είναι να ρίξετε μια ματιά σε αυτό ετικέτα εισόδου για μια ακόμη φορά. Ανακοίνωση που έχω επισημανθεί τα άκρα της ετικέτας με κόκκινο χρώμα. Κάθε άλλη ετικέτα που έχουμε δει μέχρι τώρα έχει είχε μια αρχή και ένα τέλος, ένα άνοιγμα ετικέτα και ετικέτα κλεισίματος. 

Αλλά μια ετικέτα εισόδου δεν κάνει. Δεν υπάρχει κείμενο που πηγαίνει μεταξύ ετικέτες εισόδου. Όλες οι πληροφορίες εμείς σκοπεύουμε να το μεταφέρω δεσμεύεται ως μέρος της Χαρακτηριστικά αυτής της εισόδου. Ανακοίνωση έχουμε το όνομα εισόδου ισούται με x. Τύπος ίσο με y. Αυτό είναι πραγματικά όλα τα πληροφορίες που χρειαζόμαστε. 

Αυτό ονομάζεται tag τον εαυτό κλεισίματος. Δεν απαιτεί ένα άνοιγμα και ένα κοντά επειδή το σύνολο των πληροφοριών περιέχεται στο εσωτερικό του tag και τα χαρακτηριστικά του. Έτσι, μερικές φορές θα δείτε αυτό, πάρα πολύ. Έτσι ακριβώς πρέπει να γνωρίζουν ότι αν έχετε ένα ετικέτα που είναι εντελώς αυτόνομα, ανοίγει και κλείνει από μόνη της με το υποστήριγμα ανοικτή γωνία στην αριστερή και η γωνία κάθετο βραχίονα στα δεξιά. Θα δούμε άλλο ένα από εκείνα τώρα με ετικέτες εικόνα επίσης. 

Πριν μιλήσουμε για τις εικόνες, που Πρέπει να μιλήσουμε για υπερσυνδέσμους. Αν θέλουμε την ιστοσελίδα μας να είναι διαδραστικά και να κινηθεί γύρω μας, θα ήταν ωραίο να είναι σε θέση να κάνετε κλικ σε ένα από αυτά ό, τι συνήθως, μια μπλε λινκ. Αυτό είναι στην πραγματικότητα το πώς χτίζουμε μια υπερ-σύνδεση στην ιστοσελίδα μας. Και περιέργως υπάρχει μια άλλη ετικέτα HTML ονομάζεται σύνδεση, η οποία δεν είναι μια υπερ-σύνδεση. Μια εδώ σημαίνει άγκυρα, και αυτό είναι το πώς θα δείχνουν μια υπερ-σύνδεση. 

A href ισούται με x τα μέσα πάει να Η ιστοσελίδα X. Και τα πάντα μεταξύ της ανοικτής Μια ετικέτα και η στενή Μια ετικέτα είναι ό, τι πρόκειται να είναι ότι υπογράμμισε μπλε κείμενο που μοιάζει με ένα σύνδεσμο ότι είμαστε εξοικειωμένοι με. Κάτω από αυτό έχουμε μια ετικέτα εικόνας, η οποία είναι μια αυτο tag κλεισίματος για την εμφάνιση μια εικόνα που βρίσκεται στο Χ και να είστε σε θέση να αλλάξετε ότι η εικόνα με την ένδειξη πλάτος και ύψος και άλλα χαρακτηριστικά σε ότι dot dot dot εκεί. 

Στο κάτω μέρος εδώ έχουμε μια πολύ ενδιαφέρουσα ψάχνετε ετικέτα που δεν έχουν μια ετικέτα κλεισίματος. Είναι θαυμαστικό DOCTYPE HTML. Έτσι HTML ήταν γύρω από το αρχές του 1990 για την κατασκευή ιστοσελίδων, και θα φύγει υποστεί πολλές αναθεωρήσεις από τότε. Πιο πρόσφατα, το 2014 υπέστη μια αναθεώρηση που ονομάζεται HTML5, που είναι τώρα η τρέχουσα είδος de facto πρότυπο HTML. 

Για να υποδείξει ότι η ιστοσελίδα μας σελίδες είναι γραμμένα με HTML5, Αυτό είναι το πώς θα ξεκινήσετε. Μπορεί να παραληφθεί αλλά τι βασικά μέσα είναι δεν μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις ετικέτες που είναι το HTML5 ετικέτες, αυτές οι νέες ετικέτες. Γι 'αυτό και πάντα ξεκινούν αν είμαστε χρησιμοποιώντας HTML5. Και όλες οι ετικέτες που έχουμε μιλήσει για προηγουμένως δεν είναι HTML5 ετικέτες. Αλλά αυτό θα σήμαινε ότι HTML5 ετικέτες θα είναι παρόντες. Και έτσι έχουμε θαυμαστικό DOCTYPE HTML, η οποία Είναι στην αρχή της μας HTML αρχείο, και στη συνέχεια, μετά από αυτό το σημείο στην πραγματικότητα έχουμε HTML ανοιχτά tag και να προχωρήσει από εκεί. 

Το τελευταίο είναι ένα σχόλιο ετικέτας, που μοιάζει ελαφρώς διαφορετική, πάρα πολύ. Ξεκινά με γωνία βραχίονα θαυμαστικό παύλα εξόρμηση αλλά δεν αγκύλη. Στο μεταξύ των δύο αυτών στοιχείων υπάρχει είναι όπου μπορείτε να γράψετε τα σχόλιά σας. Και ας ρίξουμε μια ματιά σε εικόνες και τα σχόλια και τις συνδέσεις σε CS50 IDE. 

Έτσι έχω εδώ ένα αρχείο που ονομάζεται σύνδεσμος εικόνας dot HTML που θα πάω να ανοίξει. Και παρατηρήστε έχω ένα ζευγάρι των σχόλια εδώ στα σχόλια HTML μου. Έτσι ακριβώς όπως και στην C και άλλα γλώσσες προγραμματισμού, HTML απλά με το να είναι μια γλώσσα σήμανσης δεν έχουν τη δυνατότητα να έχουν σχόλια. Και έτσι είμαι προφανώς πρόκειται να τοποθετήσετε μια εικόνα του Rick Astley κάπου μεταξύ αυτής div ετικέτα, αυτή η αυθαίρετη διαίρεση. Προφανώς αυτό το αρχείο είναι που βρίσκεται στο Rick τελεία JPEG, η οποία αν έχουμε το κεφάλι πίσω πάνω δέντρο το αρχείο μου για ένα δευτερόλεπτο, είναι ένα αρχείο που υπάρχει στο ο τρέχων κατάλογος. Έτσι, αυτό είναι εντάξει. Μπορώ να γίνει αναφορά. 

Τότε μπορώ να φέρουν εσωτερικές συνδέσεις. Έτσι παρατηρήσετε στη γραμμή 11 εδώ href μου γεια τελεία HTML. Έτσι ώστε να αναφέρεται απλά ένα γεια dot HTML που υπάρχει στον τρέχοντα κατάλογο. Και μπορώ επίσης να έχουν εξωτερικά συνδέσεις με απλά καθορίζοντας HTTPS για να δείξει ότι δεν μιλάω για ένα αρχείο στο τρέχοντα κατάλογο μου. Μιλώ για ένα αρχείο που υπάρχει κάπου στο διαδίκτυο, το οποίο έχω να ζητήσει χρησιμοποιώντας το πρωτόκολλο HTTP. 

Έτσι, ας ρίξουμε μια ματιά σε ό, τι Αυτή η σελίδα μπορεί να μοιάζει και ετοιμαστείτε για μια φωτογραφία του Rick Astley να εμφανιστούν στην οθόνη σας. Γι 'αυτό θα προεπισκόπηση αυτό. Υπάρχει Rick Astley κατά τη κορυφή σε αυτό το αυθαίρετο διαίρεση έβαλα στην κορυφή. Και στη συνέχεια κάτω από Ι έχουν δεσμούς μου, σωστά; 

Έχω μια σύνδεση με γεια dot HTML. Και αν κάνω κλικ ότι, παίρνω κινείται πάνω σε αυτή τη σελίδα ότι είμαστε πολύ εξοικειωμένοι με από η αρχή του προγράμματός μας. Αν έχω εμφανιστεί ξανά αυτή τη σελίδα ανοιχτή, αν μου ποπ σύνδεσμος εικόνας ανοίξει για μια ακόμη φορά, Μπορώ επίσης να πάτε στο εξωτερικό στην ιστοσελίδα του CS50. Και εκεί εγώ θα see-- σμίκρυνση λίγο here-- θα δούμε CS50 στην ιστοσελίδα είδος ενσωματωμένο στο μέσον της σελίδας μας. Γι 'αυτό και ήταν σε θέση να κάνει μια εσωτερική συνδέουν καθώς και μια εξωτερική σύνδεση. 

Ο τελευταίος κανόνας με HTML που θα πάμε να μιλήσουμε για εδώ είναι ότι η HTML σας θα πρέπει να είναι καλοσχηματισμένα. Στην C μιλήσαμε πολύ για η σύνταξη των διαφόρων πραγμάτων. Στην HTML η σύνταξη πραγματικά περιστρέφεται γύρω από ετικέτες. Κάθε ετικέτα που θα ανοίξετε θα πρέπει να κλείσει. Και στην πραγματικότητα, κάθε ετικέτα που θα ανοίξετε θα πρέπει να κλείσει με την αντίστροφη σειρά. 

Έτσι, αν ανοίξετε μια τολμηρή ετικέττα, μια πλάγια γραφή ετικέτα, και στη συνέχεια μια υπογράμμιση ετικέτα να κάνει και τα τρία σε ένα συγκεκριμένο σύνολο των κειμένων, θα πρέπει να τα κλείσετε με αντίστροφη σειρά. Έτσι, αν ανοίξει τολμηρή, πλάγια γραφή, υπογράμμιση, μπορείτε θέλετε να κλείσετε υπογράμμιση, πλάγια γραφή. Αυτό το είδος της ενθυλάκωσης είναι ό, τι κρατά HTML ωραία και οργανωμένα. 

Σε αντίθεση με C, όμως, συντακτικά λάθη δεν θα πραγματικά να ακρωτηριάσουν HTML σας, ενδεχομένως. HTML σας μπορεί να μην είναι καλά σχηματίζεται, αλλά θα εξακολουθούν να εργάζονται. Και έτσι αυτά τα λάθη να ταξινομήσετε των διαφανειών από. Είναι στο χέρι σας πραγματικά να είμαστε προσεκτικοί. Μερικές φορές θα αποτύχουν, αλλά μερικές φορές μπορείτε να πάρετε μακριά με αυτό. 

Μπορεί να είναι ένα πραγματικά δύσκολο έργο, όμως, για να παρακολουθείτε όταν ανοίξατε μια ετικέτα, όταν το κλειστό, ιδιαίτερα ως HTML σας αρχεία πάρει όλο και μεγαλύτερες. Θα ήθελα κάποια βοήθεια. Και υπάρχουν σε απευθείας σύνδεση εργαλεία επικύρωσης που εσείς να χρησιμοποιήσετε για να ρίξετε μια ματιά στο διαδίκτυο σας σελίδα και να δούμε αν είναι καλά σχηματισμένες HTML. Και σίγουρα θα πρέπει να ρίξτε μια ματιά σε εκείνους και να αρχίσουν να τα χρησιμοποιούν, όπως σας αρχίσει να κάνει κάποια δουλειά με την HTML, γράφοντας HTML, ακριβώς έτσι μπορείτε να πάρετε κάποιες καλές συνήθειες σχετικά με την οργάνωση HTML σας σε ένα καλό δρόμο και καλό στυλ και να διασφαλίσουμε ότι δεν έχετε κάνει τίποτα που θα μπορούσε να δημιουργήσει ένα σφάλμα σύνταξης που θα προκαλέσει ένα κομμάτι της ένα πρόβλημα κάτω από το δρόμο. 

Είμαι ο Νταγκ Lloyd. Αυτό είναι CS50.