o Κύριος των Υπολογιστών

Tο ιστολόγιο ενός "Κύριου των Υπολογιστών" και της Πληροφορικής ;-)
Προτάσεις διδασκαλίας, σχέδια μαθημάτων, φύλλα εργασίας, εκπαιδευτικό υλικό, κείμενα γνώμης και πολλά ακόμη...

Άδεια χρήσης περιεχομένου

Creative Commons Licence
Το περιεχόμενο του ιστολογίου παρέχεται με άδεια χρήσης Creative Commons Attribution-ShareAlike 4.0 International License ...

Εμφάνιση αναρτήσεων με ετικέτα Web Development. Εμφάνιση όλων των αναρτήσεων
Εμφάνιση αναρτήσεων με ετικέτα Web Development. Εμφάνιση όλων των αναρτήσεων

Τετάρτη 18 Φεβρουαρίου 2026

Εισαγωγή στην HTML

  Φεβρουαρίου 18, 2026    Philippos Koutsakas

Ιστοστότοποι και HTML

Σε προηγούμενα μαθήματα δημιουργήσαμε ιστοτόπους με τη χρήση του εργαλείου Google Sites. Το εργαλείο Google Sites χρησιμοποιεί γραφικό περιβάλλον για τη δημιουργία του ιστοτόπου.
Κατά τη δημιουργία ενός ιστοτόπου με Google Sites, στο παρασκήνιο δημιουργείται αυτόματα κώδικας HTML

Τι είναι η HTML;

Η HTML είναι μια περιγραφική γλώσσα, δηλαδή μία γλώσσα που καθορίζει το τρόπο που θα εμφανίζονται τα στοιχεία μίας ιστοσελίδας.  Όταν ο Φυλλομετρητής ανακτά μια ιστοσελίδα, στην ουσία ανακτά τον κώδικα HTML της ιστοσελίδας, τον οποίο «διαβάζει» και «διερμηνεύει» τις ετικέτες του (της HTML), δημιουργεί την ιστοσελίδα και την εμφανίζει στην οθόνη, μορφοποιώντας το κείμενο και τις εικόνες της.

Εισαγωγή στην HTML

  • Το σχετικό κεφάλαιο του σχολικού βιβλίου είναι διαθέσιμο ΕΔΩ
  • Εισαγωγικές Οδηγίες και Δραστηριότητες για την HTML διαθέσιμες ΕΔΩ
  • Ο κώδικας HTML μίας κενής ιστοσελίδας διεθέσιμος ΕΔΩ. Μπορετέ να τον αντιγράψετε/επικολήσετε σε ένα κενό έγγραφο HTML κάθε φορά που ξεκινάστε μία καινούρια σελίδα

Το σκονάκι μου για την HTML

  • Οι βασικές εντολές της HTML διαθέσιμες ΕΔΩ και ΕΔΩ
  • Το Λεξικό της HTML (με αναλυτική επεξήγηση των εντολών) ΕΔΩ

Δραστηριότητες και Εργασίες HTML

Tutorials HTML













   / / / /

  No Comments

Τετάρτη 4 Οκτωβρίου 2023

21 ιστοσελίδες με εκπληκτικές (δωρεάν) φωτογραφίες / εικόνες...

  Οκτωβρίου 04, 2023    Philippos Koutsakas

Το 70% της αίσθησης που μου δίνει μια ιστοσελίδα είναι οι φωτογραφίες της.

Δωρεάν φώτο από το https://stocksnap.io

Εδώ και λίγο καιρό λοιπόν άρχισα να ψάχνω στον ίντερνετ για ποιοτικές / επαγγελματικές φωτογραφίες για να συνοδεύω τις αναρτήσεις μου και εξεπλάγην από το ιδιαίτερα υψηλό κόστος αγοράς τους.

ΟΚ, λογικό σκέφτηκα να δίνεις 10$ για μία φωτογραφία αν είναι να την βάλεις στο e-shop σου, αλλά ένας φτωχός και μόνος blogger που δε μπορεί να διαθέσει τόσα τι να κάνει ο έρμος;

