HTML & CSS για αρχάριους

Όποιος θέλει να δημιουργήσει ιστοσελίδες, έρχεται πρώτα ή αργότερα σε επαφή με το HTML. Για τον λόγο αυτό, στα επόμενα video-μαθήματα θα κατακτήσουμε μαζί το όμορφο κόσμο του HTML. Θα δείτε βήμα προς βήμα τι ακριβώς είναι αυτή η γλώσσα και πώς μπορείτε να δημιουργήσετε ιστοσελίδες με τη χρήση της σε συνδυασμό με φύλλα στυλ. Αρχικά όμως υπάρχει ένα ερώτημα: Τι σχέση έχει το HTML και τα φύλλα στυλ; Στο τέλος αυτού του video-μαθήματος θα μάθετε επίσης ποιο λογισμικό χρειάζεστε για τη δημιουργία και δοκιμή ιστοσελίδων.

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

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

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

Για μια καλή αναγνωσιμότητα των κειμένων, απαιτείται μια λογική μορφοποίηση. Και αυτή υπερβαίνει τα απλά στοιχεία δομής όπως οι τίτλοι και τα παραγράφους. Γι'αυτό μπορείτε να επισημάνετε π.χ. παραθέσεις και να αναδεικνύετε μεμονωμένα τμήματα με έντονη ή πλάγια γραφή μέσω της HTML. Οι απαραίτητες γνώσεις για αυτό παρέχονται σε αυτή τη βίντεο-εκπαίδευση.

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

Οι πίνακες παίζουν ακόμα σημαντικό ρόλο στις ιστοσελίδες. Αυτό ισχύει, ωστόσο, μόνο για την παρουσίαση δεδομένων. Όταν δεν υπήρχε ακόμα CSS ή όταν αυτό δεν υποστηριζόταν πλήρως από τους περιηγητές, οι πίνακες χρησίμευαν επίσης για ένα εντελώς διαφορετικό σκοπό: Χρησιμοποιούνταν για τη διεκπεραίωση διατάξεων. Μέσα στα κελιά των πινάκων τοποθετούνταν τα διάφορα στοιχεία της σελίδας. Ευτυχώς, τα τέρατα διατάξεων που απορρέουν από αυτό έχουν περάσει στο παρελθόν χάρη στο CSS. Σήμερα, οι πίνακες στο web design χρησιμοποιούνται αποκλειστικά για αυτό για το οποίο πραγματικά προορίζονται: για την κατανοητή παρουσίαση δεδομένων.

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

Λίγες ιστοσελίδες μπορούν να λειτουργήσουν χωρίς γραφικά. Λογικό λοιπόν ότι το θέμα των γραφικών έχει επίσης ένα σημαντικό ρόλο σε αυτήν τη σειρά. Σε αυτήν και σια επόμενα Video-Trainings θα δείξουμε πως μπορείτε να ενσωματώσετε γραφικά στις ιστοσελίδες σας. Στην αρχή όμως ένα άλλο θέμα έχει προτεραιότητα: Ποια φορμάτ εικόνων είναι κατάλληλα γενικά για χρήση online; Στον δεύτερο μέρος θα δούμε πως μπορούμε να αναφέρουμε τις διευθύνσεις εικόνων.

Πώς μπορούν γενικά να γίνουν αναφορές σε εικόνες, εμφανίστηκε στο προηγούμενο μέρος. Ωστόσο, ο τερματισμός σχετικά με τις εικόνες δεν έχει φτάσει ακόμη. Πράγματι, μπορεί κανείς να περιγράψει πιο λεπτομερώς τις εικόνες με κατάλληλα χαρακτηριστικά. Αυτό είναι το θέμα στην αρχή αυτού του βίντεο. Στο δεύτερο μέρος περιγράφεται πώς μπορούν να υλοποιηθούν οι λεζάντες των εικόνων με τη σύνταξη HTML5.

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

Το HTML προσφέρει σε σχέση με τα hyperlinks πολύ περισσότερες δυνατότητες από αυτές που παρουσιάστηκαν στο προηγούμενο βίντεο. Για παράδειγμα, μπορείτε να ορίσετε συνδέσμους ηλεκτρονικού ταχυδρομείου και να προσφέρετε αρχεία για λήψη. Αυτές και άλλες μορφές υπερσυνδέσεων θα μάθετε σε αυτό το βίντεο μάθημα.

