Πώς να δημιουργήσετε μια σελίδα HTML

Βίντεο: Πώς μπορώ να φτιάξω μία ιστοσελίδα σε HTML;

Περιεχόμενο

Βήματα
Μέθοδος 1 από 1: Σύνταξη σελίδας HTML
Συμβουλές
Προειδοποιήσεις
Τι χρειάζεσαι

Η HTML (γλώσσα σήμανσης υπερκειμένου) είναι η κύρια γλώσσα προγραμματισμού για την ανάπτυξη ιστοσελίδων. Δημιουργήθηκε ως απλή και βολική γλώσσα προγραμματισμού. Οι περισσότερες σελίδες στο Διαδίκτυο έχουν αναπτυχθεί χρησιμοποιώντας μία από τις μορφές αυτής της γλώσσας (ColdFusion, XML, XSLT). Αφού διαβάσετε αυτό το άρθρο, μπορείτε να συνεχίσετε την εκπαίδευσή σας χρησιμοποιώντας άλλους πόρους στο Διαδίκτυο. Προσπαθήστε να αναζητήσετε στο Διαδίκτυο άλλα άρθρα που σχετίζονται με αυτό το θέμα.

Βήματα

Μέθοδος 1 από 1: Σύνταξη σελίδας HTML

1 Πριν ξεκινήσετε να εξοικειωθείτε με ένα από τα βήματα που παρουσιάζονται εδώ, ανατρέξτε στην ενότητα "Τι θα χρειαστείτε".
2 Τι πρέπει να γνωρίζετε πριν αρχίσετε να καταλαβαίνετε αυτό το ζήτημα:
3 Τα βασικά. Έχετε ακούσει ποτέ για την ετικέτα; Η ετικέτα περιβάλλεται από γωνιακές αγκύλες, με τη λέξη μέσα. Η τελική ετικέτα γράφεται με την ίδια μορφή, αλλά με την προσθήκη μιας κάθετης γραμμής μετά την πρώτη γωνιακή αγκύλη. Ένα χαρακτηριστικό είναι μια προαιρετική λέξη σε μια ετικέτα που χρησιμοποιείται για την προσθήκη λεπτομερειών σε μια ετικέτα.
4 Η αρχή του εγγράφου. Σε όποιο πρόγραμμα επεξεργασίας κειμένου χρησιμοποιείτε, επικολλήστε τα παρακάτω:
html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
Η ετικέτα πρέπει να κλείσει με την ίδια ετικέτα, αλλά με κάθετο μετά την πρώτη γωνιακή αγκύλη. Υπάρχουν εξαιρέσεις όπως οι ετικέτες META ή DOCTYPE.
5 DOCTYPE
- Συνήθως, οι περισσότερες ιστοσελίδες έχουν οριστεί DOCTYPE ». Αυτό βοηθά στον προσδιορισμό της κωδικοποίησης καθώς και στον τρόπο με τον οποίο θα γίνει αντιληπτή από τα προγράμματα περιήγησης ιστού. Οι περισσότερες σελίδες θα λειτουργήσουν χωρίς αυτό, "αλλά αυτό είναι απαραίτητο εάν θέλετε να ταιριάζουν (Ρυθμίζουν τους τύπους κωδικοποιήσεων στο Διαδίκτυο και τον τρόπο χρήσης τους)... Το DOCTYPE για HTML 4.01 παρουσιάζεται παρακάτω:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Αυτό είναι ένα από τα πιο κοινά Το DOCTYPE χρησιμοποιείται σε σελίδες σε όλο το Διαδίκτυο.Αρχικά, υποδεικνύει τον τύπο της σελίδας που περιγράφει το «html», στη συνέχεια επισημαίνει τον τύπο της κωδικοποίησης και τέλος, τη θέση του DOCTYPE, το οποίο ως αποτέλεσμα, περιγράφει τη σελίδα για το πρόγραμμα περιήγησης ιστού.
- Υπάρχουν διάφοροι τύποι HTML (διαφορετικές εκδόσεις που αναπτύχθηκαν με την πάροδο των ετών), για παράδειγμα χρησιμοποιώντας νέες ετικέτες ή συγκεκριμένες ετικέτες. Ορισμένες ετικέτες έχουν καταργηθεί (αντ 'αυτού χρησιμοποιούνται άλλες πιο χρήσιμες ετικέτες).
- β> και εγώ> - αυτό επιβάλλεται επί του παρόντος στις ετικέτες, επειδή χρησιμοποιούνται για τη μετατροπή κειμένου, αλλά όχι προδιαγραφών, με αποτέλεσμα άλλες ετικέτες να τις αντικαταστήσουν. Ετικέτα δυνατό> είναι αντικατάσταση για β>, και εμ>, αντικατάσταση για εγώ>.
- Είναι σημαντικό οι προηγούμενες ετικέτες να αντικατασταθούν με ετικέτες που είναι περισσότερες από τη μορφοποίηση. Εάν το κείμενο μεταφραστεί, τότε όχι μόνο η μορφοποίηση, αλλά και η σημασία του παραμένει η ίδια. Αυτό είναι σημασιολογικά σωστό.
- Στην έκδοση XHTML 2.0, τα b> και εγώ> δεν χρησιμοποιείται, όπως στην έκδοση HTML 3+.
6 HTML "Κανόνας ενθυλάκωσης".
- Ας ρίξουμε μια ματιά στις πιο σημαντικές ετικέτες που χρησιμοποιούνται αυτήν τη στιγμή. Κατά τη δημιουργία της σελίδας, χρησιμοποιείται μια απλή δομή. Εάν ανοίξει μια ετικέτα, τότε ως αποτέλεσμα, πρέπει να κλείσει... Αυτό ισχύει για ολόκληρη τη δομή. Ακολουθεί ένα έγκυρο παράδειγμα της δομής διάταξης XHTML:
- ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- html xmlns = "http://www.w3.org/1999/xhtml">
- κεφάλι>
- meta http-equ = "Content-Type" content = "text / html; charset = utf-8" />
- title> Hello World! / title>
- / head>
- σώμα>
- h1> Hello World! / h1>
- / body>
- / html>
- Δείγμα κώδικα που εκδίδει μήνυμα Γειά σου Κόσμε... Αυτό ονομάζεται δοκιμή Γειά σου Κόσμε.
7 Επικεφαλίδα
- Ο τίτλος της ιστοσελίδας είναι το περιεχόμενο μεταξύ της ετικέτας κεφάλι>... Αυτό το περιεχόμενο δεν μπορεί να προβληθεί από τον χρήστη (μόνο ο τίτλος που εμφανίζεται στον τίτλο της σελίδας). Πληροφορίες μεταξύ ετικετών κεφάλι>, μπορεί να περικλείει άλλες ετικέτες, όπως:
  - Η ετικέτα META χρησιμοποιείται για πληροφορίες που είναι χρήσιμες για τις μηχανές αναζήτησης και άλλα βοηθητικά προγράμματα.
  - Ετικέτα LINK που δημιουργεί έναν σύνδεσμο μεταξύ εγγράφων, για παράδειγμα για Styles (CSS).
  - Ετικέτα SCRIPT, αυτό περιλαμβάνει σχεδόν οποιαδήποτε κωδικοποίηση ιστού, με δυνατότητα απομακρυσμένης πρόσβασης (από άλλο έγγραφο).
  - Η ετικέτα STYLE, η οποία είναι ουσιαστικά ένα στυλ που μπορεί να εφαρμοστεί σε μια σελίδα.
  - Η ετικέτα TITLE είναι ο τίτλος που εμφανίζεται ως τίτλος μιας σελίδας στο πρόγραμμα περιήγησής σας.
- Ας δούμε μια επίδειξη μερικών από αυτά σε ένα παράδειγμα κεφαλίδας που έχει ληφθεί από αυτόν τον ιστότοπο (έχει συντομευτεί):
  - κεφάλι>
  - τίτλος> ... / title>
  - meta name = "description" content = "..." />
  - σύνδεσμος rel = "stylesheet" type = "text / css" href = "..." />
  - meta http-equ = "content-type" content = "text / html; charset = UTF-8" />
  - style type = "text / css" media = "all"> ... / style>
  - script type = "text / javascript" src = "..."> / script>
  - / head>
    
    Σε περίπτωση που δεν το έχετε παρατηρήσει, οι μεμονωμένες ετικέτες έχουν επισημανθεί, με τις πραγματικές πληροφορίες να έχουν αφαιρεθεί. Το παράδειγμα είναι μάλλον σύντομο, εμφανίζει σχεδόν κάθε ετικέτα που μπορείτε να βρείτε κεφάλι>εκτός από το σχόλιο HTML (Θα μιλήσουμε για αυτό σε απλές ετικέτες).
8 Απλές ετικέτες παντού
- Ας προχωρήσουμε και θα δούμε άλλες ετικέτες. Να είστε προσεκτικοί με την προσθήκη ετικετών και να θυμάστε τον βασικό κανόνα, "Ενθυλάκωση".
  - Ισχυρό> Δίνει έμφαση σε σημαντικό κείμενο.
  - small> Κάνει μικρότερο το κείμενο. Το μέγεθος γραμματοσειράς μετριέται σε τυπικές μονάδες από 1 έως 7, το 3 είναι το προεπιλεγμένο μέγεθος κειμένου. ...
  - pre> Ορίζει ένα μπλοκ πλούσιου κειμένου. Όπως είναι σωστό, ένα τέτοιο κείμενο πληκτρολογείται με γραμματοσειρά ίδιου μεγέθους και με όλα τα κενά μεταξύ των λέξεων.
  - em> Εμφανίζει το κείμενο ως φράση.
  - del> Βγάζει κείμενο.
  - ins> Ορίζει το κείμενο που έχει εισαχθεί στο έγγραφο.
  - h1> Μία από τις πολλές ετικέτες επικεφαλίδας. Ετικέτες αυτού του είδους ξεκινούν με 'h', με διαφορά στον αριθμό. Βεβαιωθείτε ότι έχετε κλείσει την ετικέτα με τον ίδιο αριθμό.
  - p> Ορίζει μια παράγραφο.
  - ! --- ... ---> Σε αντίθεση με άλλες ετικέτες, το σχόλιο πρέπει να βρίσκεται μέσα στην ίδια την ετικέτα. Αυτές οι πληροφορίες είναι ορατές μόνο όταν προβάλλεται ο κώδικας.
  - blockquote> Εμφανίζει ένα απόσπασμα, μπορεί να χρησιμοποιηθεί με την ετικέτα cite>.
  - Τα λίγα παραπάνω παραδείγματα δεν αποτελούν πλήρη λίστα με υπάρχουσες ετικέτες. Για να μάθετε για άλλους, επισκεφθείτε.
9 Δημιουργία σαφούς δομής
- Οι σελίδες έχουν σχεδιαστεί για να συγκρατούν δεδομένα σε απλά σύνολα ετικετών, ώστε να μπορούμε να αναλύσουμε τις πληροφορίες σε παραγράφους. Ο υπολογιστής αναγνωρίζει δεδομένα · δεν γνωρίζει για περιβάλλον ή εννοιολογική σύνδεση. Πρέπει να δημιουργήσουμε σελίδες HTML φιλικές προς τον υπολογιστή. Αυτό επιτυγχάνεται με τη χρήση της ετικέτας div. Βοηθά στη δημιουργία τεράστιου αριθμού σελίδων. Μπορεί να διαμορφωθεί με CSS και είναι ευκολότερο από τη δημιουργία μεγάλων πινάκων κώδικα για τη διάταξη.
  - div> Αυτή η ετικέτα είναι ειδική επειδή μπορεί να διαμορφωθεί και να χρησιμοποιεί ξεχωριστά μπλοκ πληροφοριών που μπορούν να κατανοήσουν τόσο ο χρήστης όσο και ο υπολογιστής.
- Ας ρίξουμε μια ματιά σε μια απλή διάταξη HTML που χρησιμοποιεί μια ετικέτα div.
  - ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  - html xmlns = "http://www.w3.org/1999/xhtml">
  - κεφάλι>
  - meta http-equ = "Content-Type" content = "text / html; charset = utf-8" />
  - title> Hello World! / title>
  - / head>
  - σώμα>
  - h1> Hello World! / h1>
  - div id = "contentOne">
  - p> Αυτό είναι κάποιο κείμενο σε div # contentOne. / p>
  - div>
  - p> Μια παράγραφος σε μια υποενότητα του div # contentOne / p>
  - / div>
  - / div>
  - / body>
  - / html>
- Η χρήση ετικετών div> βοηθά στην εύρεση και τροποποίηση στυλ κατά την εργασία με CSS και Javascript. Η HTML θα χρησιμοποιήσει διαφορετική κωδικοποίηση για να συνεργαστεί με στυλ CSS και Javascript για να δημιουργήσει μια καλύτερη και πιο αποκριτική εμπειρία χρήστη.

Συμβουλές

Αφού διαβάσετε αυτό το άρθρο, μην σταματήσετε και νομίζετε ότι έχετε μάθει όλα όσα πρέπει να γνωρίζετε. Υπάρχει πάντα κάτι να μάθετε, ειδικά σε αυτήν την τεχνολογία.
Μάθετε, κατανοήστε και γράψτε κώδικα.
Λάβετε υπόψη ότι ορισμένες ετικέτες χρησιμοποιούν μόνο>. Para και br είναι μερικά παραδείγματα. Άλλες ετικέτες που ανοίγουν με> πρέπει να κλείσουν περαιτέρω. Για παράδειγμα, "div> / div>".
Οι άνθρωποι περιμένουν νέες ανακαλύψεις, οπότε επανεφευρέστε, σχεδιάστε ή κώδικα.
Αφού μάθετε πολλά, δοκιμάστε να μάθετε προγραμματισμό διακομιστή.
Μάθετε να εργάζεστε με CSS καθώς και Javascript.

Προειδοποιήσεις

Θυμηθείτε, το HTML αφορά μόνο την επεξεργασία περιεχομένου. Αυτό σημαίνει ότι η HTML χρησιμοποιείται μόνο για την αποθήκευση περιεχομένου σε αναγνωρισμένη μορφή. Άλλες αλλαγές πρέπει να γίνουν χρησιμοποιώντας άλλες τεχνολογίες, όπως το CSS. Σημαίνει επίσης να κάνουμε «Σημασιολογικά σωστόακόμα κι αν δεν το παραδέχονται οι άλλοι. Άλλες γλώσσες προγραμματισμού συμβάλλουν στη δημιουργία ιστοσελίδων (CSS, Javascript και XML). Το HTML είναι ένας κατασκευαστής περιεχομένου.

Τι χρειάζεσαι

Ένας επεξεργαστής κειμένου που υποστηρίζει κωδικοποίηση ANSI
Ένα πρόγραμμα περιήγησης ιστού όπως ο Internet Explorer ή ο Mozilla Firefox
(Προαιρετικό) πρόγραμμα επεξεργασίας HTML wysiwyg ή wykiwyg όπως το Adobe Dreamweaver, το Aptana Studio ή το Microsoft Expression Web