ΕΙΣΑΓΩΓΙΚΟ ΜΑΘΗΜΑ

1.Το Διαδίκτυο the internet

- Το Διαδίκτυο είναι το παγκόσμιο σύστημα διασυνδεδεμένων δικτύων
υπολογιστών που χρησιμοποιούν τα πρωτόκολλα TCP/IP.
- Ο παγκόσμιος ιστός (WWW) είναι η πιο σημαντική υπηρεσία που
χρησιμοποιεί το Διαδίκτυο, για αυτό ο όρος διαδίκτυο και παγκόσμιος
ιστός συγχέονται.
- Η χρήση του αυξήθηκε ραγδαία από τα μέσα της δεκαετίας του 1990
και σήμερα καλύπτει κάθε πτυχή της σύγχρονης ζωής.
- Το Διαδίκτυο δεν έχει κεντρική οργάνωση. Μόνο ο χώρος
διευθύνσεων
IP και Domain Name System (DNS), κατευθύνονται and την ICANN.

2.Ο παγκόσμιος ιστός - the world wide web

-Πληροφοριακό σύστημα που περιέχει έγγραφα και άλλους
διαδικτυακούς πόρους οι οποίοι έχουν μοναδικές διευθύνσεις που
ορίζονται απὀ Uniform Resource Locators (URLs), όπως για
παράδειγμα https://www.example.com/.
-Οι πόροι διασυνδέονται μεταξύ τους µέσω υπερσυνδέσμων
δημιουργώντας έτσι ένα υπέρ-κείμενο (hyper-text), το οποίο είναι
προσβάσιμο µέσω του Διαδικτύου.
-Οι χρήστες έχουν πρόσβαση στους πόρους του παγκόσμιου ιστού µε
χρήση εφαρμογών που ονομάζονται φυλλομετρητές (web browsers).

3.Ιστορικό σημείωμα (http://info.cern.ch/Proposal.html)

O T. Berners Lee (CERN, 1989) πρότεινε τη σύνδεση υπέρ-
κειμένων µε το διαδίκτυο.

Πρότεινε συγκεκριμένα τρεις τεχνολογίες για αυτό:

- HyperText Transfer Protocol (HTTP) ένα πρωτόκολλο μετάδοσης
υπέρ-κειμένων μεταξύ πελατών-εξυπηρετητών
- HyperText Markup Language (HTML) μια γλώσσα για δημιουργία
ιστοσελίδων που μπορεί να παρουσιαστούν στον Web browser.
- Διευθύνσεις ιστοσελίδων - Uniform Resource Locator (URL).
4.

CLIENT(χρήστης πελάτης)
-Σε ένα Browser βάζουμε το όνομα της σελίδας που θέλουμε π.χ.
www.google.com
-Δημιουργείται ένα μήνυμα και αποστέλλεται μέσω του πρωτοκόλλου
http (π.χ.GET/HTTP/1.0 , GET url) στον web server της σελίδας που
ζητήσαμε
και περιέχει το περιεχόμενο που θέλουμε.

Server (εξυπηρετητής)
Λαμβάνει το μήνυμα http και το στέλνει στον web server
Web server (πρόγραμμα του εξυπηρετητή)
-λαμβάνει μηνύματα http και τα διαμοιράζει κατάλληλα
μέσω εσωτερικών πρωτοκόλλων σε ένα πρόγραμμα
που μπορεί να ψάξει π.χ. σε μία βάση δεδομένων ,βρίσκει τα
δεδομένα που
ζητήθηκαν , γεννάει την απάντηση (συνήθως html,css,js)
την οποία επιστρέφει στον client (browser δηλαδή) μέσω http
πρωτοκόλλου
που μπορεί πλέον να τα παρουσιάσει στον χρήστη.
5.Το πρωτόκολλο HTTP (Hyper Text Transfer Protocol)
-Το HTTP είναι ο βασικός μηχανισμός επικοινωνίας των client με τους
servers στο WEB.
-Είναι πρωτόκολλο ανταλλαγής μηνυμάτων μεταξύ πελάτη(browser) και
εξυπηρετητή(web server) για την εφαρμογή παγκοσμίου ιστού.
-Ορίστηκε το 1989 από τον Tim Berners-Lee
-Χαρακτηρίζεται από 2 τύπους μηνυμάτων:
Α) ΑΙΤΗΜΑΤΑ: (GET,POST,PUT,HEAD)
Ζητάει ο browser κάτι από τον server
Β)ΑΠΟΚΡΙΣΗ:
Ο server απαντά στον χρήστη-πελάτη
-Σήμερα χρησιμοποιείται ευρέως η έκδοση HTTP 1.1

Παραδείγματα Μηνυμάτων

Α)Μήνυμα αἰτημα ΗΤΤΡ

Σύνταξη : GET URI[ ?keyl=valuel&key2=value2] πρωτόκολλο

URI:( Uniform Resource Identifier) πληροφοριακός πόρος

GET /index.php?name=nikos HTTP/1.1[CRLF ]

Host: www.upatras.gr:80[CRLF ]
Accept: image/gif, image/jpeg[CRLF ]
User-Agent: Mozilla/4.0[CRLF ]
Connection: Keep-Alive[CRLF ]
[CRLF ]

