Create Websites with HTML 5.0

Δημιουργία ιστοσελίδων
με την HTML 5.0
Διονύσης Ζούγρας – Γιάννης Μανιάτης
Φοιτητές Τ.Ε.Π – Δ.ΙΕΚ Γαλατσίου
denniszougras2017@gmail.com
maniatisyiannis@hotmail.com

Περιεχόμενα

Εισαγωγή

μμΧρονοδιάγρα α

μ [HTML 5.0 – HTML]Ορισ οί

HTML 4.01 vs HTML5

μ HTML5Τι ας προσφέρει η

HTML5Εισαγωγή στην

HTML5Κώδικας

BrowserΕκτέλεση σε

Πηγές

Εισαγωγή
 HTML 5.0 HTMLΗ είναι η τελευταία έκδοση της
(Hypertext Markup Language), μη οποία ας
μ μπροσφέρει καινούριες δυνατότητες ε αποτέλεσ α
&την εύκολη κατασκευή ιστοσελίδων ένα ευχάριστο
.περιβάλλον στους επισκέπτες τις

Χρονοδιάγραμμα

HTML μ World Wide WebΗ δη ιουργήθηκε από την
Consortium (W3C), μένας οργανισ ός που
μ Sir Tim Berners-Lee,δη ιουργήθηκε από τον
μ &προκει ένου να συνεχίσει την ανάπτυξη του ιστού
.των γλωσσών του

HTML => 1991
HTML 2.0 => 1995
HTML 3.2 => 1997
HTML 4.0 - 4.01 => 1997-9
XHTML => 2000

Χρονοδιάγραμμα

2004 μΗ ανάπτυξή της ξεκίνησε το από έλη της
Apple.

2008.Η πρώτη έκδοση της κυκλοφόρησε το

34% μΤο των Ιστοσελίδων την χρησι οποίησαν το
2011.

μ μΣή ερα είναι προσβάσι η στις περισσότερες
μ .ηχανές αναζήτησης

Ορισμοί

Html 5.0 μΗ είναι ία
εξέλιξη της γλώσσας
HTML.

HTMLΗ είναι η βασική
γλώσσα ανάπτυξης
ιστοσελίδων στο
Διαδίκτυο και αποτελεί
κύριο εργαλείο για την
μανάπτυξη εφαρ ογών
στο περιβάλλον του
μ .Παγκόσ ιου Ιστού

Ορισμοί (2)

μ μΈνα αρχείο κει ένου ε λέξεις ή
«αλλιώς ετικέτες» (Tags), μεταξύ
“των χαρακτήρων <” & “>”.

Εισαγωγή διαφόρων
μαντικει ένων στην ιστοσελίδα
μ ,ας όπως Images, Text, Links
etc.

&Μορφοποίηση επεξεργασία
.κώδικα

μ μΆνοιγ α της ιστοσελίδας έσω
κάποιου Web Browser με το
μ .αντίστοιχο αποτέλεσ α

HTML4 vs HTML5

Υποστηρίζεται από όλα
Browsers.τα παλιά

Η δήλωση της ετικέτας
<Doctype> μ .είναι εγάλη

μ μΤο εγαλύτερο έρος
των σύγχρονων
Browsers υποστηρίζουν
,τις προδιαγραφές της
. . Firefox, Chromeπ χ
.κλπ

Η δήλωση της ετικέτας
<Doctype> &είναι απλή
μ .σύντο η
<!Doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">>
<!Doctype html>

HTML4 vs HTML5 (2)

μΤα διανυσ ατικά
μγραφικά της γίνονται ε
τη βοήθεια διαφόρων
μμ ,προγρα άτων όπως
Silverlight, Flash ..κλπ

Δεν επιτρέπει τη
JavaScriptλειτουργία του
μμστο πρόγρα α
.περιήγησης

μΤα διανυσ ατικά
γραφικά αποτελούν
μαναπόσπαστο έρος
της HTML5, . . SVGπ χ και
μ .κα βάς

Επιτρέπει την εκτέλεση
.του στο παρασκήνιο
Αυτό είναι δυνατό λόγω
API JS Webτου του
worker.

Τι μας προσφέρει η HTML5
 Καλύτερες
