Ιστοσελίδες – Δημιουργία Δικτυακού Τόπ

Download Report

Transcript Ιστοσελίδες – Δημιουργία Δικτυακού Τόπ 

Ιστοσελίδες – Δημιουργία
Δικτυακού Τόπου
http://pps.aua.gr/
Τζικόπουλος Παναγιώτης, Πληροφορικός, Κεντρικό
Γραφείο Υποστήριξης Εκπαιδευτικού Έργου
Πέμπτη 28/06/2007
Γεωπονικό Πανεπιστήμιο Αθηνών
1
Περιεχόμενα
Πέμπτη 28/06/2007
1
Η Γλώσσα Σήμανσης HTML
2
Ετικέτες – Παράμετροι HTML
3
Δημιουργία Πινάκων
4
Παράδειγμα Dreamweaver
2
Τζικόπουλος Παναγιώτης
Εισαγωγικές Παρατηρήσεις
Καλά ορισμένη σύνταξη
και πρότυπα.
LANGUAGE
Πρόσθεση σημαδιών για
την υπόδειξη του ρόλου
διαφορετικών τμημάτων
του εγγράφου.
ΜARKUP
Το περιεχόμενο αρχικά
ήταν κατά κύριο λόγο
κείμενο
Σύνδεσμοι ανάμεσα
σε έγγραφα που
δημιουργούν
τον WWW.
Πέμπτη 28/06/2007
ΤEXT
ΗYPER
3
Τζικόπουλος Παναγιώτης
Ιστορική αναδρομή της HTML
1991
Πέμπτη 28/06/2007
1994
1997
4
1999
Τζικόπουλος Παναγιώτης
Η HTML έχει σχεδιασθεί με σκοπό:
1
Τη
στοιχειοθέτηση
(μορφοποίησηformating)
ηλεκτρονικών
κειμένων
Πέμπτη 28/06/2007
2
Την
αναμετάδοση
τους στο
διαδίκτυο
5
3
Την
αναπαράσταση
τους σε
διαφορετικού
είδους οθόνες
Τζικόπουλος Παναγιώτης
Προσεγγίσεις για τη Συγγραφή HTML
Σελίδων
 Raw HTML – Χρήση συντάκτη κειμένου
Πλεονεκτήματα
Απλή και καθαρή
κατασκευές
Μειονεκτήματα
Βαρετή & δύσκολη για
πολύπλοκες
 What-you-see-is-what-you-get (WYSIWYG)
π.χ. Dreamweaver 2007 (Macromedia)
FrontPage (Microsoft)
Pagemill (Adobe)
- Επαγγελματική επιλογή
- Home Pages & Μικρά sites
- Home Pages & Μικρά sites
Πλεονεκτήματα
- Δεν είναι αναγκαία η κατανόηση HTML
- Εύκολη η παραγωγή απλών εγγράφων
- Γρήγορη η δημιουργία πρωτότυπου για
ένα σχέδιο
- Εργαλεία προσφέρουν βοήθεια για πιο
πολύπλοκες εργασίες
Πέμπτη 28/06/2007
6
Μειονεκτήματα
- Πλαδαρός κώδικας μη αναγκαίες
ετικέτες
- Τα εργαλεία υστερούν έναντι
των προτύπων
- Σημαντικό κόστος
Τζικόπουλος Παναγιώτης
Δομή Εγγράφου HTML
HTML
HEAD
Η επικεφαλίδα
(header):
Περιέχει
πληροφορίες
σχετικές με το
έγγραφο
(συνήθως δεν
εμφανίζονται).
Πέμπτη 28/06/2007
BODY
Το σώμα (body):
Τα περιεχόμενα
του εγγράφου.
7
Τζικόπουλος Παναγιώτης
Ένα Απλό HTML Έγγραφο
<html>
<!– Η πρώτη μας σελίδα -->
<head>
<title>Welcome to AUA!</title>
</head>
<body>
<p>Welcome to AUA!</p>
</body>
</html>
Πέμπτη 28/06/2007
8
Τζικόπουλος Παναγιώτης
Ετικέτες HTML
 Μια ετικέτα (tag) html έχει:
Ένα όνομα - φανερώνει τη λειτουργία της / το
ρόλο της (Υποχρεωτικό).
 Μια λίστα από παραμέτρους (attributes) –
