Εκμάθηση HTML/Ξεκίνημα & Βασικές εντολές

Αρχή	Περιεχόμενα	Επόμενη Ενότητα

Σε αυτό το μέρος του μαθήματος θα κάνουμε μια εισαγωγή στην HTML και θα μάθουμε να δίνουμε τις πρώτες εντολές μας.

Τι είναι η HTML;

Η html (Hyper Text Markup Language) δεν είναι μια γλώσσα προγραμματισμού. Είναι μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου. Aποτελεί υποσύνολο της γλώσσας SGML (Standard Generalized Markup Language) που επινοήθηκε από την IBM προκειμένου να λυθεί το πρόβλημα της μη τυποποιημένης εμφάνισης κειμένων στα διάφορα υπολογιστικά συστήματα. Ο browser αναγνωρίζει αυτόν τον τρόπο γραφής και εκτελεί τις εντολές που περιέχονται σε αυτόν. Αξίζει να σημειωθεί ότι η html είναι η πρώτη και πιο διαδεδομένη γλώσσα περιγραφής της δομής μιας ιστοσελίδας. Η html χρησιμοποιεί τις ειδικές ετικέτες (τα tags) να δώσει τις απαραίτητες οδηγίες στον browser. Τα tags είναι εντολές που συνήθως ορίζουν την αρχή ή το το τέλος μιας λειτουργίας. Τα tags βρίσκονται πάντα μεταξύ των συμβόλων < και >. Π.χ. <BODY> Οι οδηγίες είναι case insensitive, δεν επηρεάζονται από το αν έχουν γραφτεί με πεζά (μικρά) ή κεφαλαία. Ένα αρχείο HTML πρέπει να έχει κατάληξη htm ή html.

Ξεκίνημα

Προκειμένου να γράψουμε στον κώδικα html δεν χρειαζόμαστε κάποιο ειδικό πρόγραμμα. Ένας απλός επεξεργαστής κειμένου (text editor) όπως το Σημειωματάριο (Notepad) των Windows ή το Kate των Linux είναι αρκετός για να φτιάξουμε τις ιστοσελίδες μας.

Για την πρώτη σας ιστοσελίδα γράψτε το εξής σε έναν κειμενογράφο της επιλογής σας:

<html>
<head><title>Μία επικεφαλίδα</title></head>
<body>

<h1>Ένας τίτλος</h1>

<p>Μια παράγραφος</p>

</body>
</html>

Κατά την αποθήκευση δώστε του το όνομα index.htm ενώ εάν σας ζητάει τον τύπο του αρχείου επιλέξτε Όλα τα αρχεία.

Κατόπιν, βρείτε το αρχείο που μόλις δημιουργήσατε και ανοίξτε το με έναν οποιοδήποτε φυλλομετρητή (browser). Αν όλα έγιναν σωστά θα σας εμφανίσει την εικόνα στα αριστερά. Μάλλον θα σας φανεί πολύ άδεια. Για αυτό και δεν θα σταματήσουμε εδώ, τον οδηγό αυτό. Βρείτε το αρχείο index.htm, κάντε του δεξί κλικ, και επιλέξτε Άνοιγμα με>Σημειωματάριο(ή τον κειμενογράφο της επιλογής σας). Κάπου εδώ λοιπόν θα σας εξηγήσουμε τι μόλις γράψατε.

Τo tag <html> δηλώνει πως αρχίζει κώδικας γραμμένος σε γλώσσα html. Από αυτό και ότι άλλο βρει ο φυλλομετρητής σας θα το εμφανίσει στην οθόνη σας σύμφωνα με τα πρότυπα αυτής της γλώσσας. Το tag </html> δηλώνει πως ο κώδικας html έχει τελειώσει. Γενικότερα κάθε open tag έχει και το close tag του στην html.

Τα tags <head> και </head> δηλώνουν πως ό,τι εμπεριέχεται σε αυτά αποτελεί τμήμα της επικεφαλίδας. Τα <title> και </title> δηλώνουν πως ό,τι εμπεριέχεται σε αυτά θα εμφανιστεί ως τίτλος στο πάνω μέρος του προγράμματος περιήγησης.

Τα tags <body> και </body> δηλώνουν πως ό,τι εμπεριέχεται σε αυτά αποτελεί τμήμα της σελίδας που θα εμφανιστεί.

Τα tags <h1>(heading) δηλώνουν επικεφαλίδες. Τα μεγέθη τους εκτείνονται από <h1> που είναι το μεγαλύτερο, μέχρι το <h6>.Τέλος το <p>(paragraph) δηλώνει μια καινούργια παράγραφο.

Αρχή	Περιεχόμενα	Επόμενη Ενότητα