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

το ιστολόγιο ενός Κύριου των Υπολογιστών και της Πληροφορικής ;-)

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

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

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

Κυριακή 11 Δεκεμβρίου 2022

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

  Δεκεμβρίου 11, 2022    Philippos Koutsakas

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

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

Τι είναι η HTML;

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

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

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

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

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

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

  • Δραστηριότητες 2, 3, 4, 5, 6, 7 διαθέσιμες ΕΔΩ 
  • Εργασία "Τα νησιά των σποράδων" διαθέσιμη ΕΔΩ και τα αρχεία που θα χρειαστείτε ΕΔΩ

Tutorials HTML









   / / /

  No Comments

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

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

  Μαΐου 03, 2022    Philippos Koutsakas

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

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






   / / / /

  No Comments

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

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

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

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

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

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

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

   / /

  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

Τετάρτη 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)