1o Μάθημα: Εισαγωγή

Ας γνωριστούμε καλύτερα. Συμπληρώστε την παρακάτω φόρμα “Επίπεδο εκπαίδευσης και εμπειρία”:

https://docs.google.com/forms/d/e/1FAIpQLSfX57boqjw5K_a_1_ijUx2gz_jp4hXb7BcEjMej4eYZDSGCnA/viewform

Α’ μέρος

Σκοπός:

Εκμάθηση HTML και CSS χωρίς να βασιστούμε σε κάποιο framework. Άρα μαθαίνουμε τον πυρήνα της HTML και CSS
Όλα τα εργαλεία είναι δωρεάν
Θα βασιστούμε στο Visual Studio Code και το Google Chrome
Ρωτήστε!
Γράψτε μόνοι σας κώδικα!
Θα κάνουμε ασκήσεις (δεν είναι υποχρεωτικές αλλά βοηθούν πολύ αν τις κάνετε).
Θα βλέπουμε διάφορα sites, παραδείγματα, video αλλά θα γράφουμε τον κώδικα από την αρχή μέχρι το τέλος!
Ο καθένας προγραμματίζει διαφορετικά:
- διαφορετικές τεχνικές
- διαφορετική οπτική/ αισθητική
- διαφορετικά εργαλεία
- διαφορετικές πηγές (το “κλέψιμο” ιδεών και τεχνικών από tutorials, sites, youtube είναι απαραίτητο στον προγραμματισμό)
- διαφορετικές λύσεις
- μαθαίνει διαφορετικά: στον δικό του χρόνο με τον δικό του ρυθμό
3 διδακτικές ώρες= 2.5 ώρες με διάλλειμα 15′
Τα μαθήματα θα γίνονται 2 φορές την εβδομάδα και ίσως και 3.

Εργασιακά δικαιώματα πληροφορικών ???

Κανένα!

Προσοχή στα πλεονεκτήματα και μειονεκτήματα της Ελληνικής πραγματικότητας

(ανταγωνισμός, τιμές, ποιότητα, υπερπροσφορά)

Υλικοτεχνικές υποδομές

Τραπέζι + καρέκλα + ΗΥ + σύνδεση στο διαδίκτυο

Προσοχή στα πλεονεκτήματα και μειονεκτήματα της ~~Ελληνικής~~ πραγματικότητας

ΑΓΟΡΑ ΕΡΓΑΣΙΑΣ

Μεγάλες δυσκολίες στην εύρεση κατάλληλου προσωπικού αντιμετωπίζουν οι επιχειρήσεις στην Ελλάδα: Ελλειψη προσωπικού με ψηφιακές δεξιότητες-Ερευνα ΕΒΕΑ

