Φτιάχνω ιστοσελίδα
Ετικέτες HTML, σύνδεσμοι, και μια πρώτη γεύση από CSS.
45 λεπτά
Θα μάθεις να
- Να γράφεις μια πλήρη, μικρή σελίδα HTML με DOCTYPE, lang, meta charset, head και body.
- Να χρησιμοποιείς επικεφαλίδες, παραγράφους, λίστες, συνδέσμους και εικόνες με κείμενο alt.
- Να γράφεις κανόνες CSS με επιλογέα, ιδιότητα και τιμή, για στοιχεία και για κλάσεις.
- Να εντοπίζεις συνηθισμένα λάθη: αγκύλες που δεν κλείνουν, λάθος φώλιασμα, εικόνα χωρίς alt.
Τι είναι μια ιστοσελίδα
Στο προηγούμενο μάθημα είδες ότι ο διακομιστής απαντά στον φυλλομετρητή με «τον κώδικα HTML της σελίδας». Αυτός ο κώδικας είναι απλό κείμενο, που μπορείς να γράψεις κι εσύ σε έναν οποιονδήποτε επεξεργαστή κειμένου, π.χ. το Σημειωματάριο ή το Notepad++, και να τον ανοίξεις με τον φυλλομετρητή σου.
Μια ιστοσελίδα φτιάχνεται από δύο γλώσσες που δουλεύουν μαζί:
- Η HTML (HyperText Markup Language) λέει τι περιέχει η σελίδα: αυτό είναι επικεφαλίδα, αυτό παράγραφος, αυτό σύνδεσμος, αυτό εικόνα.
- Η CSS (Cascading Style Sheets) λέει πώς φαίνεται: χρώματα, γραμματοσειρές, μεγέθη, αποστάσεις.
Η HTML δεν είναι γλώσσα προγραμματισμού σαν την Python: δεν έχει μεταβλητές, αποφάσεις ή βρόχους. Είναι γλώσσα σήμανσης: «σημαδεύει» κομμάτια κειμένου για να πει τι ρόλο έχουν.
Ετικέτες και στοιχεία
Η σήμανση γίνεται με ετικέτες (tags), λέξεις μέσα σε γωνιακές αγκύλες:
<p>Αυτή είναι μια παράγραφος.</p>
Το <p> είναι η ετικέτα αρχής και το </p>, με την κάθετο, η ετικέτα τέλους. Μαζί με το κείμενο ανάμεσά τους σχηματίζουν ένα στοιχείο (element).
Μερικά στοιχεία δεν έχουν περιεχόμενο και άρα ούτε ετικέτα τέλους, όπως η εικόνα <img> και η αλλαγή γραμμής <br>.
Πολλές ετικέτες έχουν χαρακτηριστικά (attributes): επιπλέον πληροφορίες που γράφονται μέσα στην ετικέτα αρχής, με τη μορφή όνομα="τιμή".
<a href="https://www.example.com">Επισκέψου τη σελίδα</a>
<img src="robot.jpg" alt="Ένα μικρό ρομπότ με ρόδες">
Το href λέει πού οδηγεί ο σύνδεσμος. Το src λέει ποιο αρχείο εικόνας θα εμφανιστεί, και το alt δίνει μια περιγραφή της εικόνας με λόγια.
Ο σκελετός κάθε σελίδας
Κάθε σελίδα HTML έχει τον ίδιο βασικό σκελετό:
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<title>Ο τίτλος στην καρτέλα</title>
</head>
<body>
<h1>Ό,τι βλέπει ο επισκέπτης</h1>
</body>
</html>
| Κομμάτι | Τι κάνει |
|---|---|
<!DOCTYPE html> | λέει στον φυλλομετρητή ότι το έγγραφο είναι σύγχρονο HTML |
<html lang="el"> | η ρίζα της σελίδας· το lang="el" δηλώνει ότι το κείμενο είναι στα ελληνικά |
<head> | πληροφορίες για τη σελίδα, που δεν φαίνονται μέσα σε αυτήν |
<meta charset="UTF-8"> | η κωδικοποίηση χαρακτήρων· χωρίς αυτήν, τα ελληνικά μπορεί να εμφανιστούν ως ακαταλαβίστικα σύμβολα |
<title> | ο τίτλος που φαίνεται στην καρτέλα και στα αποτελέσματα αναζήτησης |
<body> | όλο το περιεχόμενο που βλέπει ο επισκέπτης |
Το lang="el" δεν είναι διακοσμητικό. Ένα πρόγραμμα ανάγνωσης οθόνης, που διαβάζει δυνατά τη σελίδα σε ένα άτομο με προβλήματα όρασης, το χρησιμοποιεί για να προφέρει τις λέξεις με ελληνική φωνή και όχι με αγγλική.
Οι πιο συνηθισμένες ετικέτες
| Ετικέτα | Για τι |
|---|---|
<h1> ως <h6> | επικεφαλίδες, από την πιο σημαντική (h1) ως τη λιγότερο σημαντική |
<p> | παράγραφος |
<strong>, <em> | έμφαση: έντονα, πλάγια |
<a href="..."> | σύνδεσμος |
<img src="..." alt="..."> | εικόνα |
<ul> και <li> | λίστα με κουκκίδες· κάθε <li> είναι ένα στοιχείο της |
<ol> και <li> | αριθμημένη λίστα |
Ένας σύνδεσμος μπορεί να έχει απόλυτη διεύθυνση, ολόκληρη με https://, για να πάει σε άλλον ιστότοπο, ή σχετική, π.χ. href="omilos.html", για να πάει σε ένα άλλο αρχείο στον ίδιο φάκελο.
CSS: η εμφάνιση
Ένας κανόνας CSS έχει έναν επιλογέα (selector), που λέει σε ποια στοιχεία εφαρμόζεται, και μέσα σε άγκιστρα μία ή περισσότερες δηλώσεις της μορφής ιδιότητα: τιμή;.
h1 {
color: navy;
font-size: 32px;
}
Αυτός ο κανόνας κάνει όλα τα <h1> της σελίδας σκούρα μπλε και μεγέθους pixel.
| Ιδιότητα | Τι αλλάζει | Παράδειγμα τιμής |
|---|---|---|
color | χρώμα κειμένου | navy, #1a5e8a |
background-color | χρώμα φόντου | lightyellow |
font-family | γραμματοσειρά | Arial, sans-serif |
font-size | μέγεθος γραμμάτων | 18px |
text-align | στοίχιση | center |
margin | κενό γύρω από το στοιχείο | 20px |
Τα χρώματα γράφονται με όνομα στα αγγλικά ή με δεκαεξαδικό κωδικό: # και έξι ψηφία, δύο για το κόκκινο, δύο για το πράσινο, δύο για το μπλε.
Για να μορφοποιήσεις μόνο κάποια στοιχεία και όχι όλα ενός είδους, τους δίνεις μια κλάση με το χαρακτηριστικό class, και στο CSS τη γράφεις με τελεία μπροστά:
<p class="simantiko">Φέρτε το τετράδιό σας!</p>
.simantiko {
color: darkred;
font-weight: bold;
}
Το CSS μπαίνει σε μια σελίδα με τρεις τρόπους: μέσα σε ένα στοιχείο <style> στο <head>, σε ξεχωριστό αρχείο που συνδέεται με <link rel="stylesheet" href="style.css">, ή απευθείας πάνω σε ένα στοιχείο με το χαρακτηριστικό style. Ο δεύτερος τρόπος είναι ο πιο οργανωμένος για ολόκληρους ιστοτόπους, γιατί το ίδιο αρχείο CSS μορφοποιεί όλες τις σελίδες.
Λυμένα παραδείγματα
Παράδειγμα 1
Φτιάξε μια πλήρη σελίδα για τον όμιλο ρομποτικής του σχολείου: τίτλος, μια παράγραφος, λίστα δραστηριοτήτων, μια εικόνα, ένας σύνδεσμος, και μια σημαντική ανακοίνωση με κόκκινα έντονα γράμματα.
Δοκίμασέ το πρώτα. Μετά δες τη λύση.
Παράδειγμα 2
Βρες τα τέσσερα λάθη στο παρακάτω κομμάτι HTML.
Δοκίμασέ το πρώτα. Μετά δες τη λύση.
Ασκήσεις
Πρώτα ερωτήσεις με επιλογές: διαλέγεις, πατάς «Έλεγξε» και μαθαίνεις αμέσως αν το βρήκες και γιατί. Στο τέλος, λίγες ασκήσεις χωρίς επιλογές — εκεί κρύβεται μόνο η απάντηση.
Τα κατάφερες;
- Να γράφεις μια πλήρη, μικρή σελίδα HTML με DOCTYPE, lang, meta charset, head και body.
- Να χρησιμοποιείς επικεφαλίδες, παραγράφους, λίστες, συνδέσμους και εικόνες με κείμενο alt.
- Να γράφεις κανόνες CSS με επιλογέα, ιδιότητα και τιμή, για στοιχεία και για κλάσεις.
- Να εντοπίζεις συνηθισμένα λάθη: αγκύλες που δεν κλείνουν, λάθος φώλιασμα, εικόνα χωρίς alt.
Λύσε τις ασκήσεις πιο πάνω και θα δεις εδώ πού στέκεσαι.