Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος
Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2
Εισαγωγικές έννοιες Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 3
Τι είναι HTML (HyperText Markup Language) Xρησιμοποιείται για να περιγράψει (δομήσει) το περιεχόμενο σε μια ιστοσελίδα CSS (Cascading StyleSheets) Xρησιμοποιούνται για τη μορφοποίηση του δομημένου περιεχομένου της ιστοσελίδας Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 4
HTML vs CSS HTML Δομή και σημασία Επικεφαλίδες Κείμενο Εικόνες Συνδέσεις Βίντεο CSS Στυλ και εμφάνιση Μέγεθος, χρώμα, γραμματοσειρά κειμένου Χρώμα φόντου Περιγράμματα Περιθώρια Έντονα, πλαγιαστά, υπογραμμισμένα γράμματα Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 5
Ίδιο περιεχόμενο, διαφορετική εμφάνιση Βιβλίο Web Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 6
Ίδια εμφάνιση, διαφορετικό περιεχόμενο Web Βιβλίο Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 7
Πλεονεκτήματα από τον διαχωρισμό HTML & CSS Δυνατότητα για τον ταυτόχρονο έλεγχο της διάταξης (layout) πολλών εγγράφων από ένα μόνο αρχείο css, με συνέπεια: Ταχύτερη ανάπτυξη καθώς developers και designers δουλεύουν ταυτόχρονα Ευκολία στην αναβάθμιση του κώδικα Φορητότητα καθώς είναι δυνατή η εφαρμογή διαφορετικής διάταξης σε διαφορετικές εξόδους (οθόνη, εκτυπωτής) ή συσκευές (Η/Υ, tablet, κινητό). Προσβασιμότητα με χρήση css του χρήστη Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 8
Ορολογία και σύνταξη Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 9
Δημιουργία αρχείων HTML Χρησιμοποιούμε έναν απλό κειμενογράφο (Notepad, Notepad++, κλπ.) Ο κώδικας έχει τη μορφή απλού κειμένου Τα αρχεία έχουν κατάληξη.html Για να δούμε το αποτέλεσμα χρειαζόμαστε ένα browser (π.χ. Firefox, Chrome, Internet Explorer, Safari, κλπ.) Ο κώδικας τρέχει και τοπικά Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 10
Η πιο απλή σελίδα HTML Ένα αρχείο με κατάληξη.html (όχι.html.txt) που περιέχει σκέτο κείμενο Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 11
Βασικοί όροι της HTML Ένα ΗΤΜL έγγραφο περιέχει elements Τα elements περιέχουν: Πληροφορίες κείμενο, εικόνες, βίντεο, κλπ. Συνδέσεις σε άλλα έγγραφα, εικόνες, βίντεο κλπ. Άλλα elements Κάθε element, γενικά, αποτελείται από: Ετικέτες, περιεχόμενο και παραμέτρους Έχουμε δύο ειδών elements: Non empty Empty Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 12
Tags (Ετικέτες) Η HTML χρησιμοποιεί ένα αριθμό από ετικέτες (tags) για την μορφοποίηση κειμένου, τη δημιουργία συνδέσμων (links) μετάβασης ανάμεσα στις ιστοσελίδες, την εισαγωγή εικόνων, ήχου κ.α. Όταν ένας browser ανοίγει ένα αρχείο HTML οι ετικέτες μεταφράζονται σε κατάλληλα χαρακτηριστικά με αποτελέσματα στην εμφάνιση και στην λειτουργικότητα της συγκεκριμένης σελίδας. Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 13
Tags (Ετικέτες) <h1> </h1> Κάθε ετικέτα έχει όνομα: h1 Κάθε ετικέτα πρέπει να ανοίγει: <h1> Κάθε ετικέτα πρέπει να κλείνει: </h1> Ανάμεσα στο άνοιγμα και το κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας. Υπάρχουν ετικέτες χωρίς περιεχόμενο (π.χ. <br /> Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 14
Attributes (Παράμετροι) Με τον όρο Attributes αναφερόμαστε σε παραμέτρους που χρησιμοποιούνται για να δώσουν επιπλέον πληροφορίες στα Elements. Συνήθως οι παράμετροι χρησιμοποιούνται για να ορίσουν ένα id, class, ή title σε ένα element, να καθορίσουν την πηγή (source) για τα media elements, ή να ορίσουν την αναφορά (href) σε μια υπερσύνδεση. Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 15
Η ανατομία ενός Element Opening tag Closing tag <h1 id= title >Αριστοτέλειο Πανεπιστήμιο</h1> Attribute Content <a href= http://www.auth.gr >Αριστοτέλειο Πανεπιστήμιο</a> <img src= images/logo.png width= 100 height= 80 /> Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 16
Δομή και σύνταξη μιας σελίδας HTML Όλα τα έγγραφα HTML έχουν μια συγκεκριμένη δομή η οποία περιλαμβάνει: doctype: Τοποθετείται στην αρχή της σελίδας και δηλώνει την έκδοση της html που χρησιμοποιείται html: Δηλώνει την αρχή και το τέλος της σελίδας. head: Περιέχει meta-πληροφορίες (metadata) για τη σελίδα (τίτλος, λέξεις κλειδιά, κλπ.), και ενσωματώνει εξωτερικά αρχεία. Δεν είναι ορατό. body: Περιέχει το περιεχόμενο της σελίδας Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 17
Δομή και σύνταξη μιας σελίδας HTML <!DOCTYPE html> <html lang= el"> <head> <meta charset="utf-8"> <title>η πρώτη μου σελίδα</title> </head> <body> <h1>η πρώτη μου σελίδα</h1> <p>αυτή είναι η πρώτη μου html σελίδα.</p> </body> </html> Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 18
Ιεραρχική δομή Ένα tag μπορεί να περιέχει άλλα tags Τα tags δημιουργούν μια ιεραρχική δομή. Ό,τι ανοίγει πρώτο κλείνει τελευταίο <body> <h1>η πρώτη μου σελίδα </h1> <p>αυτή είναι η πρώτη μου html σελίδα.</p> </body> Τα tags h1 και p περιέχονται στο tag body Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 19
Σχέσεις ανάμεσα στα tags Α πατέρας του Β (parent) Α περιέχει άμεσα το Β Α παιδί του Β (child) Α περιέχεται άμεσα στο Β Α πρόγονος του Β (ancestor) Α περιέχει το Β Α απόγονος του Β (descendant) A περιέχεται στο Β Α αδερφός του Β (sibling) Α έχει κοινό πατέρα με το Β title head <html lang= el"> <head> <title>η σελίδα μου</title> </head> <body> <h1>η πρώτη μου σελίδα</h1> </body> </html> html p body h1 html ancestor of title, p, h1 html parent of head, body head, body children of html title, p, h1, descendant of html body parent of p, h1 p, h1 children of body p sibling with h1 etc. Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 20
Βασικοί όροι των CSS Selector (Επιλογέας): Καθορίζει σε ποια elements της HTML θα εφαρμοστούν οι κανόνες CSS. Declaration (Δήλωση): Καθορίζει το στυλ που θα εφαρμοστεί. Αποτελείται από το όνομα μιας ιδιότητας (Property) και την τιμή της (Value). selector (επιλογέας) { property (ιδιότητα): value (τιμή); } Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 21
Δομή και σύνταξη CSS Selector Properties body { font-size: 12px; color: white; background-color: black; } Declarations Values Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 22
Σχόλια σε αρχεία HTML και CSS Τα σχόλια χρησιμοποιούνται για την επεξήγηση του κώδικα, ώστε αυτός να είναι κατανοητός όχι μόνο από τρίτους αλλά και από τον ίδιο το συγγραφέα στο μέλλον. Δεν είναι εμφανή στον επισκέπτη της σελίδας. Τα σχόλια στην HTML αρχίζουν με <! - και τελειώνουν με --> Τα σχόλια στα CSS αρχίζουν με /* και τελειώνουν με */ Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 23
Ενσωμάτωση CSS στην HTML Η ενσωμάτωση των CSS γίνεται με 3 τρόπους: <! Σύνδεση εξωτερικού αρχείου --> <link rel="stylesheet" href="file.css"> Ο πιο ορθός τρόπος <! Εσωτερικά στην HTML σελίδα --> <style type="text/css"> p { color: blue; font-size: 16px; } </style> <! Εντός του HTML element --> <p style="color: #red; font-size: 16px;">Lorem ipsum dolor...</p> Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 24
Διαδοχικότητα (Cascading) στα CSS Μπορούμε σε ένα έγγραφο HTML να ενσωματώσουμε πολλαπλά αρχεία css. Όσο πιο κοντά είναι μια δήλωση σε ένα HTML tag τόσο πιο ισχυρή είναι. Για παράδειγμα στην προηγούμενη διαφάνεια το κείμενο της παραγράφου: <p style="color: #red; font-size: 16px;"> θα είναι κόκκινο ενώ το υπόλοιπο κείμενο του εγγράφου θα είναι μπλε. Αν μια ιδιότητα δεν προσδιορίζεται κληρονομείται από τον πρόγονο που την έχει. Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 25
Κείμενο σε HTML έγγραφα Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 26
Επικεφαλίδες 6 επικεφαλίδες, h1 έως h6 <h1> επικεφαλίδα 1 </h1> <h2> επικεφαλίδα 2 </h2> <h6> επικεφαλίδα 6 </h6> Η επικεφαλίδα h1 χρησιμοποιείται μόνο 1 φορά σε κάθε σελίδα Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 27
<h1> Επικεφαλίδες <h2> <h3> <h3> Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 28
Παράγραφοι <p>αυτή είναι η πρώτη μου σελίδα.</p> Η HTML αγνοεί τις τόσο τις αλλαγές γραμμών όσο και τα κενά. Τα αντικαθιστά με ένα κενο. Για αλλαγή γραμμής <br /> <p>αυτή είναι η πρώτη μου σελίδα. Είμαι πολύ χαρούμενος!</p> Αυτή είναι η πρώτη μου σελίδα. Είμαι πολύ χαρούμενος! Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 29
Λίστες Αριθμημένες <ol> <li>...</li> <li>...</li> <li>...</li>... </ol> Μη αριθμημένες <ul> <li>...</li> <li>...</li> <li>...</li>... </ul> Λίστες ορισμών <dl> <dt>...</dt> <dd>...</dd> <dd>...</dd> </dl> Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 30
Λίστες μέσα σε λίστες (Εμφώλευση) <ol> <li>.</li> <li> <ul> <li>.</li> <li>.</li> </ul> </li> </ol> Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 31
Άλλα στοιχεία <strong>.</strong> Συνήθως έντονη γραφή <em> </em> Συνήθως πλάγια γραφή <pre>..</pre> Το κείμενο διατηρεί τη μορφοποίησή του <blockquote >...</ blockquote> Το κείμενο ξεχωρίζει από το υπόλοιπο Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 32
Το χρώμα color: Ορίζει το χρώμα του κειμένου background-color: Ορίζει το χρώμα του φόντου border-color: Ορίζει το χρώμα του περιγράμματος <p>αυτή είναι η πρώτη μου σελίδα.</p> p { } color: white; background-color: gray; border-color: black Αυτή είναι η πρώτη μου σελίδα. Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 33
Δημιουργία χρώματος Χαρτί Οθόνη Μοντέλο CMYK Μοντέλο RGB Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 34
Ορισμός χρωμάτων στο Web Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 35
Δήλωση χρώματος Keyword (red, green, blue, κλπ) Δεκαδική rgb τιμή (rgb(255,0,0), rgb(0,255,0)) Ποσοστό rgb (rgb(100%,0%,0%) rgb(0%,100%,0%) ) Δεκαεξαδική rgb τιμή (#ff0000, #00ff00 ) Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 36
16 Προκαθορισμένα χρώματα Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 37
Χρώματα RGB #951905 κόκκινος συντελεστής μπλε συντελεστής πράσινος συντελεστής body { color: ffee66; background-color: #951905; } Αυτή είναι η πρώτη μου σελίδα. Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 38
Ιδιότητες γραμματοσειράς Οικογένεια font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; Αν δεν υπάρχει εγκατεστημένη στον υπολογιστή του χρήστη η πρώτη ο browser χρησιμοποιεί τη 2 η κ.ο.κ Μέγεθος font-size: 13px; (px, em, pt, %, keyword) px, pt, keyword: απόλυτη τιμή em, %: σχετική με μια προκαθορισμένη τιμή Στυλ font-style: italic; (normal, italic, oblique) Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 39
Ιδιότητες γραμματοσειράς (συνέχεια) Παραλλαγές font-variant: small-caps; (normal, small-caps) Πάχος font-weight: bold; (normal, bold, bolder, lighter ή 100, 200, 300, 400, 500, 600, 700, 800 και 900) Απόσταση ανάμεσα στις γραμμές: line-height: 150% (px, em, pt, %) Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 40
Ιδιότητες γραμματοσειράς - Συντομογραφία Οι ιδιότητες της γραμματοσειράς μπορούν να γραφούν πιο σύντομα με τη χρήση της ιδιότητας font ακολουθούμενης από τις τιμές με την παρακάτω σειριά: font-style, font-variant, font-weight, font-size, lineheight, και font-family Δε χρησιμοποιούμε κόμμα παρά μόνο ανάμεσα στα ονόματα των γραμματοσειρών, ενώ χρησιμοποιούμε το / για να χωρίσουμε το font-size με το line-height. Υποχρεωτικές μόνο οι τιμές font-size και font-family. p { } font: italic small-caps bold 13px/20px Arial, Helvetica, sans-serif; Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 41
Άλλες ιδιότητες του κειμένου Στοίχιση text-align: left; (left, right, center, justify) Διακόσμηση (Decoration) text-decoration: underline; (none, underline, overline, line-through, blink) Εσοχή text-indent: 20px; (px, em, pt, %,) Σκιά text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); (text-shadow: x y blur color) Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 42
Άλλες ιδιότητες του κειμένου (συνέχεια) Μετασχηματισμός text-transform: uppercase; (none, capitalize, uppercase, lowercase, and inherit.) Απόσταση μεταξύ των γραμμάτων letter-spacing: -.5em; (px, em, pt, %,) Απόσταση μεταξύ των λέξεων word-spacing:.25em; (px, em, pt, %,) Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 43
Σύνδεσμοι (Hyperlinks) Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 44
Σύνδεσμοι (Hyperlinks) <a href="http://www.urenio.org">urenio</a> <a>: ορίζει το σύνδεσμο href: ορίζει τη διεύθυνση Η διεύθυνση μπορεί να είναι απόλυτη ή σχετική Η απόλυτη ξεκινά με το πρωτόκολλο (http://www.auth.gr, https://twitter.com/intelcities) Η σχετική ορίζεται ως προς τη θέση του εγγράφου που την περιέχει (lessons/, lessons/digital-city.html) Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 45
Σύνδεσμοι (συνέχεια) Συνδέσεις σε περιοχές του εγγράφου <a href="#lesson1">digital Cities</a> <div id="lesson1 ">Awesome Section</div> Συνδέσεις σε διευθύνσεις Email <a href="mailto:info@auth.gr?subject=website"> Αποστολή Email</a> Άνοιγμα σε νέο παράθυρο <a href="http://www.urenio.org/" target="_blank">urenio Website</a> Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 46