Για να το πούμε αμέσως: Ιδίως στο HTML5, οι φόρμες έχουν κάνει ένα πολύ σημαντικό άλμα. Χάρη σε πολλούς νέους τύπους πεδίων, μπορούν να δημιουργηθούν πολύ ενδιαφέροντες φόρμες. Αυτές οι νέες δυνατότητες θα τις μάθετε φυσικά. Αλλά ας αρχίσουμε αυτό το βίντεο-μάθημα με τα απαραίτητα εργαλεία που χρειάζονται για τον καθορισμό των φορμών. Στην αρχή, πρόκειται για τη δημιουργία μονόγραμμων πεδίων εισόδου. Θα δείτε πώς μπορούν να καθοριστούν, πώς μπορούν να προκαθοριστούν με τιμές και πώς μπορούν να οριστούν ως μη γράψιμα. Επίσης, θα μάθετε τον καθορισμό πεδίων κωδικού πρόσβασης. Αυτός είναι ένας τύπος πεδίου που μπορεί να χρησιμοποιηθεί συχνά.

Σε αυτό το βίντεο μαθαίνετε περισσότερους τύπους πεδίων, με τους οποίους μπορείτε να εξοπλίσετε τα φόρμες σας. Συγκεκριμένα, πρόκειται για τα πεδία επιλογής, τα Radio-Buttons και τα Checkboxes. Όλα αυτά είναι σημαντικά στοιχεία που χρειάζεται κανείς συχνά σε φόρμες. Αρκετό κίνητρο λοιπόν, να εξετάσετε πιο προσεκτικά αυτά και άλλα στοιχεία.

Με το HTML5 έχουν γίνει αρκετά πράγματα, ιδίως όσον αφορά τις φόρμες. Αξίζει λοιπόν να ρίξουμε μια λεπτομερή ματιά στις πολλές νέες λειτουργίες φόρμας που μπορούν πλέον να χρησιμοποιηθούν. Έχει τελειώσει η εποχή των απλών πεδίων εισόδου. Επιτέλους μπορούν να καθοριστούν και άλλα στοιχεία όπως ρυθμιστές, πεδία ημερομηνίας κ.λπ. χωρίς τη χρήση JavaScript.

Η εκκίνηση στον κόσμο των φορμών HTML5 την έχει διευθύνει το προηγούμενο βίντεο εκπαίδευσης. Ωστόσο, το τέλος του δρόμου δεν έχει φτάσει ακόμα. Πράγματι, το HTML5 έχει πολλά ακόμη πράγματα να προσφέρει σε αυτόν τον τομέα.

Στο HTML5 υπάρχουν εκτός από τους παρουσιασμένους τύπους πεδίων επίσης πολλές άλλες ενδιαφέρουσες πτυχές. Γι 'αυτό μπορεί κανείς τώρα, για παράδειγμα, με πολύ λίγη προσπάθεια να υλοποιήσει μια λειτουργία αυτόματης συμπλήρωσης για τα πεδία της φόρμας προς το πρότυπο της Google. Αυτά και άλλα θέματα παρουσιάζονται σε αυτό το βίντεο-εκπαίδευση.

Όποιος ασχολείται με το HTML5, δεν μπορεί να αποφύγει το θέμα της σημασιολογίας. Θα μάθετε σε αυτό το και στα επόμενα βίντεο-εκπαιδευτικά τα σημαντικότερα στοιχεία που φέρνει το HTML5, με τα οποία μπορείτε να δομήσετε σωστά τα έγγραφά σας. Πράγματι, αυτή η λογική δομή είναι αναγκαία, αν κάποιος θέλει να κάνει τις ιστοσελίδες του ασφαλείς για το μέλλον.