Να κάνει κλικ στον παρακάτω σύνδεσμο στον οποίο θα βρει ουκ ολίγες συλλογές (searchable) επαγγελματικών / καλαίσθητων φωτογραφιών που μπορεί να χρησιμοποιήσει δωρεάν.

Το λινκ εδώ...

Επιπλέον ιστοσελίδες θα βρείτε εδω τις οποίες έχει μαζέψει και οργανώσει σε ένα padlet ο Γιώργος Χοροζίδης...

Υ.Γ. Όλον αυτόν τον καιρό που δεν είχα γράψει λέξη δεν τεμπέλιαζα, έφτιαξα αυτό και αυτό και πολλά ακόμη που δεν σχετίζονταν με το το περιεχόμενο του blog...

free images


  

  No Comments

Τρίτη 3 Μαΐου 2022

Δημιουργία ιστολογίου...

  Μαΐου 03, 2022    Philippos Koutsakas

Ας μιλήσουμε/δημιουεγήσουμε ιστολόγια. 

Στην παρουσίαση που ακολουθεί θα βρείτε αναλυτικά απαντήσεις στα ερωτήματα "τι, γιατί και πως"  ένα blog...






   / / / /

  No Comments

Σάββατο 8 Ιανουαρίου 2022

Δημιουργία Ιστοτόπου με Google Sites

  Ιανουαρίου 08, 2022    Philippos Koutsakas

Τι είναι ο Ιστότοπος;

Τι είναι η ιστοσελίδα;

Πώς μπορούμε να δημιουργήσουμε ιστοτόπους και ιστοσελίδες;

Απαντήσεις στα παραπάνω ερωτήματα καθώς και αναλυτικές οδηγίες για τη δημιουργία ιστοτόπου με το εργαλεία Google Sites θα βρείτε ΕΔΩ

Αναλυτικές οδηγίες για την εργασία αυτής της ενότητα θα βρείτε ΕΔΩ

Όταν ολοκληρώστε την εργασία σας θα πρέπει να υποβάλλετε τη διεύθυνση του ιστότοπου σας ΕΔΩ

Για εισαγωγή θα ήταν χρήσιμη μία συνοπτική αναφορά στο Διαδίκτο και στην Υπηρεσία του Παγκόσμιου ιστού, περισσότερα ΕΔΩ




   / / /

  No Comments

Δευτέρα 11 Ιανουαρίου 2016

Ιστολόγια...

  Ιανουαρίου 11, 2016    Philippos Koutsakas

Στα πλαίσια του μαθήματος προγραμματιστικά εργαλεία για το διαδίκτυο και πριν περάσουμε σε συστήματα CMS ας ρίξουμε μια ματιά στα ιστολόγια...

Ακολουθεί το πρώτο μέρος της παρουσίασης που περιλαμβάνει:

  • μία σύντομη εισαγωγή περί ιστολογίων
  • τα βήματα δημιουργίας
  • σύνθεση της πρώτης ανάρτησης

Stay tuned, υπάρχει και συνέχεια...

   / /

  No Comments

Δευτέρα 28 Σεπτεμβρίου 2015

Εφαρμογές Πληροφορικής: Προτάσεις διδακτικής αξιοποίησης του νέου βιβλίου

  Σεπτεμβρίου 28, 2015    Philippos Koutsakas

Προτάσεις διδακτικής αξιοποίησης του νέου βιβλίου του μαθήματος Εφαρμογές Πληροφορικής από τη συγγραφική ομάδα εδώ κι εδώ.

Στα πλαίσια του μαθήματος θα μπορούσε να αξιοποιηθεί και το εγχειρίδιο "Το Διαδίκτυο που θέλουμε". Απευθύνεται σε εφήβους και περιέχει δραστηριότητες από νέους για νέους.

Μάλιστα το εγχειρίδιο αυτό έχει και την έγκριση του ΙΕΠ.




   /

  No Comments

Σάββατο 3 Ιανουαρίου 2015

On-line περιβάλλοντα για εκμάθηση HTML (και όχι μόνο)

  Ιανουαρίου 03, 2015    Philippos Koutsakas

