Return to HTML 5

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

2o Μάθημα: Βασικά στοιχεία της HTML

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.
    • Είναι πολύ πιο φιλικές στη διαχείριση για απλούς χρήστες (π.χ. υπάλληλο εταιρίας που ανεβάζει προσφορές ή αλλάζει τιμές). Δεν απαιτείται κάποιος να είναι πληροφορικός με ειδικές γνώσεις.
    • Να γίνει επίδειξη
Διευκρίνηση για front-end, back-end, client side, server side
  • Επειδή έγινε ερώτηση για το ποια η διαφορά front-end, back-end, client side και server side, να δειχθεί:
    • το front-end που βλέπουν οι επισκέπτες  https://nikmavr.sites.sch.gr
    • μετά από login, το back end , που βλέπει ο διαχειριστής της ιστοσελίδας https://nikmavr.sites.sch.gr
    • ΔΙΕΥΚΡΙΝΗΣΗ I: σε αρκετά sites, όταν κάνουμε login, βλέπουμε το ίδιο περιβάλλον με το front-end αλλά εμφανίζονται πλεόν και τα εργαλεία διαχείρισης π.x. fecebook.
    • ΔΙΕΥΚΡΙΝΗΣΗ ΙΙ: ορισμένες online υπηρεσίες, δεν έχουν front-end (εκτός από τα πεδία για όνομα χρήστη και κωδικού) όπως το gmail.
    • ΚΑΙ τα δύο παραπάνω τα βλέπει ο χρήστης (απλός επισκέπτης ή διαχειριστής) από τον φυλλομετρητή ή αλλιώς browser που χρησιμοποιεί (π.χ. firefox, chrome, safari, opera κλπ).  Οπότε εκτελούνται στην πλευρά του client. Δηλαδή όταν βλέπουμε κάτι στον browser είναι κώδικας client side και κατά 99%  είναι HTML, CSS και Javascript
    • Και το front-end και το back-end, που τα βλέπει ο client/επισκέπτης/διαχειριστής εκτελούνται στον υπολογιστή του ΑΛΛΑ τα στέλνει ο server στον οποίο έχουμε τη σελίδα μας.
    • Να δείξω, μέσα από περιβάλλον plesk του server, τα αρχεία php που τρέχει ο server,  τη Β.Δ. και να επισημάνω ότι ο server τελικά θα εκτελέσει τα php αρχεία (ή .asp  π.χ. w3schools ή node.js κ.α….) θα στείλει HTML, CSS και javascript στον πελάτη/client.
  • Να γίνει ενημέρωση ότι για μια ιστοσελίδα χρειαζόμαστε:
    • domain name (αναφορά στο κόστος)
    • χώρο φιλοξενίας (αναφορά στο κόστος)

 

Τι λειτουργικό σύστημα χρησιμοποιείτε; https://strawpoll.com/polls/BDyNjqw0WyR

2. Νέα ύλη

ΠΗΓΕΣ

  1. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure
  2. https://www.w3schools.com/html/html_elements.asp
Συζήτηση
  • Σημαντικό: τι ιστοσελίδες μπορούμε να φτιάξουμε μόνο με HTML-CSS;. Μπορούμε να τις πουλήσουμε;
  • Που χρειάζεται η γνώση html-css σε δυναμικές ιστοσελίδες;
    Απ.: Το interface θα εμφανιστεί αναγκαστικά με html-css.
  • Html, css, javascript παντού (από υπολογιστές, smart tvs, εφαρμογές video on demand όπως netflix, disney+, vodafone tv, μενού σε οθόνες αυτοκινήτων, έξυπνα ρολόγια – bands,  μέχρι οθόνες ψυγείων κλπ)

VScode (Visual Studio Code)

  • Δημιουργία φακέλου για 2ο μάθημα
  • Δημιουργία αρχείου index.html
  • .html ή .htm?

Τα παραπάνω να γίνουν μέσα από το VScode αλλά και από την Εξερεύνηση των Windows

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

  • Χρήση doctype, html, head, body, h1, h2, …, h6, p

