Μαθήματα css

Μαθήματα css για να βελτιώσετε την ιστοσελίδα σας. Εκπαίδευση css και σεμινάρια κατασκευής ιστοσελίδων. Εκπαίδευση ενηλίκων σε τεχνολογίες διαδικτύου.

Εκπαιδευτής Ενηλίκων Νικόλαος Μπαλατσούκας Τηλ. (+30) 6977676785

Το css αποτελεί το συμπλήρωμα της γλώσσας html. Ουσιαστικά το css αποτελεί μονόδρομο για να καθορίσουμε την εμφάνιση κάθε ιστοσελίδας. Το CSS είναι αρκτικόλεξο και προέρχεται από τα αρχικά των λέξεων Cascading Style Sheets. Είτε αναφερόμαστε σε ιστοσελίδα κατασκευασμένη με html, είτε ηλεκτρονικό κατάστημα κατασκευασμένο με το opencart η ιστολόγιο δημιουργημένο με το wordpress, Η γνώση του css είναι αυτή που θα μας επιτρέψει να ικανοποιήσουμε πλήρως τις εικαστικές απαιτήσεις του ιδιοκτήτη της ιστοσελίδας. Κατά τη γνώμη μου αποτελεί μια από τις σημαντικότερες γνώσεις που πρέπει να αποκτήσει κάποιος ο οποίος θέλει να ασχοληθεί με κατασκευή ιστοσελίδων. Με τη σωστή χρήση του css θα μπορέσουμε να γλιτώσουμε πολύ κόπο κατά την επεξεργασία των στατικών ιστοσελίδων. Διότι μπορούμε με λίγες κινήσεις να αλλάζουμε την εμφάνιση ολόκληρου του ιστότοπου. Στα σεμινάρια wordpress η opencart συνήθως δεν υπάρχει ενότητα css. Καλό θα είναι όμως ο εκπαιδευόμενος να φροντίσει ώστε να αποκτήσει αυτή τη γνώση είτε μέσω σεμιναρίων είτε μέσα από ιδιαίτερα μαθήματα css.

Πρώτο παράδειγμα css

Ακολουθεί ένα παράδειγμα στο οποίο βλέπουμε τη χρήση του css. Υποθέτουμε ότι θέλουμε να δημιουργήσουμε μία σελίδα με την ακόλουθη μορφή. Θέλουμε δηλαδή να δημιουργήσουμε ένα div το οποίο να έχει πράσινο περίγραμμα, μπλε φόντο και σκούρα μπλε γράμματα:

πρώτο παράδειγμα css

Αυτό μπορούμε να το κάνουμε με τον ακόλουθο κώδικα css:

μαθήματα css

Δεύτερο παράδειγμα CSS

Στο δεύτερο παράδειγμα χρησιμοποιούμε το CSS για να μορφοποιήσουμε κάθε ομάδα με τα χρώματά της (πράσινο, κόκκινο και κίτριινο).

Εδώ βλέπουμε το αποτέλεσμα στο browser:

δεύτερο παράδειγμα css στο browser

Και εδώ βλέπουμε τον κώδικα:

δεύτερο παράδειγμα css

(* Προς αποφυγή παρεξηγήσεων: οι ομάδες τοποθετήθηκαν με βάση τη σειρά που τερμάτισαν στο πρωτάθλημα ποδοσφαίρου 2022-2023)

Μορφοποίηση των links με css

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

css links

Η μορφοποίηση των link με χρήση css μπορεί να γίνει χρησιμοποιώντας τον ακόλουθο κώδικα:

css links source

Δημιουργία buttons με css

Με παρόμοια τεχνική μπορούμε να δημιουργήσουμε buttons χρησιμοποιώντας τη γλώσσα css. Στα ακόλουθα δύο παραδείγματα έχουμε δημιουργήσει ένα πράσινο και ένα κόκκινο button με τον κώδικα που φαίνεται στην κάθε εικόνα:

Πρώτα βλέπουμε το κόκκινο button:

css button red

Και στη συνέχεια βλέπουμε το πράσινο button:

css button green

Css float