Το HTML5 φέρνει πολλά νέα στοιχεία δομής. Τι ακριβώς είναι αυτά, έχει ήδη εμφανιστεί στο προηγούμενο βίντεο εκπαίδευσης. Τώρα πρέπει να τα χρησιμοποιήσουμε στην πράξη. Αυτά τα στοιχεία είναι αυτά που εξασφαλίζουν τη σημασιολογική δομή των εγγράφων. Σε αυτό το βίντεο εκπαίδευσης, κυρίως θα μάθετε τα δύο στοιχεία article και section. Αυτά δημιουργούν τη βασική δομή των HTML εγγράφων. Στο τέλος αυτού του βίντεο θα ρίξουμε ακόμα μια ματιά στις διαφορές μεταξύ div, article και section.

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

Σε αυτήν την τελευταία εκπαιδευτική βίντεο της σειράς στοιχείων σημασιολογίας, θα μάθετε περισσότερα στοιχεία δομής. Πράγματι, το HTML5 προσφέρει στοιχεία για περιοχές πλοήγησης, υποσημειώσεις και περιλήψεις.

Στις προηγούμενες εκδόσεις HTML, το συνδυασμό πολυμεσικού περιεχομένου ήταν μια μαρτυρία. Με μια συνδυασμό αντικειμένου και στοιχείου embed, προσπαθούσαν να φέρουν βίντεο και ήχο στην ιστοσελίδα. Ήταν αμφίβολο εάν το ενσωματωμένο βίντεο θα έπαιζε πραγματικά. Και σε αυτό τον τομέα πολλά έχουν αλλάξει με το HTML5.

Πώς μπορείτε να ενσωματώσετε βίντεο, έχετε δει. Τώρα φυσικά τα βίντεο δεν είναι το μόνο πράγμα που μπορείτε να παρουσιάσετε στους επισκέπτες σας στην ιστοσελίδα. Σε αυτό το βίντεο-εκπαιδευτικό υλικό περιγράφονται λοιπόν οι επιλογές που σας προσφέρει το HTML5 όσον αφορά την ενσωμάτωση αρχείων ήχου και ταινιών Flash. Γιατί πρέπει να εμφανίζετε μερικές φορές και αυτά τα πράγματα στη σελίδα σας.

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

Το HTML χρησιμοποιείται για τη δομή του περιεχομένου. Όταν έρχεται η στιγμή του σχεδιασμού της σελίδας, τα Cascading Stylesheets (CSS) έχουν τον πρώταγων ρόλο. Αφού μόνο η συνδυασμένη χρήση CSS και HTML επιτρέπει να δημιουργηθούν ελκυστικές ιστοσελίδες από μια απλή δομή HTML. Είναι λοιπόν αρκετά λόγος να εξετάσουμε προσεκτικά το CSS.

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

Κάποιοι επιλογείς παρουσιάστηκαν στο προηγούμενο βίντεο εκπαίδευσης. Φυσικά, το CSS έχει ακόμα πολλούς άλλους επιλογείς να προσφέρει.

Σε αυτή την τελευταία εκπαίδευση βίντεο για τους επιλογείς, θα σας παρουσιάσω μια πολύ συγκεκριμένη μορφή επιλογέων. Αυτοί είναι οι λεγόμενοι ψευδο-κλάσεις και ψευδο-στοιχεία. Αυτοί είναι οι επιλογείς που δεν αναφέρονται σε συγκεκριμένα στοιχεία HTML, αλλά δημιουργούνται από τη συσκευή εξόδου.

Σε αυτή την και στις επόμενες εκπαιδευτικές βίντεο θα σας παρουσιάσω τις πιο σημαντικές ιδιότητες CSS. Σε αυτό το σημείο, βέβαια, δεν πρόκειται να σας παρουσιάσω μια αναφορά CSS. Αντ'αυτού, θα πρέπει να αισθανθείτε τι μπορεί να επιτευχθεί με το CSS. Ας ξεκινήσουμε λοιπόν με την διαμόρφωση της γραμματοσειράς. Σε αυτό το εκπαιδευτικό βίντεο θα παρουσιαστούν όλα τα στοιχεία που σχετίζονται άμεσα με τις λεγόμενες γραμματοσειρές. Να ληφθεί υπόψη ότι υπάρχουν περισσότερες ιδιότητες όσον αφορά τη διαμόρφωση της γραμματοσειράς, οι οποίες θα παρουσιαστούν στο επόμενο εκπαιδευτικό βίντεο.

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