ΠΡΟΣΟΧΗ: χρησιμοποιούμε εσοχές! Οι εσοχές είναι για εμάς, όχι για τον φυλλομετρητή/browser ο οποίος αγνοεί τις εσοχές, τα κενά (SPACE) και τις αλλαγές γραμμής (ENTER) . Για αυτόματη μορφοποίηση πατάμε: Shift+Alt+F 

  • Αποθήκευση
  • Χρήση preview
  • Βασικά στοιχεία https://www.w3schools.com/html/html_basic.asp
    • <!DOCTYPE html> που δηλώνει ότι το αρχείο που δημιουργούμε περιέχει HTML5. To γράφει αυτόματα ο VScode με “!!!“
    • <html> ο γονέας όλης της ιστοσελίδας
    • <head>
        • <meta charset=”UTF-8″> η κωδικοποίηση της σελίδας. .The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!
          Tο γράφουμε και  <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
        •     <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> . Viewport είναι η περιοχή της σελίδας που βλέπει ο χρήστης. Αφορά την προσαρμογή του περιεχομένου στην οθόνη που χρησιμοποιεί ο επισκέπτης (περισσότερα εδώ). Θα το χρησιμοποιήσουμε με CSS για τη δημιουργία responsive ιστοσελίδων.
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
        • <meta http-equiv=”refresh”  content=”5;url=https://nikmavr.sites.sch.gr” />για αυτόματη μετάβαση σε άλλη ιστοσελίδα μετά από 5 sec. Στο VScode γράφουμε meta:redirect.
        • <meta name=”keywords” content=”HTML, CSS, JavaScript”>   ΠΛΕΟΝ ΔΕΝ λαμβάνονται υπόψη γιατί χάκαραν σελίδες και έβαζαν δικά τους keywords και οι search engines σταμάτησαν να τα εξετάζουν.
        • html lang=”en-US” , html lang= “el-GR”. Το πρώτο στοιχείο δείχνει τη γλώσσα και το δεύτερο την χώρα
        • <meta name=”description” content=”Free Web tutorials for HTML and CSS”>
        • <title>Όνομα καρτέλας</title> ΠΡΟΣΟΧΗ! το βάζουμε πάντα γιατί εμφανίζεται ως όνομα καρτέλας αλλά  και σαν όνομα σελιδοδείκτη (bookmark).
  • https://www.w3schools.com/html/html_elements.asp
  • Τα πιο πολλά elements αποτελούνται από το δύο ετικέτες. Προσοχή να κλείνουμε τα elements
    Υπάρχουν ΑΔΕΙΑ elements και έχουν μόνο την ετικέτα αρχής(δηλαδή, δεν έχουν ετικέτα τέλους και έτσι δεν περικλείουν κάτι) π.χ. <doctype>, <br>
  • elements > tags, κενά elements (έχουν μόνο ένα tag)
    • What’s in the head? Metadata in HTML
    • !DOCTYPE (κενό element),
    • meta
    • html,
    • body,
    • title,
    • h1-h6 (προσοχή στο S.E.O.)
    • p (lorem)
    • br [ΠΡΟΣΟΧΗ! ο φυλλομετρητής αγνοεί κενά (εκτός από το πρώτο) , ENTER και TAB]
    • span (container για παρέα)
    • div (container που δεν κάνει παρέα)
  • Γιατί χρειαζόμαστε την δομή; Ένα ωραίο παράδειγμα για την ανάγκη της σήμανσης σε μία ιστοσελίδα: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure
    Το αναπαράγουμε με μια ελληνική συνταγή . Ας θεωρήσουμε ότι θέλουμε να ανεβάσουμε μια συνταγή στην σελίδα ενός εστιατορίου που μόλις παραδώσαμε στον ιδοκτήτη. Ο ιδιοκτήτης μας παρακάλεσε να βάλουμε σε μία ξεχωριστή σελίδα τη διάσημη συνταγή του εστιατορίου για τους φίλους και πελάτες. Μας δίνει το παρακάτω (πηγή: https://www.gastronomos.gr/syntagh/gioyvarlakia-aygolemono/189792/):
Γιουβαρλάκια αυγολέμονο

Tα γιουβαρλάκια στην πιο ωραία εκτέλεσή τους, με αυγολέμονο, μυρωδικά και λίγα φλέικς μαύρης τρούφας. Ένα πολύ νόστιμο πιάτο, αντιπροσωπευτικό της comfort κουζίνας.


Υλικά
Μερίδες: 6-8

    1.000 γρ. μοσχαρίσιος κιμάς από ελιά
    320 γρ. ρύζι γλασέ
    2 ξερά κρεμμύδια, ψιλοκομμένα
    6 φρέσκα κρεμμυδάκια, ψιλοκομμένα (χωριστά το λευκό από το πράσινο μέρος)
    1/2 μάτσο άνηθος, ψιλοκομμένος (ξεχωριστά τα κοτσάνια από τα φύλλα) + λίγος επιπλέον, για το σερβίρισμα
    1/2 μάτσο μαϊντανός, ψιλοκομμένος (ξεχωριστά τα κοτσάνια από τα φύλλα)
    50 ml ελαιόλαδο
    1 φύλλο δάφνης
    χυμός από 2 λεμόνια
    5 αυγά
    αλάτι, φρεσκοτριμμένο πιπέρι


Διαδικασία

    Για να φτιάξουμε τα γιουβαρλάκια αυγολέμονο, ξεκινάμε μουσκεύοντας το ρύζι για 5 λεπτά σε ένα μπολ με άφθονο κρύο νερό. Το στραγγίζουμε και το χωρίζουμε σε δύο μέρη: 250 γρ. για τον κιμά και 70 γρ. για τη σούπα.
    Σε ένα μπολ βάζουμε τον κιμά, το λευκό μέρος από τα φρέσκα κρεμμυδάκια, τα 250 γρ. ρύζι, τον άνηθο και τον μαϊντανό. Αλατοπιπερώνουμε και ζυμώνουμε καλά τα υλικά σε ομοιογενή μάζα. Πλάθουμε γιουβαρλάκια με μέγεθος όσο ένα καρύδι.
    Σε μεγάλη κατσαρόλα σοτάρουμε στο ελαιόλαδο τα ξερά κρεμμύδια με τα ψιλοκομμένα κοτσάνια των μυρωδικών και τη δάφνη για 2-3 λεπτά, μέχρι να μαλακώσουν.
    Τακτοποιούμε πάνω τους τα γιουβαρλάκια και προσθέτουμε νερό τόσο ώστε να φτάσει μέχρι τη μέση. Αφήνουμε να πάρουν μία βράση, χαμηλώνουμε τη φωτιά, αλατοπιπερώνουμε και σιγομαγειρεύουμε για 40 λεπτά με κλειστή κατσαρόλα.
    Ρίχνουμε τα 70 γρ. ρύζι και μαγειρεύουμε για άλλα 20 λεπτά.

Αυγολέμονο

    Χτυπάμε με το μίξερ τα ασπράδια μέχρι να γίνουν αφράτη κρέμα (δεν πρέπει να σχηματιστούν σφιχτές κορφές).
    Σε άλλο μπολ χτυπάμε τους κρόκους μέχρι να αφρατέψουν. Τους ρίχνουμε σταδιακά στη μαρέγκα, ανακατεύοντας για να ενωθούν.
    Με μια κουτάλα ρίχνουμε σταδιακά και σε αργή ροή όσο περισσότερο καυτό ζωμό από την κατσαρόλα μπορούμε μέχρι τα αυγά να ζεσταθούν.
    Ρίχνουμε τον χυμό λεμονιού, σείουμε ξανά, διορθώνουμε το αλατοπίπερο, αν χρειάζεται, και σερβίρουμε τα γιουβαρλάκια πασπαλίζοντας κάθε μερίδα με επιπλέον άνηθο.


Μυστικά

Για πιο ιδιαίτερη γεύση, πασπαλίζουμε το πιάτο με λίγα φλέικς μαύρης τρούφας.

Η συνταγή πρωτοδημοσιεύτηκε στο περιοδικό Γαστρονόμος, τεύχος 200.

Εάν το βάλουμε μέσα στην ιστοσελίδα προφανώς μέσα στο element <body>, τότε αν ανοίξουμε τη σελίδα με έναν browser θα δούμε το εξής:

Γιουβαρλάκια αυγολέμονο Tα γιουβαρλάκια στην πιο ωραία εκτέλεσή τους, με αυγολέμονο, μυρωδικά και λίγα φλέικς μαύρης τρούφας. Ένα πολύ νόστιμο πιάτο, αντιπροσωπευτικό της comfort κουζίνας. Υλικά Μερίδες: 6-8 1.000 γρ. μοσχαρίσιος κιμάς από ελιά 320 γρ. ρύζι γλασέ 2 ξερά κρεμμύδια, ψιλοκομμένα 6 φρέσκα κρεμμυδάκια, ψιλοκομμένα (χωριστά το λευκό από το πράσινο μέρος) 1/2 μάτσο άνηθος, ψιλοκομμένος (ξεχωριστά τα κοτσάνια από τα φύλλα) + λίγος επιπλέον, για το σερβίρισμα 1/2 μάτσο μαϊντανός, ψιλοκομμένος (ξεχωριστά τα κοτσάνια από τα φύλλα) 50 ml ελαιόλαδο 1 φύλλο δάφνης χυμός από 2 λεμόνια 5 αυγά αλάτι, φρεσκοτριμμένο πιπέρι Διαδικασία Για να φτιάξουμε τα γιουβαρλάκια αυγολέμονο, ξεκινάμε μουσκεύοντας το ρύζι για 5 λεπτά σε ένα μπολ με άφθονο κρύο νερό. Το στραγγίζουμε και το χωρίζουμε σε δύο μέρη: 250 γρ. για τον κιμά και 70 γρ. για τη σούπα. Σε ένα μπολ βάζουμε τον κιμά, το λευκό μέρος από τα φρέσκα κρεμμυδάκια, τα 250 γρ. ρύζι, τον άνηθο και τον μαϊντανό. Αλατοπιπερώνουμε και ζυμώνουμε καλά τα υλικά σε ομοιογενή μάζα. Πλάθουμε γιουβαρλάκια με μέγεθος όσο ένα καρύδι. Σε μεγάλη κατσαρόλα σοτάρουμε στο ελαιόλαδο τα ξερά κρεμμύδια με τα ψιλοκομμένα κοτσάνια των μυρωδικών και τη δάφνη για 2-3 λεπτά, μέχρι να μαλακώσουν. Τακτοποιούμε πάνω τους τα γιουβαρλάκια και προσθέτουμε νερό τόσο ώστε να φτάσει μέχρι τη μέση. Αφήνουμε να πάρουν μία βράση, χαμηλώνουμε τη φωτιά, αλατοπιπερώνουμε και σιγομαγειρεύουμε για 40 λεπτά με κλειστή κατσαρόλα. Ρίχνουμε τα 70 γρ. ρύζι και μαγειρεύουμε για άλλα 20 λεπτά. Αυγολέμονο Χτυπάμε με το μίξερ τα ασπράδια μέχρι να γίνουν αφράτη κρέμα (δεν πρέπει να σχηματιστούν σφιχτές κορφές). Σε άλλο μπολ χτυπάμε τους κρόκους μέχρι να αφρατέψουν. Τους ρίχνουμε σταδιακά στη μαρέγκα, ανακατεύοντας για να ενωθούν. Με μια κουτάλα ρίχνουμε σταδιακά και σε αργή ροή όσο περισσότερο καυτό ζωμό από την κατσαρόλα μπορούμε μέχρι τα αυγά να ζεσταθούν. Ρίχνουμε τον χυμό λεμονιού, σείουμε ξανά, διορθώνουμε το αλατοπίπερο, αν χρειάζεται, και σερβίρουμε τα γιουβαρλάκια πασπαλίζοντας κάθε μερίδα με επιπλέον άνηθο. Μυστικά Για πιο ιδιαίτερη γεύση, πασπαλίζουμε το πιάτο με λίγα φλέικς μαύρης τρούφας. Η συνταγή πρωτοδημοσιεύτηκε στο περιοδικό Γαστρονόμος, τεύχος 200.

Με τα όσα μάθαμε τι θα πρέπει να κάνουμε;

Υπόδειξη

χρησιμοποιήστε τα elements:  h1, h2, p, ul, ol, il, strong, p, hr

Attributes

Τα elements έχουν attributes=γνωρίσματα ή ρυθμίσεις. Παίρνουν τιμές και αλλάζουν τα elements ή προσθέτουν κάποιες πληροφορίες για το element.

Για παράδειγμα <meta charset=”UTF-8″>

Τα attributes:

  • δηλώνονται ως ζευγάρι name=”value”
  • μπορεί να είναι μόνο για ένα element
  • μπορεί να είναι για μερικά elements
  • Μπορεί να είναι για όλα τα elements (δείτε τη λίστα  https://www.w3schools.com/tags/ref_attributes.asp)
  • ένα element μπορεί να έχει αρκετά attributes.
  • attributes βάζουμε μόνο στην αρχική ετικέτα (tag)

Ξεκινάμε κλασσικά:

  • <a> anchor
      • Σε εξωτερική σελίδα και
      • σε σελίδα του site
  • <img>

Στο body περιγράφουμε τα:
1. https://www.w3schools.com/html/html_links.asp
2. https://www.w3schools.com/html/html_images.asp

Η νέα δομή και τα νέα elements  στην HTML5

Permanent link to this article: https://nikmavr.sites.sch.gr/%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/