Εργαστήριο 1: Εισαγωγή σε εργαλεία HTML & Web authoring

Άσκηση 1 (χρήση απλού text editor)

Δημιουργήστε ένα HTML αρχείο με ένα απλό TEXT editor (π.χ. notepad) και αποθηκεύστε το στον δίσκο του μηχανήματος με όνομα test1.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Hello Web</h1>

</body>

</html>

Ανεβάστε το παραπάνω αρχείο στον προσωπικό σας ιστοχώρο που σας διατίθεται στον κεντρικό web server του τμήματος. Ο κεντρικός web server του τμήματος είναι ο υπολογιστής users.iee.ihu.gr. Εκεί, όλοι οι φοιτητές του τμήματος έχουν λογαριασμό. Ο λογαριασμός αυτός φυσιολογικά ταυτίζεται (το όνομα χρήστη και κωδικός) με το όνομα χρήστη και κωδικό που χρησιμοποιείτε στο ιδρυματικό email σας ή στο apps.

Χρησιμοποιείστε έναν ftp client για να συνδεθείτε στον aetos μέσω sftp (SSH ftp). ΠΡΟΣΟΧΗ θα πρέπει από το apps.iee.ihu.gr να ενεργοποιήσετε την υπηρεσία SSH πριν προσπαθήσετε να συνδεθείτε. Προτείνετε η χρήση του filezilla που είναι εγκατεστημένο στα εργαστήρια. Μπορείτε όμως να επιλέξετε (στον προσωπικό σας υπολογιστή) οποιονδήποτε άλλον ftp client. Στο filezilla πρέπει να δώσετε τα στοιχεία: host: users.iee.ihu.gr, username: [το δικό σας], password: [το δικό σας], port: 22 και να πατήσετε "Quick Connect".

Στα 2 TreeViews που υπάρχουν κεντρικά, βλέπετε αριστερά τα τοπικά αρχεία, δεξιά τα απομακρυσμένα αρχεία στον aetos. Στο δεξί TreeView βλέπετε το απομακρυσμένο σύστημα αρχείων, και αρχικά το σύστημα σας έχει τοποθετήσει αυτόματα σε έναν φάκελο με διαδρομή του τύπου "/home/student/x1415/username". Αυτός ο φάκελος ονομάζεται home directory. Μέσα σε αυτόν τον φάκελο μπορείτε να γράψετε-σβήσετε ό,τι αρχείο θέλετε. Πάνω από αυτόν δεν μπορείτε να γράψετε κανένα αρχείο. Μέσα σε αυτόν τον φάκελο, πρέπει να δημιουργήσετε έναν υποφάκελο με όνομα public_html. Κάντε δεξί κλικ επάνω στον φάκελο με όνομα το username σας και επιλέξτε "Create Directory". Δώστε του το όνομα public_html όπως στην παρακάτω εικόνα. Οποιοδήποτε αρχείο αποθηκεύσετε μέσα στον φάκελο public_html θα είναι προσβάσιμο από στο web.

Με δεξί κλικ πάνω (στον φάκελο public_html που μόλις δημιουργήσατε) και επιλέγοντας το File Attributes δώστε τα δικαιώματα όπως φαίνεται στη εικόνα (δεξιά) και επιλέξτε Recurse into subdirectories ώστε τα δικαιώματα αυτά να ισχύουν και στους υποφακέλους του public_html.

Μέσα στον φάκελο public_html δημιουργείστε με τον ίδιο τρόπο έναν υποφάκελο με το όνομα gti_lab1 με τον ίδιο τρόπο. Επιλέξτε αυτόν τον φάκελο στο δεξί Treeview (απομακρυσμένα αρχεία) και στο αριστερό Treeview (τοπικά αρχεία) εντοπίστε το αρχείο test1.html που δημιουργήσατε. Επιλέξτε το και κάντε "Upload". Θα μεταφερθεί στον users

Η διεύθυνση του θα πρέπει να είναι http://users.iee.ihu.gr/~χρήστης/gti_lab1/test1.html , όπου "χρήστης" το δικό σας username.

Άσκηση 2 (χρήση HTML editor)

Χρησιμοποιήστε έναν HTML authoring εργαλείο (δημιουργίας HTML σελίδων) και δημιουργήστε και άλλες απλές σελίδες.