Τα παρακάτω on-line περιβάλλον(τα) προσφέρονται για τη διδασκαλία HTML, CSS (και όχι μόνο) στα πλαίσια του μαθήματος "Σχεδίαση και Διαχείριση Ιστοτόπων" (το παλιό  Προγραμματιστικά Εργαλεία για το Διαδίκτυο).

w3schools

test4u

Συνήθως κάνω τα πρώτα μαθήματα χρησιμοποιώντας κάποιο από τα παραπάνω και αφού πάρουν μια ιδέα οι μαθητές μεταβαίνω στο κλασικό notepad (για το editing του html αρχείου) σε συνδυασμό με firefox (για προβολή της ιστοσελίδας). Μετά από 1-2 μαθήματα βλέπουμε και το notepad++

Καλή μελέτη.


   / /

  No Comments

Κυριακή 7 Δεκεμβρίου 2014

Εφαρμογές Πληροφορικής: Δραστηριότητα δημιουργίας ιστότοπου με web-based web site builder.

  Δεκεμβρίου 07, 2014    Philippos Koutsakas

Στα πλαίσια του μαθήματος "Εφαρμογές Πληροφορικής" θα δημιουργήσουμε έναν ιστότοπο. Το θέμα του ιστότοπου θα είναι αποκλειστικά δική σας επιλογής και μπορεί να σχετίζεται με τις ασχολίες σας, τα ενδιαφέροντά σας, τις ανάγκες σας ή ότι άλλο θέλετε εσείς. Μερικά παραδείγματα (για να πάρετε ιδέες):
  • Ιστοσελίδα με συνταγές μαγειρικής
  • Ιστοσελίδα αφιέρωμα σε ένα αγαπημένο μας συγκρότημα, αθλητή, καλλιτέχνη, κλπ
  • Ιστοσελίδα αφιέρωμα στην αγαπημένη μας ομάδα
  • Ιστοσελίδα για το κομμωτήριο της μαμάς μας 
  • Ιστοσελίδα για τον Πολιτιστικό Σύλλογο ή το Αθλητικό Σωματείο στο οποίο συμμετέχουμε
  • Ιστοσελίδα περιγραφής αγαπημένων ζώων της ζούγκλας
  • Ιστοσελίδα περιγραφής πουλιών, ψαριών ή άλλων ζώων που μας έχουν κάνει εντύπωση
  • Ιστοσελίδα αφιέρωμα σε μια περιοχή ή περιοχές (καταγωγή, εκδρομές, κλπ)
  • Ιστοσελίδα περιγραφής ενός νησιού, μιας πόλης, μιας χώρας που θα θέλαμε να πάμε
Προδιαγραφές Ιστοτόπου:
  1. να αποτελείται από τρεις ιστοσελίδες ή παραπάνω, 
  2. Κάθε ιστοδελίδα θα περιέχει (τουλάχιστον) κείμενα και εικόνες
  3. Μια πιθανή διάρθρωση είναι η εξής:
    1. Αρχική Σελίδα
    2. Αναλυτική παρουσίαση του θέματος μας (εταιρία, ομάδα, προϊόν, κλπ)
    3. Επικοινωνία
Για τη δημιουργία του ιστότοπου μπορείτε να χρησιμοποιήσετε είτε κάποιο από τα παρακάτω on-line εργαλεία είτε κάποιο άλλο που επιθυμείτε εσείς.

Web-based δημιουργοί ιστοσελίδων:
http://www.wix.com/  (video tutorial: https://www.youtube.com/watch?v=WRU83c06luM)
http://www.weebly.com/ (video tutorial: https://www.youtube.com/watch?v=aBdOgTj7x7o)
http://snappages.com/ (video tutorial: https://www.youtube.com/watch?v=78RTrw-FiyQ)
https://www.yola.com/ (video tutorial: https://www.youtube.com/watch?v=XuS0wWRznRQ)
https://sites.google.com/

