Εισαγωγή στην HTML και CSS για σχεδιαστές

Μια εισαγωγή στην HTML και CSS για σχεδιαστές.

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

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

Τι είναι η HTML;

Σχεδόν όλα όσα βλέπετε όταν περιηγείστε στον Ιστό είναι ένα έγγραφο γλώσσας σήμανσης υπερκειμένου (HTML). Υπερκείμενο είναι κείμενο που παραπέμπει και παραπέμπει σε άλλο κείμενο στην οθόνη σας, επιτρέποντάς σας να έχετε πρόσβαση στο περιεχόμενο με ένα απλό κλικ. Γλώσσα σήμανσης είναι ένα σύνολο ετικετών που περικλείονται σε αγκύλες <>. Αυτές οι ετικέτες HTML συνήθως έρχονται σε ζεύγη:

<ετικέτα έναρξης> : Γνωστό και ως ετικέτα ανοίγματος.
: ονομάζεται επίσης ετικέτα κλεισίματος και περιλαμβάνει μια κάθετο προς τα εμπρός /

Όταν περικλείετε περιεχόμενο μεταξύ αυτών των δύο ετικετών, το όλο θέμα καλείται στοιχείο :

Αυτή είναι μια παράγραφος

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

Η HTML 5, η τρέχουσα έκδοση της HTML, περιέχει περίπου 100 ετικέτες με χαρακτηριστικά που αλλάζουν τη λειτουργία ή την εμφάνισή τους. Χρειάζεται μόνο να γνωρίζετε 30-40 από αυτές τις ετικέτες για να αρχίσετε να κατανοείτε και να δημιουργείτε HTML. Ρίξτε μια ματιά σε αυτά και παρατηρήστε πώς ομαδοποιούνται ανά συνάρτηση. Ας το δούμε στην πράξη.

Κοπή εικόνων στο Photoshop.

Εισαγωγή στην HTML και CSS για σχεδιαστές

Πριν από την κωδικοποίηση, πρέπει να αποφασίσουμε ποιες ενότητες του ιστότοπου θα πρέπει να περιλαμβάνουν εικόνες και ποιες μπορούν να κωδικοποιηθούν. Ας εκμεταλλευτούμε εργαλείο Photoshop Φέτα (κρυμμένο κάτω από το υπομενού Εργαλείο κλαδέματος ) και επισημάνετε περιοχές όπως μια φωτογραφία ενός burrito και Τάκο Τζόαν .

Τώρα πρέπει να εξαγάγουμε τα αποσπάσματα μας - επιλέξτε Αρχείο > Αποθήκευση για τον Ιστό (Alt + Shift + Ctrl + S). Όταν επιλέγεται ένα συγκεκριμένο απόσπασμα, μπορείτε να ορίσετε τις επιλογές εξαγωγής του στη δεξιά πλευρά του παραθύρου (JPG, PNG, κ.λπ.). Εάν κάνετε διπλό κλικ σε ένα συγκεκριμένο τμήμα, θα δείτε ένα αναδυόμενο παράθυρο " Παράμετροι θραυσμάτων" - Αυτό σας επιτρέπει να ονομάσετε συγκεκριμένα αρχεία θραυσμάτων.

Από προεπιλογή, όλες οι εικόνες τοποθετούνται σε: /images/ υποκατάλογο. Εάν θέλετε να εξαγάγετε μόνο τα αποσπάσματα που δημιουργείτε, επιλέξτε " Όλα τα προσαρμοσμένα κομμάτια" στο παράθυρο "Αποθήκευση". Εισαγωγή στην HTML και CSS για σχεδιαστές

Δημιουργία βασικού εγγράφου HTML

Έχουμε τους αναλυτές μας, ας δημιουργήσουμε ένα βασικό έγγραφο HTML. Εισαγωγή στην HTML και CSS για σχεδιαστές

Γραμμή 1 : Δηλώνει ότι η διάλεκτος HTML 5 είναι η γλώσσα του εγγράφου.

Γραμμή 2 : στοιχείο αντιπροσωπεύει τη ρίζα ενός εγγράφου HTML. Αυτό είναι ένα υποχρεωτικό κοντέινερ που υποδηλώνει τα όρια του εγγράφου μας.

3 : κεφάλαιο περιέχει αόρατα στοιχεία σελίδας όπως μετα-πληροφορίες, τίτλος κ.λπ.

Γραμμή 4 : Αυτή είναι η δήλωση κωδικοποίησης εγγράφου − utf-8 - ασφαλής επιλογή - μπορείτε να διαβάσετε περισσότερα σχετικά με τις κωδικοποιήσεις χαρακτήρων HTML εδώ .

Γραμμή 5 : Δείγμα σελίδας Αυτός είναι ο τίτλος της σελίδας που εμφανίζεται στη γραμμή τίτλου του προγράμματος περιήγησης.

6 : κλείνει την ετικέτα από τη γραμμή 3.

