Περιεχόμενο

• Για να πας
• Μέρος 1 από 2: Εκμάθηση των βασικών στοιχείων του HTML
• Μέρος 2 από 2: Εκμάθηση προχωρημένου HTML
• Συμβουλές
• Προειδοποιήσεις
• Απαιτήσεις

Η HTML είναι η συντομογραφία για Γλώσσα σήμανσης υπερκειμένου, είναι ο κωδικός ή Γλώσσα που χρησιμοποιείται για τη δημιουργία ιστότοπων. Μπορεί να φαίνεται περίπλοκο εάν δεν έχετε προγραμματίσει ποτέ πριν, αλλά για να το δοκιμάσετε, το μόνο που χρειάζεστε είναι ένα απλό πρόγραμμα επεξεργασίας κειμένου και ένα πρόγραμμα περιήγησης στο Διαδίκτυο. Μπορεί να αναγνωρίσετε κάποιο HTML από φόρουμ, διαδικτυακά προφίλ ή άρθρα wikiHow. Το HTML είναι ένας χρήσιμος πόρος για όσους χρησιμοποιούν το Διαδίκτυο και η εκμάθηση HTML μπορεί να διαρκέσει λιγότερο χρόνο από ό, τι θα περίμενε κανείς.

Για να πας

Μέρος 1 από 2: Εκμάθηση των βασικών στοιχείων του HTML

1. Ανοίξτε ένα έγγραφο HTML. Τα περισσότερα προγράμματα επεξεργασίας κειμένου, όπως το Σημειωματάριο ή το Word για Windows και το Text Editor για Mac, μπορούν να χρησιμοποιηθούν για τη δημιουργία εγγράφων HTML. Ανοίξτε ένα νέο έγγραφο και επιλέξτε Αρχείο → Αποθήκευση ως από το επάνω μενού για να αποθηκεύσετε το έγγραφό σας ως ιστοσελίδα ή αλλάξτε την επέκταση αρχείου από ".doc", ".rtf" ή οτιδήποτε άλλο σε ".html" ή ".htm "
   • Μπορεί τώρα να δείτε μια προειδοποίηση που να δηλώνει ότι το έγγραφό σας αλλάζει από τη μορφή εμπλουτισμένου κειμένου (RTF) σε μορφή "απλού κειμένου" και ότι ορισμένες επιλογές μορφοποίησης και εικόνες δεν αποθηκεύονται σωστά. Μπορείτε να αγνοήσετε αυτήν την προειδοποίηση. Τα έγγραφα HTML δεν χρησιμοποιούν αυτές τις επιλογές.
   • Τα αρχεία .html και .htm είναι τα ίδια. Λειτουργεί και τα δύο.
2. Προβάλετε το έγγραφό σας με πρόγραμμα περιήγησης. Αποθηκεύστε το κενό έγγραφό σας, κλείστε το και, στη συνέχεια, κάντε διπλό κλικ στο έγγραφο στην τοποθεσία όπου αποθηκεύτηκε για να το ανοίξετε ξανά. Το έγγραφό σας θα πρέπει τώρα να ανοίξει από το πρόγραμμα περιήγησής σας ως κενή ιστοσελίδα. Εάν αυτό δεν λειτουργεί, σύρετε το εικονίδιο του αρχείου στη γραμμή διευθύνσεων του προγράμματος περιήγησής σας. Αργότερα, εάν επεξεργαστείτε το έγγραφο HTML ακολουθώντας τα βήματα σε αυτό το άρθρο, θα συνεχίσετε να επιστρέφετε στο πρόγραμμα περιήγησης για να ελέγξετε πώς μοιάζουν οι αλλαγές στον κώδικα.
   • Σημείωση: η ιστοσελίδα σας δεν είναι ακόμη online. Η σελίδα δεν είναι προσβάσιμη σε άλλους και δεν χρειάζεστε σύνδεση στο διαδίκτυο για να τη δοκιμάσετε. Απλώς χρησιμοποιείτε το πρόγραμμα περιήγησής σας για να "διαβάσετε" το έγγραφο HTML σαν να ήταν ιστότοπος.
