Return to HTML 5

HTML: 3o μάθημα

Επανάληψη

  • Σημαντικό: τι ιστοσελίδες μπορούμε να φτιάξουμε μόνο με HTML-CSS;. Μπορούμε να τις πουλήσουμε;
  • Html, css, javascript παντού (από υπολογιστές μέχρι οθόνες ηλεκτρικών συσκευών) και φυσικά είναι η βάση των δυναμικών ιστοσελίδων
  • Να δειχθεί πως ενεργοποιούμε την εμφάνιση των καταλήξεων των αρχείων στην εξερεύνηση των windows.
  • VScode (Visual Studio Code)
  • OK με την εγκατάσταση και το HTML preview extension;
  • .html ή .htm;
  • Elements: https://www.w3schools.com/html/html_elements.asp
  • Attributes: https://www.w3schools.com/html/html_attributes.asp
  • doctype, html, head, title, body, h1, h2, …, h6, lorem, p, br,
  • a, href, target
  • img, src, alt, height, width

 

Ύλη

  • Δημιουργία φακέλου 3rdLesson
  • Δημιουργία index.html και γρήγορη στήσιμο άδειας ιστοσελίδας:
html:5  ή !

διαφορετικά:

δημιουργει ένα άδειο html αρχείο χωρίς το element <!DOCTYPE html> γράφοντας

doc
    • html lang=”en-US” , html lang= “el-GR”. Το πρώτο στοιχείο δείχνει τη γλώσσα και το δεύτερο την χώρα
    • 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!
    • meta http-equiv=”X-UA-Compatible” content=”IE=edge” αφορά  τη συμβατότητα για παλαιούς browsers π.χ. ΙΕ8 (περισσότερα εδώ και εδώ). Μπορεί να παραληφθεί.
      meta name=”viewport” content=”width=device-width, initial-scale=1.0″. Viewport είναι η περιοχή της σελίδας που βλέπει ο χρήστης. Αφορά την προσαρμογή του περιεχομένου στην οθόνη που χρησιμοποιεί ο επισκέπτης (περισσότερα εδώ)
  • Δημιουργία φάκελο με images
  • Να γίνει στα γρήγορα μια σελίδα με h1, δύο h2, 2 παραγράφους, 2 εικόνες με τα σχετικά link τους
  • https://www.w3schools.com/html/html_paragraphs.asp
    • προσοχή στα κενά και στις αλλαγές γραμμές
    • για αλλαγή γραμμής <br> και για κενά (space ή διάστημα) γράφουμε &nbsp;
    • αναφορά στο div και στο span
  • https://www.w3schools.com/html/html_styles.asp
  • https://www.w3schools.com/html/html_formatting.asp
  • https://www.w3schools.com/html/html_quotation_elements.asp 
    • <blockquote> for Quotations  [παραπομπή/αναφορά στην πηγή]
    • <q>  για αναφορά σε λόγια τρίτου [βάζει εισαγωγικά]
    • <abbr> for Abbreviations [συντομογραφία]
    • <cite> [αναφορά έργου π.χ. πίνακα, ποιήματος κλπ. Δεν το βάζουμε για τον δημιουργό]
  • https://www.w3schools.com/html/html_comments.asp
    • VScode: CTRL+/ για μετατροπή ενός ολόκληρου element  σε σχόλιο
  • https://www.w3schools.com/html/html_links.asp
    • Σχετικά και απόλυτα urls
    • Να γίνει παράδειγμα σε νέο αρχείο html
    • Να γίνει παράδειγμα με εικόνα
    • περισσότερα για τις τιμές του attribute target εδώ.
  • https://www.w3schools.com/html/html_links_bookmarks.asp
  • https://www.w3schools.com/html/html_images.asp

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