ΗTML και XHTML – Βασικές έννοιες - URENIO · δίνοντας τη...

View
6
Download
0
Category

Documents

Preview:

Citation preview

ΗTML και XHTML – Βασικές έννοιεςέννοιες

Βασική σύνταξη HTML και HTMLΗ δομή μιας HTML σελίδας

Η γραμματική της ΗΤML

Όπως κάθε γλώσσα έχει μια γραμματική<!ELEMENT IFRAME - - (%flow;)* -- inline subwindow -->!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 --

%URI #IMPLIED f f t tsrc %URI; #IMPLIED -- source of frame content --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 --g g gheight %Length; #IMPLIED -- frame height --width %Length; #IMPLIED -- frame width -->

Δε χρειάζεται να μπούμε σε λεπτομέρειες για τηΔε χρειάζεται να μπούμε σε λεπτομέρειες για τη γραμματική της γλώσσας

Εlements and attributes

Ένα ΗΤΜL έγγραφο περιέχει “elements”Τα elements περιέχουν:

Πληροφορίες – κείμενο, εικόνες, βίντεο, κλπ.βΣυνδέσεις σε άλλα έγγραφα, εικόνες, βίντεο κλπ.

Άλλα elements

Κάθε element, γενικά, αποτελείται από τρία μέρη:Start tag, Content, Close tag

Δύο ειδών elements:Non emptyEmpty

Η ανατομία ενός element (non empty)

<p>Η οικονομική ζωή της πόλης</p>p μ ή ζ ή ης ης p

start tag content close tag

<h1 class=“main”>Οδηγός Θεσσαλονίκης</h1>

attribute

Η ανατομία ενός element (empty)

start tag

tt ib t tt ib tattribute attribute

HTML versus XHTML

Η HTML είναι “case insensitive”Οι παρακάτω εντολές είναι ίδιες: <HEAD> <head> or <Head>Οι παρακάτω εντολές είναι ίδιες: <HEAD>, <head> or <Head>

Η XHTML είναι “case sensitive”Όλες οι εντολές πρέπει να γράφονται με μικρά γράμματαΌλες οι εντολές πρέπει να γράφονται με μικρά γράμματα.<head> : σωστό, <HEAD> : λάθος, <Head> : λάθος

Στην XHTML όλα τα empty elements πρέπει ναΣτην XHTML όλα τα empty elements πρέπει να κλείνουν με " />"Στην XHTML όλα τα non empty elements πρέπει η p y ρνα έχουν end tags

Η δομή ενός εγγράφου

</head><title> </title>

</html></body>

</p><a> </a>

</html>

Δομή και Εμφάνιση

Το XHTML αρχείο περιέχει τη δομή του εγγράφουΤ ί έ ά άΤα στοιχεία που έχουν να κάνουν με την εμφάνιση (τρόπο παρουσίασης) του εγγράφου καλό είναι να τοποθετούνται στο CSS αρχείοτοποθετούνται στο CSS αρχείο

Structural Elements Presentational Elements<f t><p>

Εμφάνιση CCS<h6>

Εμφάνιση Επιλογές χρήστη

Βασική δομή ενός εγγράφου

<html><head><title>Οδηγός Θεσσαλονίκης</title>ηγ ς ης</head><body><body></body></html>

Σχόλια

Χρησιμοποιούνται για το σχολιασμό του κώδικαΧρήσιμα στο μέλλον για τηνΧρήσιμα στο μέλλον για την ευκολότερη κατανόηση του κώδικαΔ ί ή ήΔεν είναι εμφανή στο χρήστη! Το σχόλια μας

Κείμενο σε XHTML έγγραφα

ΕπικεφαλίδεςΠαράγραφοιΠαράγραφοιΛίστεςΆλλ ίΆλλα στοιχεία

Επικεφαλίδες

6 επικεφαλίδες, h1 έως h6<h1> επικεφαλίδα 1 </h1><h2> επικεφαλίδα 2 </h2>φ<h3> επικεφαλίδα 3 </h3><h4> επικεφαλίδα 4 </h4><h4> επικεφαλίδα 4 </h4><h5> επικεφαλίδα 5 </h5><h6> επικεφαλίδα 6 </h6>

Παράγραφοι

<p>Στον οδηγό αυτό θα βρείτε πληροφορίες σχετικές με τα αξιοθέατα, την