GET δηλώνει ότι το μήνυμα είναι τύπου αιτήματος

/index.php?name=nikos είναι το URI
HTTP/1.1 πρωτόκολλο HTTP έκδοση 1.1
Από εδώ και κάτω υπάρχουν κάποιες λέξεις κλειδιά με τιμές που
αποτελούν την Κεφαλίδα του μηνύματος όπως:
Host: www.upatras.gr είναι η βασική διεύθυνση του server
:80 η πόρτα 80 του server
Accept:Δηλώνει τι αρχεία δέχομαι (εδώ image (gif,jpg))
User-Agent:Η ταυτότητα του προγράμματος ή browser που στέλνει το
μήνυμα
[CRLF] χαρακτήρες που δεν φαίνονται στον χρήστη
-Host+URI είναι η σελίδα αυτό που ζητάμε από τον server δηλαδή
www.upatras.gr/index.php?name=nikos
B)Μήνυμα απόκρισης
HTTP/1.x 200 OK
Date: Sat, 68 Sep 2017 17:12:39 GMT
Server: Apache
Last-Modified: Sat, 68 Sep 2007 17:12:16 GNT
Accept-Ranges: bytes
Cache-Control: max-age=@
Expires: Sat, @8 Sep 2017 17:12:39 GAT
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 32
Content-Type: text/plain; charsetsWindows-1253
Connection: keep-alive
Ηello world!

HTTP/1.x πρωτόκολλο HTTP 1.X

200 κωδικός κατάστασης (εδώ το 200 δηλώνει επιτυχής)
Στοιχεία κλειδιά της κεφαλίδας
Π.χ. Server: Apache
Τέλος το μήνυμα, μπορεί να είναι ο κώδικας html σελίδας, css, js κ.α.

Κωδικός Κατάστασης του μηνύματος

-Ακέραιος αριθμός τριών δεκαδικών ψηφίων
-Το πρώτο ψηφίο καθορίζει την κατηγορία της απάντησης:

1xx: μήνυμα πληροφορίας

2xx: κατάσταση επιτυχούς επεξεργασίας
3xx: προώθηση του Client σε διαφορετικό URL
4xx: σφάλμα προερχόμενο από τον client
(π.χ. 404 δεν βρέθηκε η ζητούμενη σελίδα)
5xx: σφάλμα προερχόμενο από τον server

6. Hypertext Transfer Protocol Secure (HTTPS)

Σήμερα στις περισσότερες περιπτώσεις χρησιμοποιείται το πρωτόκολλο
ΗΤΤΡS. Δεν είναι διαφορετικό πρωτόκολλο αλλά ο συνδυασμός του
ΗΤΤΡ με το πρωτόκολλο Secure Sockets Layer (SSL) ή Transport Layer
Security που μεριμνούν ώστε τα μηνύματα ΗΤΤΡ να αποστέλλονται
κρυπτογραφημένα.
7.URL(Universal Resource Locator)
Μοναδικές διευθύνσεις πόρων του διαδικτύου
Π.χ www.google.com
Τι μπορεί να περιέχει ; π.χ.
http://john.doe:pass@www.example.com:123/forum/?tag=network&order=new#top
http ή https :πρωτόκολλο
john.doe:όνομα χρήστη
pass:password χρήστη
www.example.com :το Host που θέλω να συνδεθώ
123:η πόρτα του server που θα συνδεθώ
/forum/: Path
(www.example.com/forum/ δηλαδή κατάλογος forum της σελίδας)
/?tag=network&order=new : query ερώτημα με τις παραμέτρους που ψάχνω
#top :fragment σημείο της σελίδας που με ενδιαφέρει
 ΓΕΝΙΚΑ ΓΙΑ ΤΗΝ HTML
H HTML αποτελείται από 3 σχετιζόμενες τεχνολογίες
-HTML5
H HTML5 είναι µια γλώσσα επισημείωσης (markup language)
που ορίζει τη δομή και περιεχόμενο μιας ιστοσελίδας: κείμενα ,κεφαλίδες, εικόνες, κλπ.
-CSS3
Η CSS3 είναι µια γλώσσα που ορίζει τον τρόπο παρουσίασης
του περιεχόμενου της ιστοσελίδας, δηλαδή το στυλ
παρουσίασης των στοιχείων της (χρώματα, γραμματοσειρές, θέσεις, κλπ.)
-JAVASCRIPT
H JavaScript 'JS', είναι μια γλώσσα προγραμματισμού που
εκτελείται στον browser και επιτρέπει να γίνονται ενέργειες, πχ ορίζει διάδραση µε τον
χρήστη, μετατρέποντας τη σελίδα σε ζωντανή εφαρμογή.

-Είναι γλώσσα επισημείωσης υπερκειμένου

-Η ΗΤΜL ορίστηκε αρχικά ως απλοποιημένη έκδοση της
γλώσσας SGML
-Η τρέχουσα έκδοση 5.0 (από 2014) δεν στηρίζεται
πλέον στην SGML.
-Η προτυποποίηση γίνεται από τον Οργανισμό W3C
(World-Wide Web Consortium) www.w3c.org
-ΧΗΤΜL είναι έκδοση της HTML 4 σε XML.

