CSS Forms

CSS Forms

Η εμφάνιση μιας HTML φόρμας μπορεί να γίνει πολύ ποιο ωραία με τη χρήση CSS.

 

Δοκιμάστε!

 

CSS Tooltips

CSS Tooltips

Ένα Tooltip χρησιμοποιείται συχνά για επιπλέον πληροφορίες σχετικά με κάτι όταν ο χρήστης μετακινεί το δείκτη του ποντικιού πάνω από ένα στοιχείο.

 

Δοκιμάστε!

 

CSS dropdown μενού

CSS dropdown μενού

Σε αυτή την ανάρτηση θα δούμε πως μπορούμε να δημιουργήσουμε εύκολα ένα αναπτυσσόμενο μενού που θα εμφανίζεται όταν ο χρήστης μετακινεί το ποντίκι από πάνω του.

 

Δοκιμάστε!

 

CSS μενού πλοήγησης

CSS μενού πλοήγησης

Σε αυτή την ανάρτηση θα δούμε πως μπορούμε να δημιουργήσουμε εύκολα ένα μενού πλοήγησης με CSS. Είναι πολύ σημαντικό σε μία ιστοσελίδα η ευκολία πλοήγησης. Με τη CSS μπορείτε να φτιάξετε όμορφα μενού σε σχέση με την HTML. Ένα μενού πλοήγησης είναι βασικά μια λίστα από συνδέσμους με ul και li στοιχεία.

 

Δείτε πως μπορείτε να δημιουργείστε ένα κάθετο μενού πλοήγησης:

Δοκιμάστε!

 

Δείτε πως μπορείτε να δημιουργείστε ένα οριζόντιο μενού πλοήγησης:

Δοκιμάστε!

 

Δείτε πως μπορείτε να δημιουργείστε ένα οριζόντιο fixed(παραμένει στην αρχή της σελίδας ή το τέλος όταν ο χρήστης κάνει scroll) μενού πλοήγησης:

Δοκιμάστε!

 

CSS Pseudo-elements

CSS Pseudo-elements

Τα pseudo-elements χρησιμοποιούνται για να αλλάξουν το στυλ ενός μέρους από ένα στοιχείο(το πρώτο γράμμα, ή τη πρώτη γραμμή) ή να προσθέσουν κείμενο πριν και μετά από ένα στοιχείο.

 

Δοκιμάστε!

 

CSS Combinators

CSS Combinators

Με την έννοια combinator εννοούμε την περιγραφή της σχέσης μεταξύ των στοιχείων CSS. Μπορούμε να έχουμε πάνω από ένα στοιχεία που περιλαμβάνουν ένα combinator. Υπάρχουν τέσσερις διαφορετικοί combinators στην CSS3 [descendant selector (το κενό), child selector (>), adjacent sibling selector (+), general sibling selector (~)].

 

Δοκιμάστε!

 

CSS Pseudo-classes

CSS Pseudo-classes

Μία pseudo-class(ψευδή-κατηγορία) χρησιμοποιείται για να ορίσει μια ειδική κατάσταση ενός στοιχείου. Για παράδειγμα , μπορεί να χρησιμοποιηθεί για να αλλάξουμε το στυλ από ένα στοιχείο όταν ο χρήστης περνάει το ποντίκι από πάνω του. Να αλλάξουμε το στυλ από κάποιες συνδέσεις. Να αλλάξουμε το στυλ από ένα στοιχείο όταν εστιάζουμε σε αυτό.

 

Δοκιμάστε!

 

CSS – Η ιδιότητα position

CSS – Η ιδιότητα position

Η ιδιότητα position, καθορίζει τη θέση ενός στοιχείου(static, relative, fixed or absolute). Τα στοιχεία στη συνέχεια τοποθετούνται χρησιμοποιώντας τις ιδιότητες top, bottom, left, και right(εκτός από την static).

 

Δοκιμάστε!

 

CSS – Η ιδιότητα display

CSS – Η ιδιότητα display

