ΙΕΚ ΟΜΗΡΟΣ λογότυπο
Αθήνα
210 3806166
Πειραιάς
210 4190854
Λάρισα
2410 549360
Θεσσαλονίκη (*Υπό αδειοδότηση)
2311 256610

Σχολή Πληροφορικής: Τι είναι ο Διαδικτυακός Προγραμματισμός

Η HTML είναι μια script γλώσσα προγραμματισμού για το web. Στην ουσία όλες οι ιστοσελίδες είναι γραμμένες σε HTML, δηλαδή αποτελούν αρχεία κειμένου (text files) τα οποία φέρουν την κατάληξη .html (ή htm για παλιότερες εκδόσεις λειτουργικών συστημάτων ή φυλλομετρητών).

Ως script γλώσσα δεν παράγει εκτελέσιμο κώδικα, αλλά οι εντολές της εκτελούνται από τον εκάστοτε φυλλομετρητή (Mozilla, IE κτλ). Αποτελεί την μοναδική (μέχρι στιγμής) τεχνολογία για δημιουργία ιστοσελίδων, μιας και όλες οι άλλες τεχνολογίες (όπως CSS, Javascript, PHP κτλ) αποτελούν συνοδευτικές τεχνολογίες της HTML, διότι ο κώδικάς τους πρέπει υποχρεωτικά να γραφτεί μέσα στον κώδικα HTML (ή να κληθεί μέσα από αυτόν).

HTML5

Η τελευταία έκδοση της HTML, είναι η έκδοση 5, η οποία παρουσιάζει κάποιες διαφορές και παρέχει νεότερα και ισχυρότερα στοιχεία συγκρινόμενη με τις προηγούμενες εκδόσεις. Ένα από τα βασικά στοιχεία τα οποία έχει η HTML5, σε σύγκριση με τους προκατόχους της είναι η ουσιαστική (μέσω ειδικών tags) διαίρεση ενός εγγράφου σε βασικά τμήματα όπως <header>, <footer>, <section> κτλ. Επίσης παρέχεται η δυνατότητα εισαγωγής και αναβαθμισμένης διαχείρισης multimedia αντικειμένων όπως ήχος, video κτλ.

Η HTML5, συνεργάζεται άψογα με το CSS3, μια τεχνολογία η οποία δίνει τη δυνατότητα στον προγραμματιστή να διαχειρίζεται με αναβαθμισμένο τρόπο συγκεκριμένα αντικείμενα πάνω σε μια ιστοσελίδα, αλλάζοντας τις ιδιότητές τους κατά βούληση. Επίσης η HTML5, παρέχει τη δυνατότητα συνεργασίας και ενσωμάτωσης τόσο front end (όπως η JavaScript) αλλά και server side (back end) τεχνολογιών (όπως η PHP, ASP  κτλ).

JavaScript

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

  • Στην πράξη έχει εφαρμογή τόσο σε συμβατούς Η/Υ, όσο και σε tablets, smartphones κτλ.
  • Ο κώδικας JavaScript γράφεται μέσα στον κώδικα HTML, με χρήση των ετικετών <script>…</script>. Οι ετικέτες αυτές ορίζουν την έναρξη και το τέλος του κώδικα JavaScript. Έξω από αυτές τοποθετούνται εντολές HTML.
  • Σε παλαιότερες εκδόσεις της HTML, όπου και χρησιμοποιούνταν διάφορα είδη scripts (όπως το VBScript), η ετικέτα γραφόταν <script type=”text/javascript”>, αλλά πλέον, στην HTML5, αυτό δεν είναι απαραίτητο. Πλέον, όταν ο browser, συναντά την ετικέτα <script>, θεωρεί εξορισμού, ότι πρόκειται για JS.
  • Η JS, δεν έχει καμία σχέση με την γλώσσα Java. Αν και στηρίζεται σε αυτήν, με την έννοια ότι διαθέτουν κάποιες κοινές εντολές, τελεστές και συναρτήσεις βιβλιοθήκης, είναι δύο ξεχωριστές γλώσσες. Η JS, είναι μια script γλώσσα η οποία γράφεται μέσα στον κώδικα HTML και εκτελείται από τον εκάστοτε browser, ενώ η Java, είναι μια αυτόνομη γλώσσα προγραμματισμού (με ότι αυτό συνεπάγεται) της οποίας ο κώδικας μεταφράζεται από compiler (javac) και δημιουργεί εκτελέσιμο κώδικα τύπου Bytecode.
  • Ο κώδικας JS, μπορεί να είναι γραμμένος στο τμήμα <body> ή στο τμήμα <head> μιας ιστοσελίδας. Υπάρχει όμως περίπτωση να είναι γραμμένος σε εξωτερικά αρχεία (τα οποία φέρουν την κατάληξη .js) τα οποία καλούνται από την ιστοσελίδα μας (external JS). Τα εξωτερικά αυτά αρχεία, δεν μπορούν να περιέχουν ετικέτες <script> (η ετικέτα <script>, άλλωστε είναι εντολή της HTML).

 

