HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν •...
Transcript of HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν •...
![Page 1: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/1.jpg)
HTML 1 Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο
Δπηκέιεηα δηαθαλεηώλ: Γ. Εήλδξνο
ρνιή Ζιεθηξνιόγσλ Μεραληθώλ
θαη Μεραληθώλ Τπνινγηζηώλ
![Page 2: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/2.jpg)
ηόρνο ηεο ώξαο
• Ση είλαη HTML θαη CSS;
• Γηαρσξηζκόο πεξηερνκέλνπ/κνξθνπνίεζεο
• Πόηε ρξεζηκνπνηνύκε ην έλα θαη πόηε ην άιιν;
• Δηζαγσγή ηεο γιώζζαο HTML ζε αξράξην επίπεδν:
• Βαζηθή ζύληαμε, εηηθέηεο
• Σίηινη, παξάγξαθνη, επηθεθαιίδεο
• Λίζηεο, ζύλδεζκνη, εηθόλεο
• Πίλαθεο, θόξκεο
![Page 3: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/3.jpg)
HTML θαη CSS
• Οη γιώζζεο ηνπ web
• HTML: Πεξηγξάθεη πεξηερόκελν
• HyperText Markup Language
• CSS: Πεξηγξάθεη κνξθνπνίεζε
• Cascading StyleSheets
• σζηόο δηαρσξηζκόο από ηελ αξρή, πάληα
![Page 4: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/4.jpg)
HTML
Πεξηερόκελν
• Σίηινο
• Κείκελν
• Λίζηα
• Πίλαθαο
• Δηθόλα
• ύλδεζκνο
CSS
Μνξθνπνίεζε
• Υξώκαηα
• Θέζε
• Μέγεζνο
• ηνίρηζε
• Πιαίζηα
• Γξακκέο
• Φόλην
![Page 5: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/5.jpg)
Παξάδεηγκα: Βηβιίν
Πεξηερόκελν
• Σίηινο
• πγγξαθέαο
• Δπηθεθαιίδεο θεθαιαίσλ
• Κείκελν
• Υσξηζκόο θεθαιαίσλ
• Υσξηζκόο παξαγξάθσλ
• Τπνζεκεηώζεηο
Μνξθνπνίεζε
• Μέγεζνο ηίηινπ
• Θέζε νλόκαηνο
ζπγγξαθέα
• Σηνίρηζε επηθεθαιίδσλ
• Πεξηζώξην θεηκέλνπ
• Κελέο ζειίδεο αλάκεζα
ζηα θεθάιαηα
• Τπνζεκεηώζεηο κε
πιάγηα γξάκκαηα
![Page 6: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/6.jpg)
Παξάδεηγκα: Βηβιίν
• Μνξθνπνίεζε αιιάδεη, πεξηερόκελν όρη:
• Ίδην βηβιίν, δηαθνξεηηθή έθδνζε
![Page 7: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/7.jpg)
Παξάδεηγκα: Βηβιίν
• Πεξηερόκελν αιιάδεη, κνξθνπνίεζε όρη:
• Γηαθνξεηηθό βηβιίν, ίδηα έθδνζε
![Page 8: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/8.jpg)
Πεξηερόκελν ή κνξθνπνίεζε;
• Σα γξάκκαηα κίαο παξαγξάθνπ είλαη θόθθηλα.
• Οη αξηζκνί ζειίδσλ βξίζθνληαη ζηα δεμηά.
• Σν βηβιίν έρεη 30 θεθάιαηα.
• Σν πξώην θεθάιαην δελ πεξηέρεη θαζόινπ ην γξάκκα «μ».
• ηελ πξώηε παξάγξαθν, ζην όλνκα ηνπ ήξσα έρεη δσζεί
έκθαζε.
• Ζ έκθαζε δίλεηαη κε πλάγια γράμματα.
• Ζ έκθαζε δίλεηαη κε έληνλα γξάκκαηα.
![Page 9: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/9.jpg)
Δηαθνξεηηθή γξακκαηνζεηξά
![Page 10: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/10.jpg)
Μηθξόηεξν κέγεζνο Μεγαιύηεξν κέγεζνο
![Page 11: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/11.jpg)
Λαηηληθόο αξηζκόο Αξαβηθόο αξηζκόο
![Page 12: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/12.jpg)
Μνλά εηζαγωγηθά
Δηπιά εηζαγωγηθά
![Page 13: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/13.jpg)
Ο ππόηηηινο ηνπ θεθαιαίνπ δελ εκθαλίδεηαη
Ο ππόηηηινο ηνπ θεθαιαίνπ εκθαλίδεηαη
![Page 14: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/14.jpg)
Υπάξρεη αιιαγή γξακκήο
Δελ ππάξρεη αιιαγή γξακκήο
![Page 15: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/15.jpg)
Δηαθνξεηηθόο ηίηινο
![Page 16: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/16.jpg)
Δηαθνξεηηθό θείκελν
![Page 17: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/17.jpg)
HTML
• Γξάθνπκε ζε αξρεία .html
• Σα επεμεξγαδόκαζηε κε απιό θεηκελνγξάθν
• π.ρ. Notepad, vim, emacs, θ.ό.θ.
• Πεξηέρεη θώδηθα ζε κνξθή απινύ θεηκέλνπ
• Γίλεηαη interpret θαη όρη compile
• Σξέρεη κέζα ζηνπο browsers
• Σξέρεη θαη ηνπηθά
![Page 18: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/18.jpg)
Ζ απινύζηεξε ζειίδα HTML
• Έλα αξρείν .html κε ζθέην θείκελν!
• Ζ επέθηαζε πξέπεη λα είλαη .html θαη όρη .html.txt
![Page 19: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/19.jpg)
Browser
• Πξόγξακκα πνπ «ηξέρεη» web εθαξκνγέο
![Page 20: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/20.jpg)
Γεκνθηιείο browsers
Όλνκα Εηαηξία Open Source Φξήζε Μεραλή
Internet Explorer Microsoft Όρη 52% Trident
Firefox Mozilla Ναη 31% Gecko
Chrome Google Ναη* 10% Webkit
Safari Apple Ναη* 5% Webkit
Opera Opera Όρη 2% Presto
![Page 21: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/21.jpg)
Γξάθνπκε θώδηθα «ζην ρέξη»
• Καηαλόεζε ηνπ πώο δνπιεύνπλ νη ηερλνινγίεο
• Καη πώο ζα δνπιεύνπλ αύξην
• Έιεγρνο εκθάληζεο θαη ζπκπεξηθνξάο 100%
• Καηαλόεζε ηεο αζθάιεηαο
• ειίδεο πνπ ηξέρνπλ γξήγνξα θαη ζωζηά
• Επεθηάζηκνο θώδηθαο
• Γπλαηόηεηα ζπλδπαζκνύ γιωζζώλ
• Αθνινπζνύκε ηα web standards
![Page 22: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/22.jpg)
Βαζηθή δνκή κηαο ζειίδαο
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
This is my first web page.
</body>
</html>
![Page 23: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/23.jpg)
DOCTYPE
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• Γειώλεη ηελ έθδνζε ηεο γιώζζαο HTML
• Κάλεη ηνλ browser λα ζπκπεξηθέξεηαη ζσζηά
• Σν θάλνπκε copy/paste ζηελ αξρή ηεο ζειίδαο
![Page 24: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/24.jpg)
Δηηθέηεο
<html>
…
</html>
• Κάζε εηηθέηα έρεη όλνκα: html
• Κάζε εηηθέηα πξέπεη λα αλνίγεη: <html>
• Κάζε εηηθέηα πξέπεη λα θιείλεη: </html>
• Αλάκεζα ζην άλνηγκα θαη ην θιείζηκν βξίζθεηαη ην
πεξηερόκελν ηεο εηηθέηαο.
![Page 25: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/25.jpg)
<html>
<body>
This is my first web page.
</body>
</html>
Πεξηερόκελν εηηθέηαο html
Άλνηγκα εηηθέηαο html
Κιείζηκν εηηθέηαο html
![Page 26: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/26.jpg)
<html>
<body>
This is my first web page.
</body>
</html>
Πεξηερόκελν εηηθέηαο body
Άλνηγκα εηηθέηαο body
Κιείζηκν εηηθέηαο body
![Page 27: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/27.jpg)
Δηηθέηεο πνπ θιείλνπλ ηνλ εαπηό ηνπο
• Oη εηηθέηεο πνπ δελ πεξηέρνπλ πεξηερόκελν θιείλνπλ ηνλ
εαπηό ηνπο.
• Απνπζία πεξηερνκέλνπ!
<br />
Άλνηγκα θαη θιείζκν
εηηθέηαο br
![Page 28: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/28.jpg)
<html>, <head>, <title> θαη <body>
• <html>: Πεξηέρεη κία νιόθιεξε ζειίδα
• <head>: Πεξηέρεη meta-πιεξνθνξίεο γηα ηε ζειίδα
• <title>: Πεξηέρεη ηνλ ηίηιν ηεο ζειίδαο
• <body>: Πεξηέρεη ην πεξηερόκελν ηεο ζειίδαο
• Σν <html> πξέπεη ππνρξεσηηθά λα πεξηέρεη κόλν <head>
θαη <body>, κε απηή ηε ζεηξά. Σν <title> πξέπεη λα
πεξηέρεηαη ζην <head>.
![Page 29: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/29.jpg)
Βαζηθή δνκή κηαο ζειίδαο
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Μy first web page</title>
</head>
<body>
This is my first web page.
</body>
</html>
![Page 30: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/30.jpg)
Ηεξαξρία ζηηο εηηθέηεο
• Μία εηηθέηα κπνξεί λα πεξηέρεηαη νιόθιεξε κέζα ζε κία
άιιε.
• Πξόθεηηαη γηα κηα δελδξηθή δνκή.
• Ό,ηη αλνίγεη πξώην θιείλεη ηειεπηαίν (LIFO).
<html> <body> This is my first web page. </body> </html>
Η body πεξηέρεηαη ζηελ html
![Page 31: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/31.jpg)
Ηεξαξρία ζηηο εηηθέηεο
• Α παηέξαο ηνπ Β (parent)
• Α πεξηέρεη άκεζα ην Β.
• Α παηδί ηνπ Β (child)
• Α πεξηέρεηαη άκεζα ζην Β.
• Α πξόγνλνο ηνπ Β (ancestor)
• Α πεξηέρεη ην Β.
• Α απόγνλνο ηνπ Β (descendant)
• A πεξηέρεηαη ζην Β.
• Α αδεξθόο ηνπ Β: (sibling)
• Α έρεη θνηλό παηέξα κε ην Β.
<html> <head> <title>Page</title> </head> <body> My first web page. </body> </html>
![Page 32: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/32.jpg)
Παξάγξαθνη
• Ζ HTML αγλνεί ηηο αιιαγέο γξακκώλ θαη ηα θελά.
• Πνιιά θελά θαη αιιαγέο γξακκώλ αληηθαζίζηαληαη από
έλα κόλν θελό.
Αυτή είναι η πρώτη μου σελίδα
Είμαι ενθουσιασμένος!
Απηή είλαη ε πξώηε κνπ ζειίδα Δίκαη ελζνπζηαζκέλνο!
![Page 33: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/33.jpg)
Παξάγξαθνη
• <p>: Οξίδεη κία παξάγξαθν (κλεκνληθό: paragraph)
<p>Αυτή είναι η πρώτη μου σελίδα</p>
<p>Είμαι ενθουσιασμένος!</p>
Απηή είλαη ε πξώηε κνπ ζειίδα
Δίκαη ελζνπζηαζκέλνο!
![Page 34: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/34.jpg)
Παξάγξαθνη
• <br />: Οξίδεη κία αιιαγή γξακκήο (κλεκνληθό: break)
• Πξνζνρή: Δελ πξέπεη λα ρξεζηκνπνηείηαη γηα
κνξθνπνίεζε!
• Απμνκεηώλνπκε ηελ θάζεηε απόζηαζε κε κνξθνπνίεζε
κέζσ CSS.
![Page 35: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/35.jpg)
Έκθαζε
• <em>: Γίλεη έμφαζη ζε έλα ηκήκα θεηκέλνπ (emphasis)
• <strong>: Γίλεη ηδηαίηεξε έκθαζε ζε έλα ηκήκα θεηκέλνπ
(strong emphasis)
• πλεζίδεηαη ην <em> λα κνξθνπνηείηαη κε πλάγια θαη ην
<strong> κε έληνλα γξάκκαηα.
• Δελ ρξεζηκνπνηνύκε <strong> θαη <em> γηα κνξθνπνίεζε!
• Οξίδνπκε ηη ζα έρεη έληνλε ή πλάγια γξαθή κε CSS. Οη εηηθέηεο
απηέο <strong> θαη <em> θαζνξίδνπλ κόλν ηελ έκθαζε ζην
πεξηερόκελν.
![Page 36: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/36.jpg)
Δπηθεθαιίδεο
• <h1>: Δπηθεθαιίδα 1νπ επηπέδνπ (κλεκνληθό: headline)
• <h2>: Δπηθεθαιίδα 2νπ επηπέδνπ
• …
• <h6>: Δπηθεθαιίδα 6νπ επηπέδνπ
• Ζ <h1> ρξεζηκνπνηείηαη 1 θνξά.
• Δπόκελε πξέπεη λα βξίζθεηαη θάησ από πξνεγνύκελε.
• Γελ ππάξρεη h7.
![Page 37: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/37.jpg)
Δπηθεθαιίδεο <h1>
<h2>
<h2>
![Page 38: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/38.jpg)
Λίζηεο
• Αξηζκεκέλεο: εηξά έχει ζεκαζία, ρξήζε <ol>
• Με αξηζκεκέλεο: εηξά δεν έρεη ζεκαζία, ρξήζε <ul>
(κλεκνληθά: ordered list, unordered list)
<li>: Έλα ζηνηρείν κίαο ιίζηαο (κλεκνληθό: list item)
• Παλνκνηόηππνο HTML θώδηθαο γηα ηελ πεξηγξαθή ηνπο.
<ol> <li>Πρώτο στοιχείο</li>
<li>Δεύτερο στοιχείο</li>
<li>Τρίτο στοιχείο</li>
</ol>
![Page 39: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/39.jpg)
Λίζηεο
• Σν <li> κπνξεί λα πεξηέρεηαη κόλν ζε <ol> ή <ul>
• Σα <ol> θαη <ul> κπνξνύλ λα πεξηέρνπλ κόλν <li>
![Page 40: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/40.jpg)
Λίζηεο
Αξηζκεκέλεο
• Mέξεο ηεο εβδνκάδαο
• Ρνύρα πνπ ζα θνξέζσ
• Νηθεηέο ηεο Formula 1
• Δθδόζεηο ηνπ Photoshop
Με αξηζκεκέλεο
• Λίζηα γηα ηα ςώληα
• Μαζεηέο ζην ακθηζέαηξν
• Οη e-mail δηεπζύλζεηο κνπ
• Απηή ε ιίζηα
![Page 41: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/41.jpg)
Αξηζκεκέλε ιίζηα: Μέξεο
1. Γεπηέξα
2. Σξίηε
3. Σεηάξηε
4. Πέκπηε
5. Παξαζθεπή
6. άββαην
7. Κπξηαθή
<ol> <li>Δευτέρα</li>
<li>Τρίτη</li>
<li>Τετάρτη</li>
<li>Πέμπτη</li> <li>Παρασκευή</li> <li>Σάββατο</li> <li>Κυριακή</li> </ol>
![Page 42: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/42.jpg)
Με αξηζκεκέλε ιίζηα: Φώληα
• Kinder Γαιαθηνθέηεο
• Kinder Bueno
• Happy Hippo
• Απγά Kinder
• Kinder Delice
• Kinder Duplo
• Kinder Maxi
<ul> <li>Kinder Γαλακτοφέτες</li>
<li>Kinder Bueno</li>
<li>Happy Hippo</li>
<li>Αυγά Kinder</li> <li>Kinder Delice</li> <li>Kinder Duplo</li> <li>Kinder Maxi</li> </ul>
![Page 43: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/43.jpg)
Δκθώιεπζε
• Ζ απιόηεηα θαη ε δύλακε ηεο HTML!
• Δπηηξέπεηαη ε εκθώιεπζε ζε ιίζηεο, παξαγξάθνπο, θιπ.
<h1>Λόγοι που έρχομαι στο σεμινάριο</h1>
<ol>
<li>Για να εντυπωσιάσω:
<ul>
<li>Τη γάτα μου</li>
<li>Το σκύλο μου</li>
</ul>
</li>
<li>Για να μάθω</li>
<li>Για να γίνω διάσημος</li> </ol>
![Page 44: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/44.jpg)
Λόγνη πνπ έξρνκαη ζην ζεκηλάξην
1. Γηα λα εληππσζηάζσ: • Σε γάηα κνπ
• Σν ζθύιν κνπ
2. Γηα λα κάζσ
3. Γηα λα γίλσ δηάζεκνο
![Page 45: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/45.jpg)
Γηεπζύλζεηο
• Απόιπηεο: Ξεθηλνύλ κε ην πξσηόθνιιν
• “http://www.google.com/”
• “http://www.htmldog.com/guides/htmlbeginner/links/”
• ρεηηθέο: Παξάγνληαη κε βάζε ηελ παξνύζα ζειίδα
• “foo” ζην http://mysite.gr/bar http://mysite.gr/bar/foo
• “/foo” ζην http://mysite.gr/bar http://mysite.gr/foo
• “#foo” ζην http://mysite.gr/bar http://mysite.gr/bar#foo
![Page 46: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/46.jpg)
Ηδηόηεηεο εηηθεηώλ
• Δκθαλίδνληαη ζην άλνηγκα ηεο εηηθέηαο κεηά ην όλνκα
• Κάζε ηδηόηεηα έρεη όλνκα θαη ηηκή
• Όλνκα από ηηκή ρσξίδνληαη κε =
• Σηκή πεξηιακβάλεηαη ζε “εηζαγσγηθά”
• Μνλά ή δηπιά ό,ηη πξνηηκάηε
• Οη ηδηόηεηεο ρσξίδνληαη κε θελό από ην όλνκα ηεο εηηθέηαο
θαη από ηηο άιιεο εηηθέηεο.
![Page 47: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/47.jpg)
Ηδηόηεηεο εηηθεηώλ
</a> <a href=“val”>
Άλνηγκα εηηθέηαο Κιείζηκν εηηθέηαο
Γεια σου κόσμε!
Πεξηερόκελν εηηθέηαο
![Page 48: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/48.jpg)
Ηδηόηεηεο εηηθεηώλ
<a href=“val”> Γεια σου κόσμε!</a>
Ιδηόηεηα href
Όλνκα ηδηόηεηαο Τηκή ηδηόηεηαο
![Page 49: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/49.jpg)
ύλδεζκνη
• <a>: Οξίδεη έλα ζύλδεζκν
• href: Οξίδεη ηνλ πξννξηζκό ελόο ζπλδέζκνπ
![Page 50: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/50.jpg)
ύλδεζκνη
<a href=“http://htmldog.com”>Μάζε HTML!</a>
Μάζε HTML!
![Page 51: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/51.jpg)
Πεξηνρέο εγγξάθνπ
id: Ονομάζει κία εηηθέηα. Μπνξεί λα πεξηέρεηαη ζε
νπνηαδήπνηε εηηθέηα.
<a href=“#names”>Μεηάβαζε ζηα νλόκαηα</a>
…
<h2 id=“names”>Ονόματα συμμετεχόντων</h2>
![Page 52: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/52.jpg)
Δηθόλεο ζην web
Φξήζε Φξώκαηα Δηαθάλεηα Μέγεζνο
JPG Φσηνγξαθίεο Πνιιά Όρη Μηθξό
PNG Γξαθηθά Πνιιά Πιήξεο Μέηξην
GIF Γξαθηθά 256 Γπαδηθή Διάρηζην
![Page 53: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/53.jpg)
Δηθόλεο
• <img>: Πεξηγξάθεη κία εηθόλα
• src: Σν αξρείν ηεο εηθόλαο σο δηεύζπλζε (ππνρξεσηηθό)
• alt: Μία πεξηγξαθή ηεο εηθόλαο (ππνρξεσηηθό)
• width: Μήθνο εηθόλαο ζε pixels
• height: Μήθνο εηθόλαο ζε pixels
• Ζ εηηθέηα <img> δελ πεξηιακβάλεη πεξηερόκελν.
![Page 54: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/54.jpg)
Δηθόλεο
<img
src=“cake.gif”
alt=“The cake is not a lie…”
width=“200”
height=“200” />
![Page 55: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/55.jpg)
Πίλαθεο
• Υξεζηκνπνηνύληαη κόλν γηα δεδνκέλα πίλαθα
• Γηα ηνπνζέηεζε ζηνηρείσλ ζε νξηζκέλεο ζέζεηο
ρξεζηκνπνηνύκε CSS θαη όρη HTML πίλαθεο!
• Σν πην δύζθνιν πξάγκα γηα ζήκεξα :-)
Παξάδεηγκα:
• Πίλαθαο καζεηώλ κε ζηνηρεία όλνκα, επώλπκν,
βαζκνινγία.
• Πίλαθαο δηάζεκσλ επηζηεκόλσλ κε ζηνηρεία όλνκα,
επώλπκν, ηνκέαο, ζπνπδαηόηεξε αλαθάιπςε.
![Page 56: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/56.jpg)
Γηάζεκνη επηζηήκνλεο
Alan Turing Δπηζηήκε Τπνινγηζκνύ Turing Machines
Ludwig Wittgenstein Φηινζνθία Tractatus
Bertrand Russel Λνγηθή Principia Mathematica
Αξρηκίδεο Μεραληθόο Μνριόο
Leonhard Euler Μαζεκαηηθά eηπ + 1 = 0
<table>: Πεξηγξάθεη έλαλ πίλαθα
![Page 57: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/57.jpg)
Γξακκή πίλαθα
Alan Turing Δπηζηήκε Τπνινγηζκνύ Turing Machines
Ludwig Wittgenstein Φηινζνθία Tractatus
Bertrand Russel Λνγηθή Principia Mathematica
Αξρηκίδεο Μεραληθόο Μνριόο
Leonhard Euler Μαζεκαηηθά eηπ + 1 = 0
<tr>: Πεξηγξάθεη κία γξακκή πίλαθα. Πεξηέρεηαη άκεζα ζην <table>
![Page 58: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/58.jpg)
Κειί πίλαθα
Alan Turing Δπηζηήκε Τπνινγηζκνύ Turing Machines
Ludwig Wittgenstein Φηινζνθία Tractatus
Bertrand Russel Λνγηθή Principia Mathematica
Αξρηκίδεο Μεραληθόο Μνριόο
Leonhard Euler Μαζεκαηηθά eηπ + 1 = 0
<td>: Πεξηγξάθεη έλα θειί πίλαθα. Πεξηέρεηαη άκεζα ζην <tr>
![Page 59: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/59.jpg)
Πίλαθεο
• <table>: Οξίδεη έλαλ πίλαθα
• <tr>: Οξίδεη κία γξακκή πίλαθα
• <td>: Οξίδεη έλα θειί πίλαθα
• <table> πεξηέρεη κόλν <tr>
• <tr> πεξηέρεη κόλν <td>
• <td> πεξηέρεηαη κόλν ζε <tr>
• <tr> πεξηέρεηαη κόλν ζε <table>
![Page 60: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/60.jpg)
<table>
<tr>
<td>Alan</td><td>Turing</td>
<td>Δπηζηήκε Τπνινγηζκνύ</td><td>Turing Machines</td>
</tr>
<tr>
<td>Ludwig</td><td>Wittgenstein</td>
<td>Φηινζνθία</td><td>Tractatus</td>
</tr>
<tr>
<td>Bertrand</td><td>Russel</td>
<td>Λνγηθή</td><td>Principia Mathematica</td>
</tr>
<tr>
<td>Αξρηκίδεο</td><td></td>
<td>Μεραληθόο</td><td>Μνριόο</td>
</tr>
<tr>
<td>Leonhard</td><td>Euler</td>
<td>Μαζεκαηηθά</td><td>e<sup>ηπ</sup> + 1 = 0</td>
</tr>
</table>
![Page 61: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/61.jpg)
Μάζακε
• Γηαρσξηζκό πεξηερνκέλνπ/κνξθνπνίεζεο
• Σε βαζηθή δνκή ηεο γιώζζαο HTML
• Σίηινπο
• Παξαγξάθνπο
• Δπηθεθαιίδεο
• Λίζηεο
• πλδέζκνπο
• Δηθόλεο
• Πίλαθεο
![Page 62: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/62.jpg)
πγραξεηήξηα!
• Μάζαηε HTML.
• Μπνξείηε λα θηηάμεηε ηελ πξώηε
ζαο ζειίδα!
![Page 63: HTML 1 - Web-Class · HTML α CSS • ζζε η # web •HTML: ε ! θε πεξηερόκελν • HyperText Markup Language •CSS: ε ! θε κνξθνπνίεζε • Cascading](https://reader030.fdocument.pub/reader030/viewer/2022040212/5e8126c718cd477b46377667/html5/thumbnails/63.jpg)
Σελ επόκελε θνξά...
• Δηζαγσγή ζηε γιώζζα CSS
• Υξώκαηα
• Γ ξ α κ κ α η ν ζ ε η ξ έ ο
• Πεξηζώξηα
Πιαίζηα