3. Κατανοήστε τι είναι οι "ετικέτες". Οι ετικέτες δεν είναι ορατές στην τελική ιστοσελίδα, όπως το κανονικό κείμενο. Οι ετικέτες λένε στο πρόγραμμα περιήγησής σας πώς να εμφανίζει τη σελίδα και το περιεχόμενο στη σελίδα. Η ετικέτα έναρξης περιέχει οδηγίες. Για παράδειγμα, μπορεί να πει στο πρόγραμμα περιήγησης να εμφανίζει το κείμενο με έντονη γραφή. Η ετικέτα τερματισμού απαιτείται για να πει στο πρόγραμμα περιήγησης πού ισχύουν οι οδηγίες: σε αυτό το παράδειγμα, όλο το κείμενο μεταξύ της ετικέτας έναρξης και λήξης είναι έντονη. Οι τελικές ετικέτες τοποθετούνται επίσης εντός παρενθέσεων, αλλά μια κάθετος ακολουθεί την πρώτη παρένθεση.
   • Γράψτε αρχικές ετικέτες σε παρένθεση: αυτή είναι η ημέρα έναρξης>
   • Γράψτε τελικές ετικέτες σε παρένθεση, αλλά τοποθετήστε κάθετο μετά την πρώτη παρένθεση: /αυτή είναι η ετικέτα κλεισίματος>)
   • Διαβάστε αργότερα στο άρθρο πώς να γράψετε λειτουργικές ετικέτες. Σε αυτό το βήμα, απλώς πρέπει να θυμάστε ποιον τρόπο να γράψετε ετικέτες:> και />.
   • Σε άλλα μαθήματα HTML, οι ετικέτες αναφέρονται επίσης ως "στοιχεία" και το κείμενο μεταξύ ετικετών ανοίγματος και κλεισίματος αναφέρεται επίσης ως "περιεχόμενο στοιχείου".
4. Γράψτε την πρώτη σας ετικέτα html>. Κάθε έγγραφο HTML ξεκινά με ένα html>ετικέτα και τελειώνει με α / html>ετικέτα. Αυτό λέει στο πρόγραμμα περιήγησης ότι τα πάντα μεταξύ αυτών των ετικετών είναι γραμμένα σε HTML. Προσθέστε αυτές τις ετικέτες στο έγγραφό σας:
   • Γράφω html> στην κορυφή του εγγράφου σας.
   • Πατήστε enter ή επιστρέψτε αρκετές φορές για να δώσετε στον εαυτό σας χώρο και μετά γράψτε / html>
   • Σε θυμάμαι τα παντα σε αυτό το άρθρο μεταξύ αυτών των δύο ετικετών.
5. Κάντε το κεφάλι> μέρος του εγγράφου σας. Μεταξύ των ετικετών html> και / html> γράφετε ένα κεφάλι>ετικέτα έναρξης και ένα / κεφάλι>-ετικέτα τέλους. Κάντε ξανά χώρο ανάμεσα σε αυτές τις ετικέτες. Οτιδήποτε γράφεται μεταξύ αυτών των ετικετών δεν θα είναι ορατό στην ίδια την ιστοσελίδα. Δοκιμάστε τα παρακάτω βήματα και δείτε αν μπορείτε να δείτε πού εμφανίζονται οι πληροφορίες:
   • Γράψτε ανάμεσα στις ετικέτες κεφαλής> και / κεφαλής>: τίτλος> και / τίτλος>
   • Μεταξύ των ετικετών τίτλος> και / τίτλος> γράφετε: Πώς να μάθετε HTML (με εικόνες) - wikiHow.
   • Αποθηκεύστε το έγγραφο και ανοίξτε το σε πρόγραμμα περιήγησης (ή αποθηκεύστε το έγγραφο και ανανεώστε τη σελίδα στο πρόγραμμα περιήγησης εάν η σελίδα ήταν ακόμα ανοιχτή). Βλέπετε τι μόλις γράψατε στην κορυφή της σελίδας, πάνω από τη γραμμή διευθύνσεων;
