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

Α’ μέρος

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

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

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

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

   Τι είναι url;

   

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

   Οι υπερσύνδεσμοι (hyperlinks ή συνήθως σκέτο links) συνδέουν (αποτελούν την κόλλα) των διάφορων url μεταξύ τους.

4. Τι είναι HTML

   • html = Hyper Text Markup Language (Γλώσσα Σήμανσης Υπερκειμένου)
   • Παράδειγμα: https://html-master.w3spaces.com/ η οποία έχει δημιουργηθεί με τις παρακάτω “HTML εντολές”

• • ΔΕΝ ΕΙΝΑΙ τυπική γλώσσα προγραμματισμού όπως η python, c, javascript, php, java κλπ
  • H εξέλιξη της HTML   HTML 4.0 > XHTML > HTML 5.0
  • Ιστοσελίδες αναφοράς:
    • • https://el.wikipedia.org/wiki/HTML
      • 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/ έτοιμες παλέτες με σωστούς συνδυασμούς χρωμάτων!

Β’ Μέρος

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

   • Στατικές (αποθηκεύονται σε 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/

2. Τι γλώσσες client side  γλώσσες server side

   1. client side: εντολές που εκτελούνται στον υπολογιστή μας (client) σε γλώσσες π.χ. javascript, java
   2. server side: εντολές που εκτελούνται στον υπολογιστή που φιλοξενούνται οι ιστοσελίδες και πριν στείλει τα δεδομένα στον client. Τέτοιες γλώσσες είναι συνήθως η php, asp, asp.net, python κ.α.

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

2. Το Web 3.0

3. Τι είναι html editor.

   1.  Εφαρμογές στον υπολογιστή μας: σημειωματάριο, https://atom.io/, notepad++, http://bluegriffon.org/, https://www.sublimetext.com/)
   2. Online:
      • https://www.tutorialspoint.com/online_html_editor.php (με επιλογή εμφάνισης σε κινητό, ΗΥ, tablet)
      • https://www.w3schools.com/tryit/
      • https://codepen.io/
      • Μέσα από το περιβάλλον διαχείρησης των Plesk και Cpanel ( συστήματα διαχείρισης των πακέτων φιλοξενίας) μας δίνεται η δυνατότητα να ανοίξουμε και να διορθώσουμε αρχεία html, php κλπ.
   3. OXI Word, Wordpad ή Writer!
   4. Εγκατάσταση του Visual Studio Code

4. 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

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

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

html:5

• • Δημιουργία απλή ιστοσελίδες με επίδειξη των βασικών ετικετών html, head, title, body

Μια παρουσίαση του 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/

Γ’ Μέρος

Elements και Attributes

HTML Elements

Βασικά elements

*Δεν είναι case sensitive

html, head, body

H1, h2, h3, H4, H5, h6

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

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

img

a

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

<textarea> attributes

<ol> attributes

start=””

reversed

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

σε button, input, option, select, textarea

Value attribute σε <select>

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

<select>
<option value=””>… <  </option>

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ο Μάθημα