Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ. Τμ. ΔΕ- Χειμ

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ. Τμ. ΔΕ- Χειμ"

Ευρυδίκη Λαιμός
6 χρόνια πριν
Προβολές:

1 Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ Τμ. ΔΕ- Χειμ

2 Έμφαση 2 <em>: Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) <strong>: Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis) Συνηθίζεται το <em> να μορφοποιείται με πλάγια και το <strong> με έντονα γράμματα. Δεν χρησιμοποιούμε <strong> και <em> για μορφοποίηση! Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές <strong> και <em> καθορίζουν μόνο την έμφαση στο περιεχόμενο.

3 Εργασία 1 3 Δώστε έμφαση στις λέξεις web page Ετικέτα <em> Δώστε ιδιαίτερη έμφαση στη λέξη excited Ετικέτα <strong> My Web Page This is my first web page I am excited!!!

4 4 <html> <head> <title>my Web Page</title> </head> <body> <p>this is my first <br /> <em>web page</em></p> <p>i am <strong>excited</strong>!!!</p> </body> </html>

5 Επικεφαλίδες 5 <h1> : Επικεφαλίδα 1ου επιπέδου (μνημονικό: headline) <h2> : Επικεφαλίδα 2ου επιπέδου <h6> : Επικεφαλίδα 6ου επιπέδου Η <h1> χρησιμοποιείται 1 φορά. Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη. Δεν υπάρχει h7

6 Επικεφαλίδες 6 <h1> <h2> <h2>

7 Εργασία 1 7 Χρησιμοποιήστε κατάλληλα τις ετικέτες επικεφαλίδας (<h1>, <h2>, ) ώστε να εμφανιστεί το παρακάτω κείμενο My Web Page My first web page What this is A simple page put together using HTML Why this is To learn HTML

8 8 <body> <h1> My first web page</h1> <h2>what this is</h2> <p>a simple page put together using HTML</p> <h2>why this is</h2> <p>to learn HTML</p> </body>

9 Λίστες 9 Αριθμημένες: Σειρά έχει σημασία, χρήση <ol> Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση <ul> (μνημονικά: ordered list, unordered list) <li>: Ένα στοιχείο μίας λίστας (μνημονικό: list item) Πανομοιότυπος HTML κώδικας για την περιγραφή τους. <ol> <li>πρώτο στοιχείο</li> <li>δεύτερο στοιχείο</li> <li>τρίτο στοιχείο</li> </ol>

10 Λίστες 10 Το <li> μπορεί να περιέχεται μόνο σε <ol> ή <ul> Τα <ol> και <ul> μπορούν να περιέχουν μόνο <li>

11 Λίστες 11 Αριθμημένες 1. Mέρες της εβδομάδας 2. Ρούχα που θα φορέσω 3. Νικητές της Formula 1 4. Εκδόσεις του Photoshop Μη αριθμημένες Λίστα για τα ψώνια Μαθητές στο αμφιθέατρο Οι διευθύνσεις μου Αυτή η λίστα

12 Μη αριθμημένη λίστα: Ψώνια 12 <ul> <li>kinder Γαλακτοφέτες</li> <li>kinder Bueno</li> <li>happy Hippo</li> <li>αυγά Kinder</li> <li>kinder Delice</li> <li>kinder Duplo</li> <li>kinder Maxi</li> </ul> Kinder Γαλακτοφέτες Kinder Bueno Happy Hippo Αυγά Kinder Kinder Delice Kinder Duplo Kinder Maxi

13 Εργασία 1 13 Χρησιμοποιήστε κατάλληλα τις ετικέτες μη αριθμημένης λίστας (<ul>, <li>, ) ώστε να εμφανιστεί το παρακάτω κείμενο My Web Page My first web page What this is A simple page put together using HTML Why this is To learn HTML for fun

14 14 <body> <h1> My first web page</h1> <h2>what this is</h2> <p>a simple page put together using HTML</p> <h2>why this is</h2> <ul> <li>to learn HTML</li> <li>for fun</li> </ul> </body>

15 Αριθμημένη λίστα: Μέρες 15 <ol> <li>δευτέρα</li> <li>τρίτη</li> <li>τετάρτη</li> <li>πέμπτη</li> <li>παρασκευή</li> <li>σάββατο</li> <li>κυριακή</li> </ol> 1. Δευτέρα 2. Τρίτη 3. Τετάρτη 4. Πέμπτη 5. Παρασκευή 6. Σάββατο 7. Κυριακή