/οικονομική και κοινωνική ζωή της Θεσσαλονίκης.</p>Τα κενά στον XHTML κώδικα αγνοούνταιΑλλαγή γραμμής<br /><br />

Λίστες

Μη ταξινομημένες λίστες< l><ul><li>................</li><li> </li><li>.................</li></ul>

Τ ξ έ λίΤαξινομημένες λίστες<ol>

li /li<li>................</li><li>.................</li></ol></ol>

Λίστες (συνέχεια)

Λίστες ορισμών (definition lists)Χρησιμοποιούνται στις περιπτώσεις που μια λέξη ή ένας όρος χρειάζονται επιπλέον επεξήγηση

dl<dl><dt>……….</dt>

/<dd>................</dd><dd>................</dd><dt>.................</dt></dl>

Λίστες μέσα σε λίστες

Άλλα στοιχεία

<strong>…….</strong>Συνήθως έντονη γραφήΣυνήθως έντονη γραφή<em>………</em>Συνήθως πλάγια γραφήΣυνήθως πλάγια γραφή<pre>……..</pre>Το κείμενο διατηρεί τη μορφοποίησή του<blockquote >…....</ blockquote>Το κείμενο ξεχωρίζει από το υπόλοιπο<q lang=“xx”> </q><q lang= xx >…….</q>Το κείμενο τοποθετείται συνήθως σε εισαγωγικά

Σε περίπτωση λάθους

Σωστά ονόματα των ετικετών (tags)Όλ l t έ l tΌλα τα elements έχουν close tags Όλα τα close tags είναι σωστά (δηλ. της

ή /h2 ή / )μορφής </h2> ή </p>) Τα elements δεν επικαλύπτονται (αυτό

ί ό δ έ ώδ ήσημαίνει ότι δεν έχουμε κώδικα της μορφής <h1><p>Περιεχόμενο παραγράφου</h1></p>)παραγράφου</h1></p>)

Style Sheets

<title>Οδηγός Θεσσαλονίκης</title><link rel="stylesheet" type="text/css"

href="style1.css" />y</head>

Χρώμα – Βασικές έννοιες

Το χρώμα στο χαρτί

Κύρια και δευτερεύοντα χρώματα στο μοντέλο CMYK

Το χρώμα στην οθόνη

Κύρια και δευτερεύοντα χρώματα στο μοντέλο RGB

Το πρότυπο sRGB

Τα χρώματα στο πρότυπο sRGB (Red Green Blue space)

Ορισμός χρωμάτων στο Web

Καθορισμός των χρωμάτων στο πρότυπο sRGB

Ορισμός χρωμάτων στο Web

Καθορισμός των βασικώνχρωμάτων

Καθορισμός των δευτερευόντων χρωμάτων

Καθορισμός αποχρώσεων του γκρι

Αριθμός χρωμάτων

256 (0-255) επίπεδα για καθένα από τα τρία βασικά χρώματα.Σύνολό 256 x 256 x 256 = 16 777 216Σύνολό 256 x 256 x 256 16,777,216 (16,8) χρώματα.24 bit ώ ή ό ώ24 bit χρώμα ή πραγματικό χρώμα (true color).Το ανθρώπινο μάτι δεν μπορεί να διακρίνει τόσα χρώματα στην οθόνηδιακρίνει τόσα χρώματα στην οθόνη.

Βάθος χρώματος

8 bit color = 28 = 258 χρώματα16 bit color = 216 = 65,536 χρώματα24 ή 32 bit color = 224 = 16 777 21624 ή 32 bit color = 224 = 16,777,216 χρώματα

Web safe colors

Ο κυβος με τα 216 “ασφαλή” χρώματαβ ς μ φ ή χρ μ

Χρώμα σε XHTML έγγραφα

Με χρήση CSS καθορίζουμε το χρώματου κειμένου ενός elementτου φόντου (background) ενός elementτου περιγράμματος (border) ενός elementτου περιγράμματος (border) ενός element