προσδιορίζουν τη λειτουργία της ετικέτας
(Προαιρετική).
 Οι ετικέτες εσωκλείονται από τους χαρακτήρες
‘<‘ και ‘>’.
 Δε γίνεται διάκριση κεφαλαίων και πεζών
γραμμάτων στα ονόματα και στις παραμέτρους
των ετικετών.

Πέμπτη 28/06/2007
9
Τζικόπουλος Παναγιώτης
Παράμετροι και Τιμές
 Οι παράμετροι (attributes) επεκτείνουν ή τροποποιούν τη
λειτουργία μιας ετικέτας:
 Περιέχουν διευκρινιστικές πληροφορίες.
 Είναι δυνατό να εμφανιστούν σε ετικέτες αρχής ή σε μονές
ετικέτες, αλλά ποτέ σε ετικέτες τέλους.
 Η διάταξη των παραμέτρων δεν έχει σημασία.
 Δε γίνεται διάκριση κεφαλαίων και πεζών γραμμάτων στα
ονόματα των παραμέτρων (γίνεται όμως στις τιμές τους).
 Οι περισσότερες παράμετροι έχουν μια τιμή (value) η οποία
εμφανίζεται μετά από το σύμβολο της ισότητας.
 Γενική μορφή: “παράμετρος = τιμή παραμέτρου”.
 Είναι δυνατό να υπάρχουν πολλές παράμετροι που
διαχωρίζονται μεταξύ τους με κενό.
Πέμπτη 28/06/2007
10
Τζικόπουλος Παναγιώτης
Βασικά τμήματα μιας HTML σελίδας
Επικεφαλίδες
Παράγραφοι
Συνδέσμους
HTML
Εικόνες
Πίνακες
Φόρμες
Λίστες(Αριθμημένες και μη)
Πέμπτη 28/06/2007
11
Τζικόπουλος Παναγιώτης
Το Τμήμα HEAD
Title: Oρίσμος του τίτλου της σελίδας.
Script: Kαθορισμός της scripting
γλώσσας.
Style: Kαθορισμός style sheet.
Meta: Καθορισμός ζεύγους
πληροφοριών (όνομα/τιμή) π.χ.
εισαγωγή λέξεων κλειδιών.
Link: Ορισμός σχέσεων με άλλα
κείμενα.
Πέμπτη 28/06/2007
12
Τζικόπουλος Παναγιώτης
Το Τμήμα BODY (1)
 Παράμετροι:
 bgcolor: Το χρώμα του φόντου της σελίδας.
 text: Το χρώμα των χαρακτήρων του κειμένου.
 link / vlink / alink: Το χρώμα των links
 background: Το url της εικόνας που θα
εμφανίζεται στο φόντο της σελίδας
 Παράδειγμα:
 <body bgcolor=blue text=orange>
 blue = #0000FF
Πέμπτη 28/06/2007
13
Τζικόπουλος Παναγιώτης
Το Τμήμα BODY (2)
 Στοιχεία ορισμού περιοχής:
 Επικεφαλίδες – <h1></h1>, …, <h6></h6>
 Παράγραφοι - <p></p>
 Λίστες - <ul>, <ol> <dl>
 Φόρμες - <form></form>
 Πίνακες - <table></table>
 Οριζόντιες γραμμές - <hr>
 Στοιχεία ορισμού κειμένου:
 Font style elements - <b></b>, <i></i>, <u></u>
 Linking - <a></a>
 Εικόνες - <img>
 Διακοπές κειμένου - <br>
