ΗTML και XHTML Βασικές έννοιες Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας
Η γραμματική της ΗΤML Όπως κάθε γλώσσα έχει μια γραμματική <!ELEMENT IFRAME --(%flow;)* --inline subwindow --> <!ATTLIST IFRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #IMPLIED -- link to long description (complements title) -- name CDATA #IMPLIED -- name of frame for targetting -- src %URI; #IMPLIED -- source of fframe content t-- frameborder (1 0) 1 -- request frame borders? -- marginwidth %Pixels; #IMPLIED -- margin widths in pixels -- marginheight %Pixels; #IMPLIED -- margin height in pixels -- scrolling (yes no auto) auto -- scrollbar or none -- align %IAlign; #IMPLIED -- vertical or horizontal alignment -- height %Length; #IMPLIED -- frame height -- width %Length; #IMPLIED -- frame width -- > Δε χρειάζεται να μπούμε σε λεπτομέρειες για τη γραμματική της γλώσσας
Εlements and attributes Ένα ΗΤΜL έγγραφο περιέχει elements Τα elements περιέχουν: Πληροφορίες κείμενο, εικόνες, βίντεο, κλπ. Συνδέσεις σε άλλα έγγραφα, εικόνες, βίντεο κλπ. Άλλα elements Κάθε element, γενικά, αποτελείται από τρία μέρη: Start tag, Content, Close tag Δύο ειδών elements: Non empty Empty
Η ανατομία ενός element (non empty) <p>η οικονομική ζωή της πόλης</p> p start tag content close tag <h1 class= main >Οδηγός Θεσσαλονίκης</h1> attribute
Η ανατομία ενός element (empty) start tag <img src= images/map images/map.jpg jpg" alt=«χάρτης της πόλης" /> attribute t attribute t
HTML versus XHTML Η HTML είναι case insensitive Οι παρακάτω εντολές είναι ίδιες: <HEAD>, <head> or <Head> Η XHTML είναι case sensitive Όλες οι εντολές πρέπει να γράφονται με μικρά γράμματα. <head> : σωστό, <HEAD> : λάθος, <Head> : λάθος Στην XHTML όλα τα empty elements πρέπει να κλείνουν με " />" Στην XHTML όλα τα non empty elements πρέπει η py ρ να έχουν end tags
Η δομή ενός εγγράφου <html> <head> <title> </title> </head> <body> <h1> </h1> <p> <img /> <a> </a> </p> </body> </html>
Δομή και Εμφάνιση Το XHTML αρχείο περιέχει τη δομή του εγγράφου Τα στοιχεία που έχουν να κάνουν με την εμφάνιση (τρόπο παρουσίασης) του εγγράφου καλό είναι να τοποθετούνται στο CSS αρχείο Structural Elements <p> <em> <h1> <strong> <h2> <blockquote> <h3> <h4> <h5> Εμφάνιση <h6> Presentational Elements <font> <b> <i> <underline> <blink> CCS Επιλογές χρήστη
Βασική δομή ενός εγγράφου <html> <head> <title>οδηγός ς Θεσσαλονίκης</title> </head> <body> </body> </html>
Σχόλια Χρησιμοποιούνται για το σχολιασμό του κώδικα Χρήσιμα στο μέλλον για την ευκολότερη κατανόηση του κώδικα Δεν είναι εμφανή στο χρήστη <!-- Το σχόλια μας -->
Κείμενο σε XHTML έγγραφα Επικεφαλίδες Παράγραφοι Λίστες Άλλα στοιχεία
Επικεφαλίδες 6 επικεφαλίδες, h1 έως h6 <h1> επικεφαλίδα 1 </h1> <h2> επικεφαλίδα 2 </h2> <h3> επικεφαλίδα 3 </h3> <h4> επικεφαλίδα 4 </h4> <h5> επικεφαλίδα 5 </h5> <h6> επικεφαλίδα 6 </h6>
Παράγραφοι <p>στον οδηγό αυτό θα βρείτε πληροφορίες σχετικές με τα αξιοθέατα, την οικονομική και κοινωνική ζωή της Θεσσαλονίκης.</p> / Τα κενά στον XHTML κώδικα αγνοούνται Αλλαγή γραμμής <br />
Λίστες Μη ταξινομημένες λίστες <ul> <li>...</li> <li>...</li> </li> </ul> Ταξινομημένες λίστες <ol> <li>...</li> <li>...</li> </ol>
Λίστες (συνέχεια) Λίστες ορισμών (definition lists) Χρησιμοποιούνται στις περιπτώσεις που μια λέξη ή ένας όρος χρειάζονται επιπλέον επεξήγηση <dl> <dt>.</dt> <dd>...</dd> <dd>...</dd> <dt>...</dt> </dl>
Λίστες μέσα σε λίστες <ul> <li>...</li> <ul> <li>...</li> <li>...</li> </ul> <li>...</li> </ul>
Άλλα στοιχεία <strong>.</strong> Συνήθως έντονη γραφή <em> </em> Συνήθως πλάγια γραφή <pre>..</pre> Το κείμενο διατηρεί τη μορφοποίησή του <blockquote >...</ blockquote> Το κείμενο ξεχωρίζει από το υπόλοιπο <q lang= xx > >.</q> Το κείμενο τοποθετείται συνήθως σε εισαγωγικά
Σε περίπτωση λάθους Σωστά ονόματα των ετικετών (tags) Όλα τα elements έχουν close tags Όλα τα close tags είναι σωστά (δηλ. της μορφής </h2> ή </p>) Τα elements δεν επικαλύπτονται (αυτό σημαίνει ότι δεν έχουμε κώδικα της μορφής <h1><p>περιεχόμενο παραγράφου</h1></p>)
Style Sheets <html> <head> <title>οδηγός Θεσσαλονίκης</title> <link rel="stylesheet" type="text/css" href="style1.css" /> </head>
Χρώμα Βασικές έννοιες
Το χρώμα στο χαρτί Κύρια και δευτερεύοντα χρώματα στο μοντέλο CMYK
Το χρώμα στην οθόνη Κύρια και δευτερεύοντα χρώματα στο μοντέλο RGB
Το πρότυπο srgb Τα χρώματα στο πρότυπο srgb (Red Green Blue space)
Ορισμός χρωμάτων στο Web Καθορισμός των χρωμάτων στο πρότυπο srgb
Ορισμός χρωμάτων στο Web Καθορισμός των βασικών χρωμάτων Καθορισμός των δευτερευόντων χρωμάτων Καθορισμός αποχρώσεων του γκρι
Αριθμός χρωμάτων 256 (0-255) επίπεδα για καθένα από τα τρία βασικά χρώματα. Σύνολό 256 x 256 x 256 = 16,777,216 (16,8) χρώματα. 24 bit χρώμα ή πραγματικό χρώμα (true color). Το ανθρώπινο μάτι δεν μπορεί να διακρίνει τόσα χρώματα στην οθόνη.
Βάθος χρώματος 8 bit color = 2 8 = 258 χρώματα 16 bit color = 2 16 = 65,536 χρώματα 24 ή 32 bit color = 2 24 = 16 777 216 24 ή 32 bit color = 2 24 = 16,777,216 χρώματα
Web safe colors Ο κυβος με τα 216 ασφαλή φ ή χρώματα
Χρώμα σε XHTML έγγραφα Με χρήση CSS καθορίζουμε το χρώμα του κειμένου ενός element του φόντου (background) ενός element του περιγράμματος (border) ενός element 4 τρόποι δήλωσης ενός χρώματος 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 )
16 Προκαθορισμένα χρώματα
Web safe colors σε δεκαεξαδική μορφή Ο κυβος με τα 216 ασφαλή φ ή χρώματα
Γραφικά στο Web Βασικοί τύποι γραφικών GIF, JPEG, PNG
Βασικοί τύποι γραφικών Bitmaps (ράστερ) Πολλοί τύποι αρχείων υποστηρίζονται από τους Browsers. Συνιστώνται για φωτογραφίες. Δεν υπάρχει πρακτικά η δυνατότητα μεγέθυνσης Μεγάλο μέγεθος αρχείου, ανάλογο του μεγέθους της εικόνας GIF, JPEG, PNG Vector (διανυσματικά ) Οι browsers χρειάζονται ειδικό πρόγραμμα (plug-in)για να τα δείξουν Συνίστανται για γραφικά που δημιουργούνται από υπολογιστές (σχέδια) Μπορεί να γίνει μεγέθυνση χωρίς να χαθεί η ποιότητα και η ευκρίνεια. Μικρό μέγεθος αρχείου, ανεξάρτητο του μεγέθους της εικόνας Flash/SWF,SVG
Γραφικά τύπου Bitmap GIF (Graphics Interchange Format) Συγκεκριμένος αριθμός χρωμάτων και συμπίεση χωρίς απώλειες (lossless). JPEG (Joint Photographic Experts Group) Πραγματικό χρώμα (16,8 εκατ.) ) και συμπίεση με απώλειες (lossy). PNG (Portable Network Graphic) Αντικαθιστά το GIF
Αρχεία GIF (.gif) Μέχρι 256 χρώματα Κατάλληλο λ για γραφικά πού περιέχουν λίγα χρώματα (κείμενα, σχέδια, κλπ.) Υποστηρίζει διαφανές έ χρώμα Υποστηρίζει σταδιακή εμφάνιση της εικόνας(interlacing) t l i ) Το μέγεθος του αρχείου εξαρτάται από τον αριθμό των χρωμάτων, τις διαστάσεις (μήκος ή και πλάτος) της εικόνας και την πολυπλοκότητά της
Αρχεία JPEG (.jpg) 24 bit χρώμα (πραγματικό χρώμα) Κατάλληλο για γραφικά πού περιέχουν πολλά χρώματα (φωτογραφίες, φ ς τρισδιάστατα γραφικά) Διαφορετικά επίπεδα συμπίεσης Δεν υποστηρίζει διαφανές χρώμα Το μέγεθος του αρχείου εξαρτάται από τις διαστάσεις (μήκος και πλάτος) της εικόνας και το βαθμό συμπίεσής της
Αρχεία PNG (.png) 24 bit χρώμα, αποχρώσεις του γκρι (grayscale), 8 bit (256) χρώμα 5-25% καλύτερη συμπίεση από το GIF Πολλά διαφανή χρώματα Περιέχει πληροφορίες για gamma correction H σταδιακή εμφάνιση της εικόνας (Interlacing) είναι καλύτερη Δεν υποστηρίζεται από παλιούς browsers
Εικόνες σε XHTML έγγραφα Εισαγωγή στη σελίδα Ορισμός μεγέθους Θέση στη σελίδα
Εισαγωγή εικόνας στη σελίδα φάκελος <img src="images/map.gif" /> όνομα του αρχείου
Εναλλακτικό κείμενο <img src="images/map.gif" alt="χάρτης της img src images/map.gif alt Χάρτης της Θεσσαλονικης" />
Καθορισμός μεγέθους <img src="images/map.gif" alt="χάρτης της Θεσσαλονικης" " width= "400" height= ht "100" border= "2" /> Ο ορισμός των διαστάσεων βοηθάει στη γρηγορότερη εμφάνιση της σελίδας στο browser. Τις διαστάσεις της εικόνας τις βλέπουμε σε ένα πρόγραμμα επεξεργασίας γραφικών (π.χ Photoshop). Είναι προτιμότερο να αλλάζουμε τις διαστάσεις μιας εικόνας χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας γραφικών, παρά το browser.
Θέση της εικόνας στη σελίδα H εικόνα στην αριστερή πλευρά της σελίδας: <img src="images/map.gif" if" alt="χάρτης της Θεσσαλονικης" width="400" height="100" border="2" align= "left" " /> H εικόνα στη δεξιά πλευρά της σελίδας: <img src="images/map.gif" alt="χάρτης της Θεσσαλονικης" width="400" height="100" border="2" ς g align= "right" />
Άλλες ιδιότητες (attributes) Περίγραμμα <img src="images/map.gif" border= "2" /> Περιθώριο <img src="images/map images/map.gif" hspace= 10 " vspace= 8" /> hspace: pixels δξά δεξιά και αριστερά της εικόνας vspace: pixels πάνω και κάτω της εικόνας
Συνδέσεις μεταξύ εγγράφων Μορφές συνδέσεων Εικόνες με «ενεργές» περιοχές
Συνδέσεις σε τοπικά έγγραφα Όταν το έγγραφο στο οποίο κάνουμε τη σύνδεση βρίσκεται στον υπολογιστή μας, στο href= ορίζουμε τη «σχετική» διαδρομή από τη θέση όπου βρίσκεται το έγγραφο μας στο έγγραφο της σύνδεσης. Για παράδειγμα: <a href= museums.html >Τα μουσεία της Θεσσαλονίκης</a> το έγγραφο museums.html βρίσκεται στον ίδιο κατάλογο με το έγγραφό μας <a href= museums/byzantine.html >Βυζαντινό μουσείο</a> το έγγραφο byzantine.html βρίσκεται στον κατάλογο museums <a href=../index.html html >Αρχική σελίδα</a> το έγγραφο index.html βρίσκεται στον προηγούμενο κατάλογο από αυτόν που βρίσκεται το έγγραφό μας
Συνδέσεις σε εξωτερικά έγγραφα Όταν το έγγραφο στο οποίο κάνουμε τη σύνδεση βρίσκεται σε κάποιο άλλο υπολογιστή στο href= ορίζουμε την «απόλυτη» θέση αυτού του εγγράφου. http://www.urenio.org/courses/index.html πρωτόκολλο server domain σχετική θέση Για παράδειγμα: <a href= http://www http://www.auth.gr gr >Αριστοτέλειο Πανεπιστήμιο</a> <a href= http://alexander.macedonia.culture.gr/mbp/main_en.htm >Το Βυζαντινό Μουσείο στο Διαδίκτυο</a>
Εσωτερικές συνδέσεις Μπορούμε να δημιουργήσουμε συνδέσεις σε συγκεκριμένο τμήμα ενός εγγράφου, χρησιμοποιώντας την ιδιότητα id για να το συγκεκριμένο τμήμα. Για παράδειγμα: <h2 id= byzantine >To Βυζαντινό Μουσείο</h2> Για να κάνουμε σύνδεση στο σημείο του εγγράφου όπου υπάρχει η συγκεκριμένη επικεφαλίδα χρησιμοποιούμε μ την εντολή: <a href= #byzantine > ή <a href= museums.html#byzantine >
Αποστολή e-mail Η εντολή: <a href="mailto:info@auth.gr">επικοινωνία</a> i f th " Ε ί ανοίγει στο χρήστη ένα παράθυρο e-mail όπου μπορεί να γράψει το μήνυμά του και να το στείλει στη διεύθυνση: info@auth.gr
Συνδέσεις με εικόνες Για να κάνουμε μια εικόνα ενεργή (σύνδεση) χρησιμοποιούμε την εντολή: <a href="../index.html"><img src="images/home.gif" /></a> δίνοντας τη σχετική ή απόλυτη θέση της εικόνας
Εικόνα με «ενεργές» περιοχές Για να κάνουμε συγκεκριμένες περιοχές μιας εικόνας ενεργές, ορίζουμε έναν «χάρτη» των περιοχών αυτών: <map id= museums > <area shape ="rect" coords="1,114, 224,150" href="communications.html"> < area shape="polygon" coords ="10,15,99,4,105,24,77,57,23,54" href ="web.html"> < area shape ="circle" coords ="162,55,50" href ="earth.html"> </map> <img src="/graphics/thessaloniki_map.gif" usemap="# museums "> όπου rect σημαίνει ορθογώνιο το οποίο ορίζεται στο coords= από τις συντεταγμένες της πάνω αριστερής και της κάτω δεξιάς γωνίας του. polygon σημαίνει πολύγωνο το οποίο ορίζεται στο coords= από τις συντεταγμένες των κορυφών του. circle σημαίνει κύκλος ο οποίος ορίζεται στο coords= από τις συντεταγμένες του κέντρου του και το μήκος της ακτίνας του.
Χρήση Cascade Style Sheets
Χρήση σε XHML έγγραφα Ένα αρχείο CSS περιέχει μια σειρά από εντολές (rules) που καθορίζουν τον τρόπο παρουσίασης των στοιχείων της XHTML. Οι εντολές αυτές: Βρίσκονται σε ένα αρχείο το οποίο συνδέεται σε μια XHTML σελίδα, ή Ενσωματώνονται στο XHTML έγγραφο
Σύνδεση αρχείου CSS Τα αρχεία css συνδέονται με τρεις τρόπους σε ένα xhtml έγγραφο: External <head> <link rel="stylesheet" type="text/css" media="all" href="style_sheets/style1.css" y /> </head> ή <head> <style type="text/css" media="all">@import " style_sheets/style1.css ";</style> </head>
Ενσωμάτωση εντολών CSS Internal <head> p{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em } h1 { font-size: 1.5em } </head> In-line In line <body style= font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em >
Δημιουργία CSS Όπως στην XHTML έχουμε Tags στα CSS έχουμε Selectors Selector Declaration h1 {color: white;} Property Value
Μονάδες 'em' (πχ font-size: 2em) περίπου ίσο με το ύψος ενός γράμματος 'px' (πχ font-size: 12px) pixels '%'% (πχ font-size: 80%) ποσοστό επί της προκαθορισμένης τιμής 'pt' (πχ font-size: 12pt) points Σχετικές τιμές: μς em, % Απόλυτες τιμές: px, pt
Χρώματα Έχουμε στη διάθεσή μας 16,777,216 χρώματα. Μπορούμε να τα δηλώσουμε χρησιμοποιώντας ένα 'όνομα', μία 'rgb' (red/green/blue) τιμή ή έναν 'δεκαεξαδικό' κωδικό. Για παράδειγμα: red rgb(255,0,0) rgb(100%,0%,0%) #ff0000 ή #f00 Υπάρχουν 16 προκαθορισμένα χρώματα: aqua, black, blue, fuchsia,, gray, green,, lime,, maroon,, navy, olive,, purple, p, red, silver, teal, white, και yellow. Μπορούμε επίσης να χρησιμοποιήσουμε την τιμή transparent
Χρώματα Τα χρώματα εφαρμόζονται χρησιμοποιώντας τις ιδιότητες color και background-color color πχ: body { } h1 { } color: yellow; background-color: blue; color: #ffc; background-color: color: #009;
Κείμενο Μπορούμε να αλλάξουμε το μέγεθος και τη μορφή του κειμένου χρησιμοποιώντας μια σειρά από ιδιότητες όπως: font-family (όλες οι γραμματοσειρές) font-family: arial, helvetica ή font-family: Georgia, "Times New Roman", serif font-size font-weight (bold ή normal) font-style (italic ή normal) text-decoration (overline,, line-through, underline, none) text-transform (capitalize, uppercase, lowercase, none)
Κείμενο body { font-family: family: verdana, arial, helvetica, serif; font-size: 0.8em; } h1 { font-size: 2em; } h2 { font-size: 16px; } a{te text-decoration: tdecoration none; } strong { font-style: italic; text-transform: uppercase; }
Κείμενο letter-spacing και word-spacing (τιμή ή normal) line-height: ύψος μιας γραμμής (τιμή, ποσοστό ή normal) text-align (left, right, center ή justify) text-indent: t t εσοχή της πρώτης γραμμής μιας παραγράφου (τιμή ή ποσοστό) p{ } letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5em; text-align: center;
Περιθώρια και περιγράμματα Margin box Border box Padding box Element box
Περιθώρια Margin: Διάστημα έξω από το περίγραμμα του αντικειμένου. Padding: Διάστημα ανάμεσα στο περίγραμμα και το αντικείμενο. margin, margin-top, margin-right, g margin- bottom, margin-left. padding padding-top padding-right padding, padding top, padding right, padding-bottom, padding-left.
Περιγράμματα border-style: Καθορίζει το είδος του περιγράμματος (solid, dotted, dashed, double, groove, ridge, inset, outset). border-width: Καθορίζει το πάχος του περιγράμματος. Μπορούμε να καθορίσουμε το πάχος της κάθε πλευράς χωριστά (border-top- width, border-right-width, border-bottom-width, border-left-width). border-color: Καθορίζει το χρώμα του περιγράμματος.
Παράδειγμα h1 { background-color: color: #DDEEBA; border-style: solid; border-width: 2px; border-color: #81BD35; color: #038D03; font-size: 1.6em; font-weight: bold; padding: 1em; margin: 1em 0 1em 0; }
Συνδέσεις a:link { color: blue; } a:visited { color: purple; } a:active { color: red; ;} a:hover { text-decoration: none; color: blue; background-color: color: yellow; }
Συγκερασμός ιδιοτήτων Πολλές φορές μπορούμε με μια ακολουθία τιμών να περιγράψουμε ιδιότητες των CSS χωρίς να τις αναφέρουμε. Οι τιμές πρέπει να χωρίζονται με κενά. Π.χ.: Αντί για p { border-top-width: 1px; border-right-width: right 5px; border-bottom-width: 10px; border-left-width: 20px; } μπορούμε να γράψουμε p {border-width: 1px 5px 10px 20px;} Επίσης τα border-width, border-color και border-style μπορούν να συγκεραστουν, π.χ: p { border: 1px red solid; } Όπως επίσης και ιδιότητες σχετικές με το font, π.χ.: p { font: italic bold 1em/1.5 courier; } (Η τιμή 1.5 αφορά την ιδιότητα line-height)
Εικόνες στο φόντο Τα css μας δίνουν μεγάλη ευελιξία στο χειρισμό των εικόνων που τοποθετούμε στο φόντο. background-color : χρώμα background-image : url(θέση της εικόνας) background-repeat repeat : τρόπος επανάληψης της εικόνας repeat, repeat-y, repeat-x, no-repeat background-position: θέση της εικόνας στη σελίδα top, center, bottom, left, right Για παράδειγμα body { background: white url(images/bg.gif) no-repeat top right; }
Πίνακες σε XHTML έγγραφα
Δημιουργία πίνακα <table> <td> (κελί/cell) <tr> (γραμμή/ row)
Ο κώδικας <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
Ιδιότητες width cellpadding border cellspacing
Ο κώδικας <html> <head> <title></title> <style type="text/css" text/css media="screen"> table {border: 4px solid #000; background: #96B45A;} td{font: 16px "arial black", sans-serif; border: 1px solid #000; background: #CDDFA9;} </style> </head> <body> <table width="500" align="center" cellpadding="20" cellspacing="30"> <tr> <td>σειρά 1 Κελί 1 </td> <td>σειρά ρ 1 Κελί 2 </td> <td>σειρά 1 Κελί 3 </td> </tr> <tr> <td>σειρά 2 Κελί 1 </td> <td>σειρά 2 Κελί 2 </td> <td>σειρά 2 Κελί 3 </td> </tr> </table> </body> </html>
Πολύπλοκοι πίνακες <td colspan="4"> <td rowspan= 2"> <td> <td> <td> <td> <td> <td> <td> <td rowspan= 2 colspan= 3"> <td>
Ο κώδικας <table width="500" align="center" cellpadding="10" cellspacing="6"> <tr> <td colspan="4"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="3" rowspan="2"></td> </tr> <tr> <td></td> </tr> </table>
Ιδιότητες πίνακα, κελιών width: μήκος πίνακα ή κελιού (αυτόματο) border: περίγραμμα πίνακα ή κελιού (0) cellspacing: απόσταση μεταξύ των κελιών (2px) cellpadding: απόσταση του περιεχομένου ενός κελιού από το περίγραμμα του κελιού (2px) colspan: αριθμός των στηλών που καταλαμβάνει ένα κελί rowspan: αριθμός των γραμμών που καταλαμβάνει ένα κελί align: οριζόντια στοίχιση, left center -right valign: κατακόρυφη στοίχιση του περιεχομένου ενός κελιού, top middle - bottom