Βελτίωση προσπελασιμότητας WAI-ARIA

Η WAI-ARIA είναι τα αρχικά των λέξεων Web Accessibility Initiative’s Accessible- Rich Internet Applications (Πρωτοβουλία Προσπελασιμότητας Ιστού-Εφαρμογές internet Εμπλουτισμένης  Προσπελασιμότητας).

Η WAIARIA είναι στην ουσία ένα σύνολο προδιαγραφών που καλύπτει σημασιολογικά κενά της HTML5. Όπως για παράδειγμα το σημασιολογικό κενό που υπάρχει στην HTML5 για τη σήμανση του κύριου περιεχομένου της οθόνης. Σε περίπτωση που υπάρχει επικάλυψη της HTML και της WAI-ARIA η υποστήριξη των Browsers γέρνει συνήθως στην πλευρά των Browsers.

Η WAI-ARIA έρχεται να προσδιορίσει τις ακόλουθες περιοχές μιας ιστοσελίδας: Application, banner, complementary, contentinfo, form, main, navigation και search.

  • role Application: Είναι μία περιοχή που δηλώνεται ως web εφαρμογή σε αντιδιαστολή με ένα web κείμενο. Όταν ο επισκέπτης εισέλθει στην περιοχή αυτή, τότε δεν ισχύει ο κλασσικός τρόπος πλοήγησης αλλά ο τρόπος πλοήγησης της εφαρμογής.
  • role banner: Ο χαρακτηρισμός της περιοχής banner έχει να κάνει με την τοποθεσία της περιοχής και όχι με το περιεχόμενο. Πιο αναλυτικά μιλάμε για την οριζόντια περιοχή που βρίσκεται στην κορυφή μιας ιστοσελίδας και είναι συνήθως ενταγμένη σε ένα στοιχείο header και είναι μοναδική για κάθε ιστοσελίδα. Το banner περιέχει συνήθως το λογότυπο ή την ονομασία της εταιρείας και εκτείνεται σαν μια λωρίδα σε όλο το πλάτος της ιστοσελίδας.
  • role main: Είναι περιοχή στην οποία τοποθετείται το κύριο περιεχόμενο μιας σελίδας και χρησιμοποιείται σχεδόν σε όλες τις περιπτώσεις μία μόνο φορά. Μπορεί να ενσωματωθεί σε ένα στοιχείο article, div ή section.role complementary: Είναι μια περιοχή στην οποία τοποθετείται μια ενότητα για να υποστηρίζει το κύριο κείμενο, συνδέεται μαζί του αλλά μπορεί να σταθεί και μόνη της. Συνήθως εντάσσεται σε ένα στοιχείο aside το οποίο είναι  ισοδύναμο. Μπορεί  να χρησιμοποιηθεί περισσότερες από μία φορές.
  • role content info: Είναι μια ενότητα η οποία εντάσσεται σε ένα στοιχείο footer στο υποσέλιδο μιας σελίδας. Περιέχει τις πληροφορίες για το συγγραφέα, πνευματικά δικαιώματα κτλ του γονικού εγγράφου. Τοποθετείται μία φορά στην ιστοσελίδα.
  • role form: Επικαλύπτεται από το αντίστοιχο στοιχείο form της HTML5 και είναι στην ουσία περιττός.
  • role navigation: Είναι ισοδύναμο με το στοιχείο nav της HTML5 όπου συγκεντρώνονται τα σημαντικότερα στοιχεία πλοήγησης της ιστοσελίδας, για αυτό το λόγο την ενσωματώνουμε σε ένα στοιχείο nav. Μπορούμε να τη χρησιμοποιήσουμε περισσότερες από μία φορές.
  • role search: Ορίζει μια περιοχή αναζήτησης ενσωματωμένη σε ένα στοιχείο form.
 Κλάσεις και αναγνωριστικά στοιχείων id

