Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ Τμ. ΔΕ- Χειμ. 2014-15
Έμφαση 2 <em>: Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) <strong>: Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis) Συνηθίζεται το <em> να μορφοποιείται με πλάγια και το <strong> με έντονα γράμματα. Δεν χρησιμοποιούμε <strong> και <em> για μορφοποίηση! Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές <strong> και <em> καθορίζουν μόνο την έμφαση στο περιεχόμενο.
Εργασία 1 3 Δώστε έμφαση στις λέξεις web page Ετικέτα <em> Δώστε ιδιαίτερη έμφαση στη λέξη excited Ετικέτα <strong> My Web Page This is my first web page I am excited!!!
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 <h1> : Επικεφαλίδα 1ου επιπέδου (μνημονικό: headline) <h2> : Επικεφαλίδα 2ου επιπέδου <h6> : Επικεφαλίδα 6ου επιπέδου Η <h1> χρησιμοποιείται 1 φορά. Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη. Δεν υπάρχει h7
Επικεφαλίδες 6 <h1> <h2> <h2>
Εργασία 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 <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 Αριθμημένες: Σειρά έχει σημασία, χρήση <ol> Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση <ul> (μνημονικά: ordered list, unordered list) <li>: Ένα στοιχείο μίας λίστας (μνημονικό: list item) Πανομοιότυπος HTML κώδικας για την περιγραφή τους. <ol> <li>πρώτο στοιχείο</li> <li>δεύτερο στοιχείο</li> <li>τρίτο στοιχείο</li> </ol>
Λίστες 10 Το <li> μπορεί να περιέχεται μόνο σε <ol> ή <ul> Τα <ol> και <ul> μπορούν να περιέχουν μόνο <li>
Λίστες 11 Αριθμημένες 1. Mέρες της εβδομάδας 2. Ρούχα που θα φορέσω 3. Νικητές της Formula 1 4. Εκδόσεις του Photoshop Μη αριθμημένες Λίστα για τα ψώνια Μαθητές στο αμφιθέατρο Οι e-mail διευθύνσεις μου Αυτή η λίστα
Μη αριθμημένη λίστα: Ψώνια 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
Εργασία 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 <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 <ol> <li>δευτέρα</li> <li>τρίτη</li> <li>τετάρτη</li> <li>πέμπτη</li> <li>παρασκευή</li> <li>σάββατο</li> <li>κυριακή</li> </ol> 1. Δευτέρα 2. Τρίτη 3. Τετάρτη 4. Πέμπτη 5. Παρασκευή 6. Σάββατο 7. Κυριακή
Εργασία 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 <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 Λόγοι που έρχομαι στο μάθημα 1. Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου 2. Για να μάθω 3. Για να γίνω διάσημος <h1>λόγοι που έρχομαι στο μάθημα</h1> <ol> <li>για να εντυπωσιάσω: <ul> <li>τη γάτα μου</li> <li>το σκύλο μου</li> </ul> </li> <li> Για να μάθω</li> <li> Για να γίνω διάσημος</li> </ol>
Εργασία 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 <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 Απόλυτες: Ξεκινούν με το πρωτόκολλο http://www.google.com/ http://www.htmldog.com/guides/htmlbeginner/links/ Σχετικές: Παράγονται με βάση την παρούσα σελίδα foo στο http://mysite.gr/bar http://mysite.gr/bar/foo /foo στο http://mysite.gr/bar http://mysite.gr/foo #foo στο http://mysite.gr/bar http://mysite.gr/bar#foo
Ιδιότητες ετικετών 22 Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα Κάθε ιδιότητα έχει όνομα και τιμή Όνομα από τιμή χωρίζονται με = Τιμή περιλαμβάνεται σε εισαγωγικά Μονά ή διπλά ό,τι προτιμάτε Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες.
Ιδιότητες ετικετών 23
Ιδιότητες ετικετών 24
Σύνδεσμοι 25 <a>: Ορίζει ένα σύνδεσμο href: Ορίζει τον προορισμό ενός συνδέσμου
Σύνδεσμοι 26 <a href= http://www.bpis.teicrete.gr >BPIS</a> BPIS
Εργασία 2 27 Χρησιμοποιήστε την ετικέτα διεύθυνσης (<a>) φτιάξτε την παρακάτω ιστοσελίδα με ένα σύνδεσμο στην ιστοσελίδα του τμήματος www.bpis.teicrete.gr My Web Page BPIS webpage Γράψτε τον κώδικα σας στο αρχείο με όνομα 2.htm
28 <head> <title>my Web Page</title> </head> <body> <a href="http://www.bpis.teicrete.gr">bpis webpage</a> </body> </html>
Εργασία 2 29 Χρησιμοποιήστε την ετικέτα διεύθυνσης (<a>) προσθέστε ένα σύνδεσμο στην ιστοσελίδα 1.htm όπως φαίνεται παρακάτω My Web Page BPIS webpage My first webpage
30 <body> <a href="http://www.bpis.teicrete.gr">bpis webpage</a> <br> <a href="1.htm">my first webpage</a> </body>
Περιοχές εγγράφου 31 id: Ονομάζει μία ετικέτα. Μπορεί να περιέχεται σε οποιαδήποτε ετικέτα. <a href= #names > Μετάβαση στα ονόματα </a> <h2 id= names > Ονόματα συμμετεχόντων </h2>
Εργασία 2 32 32 30 γραμμές (<br>) κάτω από του συνδέσμους ορίστε μία ετικέτα με όνομα end (id) και κείμενο End of page και γράψτε ένα σύνδεσμο προς την ετικέτα My Web Page BPIS webpage My first webpage Go to End End of page
33 33 <a href="http://www.bpis.teicrete.gr">bpis 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>