Η γλʚσσα html - sch.gr1epal-trikal.tri.sch.gr/static/html/html.pdfημειώσεις html /...

Σημειώσεις HTML / JavaScript Μαρολαχάκης Μάριος

[1]

Η γλώσσα HTML HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και έπειτα προσθέτονται ειδικά σύμβολα γύρω από τις λέξεις ή από ολόκληρες προτάσεις ώστε να καθοριστεί η εμφάνιση τους στην οθόνη. Τα ειδικά σύμβολα στην HTML λέγονται ετικέτες (tags). Η HTML διαθέτει ένα πεπερασμένο αριθμό ετικετών που μπορούμε να χρησιμοποιήσουμε. Ωστόσο ο αριθμός αυτός δεν παραμένει σταθερός. Κατά διαστήματα το W3 Consortium, το οποίο ανάπτυξε και διαχειρίζεται τα πρότυπα της HTML, δημοσιεύει νέα πρότυπα στα οποία προσθέτει καινούργιες ετικέτες που καλύπτουν ή διορθώνουν μια λειτουργία στο προηγούμενο πρότυπο. Η τελευταία αναθεώρηση του HTML προτύπου είναι η HTML5 (Πηγή για την συγγραφή των σημειώσεων το site https://www.w3schools.com/)

Οι ετικέτες (tags) της HTML

Οι ετικέτες ελέγχουν την δομή και την μορφή του κειμένου της ιστοσελίδας. Επίσης παρέχουν πληροφορίες προς τον web browser για την σελίδα που πρόκειται να εμφανίσουν, όπως ο τίτλος της σελίδας ή ο συγγραφέας της, κ.α.

Οι HTML ετικέτες γράφονται ανάμεσα στα σύμβολα < και > π.χ. <όνομα-ετικέτας> όπως <title> η πρώτη μου σελίδα </title>

Οι περισσότερες HTML ετικέτες αποτελούνται από μια ετικέτα αρχής και μια ετικέτα τέλους και ανάμεσα σε αυτές υπάρχει το κείμενο που χαρακτηρίζεται από τις ετικέτες αυτές. Η ετικέτα τέλους περιέχει τον χαρακτήρα / πριν το όνομα της ετικέτας.

πχ. <όνομα-ετικέτας> ... κείμενο ... </όνομα-ετικέτας> όπως <h1> εδώ γράφεται επικεφαλίδα </h1>

Υπάρχουν ορισμένες ετικέτες που δεν έχουν ετικέτες τέλους. Στις ετικέτες αυτές, πριν από το σύμβολο > τοποθετούμε τον χαρακτήρα /

πχ. <όνομα-ετικέτας /> όπως <br />

Το αρχείο που περιέχει HTML ετικέτες λέγεται HTML αρχείο και έχει επέκταση .html ή .htm Τα αρχεία αυτά είναι απλά αρχεία κειμένου σε μορφή ASCII και δεν περιέχουν πληροφορίες για το περιβάλλον ή τα προγράμματα με τα οποία θα λειτουργήσουν. Μπορείτε να ανοίξετε και να δείτε τα αρχεία htm ή html με οποιονδήποτε επεξεργαστή κειμένου, π.χ. Σημειωματάριο (Notepad) των Windows. Ένα καλό πρόγραμμα για αρχή είναι το notepad++

Το πρώτο αρχείο της HTML

Όλα τα έγγραφα HTML πρέπει να ξεκινούν με μια δήλωση τύπου εγγράφου: <! DOCTYPE html>.

Το ίδιο το έγγραφο HTML αρχίζει με <html> και τελειώνει με </ html>.

Το ορατό τμήμα του εγγράφου HTML είναι μεταξύ <body> και </ body>.

Το τμήμα μεταξύ των <head> και </head> θα αναφερθούμε σε επόμενο μάθημα (μπορεί και να παραλειφθεί).

Παράδειγμα:

<DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

http://www.wlearn.gr/index.php/html-html-32

http://www.w3.org/

http://www.wlearn.gr/index.php/home-mathimata-html5




[2]

</head>

<body>

<h1>Η πρώτη μου επικεφαλίδα</h1>

<p> Η πρώτη μου παράγραφος</p>

</body>

</html>

Για να δούμε το παραπάνω σε ένα περιηγητή (browser) πρέπει να φυλάξουμε το αρχείο ως απλό κείμενο με επέκταση .html ή .htm. Το λειτουργικό θα εκτελέσει τον περιηγητή και θα δούμε το αρχείο.

Δοκιμάστε τώρα να εμφανίζεται το παραπάνω αρχείο με τις ακόλουθες αλλαγές


<DOCTYPE html>

<html>

<head>


</head>

<body> <h1>Η πρώτη

μου επικεφαλίδα</h1>

<p> Η

πρώτη μου

παράγραφος</p> </body></html>

Θα παρατηρήσετε ότι δεν αλλάζει κάτι στην εμφάνιση του κειμένου. Οι αλλαγές γραμμής και τα περισσότερα του ενός κενά αγνοούνται στην Html

Οι ετικέτες (tags) επικεφαλίδα και παράγραφος της HTML

Οι κεφαλίδες HTML ορίζονται με τις ετικέτες <h1> έως <h6>. H <h1> ορίζει την πιο μεγάλη κεφαλίδα, η <h6> ορίζει την μικρότερη. Η κεφαλίδες εμφανίζονται με έντονα γράμματα.

Το ετικέτα HTML <p> ορίζει μια παράγραφο:

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

Πριν μετά από κάθε κεφαλίδα και παράγραφο ο φυλλομετρητής αφήνει κενό χώρο, συνήθως μισή γραμμή. Εμφανίστε το παρακάτω αρχείο:


<DOCTYPE html>

<html>

<head>


</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>



[3]

<p> Η πρώτη

μου παράγραφος</p>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<p> Η πρώτη μου παράγραφος</p>

</body>

</html>

Τα στοιχεία (elements) της HTML Ένα στοιχείο HTML αποτελείται από την ετικέτα έναρξης και μια ετικέτα τέλους, μαζί με το περιεχόμενο να παρεμβάλλεται μεταξύ τους.

<ετικέτα> …. Το περιεχόμενο πηγαίνει εδώ ... </ ετικέτα>

Το στοιχείο HTML είναι όλα από την ετικέτα έναρξης έως την ετικέτα τέλους, όπως στο:

<p> Η πρώτη μου παράγραφος. </ p>

Τα στοιχεία μπορούν να περιέχουν και άλλα στοιχεία (ένθετα στοιχεία)

Το παρακάτω αρχείο HTML περιέχει 4 στοιχεία τα <html> <body> <h1> <p> Το <html> περιέχει τα άλλα τρία, το <body> τα <h1> και <p>.


<DOCTYPE html>

<html>

<body>

<h1> Η πρώτη μου επικεφαλίδα </h1>

<p> Η πρώτη μου παράγραφος.</p>

</body>

</html>

Μην ξεχνάτε να κλείνετε τις ετικέτες




[4]

Το παρακάτω αρχείο εμφανίζεται όπως το παραπάνω

<DOCTYPE html>

<html>

<body>

<h1> Η πρώτη μου επικεφαλίδα

<p> Η πρώτη μου παράγραφος.

</body>

</html>

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

Ποτέ μην βασίζεστε σε αυτό. Μπορεί να προκαλέσει απροσδόκητα αποτελέσματα ή σφάλματα αν ξεχάσετε την τελική ετικέτα.

Κενά στοιχεία (empty elements) της HTML Τα στοιχεία HTML χωρίς περιεχόμενο ονομάζονται κενά στοιχεία. To <br> είναι ένα κενό στοιχείο χωρίς ετικέτα κλεισίματος (η ετικέτα <br> ορίζει αλλαγή γραμμής).

Τα κενά στοιχεία μπορούν να "κλείσουν" στην ετικέτα ανοίγματος έτσι: <br />

Το HTML5 δεν απαιτεί κλείσιμο κενών στοιχείων. Αλλά εάν θέλετε αυστηρότερη επικύρωση ή εάν θέλετε να κάνετε το έγγραφό σας αναγνώσιμο από τους parsers (αναλυτές) XML, πρέπει να κλείσετε σωστά όλα τα στοιχεία HTML.

Χρησιμοποιείται ετικέτες γραμμένες με μικρά γράμματα.

Χρησιμοποιήστε πάντα τις ετικέτες πεζών. Στις ετικέτες HTML δεν γίνεται διάκριση πεζών -κεφαλαίων: <P> σημαίνει το ίδιο με το <p>. Το πρότυπο HTML5 δεν απαιτεί ετικέτες πεζών χαρακτήρων, αλλά το W3C (Η Κοινοπραξία του Παγκόσμιου Ιστού https://www.w3.org/, στα ελληνικά http://www.w3c.gr/), συνιστά μικρά γράμματα σε HTML και απαιτεί πεζά γράμματα για αυστηρότερους τύπους εγγράφων όπως το XHTML.

Οι παράμετροι (attributes) της HTML.

Οι παράμετροι παρέχουν πρόσθετες πληροφορίες σχετικά με τα στοιχεία HTML. Όλα τα στοιχεία HTML μπορούν να έχουν παραμέτρους. Οι παράμετροι γράφονται πάντα στην ετικέτα έναρξης. Οι παράμετροι συνήθως έρχονται σε ζεύγη ονόματος / τιμής όπως: όνομα = "τιμή" και μπορεί να εμφανίζονται οι ίδιες σε πολλές ετικέτες και η ετικέτα μπορεί να δέχεται πολλές παραμέτρους.

<img src="img_girl.jpg" width="500" height="600">

Η ετικέτα <img> εισάγει μια εικόνα. Η παράμετρος src έχει τιμή το όνομα αρχείου που περιέχει την εικόνα. Η παράμετροι width και height έχουν τιμή τα εικονοστοιχία (pixels) που θα καταλάβει η εικόνα στον περιηγητή σε πλάτος και ύψος. Η συγκεκριμένη ετικέτα πρέπει να έχει πάντα την παράμετρο src , οι άλλες είναι προαιρετικές.

Βασική μορφοποίηση κειμένου στην HTML.

Οι παρακάτω ετικέτες και παράμετροι (εκτός της <br/>)αφορούν εκδόσεις της HTML προγενέστερες της έκδοσης 5 που χρησιμοποιείται σήμερα. Αναφέρονται για να είναι κατανοητή η διαφορά των προηγούμενων εκδόσεων με την έκδοση 5. Σε όλες τις περιπτώσεις δίνεται και η παράμετρος style της CSS που τις αντικασιστά.



https://www.w3.org/




[5]

Παράμετρος align τιμές: left / center / right / justify. Καθορίζει την στοίχιση του

κειμένου (αριστερά / κέντρο /δεξιά / πλήρης) Εφαρμόζεται στις ετικέτες <p> <h1> … <h6> και άλλες. style=”text-align:left/center/right/justify”

Ετικέτα <br> Αλλαγή γραμμής

Ετικέτα <strong>(είτε Ετικέτα <b>) Έντονα γράμματα style=”font-weight:bold;”

Ετικέτα <em> (είτε Ετικέτα <i>)Πλάγια γράμματα style=”font-style:italic;”

Ετικέτα <mark> Επισήμανση κειμένου με κίτρινο style=”background-color:yellow;”

Ετικέτα <u> Yπογράμμιση. Αποφύγετε τη χρήση του στοιχείου <u> όπου θα μπορούσε να συγχέεται για μια υπερσύνδεση. Η προδιαγραφή HTML 5 υπενθυμίζει στους προγραμματιστές ότι άλλα στοιχεία είναι σχεδόν πάντα πιο κατάλληλα από το <u>. style=”text-decoration:underline;”

Ετικέτα <pre> Το στοιχείο HTML <pre> ορίζει προκαθορισμένο κείμενο. Το κείμενο μέσα σε ένα στοιχείο <pre> εμφανίζεται σε μια γραμματοσειρά σταθερού πλάτους (συνήθως Courier) και διατηρεί τις αλλαγές γραμμής και τα κενά διαστήματα όπως είναι στο αρχείο HTML:

Ετικέτα <small> Μικρότερα γράμματα style=”text-size:smaller;”

Ετικέτα <del> Διαγραμμένο κείμενο style=”text-decoration:overline;”

Ετικέτα <sub> Κείμενο ως δείκτης style=”vertical-align:sub;text-size:smaller”

Ετικέτα <sup> Κείμενο ως εκθέτης style=”vertical-align:supper;text-size:smaller”

Σημείωση: Σύμφωνα με την προδιαγραφή HTML 5, η ετικέτα <b> θα πρέπει να χρησιμοποιείται ως έσχατη λύση όταν καμία άλλη ετικέτα δεν είναι πιο κατάλληλη. Η προδιαγραφή HTML 5 δηλώνει ότι οι επικεφαλίδες πρέπει να σημειώνονται με τις ετικέτες <h1> έως <h6>, το κείμενο με έμφαση θα πρέπει να σημειώνεται με την ετικέτα <em>, το έντονο κείμενο θα πρέπει να σημειώνεται με την ετικέτα <strong> και το επισημασμένο κείμενο πρέπει να χρησιμοποιήσετε την ετικέτα <mark>.


<DOCTYPE html>

<html>

<head>


</head>

<body>

<h1 align="center">Στοίχιση στο κέντρο</h1>

<h6 align="right">Στοίχιση <br> αριστερά</h6>

<p>

Ετικέτα <br> Αλλαγή γραμμής

<strong> Έντονα γράμματα </strong>

<em> Πλάγια γράμματα</em>

<em> <strong> Έντονα γράμματα και πλάγια γράμματα</strong>

</em>

<mark> Επισήμανση κειμένου με κίτρινο</mark>

<u> Yπογράμμιση </u> <small> Μικρότερα γράμματα </small>


[6]

<del> Διαγραμμένο κείμενο</del>Κείμενο ως <sub> δείκτης</sub>

Κείμενο ως <sup>εκθέτης</sup> <ins> Εισαγόμενο κείμενο</ins>.

</p>

<pre> Το στοιχείο pre HTML ορίζει προκαθορισμένο κείμενο.

Το κείμενο μέσα σε ένα στοιχείο pre

εμφανίζεται σε μια γραμματοσειρά σταθερού

πλάτους (συνήθως Courier), και διατηρεί τις αλλαγές γραμμής

και τα κενά διαστήματα:</pre>

</body>

</html>

Εισαγωγή εικόνας στην HTML.

Στην HTML, οι εικόνες ορίζονται με την ετικέτα <img> Η ετικέτα <img> είναι κενή, δηλαδή περιέχει μόνο παραμέτρους και δεν έχει ετικέτα κλεισίματος.

Παράμετρος scr περιέχει τη διεύθυνση όπου ο περιηγητής θα βρει την εικόνα. Η διεύθυνση μπορεί να είναι διαδρομή αρχείου στον υπολογιστή που φιλοξενεί το αρχείο (π.χ. images/myphoto.jpg) ή διεύθυνση URL (διεύθυνση internet π.χ. https://www.w3schools.com/html/myphoto.jpg)

Η διαδρομή αρχείου στην φωτογραφία έχει αφετηρία τον φάκελο που περιέχει το αρχείο HTML που περιέχει την ετικέτα <img>.

Παράμετρος alt Περιέχει κείμενο που εμφανίζεται μόνο όταν δεν μπορεί να εντοπισθεί η εικόνα από τον περιηγητή.

Παράμετροι width και height Καθορίζουν το πλάτος και το ύψος του χώρου σε pixels που θα καταλάβει η εικόνα όταν εμφανισθεί. Ένα ο χώρος που θα καταλάβει η εικόνα είναι διαφορετικός από το πραγματικό μέγεθος της εικόνας τότε αυτή προσαρμόζεται από τον περιηγητή στον χώρο που καθορίζεται από τις παραμέτρους.


<img src="htmlIcon.gif">

<img src="htmlIcon.gif" alt="HTML5 Icon">

<img src="htmlIcon.gif" alt="HTML5 Icon" width="128" height="128">


https://www.w3schools.com/html/myphoto.jpg


[7]

<img src="https://www.w3schools.com/html/myphoto.jpg" alt="Η φωτογραφία μου" width="300" height="600">

Παράμετροι style="float:left;" και style="float:right;"

Με τις style μπορούμε να τοποθετήσουμε την εικόνα στα δεξιά ή αριστερά του παραθύρου του περιηγητή και να κάνουμε το κείμενο να τις περιβάλει. Για την style θα αναφερθούμε παρακάτω αναλυτικά.


<p><img src="smiley.gif" width="200" height="300" style="float:right;"> Η

εικόνα θα είναι δεξιά και το κείμενο θα την περιβάλλει.</p>

<p><img src="smiley.gif" style="float:left;"> Η εικόνα θα είναι αριστερά και το

κείμενο θα την περιβάλλει.</p>

Υπερσύνδεσμοι (links)

Οι υπερσύνδεσμοι βρίσκονται σχεδόν σε όλες τις ιστοσελίδες. Οι υπερσύνδεσμοι επιτρέπουν στους χρήστες να κάνουν κλικ επάνω τους και να μεταφερθούν σε άλλη σελίδα.

Όταν μετακινείτε το ποντίκι πάνω από ένα υπερσύνδεσμο, το βέλος του ποντικιού θα μετατραπεί σε ένα μικρό χέρι.

Σημείωση: Ο υπερσύνδεσμοι δεν χρειάζεται να είναι κείμενο. Μπορεί να είναι μια εικόνα ή οποιοδήποτε άλλο στοιχείο HTML.

Οι σύνδεσμοι ορίζονται με την ετικέτα <a> και την παράμετρο href η οποία περιέχει τη διεύθυνση όπου ο περιηγητής θα βρει το αρχείο HTML το οποίο πρόκειται να εμφανίσει. Η διεύθυνση μπορεί να είναι διαδρομή αρχείου στον υπολογιστή που φιλοξενεί το αρχείο (π.χ. new/books/lesson.html) ή διεύθυνση εξωτρική URL (διεύθυνση internet π.χ. https://www.w3schools.com/html/ lesson.html) ή μετακίνηση μέσα στο ίδιο το αρχείο HTML (χρήσιμη όταν το αρχείο είναι μεγάλο).


<a href="books/lesson.html">Διάβασε το βιβλίο της HTML</a>

<a href="https://www.w3schools.com/html/lesson.html"> Διάβασε το βιβλίο της HTML</a>

<a href="#kef4"> Πήγαινε το κεφάλαιο 4</a>

<a href="https://www.w3schools.com/html/lesson.html#kef4"> Διάβασε το βιβλίο της HTML. Κεφάλαιο 4</a>

Παράμετρος id Αποδίδει όνομα σε ένα στοιχείο HTML. Είναι χρήσιμο όταν χρειάζεται να αναφερθούμε σε ένα στοιχείο HTML όπως στην περίπτωση που ένας σύνδεσμος πρέπει να μας μετακινήσει σε ένα άλλο σημείο ενός αρχείο HTML.


<h2 id="C4"> Κεφάλαιο 4</h2>

Παράμετρος target τιμές: _blank / _self / _parent / _top / framename Καθορίζει το τρόπο ανοίγματος του συνδεδεμένου εγγράφου.

_blank - Ανοίγει το συνδεδεμένο έγγραφο σε νέο παράθυρο ή καρτέλα

_self - Ανοίγει το συνδεδεμένο έγγραφο στο ίδιο παράθυρο / καρτέλα με αυτό που έκανε κλικ (αυτό είναι προεπιλεγμένο)

[8]

_parent - Ανοίγει το συνδεδεμένο έγγραφο στο γονικό πλαίσιο (frame Τα πλαίσια δεν χρησιμοποιούνται στην HTML 5)

_top - Ανοίγει το συνδεδεμένο έγγραφο στο πλήρες σώμα του παραθύρου

framename - Ανοίγει το συνδεδεμένο έγγραφο στο πλαίσιο (frame) με αυτό το όνομα (Τα πλαίσια δεν χρησιμοποιούνται στην HTML 5)

Παράδειγμα ( τα <, > εμφανίζουν τα <,> χωρίς να γίνεται σύγχυση με τις ετικέτες):

<html> <head>


</head> <body>

<h1 id="start"> Εισαγωγή εικόνας </h1>

<p>

ΕΙκόνα:<img src="images/chess.PNG">

Εικόνα με συγκεκριμένο χώρο:<img src="images/chess.PNG" width="160"

height="50">

Εικόνα με λάθος διεύθυνση:<img src=

"https://www.w3schools.com/html/myphoto.jpg" alt="Η φωτογραφία μου"

width="100" height="200"> Εικόνα υπερσύνδεσμος στο

https://www.w3schools.com/ <a href="https://www.w3schools.com/"><img

src="images/chess.PNG" width="160" height="153"></a>

<p>

<h1> Υπερσύνδεσμοι </h1>

<p>Διάβασε το<a href="sample.html"> sample.html</a>

Διάβασε το <a

href="../books/G_Epal_Lyseis_Askiseon.pdf">G_Epal_Lyseis_Askiseon.pdf

</a> Δες την <a href="images/mamali9.jpg" target="_blank">εικόνα</a>

<br>

Κατέβασε το

<a href="../scratch projects/polygonSimple.sb2">

polygonSimple.sb2</a></p>

<h1 align="center">Περιγραφή ετικετών (tags) </h1>

<h3>Μετάβαση τα: <a href="#body">body</a>, <a href="#form">form</a>,

<a href="#code">code</a>, ...</h3>

<p>  Defines a comment </p>

<p> <!DOCTYPE> Defines the document type

</p> <p> <a> Defines a hyperlink

</p> <p> <abbr> Defines an abbreviation or an acronym

</p> <p> <acronym> Not supported in HTML5. Use </p> <p>

<abbr> instead.

Defines an acronym

</p> <p> <address> Defines contact information for the

author/owner of a document

</p> <p> <applet> Not supported in HTML5. Use </p> <p>

<embed> or </p> <p> <object> instead.

Defines an embedded applet

</p> <p> <area> Defines an area inside an image-map

</p> <p> <article> Defines an article

</p> <p> <aside> Defines content aside from the page content

</p> <p> <audio> Defines sound content

</p> <p> <b> Defines bold text

</p> <p> <base> Specifies the base URL/target for all

relative URLs in a document


[9]

</p> <p> <basefont> Not supported in HTML5. Use CSS

instead.

Specifies a default color, size, and font for all text in a document

</p> <p> <bdi> Isolates a part of text that might be

formatted in a different direction from other text outside it

</p> <p> <bdo> Overrides the current text direction

</p> <p> <big> Not supported in HTML5. Use CSS instead.

Defines big text

</p> <p> <blockquote> Defines a section that is quoted from

another source

</p> <p id="body"> <body> Defines the document's body

</p> <p> <br> Defines a single line break

</p> <p> <button> Defines a clickable button

</p> <p> <canvas> Used to draw graphics, on the fly, via

scripting (usually JavaScript)

</p> <p> <caption> Defines a table caption

</p> <p> <center> Not supported in HTML5. Use CSS

instead.

Defines centered text

</p> <p> <cite> Defines the title of a work

</p> <p id="code"> <code> Defines a piece of computer code

</p>

<p> ...</p>

<p>Αρχή σελίδας <a href="#start"><img src="images/arowUp.PNG"

width="19" height="24" border="0"></a></p>

</body> </html>


[10]

Μορφοποίηση (παράμετρος style) Η παράμετρος προσδιορίζει την εμφάνιση ενός στοιχείου HTML και μπορεί να ανήκει σε κάθε μη κενό στοιχείο. Η style ενός ένθετου στοιχείου υπερισχύει από αυτή του στοιχείου που το περιέχει. Η παράμετρος style έχει την ακόλουθη σύνταξη:

style="ιδιότητα:τιμή; ιδιότητα:τιμή; … "

Η ιδιότητα είναι μια ιδιότητα CSS. Η τιμή είναι μια τιμή CSS. Θα μάθετε περισσότερα σχετικά με το CSS αργότερα.


Το κείμενο θα εμφανισθεί με κόκκινα γράμματα αλλά η λέξη μικρή με μπλε.

<p style="color:red;"> Αυτή είναι μια <strong style="color:blue;"> μικρή </ strong > παράγραφος.</p>

Χρώμα κειμένου color

Η ιδιότητα color ορίζει το χρώμα του κειμένου ενός στοιχείου της HTML. To χρώμα έχει τιμή λέξη όπως red / green / yellow / white κτλ ή χρώμα με στο δεκαεξαδικό π.χ. #FF2AE0.


<h1 style="color:blue;">Επικεφαλίδα </h1>

Χρώμα φόντου background-color

Η ιδιότητα background-color ορίζει το χρώμα του φόντου ενός στοιχείου της HTML.


<body style="background-color:powderblue;"><h1> γράμματα πάνω σε μπλε ανοικτό

φόντο </h1><p style="background-color:blue; color:red;">Κόκκινα γράμματα πάνω

σε μπλε φόντο.</p></body>

Το χρώμα στην HTML

Για τον ορισμό του χρώματος χρησιμοποιούνται διάφοροι τρόποι. Οι πλέον χρησιμοποιούμενοι είναι:

1. Προκαθορισμένα ονόματα χρωμάτων όπως red, blue, green, black, white, yellow, Tomato, Orange, DodgerBlue, Violet κτλ. Υπάρχουν 140 ονομασίες χρωμάτων.

2. Δεκαεξαδική τιμή (HEX value). Στην HTML, ένα χρώμα μπορεί να καθοριστεί χρησιμοποιώντας μια δεκαεξαδική τιμή με την φόρμα: #rrggbb Όπου rr (κόκκινο), gg (πράσινο) και bb (μπλε) είναι δεκαεξαδικές τιμές μεταξύ 00 και ff. Για παράδειγμα, το #ff0000 εμφανίζεται με κόκκινο χρώμα, επειδή το κόκκινο έχει οριστεί στην υψηλότερη τιμή του (ff) και τα άλλα έχουν ρυθμιστεί στη χαμηλότερη τιμή (00).

3. Τιμή RGB. Στην HTML, ένα χρώμα μπορεί να οριστεί ως τιμή RGB, χρησιμοποιώντας αυτόν τον τύπο: rgb (κόκκινο, πράσινο, μπλε) Κάθε παράμετρος (κόκκινο, πράσινο


[11]

και μπλε) ορίζει την ένταση του χρώματος μεταξύ 0 και 255. Για παράδειγμα, το rgb (255, 0, 0) εμφανίζεται ως κόκκινο, επειδή το κόκκινο έχει οριστεί στην υψηλότερη τιμή του (255) και οι άλλοι έχουν οριστεί σε 0. Για να εμφανιστεί το χρώμα μαύρο, όλες οι παράμετροι χρώματος πρέπει να ρυθμιστούν στο 0, όπως: rgb (0, 0, 0). Για να εμφανιστεί το λευκό χρώμα, όλες οι παράμετροι χρώματος πρέπει να ρυθμιστούν στο 255, όπως αυτό: rgb(255, 255, 255). Πειραματιστείτε με την ανάμιξη των παρακάτω τιμών RGB:

Γραμματοσειρές font-family

Η ιδιότητα font-family ορίζει την γραμματοσειρά που θα χρησιμοποιηθεί στο στοιχείο της HTML. Τιμή έχει το όνομα της γραμματοσειράς


<h1 style="font-family:verdana;">Εδώ βλέπεις μια επικεφαλίδα</h1><p style="font-

family:courier;">Εδώ βλέπεις μια παράγραφο.</p>

Μέγεθος κειμένου font-size

Η ιδιότητα font-size ορίζει το μέγεθος των γραμμάτων που θα χρησιμοποιηθούν στο στοιχείο της HTML. Τιμή ποσοστό μεγέθους γράμματος σε σχέση με το βασικό του περιηγητή π.χ. 200% δηλαδή διπλάσια γράμματα. Μπορεί να έχει τιμή το μέγεθος σε pixels π.χ. 20px


<h1 style="font-size:300%;">Εδώ βλέπεις μια επικεφαλίδα</h1>

<p style="font-size:10px;">Εδώ βλέπεις μια παράγραφο.</p>

<p>Τα χρησιμοποιούμενα γράμματα.</p>

Στοίχιση κειμένου text-align

Η ιδιότητα text-align ορίζει την στοίχιση του κειμένου που θα χρησιμοποιηθεί στο στοιχείο της HTML. Τιμές: left / center / right / justify Αντίστοιχα: αριστερά / κέντρο / δεξιά / πλήρης.


<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:justify;">a paragraph.</p>


[12]

Διακόσμηση κειμένου text-decoration

Η ιδιότητα text-decoration καθορίζει τη διακόσμηση του κείμενο. Οι τιμές της είναι:

None / underline / overline / line-through / initial / inherit. Αντίστοιχα: καμία / υπογράμμιση / υπερράμμιση / διαγραφή / αρχική / κληρονομούμενη από το γονικό στοιχείο


<h1 style="text-decoration:overline;">Υπεργραμμισμένο κείμενο</h1>

Χρώμα περιγράμματος border

Η ιδιότητα border ορίζει το στυλ, το χρώμα και το πάχος του περιγράμματος ενός στοιχείου της HTML. Το στυλ έχει τιμή solid / dotted / double / dashed αντίστοιχα συμπαγές / διάστικτο / διπλό / με παύλες Οι ιδιότητες του τύπου του στυλ πρέπει να αναφέρονται αλλιώς δεν εμφανίζεται κάτι. Προαιρετικά μπορούμε να ορίσουμε πάχος σε pixels π.χ.: 5px και χρώμα. Τα διαχωρίζουμε με κενό, η σειρά δεν έχει σημασία.


<h1 style ="background-color:yellow;border:solid black; "> Η παράγραφος έχει

φόντο κίτρινο και περίγραμμα μαύρο</ h1>

<p style ="border:dashed red 15px"> Η παράγραφος έχει περίγραμμα με παύλες,

κόκκινο με πάχος 15 pixels.</p >

Διάστημα έσω του περιγράμματος – Μέσα περιθώριο padding

Η ιδιότητα padding CSS ορίζει το διάστημα μεταξύ του περιεχομένου του στοιχείου και του περιγράμματος π.χ.:

<p style="border: 2px solid brown; padding: 30px; "> Εμφανίζει κενό διάστημα 30 pixel μεταξύ του κειμένου και του συμπαγούς περιγράμματος χρώματος brown πάχους 2

pixel</p>

<p style="border: 2px solid brown; "> Το προηγούμενο χωρίς padding </p>

Διάστημα έξω από το περίγραμμα – Έξω περιθώριο margin


[13]

Η ιδιότητα margin CSS ορίζει το διάστημα μεταξύ του περιγράμματος και του παραθύρου του περιηγητή ή του επόμενου - προηγούμενου στοιχείου π.χ.:

<p style="border: 2px solid powderblue; margin: 30px; "> Εμφανίζει κενό διάστημα 30 pixel μεταξύ του συμπαγούς περιγράμματος χρώματος powderblue πάχους 2 pixel και των

παραγράφων ή του παραθύρου του περιηγητή</p>

<p style="border: 2px solid powderblue; "> Το προηγούμενο χωρίς margin </p>

Διάταξη πλαισίου (Box model). Οι ιδιότητες border – padding – margin μαζί με το περιεχόμενο ενός στοιχείου της HTML ονομάζονται και διάταξη πλαισίου (box model). Όπου:

Περιεχόμενο – content: Το περιεχόμενο του πλαισίου, όπου εμφανίζονται κείμενο και εικόνες

Μέσα περιθώριο – padding: Καθαρίζει μια περιοχή γύρω από το περιεχόμενο. Η περιοχή είναι διαφανής.

Περίγραμμα – border: Περιοχή που μπορεί να έχει χρώμα γύρω από padding

Περιθώριο margin: Η περιοχή έξω από το περίγραμμα. Το περιθώριο είναι διαφανές.

[14]

Η διάταξη πλαισίου μας επιτρέπει να προσθέσουμε ένα περιθώριο γύρω από τα στοιχεία και να ορίσουμε χώρο μεταξύ των στοιχείων.

Ειδικοί χαρακτήρες.

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

Ετικέτα <q> Εμφανίζει εισαγωγικά


<p>WWF's goal is to: <q>Build a future where people live in harmony with nature. </q>

</p>

Ειδικοί χαρακτήρες:

Μικρότερο (<) &lt ή &#60 Μεγαλύτερο (>) &gt ή &#60 Υπάρχουν εκατοντάδες ειδικοί χαρακτήρες για την εμφάνιση συμβόλων. Γενικότερα μπορούμε να χρησιμοποιήσουμε απευθείας τον κωδικό του Unicode βάζοντας μπροστά το & και μετά το #. Π.χ. &#65 είναι το Α (λατινικό), το &#67 είναι το C Λεπτομέρειες στην διεύθυνση:

https://dev.w3.org/html5/html-author/charref

Ετικέτες σχολίων HTML

Μπορείτε να προσθέσετε σχόλια στην πηγή HTML χρησιμοποιώντας την ακόλουθη σύνταξη:



Παρατηρήστε ότι υπάρχει ένα θαυμαστικό (!) στην ετικέτα ανοίγματος, αλλά όχι στην ετικέτα κλεισίματος.

Σημείωση: Τα σχόλια δεν εμφανίζονται από το πρόγραμμα περιήγησης, αλλά μπορούν να βοηθήσουν στην τεκμηρίωση του πηγαίου κώδικα HTML. Με σχόλια μπορείτε να τοποθετήσετε ειδοποιήσεις και υπενθυμίσεις στο HTML σας:

<p>Εδώ βλέπεις μια παάγραφο.</p>



https://dev.w3.org/html5/html-author/charref


[15]

Μορφοποίηση της HTML με CSS (Cascading Style Sheets) Το CSS περιγράφει τον τρόπο εμφάνισης των στοιχείων HTML σε οθόνη, χαρτί ή σε άλλα μέσα. Το CSS εξοικονομεί πολλή δουλειά. Μπορεί να ελέγχει τη διάταξη πολλών ιστοσελίδων ταυτόχρονα. Το CSS μπορεί να προστεθεί σε στοιχεία HTML με 3 τρόπους:

Inline (στην γραμμή) - χρησιμοποιώντας το παράμετρο <style> σε στοιχεία HTML.

Internal (Εσωτερικά) - χρησιμοποιώντας την ετικέτα <style> στην ενότητα <head>

External (Εξωτερικά) - χρησιμοποιώντας ένα εξωτερικό αρχείο CSS. Ο πιο συνηθισμένος τρόπος για να προσθέσετε το CSS είναι να διατηρείτε τα style σε ξεχωριστά αρχεία CSS. Ωστόσο, εδώ θα χρησιμοποιήσουμε το inline και το internal στυλ, για λόγους απλότητας.

Inline CSS

Ένα inline CSS χρησιμοποιείται για την εφαρμογή ενός μοναδικού στυλ σε ένα μόνο στοιχείο HTML. Ένα inline CSS χρησιμοποιεί την παράμετρο style ενός στοιχείου HTML.

Μέχρι τώρα χρησιμοποιούσαμε την <style> με τον inline τρόπο όπως:

<h1 style="color:blue;text-align:center"> Ένας τίτλος για επικεφαλίδα </h1>

Αυτό το παράδειγμα θέτει το χρώμα κειμένου του στοιχείου <h1> σε μπλε χρώμα και την στοίχιση στο κέντρο.

Internal CSS

Ένα internal CSS χρησιμοποιείται για τον καθορισμό ενός στυλ για μια μοναδική σελίδα HTML. Ένα internal CSS ορίζεται στην ενότητα <head> μιας σελίδας HTML, μέσα σε ένα στοιχείο <style> όπως στο παράδειγμα:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>Επικεφαλίδα</h1>

<p>Παράγτραφος ….</p>

<p>Άλλη μια παράγραφος ….</p>

</body>

</html>

Ενώ με τον inline τρόπο το παραπάνω θα πρέπει να γραφεί ισοδύναμα:

<!DOCTYPE html>

<html>

<head> <meta charset="utf-8" /> </head>

<body style="background-color:powderblue; ">


[16]

<h1 style="color: blue; ">Επικεφαλίδα</h1>

<p style="color: red; ">Παράγτραφος ….</p>

<p style="color: red; ">Άλλη μια παράγραφος ….</p>

</body>

</html>

External CSS

Χρησιμοποιείται ένα εξωτερικό αρχείο στυλ για τον ορισμό του στυλ για πολλές σελίδες HTML. Με ένα εξωτερικό αρχείο στυλ, μπορείτε να αλλάξετε την εμφάνιση ολόκληρης της ιστοσελίδας, αλλάζοντας μόνο το αρχείο!

Για να χρησιμοποιήσετε ένα εξωτερικό φύλλο στυλ, προσθέστε ένα σύνδεσμο σε αυτό στην ενότητα <head> της σελίδας HTML:

<link rel="stylesheet" href="styles.css"> ή αν το αρχείο υπάρχει στο διαδίκτυο:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Για να είναι ισοδύναμο με το προηγούμενο παράδειγμα θα πρέπει να γραφεί με τον External τρόπο:

<!DOCTYPE html>

<html>

<head>


<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>Επικεφαλίδα</h1>

<p>Παράγραφος ….</p>

<p>Άλλη μια παράγραφος ….</p>

</body>

</html>

Το αρχείο styles.css πρέπει να έχει περιεχόμενο:

body { background-color: powderblue;}

h1 { color: blue;}

p { color: red;}

Χρήση της παραμέτρου id με τα CSS

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

Με την παράμετρο id μπορούμε να ορίσουμε στυλ μόνο για την συγκεκριμένη παράγραφο.

…

<style>

p {color: blue;}

#p01 {color: red;}

</style>


[17]

</head>

…

<p id="p01">Εμφανίζομαι με κόκκινα γράμματα</p>

<p id="p02"> Εμφανίζομαι με μπλε γράμματα, το #p02 δεν υπάρχει </p>

<p> Εμφανίζομαι με μπλε γράμματα </p>

Χρήση της παραμέτρου class με τα CSS

Για να ορίσετε ένα στυλ για μια ομάδα στοιχείων, προσθέστε μια παράμετρο κλάσης στην

ετικέτα style στην κεφαλίδα ενός αρχείου. Η σύνταξη είναι:

ετικέτα.όνομα { ιδιότητα:τιμή; … } και οι αντίστοιχες παράμετροι στις ετικέτες class="όνομα"

<style>

p {color: blue;}

p.error {color: red;}

</style>

</head>

…

<p class="error">Εμφανίζομαι με κόκκινα γράμματα</p>


<p class="error"> Εμφανίζομαι με κόκκινα γράμματα </p>


<h3 class="error"> Εμφανίζομαι με τα εξ ορισμού γράμματα </h3>

Τα πάντα που αφορούν την μορφή της σελίδας στην HTML5 πρέπει να γίνονται με το ζεύγος ιδιότητα:τιμή των CSS.

Μορφοποίηση υπερσυνδέσμων με CSS Από προεπιλογή, ένας υπερσύνδεσμος θα εμφανιστεί σε όλα τα προγράμματα περιήγησης:

Ένας υπερσύνδεσμος (link) που δεν έχει βρεθεί είναι υπογραμμισμένος και μπλε.

Ένας υπερσύνδεσμος (visited) που έχετε επισκεφθεί είναι υπογραμμισμένος και μοβ.

Ένας ενεργός υπερσύνδεσμος (active) είναι υπογραμμισμένος και κόκκινος.

Όταν το ποντίκι βρίσκεται πάνω από τον υπερσύνδεσμο (hover) εμφανίζεται ως δείκτης του ποντικιού ένα «χέρι» αντί του τόξου.

Μπορείτε να αλλάξετε τα προεπιλεγμένα χρώματα, χρησιμοποιώντας στυλ.

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

<style>

a:link {

color: white;

background-color: red;

border: solid yellow 5px;


[18]

text-decoration: none;

}

</style>

Στο επόμενο παράδειγμα ο σύνδεσμος έχει διαφορετικά χρώματα ανάλογα την κατάστασή του (link / hover / active /visited).

<style>

a:link {

color: green;

background-color: transparent; <! - - Τo transparent εμφανίζει το χρώμα που έχει επιλεγεί για την περιοχή του υπερσυνδέσμου σελίδα -- >


}

a:visited {

color: pink;

background-color: transparent;


}

a:hover {

color: white;

background-color: red;

text-decoration: underline;

}

a:active {

color: yellow;

background-color: transparent;

text-decoration: underline;

}

</style>

Μορφοποίηση εικόνων με CSS

Στην αρχή είχαμε αναφερθεί στην ετικέτα εισαγωγής εικόνας <img> και είχαμε περιγράψει τις τέσσερις βασικές παραμέτρους της src / alt / width / height

Η ετικέτα <img> είναι κενή, περιέχει μόνο χαρακτηριστικά και δεν έχει ετικέτα κλεισίματος. Η παράμετρος src καθορίζει τη διεύθυνση URL (διεύθυνση ιστού) της εικόνας.

Η παράμετρος alt παρέχει ένα εναλλακτικό κείμενο για μια εικόνα, αν ο χρήστης για κάποιο λόγο δεν μπορεί να το δει (λόγω αργής σύνδεσης, σφάλματος στην src ή εάν ο χρήστης χρησιμοποιεί ένα πρόγραμμα ανάγνωσης οθόνης. Η τιμή της παρμέτρου alt θα πρέπει να περιγράφει την εικόνα.

Οι παράμετροι width και height ορίζουν τον χώρο που θα καταλάβει η εικόνα στην σελίδα.

Να καθορίζετε πάντοτε το πλάτος και το ύψος μιας εικόνας. Αν το πλάτος και το ύψος δεν έχουν καθοριστεί, η σελίδα μπορεί να τρεμοπαίζει όταν φορτώνεται η εικόνα.



[19]

<img src="girl.jpg" alt="Ένα κορίτσι" width="50%" height="600">

Μπορείτε όμως να χρησιμοποιήσετε την παράμετρο – ετικέτα style για να ορίσετε το πλάτος και το ύψος της εικόνας στην σελίδα σε αριθμό pixels (px)είτε σε ποσοστό της σελίδας (%).

Παράδειγμα με ίδια εμφάνιση με το προηγούμενο:

<img src="girl.jpg" alt ="Ένα κορίτσι" style = "width:50%; height:500px;">

Οι παράμετροι width (πλάτος), height (ύψος) και style με ιδιότητα width/height ισχύουν στην HTML5. Ωστόσο, προτείνουμε τη χρήση του style. Αποτρέπει τα εξωτερικά ή εσωτερικά style να αλλάξουν το μέγεθος των εικόνων γιατί το γενικότερο στυλ εφαρμόζεται στο ειδικότερο όταν υπάρχουν οι παράμετροι width και height.


<!DOCTYPE html> <html> <head> <style> img { width:100%; } </style> </head> <body>

<p> Η εικόνα χρησιμοποιεί την ιδιότητα width:128px ως ειδικότερη του γενικότερου στυλ όπου το πλάτος έχει οριστεί στο 100% </p> <img src="icon.gif" alt="εικόνα σε διαστάσεις 128 Χ 128" style="width:128px;height:128px;">

<p> Η εικόνα χρησιμοποιεί την ιδιότητα width:100% γιατί το γενικότερο στυλ υπερισχύει της παραμέτρου width </p> <img src="icon.gif" alt="Η εικόνα θα έχει το πλάτος του παραθύρου το περιηγητή και ύψος 128px" width="128" height="128"> </body> </html>

Τοποθέτηση εικόνας στο πλάι με το κείμενο γύρω float.

Η ιδιότητα float CSS τοποθετεί την εικόνα αριστερά η δεξιά ενός κειμένου, με το κείμενο να «τυλίγει» την εικόνα. Τιμές right / left:

Παράγειγμα:


[20]

<p><img src="chess.gif" style= "float:right; width:42px; height:42px;"> Η εικόνα θα εμφανισθεί δεξιά του κειμένου.</p>

Εικόνα φόντου background-image

Με την ιδιότητα background-image ορίζουμε ως φόντου ενός στοιχείου μια εικόνα. Τιμή url('διεύθυνση εικόνας') Συνήθως χρησιμοποιείται για την ετικέτα <body> Στην περίπτωση που εικόνα δεν καλύπτει όλο τον χώρο του στοιχείου η εξ ορισμού συμπεριφορά είναι η επανάληψή της για να γεμίσει όλο το χώρο. Με την εικόνα ενός τούβλου μπορούμε να έχουμε ως φόντο ένα τοίχο από τούβλα.

Παράγειγμα:

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

<style> body { background-image:url('images/arowUp.PNG');

}

p.error { background-color:pink;width:400px; } </style> </head>

<body> <h2> Ο ΜΟΝΑΣΤΗΡΙ ΤΟΥ ΑΪ ΓΙΩΡΓΗ ΣΤΟ ΜΥΡΟΦΥΛΛΟ </h2>

<p> <p>Υπάρχει μία μεγάλη κατηγορία μνημείων που, ενώ συνεχίζουν να λειτουργούν αδιάλειπτα και όπως η Ιστορία τα έχει τάξει, να . . . . </p>

<p> class="error"> Εντελώς διαφορετικά από άποψη στοιχείων είναι τα πράγματα στην τρίτη περίοδο, 1815- σήμερα. Αυτό είναι και το τμήμα που σώζεται και όχι βεβαίως στην αρχική του την μορφή. Τώρα κέντρο λατρείας γίνεται η εκκλησία του Αγ. Γεωργίου και ένας ακόμη χώρος περισυλλογής και προσευχής, η εκκλησία των Ταξιαρχών. Το καινούργιο . . . . . </p> </body>

</html>


[21]

Πίνακες (table) Ένας πίνακας HTML ορίζεται με την ετικέτα <table>. Κάθε σειρά πίνακα καθορίζεται με την ετικέτα <tr> Μια κεφαλίδα πίνακα καθορίζεται με την ετικέτα <th>. Από προεπιλογή, οι επικεφαλίδες των πινάκων είναι έντονες και κεντρικές. Τα δεδομένα (κελί πίνακα) καθορίζονται με την ετικέτα <td>.


<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>

Περίγραμμα πίνακα border

Εάν δεν καθορίσετε ένα περίγραμμα για τον πίνακα, θα εμφανιστεί χωρίς περίγραμμα. Το περίγραμμα μπορεί να οριστεί χρησιμοποιώντας την ιδιότητα border των CSS:


<style>

table, th, td { border: 3px solid black; }

</style>

Εάν ορισθεί η παραπάνω CSS για τον πίνακα του προηγούμενου παραδείγματος θα εμφανισθεί:

<style>


[22]

table, th { border: 3px solid black; }

td { border: 2px dotted red; text-align: center; }

</style>

Ενώ αν ορισθεί η παραπάνω CSS για τον πίνακα του προηγούμενου παραδείγματος θα εμφανισθεί:

Κενό μεταξύ περιεχομένου και περιγράμματος padding

Το padding καθορίζει το χώρο μεταξύ του περιεχομένου κυψέλης και των ορίων του. Αν δεν καθορίσετε padding, τα κελιά του πίνακα θα εμφανιστούν χωρίς κενό, όπως στα προηγούμενα παραδείγματα.


<style>


td { border: 2px solid red; text-align: center; }

td, th { padding: 10px; }

</style>

Κενό μεταξύ των κελιών border-spacing

Η border-spacing καθορίζει τον χώρο μεταξύ των κελιών ή των περιγραμμάτων τους εάν υπάρχουν. Η ιδιότητα έχει νόημα μόνο για την table.


<style>



[23]

td { border: 1px solid red;

}

table { border-spacing: 20px; }

</style>

Σύμπτυξη περιγράμματος border-collapse

Με την border-collapse καταργείται το κενό μεταξύ του περιγράμματος. Η ιδιότητα border-collapse υπερισχύει της border-spacing


table, th, td { border:3px solid; border-collapse:collapse; }

Συγχώνευση κελιών οριζόντια colspan

Με την ιδιότητα colspan «υποχρεώνουμε» το κελί να συγχωνευτεί με τα διπλανά του, καταλαμβάνοντας περισσότερες στήλες.

<html>

<head>


<style>

table, td, th { border: 1px solid red; }

</style>

</head>

<body>


[24]

<table style="width:100%"> <tr> <th>Όνομα</th> <th colspan="2">Τηλέφωνο/α</th> </tr> <tr> <td>Γιώργος Ασπροκόρακας</td> <td>55577854</td> <td>55577855</td> </tr> </table>

</body>

</html>


Συγχώνευση κελιών κάθετα rowspan

Με την ιδιότητα rowspan «υποχρεώνουμε» το κελί να συγχωνευτεί με τα κελιά που βρίσκονται από κάτω του, καταλαμβάνοντας περισσότερες γραμμές.


<html>

<head>


<style>

table, td, th { border: 1px solid red; }

</style>

</head>

<body>

<table style="width:100%"> <tr> <th>Όνομα</th> <th> Τηλέφωνο/α</th> </tr> <tr> <th rowspan="3">Γιώργος Ασπροκόρακας</th>

<td> 55577854</td>

</tr> <tr> <td> 55577857 </td> </tr> <tr> <td>55577843 </td> </tr> </table>

</body>

</html>


[25]

Επικεφαλίδα σε πίνακα ετικέτα <caption>

Παράδειγμα

<table style="border:solid blue 3px;border-collapse:collapse">

<caption>Employees</caption> <tr style="border:solid red 1px;"> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr>

<tr> <td>Hew</td> <td>Grand</td> <td>40</td> </tr> </table>

Εναλλαγή μορφοποίησης γραμμών ή στηλών πίνακα

Μπορούμε να αλλάξουμε την εμφάνιση των διαδοχικών γραμμών (ή στηλών) ενός πίνακα με την χρήση της παραμέτρου id και τις nth-child(even) ή nth-child(odd)


<html>

<head>


<style>

table { width:100%; text-align:center;

}

table#t01 tr:nth-child(even) { background-color: yellow; }


[26]

table#t01 tr:nth-child(odd) { background-color: green; } table#t01 th { color: white; background-color: black; }

</style>

</head>

<body>

<table id="t01">

<tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr>

<tr> <td>Hew</td> <td>Grand</td> <td>40</td> </tr>

<tr> <td>Robert</td> <td>De Niro</td> <td>60</td> </tr> </table>

</body>

</html>

Ενώ αν η αλλάξει style σε

<style>

table { width:100%; text-align:center;

}

table#t01 td:nth-child(even) { background-color: yellow; } table#t01 td:nth-child(odd) { background-color: green;


[27]

} table#t01 th { color: white; background-color: black; }

</style>

Ο παραπάνω πίνακας θα εμφανισθεί:


[28]

Λίστες (lists) Οι λίστες είναι μια ομαδοποίηση περιεχομένου, συνήθως σύντομου. Διακρίνονται σε τα ταξινομημένες και αταξινόμητες.


<h3>Αταξινόμητη λίστα </h3>

<ul> <li>Λεμονάδα</li> <li>Πορτοκαλάδα</li> <li>Γκαζόζα</li> </ul>

<h3>Ταξινομημένη λίστα </h3>

<ol> <li>Λεμονάδα</li> <li>Πορτοκαλάδα</li> <li>Γκαζόζα</li> </ol>

Αταξινόμητη λίστα – unordered list

Μια μη ταξινομημένη λίστα αρχίζει με την ετικέτα <ul>. Κάθε στοιχείο λίστας αρχίζει με την ετικέτα <li>. Τα στοιχεία της λίστας θα επισημαίνονται με σφαίρες (μικρούς μαύρους κύκλους) από προεπιλογή (disc).

H ιδιότητα CSS list-style-type ορίζει το σχέδιο που θα εμφανισθεί μπροστά από τα στοιχεία της λίστας, τιμές disc /circle / square / none (δίσκος / κύκλος / τετράγωνο / τίποτα)


<ul style="list-style-type:circle"> <li>Λεμονάδα</li> <li>Πορτοκαλάδα</li> <li>Γκαζόζα</li> </ul>

Ταξινομημένες λίστες – ordered list


[29]

Η ιδιότητα type των ταξιν. λιστών <ol> ορίζει τον τύπο της αρίθμησης. Τιμές 1 (προεπιλογή) / Α / a / I / i (αριθμός / κεφαλαίο / μικρό / Λατινική αρίθμηση, κεφαλαία / Λατινική αρίθμηση, μικρά)


<ol type="i"> <li>Λεμονάδα</li> <li>Πορτοκαλάδα</li> <li>Γκαζόζα</li> </ol>

Περιγραφικές Λίστες - Description Lists

Μια λίστα περιγραφής είναι μια λίστα όρων, με περιγραφή κάθε όρου. Η ετικέτα <dl> ορίζει τη λίστα περιγραφής, η ετικέτα </dt> ορίζει τον όρο (όνομα) και η ετικέτα <dd> περιγράφει κάθε όρο:

<dl> <dt>Coffee</dt> <dd>- espresso</dd>

<dd>- caputsino</dd> <dt>Milk</dt> <dd>- cold drink</dd>

<dd>- hot drink</dd> </dl>

Ένθετες λίστες – nested lists

Μπορούμε να έχουμε λίστα με όρους άλλες λίστες (ένθετες λίστες)

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>


[30]

Στοιχεία τύπου block και στοιχεία τύπου inline

Τα περισσότερα στοιχεία HTML έχουν μια προεπιλεγμένη τιμή εμφάνισης (block ή inline) ανάλογα με τον τύπο του στοιχείου.

Στοιχεία block

Ένα στοιχείο block ξεκινά πάντα από μια νέα γραμμή και καταλαμβάνει το πλήρες διαθέσιμο πλάτος (εκτείνεται προς τα αριστερά και δεξιά όσο είναι δυνατόν). Στοιχεία που ανήκουν σ’ αυτήν την κατηγορία (από όσα έχουν αναφερθεί μέχρι εδώ): <p>,<h1>-<h6>, <οl>, <ul>, <table>, <pre>, <div>

Στοιχεία inline

Ένα στοιχείο inline δεν ξεκινά σε μια νέα γραμμή και καταλαμβάνει μόνο το πλάτος που χρειάζεται στην ίδια την γραμμή. ). Στοιχεία που ανήκουν σ’ αυτήν την κατηγορία (από όσα έχουν αναφερθεί μέχρι εδώ): <a>, <b>, <em>, <i>, <img>, <samp>, <small>, <span>, <strong>, <sub>, <sup>

Παράδειγμα διαφοράς <span> (inline) και <div> (block)

<div>Hello</div> <div>World</div>

<p>Μπλα μπλα μπλα μπλα μπλα μπλα </p>

<span>Hello</span> <span>World</span>

<p>Μπλα μπλα μπλα μπλα μπλα μπλα </p>

Ετικέτα <div>

Η ετικέτα <div> χρησιμοποιείται ως προσδιοριστικό ομάδας στοιχείων (container) στοιχείων HTML τύπου block. Το στοιχείο <div> δεν έχει απαραίτητες παραμέτρους, συνήθως χρησιμοποιούμε τις παραμέτρους style και class.

Χρησιμοποιείται στην CSS για να ορίσουμε στυλ σε στοιχεία τύπου block:


[31]

<div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>

Ετικέτα <span>

Η ετικέτα <span> χρησιμοποιείται ως προσδιοριστικό ομάδας στοιχείων (container) στοιχείων HTML τύπου inline. Το στοιχείο <div> δεν έχει απαραίτητες παραμέτρους, συνήθως χρησιμοποιούμε τις παραμέτρους style και class.

Χρησιμοποιείται στην CSS για να ορίσουμε στυλ σε στοιχεία τύπου inline:

<h1>My <span style="color:red">Important</span> Heading</h1>

Χρήση της παραμέτρου class Η παράμετρος class καθορίζει ένα ή περισσότερα ονόματα κλάσεων για ένα στοιχείο HTML. Η τιμή της class μπορεί να χρησιμοποιηθεί από το CSS και τη JavaScript για την εκτέλεση συγκεκριμένων εργασιών για στοιχεία με την ίδια τιμή της class.

<style> .city { background-color: tomato; color: white; padding: 10px; } </style> . . . <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2>


[32]

<p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p>

<style> .city { background-color: tomato; color: white; padding: 10px;

}

.main {

text-align: center;

} </style> . . . <h2 class="city main">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Και οι τρεις κεφαλίδες έχουν το όνομα της κατηγορίας "city", επιπλέον, το Λονδίνο έχει επίσης το όνομα της κλάσης "main", το οποίο κάνει ευθυγραμμισμένο το κέντρο κειμένου.</p>


[33]

Ακόμα και αν τα δύο στοιχεία δεν έχουν το ίδιο όνομα ετικέτας, μπορούν να έχουν το ίδιο όνομα κλάσης και να έχουν το ίδιο στυλ.


}

.main {

text-align: center;

} </style> . . . <h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p>

<p> Ακόμα και αν τα δύο στοιχεία δεν έχουν το ίδιο όνομα ετικέτας, μπορούν να έχουν το ίδιο όνομα κλάσης και να έχουν το ίδιο στυλ.

</p>


[34]

HTML iframes Η ετικέτα <iframe> χρησιμοποιείται για την εμφάνιση μιας ιστοσελίδας μέσα σε μια ιστοσελίδα, είναι τύπου inline.

Η σύνταξη της ετικέτας είναι:

<iframe src="URL"></iframe> όπου η τιμή της src είναι η διεύθυνση της ιστοσελίδας. Μαζί με την <iframe> πρέπει να χρησιμοποιούμε και της παραμέτρους height και width για να ορίσουμε τον χώρο που θα καταλαμβάνει η ιστοσελίδα μέσα στην ιστοσελίδα.

Εάν η παρακάτω ιστοσελίδα είναι αποθηκευμένη ως sample.html

<html>

<head>


border: solid tpx blue;

}

</style>

</head>

<body>

<h2>Μία ιστοσελίδα μέσα σε μία ιστοσελίδα<h2>

</body>

</html>

Τότε η ετικέτα που θα την εμφανίζει θα είναι (παρατηρούμε την inline παράθεση του κειμένου στο τέλος):

<body>

<h2> Ακολουθεί μία ιστοσελίδα μέσα σε μία ιστοσελίδα</h2>

<iframe src="sample.html" style=”height:200px; width:300px;"> </iframe> μπλα μπλα …

</body>

Iframes και περίγραμμα (border)


[35]

Από προεπιλογή, ένα iframe έχει περίγραμμα γύρω από αυτό. Για να καταργήσετε το περίγραμμα, προσθέστε την παράμετρο CSS border με τιμή none:

<iframe src="sample.html" style=”height:200px; width:300px; border:none;">

<iframe src="sample.html" style="height:200px; width:300px; border:solid 5px brown;">

Iframe και υπεσύνδεσμοι

Ένα iframe μπορεί να χρησιμοποιηθεί ως το πλαίσιο-στόχος για ένα υπερσύνδεσμο. Το iframe που θα εμφανισθεί ο υπερσύνδεσμος είναι η τιμή της παραμέτρου target ενώ στο iframe πρέπει να υπάρχει η παράμετρος name με την ίδια τιμή.

<p><a href="http://in.gr"target="iframe_a">In.gr</a>

<a href="http://tovima.gr"target="iframe_a">TO BHMA</a></p>

<iframe src="sample.html" name="iframe_a" style="height:200px; width:100%; border:none;"></iframe>


[36]

Ένα γίνει κλικ στους υπερσυνδέσμους θα εμφανισθούν τα δύο site στο παράθυρο ifram_a


[37]

JavaScript

H JavaScript είναι μια αυτοτελής γλώσσα προγραμματισμού που εκτελείται μόνο μέσα στους περιηγητές. Είναι διερμηνευτής και μπορεί να αλλάξει την HTML στην σύνταξη μοιάζει με την γλώσσα Java αλλά είναι ένα διαφορετικό περιβάλλον.

<html>

<head>


</head>

<body>

<html>

<body>

<h2>Τι μπορεί να κάνει η JavaScript?</h2>

<p id="demo">Η JavaScript μπορεί να αλλάξει την HTML.</p>

<button type="button" onclick =

'document.getElementById("demo").innerHTML = "Ζήτω η JavaScript!"'>

Κάνε Click!</button>

</body>

</html>

</body>

</html>

Μία από τις πολλές μεθόδους HTML JavaScript είναι το getElementById(). Σ’ αυτό το παράδειγμα χρησιμοποιεί τη μέθοδο για να "βρει" ένα στοιχείο HTML (με id = "demo") και αλλάζει το περιεχόμενο στοιχείου (innerHTML) σε "Hello JavaScript". H JavaScript εκτελείται όταν συμβαίνει το γεγονό «έγινε κλικ στο κουμπί»:

Εάν γίνει κλικ:

Σ’ αυτό το παράδειγμα αλλάζει μια εικόνα HTML αλλάζοντας την παράμετρο src (source) μιας ετικέτας <img>:

<body>

<h2>Τι μπορεί να κάνει η JavaScript</h2>

<p>Η JavaScript αλλάζει τις παραμέτρους της HTML.</p>

<p>Εδώ αλλάζουμε την παράμετρο src (source) μιας εικόνας</p>

<button

onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Άνα

ψε το φως</button>



[38]

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button

onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Σβ

ήσε το φως</button>

</body>

Που γράφουμε τον κώδικα JavaScript

Η ετικέτα <script>

Στην HTML, ο κώδικας JavaScript πρέπει να εισαχθεί μεταξύ ετικετών <script> και </script>. Η ετικέτα μπορεί να τοποθετηθεί οπουδήποτε είτε στην κεφαφίδα(<head>) είτε στο σώμα (<body>) του αρχείου HTML. Επειδή το αρχείο HTML και ο κώδικας JavaScript εκτελούνται γραμμή γραμμή η HTML του επιδρά η JavaScript πρέπει να έπεται της JavaScript.

Στο παράδειγμα η JavaScript μπορεί να βρει το στοιχείο με id "demo" και να το αλλάξει γιατί υπάρχει πριν το JavaScript

<html>

<head>


</head>

<body>

<h2>JavaScript στο Body</h2>

<p id="demo">???</p>

<script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script>

</body>

</html>


[39]

Στο παράδειγμα η JavaScript μπορεί δεν αλλάξει να το στοιχείο με id "demo" γιατί δεν το έχει συναντήσει ακόμα ο περιηγητής ώστε να το «γνωρίζει».

<body>

<script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script>



</body>

JavaScript σε ξεχωριστό αρχείο (παράμετρος src)

Η παράμετρος src εισάγει κώδικα JavaScript από το αρχείο που έχει ως τιμή.

Αρχείο myCode.js (στον ίδιο φάκελο με το αρχείο HTML):

document.getElementById("demo").innerHTML = "My First JavaScript";

Το παρακάτω είναι ισοδύναμο με το προπροηγούμενο παράδειγμα.

<body>



<script src="myCode.js"></script>

</body>

Μπορούμε να εισάγουμε JavaScript από μία διεύθυνση στο δίκτυο:

<script src= "https://1epal-trikal.tri.sch.gr/static/myCode.js"> </script>

Για να προσθέσετε πολλά αρχεία JavaScript σε μία σελίδα

<script src="myCodeΑ.js"></script>

…

<script src="myCodeΒ.js"></script>

Η τοποθέτηση σεναρίων σε εξωτερικά αρχεία έχει τα πλεονεκτήματα:

Διαχωρίζει τον κώδικα HTML και τον κώδικα

Κάνει την HTML και τη JavaScript πιο εύκολη στην ανάγνωση και τη συντήρηση


[40]

Ένα αρχείο JavaScript μπορούν να το μοιρασθούν πολλές ιστοσελίδες.

Τα αποθηκευμένα αρχεία JavaScript μπορούν να επιταχύνουν την φόρτωση της ιστοσελίδας

JavaScript συναρτήσεις (functions) και γεγονότα (events) Μια συνάρτηση JavaScript είναι ένα μια ομάδα εντολών (μπλοκ κώδικα) JavaScript, που μπορεί να εκτελεστεί όταν "καλείται". Το όνομα το επιλέγουμε εμείς ακολουθείται από παρεμθέσεις και οι εντολές γράφονται μέσα σε άγκιστρα ({ }). Στο τέλος κάθε εντολής υπάρχει το ;

Τα γεγονότα είναι καταστάσεις που όταν συμβούν προκαλoύν την εκτέλεση κώδικα, όπως όταν γίνεται κλικ επάνω σε ένα κουμπί ή ένα στοιχείο HTML.

Για τις συναρτήσεις και τα γεγονότα θα μιλήσουμε αναλυτικά παρακάτω.

Στο παράδειγμα η συνάρτηση changeColor() εκτελείται όταν γίνει κλικ στο κουμπί είτε στο στοιχείο <h2>

<html> <head> <script> function changeColor() { document.getElementById("demo").style.color = "red"; } </script> </head> <body> <h2 id="demo" style="color:red" onclick=" changeColor()"> A Web Page (κάνε κλικ)</h2> <button type="button" onclick=" changeColor()"> κάνε κλικ </button> </body> </html>

Έξοδος της JavaScript Το JavaScript μπορεί να "εμφανίσει" τα δεδομένα με διάφορους τρόπους:

Γράφοντας σε ένα στοιχείο HTML, χρησιμοποιώντας την μέθοδο document.getElementById (id)

Γράφοντας στην έξοδο HTML χρησιμοποιώντας document.write ().

Γράφοντας σε ένα πλαίσιο ειδοποίησης, χρησιμοποιώντας το window.alert ().

Γράφοντας στην κονσόλα του προγράμματος περιήγησης, χρησιμοποιώντας το console.log ().

Χρησιμοποιώντας την document.getElementById (id)

Για να αποκτήσετε πρόσβαση σε ένα στοιχείο HTML, η JavaScript μπορεί να χρησιμοποιήσει τη μέθοδο document.getElementById (id). Το χαρακτηριστικό id ορίζει το στοιχείο HTML. Η ιδιότητα innerHTML ορίζει το περιεχόμενο HTML:

Δείτε προηγούμενα παραδείγματα.

Χρησιμοποιώντας την document.write(περιεχόμενο)

Με την μέθοδο document.write() μπορούμε να γράψουμε στο σημείο που θα εκτελεσθεί η μέθοδος χωρίς την αναφορά σε κάποιο στοιχείο HTML. Προσφέρεται για δοκιμές του κώδικα, είναι ο πλησιέστερος τρόπος στις εντολές print των γλωσσών προγραμματισμού.


[41]

Προσοχή εάν εκτελεσθεί μετά την φόρτωση της σελίδας από κάποιο γεγονός «σβήνει» όλη την σελίδα και μετά «γράφει»

<html> <body> <script> function delete(){document.write("έσβησαν όλα");} </script> <h1>Τεστ document.write() </h1> <p id="test" style="color:red" >Mpla Mpla Mpla.

<script> document.write(" κόκκινα μπλα μπλα");</script> </p> <script> document.write(50 * 6);</script>

<p onClick="deleteAll()"> Σβήστα όλα</p> </body> </html>

Χρησιμοποιώντας την window.alert(μύνημα)

Με την window.alert(μύνημα) μπορούμε να απευθύνουμε μηνύματα στον χρήστη μέσω ενός παραθύρου. Συνήθως χρησιμοποιείται για να ειδοποιήσουμε για κάτι τον χρήστη.

<!DOCTYPE html> <html> <body> <h1> window.alert()</h1> <script>window.alert("Γειά σας, τι κάνετε!");</script> </body> </html>

Χρησιμοποιώντας την console.log(μύνημα)

Μπορούμε να γράψουμε στο παράθυρο console του περιηγητή. Στην console μπορούμε να δούμε και τα λάθη του κώδικά μας. Πρόσβαση στην console και τα άλλα εργαλεία του περιηγητή έχουμε με το πλήκτρο F12.

<!DOCTYPE html> <html> <body> <h1> console.log() </h1>


[42]

<script>console.log("Γειά σας, τι κάνετε!");</script> </body> </html>

Δομή της JavaScript

Εντολές της JavaScript (statements)

Ένα πρόγραμμα υπολογιστή είναι μια σειρά με "οδηγίες" που πρέπει να εκτελεστούν από έναν υπολογιστή. Σε μια γλώσσα προγραμματισμού, αυτές οι οδηγίες προγραμματισμού καλούνται δηλώσεις (statements). Ένα πρόγραμμα JavaScript είναι ένα σύνολο δηλώσεων προγραμματισμού.Στην HTML, τα προγράμματα JavaScript εκτελούνται από το πρόγραμμα περιήγησης ιστού.

Οι δηλώσεις JavaScript αποτελούνται από: Τιμές, χειριστές, εκφράσεις, λέξεις-κλειδιά και σχόλια. Το παρακάτω σύνολο δηλώσεων λέει στο πρόγραμμα περιήγησης να γράψει “z = 11” σε ένα στοιχείο HTML με id = "demo":

var x, y, z; // Statement 1 x = 5; y = 6; // Statement 2 Statement 3 z = x + y; // Statement 4

document.getElementById("demo").innerHTML = "z = "+z; // Statement 5

Τα ; διαχωρίζουν τις δηλώσεις JavaScript. Προσθέστε ένα ερωτηματικό στο τέλος κάθε εκτελέσιμης δήλωσης. Όταν διαχωρίζονται με ερωτηματικά, επιτρέπονται πολλαπλές δηλώσεις σε μία γραμμή. Στο διαδίκτυο, μπορείτε να δείτε παραδείγματα χωρίς ερωτηματικά. Οι καταληκτικές δηλώσεις με ερωτηματικό δεν απαιτούνται, αλλά συνιστάται ιδιαίτερα.

Το JavaScript αγνοεί πολλαπλά κενά. Μπορείτε να προσθέσετε λευκό χώρο στο σενάριο σας για να το κάνετε πιο ευανάγνωστο. Οι ακόλουθες γραμμές είναι ισοδύναμες με τις παραπάνω αντίστοιχες:

var x,y,z; // Statement 1 x=5;y=6; // Statement 2 Statement 3 z=x+y; // Statement 4

Μια καλή πρακτική είναι να τοποθετήσετε χώρους γύρω από τους χειριστές (= + - * /).

Για καλύτερη αναγνωσιμότητα, οι προγραμματιστές συχνά επιθυμούν να αποφεύγουν γραμμές κώδικα που να υπερβαίνουν τους 80 χαρακτήρες. Εάν μια εντολή JavaScript δεν χωράει σε μια γραμμή, το καλύτερο μέρος για να το σπάσει, είναι μετά από έναν τελεστή:

document.getElementById("demo").innerHTML =

"z = "+z;

Δεσμευμένες λέξεις της JavaScript (keywords)


[43]

Οι δηλώσεις JavaScript ξεκινούν συχνά με μια δεσμευμένη λέξη για να προσδιορίσουν τη συμπεριφορά που πρέπει να εκτελεστεί.

Οι βασικές δεσμευμένες λέξεις είναι:

break Διακόπτει την εκτέλεση εντολών που βρίσκονται σε ένα if ή έναν βρόχο

continue Δεν εκτελούνται οι επόμενες δηλώσεις ενός βρόχου, ο βρόχος ξεκινά πάλι από την κορυφή

do ... while Εκτελεί ένα βρόγχο δηλώσεων και επαναλαμβάνει το βρόγχο, όσο μια συνθήκη είναι αληθής

for Εκτελεί ένα βρόγχο δηλώσεων και επαναλαμβάνει το βρόγχο, όσο μια συνθήκη είναι αληθής

function Δηλώνει συνάρτηση

if ... else Επισημαίνει μια ομάδα δηλώσεων προς εκτέλεση, ανάλογα με μια συνθήκη

return Έξοδος από μια λειτουργία

switch Εκτελεί ένα ομάδα δηλώσεων προς εκτέλεση, ανάλογα με τις διάφορες περιπτώσεις

try ... catch Χρησιμοποιείται για τον χειρισμό σφαλμάτων σε ένα μπλοκ κώδικα.

var Δηλώνει μεταβλητή

Σύνταξη της JavaScript

Η σύνταξη JavaScript είναι το σύνολο κανόνων βάσει των οποίων συντάσσονται τα προγράμματα JavaScript:

Τιμές

Η σύνταξη JavaScript ορίζει δύο τύπους τιμών: Σταθερές τιμές και. Οι σταθερές τιμές ονομάζονται literals. Οι τιμές μεταβλητών ονομάζονται μεταβλητές (variables).

Σταθερές (literals) JavaScript

Οι πιο σημαντικοί κανόνες για την εγγραφή σταθερών τιμών είναι:

Οι αριθμοί είναι γραμμένοι με ή χωρίς δεκαδικά ψηφία (10.5 0.5 33)

Οι χαρακτήρες (συμβολοσειρές η strings) γράφονται μέσα σε μονά οι διπλά εισαγωγικά ("Γάτα",'ένα ποντίκι')

Μεταβλητές (variables) JavaScript

Σε μια γλώσσα προγραμματισμού, οι μεταβλητές χρησιμοποιούνται για την αποθήκευση τιμών. Η JavaScript χρησιμοποιεί τη λέξη-κλειδί var για να δηλώσει τις μεταβλητές. Χρησιμοποιείται ένα ίσον (=) για την εκχώρηση τιμών σε μεταβλητές.

var x; var y,z; var a = 4; x = "Γάτα"; y = z = 66;

Τελεστές (oparators)

Οι τελεστές τελούν πράξεις αριθμητικές και χαρακτήρων. Το = είναι τελετής ανάθεσης και απαιτεί στα αριστερά του μεταβλητή στην οποία και αναθέτει την τιμή που θα είναι αριστερά του. Οι αριθμητικοί τελεστές είναι +, - , *, / που λειτουργούν με την λογική των


[44]

μαθηματικών. Ο τελεστής + εάν εφαρμοσθεί έστω σε μία τιμή string συγκολλά όλα σε ένα νέο string . Το πρώτο παράδειγμα αποτιμάται 60 ενώ το δεύτερο Γάτα 12ένα ποντίκι

5 * 10 + 10;

"Γάτα " + 12 + 'ένα ποντίκι'

Εκφράσεις (Expressions)

Έκφραση είναι κάθε σύνολο σταθερών, μεταβλητών και τελεστών το οποίο μπορεί το JavaScript να υπολογίσει, δηλαδή να το αντικαταστήσει με μια τιμή. Στο προηγούμενο παράδειγμα έχουμε δυο εκφράσεις. Συνήθως το αποτέλεσμα μιας έκφρασης αποθηκεύεται σε μια μεταβλητή η αποστέλλεται σε κάποια περιφερειακή συσκευή.

var x, y; x = 5 + 6; y = (x * 10) + 1;

Σχόλια (comments)

Τα σχόλια γράφονται στο πρόγραμμα αλλά δεν εκτελούνται. Οι χαρακτήρες μετά από διπλά διά // ή μεταξύ / * και * / αντιμετωπίζεται ως σχόλιο. Τα σχόλια χρησιμοποιούνται για να κάνουν περισσότερο κατανοητό το πρόγραμμα στους προγραμματιστές.

var x = 5; // Ένα σχόλιο

/* Ένα σχόλιο σε περισσότερες

Γραμμές */

Identifiers (Αναγνωριστικά)

Τα Identifiers είναι οι λέξεις της JavaScript. Τα αναγνωριστικά χρησιμοποιούνται για να ονομάσουν μεταβλητές, συναρτήσεις και label (ετικέτες για τις εντολές continue / break) . Οι λέξεις-κλειδιά ακολουθούν τον κανόνα σχηματισμού των Identifiers.

Οι κανόνες για τα νόμιμα ονόματα είναι σχεδόν ίδιοι στις περισσότερες γλώσσες προγραμματισμού. Στη JavaScript, ο πρώτος χαρακτήρας πρέπει να είναι ένα γράμμα ή μια υπογράμμιση (_) ή ένα σύμβολο δολαρίου ($). Οι επόμενοι χαρακτήρες μπορεί να είναι γράμματα, ψηφία, υπογράμμιση ή δολάριο.

Οι αριθμοί δεν επιτρέπονται ως ο πρώτος χαρακτήρας. Με αυτόν τον τρόπο, η JavaScript μπορεί εύκολα να διακρίνει τα αναγνωριστικά από τους αριθμούς.

Διάκριση πεζών – κεφαλαίων χαραχτήρων (case sensitive)

To JavaScript διακρίνει τα πεζά από τα κεφαλαία γράμματα. Ιστορικά, οι προγραμματιστές έχουν χρησιμοποιήσει διαφορετικούς τρόπους να ενώνουν πολλαπλές λέξεις σε ένα όνομα μεταβλητής. Συνήθως χρησιμοποιούν παύλα (-) ή υπογράμμιση (_). Η παύλα στην JavaScript ταυτίζεται με το τελεστή πλην και δεν μπορεί να χρησιμοποιηθεί σαν διαχωριστικό. Η υπογράμμιση μπορεί να χρησιμοποιηθεί.

Έχει όμως επικρατήσει η γραφή με μικρά γράμματα και κεφαλαίο το πρώτο γράμμα των σύνθετων λέξεων όπως

firstName innerCityTrikala. Ό τρόπος αυτός αποκαλείται camelCase

Οι σημειώσεις συνεχίζονται σύμφωνα με τις παραδόσεις …

Η γλʚσσα html - sch.gr1epal-trikal.tri.sch.gr/static/html/html.pdfημειώσεις html /...

Documents