αλληλεπιδράσεις
 Ανάπτυξη παιχνιδιών
 &Μουσική Βίντεο

CSS3Πλήρης υποστήριξη

, PluginsΠλούσιο περιβάλλον χωρίς επιπλέον

μ μΚινού ενα σχέδια ε τα γραφικά της

μΚατασκευή διαδικτυακών εφαρ ογών

Εισαγωγή στην HTML5

μ μ HTML5Για να φτιάξου ε ια ιστοσελίδα σε κώδικα
μθα χρειαστού ε έναν μΚει ενογράφο (TextEditor).
1. “Windows” => Notepad++ ή Aptana Studio
2. “Mac” => TextMate ή Textwrangler
3. “Linux” => BlueFish

Κώδικας HTML5
~ ~Νέες Ετικέτες
<article> <footer>
<main> <header>
<nav> <time>
<section>

H HTML5 μας παρέχει
3την εισαγωγή τύπων
:κώδικα

CSS, HTML, JavaScript

Κώδικας HTML5 (2)
<!DOCTYPE html>
<html Lang=”en”>
<head>
</head>
<body>
</body>
</html>

1st
Tag:
Ετικέτα αναφοράς προς
Browserτον για να τον
μειδοποίησου ε πως θα
HTML.είναι αρχείο

2nd
Tag:
Ετικέτα αναγνωρίσης
Browserστον ότι το
μκεί ενο που περιέχει
μανά εσά τους είναι
HTML.κώδικας

<!DOCTYPE html>
<head>
<meta Charset="UTF-8" />
<title>Page Title</title>
</head>
<body>
</body>
</html>

3rd
Tag:
Ετικέτα επικεφαλίδας
,της ιστοσελίδας η οποία
μας περιγράφει το
μ .περιεχό ενο της Όπως
,την Κωδικοποίηση τον
. ..Τίτλο της Σελίδας κ α

4th
Tag:
, μ BODYΤέλος έχου ε το
όπου είναι και το
μπεριεχό ενο της
μ (σελίδας ας Κυρίως
μ ).Σώ α

<!DOCTYPE html>
<head>
<meta Charset="UTF-8" />
<title>Page Title</title>
</head>
<body>
</body>
</html>
<h1>Welcome!</h1>
<p>My first HTML page</p>
<a HREF="https://www.facebook.com/">
<img SRC="My Image Profile.jpg"></a><br>

μΜπορού ε να
μεπεξεργαστού ε και να
μ μδια ορφώσου ε το
περιεχόμ μενο του ε
,διάφορες ετικέτες όπως
η « 1-6Η », «IMG», «A
HREF», «TABLE» . ..κ α


, μΕπίσης δύο ακό α
HTML5ετικέτες στην
είναι ο CANVAS &
το SVG.

CANVASΤο
μχρησι οποιείται για την
σχεδίαση γραφικών σε
μ ,ια ιστοσελίδα ενώ το
SVG μχρησι οποιείται για
μτον καθορισ ό
γραφικών στην
.ιστοσελίδα
“Canvas”Η ετικέτα
υποστηρίζεται
Browsers.από όλα τα

Εκτέλεση σε Browser
￈

μΓια να εκτελέσου ε
μ μια ιστοσελίδα ας
πρέπει να έχει
( μ )κατάληξη σή ανση
“name.html” ή
“name.htm”.

Για να τρέξουν και οι
υπόλοιποι Χρήστες του
Δ μιαδικτύου την ιστοσελίδα ας
μπρέπει να το έχου ε ανεβάσει
σε έναν Web Domain Server.

Σας ευχαριστούμε για τον πολύτιμο
χρόνο σας!!!

Πηγές

https://www.w3schools.com/default.asp

http://ti-einai.gr/html/

http://ti-einai.gr/html-5/

https://www.youtube.com/watch?v=ppuvHRwbo6I

http://www.techsutram.com/2010/09/html-vs-
html5.html

https://www.queness.com/post/3885/8-simply-
amazing-html5-canvas-and-javascript-animations

https://superdevresources.com/open-source-html5-
games/

Create Websites with HTML 5.0

More Related Content

Similar to Create Websites with HTML 5.0

More from DJ Dragon King

Recently uploaded

Create Websites with HTML 5.0