Φυσικά, στο CSS δεν πρέπει να λείπουν και οι ορισμοί χρωμάτων και οι γραφικοί φόντοι. Οι αντίστοιχες ιδιότητες παρουσιάζονται σε αυτό το βίντεο μάθημα. Γιατί στην πραγματικότητα, το CSS προσφέρει πολλές δυνατότητες ακριβώς σε αυτό τον τομέα. Έτσι μπορεί κανείς όχι μόνο απλά να ορίσει χρώματα και εικόνες. Είναι επίσης δυνατή η χρήση επαναλαμβανόμενων γραφικών φόντων.

Ακόμα και όταν πρόκειται για τη διάταξη ιστοσελίδων, θα έρθετε αντιμέτωποι με τον προσδιορισμό των εξωτερικών περιθωρίων και των αποστάσεων. Στα τελευταία βίντεο-μαθήματα αυτής της σειράς, υλοποιείται ένα εκτενές παραδειγματικό έργο, στο οποίο πρακτικά παρουσιάζεται η χρήση αυτών και άλλων CSS ιδιοτήτων.

Το CSS παρέχει μερικές ενδιαφέρουσες ιδιότητες για παραγράφους και τμήματα κειμένου, τις οποίες δε θέλω να σας κρατήσω κρυφές. Έτσι, μπορείτε για παράδειγμα να ευθυγραμμίσετε τις παραγράφους κειμένου αριστερά και δεξιά.

Όταν αναφερθούμε στον όρο "πλαίσιο" στα γερμανικά, το πρώτο πράγμα που σκέφτεται η πλειοψηφία είναι τα πίνακες. Και πράγματι, τα πλαίσια παίζουν σημαντικό ρόλο σε συνδυασμό με τους πίνακες. Ωστόσο, μέσω του CSS, μπορούν επίσης να εφοδιαστούν και άλλα στοιχεία με πλαίσια. Και πώς εμφανίζονται τα πλαίσια τελικά μπορεί επίσης να καθοριστεί ρητά μέσω των ορισμών του CSS.

Πώς να ορίσετε λίστες, πιθανόν το γνωρίζετε εδώ και καιρό. Αυτό εξηγήθηκε λεπτομερώς στο πλαίσιο αυτής της σειράς. Ωστόσο, οι λίστες δεν είναι απαραίτητα κομψές από μόνες τους. Για να φαίνονται και οπτικά ελκυστικές, υπάρχουν αντίστοιχες ιδιότητες CSS. Ποιες είναι αυτές και πώς να τις χρησιμοποιήσετε, θα το μάθετε σε αυτή την εκπαίδευση με βίντεο. Στο δεύτερο μέρος, θα μιλήσουμε για τα λεγόμενα Counter, με τα οποία μπορούν να υλοποιηθούν και πιο πολύπλοκες αρίθμησεις.

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

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

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

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

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

Στα ακόλουθα video-trainings θα σας δείξω πώς να υλοποιήσετε βήμα προς βήμα τη διάταξη μιας ιστοσελίδας. Υπάρχουν πολλοί διαφορετικοί τρόποι προσέγγισης για αυτό. Συνήθως, οι διατάξεις δημιουργούνται στο Photoshop. Έπειτα, τα μεμονωμένα στοιχεία της σελίδας αποκόπτονται και ενσωματώνονται μέσω CSS και HTML ξανά ως μια ιστοσελίδα. Αυτή είναι και η διαδικασία που ακολουθείται εδώ. Ωστόσο, αντί για το Photoshop χρησιμοποιώ το δωρεάν διαθέσιμο GIMP. Τα περιγραφόμενα βήματα μπορούν όμως να ακολουθηθούν και στο Photoshop.

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

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

Η βασική δομή της σελίδας είναι έτοιμη, ωστόσο είναι ακόμα αρκετά απλή. Σε αυτήν την εκπαίδευση με βίντεο, το περιεχόμενο της σελίδας θα διευρυνθεί περαιτέρω. Η εστίαση πρώτα επικεντρώνεται στο μενού που βρίσκεται στο επάνω μέρος της σελίδας. Ακολουθούν το δεξιά και το κάτω μέρος του μενού.

