Εργαστήριο 2: Εισαγωγή στην HTML και CSS

Mon, 01 Jan 0001 00:00:00 +0000

Καλώς ήρθατε στο δεύτερο εργαστήριο! Σε αυτό το μάθημα θα μάθουμε τα βασικά της HTML και πώς να δημιουργήσουμε την πρώτη μας ιστοσελίδα.

Στόχοι του Εργαστηρίου

Μετά το πέρας αυτού του εργαστηρίου θα μπορείτε να:

Κατανοείτε τη βασική δομή ενός HTML εγγράφου
Χρησιμοποιείτε τα πιο συνηθισμένα HTML tags
Δημιουργείτε απλές ιστοσελίδες με κείμενο και εικόνες
Εφαρμόζετε βασική μορφοποίηση με CSS

Τι είναι η HTML;

Η HTML (HyperText Markup Language) είναι η γλώσσα σήμανσης που χρησιμοποιείται για τη δημιουργία ιστοσελίδων. Δεν είναι γλώσσα προγραμματισμού, αλλά γλώσσα που περιγράφει τη δομή και το περιεχόμενο μιας σελίδας.

Βασική Δομή HTML Εγγράφου

Κάθε HTML έγγραφο ακολουθεί μια συγκεκριμένη δομή:

Επεξήγηση των Στοιχείων

<!DOCTYPE html>

Δηλώνει ότι πρόκειται για HTML5 έγγραφο
<html>

Το ριζικό στοιχείο που περιέχει όλο το περιεχόμενο
<head>

Περιέχει μεταδεδομένα και πληροφορίες για το έγγραφο
<body>

Περιέχει το ορατό περιεχόμενο της σελίδας

Βασικά HTML Tags

Επικεφαλίδες (Headings)

Υπάρχουν 6 επίπεδα επικεφαλίδων στην HTML:

Παράγραφοι και Κείμενο

Λίστες

Αριθμημένη λίστα:

Μη αριθμημένη λίστα:

Σύνδεσμοι (Links)

Εικόνες

Εισαγωγή στο CSS

Το CSS (Cascading Style Sheets) χρησιμοποιείται για τη μορφοποίηση των HTML στοιχείων.

Τρόποι Προσθήκης CSS

1. Inline CSS (Μέσα στο HTML tag):

2. Internal CSS (Μέσα στο <head>):

3. External CSS (Εξωτερικό αρχείο - Προτιμώμενος τρόπος):

Βασικοί CSS Selectors

Χρήσιμες CSS Ιδιότητες

Άσκηση 1: Δημιουργία Απλής Σελίδας

Δημιουργήστε μια HTML σελίδα με:

Έναν τίτλο

<h1>

με το όνομά σας
Μια παράγραφο που περιγράφει τα ενδιαφέροντά σας
Μια λίστα με τα 3 αγαπημένα σας μαθήματα
Έναν σύνδεσμο προς την ιστοσελίδα του πανεπιστημίου

Άσκηση 2: Μορφοποίηση με CSS

Προσθέστε CSS στην παραπάνω σελίδα για να:

Αλλάξετε το χρώμα του τίτλου σε μπλε (#0f4761)
Ορίσετε το μέγεθος της γραμματοσειράς των παραγράφων σε 18px
Προσθέσετε περίγραμμα γύρω από τη λίστα

Δομή Φακέλων για Web Project

Όταν δημιουργείτε ένα web project, η συνιστώμενη δομή φακέλων είναι:

Χρήσιμοι Πόροι

MDN Web Docs

Πλήρης τεκμηρίωση HTML/CSS

W3Schools

Tutorials και παραδείγματα

Can I Use

Έλεγχος υποστήριξης features στους browsers

Επόμενα Βήματα

Στο επόμενο εργαστήριο θα μάθουμε:

Προχωρημένα CSS layouts (Flexbox και Grid)
Responsive design για mobile συσκευές
Βασική JavaScript για διαδραστικότητα

Καλή επιτυχία!

Εργαστηριο-4