(Μια συμβουλή: παρουσιάστε ΜΟΝΟ ΕΝΑΝ στους μαθητές σας για να μην τους μπερδέψετε).

Εκτός από τα παραπάνω πληροφορίες σχετικά με web-site builders μπορείτε να βρείτε στα παρακάτω:
http://www.websitebuilderexpert.com/website-builders-comparison-chart/
http://www.top10bestwebsitebuilders.com
http://www.sitebuilderreport.com/
http://www.digitaltrends.com/computing/best-website-build-websites-free/#!zZ8r7

Προσοχή: Πρέπει να συμπληρώσετε το παρακάτω ερωτηματολόγιο:



Τις απαντήσεις μπορείτε να τις δείτε εδώ.




   / /

  No Comments

Τετάρτη 7 Μαΐου 2014

Προγραμματιστικά Εργαλεία Διαδικτύου- Κεφάλαιο 3ο: Δημιουργία Ιστοσελίδων και Ιστοτόπου

  Μαΐου 07, 2014    Philippos Koutsakas

Οι σημειώσεις για το 3ο κεφάλαιο του σχολικού βιβλίου καθώς και η εκφώνηση της άσκησης για τα νησιά των σποράδων.

Καλή μελέτη




   /

  No Comments

Προγραμματιστικά Εργαλεία Διαδικτύου: Κεφάλαιο 2ο - Το περιβάλλον του Παγκόσμιου Ιστού

  Μαΐου 07, 2014    Philippos Koutsakas

Το δεύτερο κεφάλαιο του σχολικού βιβλίου που παρουσιάζει το περιβάλλον του παγκόσμιου ιστού.

Καλή μελέτη.

 

   /

  No Comments

Πέμπτη 1 Μαΐου 2014

Η αλλαγή που παρατηρείτε στο Ιστολόγιο οφείλεται...

  Μαΐου 01, 2014    Philippos Koutsakas

Αγαπητοί επισκέπτες,

Θα έχετε παρατηρήσει μια "μικρή" αλλαγή στο look and feel του ιστολογίου εδώ και μερικές εβδομάδες.

Αφορμή αποτέλεσε η αξιέπαινη πρωτοβουλία του υπεύθυνου ΚΕΠΛΗΝΕΤ Β. Στεφανίδη να διοργανώσει των 1ο διαγωνισμό Ιστοσελίδων του νομού ο οποίος μας έδωσε τη δυνατότητα να γνωρίσουμε τις ιστοσελίδες που διατηρούν συνάδελφοι στον νομό Χαλκιδικής. Αν και χρόνια στον Πολύγυρο ομολογώ ότι δε γνώριζα ότι τόσοι πολλοί συνάδελφοι διατηρούν τόσο αξιόλογες ιστοσελίδες. Μάλιστα την Παρασκευή 2-5-2014, στο ΓΕΛ Πολυγύρου θα πραγματοποιηθεί η βράβευση των διακριθέντων τόσο στο διαγωνισμό δημιουργίας ιστοσελίδων όσο και στο μαθητικό διαγωνισμό προγραμματισμού του νομού μας (η πρόσκληση παρακάτω).

Το αστείο της υπόθεσης είναι ότι χωρίς να το περιμένω ο ιστότοπος "του κυρίου των υπολογιστών" διακρίθηκε στην κατηγορία περιεχόμενο. Το ακόμη πιο αστείο της υπόθεσης είναι ότι το γεγονός αυτό αποτέλεσε την αφορμή να αλλάξω και το πρότυπο του ιστότοπου (μετά την ολοκλήρωση του διαγωνισμού). Σκέφτηκα και λειτούργησα όπως κάναν παλιά οι μαμάδες μας όταν περίμεναν επισκέπτες: σκούπιζαν, σφουγγάριζαν, έστρωναν τα καλά τραπεζομάντηλα και χαλιά, κλπ. Έτσι κι εγώ σκέφτηκα να τη σουλουπώσω λιγάκι μιας και θα "περνούσε" κόσμος :-)

Ελπίζω η νέα μορφή να είναι καλύτερη όχι μόνο από αισθητικής απόψεως αλλά και από λειτουργικής.

