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

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

Τι είναι η HTML;

Τι είναι η HTML;

 

Практически все, что вы видите во время просмотра веб-страниц, – это документ на языке гипертекстовой разметки (HTML). Υπερκείμενο – это текст, который ссылается и ссылается на другой текст на вашем экране, позволяя вам получить доступ к содержимому простым щелчком. Γλώσσα σήμανσης – это набор тегов, заключенных в квадратные скобки <>. Эти HTML-теги обычно бывают парами:

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

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

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

При переводе этого языка в Интернет зрители не увидят теги – они увидят только содержимое, заключенное между ними.

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

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

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

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

Κοπή εικόνων στο Photoshop. Εισαγωγή στην HTML και CSS για σχεδιαστές

Теперь нам нужно экспортировать наши фрагменты – выберите «Файл»> «Сохранить для Интернета» (Alt + Shift + Ctrl + S). Когда выбран конкретный фрагмент, вы можете установить его параметры экспорта в правой части окна (JPG, PNG и т. Д.). Если вы дважды щелкните конкретный фрагмент, вы увидите всплывающее окно « Παράμετροι θραυσμάτων" – это позволяет вам давать имена конкретным файлам фрагментов.

dlice_export

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

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

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

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

code_html_simple1 Εισαγωγή στο HTML και το CSS

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

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

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

Γραμμή 4 : <meta charset = ”utf-8 ″> Это объявление кодировки документа – utf-8 – безопасный выбор – вы можете узнать больше о кодировках символов HTML εδώ .

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

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

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

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

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

IKOS2A Εισαγωγή στην HTML και CSS

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

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

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

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

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

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

justHTMLbrowser Μια εισαγωγή στο HTML και το CSS για σχεδιαστές

Когда вы откроете только HTML-файл в веб-браузере, вы увидите, что он не отформатирован, как наш предыдущий дизайн. Это потому, что кода HTML недостаточно – нам нужно отформатировать его с помощью Cascading Style Sheets (CSS) . CSS – это язык таблиц стилей, который используется для форматирования элементов HTML.

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

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

CSS_structure2

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

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

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

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

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

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

plateimage_css

Ιδιότητες τοποθέτησης CSS : υπάρχει 4 διαφορετικές μέθοδοι (статический, фиксированный, относительный и абсолютный), которые позволяют нам позиционировать определенные элементы в нашем дизайне. После установки одного из этих методов вы можете позиционировать элементы, используя свойства top, right, bottom и left – они будут работать по-разному в зависимости от того, какой из 4 методов вы используете. В этом случае мы хотели бы позиционировать πιάτο_εικόνα, χρησιμοποιώντας απόλυτος τοποθέτησης.

Μοντέλο CSS Box : αυτό το μοντέλο представляет собой рамку, которая охватывает все элементы HTML, включая поля, границы, отступы и содержимое. Поля – это невидимая область вокруг границы, а отступы между границей и содержимым.

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

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

1. Τι είναι η HTML και σε τι χρησιμοποιείται;

HTML (Γλώσσα σήμανσης υπερκειμένου) είναι μια τυπική γλώσσα σήμανσης για τη δημιουργία ιστοσελίδων. Χρησιμοποιείται για τη δομή του περιεχομένου σε μια ιστοσελίδα χρησιμοποιώντας ετικέτες που λένε στο πρόγραμμα περιήγησης πώς να εμφανίζει κείμενο, εικόνες, συνδέσμους και άλλα στοιχεία.

2. Τι είναι το CSS και σε τι χρησιμοποιείται;

CSS (Cascading Sheets Style) είναι μια γλώσσα στυλ που χρησιμοποιείται για να περιγράψει την εμφάνιση ενός εγγράφου HTML. Το CSS ελέγχει τη διάταξη, τα χρώματα, τις γραμματοσειρές και άλλες οπτικές πτυχές των ιστοσελίδων.

3. Πώς να ξεκινήσετε με HTML και CSS;