Στη συνέχεια ακολουθεί παράδειγμα που μας βοηθά να καταλάβουμε την ιδιότητα float. Εάν δεν υπάρχει τιμή στην ιδιότητά float τότε το κάθε div τοποθετείται κάτω από το άλλο. Εάν όμως στην ιδιότητα float δεν υπάρχει η τιμή left τότε το κάθε division τοποθετείται δεξιά από το προηγούμενο. Δηλαδή το div αφήνει το προηγούμενο στα αριστερά του.

css float

W3 css

Ακολουθεί ένας εξαιρετικός τρόπος για να χρησιμοποιήσουμε το css για τη στοίχιση περιεχομένου ιστοσελίδας. Μπορούμε να χρησιμοποιήσουμε το μισό της οθόνης (w3-half), το ένα τρίτο τςη οθόνης (w3-third), τα δυο τρίτα της οθόνης (w3-twothird) καθώς και το ένα τέταρτο της οθόνης (w3-quarter).

w3 css

Εξωτερικό αρχείο css

Μια πολύ χρήσιμη τεχνική στην κατασκευή ιστοσελίδων είναι να δημιουργήσουμε εξωτερικό αρχείο css. Σε αυτή την περίπτωση όλες οι εντολές css τοποθετούνται στο εξωτερικό αρχείο css. Το κέρδος είναι οτι μπορούμε εύκολα να αλλάξουμε ένα αρχείο και να δούμε την αλλαγή σε όλες τις σελίδες html

Ο κώδικας του αρχείου html:

Ο κώδικας του αρχείου html

Ο κώδικας του αρχείου css:

Ο κώδικας του αρχείου css

Και εδώ βλέπουμε το αποτέλεσμα:

αποτέλεσμα εξωτερικού αρχείου css

Ασκήσεις CSS — Επίπεδο 1

1η άσκηση css: Τίτλοι

HTML

<h1>Καλώς ήρθατε στην ιστοσελίδα μας</h1>
<h2>Οι υπηρεσίες μας</h2>
<h3>Κατασκευή ιστοσελίδων</h3>

Ζητούμενα

Γράψτε CSS ώστε:

2η άσκηση css: Παράγραφοι

HTML

<p>
    Η εταιρεία μας κατασκευάζει σύγχρονες ιστοσελίδες.
</p>

<p>
    Επικοινωνήστε μαζί μας για περισσότερες πληροφορίες.
</p>

Γράψτε CSS ώστε όλες οι παράγραφοι να έχουν:

3η άσκηση css: Links

HTML

<a href="#">Αρχική</a>
<a href="#">Υπηρεσίες</a>
<a href="#">Επικοινωνία</a>

Γράψτε CSS ώστε τα links:

Bonus: Όταν περνάει το mouse πάνω από ένα link (:hover), να γίνεται red.

4η άσκηση css: Button

HTML

<button>Επικοινωνήστε μαζί μας</button>

Δημιουργήστε ένα button με:

Bonus: Στο :hover να αλλάζει το background σε darkblue.

5η άσκηση css: Classes

HTML

<p class="intro">
    Καλώς ήρθατε στην ιστοσελίδα μας.
</p>

<p>
    Εδώ μπορείτε να μάθετε περισσότερα για εμάς.
</p>

<p class="important">
    Επικοινωνήστε μαζί μας σήμερα!
</p>

Χρησιμοποιώντας classes:

6η άσκηση css: ID

HTML

<h1 id="page-title">Οι Υπηρεσίες μας</h1>

<p>Δείτε όλες τις υπηρεσίες που προσφέρουμε.</p>

Χρησιμοποιήστε το id ώστε το #page-title να έχει:

Σημείωση: Καλή ευκαιρία για να εξηγήσετε τη διαφορά μεταξύ h1, .class και #id.

Ασκήσεις Box Model

7η άσκηση css: Ένα απλό section

HTML

<div class="about">
    <h2>Σχετικά με εμάς</h2>

    <p>
        Είμαστε μια εταιρεία κατασκευής ιστοσελίδων.
    </p>
</div>

Η .about να έχει:

Στόχος: Να κατανοήσετε τη λογική του Box Model:

content
↓
padding
↓
border
↓
margin

8η άσκηση css: Card