Πέμπτη 28/06/2007
14
Τζικόπουλος Παναγιώτης
Επικεφαλίδες – h1, …, h6
<body>
<h1>Level 1 Header</h1>
<h2 align=center>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4 align=right>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6 align=left>Level 6 header</h6>
</body>
Πέμπτη 28/06/2007
15
Τζικόπουλος Παναγιώτης
Παράγραφοι
Mορφοποίηση Kειμένου
<body>
<hr>
<p> All <i>information</i> from this
<b>presentation</b>
is <strong>&copy;</strong> <u>aua</u> &amp; </p>
<p><del>You know that 2<sup>10</sup> = 1024
</del>
<br>
But you <sub>sometimes</sub> make mistakes.</p>
<p>Did you know how to write this <strong>
&frac14;</strong> ??? </p>
<hr>
</body>
Πέμπτη 28/06/2007
16
Τζικόπουλος Παναγιώτης
Μη Διατεταγμένες Λίστες
<ul>
<li>AltaVista</li>
<li type=disc>Yahoo</li>
<li type=square>Google</li>
<li type=circle>MSN Search</li>
</ul>
Πέμπτη 28/06/2007
17
Τζικόπουλος Παναγιώτης
Διατεταγμένες Λίστες
<ol>
<li>AltaVista</li>
<li type=1>Yahoo</li>
<li type=a>Google</li>
<li type=I>MSN Search </li>
</ol>
Πέμπτη 28/06/2007
18
Τζικόπουλος Παναγιώτης
Λίστες Ορισμού
<dl>
<dt>AltaVista<dd><i>Αρκετά καλή</i>
<dt>Yahoo<dd><i>Κατηγοριοποίηση από
ανθρώπους</i>
<dt>Google<dd><i>Το καλύτερο </i>
<dt>MSN Search<dd><i>Πολύ καλή</i>
</dl>
Πέμπτη 28/06/2007
19
Τζικόπουλος Παναγιώτης
Φωλιασμένες Λίστες
<ul>
<li>You have access to new media as it becomes public:
<ul>
<li>New games</li>
<li>New applications
<ul>
<li>For business</li><li>For pleasure</li>
</ul>
</li>
<li>Around the clock news</li>
<li>Programming
<ul>
<li>XML</li><li>Java</li>
</ul>
</li>
</ul>
</li>
<li>Keeping in touch with old friends</li>
</ul>
Πέμπτη 28/06/2007
20
Τζικόπουλος Παναγιώτης
Δημιουργία Υπερσυνδέσμων
<a href =
"http://www.google.com">Google</a>
<a href = "links2.html">Μια άλλη σελίδα
στον ίδιο φάκελο</a>
<a href = "mailto:[email protected]">email
me</a>
<a href = "#bottom">Τέλος της
σελίδας</a>
<a name="bottom"><h2>bottom</h2>
Πέμπτη 28/06/2007
21
Τζικόπουλος Παναγιώτης
Εικόνες
<img src = "stoneage2.jpg" alt = "New
email">
<a href = “../4 contact.html">
<img src = "stoneage2.jpg" alt = "New
email"></a>
<img border = “0” src = "stoneage2.jpg">
Πέμπτη 28/06/2007
22
Τζικόπουλος Παναγιώτης
Πίνακες
<table border = "1" width = "40%" align = "center"
>
<caption>Here is a small sample table</caption>
<tr>
<th>This is the head.</th>
</tr>
<tr>
<td>This is the body.</td>
</tr>
</table>
Πέμπτη 28/06/2007
23
Τζικόπουλος Παναγιώτης
H Ετικέτα Table – Παράμετροι
 align = {left, right, center}: Η οριζόντια
τοποθέτηση του πίνακα.
 width = {452, 50%}: Το πλάτος του πίνακα.
 border = {0,1,…}: Το πλάτος του
περιγράμματος.
 cellspacing = {0,1,…}: Το κενό μεταξύ
γειτονικών κελιών.
 cellpadding: Το κενό μεταξύ κελιού και
περιεχομένων.
 <caption align = {top, bottom}>…</caption>
Πέμπτη 28/06/2007
24
Τζικόπουλος Παναγιώτης
Ένας Πολύπλοκος Πίνακας













<table border = "1">
<tr>
<th rowspan = "2"><img src = "camel.gif"></th>
<th colspan = "4" valign = "top">
<h1>Camelid comparison</h1></th>
</tr>
<tr valign = "bottom">
<th># of Humps</th>
<th>Indigenous region</th>
<th>Spits?</th>
<th>Produces Wool?</th>
</tr>…
</table>
Πέμπτη 28/06/2007
25
Τζικόπουλος Παναγιώτης
tr / th / td – Παράμετροι
 nowrap: Ισοδύναμο με το &nbsp (κενός
χαρακτήρας).
 rowspan = {int}: Οι γραμμές που
καταλαμβάνονται από το κελί.
 colspan: Οι στήλες που καταλαμβάνονται.
 width / height: Το πλάτος / ύψος του κελιού.
 align / valign: Οριζόντια / κάθετη ευθυγράμμιση
των περιεχομένων.
 bgcolor
 tr – align & valign = {top, middle, bottom}