Ιστορία της HTML

-HTML 5.0 W3C Recommendation and to 2014,
-HTML 4.0 Recommendation του 1997.
-HTML 3.2 H πρώτη έκδοση W3C (1996). Εισήγαγε tables,
applets, text-flow γύρω από εικόνες, κλπ.
-HTML 2.0 (RFC 1866, RFC 2854)
-ISO HTML ISO/IEC 15445:2000 ήταν πρότυπο υποσύνολο της
-ΗΤΜL 4, από τον οργανισμό ΙSO/IEC.

ΗΤΜL 5: διαφορές από ΗΤΜL4

Νέα στοιχεία δόμησης ιστοσελίδας: <header>, <footer>,<article>, <section>
Νέα γνωρίσματα για στοιχεία φόρμας, number, date, time, calendar,και range
Νέα γραφικά στοιχεία: <svg> και <canvas>
Νέα πολυμεσικά στοιχεία: <audio> και <video>
Νέα API :HTML Geolocation, HTML Drag and Drop, HTML τοπική
Αποθήκευση, HTML ενδιάμεση τιμή, HTML Web Workers, HTML SSE
Σύνταξη στοιχείου HTML

Τα στοιχεία της HTML ορίζονται μέσω ετικετών <tag>…</tag>

Σύνταξη : <ετικέτα παράμετροι> περιεχόμενο </ετικέτα>
Π.χ. <p id=”p1”>καλημέρα</p>

-Το περιεχόμενο του στοιχείου μπορεί να είναι είτε άλλες ετικέτες ή κείμενο
-Στην HTML5 η τιμή των παραμέτρων δίδεται μέσα σε εισαγωγικά ή και χωρίς (εκτός αν η
τιμή περιέχει κείμενο με κενά)
-Τα στοιχεία δεν επηρεάζονται από κεφαλαία/μικρά
-Τα στοιχεία παρατίθενται ιεραρχικά
<p>My dog is <strong>very</strong> cute.</p>

-Θα πρέπει να αποφεύγεται εσφαλμένη ιεράρχηση των

στοιχείων που προκαλεί σύγχυση στον συντακτικό αναλυτή της ΗΤΜL π.χ.
<p> My-dog is<strοng>very-cute</p></strοng>

Στοιχεία block και inline

-Tα block element αρχίζουν µε νέα γραμμή και
τελειώνουν µε νέα γραμμή, π.χ.: <p>,<section>, <ul>

-Τα inline element αφορούν μικρά τμήματα ενός

block element, π.χ. : <a>, <em>, <strong>

-ένα στοιχείο block δεν μπορεί να ενταχθεί μέσα σε

ένα inline element

-κενές ετικέτες (δεν απαιτούν tag κλεισίματος)

<hr> ,<br> ,<img>

ΓΝΩΡΙΣΜΑΤΑ
<p id=”true-statement”>Το καλοκαίρι τελειώνει γρήγορα</p>
-το όνομα γνωρίσματος χωρίζεται με κενό από το προηγούμενο γνώρισμα
-το όνομα γνωρίσματος ακολουθείται από το σύμβολο =
-η τιμή του γνωρίσματος περιέχεται σε εισαγωγικά (όχι απαραίτητο αλλά καλή πρακτική)
-υπάρχουν γνωρίσματα λογικές μεταβλητές,π.χ.
<input type=”text” disabled>

Τα πιο συνηθισμένα γνωρίσματα

γνώρισμα περιγραφή
id Ορίζει μοναδική ταυτότητα του στοιχείου
class Ορίζει την κλάση στυλ που μοιράζεται το στοιχείο με άλλα στοιχεία
hidden Ορίζει αν το στοιχείο εμφανίζεται στον χρήστη
lang Ορίζει την γλώσσα περιεχομένου του στοιχείου
style Ορίζει ένα inline CSS style για το στοιχείο
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ (<,>,’,”,&,space)

Για να τους περιλάβουμε στο περιεχόμενο της σελίδας χρειάζεται να χρησιμοποιήσουμε

μια ειδική ακολουθία character reference

Χαρακτήρας reference
< &lt;
> &gt;
“ &quot;
‘ &apos;
& &amp;
Κενό(space) &nbsp;

Π.χ.
<p>Στην HTML,για παράγραφο χρησιμοποιούμε την &lt;p&gt;.</p>

Μη εκτυπώσιμοι χαρακτήρες στην HTML(whitespace)

<p>το καλοκαίρι κάνει ζέστη.</p>

<p>το καλοκαίρι κάνει ζέστη.</p>

-Και τα 2 παραπάνω στοιχεία θα εμφανιστούν το ίδιο.

Παραπάνω από ένα κενό λαμβάνονται σαν 1 κενό.
-Αν θέλουμε παραπάνω βάζουμε αντί κενό το &nbsp;
-Αλλαγή γραμμής με <br>

Σχόλια
<!-- αυτό είναι ένα σχόλιο -->
Document Object Model (DOM)

Ένα έγγραφο ΗΤΜL μπορεί να αναπαρασταθεί ως µια ιεραρχία

