Εβδομάδα 1: HTML

Τι είναι μια ιστοσελίδα;

Μια ιστοσελίδα είναι ένα σύνολο εγγράφων HTML που εμφανίζονται μέσω ενός προγράμματος περιήγησης (browser) όπως το Google Chrome, το Firefox ή το Edge. Οι ιστοσελίδες φιλοξενούνται σε διακομιστές (servers) και είναι προσβάσιμες μέσω των διευθύνσεων URL (Uniform Resource Locator).

Ρόλος της HTML και της CSS

• HTML (HyperText Markup Language): Η γλώσσα που χρησιμοποιείται για τη δομή και το περιεχόμενο μιας ιστοσελίδας.
• CSS (Cascading Style Sheets): Η γλώσσα που χρησιμοποιείται για τη μορφοποίηση και την εμφάνιση μιας ιστοσελίδας.

Δομή ενός αρχείου HTML

Κάθε αρχείο HTML ακολουθεί μια συγκεκριμένη δομή. Παρακάτω παρουσιάζεται το βασικό πρότυπο (boilerplate) ενός αρχείου HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Τίτλος της Σελίδας</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Καλώς ήρθατε</h1>
    <p>Αυτή είναι μια παράγραφος.</p>
</body>
</html>

1. Μορφοποίηση Κειμένου στην HTML

Η HTML παρέχει διάφορες ετικέτες για τη μορφοποίηση κειμένου. Μερικές βασικές ετικέτες είναι:

• Έντονο κείμενο: <b>Αυτό είναι έντονο</b> → Αυτό είναι έντονο
• Πλάγιο κείμενο: <i>Αυτό είναι πλάγιο</i> → Αυτό είναι πλάγιο
• Υπογραμμισμένο κείμενο: <u>Αυτό είναι υπογραμμισμένο</u> → Αυτό είναι υπογραμμισμένο
• Διαγραμμένο κείμενο: <s>Αυτό είναι διαγραμμένο</s> → Αυτό είναι διαγραμμένο

2. Παράγραφοι και Επικεφαλίδες

Οι παράγραφοι δηλώνονται με την ετικέτα <p>:

<p>Αυτή είναι μια παράγραφος.</p>

Υπάρχουν 6 επίπεδα επικεφαλίδων στην HTML, από το <h1> (μεγαλύτερη) έως το <h6> (μικρότερη):

<h1>Αυτή είναι μια επικεφαλίδα H1</h1>
<h2>Αυτή είναι μια επικεφαλίδα H2</h2>
<h3>Αυτή είναι μια επικεφαλίδα H3</h3>
<h4>Αυτή είναι μια επικεφαλίδα H4</h4>
<h5>Αυτή είναι μια επικεφαλίδα H5</h5>
<h6>Αυτή είναι μια επικεφαλίδα H6</h6>

Το style Attribute και Inline CSS

Το style attribute επιτρέπει την εφαρμογή CSS απευθείας σε ένα HTML στοιχείο.

Αλλαγή χρώματος κειμένου

<p style="color: red;">
    Αυτό το κείμενο είναι κόκκινο.
</p>

Αλλαγή μεγέθους γραμματοσειράς

<p style="font-size: 20px;">
    Αυτό το κείμενο έχει μέγεθος 20px.
</p>

Ευθυγράμμιση κειμένου

<p style="text-align: center;">
    Αυτό το κείμενο είναι κεντραρισμένο.
</p>

Συνδυασμός πολλών ιδιοτήτων

<p style="color: blue;
            font-size: 18px;
            text-align: right;">
    Αυτό το κείμενο είναι μπλε,
    18px και ευθυγραμμισμένο δεξιά.
</p>

Week 1 - Assignment

Παρακάτω θα βρείτε ασκήσεις πάνω σε όλα όσα είδαμε κατά την πρώτη εβδομάδα του μαθήματος. Οι ασκήσεις αυτές θα σας βοηθήσουν να εξασκηθείτε στις βασικές έννοιες της HTML και CSS, ώστε να αποκτήσετε μια καλύτερη κατανόηση της δημιουργίας και διαμόρφωσης ιστοσελίδων.