new Ψηφιακές και ευφυείς πόλεις: Έννοιες ...css_v3.pdf · 2014. 4....

Εισαγωγή σε HTML και CSS

Παναγιώτης Τσαρχόπουλος

Περιεχόμενα

• Εισαγωγικές έννοιες

• Ορολογία και σύνταξη

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

• Σύνδεσμοι

• Εικόνες

Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2

Εισαγωγικές έννοιες


Τι είναι

• HTML (HyperText Markup Language)

Xρησιμοποιείται για να περιγράψει

(δομήσει) το περιεχόμενο σε μια

ιστοσελίδα

• CSS (Cascading StyleSheets)

Xρησιμοποιούνται για τη μορφοποίηση

του δομημένου περιεχομένου της

ιστοσελίδας


HTML vs CSS

HTML

Δομή και σημασία

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

• Κείμενο

• Εικόνες

• Συνδέσεις

• Βίντεο

CSS

Στυλ και εμφάνιση

• Μέγεθος, χρώμα,

γραμματοσειρά κειμένου

• Χρώμα φόντου

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

• Περιθώρια

• Έντονα, πλαγιαστά,

υπογραμμισμένα

γράμματα


Ίδιο περιεχόμενο, διαφορετική

εμφάνιση

Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS

Βιβλίο

Web

6

Ίδια εμφάνιση, διαφορετικό

περιεχόμενο


Βιβλίο

Web

7

Πλεονεκτήματα από τον διαχωρισμό

HTML & CSS

• Δυνατότητα για τον ταυτόχρονο έλεγχο της διάταξης

(layout) πολλών εγγράφων από ένα μόνο αρχείο css, με

συνέπεια:

– Ταχύτερη ανάπτυξη καθώς developers και designers

δουλεύουν ταυτόχρονα

– Ευκολία στην αναβάθμιση του κώδικα

• Φορητότητα καθώς είναι δυνατή η εφαρμογή

διαφορετικής διάταξης σε διαφορετικές εξόδους

(οθόνη, εκτυπωτής) ή συσκευές (Η/Υ, tablet, κινητό).

• Προσβασιμότητα με χρήση css του χρήστη


Ορολογία και σύνταξη


Δημιουργία αρχείων HTML

• Χρησιμοποιούμε έναν απλό κειμενογράφο

(Notepad, Notepad++, κλπ.)

• Ο κώδικας έχει τη μορφή απλού κειμένου

• Τα αρχεία έχουν κατάληξη .html

• Για να δούμε το αποτέλεσμα χρειαζόμαστε

ένα browser (π.χ. Firefox, Chrome, Internet

Explorer, Safari, κλπ.)

• Ο κώδικας τρέχει και τοπικά


Η πιο απλή σελίδα HTML


Ένα αρχείο με

κατάληξη .html

(όχι .html.txt)

που περιέχει

σκέτο κείμενο

11

Βασικοί όροι της HTML

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

• Τα elements περιέχουν:

– Πληροφορίες – κείμενο, εικόνες, βίντεο, κλπ.

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

– Άλλα elements

• Κάθε element, γενικά, αποτελείται από:

– Ετικέτες, περιεχόμενο και παραμέτρους

• Έχουμε δύο ειδών elements:

– Non empty

– Empty


Tags (Ετικέτες)

Η HTML χρησιμοποιεί ένα αριθμό από ετικέτες

(tags) για την μορφοποίηση κειμένου, τη

δημιουργία συνδέσμων (links) μετάβασης

ανάμεσα στις ιστοσελίδες, την εισαγωγή εικόνων,

ήχου κ.α. Όταν ένας browser ανοίγει ένα αρχείο

HTML οι ετικέτες μεταφράζονται σε κατάλληλα

χαρακτηριστικά με αποτελέσματα στην εμφάνιση

και στην λειτουργικότητα της συγκεκριμένης

σελίδας.


Tags (Ετικέτες)

…

• Κάθε ετικέτα έχει όνομα: h1