6. Δημιουργήστε μια ενότητα> σώμα. Οτιδήποτε άλλο σε αυτό το έγγραφο για αρχάριους τοποθετείται στην ενότητα> σώμα και εμφανίζεται στην ιστοσελίδα. Μετά η ετικέτα / head>, αλλά μπροστά απο η ετικέτα / html> γράφετε σώμα> και / σώμα>. Ό, τι συζητάμε περαιτέρω σε αυτό το άρθρο, τοποθετούμε ανάμεσα στις ετικέτες του σώματος. Θα πρέπει τώρα να έχετε ένα έγγραφο που μοιάζει με αυτό (χωρίς τις κουκκίδες):
   • html>
   • κεφάλι>
   • τίτλος> μάθετε HTML - wikiHow / title>
   • / κεφάλι>
   • σώμα>
   • / σώμα>
   • / html>
7. Προσθέστε κείμενο σε διαφορετικά στυλ. Τώρα ήρθε η ώρα να αρχίσετε να γράφετε κάτι που θα είναι πραγματικά ορατό στο πρόγραμμα περιήγησης! Όλα όσα γράφετε στις ετικέτες σώματος θα είναι ορατά στο πρόγραμμα περιήγησης αφού αποθηκεύσετε τις αλλαγές και ανανεώσετε τη σελίδα στο πρόγραμμα περιήγησης. Γράφω δεν κάτι με τα σημάδια και >γιατί το πρόγραμμα περιήγησής σας θα το ερμηνεύσει ως εντολή HTML αντί για απλό κείμενο. Γράψτε για παράδειγμα Γειά σου Κόσμε! (Αγγλικά για το "Hello world!", Αυτό είναι το παγκόσμιο τυπικό κείμενο ως το πρώτο παράδειγμα σε οποιοδήποτε μάθημα προγραμματισμού σε μια συγκεκριμένη γλώσσα προγραμματισμού) ή κάτι άλλο και τοποθετήστε τις ακόλουθες ετικέτες πριν και μετά το κείμενο και δείτε τι συμβαίνει:
   • em> Γεια σου κόσμος! / em> μοιάζει με πλάγιο κείμενο: Γειά σου Κόσμε!
   • </strong> Γεια σας, κόσμος! μοιάζει με έντονο κείμενο: Γειά σου Κόσμε!
   • s> Γεια σου κόσμος! / s> μοιάζει με διακριτικό κείμενο: Γειά σου Κόσμε!
   • sup> Γεια σου κόσμος! / sup> μοιάζει με υπεργράφημα:
   • sub> Γεια σου κόσμος! / sub> μοιάζει με λεζάντα: _{Γειά σου Κόσμε!}
   • Δοκιμάστε συνδυασμούς: Πώς βλέπει </ strong> Γεια σας κόσμο! / </strong>> βγες έξω?
8. Χωρίστε το κείμενό σας σε παραγράφους. Εάν βάλετε διαφορετικές γραμμές κειμένου στο έγγραφό σας, θα δείτε ότι όλες οι γραμμές τοποθετούνται η μία μετά την άλλη. Πρέπει να προγραμματίσετε μόνοι σας νέες γραμμές και κενές γραμμές:
   • p> Αυτή είναι μια ξεχωριστή ενότητα./p>
   • Αυτή η πρόταση είναι στην πρώτη γραμμή και αυτή η πρόταση στην επόμενη.
     Αυτή είναι η πρώτη ετικέτα που συναντάμε που δεν χρειάζεται ετικέτα τέλους! Καλούμε μια τέτοια ετικέτα άδεια ετικέτα.
   • Δημιουργήστε κεφαλίδες για να καταστήσετε σαφή τα ονόματα των ενοτήτων:
     h1> κεφαλίδα / h1>: η μεγαλύτερη δυνατή κεφαλίδα
     h2> κεφαλίδα / h2> (η κεφαλίδα 2 επιπέδων)
     h3> κεφαλίδα / h3> (η κεφαλίδα 3 επιπέδων)
     h4> κεφαλίδα / h4> (η κεφαλίδα 4 επιπέδων)
     h5> κεφαλίδα / h5> (η μικρότερη δυνατή κεφαλίδα)