Για να ξεκινήσετε με το HTML και το CSS, θα χρειαστείτε ένα πρόγραμμα επεξεργασίας κειμένου (όπως Notepad++, Sublime Text ή Visual Studio Code) και ένα πρόγραμμα περιήγησης ιστού για να προβάλετε τις σελίδες σας. Δημιουργήστε δύο αρχεία: ένα με την επέκταση .html για κώδικα HTML και άλλος με επέκταση .css για στυλ CSS.

4. Ποια είναι η δομή ενός εγγράφου HTML;

Ένα έγγραφο HTML αποτελείται από πολλές βασικές ετικέτες:




Τίτλος σελίδας
<link rel=”stylesheet” type=”text/css” href=”styles.css”>


Επικεφαλίδα
Παράγραφος κειμένου.

5. Πώς να συνδέσετε HTML και CSS;

Σε ένα έγγραφο HTML, μπορείτε να συνδέσετε ένα αρχείο CSS χρησιμοποιώντας μια ετικέτα <link> στο τμήμα <head>:

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

6. Πώς να εφαρμόσετε στυλ στο CSS;

Το CSS χρησιμοποιεί επιλογείς για να επιλέξει στοιχεία HTML και να εφαρμόσει στυλ σε αυτά:

σώμα {
χρώμα φόντου: # f0f0f0;
}

ω1 {
Χρώμα: #333333?
γραμματοσειρά-οικογένεια: Arial, sans-serif;
}

p {
μέγεθος γραμματοσειράς: 16px;
ύψος γραμμής: 1.5;
}

 

7. Τι είναι οι κλάσεις και τα αναγνωριστικά σε HTML και CSS;

Οι κλάσεις και τα αναγνωριστικά χρησιμοποιούνται για την εφαρμογή στυλ σε συγκεκριμένα στοιχεία:

  • Μαθήματα: Μπορεί να εφαρμοστεί σε πολλά στοιχεία. Σε HTML υποδεικνύονται από το χαρακτηριστικό classκαι σε CSS - μια τελεία (.):
<div class=”container”>Контент</div>
  • Αναγνωριστικά: μοναδικό για κάθε στοιχείο. Σε HTML υποδεικνύονται από το χαρακτηριστικό idκαι σε CSS - ένας κατακερματισμός (#):

<div id=”header”>Заголовок</div>

# επικεφαλής {
χρώμα φόντου: # 333333;
χρώμα: #ffffff;
padding: 20px?
}

8. Πώς να δημιουργήσετε διατάξεις χρησιμοποιώντας CSS;

Μπορείτε να χρησιμοποιήσετε ιδιότητες για να δημιουργήσετε διατάξεις display, flex, grid και άλλοι:

  • Flexbox: Ένας ευέλικτος τρόπος δημιουργίας διατάξεων.

    css

    .container {
    οθόνη: flex;
    justify-content: space-mes?
    }
  • Πλέγμα: Ένα ισχυρό εργαλείο για τη δημιουργία πολύπλοκων διατάξεων.

    css

    .grid-container {
    οθόνη: πλέγμα;
    grid-template-columns: repeat(3, 1fr);
    κενό: 10 px;
    }

9. Πώς να εργαστείτε με χρώματα και γραμματοσειρές στο CSS;

  • Χρώματα: Μπορεί να καθοριστεί χρησιμοποιώντας ονόματα χρωμάτων, δεκαεξαδικές τιμές, RGB ή HSL.

    css

     
  • Γραμματοσειρές: μπορεί να ρυθμιστεί χρησιμοποιώντας την ιδιότητα font-family.

    css

     .κείμενο {
    font-family: 'Arial', sans-serif;
    }

10. Ποια εργαλεία και πόροι μπορούν να βοηθήσουν τους σχεδιαστές να μάθουν HTML και CSS;

  • Διαδικτυακά μαθήματα και σεμινάρια: όπως Codecademy, freeCodeCamp, MDN Web Docs.
  • Εργαλεία ανάπτυξης: ενσωματωμένα εργαλεία προγράμματος περιήγησης (DevTools) για εντοπισμό σφαλμάτων και δοκιμή κώδικα.
  • Πλαίσια CSS: όπως το Bootstrap, που επιταχύνουν τη διαδικασία ανάπτυξης.

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