Δημιουργία Ιστοσελίδων Κεφάλαιο 1 – Εισαγωγή στην HTML
Δημιουργία Ιστοσελίδων
Κεφάλαιο 1 - Εισαγωγή στην HTML
Πως λειτουργεί το διαδίκτυο
Όταν επισκεπτόμαστε μια ιστοσελίδα, ουσιαστικά απευθυνόμαστε σε έναν web server που μπορεί να βρίσκεται οπουδήποτε στον κόσμο. Προκειμένου λοιπόν να βρούμε τον web server αυτόν, ο browser μας θα πρέπει να έχει πρόσβαση στο διαδίκτυο και κατά συνέπεια να είναι συνδεδεμένος σε έναν DNS server (να υπάρχει εν ολίγης κάποιο συμβόλαιο με έναν ISP π.χ. ΟΤΕ, Wind κλπ). Η παρακάτω εικόνα αποτυπώνει αυτό το παράδειγμα.
Παράδειγμα επικοινωνίας μεταξύ διαφορετικών υπολογιστών
Γλώσσες υπολογιστών
Η γλώσσα υπολογιστή είναι μια μέθοδος επικοινωνίας που δημιουργήσαμε προκειμένου να μπορέσουμε να χρησιμοποιήσουμε τις δυνατότητες που μας προσφέρουν γενικά οι υπολογιστές. Μερικές από αυτές είναι οι εξής:
- Γλώσσες προγραμματισμού (Programming language): Όπου είναι επίσημες γλώσσες που έχουν σχεδιαστεί για να δίνουν ένα σύνολο εντολών σε έναν υπολογιστή.
- Γενικού σκοπού (general-purpose language): Γλώσσες προγραμματισμού οι οποίες επιλύουν ένα σύνολο από προβλήματα. Παραδείγματα τέτοιων γλωσσών προγραμματισμού είναι οι: C, C++, Java κλπ.
- Γλώσσες εντολών (Command language): Γλώσες που διαχειρίζονται λειτουργίες του υπολογιστή (όπως για παράδειγμα η εκκίνηση μιας εφαρμογής).
- Γλώσσες Μηχανής (Machine language): Ένα σύνολλο απο κανόνες που εκτελούνται απευθείας απο την CPU του υπολογιστή.
- Γλώσσες Σήμανσης (Markup language): Μια γλώσσα υπολογιστή η οποία χρησιμοποιείται για συγγραφή ενός αρχείου με συντακτικό τρόπο κατά τον οποίο είναι διαφορετικός από ένα κείμενο όπως για παράδειγμα η HTML.
- Γλώσσες Style sheet: Γλώσσα υπολογιστή η οποία εκφράζει τον τρόπο με τον οποίο παρουσιάζονται τα δομημένα αρχεία όπως για παράδειγμα η CSS.
- Γλώσσες ρύθμισης (Configuration language): Χρησιμοποιούνται για να δημιουργήσουμε αρχεία configuration.
- Γλώσσες Query (Query language): Χρησιμοποιούνται για κατασκευή βάσεων δεδομένων.
- Γλώσσες προσομοίωσης (Simulation language): Χαρακτηριστικό παράδειγμα το περιβάλλον εντολών της Cisco για ρύθμιση των routers, switches κλπ.
Τι είναι η HTML
Η HTML – Hyper-Text Markup Language (Γλώσσα Σήμανσης Υπερκειμένου) ανήκει στην οικογένεια γλωσσών σήμανσης και αποτελεί την βάση για την κατασκευή ηλεκτρονικών ιστοσελίδων. Η HTML – Hyper-Text Markup Language (Γλώσσα Σήμανσης Υπερκειμένου) είναι η πιο διαδεδομένη γλώσσα σήμανσης και χρησιμοποιείται σε όλες τις ιστοσελίδες που υπάρχουν στο διαδίκτυο.
Ως υπερκείμενο (Hyper-Text) αναφερόμαστε στον τρόπο με τον οποίο οι διάφορες ιστοσελίδες (web pages) ή HTML αρχεία (HTML documents) συνδέονται μεταξύ τους. Συνεπώς ένας σύνδεσμος (link) που είναι διαθέσιμος σε μια ιστοσελίδα αναφέρεται ως υπερκείμενο (hypertext).
Όπως το όνομα υποδυκνύει η HTML είναι μια γλώσσα σήμανσης που σημαίνει ότι όταν θέλουμε να δημιουργήσουμε ενα αντικείμενο (π.χ. παράγραφος, εικόνα κλπ) θα πρέπει να χρησιμοποιήσουμε HTML ετικέτες (tags). Κάθε HTML ετικέτα αναλαμβάνει μια συγκεκριμένη λειτουργία. Στις γλώσσες σήμανσης δεν απαιτείται η χρήση compiller και γενικά επικεντρώνονται στο οπτικό κομμάτι παρά στο κομμάτι λειτουργικότητας. Παρακάτω ακολουθεί ένα παράδειγμα HTML ετικέτας:
Δομή HTML ετικέτας
<html> <!-- Αρχή HTML αρχείου -->
<head> <!-- Περιέχει meta πληροφορίες για το HTML αρχείο -->
<title> Τίτλος ιστοσελίδας </title> <!-- Ο τίτλος της ιστοσελίδας στο tab του browser -->
</head>
<body> <!-- Έναρξη περιεχομένου ιστοσελίδας -->
</body> <!-- Τέλος περιεχομένου ιστοσελίδας -->
</html> <!-- Τέλος HTML αρχείου -->Βασική δομή HTML εγγράφου
Πως να δημιουργήσω μια ιστοσελίδα
Για να δημιουργήσουμε μια ιστοσελίδα μπορούμε να χρησιμοποιήσουμε έναν απλό text editor. Παρακάτω ακολουθεί μια λίστα με τους πιο γνωστούς text editors που υπάρχουν:
- Sublime Text Editor
Κλίκ εδώ για να μεταβείτε στο: www.sublimetext.com - Atom Κλίκ εδώ για να μεταβείτε στο: www.atom.io
- Brackets Κλίκ εδώ για να μεταβείτε στο: www.brackets.io
- Vim Κλίκ εδώ για να μεταβείτε στο: www.vim.org
- Ultra Edit Κλίκ εδώ για να μεταβείτε στο: www.ultraedit.com/
- Notepad++ Κλίκ εδώ για να μεταβείτε στο: www.notepad-plus-plus.org
- GNU Nano (Διαθέσιμος μόνο σε λειτουργικά linux)
- Microsoft Windows Notepad (Διαθέσιμος μόνο σε λειτουργικά microsoft windows)
Μπορείτε να εγκαταστήσετε όποιο text editor θέλετε παρόλα αυτά για τον σκοπό αυτών των tutorials θα χρησιμοποιήσουμε το sublime text editor.
Δομή sublime text editor
Σε αυτό το σημείο ας δημιουργήσουμε ένα απλό HTML αρχείο μέσω του sublime text editor. Για τον σκοπό αυτό θα δούμε αναλυτικά την διαδικασία βήμα προς βήμα για να αποκτήσετε μια πλήρη κατανόηση.
Βήμα 1
Μόλις ανοίξετε το sublime, επιλέξτε στο top menu την επιλογή file → new file.
Βήμα 2
Στην συνέχεια όπως είστε σε αυτό το tab επιλέξτε απο το top menu την επιλογή file → save as.
Βήμα 3
Θα σας εμφανίσει ενα αναδυόμενο παράθυρο με το οποίο θα σας ζητάει να δώστε ένα όνομα γι’ αυτό το αρχείο καθώς και το μονοπάτι συστήματος (path) στο οποίο θα αποθηκευτεί το αρχείο αυτό. Ονομάστε αυτό το αρχείο ως web_page.html και σώστε το οπου επιθυμείτε. Σε αυτό το σημείο έχετε δημιουργήσει ένα HTML αρχείο. Βέβαια αυτό το HTML αρχείο είναι κενό και δεν περιέχει τίποτα. Συνεχίζουμε λοιπόν να το επεξεργαζόμαστε στο sublime.
Βήμα 4
Ξεκινάμε με το πρώτο html tag το οποίο είναι το “<html>”. Μόλις αρχίσουμε να πληκτρολογούμε το sublime θα μας εμφανίσει ενα dropdown menu με το οποίο περιέχει κάποια html tags. Εμείς επιλέγουμε το πρώτο html tag που είναι το html και πατάμε είτε κλίκ απάνω του είτε το enter.
Βήμα 5
Μόλις αυτο πραγματοποιηθεί τότε το sublime θα μας συμπληρώσει αυτόματα την βασική δομή ενός html εγγράφου.
Τελευταία ενημέρωση: 09/05/2018
