Φύλλο εργασίας για HTML & CSS

Code 4 Web
Προγραμματίζουμε
για το Διαδίκτυο
Το Λύκειο μας συμμετέχει και φέτος στην Ευρωπαϊκή Εβδομάδα Προγραμματισμού, με δράσεις
αφιερωμένες στον Προγραμματισμό για το Διαδίκτυο. Στόχος μας είναι να γνωρίσουμε
διαδεδομένες γλώσσες προγραμματισμού όπως html, css και javascript για να δημιουργήσουμε τα
δικά μας έργα.
Τι είναι όμως η HTML;
Η HTML είναι ένας τρόπος για να περιγραφεί ένα κείμενο και αποτελεί τη βασική
γλώσσα με την οποία περιγράφονται οι ιστοσελίδες στον Παγκόσμιο Ιστό. Τα αρχεία της HTML
περιέχουν: α) το κείμενο και β) τις ετικέτες (tags), οι οποίες περιγράφουν τη δομή και τη μορφή
των ιστοσελίδων, τους συνδέσμους προς άλλες σελίδες ή προς αρχεία πολυμέσων. Οι
περισσότερες ετικέτες εμφανίζονται κατά ζεύγη, περικλείουν ένα τμήμα κειμένου και το
επηρεάζουν.
Πώς πρέπει να ξεκινήσω;
Ανοίξτε ένα απλό πρόγραμμα επεξεργασίας κειμένου,
όπως είναι το Σημειωματάριο (Notepad) των Windows.
1. Γράψτε τον κώδικα που βλέπετε δίπλα.
2. Αποθηκεύστε το με όνομα test.html.
3. Ανοίξτε το αρχείο test.html που μόλις
δημιουργήσατε με έναν φυλλομετρητή (αρκεί να
κάνετε διπλό κλικ πάνω του).
Παρατηρήστε: Εξωτερικά υπάρχει μία ετικέτα
<html></html>. Μέσα σε αυτήν υπάρχουν οι
ετικέτες <head></head> και <body></body> ενώ μέσα στην
<head></head> εμπεριέχεται η <title></title>.
Συγχαρητήρια! Μόλις δημιουργήσατε την πρώτη σας σελίδα με HTML 

Προσοχή! Αν τα ελληνικά γράμματα δεν σας εμφανίζονται σωστά στον φυλλομετρητή τότε πρέπει
μέσα στην ετικέτα <head>…</head> να προσθέσετε την ετικέτα <meta charset="UTF-8"> ή την
<meta charset="ISO-8859-7">.
Ναι, αλλά τι ήταν όλα αυτά που έγραψα;
Όπως είπαμε, η HTML χρησιμοποιεί διάφορες ετικέτες για την περιγραφή μιας ιστοσελίδας. Οι
ετικέτες αυτές ορίζουν την μορφή, το περιεχόμενο ή παρέχουν απλές πληροφορίες για την
ιστοσελίδα, όπως τον τίτλο και τον συγγραφέα της. Στον κώδικα που γράψατε χρησιμοποιήσατε 4
ετικέτες που περιγράφονται στον παρακάτω πίνακα.
Ετικέτα Περιγραφή
<HTML>...</HTML> Ορίζει την αρχή και το τέλος μιας ιστοσελίδας.
<HEAD>...</HEAD> Περιλαμβάνει δευτερεύουσες πληροφορίες που αφορούν στο περιεχόμενο
της ιστοσελίδας. Οι πληροφορίες αυτές δεν εμφανίζονται στον
φυλλομετρητή.
<BODY>...</BODY> Ορίζει το περιεχόμενο της ιστοσελίδας. Οι πληροφορίες αυτές εμφανίζονται
στον φυλλομετρητή.
<TITLE>...</TITLE> Ορίζει τον τίτλο της. Η ετικέτα αυτή τοποθετείται μέσα στην <head> και το
περιεχόμενό της εμφανίζεται στο πάνω μέρος του φυλλομετρητή.
Δραστηριότητα: Τροποποιήστε τη σελίδα που φτιάξατε έτσι ώστε στον τίτλο να γράφει:
«η πρώτη μου σελίδα» και στο περιεχόμενο να γράφει «Ο Προγραμματισμός είναι
υπέροχος!». Ανανεώστε τον φυλλομετρητή για να δείτε τις αλλαγές.
Υπάρχουν και άλλες ετικέτες;
Ναι! Πάρα πολλές. Όλες μαζί με παραδείγματα υπάρχουν εδώ: http://www.w3schools.com/tags/.
Εμείς, όμως, για αρχή, θα χρησιμοποιήσουμε τις παρακάτω:
Παράδειγμα Περιγραφή
<h1>, <h2> … <h6> Επικεφαλίδες βαθμού από 1 μέχρι 6
<p>…</p> Ορίζει μια παράγραφο
<br> Αλλαγή γραμμής
<hr> Οριζόντια γραμμή
<strong>…</strong> Έντονα γραμμένο κείμενο
<em>…</em> Κείμενο με έμφαση
<a href= “…” > … </a> Εισαγωγή Υπέρ-σύνδεσμου
<img src = “…”> Εισαγωγή εικόνας

