Δομή HTML Ιστοσελίδων

Δημοσιεύτηκε από τον alex


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

Για τη δημιουργία μιας ιστοσελίδας, μπορούμε να χρησιμοποιήσουμε διάφορους απλούς text editors, όπως το σημειωματάριο (notepad) που έρχεται προεγκατεστημένο με τα windows ή μπορούμε να χρησιμοποιήσουμε πιο εξελιγμένους κειμενογράφους για html, όπως το notepad++, το οποίο μπορείτε να το κατεβάσετε σε αυτή την ηλεκτρονική διεύθυνση και το οποίο είναι ένα αρκετά καλό και δωρεάν πρόγραμμα για να γράφετε xhtml και css.

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

Στην πρώτη γραμμή του αρχείου μας, τοποθετούμε την έκδοση της xhtml που χρησιμοποιούμε. Επειδή είναι δύσκολο για τον οποιονδήποτε να θυμάται να γράψει την έκδοση της xhtml, συνήθως την αντιγράφω από έγγραφο σε έγγραφο, όπως έκανα και σε αυτή την περίπτωση. Στην πρώτη γραμμή λοιπόν του εγγράφου μας, θα βάλουμε τον παρακάτω κώδικα, ο οποίος εκφράζει την έκδοση που χρησιμοποιούμε.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Όπως βλέπουμε, η έκδοση της xhtml που χρησιμοποιούμε είναι η 1.0 transitional. Θα μπορούσαμε επίσης να χρησιμοποιήσουμε και την 1.0 strict, αλλά αυτό σημαίνει ότι δεν θα μπορούσαμε να χρησιμοποιήσουμε κάποιες ετικέτες όπως  τους πίνακες. Για αυτό το λόγο, στα περισσότερα έγγραφα μας θα χρησιμοποιούμε xhtml 1.0 transitional.

Ακριβώς από κάτω, θα ανοίξω μετά μία <html> ετικέτα και θα την κλείσω ξαναγράφοντας πιο κάτω την ετικέτα html με μία μπροστινή κάθετο.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>


</html>

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</head>

<body>

</body>

</html>

Όπως κατανοούμε, η <html> ετικέτα είναι ένα container, η οποία περικλείει όλο το περιεχόμενο της ιστοσελίδας. Κάθε έγγραφο xhtml που δημιουργούμε λοιπόν, θα ξεκινά με την html ετικέτα, ενώ στο τέλος θα κλείνει βάζοντας πάλι την html ετικέτα, με μία μπροστινή κάθετο, όπως παραπάνω. Με τον ίδιο τρόπο, ανοίγουν και κλείνουν όλες οι xhtml ετικέτες, οι οποίες περικλείουν άλλες ετικέτες.

Μετά, σειρά έχει ο τίτλο της ιστοσελίδας, ο οποίος εκφράζεται με τις <title>…</title> ετικέτες και μέσα στον οποίο μπορούμε να βάλουμε το κείμενο που θα αντιπροσωπεύει τον τίτλο. Στην προκειμένη περίπτωση, θα γράψω τη λέξη website.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
      <title>website</title>
</head>

<body>

</body>

</html>

Μέσα στη body ετικέτα, θα ανοίξω μία <p> ετικέτα, η οποία εκφράζει τις παραγράφους που θα έχει η ιστοσελίδα μας. Αφού γράψω αυτή τη μικρή πρόταση (this is a paragraph), θα κλείσω την <p> ετικέτα μου. Πρέπει να έχουμε πάντα στο νου μας, ότι η xhtml χρειάζεται να ξέρει που να ξεκινήσει μία ετικέτα και που να τελειώσει.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
     <title>website</title>
</head>

<body>
     <p>this is a paragraph</p>
</body>

</html>

Τώρα η βασική δομή της ιστοσελίδας μας έχει ολοκληρωθεί. Το μόνο που χρειάζεται είναι να αποθηκεύσετε την ιστοσελίδα σας. Θα κάνετε κλικ λοιπόν File->Save As.. στο πάνω μενού του notepad++ και θα αποθηκεύσω την ιστοσελίδα στο φάκελο που θέλετε. Εγώ συνήθως δημιουργώ ένα φάκελο στην επιφάνεια εργασίας, τον οποίο τον ονομάζω website. Εσείς μπορείτε να τον ονομάσετε όπως θέλετε.

Στο πεδίο που θα πρέπει να επιλέξετε πως να ονομάσετε το αρχείο σας, πρέπει να το ονομάσετε index.html. Μπορείτε φυσικά να το ονομάσετε όπως θέλετε, αλλά πρέπει να φροντίσετε η κατάληξη πάντα να είναι .html ή htm, προκειμένου να γίνει κατανοητό από τον περιηγητή του υπολογιστή σας ότι πρόκειται για ιστοσελίδα και να σας την ανοίξει με αυτόν.

Επίσης, καλό θα ήταν να το ονομάσετε index, επειδή οι servers κατανοούν αυτή τη λέξη ως την κεντρική σελίδα, η οποία θα εμφανίζεται όταν κάποιος πληκτρολογεί το domain της ιστοσελίδας σας.

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

Τώρα, στο πάνω μέρος του περιηγητή μας εμφανίζεται ο τίτλος που είχαμε δημιουργήσει νωρίτερα με την title ετικέτα, ενώ στο body που είχαμε γράψει το περιεχόμενο της ιστοσελίδας μας, εμφανίζεται το κείμενο της παραγράφου.

Μέχρι στιγμής λοιπόν, μάθαμε τη βασική δομή που αποτελείται ένα xhtml έγγραφο και τις βασικές ετικέτες, οι οποίες είναι απαραίτητες για να λειτουργήσει ένα έγγραφο.

Leave a Reply

Your email address will not be published.

 
 
 
εκπαιδευτικά βίντεο

Εκπαιδευτικά Βίντεο

Εκπαιδευτείτε μέσα από τα εντελώς δωρεάν βίντεο μας, πάνω σε web τεχνολογίες όπως HTML, CSS, Javascript και PHP.

 
δωρεάν themes

Δωρεάν Themes

Στη Supremo Hosting προσφέρουμε εντελώς δωρεάν premium wordpress themes για τις ανάγκες της ιστοσελίδας σας!

 
κατασκευή ιστοσελίδων

Κατασκευή Ιστοσελίδων

Επωφεληθείτε από τις εξαιρετικά χαμηλές τιμές που προσφέρουμε πάνω στην κατασκευή ιστοσελίδων και eshop.

cards

H supremohosting αναστέλλει την λειτουργία της και οι υπηρεσίες hosting και τα  domain name (.gr αλλά και .com, net κλπ) μεταφέρθηκαν στην εταιρεία INTECHS Hosting Solutions. Για οποιαδήποτε διευκρίνηση επικοινωνήστε μαζί μας στο 2104629566