Πέμπτη 28/06/2007
26
Τζικόπουλος Παναγιώτης
Φόρμες
<form method = "post" action = "formmail.asp">
<input type = "hidden" name = "subject"
value = "Feedback Form">
Name:
<input name = "name" type = "text" size = "25">
<input type = "submit" value = "Submit Your
Entries">
<input type = "reset" value = "Clear Your Entries">
</form>
Πέμπτη 28/06/2007
27
Τζικόπουλος Παναγιώτης
Η Ετικέτα Form – Παράμετροι
 action: Ορίζει το url που θα χρησιμοποιηθεί από
τον εξυπηρετητή για να επεξεργαστεί τα δεδομένα
της φόρμας (συνήθως κάποιο σενάριο).
 method = {get, post}:
Ορίζει τη μέθοδο αποστολής των περιεχομένων
της φόρμας.
 get: Στέλνει τα περιεχόμενα στο url.
 post: Τα στέλνει στο body (περισσότερα
δεδομένα).
 enctype: Καθορίζει τον τύπο αποκωδικοποίησης
των περιεχομένων.
Πέμπτη 28/06/2007
28
Τζικόπουλος Παναγιώτης
Μία Πολύπλοκη Φόρμα
<form method = "post" action = " formmail.asp">
Comments: <textarea name = "comments" rows = "4" cols
="36“ >
Hello to our lesson!</textarea>
Email Address:
<input name = "email" type = "password" size = "25">
Site design
<input name = "thingsliked" type = "checkbox" value =
"Design">Links
<input name = "thingsliked" type = "checkbox" value =
"Links">Ease of use
<input name = "thingsliked" type = "checkbox" value =
"Ease">
</form>
Πέμπτη 28/06/2007
29
Τζικόπουλος Παναγιώτης
Φόρμες – Χαρακτηριστικά
 input: Παίρνει διάφορες παραμέτρους.
 Απαγορεύεται να υπάρχει ετικέτα τέλους
(</input>).
 textarea: Για πεδία κειμένου πολλαπλών
γραμμών.
 rows / columns
 </textarea>
 select: Μονής ή πολλαπλής επιλογής μενού.
 option - selected
 </select>
Πέμπτη 28/06/2007
30
Τζικόπουλος Παναγιώτης
Φόρμες – Ετικέτα Input / Παράμετρος
Type
 Καθορίζει τον τύπο του πεδίου εισόδου.
 text: Kείμενο μίας γραμμής – size=30.
 password: Oμοιο με τον τύπο text, αλλά
απεικονίζει τον χαρακτήρα * - maxlength.
 checkbox: Δημιουργεί ζεύγος
ονόματος/τιμής, υποστηρίζονται πολλαπλές
τιμές – checked.
 radio: Δέχεται μόνο μία τιμή, μία ομάδα
επιλογών έχει το ίδιο όνομα.
 submit: Αποστολή δεδομένων.
 reset: “Καθαρίζει” τα περιεχόμενα.
Πέμπτη 28/06/2007
31
Τζικόπουλος Παναγιώτης
Cascading Style Sheets
 Καθορίζουν το style, τη δομή και τη θέση των
στοιχείων μέσα στο αρχείο.
 Κάνουν εφικτό το διαχωρισμό της εμφάνισης των
δεδομένων και των ίδιων των δεδομένων.
 Σύνταξη:
 selector {property: value; property2: value2}
– selector : html tag – {body, p, h1,…}
– property : το χαρακτηριστικό που θέλουμε να
αλλάξουμε (color, fontfamily, text-align)
Πέμπτη 28/06/2007
32
Τζικόπουλος Παναγιώτης
Διαδοχικά Φύλλα Στυλ
Με τον ορισμό αυτών μέσα σε μια
βασική ετικέτα της γλώσσας HTML
Με τον ορισμό αυτών, στο τμήμα του HTML
που περικλείεται από την ετικέτα <head> και
συγκεκριμένα με χρήση της ετικέτας <style>
Τρόποι με τους
οποίους είναι δυνατή
η εφαρμογή των CSS
σε ένα HTML έγγραφο
Με τον ορισμό αυτών σε εξωτερικά αρχεία
αρχεία, τα οποία ονομάζονται
Φύλλα Στυλ (StyleSheets)
Πέμπτη 28/06/2007
33
Τζικόπουλος Παναγιώτης
http://pps.aua.gr
Πέμπτη 28/06/2007
Γεωπονικό Πανεπιστήμιο Αθηνών
34