Τι είναι διαδίκτυο
- (https://el.wikipedia.org/wiki/internet)
Υπηρεσίες του διαδικτύου: email, www, μεταφορά αρχείων, άλλα;
Τι είναι ιστοσελίδες ή www ή παγκόσμιος ιστός

Αποτελεί τη δημοφιλέστερη υπηρεσία η οποία φαίνεται να καλύπτει πλέον και άλλες υπηρεσίες (π.χ. email, videoconference)

Τι είναι url;

Από το βιβλίο “Beginning HTML5 & CSS3 For Dummies”, John Wiley & Sons, Inc. 2013

Οι υπερσύνδεσμοι (hyperlinks ή συνήθως σκέτο links) συνδέουν (αποτελούν την κόλλα) των διάφορων url μεταξύ τους.
Τι είναι HTML
- html = Hyper Text Markup Language (Γλώσσα Σήμανσης Υπερκειμένου)
- είναι η βάση του www

- ΔΕΝ ΕΙΝΑΙ τυπική γλώσσα προγραμματισμού όπως η python, c, javascript, php, java κλπ (δεν έχει δομή επανάληψης ή επιλογής κλπ)
- H εξέλιξη της HTML HTML 4.0 > ~~XHTML~~ > HTML 5.0

Ιστοσελίδες αναφοράς:

- - - https://el.wikipedia.org/wiki/HTML για την ιστορία… (1)
    - https://www.w3schools.com/html/html_intro.asp για την ιστορία… (2)
    - https://www.w3.org/
      - https://w3cx.org/ σεμινάρια
      - https://validator.w3.org/ validator
    - https://developer.mozilla.org
    - https://www.w3docs.com/learn-html.html
    - https://caniuse.com/ciu/index
    - https://www.w3schools.com/tags/ref_byfunc.asp ανά κατηγορία (βασικά, μορφοποίησης, input κλπ)
    - https://www.w3schools.com/tags/default.asp Αλφαβητικά
    - https://whocanuse.com/ για τον έλεγχο της σωστής χρήσης χρωμάτων! (εξαιρετικό!)
    - https://flatuicolors.com/ έτοιμες παλέτες με σωστούς συνδυασμούς χρωμάτων!
    - https://fonts.google.com/ δωρεάν γραμματοσειρές της Google!

Συνήθως όταν λέμε ότι θα δημιουργήσουμε html ιστοσελίδες εννοείται, χωρίς όμως να είναι σωστό, ότι θα χρησιμοποιηθούν τα δύο πρώτα ή και τα 3 παρακάτω:

HTML
CSS
Javascript

Τι είναι browsers

Στατιστικά για τους browsers (chrome vs firefox vs safari vs edge vs opera κλπ:

Ποσοστά χρήσης browses

Source: Περισσότερες πληροφορίες στο StatCounter Global Stats – Browser Market Share

Β’ Μέρος

Τι υπολογιστική συσκευή χρησιμοποιείς για την επιμόρφωση;

https://strawpoll.com/polls/wAg3jbNddn8

Στατικές ιστοσελίδες και δυναμικές ιστοσελίδες
- Στατικές (αποθηκεύονται σε web servers): είναι γραμμένες με html, css και ίσως και javascript. Λέγονται στατικές γιατί κάθε φορά που τις ανοίγουμε, ουσιαστικά οι browsers εμφανίζουν τα ίδια αρχεία. Η javascript έχει εισάγει δυναμικότητα στις στατικές σελίδες αν και ο κώδικα που που φτάνει στον ΗΥ του επισκέπτη/χρήση είναι ο ίδιος.
- Δυναμικές (αποθηκεύονται σε Application servers): εκτός από html, css και javascript, έχουν ειδικές γλώσσες οι οποίες επικοινωνούν με βάσεις δεδομένων. Είναι πιο πολύπλοκες και πιο λειτουργικές και απαιτούν να γίνει εκτέλεση εντολών στον server, όπου είναι αποθηκευμένες προτού στείλουν τα δεδομένα (html, css, javascript) στον browser του χρήστη.
  πηγή: https://about.gitlab.com/blog/2016/06/03/ssg-overview-gitlab-pages-part-1-dynamic-x-static/
Τι είναι γλώσσες client side και τι γλώσσες server side
1. client side : εντολές που εκτελούνται στον υπολογιστή μας (client) σε γλώσσες π.χ. HTML, CSS, javascript, java, python
2. server side : εντολές που εκτελούνται στον υπολογιστή που φιλοξενούνται οι ιστοσελίδες και πριν στείλει τα δεδομένα στον client. Τέτοιες γλώσσες είναι συνήθως η javascript, javascript frameworks, python, php, c#, (asp, asp.net) κ.α. Η javascript έχει σαρώσει τα πάντα!
  Ωστόσο όταν χρησιμοποιούμε έτοιμες πλατφόρμες όπως wordpress, joomla πρέπει να ασχοληθούμε (ως προγραμματιστές) και με την php.
3. front end vs back end: …

Τι γλώσσες προγραμματισμού για το web έχετε χρησιμοποιήσει;

https://strawpoll.com/polls/poy9RbLW8nJ

Από το Web 1.0 στο Web 2.0
Το Web 3.0
Τι είναι html editor.
1. Εφαρμογές στον υπολογιστή μας:
  1. 1. σημειωματάριο (notepad)
    2. notepad++(δωρεάν και πολύ παραμετροποιήσιμο)
    3. https://codepen.io/ (χρειάζεται εγγραφή, είναι εξαιρετικό)
    4. http://bluegriffon.org/ [είναι “shareware” άρα αρχικά δωρεάν αλλά μετά χρειάζεται αγορά για πλήρη λειτουργικότητα]
    5. https://www.sublimetext.com/ [είναι “shareware” άρα αρχικά δωρεάν αλλά μετά χρειάζεται αγορά για πλήρη λειτουργικότητα]
2. Online:
  - https://www.tutorialspoint.com/online_html_editor.php (με επιλογή εμφάνισης σε κινητό, ΗΥ, tablet)
  - https://www.w3schools.com/tryit/
  - https://codepen.io/
  - https://replit.com/
  - Μέσα από το περιβάλλον διαχείρησης των Plesk και Cpanel ( συστήματα διαχείρισης των πακέτων φιλοξενίας) μας δίνεται η δυνατότητα να ανοίξουμε και να διορθώσουμε αρχεία html, php κλπ.
3. OXI Word, Wordpad ή Writer! > πρέπει να αποθηκεύουν μόνο κείμενο χωρίς μορφοποίηση!

Αυτή τη στιγμή η καλύτερη επιλογής (και αυτή θα χρησιμοποιήσουμε είναι το Visual Studio Code https://code.visualstudio.com/

Το Visual Studio Code είναι γραμμένο σε html, css και javascript!!!

Tutorials/ μαθήματα
1. https://www.w3schools.com/
2. https://html.com/
3. https://sites.google.com/site/gtiteithe
4. Ένας γρήγορος και εύκολος οδηγός για τη δημιουργία μιας μικρής ιστοσελίδας με html, css: https://dev.to/jordanholtdev/how-to-create-a-web-page-with-html-26ho

Μπορούμε να δημιουργήσουμε επαγγελματικές ιστοσελίδες μόνο με html και css;
Μπορείτε να πείτε τι είδους ιστοσελίδες μπορεί να είναι; (π.χ. μπορεί να είναι ένα eshop;)
H HTML και η CSS, xρειάζονται σε δυναμικές ιστοσελίδες/ portals ( facebook.com, amazon.com, skroutz.gr, …);

Πρακτικά θέματα

Επεκτάσεις αρχείων και πως τις εμφανίζουμε
Κατέβασμα και εγκατάσταση του Visual Studio Code
- για όλα το OS
- Stable Build
- Είναι μικρό, γρήγορο και γραμμένο σε html, css, javascript
- Δωρεάν και βασιζόμενο σε ανοικτό κώδικα
- F1 και αναζήτηση για “theme”(ή κλικ κάτω αριστερά στο γρανάζι) > επιλογή θέματος (σκούρο η φωτεινό)
- Κουμπί “Extensions” και προσθήκη του “HTML Preview” ~~του Townsend~~ George Oliveira
- Δημιουργία νέων αρχείων και φακέλων μέσα από το CScode
- HELP > Keyboard Shortcuts Reference
- Προτιμάμε τον chrome ως browser για δοκιμές
- Επίδειξη δημιουργίας βασικής ιστοσελίδας με

html:5 ή !

- Ξεκινάμε: Δημιουργώ στον explorer φάκελο και με δεξί κλικ τον ανοίγω με το VScode
- Δημιουργώ αρχείο index.html
- Δημιουργία απλή ιστοσελίδες με επίδειξη των βασικών elements:
  - html > δηλώνει ότι είναι ιστοσελίδα html
  - head > ρυθμίσεις σελίδας
  - body > εδώ βάζουμε το περιεχόμενο
- Προσθέτουμε μέσα στο head και το element <title>
- Δείχνουμε όλα τα h1…h6
- SHIFT+ALT+F για αυτόματη μορφοποίηση με εσοχές
- <p> lorem<p/>
- ALT+Z: αναδίπλωση κειμένου. Μικραίνω το παράθυρο και βλέπω ότι είναι responsive!
- <p> lorem<p/>
- <span> βάζω μέσα μια λέξη για να δείξω ότι το χρησιμοποιώ για να κάνω μορφοποίηση σε ότι περικλείει. Π.χ. γράφω <span style=”color:red”>
- αν αντικαταστήσω το span με p βλέπω ότι το p ζητάει χώρο!
- ul + li
- ol + li
- <table><tr> με <th> και <tr> με <td>

Μια παρουσίαση του VScode σε βάθος:

Οι συντομεύσεις του Visual Studio Code https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Χρησιμοποιήστε το emmet για την γρήγορη συγγραφή κώδικα στο VS code: https://dev.to/atapas/10-vs-code-emmet-tips-to-make-you-more-productive-17l9
Ακόμη περισσότερα κόλπα: https://docs.emmet.io/cheat-sheet/
Κόλπα στην HTML5 που δεν τα ξέρουν πολλοί!!! https://blog.greenroots.info/10-useful-html5-features-you-may-not-be-using

Γ’ Μέρος

Elements και Attributes

HTML Elements

Ένα HTML element ή εντολή ή στοιχείο είναι ότι περιέχεται από την ετικέτα αρχής (start tag) μέχρι την ετικέτα τέλους (end tag):

<tagname> Εδώ βάζουμε το περιεχόμενο</tagname>

Ένα HTML element μπορεί να περιέχει άλλα στοιχεία ή απλό κείμενο.

Elements μέσα σε άλλα elements δημιουργούν ιεραρχίες τις οποίες θα εξηγήσουμε στη συνέχεια. Για παράδειγμα:

<p>Σήμερα θα δούμε την <strong> σύνταξη της HTML</strong></p>

Ορισμένα πολύ κοινά γνωρίσματα που χρησιμοποιούνται στα περισσότερα elements είναι:

id
class
style
hidden

Υπάρχουν elements με μόνο μια ετικέτα και λέγονται κενά elements. Για παράδειγμα:

<br>

Περισσότερα: https://www.w3schools.com/html/html_elements.asp

HTML Attributes

Τα attributes είναι οι ρυθμίσεις των elements. Δηλαδή καθορίζουν τα χαρακτηριστικά ενός element, π.χ.

<h2 title="Είμαι επικεφαλίδα επιπέδου 2">Σήμερα θα ξεκινήσουμε το μάθημα html-css</h2>

Στα ελληνικά εκτός από “ρυθμίσεις” χρησιμοποιούνται οι όροι “γνωρίσματα” και “χαρακτηριστικά“.

Όλα τα HTML elements έχουν attributes
Τα Attributes προσδιορίζουν τα elements
Τα Attributes τα γράφουμε στην αρχική ετικέτα (start tag)
Συντάσσονται ως εξής: name=”value”
ένα element μπορεί να έχει πολλά attributes τα οποία χωρίζονται μεταξύ τους με κενά
η HTML5 καταλαβαίνει το value και χωρίς να μπει ανάμεσα σε εισαγωγικά

Περισσότερα:

HTML: 4o μάθημα (Semantics, forms, inputs)

Ύλη HTML Semantic Elements https://www.w3schools.com/html/html5_semantic_elements.asp https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section https://www.w3.org/TR/2011/WD-html5-20110405/sections.html Αρχικά να γίνει μια αναφορά σχετικά με τα headings https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements Μόνο ένα h1 σε κάθε σελίδα Δεν παραλείπουμε επίπεδα headings (π.χ. μια σελίδα να περιέχει h1 και μετά h3 χωρίς να έχει h2) γιατί μπερδεύει τους αυτόματους εκφωνητές (readers) <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> …

HTML 5

1o Μάθημα: Εισαγωγή

Ας γνωριστούμε καλύτερα. Συμπληρώστε την παρακάτω φόρμα “Επίπεδο εκπαίδευσης και εμπειρία”:

Α’ μέρος

Κανένα!

Τραπέζι + καρέκλα + ΗΥ + σύνδεση στο διαδίκτυο

ΑΓΟΡΑ ΕΡΓΑΣΙΑΣ

Τι είναι διαδίκτυο

Τι είναι ιστοσελίδες ή www ή παγκόσμιος ιστός

Τι είναι HTML

Ιστοσελίδες αναφοράς:

Τι είναι browsers

Β’ Μέρος

Στατικές ιστοσελίδες και δυναμικές ιστοσελίδες

Τι είναι γλώσσες client side και τι γλώσσες server side

Από το Web 1.0 στο Web 2.0

Τι είναι html editor.

Tutorials/ μαθήματα

Πρακτικά θέματα

Μια παρουσίαση του VScode σε βάθος:

Γ’ Μέρος

Elements και Attributes

HTML Elements

HTML Elements

HTML Attributes

HTML: 2o Μάθημα ( διάρθρωση σελίδας html, head, body και βασικά elements, VScode)

HTML: 3o μάθημα (attributes, Quotation, Citation, tables, input)

HTML: 4o μάθημα (Semantics, forms, inputs)

HTML: 5o μάθημα (block, inline, media, audio, video, iframe για youtube/maps, nav, 1η Άσκηση)

HTML: 6o μάθημα (html > css)

HTML: 7o μάθημα

Διδασκαλία Πληροφορικής

Προγραμματισμός

Linux

Python

Διδασκαλία Πληροφορικής

Εκπαιδευτικά

Φύση- Επιστήμη-DIY

Ενδιαφέρουσες σελίδες

Ιστοσελίδες συναδέλφων

Arduino