DAVEN FARNHAM: Σήμερα, είμαι πρόκειται να μιλήσουμε λίγο για HTML, HyperText Markup Language. Βλέπετε HTML παντού αυτές τις μέρες. Στην πραγματικότητα, αν το βλέπεις αυτό βίντεο σε ένα πρόγραμμα περιήγησης, είστε βλέποντας HTML τώρα. HTML δεν είναι μια γλώσσα προγραμματισμού, Αντιθέτως, είναι μια γλώσσα σήμανσης που χρησιμοποιείται από web browsers για να αποδώσει τις σελίδες στο διαδίκτυο. 

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

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

Έτσι, αυτό που έχουμε εδώ είναι μια βασική σχέδιο για μια ιστοσελίδα. Θα παρατηρήσει πιθανώς πολλά πράγματα ανάμεσα σε γωνιακές παρενθέσεις. Λοιπόν, αυτά είναι απλώς ετικέτες. Ετικέτες ενημερώνουν βασικά προγράμματα περιήγησης στο Web ότι, hey, κάτι έρχεται το δρόμο σας. Να θυμάστε όμως, κάθε φορά που ανοίγετε ένα ετικέτα, θα πρέπει να το κλείσει όταν είστε γίνει χρησιμοποιώντας αυτό. 

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

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

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

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

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

Λοιπόν, αυτό είναι αρκετά δροσερό, αλλά το είδος της θέλουν κάποιο κείμενο εδώ. Οπότε ας προσθέσω κάτι εξαιρετικά απλό πάνω από το εικόνα, όπως και η μπάλα. Όλα τα έχω κάνει μέχρι στιγμής είναι να χρησιμοποιήσετε την κεφαλίδα ετικέτα, H1, και ένα διάλειμμα γραμμή ετικέτα, br. Η ετικέτα κεφαλίδα κάνει το γραμματοσειράς λίγο λίγο μεγαλύτερο και πιο εμφανή. Η ετικέτα αλλαγής γραμμής, από την άλλη Αντίθετα, είναι είδος δροσερό. Σε αντίθεση με τις περισσότερες άλλες ετικέτες, δεν έχετε ένα άνοιγμα και το κλείσιμο διάλειμμα ετικέτα, απλά το ένα που δείχνεται παραπάνω. Αυτό συμβαίνει επειδή διάλειμμα δεν έχει περιεχόμενο και ως εκ τούτου, ένα άδειο στοιχείο. 

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

Τι Πάω να κάνουμε εδώ είναι να χρησιμοποιήσετε ένα γνώρισμα που συμβολίζεται με Α και να κάνει το εικόνα μια σύνδεση με, ας πούμε, CS50 τηλεόραση. Με αυτόν τον τρόπο, κάθε φορά που κάποιος κάνει κλικ σε μένα, browser τους θα κατευθυνθούν προς άλλο, ίσως περισσότερο χρήσιμο, web σελίδα. Είχα να ελαχιστοποιήσετε το μέγεθος της κείμενο λίγο γιατί ιστοσελίδα μας είναι όλο και πιο προηγμένες. Αλλά ευτυχώς, είναι ακόμη σαφής. Η ιστοσελίδα μου φαίνεται ακριβώς το ίδιο μόνο τώρα, κάθε φορά που κάνω κλικ πάνω στην εικόνα, browser μου θα ανοίξει ένα άλλο καρτέλα για την ιστοσελίδα CS50.tv. 

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

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

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

Έτσι, πήγαμε πάνω από τα βασικά για το πώς να κάνει μια ιστοσελίδα με HTML. HTML έχει ένα σωρό άλλα χαρακτηριστικά γνωρίσματα επίσης ότι όταν συνδυάζεται με άλλες γλώσσες όπως CSS και JavaScript, μπορεί πραγματικά να κάνουν τις σελίδες ξεχωρίζουν. Ο καλύτερος τρόπος για να πάρει άνετα με HTML είναι απλά να βρωμίσει γύρω με αυτό, να δούμε τι λειτουργεί και τι όχι. 

Το όνομά μου είναι Daven Farnham. Αυτό είναι CS50. 

Έτσι, για παράδειγμα, μπορώ να χρησιμοποιήσω η εικόνα τάξη - Όχι, υπάρχουν τόσα πολλά χαρακτηριστικά. Το όνομά μου είναι Daven Farnham. Αυτό είναι το CS 650. Θέλω να πω CSS. Αυτό είναι CSS.