balatsoukas.comΜαθήματα css για να βελτιώσετε την ιστοσελίδα σας. Εκπαίδευση css και σεμινάρια κατασκευής ιστοσελίδων. Εκπαίδευση ενηλίκων σε τεχνολογίες διαδικτύου.
Το css αποτελεί το συμπλήρωμα της γλώσσας html. Ουσιαστικά το css αποτελεί μονόδρομο για να καθορίσουμε την εμφάνιση κάθε ιστοσελίδας. Το CSS είναι αρκτικόλεξο και προέρχεται από τα αρχικά των λέξεων Cascading Style Sheets. Είτε αναφερόμαστε σε ιστοσελίδα κατασκευασμένη με html, είτε ηλεκτρονικό κατάστημα κατασκευασμένο με το opencart η ιστολόγιο δημιουργημένο με το wordpress, Η γνώση του css είναι αυτή που θα μας επιτρέψει να ικανοποιήσουμε πλήρως τις εικαστικές απαιτήσεις του ιδιοκτήτη της ιστοσελίδας. Κατά τη γνώμη μου αποτελεί μια από τις σημαντικότερες γνώσεις που πρέπει να αποκτήσει κάποιος ο οποίος θέλει να ασχοληθεί με κατασκευή ιστοσελίδων. Με τη σωστή χρήση του css θα μπορέσουμε να γλιτώσουμε πολύ κόπο κατά την επεξεργασία των στατικών ιστοσελίδων. Διότι μπορούμε με λίγες κινήσεις να αλλάζουμε την εμφάνιση ολόκληρου του ιστότοπου. Στα σεμινάρια wordpress η opencart συνήθως δεν υπάρχει ενότητα css. Καλό θα είναι όμως ο εκπαιδευόμενος να φροντίσει ώστε να αποκτήσει αυτή τη γνώση είτε μέσω σεμιναρίων είτε μέσα από ιδιαίτερα μαθήματα css.
Ακολουθεί ένα παράδειγμα στο οποίο βλέπουμε τη χρήση του css. Υποθέτουμε ότι θέλουμε να δημιουργήσουμε μία σελίδα με την ακόλουθη μορφή. Θέλουμε δηλαδή να δημιουργήσουμε ένα div το οποίο να έχει πράσινο περίγραμμα, μπλε φόντο και σκούρα μπλε γράμματα:
Αυτό μπορούμε να το κάνουμε με τον ακόλουθο κώδικα css:
Στο δεύτερο παράδειγμα χρησιμοποιούμε το CSS για να μορφοποιήσουμε κάθε ομάδα με τα χρώματά της (πράσινο, κόκκινο και κίτριινο).
Εδώ βλέπουμε το αποτέλεσμα στο browser:
Και εδώ βλέπουμε τον κώδικα:
(* Προς αποφυγή παρεξηγήσεων: οι ομάδες τοποθετήθηκαν με βάση τη σειρά που τερμάτισαν στο πρωτάθλημα ποδοσφαίρου 2022-2023)
Στη συνέχεια ακολουθεί παράδειγμα css στο οποίο δείχνουμε πώς μπορεί να γίνει η μορφοποίηση των υπερσυνδέσμων, δηλαδή των links. Αρχικά βλέπουμε δύο υπερσυνδέσμους οι οποίοι έχουν διαφορετικό χρώμα. Η διαφορά οφείλεται στο γεγονός ότι τον ένα υπερσύνδεσμο τον έχουμε ήδη επισκεφθεί ενώ τον άλλον δεν τον έχουμε επισκεφτεί.
Η μορφοποίηση των link με χρήση css μπορεί να γίνει χρησιμοποιώντας τον ακόλουθο κώδικα:
Με παρόμοια τεχνική μπορούμε να δημιουργήσουμε buttons χρησιμοποιώντας τη γλώσσα css. Στα ακόλουθα δύο παραδείγματα έχουμε δημιουργήσει ένα πράσινο και ένα κόκκινο button με τον κώδικα που φαίνεται στην κάθε εικόνα:
Πρώτα βλέπουμε το κόκκινο button:
Και στη συνέχεια βλέπουμε το πράσινο button:
Στη συνέχεια ακολουθεί παράδειγμα που μας βοηθά να καταλάβουμε την ιδιότητα float. Εάν δεν υπάρχει τιμή στην ιδιότητά float τότε το κάθε div τοποθετείται κάτω από το άλλο. Εάν όμως στην ιδιότητα float δεν υπάρχει η τιμή left τότε το κάθε division τοποθετείται δεξιά από το προηγούμενο. Δηλαδή το div αφήνει το προηγούμενο στα αριστερά του.
Ακολουθεί ένας εξαιρετικός τρόπος για να χρησιμοποιήσουμε το css για τη στοίχιση περιεχομένου ιστοσελίδας. Μπορούμε να χρησιμοποιήσουμε το μισό της οθόνης (w3-half), το ένα τρίτο τςη οθόνης (w3-third), τα δυο τρίτα της οθόνης (w3-twothird) καθώς και το ένα τέταρτο της οθόνης (w3-quarter).
Ο κώδικας του αρχείου html:
Ο κώδικας του αρχείου css:
Και εδώ βλέπουμε το αποτέλεσμα:
Στην ενότητα των ασκήσεων html δημιουργήσαμε ένα παράδειγμα ιστοσελίδας με τέσσερα νησιά. Στη συνέχεια δείχνουμε τον τρόπο με τον οποίο μπορεί να βελτιωθεί εικαστικά αυτή η σελίδα χρησιμοποιώντας το css.
Είναι σημαντικό να τονίσουμε ότι ο χρόνος που απαιτείται για να μάθει κάποιος καλά το css είναι πολύ μεγαλύτερος από το χρόνο που απαιτείται για ένα ολοκληρωμένο σεμινάριο html. Αυτό συμβαίνει διότι οι απαιτήσεις που σχετίζονται με το css είναι πολύ περισσότερες από αυτές που σχετίζονται με το html. Όταν μιλάμε για μαθήματα html τότε έχουμε να κάνουμε μόνο με το περιεχόμενο. Αντίθετα όταν έχουμε να κάνουμε με απαιτήσεις για το css τότε αυτές περιλαμβάνουν σωστή εμφάνιση σε κάθε φυλλομετρητή και κάθε συσκευή. Επίσης ενδέχεται να χρειαστεί να κάνουμε αλλαγές σε αρχεία περίπλοκα css που βρίσκονται σε template bootstrap ή σε template wordpres. Ειδικότερα στην περίπτωση του opencart η καλή γνώση του html μπορεί να μας εξοικονομήσει πολύ χρόνο. Μπορει επίσης να μας επιτρέπει να πραγματοποιήσουμε μια απαίτηση του πελάτη η οποια θα ήταν ανέφικτη μέσα από το περιβάλλον διαχείρισης του eshop ή του template. Εάν δεν γνωρίζετε τη γλώσσα html τότε μπορείτε να ενημερωθείτε μέσα από μαθήματα html.
Ένα σεμινάριο css απευθύνεται σε όσους σκοπεύουν να μάθουν να φτιάχνουν ιστοσελίδες. Πρώτα από όλα απευθύνεται σε αρχάριους οι οποίοι θέλουν να μάθουν να φτιάχνουν απλά site. Αποτελεί απαραίτητο συμπλήρωμα στις βασικές γνώσεις html. Απευθύνεται όμως και σε όλους όσους χρησιμοποιούν το wordpress, το joomla, το drupal, το opencart καθώς και άλλα δημοφιλή Συστήματα Διαχείρισης Περιεχομένου (Content Management Systems). Το σεμινάριο css είναι εντελώς απαραίτητο σε γραφίστες οι οποίοι θέλουν να δημιουργήσουν τα δικά τους template για το διαδίκτυο. Όλα αυτά είναι το template που χρησιμοποιούνται στην κατασκευή ιστοσελίδων δημιουργούνται από γραφίστες. Η ενασχόληση με το διαδίκτυο για την κατασκευή γραφικών ή template αποτελεί μία πολύ καλή επαγγελματική διέξοδο για τους αποφοίτους γραφιστικών σχολών. Η σημαντικότερη γνώση για την κατασκευή τέτοιου είδους προϊόντων είναι το css. Εδώ κάποιοι θα πουν ότι η παραμετροποίηση των template γίνεται με το λογισμικό virtuemart. Όμως η γνώση του css είναι απαραίτητη για την σωστή αξιοποίηση του προγράμματος virtuemart. Μία άλλη κατηγορία ανθρώπων που χρειάζεται να εμβαθύνουν στο css είναι οι χρήστες του προγράμματος dreamweaver το οποίο χρησιμοποιείται και αυτό στα σεμινάρια κατασκευής ιστοσελίδων.
Το css μας δίνει τη δυνατότητα να ικανοποιήσουμε κάποιες από τις απαιτήσεις της google οι οποίες είναι αναγκαίες ώστε η ιστοσελίδα μας να ανέβει στις πρώτες θέσεις των αποτελεσμάτων. για να φτιάξουμε ένα site το οποίο να ικανοποιεί όλες τις προϋποθέσεις προθέσεις ιστοσελίδας είναι απολύτως αναγκαία Η γνώση του css σε ικανοποιητικό επίπεδο. μία από τις ρυθμίσεις μπορώ να κάνω μέσα το css είναι να φροντίσουμε Ώστε οι εικόνες να κατεβαίνουν στο παρασκήνιο και να μην βαραίνουν το site. Με αυτό τον τρόπο μπορούμε να μειώσουμε αισθητά το χρόνο φόρτωσης της ιστοσελίδας. Σύμφωνα με τα λεγόμενα της google ο χρόνος φόρτωσης του ιστότοπου αποτελεί ένα από τα σημαντικότερα κριτήρια για την κατάταξη αυτού στις υψηλές θέσεις των αποτελεσμάτων. Μία άλλη δυνατότητα που μας δίνει το css είναι ότι έχουμε τη δυνατότητα να ρυθμίσουμε τον ιστότοπο ώστε να εμφανίζεται με διαφορετικό τρόπο σε κάθε συσκευή. αυτή είναι μία δεύτερη πολύ σημαντική προϋπόθεση για να ανέβει ψηλά στα αποτελέσματα της google ένας ιστότοπος. για την ακρίβεια αυτές οι δύο προϋποθέσεις είναι θα τον πείσω να πούμε το α και το ω για την προώθηση ιστοσελίδων. μέσω του css έχουμε τη δυνατότητα να φτιάξουμε έναν ιστότοπο ο οποίος να είναι γρήγορος και να λειτουργεί σωστά σε κάθε τύπο συσκευής. Έχοντας πετύχει αυτές τις δύο πολύ σημαντικές προϋποθέσεις έχουμε κάνει το σημαντικότερο βήμα για την προώθηση της ιστοσελίδας μας. Στη συνέχεια η διαδικασία βελτιστοποίησης του ιστότοπου είναι μία πολύ πιο απλή διαδικασία. Εάν θέλετε να μάθετε τον τρόπο με τον οποίο θα ανεβάσετε την ιστοσελίδα σας στις πρώτες θέσεις των αποτελεσμάτων της google τότε δεν έχετε παρά να παρακολουθήσετε ένα σεμινάριο προώθησης ιστοσελίδων.
Εάν δοκιμάσετε να χρησιμοποιήσετε κάποιο online εργαλείο για να βελτιστοποιήσετε την ιστοσελίδα σας τότε θα δείτε ότι οι πιο πολλές απαιτήσεις σχετίζονται με το css. Ένα τέτοιο εργαλείο θα ήταν ο html validator. Μία από τις σημαντικότερες απαιτήσεις που βγάζει ο html validator είναι η αφαίρεση του in-line css από το κομμάτι του κώδικα html. όταν κάποιος γνωρίζει καλά τους κανόνες βελτιστοποίησης τότε από τα πρώτα βήματα της κατασκευής τους τα σελίδες αποφεύγει να μπερδέψει το css με το html. Φροντίζει ώστε όλο το κομμάτι του κώδικα css να πάει σε ξεχωριστό αρχείο. Ένα ακόμα εργαλείο τέτοιου τύπου είναι css validator. Εάν ανοίξετε το css validator για να εξετάσετε τον κώδικα που κρύβεται πίσω από τα template τότε θα δείτε ότι υπάρχουν πάρα πολλά λάθη. Κατά τη γνώμη μου αυτός ο έλεγχος αποτελεί και ένα κριτήριο ποιότητας των template. Και δεν αναφερόμαστε μόνο στα css και html template. με αυτό τον τρόπο μπορούμε να ελέγξουμε κατά πόσο ένα καλό ένα template για το wordpress, για το opencart και για το joomla. Καλό είναι όταν παραδίδουμε ένα site να φροντίζουμε ώστε να περνάει με 100% επιτυχία τόσο από τον html validator όσο και από το css validator. Εάν αυτό δεν επιτευχθεί κατά την εγκατάσταση του template τότε θα πρέπει να κάνουμε εμείς τη διόρθωση με το χέρι. Εδώ απαιτείται πάρα πολύ καλή γνώση του css.
Όταν κάποιος ακούει για κατασκευή ιστοσελίδων μόνο με τη χρήση html και css τότε πιθανώς το νομίζει ότι γυρίζαμε το χρόνο 15 χρόνια πίσω. Η πληθώρα των content management systems που κυκλοφορεί στην αγορά οδηγεί τους κατασκευαστές ιστοσελίδων μακριά από την αποκλειστική χρήση html και css. Υπάρχουν όμως περιπτώσεις στις οποίες η καλύτερη επιλογή για την κατασκευή ιστοσελίδας είναι με τη χρήση html. Εάν για παράδειγμα έχουμε ένα απλό site λίγων δεκάδων σελίδων οι οποίες δεν τροποποιούνται με την πάροδο του χρόνου τότε η πρότασή μου είναι να κατασκευαστεί με html. Ο λόγος που το προτείνω αυτό είναι ότι κερδίζουμε τόσο στον τομέα της ασφάλειας όσο και στον τομέα της ταχύτητας. ο συνδυασμός αυτών των δύο αυτόματα μας δίνει ένα πλεονέκτημα για την προώθηση της σελίδας και την άνοδο αυτής σε υψηλές θέσεις των αποτελεσμάτων της google. Εδώ παρουσιάζουμε αναλυτικά τα βήματα για την προώθηση ιστοσελίδων από την αρχή μέχρι το τέλος.
Μπορείτε να δοκιμάσετε να τις γνωσεις σας στο css μέσω των ασκήσεων html. Έχουμε δημιουργήσει ένα σύνολο ασκήσεων κατασκευής ιστοσελίδων στις οποίες εφαρμόζετε όσα μάθατε στα μαθήματα html, css και JavaScript.
Η γλώσσα css χρησιμοποιείται τόσο για δυναμικές ιστοσελίδες όσο και για στατικές ιστοσελίδες. Καλό είναι να γνωρίζετε περισσότερα για τις βάσεις δεδομένων ώστε να έχετε καλύτερη εποπτεία. Στον ακόλουθο σύνδεσμο προσθέσαμε ασκήσεις sql τις οποίες χρησιμοποιούμε στα σεμινάρια SQL. Είναι πολύ σημαντικό να μπορεί ο εκπαιδευόμενος να εξασκηθεί χρησιμοποιώντας τις κατάλληλες ασκήσεις sql. Εάν θέλετε να εμβαθύνετε στις βάσεις δεδομένων τότε μπορείτε να παρακολουθήσετε μαθήματα sql.
