Μικρή εισαγωγή στη γλώσσα HTML (για αρχάριους)
Από Λάζαρος Γεωργούλας
Μία μίνι χρήσιμη εισαγωγή στη γλώσσα κατασκευής ιστοσελίδων HTML για αρχάριους. "Κατέβασε" εντελώς δωρεάν 3 ηλεκτρονικά βιβλία (PDF ebooks)!
1. Δωρεάν στρατηγική κέρδους
2. Οδηγός για νέες ιστοσελίδες
3. Βγάλε λεφτά με το bitcoin
Απλά βάλε το email σου στη παρακάτω φόρμα και θα λάβεις άμεσα τα 3 ebooks!
Μισώ το SPAM! Η διεύθυνση email σου είναι ασφαλής και δεν θα γνωστοποιηθεί ποτέ σε τρίτους! Αν ενδιαφέρεσαι, Μάθε περισσότερα για τα 3 ebooks...
Η HTML (Hyper Text Markup Language) είναι η βασική γλώσσα προγραμματισμού για την κατασκευή ιστοσελίδων. Με την γλώσσα αυτή και τη σήμανση της (markup) περιγράφουμε τη δομή των sites στα οποία περιηγούμαστε στο διαδίκτυο. Τα βασικά στοιχεία της HTML είναι οι ετικέτες (tags). Με τα tags δηλώνουμε τα διάφορα δομικά στοιχεία μιας ιστοσελίδας όπως οι παράγραφοι, οι επικεφαλίδες, ο τίτλος της σελίδας κλπ. Οι περιηγητές (browsers) δεν προβάλλουν τις ετικέτες HTML αλλά τις μεταφράζουν παρουσιάζοντας κατάλληλα το περιεχόμενο μιας ιστοσελίδας. Πίσω από κάθε site που βλεπεις στο internet υπάρχει μια σειρά από γραμμές κώδικα HTML και πιθανόν και άλλων γλωσσών προγραμματισμού όπως Javascript ή PHP. Η κύρια γλώσσα όμως είναι η HTML. Σε αυτό το άρθρο θα κάνω μια μικρή εισαγωγή στην HTML και θα δώσω πηγές για επιπλέον εκμάθηση της γλώσσας. Ας ξεκινήσουμε.
Ας δούμε ένα πολύ απλό site φτιαγμένο με βασική HTML:
<html>
<head>
<title>Τίτλος του site</title>
</head>
<body>
<h1>Επικεφαλίδα του site</h1>
<p>Παράγραφος κειμένου του site</p>
</body>
</html>
Ο παραπάνω HTML κώδικας θα μεταφραστεί από τον browser και θα εμφανιστεί ως εξής:
Ας δούμε τι σημαίνει το κάθε τι στον παραπάνω κώδικα HTML:
Η δήλωση <!DOCTYPE html> ορίζει ότι το ο κώδικας της σελίδας είναι HTML5.
Το στοιχείο <html> είναι το βασικό στοιχείο μιας σελίδας HTML.
Το στοιχείο <head> περιέχει διάφορες χρηστικές πληροφορίες για την σελίδα HTML.
Το στοιχείο <title> ορίζει τον τίτλο της σελίδας HTML.
Το στοιχείο <body> περιέχει τα ορατά περιεχόμενα μιας σελίδας HTML.
Το στοιχείο <h1> ορίζει μια επικεφαλίδα πρώτου μεγέθους.
Το στοιχείο <p> ορίζει μια παράγραφο κειμένου μέσα στη σελίδα HTML
Ετικέτες HTML
Οι ετικέτες HTML περιέχουν ονόματα των στοιχείων της γλώσσας HTML περιστοιχισμένα από τους χαρακτήρες < και >.
<tagname>Τα περιεχόμενα μπαίνουν ανάμεσα στην αρχική και τελική ετικέτα</tagname>
Οι ετικέτες HTML συνήθως πάνε ως ζευγάρι π.χ. <h1> και </h1>. Μπαίνει πρώτα η αρχική ετικέτα (start tag ή opening tag), έπειτα μπαίνει το περιεχόμενο της ετικέτας και τέλος κλείνουμε με την τελική ετικέτα (end tag ή closing tag). Η τελική ετικέτα γράφεται όπως η αρχική ετικέτα αλλά με μια κάθετο "/" πριν από το όνομα της ετικέτας.
Ο σκοπός ενός browser (Chrome, Firefox, Safari, Internet Explorer) ειναι να "διαβάσει" τον κώδικα HTML και σύμφωνα με αυτόν να παρουσιάσει τα περιεχόμενα μιας σελίδας. Οι browsers δεν προβάλλουν τις ετικέτες HTML απλά τις διαβάζουν για να ξέρουν πως να παρουσιάσουν μια σελίδα στον χρήστη του internet. Ας δούμε ξανά τη δομή μιας σελίδας HTML...
Μόνο τα περιεχόμενα μέσα στο τμήμα <body> εμφανίζονται στον χρήστη μέσω του browser.
Η 1η έκδοση της γλώσσας HTML εμφανίστηκε το 1991 ενώ από το 2014 είμαστε στην 5η έκδοση (HTML5). Η δήλωση <!DOCTYPE html> χρησιμοποιείται για να δηλώσει τον τύπο της σελίδας HTML (στην προκειμένη περίπτωση HTML5) και βοηθά τους browsers να προβάλλουν τις ιστοσελίδες σωστά. Πρέπει να γραφτεί μια φορά στην κορυφή κάθε κώδικα HTML πριν από οποιαδήποτε ετικέτα HTML.
Τα αρχεία με κώδικα HTML έχουν την κατάληξη .html ή .htm (π.χ. index.html)
Εδώ τελειώνει αυτή η μίνι εισαγωγή στην γλώσσα HTML που είναι μια από τις πιο εύκολες στην εκμάθηση γλώσσες. Ελπίζω οι βασικές έννοιες να έγιναν κατανοητές και να σου κέντρισαν το ενδιαφέρον για περισσότερη γνώση πάνω σε αυτή τη γλώσσα κατασκευής ιστοσελίδων. Αν σε ενδιαφέρει να μάθεις περισσότερα τότε ρίξε μια ματιά σε αυτό το μάθημα HTML (είναι σε απλά αγγλικά). Επίσης μπορείς να διαβάσεις το άρθρο μου εισαγωγή στα CSS για αρχάριους.
Αν χρειάζεσαι συμβουλές πάνω σε θέματα διαδικτύου ή κάποιον ειδικό να συζητήσεις για την προώθηση του ιστότοπου σου τότε μπορείς να νοικιάσεις όσο από τον χρόνο μου επιθυμείς και θα κάτσω με σοβαρότητα και επαγγελματισμό να μοιραστώ όλα όσα έχω μάθει τα τελευταία 15 χρόνια για το internet, το marketing, το SEO και γενικά το διαδίκτυο. Κλείσε μια συνεδρία μαζί μου μέσω της υπηρεσίας "Διαδικτυακός Σύμβουλος" και θα δώσω τον καλύτερο μου εαυτό για να σε βοηθήσω.-
Αν έχεις βασικές γνώσεις HTML τότε είσαι έτοιμος/η για να διαβάσεις το άρθρο για τις βέλτιστες πρακτικές SEO για ένα site. Επίσης αν αναζητάς ιδέες για να βγάλεις χρήματα μέσα από το διαδίκτυο σου προτείνω να "κατεβάσεις" σήμερα εντελώς δωρεάν τα 3 ηλεκτρονικα μου βιβλία (pdf ebooks) με χρήσιμες πληροφορίες που μπορεί να σου αλλάξουν τη ζωή! Απλά βάλε το email σου στη παρακάτω φόρμα για να εγγραφείς δωρεάν στις ενημερώσεις nextnet.gr και με την ολοκλήρωση της εγγραφής θα λάβεις τους συνδέσμους (download links) για τα 3 βιβλία...:
- Μισώ το SPAM!
- Η διεύθυνση email σου είναι ασφαλής.
- Μπορείς ανά πάσα στιγμή να διαγραφείς από τις ενημερώσεις.
Πιο πρόσφατο άρθρο:
ΔΩΡΕΆΝ εγγραφή στις ενημερώσεις NEXTNET