στοιχείων. Αυτή η ιεραρχία ονομάζεται Document Object Model
(DOM).

To DOM είναι µια αναπαράσταση σε μορφή δεδομένων των

στοιχείων και κειμένου που περιέχονται στο έγγραφο ΗΤΜL.

To DOM είναι µια προγραμματιστική διεπαφή (ΑΡΙ) στο περιεχόμενο

της ιστοσελίδας. Προγράμματα, όπως ένα πρόγραμμα Javascript
έχουν πρόσβαση στο ΒΟΜ και µέσω αυτού μπορούν να
τροποποιήσουν τη δοµή, το περιεχόμενο της σελίδας, το στυλ των
στοιχείων, κλπ.

Παράδειγμα
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page title</title>
</head>
<body>
<h1>Header 1</h1>
<p> First paragraph.</p>
</body>
</html>

https://software.hixie.ch/utilities/js/live-dom-viewer/
Στοιχεία του HEAD

Κεφαλίδα Εγγράφου ΗΤΜL

<head>
<meta charset= "utf-8">
<title> Παράδειγμα ιστοσελιδας</title>
</head>

Περιέχει πληροφορίες σχετικές µε το έγγραφο:

-Τίτλος εγγράφου, όπως θα εμφανίζεται στο παράθυρο
-Μεταδομένα που χαρακτηρίζουν το κείμενο, ώστε να γίνεται
σωστότερη αναγνώριση και απεικόνιση από τον Browser, π.χ.
-τύπος δεδοµένων που περιέχει το έγγραφο, κωδικοποίηση
κειµένου κ.λ.π.
-Τα στοιχεία του <head> δεν εμφανίζονται στον χρήστη.

Τα βασικότερα στοιχεία του <head>

<title> Ορίζει τον τίτλο της σελίδας που εμφανίζεται στο παράθυρο του browser
<style> ορίζει στυλ παρουσίασης για τα στοιχεία της σελίδας
<link> σύνδεση µε εξωτερικό αρχείο στυλ
<meta> Μετα-δεδομένα:π.χ.
<meta charset="utf-8"> κωδ. κειμένου utf-8 ΕΙΝΑΙ ΥΠΟΧΡΕΩΤΙΚΟ να υπάρχει
<meta name="description" content="tutorial">
<meta name="author" content="Nikos">
<meta http-equiv="refresh" content="30" >
<meta name="keywords" content="HTML, CSS">
<base> Ορίζει τη βάση αρχής για καθορισμό των σχετικών URL της σελίδας
<script> Περιοχή κώδικα javascript

Παραδείγματα
<link> σύνδεση µε εξωτερικό πόρο
Παράδειγμα 1: σύνδεση στο favorite icon (Favicon)
<link rel="icon" href="favicon.ico" type="image/x-icon"> εικόνα 16x16 px (.ico)
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
Παράδειγμα 2: σύνδεση σε εξωτερικό stylesheet
<link rel="stylesheet" href="mystyle.css">

<meta>
(a) για την κωδικοποίηση χαρακτήρων
<meta charset="utf-8">
(b) document author, description, keywords
<meta name="author" content="Nikos Avouris”>
<meta name="description" content="HTML tutorial">
<meta name="keywords" content="HTML, web">
Ορισμός γλὠσσας του κειµένου
Η γλώσσα ολόκληρου του εγγράφου ή η γλώσσα ενός επί
μέρους στοιχείου μπορεί να οριστεί µε το γνώρισμα lang. Αυτό
διευκολύνει τον browser και τις μηχανές αναζήτησης

<html lang="el">
<p lang="fr">Ceci est un paragraphe.</p>
Κώδικες γλωσσών: "en" (English), "es", (Spanish), "pt"
(Portuguese), "de" (German), "fr" (French)
language codes iso 639-1 https://en.wikipedia.org/wiki/ISO_639-1

meta name="viewport" ορισμός του viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0">
Με το στοιχείο αυτό ορίζουμε το έγγραφο να ακολουθεί τις διαστάσεις της οθόνης και
καθορίζουμε την αρχική κλίμακα 100%
Στοιχεία του BODY

Ετικέτες μορφοποίησης παραγράφων-περιοχών κειμένου

-Επικεφαλίδες <h1>, <h2>, ... <h6>

Τα στοιχεία <h1>, ... ,<h6> αναπαριστούν 6 επίπεδα
επικεφαλίδων <h1>είναι το ανώτερο και <h6> το κατώτερο

Σηµείωση για προσβασιµότητα: Μια κοινή τεχνική

πλοήγησης για τους χρήστες λογισμικού ανάγνωσης οθόνης
είναι το πέρασμα από επικεφαλίδα σε επικεφαλίδα για να καθορίσει γρήγορα το
περιεχόμενο της σελίδας.
Επομένως, είναι σημαντικό να µην παραλείψετε ένα ἡ περισσότερα επίπεδα
επικεφαλίδων. Κάτι τέτοιο μπορεί να προκαλέσει σύγχυση.

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

π.χ. <p> Παράγραφος 1</p>
-Η ετικέτα <p> ορίζει μία παράγραφο κειμένου (block element)
-Το στοιχείο <p> μπορεί να περιέχει inline στοιχεία
-O browser προσθέτει περιθώρια αυτόματα πριν και μετά το στοιχείο <p>.