Η ιδιότητα class δε χρησιμοποιείται μόνο για την εφαρμογή στυλ CSS. Χρησιμοποιείται και στη σημασιολογία της HTML5. Στην κάθε κλάση μπορούμε να αντιστοιχίσουμε, να εντάξουμε ένα ή περισσότερα στοιχεία. Για   να   το   πετύχουμε   αυτό   γράφουμε   στην   ετικέτα   αρχής   του   στοιχείου. Όπως θα παρατηρήσατε, μπορούμε ένα στοιχείο να το εντάξουμε σε περισσότερες από μία κλάσεις. Αν συμβαίνει αυτό, τότε δίπλα από το όνομα της πρώτης κλάσης αφήνουμε ένα κενό, γράφουμε το όνομα της δεύτερης κλάσης κτλ και στο τέλος κλείνουμε τα εισαγωγικά. Κάθε στοιχείο μπορεί να αντιστοιχηθεί σε περισσότερες από μία κλάσεις και σε κάθε κλάση μπορούν να αντιστοιχηθούν οποιαδήποτε σύνολα από στοιχεία.

Ιδιότητα Id

Για να αντιστοιχίσουμε ένα  στοιχείο σε ένα όνομα id γράφουμε στην ετικέτα του στοιχείου. Οι περιορισμοί για το όνομα είναι να μην Ξεκινά με αριθμό και να μην περιλαμβάνει κενά διαστήματα. Σε κάθε σελίδα ενός website, το id είναι μοναδικό. Απαγορεύεται δηλαδή στην ίδια σελίδα να υπάρχουν δύο στοιχεία με το ίδιο id. Δεν απαγορεύεται ένα id να έχει αντιστοιχηθεί σε μια άλλη σελίδα με ένα άλλο στοιχείο, αυτό όμως δεν συνηθίζεται. Με τις ιδιότητες class και id είναι ευκολότερο να επεξεργαζόμαστε τα στοιχεία είτε σαν ομάδες(class) είτε σαν μεμονωμένα (id).

Συνεχίζω τις σπουδές μου!

Μάθε για τα Προγράμματα του Aegean College!

Επικοινωνήστε μαζί μας
Επικοινωνία
Στείλε μας τα στοιχεία σου και θα επικοινωνήσουμε μαζί σου.

    Είμαι ενήμερος για την Πολιτική Προστασίας Προσωπικών Δεδομένων/Πολιτική Cookies και συγκατατίθεμαι

    Τηλεφώνησε
    Επικοινώνησε με το παράρτημα του ΙΕΚ ΟΜΗΡΟΣ που θέλεις.

    Αθήνα:
    210 3806166
    Πειραιάς:
    210 4190854
    Λάρισα:
    2410 549360
    Θεσσαλονίκη (*Υπό αδειοδότηση):
    2311 256610
    Αθήνα:
    info@omiros.gr
    Πειραιάς:
    infopeiraias@omiros.gr
    Λάρισα:
    thessaly@omiros.gr
    Θεσσαλονίκη (*Υπό αδειοδότηση):
    thessaloniki@omiros.gr