Αυτό είναι ένα παράδειγμα που συναντάμε πολύ συχνά σε ιστοσελίδες WordPress.

HTML

<div class="card">
    <h2>Web Design</h2>

    <p>
        Δημιουργούμε σύγχρονες και γρήγορες ιστοσελίδες.
    </p>

    <a href="#">Μάθετε περισσότερα</a>
</div>

Δημιουργήστε μία κάρτα που να έχει:

Ο τίτλος της κάρτας να είναι darkblue.

Το link να μην έχει underline.

9η άσκηση css: Εικόνα

HTML

<img
    class="featured-image"
    src="https://via.placeholder.com/600x400"
    alt="Παράδειγμα εικόνας"
>

Η εικόνα να έχει:

Στη συνέχεια αλλάξτε το width σε:

width: 100%;

Παρατηρήστε τη διαφορά.

Σημείωση: Το width: 100% μαζί με height: auto χρησιμοποιείται πολύ συχνά για εικόνες σε WordPress ιστοσελίδες.

Πιο WordPress-like ασκήσεις

10η άσκηση css: Hero Section

HTML

<div class="hero">
    <h1>Κατασκευή Ιστοσελίδων</h1>

    <p>
        Δημιουργούμε επαγγελματικές ιστοσελίδες για επιχειρήσεις.
    </p>

    <a class="button" href="#">Ζητήστε προσφορά</a>
</div>

Δώστε στο .hero:

Στο h1:

Στο .button:

11η άσκηση css: Menu

HTML

<div class="menu">
    <a href="#">Αρχική</a>
    <a href="#">Σχετικά</a>
    <a href="#">Υπηρεσίες</a>
    <a href="#">Blog</a>
    <a href="#">Επικοινωνία</a>
</div>

Δώστε στο .menu:

Στα links που βρίσκονται μέσα στο .menu:

Στο :hover τα links να γίνονται orange.

Χρησιμοποιήστε selector της μορφής:

.menu a {
    /* CSS εδώ */
}

12η άσκηση css: Blog Post

HTML

<article class="post">

    <h1>10 συμβουλές για καλύτερο WordPress</h1>

    <p class="date">10 Οκτωβρίου 2026</p>

    <img
        src="https://via.placeholder.com/800x400"
        alt="WordPress"
    >

    <p>
        Το WordPress είναι ένα από τα δημοφιλέστερα
        συστήματα διαχείρισης περιεχομένου.
    </p>

    <p>
        Σε αυτό το άρθρο θα δούμε μερικές χρήσιμες συμβουλές.
    </p>

    <a href="#">Διαβάστε περισσότερα</a>

</article>

Γράψτε CSS ώστε:

13η άσκηση css: Contact Box

HTML

<div class="contact-box">

    <h2>Επικοινωνία</h2>

    <p>Τηλέφωνο: 210 1234567</p>

    <p>Email: info@example.com</p>

    <a href="#">Στείλτε μας μήνυμα</a>

</div>

Δημιουργήστε ένα contact box χρησιμοποιώντας:

Στη συνέχεια μορφοποιήστε ξεχωριστά:

14η άσκηση css: Form

HTML

<form class="contact-form">

    <label>Όνομα</label>
    <input type="text">

    <label>Email</label>
    <input type="email">

    <label>Μήνυμα</label>
    <textarea></textarea>

    <button>Αποστολή</button>

</form>

Γράψτε CSS ώστε:

WordPress Tip: Οι ίδιοι selectors και οι ίδιες CSS ιδιότητες μπορούν αργότερα να χρησιμοποιηθούν για τη μορφοποίηση φορμών που δημιουργούνται από WordPress plugins.

Τελική Άσκηση — Mini WordPress Page

15η άσκηση css: Δημιουργία ολοκληρωμένης σελίδας

Σε αυτή την άσκηση θα συνδυάσετε όσα μάθατε στις προηγούμενες ασκήσεις.

HTML

