Εργαστήριο  2 : Κατανόηση & χρήση βασικών HTML σημάνσεων

Άσκηση 1 (χρήση βασικών σημάνσεων μορφοποίησης κειμένου)

Δημιουργήστε ένα ή περισσότερα HTML αρχεία και κάντε χρήση απλών σημάνσεων μορφοποίησης. Δημιουργήστε τα HTML αρχεία με όποιο τρόπο επιθυμείτε (π.χ. ένα απλό TEXT editor όπως το notepad ή ένα πιο σύνθετο όπως το Visual Studio Code) και αποθηκεύστε τα στον δίσκο του μηχανήματος ή "ανεβάστε τα" (κάντε ftp) στον web server.

Ανεβάστε τα αρχεία στον web server users.iee.ihu.gr ακολουθώντας τις οδηγίες του προηγούμενου εργαστηρίου.

Μέσω ενός web browser (π.χ. Internet explorer) δείτε το(α) αρχείο(α) που μόλις "ανεβάσατε" στο web server.

Μελετήστε τη χρήση των βασικών σημάνσεων μορφοποίησης.

<b>Εντονο κείμενο (Bold)</b>

<i>Πλάγιο κείμενο (Italic text)</i>.

<u>Υπογραμμισμένο κείμενο (underlined text)</u>.

<strike>Διακριτή γραφή(strikethrough text)</strike>.

<kbd>Σταθερό πλάτους (fixed-width text)</kbd>.

_{Κείμενο δείκτης (subscripted text)}.

^{Κείμενο εκθέτης (superscripted text)}.

Άσκηση 2 (μορφοποίηση με χρήση της σήμανσης font)

Δημιουργήστε και άλλες απλές HTML σελίδες και μορφοποιήστε το κείμενο τους με τη χρήση της σήμανσης font.

<font color="red">Καθορισμός χρώματος</font>

<font size="3">Καθορισμός μεγέθους</font>

<font face="Arial">Γραμματοσειρά</font>

<font size="6" color="blue" face="Arial">Πολλές παράμετροι ταυτόχρονα</font>

Μελετήστε και άλλες ιδιότητες (attributes) της σήμανσης FONT.

Σχετική βοήθεια: https://www.w3schools.com/tags/tag_font.asp

Άσκηση 3 (μορφοποίηση με την χρήση της ιδιότητας style)

Κάντε την ίδια μορφοποίηση κειμένου με την Άσκηση 2 με την χρήση της ιδιότητας style. Ποιον από τους δύο τρόπους θεωρείτε καλύτερο;

Σχετική βοήθεια: http://www.w3schools.com/html/html_css.asp (inline styles)

Άσκηση 4 (μορφοποίηση κειμένου συνέχεια)

Δημιουργήστε μία HTML σελίδα και μορφοποιήστε έναν κείμενο τίτλου με τη χρήση των σημάνσεων κεφαλίδων <h1>, <h2>, <h3>... <h6>

Μετά ορίστε μια παράγραφο με την σήμανση <p> (ορισμός παραγράφου).

Επίσης χρησιμοποιήστε τις σημάνσεις <br> (αλλαγή γραμμής) και <hr> (αλλαγή θεματικής ενότητας/οριζόντια γραμμή).

Μελετήστε τις ιδιότητες των σημάνσεων αυτών.

Σχετική βοήθεια: http://www.w3schools.com/html/html_headings.asp και http://www.w3schools.com/html/html_paragraphs.asp

Άσκηση 5 (μορφοποίηση κειμένου με λίστες)

Δημιουργήστε HTML αρχείο και χρησιμοποιήστε τις σήμανσεις (tags) <ul>, <ol> και <li> για να μορφοποιήσετε το κείμενο με λίστες.

Παράδειγμα:

<ol start="1"> 

    <li>το πρώτο στοιχείο στον κατάλογο-1. </li>

    <li>το δεύτερο στοιχείο στον κατάλογο-1.

        <ol>

            <li>πρώτο στοιχείο στον υποκατάλογο-2.</li>

            <li>δεύτερο στοιχείο στον υποκατάλογο-2. </li>

        </ol>

        </li>

    <li>το τρίτο στοιχείο στον κατάλογο-1. </li>

</ol>

ΝΕΟ!

Χρησιμοποιήστε την ιδιότητα style σε διάφορα σημεία του κώδικα για να πετύχετε διαφόρων ειδών μορφοποιήσεις, πχ:

• • Τα στοιχεία πρώτου επιπέδου της λίστας να είναι συγκεκριμένου χρώματος, μεγέθους, γραμματοσειράς, στοιχισμένα στο κέντρο, με κεφαλαία γράμματα οπωσδήποτε, διάστοιχο 1.5 κοκ

  • Τα στοιχεία δευτέρου επιπέδου να είναι άλλου χρώματος, στοιχισμένα αριστερά, με μικρά γράμματα, με συγκεκριμένο font κοκ

  • Όλη η λίστα να είναι να εμφανίζεται μέσα σε ένα box (πλαίσιο) και να υπάρχει padding 20 pixel και border 3pixel κόκκινο. 

Σχετική βοήθεια: http://www.w3schools.com/html/html_lists.asp

Άσκηση 6 (Πίνακες)

Χρησιμοποιώντας τις βασικές σημάνσεις πινάκων <table>, <tr>, <td> δημιουργήστε ένα πίνακα όπως τον παρακάτω

Bοήθεια:

https://www.w3schools.com/html/html_tables.asp

https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics