Ρύθμιση CSS και HTML για τον ιστότοπό σας: Ένας οδηγός

Preslav Dobrev2022-10-28 · 5 min read

Ρύθμιση CSS και HTML για τον ιστότοπό σας: Ένας οδηγός

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

Αυτός ο οδηγός θα σας καθοδηγήσει στα βασικά της δημιουργίας αρχείων HTML και CSS για τον ιστότοπό σας. Ας ξεκινήσουμε!

Προαπαιτούμενα

Μια βασική κατανόηση των HTML και CSS.

Βήμα 1- Αρχική ρύθμιση

Αρχικά, θα δημιουργήσουμε έναν νέο κατάλογο έργου και θα τον ονομάσουμε demo-project :

mkdir demo-project

1	mkdir demo-project

Στη συνέχεια, μεταβείτε στον τρέχοντα κατάλογο χρησιμοποιώντας την εντολή cd command:

cd demo-project

1	cd demo-project

Στον φάκελο του έργου, ας προσθέσουμε τα ακόλουθα αρχεία που θα χρειαστούμε για να ξεκινήσουμε τον βασικό μας ιστότοπο:

index.html : Αυτό το αρχείο θα περιέχει όλο τον κώδικα HTML.
styles.css : Εδώ θα κρατήσουμε όλα τα αρχεία CSS για τη μορφοποίηση του ιστοτόπου μας.
images : Όλες οι απαραίτητες εικόνες πρέπει να φυλάσσονται σε αυτόν τον φάκελο.

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

Βήμα 2- Προσθήκη περιεχομένου HTML στο index.html αρχείο

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

Προσθέστε το ακόλουθο μπλοκ κώδικα στο index.html αρχείο σας:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Welcome to CloudSigma!</title>

</head>

<body>

</body>

</html>

Note: Βεβαιωθείτε ότι το index.html αρχείο είναι κενό προτού προσθέσετε αυτά τα μπλοκ κώδικα. Επίσης, σκεφτείτε να αλλάξετε τον τίτλο όπως επισημαίνεται στην ενότητα <title> .

Ας κατανοήσουμε τους όρους που χρησιμοποιούνται:

<!DOCTYPE html> : Είναι μια δήλωση που ενημερώνει το πρόγραμμα περιήγησης για τον τύπο της HTML που χρησιμοποιείται στο έγγραφο HTML.
- Καθώς είναι διαθέσιμες πολλαπλές εκδόσεις των προτύπων HTML, ο καθορισμός του DOCTYPE διευκολύνει τα προγράμματα περιήγησης να αναγνωρίσουν την έκδοση HTML χωρίς κόπο. Για παράδειγμα, σε αυτόν τον οδηγό, χρησιμοποιούμε την τελευταία έκδοση του HTML5.
<html> : Αυτή η ετικέτα ενημερώνει το πρόγραμμα περιήγησης ότι τα περιεχόμενα που περιλαμβάνονται μέσα σε αυτήν πρέπει να αντιμετωπίζονται ως HTML. Όταν ανοίγετε ένα <html> αρχείο, βεβαιωθείτε ότι το κλείνετε χρησιμοποιώντας την ετικέτα </html> . Αυτή η ετικέτα υποστηρίζει τα χαρακτηριστικά lang και μπορείτε να καθορίσετε τη γλώσσα της ιστοσελίδας. Έχουμε ορίσει τη γλώσσα στα Αγγλικά στον οδηγό μας χρησιμοποιώντας την ετικέτα γλώσσας en .
- Επισκεφθείτε το IANA Language Subtag Registry για να δείτε τις άλλες διαθέσιμες γλώσσες προς χρήση.
<head> : Αυτό δημιουργεί μια ενότητα στο έγγραφο HTML και περιέχει πληροφορίες σχετικά με την ιστοσελίδα. Ωστόσο, δεν υπάρχουν λεπτομέρειες περιεχομένου και το πρόγραμμα περιήγησης δεν εμφανίζει καμία πληροφορία εδώ στην ενότητα head.
<meta charset="utf-8"> : Καθορίζει το σύνολο χαρακτήρων του εγγράφου. Πρέπει να είναι σε μορφή Unicode, δηλαδή, UTF-8, υποστηρίζοντας τις περισσότερες αναγνωρισμένες γραπτές γλώσσες.
<title> : Η ετικέτα <title> ενημερώνει το πρόγραμμα περιήγησης για το όνομα της ιστοσελίδας. Ο τίτλος εμφανίζεται στην καρτέλα του προγράμματος περιήγησης όταν ο ιστότοπος εμφανίζεται στα αποτελέσματα αναζήτησης.
<link rel="stylesheet" href="css/styles.css"> : Ενημερώνει το πρόγραμμα περιήγησης να αναγνωρίσει το φύλλο στυλ που περιέχει τα στυλ CSS.
<body> : Αυτή η ετικέτα περιέχει τα κύρια περιεχόμενα της ιστοσελίδας. Όταν χρησιμοποιείτε μια ετικέτα <body> , βεβαιωθείτε ότι την κλείνετε χρησιμοποιώντας την ετικέτα </body> .

Βήμα 3- Μορφοποίηση με χρήση CSS

Στο styles.css αρχείο, προσθέστε στυλ σύμφωνα με τις ανάγκες του έργου σας. Σε αυτό το παράδειγμα, προσθέστε τις ακόλουθες γραμμές κώδικα στο styles.css αρχείο:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Έχουμε επιτέλους δημιουργήσει τα βασικά αρχεία HTML και CSS που θα χρειαστούμε για να ξεκινήσουμε τον ιστότοπό μας. Επιπλέον, μπορείτε να προσθέσετε εικόνες και να τις κρατήσετε στον φάκελο images. Αποθηκεύστε και κλείστε το αρχείο. Μετά από αυτό, ανοίξτε το index.html αρχείο στο αγαπημένο σας πρόγραμμα περιήγησης ιστού και θα δείτε μια βασική σελίδα στην οθόνη σας.

Συμπέρασμα

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

Επιπλέον, υπάρχουν και άλλοι οδηγοί HTML και CSS που μπορείτε να βρείτε στο ιστολόγιό μας:

Καλό προγραμματισμό!

Preslav Dobrev

Συγγραφέας · CloudSigma

Ο Preslav Dobrev είναι Δημιουργικός Σχεδιαστής στην CloudSigma, με εστίαση στη συνεπή επιχειρηματική ταυτότητα μέσω παραδοσιακών και καινοτόμων καναλιών μάρκετινγκ. Διαθέτει την ικανότητα να συνδυάζει το καλλιτεχνικό όραμα με το στρατηγικό μάρκετινγκ για τη δημιουργία εντυπωσιακών αφηγήσεων επωνυμίας.