Return to HTML 5

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-CSS;. Μπορούμε να τις πουλήσουμε;
  • Που χρειάζεται η γνώση html-css σε δυναμικές ιστοσελίδες;
    Απ.: Το interface θα εμφανιστεί αναγκαστικά με html-css.
  • Html, css, javascript παντού (από υπολογιστές μέχρι οθόνες ηλεκτρικών συσκευών)
  • Ερωτηματολόγιο για την εμπειρία με γλώσσες προγραμματισμού web https://strawpoll.com/polls

 

Editors

 

VScode (Visual Studio Code)

  • Εγκατάσταση
  • Εγκατάσταση προσθέτων
    •  Εγκατάσταση HTML preview
  • Άνοιγμα
  • F1 > themes
  • Δημιουργία φακέλου
  • Δημιουργία αρχείου

Επισήμανση: Να δειχθεί πως ενεργοποιούμε την εμφάνιση των καταλήξεων των αρχείων στην εξερεύνηση των windows.

  • .html ή .htm?1η Άσκηση VS code
  • Δημιουργία αρχικής σελίδας index.html
  • Χρήση doctype, html, head, body, h1, h2, …, h6, p
  • Αποθήκευση
  • Χρήση preview και άνοιγμα με chrome
  • Βασικά στοιχεία https://www.w3schools.com/html/html_basic.asp
    • <a> anchor
      • Σε εξωτερική σελίδα και
      • σε σελίδα του site
  • <img> https://www.w3schools.com/html/html_elements.asp
  • Τα ποιο πολλά elements αποτελούνται από το δύο ετικέτες. Προσοχή να κλείνουμε τα elements
    Υπάρχουν ΑΔΕΙΑ elements και έχουν μόνο την ετικέτα αρχής(δηλαδή, δεν έχουν ετικέτα τέλους και έτσι δεν περικλείουν κάτι) π.χ. <doctype>, <br>

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-%ce%bc%ce%ac%ce%b8%ce%b7%ce%bc%ce%b1/