Μεταφέρετε τις σελίδες σε υποφακέλους του web server users.iee.ihu.gr. Προσοχή η μεταφορά των σελίδων σας να γίνεται πάντα στον φάκελο [username]/public_html (και κατά προτίμηση μέσα στο [username]/public_html/gti_lab1.

Μέσω ενός web browser (π.χ. Chrome) δείτε τα αρχεία που μόλις "ανεβάσατε" στο web server.

Άσκηση 3 (δημιουργία links μεταξύ αρχείων)

Χρησιμοποιήστε τη σήμανση (tag) <a> για να δημιουργήσετε συνδέσμους μεταξύ των HTML αρχείων που έχετε δημιουργήσει.

Παραδείγματα χρήσης

<a href="dest.html">κείμενο συνδέσμου</a>

<a href="http://www.iee.ihu.gr">Τμήμα Μηχανικών Πληροφορικής και Ηλεκτρονικών Συστημάτων» </a>

<a href="./answers/dest.html">κείμενο συνδέσμου</a>

α) Δημιουργήστε ένα σύνδεσμο μεταξύ των αρχείων όταν αυτά βρίσκονται στον ίδιο φάκελο

β) Μετακινείστε το δεύτερο αρχείο (προορισμός) σε έναν άλλο φάκελο και ελέγξτε αν λειτουργεί ο σύνδεσμος.

γ) Αν δεν λειτουργεί διορθώστε τον ώστε να λειτουργεί πλέον σωστά

Άσκηση 4 (σχετικά και απόλυτα links)

Υποθέστε ότι βρίσκεστε στην σελίδα με URL.

http://www.example.org/Lessons/Labs/Lab1.html

Βρείτε σε ποια διεύθυνση (URL) θα μετακινηθείτε με τους παρακάτω συνδέσμους:

<a href="Lab2.html">Σύνδεσμος 1</a>

<a href="../Labs.html">Σύνδεσμος 2</a>

<a href="Lab1/Example1.html">Σύνδεσμος 3</a>

<a href="Lessons.html">Σύνδεσμος 4</a>

<a href="../Lessons.html">Σύνδεσμος 5</a>

<a href="www.ihu.gr">Σύνδεσμος 6</a>

<a href="https://www.iee.ihu.gr">Σύνδεσμος 7</a>

<a href="/Lessons.html">Σύνδεσμος 8</a>

<a href="/">Σύνδεσμος 9</a>

Εναλλακτικά :

Δημιουργήστε ένα φάκελο με όνομα ex4site και δημιουργήστε μέσα σε αυτόν το φάκελο ένα φάκελο Lessons.
Μέσα στον φάκελο Lessons δημιουργήστε ένα φάκελο Labs.
Δημιουργήστε το αρχείο Lab1.html μέσα στον φάκελο Labs και προσθέστε τα παραπάνω links (στο body).
Δημιουργήστε όλα τα αρχεία που χρειάζονται ώστε τα παραπάνω links να είναι έγκυρα.

Άσκηση 5 (δημιουργία anchors, δημιουργία links με χρήση anchors)

Χρησιμοποιήστε τη σήμανση (tag) <a> για να δημιουργήσετε anchors σε κάποια HTML αρχεία που έχετε δημιουργήσει.

Τρόπος ορισμού ενός anchor

Μέσα στο HTML έγγραφο βάζουμε την παρακάτω γραμμή στο σημείο που θέλουμε να μετακινούμαστε

Παραδείγματα χρήσης anchor για links

Link στο τρέχον αρχείο
- <a href="#anchorname">σύνδεσμος</a>
Link σε άλλο αρχείο σε συγκεκριμένο anchor
σύνδεσμος

Τροποποιήστε τον σύνδεσμο της άσκησης 3 μεταξύ των HTML αρχείων, ώστε να μεταφέρεστε στο τέλος της σελίδας προορισμού.

Άσκηση 6 (ενσωμάτωση γραφικών)

α) Ενσωματώστε μία εικόνα στο αρχείο προορισμός της άσκησης 3 με τη χρήση της σήμανσης <img>

Παράδειγμα:

β) Με χρήση της ίδιας σήμανσης ενσωματώστε (χωρίς να σώσετε τοπικά) την εικόνα-λογότυπο του ΔΙΠΑΕ στο άλλο αρχείο της άσκησης 3

Page updated

Google Sites

Report abuse