<div class="page">

    <div class="header">

        <h1>My Business</h1>

        <div class="menu">
            <a href="#">Αρχική</a>
            <a href="#">Υπηρεσίες</a>
            <a href="#">Blog</a>
            <a href="#">Επικοινωνία</a>
        </div>

    </div>


    <div class="hero">

        <h2>Καλώς ήρθατε</h2>

        <p>
            Προσφέρουμε επαγγελματικές υπηρεσίες
            για μικρές και μεγάλες επιχειρήσεις.
        </p>

        <a class="button" href="#">
            Οι υπηρεσίες μας
        </a>

    </div>


    <div class="content">

        <h2>Σχετικά με εμάς</h2>

        <p>
            Η εταιρεία μας δραστηριοποιείται στον χώρο
            του web design.
        </p>

        <img
            src="https://via.placeholder.com/600x300"
            alt="Η εταιρεία μας"
        >

    </div>


    <div class="footer">

        <p>
            Copyright 2026 - My Business
        </p>

    </div>

</div>

Ζητούμενο

Δημιουργήστε το CSS ολόκληρης της σελίδας.

Χρησιμοποιήστε τουλάχιστον τις παρακάτω CSS ιδιότητες:

Χρησιμοποιήστε επίσης τουλάχιστον μία φορά:

Άσκηση στη χρήση css

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

  1. Αρχικά θα βελτιώσουμε την εμφάνιση κάποιων στοιχείων γλώσσα html, και συγκεκριμένα τις επικεφαλίδες τις παραγράφους τις εικόνες τις λίστες και το μενού. Πρωτα θα εφαρμόσουμε τη μορφοποίηση css σε μία από τις σελίδες, κατά προτίμηση στην αρχική σελίδα (homepage).
  2. Στη συνέχεια θα μεταφέρουμε τις εντολές μορφοποίησης σε εξωτερικό αρχείο css.
  3. Μετά θα συνδέσουμε όλα τα αρχεία με το συγκεκριμένο εξωτερικό αρχείο css.
  4. Στο τέλος θα πάμε σε κάθε αρχείο html και θα κάνουμε τις απαραίτητες τροποποιήσεις στον κώδικα ώστε η μορφοποίηση css να εφαρμόζεται σωστά σε όλα τα στοιχεία της γλώσσας html.

Ασκήσεις CSS — Επίπεδο 2

Για κάθε άσκηση δημιουργήστε δύο αρχεία: index.html και style.css.

Στο <head> προσθέστε:

<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Άσκηση 16 — Block και Inline

HTML

<div class="display-demo">
    <a href="#">Αρχική</a>
    <a href="#">Υπηρεσίες</a>
    <a href="#">Επικοινωνία</a>
</div>

Ζητούμενα

Άσκηση 17 — Link που μοιάζει με Button

HTML

<div class="offer">
    <h2>Χρειάζεστε ιστοσελίδα;</h2>
    <p>Ας συζητήσουμε το επόμενο project σας.</p>
    <a class="offer-button" href="#">Ζητήστε προσφορά</a>
</div>

Ζητούμενα

Άσκηση 18 — Οι πρώτες στήλες με Flexbox

HTML

<div class="columns">
    <div class="column">Στήλη 1</div>
    <div class="column">Στήλη 2</div>
    <div class="column">Στήλη 3</div>
</div>

Ζητούμενα

Άσκηση 19 — Οριζόντιο Menu

HTML

<nav class="main-menu">
    <a href="#">Αρχική</a>
    <a href="#">Σχετικά</a>
    <a href="#">Υπηρεσίες</a>
    <a href="#">Blog</a>
    <a href="#">Επικοινωνία</a>
</nav>

Ζητούμενα

Άσκηση 20 — Logo αριστερά, Menu δεξιά

HTML

<header class="site-header">
    <a class="logo" href="#">My Business</a>
    <nav class="header-menu">
        <a href="#">Αρχική</a>
        <a href="#">Υπηρεσίες</a>
        <a href="#">Επικοινωνία</a>
    </nav>
</header>

Ζητούμενα

Άσκηση 21 — Κεντράρισμα μέσα σε Section

HTML

<section class="welcome">
    <div class="welcome-content">
        <h1>Καλώς ήρθατε!</h1>
        <p>Δημιουργούμε ιστοσελίδες για την επιχείρησή σας.</p>
        <a href="#">Δείτε τις υπηρεσίες μας</a>
    </div>
</section>

Ζητούμενα

Άσκηση 22 — Κείμενο και Εικόνα δίπλα δίπλα