Συνήθως συσχετίζουμε τα γνωρίσματα id και class µε στοιχεία <p> που

καθορίζουν το στυλ παρουσίασης για το συγκεκριμένο τμήμα του κειμένου

Ορισμός περιοχών κειμένου

<div> </div>
Ορισμός ενός μπλοκ κειμένου(in block) που εκτείνεται σε όλο το πλάτος της σελίδας,
χρησιμοποιείται ως υποδοχέας άλλων στοιχείων και εφαρμόζουμε σε αυτό ένα στυλ με τα
γνωρίσματα id,class,style

<span> </span>
Ορισμός περιοχής εντός κειμένου (inline) για εφαρμογή στυλ μορφοποίησης
<ul> Μη διατεταγμένη λίστα ( ) .
<ul>
<li> Lions
<li> Tigers
</ul>

<ol> διατεταγμένη λίστα (1.,2.,3. ...)

ΠΡΟΣΟΧΗ στις nested λίστες
<ul>
<li>Καρπούζια <!-- δεν κλείνει το <li> εδώ -->
<ul>
<li>μεγάλα καρπούζια</li>
<li>μεσαίου μεγέθους καρπούζια</li>
</ul>
</li><!-- κλείνει το <li> εδώ μετά την εσωτερική λίστα-->
<li>πεπόνια</li>
<li>Μπανάνες</li>
</ul>

ετικέτες αλλαγής γραμμής <hr> <br>

<hr> οριζόντια γραμμή (Horizontal Rule) διαχωριστικό
μεταξύ τμημάτων κειμένου
<br> αλλαγή γραμμής μέσα σε block element
π.χ.
<div id="address">Διεύθυνση: <br> Μαιζώνος 100 <br>
Πάτρα</div>

<pre> </pre> (preformatted)

Προ-μορφοποιημένο κείμενο με γραμματοσειρά σταθερού διαστήματος (monospace) που
διατηρεί τα κενά διαστήματα(π.χ. χρήσιμο για κώδικα ενός προγράμματος)

<blockquote> </blockquote>
Παράγραφος με πιο δεξιά στοίχιση από το προηγούμενο κείμενο
Είναι αναφορά σε κείμενο που δεν είναι δικό μας

<em> </em>
Στοιχείο inline που δείχνει έμφαση, εμφανίζεται με πλάγια γραφή, ενώ οι αναγνώστες
Οθόνης ανεβάζουν τον τόνο της φωνής στο τμήμα αυτό του κειμένου
Π.χ. <p>Χαίρομαι <em>ιδιαίτερα</em>που ήρθες <em>στην ώρα σου</em>.</p>

<strong> </strong>
Στοιχείο που δίνει μεγαλύτερη έμφαση από το <em>.
Π.χ. <p>Αυτό το υγρό είναι <strong>πολύ τοξικό</strong>.</p>

<i> italics <b> bold <u> underline δεν έχουν σημασιολογία και προτείνεται να αποφεύγεται
Η χρήση τους.

Δείκτες-εκθέτες
 εκθέτης
 δείκτης
ΣΥΝΘΕΤΑ ΣΤΟΙΧΕΙΑ HTML
ΠΟΛΥΜΕΣΑ
-Η HTML5 υποστηρίζει πολυμέσα σε μεγαλύτερο βαθμό από προηγούμενες
Εκδόσεις

-<img> η ετικέτα για ενσωμάτωση αρχείων εικόνων

Κύρια γνωρίσματα src( η διεύθυνση της εικόνας) alt (alternate text,εναλλακτικό
κείμενο αν η εικόνα δεν εμφανίζεται)
Π.χ.
<img src="images/dog.png" alt="το σκυλί μου" />

σημασία του γνωρίσματος alt

Οι screen readers θα ανακοινώσουν την ύπαρξη εικόνας και θα
διαβάσουν την περιγραφή της από το γνώρισμα alt.

Σε περίπτωση broken link, λόγω εσφαλμένης διεύθυνσης στο src path,

σύνδεσης χαμηλής ταχύτητας, μεταφοράς ή μετονομασίας της
εικόνας, το γνώρισμα alt βοηθάει το χρήστη να καταλάβει το νόημα.

οι μηχανές αναζήτησης δεν βλέπουν τις εικόνες. χρησιμοποιούν το

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

width, height, title

<img src=”URL” width=”x” height=”y” title=”πρόσθετη περιγραφή”>
width, height : το πλάτος ή το ύψος της εικόνας όπως επιθυμούμε να
εμφανίζεται από τον browser σε px ή %.

Οδηγεί σε σμίκρυνση ή μεγέθυνση της εικόνας αν είναι διαφορετικό

από τις πραγματικές της διαστάσεις. Αν δεν οριστεί, η εικόνα
εμφανίζεται με το πραγματικό της πλάτος. Πρέπει να οριστεί ένα από
τα δύο, αλλιώς μπορεί να παραμορφωθεί η εικόνα
title: πρόσθετη πληροφορία που εμφανίζεται ως tooltip όταν το
ποντίκι υπερίπταται της εικόνας. Προσοχή το title δεν είναι ίδιο με το alt

