1 of 14

Εργασία Γ γυμνασίου στην HTML

Δημιουργία Ιστοσελίδας

ΜΕΡΟΣ Α (δομή και περιεχόμενα ιστοσελίδας)

2 of 14

Σύνδεση με την εφαρμογή EduBlocks

  • Κλικ στον παρακάτω σύνδεσμο

https://app.edublocks.org/editor

  • Σημείωση: ο παραπάνω σύνδεσμος βρίσκεται και στον φάκελο της εργασίας στο Classroom

3 of 14

Δημιουργία νέου Project

  1. Επιλέγετε HTML από τα διαθέσιμα εικονίδια
  2. Κάτω δεξιά δίνετε ως File Name το ονοματεπώνυμο σας (πχ Siafakas Giorgos)
  3. Κλικ στο κουμπί Start Coding

1

2

3

4 of 14

Επιβεβαίωση του Project Name

Project Name

5 of 14

Βασικά εργαλεία (ετικέτες:tags)

  • Από τις κατηγορίες εντολών που υπάρχουν αριστερά θα μας απασχολήσουν οι
    • Page (tags: html, head, title, body, text)
    • Text (tags: h1,h2,h3…, p, a href…)
    • Attributes
    • Style (tags: style, classname, …)
    • Media (tags: img src)

6 of 14

Κυρία δομικά στοιχεία ιστοσελίδας

7 of 14

Δομή ιστοσελίδας

Ολόκληρη η ιστοσελίδα είναι σε κώδικα HTML, συνεπώς η ετικέτα (tag )HTML περικλείει όλες τις εντολές της ιστοσελίδας

H ετικέτα (tag) head ορίζει το πάνω μέρος της ιστοσελίδας εκεί που φαίνεται ο τίτλος της ιστοσελίδας

H ετικέτα (tag) title είναι ο τίτλος της ιστοσελίδας που θα φαίνεται στις καρτέλες του browser (Chrome, Mozilla Firefox,…)

H ετικέτα (tag) body ορίζει το κυρίως σώμα της ιστοσελίδας εκεί που θα φαίνεται το περιεχόμενο της. Το περιεχόμενο μπορεί να είναι κείμενο, εικόνες, links κ.α.

8 of 14

Τίτλος Ιστοσελίδας

9 of 14

Κείμενα ιστοσελίδας

10 of 14

Είδη κειμένων

Ετικέτα(tag) h η οποία ορίζει τις επικεφαλίδες της σελίδας, των παραγράφων κτλ. Χωρίζεται σε 6 επίπεδα από το 1 μέχρι το 6, δηλαδή h1 έως h6. Tο h1 το μεγαλύτερο το h6 το μικρότερο.

Ετικέτα(tag) p η οποία ορίζει τι παραγράφους.

11 of 14

Κείμενα ιστοσελίδας Great Football Players

12 of 14

Εικόνες ιστοσελίδας

13 of 14

Εικόνες ιστοσελίδας

Ετικέτα(tag) img μέσω της οποίας γίνεται φόρτωση εικόνας στην ιστοσελίδα.

Στο πεδίο url του συγκεκριμένου tag θα πρέπει να γράψουμε το πλήρες όνομα της εικόνας (pele.jpg) αν η εικόνα είναι αποθηκευμένη στο ίδιο φάκελο με την ιστοσελίδα ή την πλήρη διαδρομή που είναι αποθηκευμένη η εικόνα (C:\Users\gsiaf\Desktop\site\pele.jpg)

​

Αλλαγή μεγέθους εικόνας. Στο κενό πεδίο του συγκεκριμένου tag μπορείς μέσα από τα Attributes(αριστερά) να εισάγεις το style. Στη συνέχεια από το Style (αριστερά) και Display να εισάγεις το Height 20%, όπως φαίνεται στην επόμενη διαφάνεια.

14 of 14

Εικόνες ιστοσελίδας Great Football Players