Create Websites with HTML 5.0
•Download as PPT, PDF•
0 likes•166 views
Καλησπέρα, σήμερα θα αναλύσουμε για την γλώσσα HTML5, θα δούμε λίγο τον κώδικα της & ότι έχει να κάνει με αυτό. Good evening, today we will analyze for HTML5, we will see a bit of his code & it has to do with it.
![Περιεχόμενα
Εισαγωγή
μμΧρονοδιάγρα α
μ [HTML 5.0 – HTML]Ορισ οί
HTML 4.01 vs HTML5
μ HTML5Τι ας προσφέρει η
HTML5Εισαγωγή στην
HTML5Κώδικας
BrowserΕκτέλεση σε
Πηγές](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Similar to Create Websites with HTML 5.0
Similar to Create Websites with HTML 5.0 (20)
More from DJ Dragon King
More from DJ Dragon King (7)
Recently uploaded
Recently uploaded (20)
Create Websites with HTML 5.0
- 1. Δημιουργία ιστοσελίδων με την HTML 5.0 Διονύσης Ζούγρας – Γιάννης Μανιάτης Φοιτητές Τ.Ε.Π – Δ.ΙΕΚ Γαλατσίου denniszougras2017@gmail.com maniatisyiannis@hotmail.com
- 2. Περιεχόμενα Εισαγωγή μμΧρονοδιάγρα α μ [HTML 5.0 – HTML]Ορισ οί HTML 4.01 vs HTML5 μ HTML5Τι ας προσφέρει η HTML5Εισαγωγή στην HTML5Κώδικας BrowserΕκτέλεση σε Πηγές
- 3. Εισαγωγή HTML 5.0 HTMLΗ είναι η τελευταία έκδοση της (Hypertext Markup Language), μη οποία ας μ μπροσφέρει καινούριες δυνατότητες ε αποτέλεσ α &την εύκολη κατασκευή ιστοσελίδων ένα ευχάριστο .περιβάλλον στους επισκέπτες τις
- 4. Χρονοδιάγραμμα 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
- 5. Χρονοδιάγραμμα 2004 μΗ ανάπτυξή της ξεκίνησε το από έλη της Apple. 2008.Η πρώτη έκδοση της κυκλοφόρησε το 34% μΤο των Ιστοσελίδων την χρησι οποίησαν το 2011. μ μΣή ερα είναι προσβάσι η στις περισσότερες μ .ηχανές αναζήτησης
- 6. Ορισμοί Html 5.0 μΗ είναι ία εξέλιξη της γλώσσας HTML. HTMLΗ είναι η βασική γλώσσα ανάπτυξης ιστοσελίδων στο Διαδίκτυο και αποτελεί κύριο εργαλείο για την μανάπτυξη εφαρ ογών στο περιβάλλον του μ .Παγκόσ ιου Ιστού
- 7. Ορισμοί (2) μ μΈνα αρχείο κει ένου ε λέξεις ή «αλλιώς ετικέτες» (Tags), μεταξύ “των χαρακτήρων <” & “>”. Εισαγωγή διαφόρων μαντικει ένων στην ιστοσελίδα μ ,ας όπως Images, Text, Links etc. &Μορφοποίηση επεξεργασία .κώδικα μ μΆνοιγ α της ιστοσελίδας έσω κάποιου Web Browser με το μ .αντίστοιχο αποτέλεσ α
- 8. 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>
- 9. HTML4 vs HTML5 (2) μΤα διανυσ ατικά μγραφικά της γίνονται ε τη βοήθεια διαφόρων μμ ,προγρα άτων όπως Silverlight, Flash ..κλπ Δεν επιτρέπει τη JavaScriptλειτουργία του μμστο πρόγρα α .περιήγησης μΤα διανυσ ατικά γραφικά αποτελούν μαναπόσπαστο έρος της HTML5, . . SVGπ χ και μ .κα βάς Επιτρέπει την εκτέλεση .του στο παρασκήνιο Αυτό είναι δυνατό λόγω API JS Webτου του worker.
- 10. Τι μας προσφέρει η HTML5 Καλύτερες αλληλεπιδράσεις Ανάπτυξη παιχνιδιών &Μουσική Βίντεο CSS3Πλήρης υποστήριξη , PluginsΠλούσιο περιβάλλον χωρίς επιπλέον μ μΚινού ενα σχέδια ε τα γραφικά της μΚατασκευή διαδικτυακών εφαρ ογών
- 11. Εισαγωγή στην HTML5 μ μ HTML5Για να φτιάξου ε ια ιστοσελίδα σε κώδικα μθα χρειαστού ε έναν μΚει ενογράφο (TextEditor). 1. “Windows” => Notepad++ ή Aptana Studio 2. “Mac” => TextMate ή Textwrangler 3. “Linux” => BlueFish
- 12. Κώδικας HTML5 ~ ~Νέες Ετικέτες <article> <footer> <main> <header> <nav> <time> <section> H HTML5 μας παρέχει 3την εισαγωγή τύπων :κώδικα CSS, HTML, JavaScript
- 13. Κώδικας HTML5 (2) <!DOCTYPE html> <html Lang=”en”> <head> </head> <body> </body> </html> 1st Tag: Ετικέτα αναφοράς προς Browserτον για να τον μειδοποίησου ε πως θα HTML.είναι αρχείο 2nd Tag: Ετικέτα αναγνωρίσης Browserστον ότι το μκεί ενο που περιέχει μανά εσά τους είναι HTML.κώδικας
- 14. Κώδικας HTML5 (3) <!DOCTYPE html> <html Lang=”en”> <head> <meta Charset="UTF-8" /> <title>Page Title</title> </head> <body> </body> </html> 3rd Tag: Ετικέτα επικεφαλίδας ,της ιστοσελίδας η οποία μας περιγράφει το μ .περιεχό ενο της Όπως ,την Κωδικοποίηση τον . ..Τίτλο της Σελίδας κ α 4th Tag: , μ BODYΤέλος έχου ε το όπου είναι και το μπεριεχό ενο της μ (σελίδας ας Κυρίως μ ).Σώ α
- 15. Κώδικας HTML5 (4) <!DOCTYPE html> <html Lang=”en”> <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» . ..κ α
- 16. Κώδικας HTML5 (5) , μΕπίσης δύο ακό α HTML5ετικέτες στην είναι ο CANVAS & το SVG. CANVASΤο μχρησι οποιείται για την σχεδίαση γραφικών σε μ ,ια ιστοσελίδα ενώ το SVG μχρησι οποιείται για μτον καθορισ ό γραφικών στην .ιστοσελίδα “Canvas”Η ετικέτα υποστηρίζεται Browsers.από όλα τα
- 17. Εκτέλεση σε Browser μΓια να εκτελέσου ε μ μια ιστοσελίδα ας πρέπει να έχει ( μ )κατάληξη σή ανση “name.html” ή “name.htm”. Για να τρέξουν και οι υπόλοιποι Χρήστες του Δ μιαδικτύου την ιστοσελίδα ας μπρέπει να το έχου ε ανεβάσει σε έναν Web Domain Server.
- 18. Σας ευχαριστούμε για τον πολύτιμο χρόνο σας!!!