Γραμμή 7 : Αυτό το στοιχείο σώματος θα περιέχει όλο το ορατό περιεχόμενο της σελίδας.

Γραμμή 8 : κλείνει την ετικέτα από τη γραμμή 2. Αυτό το στοιχείο σηματοδοτεί το τέλος του εγγράφου. Εισαγωγή στην HTML και CSS για σχεδιαστές

Υπάρχουν άλλοι πιθανοί τρόποι κωδικοποίησης του ίδιου σχεδίου. Θα χρησιμοποιήσουμε σημασιολογικές ετικέτες HTML 5 (κεφαλίδα, πλοήγηση, άρθρο, υποσέλιδο) για να δημιουργήσουμε τη βασική δομή του εγγράφου:

Αυτή είναι η διάταξη μεταφρασμένη σε HTML:

Μερικές σημειώσεις:

Γραμμές 11 και 12 : Τα στοιχεία είναι η ουσία του Διαδικτύου όπως χρησιμοποιούνται για τη δημιουργία υπερσυνδέσμους . Δεσμεύονται στο χαρακτηριστικό HREF και πρέπει να δεσμεύουν τον στόχο URL .

Γραμμές 18–20 : Αυτές είναι μερικές ετικέτες μορφοποίησης κειμένου: υποδηλώνει μια επικεφαλίδα πρώτου επιπέδου. δηλώνει μια παράγραφο. σημαίνει διάλειμμα γραμμής.

Μορφοποίηση με Cascading Style Sheets (CSS).

Εισαγωγή στην HTML και CSS για σχεδιαστές

Όταν ανοίγετε μόνο το αρχείο HTML σε ένα πρόγραμμα περιήγησης ιστού, θα δείτε ότι δεν είναι μορφοποιημένο όπως το προηγούμενο σχέδιο μας. Αυτό συμβαίνει επειδή ο κώδικας HTML δεν είναι αρκετός - πρέπει να τον μορφοποιήσουμε με Cascading Style Sheets (CSS) . Η CSS είναι μια γλώσσα φύλλου στυλ που χρησιμοποιείται για τη μορφοποίηση στοιχείων HTML.

Αλλά γιατί ακριβώς χρειάζεται να συνδυάσουμε το HTML με το CCS; Πριν από λίγο καιρό, η μορφοποίηση επιτεύχθηκε με την προσθήκη χαρακτηριστικών σε ετικέτες HTML. Ωστόσο, αυτό είχε ως αποτέλεσμα τον μη αναγνώσιμο και μη συντηρήσιμο κώδικα. Η λύση ήταν να διαχωριστεί το περιεχόμενο του εγγράφου (HTML) από τη μορφοποίηση εγγράφου (CSS).

Ας κατανοήσουμε απλά Κανόνας CSS : .

Εκλέκτορας : Αυτό είναι το στοιχείο HTML που θέλετε να δημιουργήσετε στυλ. Για παράδειγμα: <article>

Αγγελία : Ένας κανόνας CSS μπορεί να έχει μία ή περισσότερες δηλώσεις. Κάθε δήλωση αποτελείται από μια ιδιότητα και μια τιμή και χωρίζεται με ένα ερωτηματικό. Τοποθετείτε δηλώσεις σε σγουρά άγκιστρα {}. Εισαγωγή στην HTML και CSS για σχεδιαστές

Ιδιοκτησία : αυτό είναι χαρακτηριστικό στυλ, που θέλετε να αλλάξετε. Για παράδειγμα: χρώμα φόντου, μέγεθος γραμματοσειρά και τα λοιπά.

Αξία : Κάθε ιδιότητα έχει μια τιμή που σχετίζεται με αυτήν. Για παράδειγμα: #ffcc11 (για χρώμα φόντου), 16 px (για μέγεθος γραμματοσειράς) κ.λπ.

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

Ας δούμε μερικούς κανόνες CSS που απαιτούνται για τη μορφοποίηση του απλού σχεδιασμού μας.

Ιδιότητες τοποθέτησης CSS : υπάρχει 4 διαφορετικές μέθοδοι (στατικό, σταθερό, σχετικό και απόλυτο) που μας επιτρέπουν να τοποθετήσουμε ορισμένα στοιχεία στο σχέδιό μας. Αφού ορίσετε μία από αυτές τις μεθόδους, μπορείτε να τοποθετήσετε στοιχεία χρησιμοποιώντας τις ιδιότητες επάνω, δεξιά, κάτω και αριστερά - θα λειτουργούν διαφορετικά ανάλογα με το ποια από τις 4 μεθόδους χρησιμοποιείτε. Σε αυτή την περίπτωση θα θέλαμε να τοποθετήσουμε πιάτο_εικόνα, χρησιμοποιώντας απόλυτος τοποθέτησης.

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

Αν πραγματικά θέλετε να μάθετε περισσότερα για την κωδικοποίηση, Ρίξε μια ματιά σε αυτό το ωραίο site: Codecademy .