• HTML CSS για αρχάριους - Παράδειγμα κώδικα με HTML tags και CSS styling για πρώτο website

HTML & CSS για Αρχάριους: Το Πρώτο σας Website

Το HTML CSS για αρχάριους είναι το πρώτο βήμα για όποιον θέλει να μπει στον κόσμο του web development. Κάθε ιστοσελίδα που βλέπετε από το Google μέχρι το Facebook είναι φτιαγμένη με HTML (που δημιουργεί τη δομή) και CSS (που προσθέτει το styling). Η καλή είδηση; Δεν χρειάζεται να είστε προγραμματιστής ή να έχετε τεχνικό background για να μάθετε τα basics. Με λίγες ώρες πρακτικής, μπορείτε να δημιουργήσετε μια απλή αλλά λειτουργική ιστοσελίδα. Σε αυτόν τον οδηγό, θα σας δείξουμε ακριβώς πώς—από το άνοιγμα του text editor μέχρι το ανέβασμα της σελίδας σας online. Στο τέλος, θα έχετε δημιουργήσει το πρώτο σας website και θα καταλαβαίνετε πώς λειτουργεί το web πίσω από τις κουρτίνες.

Τι Είναι το HTML και το CSS;

Πριν ξεκινήσουμε, ας ορίσουμε τι κάνει το καθένα.

HTML (HyperText Markup Language)

Το HTML είναι η δομή της ιστοσελίδας το skeleton. Καθορίζει τι περιεχόμενο υπάρχει και πώς οργανώνεται: headings, paragraphs, images, links, lists. Σκεφτείτε το σαν το blueprint ενός κτιρίου δείχνει πού πάνε οι τοίχοι, οι πόρτες, τα παράθυρα.

Παράδειγμα HTML:

 
 
html
<h1>Αυτός είναι ένας τίτλος</h1>
<p>Αυτή είναι μια παράγραφος κειμένου.</p>

CSS (Cascading Style Sheets)

Το CSS είναι το styling το ντύσιμο του skeleton. Καθορίζει πώς φαίνεται το περιεχόμενο: χρώματα, fonts, spacing, layout. Επιστρέφοντας στο blueprint metaphor, το CSS είναι το χρώμα των τοίχων, τα έπιπλα, η διακόσμηση.

Παράδειγμα CSS:

 
 
css
h1 {
    color: blue;
    font-size: 32px;
}

Μαζί: Το HTML δημιουργεί το content, το CSS το κάνει όμορφο.

Τι Χρειάζεστε για να Ξεκινήσετε

Η ομορφιά του HTML/CSS; Δεν χρειάζεστε ακριβό software. Μόνο δύο πράγματα:

1. Text Editor: Όπου θα γράφετε τον κώδικα. Επιλογές:

  • VS Code (Visual Studio Code) – Δωρεάν, powerful, το πιο δημοφιλές
  • Sublime Text – Γρήγορο, ελαφρύ
  • Notepad++ – Απλό, για Windows

Προτείνουμε: VS Code. Download από code.visualstudio.com

2. Web Browser: Chrome, Firefox, Safari, Edge—οτιδήποτε έχετε. Αυτό θα “τρέχει” το HTML σας και θα δείχνει το αποτέλεσμα.

Bonus: Live Server extension για VS Code (για να βλέπετε αλλαγές σε real-time).

Βήμα 1: Δημιουργία του Πρώτου HTML Αρχείου

Ας φτιάξουμε την πιο απλή ιστοσελίδα που υπάρχει.

1. Ανοίξτε το VS Code

2. File → New File

3. Αποθηκεύστε το: File → Save As → Ονομάστε το index.html

Σημαντικό: Το .html extension είναι κρίσιμο. Χωρίς αυτό, ο browser δεν θα το αναγνωρίσει ως webpage.

4. Γράψτε αυτόν τον κώδικα:

 
 
