ΑΣΚΗΣΗ 1 - ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙΔΑΣ

1. Μεταβείτε στον ιστότοπο του σχολείου http://lyk-parou.kyk.sch.gr/ , πατήστε δεξί κλικ και επιλέξτε Προβολή πηγαίου
κώδικα. Αυτό που βλέπετε είναι κώδικας HTML!

2. Δημιουργήστε στα έγγραφά μου έναν φάκελο με όνομα ΑΣΚΗΣΗ HTML.

3. Ανοίξτε έναν «απλό» κειμενογράφο, π.χ. Σημειωματάριο, Wordpad, Notepad ++,
μεταβαίνοντας στα Προγράμματα→Βοηθήματα
4. Αποθηκεύστε το -κενό προς το παρόν- αρχείο στον φάκελο ΑΣΚΗΣΗ HTML με όνομα test επιλέξτε τύπο αρχείου
Hyper Text Markup Language ή All types, όπως φαίνεται στην παρακάτω εικόνα.

Η επέκταση του αρχείου .html συμπληρώνεται αυτόματα και όταν θα το ανοίγετε θα το διαβάζει ο φυλλομετρητής (π.χ. chrome,
mozila) που έχει οριστεί ως προεπιλεγμένος στον υπολογιστή σας και θα εμφανίζει την ιστοσελίδα σας!
5. Μέσα στο αρχείο πληκτρολογήστε τον παρακάτω κώδικα:

6. Αποθηκεύστε το αρχείο και μεταβείτε στον φάκελο ΑΣΚΗΣΗ HTML και ανοίξτε με διπλό αριστερό κλικ το αρχείο που μόλις
δημιουργήσατε.

Η ιστοσελίδα σας μέχρι στιγμής είναι όπως φαίνεται παρακάτω:

7. Στη συνέχεια κάντε μία μία τις αλλαγές στο αρχείο test.html που φαίνονται στον παρακάτω πίνακα.
Κάθε φορά θα προσθέτετε την αλλαγή, θα αποθηκεύετε το αρχείο και θα ανανεώνετε την ιστοσελίδα σας στον
φυλλομετρητή, πατώντας το πλήκτρο F5, έτσι ώστε να βλέπετε το αποτέλεσμα της αλλαγής.
Κάθε προσθήκη φαίνεται με κόκκινα γράμματα. Κάνετε τις προσθήκες στο κατάλληλο σημείο κάθε φορά!

α/α Προσθήκη εντολών Περιγραφή εντολής

1 Εφαρμογές <b> Πληροφορικής </b> Έντονη γραφή

2 <center>Εφαρμογές <b> Πληροφορικής </b> </center> Κεντρική στοίχιση

 <center>Εφαρμογές <b> Πληροφορικής </b> </center>
3
Σχολικό έτος: 2021-2022
<center>Εφαρμογές <b> Πληροφορικής </b> </center>
4 Χρώμα γραμματοσειράς
Σχολικό έτος: <font color="red"> 2021-2022 </font>
<center> <font size="6">Εφαρμογές <b> Πληροφορικής</b></font> </center>
5 Μέγεθος γραμματοσειράς
Σχολικό έτος: <font color="red"> 2021-2022 </font>
<center><font size=”6”> Εφαρμογές <b> Πληροφορικής </b> </font></center>
6 Σχολικό έτος: <font color="red"> 2021-2022 </font>
ΓΕΛ Πάρου
<center><font size=”6”> Εφαρμογές <b> Πληροφορικής </b> </font></center>
Σχολικό έτος: <font color="red"> 2021-2022 </font>
7 Ορισμός παραγράφου
<p>
ΓΕΛ Πάρου
<center><font size=”6”> Εφαρμογές <b> Πληροφορικής </b> </font></center>
Σχολικό έτος: <font color="red"> 2021-2022 </font>
8 Εισαγωγή συνδέσμου
<p>
<a href=" http://lyk-parou.kyk.sch.gr/ "> ΓΕΛ Πάρου </a>
<center><font size=”6”> Εφαρμογές <b> Πληροφορικής </b> </font></center>
Σχολικό έτος: <font color="red"> 2021-2022 </font> Άνοιγμα συνδέσμου σε
9
<p> νέα καρτέλα
<a href=" http://lyk-parou.kyk.sch.gr/ " target="_blank" > ΓΕΛ Πάρου </a>

8. Χρησιμοποιώντας μία μηχανή αναζήτησης βρείτε μια εικόνα του σχολείου στο διαδίκτυο και αποθηκεύστε την στο φάκελο σας με
το όνομα school.jpg στον φάκελο ΑΣΚΗΣΗ HTML
 Προσοχή: αποθηκεύστε την στον φάκελο όπου βρίσκεται το αρχείο test.html
<center><font size=”6”> Εφαρμογές <b> Πληροφορικής </b> </font></center>
Σχολικό έτος: <font color="red"> 2021-2022 </font>
<p>
10 <a href=" http://lyk-parou.kyk.sch.gr/ " target="_blank" > ΓΕΛ Πάρου </a> Προσθήκη εικόνας
<p>
<img src="school.jpg">
 <center><font size=”6”> Εφαρμογές <b> Πληροφορικής </b> </font></center>
Σχολικό έτος: <font color="red"> 2021-2022 </font>
<p> Κεντρική στοίχιση
11
<a href=" http:// lyk-parou.kyk.sch.gr/ " target="_blank" > ΓΕΛ Πάρου </a> εικόνας
<p>
<center><img src="school.jpg"></center>

Κουραστήκατε;
Τώρα οι πλατφόρμες, όπως το Blogger, που διαθέτουν γραφικό περιβάλλον
και μας επιτρέπουν να δημιουργούμε ιστοσελίδες χωρίς να γράψουμε καμία γραμμή κώδικα
θα πρέπει να σας φαίνονται θεόσταλτες!