Περιμένω τα σχόλια και τις παρατηρήσεις σας.

Ευχαριστώ.


   / /

  No Comments

Τρίτη 8 Απριλίου 2014

Κυριακή 16 Μαρτίου 2014

Προγραμματιστικά Εργαλεία για το Διαδίκτυο, Web site builders

  Μαρτίου 16, 2014    Philippos Koutsakas

Μια σύντομη αναζήτηση στο διαδίκτυο για "best web-site builders 2014", για τους καλύτερους δηλαδή κατασκευαστές ιστοσελίδων του 2014, επιστρέφει μια σειρά αποτελεσμάτων τα οποία λίγο-πολύ συμφωνούν στην πρώτη 10άδα...

Για ρίξτε λοιπόν μια ματιά στις παρακάτω ιστοσελίδες που αξιολογούν τους καλύτερους web-site builders και επιλέξτε κάποιον από όλους για να δημιουργήσετε την ιστοσελίδα σας.

http://www.websitebuilderexpert.com/website-builders-comparison-chart/

http://www.top10bestwebsitebuilders.com

http://www.sitebuilderreport.com/

http://www.digitaltrends.com/computing/best-website-build-websites-free/#!zZ8r7

Καλή μελέτη...


   / /

  No Comments

Δευτέρα 27 Ιανουαρίου 2014

Κυριακή 12 Ιανουαρίου 2014

Incomedia WebSiteX5 Tutorial

  Ιανουαρίου 12, 2014    Philippos Koutsakas

Έχοντας δημιουργήσει ιστότοπους με "γυμνά χέρια" (HTML σε notepad++) και πριν περάσουμε στα Συστήματα Διαχείρισης Περιεχομένου (CMS) ας δούμε ένα παράδειγμα λογισμικού δημιουργίας στατικών ιστοτόπων: το WebSiteX5 της Incomedia.





  

  No Comments

Δευτέρα 16 Δεκεμβρίου 2013

Σχεδίαση και Υλοποίηση του δικτυακού τόπο του ΕΠΑΛ Πολυγύρου με το CMS Joomla

  Δεκεμβρίου 16, 2013    Philippos Koutsakas

Σκαλίζοντας στις σημειώσεις του παρελθόντος "έπεσα" πάνω στην παρουσίαση με την οποία συμμετείχαμε στο 3ο μαθητικό συνέδριο πληροφορικής με θέμα: Σχεδίαση και Υλοποίηση του δικτυακού τόπο του ΕΠΑΛ Πολυγύρου με το CMS Joomla.

Έχει ενδιαφέρον και από σχεδιαστικής απόψεως ;-)





   / /

  No Comments

Τετάρτη 4 Δεκεμβρίου 2013

Κυριακή 1 Δεκεμβρίου 2013

Προγραμματιστικά Εργαλεία για το Διαδίκτυο - Δραστηριότητα δημιουργίας ιστότοπου με HTML

  Δεκεμβρίου 01, 2013    Philippos Koutsakas

Πριν ξεκινήσετε ρίξτε μια ματιά στην παρουσίαση:



Δημιουργία Ιστότοπου με θέμα: «Τα νησιά των Σποράδων»

Ο ιστότοπος που θα δημιουργήσουμε αφορά στα τέσσερα νησιά των Σποράδων:
  1. Σκιάθος
  2. Σκόπελος
  3. Σκύρος
  4. Αλόνησος
Συνεπώς πρέπει ο ιστότοπος μας θα αποτελείται από πέντε ιστοσελίδες: μία για κάθε νησί και μία κεντρική που θα συνδέει τις ιστοσελίδες μεταξύ τους.

Βήμα 1ο 
Ξεκινήστε την εφαρμογή κατεβάζοντας το κενό αρχείο HTML από εδώ

Βήμα 2ο 
Δημιουργήστε έναν φάκελο μέσα στον φάκελο σας με όνομα sporades.
Μέσα στον φάκελο σποράδες δημιουργήστε τους φακέλους: pics, sopunds, etc.
Αντιγράψτε το αρχείο που κατεβάσατε (index.html) στον φάκελο sporades.