html
<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Η Πρώτη μου Ιστοσελίδα</title>
</head>
<body>
    <h1>Καλώς ήρθατε!</h1>
    <p>Αυτή είναι η πρώτη μου ιστοσελίδα που δημιουργήθηκε με HTML.</p>
</body>
</html>

5. Αποθηκεύστε: Ctrl+S (Windows) ή Cmd+S (Mac)

6. Ανοίξτε το αρχείο: Βρείτε το index.html στον υπολογιστή σας → Δεξί κλικ → Open With → [Your Browser]

🎉 Συγχαρητήρια! Μόλις δημιουργήσατε την πρώτη σας ιστοσελίδα!

Κατανόηση της HTML Δομής

Ας αναλύσουμε τι σημαίνει κάθε γραμμή:

<!DOCTYPE html> Λέει στον browser: “Αυτό είναι HTML5 document.”

<html lang="el"> Το root element. Όλα τα άλλα πάνε μέσα. lang="el" σημαίνει Ελληνικά.

<head> Metadata—πληροφορίες για τη σελίδα που δεν εμφανίζονται στο screen:

  • <meta charset="UTF-8">: Character encoding (για ελληνικά χαρακτήρες)
  • <meta name="viewport"...>: Κάνει τη σελίδα responsive σε mobile
  • <title>: Το κείμενο στο browser tab

<body> Το ορατό περιεχόμενο της σελίδας. Ό,τι βλέπει ο χρήστης.

<h1> και <p> HTML tags:

  • <h1>: Heading 1 (ο μεγαλύτερος τίτλος)
  • <p>: Paragraph

Βήμα 2: Προσθήκη Περισσότερου Περιεχομένου

Ας κάνουμε τη σελίδα πιο ενδιαφέρουσα. Αντικαταστήστε το <body> section με αυτό:

 
 
html
<body>
    <header>
        <h1>Το Portfolio μου</h1>
        <nav>
            <a href="#about">Σχετικά</a>
            <a href="#work">Δουλειές</a>
            <a href="#contact">Επικοινωνία</a>
        </nav>
    </header>

    <section id="about">
        <h2>Σχετικά με εμένα</h2>
        <p>Είμαι ένας αρχάριος web developer που μαθαίνει HTML και CSS.</p>
        <img src="https://via.placeholder.com/300x200" alt="Placeholder εικόνα">
    </section>

    <section id="work">
        <h2>Οι Δουλειές μου</h2>
        <ul>
            <li>Πρώτο project</li>
            <li>Δεύτερο project</li>
            <li>Τρίτο project</li>
        </ul>
    </section>

    <section id="contact">
        <h2>Επικοινωνία</h2>
        <p>Email: info@example.com</p>
    </section>

    <footer>
        <p>&copy; 2026 Το Όνομά μου. Όλα τα δικαιώματα διατηρούνται.</p>
    </footer>
</body>

Νέα Tags που Χρησιμοποιήσαμε:

  • <header>: Header section της σελίδας
  • <nav>: Navigation menu
  • <a href="">: Links (anchor tags)
  • <section>: Content sections
  • <h2>: Heading 2 (μικρότερος από h1)
  • <img>: Εικόνα. src= είναι το image URL, alt= είναι περιγραφή
  • <ul> και <li>: Unordered list (bullets)
  • <footer>: Footer section

Αποθηκεύστε και ανανεώστε τον browser (F5). Η σελίδα έχει περισσότερο περιεχόμενο τώρα—αλλά δεν φαίνεται ωραία ακόμα. Εκεί μπαίνει το CSS.

Βήμα 3: Προσθήκη CSS Styling

Το CSS μπορεί να προστεθεί με τρεις τρόπους:

  1. Inline (μέσα στο HTML tag)
  2. Internal (μέσα στο <head> με <style>)
  3. External (ξεχωριστό .css αρχείο) ⬅️ Προτιμώμενο

Ας χρησιμοποιήσουμε internal για απλότητα. Προσθέστε αυτό μέσα στο <head>:

 
 