HTML

<section class="about-section">
    <div class="about-text">
        <h2>Σχετικά με εμάς</h2>
        <p>Σχεδιάζουμε ιστοσελίδες που βοηθούν τις επιχειρήσεις να αναπτυχθούν.</p>
    </div>
    <div class="about-image">
        <img src="company.jpg" alt="Η ομάδα της εταιρείας">
    </div>
</section>

Ζητούμενα

Άσκηση 23 — Τρεις Κάρτες Υπηρεσιών

HTML

<section class="services">
    <article class="service-card">
        <h2>Web Design</h2>
        <p>Σχεδιασμός σύγχρονων ιστοσελίδων.</p>
        <a href="#">Περισσότερα</a>
    </article>
    <article class="service-card">
        <h2>SEO</h2>
        <p>Βελτίωση της παρουσίας σας στις μηχανές αναζήτησης.</p>
        <a href="#">Περισσότερα</a>
    </article>
    <article class="service-card">
        <h2>Υποστήριξη</h2>
        <p>Συντήρηση και ενημέρωση της ιστοσελίδας σας.</p>
        <a href="#">Περισσότερα</a>
    </article>
</section>

Ζητούμενα

Άσκηση 24 — Κάρτες που αλλάζουν Γραμμή

HTML

<div class="features">
    <div class="feature">Γρήγορη φόρτωση</div>
    <div class="feature">Responsive σχεδιασμός</div>
    <div class="feature">Εύκολη διαχείριση</div>
    <div class="feature">Τεχνική υποστήριξη</div>
    <div class="feature">Ασφάλεια</div>
    <div class="feature">SEO</div>
</div>

Ζητούμενα

Άσκηση 25 — Responsive Container και Box Sizing

HTML

<main class="container">
    <h1>Το Blog μας</h1>
    <div class="content-box">
        <p>Διαβάστε νέα και συμβουλές για την κατασκευή ιστοσελίδων.</p>
    </div>
</main>

Ζητούμενα

Άσκηση 26 — Η πρώτη Media Query

HTML

<section class="responsive-banner">
    <h1>Κατασκευή Ιστοσελίδων</h1>
    <p>Η επιχείρησή σας αξίζει μια σύγχρονη παρουσία στο Internet.</p>
</section>

Ζητούμενα

Άσκηση 27 — Responsive Section δύο Στηλών

HTML

<section class="split-section">
    <div class="split-content">
        <h2>Γιατί να μας επιλέξετε;</h2>
        <p>Συνδυάζουμε όμορφο σχεδιασμό, ταχύτητα και εύκολη διαχείριση.</p>
    </div>
    <div class="split-content">
        <h2>Πώς δουλεύουμε;</h2>
        <p>Συζητάμε τις ανάγκες σας και δημιουργούμε την κατάλληλη λύση.</p>
    </div>
</section>

Ζητούμενα

Άσκηση 28 — Responsive Menu

HTML

<nav class="responsive-menu">
    <a href="#">Αρχική</a>
    <a href="#">Σχετικά</a>
    <a href="#">Υπηρεσίες</a>
    <a href="#">Blog</a>
    <a href="#">Επικοινωνία</a>
</nav>

Ζητούμενα

Άσκηση 29 — Responsive Φόρμα Επικοινωνίας

HTML

<form class="contact-form">
    <div class="form-row">
        <div class="form-field">
            <label for="name">Όνομα</label>
            <input id="name" name="name" type="text">
        </div>
        <div class="form-field">
            <label for="email">Email</label>
            <input id="email" name="email" type="email">
        </div>
    </div>
    <div class="form-field">
        <label for="message">Μήνυμα</label>
        <textarea id="message" name="message" rows="5"></textarea>
    </div>
    <button type="button">Αποστολή</button>
</form>

Ζητούμενα

Τελική Άσκηση — Responsive Mini Page

Άσκηση 30 — Ολοκληρωμένη Responsive Σελίδα

HTML