• Κάθε ετικέτα πρέπει να ανοίγει:

• Κάθε ετικέτα πρέπει να κλείνει:

• Ανάμεσα στο άνοιγμα και το κλείσιμο βρίσκεται το

περιεχόμενο της ετικέτας.

• Υπάρχουν ετικέτες χωρίς περιεχόμενο (π.χ.


Attributes (Παράμετροι)

Με τον όρο Attributes αναφερόμαστε σε

παραμέτρους που χρησιμοποιούνται για να

δώσουν επιπλέον πληροφορίες στα

Elements. Συνήθως οι παράμετροι

χρησιμοποιούνται για να ορίσουν ένα id,

class, ή title σε ένα element, να καθορίσουν

την πηγή (source) για τα media elements, ή

να ορίσουν την αναφορά (href) σε μια

υπερσύνδεση.


Η ανατομία ενός Element

Αριστοτέλειο Πανεπιστήμιο


Αριστοτέλειο Πανεπιστήμιο

Opening tag Closing tag

Attribute Content

16

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

Όλα τα έγγραφα HTML έχουν μια συγκεκριμένη

δομή η οποία περιλαμβάνει:

doctype: Τοποθετείται στην αρχή της σελίδας και

δηλώνει την έκδοση της html που χρησιμοποιείται

html: Δηλώνει την αρχή και το τέλος της σελίδας.

head: Περιέχει meta-πληροφορίες (metadata) για τη

σελίδα (τίτλος, λέξεις κλειδιά, κλπ.), και

ενσωματώνει εξωτερικά αρχεία. Δεν είναι ορατό.

body: Περιέχει το περιεχόμενο της σελίδας


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

Ιεραρχική δομή

• Ένα tag μπορεί να περιέχει άλλα tags

• Τα tags δημιουργούν μια ιεραρχική δομή.

• Ό,τι ανοίγει πρώτο κλείνει τελευταίο


Η πρώτη μου σελίδα

Αυτή είναι η πρώτη μου html σελίδα.

Τα tags h1 και p περιέχονται στο tag body

19

Σχέσεις ανάμεσα στα tags

• Α πατέρας του Β (parent)

– Α περιέχει άμεσα το Β

• Α παιδί του Β (child)

– Α περιέχεται άμεσα στο Β

• Α πρόγονος του Β (ancestor)

– Α περιέχει το Β

• Α απόγονος του Β (descendant)

– A περιέχεται στο Β

• Α αδερφός του Β (sibling)

– Α έχει κοινό πατέρα με το Β


Βασικοί όροι των CSS

• Selector (Επιλογέας): Καθορίζει σε ποια elements

της HTML θα εφαρμοστούν οι κανόνες CSS.

• Declaration (Δήλωση): Καθορίζει το στυλ που θα

εφαρμοστεί. Αποτελείται από το όνομα μιας

ιδιότητας (Property) και την τιμή της (Value).


selector (επιλογέας) {

property (ιδιότητα): value (τιμή);

}

21

Με έναν κανόνα μπορούμε να καθορίζουμε πολλούς selectors

Δομή και σύνταξη CSS


body {

font-size: 12px;

color: white;

background-color: black;

}

Selector

Properties Values

Declarations

22

Σχόλια σε αρχεία HTML και CSS

Τα σχόλια χρησιμοποιούνται για την

επεξήγηση του κώδικα, ώστε αυτός να είναι

κατανοητός όχι μόνο από τρίτους αλλά και

από τον ίδιο το συγγραφέα στο μέλλον. Δεν

είναι εμφανή στον επισκέπτη της σελίδας.

• Τα σχόλια στην HTML αρχίζουν με

και τελειώνουν με -->

• Τα σχόλια στα CSS αρχίζουν με /* και

τελειώνουν με */


Ενσωμάτωση CSS στην HTML

Η ενσωμάτωση των CSS γίνεται με 3 τρόπους:

p {

color: blue;

font-size: 16px;

}

Lorem ipsum dolor...


Ο πιο ορθός τρόπος

24

Διαδοχικότητα (Cascading) στα CSS

• Μπορούμε σε ένα έγγραφο HTML να ενσωματώσουμε

πολλαπλά αρχεία css.

• Όσο πιο κοντά είναι μια δήλωση σε ένα HTML tag τόσο

πιο ισχυρή είναι. Για παράδειγμα στην προηγούμενη

διαφάνεια το κείμενο της παραγράφου:

θα είναι κόκκινο ενώ το υπόλοιπο κείμενο του

εγγράφου θα είναι μπλε.

• Αν μια ιδιότητα δεν προσδιορίζεται κληρονομείται από

τον πρόγονο που την έχει.


Επικεφαλίδες, Παράγραφοι, Λίστες, Μορφοποίηση

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


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

6 επικεφαλίδες, h1 έως h6

επικεφαλίδα 1


…



Η επικεφαλίδα h1 χρησιμοποιείται μόνο 1

φορά σε κάθε σελίδα

27

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


28

Παράγραφοι

• Η HTML αγνοεί τις τόσο τις αλλαγές γραμμών

όσο και τα κενά. Τα αντικαθιστά με ένα κενο.

• Για αλλαγή γραμμής


Αυτή είναι η πρώτη μου σελίδα.


Είμαι πολύ χαρούμενος!

Αυτή είναι η πρώτη μου σελίδα. Είμαι πολύ χαρούμενος!

29

Λίστες

Αριθμημένες

................

................

................

................

Μη αριθμημένες

................

................

................

................


Λίστες ορισμών

...............

..............

...............

……………

30

Λίστες μέσα σε λίστες (Εμφώλευση)

…….

…….

…….


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

• …….

Συνήθως έντονη γραφή

• ………

Συνήθως πλάγια γραφή

• ……..

Το κείμενο διατηρεί τη μορφοποίησή του

• …....

Το κείμενο ξεχωρίζει από το υπόλοιπο


Το χρώμα

• color: Ορίζει το χρώμα του κειμένου

• background-color: Ορίζει το χρώμα του φόντου

• border-color: Ορίζει το χρώμα του περιγράμματος


Αυτή είναι η πρώτη μου

σελίδα.

p {

color: white;

background-color: gray;

border-color: black

}


33

Δημιουργία χρώματος


Χαρτί Οθόνη

Μοντέλο CMYK Μοντέλο RGB

34

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


Δήλωση χρώματος

• 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 Προκαθορισμένα χρώματα


Χρώματα RGB


#951905

κόκκινος συντελεστής

πράσινος συντελεστής

μπλε συντελεστής

p, h1 {

color: #ffee66;

background-color: #951905;

}

Αυτή είναι η πρώτη μου

σελίδα.

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)