html
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #333;
    }

    header {
        background-color: #4CAF50;
        color: white;
        text-align: center;
        padding: 2rem;
    }

    nav a {
        color: white;
        text-decoration: none;
        margin: 0 15px;
        font-size: 1.1rem;
    }

    nav a:hover {
        text-decoration: underline;
    }

    section {
        padding: 2rem;
        max-width: 800px;
        margin: 0 auto;
    }

    h2 {
        color: #4CAF50;
        margin-bottom: 1rem;
    }

    img {
        max-width: 100%;
        height: auto;
        margin: 1rem 0;
    }

    ul {
        margin-left: 2rem;
    }

    footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 1rem;
        margin-top: 2rem;
    }
</style>

Αποθηκεύστε και ανανεώστε. Wow! Η σελίδα έχει χρώματα, spacing, και φαίνεται professional!

Κατανόηση του CSS

Ας αναλύσουμε τη σύνταξη:

 
 
css
selector {
    property: value;
}

Selector: Ποιο HTML element στοχεύετε (π.χ. h1, body, nav a)

Property: Τι θέλετε να αλλάξετε (π.χ. color, font-size, background)

Value: Η νέα τιμή (π.χ. blue, 20px, #4CAF50)

Παραδείγματα:

 
 
css
body {
    font-family: Arial, sans-serif;  /* Font για όλο το body */
    color: #333;                     /* Σκούρο γκρι κείμενο */
}

header {
    background-color: #4CAF50;       /* Πράσινο background */
    padding: 2rem;                   /* 2rem spacing γύρω */
}

nav a:hover {                        /* Όταν hover πάνω από link */
    text-decoration: underline;      /* Υπογράμμιση */
}

CSS Units:

  • px: Pixels (απόλυτο μέγεθος)
  • rem: Relative to root font size (responsive)
  • %: Ποσοστό του parent element
  • vh/vw: Viewport height/width

Βήμα 4: Responsive Design

Οι περισσότερες σελίδες ανοίγονται σε mobile. Ας κάνουμε τη σελίδα responsive.

Προσθέστε αυτό στο CSS σας (μέσα στο <style>):

 
 
css
@media (max-width: 768px) {
    header {
        padding: 1rem;
    }

    nav a {
        display: block;
        margin: 10px 0;
    }

    section {
        padding: 1rem;
    }
}

Το @media λέγεται media query. Λέει: “Όταν το screen είναι μικρότερο από 768px (mobile/tablet), εφάρμοσε αυτά τα styles.”

Δοκιμάστε το: Μικρύνετε το browser window. Το navigation menu αλλάζει σε vertical layout!

Βήμα 5: External CSS (Best Practice)

Για μεγαλύτερα projects, κρατάτε το CSS σε ξεχωριστό αρχείο.

1. Δημιουργήστε νέο αρχείο: style.css (στον ίδιο φάκελο με το index.html)

2. Μετακινήστε όλο το CSS από το <style> στο style.css

3. Στο HTML, αντικαταστήστε το <style> section με:

 
 
html
<link rel="stylesheet" href="style.css">

Βάλτε το μέσα στο <head>. Αυτό το <link> tag λέει: “Φόρτωσε το styling από το style.css.”

Πλεονεκτήματα:

  • Καθαρότερο HTML
  • Reusability (ίδιο CSS σε πολλές σελίδες)
  • Caching (ταχύτερο loading)

Common HTML Tags που Πρέπει να Γνωρίζετε

Structure:

  • <div>: Generic container
  • <span>: Inline container
  • <header>, <footer>, <nav>, <section>, <article>: Semantic HTML5

Text:

  • <h1> έως <h6>: Headings (1 = μεγαλύτερο)
  • <p>: Paragraph
  • <strong>: Bold (έμφαση)
  • <em>: Italic (έμφαση)
  • <br>: Line break

Lists:

  • <ul> + <li>: Unordered list (bullets)
  • <ol> + <li>: Ordered list (numbered)

Links & Media:

  • <a href="">: Link
  • <img src="" alt="">: Image
  • <video>, <audio>: Multimedia

Forms:

  • <form>, <input>, <textarea>, <button>: User input

Common CSS Properties

Text Styling:

 
 
css
color: #333;               /* Text color */
font-size: 16px;          /* Font size */
font-family: Arial;       /* Font */
font-weight: bold;        /* Bold, normal */
text-align: center;       /* Left, center, right */

Box Model:

 
 
css
width: 300px;             /* Element width */
height: 200px;            /* Element height */
padding: 20px;            /* Inside spacing */
margin: 10px;             /* Outside spacing */
border: 1px solid black;  /* Border */

Colors & Backgrounds:

 
 
css
background-color: #f0f0f0;
background-image: url('image.jpg');
opacity: 0.8;             /* Transparency */

Layout:

 
 
css
display: flex;            /* Flexbox */
display: grid;            /* Grid */
position: relative;       /* Positioning */
float: left;              /* Float */

Βήμα 6: Ανέβασμα της Σελίδας Online

Η σελίδα σας τώρα είναι local (μόνο στον υπολογιστή σας). Για να την δουν άλλοι, πρέπει να την ανεβάσετε σε hosting.

Δωρεάν Hosting Επιλογές για Beginners:

1. GitHub Pages (Προτεινόμενο)

  • Εντελώς δωρεάν
  • Unlimited bandwidth
  • URL: username.github.io

Steps:

  1. Δημιουργήστε GitHub account
  2. Δημιουργήστε repository με όνομα username.github.io
  3. Upload τα HTML/CSS files
  4. Επισκεφτείτε https://username.github.io

2. Netlify

  • Drag & drop deployment
  • Custom domains
  • HTTPS automatically

3. Vercel

  • Παρόμοιο με Netlify
  • Εξαιρετικό για React/Next.js αργότερα

Για περισσότερα για web technologies, δείτε τα σεμινάρια Web Design στο TeachMe.gr.

Tips για Beginners

1. Validate τον Κώδικα σας

Χρησιμοποιήστε το W3C Validator για να ελέγξετε errors. Καλός κώδικας = λιγότερα bugs.

2. Χρησιμοποιήστε Developer Tools

Στον browser: Δεξί κλικ → Inspect (ή F12). Δείτε και τροποποιήστε HTML/CSS σε real-time για πειραματισμό.

3. Semantic HTML

Χρησιμοποιήστε <header>, <nav>, <section> αντί για <div> παντού. Καλύτερο για SEO και accessibility.

4. CSS Resets

Οι browsers έχουν default styles. Ο * { margin: 0; padding: 0; } τα μηδενίζει για consistency.

5. Mobile-First Design

Σχεδιάστε για mobile πρώτα, μετά για desktop. Η πλειοψηφία των users είναι σε mobile.

6. Naming Conventions

Χρησιμοποιήστε descriptive class names:

  • Καλό: .header-navigation, .about-section
  • Κακό: .box1, .green-thing

7. Comment τον Κώδικα

 
 
html
<!-- Αυτό είναι comment στο HTML -->
 
 
css
/* Αυτό είναι comment στο CSS */

Comments βοηθούν να θυμάστε τι κάνει ο κώδικας.

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

Τώρα που ξέρετε HTML/CSS basics, πού πάτε από εδώ;

1. CSS Layouts: Μάθετε Flexbox και Grid—modern τρόποι να φτιάχνετε layouts. Το floats είναι outdated.

2. CSS Frameworks: Bootstrap, Tailwind CSS—pre-built components για γρήγορο development.

3. JavaScript: Προσθέτει interactivity—animations, form validation, dynamic content.

4. Responsive Design: Media queries, mobile-first approach, viewport units.

5. Accessibility: Κάντε το site χρηστικό για όλους—screen readers, keyboard navigation.

6. Build Projects: Portfolio site, blog, landing page—το learning-by-doing είναι το καλύτερο.

Για να μάθετε πώς να συνδυάσετε web design με graphic design, δείτε το “Πώς να Μάθετε Illustrator σε 10 Βήματα” άρθρο μας.

Resources για Εξάσκηση

Interactive Learning:

Practice:

  • CodePen – Online editor για πειραματισμό
  • CSS Tricks – Tutorials και tips

Challenges:

Συμπεράσματα

Το HTML και CSS είναι η βάση του web. Χωρίς αυτά, δεν υπάρχει internet όπως τον ξέρουμε. Η μάθηση τους δεν είναι μόνο για developers—είναι για οποιονδήποτε θέλει να κατανοήσει πώς λειτουργεί το digital world.

Recap:

  • HTML: Δομή (τι υπάρχει)
  • CSS: Styling (πώς φαίνεται)
  • Μαζί: Functional, όμορφες ιστοσελίδες

Το πρώτο σας website δεν θα είναι τέλειο. Κανενός δεν είναι. Αλλά κάθε σελίδα που φτιάχνετε, κάθε bug που διορθώνετε, κάθε layout που σχεδιάζετε—σας κάνει καλύτερους. Το web development είναι ταξίδι, όχι προορισμός.

Ξεκινήστε σήμερα. Ανοίξτε τον text editor, γράψτε το πρώτο σας <h1>Hello World</h1>, και δείτε πού σας πάει. Η πρώτη γραμμή κώδικα είναι πάντα η πιο σημαντική.

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

Συχνές Ερωτήσεις (FAQ)

Είναι δύσκολο να μάθω HTML και CSS;

Όχι! Το HTML και CSS είναι από τα πιο εύκολα programming/markup languages. Δεν χρειάζεται μαθηματικά ή λογική προγραμματισμού—μόνο να θυμάστε tags και properties. Με 10-20 ώρες practice, θα είστε comfortable.

Χρειάζομαι να πληρώσω για software;

Απολύτως όχι. Όλα τα εργαλεία είναι δωρεάν: VS Code (text editor), Chrome/Firefox (browser), GitHub Pages (hosting). Το web development είναι ένα από τα πιο accessible fields.

Πόσο χρόνο παίρνει να μάθω HTML/CSS;

Basics: 1-2 εβδομάδες (2-3 ώρες/ημέρα). Comfortable: 1-2 μήνες. Advanced (Flexbox, Grid, animations): 3-6 μήνες. Professional-level: 1 χρόνο με consistent practice και projects.

HTML/CSS vs WordPress – τι να μάθω;

Εξαρτάται από το goal. WordPress: Γρήγορα websites χωρίς κώδικα, καλό για blogs/business sites. HTML/CSS: Πλήρης έλεγχος, custom designs, foundation για web development career. Αν θέλετε να γίνετε developer, μάθετε HTML/CSS πρώτα.

Μετά το HTML/CSS, τι μαθαίνω;

JavaScript είναι το επόμενο φυσικό βήμα. Προσθέτει interactivity και logic. Μετά: React/Vue (frameworks), Node.js (backend), Git (version control). Αλλά μην βιάζεστε—master το HTML/CSS πρώτα.

Σχετικά με τον αρθρογράφο: Γιάννης Βλασόπουλος

Ο Γιάννης Βλασόπουλος είναι ο αρθρογράφος του TeachMe.gr και αναπόσπαστο μέλος της οικογένειας των PhotoBros. Μέσα από τη πολυετή του εμπειρία στη δημιουργία περιεχομένου και το SEO, εξασφαλίζει ότι κάθε άρθρο είναι αξιόπιστο και πραγματικά χρήσιμο για εσάς!

Μοιραστείτε το άρθρο!

Περισσότερα άρθρα

Σεμινάρια στο teachme.gr

Προβολή όλων των σεμιναρίων (κλικ εδώ)

Γινετε και εσεις ένας από τους χιλιάδες μαθητές του teachme.gr!

Και απογειώστε τις δεξιότητές σας μέσα από τον Η/Υ σας, με επίσημη βεβαίωση Γνώσεων!