9. Μάθετε πώς να δημιουργείτε λίστες. Υπάρχουν διάφοροι τρόποι δημιουργίας λιστών σε μια ιστοσελίδα. Δοκιμάστε τις ακόλουθες μεθόδους για να μάθετε τι σας αρέσει περισσότερο. Λάβετε υπόψη ότι ένα ζεύγος ετικετών τοποθετείται σε ολόκληρη τη λίστα (όπως ετικέτες ul> και / ul> για λίστες χωρίς ταξινόμηση) και ότι ένα διαφορετικό ζεύγος ετικετών τοποθετείται γύρω από κάθε στοιχείο στη λίστα, όπως li> και / li> .
   • Χρησιμοποιήστε τον ακόλουθο κώδικα για να δημιουργήσετε λίστες με κουκκίδες:
     ul> li> One item / li> li> Άλλο στοιχείο / li> li> Άλλο στοιχείο / li> / ul>
   • Ή αυτός ο κωδικός για τη δημιουργία αριθμημένων λιστών:
     ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
   • Ή αυτός ο κωδικός για να δημιουργήσετε μια λεγόμενη λίστα ορισμών:
     dl> dt> Καφές / dt> dd> - Ζεστό ρόφημα / dd> dt> Γάλα / dt> dd> - Κρύο ποτό / ημέρα> / dl>
10. Κάντε τη σελίδα σας πιο ελκυστική με νέες γραμμές, οριζόντιες γραμμές και εικόνες. Τώρα είναι καιρός να αρχίσετε να προσθέτετε άλλα πράγματα στη σελίδα σας. Δοκιμάστε τις ακόλουθες ετικέτες (η εικόνα πρέπει να δημοσιεύεται στο διαδίκτυο, ώστε να μπορείτε να χρησιμοποιήσετε έναν σύνδεσμο προς την εικόνα):
    • Εισαγωγή γραμμής: br> ή ώρα>
    • Εισαγωγή εικόνων: img src = "the_url_of_your_image">
11. Εισαγάγετε συνδέσμους σε άλλα μέρη της σελίδας. Μπορείτε επίσης να χρησιμοποιήσετε αυτόν τον κωδικό για να συνδεθείτε σε άλλες σελίδες και ιστότοπους, αλλά επειδή δεν έχετε ακόμη ιστότοπο, θα επικεντρωθούμε σε "αγκύρια", τα οποία είναι συγκεκριμένα μέρη στη σελίδα με την οποία μπορείτε να συνδέσετε:
    • Αρχικά, δημιουργήστε μια αγκύρωση με την ετικέτα a> στο σημείο της σελίδας στην οποία θέλετε να συνδέσετε. Δώστε στην άγκυρα σας ένα σαφές όνομα που είναι εύκολο να θυμάστε:
      
      a name = "Συμβουλές"> Αυτό είναι το κείμενο γύρω από το οποίο τοποθετείτε την άγκυρα./a>
    • Χρησιμοποιήστε την ετικέτα href> για να συνδεθείτε με την άγκυρα ή σε άλλη ιστοσελίδα:
      
      a href = "url της ιστοσελίδας ή όνομα αγκύρωσης σε αυτήν τη σελίδα"> Γράψτε το κείμενο ή την εικόνα που εμφανίζεται ως σύνδεσμος εδώ./a>
    • Για να συνδεθείτε με μια άγκυρα σε μια άλλη σελίδα, προσθέστε τον # χαρακτήρα μετά τη διεύθυνση url, ακολουθούμενο από το όνομα της αγκύρωσης. Για παράδειγμα, http://www.wikihow.com/HTML-leren#Tips θα σας οδηγήσουν κατευθείαν στην ενότητα "Συμβουλές" σε αυτήν τη σελίδα.

Μέρος 2 από 2: Εκμάθηση προχωρημένου HTML