Η ιδιότητα display είναι η πιο σημαντική ιδιότητα για τον έλεγχο της διάταξης μιας ιστοσελίδας, καθορίζει αν και πώς εμφανίζεται ένα στοιχείo. Κάθε στοιχείο HTML έχει μια προεπιλεγμένη τιμή ανάλογα με τον τύπο του. Η προεπιλεγμένη τιμή για τα περισσότερα στοιχεία είναι το block ή το inline, που μπορούμε να την αλλάξουμε με εντολές CSS.

 

Δοκιμάστε!

 

CSS Tables

CSS Tables

Η εμφάνιση ενός πίνακα σε HTML μπορεί να βελτιωθεί σημαντικά με CSS.

Για να καθορίσετε το περίγραμμα ενός πίνακα, χρησιμοποιήστε την ιδιότητα border.

Το πλάτος και το ύψος ενός πίνακα ορίζονται από τις ιδιότητες width και height.

Η ιδιότητα text-align ορίζει την οριζόντια ευθυγράμμιση ( όπως αριστερά , δεξιά ή στο κέντρο ) και η vertical-align ορίζει την κατακόρυφη στοίχιση ( όπως πάνω, κάτω , ή μεσαίο ) του περιεχομένου σε th ή td.

Για να ελέγξετε το χώρο μεταξύ των περιγραμμάτων και του περιεχομένου σε έναν πίνακα , χρησιμοποιήστε την ιδιότητα padding σε td και th.

Προσθέστε border-bottom σε th και td για οριζόντια διαχωριστική γραμμή.

Χρησιμοποιήστε το hover σε tr για να επισημάνετε σειρές του πίνακα όταν περνάει το ποντίκι από πάνω τους.

Για ζέβρα – ριγέ πίνακες , χρησιμοποιήστε το nth-child() και προσθέσετε ένα background-color σε όλες τις ζυγές (ή μονές) σειρές του πίνακα.

Ένας responsive πίνακας θα εμφανίσει μια οριζόντια γραμμή κύλισης , αν η οθόνη είναι πολύ μικρή για να εμφανιστεί το πλήρες περιεχόμενο. Προσθέστε ένα div με overflow-x:aut γύρω από το table για να γίνει responsive.

 

Δοκιμάστε!

 

CSS Lists

CSS Lists

Οι ιδιότητες CSS για λίστες(lists) σας επιτρέπουν να ορίστε διαφορετικούς Markers(circle, square, upper-roman, lower-alpha), μπορείτε ακόμη να ορίστε μια εικόνα και να προσθέστε χρώματα φόντου.

 

Δοκιμάστε!

 

CSS Links

CSS Links

