Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι ένα πολύ μεγαλύτερο σύστημα επεξεργασίας εγγράφων και είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου Ιστού.
Η HTML δεν είναι μια γλώσσα προγραμματισμού αλλά μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου. Oρίζει ένα σύνολο κοινών στυλ για τις Web σελίδες, όπως τίτλοι (titles), επικεφαλίδες (headings), παράγραφοι (paragraphs), λίστες (lists) και πίνακες (tables). Κάθε στοιχείο έχει ένα όνομα και περιέχεται μέσα στα σύμβολα < >, που αποκαλούνται ετικέτες (tags).
Όταν ο Φυλλομετρητής ανακτά μια ιστοσελίδα, στην ουσία ανακτά τον κώδικα HTML της ιστοσελίδας. Στη συνέχεια, ο Φυλλομετρητής «διαβάζει» και «διερμηνεύει» τις ετικέτες της HTML, δημιουργεί την ιστοσελίδα και την εμφανίζει στην οθόνη, μορφοποιώντας το κείμενο και τις εικόνες της.
ΕΓΚΑΤΑΣΤΑΣΗ ΑΠΑΡΑΙΤΗΤΩΝ ΕΡΓΑΛΕΙΩΝ
- Δημιουργία φακέλου στον Η/Υ μας: Επιλέγουμε το τμήμα μας και μέσα σε αυτό φτιάχνουμε ένα φάκελο με όνομα HTML. Δημιουργούμε μέσα σε αυτόν άλλους 5 φακέλους με ονόματα HTML01, HTML02... HTML05
- ΕΓΚΑΤΑΣΤΑΣΗ IDE (VS CODE) ΚΑΙ ΣΥΝΔΕΣΗ ΜΕ ΤΟ ΦΑΚΕΛΟ ΜΑΣ:
- ΠΑΡΑΜΕΤΡΟΠΟΙΗΣΗ IDE (VS CODE) :
Σε αυτή την 1η μας άσκηση θα δημιουργήσουμε την 1η μας ιστοσελίδα!
Ανοίξτε το ide (Visual Studio Code) και αφού βεβαιωθείτε ότι βρίσκεστε στο φάκελο HTML01, πατάτε δεξί κλίκ πάνω του και New File... δίνοντας το όνομα HelloWorld.html προκειμένου να δημιουργήσετε το πρώτο σας αρχείο.
Πληκτρολογείτε σε αυτό τον παρακάτω κώδικα και αποθηκεύετε:
Βασικές Ετικέτες
Οι Ετικέτες Επικεφαλίδων
Οι επικεφαλίδες (headings) χρησιμοποιούνται για τον διαχωρισμό των ενοτήτων κειμένου ακριβώς όπως και σ’ ένα βιβλίο. Η HTML ορίζει 6 επίπεδα επικεφαλίδων, των οποίων οι ετικέτες έχουν την εξής μορφή :
<H1> Τίτλος Επικεφαλίδας </H1>
Οι αριθμοί υποδεικνύουν το επίπεδο επικεφαλίδας (Η1 έως Η6). Οι επικεφαλίδες δεν αριθμούνται, όταν εμφανίζονται στην οθόνη, αλλά έχουν ένα χαρακτηριστικό που τις ξεχωρίζει από το κανονικό κείμενο όπως μεγαλύτερο μέγεθος ή εντονότερο κείμενο ή υπογράμμιση.
Οι Σύνδεσμοι (Links)
Για τη δημιουργία ενός συνδέσμου σε μια HTML ιστοσελίδα, χρησιμοποιούμε τις ετικέτες <Α> και </Α> (anchor). Η ετικέτα αποκαλείται συχνά και ετικέτα δεσμού (anchor tag), διότι μπορεί να χρησιμοποιηθεί και για τη δημιουργία δεσμών, δηλαδή συνδέσμων προς σημεία που βρίσκονται στην ίδια ιστοσελίδα. Η μορφή της ετικέτας (tag) είναι η εξής :
<Α HREF="http://www.sch.gr">ΠΣΔ </Α>
Η ιδιότητα HREF (Hypertext REFerence, αναφορά υπερ-κειμένου) χρησιμοποιείται για τον καθορισμό του υπερκειμένου στο οποίο δείχνει ο σύνδεσμος. Στην ιστοσελίδα είναι ορατό μόνο το δεύτερο μέρος (στην παραπάνω περίπτωση «ΠΣΔ») και όταν κάνουμε κλικ πάνω του, ο
φυλλομετρητής χρησιμοποιεί το πρώτο μέρος (υπερκείμενο) ως σημείο προορισμού.
Εισαγωγή Εικόνας
Αφού αποκτήσουμε μια εικόνα, μπορούμε να τη συμπεριλάβουμε σε μια ιστοσελίδα. Οι ένθετες εικόνες υποδεικνύονται με την ετικέτα <IMG> (image), η οποία δεν έχει ετικέτα τέλους, αλλά έχει πολλές ιδιότητες, με πιο σημαντική τη SRC (source). Η ιδιότητα SRC δείχνει το όνομα αρχείου ή το URL της εικόνας που θέλουμε να συμπεριλάβουμε, γραμμένο μέσα σε εισαγωγικά.
Συνεπώς, για την εικόνα image.gif, που βρίσκεται στον ίδιο φάκελο με το αρχείο της ιστοσελίδας, μπορούμε να χρησιμοποιήσουμε την ακόλουθη ετικέτα (tag):
<P> <IMG SRC="image.gif"> </P>
Κατεβάστε στον υπολογιστή σας το σχετικό αρχείο, ακολουθήστε τις οδηγίες του. Ανεβάστε το τελικό σας αρχείο στην πλατφόρμα του eclass.
Κατεβάστε στον υπολογιστή σας το σχετικό αρχείο, ακολουθήστε τις οδηγίες του. Ανεβάστε το τελικό σας αρχείο στην πλατφόρμα του eclass.
Κατεβάστε στον υπολογιστή σας το σχετικό αρχείο, ακολουθήστε τις οδηγίες του. Ανεβάστε το τελικό σας αρχείο στην πλατφόρμα του eclass.
Κατεβάστε στον υπολογιστή σας το σχετικό αρχείο, ακολουθήστε τις οδηγίες του. Ανεβάστε το τελικό σας αρχείο στην πλατφόρμα του eclass.
Κατεβάστε στον υπολογιστή σας το σχετικό αρχείο, ακολουθήστε τις οδηγίες του. Ανεβάστε το τελικό σας αρχείο στην πλατφόρμα του eclass.
Κατεβάστε στον υπολογιστή σας το σχετικό αρχείο, ακολουθήστε τις οδηγίες του. Ανεβάστε το τελικό σας αρχείο στην πλατφόρμα του eclass.
Κατεβάστε στον υπολογιστή σας το σχετικό αρχείο, ακολουθήστε τις οδηγίες του. Ανεβάστε το τελικό σας αρχείο στην πλατφόρμα του eclass.