χρήση εικόνων — πνευματικά δικαιώματα

οι περισσότερες εικόνες προστατεύονται από πνευματικά
δικαιώματα από τους ιδιοκτήτες τους.
Η ενσωμάτωση εικόνας πρέπει να γίνεται μόνο εάν:
-είστε κάτοχος της εικόνας ή έχετε λάβει ρητή γραπτή
άδεια από τον κάτοχο της εικόνας ή έχετε επαρκή
απόδειξη ότι η εικόνα είναι δημόσια.
-Ποτέ μην αναφέρετε το γνώρισμα src σε μια εικόνα που
φιλοξενείται σε κάποιον άλλο ιστότοπο που δεν έχετε
την άδεια να συνδέσετε. ("hotlinking")

-<figure> και <figcaption>

Βάζει λεζάντα σε μία φωτογραφία συνήθως
<figure>
<img src="images/myself.jpg"
alt="This is an image of me"
width="300">
<figcaption>This is me at the age of 10.
</figcaption>
</figure>

-ετικέτες <video> και <audio> για την ενσωμάτωση βίντεο και ήχου
<audio src="url" autoplay controls loop></audio>
<video src="myvideo.mp4"></video>
π.χ.
<video src="big buck _bunny_720p_1mb.mp4" controls>
<p>O browser δεν υποστηρίζει video html5. Συνδεθείτε
<a href=" big _buck_bunny_720p_1mb.mp4 ">με το
Βίντεο</a></p>
</video>
Μεταξύ ετικετών <video></video> περιέχεται μήνυμα για τους
Φυλλομετρητές που δεν υποστηρίζουν <video>

src=διεύθυνση αρχείου
autoplay=παίζει μόλις φορτωθεί η σελίδα αυτόματα
controls=γνώρισμα για τα χειριστήρια βίντεο (λογική μεταβλητή)
loop=συνεχής αναπαραγωγή

υποστήριξη πολλαπλών format video

<video controls>
<source src=" bunny.mp4" type="video/mp4'' >
<source src="bunny.webm" type="video/webm''>
<p> Ο browser δεν υποστηρίζει video ΗΤΜL 5. Συνδεθείτε <a href="
big_buck_bunny_720p_1mb.mp4">με το
βίντεο</a></p>
</video>
εδώ έχουμε 2 source ανάλογα με το τι υποστηρίζει ο browser θα εμφανίσει
ανάλογα το βίντεο μεταξύ των 2 source
* WebM πακετάρει μαζί ήχο Ogg Vorbis με codec βίντεο VP8/VP9.
Υποστηρίζεται από Firefox και Chrome.
° MP4 πακετάρει ήχο AAC ή MP3 με codec βίντεο Η.264. Υποστηρίζεται
από Explorer και Safari.

γνωρίσματα του video

<video controls width="400" height="400" autoplay loop muted
poster="poster.png">
<source src="video1.mp4" type="video/mp4">
<source src="video1.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video.Here is a
<a href="video1.mp4">link to the video</a> instead.</p>
</video>

width,height: ορίζουν το πλάτος και ύψος του βίντεο, συντηρείται ο λόγος

προβολής.
autoplay το βίντεο αρχίζει να παίζει ενώ η σελίδα κατεβαίνει ακόμη
loop το βίντεο ξαναπαίζει µετά το τέλος του
muted ο ήχος κλειστός
poster εικόνα που φαίνεται πριν αρχίσει το βίντεο
preload none/auto/metadata

γνωρίσματα του audio

<audio controls >
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5audio.Here is a
<a href="video1.mp4">link to the audio</a> instead.</p>
</audio>

το στοιχείο <audio>μοιαζει με το στοιχείο <video>

δεν υποστηρίζει τα γνωρίσματα width/height/poster

υπότιτλοι σε <audio> <video> με το στοιχείο <track>

