Μαθήματα & Διαλέξεις
HTML
Εργαστήριο 2: Εισαγωγή στην HTML και CSS

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

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

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

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

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

Τι είναι η HTML;

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

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

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

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

  • <!DOCTYPE html>

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

  • <html>

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

  • <head>

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

  • <body>

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

Βασικά HTML Tags

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

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

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

Λίστες

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

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

Εικόνες

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

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

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

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

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

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

Βασικοί CSS Selectors

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

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

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

  1. Έναν τίτλο

    <h1>

    με το όνομά σας

  2. Μια παράγραφο που περιγράφει τα ενδιαφέροντά σας

  3. Μια λίστα με τα 3 αγαπημένα σας μαθήματα

  4. Έναν σύνδεσμο προς την ιστοσελίδα του πανεπιστημίου

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

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

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

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

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

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

  • Πλήρης τεκμηρίωση HTML/CSS
  • Tutorials και παραδείγματα
  • Έλεγχος υποστήριξης features στους browsers

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

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

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

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

docs