<div class="page">
    <header class="site-header">
        <a class="logo" href="#">My Business</a>
        <nav class="main-menu">
            <a href="#about">Σχετικά</a>
            <a href="#services">Υπηρεσίες</a>
            <a href="#contact">Επικοινωνία</a>
        </nav>
    </header>
    <main>
        <section class="hero">
            <h1>Ιστοσελίδες που ξεχωρίζουν</h1>
            <p>Σύγχρονες λύσεις για την επιχείρησή σας.</p>
            <a class="button" href="#services">Οι υπηρεσίες μας</a>
        </section>
        <section class="about" id="about">
            <div class="about-text">
                <h2>Σχετικά με εμάς</h2>
                <p>Βοηθάμε τις επιχειρήσεις να δημιουργήσουν μια ολοκληρωμένη παρουσία στο Internet.</p>
            </div>
            <div class="about-image">
                <img src="company.jpg" alt="Η ομάδα μας">
            </div>
        </section>
        <section class="services-section" id="services">
            <h2>Οι υπηρεσίες μας</h2>
            <div class="services">
                <article class="card">
                    <h3>Web Design</h3>
                    <p>Σχεδιασμός επαγγελματικών ιστοσελίδων.</p>
                    <a href="#contact">Μάθετε περισσότερα</a>
                </article>
                <article class="card">
                    <h3>SEO</h3>
                    <p>Βελτίωση της προβολής της επιχείρησής σας.</p>
                    <a href="#contact">Μάθετε περισσότερα</a>
                </article>
                <article class="card">
                    <h3>Υποστήριξη</h3>
                    <p>Συντήρηση και τεχνική υποστήριξη.</p>
                    <a href="#contact">Μάθετε περισσότερα</a>
                </article>
            </div>
        </section>
        <section class="contact" id="contact">
            <h2>Ας συνεργαστούμε</h2>
            <p>Επικοινωνήστε μαζί μας για το επόμενο project σας.</p>
            <a class="button" href="mailto:info@example.com">Στείλτε email</a>
        </section>
    </main>
    <footer class="site-footer">
        <p>Copyright 2026 — My Business</p>
    </footer>
</div>

Ζητούμενα

Χρόνος εκπαίδευσης css

Είναι σημαντικό να τονίσουμε ότι ο χρόνος που απαιτείται για να μάθει κάποιος καλά το css είναι πολύ μεγαλύτερος από το χρόνο που απαιτείται για ένα ολοκληρωμένο σεμινάριο html. Αυτό συμβαίνει διότι οι απαιτήσεις που σχετίζονται με το css είναι πολύ περισσότερες από αυτές που σχετίζονται με το html. Όταν μιλάμε για μαθήματα html τότε έχουμε να κάνουμε μόνο με το περιεχόμενο. Αντίθετα όταν έχουμε να κάνουμε με απαιτήσεις για το css τότε αυτές περιλαμβάνουν σωστή εμφάνιση σε κάθε φυλλομετρητή και κάθε συσκευή. Επίσης ενδέχεται να χρειαστεί να κάνουμε αλλαγές σε αρχεία περίπλοκα css που βρίσκονται σε template bootstrap ή σε template wordpres. Ειδικότερα στην περίπτωση του opencart η καλή γνώση του html μπορεί να μας εξοικονομήσει πολύ χρόνο. Μπορει επίσης να μας επιτρέπει να πραγματοποιήσουμε μια απαίτηση του πελάτη η οποια θα ήταν ανέφικτη μέσα από το περιβάλλον διαχείρισης του eshop ή του template. Εάν δεν γνωρίζετε τη γλώσσα html τότε μπορείτε να ενημερωθείτε μέσα από μαθήματα html.

Σε ποιους απευθύνεται το σεμινάριο css