1. Μάθετε για τα χαρακτηριστικά. Τα χαρακτηριστικά τοποθετούνται εντός της ετικέτας και χρησιμοποιούνται για την πραγματοποίηση πρόσθετων προσαρμογών στο "περιεχόμενο περιεχομένου" μεταξύ της ετικέτας έναρξης και λήξης. Ποτέ δεν στέκονται μόνοι. Είναι γραμμένα με τον ακόλουθο τρόπο: όνομα = "τιμή". όνομα αντιπροσωπεύει το όνομα του χαρακτηριστικού (για παράδειγμα, "χρώμα") και αξία περιγράφει τη συγκεκριμένη περίπτωση (π.χ. "κόκκινο").
   • Εάν έχετε κοιτάξει προσεκτικά στο προηγούμενο μέρος αυτού του άρθρου, έχετε ήδη αντιμετωπίσει χαρακτηριστικά. Η ετικέτα img> χρησιμοποιεί το χαρακτηριστικό src, μια άγκυρα χρησιμοποιεί το χαρακτηριστικό όνομα και οι σύνδεσμοι χρησιμοποιούν το χαρακτηριστικό href. Μπορείτε να πείτε ότι είναι όλα μεγέθους ___='___’ ακολουθώ.
2. Πειραματιστείτε με πίνακες HTML. Για να δημιουργήσετε έναν πίνακα ή ένα γράφημα χρειάζεστε πολλές ετικέτες:
   • Ξεκινήστε με τις ετικέτες πίνακα ("table" στα Αγγλικά) σε ολόκληρο τον πίνακα:πίνακας> / πίνακας>
   • Τοποθετήστε ετικέτες γύρω από το περιεχόμενο κάθε σειράς: tr>
   • Τοποθετήστε κεφαλίδες στηλών στην πρώτη σειρά: ου>
   • Τοποθετήστε κελιά σε διαδοχικές σειρές: td>
   • Αυτό είναι ένα παράδειγμα του πώς συνδυάζονται όλα αυτά:
     
     πίνακας> tr> th> Στήλη 1: Μήνας / η> th> Στήλη 2: Εξοικονόμηση χρημάτων / th> / tr> tr> td> Ιανουάριος / td> td> 100 € / ημέρα> / tr> / πίνακας>
3. Μάθετε τις άλλες ετικέτες που χρησιμοποιούνται στην ενότητα κεφαλίδας. Έχετε ήδη μάθει την κεφαλίδα της ετικέτας>, την οποία τοποθετείτε στην αρχή κάθε εγγράφου. Εκτός από τον τίτλο> ετικέτα, ενδέχεται να υπάρχουν και άλλες ετικέτες στην ενότητα κεφαλίδας:
   • Οι μετα-ετικέτες χρησιμοποιούνται για τη δημιουργία μεταδεδομένα για μια ιστοσελίδα. Αυτά τα δεδομένα χρησιμοποιούνται από τις μηχανές αναζήτησης για την κατηγοριοποίηση ιστοσελίδων. Για να κάνετε τη σελίδα σας ορατή σε μηχανές αναζήτησης, μπορείτε να τοποθετήσετε μία ή περισσότερες μετα-ετικέτες (οι τελικές ετικέτες δεν είναι απαραίτητες), κάθε ετικέτα πρέπει να περιέχει ακριβώς ένα χαρακτηριστικό ονόματος και χαρακτηριστικό περιεχομένου, για παράδειγμα: meta name = "description" content = "βάλτε εδώ περιγραφή ">; ή meta name = "keywords" content = "γράψτε μια λίστα λέξεων-κλειδιών εδώ, διαχωρισμένες πάντα με κόμμα">
   • link> tags χρησιμοποιούνται για τη σύνδεση άλλων αρχείων στη σελίδα. Συνήθως χρησιμοποιούνται για τη συσχέτιση φύλλων στυλ CSS με σελίδες HTML, αυτές οι σελίδες είναι κατασκευασμένες με διαφορετικό είδος κώδικα και χρησιμοποιούνται για τον προσδιορισμό του συνολικού στυλ μιας σελίδας.
   • script> tags χρησιμοποιούνται για τη σύνδεση αρχείων javascript με τη σελίδα HTML. Το Javascript επιτρέπει στη σελίδα να αλλάξει εάν ο χρήστης κάνει κάτι στη σελίδα.