<video controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>
Δεν υποστηρίζονται υπότιτλοι σε τοπικό δίσκο(file:///) για λόγους ασφαλείας
-Η <picture> επιτρέπει να ενσωματωθούν εικόνες για διαστάσεις διαφορετικών
συσκευών. Υποστήριξη πολλών εικόνων
Π.χ.
Αν το μέγιστο πλάτος του παραθύρου του browser είναι μέχρι 650 pixels τότε δείξε
την mull-600.jpg Αλλιώς Default picture:mull-1500.jpg .Αυτό συμβαίνει π.χ. όταν
μικραίνουμε το παράθυρο του browser

<picture>
<source media=" (max-width:650px) srcset="mull-600.jpg">
<img
Src="mull-1500.jpg"
Alt="Βοσκοί οδηγούν κοπάδι από βόδια στο νησί Mull"
Title="βοσκοί οδηγούν κοπάδι από hairy coo" />
</picture>
Ο browser θα αποφασίσει ποια είναι πιο κοντά στις ανάγκες μας και θα την δείξει.

-<iframe> επιτρέπουν την ενσωμάτωση άλλων αντικειμένων

Η iframe μας επιτρέπει να κάνουμε integration ενός frame ενός περιεχομένου

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

<iframe src="https://example.com" width="100%" height=" 500" frameborder="0"

allowfullscreen sandbox>
<p><a href="https://developer.mozilla.org/en-US/docs/Glossary">
Σύνδεσμος για browser που δεν υποστηρίζουν iframes </a> </p> </iframe>

sandbox attribute, αυξημένη ασφάλεια σε σύγχρονους φυλλομετρητές

frameborder 0 αφαιρεί το πλαίσιο, η προκαθορισμένη συμπεριφορά
είναι =1. (εναλλακτικά: border : none;στο CSS).

<object>

Εργαλείο γενικού σκοπού για ενσωμάτωση περιεχομένου διαφορετικών τύπων π.χ. αρχεία
pdf flash κ.α

<object data="my.pdf" type="application/pdf" width="800"

height="1200" typemustmatch>
<p>Μπορείς να κατεβάσεις το αρχείο από
<a href="mypdf.pdf">τον σύνδεσμο.</a></p>
</object>
ΠΙΝΑΚΕΣ <table> </table><

Ένας πίνακας <table> δημιουργείται από γραμμές (table rows) <tr></tr> οι οποίες
περιέχουν κελιά που περιέχουν δεδομένα (table data) <td>..</td>

<table>
<tr>
κελί11 κελί12 <td>κελί11</td>
κελί21 κελί22 <td>κελί12</td>
</tr>
<tr>
<td>κελί21</td>
<td>κελί22</td>
</tr>
</table>

επικεφαλίδες <th> και <caption>

οι headers <th> έχουν την προκαθορισμένη μορφοποίηση bold και
κεντρική στοίχιση προκαθορισμένη μορφοποίηση
caption,στοίχιση στην κορυφή του πίνακα

< table>
<caption>Greek Mountains</caption>
<tr>
<th>Mountain</th>
<th>Height (m) </th>
<th>Region</th>
</tr>
<tr>
<td>Olympus </td>
<td>2917</td>
<td>Pieria</td>
< /tr>
<tr>
<td>Smolikas </td>
<td>2637</td>
<td>Ioannina</td>
< /tr>
<tr>
<td>Kaimaktsalan </td>
<td>2524</td>
<td>Florina</td>
< /tr>
< / table>

Greek Mountains
Mountain Height (m) Region
Olympus 2.917 Pieria
Smolikas 2,637 Ioannina
Kaimaktsalan 2.524 Florina
collspan
Το γνώρισμα collspan επιτρέπει έκταση σε πολλές στήλες
rowspan
Το γνώρισμα rowspan επιτρέπει έκταση σε πολλές γραμμές
π.χ.
<table>
<tr>
<td colspan="3">Πληθυσμός</td»
</tr>
<tr>
<td rowspan="2">Ηπειρωική χώρα</td>
<td>Ανδρες</td>
<td>3000000</td>
</tr>
<tr>
<td>Γυναίκες</td>
<td>3300000</td>
</tr>
<td rowspan="2">Νησιωτικη χώρα</td>
<td>Ανδρες</td>
<td>1200000</td>
</tr>
<tr>
<td>Γυναίκες</td>
<td>1300000</td>
</tr>
</table>

<colgroup> χρησιμοποιείται για ορισμό στυλ των κελιών ενός πίνακα

<table>
<colgroup>
<col span="2">
<col style="background-color:green;">
<col style="width:42px;">
<col style="background-color:green;">
<col style="background-color:brown;border:4px solid red;">
<col span="2" style="width:42px;">

</colgroup>

διαπερνά με την σειρά όλες τις στήλες του πίνακα και ορίζει στυλ
<col span="2"> προσπερνάει 2 στήλες για να πάει στην επόμενη

δομικά στοιχεία πινάκων: <thead> <tfoot>, <tbody>

• Το στοιχείο <thead> ορίζει την κεφαλίδα του πίνακα
• Το στοιχείο <tfoot> ορίζει το υποσέλιδο του πίνακα
• Το στοιχείο <tbody> ορίζει τα κυρίως στοιχεία (κελιά) του πίνακα
στυλ μπορεί να επισυναφθεί στα δομικά στοιχεία, κάποια
από αυτά μπορεί να επαναλαμβάνονται στο πάνω και κάτω
μέρος της σελίδας σε πίνακα πολλών σελίδων
Η χρήση <table> για διάταξη περιεχομένου σελίδας
Η χρήση <table> για διάταξη περιεχομένου θα πρέπει να αποφεύγεται
Τα στοιχεία <table> μειώνουν την προσβασιμότητα για χρήστες με προβλήματα
όρασης. Δεδομένου ότι ο ορισμός στυλ πινάκων είναι πιο περίπλοκος από ότι με
τις τεχνικές διάταξης μέσω CSS, με αποτέλεσμα σύγχυση των screenreader.
οι πίνακες είναι πιο δύσκολο να συντηρηθούν. οι διατάξεις των στοιχείων πίνακα
είναι σύνθετες, με αποτέλεσμα να είναι δύσκολο να γράψετε, να συντηρηθούν.
Οι πίνακες δεν προσαρμόζονται σε διαφορετικές συσκευές, γιατί έχουν σταθερό
μέγεθος που ορίζεται από το περιεχόμενό τους.

Δομικά στοιχεία HTML5

<header> κεφαλίδα:
<nav> μπάρα πλοήγησης (navigation bar):
<main> κύριο περιεχόμενο με ιδιαίτερα τμήματα <article>,<section>,<div>
<aside> πλαϊνή μπάρα: (sider bar) συνήθως μέσα στο <main>.
<footer> υποσέλιδο:

δομικά στοιχεία <section> <article>

ένα <section> είναι μια θεματική ομαδοποίηση περιεχομένου της ιστοσελίδας
ένα <article> είναι ένα αυτόνομο τμήμα πληροφορίας που μπορεί να
επαναχρησιμοποιηθεί π.χ.
<section>
<p>Top Stories</p>
<section>
<p>News</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
<section>
<p>Sport</p>
<article>Story 1</article>
<articIe>Story 2</articIe>
<article>Story 3</article>
</section>
</section>
Τα στοιχεία <div> <span> δεν έχουν σημασιολογία
Αυτά τα στοιχεία θα πρέπει να χρησιμοποιούνται μόνο όταν άλλα σημασιολογικά στοιχεία
κειμένου δεν μπορούν να χρησιμοποιηθούν για τo συγκεκριμένο τμήμα του κειμένου.
Συνήθως σχετίζονται με ιδιότητες id ή κλάσης class για το σχετικό στυλ css.
<span> είναι μη-σημασιολογικό στοιχείο inline
<div> είναι μη-σημασιολογικό στοιχείο block

<p> Η βασίλισσα μπήκε ακολουθούμενη από την πομπή της στο δωμάτιο
<span class="editor-note">[Σημείωση: Τα φώτα χαμηλώνουν καθώς εισέρχεται η
πομπή]</span>.</p>

ΦΟΡΜΕΣ <form>
Είναι το στοιχείο που μας επιτρέπει να δημιουργήσουμε φόρμες. Φόρμες βλέπουμε
συνεχώς στη ζωή μας είτε online στο διαδίκτυο συμπληρώνουμε τα κουτάκια για να
δώσουμε ένα password, ένα login name ή τα στοιχεία μας τα δημογραφικά μας στοιχεία
που ζητείται για να κάνουμε εγγραφή σε μία καινούργια υπηρεσία ή σε χαρτί όταν
συναλλασσόμαστε με το δημόσιο ή με άλλους φορείς.

Οδηγίες για συμπλήρωση φόρμας

• Article about forms UX:
https://www.smashingmagazine.com/category/forms

• Guide To Web Form Usability:

https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/

• practices to form design:

http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php

• https://www.uxmatters.com/mt/archives/2017/05/designing-ux-forms.php.
To στοιχείο <form>
<form action="/my-handling-form-page" method="post">
… τα στοιχεία της Φόρμας ...
</form>

- Το γνώρισμα action ορίζει τη διεύθυνση (URL) που θα σταλούν τα περιεχόμενα της

φόρμας.
- Η method ορίζει την µμέθοδο ΗΤΤΡ που θα χρησιμοποιηθεί για να σταλούν τα δεδομένα
(“get" ή"post").

<form> χωρίς action σημαίνει Ότι η φόρμα θα σταλεί στην ίδια σελίδα που
έχει παράγει τη φόρμα.

method = "get" ή "post"

-get είναι η προκαθορισμένη τιμή του γνωρίσματος, τα δεδομένα στέλνονται ως τμήμα του
url στον header του μηνύματος ΗΤΤΡ π.χ. https://www.google.gr/search?q=Patras

-post: χρησιμοποιείται περισσότερο στις φόρμες, τα δεδομένα στέλνονται στο σώμα του
μηνύματος ΗΤΤΡ.

Στοιχεία (widgets) μιας html form

-Μια φόρμα HTML αποτελείται από στοιχεία widgets.
-Τα στοιχεία μπορεί να είναι στοιχεία κειμένου text fields (μιας ή πολλών γραμμών),
πεδία επιλογής, κουμπιά buttons, checkboxes, radio buttons, κλπ.
-Τις περισσότερες φορές τα στοιχεία συνοδεύονται από επεξηγηματικό κείμενο ( label ).
-Καλός σχεδιασμός των επεξηγηματικών κειμένων βοηθάει χρήστες — ιδιαίτερα με
προβλήματα όρασης να συμπληρώσουν τη φόρμα.

<form action="/my-handling-form-page" method=" post" >

<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<input type="submit" value="Sumbit">
</div>
</form>
<html>
<head>
<meta charset="utf-8">
<title> Παράδειγμα φόρμας </title>
<style>
body {font-family: Arial, Helvetica,sans-serif;}
</style>
</head>
<body>
<form>
<div>
<label for="name">Όνομα: </label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="last">Επώνυμο: </label>
<input type="text" id="lasts" name="last">
</div>
<div>
<label for="pass">Κωδικός: </label>
<input type="password" id="lasts" name="pass">
</div>
<div>
<label for="check">Συμφωνείτε; </label>
<input type="checkbox" id="check" name="check"
value="ok">
</div>
<input type="submit">
</form>
</body>
</html>