Μάθετε Basic HTML για να ξεκινήσετε την οικοδόμηση ενός δικτυακού τόπου
Μάθετε τη βασική HTML για να δημιουργήσετε τον ιστότοπό σας. Η βασική HTML δεν είναι δύσκολο να μάθει. Η εκμάθηση HTML είναι ίσως το πιο σημαντικό πράγμα που θα κάνετε ποτέ εάν θέλετε να δημιουργήσετε τη δική σας προσωπική τοποθεσία Web . Πρέπει να μάθετε HTML για να σχεδιάσετε καλές σελίδες, επειδή είναι η γλώσσα στην οποία βασίζεται ο ιστότοπος στο Διαδίκτυο.
Οι ιστότοποι είναι ένας πολύ καλός τρόπος για να αναδείξετε κάτι στη ζωή σας. Η βασική HTML θα σας αφήσει να δείξετε στον κόσμο ό, τι θέλετε να εμφανίσετε στον ιστότοπό σας. Προσθέτοντας χρώματα, αλλάζοντας το μέγεθος κειμένου και συμπεριλαμβάνοντας εικόνες στην τοποθεσία Web σας είναι μερικά μόνο από τα πράγματα που μπορείτε να κάνετε όταν μαθαίνετε βασικό HTML.
Για να μάθετε βασικές HTML πρέπει να έχετε κατά νου ότι πρόκειται απλά για μια σειρά γραμμάτων που συντομεύουν αυτό που στην πραγματικότητα αντιπροσωπεύουν. Για παράδειγμα, το H1 σημαίνει μια επικεφαλίδα για μια παράγραφο που είναι η πρώτη από τις πέντε μεγέθους και το BR είναι ένα σπάσιμο γραμμής.
Ένα σημαντικό πράγμα που πρέπει να θυμάστε, ενώ μαθαίνετε βασικό HTML, είναι ότι σε μια ιστοσελίδα οι ετικέτες HTML πρέπει να έρχονται σε μια συγκεκριμένη σειρά και οι περισσότερες ετικέτες HTML πρέπει να έχουν μια ετικέτα έναρξης και λήξης για να αναγνωρίσει η εντολή το πρόγραμμα περιήγησης. Μια τελική ετικέτα είναι απλώς η ίδια με την ετικέτα έναρξης εκτός από το ότι ξεκινάει με το σύμβολο / . Μια επικεφαλίδα θα μοιάζει με αυτή την Επικεφαλίδα εδώ H1>
. Υπάρχει μια ετικέτα έναρξης, H1 , η επικεφαλίδα και μια τελική ετικέτα, / H1 .
Μάθετε το βασικό HTML με τον σωστό τρόπο και θυμηθείτε ότι οι ετικέτες πρέπει να έρχονται με μια συγκεκριμένη σειρά. Η βασική δομή μιας ιστοσελίδας είναι η εξής:
Εδώ μπορείτε να βάλετε σημαντικές πληροφορίες εγγράφων, όπως πλαίσια, γλώσσα και ειδικές οδηγίες.
HEAD>
Βάλτε την ιστορία σας, τις εικόνες, τους συνδέσμους και όλα τα άλλα εδώ.
Επικεφαλίδα της παραγράφου σας. H1>
Εδώ εισάγετε το κείμενο του εγγράφου σας. P>
Έτσι γράφουμε έναν σύνδεσμο:
http://www.nameofpage.com "> Τίτλος ή τι θέλετε να πείτε.
BODY>
HTML>
Μπορείτε επίσης να εισαγάγετε μια σύνδεση στη μέση μιας πρότασης. Εάν θέλετε να πείτε "Η Microsoft έχει υπέροχο demos." Θα φαινόταν έτσι:
http://www.microsoft.com/en/us/default.aspx "> Η Microsoft έχει μερικά υπέροχα demos για να σας βοηθήσει να μάθετε βασικό HTML.
Μπορείτε όχι μόνο να δημιουργήσετε συνδέσμους σε άλλες σελίδες, αλλά μπορείτε επίσης να δημιουργήσετε συνδέσμους σε άλλο σημείο στην ίδια σελίδα. Αν ήθελα να επιστρέψετε στην αρχή αυτού του άρθρου, θα έλεγα κάτι σαν το "Επιστροφή" και κάνοντας κλικ στην υπερσύνδεση θα επιστρέψετε στην αρχή. Αυτό είναι λίγο πιο δύσκολο γιατί υπάρχουν δύο μέρη σε αυτό. Καταρχήν δημιουργείτε τον σύνδεσμό σας:
Η λέξη "Υπάρχει" είναι η λέξη που θέλω να σας πάρω πίσω, ώστε τώρα πρέπει να πάω σε αυτή τη λέξη και να δημιουργήσω και να αγκυροβολησω έτσι ο δεσμός που μόλις δημιουργησα ξέρει πού να πάει:
Όταν μαθαίνετε βασικές HTML, μπορείτε να γράψετε τον ιστότοπό σας στον επεξεργαστή κειμένων που συνοδεύει τα Windows, προγράμματα όπως το NoteTab και η Arachnophilia ή ένα που συνοδεύει το πρόγραμμα περιήγησης ιστού σας. Είτε έτσι είτε αλλιώς ακολουθείτε τους κανόνες από τη στιγμή που θα μάθετε τα βασικά HTML, όλα θα αποδειχθούν καλά.
Βασικές ετικέτες HTML
- Τα σχόλια του συντάκτη δεν εμφανίζονται από το πρόγραμμα περιήγησης.
... HTML> - Πάντα να ξεκινάτε και να τερματίζετε τη σελίδα σας χρησιμοποιώντας αυτήν την ετικέτα.
... HEAD> - Κεφαλίδα για το έγγραφο.
... BODY> - Σώμα εγγράφου.
... H1>
- Το μικρότερο μέγεθος τίτλου.
... H2>
- Μικρό μέγεθος γραμμής.
... H3>
- Μεσαίο-μικρό μέγεθος τίτλου.
... H4>
- Μεσαίο μέγεθος κεφαλαίου.
... H5>
- Μεγάλο μέγεθος κεφαλίδας.
... H6>
- Μεγαλύτερο μέγεθος τίτλου.
... - Ξεκινά μια σύνδεση υπερκειμένου.
... ADDRESS> - Πληροφορίες για τον συγγραφέα.
... BLOCKQUOTE>
- Μεγάλες προσφορές.
... PRE>
- Προδιαμορφωμένο κείμενο.
- Μπλοκ φόρμας.
- Δημιουργεί ένα πλαίσιο για την εισαγωγή κειμένου.
- Δημιουργεί ένα μενού κύλισης.
- Δημιουργεί στοιχεία για επιλογή.
... OL>
- Λίστα παραγγελιών.
Παράδειγμα μιας ταξινομημένης λίστας:
- το κόκκινο
- μπλε
- πράσινος
... UL>
- Μη ταξινομημένη λίστα.
Παράδειγμα μη ταξινομημένου καταλόγου:
- το κόκκινο
- μπλε
- πράσινος
- Λίστα μενού.
... DL>
- Λίστα γλωσσών.
... CITE> - Αναφορά.
... CODE> - Γραμματοσειρά κώδικα.
... DFN> - Καθορισμένος όρος.
... EM> - Έμφαση.
Παράδειγμα έμφασης στο κόκκινο:
κόκκινο, μπλε, πράσινο
... I> - πλάγια γραφή.
Παράδειγμα πλάγιας γραφής:
κόκκινο, μπλε, πράσινο
... KBD> - Κείμενο πληκτρολογίου.
... SAMP> - Δείγμα κειμένου.
... STRONG> - Ιδιαίτερη έμφαση.
Παράδειγμα ισχυρής έμφασης:
κόκκινο, μπλε, πράσινο
... TT> - κείμενο γραφομηχανής.
... VAR> - Μεταβλητή.
... B> - Έντονη.
- Περιγράφει το έγγραφο.
- Διάλειμμα γραμμής.
- Οριζόντια γραμμή.
- Εικόνα.
- Παράγραφος.
- Στοιχείο λίστας.
- Σημειώνει έναν όρο σε μια λίστα.
- Επισημαίνει τον ορισμό στη λίστα.