Από το επόμενο κεφάλαιο θα είστε έτοιμοι να γράψετε μια απλή σελίδα HTML. Παρακάτω θα μάθετε πώς να αποθηκεύετε τον HTML κώδικα, που παρουσιάζεται στα παραδείγματα, σε αρχείο στον σκληρό σας δίσκο και έπειτα να το ανοίγετε με τον web browser για να δείτε το αποτέλεσμα στην οθόνη σας.

Μια πολύ απλή σελίδα είναι η παρακάτω. Αν είναι η πρώτη σας φορά που ασχολείστε με HTML κώδικα μην προσπαθείτε να ερμηνεύσετε την κάθε γραμμή του.
<html>
<head>
<title>My first web site</title>
</head>

<body>
This is <b>Great</b>!!! <b>YEAH!!!</b><br />
I can build my own <i>web site</i>. <b>YEAH!!!</b><br />
<i>Hey Ma look!!!</i> I can do it by <b>myself</b>
</body>
</html>
Τώρα αν θέλετε να αποθηκεύσετε τον παραπάνω κώδικα στον σκληρό σας δίσκο ακολουθήστε τα παρακάτω βήματα:

ΒΗΜΑ 1: επιλέξτε με το ποντίκι σας όλο τον παραπάνω κώδικα που βρίσκετε μέσα στο παραπάνω πλαίσιο και πατήστε δεξί κλικ επάνω σε αυτό. Στο μενού που θα εμφανιστεί επιλέξτε Αντιγραφή (Copy, στα αγγλικά).

- Εικόνα 1

ΒΗΜΑ 2: ανοίξτε το Σημειωματάριο (Notepad) και από το μενού Επεξεργασία ( Edit) επιλέξτε Επικόλληση (Paste).

Αν έγιναν σωστά τα παραπάνω βήματα, τώρα πρέπει να βλέπετε στην οθόνη του Σημειωματάριου τον HTML κώδικα που επιλέξατε και αντιγράψατε.

- Εικόνα 2

ΒΗΜΑ 3: επιλέξτε από το μενού Αρχείο (File) την επιλογή Αποθήκευση ως (Save as). Θα εμφανιστεί το παράθυρο όπου θα πρέπει να δώσετε όνομα στο αρχείο (ας πούμε ότι θέλουμε να το αποθηκεύσουμε με όνομα αρχείου 'myfirstpage.html' στον φάκελο 'Τα έγγραφά μου').

- Εικόνα 3

Προσοχή: Στο πεδίο Αποθήκευση ως, να επιλέγετε από την λίστα το 'Ολα τα αρχεία' (All files) γιατί αλλιώς το αρχείο θα αποθηκευτεί σαν αρχείο κειμένου .txt και όχι σαν HTML κώδικας .html


- Εικόνα 4

ΒΗΜΑ 4: Αφού αποθηκεύσαμε το αρχείο μας, μπορούμε να το δούμε στον Web browser. Ανοίγουμε τον browser που χρησιμοποιούμε (Internet Explorer ή Mozilla Firefox ή Netscape κτλ.) και επιλέγουμε από το μενού Αρχείο (File) την επιλογή 'Ανοιγμα' (Open ή Open file) και έπειτα επιλέγουμε από τον φάκελο 'Τα έγγραφά μου' το αρχείο myfirstpage.html


Και ιδού το αποτέλεσμα του HTML κώδικα στον browser 'Mozilla Firefox' :



Εδώ πρέπει να τονίσω ότι τα περισσότερα παραδείγματα που θα βρείτε στην Σειρά Μαθημάτων HTML δεν αποτελούν κώδικα μιας ολοκληρωμένης ιστοσελίδας, με αποτέλεσμα αν εφαρμόσετε τα παραπάνω βήματα σε ένα τέτοιο παράδειγμα να υπάρξουν προβλήματα στην εμφάνιση της σελίδας στον browser σας. Ο ελάχιστος κώδικας που έχει μια ιστοσελίδα είναι ο παρακάτω:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Τίτλος της σελίδας</title>
</head>

<body>


</body>
</html>

Οι ετικέτες <body> και </body> ορίζουν το κυρίως μέρος μιας ιστοσελίδας στο οποίο γράφουμε το κείμενο, τις εικόνες και όλα τα HTML στοιχεία που θέλουμε να εμφανιστούν στην σελίδα

Για παράδειγμα στην ενότητα Διαμόρφωση Κειμένου θα βρείτε το παρακάτω παράδειγμα το οποίο δεν αποτελεί κώδικα μιας ολοκληρωμένης σελίδας, αλλά αποτελεί των κώδικα του κυρίως μέρους της ιστοσελίδας που όπως είπαμε ορίζεται από τις ετικέτες <body> και </body> :
<b>Αυτό το κείμενο είναι bold</b>
<strong>Αυτό το κείμενο είναι strong</strong>
<big>Αυτό το κείμενο είναι big</big>

Αν θέλετε να αποθηκεύσετε τον κώδικα αυτόν σαν HTML αρχείο στον σκληρό σας δίσκο θα πρέπει να προσθέσετε τον ελάχιστο κώδικα που πρέπει να έχει μια HTML σελίδα, δηλαδή να μετατρέψετε τον παραπάνω κώδικα έτσι:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Τίτλος της σελίδας</title>
</head>

<body>

<b>Αυτό το κείμενο είναι bold</b>
<strong>Αυτό το κείμενο είναι strong</strong>
<big>Αυτό το κείμενο είναι big</big>

</body>
</html>
Pin It