Ένα καθοριστικό κομμάτι για ένα οπτικά ελκυστικό ιστοσελίδας είναι φυσικά η τυπογραφία τους. Στη διάρκεια αυτής της σειράς έχετε μάθει ήδη τις δυνατότητες που σας παρέχουν το HTML και το CSS όσον αφορά τη διαμόρφωση της γραφής. Σε αυτή την εκπαίδευση μέσω βίντεο, αυτές χρησιμοποιούνται για να αναβαθμίσουν τη σελίδα. Επίσης, δεν θα ασχοληθούμε μόνο με τις κλασικές εκδοχές. Η μαγική λέξη για την εφαρμογή "εξωτικών" γραμματοσειρών είναι το @font-face.

Συνήθως πρέπει να παρέχουμε στους επισκέπτες μας τη δυνατότητα επικοινωνίας. Στην πιο απλή περίπτωση, μπορούμε να σημειώσουμε έναν αριθμό τηλεφώνου και/ή τη διεύθυνση ηλεκτρονικού ταχυδρομείου. Μπορούμε να το κάνουμε έτσι, αλλά αυτό δεν είναι ιδιαίτερα βολικό για τους επισκέπτες. Γι' αυτό θα δημιουργήσουμε ένα φόρμα σε αυτήν την εκπαίδευση μέσω βίντεο, μέσω του οποίου οι επισκέπτες μπορούν να επικοινωνήσουν μαζί μας πολύ εύκολα. Και φυσικά θα χρησιμοποιήσουμε τις δυνατότητες που μας προσφέρουν το HTML5 και το CSS3.

Η βασική δομή και η πολύ βασική σχεδίαση της φόρμας έχουν οριστεί και ολοκληρωθεί. Και η φόρμα είναι ήδη αρκετά ελκυστική. Ωστόσο, χάρη στο CSS3, υπάρχει ακόμα περισσότερο περιθώριο βελτίωσης όσον αφορά την οπτική εμφάνιση της φόρμας. Σε αυτή την εκπαίδευση με βίντεο η φόρμα θα λάβει λίγο περισσότερη διαμόρφωση.

Ήδη σε αυτήν τη φάση σίγουρα έχετε επενδύσει πολλό χρόνο και δουλειά στην ανάπτυξη της ιστοσελίδας σας. Ξεκινώντας από το σχεδιασμό μέχρι την υλοποίησή του σε HTML και CSS. Αρκετό λοιπόν, να παρουσιάσετε επιτέλους τον κόσμο σας την ιστοσελίδα σας. Αυτό ακριβώς αφορά αυτή η εκπαίδευση μέσω βίντεο. Θα σας δείξω πώς να βάλετε την ιστοσελίδα σας σε λειτουργία στο διαδίκτυο. Αρχικά θα μάθετε πώς να βρείτε τον κατάλληλο πάροχο υπηρεσιών και το κατάλληλο πακέτο web space. Στη συνέχεια, θα μεταφέρετε τα δεδομένα στον διακομιστή με το δημοφιλές FileZilla. Και μετά, ναι τότε η ιστοσελίδα είναι πράγματι σε λειτουργία.

Σε αυτή την εκπαίδευση μέσω βίντεο, θέλω να σας δώσω μια μικρή εισαγωγή στο σωστό περιβάλλον ανάπτυξης για τη δημιουργία ιστοσελίδων. Όποιος έχει ήδη γράψει ολοκληρωμένες ιστοσελίδες ή μικρότερες μονοσελίδες, πιθανόν να έχει ήδη αυτούς τους επεξεργαστές και μπορεί να παραλείψει αυτό το βίντεο.

Προβάλλονται:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

Το HTML5-Boilerplate είναι ένα ισχυρό πρότυπο για ιστοσελίδες HTML5 και CSS3. Κάνει το HTML5 όσο το δυνατόν συμβατό με διάφορους περιηγητές και περιλαμβάνει μερικά πολύ καλά πρότυπα κώδικα στους τομείς του JavaScript, CSS3 και φυσικά επίσης HTML.

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

Σε αυτό το βίντεο-μάθημα θέλω να σας παρουσιάσω μερικά πολύ χρήσιμα εργαλεία με τα οποία μπορείτε να αναπτύξετε HTML5 και CSS3.

Αυτά περιλαμβάνουν:
html5css3box.com
kuler.adobe.com (τώρα https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com