Δεν θα σας κουράσω με θέματα του τύπου "τι είναι το internet". Θα μπούμε στο ψητό κατ' ευθείαν, και θα είστε σε θέση να φτιάξετε μία απλή--ή όχι τόσο απλή-- ιστοσελίδα, ακόμη και ένα προσωπικό site.
Για να φτιάξουμε μία ιστοσελίδα στο Internet πρέπει να χρησιμοποιήσουμε την "γλώσσα" HTML. Μην απελπίζεστε είναι εύκολη, ευκολότατη θα έλεγα.
Τώρα πηγαίνετε στην απλή ιστοσελίδα
αυτή
και όταν ανοίξει στον browser σας κάντε δεξί κλικ πάνω τις. Επιλέξτε "View page source" ή "Προβολή προέλευσης" ή "Προβολή πηγαίου κώδικα" ανάλογα με τον περιηγητή σας.
Αυτό που βλέπετε είναι ο HTML κώδικας που βρίσκεται πίσω από μια απλή σελίδα στο internet και σας το δείχνει το Σημειωματάριο. Μην το κλείσετε το Σημειωματάριο προς το παρόν.
Για να τη φτιάξει τη σελίδα αυτή, ο ιδιοκτήτης της έγραψε στο Σημειωματάριο(Notepad)
ότι βλέπετε εδώ.
Το πρώτο που βλέπουμε είναι ένα
<html>
(εδώ το έχει λάθος ως HMTL όμως οι browser συγχωρούν μερικές φορές. Εμείς δεν πρέπει όμως να κάνουμε λάθη όπως θα σας πω σε επόμενα άρθρα)
Αυτό ονομάζεται ετικέτα(tag) και θα μας θυμίσει λίγο τις παρενθέσεις. Όταν ανοίγω μια, πρέπει να την κλείνω. Κοιτάξτε στο τέλος του αρχείου
</html>
Κάθε φορά που θα φτιάχνω μια ιστοσελίδα θα την περικλείω μέσα σε
<html></html>
Αν θέλουμε να γράψουμε σχόλια γίνεται με τον παρακάτω τρόπο
<!--
Αυτό είναι ένα σχόλιο και θα αγνοηθεί από τον browser σας.
-->
Αυτό δεν είναι καμία ετικέτα. Είναι σχόλιο, γράφετε όσα σχόλια θέλετε που θα βοηθήσουν κάποιον τρίτο ή εσάς όταν διαβάσετε των κώδικα που γράψατε πχ 3 μήνες πριν, να καταλάβει το νόημα του κώδικα(πχ γιατί το έγραψα αυτό). Άρα για σχόλια ανοίγω μια<!--
γράφω το σχόλιο και κλείνω με
-->
Ο browser τα σχόλια δεν τα λαμβάνει υπ' όψιν.
Το δεύτερο που βλέπουμε είναι μέσα σε ένα ζευγάρι
<title></title>
να υπάρχει ένας τίτλος
webpage1
εντός ζευγαριού. Αυτός είναι ο τίτλος της απλής ιστοσελίδας που ανοίξατε λίγο πριν. Του webpage1.html. Κοιτάξτε στο πάνω μέρος του browser σας, που έχει ανοιχτή την σελίδα Simple.html τι γράφει:
webpage1
Το ζευγάρι <title></title> με τον τίτλο της σελίδας σας μέσα του, πάντα το γράφουμε εντός του ζευγαριού
<head></head>
το οποίο πάντα ακολουθεί το <html>
Το τρίτο που βλέπουμε είναι το
<body>
Εδώ, στο σώμα της ιστοσελίδας μας, μέσα στο ζευγάρι
<body></body>
θα γράφουμε πάντα το κύριο περιεχόμενο της σελίδας μας, σε κώδικα HTML(αγνοήστε προς το παρόν τα bgcolor κλπ).
Το τέταρτο που πρέπει να προσέξουμε εμείς είναι το <p></p>
Και ακολουθεί ένα κείμενο. Αυτό είναι μια παράγραφος.
Τώρα αν θέλαμε να γράψουμε στο Σημειοματάριο μας κάπως έτσι:
This
is a simple
webpage.παρά τη περίεργη γραφή στον browser θα βλέπαμε ότι ακόμα δίχνειThis is a simple webpage.
Θα μάθουμε σε άλλα άρθρα, μεταξύ πολλών άλλων, το πως παίζουμε με την εμφάνιση, το στυλ, μιας ιστοσελίδας.
Μέχρι τώρα μάθαμε ότι:
Η ιστοσελίδα αυτή είναι ένα απλό αρχείο κειμένου.
Έτσι, όταν φτιάξω το αρχείο το σώζω στον υπολογιστή μου από το σημειωματάριο, όχι όμως σαν webpage1.txt αλλά σαν webpage1.html . Αυτό επιτυγχάνετα αν στο Notepad, αν όταν σώζω, επιλέξω "Save as type: All Files".(σώσε ως: όλα τα αρχεία).
Σώστε τώρα το αρχείο webpage1.html που άνοιξε λίγο πρίν με το Σημειωματάριο. Save as: webpage1.html στην Επιφάνεια Εργασίας(Desktop).
Τώρα έρχεται η έκπληξη. Δεν χρειάζεται Internet για να δημιουργείσετε μια ιστοσελίδα! Την φτιάχνετε, τη σώζετε στο σκληρό σας δίσκο και τη βλέπετε με τον Περιηγητή σας(Internet Explorer, Firefox, Opera κλπ)
Κάντε λοιπόν διπλό κλικ στο αρχείο που σώσατε στην Επιφάνεια Εργασίας. Θα δείτε ότι το ανοίγει πλέον ο περιηγητής σας ως--απλή--ιστοσελίδα!
0 comments:
Δημοσίευση σχολίου