Βήμα 3ο 
Δημιουργήστε τις εξής πέντε ιστοσελίδες:
  1. sporades.html (η μορφή της ιστοσελίδας αυτής περιγράφεται στο αρχείο Πρώτη Ιστοσελίδα.pdf)
  2. skiathos.html (η μορφή της ιστοσελίδας αυτής περιγράφεται στο αρχείο Δεύτερη Ιστοσελίδα.pdf) 
  3. skopelos.html (η μορφή της ιστοσελίδας αυτής περιγράφεται στο αρχείο Τρίτη Ιστοσελίδα.pdf) 
  4. alonisos.html (η μορφή της ιστοσελίδας αυτής περιγράφεται στο αρχείο Τέταρτη Ιστοσελίδα.pdf) 
  5. skiros.html (η μορφή της ιστοσελίδας αυτής περιγράφεται στο αρχείο Πέμπτη Ιστοσελίδα.pdf) 
Εικόνες για τις ιστοσελίδες σας μπορείτε να βρείτε και να κατεβάσετε από το διαδίκτυο. Δεν είναι απαραίτητο να είναι ίδιες με αυτές τους παραδείγματος.
Αποθηκεύστε με προσοχή τις ιστοσελίδες.

Μικρή βοήθεια: η εντολή με την οποία εισάγουμε εικόνα:

  • στην περίπτωση που η εικόνα είναι στον ίδιο φάκελο με το αρχείο html
    • <IMG SRC = "όνομα_εικόνας.επέκταση"> 
  • στην περίπτωση που η εικόνα είναι στον φάκελο που βρίσκεται στο τέλος της διαδρομής
    • <IMG SRC = "διαδρομή/όνομα_εικόνας.επέκταση"> 

Βήμα 4ο
Αφού ολοκληρώσετε την δημιουργία των πέντε ξεχωριστών ιστοσελίδων ΣΥΝΔΕΣΤΕ τις μεταξύ τους.
  • <A HREF = "διαδρομή/όνομα σελίδας"> Κείμενο συνδέσμου </A>
  • <A HREF = "όνομα ιστοσελίδας"> Κείμενο συνδέσμου </A>
Παράδειγμα:
Κάντε κλικ <A HREF="mypage2.htm"> εδώ </A> για να πάτε στην άλλη σελίδα.
Κάντε κλικ <A HREF="/υποφάκελος/mypage2.htm"> εδώ <a> για να πάτε στην άλλη σελίδα.

Παράδειγμα:
<A HREF="http://www.google.com"> To Google </A> είναι το πιο δημοφιλές εργαλείο αναζήτησης.


Βήμα 5ο
Εισάγετε την διεύθυνση ηλεκτρονικού ταχυδρομείου σας στην πρώτη ιστοσελίδα, πίσω από τον σύνδεσμο «Επικοινωνήστε με τον δημιουργό της ιστοσελίδας»


Παράδειγμα:
<A HREF="mailto:gepiti@gepiti.com">Γράψτε μας</A>

Βήμα 6ο
Εισαγωγή ρολογιού στην αρχική σελίδα αντιγράφοντας κώδικα από την ιστοσελίδα clocklink

Βήμα 7ο
Εισαγωγή βίντεο από youtube στην σελίδα της Αλλονήσου αντιγράφοντας κώδικα από τη ιστοσελίδα του youtube.


















   / /

  No Comments

Τετάρτη 20 Νοεμβρίου 2013

Προγραμματιστικά Εργαλεία για το Διαδίκτυο - Κεφάλαιο 4ο: H HTML.

  Νοεμβρίου 20, 2013    Philippos Koutsakas

Λίγη θεωρία και πολλές δραστηριότητες σε HTML.

Αρχικά διαβάστε την παρουσίαση που ακολουθεί και στη συνέχεια πειραματιστείτε με τις δραστηριότητες που ακολουθούν.
Καλή μελέτη.



   / /

  No Comments

Εγγραφή σε: Αναρτήσεις (Atom)