Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semantic elements και τα API ενσωματωμένης HTML.

HTML 5 SEMANTIC ELEMENTS AND API
University of Piraeus
Andreas Vanikiotis
Department of Digital Systems

HTML (Hypertext Markup Language)
Τι είναι η HTML?

3
Η HTML (Hypertext Markup Language) είναι η τυπική γλώσσα σήμανσης για τη
δημιουργία ιστοσελίδων και εφαρμογών Ιστού.Τα στοιχεία HTML είναι τα
δομικά στοιχεία των σελίδων HTML.Το αρχικό HTML είχε 20 ετικέτες και
εμφάνιζε απλό κείμενο με βασική σήμανση για μορφοποίηση.
HTML ΕΙΣΑΓΩΓΗ
<p>
<b>Document</b> content goes here…
</p>
Opening tag
Closing tag
Element

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Example</title>
</head>
<body>
<h1>Hello HTML!</h1>
<p>HTML describes formatted text using <strong>tags
</strong>. Visit the <a href="https://softuni.bg/trainings/
courses">SoftUni HTML course to learn more.</a></p>
</body>
</html>
4
HTML Σελίδα – Παράδειγμα

5
 Η σημασιολογία είναι η μελέτη της σημασίας των λέξεων και
των φράσεων σε μια γλώσσα.δηλ. Σημασιολογικά στοιχεία =
στοιχεία με νόημα.Ένα σημασιολογικό στοιχείο περιγράφει
ξεκάθαρα το νόημά του τόσο για το πρόγραμμα περιήγησης
όσο και για τον προγραμματιστή.Παραδείγματα
σημασιολογικών στοιχείων : <img> , <form> , <πίνακας>δηλ.
αυτά τα στοιχεία ορίζουν με σαφήνεια το περιεχόμενό του.
HTML5 SEMANTICS ELEMENTS

6
 Τα μη σημασιολογικά στοιχεία γενικά δεν λένε πολλά για το
περιεχόμενό τους.
 Παραδοσιακά, οι προγραμματιστές έχουν εφαρμόσει μη
σημασιολογικά στοιχεία με χαρακτηριστικό class για να ορίσουν
τη δομή και να εκφράσουν το νόημα του περιεχομένου.
 Παραδείγματα μη σημασιολογικών στοιχείων είναι: <div> και
<span>
 δηλ. αυτά τα στοιχεία δεν λένε τίποτα για το περιεχόμενό του.
NON-SEMANTICS ELEMENTS

7
SEMANTIC TAGS
 Τα σημασιολογικά στοιχεία χρησιμοποιούνται για τον
ξεκάθαρο ορισμό διαφορετικών τμημάτων μιας
ιστοσελίδας:
 <header>
 <nav>
 <section>
 <article>
 <aside>
 <footer>
 Many more...

Γιατί όμως Semantic Elements?
8
 Τα σημασιολογικά στοιχεία HTML5
βοηθούν στη δομή του κώδικα
εμείςδημιουργούν, και επομένως
καθιστώντας το πιο ευανάγνωστο και πιο
εύκολο στη συντήρηση.

9
 Το στοιχείο <header> καθορίζει μια κεφαλίδα για ένα έγγραφο
ή μια ενότητα.Για εισαγωγικό περιεχόμενο, το στοιχείο
<header> θα πρέπει να χρησιμοποιείται ως
κοντέινερ.Μπορούμε να έχουμε πολλά στοιχεία <header> σε
ένα έγγραφο.
HTML5 <header> ELEMENT

10
 Το στοιχείο <footer> καθορίζει ένα υποσέλιδο για ένα έγγραφο
ή μια ενότητα.Ένα υποσέλιδο περιέχει συνήθως τον συντάκτη
του εγγράφου, πληροφορίες πνευματικών δικαιωμάτων,
συνδέσμους προς όρους χρήσης, στοιχεία επικοινωνίας
κ.λπ.Μπορούμε να έχουμε πολλά στοιχεία <footer> σε ένα
έγγραφο.
HTML5 <footer> ELEMENT

11
 Το στοιχείο <nav> ορίζει ένα σύνολο συνδέσμων πλοήγησης.
 Το στοιχείο <nav> προορίζεται για κύριο μπλοκ συνδέσμων
πλοήγησης.
HTML5 <nav> ELEMENT

12
 "Μια ενότητα είναι μια θεματική ομαδοποίηση περιεχομένου,
συνήθως με μια επικεφαλίδα."Το στοιχείο <section> ορίζει μια
ενότητα σε ένα έγγραφο.Παράδειγμα: Μια αρχική σελίδα θα
μπορούσε κανονικά να χωριστεί σε ενότητες για εισαγωγή,
περιεχόμενο και στοιχεία επικοινωνίας.
HTML5 <section> ELEMENT

13
 Το στοιχείο <aside> ορίζει το περιεχόμενο που είναι εκτός από
το περιεχόμενο στο οποίο τοποθετείται.Παράδειγμα:(σαν
πλαϊνή μπάρα)
HTML5 <aside> ELEMENT

14
 Το στοιχείο <article> καθορίζει ανεξάρτητο, αυτόνομο
περιεχόμενο.Ένα άρθρο θα πρέπει να έχει νόημα από μόνο του
και θα πρέπει να είναι δυνατή η ανάγνωσή του ανεξάρτητα από
τον υπόλοιπο ιστότοπο.Παραδείγματα όπου μπορεί να
χρησιμοποιηθεί ένα στοιχείο <article>:
 Ανάρτηση
 Αρθρο εφημερίδας
HTML5 <article> ELEMENT

15
 Περιεχόμενο:
 Εισαγωγή στις API που ενσωματώνονται στην HTML.
 Παρουσίαση του ρόλου των API στη σύγχρονη web ανάπτυξη.
 Εικόνα: Ένας υπολογιστής με οθόνη που εμφανίζει κώδικα.
HTML Embedded APIs Overview

16
 Ορισμός: Οι HTML Embedded APIs είναι σύνολα εντολών και
λειτουργιών που επιτρέπουν τη διασύνδεση μεταξύ της HTML
και των λειτουργιών του περιηγητή ή άλλων τεχνολογιών.
 Χρήσεις: Παραδείγματα χρήσης περιλαμβάνουν την
αλληλεπίδραση με την κάμερα, την ανίχνευση κινήσεων, τη
γεωτοποθέτηση και πολλά άλλα.
 Παραδείγματα API: Geolocation API, Web Audio API, Canvas
API.
Κατανόηση HTML Embedded APIs

17
Εικόνα διαγράμματος που δείχνει την
αλληλεπίδραση μεταξύ HTML, API και λειτουργιών
του περιηγητή.

Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semantic elements και τα API ενσωματωμένης HTML.

Recommended

Recommended

More Related Content

Similar to Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semantic elements και τα API ενσωματωμένης HTML.

Similar to Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semantic elements και τα API ενσωματωμένης HTML. (19)

Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semantic elements και τα API ενσωματωμένης HTML.