Το κεφάλαιο παρουσιάζει την HTML, τη γλώσσα με την οποία γράφονται οι ιστοσελίδες: τις βασικές ετικέτες και τη δομή ενός εγγράφου, τις νέες σημασιολογικές ετικέτες της HTML5, την ενσωμάτωση περιεχομένου από άλλες σελίδες και τη μορφοποίηση με CSS.
Α΄ ΛΥΚΕΙΟΥΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣΚΕΦ. 1115 ΛΕΠΤΑ
Το μάθημα είναι στο σχολικό βιβλίο. Δεν το αντιγράφουμε εδώ. Άνοιξε το επίσημο
κεφάλαιο και γύρνα για την εξάσκηση.
Η σύνοψη, οι όροι και οι ασκήσεις γράφτηκαν με τη βοήθεια τεχνητής νοημοσύνης από το
σχολικό βιβλίο και μπορεί να έχουν λάθη. Πηγή είναι πάντα το βιβλίο: ό,τι σου φαίνεται περίεργο,
έλεγξέ το εκεί. Βρήκες λάθος; Γράψε μας στο aporia@signmak.com.
Σχεδιάγραμμα
Δική μας σύνοψη της ενότητας, για επανάληψη, γραμμένη με τη βοήθεια τεχνητής νοημοσύνης. Μπορεί να έχει λάθη: πηγή είναι πάντα το βιβλίο.
Τι έγινε
Οι ιστοσελίδες είναι αρχεία κειμένου με κώδικα HTML, με κατάληξη .html ή .htm, που γράφονται σε απλό συντάκτη κειμένου· τη γλώσσα την επινόησε ο Tim Berners-Lee.
Βασική δομή: <HTML> για όλη τη σελίδα, <HEAD> για πληροφορίες που δεν εμφανίζονται, <TITLE> για τον τίτλο και <BODY> για το περιεχόμενο.
Άλλες ετικέτες: <P> παράγραφος, <BR> αλλαγή γραμμής, <H1> ως <H6> έξι επίπεδα επικεφαλίδων, <A HREF> σύνδεσμος, <IMG SRC> εικόνα GIF ή JPEG.
Η HTML5 δίνει βάρος στη σημασιολογία: το όνομα κάθε ετικέτας δείχνει τη χρήση της. Στην HTML4 τα ίδια τμήματα γράφονταν με γενικές ετικέτες div.
Οι ετικέτες video και audio δέχονται ιδιότητες όπως src, width, height και controls· ο ήχος μπορεί να δοθεί σε πολλές μορφές με ετικέτες source και μήνυμα για φυλλομετρητές που δεν τον υποστηρίζουν.
Με HTML5, JavaScript και CSS φτιάχνονται εφαρμογές διαδικτύου που προσαρμόζονται σε κάθε οθόνη (responsive web design).
Ενσωμάτωση: αντιγράφουμε τον κώδικα που δίνει μια σελίδα, συνήθως με ετικέτα iframe, για να εμφανίσουμε το περιεχόμενό της, π.χ. ένα βίντεο, σε δική μας σελίδα.
Κανόνας CSS: επιλογέας και ζεύγη ιδιότητα: τιμή μέσα σε αγκύλες, χωρισμένα με ερωτηματικό· η class ομαδοποιεί στοιχεία, το id δείχνει ένα μοναδικό στοιχείο.
Οι περισσότερες έρχονται σε ζευγάρια: μια ετικέτα ανοίγει και μια με κάθετο κλείνει, και ανάμεσα μπαίνει το κείμενο που επηρεάζουν, π.χ. <P>...</P>. Κάποιες είναι μονές, όπως οι <BR>, <HR> και <IMG>. Δεν έχει σημασία αν γράφονται με κεφαλαία ή πεζά, αλλά πρέπει να κλείνουμε πρώτα την ετικέτα που ανοίξαμε τελευταία.
Τι προσθέτει η HTML5;
Ετικέτες που δηλώνουν τον ρόλο κάθε τμήματος (header, nav, section, article, footer), ετικέτες audio και video για ήχο και εικόνα χωρίς πρόσθετα, καμβά για σχεδίαση, μεταφορά και απόθεση, αποθήκευση δεδομένων, λειτουργία εκτός σύνδεσης, πλουσιότερες φόρμες και γραφικά SVG.
Γιατί ξεχωρίζουμε την εμφάνιση με CSS;
Έτσι η HTML κρατά τη δομή και το περιεχόμενο και η CSS, συνήθως σε χωριστό αρχείο .css, ορίζει τη διάταξη και τη μορφή. Το ίδιο έγγραφο μπορεί να φαίνεται εντελώς αλλιώς αν αλλάξουν μόνο οι κανόνες CSS, και η σελίδα μπορεί να προσαρμόζεται στην οθόνη κάθε συσκευής.
Ανοίγει το μενού κοινοποίησης του κινητού σου. Αν δεν υπάρχει, αντιγράφεται ο σύνδεσμος.
Νέα από το aporia.gr Νέες ενότητες και ό,τι βρίσκουμε στα θέματα των Πανελληνίων, στη σελίδα μας στο Facebook.