Ένα σεμινάριο css απευθύνεται σε όσους σκοπεύουν να μάθουν να φτιάχνουν ιστοσελίδες. Πρώτα από όλα απευθύνεται σε αρχάριους οι οποίοι θέλουν να μάθουν να φτιάχνουν απλά site. Αποτελεί απαραίτητο συμπλήρωμα στις βασικές γνώσεις html. Απευθύνεται όμως και σε όλους όσους χρησιμοποιούν το wordpress, το joomla, το drupal, το opencart καθώς και άλλα δημοφιλή Συστήματα Διαχείρισης Περιεχομένου (Content Management Systems). Το σεμινάριο css είναι εντελώς απαραίτητο σε γραφίστες οι οποίοι θέλουν να δημιουργήσουν τα δικά τους template για το διαδίκτυο. Όλα αυτά είναι το template που χρησιμοποιούνται στην κατασκευή ιστοσελίδων δημιουργούνται από γραφίστες. Η ενασχόληση με το διαδίκτυο για την κατασκευή γραφικών ή template αποτελεί μία πολύ καλή επαγγελματική διέξοδο για τους αποφοίτους γραφιστικών σχολών. Η σημαντικότερη γνώση για την κατασκευή τέτοιου είδους προϊόντων είναι το css. Εδώ κάποιοι θα πουν ότι η παραμετροποίηση των template γίνεται με το λογισμικό virtuemart. Όμως η γνώση του css είναι απαραίτητη για την σωστή αξιοποίηση του προγράμματος virtuemart. Μία άλλη κατηγορία ανθρώπων που χρειάζεται να εμβαθύνουν στο css είναι οι χρήστες του προγράμματος dreamweaver το οποίο χρησιμοποιείται και αυτό στα σεμινάρια κατασκευής ιστοσελίδων.

Css για την προώθηση ιστοσελίδων

Το css μας δίνει τη δυνατότητα να ικανοποιήσουμε κάποιες από τις απαιτήσεις της google οι οποίες είναι αναγκαίες ώστε η ιστοσελίδα μας να ανέβει στις πρώτες θέσεις των αποτελεσμάτων. για να φτιάξουμε ένα site το οποίο να ικανοποιεί όλες τις προϋποθέσεις προθέσεις ιστοσελίδας είναι απολύτως αναγκαία Η γνώση του css σε ικανοποιητικό επίπεδο. μία από τις ρυθμίσεις μπορώ να κάνω μέσα το css είναι να φροντίσουμε Ώστε οι εικόνες να κατεβαίνουν στο παρασκήνιο και να μην βαραίνουν το site. Με αυτό τον τρόπο μπορούμε να μειώσουμε αισθητά το χρόνο φόρτωσης της ιστοσελίδας. Σύμφωνα με τα λεγόμενα της google ο χρόνος φόρτωσης του ιστότοπου αποτελεί ένα από τα σημαντικότερα κριτήρια για την κατάταξη αυτού στις υψηλές θέσεις των αποτελεσμάτων. Μία άλλη δυνατότητα που μας δίνει το css είναι ότι έχουμε τη δυνατότητα να ρυθμίσουμε τον ιστότοπο ώστε να εμφανίζεται με διαφορετικό τρόπο σε κάθε συσκευή. αυτή είναι μία δεύτερη πολύ σημαντική προϋπόθεση για να ανέβει ψηλά στα αποτελέσματα της google ένας ιστότοπος. για την ακρίβεια αυτές οι δύο προϋποθέσεις είναι θα τον πείσω να πούμε το α και το ω για την προώθηση ιστοσελίδων. μέσω του css έχουμε τη δυνατότητα να φτιάξουμε έναν ιστότοπο ο οποίος να είναι γρήγορος και να λειτουργεί σωστά σε κάθε τύπο συσκευής. Έχοντας πετύχει αυτές τις δύο πολύ σημαντικές προϋποθέσεις έχουμε κάνει το σημαντικότερο βήμα για την προώθηση της ιστοσελίδας μας. Στη συνέχεια η διαδικασία βελτιστοποίησης του ιστότοπου είναι μία πολύ πιο απλή διαδικασία. Εάν θέλετε να μάθετε τον τρόπο με τον οποίο θα ανεβάσετε την ιστοσελίδα σας στις πρώτες θέσεις των αποτελεσμάτων της google τότε δεν έχετε παρά να παρακολουθήσετε ένα σεμινάριο προώθησης ιστοσελίδων.

Βελτιστοποίηση ιστοσελίδας