Δραστηριότητα: Επισκεφτείτε την σελίδα http://pk.mysch.gr/me.html. Κοιτάξτε τον
πηγαίο κώδικά της. Αποθηκεύστε τον στην επιφάνεια εργασίας σας και κάντε τις
απαραίτητες αλλαγές ώστε να περιγράφει εσάς. Προσθέστε και επιπλέον πληροφορίες που
επιθυμείτε.
Mozilla Thimble
Από δω και πέρα θα χρησιμοποιήσουμε, αντί για το σημειωματάριο και σκόρπια
αρχεία στην επιφάνεια εργασίας, το εργαλείο Thimble της Mozilla (http://thimble.mozilla.org.)
Ρωτήστε τον καθηγητή σας ποιο email θα χρησιμοποιήσετε για την εγγραφή σας.
Δραστηριότητα: Επισκεφτείτε την σελίδα https://thimble.mozilla.org/. Βρείτε το έργο
«Keep Calm and Carry On» και επιλέξτε “Remix this project”.
Στο αρχείο index.html μπορείτε:
1. Να αλλάξετε τις λέξεις στην αφίσα: Στη γραμμή 18 μέσα στην ετικέτα <h1> τοποθετήστε το νέο
κείμενο. Θυμηθείτε η ετικέτα <br> χρησιμοποιείται για αλλαγή γραμμής.
2. Να αλλάξετε την εικόνα: Στη γραμμή 14 βρείτε την ετικέτα <img src="crown.svg"> με την
οποία εισάγεται η κορώνα στην αφίσα. Αλλάξτε το crown.svg σε thimble.svg.
Μέχρι τώρα κάναμε αλλαγές στο περιεχόμενο. Τώρα ήρθε η ώρα να αλλάξουμε την μορφή. Για το
σκοπό αυτό χρησιμοποιούνται τα αρχεία CSS.
Τι είναι όμως τα αρχεία CSS;
Με τα αρχεία CSS καθορίζονται κανόνες για τη μορφή και την εμφάνιση των HTML
εγγράφων. Οι κανόνες αυτοί είναι ανεξάρτητοι από το ίδιο το έγγραφο HTML.
Η σύνδεση ενός αρχείου ΗΤML με ένα CSS γίνεται προθέτοντας την κατάλληλη ετικέτα <link> μέσα
στο <head> της HTML, π.χ. : <link rel=″stylesheet″ href=″to-styl-mou.css″>.
Οι κανόνες μορφοποίησης CSS συντάσσονται σε μορφή απλού κειμένου και αποτελούνται από
έναν «επιλογέα» και κανόνες (μέσα σε αγκύλες) που διαχωρίζονται από το ελληνικό ερωτηματικό
«;» και αποτελούνται από ζεύγη ονομάτων και τιμών χωρισμένα με άνω κάτω τελεία «:», όπως:
P { color: green; border-bottom: 1px solid black; padding: 10px; }
Το παραπάνω παράδειγμα καθορίζει ότι όλες οι παράγραφοι (P) θα έχουν χρώμα κειμένου
πράσινο, κάτω περίγραμμα πάχους 1 pixel και περιθώριο 10 px από κάθε πλευρά της
παραγράφου.

Δηλαδή, πώς θα αλλάξω τη μορφή;
Από τα διαθέσιμα αρχεία δεξιά ανοίξτε το style.css.
1. Στη γραμμή 2 αλλάξτε το σκούρο κόκκινο χρώμα (darkred) με κάποιο άλλο, ας πούμε
πράσινο (green). Μπορείτε να χρησιμοποιήσετε τον επιλογέα χρώματος, που ανοίγει
κάνοντας δεξί κλικ πάνω στο χρώμα και επιλέγοντας Γρήγορη Επεξεργασία.
2. Στη γραμμή 3 αλλάξτε το χρώμα των γραμμάτων από άσπρο σε κάποιο άλλο της επιλογής
σας.
3. Στη γραμμή 13 αλλάξτε το χρώμα και το πάχος του περιγράμματος.
4. Στη γραμμή 17 αλλάξτε το μέγεθος των γραμμάτων.
Στην συνέχεια πειραματιστείτε κάνοντας δικές σας αλλαγές.
Όταν τελειώσετε δημοσιεύστε το έργο σας και στείλτε τον σύνδεσμο εδώ: https://goo.gl/6leHxF
Τι άλλο να κάνω τώρα;
Δραστηριότητα: Στο https://thimble.mozilla.org/ βρείτε το έργο «Three things I <3» και
επιλέξτε “Remix this project”.
Πειραματιστείτε κάνοντας δικές σας αλλαγές σε όλες τις σελίδες του έργου, έτσι ώστε να
περιγράφεται τα δικά σας 3 αγαπημένα πράγματα.
ΠΡΟΣΟΧΗ: Δε πρέπει να δημοσιεύετε προσωπικά σας στοιχεία στο Διαδίκτυο.
Έπειτα κάντε αλλαγές και στο αρχείο style.css για να αλλάξετε τη μορφή των σελίδων.
Όταν τελειώσετε δημοσιεύστε το έργο σας και στείλτε τον σύνδεσμο εδώ: https://goo.gl/6leHxF
Η συμμετοχή μας στο Codeweek.EU υποστηρίζεται από το ΕΕΥΕΜ του ΕΑΠ και την Google.
Ζωντανέψτε τις ιδέες σας
με προγραμματισμό σε HTML και CSS

Φύλλο εργασίας για HTML & CSS

Φύλλο εργασίας για HTML & CSS

Φύλλο εργασίας για HTML & CSS

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Destacado

Destacado(7)

Similar a Φύλλο εργασίας για HTML & CSS

Similar a Φύλλο εργασίας για HTML & CSS(20)

Último

Último(20)

Φύλλο εργασίας για HTML & CSS