4. Παίξτε με HTML από υπάρχουσες σελίδες. Η προβολή του πηγαίου κώδικα των ιστοσελίδων είναι ένας πολύ καλός τρόπος για να επεκτείνετε τις γνώσεις σας HTML. Κάντε δεξί κλικ στη σελίδα και επιλέξτε "Προβολή πηγής", "Εμφάνιση πηγής σελίδας" ή παρόμοια. Μάθετε τι κάνει μια συγκεκριμένη ετικέτα που δεν γνωρίζετε ή αναζητήστε στο διαδίκτυο την απάντηση.
   • Δεν μπορείτε να επεξεργαστείτε ιστότοπους άλλων ατόμων, αλλά μπορείτε να αντιγράψετε τον κώδικα HTML στο δικό σας έγγραφο και να παίξετε μαζί του για να δείτε τι κάνουν οι διάφορες προσαρμογές. Σημείωση: επειδή πολλοί ιστότοποι χρησιμοποιούν φύλλα στυλ CSS, ενδέχεται να μην μπορείτε να δείτε πολλά χρώματα ή άλλα στυλ.
5. Μάθετε σχετικά με το HTML διαβάζοντας περισσότερα σε βάθος άρθρα. Υπάρχουν πολλοί πόροι στο Διαδίκτυο για τη διαχείριση περισσότερων ετικετών HTML, όπως το W3Schools ή το Codecademy. Υπάρχουν επίσης πολλά βιβλία HTML διαθέσιμα, αλλά βεβαιωθείτε ότι χρησιμοποιείτε μια πρόσφατη έκδοση καθώς το πρότυπο HTML αλλάζει από καιρό σε καιρό. Αφού αποκτήσετε το HTML σε καλό επίπεδο, μπορείτε να στραφείτε στο CSS για μεγαλύτερο έλεγχο στη σχεδίαση και το στυλ της ιστοσελίδας σας. Μετά από αυτό, το επόμενο βήμα είναι συνήθως javascript.

Συμβουλές

• Μπορεί να είναι χρήσιμο να βρείτε μια απλή ιστοσελίδα στο Διαδίκτυο και στη συνέχεια να αρχίσετε να χτυπάτε τον κωδικό. Προσπαθήστε να μετακινήσετε κάποιο κείμενο, να αλλάξετε τη γραμματοσειρά, να αλλάξετε τις εικόνες, ό, τι θέλετε!
• Μπορείτε να χρησιμοποιήσετε ένα σημειωματάριο για να γράψετε τον κωδικό, έτσι ώστε να έχετε κάτι να ξαναμπείτε αν δεν το θυμάστε για μια στιγμή. Μπορείτε επίσης να εκτυπώσετε αυτήν τη σελίδα και να τη διατηρήσετε για αναφορά.
• Τα XML και RSS χρησιμοποιούνται όλο και περισσότερο σε ιστότοπους στις μέρες μας. Ο κώδικας μπορεί να φαίνεται απρόσιτος στο ανθρώπινο μάτι, ειδικά όταν προβάλλεται στον πηγαίο κώδικα, αλλά η λειτουργικότητα μπορεί να είναι χρήσιμη.
• Οι ετικέτες που χρησιμοποιούνται εντός HTML δεν είναι πεζών-κεφαλαίων, αλλά η προεπιλογή είναι η χρήση πεζών γραμμάτων (όπως κάνουμε σε αυτό το άρθρο). Συνιστάται ιδιαίτερα πεζά γράμματα για τις ετικέτες, καθώς και για συμβατότητα με το XHTML.

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

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

Απαιτήσεις

• Ένα πρόγραμμα επεξεργασίας κειμένου, όπως το Σημειωματάριο (Windows) ή το Text Editor (Mac).
• ένα φύλλο χαρτιού ή σημειωματάριου (προαιρετικός)
• Ένα πρόγραμμα ειδικά σχεδιασμένο για τη σύνταξη HTML, όπως το Σημειωματάριο ++ για Windows ή το TextWrangler για Mac (προαιρετικός)