Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags

Γικηςοκενηπικα Σςζηήμαηα

Μαπίνορ Θεμιζηοκλέοςρ

Email: [email protected]

Αλδξνύηζνπ 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">



<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>





<head>

<title> COURSE ON XML - HTML example 2 - Headers</title>

</head>

<body>

<h1>Level 1 Header</h1> 

<h2>Level 2 header</h2> 





</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:[email protected]"> [email protected]</a>

Παπάδειγμα 3 – Υπεπζύνδεζμοι

Φξεζηκνπνηώληαο ππεξζπλδέζκνπο δεκηνπξγήζηε

κία ηζηνζειίδα πνπ λα πεξηέρεη 5 links ζε κεραλέο

αλαδήηεζεο.

Αθνινύζσο πξνζζέζηε έλα link πξνο ην

ειεθηξνληθό ζαο ηαρπδξνκείν.



Πποζθήκη Δικόνων

Βαζικά Γομικά Σηοισεία

<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 –


Γεκηνπξγήζηε έλα πξόγξακκα ην νπνίν εκθαλίδεη

κηα κε αξηζκεκέλε ιίζηα κε ηα logo 3 εηαηξεηώλ

αζιεηηθώλ εηδώλ. Τα logo ζα είλαη ηα εκπνξηθά

ζήκαηα ησλ εηαηξεηώλ (εηθόλεο) θαη θάλνληαο θιηθ

πάλσ ζε απηά ζα πξέπεη λα πεγαίλεηε ζηελ

αληίζηνηρε ζειηδα.

Παπάδειγμα 5 –




Γιασωπιζμόρ Τμημάηων

Δληνιή 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


Διζαγωγή ζηιρ Φόπμερ - Forms

• Basic Form tag:

<FORM></FORM>

• Naming the Form

<FORM name=“formtest”>

• Form Type

<form method="POST" action="mailto:[email protected]?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

Documents

Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags