Φτιάχνοντας την πρώτη μας ιστοσελίδα σε HTML5
Μέρος 1
Πολλά λέγονται και γράφονται τελευταία για την HTML5, αλλά ένα είναι σίγουρο: εισάγει καινοτομίες και ήρθε για να μείνει. Σε αυτό το tutorial δεν θα μπούμε κατευθείαν στα “βαθιά” νερά, αλλά θα δούμε τις βασικότερες νέες ετικέτες και πως αυτές κάνουν τη ζωή μας πιο εύκολη!
Προϋποθέσεις για να κατανοήσετε αυτό το tutorial: βασικές γνώσεις HTML και CSS. Ξεκινάμε;
1. Ξεχάστε τα περίεργα doctype!
Η HTML5 βάζει τέλος στα doctype-σιδηροδρόμους του στυλ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
και εισάγει το απλό και πρακτικό:
<!DOCTYPE HTML>
Οπότε μια ιστοσελίδα σε HTML5 θα είναι της μορφής:
<!DOCTYPE HTML> <html> <head> <title>...</title> </head> <body> ... </body> </html>
2. Βασικές νέες ετικέτες – δομή
Αν με ρωτήσετε ποιό είναι το επόμενο καινοτόμο στοιχείο που εισάγει η HTML5, θα σας απαντήσω: Η νέα δομή του περιεχομένου.
Και επειδή μια εικόνα ισοδυναμεί με 1000 λέξεις, η HTML5 αντικαθιστά αυτό:
με αυτό:
Οπότε ο κώδικας μας, ενσωματώνοντας το παραπάνω παράδειγμα, γίνεται κάπως έτσι:
Οπότε ο κώδικας μας, ενσωματώνοντας το παραπάνω παράδειγμα, γίνεται κάπως έτσι: <pre lang="text"><!DOCTYPE HTML> <html> <head> <title>...</title> </head> <body> <header>...</header> <nav>...</nav> <article>...</article> <aside>...</aside> <footer>...</footer> </body> </html>
Θέλω να πιστεύω οτι αντιληφθήκατε ήδη το πόσο πιο σαφής και εύχρηστη γίνεται η δομή της ιστοσελίδας μας!
Σκόπιμα δεν ανέφερα παραπάνω την ετικέτα
<section>
Μπορεί να χρησιμοποιηθεί για να διαχωρίσει ένα “κομμάτι” περιεχομένου, ως εξής:
<article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <section><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></section> </article>
ή και ως εξής:
<footer> <section id="about">...</section> <section id="latest_comments">...</section> <section id="blogroll">...</section> </footer>
3. Ενώνουμε τα κομμάτια του πάζλ
Ας προσπαθήσουμε να συδυάσουμε όλα τα παραπάνω και να τα εμπλουτίσουμε λίγο για να φτιάξουμε τον “σκελετό” μιας ιστοσελίδας HTML5:
<!DOCTYPE HTML>
<html>
<head>
<title>Η πρώτη μου σελίδα</title>
</head>
<body>
<header>
<h1>Η πρώτη μου σελίδα</h1>
<h2>Το tagline εδώ</h2>
</header>
<nav>
<ul>
<li><a href="#">Αρχική</a></li>
<li><a href="#">Σχετικά</a></li>
<li><a href="#">Άρθρα</a></li>
<li><a href="#">Επικοινωνία</a></li>
</ul>
</nav>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<section><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</article>
<aside>
<section>
<h2>Follow me</h2>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</section>
<section>
<h2>Τελευταία νέα</h2>
...
</section>
</aside>
<footer>
<section id="about">Σχετικά με εμένα......</section>
<section id="latest_comments">Τελευταία Σχόλια......</section>
<section id="blogroll">Blogroll...</section>
</footer>
</body>
</html>Ο παραπάνω κώδικας θα μας δώσει κάτι τέτοιο:
Σημείωση: Η παραπάνω εικόνα είναι απλά η οπτικοποίηση του παραδείγματος. Η θέση και η παράμετροι των στοιχείων header, nav, article, aside, footer κλπ καθορίζεται με τη χρήση CSS, ακριβώς όπως θα κάναμε και αν είχαμε τα αντίστοιχα div.
Αφού ολοκληρώσαμε την βασική δομή, τον σκελετό, το επόμενο βήμα είναι να μορφοποιήσουμε την ιστοσελίδα μας με τη χρήση CSS, κάτι που θα δούμε στο δεύτερο μέρος του άρθρου!
Μέχρι τότε, περιμένω τα σχόλια και τις παρατηρήσεις σας!
Γίνετε επεξεργασία, Παρακαλώ περιμένετε...
Χαίρομαι όταν βλέπω ελληνικά site να ασχολούνται με web design. Ωραίο κείμενο. Απλό και περιεκτικό…
Πολύ ωραίο άρθρο, μπράβο.
Χαίρομαι που σας άρεσε, ελπίζω να είναι αρκετά κατανοητό και για τους λιγότερο σχετικούς αναγνώστες!
Πολύ καλό άρθρο σωτήρη, απλό και περιεκτικό. Βέβαια πιστεύω ότι θα πάρει αρκετό καιρό μέχρι να γίνει “καθημερινότητα” η html 5. Μέχρι το 2022 – 2023 που έχει δρομολογηθεί να γίνει w3c standard έχουμε ακόμη…
Όσον αφορά την καθημερινότητα: Την html5 δεν την υποστηρίζουν οι παλιές εκδόσεις των browsers και όλες του IE πλήν του IE9.
Στο προσωπικό μου site χρησιμοποιώ html5. Οι επισκέπτες των οποίων οι browsers δεν την υποστηρίζουν είναι μειοψηφία και χρησιμοποιούν IE. Οι χρήστες firefox, chrome, safari και opera γενικά τείνουν να έχουν ενημερωμένες εκδόσεις σε αντίθεση με τους χρήστες IE.
Οπότε πάμε σε html5shiv: http://code.google.com/p/html5shiv/ και άλλες javascript λύσεις και έχουμε καλύψει το μεγαλύτερο ποσοστό χρηστών.
Τώρα κάποιος που έχει και παλιό IE και απενεργοποιημένη javascript δεν μπορεί γενικά να πλοηγηθεί στο σύγχρονο ίντερνετ!
Απ’ ότι θυμάμαι υπήρχε ένας converter της Google Που αν τον εγκαταστήσεις, αυτόματα μετατρέπει την html5 σε κλασσική html ώστε να μπορούν να την υποστηρίξουν ακόμη και παλαιότερες εκδόσεις από browsers. Θα ψάξω να βρω ξανά αυτό το άρθρο και θα κάνω δημοσίευση εδώ πάλι.
Επειδή εγώ έχω μόνο μερικές γνώσεις html και από css δεν γνωρίζω τίποτε, γίνεται να μου επισημάνεις τα σημεία στα οποία χρησιμοποίησες κώδικα css στο πολύ καλό και περιεκτικό σου παράδειγμα παραπάνω??
Όχι, δεν θα βρείς κώδικα CSS στο παραπάνω κείμενο.
Μάλλον δεν το εξήγησα εγώ σωστά στην αρχή του άρθρου, my bad.
Είχα σκοπό σε αυτό το πρώτο μέρος να δείξω πως θα στήσουμε τον “σκελετό” μιας ιστοσελίδας σε html5 και στο δεύτερο μέρος με τη χρήση CSS να την κάνουμε να φαίνεται στοιχημένη όπως στην τελευταία εικόνα που παραθέτω.
Οπότε υπομονή για το δεύτερο μέρος!
Καλησπέρα και απο μένα σήμερα βρήκα αυτό το site και μπορώ να πω οτι μου αρέσει ή να το πω καλύτερα super.
Θεωρώ πως είναι λίγο νωρίς ακόμα για την μετάβαση σε html5 λόγω τον browsers, απ’όσο γνωρίζουμε δεν θα είναι 100% έτοιμη μέχρι το 2012
αλλά θα σώσει τον κόσμο
) πολύ καλό άρθρο για πρώτη επαφη με την html5 . bravo !
Αυτό ακριβώς έψαχνα!!ένα html5 tutorial στα ελληνικά!!
Μία ερώτηση:Εγώ έκανα ακριβώς τα βήματα του tutorial αλλά κολλάω κάπου….Δεν μου βγάζει τίποτα στην ιστοσελίδα αφού κάνω τις αλλαγές…Πρέπει να κάνω κάποια ρύθμιση για να αλλάξει από html4 σε html5???
Συγγνώμη είχα παραλείψει κάτι….