16 Εργασία 1 16 Χρησιμοποιήστε κατάλληλα τις ετικέτες αριθμημένης λίστας (<ul>, <li>, ) ώστε να εμφανιστεί το παρακάτω κείμενο My Web Page My first web page What this is A simple page put together using HTML Why this is 1. To learn HTML 2. for fun

17 17 <body> <h1> My first web page</h1> <h2>what this is</h2> <p>a simple page put together using HTML</p> <h2>why this is</h2> <ol> <li>to learn HTML</li> <li>for fun</li> </ol> </body>

18 Εμφώλευση 18 Λόγοι που έρχομαι στο μάθημα 1. Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου 2. Για να μάθω 3. Για να γίνω διάσημος <h1>λόγοι που έρχομαι στο μάθημα</h1> <ol> <li>για να εντυπωσιάσω: <ul> <li>τη γάτα μου</li> <li>το σκύλο μου</li> </ul> </li> <li> Για να μάθω</li> <li> Για να γίνω διάσημος</li> </ol>

19 Εργασία 1 19 Χρησιμοποιήστε κατάλληλα τις ετικέτες μη αριθμημένης και αριθμημένης λίστας (<ul>, <ol> <li>, ) ώστε να εμφανιστεί το παρακάτω κείμενο My Web Page My first web page What this is A simple page put together using HTML Why this is To learn HTML for fun 1. for passing this course 2. for impressing my friends 3. for developing my webpage

20 20 <h2>why this is</h2> <ul> <li>to learn HTML <ol> <li>for passing this course</li> <li>for impressing my friends</li> <li>for developing my webpage</li> </ol> </li> <li>for fun</li> </ul>

21 Διευθύνσεις 21 Απόλυτες: Ξεκινούν με το πρωτόκολλο Σχετικές: Παράγονται με βάση την παρούσα σελίδα foo στο /foo στο #foo στο

22 Ιδιότητες ετικετών 22 Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα Κάθε ιδιότητα έχει όνομα και τιμή Όνομα από τιμή χωρίζονται με = Τιμή περιλαμβάνεται σε εισαγωγικά Μονά ή διπλά ό,τι προτιμάτε Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες.

23 Ιδιότητες ετικετών 23

24 Ιδιότητες ετικετών 24

25 Σύνδεσμοι 25 <a>: Ορίζει ένα σύνδεσμο href: Ορίζει τον προορισμό ενός συνδέσμου

26 Σύνδεσμοι 26 <a href= >BPIS</a> BPIS

27 Εργασία 2 27 Χρησιμοποιήστε την ετικέτα διεύθυνσης (<a>) φτιάξτε την παρακάτω ιστοσελίδα με ένα σύνδεσμο στην ιστοσελίδα του τμήματος My Web Page BPIS webpage Γράψτε τον κώδικα σας στο αρχείο με όνομα 2.htm

28 28 <head> <title>my Web Page</title> </head> <body> <a href=" webpage</a> </body> </html>

29 Εργασία 2 29 Χρησιμοποιήστε την ετικέτα διεύθυνσης (<a>) προσθέστε ένα σύνδεσμο στην ιστοσελίδα 1.htm όπως φαίνεται παρακάτω My Web Page BPIS webpage My first webpage

30 30 <body> <a href=" webpage</a> <br> <a href="1.htm">my first webpage</a> </body>

31 Περιοχές εγγράφου 31 id: Ονομάζει μία ετικέτα. Μπορεί να περιέχεται σε οποιαδήποτε ετικέτα. <a href= #names > Μετάβαση στα ονόματα </a> <h2 id= names > Ονόματα συμμετεχόντων </h2>

32 Εργασία γραμμές (<br>) κάτω από του συνδέσμους ορίστε μία ετικέτα με όνομα end (id) και κείμενο End of page και γράψτε ένα σύνδεσμο προς την ετικέτα My Web Page BPIS webpage My first webpage Go to End End of page

33 33 33 <a href=" webpage</a> <br> <a href="1.htm">my first webpage</a> <br> <a href="#end">go to End</a> <br/> <br/> <p id="end">end of page</a>

Σχετικά έγγραφα

HTML 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

HTML 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών HTML 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης