Δπγαζηήπιο 1: html - Εύδοξος 1... · λ ίλαη θααξνηθά –fatal. tags...
Post on 11-Mar-2018
223 Views
Preview:
TRANSCRIPT
Γικηςοκενηπικα Σςζηήμαηα
Μαπίνορ Θεμιζηοκλέοςρ
Email: mthemist@unipi.gr
Αλδξνύηζνπ 150
Γξαθείν 206
Τει. 210 414 2723
Ώξεο Γξαθείνπ: Γεπηέξα 11-12 AM
Δπγαζηήπιο 1: HTML
Πεπιεσόμενα
Html
Δηζαγσγή ζηελ XML
Δξγαζηήξηα Πέκπηε 10-12 πκ
HTML
Πεπιεσόμενα
Τί είλαη ε HTML?
Tags
Φξήζε notepad
Πξνζζήθε
– Δηθόλσλ
– Σπλδέζκσλ
– Λίζηαο
Βιβλιογπαθία
Σεκεηώζεηο
Web Resources
Βηβιηνζήθε
Βιβλιογπαθία από ηο Internet
Υπάξρνπλ ρηιηάδεο websites κε ζέκα ηελ HTML.
Μεξηθά από απηά είλαη θαη ηα αθόινπζα
http://www.w3.org/
http://www.w3.org/markup/
http://www.w3.org/TR/html401/
http://www.ncsu.edu/it/edu/html_trng/html_basics.html
http://www.htmlgoodies.com/
http://builder.cnet.com/webbuilding/
http://www.w3schools.com/html/
http://www.htmlhelp.com
Δκπαιδεςηικόρ Σηόσορ
Μέρξη ην ηέινο ηνπ καζήκαηνο ζα είζηε ηθαλνί λα:
Καηαλνήζεηε ηα βαζηθά δνκηθά ζηνηρεία HTML
Φξεζηκνπνηήζεηε ηηο βαζηθέο εληνιέο ηεο HTML
Γεκηνπξγήζεηε ην δηθό ζαο web site
HTML
HTML = Hypertext-Markup language
HTML: Γιώζζα πξνγξακκαηηζκνύ πνπ ιέεη ζηνλ
web browser ηη πιεξνθνξίεο λα πξνβάιεη θαη πσο
Πσο λα εληνπίζεη αξρεία κε θείκελν, ήρν,
γξαθηθά, video ή multimedia
Πσο λα ηα εκθαλίζεη ζηελ ηζηνζειίδα
Γεκηνπξγία ηζηνζειίδσλ κε HTML ή κε ρξήζε
web authoring εξγαιείσλ όπσο
FrontPage (Intermediate Level),
Dreamweaver (Advanced).
HTML
H HTML δελ είλαη γιώζζα πξνγξακκαηηζκνύ
Πνπ ζηεξίδεηαη ζε δηαδηθαζίεο-ξνπηίλεο όπσο ε
Pascal, C ή ε Fortran
Αξρεία πνπ πεξηέρνπλ θώδηθα HTML έρνπλ ηελ
θαηάιεμε .htm ή .html
Σε αληίζεζε κε άιιεο γιώζζεο πξνγξακκαηηζκνύ
ηα ιάζε πνπ ζπκβαίλνπλ ζην θώδηθα ηεο ΗΤΜL
δελ είλαη θαηαζηξνθηθά – Fatal
Tags
Γειώλνπλ ηελ αξρή θαη ην ηέινο κηαο εληνιήο
HTML
Τα Tags ζπληάζζνληαη σο εμήο:
< > Γειώλεη ηελ αξρή ελόο tag
</> Γειώλεη ην ηέινο ηνπ tag
Σύληαμε
<ενηολή> κείμενο </ενηολή>
Μεπικά Παπαδείγμαηα Tags
<title> θείκελν </title>
<p> θείκελν </p>
<h1> θείκελν </h1>
<h2> θείκελν </h2>
<b> θείκελν </b> ή <strong> </strong>
<u> θείκελν </u>
<em> θείκελν </em>
Δπεξήγηζη Tags
Δνηολή Απσή Τέλορ
Κώδηθαο HTML <html> </html>
Τίηινο Ιζηνζειίδαο <title> </title>
Νέα Παξάγξαθνο <p> </p>
Κεθαιίδα επηπέδνπ 1 <h1> </h1>
Κεθαιίδα επηπέδνπ 2 <h2> </h2>
Ένηονο – bold <b> ή <strong> </b> ή </strong>
Υπνγξάκκηζε <u> </u>
Πλάγια – Italics <em> </em >
Σρόιηα <! -- -->
Πξνζνρή ζηελ ηειεπηαία εληνιή ππάξρνπλ δύν παύιεο όρη κία
Γομή Κώδικα HTML
1. Πξνζδηόξηζε ηελ έθδνζε ηεο HTML πνπ ρξεζηκνπνηείο
2. Δλεκέξσζε ηνλ κεηαθξαζηή-compiler όηη αθνινύζεί
θώδηθαο html
3. Γξάςε ζρόιηα (πξναηξεηηθά) γηα ην ηη θάλεη ην πξόγξακκα
4. Μνξθνπνίεζε ηελ θεθαιίδα (head, title)
5. Κιείζε ηελ θεθαιίδα
6. Πξόζζεζε ην θπξίσο κέξνο ηνπ θώδηθα (body)
7. Κιείζε ην θπξίσο κέξνο
8. Δλεκέξσζε ηνλ κεηαθξαζηή-compiler όηη ηειείσζε ν
θώδηθαο html
Γημιοςπγία ΗΤΜL
Αλνίμηε ην πξόγξακκα Notepad
Απνζεθέπζεηε ην αξρείν - θαηάιεμε HTM ή
HTML
Γξάςηε ηνλ θώδηθα
Απνζεθέπζεηε θαη πάιη
Γηα λα ην ηξέμεηε, εληόπηζηε ην αξρείν πνπ
δεκηνπξγήζαηε θαη θάληε δηπιό θιηθ πάλσ ζε
απηό
Παπάδειγμα 1 - HTML
<! DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01 // EN“
"http://www.w3.org/TR/html4/strict.dtd">
<!-- COMMENTS for example 1 -->
<html>
<head>
<title> COURSE ON XML - HTML example 1 </title>
</head>
<body>
<p> WELCOME TO OUR SITE! </p>
</body>
</html>
Παπάδειγμα 1
Αποηέλεζμα
Καη απηό είλαη ην θείκελν
ηνπ θπξίνπ κέξνπο (body)
Απηό είλαη ην θείκελν
ηνπ ηίηινπ (title)
Γημιοςπγήζηε ηο ππώηο ζαρ
ππόγπαμμα ζε ΗΤΜL
Τν πξόγξακκα ζα πξέπεη λα :
Να δίλεη έλα ηίηιν ζηε ζειίδαο ζαο θαη λα
Δκθαλίδεη έλα κήλπκα ζηελ νζόλε
Παπάδειγμα 2 –Κεθαλίδερ
Φξεζηκνπνηώληαο ηηο εληνιέο h1, h2, ... h6
δεκηνπξγήζηε έλα HTML πξόγξακκα πνπ λα
παξάγεη ηελ παξαθάησ ηζηνζειίδα
Παπάδειγμα 2 - Κεθαλίδερ<! DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01 // EN“
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- COMMENTS for example 2 - header.html -->
<!-- HTML headers -->
<head>
<title> COURSE ON XML - HTML example 2 - Headers</title>
</head>
<body>
<h1>Level 1 Header</h1> <!-- Level 1 header -->
<h2>Level 2 header</h2> <!-- Level 2 header -->
<h3>Level 3 header</h3> <!-- Level 3 header -->
<h4>Level 4 header</h4> <!-- Level 4 header -->
<h5>Level 5 header</h5> <!-- Level 5 header -->
<h6>Level 6 header</h6> <!-- Level 6 header -->
</body>
</html>
Γημιοςπγία Σςνδέζμων-Eνηολή <a href>
Σύληαμε 1νο ηξόπνο: Σύλδεζε Ιζηνζειίδαο
<a href = “Link - Ηιεθηξνληθή Γηέπζπλζε Internet” > Όλνκα </a>
Παξάδεηγκα
<a href = "http://www.Google.gr"> Google </a>
Σύληαμε 2νο ηξόπνο: Σύλδεζε Ηιεθηξνληθήο Γηεύζπλζεο email
<a href = “mailto: Ηιεθηξνληθή Γηέπζπλζε email” > Όλνκα </a>
Παξάδεηγκα
<a href = "mailto:mthemist@unipi.gr"> mthemist@unipi.gr</a>
Παπάδειγμα 3 – Υπεπζύνδεζμοι
Φξεζηκνπνηώληαο ππεξζπλδέζκνπο δεκηνπξγήζηε
κία ηζηνζειίδα πνπ λα πεξηέρεη 5 links ζε κεραλέο
αλαδήηεζεο.
Αθνινύζσο πξνζζέζηε έλα link πξνο ην
ειεθηξνληθό ζαο ηαρπδξνκείν.
Παπάδειγμα 3 – Υπεπζύνδεζμοι
Παπάδειγμα 3 – Υπεπζύνδεζμοι
Πποζθήκη Δικόνων
Βαζικά Γομικά Σηοισεία
<img src=“picture1.jpg" width="200"
height="150">
Η ιδιόηηηα alt
<img src=“picture1.jpg" width="200" height="150"
alt="My Picture">
Alt = Ιδηόηεηα Rollover – όηαλ ην mouse βξίζθεηαη
πάλσ από ηελ εηθόλα, ηόηε εκθαλίδεη ην όλνκα ηεο
εηθόλαο
Παπάδειγμα 4 – Δικόνερ
Γεκηνπξγήζηε έλα πξόγξακκα ην νπνίν εκθαλίδεη
εηθόλεο νη νπνίεο βξίζθνληαη
Α) ζην ίδην επξεηήξην κε ην πξόγξακκα ζαο.
Β) ζην desktop
Γ) C:\html_photos
Παπάδειγμα 4 – Δικόνερ
Πποζθήκη Δικόνων
Πποζοσή :
Για εικόνα πος βπίζκεηαι ζηο ίδιο εςπεηήπιο
<img src= “ όλνκα εηθόλαο” π.ρ. picture1.jpg
Για εικόνα πος βπίζκεηαι ζηο desktop
<img src="file://C:/Users/.../Desktop/όλνκα εηθόλαο"
Για εικόνα πος βπίζκεηαι ζε άλλο εςπεηήπιο
<img src="file://C:\...\ όλνκα εηθόλαο"
ΛίζηερΣηελ HTML ππάξρεη 3 είδε ιίζησλ:
Μη απιθμημένη (σπήζη bullet)
• Item A
• Item B
Απιθμημένη λίζηα
1. Item A
2. Item B
Λίζηα οπιζμών
Item A
Ο νξηζκόο ηνπ Α
Item B
Ο νξηζκόο ηνπ Β
Μη Απιθμημένη Λίζηα
Σύνηαξη
<ul>
<li> Σηνηρείν Α </li>
<li> Σηνηρείν B </li>
<li> Σηνηρείν Γ</li>
</ul>
Σύνηαξη
<ol>
<li> Σηνηρείν Α </li>
<li> Σηνηρείν Β </li>
<li> Σηνηρείν Γ </li>
</ol>
Απιθμημένη Λίζηα
Σύνηαξη
<dl>
<dt> Σηνηρείν Α </dt>
<dd> Οξηζκόο Σηνηρείνπ Α </dd>
<dt > Σηνηρείν Β </dt>
<dd> Οξηζκόο Σηνηρείνπ Β </dd>
<dt > Σηνηρείν Γ </dt>
<dd> Οξηζκόο Σηνηρείνπ Γ </dd>
</dl>
Λίζηα Οπιζμών
Παπάδειγμα 5
Παπάδειγμα 5
Παπάδειγμα 5 –
Μη Απιθμημένη Λίζηα
Γεκηνπξγήζηε έλα πξόγξακκα ην νπνίν εκθαλίδεη
κηα κε αξηζκεκέλε ιίζηα κε ηα logo 3 εηαηξεηώλ
αζιεηηθώλ εηδώλ. Τα logo ζα είλαη ηα εκπνξηθά
ζήκαηα ησλ εηαηξεηώλ (εηθόλεο) θαη θάλνληαο θιηθ
πάλσ ζε απηά ζα πξέπεη λα πεγαίλεηε ζηελ
αληίζηνηρε ζειηδα.
Παπάδειγμα 5 –
Μη Απιθμημένη Λίζηα
Παπάδειγμα 6
Παπάδειγμα 6
Γιασωπιζμόρ Τμημάηων
Δληνιή hr: Πξνζζέηεη κία δηαρσξηζηηθή
γξακκή
Σύληαμε
<hr>
Πίνακερ – Διζαγωγικέρ Έννοιερ<TABLE><CAPTION>My Table </CAPTION>
<TR><TD> Value 1 </TD><TD> Value 223 </TD><TD> Value 34 </TD></TR>
<TR><TD> Value 49 </TD> <TD> Value 5423 </TD><TD> Value 6.1 </TD></TR>
</TABLE>
<TR>
Γπαμμή πίνακα
<TD>
Γεδομένα
<Table>
Απσή Πίνακα
<Caption>
Τίηλορ Πίνακα
Tags Πίνακα
Δνηολή Απσή Τέλορ
Κώδηθαο πίλαθα <table> </table>
Τίηινο πίλαθα <caption> </caption>
Κεθαιίδεο πίλαθα <thead> </thead>
Σώκα πίλαθα <tbody> </tbody>
Γξακκή πίλαθα <tr> </tr>
Τίηινο θεθαιίδαο <th> </th>
Γεδνκέλα γξακκήο <td> </td >
<Table Border = “1”> Δκθάληζε πεξηγξάκκαηνο πίλαθα
<Table Border = “0”> Δκθάληζε πίλαθα ρσξίο πεξίγξακκα
<h1>Table Example - MARKS </h1>
<table border = "1">
<caption> MARKS DISTRIBUTION </caption>
<thead>
<tr>
<th> GRADE </th>
<th> MALE </th>
<th> FEMALE </th>
<th> TOTAL </th>
</tr>
</thead>
Παπάδειγμα 7a
<tbody>
<tr>
<th> A </th>
<td> 10 </td>
<td> 12</td>
<td> 22</td>
</tr>
...
</tbody>
</table>
Παπάδειγμα 7b
Παπάδειγμα 7
Διζαγωγή ζηιρ Φόπμερ - Forms
• Basic Form tag:
<FORM></FORM>
• Naming the Form
<FORM name=“formtest”>
• Form Type
<form method="POST" action="mailto:xxx@brunel.ac.uk?subject=test" enctype="text/plain">
• Input Type
<INPUT TYPE="TEXT" NAME="item1" SIZE="15">
• Radio Button:
<INPUT TYPE="RADIO" NAME="Question1”>
• Check Box:
<INPUT TYPE="checkbox" NAME=“Question2">
Διζαγωγή ζηιρ Φόπμερ - Forms
Basic Forms
• Text Box:
<TEXTAREA name=“comments" rows=10
cols=55></TEXTAREA>
• Submit Form:
<input type=submit value="Submit
Form">
• Reset Form:
<input type=reset value="Erase And
Start Over">
XML
Παπάδειγμα XML
<note>
<to> Tom </to>
<from> Jerry </from>
<heading> Reminder </heading>
<body> Do not forget our meeting this weekend! </body>
</note>
Πεξηγξάςηε ηη θάλεη απηό ην κήλπκα
Άζκηζη XML
Όνομα Κώζηαρ
Φύιν Άξξελ
Ηκ.
Γέλλεζεο
21.10.80
ΑΦΜ 046782931
Adapter
XML
XML XML
Όνομα Κώζηαρ
Φύιν Α
Ηκ.
Γέλλεζεο
21 ΟΚΤ 1980
ΑΦΜ 046782931
XML
Από Κώζηα
Πξνο Pizzeria
Δίδνο Pizza Special
Πνζόηεηα 2
Από Ππορ
Κώζηα Pizzeria
Pizzeria Supermarket
Message Broker
XML
XML
XMLXML
Από Ππορ
Κώζηα Pizzeria
XML Based Integration
Web Application
Web Services
Web Service
top related