2η Ασκηση CSS

Επιμέλεια άσκησης Δημήτρης Μπακαλάκος

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

  1. Αποθηκεύστε το αρχείο ex3c στην επιφάνεια εργασίας του σταθμού εργασίας σας.
  2. Αποσυμπιέστε το αρχείο.
  3. Στο εσωτερικό του φακέλου υπάρχουν τα αρχεία html index.txt και Dostoevsky_1872.jpg τα οποία αποτελούν τα βασικά αρχεία του website σας.
  4. Πρέπει να δημιουργήσετε ένα αρχείο με όνομα style.css το οποίο να καθορίζει το στυλ των στοιχείων από τα οποία αποτελείται η ιστοσελίδα σας.
  5. Συγκεκριμένα:
    • Θα δώσετε ένα χρώμα φόντου στην ιστοσελίδα (background-color)
    • Για την επικεφαλίδα h1, να ρυθμίζονται οι ιδιότητες: text-align, color, background-color, font-size και font-family
    • Για την επικεφαλίδα h3, να ρυθμίζονται οι ιδιότητες: color, font-size και font-family
    • Για τις παραγράφους, να ρυθμίζονται οι ιδιότητες: color, font-size και font-family
    • Φτιάξτε ένα id για παραγράφους με όνομα greenpars, το οποίο να τροποποιεί την παράγραφο ως προς τις ιδιότητες: border, color και παράδειγμα:

#greenpars {

Border:1px;

}

  • Για τις κουκίδες στην ετικέτα <ul> να ρυθμίζονται οι ιδιότητες: list-style-type και list-style position.
  • Για τις κουκίδες στην ετικέτα <li> να ρυθμίζονται οι ιδιότητες: margin-bottom
  • Φτιάξτε μία κλάση με όνομα floatright μέσω της οποίας να ρυθμίζονται οι ιδιότητες: float, margin, border, padding (θα χρησιμοποιηθεί για την εικόνα της ιστοσελίδας
  • παράδειγμα:

.floatright {

Border:1px solid;

}

  1. Γενικά θα χρειαστούν οι ιστοσελίδες:
  2. Η επεξεργασία των αρχείων να γίνει στο notepad++  ή στο Sublime. Μην ξεχνάτε στο αρχείο txt να ρυθμίσετε κωδικοποίηση utf-8 για τους ελληνικούς χαρακτήρες (μενού  κωδικοποίηση)
  3. Μην ξεχάσετε να κάνετε την σύνδεση του html με το css αρχείο που πρόκειται να δημιουργήσετε (όνομα αρχείου: styles.css). Η ετικέτα που χρησιμοποιείται για αυτό το σκοπό είναι η <link rel=”stylesheet” href=”styles.css/> η οποία τοποθετείται μέσα στην head του html αρχείου.