Μάθημα : Σχεδίαση και Ανάπτυξη Ιστοτόπων - Β ΕΠΑΛ
Κωδικός : 2040045155
2040045155 - ΖΩΗ ΓΚΑΡΑΝΑΤΣΗ
Περιγραφή Μαθήματος
Το υλικό χωρίζεται σε δύο μέρη. Στο Α΄ μέρος, που έχει τίτλο «Δημιουργία ιστοσελίδων με HTML,
CSS και JavaScript, μέσα από παραδείγματα εφαρμογών», ασχολούμαστε με την ανάπτυξη του
κώδικα και βασικές τεχνικές επεξεργασίας πολυμέσων για την υποστήριξη της δημιουργίας
ολοκληρωμένων ιστοσελίδων. Στο Β΄ μέρος, που έχει τίτλο «Διαχείριση Ιστοτόπου με το WordPress»,
ασχολούμαστε με τη διαχείριση ενός ιστοτόπου που έχει δημιουργηθεί, ή πρόκειται να δημιουργηθεί,
με το σύστημα διαχείρισης περιεχομένου WordPress.
Απαραίτητα εργαλεία για την ανάπτυξη ιστοσελίδας είναι να υπάρχει ένας editor (εντιτορ) και ένας browser (μπροουζερ).
Editor (Εντιτορ) ή αλλιώς συντάκτης κειμένου, είναι το πρόγραμμα για γραφή κειμένου, όπως το γνωστό μας Microsoft Word. Για τις ιστοσελίδες συνηθίζουμε να χρησιμοποιούμε πιο απλούς συντάκτες όπως το Σημειωματάριο των Windows, αλλά και πιο εξειδικευμένους, όπως το Notepad++ που είναι ελεύθερο λογισμικό.
Αφού συντάξουμε τον κώδικα στον editor, χρειαζόμαστε να δούμε το αποτέλεσμα στο ιντερνετ. Για να το εμφανίσουμε στο ιντερεντ, χρειαζόμαστε έναν web browser ή στα ελληνικά φυλλομετρητή. Αυτός είναι το πρόγραμμα που χρησιμοποιούμε για να δούμε σελίδες στο ιντερνετ. Π.χ. Google Chrome, Mozilla Firefox Internet Explorer , Opera κά.
<!DOCTYPE html>
<!-- Εφαρμογή 1: Ο ελάχιστος κώδικας HTML μιας ιστοσελίδας
Αρχείο p01.html
-->
<html>
<head>
<title>Τίτλος ιστοσελίδας</title>
<meta charset="utf-8">
</head>
<body>
Περιεχόμενο ιστοσελίδας
</body>
</html>
Το δεύτερο παράδειγμα εφαρμογής αφορά τον τρόπο που γράφουμε κείμενο και πως μπορούμε να το εμπλουτίσουμε με σύμβολα.
------------------
Στην τρίτη μας εφαρμογή θα δούμε πως μπορούμε να δώσουμε νόημα στο περιεχόμενο του
εγγράφου. Δηλαδή πως μπορούμε να επισημάνουμε τμήματα του εγγράφου, ώστε αυτά να
αποκτήσουν κάποια ειδική σημασία, γεγονός που μας επιτρέπει να οργανώσουμε λογικότερα το
περιεχόμενό μας, κάνοντάς το έτσι χρησιμότερο για ανθρώπους και μηχανές.
----------------------
<!DOCTYPE html>
<!-- Εφαρμογή 3: Επικεφαλίδες και σημασιολογία
Αρχείο p03.html
-->
<html lang="el-GR">
<head>
<title>Υπηρεσίες του ΠΣΔ</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1 title="επικεφαλίδα 1ου επιπέδου">
Μερικές από τις υπηρεσίες του
<abbr title="Πανελλήνιο Σχολικό Δίκτυο">ΠΣΔ</abbr></h1>
</header>
<article>
<h2 title="επικεφαλίδα 2ου επιπέδου">Εκπαιδευτικές Κοινότητες και
Ιστολόγια</h2>
<p title="πρώτη παράγραφος">Βασικός στόχος της υπηρεσίας είναι
<mark>η δημιουργία
κοινοτήτων μάθησης και πρακτικής με στόχο την
αλληλοενημέρωση, την αλληλοϋποστήριξη,
την ανατροφοδότηση και συνακόλουθα τη βελτίωση της
μαθησιακής διαδικασίας</mark>.<br>
Επιπλέον τα ιστολόγια μπορούν να χρησιμοποιηθούν στην
παιδαγωγική διαδικασία και
να ενισχύσουν τη διδασκαλία, λόγω της διαδραστικότητας και της
δυνατότητας για
ομαδική εργασία που προσφέρουν.</p>
</article>
<article>
<h2 title="επικεφαλίδα 2ου επιπέδου">Υπηρεσία βίντεο</h2>
<p title="δεύτερη παράγραφος">Αποσκοπεί στην <em>ψηφιοποίηση και τη
διανομή</em>
μαγνητοσκοπημένου οπτικοακουστικού υλικού (video) ενημερωτικού
και
εκπαιδευτικού χαρακτήρα μέσα από ένα εύχρηστο περιβάλλον, το
οποίο
επιτρέπει την εύκολη αναζήτηση υλικού.<br>
Η υπηρεσία είναι <u>δημόσια προσβάσιμη</u>, ενώ όλοι οι
εκπαιδευτικοί-μέλη
του ΠΣΔ μπορούν να αναρτούν τα δικά τους βίντεο.</p>
</article>
<article>
<h2 title="επικεφαλίδα 2ου επιπέδου">Ηλεκτρονική Τάξη</h2>
<p title="τρίτη παράγραφος">Η υπηρεσία 'η-τ@ξη' απευθύνεται σε
εκπαιδευτικούς και
μαθητές της Δευτεροβάθμιας Εκπαίδευσης και στοχεύει στην <i>
υποστήριξη της κλασικής
διδασκαλίας</i> και την ενίσχυση της διαδικασίας μάθησης
που πραγματοποιείται
καθημερινά μέσα στη σχολική τάξη.</p>
</article>
<footer>
<hr>
<p>© 2015 ΠΣΔ</p>
Συνεχίζουμε με την τέταρτη εφαρμογή, στην οποία παρουσιάζονται περισσότερες ετικέτες που
αφορούν τη βασική μορφοποίηση, αλλά και επιπλέον σημασιολογικές επισημάνσεις του
περιεχομένου μιας ιστοσελίδας
--------------------------------------------------------------------------------------
<!DOCTYPE html>
<!-- Εφαρμογή 4: Περισσότερες βασικές και σημασιολογικές μορφοποιήσεις
Αρχείο p04.html
-->
<html lang="el-GR">
<head>
<title>1ο παράδειγμα Pascal</title>
<meta charset="utf-8">
</head>
<body>
<h1>Προγραμματισμός Pascal (Γ<sub>Πληροφορικής</sub>): το πρώτο παράδειγμα</h1>
<p>Όπως αναφέρει το βιβλίο του μαθήματος <cite>Προγραμματισμός Υπολογιστών </cite> <q>Η γλώσσα PASCAL σχεδιάστηκε από τον Nicklaus Wirth</q> και <q>Πήρε το όνομά της προς τιμή του μαθηματικού και φιλοσόφου Blaise Pascal</q>.</p>
<h2>Περιγραφή</h2>
<p>Το πρώτο παράδειγμα προγραμματισμού σε Pascal είναι ένα απλό πρόγραμμα το οποίο απλά εμφανίζει στο τερματικό εντολών το μήνυμα"Γεια σου κόσμε!"</p>
<h2>Μεταδεδομένα</h2>
<p>Δυσκολία: Αρχάριοι - <del>Προχωρημένοι</del></p>
Προγραμματιστής: <ins>Θαλής Ειρηναίος</ins>
<p><datetime>Υλοποίηση: Δευτέρα, 20 Ιουλίου 2015, 22:40.</datetime></p>
<address>Τόπος:<br>Μετέωρα, <br>Δήμος Παύλου Μελά, <br>Θεσσαλονίκη.</address>
<h2>Ο κώδικας του προγράμματος</h2>
<pre>
Program hello;
begin
writeln('Γεια σου κόσμε!');
end.
</pre>
<h2>Παρατηρήσεις</h2>
<p>Σχετικά με τη δήλωση <code>Program</code> της γραμμής 1 το βιβλίο αναφέρει:
<blockquote cite="http://goo.gl/CJQeWb">8.3.1 Επικεφαλίδα (σελίδα 76)<br> Ένα πρόγραμμα Pascal αρχίζει με τη λέξη <strong>program</strong> πουακολουθείται από το <strong>όνομα</strong> του προγράμματος και μια<strong> λίστα με τα ονόματα αρχείων</strong> τα οποία μπορεί να είναι προαιρετικά μονάδες εισόδου/εξόδου ή τα αρχεία που θα χρησιμοποιήσει κατά την εκτέλεσή του.</blockquote>
</p>
<p>Σχετικά με τη δήλωση <code>begin ... end.</code> των γραμμών 2,4 το βιβλίο αναφέρει:<blockquote cite="http://goo.gl/CJQeWb">8.3.3 Κύριο Πρόγραμμα (σελίδα 78)<br>Η λέξη <strong>begin (αρχή)</strong> δηλώνει την αρχή των εντολών του προγράμματος που εκτελεί ο υπολογιστής, δηλαδή το <strong>κύριο </strong> πρόγραμμα, ενώ η λέξη <strong>end (τέλος)</strong> δηλώνει το τέλος του προγράμματος.</blockquote>
</p>
<p>Η δήλωση <code>writeln</code> της γραμμής 3 εμφανίζει το όρισμά της στο αρχείο εξόδου του προγράμματος, το οποίο στην περίπτωση αυτή είναι το τερματικό.</p>
<h2>Διαδικασία</h2>
<p>Χρησιμοποιώντας ένα συντάκτη κειμένου, όπως ο vi ή ο gedit, πληκτρολογούμε τον κώδικα του προγράμματος και τον αποθηκεύουμε με όνομα <code>p01.pas</code>.</p>
<p>Κατόπιν μεταγλωττίζουμε τον κώδικα δίνοντας στο τερματικό την εντολή <code>fpc p01.pas</code></p>
<p>Κατά τη μεταγλώττιση θα δούμε κάποια μηνύματα σαν τα ακόλουθα:<br>
<samp>Free Pascal Compiler version 2.6.0-9 [2013/04/14] for i386<br>
Copyright (c) 1993-2011 by Florian Klaempfl and others<br>
Target OS: Linux for i386<br>
Compiling hello.pas<br>
Linking hello<br>
</samp></p>
<p>Στη συνέχεια εκτελούμε τον <em>κώδικα μηχανής</em> που προέκυψε από τη<em> μεταγλώττιση του πηγαίου</em> και τη <em>διασύνδεση του αντικείμενου προγράμματος</em>, δίνοντας στο τερματικό την εντολή <code>./p01
</code></p>
<p>Τότε θα πρέπει να δούμε στο τερματικό μας το μήνυμα<br><samp>Γεια σου κόσμε!
</samp></p>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 5: Μορφοποίηση με CSS μέσα στο κείμενο
Αρχείο p05.html
-->
<html lang="el-GR">
<head>
<title>1η ιστοσελίδα HTML</title>
<meta charset="utf-8">
</head>
<body style="">
<h1 style="text-align:center; color:white; background-color:blue;">
Ανάπτυξη ιστοσελίδων (Β<sub>π</sub>): 1<sup>o</sup> παράδειγμα</h1>
<p>Ξεκινούμε τη σειρά παραδειγμάτων περιγράφοντας το σκελετό μιας
ιστοσελίδας HTML, δηλαδή τον ελάχιστο απαραίτητο κώδικα που πρέπει
να γράψουμε και ο οποίος υπάρχει σε κάθε έγγραφο HTML5.</p>
<h2 style="color:blue; background-color:yellow">Περιγραφή</h2>
<p>Το πρώτο παράδειγμα ανάπτυξης ιστοσελίδων με HTML είναι ο βασικός
κώδικας, ο οποίος είναι απαραίτητος για κάθε ιστοσελίδα γραμμένη σε
HTML.</p>
<h2 style="color:blue; background-color:yellow">Μεταδεδομένα</h2>
<p>Δυσκολία: Αρχάριοι - <del>Προχωρημένοι</del></p>
Προγραμματιστής: <ins>Μάριος Κωνσταντίνου</ins>
<p><datetime>Υλοποίηση: Σάββατο, 8 Αυγούστου 2015, 17:20.</datetime></p>
<address>Τόπος:<br>Αγία Τριάδα, <br>Δήμος Θερμαϊκού, <br>Θεσσαλονίκη.</address>
<h2 style="color:blue; background-color:yellow">Ο κώδικας της ιστοσελίδας</h2>
<pre style="font-family:courier; font-size:120%; background-color:lightgreen;
border:1px solid black; display: inline-block">
<!DOCTYPE html>
<html>
<head>
<title>Τίτλος</title>
<meta charset="UTF-8">
</head>
<body>
Περιεχόμενο
</body>
</html>
</pre>
<h2 style="color:blue; background-color:yellow">Διαδικασία</h2>
<p>Χρησιμοποιώντας ένα συντάκτη κειμένου, όπως το Σημειωματάριο ή το Notepad++,
πληκτρολογούμε τον κώδικα της ιστοσελίδας και τον αποθηκεύουμε με όνομα
<code>i01.html</code>.</p>
<p>Κατόπιν ανοίγουμε το αρχείο <code>i01.html</code> με διπλό κλικ από τη
διαχείριση αρχείων του λειτουργικού ή από το μενού Αρχείο, Άνοιγμα του
φυλλομετρητή.</p>
<p>Τότε θα πρέπει να δούμε στο παράθυρο του φυλλομετρητή τη λέξη <samp>
Περιεχόμενο</samp>, γραμμένη με μαύρα γράμματα σε λευκό φόντο και στον
τίτλο του παραθύρου ή στην καρτέλα του φυλλομετρητή τη λέξη <samp>
Τίτλος</samp></p>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 6: Μορφοποίηση στη ροή του κειμένου, αλλά και
με εσωτερικό φύλλο στυλ
Αρχείο p06.html
-->
<html lang="el-GR">
<head>
<title>Ελλάδα</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Μορφοποίηση εγγράφου με εσωτερικό
φύλλο στυλ">
<meta name="generator" content="Notepad++">
<meta name="keywords" content="Σχεδιασμός και Ανάπτυξη Ιστοτόπων, ΕΠΑΛ,
Σημειώσεις">
<style>
body {
font-size: 14px;
background-color:#CCB297;
}
h1 {
text-align:center;
color:#44479C;
}
h2 {
color:green;
background-color:7D81E8;
}
ul li {
font-size: 20px;
}
img {
height:80px;
vertical-align:middle;
}
</style>
</head>
<body>
<h1>Πληροφορίες για την Ελλάδα</h1>
<h2>Γεωγραφικά διαμερίσματα της Ελλάδας</h2>
<ul>
<li>Ήπειρος<img src="ipeiros.png" alt="η Ήπειρος στο χάρτη"></li>
<li>Θεσσαλία<img src="thessalia.png" alt="η Θεσσαλία στο χάρτη"></li>
<li>Θράκη<img src="thraki.png" alt="η Θράκη στο χάρτη"></li>
<li>Κρήτη<img src="kriti.png" alt="η Κρήτη στο χάρτη"></li>
<li>Μακεδονία<img src="makedonia.png" alt="η Μακεδονία στο χάρτη"></li>
<li>Νησιά Αιγαίου Πελάγους<img src="aigaio.png" alt="τα Νησιά Αιγαίου
Πελάγους στο χάρτη"></li>
<li>Νησιά Ιονίου Πελάγους<img src="ionio.png" alt="τα Νησιά Ιονίου
Πελάγους στο χάρτη"></li>
<li>Πελοπόννησος<img src="peloponnisos.png" alt="η Πελοπόννησος στο
χάρτη"></li>
<li>Στερεά Ελλάδα<img src="stereaellada.png" alt="η Στερεά Ελλάδα στο
χάρτη"></li>
</ul>
<h2>Διοικητικές περιφέρειες της Ελλάδας με κατάταξη ως προς τον πληθυσμό
τους</h2>
<ol>
<li>Αττική</li
<li>Κεντρική Μακεδονία</li>
<li>Θεσσαλία</li>
<li>Δυτική Ελλάδα</li>
<li>Κρήτη</li>
<li>Ανατολική Μακεδονία και Θράκη</li>
<li>Πελοπόννησος</li>
<li>Στερεά Ελλάδα</li>
<li>Ήπειρος</li>
<li>Νότιο Αιγαίο</li>
<li>Δυτική Μακεδονία</li>
<li>Ιόνιοι Νήσοι</li>
<li>Βόρειο Αιγαίο</li>
</ol>
<h2>Ορισμοί</h2>
<dl>
<dt>Γεωγραφικά διαμερίσματα</dt>
<dd>Γεωγραφικά διαμερίσματα είναι οι περιοχές εκείνες της Ελλάδας
που παρουσιάζουν κοινά γεωμορφολογικά και ιστορικά
χαρακτηριστικά και ανήκουν γεωγραφικά στον ίδιο χώρο.</dd>
<dt>Διοικητικές περιφέρειες</dt>
<dd>
Περιφέρειες ονομάζονται οι 13 δευτεροβάθμιοι οργανισμοί τοπικής
αυτοδιοίκησης του ελληνικού κράτους. Κάθε περιφέρεια έχει
συσταθεί σε μια ευρύτερη περιοχή της χώρας (εξαιρουμένου του
Αγίου Όρους).
</dd>
</dl>
</bod
<!DOCTYPE html>
<!-- Εφαρμογή 7: Φωλιασμένες λίστες και μορφοποίηση με
εξωτερικό φύλλο στυλ
Αρχείο p07.html
-->
<html lang="el-GR">
<head>
<title>Περιφερειακά</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Μορφοποίηση εγγράφου με φωλιασμένες
λίστες με εξωτερικό φύλλο στυλ">
<link rel="stylesheet" type="text/css" href="p07.css">
</head>
<body>
<h1>Μονάδες του υπολογιστή</h1>
<ul>
<li>Μονάδες εισόδου</li>
<ol>
<li>Πληκτρολόγιο</li>
<li>Ποντίκι</li>
<li>Σαρωτής</li>
</ol>
<li>Μονάδες εξόδου</li>
<ol>
<li>Οθόνη</li>
<li>Εκτυπωτής</li>
<li>Ηχεία</li>
</ol>
<li>Μονάδες βοηθητικής μνήμης</li>
<ol>
<li><dl><dt>Σκληρός δίσκος</dt> <dd>Μονάδα μη αφαιρούμενου
μαγνητικού δίσκου μεγάλης χωρητικότητας</dd></dl></li>
<li><dl><dt>Μονάδα οπτικών δίσκων</dt> <dd>Μονάδα αφαιρούμενων
οπτικών ή/και μαγνητο-οπτικών δίσκων μεσαίας
χωρητικότητας</dd></dl></li>
<li><dl><dt>Μονάδα USB Flash</dt> <dd>Αφαιρούμενη μονάδα μνήμης
τεχνολογίας Flash-ROM μικρής χωρητικότητας</dd></dl></li>
</ol>
</ul>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 8: Πίνακας με συγχώνευση κυψελών, κλάση και
εσωτερική μορφοποίηση CSS
Αρχείο p08.html
-->
<html lang="el-GR">
<head>
<title>Διεθνείς διοργανώσεις μπάσκετ</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Πίνακας με συγχώνευση κυψελών, κλάση
και εσωτερική μορφοποίηση CSS">
<style>
table {
border-collapse: collapse;
border: 10px ridge green;
}
td, th {
border: 1px dashed green;
text-align: center;
vertical-align: middle;
padding: 10px;
}
th {
color: blue;
background-color: lightgreen;
}
.eb {
background-color:lightblue;
}
img {
height: 30px;
}
</style>
</head>
<body>
<table>
<tr><th>Διοργάνωση</th>
<th>Ξεκίνησε</th>
<th>Διοργανώτρια</th>
<th>Χρονιά</th>
<th colspan="2">Νικήτρια</th></tr>
<tr><td rowspan=3>Παγκόσμιο Κύπελλο Μπάσκετ</td>
<td rowspan=3>1950</td>
<td rowspan=3>FIBA</td>
<td>2006</td>
<td>Ισπανία</td>
<td><img src="esp.gif" alt="σημαία Ισπανίας"></td></tr>
<tr><td>2010</td>
<td>ΗΠΑ</td>
<td><img src="usa.gif" alt="σημαία ΗΠΑ"></td></tr>
<tr><td>2014</td>
<td>ΗΠΑ</td>
<td><img src="usa.gif" alt="σημαία ΗΠΑ"></td></tr>
<tr class="eb" ><td rowspan="6">Ευρωμπάσκετ</td>
<td rowspan="6">1935</td>
<td rowspan="6">FIBA Europe</td>
<td>2003</td>
<td>Λιθουανία</td>
<td><img src="lt.gif" alt="σημαία Λιθουανίας"></td></tr>
<tr class="eb" ><td>2005</td>
<td>Ελλάδα</td>
<td><img src="gre.gif" alt="σημαία Ελλάδας"></td></tr>
<tr class="eb" ><td>2007</td>
<td>Ρωσία</td>
<td><img src="rus.gif" alt="σημαία Ρωσίας"></td></tr>
<tr class="eb" ><td>2009</td>
<td>Ισπανία</td>
<td><img src="esp.gif" alt="σημαία Ισπανίας"></td></tr>
<tr class="eb" ><td>2011</td>
<td>Ισπανία</td>
<td><img src="esp.gif" alt="σημαία Ισπανίας"></td></tr>
<tr class="eb" ><td>2013</td>
<td>Γαλλία</td>
<td><img src="fra.gif" alt="σημαία Γαλλίας"></td></tr>
</table>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 9: Λίστα συνδέσμων με μορφοποίηση πλαισίων
Αρχείο p09.html
-->
<html lang="el-GR">
<head>
<title>IDE</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Λίστα συνδέσμων με μορφοποίηση
πλαισίων">
<style>
li {
display: inline-block;
height: 1.2em;
margin: 2px;
padding: 10px;
border: 4px double coral;
background-color: lightgreen;
}
a:active {
color: green;
}
ol li:hover {
outline-style: dotted;
outline-color: orange;
}
a:hover {
background-color: yellow;
}
a:visited {
color: gray;
}
</style>
</head>
<body>
<h3>Ολοκληρωμένα Περιβάλλοντα Ανάπτυξης Ιστοτόπων</h3>
<ul><li>Ανοιχτού Κώδικα
<ol>
<li><a href="https://netbeans.org/" target="_blank">
Oracle NetBeans</a></li>
<li><a href="https://eclipse.org/" target="_blank">
Eclipse</a></li>
</ol>
</li>
<li>Εμπορικά
<ol>
<li><a href="https://www.visualstudio.com/" target="_blank">
Microsoft Visual Studio</a></li>
<li><a
href="http://www.adobe.com/gr_en/products/dreamweaver.html"
target="_blank">Adobe Dreamweaver</a></li>
</ol>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 10: Εμφάνιση και απόκρυψη στοιχείων της
ιστοσελίδας μέσω μορφοποίησης CSS
Αρχείο p10.html
-->
<html lang="el-GR">
<head>
<title>Γλώσσες σεναρίων</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Εμφάνιση συγκεκριμένων υποδιαιρέσεων
του περιεχομένου">
<style>
div {
display: none;
}
ol li {
margin: 8px;
}
.epilogi:hover div{
display: block;
margin: 4px;
padding: 4px;
border: 3px dotted blue;
background-color: yellow;
}
.epilogi:hover div:first-line{
font-size: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: 900;
}
.epilogi:hover div:first-letter{
font-size: 30px;
margin: 4px;
color: green;
}
.epilogi:hover div span{
background-color: cyan;
}
</style>
</head>
<body>
<h1>Μερικές από τις γλώσσες προγραμματισμού σεναρίων για τον παγκόσμιο
ιστό</h1>
<ul>
<li>Πελάτη
<ol>
<li class="epilogi">JavaScript
<div>
Η JavaScript, γνωστή και ως ECMAScript, είναι μία
δυναμική γλώσσα προγραμματισμού. Χρησιμοποιείται
συχνότερα σε φυλλομετρητές επιτρέποντας την εκτέλεση
σεναρίων για την αλληλεπίδραση με το χρήστη, τον
έλεγχο του φυλλομετρητή, την ασύγχρονη επικοινωνία
και τη μεταβολή του εγγράφου που προβάλλεται εκείνη
τη στιγμή. Χρησιμοποιείται επίσης για την ανάπτυξη
σεναρίων που εκτελούνται στην πλευρά του
εξυπηρετητή, για τη δημιουργία παιχνιδιών, αλλά και
για τη δημιουργία desktop και mobile εφαρμογών.
<span>Πηγή: <a
href="https://en.wikipedia.org/wiki/JavaScript">
Wikipedia</a>.</span>
</div>
</li>
<li class="epilogi">Perl
<div>
Οι γλώσσες Perl είναι υψηλού επιπέδου, γενικού
σκοπού, διερμηνευόμενες, δυναμικές γλώσσες
προγραμματισμού. Η οικογένεια των γλωσσών Perl
περιλαμβάνει της γλώσσες Perl 5 και Perl 6. Ο όρος
Perl δεν είναι ακρωνύμιο, αλλά συχνά του αποδίδεται
το "Practical Extraction and Reporting Language". Η
Perl αναπτύχθηκε από τον Larry Wall ως μία γενικού
σκοπού γλώσσα σεναρίων για την παραγωγή αναφορών στο
λειτουργικό σύστημα Unix. Η Perl 6, η οποία αποτελεί
ανασχεδιασμό της Perl 5, εξελίχθηκε σε μία χωριστή
γλώσσα. Έτσι οι δύο γλώσσες συνεχίζουν να
εξελίσσονται χωριστά. Οι γλώσσες Perl δανείζονται
λειτουργίες από άλλες γλώσσες, όπως η C, η γλώσσα
σεναρίων κελύφους (sh), η AWK και η sed. Η Perl 5
έγινε γνωστή στα τέλη της δεκαετίας του 1990, ως
γλώσσα σεναρίων <abbr
title="Common Gateway Interface">CGI</abbr>,
λόγω των εξαιρετικών δυνατοτήτων της στην
επεξεργασία κανονικών εκφράσεων και
συμβολοσειρών.
<span>Πηγή: <a
href="https://en.wikipedia.org/wiki/Perl">
Wikipedia</a>.</span>
</div>
</li>
<li class="epilogi">Rexx
<div>
Η Rexx (REstructured eXtended eXecutor) είναι μια
διερμηνευόμενη γλώσσα προγραμματισμού η οποία
αναπτύχθηκε στην <abbr title="International Business
Machines Corp.">IBM</abbr>
από τον Mike Cowlishaw. Είναι μία δομημένη, υψηλού
επιπέδου γλώσσα προγραμματισμού που σχεδιάστηκε ώστε
να βοηθά την ανάγνωση και μάθηση του κώδικά της. Η
Rexx χρησιμοποιείται ευρέως ως γλώσσα σεναρίων και
μακροεντολών, ενώ συχνά χρησιμοποιείται και για
επεξεργασία δεδομένων και δημιουργία αναφορών. Αυτές
οι ομοιότητες με την Perl σημαίνουν ότι η Rexx
λειτουργεί καλά και σε εφαρμογές <abbr
title="Common Gateway Interface">CGI</abbr>.
<span>Πηγή: <a
href="https://en.wikipedia.org/wiki/Rexx">
Wikipedia</a>.</span>
</div>
</li>
</ol>
</li>
<li>Εξυπηρετητή
<ol>
<li class="epilogi">PHP
<div class="content" id="PHP">
Η PHP είναι μία γλώσσα σεναρίων στην πλευρά του
εξυπηρετητή. Σχεδιάστηκε για την ανάπτυξη ιστοσελίδων,
αλλά χρησιμοποιείται και ως γλώσσα προγραμματισμού γενικού
σκοπού. Εμπνευστής της είναι ο Rasmus Lerdorf, ενώ πλέον
αναπτύσσεται από το <em>The PHP Group</em>. Αρχικά το
ακρωνύμιο PHP σήμαινε <em>Personal Home Page</em>, ενώ
πλέον σημαίνει <em>PHP: Hypertext Preprocessor</em>, το
οποίο αποτελεί και ένα αναδρομικό ακρωνύμιο. Ο κώδικας PHP
μπορεί να αναμιχθεί με κώδικα HTML ή άλλα πλαίσια και
μηχανές ανάπτυξης ιστοσελίδων. Τον κώδικα PHP επεξεργάζεται
ένας διερμηνέας PHP, ο οποίος συνήθως υλοποιείται με τη
μορφή ενός αρθρώματος (module) του εξυπηρετητή ή ως ένα
πρόγραμμα CGI. Μετά την εκτέλεση του κώδικα PHP, ο
εξυπηρετητής ιστοσελίδων στέλνει το αποτέλεσμα στον πελάτη,
συνήθως με τη μορφή μίας ιστοσελίδας ή τμήματός της. Για
παράδειγμα, ο κώδικας PHP μπορεί να παράγει τον κώδικα HTML
μιας ιστοσελίδας, μια εικόνα ή άλλο περιεχόμενο.
<span>Πηγή: <a href="https://en.wikipedia.org/wiki/PHP">
Wikipedia</a>.</span>
</div>
</li>
<li class="epilogi">JSP
<div>
Η τεχνολογία <abbr title="JavaServer Pages">JSP
</abbr> βοηθά τους προγραμματιστές να δημιουργούν
δυναμικές ιστοσελίδες βασισμένες σε έγγραφα τύπου
HTML, XML, κ.α. Κυκλοφόρησε το 1999 από τη Sun
Microsystems. Είναι παρόμοια με την PHP, με τη
διαφορά ότι βασίζεται στη γλώσσα προγραμματισμού
Java.
<span>Πηγή: <a
href="https://en.wikipedia.org/wiki/JavaServer_Pages">
Wikipedia</a>.</span>
</div>
</li>
</ol>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 11: Προχωρημένες δυνατότητες εμφάνισης εικόνων
στο προσκήνιο και το παρασκήνιο
Αρχείο p11.html
-->
<html lang="el-GR">
<head>
<title>Για τη θάλασσα</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Εμφάνιση εικόνων στο προσκήνιο
και το παρασκήνιο">
<style>
body {
background-attachment: fixed;
background-color: #aaccdd;
background-image: url("thalassa.jpg");
background-position: center;
background-repeat: no-repeat;
text-align: center;
text-shadow: 1px 1px 4px white;
}
p.δημιουργός {
font-family: Arial, sans-serif;
font-size: 1.2em;
font-weight: bold;
font-style: italic;
line-height: 10%;
}
h1 {
color: powderblue;
font-size: 2.4em;
font-family: Georgia, serif;
text-shadow: 1px 1px 10px navy;
}
.τίτλος {
color: blue;
font-size: 2em;
font-family: Georgia, serif;
text-shadow: 2px 2px lightgreen;
}
.ποίημα, .κείμενο {
display: block;
color: navy;
font-size: 1.3em;
word-spacing: 5px;
font-family: Georgia, serif;
font-weight: bolder;
}
.ποίημα {
white-space: pre;
}
.κείμενο {
white-space: normal;
}
.αναφορά, p em {
text-align: right;
font-weight: bolder;
}
img {
width: 400px;
height: 200px;
}
#eik1 {
transform: rotate(-8deg);
position: fixed;
left: 10px;
top: 20px;
z-index: -4;
}
#eik2 {
transform: rotate(10deg);
position: fixed;
left: 10px;
bottom: 20px;
z-index: -3;
}
#eik3 {
transform: rotate(5deg);
position: fixed;
right: 10px;
top: 20px;
z-index: -2;
}
#eik4 {
transform: rotate(-4deg);
position: fixed;
right: 10px;
bottom: 20px;
z-index: -1;
}
</style>
</head>
<body>
<a name="αρχή"><h1>Ένα ποίημα και ένα κείμενο για τη θάλασσα</h1></a>
<img id="eik1" src="paralia1.jpg" alt="μια ωραία παραλία">
<img id="eik2" src="paralia2.jpg" alt="άλλη μια ωραία παραλία">
<img id="eik3" src="paralia3.jpg" alt="ακόμη μια ωραία παραλία">
<img id="eik4" src="paralia4.jpg" alt="ίσως η πιο ωραία παραλία">
<p><em>Από τα Κείμενα Νεοελληνικής Λογοτεχνίας -
Βιβλίο Μαθητή της Β' Γυμνασίου...</em></p>
<p class="τίτλος">Ξυπνάμε και η θάλασσα ξυπνά μαζί μας (1940)</p>
<p class="δημιουργός">Ποιητής: Γιώργος Σαραντάρης</p>
<p class="ποίημα">
Ξυπνάμε και η θάλασσα ξυπνά μαζί μας
Με όραση καινούρια προχωρούμε
Η μέρα έχει <abbr title="γεωμετρικά σχήματα, εδώ μεταφορικά">μαιάνδρους</abbr>
Όπως η θάλασσα κύματα
Στην καρδιά μας αδειάσαμε (προσωρινά)
Την πόλη
Εμείναμε με την εικόνα τ' ουρανού
O ήλιος εμέτρησε τη γη μας
Η μέρα τούτη όπου ξυπνήσαμε
Με θάλασσα και κύματα
Με όραση και μνήμη καθαρή
Τόσο μεγάλωσε
Που ο ήλιος δεν μπόρεσε να τη μετρήσει
Που ο ήλιος δεν μπόρεσε να τη χωρέσει
</p>
<p class="αναφορά">Γ. Σαραντάρης, <cite>Ποιήματα</cite>, τόμ. 5, Gutenberg</p>
<p><em>Από τα Κείμενα Νεοελληνικής Λογοτεχνίας -
Βιβλίο Μαθητή της Β' Γυμνασίου...</em></p>
<p class="τίτλος">Απόσπασμα από <cite>Τα ψάθινα καπέλα</cite> (1946)</p>
<p class="δημιουργός">Συγγραφέας: Μαργαρίτα Λυμπεράκη</p>
<p class="κείμενο">
Απ' το παλιό μας σπίτι θυμάμαι λίγα πράγματα. Ήταν κάπου κοντά
στο Λυκαβηττό κι είχε ταράτσα που 'βλεπε στο Φάληρο. Ζούσε μαζί
μας ο πατέρας κι είχαμε ένα <abbr title="κυνηγετικό σκυλί">λαγωνικό
</abbr> που το λέγανε Ντικ. Θυμάμαι και δυο βάζα κινέζικα στις δυο
γωνιές της σάλας. Τίποτ' άλλο. Η Μαρία όμως θυμάται πολλά. Μας τα
λέει καμιά φορά κι εμείς δακρύζουμε κρυφά η μια από την άλλη.
</p>
<p class="κείμενο">
Με τον πατέρα πηγαίναμε στη θάλασσα σχεδόν κάθε Κυριακή. Είχε ένα
παμπάλαιο αυτοκίνητο που 'μοιαζε με οβίδα και που το λέγαμε
«Καραϊσκάκη». Έτσι το 'χε βαφτίσει ένα <abbr title="αλητόπαιδο">
μορτόπαιδο</abbr> καθώς περνούσαμε από έναν κεντρικό δρόμο της
Αθήνας, και μεις χαρήκαμε, γιατί το αυτοκίνητο του πατέρα δεν
ήταν κοινό αυτοκίνητο και του άξιζε να έχει ένα όνομα. Το
χρώμα του ήταν καφέ ή γκρίζο ή ίσως και χακί, από μέσα ήταν
στρωμένο με βυσσινί πετσί αληθινό, μια πολυτέλεια που ερχόταν
σε αντίθεση με το σύνολο· ήταν ψηλό, εντελώς ανοιχτό και δίχως
κουκούλα, με τη μηχανή του κομμένη μπροστά κατακόρυφα σα φάτσα
<abbr title="μούργος, αδέσποτος σκύλος">μούργικου</abbr>
σκύλου· πίσω κατέληγε σε μύτη που θύμιζε ουρά τσαλαπετεινού·
κι εκεί στη μύτη υπήρχε ένα ξύλινο ντουλαπάκι όπου πετούσαμε
<abbr title="μαγιό">τα κοστούμια του μπάνιου</abbr>, τα ψαρικά,
κι ό,τι άλλο, ανάκατα. Κοντολογίς ήταν ένα αυτοκίνητο με δικό
του χαρακτήρα και εμφάνιση προκλητική.
</p>
<p class="αναφορά">Μ. Λυμπεράκη, <cite>Τα ψάθινα καπέλα</cite>,
Εκδόσεις Καστανιώτη</p>
<p></p>
<a href="#αρχή">Επιστροφή στην αρχή του εγγράφου</a>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 12: Ιστοσελίδα με φόρμες για τη μεταφορά
δεδομένων σε εφαρμογή στον εξυπηρετητή
Αρχείο p12.html
-->
<html lang="el-GR">
<head>
<title>Poli di Castro Pizza</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Φόρμες παραγγελίας">
<link rel="icon" href="pizza.png">
<style>
body {
background-attachment: fixed;
background-color: BurlyWood;
background-image: url("pizza.png");
background-repeat: repeat;
}
div {
opacity: 0.8;
color: navy;
font-size: 1.1em;
font-family: Georgia, serif;
font-weight: bolder;
vertical-align:top;
width: 80%;
margin-left: auto;
margin-right: auto;
}
#forma1 {
background-color: plum;
}
#forma2 {
background-color: gainsboro;
}
.sub {
position: relative;
width:40%;
left: 30%;
}
h1 {
color: white;
text-align: center;
font-size: 2em;
font-family: Georgia, serif;
text-shadow: 1px 1px 10px navy;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>Μόνο μερικά κλικ σας χωρίζουν από μια λαχταριστή pizza!<br>
Επιλέξτε...</h1>
<div class="forma">
<!-- στο action συμπληρώνουμε το URL της διαδρομής του αρχείου
p12-server-script.php στον τοπικό εξυπηρετητή-->
<form id="forma1" name="pizzaweb1" action="./p12-server-script.php"
method="post">
<h2>Έτοιμες συνθέσεις, για γρήγορη επιλογή</h2>
<p><input type="radio" name="synthesi" value="elliniki">Φέτα,
ροδέλες ντομάτας, κρεμμύδια, ελιές πάνω σε σάλτσα ντομάτας,
πασπαλισμένα με ρίγανη και ελαιόλαδο.</p>
<p><input type="radio" name="synthesi" value="kokkini">Μπέικον,
ζαμπόν και ροδέλες πιπεριάς πάνω σε σάλτσα ντομάτας, καλά
καλυμμένα με μπόλικη γραβιέρα.</p>
<p><input type="radio" name="synthesi" value="prasini">Κομματάκια
μπρόκολο και ροδέλες κρεμμύδι πάνω σε σάλτσα αβοκάντο, κάτω
από μια πλούσια στρώση γκούντα.</p>
<p>Τεμάχια: <input type="text" name="temaxia" value="1"
size="3"></p>
<p>Όνομα:<input type="text" name="onoma" size="20"></p>
<p>Διεύθυνση:<input type="text" name="diefthinsi" size="30"></p>
<p>Τηλέφωνο:<input type="text" name="tilefono" size="10"></p>
<p><input class="sub" type="submit" name="submit-synthesi"
value="Παραγγελία!"></p>
</form>
</div>
<div class="forma">
<!-- στο action συμπληρώνουμε το URL της διαδρομής του αρχείου
p12-server-script.php στον τοπικό εξυπηρετητή-->
<form id="forma2" name="pizzaweb2" action="./p12-server-script.php"
method="post">
<h2>Φτιάξτε τη δική σας σύνθεση</h2>
<h3>Επιλογή υλικών</h3>
<p><input type="checkbox" name="yliko[0]" value="μανιτάρια">
μανιτάρια</p>
<p><input type="checkbox" name="yliko[1]" value="ζαμπόν">
ζαμπόν</p>
<p><input type="checkbox" name="yliko[2]" value="μπέικον">
μπέικον</p>
<p><input type="checkbox" name="yliko[3]" value="πιπεριά">
πιπεριά</p>
<p><input type="checkbox" name="yliko[4]" value="ελιές">
ελιές</p>
<p><input type="checkbox" name="yliko[5]" value="μπρόκολο">
μπρόκολο</p>
<p><input type="checkbox" name="yliko[6]" value="κρεμμύδι">
κρεμύδι</p>
<p><input type="checkbox" name="yliko[7]"
value="σάλτσα ντομάτας"> σάλτσα ντομάτας</p>
<p><input type="checkbox" name="yliko[8]" value="φέτα"> φέτα</p>
<h3>Επιλογή ζύμης</h3>
<p><input type="radio" name="zymi" value="αφράτη"> αφράτη</p>
<p><input type="radio" name="zymi" value="τραγανή"> τραγανή</p>
<p><input type="radio" name="zymi" value="αφράτη με σκόρδο">
αφράτη με σκόρδο</p>
<p><input type="radio" name="zymi" value="τραγανή με κασέρι
στην περίμετρο"> τραγανή με τυρί στη ζύμη</p>
<p>Τεμάχια:<input type="text" name="temaxia" value="1"
size="3"></p>
<p>Όνομα:<input type="text" name="onoma" size="20"></p>
<p>Διεύθυνση:<input type="text" name="diefthinsi" size="30"></p>
<p>Τηλέφωνο:<input type="text" name="tilefono" size="10"></p>
<p><input class="sub" type="submit" name="submit-epilogi"
value="Παραγγελία!"></p>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 13: Οπτικοακουστικό... υπερθέαμα
Αρχείο p13.html-->
<html lang="el-GR">
<head>
<title>Πολυμεσικό περιεχόμενο</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Εισαγωγή βίντεο, ήχου και πολυμεσικών
εφαρμογών στο περιεχόμενο της ιστοσελίδας">
<style>
body {
background-attachment: fixed;
background-color: #aaccdd;
background-image: url("sand.jpg");
background-position: center;
background-repeat: no-repeat;
text-align: center;
text-shadow: 1px 1px 4px white;
}
p {
display: inline-block;
}
h1 {
color: powderblue;
font-size: 2.4em;
font-family: Georgia, serif;
text-shadow: 1px 1px 10px navy;
}
</style>
</head>
<body>
<h1>Ήχος</h1>
<p><audio controls >
<source src="drum-n-base1.mp3" type="audio/mpeg">
Ο φυλλομετρητής σας δεν υποστηρίζει την αναπαραγωγή ήχου με
HTML5.
</audio></p>
<p><embed src="Unit_3_Lesson_1.mp3"></p>
<!-- <embed src="Unit_3_Lesson_1.mp3" hidden="true"> -->
<h1>Βίντεο από αρχείο</h1>
<p><video controls>
<source src="objectsanimation1.mp4" type="video/mp4">
Ο φυλλομετρητής σας δεν υποστηρίζει την αναπαραγωγή βίντεο με
HTML5.
</video></p>
<p><video controls>
<source src="publish_blog.mp4" type="video/mp4">
Ο φυλλομετρητής σας δεν υποστηρίζει την αναπαραγωγή βίντεο με
HTML5.
</video></p>
<p><embed src="syvaka.mp4" width="400" height="400"></p>
<h1>Βίντεο από ρεύμα (stream)</h1>
<img class="MyIframe" src='http://goo.gl/7CGRQs' width='660' height='380'
scrolling='no' frameborder='0' allowfullscreen=''
mozallowfullscreen='' webkitallowfullscreen=''></img class="MyIframe" >
<h1>Εφαρμογή Adobe Flash</h1>
<p><embed src="musicInstrument.swf" width="600" height="400"></p>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 14: Χάρτης εικόνας
Αρχείο p14.html
-->
<html lang="el-GR">
<head>
<title>Περιφέρειες της Ελλάδας</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Χάρτης εικόνας">
<style>
body {
background-attachment: fixed;
text-align: center;
text-shadow: 1px 1px 4px white;
background: linear-gradient(blue, lightgray);
}
p {
display: inline-block;
}
h1 {
color: powderblue;
font-size: 2.4em;
font-family: Georgia, serif;
text-shadow: 1px 1px 10px navy;
}
</style>
</head>
<body>
<h1>Γεωγραφικά διαμερίσματα & διοικητικές περιφέρειες της Ελλάδας</h1>
<img src="ellada.png" width="1000" height="851" usemap="#ellada" alt="Ελλάδα"/>
<map name="ellada">
<area shape="poly" coords="409,724,383,757,398,798,435,802,441,845,
461,843,475,829,662,830,679,774,604,751,483,754,457,731"
href="http://www.crete.gov.gr/" target="_blank" title="Κρήτη"
alt="Κρήτη">
<area shape="poly" coords="205,313,253,410,353,442,399,432,405,411,
439,420,462,463,481,468,498,451,513,359,478,334,426,364,382,
334,372,331,344,343,301,332,279,309,249,336,221,308"
href="http://www.pste.gov.gr/" target="_blank"
title="Στερεά Ελλάδα" alt="Στερεά Ελλάδα">
<area shape="poly" coords="256,421,339,443,351,446,360,465,362,499,
357,512,377,525,362,539,348,538,367,637,359,647,333,642,283,
650,211,610,202,548,244,524" href="http://ppel.gov.gr/"
target="_blank" title="Πελοπόννησος" alt="Πελοπόννησος">
<area shape="poly" coords="201,310,256,422,242,523,218,539,165,477,
171,424,145,365,132,350,137,341,201,310"
href="http://www.pde.gov.gr/" target="_blank"
title="Δυτική Ελλάδα" alt="Δυτική Ελλάδα">
<area shape="poly" coords="71,234,47,229,39,227,36,216,11,223,19,
233,34,244,50,270,69,286,82,315,101,344,101,406,87,429,104,
441,115,475,135,497,151,550,167,539,158,481,171,422,163,393,
148,369,136,362,130,340" href="http://pin.gov.gr/"
target="_blank" title="Νησιά Ιονίου" alt="Νησιά Ιονίου">
<area shape="poly" coords="353,447,363,465,363,500,358,510,377,521,
382,529,362,542,349,540,371,640,357,653,331,645,331,674,372,
724,380,715,358,664,381,641,366,554,406,535,448,504,444,447,
445,426,408,410,408,410,400,433,400,433"
href="http://patt.gov.gr/" target="_blank" title="Αττική"
alt="Αττική">
<area shape="poly" coords="996,653,945,663,892,665,861,660,851,630,
829,621,809,603,771,611,770,593,762,577,746,562,727,511,704,
511,674,525,636,540,611,529,589,515,547,484,520,449,502,453,
453,501,449,615,553,672,728,682,709,775,767,758,813,708,851,
678,993,668" href="http://www.notioaigaio.gr/" target="_blank"
title="Νότιο Αιγαίο" alt="Νότιο Αιγαίο">
<area shape="poly" coords="575,206,572,249,613,296,657,284,688,327,
660,384,684,469,733,472,736,490,618,537,567,390,516,261,530,
210" href="http://www.pvaigaiou.gov.gr/" target="_blank"
title="Βόρειο Αιγαίο" alt="Βόρειο Αιγαίο">
<area shape="poly" coords="448,191,445,169,472,188,481,206,467,212"
href="https://el.wikipedia.org/wiki/Άγιο_Όρος" target="_blank"
title="Άγιο Όρος" alt="Άγιο Όρος">
<area shape="poly" coords="385,49,468,30,487,28,509,53,520,51,555,
66,608,57,623,53,631,43,630,27,621,18,626,6,649,6,674,27,678,
53,660,62,650,77,655,97,625,133,577,184,479,154,479,134,485,
107,448,136,428,127" href="http://www.pamth.gov.gr/"
target="_blank" title="Ανατολική Μακεδονία και Θράκη"
alt="Ανατολική Μακεδονία και Θράκη">
<area shape="poly" coords="192,227,175,251,199,309,221,308,254,332,
279,306,303,331,338,340,371,328,417,340,462,316,452,290,382,
304,324,224,278,201,247,237" href="http://www.pthes.gov.gr/"
target="_blank" title="Θεσσαλία" alt="Θεσσαλία">
<area shape="poly" coords="164,115,172,144,149,162,187,226,247,236,
279,202,233,105" href="http://www.pdm.gov.gr/" target="_blank"
title="Δυτική Μακεδονία" alt="Δυτική Μακεδονία">
<area shape="poly" coords="315,222,278,197,239,106,260,82,323,61,
384,53,423,122,441,166,447,225,396,236,363,197,336,173,319,
159" href="http://www.pkm.gov.gr/" target="_blank"
title="Κεντρική Μακεδονία" alt="Κεντρική Μακεδονία">
<area shape="poly" coords="111,210,87,259,100,307,135,342,181,316,
201,309,177,253,188,234,169,203,151,163,129,200,111,210"
href="http://www.php.gov.gr/" target="_blank" title="Ήπειρος"
alt="Ήπειρος">
</map>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 15: Διανυσματικά γραφικά
Αρχείο p15.html
Σημείωση: Όταν γράφτηκε αυτό το παράδειγμα η φόρτωση εξωτερικού
αρχείου SVG δεν λειτούργησε σωστά σε κάθε φυλλομετρητή.
Επίσης ορισμένοι φυλλομετρητές χρειάζονται την ενσωμάτωση του
κώδικα σεναρίου κάποιας βιβλιοθήκης, όπως η MathJax για να
αποδώσουν σωστά τους μαθηματικούς τύπους της MathML.
-->
<html lang="el-GR">
<head>
<title>Επίλυση τριγώνου</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Διανυσματικά γραφικά">
<script>
//πηγή: http://goo.gl/taWddl
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
var is_opera = navigator.userAgent.toLowerCase().indexOf("op") > -1;
if ((is_chrome) && (is_safari)) {
is_safari = false;
}
if ((is_chrome) && (is_opera)) {
is_chrome = false;
}
if (!is_firefox) {
//πηγή: http://goo.gl/EkDaKb
var imported = document.createElement('script');
imported.src = 'https://cdn.mathjax.org/mathjax/latest'+
'/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
document.head.appendChild(imported);
}
</script>
<style>
body {
background-color: lightgreen;
text-shadow: 2px 2px 8px white;
}
h1 {
color: blue;
font-size: 2em;
font-family: Georgia, serif;
text-shadow: 1px 1px 10px yellow;
}
div.Σχήμα {
float:right; clear:right;
margin:10px;
width:20%;
text-align:center;
}
div.Θεώρημα {
display:block;
border: 2px solid black;
background-color:powderblue;
padding:10px;
text-align:center;
width:50%;
}
math {
display:block;
text-align:center;
line-height: 1.4em;
font-size:1.1em;
text-shadow: 3px 3px 10px yellow;
}
</style>
</head>
<body>
<div class="Σχήμα">
<svg id="Σχήμα1" height="220" width="220">
<circle cx="110" cy="110" r="100" stroke="red" stroke-width="2"
fill="none" />
<circle cx="110" cy="110" r="2" stroke="black" stroke-width="2"
fill="black" />
<g stroke="black" stroke-width="2">
<line id="ΒΔ" x1="20" y1="154" x2="200" y2="67" />
<line id="ΓΔ" x1="200" y1="154" x2="200" y2="67" />
<line id="ΒΓ" x1="20" y1="154" x2="200" y2="154"/>
<line id="ΑΓ" x1="72" y1="18" x2="200" y2="154" />
<line id="ΑΒ" x1="72" y1="18" x2="20" y2="154" />
<rect id="ΟρθήΓωνία" x="190" y="144" width="10" height="10"
fill="none" />
</g>
<text x="104" y="104" fill="black">Ο</text>
<text x="108" y="165" fill="black">α</text>
<text x="55" y="18" fill="black">Α</text>
<text x="4" y="154" fill="black">Β</text>
<text x="207" y="154" fill="black">Γ</text>
<text x="207" y="67" fill="black">Δ</text>
Δυστυχώς ο φυλλομετρητής σας δεν υποστηρίζει γραφικά SVG.
</svg>
<p>Σχήμα 1</p>
</div>
<div class="Σχήμα">
<svg id="Σχήμα2" height="220" width="220">
<use xlink:href="p15-sx2-3.svg#Σχήμα_2"></use>
Δυστυχώς ο φυλλομετρητής σας δεν υποστηρίζει γραφικά SVG.
</svg>
<p>Σχήμα 2</p>
</div>
<div class="Σχήμα">
<svg id="Σχήμα3" height="220" width="220">
<use xlink:href="p15-sx2-3.svg#Σχήμα_3"></use>
Δυστυχώς ο φυλλομετρητής σας δεν υποστηρίζει γραφικά SVG.
</svg>
<p>Σχήμα 3</p>
</div>
<p><em>Από το βιβλίο "ΑΛΓΕΒΡΑ" της Β' Γενικού Λυκείου...</em></p>
<h1>1.7 Επίλυση τριγώνου</h1>
<p>Το κλασικό πρόβλημα της Τριγωνομετρίας, από το οποίο πήρε και το
όνομα της, είναι η <strong>επίλυση</strong> τριγώνου, δηλαδή ο
υπολογισμός των άγνωστων κύριων στοιχείων ενός τριγώνου, όταν
δίνονται επαρκή στοιχεία του.<p>
<p>Η επίλυση τριγώνου μπορεί να γίνει με τη βοήθεια των παρακάτω δυο
βασικών θεωρημάτων, που είναι γνωστά το ένα ως <strong>νόμος των
ημιτόνων</strong> και το άλλο ως <strong>νόμος των συνημίτονων
</strong>.</p>
<h2>Νόμος των ημίτονων</h2>
<div class="Θεώρημα"><em style="position:absolute; left:2%">ΘΕΩΡΗΜΑ</em>
Σε κάθε τρίγωνο ΑΒΓ ισχύει:
<math>
<mfrac> <mn><mi>α</mi></mn> <mi>ημΑ</mi> </mfrac>
<mo>=</mo>
<mfrac> <mn><mi>β</mi></mn> <mi>ημΒ</mi> </mfrac>
<mo>=</mo>
<mfrac> <mn><mi>γ</mi></mn> <mi>ημΓ</mi> </mfrac>
<mo>= 2R</mo> </math>
όπου R, η ακτίνα του περιγεγραμμένου κύκλου του τριγώνου.
</div>
<h3>ΑΠΟΔΕΙΞΗ</h3>
<p>Έστω (0,R) ο περιγεγραμμένος κύκλος του τριγώνου ΑΒΓ. Αν φέρουμε τη
διάμετρο ΒΔ και τη χορδή ΓΔ, τότε σχηματίζεται τρίγωνο ΓΒΔ που είναι
ορθογώνιο στο Γ. Επομένως έχουμε:</p>
<math> <mi> ημΔ </mi> <mo> = </mo>
<mfrac> <mn><mi> (ΒΓ) </mi></mn> <mi> (ΒΔ) </mi> </mfrac>
<mo>=</mo>
<mfrac> <mn><mi>α</mi></mn> <mi> 2R </mi> </mfrac>
<mo>, οπότε </mo>
<mfrac> <mn><mi> α </mi></mn> <mi> ημΔ </mi> </mfrac>
<mo> = </mo> <mi> 2R </mi> <mo> (1)</mo> </math>
<p>Είναι όμως Δ = Α (Σχ. 1) ή Δ + Α = 180<sup>o</sup> (Σχ. 2), οπότε
ημΔ = ημΑ. Επομένως η (1) γράφεται</p>
<math> <mfrac> <mn><mi> α </mi></mn> <mi> ημΑ </mi> </mfrac>
<mo> = </mo> <mi> 2R </mi> </math>
<p>Αν Α = 90<sup>o</sup>, τότε έχουμε: ημΑ = 1 και α = 2R (Σχ. 3).
Επομένως και στην περίπτωση αυτή ισχύει ισότητα
<math style="display:inline">
<mfrac> <mn><mi> α </mi></mn> <mi> ημΑ </mi> </mfrac>
<mo> = </mo> <mi> 2R </mi>
</math>
</p>
<p>Όμοια αποδεικνύεται ότι:
<math style="display:inline">
<mfrac> <mn><mi>β</mi></mn> <mi>ημΒ</mi> </mfrac>
<mo>=</mo> <mi>2R</mi> </math> και
<math style="display:inline">
<mfrac> <mn><mi>γ</mi></mn> <mi>ημΓ</mi>
</mfrac> <mo>=</mo> <mi> 2R </mi> </math>
</p>
<p>Επομένως: <math style="display:inline">
<mfrac><mn><mi>α</mi></mn><mi>ημΑ</mi></mfrac>
<mo> = </mo> <mfrac><mn><mi>β</mi></mn><mi>ημΒ</mi></mfrac>
<mo> = </mo> <mfrac><mn><mi>γ</mi></mn><mi>ημΓ</mi></mfrac>
<mo> = </mo> <mi> 2R </mi> </math> </p>
<hr> <p><span style="color:green">Σχόλιο.</span> Με το νόμο των ημίτονων
μπορούμε εύκολα να επιλύσουμε ένα τρίγωνο, όταν δίνονται: </p>
<ol type="i">
<li>Μια πλευρά και δυο γωνίες του ή</li>
<li>Δυο πλευρές και μια από τις μη περιεχόμενες γωνίες του.</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<!-- Εφαρμογή 16: Προσαρμοστική σχεδίαση ιστοσελίδας
Αρχείο p16.html
-->
<html lang="el-GR">
<head>
<title>Σύνδεσμοι</title>
<meta charset="utf-8">
<meta name="author" content="Ο συγγραφέας">
<meta name="description" content="Προσαρμοστική σχεδίαση ιστοσελίδας">
<link rel='stylesheet' type='text/css' href='p16.css'>
<script src="p16.js"></script>
</head>
<body>
<h1>Χρήσιμοι σύνδεσμοι</h1>
<ul class="menu">
<li>
<img src="eikones/ekpaideysi.png" title="Εκπαίδευση"
onclick="ekpaideysi()">
<span class"titlosmenu">Εκπαίδευση</span>
</li>
<li>
<img src="eikones/periballon.png" title="Περιβάλλον"
onclick="periballon()">
<span class"titlosmenu">Περιβάλλον</span>
</li>
<li>
<img src="eikones/politismos.png" title="Πολιτισμός"
onclick="politismos()">
<span class"titlosmenu">Πολιτισμός</span>
</li>
<li>
<img src="eikones/texnologia.png"
title="Έρευνα & Τεχνολογία"
onclick="texnologia()">
<span class"titlosmenu">Έρευνα & Τεχνολογία</span>
</li>
<li>
<img src="eikones/kosmos.png" title="Διάστημα"
onclick="diastima()">
<span class"titlosmenu">Διάστημα</span>
</li>
<li>
<img src="eikones/athlitika.png" title="Αθλητισμός"
onclick="athlitika()">
<span class"titlosmenu">Αθλητισμός</span>
</li>
</ul>
<div id="περιεχόμενο"></div>
</body>
</html>
Αξιοποιώντας τα μαθήματα για την AFRAME και οποιαδήποτε άλλη πηγή είναι διαθέσιμη στο διαδίκτυο καλείστε να δημιουργήσετε ένα εικονικό περιβάλλον WebVR με την χρήση της AFRAME το οποίο θα λειτουργεί ως γκαλερί έργων τέχνης. Το περιβάλλον σας θα πρέπει
- να περιλαμβάνει τουλάχιστον τρία διαφορετικά έργα, τοποθετημένα σε διάφορα σημεία μέσα στον χώρο
- να δίνει τη δυνατότητα στον επισκέπτη να προχωρήσει και να περιηγηθεί στο περιβάλλον
- να διαθέτει του τίτλους των έργων στα stand που εκτίθενται
- να έχει φωτισμό για κάθε έργο
Μπορείτε να χρησιμοποιήσετε ως βάση για την εργασία σας το περιβάλλον: https://famous-paintings-gallery.glitch.me και να προσθέσετε τα δικά σας στοιχεία.
Ημερολόγιο
Ανακοινώσεις
Όλες...- - Δεν υπάρχουν ανακοινώσεις -