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

HTML 5

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

Α’ μέρος

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

Κανένα!

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

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

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

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

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

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

  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 εντολές”

Τι είναι browsers

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

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

Β’ Μέρος

  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 κ.α.

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

https://strawpoll.com/polls/poy9RbLW8nJ

  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:
    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
  • Μπορούμε να δημιουργήσουμε επαγγελματικές ιστοσελίδες μόνο με 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
    • Δημιουργία νέων αρχείων και φακέλων μέσα από το CScode
    • Επίδειξη δημιουργίας βασικής ιστοσελίδας με
html:5
    • Δημιουργία απλή ιστοσελίδες με επίδειξη των βασικών ετικετών html, head, title, body

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


Γ’ Μέρος

Elements και Attributes

HTML Elements

HTML Elements

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

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

HTML Attributes

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

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

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

Βασικά 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

Ερώτηση: Γιατί δεν χρησιμοποιώ μόνο το “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>

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

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

 


 

Permanent link to this article: http://users.sch.gr/nikmavr/%cf%80%cf%81%ce%bf%ce%b3%cf%81%ce%b1%ce%bc%ce%bc%ce%b1%cf%84%ce%b9%cf%83%ce%bc%cf%8c%cf%82/html/

HTML: 2o μάθημα

1. Επανάληψη Διαδίκτυο Ιστοσελίδες: www, παγκόσμιος ιστός Επίδειξη της βασικής δομής μιας ιστοσελίδας https://www.w3schools.com/html/html_intro.asp Κλικ στο reference για doctype Χρήση elements, άδεια elements  Ερωτηματολόγιο για χρήση Αγγλικών στο https://strawpoll.com/ url Στατικές ιστοσελίδες: html, css, javascript Δυναμικές: γενικά όπου πρέπει να κάνω login. Θέλουν βάση δεδομένων. Έχουν front end και back end. Είναι πολύ πιο φιλικές …

HTML: 3o μάθημα

Επανάληψη Σημαντικό: τι ιστοσελίδες μπορούμε να φτιάξουμε μόνο με HTML-CSS;. Μπορούμε να τις πουλήσουμε; Html, css, javascript παντού (από υπολογιστές μέχρι οθόνες ηλεκτρικών συσκευών) και φυσικά είναι η βάση των δυναμικών ιστοσελίδων Να δειχθεί πως ενεργοποιούμε την εμφάνιση των καταλήξεων των αρχείων στην εξερεύνηση των windows. VScode (Visual Studio Code) OK με την εγκατάσταση και …

HTML: 4o μάθημα

Επανάληψη Δημιουργία αρχείου test.html, εικόνες, p, lorem, strong, i, <q>  για αναφορά σε λόγια τρίτου [βάζει εισαγωγικά] <abbr> for Abbreviations [συντομογραφία] <cite> [αναφορά έργου π.χ. πίνακα, ποιήματος κλπ. Δεν το βάζουμε για τον δημιουργό] CTRL+/ για μετατροπή ενός ολόκληρου element σε σχόλιο inline style παραδείγματα Ερωτηματολόγιο για το λειτουργικό σύστημα https://strawpoll.com/polls Ενημέρωση για το μάθημα …

HTML: 5o μάθημα

Επανάληψη Πίνακες Λίστες επιπλέον: ol>li*3 reversed Δημιουργία favicon Χρώματα Να δημιουργηθεί φάκελος Lesson5 και αρχείο colors.html. Να δημιουργηθούν 5 h1 με διαφορετικό background-color και διαφάνεια. Ύλη Block και inline Elements  https://www.w3schools.com/html/html_blocks.asp Δημιουργία αρχείου BlockInline.html Φόρμες/ Εισαγωγή δεδομένων Εμφανίζονται διαφορετικά σε διαφορετικούς browsers. Προσπαθούμε ο χρήστης να γράφει όσο το δυνατόν λιγότερο. Να σκέφτεται λιγότερο (να …

HTML: 6o μάθημα

Επανάληψη Block και inline elements p, div span, strong Form Γρήγορη αναφορά σε form, label (!!!), input text, date, week, month, time, color, number, password, email, textarea, submit, reset (https://www.w3schools.com/html/html_form_input_types.asp) Νέα ύλη Συμπληρωματικά: <select> και <option> για δημιουργία μενού selected (για προεπιλογή), size (πόσα θα εμφανίζονται), multiple(δυνατότητα πολλαπλών επιλογών) <fieldset> και<legend> για περίγραμμα φόρμας και …

HTML: 7o μάθημα

Επανάληψη Visual Studio Code: εγκαταστήστε το “live server” extension VScode settings Files: Auto Save -> after delay Files: Auto Save Delay -> 5008 Σωστή επιλογή input type (σημαντικό!) form  > fieldset > legend Built-in form validation στην HTML5 media (video, audio) διαφορές: url σελίδας url video με το <a> url video με χρήση <video …