4 τρόποι δήλωσης ενός χρώματοςkeyword (red green blue κλπ)keyword (red, green, blue, κλπ)δεκαδική rgb τιμή (rgb(255,0,0) , rgb(0,255,0))ποσοστό rgb (rgb(100%,0%,0%) rgb(0%,100%,0%) )g ( g ( ) g ( ) )δεκαεξαδική rgb τιμή (#ff0000, #00ff00 )

16 Προκαθορισμένα χρώματα

Web safe colors σε δεκαεξαδική μορφή

Ο κυβος με τα 216 “ασφαλή” χρώματαβ ς μ φ ή χρ μ

Γραφικά στο Web

Βασικοί τύποι γραφικώνGIF, JPEG, PNG

Βασικοί τύποι γραφικών

Bitmaps (ράστερ)Πολλοί τύποι αρχείων

Vector (διανυσματικά )Οι browsers χρειάζονται ειδικόΠολλοί τύποι αρχείων

υποστηρίζονται από τους Browsers.Σ σ ώ α α φ ο ραφίες

Οι browsers χρειάζονται ειδικό πρόγραμμα (plug-in)για να τα δείξουνΣ ί άΣυνιστώνται για φωτογραφίες.

Δεν υπάρχει πρακτικά η δυνατότητα μεγέθυνσης

Συνίστανται για γραφικά που δημιουργούνται από υπολογιστές (σχέδια)Μ ί ί έθ ίΜεγάλο μέγεθος αρχείου,

ανάλογο του μεγέθους της εικόνας

Μπορεί να γίνει μεγέθυνση χωρίς να χαθεί η ποιότητα και η ευκρίνεια.Μικρό μέγεθος αρχείου, ανεξάρτητο

GIF, JPEG, PNG του μεγέθους της εικόναςFlash/SWF,SVG

Γραφικά τύπου Bitmap

GIF (Graphics Interchange Format)Συγκεκριμένος αριθμός χρωμάτων και συμπίεση χωρίς απώλειες (lossless).JPEG (Joint Photographic Experts Group)Πραγματικό χρώμα (16 8 εκατ ) καιΠραγματικό χρώμα (16,8 εκατ.) και συμπίεση με απώλειες (lossy).PNG (P t bl N t k G hi )PNG (Portable Network Graphic) Αντικαθιστά το GIF

Αρχεία GIF (.gif)

Μέχρι 256 χρώματαΚ άλλ λ ά ύ έ λίΚατάλληλο για γραφικά πού περιέχουν λίγα χρώματα (κείμενα, σχέδια, κλπ.)Υ ίζ “δ έ ” ώΥποστηρίζει “διαφανές” χρώμαΥποστηρίζει σταδιακή εμφάνιση της

ό (I t l i )εικόνας(Interlacing)Το μέγεθος του αρχείου εξαρτάται από τον

θ ό ά δ ά ( ήαριθμό των χρωμάτων, τις διαστάσεις (μήκος και πλάτος) της εικόνας και την πολυπλοκότητά τηςπολυπλοκότητά της

Αρχεία JPEG (.jpg)

24 bit χρώμα (πραγματικό χρώμα)Κατάλληλο για γραφικά πού περιέχουν πολλά χρώματα (φωτογραφίες, χρ μ (φ γρ φ ςτρισδιάστατα γραφικά)Διαφορετικά επίπεδα συμπίεσηςΔιαφορετικά επίπεδα συμπίεσηςΔεν υποστηρίζει “διαφανές” χρώμαΤ έ θ ί ξ ά όΤο μέγεθος του αρχείου εξαρτάται από τις διαστάσεις (μήκος και πλάτος) της

ό β θ ό ί ήεικόνας και το βαθμό συμπίεσής της

Αρχεία PNG (.png)

24 bit χρώμα, αποχρώσεις του γκρι ( l ) 8 bit (256) ώ(grayscale), 8 bit (256) χρώμα5-25% καλύτερη συμπίεση από το GIFΠολλά “διαφανή” χρώματαΠεριέχει πληροφορίες για “gamma correction”Περιέχει πληροφορίες για gamma correctionH σταδιακή εμφάνιση της εικόνας (Interlacing) είναι καλύτερηείναι καλύτερηΔεν υποστηρίζεται από παλιούς browsers

Εικόνες σε XHTML έγγραφα

Εισαγωγή στη σελίδαΟρισμός μεγέθουςΘέση στη σελίδαΘέση στη σελίδα

Εισαγωγή εικόνας στη σελίδα

φάκελος

όνομα του αρχείου

Εναλλακτικό κείμενο

Καθορισμός μεγέθους

Ο ορισμός των διαστάσεων βοηθάει στη γρηγορότερη εμφάνιση της σελίδας στο browser.Τις διαστάσεις της εικόνας τις βλέπουμε σε ένα πρόγραμμα επεξεργασίας γραφικών (π.χ Photoshop).Είναι προτιμότερο να αλλάζουμε τις διαστάσεις μιας εικόνας χρησιμοποιώντας ένα πρόγραμμα

ξ ί ώ ά bεπεξεργασίας γραφικών, παρά το browser.

Θέση της εικόνας στη σελίδα

H εικόνα στην αριστερή πλευρά της σελίδας:i "i / if" lt "Χά<img src="images/map.gif" alt="Χάρτης της Θεσσαλονικης" width="400" height="100" border="2"li "l f "align= "left" />H εικόνα στη δεξιά πλευρά της σελίδας:

Άλλες ιδιότητες (attributes)

Περίγραμμα<img src="images/map.gif" border= "2" />

Περιθώριο<img src="images/map gif" hspace= “10 "<img src images/map.gif hspace 10

vspace=“8" />

h i l δ ξ ά ά όhspace: pixels δεξιά και αριστερά της εικόναςvspace: pixels πάνω και κάτω της εικόνας

Συνδέσεις μεταξύ εγγράφων

Μορφές συνδέσεωνΕικόνες με «ενεργές» περιοχές

Συνδέσεις σε τοπικά έγγραφα

Όταν το έγγραφο στο οποίο κάνουμε τη σύνδεση βρίσκεται στον υπολογιστή μας, στο href=“” ορίζουμε τη «σχετική» διαδρομή απόυπολογιστή μας, στο href ορίζουμε τη σχετική διαδρομή από τη θέση όπου βρίσκεται το έγγραφο μας στο έγγραφο της σύνδεσης.Για παράδειγμα:Για παράδειγμα:<a href=“museums.html”>Τα μουσεία της Θεσσαλονίκης</a>το έγγραφο museums.html βρίσκεται στον ίδιο κατάλογο με το έγγραφό μας

<a href=“museums/byzantine.html”>Βυζαντινό μουσείο</a>το έγγραφο byzantine.html βρίσκεται στον κατάλογο museums

<a href=“ /index html”>Αρχική σελίδα</a><a href= ../index.html >Αρχική σελίδα</a>το έγγραφο index.html βρίσκεται στον προηγούμενο κατάλογο από αυτόν που βρίσκεται το έγγραφό μας

Συνδέσεις σε εξωτερικά έγγραφα

Όταν το έγγραφο στο οποίο κάνουμε τη σύνδεση βρίσκεται σε κάποιο άλλο υπολογιστή στο href=“” ορίζουμε την «απόλυτη»κάποιο άλλο υπολογιστή στο href ορίζουμε την απόλυτη θέση αυτού του εγγράφου.

http://www.urenio.org/courses/index.html

σχετική θέσηdomain

serverπρωτόκολλο

Για παράδειγμα:<a href=“http://www auth gr”>Αριστοτέλειο Πανεπιστήμιο</a><a href http://www.auth.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”>y

Αποστολή e-mail

Η εντολή:h f " ilt i f @ th " Ε ί /<a href="mailto:info@auth.gr">Επικοινωνία</a>

ανοίγει στο χρήστη ένα παράθυρο e-mail όπου μπορεί να γράψει το μήνυμά του και να το στείλει στηνα γράψει το μήνυμά του και να το στείλει στη διεύθυνση: info@auth.gr

Συνδέσεις με εικόνες

Για να κάνουμε μια εικόνα ενεργή (σύνδεση) χρησιμοποιούμε την εντολή:χρησιμοποιούμε την εντολή:

δίνοντας τη σχετική ή απόλυτη θέση της εικόνας

Εικόνα με «ενεργές» περιοχές

Για να κάνουμε συγκεκριμένες περιοχές μιας εικόνας ενεργές, ορίζουμε έναν «χάρτη» των περιοχών αυτών:

id “ ”<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=“” από τις συντεταγμένες της πάνω αριστερής και της κάτω δεξιάς γωνίας του.

l ί λύ ί ίζ d “” ό έpolygon σημαίνει πολύγωνο το οποίο ορίζεται στο coords=“” από τις συντεταγμένες των κορυφών του.circle σημαίνει κύκλος ο οποίος ορίζεται στο coords=“” από τις συντεταγμένες του κέντρου του και το μήκος της ακτίνας του.ρ μή ς ης ς

Χρήση Cascade Style Sheets

Χρήση σε XHML έγγραφα

Ένα αρχείο CSS περιέχει μια σειρά από εντολές(rules) που καθορίζουν τον τρόπο παρουσίασης των(rules) που καθορίζουν τον τρόπο παρουσίασης των στοιχείων της XHTML.Οι εντολές αυτές:Οι εντολές αυτές:

Βρίσκονται σε ένα αρχείο το οποίο συνδέεται σε μια XHTML σελίδα, ήμια XHTML σελίδα, ήΕνσωματώνονται στο XHTML έγγραφο

Σύνδεση αρχείου CSS

Τα αρχεία css συνδέονται με τρεις τρόπους σε ένα xhtml έγγραφο:

E t lExternal<head><link rel="stylesheet" type="text/css" media="all" href="style_sheets/style1.css" />y yp y _ y</head>

ή<head><head><style type="text/css" media="all">@import " style_sheets/style1.css ";</style></head>

Ενσωμάτωση εντολών CSS

Internal<h d><head>p {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1emfont size: 1em}h1 {font-size: 1.5em}}</head>

In-lineIn line<body style=“font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em”>

Δημιουργία CSS

Όπως στην XHTML έχουμε Tags στα CSS έχουμε Selectors

Selector Declaration

Selectors

h1 {color: white;}Property Value

Μονάδες

'em' (πχ font-size: 2em) περίπου ίσο με το ύψος ενός γράμματοςενός γράμματος'px' (πχ font-size: 12px) pixels'%' (πχ font size: 80%) ποσοστό επί της% (πχ font-size: 80%) ποσοστό επί της προκαθορισμένης τιμής'pt' (πχ font-size: 12pt) pointspt (πχ font-size: 12pt) points

Σχετικές τιμές: em, %χ ς μ ς ,Απόλυτες τιμές: px, pt

Χρώματα

Έχουμε στη διάθεσή μας 16,777,216 χρώματα.Μπορούμε να τα δηλώσουμε χρησιμοποιώντας ένα 'όνομα'Μπορούμε να τα δηλώσουμε χρησιμοποιώντας ένα όνομα , μία 'rgb' (red/green/blue) τιμή ή έναν 'δεκαεξαδικό' κωδικό. Για παράδειγμα:redredrgb(255,0,0)rgb(100%,0%,0%)#ff0000 ή #f00#ff0000 ή #f00Υπάρχουν 16 προκαθορισμένα χρώματα: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, , g y, g , , , y, , p p ,red, silver, teal, white, και yellow.Μπορούμε επίσης να χρησιμοποιήσουμε την τιμή transparent

Χρώματα

Τα χρώματα εφαρμόζονται χρησιμοποιώντας τις ιδιότητες colorκαι background-color πχ:και background color πχ:

body { color: yellow;color: yellow;background-color: blue;

} h1 {

color: #ffc;background color: #009;background-color: #009;

}

Κείμενο

Μπορούμε να αλλάξουμε το μέγεθος και τη μορφή του κειμένου χρησιμοποιώντας μια σειρά από ιδιότητες όπως:χρησιμοποιώντας μια σειρά από ιδιότητες όπως:

font-family (όλες οι γραμματοσειρές)font-family: arial, helvetica ή font-family: Georgia, "Times New Roman", seriffont-sizefont weight (bold ή normal)font-weight (bold ή normal)font-style (italic ή normal)text-decoration (overline, line-through, underline, none)( , g , , )text-transform (capitalize, uppercase, lowercase, none)

Κείμενο

body { font-family: verdana arial helvetica serif;font family: verdana, arial, helvetica, serif;font-size: 0.8em;

} h1 { font-size: 2em; } h2 { font-size: 16px; } a { te t decoration none }a { text-decoration: none; } strong {

font-style: italic;font style: italic; text-transform: uppercase;

}

Κείμενο

letter-spacing και word-spacing (τιμή ή normal)line-height: ύψος μιας γραμμής (τιμή ποσοστό ήline height: ύψος μιας γραμμής (τιμή, ποσοστό ή normal)text-align (left, right, center ή justify)t t i d t ή ώ ήtext-indent: εσοχή της πρώτης γραμμής μιας παραγράφου (τιμή ή ποσοστό)

p { p {letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5em;line height: 1.5em; text-align: center;

}

Περιθώρια και περιγράμματα

Margin boxMargin box

Border box

Padding boxgElement box

Περιθώρια

Margin: Διάστημα έξω από το περίγραμμα έτου αντικειμένου.

Padding: Διάστημα ανάμεσα στο περίγραμμα και το αντικείμενο.margin, margin-top, margin-right, margin-g , g p, g g , gbottom, margin-left.padding padding-top padding-rightpadding, padding top, padding right, padding-bottom, padding-left.

Περιγράμματα

border-style: Καθορίζει το είδος του περιγράμματος (solid dotted dashed doubleπεριγράμματος (solid, dotted, dashed, double, groove, ridge, inset, outset).border-width: Καθορίζει το πάχος τουborder-width: Καθορίζει το πάχος του περιγράμματος. Μπορούμε να καθορίσουμε το πάχος της κάθε πλευράς χωριστά (border-top-ς ς ς (width, border-right-width, border-bottom-width, border-left-width).border-color: Καθορίζει το χρώμα του περιγράμματος.

Παράδειγμα

h1 {background-color: #DDEEBA;background color: #DDEEBA;border-style: solid;border-width: 2px;border-color: #81BD35;color: #038D03;font si e 1 6emfont-size: 1.6em;font-weight: bold;padding: 1em;padding: 1em;margin: 1em 0 1em 0;

}

Συνδέσεις

a:link { color: blue; } a:visited { color: purple; } a:active { color: red; } { ; }a:hover {

text-decoration: none;text decoration: none; color: blue; background-color: yellow;background color: yellow;

}

Συγκερασμός ιδιοτήτων

Πολλές φορές μπορούμε με μια ακολουθία τιμών να περιγράψουμε ιδιότητες των CSS χωρίς να τις αναφέρουμε. Οι τιμές πρέπει να χωρίζονται με κενά. Π.χ.:Αντί γιαp {

border-top-width: 1px; border right width: 5px;border-right-width: 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; }p { font: italic bold 1em/1.5 courier; } (Η τιμή 1.5 αφορά την ιδιότητα line-height)

Εικόνες στο φόντο

Τα css μας δίνουν μεγάλη ευελιξία στο χειρισμό των εικόνων που τοποθετούμε στο φόντο.background-color : χρώμαbackground-image : url(θέση της εικόνας) background repeat : τρόπος επανάληψης της εικόναςbackground-repeat : τρόπος επανάληψης της εικόναςrepeat, repeat-y, repeat-x, no-repeatbackground-position: θέση της εικόνας στη σελίδαtop center bottom left righttop, center, bottom, left, rightΓια παράδειγμαbody {{background: white url(images/bg.gif) no-repeat top right;}

Πίνακες σε XHTML έγγραφα

Δημιουργία πίνακα

t bl<table>

<tr>

<td>(γραμμή/

row)(κελί/cell)

Ο κώδικας<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>

Ιδιότητες

widthwidth

cellpaddingp g

border

cellspacingcellspacing

Ο κώδικας<html><head><title></title><style type="text/css" media="screen"><style type= 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>

b d<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 Κελί 2 </td><td>Σειρά 2 Κελί 3 </td></tr></table></body></ht l></html>

Πολύπλοκοι πίνακες

<td>

Ο κώδικας<table width="500" align="center" cellpadding="10" cellspacing="6"><tr><td colspan="4"></td></tr></tr><tr><td rowspan="2"></td><td></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><td colspan 3 rowspan 2 ></td></tr><tr><td></td></tr></t bl ></table>

Ιδιότητες πίνακα, κελιών

width: μήκος πίνακα ή κελιού (αυτόματο)border: περίγραμμα πίνακα ή κελιού (0)border: περίγραμμα πίνακα ή κελιού (0)cellspacing: απόσταση μεταξύ των κελιών (2px)cellpadding: απόσταση του περιεχομένου ενός p g η ρ χ μ ςκελιού από το περίγραμμα του κελιού (2px)colspan: αριθμός των στηλών που καταλαμβάνει ένα κελίένα κελίrowspan: αριθμός των γραμμών που καταλαμβάνει ένα κελίalign: οριζόντια στοίχιση, left – center -rightvalign: κατακόρυφη στοίχιση του περιεχομένου ό λ ύ t iddl b ttενός κελιού, top – middle - bottom

Recommended