Ιδιότητες γραμματοσειράς (συνέχεια)

• Παραλλαγές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, %)


Ιδιότητες γραμματοσειράς -

Συντομογραφία

• Οι ιδιότητες της γραμματοσειράς μπορούν να γραφούν

πιο σύντομα με τη χρήση της ιδιότητας font

ακολουθούμενης από τις τιμές με την παρακάτω σειριά:

font-style, font-variant, font-weight, font-size, line-

height, και font-family

• Δε χρησιμοποιούμε κόμμα παρά μόνο ανάμεσα στα

ονόματα των γραμματοσειρών, ενώ χρησιμοποιούμε το

“/” για να χωρίσουμε το font-size με το line-height.

• Υποχρεωτικές μόνο οι τιμές font-size και font-family.


p {

font: italic small-caps bold 13px/20px Arial, Helvetica, sans-serif;

}

Άλλες ιδιότητες του κειμένου

• Στοίχιση

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)


Άλλες ιδιότητες του κειμένου

(συνέχεια)

• Μετασχηματισμός

text-transform: uppercase; (none, capitalize,

uppercase, lowercase, and inherit.)

• Απόσταση μεταξύ των γραμμάτων

letter-spacing: -.5em; (px, em, pt, %,)

• Απόσταση μεταξύ των λέξεων

