Ανάπτυξη Front-end
Εισαγωγή στην HTML: Τα δομικά στοιχεία της ανάπτυξης Ιστού
9 Μαΐου, 2023
Η HTML είναι η βάση κάθε ιστότοπου…
Σε αυτήν την ανάρτηση, θα ξεκινήσουμε με τα πολύ βασικά της HTML, συμπεριλαμβανομένου του τι είναι, πώς λειτουργεί και γιατί είναι τόσο σημαντικό στην ανάπτυξη ιστού. Θα πούμε για την σύνταξη της HTML, θα εξερευνήσουμε διάφορες ετικέτες HTML και τα χαρακτηριστικά τους και θα μάθουμε πώς να δημιουργήσουμε μια βασική ιστοσελίδα χρησιμοποιώντας HTML. Στην πορεία, θα καλύψουμε επίσης ορισμένες βέλτιστες πρακτικές για τη σύνταξη καθαρού, σημασιολογικού κώδικα HTML.
Ένα παράδειγμα βασικού κώδικα HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to my web page!</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<img src="image.jpg" alt="An image">
</body>
</html>
Σε αυτό το παράδειγμα, έχουμε ένα βασικό έγγραφο HTML με μια δήλωση DOCTYPE στο επάνω μέρος, που υποδεικνύει ότι πρόκειται για έγγραφο HTML5. Το στοιχείο html περιέχει δύο θυγατρικά στοιχεία: το στοιχείο κεφαλής και το στοιχείο σώματος. Μέσα στο στοιχείο head, έχουμε ένα στοιχείο τίτλου που ορίζει τον τίτλο της ιστοσελίδας. Μέσα στο στοιχείο σώματος, έχουμε ένα στοιχείο h1 που εμφανίζει μια κύρια επικεφαλίδα, ένα στοιχείο p που εμφανίζει μια παράγραφο κειμένου, ένα στοιχείο ul που εμφανίζει μια μη ταξινομημένη λίστα και ένα στοιχείο img που εμφανίζει μια εικόνα. Τα στοιχεία li μέσα στο στοιχείο ul αντιπροσωπεύουν κάθε στοιχείο της λίστας και το χαρακτηριστικό src του στοιχείου img καθορίζει το αρχείο προέλευσης για την εικόνα, ενώ το χαρακτηριστικό alt παρέχει εναλλακτικό κείμενο για την εικόνα. Αυτό είναι απλώς ένα βασικό παράδειγμα κώδικα HTML, αλλά δείχνει μερικά από τα βασικά δομικά στοιχεία του HTML, συμπεριλαμβανομένων ετικετών, χαρακτηριστικών και στοιχείων.