Επανάληψη
- Σημαντικό: τι ιστοσελίδες μπορούμε να φτιάξουμε μόνο με 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 ή διάστημα) γράφουμε
- αναφορά στο 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