word-spacing: .25em; (px, em, pt, %,)


Σύνδεσμοι (Hyperlinks)


Σύνδεσμοι (Hyperlinks)

URENIO

• : ορίζει το σύνδεσμο

• href: ορίζει τη διεύθυνση

• Η διεύθυνση μπορεί να είναι απόλυτη ή σχετική

– Η απόλυτη ξεκινά με το πρωτόκολλο

(http://www.auth.gr, https://twitter.com/IntelCities)

– Η σχετική ορίζεται ως προς τη θέση του εγγράφου

που την περιέχει (lessons/, lessons/digital-city.html)


Σύνδεσμοι (συνέχεια)

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

Επιστροφή στην αρχή

…

• Συνδέσεις σε διευθύνσεις Email

Αποστολή Email

• Άνοιγμα σε νέο παράθυρο

URENIO Website


Εικόνες


Εικόνες – Μέγεθος

Για να ορίσουμε το πλάτος και το ύψος μιας

εικόνας:

• Χρησιμοποιούμε τις παραμέτρους width και

height της HTML, ή

• Χρησιμοποιούμε τις ιδιότητες width και height

των CSS


Εικόνες – Θέση

Οι εικόνες μπορούν να τοποθετηθούν στη σελίδα

με διάφορους τρόπους:

• Σε σειρά με το κείμενο (inline)

• Μόνες τους (block)

• Μόνες τους στο κέντρο

• Δεξιά του κειμένου (right)

• Αριστερά του κειμένου (left)

Χρησιμοποιούνται οι εξής ιδιότητες των CSS:

float, display, margin, padding, και border.


Εικόνες – Θέση - Inline

Η πόλη της Θεσσαλονίκης έχει ένα αρκετά εκτεταμένο κέντρο, στο οποίο

συγκεντρώνονται τα περισσότερα καταστήματα, δημόσιες υπηρεσίες, αξιοθέατα και

χώροι αναψυχής. Η έκτασή του μπορεί να οριστεί ανατολικά από το

συγκρότημα του 3ου Σώματος Στρατού, δυτικά από την πλατεία Δημοκρατίας (πρώην

Πλατεία Βαρδαρίου), βόρεια …


Εικόνες – Θέση - Block

img {

display: block;

}


Εικόνες – Θέση – Block – Στο κέντρο

img {

display: block;

margin: 10px auto;

}


Εικόνες – Θέση – Δεξιά, Αριστερά

img {

background: #e8eae9;

border: 1px solid #c6c9cc;

float: right;

margin: 8px 0 0 20px;

padding: 4px;

}


Οργάνωση δεδομένων με πίνακες


HTML

Ιδιότητες Πίνακα


Σειρά 1 Κελί 1






table {border: 4px solid #000; background: #96B45A;}

td{font: 16px "arial black", sans-serif; border: 1px solid #000; background: #CDDFA9;}

HTML

CSS

Σύνθετοι Πίνακες


HTML

Ιδιότητες Πινάκων και Κελιών

width: μήκος πίνακα ή κελιού (αυτόματο)

border: περίγραμμα πίνακα ή κελιού (0)

cellspacing: απόσταση μεταξύ των κελιών (2px)

cellpadding: απόσταση του περιεχομένου ενός κελιού

από το περίγραμμα του κελιού (2px)

colspan: αριθμός των στηλών που καταλαμβάνει ένα κελί

rowspan: αριθμός των γραμμών που καταλαμβάνει ένα

κελί

align: οριζόντια στοίχιση, left – center -right

valign: κατακόρυφη στοίχιση του περιεχομένου ενός

κελιού, top – middle - bottom


new Ψηφιακές και ευφυείς πόλεις: Έννοιες ...css_v3.pdf · 2014. 4....

Documents