kef4 parousiash
DESCRIPTION
Παρουσίαση της γλώσσας HTML για το μάθημα:"Προγραμματιστικά Εργαλεία Για Το Διαδίκτυο"TRANSCRIPT
Κεφάλαιο 4:Hypertext Markup Language(HTML)
Προγραμματιστικά Εργαλεία Για το Διαδίκτυο
Στυλόπουλος Ελευθέριος,2012
Τι είναι η HTML;
Ένας τρόπος να πεις στο σελιδομετρητή πώς να αναπαραστήσει μία σελίδα... ● Οι εντολές της HTML είναι μία σειρά από tags(ετικέτες)● Τι είναι τα tags;
Ετικέτες της μορφής < > που περικυκλώνουν εντολέςόπως:<b> ή <i>
● Τα περισότερα tags χρησιμοποιούνται ανά ζεύγηόπως:<b>κείμενο</b> ή <i>κείμενο</i>
● Το πρώτο tag ενεργοποιεί μία ενέργεια που θέλουμε να συμβεί και το δεύτερο την απενεργοποιεί.
Παραδείγματα tags:
● <b>Καλημέρα</b>Διατάζει τον σελιδομετρητή να εμφανίσει τη λέξη "Καλημέρα" με έντονη γραφή (bold)
● <i>Καλημέρα</i>Διατάζει τον σελιδομετρητή να εμφανίσει τη λέξη "Καλημέρα" με πλάγια γραφή (italic)
Η δομή ενός αρχείου html:
<html> <head><title>Τίτλος Σελίδας</title></head> <body></body> </html>
Η δομή ενός αρχείου html:
<html> <head><title>Τίτλος Σελίδας</title></head> <body></body> </html>
Ανοίγει και κλείνει όλα τα html αρχεία.
Η δομή ενός αρχείου html:
<html> <head><title>Τίτλος Σελίδας</title></head> <body></body> </html>
Ανοίγει και κλείνει όλα τα html αρχεία.
Ανοίγει και κλείνει την "κεφαλή" ενός html αρχείου.
Η δομή ενός αρχείου html:
<html> <head><title>Τίτλος Σελίδας</title></head> <body></body> </html>
Ανοίγει και κλείνει όλα τα html αρχεία.
Ανοίγει και κλείνει την "κεφαλή" ενός html αρχείου.
Περιέχει τον τίτλο της σελίδας ( αυτός εμφανίζεται στον πάνω μέρος του σελιδομετρητή όταν πλοηγούμαστε)
Η δομή ενός αρχείου html:
<html> <head><title>Τίτλος Σελίδας</title></head> <body></body> </html>
Ανοίγει και κλείνει όλα τα html αρχεία.
Ανοίγει και κλείνει την "κεφαλή" ενός html αρχείου.
Περιέχει τον τίτλο της σελίδας ( αυτός εμφανίζεται στον πάνω μέρος του σελιδομετρητή όταν πλοηγούμαστε)
Περιέχει το κυρίως μέρος της ιστοσελίδας (σώμα). Αυτό μπορεί να περιέχει κείμενο ,εικόνες βίντεο κλπ...
Ένα παράδειγμα HTML:
<html> <head><title>This is my first complete web page!</title><head> <body><h1>Hello World</h1><p>This is a really simple web page</p></body> </html>
Δοκιμάστε το !
Διάφορες μορφοποιήσεις κειμένου:
● <b>...</b> έντονη γραφή● <i>...</i> πλάγια γραφή● <u>...</u> υπογράμμιση● Ορισμός μεγέθους επικεφαλίδων
<h1> κείμενο </h1> πολύ μεγάλο μέγεθος<h2> κείμενο </h2> μεγάλο μέγεθος…<h6> κείμενο </h6> μικρό μέγεθος
● <h1 align=Χ> κείμενο </h1>,όπου x center ή left ή right
● <blink> … </blink> το κείμενο αναβοσβήνει
Αλλαγή γραμμής-παραγράφου / οριζόντια γραμμή:
● <br> αλλαγή γραμμής● <p> αλλαγή παραγράφου● <hr> εισαγωγή οριζόντιας γραμμής
Διάφορες μορφοποιήσεις:
● Ορισμός του χρώματος του φόντου και του κειμένου της σελίδας<body bgcolour=red text=whitelink=lime vlink=yellow alink=black>
● Ορισμός γραμματοσειρών<font face="Times New Roman">...</font><font colour=x>...</font>
Παράδειγμα μορφοποίησης:
Παράδειγμα μορφοποίησης:
Παράδειγμα μορφοποίησης:
Παράδειγμα μορφοποίησης:<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body><br>αυτό το κείμενο είναι <b>έντονο</b><br>αυτό το κείμενο είναι <u>υπογραμμισμένο</u><br>αυτό το κείμενο είναι <i>πλάγιο</i><br>αυτό το κείμενο είναι <small>μικρό</small><br>αυτό το κείμενο είναι <big>μεγάλο</big><br>αυτό το κείμενο είναι <sub>δείκτης</sub><br>αυτό το κείμενο είναι <sup>εκθέτης</sup><br>αυτό το κείμενο είναι <strike>διακριτό</strike><br>αυτό το κείμενο είναι <tt>γραφομηχανής</tt><br>αυτό το κείμενο είναι <b><i>έντονο πλάγιο</b></i><br>αυτό το κείμενο είναι <u><b>έντονο και υπογραμμισμένο</b></u></body></html>
Δοκιμάστε το!
Εικόνες
● Εισαγωγή εικόνας<img src="όνομα ή/και path αρχείου">
● Εισαγωγή εικόνας και καθορισμός μεγέθους<img src="image2.gif" height=38 width=75 >
● Εισαγωγή μιας εικόνας σαν φόντο της σελίδας<body background="όνομα αρχείου">...</body>
Δοκιμάστε το!
Σύνδεσμοι● Σύνδεσμος από μια σελίδα σε μια άλλη κάπου στο Internet
<a href="http://www.google.com"> To Google </A> είναι το πιο δημοφιλές εργαλείο αναζήτησης.
● Πως κάνουμε μια εικόνα σύνδεσμο<a href="http://www.ballroomdancers.com">img src=dancers.gif"></a>
● Σύνδεσμος από μια σελίδα σε μια άλλη που βρίσκεται στον ίδιο φάκελο (directory)Κάντε κλικ <a href="mypage2.htm"> εδώ </a> για να πάτε στην άλλη σελίδα.
● Σύνδεσμος από μια σελίδα σε μια άλλη που βρίσκεται σε υποφάκελο (subdirectory)<a href="/υποφάκελος/mypage2.htm">υπογραμμισμένο κείμενο</a>
Δοκιμάστε το!
Σύνδεσμοι
● Σύνδεσμοι από μια σελίδα σε μια άλλη που βρίσκεται σε ανώτερο φάκελο (directory)<a href="../mypage2.htm">υπογραμμισμένο κείμενο</a>
● Παραπομπές από ένα σημείο μιας σελίδας σε ένα άλλοΜέσα στο κείμενο της σελίδας δίνουμε στο κείμενο «Η σχέση Internet και Επιχειρήσεων» το όνομα XXX με την εξής εντολής<a name="ΧΧΧ"> Η σχέση Internet και Επιχειρήσεων</a>Η παραπομπή γίνεται με την εξής εντολή:<a href="#ΧΧΧ">το κείμενο της παραπομπής</a>
● Παραπομπή (σύνδεσμος) για την αποστολή email (mailto: URL)<a href="mailto:[email protected]">Γράψτε μας</a>
Δοκιμάστε το!
Λίστες
Λίστες χωρίς αρίθμηση: <ul>
<li> Άρης<li> ΠΑΟΚ<li> Ηρακλής
</ul>Δοκιμάστε το!
Λίστες με αρίθμηση: <ol>
<li> Άρης<li> ΠΑΟΚ<li> Ηρακλής
</li>
Δοκιμάστε το!
Παράδειγμα Λίστας:
Πίνακες
● Ο πίνακας ορίζεται με τη χρήση της ετικέτας:<table>...<table>, μέσα στην οποία ορίζονται πρώτα οιγραμμές με την ετικέτα: <tr>...</tr> και μέσα σε αυτήτοποθετείται η ετικέτα στήλης: <td>...</td> ή <th>...</th>.
● H ετικέτα <th> χρησιμοποιείται όταν θέλουμε τα δεδομένα να είναι γραμμένα έντονα.
● Συνήθως μέσα στην ετικέτα <TR> δεν τοποθετούνταιπαράμετροι.
Δοκιμάστε το!
Πλαίσια
● Μια σημαντική δυνατότητα που μας δίνει ηHTML, είναι να χωρίσουμε την οθόνη τουφυλλομετρητή σε δύο ή περισσότεραπαράθυρα στα οποία παρουσιάζονταιδιαφορετικές ιστοσελίδες.● Ο διαχωρισμός της οθόνης του φυλλομετρητήσε παράθυρα γίνεται με την ετικέτα<frameset>...</frameset>.● Όταν χρησιμοποιείται αυτή η ετικέτα σε μίασελίδα δεν μπορεί να χρησιμοποιηθείταυτόχρονα και η ετικέτα <body>.
Πλαίσια
● O διαχωρισμός της οθόνης με τη χρήση τηςετικέτας <frameset> μπορεί να γίνει είτε σεγραμμές, είτε σε στήλες.● Αν θέλουμε η οθόνη να διαχωριστεί και σεγραμμές και σε στήλες, τότε θα πρέπει ναχρησιμοποιήσουμε εμφωλευμένες ετικέτες<frameset> μέσα στην αρχική ετικέτα<frameset> ... </frameset>. Δοκιμάστε το!