Οι σύνδεσμοι με CSS μπορούν να οριστούν με διάφορους τρόπους(π.χ. color,font-family,background,..). Επιπλέον , μπορούν να οριστούν με διαφορετικό τρόπο ανάλογα σε ποια κατάσταση βρίσκονται(a:link – κανονικός σύνδεσμος, a:visited – σύνδεσμος που έχει επισκεφτεί ο χρήστης, a:hover – σύνδεσμος όταν ο χρήστης μετακινεί τα ποντίκι πάνω του, a:active – σύνδεσμος τη στιγμή που γίνεται κλικ. Κατά τη ρύθμιση του στυλ ανάλογα με την κατάσταση, πρέπει να ακολουθείτε η εξής σειρά δήλωσης -> a:link, a:visited, a:hover, a:active.

Η ιδιότητα text-decoration χρησιμοποιείται για την αφαίρεση της υπογράμμισης από τους συνδέσμους. Η ιδιότητα Background Color χρησιμοποιείται για το χρώμα φόντου των συνδέσμων. Μπορούμε να συνδυάσουμε πολλές ιδιότητες CSS για την εμφάνιση links, όπως κουμπιά.

 

Δοκιμάστε!

 

CSS Backgrounds

CSS Backgrounds

Οι ιδιότητες του background(φόντου) είναι: background-color(χρώμα του φόντου), background-image(εικόνα σαν φόντο), background-repeat(επανάληψη εικόνας οριζόντια ή κάθετα ή χωρίς επανάληψη), background-attachment (εικόνα σε σταθερή θέση), background-position (θέση της εικόνας).

 

Δοκιμάστε!

 

CSS – Cascading Style Sheets

Τι είναι τα CSS – Cascading Style Sheets

Τα CSS περιγράφουν τον τρόπο με τον οποίο τα στοιχεία HTML θα εμφανίζονται στην οθόνη, στο χαρτί ή σε άλλα μέσα.
Τα CSS μας γλυτώνουν από πολλή δουλειά γιατί μπορούμε να ελέγξουμε τη διάταξη πολλών ιστοσελίδων μόνο με ένα αρχείο CSS. Οι εντολές CSS αποτελούνται από έναν επιλογέα και ένα μπλοκ δηλώσεων.Ο επιλογέας είναι το στοιχείο HTML που θέλετε να εφαρμόσετε το στυλ. Το μπλοκ δηλώσεων περιέχει μία ή περισσότερες δηλώσεις που διαχωρίζονται με ερωτηματικά, κάθε δήλωση περιλαμβάνει ένα όνομα ιδιότητας CSS και μια τιμή, που χωρίζονται από μια άνω και κάτω τελεία. Μια δήλωση CSS τελειώνει πάντα με ένα ερωτηματικό, και τα μπλοκ δηλώσεων περιβάλλονται από αγκύλες.

Υπάρχουν δύο είδη επιλογέων:
1. Ο επιλογέας id που χρησιμοποιεί το id ενός στοιχείου HTML για να το επιλέξει και πρέπει να είναι μοναδικό μέσα σε μια σελίδα. Για να επιλέξετε ένα στοιχείο με συγκεκριμένη id, πρέπει να γράψετε ένα ( # ) χαρακτήρα, ακολουθούμενο από το id.
2. Ο επιλογέας class που επιλέγει στοιχεία με ένα συγκεκριμένο χαρακτηριστικό. Για να επιλέξετε στοιχεία με μια συγκεκριμένη class, πρέπει να γράψετε μία τελεία (.), ακολουθούμενη από το όνομα της class.

Μπορείτε επίσης να καθορίσετε ότι μόνο συγκεκριμένα στοιχεία HTML θα πρέπει να επηρεαστούν από μια class και ακόμα στοιχεία HTML μπορούν να αναφέρονται σε περισσότερες από μία class. Αν έχετε στοιχεία HTML με την ίδια class θα ήταν καλύτερα να ομαδοποιηθούν οι επιλογείς για την ελαχιστοποίηση του κώδικα(διαχωρίστε κάθε επιλογέα με κόμμα).

Δοκιμάστε!

 

Πως προσθέτουμε CSS, γραμματοσειρές, χρώματα, border, padding, margin

Μπορείτε να δείτε πως προσθέτουμε CSS, πως ορίζουμε και μορφοποιούμε γραμματοσειρές και τι είναι το Box Μοντέλο(border, padding, margin) σε προηγούμενη ανάρτηση. Δείτε ακόμη πως εμφανίζουμε και αλλάζουμε χρώματα σε προηγούμενη ανάρτηση.

 

HTML Στυλ – CSS, γραμματοσειρές, Box Μοντέλο, id, class.

internet-594148_1280

HTML Στυλ – CSS

CSS σημαίνει Cascading Style Sheets.
Μπορείτε να προσθέσετε CSS με τους παρακάτω τρόπους:

1. Inline – χρησιμοποιώντας ένα χαρακτηριστικό στυλ στα στοιχεία HTML

Δοκιμάστε!

 

2. Εσωτερική – χρησιμοποιώντας ένα style στοιχείο στην ενότητα head

Δοκιμάστε!

 

3. Εξωτερικές – χρησιμοποιώντας ένα ή περισσότερα εξωτερικά αρχεία CSS.
Ένα εξωτερικό αρχείο CSS μπορεί να γραφεί σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου .
Το αρχείο δεν πρέπει να περιέχει καθόλου html tags.
Το αρχείο αρχείο CSS πρέπει να αποθηκεύονται με την επέκταση .css

Δοκιμάστε!

 

CSS – γραμματοσειρές
Το color ορίζει το χρώμα του κειμένου.
Το font-family καθορίζει τη γραμματοσειρά.
To font-size καθορίζει το μέγεθος του κειμένου.

Δοκιμάστε!

 

CSS – Box Μοντέλο
Κάθε στοιχείο HTML έχει ένα αόρατο κουτί γύρω του.
Το border καθορίζει το περίγραμμα.
Το padding ορίζει το κενό στο εσωτερικό του περιγράμματος.
Το margin ορίζει το κενό στο εξωτερικό του περιγράμματος.

Δοκιμάστε!

 

CSS – id 
Για να ορίσετε ένα ιδιαίτερο στυλ για ένα συγκεκριμένο στοιχείο HTML, πρέπει να προσθέσετε το id του.

CSS – class
Για να ορίσετε ένα στυλ για μία κατηγορία στοιχείων HTML, προσθέστε την class του.

Δοκιμάστε!

 

Καλή επιτυχία.

Μαθήματα προγραμματισμού και σχεδιασμού ιστοσελίδων – HTML αρχεία, επικεφαλίδες, παράγραφοι, σύνδεσμοι, εικόνες.

website-647013_1920

Θα ξεκινήσουμε μία σειρά μαθημάτων προγραμματισμού και σχεδιασμού ιστοσελίδων για ηλικίες από 6 μέχρι 106 ετών. Ο προγραμματισμός είναι για όλους, όχι μόνο για αυτούς που τελειώσαν μία σχολή πληροφορικής. Τα παιδιά μας πρέπει να ξεκινήσουν να μαθαίνουν γλώσσες προγραμματισμού από το δημοτικό. Κατά την έναρξη του σχολικού έτους το 2014 τα κρατικά σχολεία της Αγγλίας άρχισαν να διδάσκουν στους μαθητές τους αλγορίθμους. Αποφάσισαν ότι το πρόγραμμα σπουδών του κρατικού σχολείου πρέπει να εμπλουτισθεί με την εκμάθηση προγραμματισμού. Πιστεύουν ότι τα παιδιά δεν πρέπει μόνο να καταναλώνουν την τεχνολογία, αλλά να τη δημιουργούν. Να σταματήσουν να χάνουν το χρόνο τους στα κοινωνικά δίκτυα αλλά να δημιουργούν τα δικά τους προγράμματα. Τα πρώτα μαθήματα μας  είναι στις γλώσσες HTML, CSS και Javascript που είναι απαραίτητες για την δημιουργία ιστοσελίδων.

Τί είναι η HTML;
Η HTML είναι μια γλώσσα σήμανσης(markup) για την περιγραφή των ιστοσελίδων.
HTML σημαίνει Hyper Text Markup Language.
Μια γλώσσα σήμανσης είναι ένα σύνολο από ετικέτες σήμανσης.
Τα έγγραφα HTML περιγράφονται με ετικέτες HTML.
Κάθε ετικέτα HTML περιγράφει διαφορετικό περιεχόμενο του εγγράφου.

HTML Αρχεία
Τα HTML αρχεία ξεκινάνε με <html> και τελειώνουν με </html>.
Τα ορατά μέρη του HTML κειμένου βρίσκονται μεταξύ του <body> και </body>.

Δοκιμάστε!

 

HTML Επικεφαλίδες
Οι επικεφαλίδες HTML ορίζονται με τις ετικέτες < h1 > έως < h6 >.

Δοκιμάστε!

 

HTML παράγραφοι
Οι παράγραφοι HTML ορίζονται με την ετικέτα < p >.

Δοκιμάστε!

 

HTML Σύνδεσμοι
Οι παράγραφοι HTML ορίζονται με την ετικέτα < a >.

Δοκιμάστε!

 

HTML Εικόνες
Οι παράγραφοι HTML ορίζονται με την ετικέτα < img>.
Το αρχείο προέλευσης ( src ) , το εναλλακτικό κείμενο ( ALT ) και το μέγεθος ( πλάτος και ύψος) είναι τα χαρακτηριστικά τους.

Δοκιμάστε!

 

Καλή επιτυχία!!
Σε επόμενη ανάρτηση θα συνεχίσουμε με άλλα χαρακτηριστικά της HTML.