Εάν δοκιμάσετε να χρησιμοποιήσετε κάποιο online εργαλείο για να βελτιστοποιήσετε την ιστοσελίδα σας τότε θα δείτε ότι οι πιο πολλές απαιτήσεις σχετίζονται με το css. Ένα τέτοιο εργαλείο θα ήταν ο html validator. Μία από τις σημαντικότερες απαιτήσεις που βγάζει ο html validator είναι η αφαίρεση του in-line css από το κομμάτι του κώδικα html. όταν κάποιος γνωρίζει καλά τους κανόνες βελτιστοποίησης τότε από τα πρώτα βήματα της κατασκευής τους τα σελίδες αποφεύγει να μπερδέψει το css με το html. Φροντίζει ώστε όλο το κομμάτι του κώδικα css να πάει σε ξεχωριστό αρχείο. Ένα ακόμα εργαλείο τέτοιου τύπου είναι css validator. Εάν ανοίξετε το css validator για να εξετάσετε τον κώδικα που κρύβεται πίσω από τα template τότε θα δείτε ότι υπάρχουν πάρα πολλά λάθη. Κατά τη γνώμη μου αυτός ο έλεγχος αποτελεί και ένα κριτήριο ποιότητας των template. Και δεν αναφερόμαστε μόνο στα css και html template. με αυτό τον τρόπο μπορούμε να ελέγξουμε κατά πόσο ένα καλό ένα template για το wordpress, για το opencart και για το joomla. Καλό είναι όταν παραδίδουμε ένα site να φροντίζουμε ώστε να περνάει με 100% επιτυχία τόσο από τον html validator όσο και από το css validator. Εάν αυτό δεν επιτευχθεί κατά την εγκατάσταση του template τότε θα πρέπει να κάνουμε εμείς τη διόρθωση με το χέρι. Εδώ απαιτείται πάρα πολύ καλή γνώση του css.

Κατασκευή ιστοσελίδων με html με css

Όταν κάποιος ακούει για κατασκευή ιστοσελίδων μόνο με τη χρήση html και css τότε πιθανώς το νομίζει ότι γυρίζαμε το χρόνο 15 χρόνια πίσω. Η πληθώρα των content management systems που κυκλοφορεί στην αγορά οδηγεί τους κατασκευαστές ιστοσελίδων μακριά από την αποκλειστική χρήση html και css. Υπάρχουν όμως περιπτώσεις στις οποίες η καλύτερη επιλογή για την κατασκευή ιστοσελίδας είναι με τη χρήση html. Εάν για παράδειγμα έχουμε ένα απλό site λίγων δεκάδων σελίδων οι οποίες δεν τροποποιούνται με την πάροδο του χρόνου τότε η πρότασή μου είναι να κατασκευαστεί με html. Ο λόγος που το προτείνω αυτό είναι ότι κερδίζουμε τόσο στον τομέα της ασφάλειας όσο και στον τομέα της ταχύτητας. ο συνδυασμός αυτών των δύο αυτόματα μας δίνει ένα πλεονέκτημα για την προώθηση της σελίδας και την άνοδο αυτής σε υψηλές θέσεις των αποτελεσμάτων της google. Εδώ παρουσιάζουμε αναλυτικά τα βήματα για την προώθηση ιστοσελίδων από την αρχή μέχρι το τέλος.

Ασκήσεις κατασκευής ιστοσελίδων

Μπορείτε να δοκιμάσετε να τις γνωσεις σας στο css μέσω των ασκήσεων html. Έχουμε δημιουργήσει ένα σύνολο ασκήσεων κατασκευής ιστοσελίδων στις οποίες εφαρμόζετε όσα μάθατε στα μαθήματα html, css και JavaScript.

Η γλώσσα css χρησιμοποιείται τόσο για δυναμικές ιστοσελίδες όσο και για στατικές ιστοσελίδες. Καλό είναι να γνωρίζετε περισσότερα για τις βάσεις δεδομένων ώστε να έχετε καλύτερη εποπτεία. Στον ακόλουθο σύνδεσμο προσθέσαμε ασκήσεις sql τις οποίες χρησιμοποιούμε στα σεμινάρια SQL. Είναι πολύ σημαντικό να μπορεί ο εκπαιδευόμενος να εξασκηθεί χρησιμοποιώντας τις κατάλληλες ασκήσεις sql. Εάν θέλετε να εμβαθύνετε στις βάσεις δεδομένων τότε μπορείτε να παρακολουθήσετε μαθήματα sql.