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 και χωρίς να μπει ανάμεσα σε εισαγωγικά

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

Βασικά elements

Δεν είναι case sensitive

html, head, body

H1, h2, h3, H4, H5, h6

p με χρήση του έτοιμου κειμένου lorem ipsum (αποτελείται από λέξεις χωρίς νόημα)

span (για να ορίσουμε μια περιοχή κειμένου ώστε να την τροποποιήσουμε) παράδειγμα χρήσης με style=”color:brown”

img

tables (Δεν είναι πλέον της μόδας!) Συνήθως αποφεύγουμε πλέον τη χρήση πινάκων/tables
Ωστόσο αποτελούν καλές ασκήσεις για την κατανόηση του ανοίγματος και κλεισίματος διαδοχικών tags καθώς και την χρήση element μέσα σε element.
Κανόνας: θα χρησιμοποιούμε tables μόνο για την παρουσίαση στοιχείων σε στήλες και γραμμές όπως π.χ. στπ excel.
Δεν χρησιμοποιούμε tables για τη μορφοποίηση σελίδων π.χ. για να κάνουμε δίστηλο.

tr: table row

td: table data για επικεφαλίες στην 1η γραμμή χρησιμοποιώ th αντί td και εμφανίζει τα περιεχόμενα σε bold (ωραίο παράδειγμα χρήσης στο https://www.algoexpert.io/frontend/html-crash-course/tables)

2o Μάθημα

Ερωτήσεις;

Επανάληψη: elements και attributes της HTML https://html.com/

img attributes

a attributes

input attributes

Ανάλογα την συσκευή/browser έχουν διαφορετική όψη

value=”…”

placeholder=”…”

type=”text”, “tel”, “email”, “search”, “button”, “date”, “month” “week”, “datetime”, “time”, “color”, “reset”, “radio”, “checkbox”, “button”, “passdword”

autofocus

Ερώτηση: Γιατί δεν χρησιμοποιώ μόνο το “text” που τα υπερκαλύπτει:

Απ.: ευκολία χρήστη (λιγότερα λάθη, λιγότερη πληκτρολόγηση, ταχύτητα [ΔΕΝ θέλουμε να γράφει ο χρήστης!]), ευκολία προγραμματιστή (λιγότερους ελέγχους-διορθώσεις).

Ο χρήστης πρέπει να κάνει τα πάντα εύκολα, με φυσικό τρόπο και γρήγορα. Αν έχει απορίες τότε ΧΑΣΑΜΕ!

Σημείωση:

Επισήμανση χρήσης type=”tel” και “email”, διότι βοηθά πολύ τους χρήστες κινητών.

Να επιδειχθεί η ιστοσελίδα: https://better-mobile-inputs.netlify.app/

v2Q1:58

<textarea> attributes

<ol> attributes

start=””

reversed

Disable attribute (δεν θέλει τιμή)

σε button, input, option, select, textarea

Value attribute σε <select>

π.χ. δημιουργία μενού με το

href attribute σε <a>

Χρήση table με thead, tbody. Χρήση colspan=”” για την ένωση στηλών (column span)

Media attributes για <audio>, <video>, <img>, <track>,<source>, <script>, <iframe>

src

autoplay

controls > tongle

loop > tongle

muted > tongle

Άσκηση

Είναι προαιρετική αλλά θα βοηθήσει αρκετά στο να κατανοήσετε τι έχουμε κάνει ως τώρα.

Δεν απαιτείται για τη βεβαίωση.

Θα τη λάβετε και με emai.

Ο βαθμός ενδιαφέροντος θα αυξηθεί στα επόμενα μαθήματα!!!

3ο Μάθημα

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

Βασικά elements

2o Μάθημα

img attributes

a attributes

input attributes

<textarea> attributes

<ol> attributes

Disable attribute (δεν θέλει τιμή)

Value attribute σε <select>

href attribute σε <a>

Media attributes για <audio>, <video>, <img>, <track>,<source>, <script>, <iframe>

Άσκηση

3ο Μάθημα

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