Kef4 parousiash

Κεφάλαιο 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>

<head>
κλείνει την <title>Τίτλος Σελίδας</title>
"κεφαλή"
ενός html
</head>
αρχείου.

<body>
</body>

</html>

τα html
αρχεία. <html> Περιέχει τον τίτλο της σελίδας
( αυτός εμφανίζεται στον
πάνω μέρος του
<head> σελιδομετρητή όταν
κλείνει την <title>Τίτλος Σελίδας</title> πλοηγούμαστε)
"κεφαλή"
ενός html
</head>
αρχείου.

<body>
</body>

</html>

τα html
αρχεία. <html> Περιέχει τον τίτλο της σελίδας
( αυτός εμφανίζεται στον
πάνω μέρος του
<head> σελιδομετρητή όταν
κλείνει την <title>Τίτλος Σελίδας</title> πλοηγούμαστε)
"κεφαλή"
ενός html
</head>
αρχείου.

<body>
Περιέχει το </body>
κυρίως μέρος της
ιστοσελίδας
(σώμα). Αυτό
μπορεί να
περιέχει κείμενο , </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=white
link=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:gepiti@gepiti.com">Γράψτε μας</a>

Λίστες
Λίστες χωρίς Λίστες με αρίθμηση:
αρίθμηση:

<ul> <ol>
<li> Άρης <li> Άρης
<li> ΠΑΟΚ <li> ΠΑΟΚ
<li> Ηρακλής <li> Ηρακλής
</li>
</ul>
Δοκιμάστε το! Δοκιμάστε το!

Παράδειγμα Λίστας:

Πίνακες
● Ο πίνακας ορίζεται με τη χρήση της ετικέτας:
<table>...<table>, μέσα στην οποία ορίζονται πρώτα οι
γραμμές με την ετικέτα: <tr>...</tr> και μέσα σε αυτή
τοποθετείται η ετικέτα στήλης: <td>...</td> ή <th>...
</th>.
● H ετικέτα <th> χρησιμοποιείται όταν θέλουμε τα
δεδομένα να είναι γραμμένα έντονα.
● Συνήθως μέσα στην ετικέτα <TR> δεν τοποθετούνται
παράμετροι.


Πλαίσια
● Μια σημαντική δυνατότητα που μας δίνει η
HTML, είναι να χωρίσουμε την οθόνη του
φυλλομετρητή σε δύο ή περισσότερα
παράθυρα στα οποία παρουσιάζονται
διαφορετικές ιστοσελίδες.
● Ο διαχωρισμός της οθόνης του φυλλομετρητή
σε παράθυρα γίνεται με την ετικέτα
<frameset>...</frameset>.
● Όταν χρησιμοποιείται αυτή η ετικέτα σε μία
σελίδα δεν μπορεί να χρησιμοποιηθεί
ταυτόχρονα και η ετικέτα <body>.

Πλαίσια
● O διαχωρισμός της οθόνης με τη χρήση της
ετικέτας <frameset> μπορεί να γίνει είτε σε
γραμμές, είτε σε στήλες.
● Αν θέλουμε η οθόνη να διαχωριστεί και σε
γραμμές και σε στήλες, τότε θα πρέπει να
χρησιμοποιήσουμε εμφωλευμένες ετικέτες
<frameset> μέσα στην αρχική ετικέτα
<frameset> ... </frameset>.


Kef4 parousiash

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Kef4 parousiash

Similar to Kef4 parousiash (20)

Recently uploaded

Recently uploaded (20)

Kef4 parousiash