LearningHTML.github.io

A Website to Learn about HTML with inline CSS

Live Website URL: https://qehs-websites.github.io/LearningHTML.github.io/

See https://github.com/QEHS-Websites/Introductory-HTML for specific details

Grading Schemes: Click Here

---

NOTE

• Mr. Mercer challenged himself to write websites for a year, not using other tools
• These lessons are the result of that challenge

See Radio ONE, CBC, March 2018 for an interview.

---

Grading ... (remember minimum expectation is inline CSS, additional option inline JavaScript)

• Minimum Expectations of Each Page: https://github.com/QEHS-Websites/Introductory-HTML#html-with-inline-css-boilerplate-checklist-and-template-creation
• Full Summary Expectation: https://github.com/QEHS-Websites/Introductory-HTML/blob/main/HTML_Summary.txt

Mr. Mercer's Teaching Exemplar: https://qehs-websites.github.io/LearningHTML.github.io/

• Also see: https://github.com/QEHS-Websites/LearningHTML.github.io
• Must have all pages (your version and your creativity) in Organized List

Progressions (See GitHub for Full Explanation)

• Choose between locally hosted and public facing repository (.github.io)
• If Public-facing, activate GitHub Pages
• Create Repository and Project Folder with Basic Website Folder-Organization and Files
• Annotating ReadMe.md Files with GitHub Markdown (starting in Other End-unit projects)
• Text Data, Click Here to jump below

Using https://github.com/QEHS-Websites/Introductory-HTML

• Create index.html & boilerplate
• Create Template.html with Footer Quote
• Modify index.html to match website page structure, responsive design, and Flexbox for Sematic HTML Tags
• Copy and rename childPages Template.html as needed for experimental pages
• Create Hyperlinks from index.html and test links to experimental pages
• Link any additional pages you have created in childPages

Pages you should have:

• Index page (with Responsive Design, Hyperlinks, and Flexbox)
• All Experiment Pages listed in the index.html as an ordered list

Resources

• https://github.com/QEHS-Websites/Introductory-HTML
• https://github.com/QEHS-Websites/LearningHTML.github.io
• https://qehs-websites.github.io/LearningHTML.github.io/

---

Text Data

Title for the Project

Webpage Building

10 Word Summary

Building a Webpage to Learning about Building

Date Started

20201118 | November 18, 2020

Author

Mark Mercer

50-word Description of the Website

This website is used to demonstrate how to build a webpage, and then how to build a website using only HTML and a little inline CSS. Emphasized will be hyperlinks, HTML Tags for formatting, Images, Video links to YouTube and other media files, and some enrichment. We will create a template file for additional child pages to illustrate more information.

---

To Include

Imbedding Videos: https://www.w3schools.com/css/css_rwd_videos.asp

---

Rubric Schemes

Folder & Files

• [] Project Folder: index.html, multiple folders with ReadMe.md files, template.html

End User

• [] Evidence of coded navigation
• [] Titles and optional Images
• [] Hyperlinks work, Text formatting looks good, Lists and other organization
• [] Mandatory Hyperlinks: Image Lesson (2 images sized differently), Index Page with Flexbox
• [] Optional: Experimental Pages

Atom

• [] Meta Data: Google Indexing Information
• [] Using Browser based formatting (H, semantic code)

---

Progressions

• Create Repository with Public-Facing Website (Private is possible, see Mr. Mercer)
• Reminder: github.io must be in name
• Open in Atom
• Add index.html
• Ensure Update in GitHub Desktop
• Visually check GitHub
• Enable GitHub Pages: Settings / Pages / Change None to Main / Save
• Open the Publicly Facing Website to ensure Hello World is visually there
• Open the index.html file in ATOM.io
  • boilerplate: HTML, title, Hello World in body
  • View on Publicly Facing Webpage
  • HEAD
  • BODY: Semantic Tags, Google Sematic Tags and show image of what a template looks like
  • FOOTER & Quotation, plus special symbols
• Create Folders and File Structure in Atom
  • childPages / childTemplate.html
    • retitling TAB as template, header titled template, delete description and keywords from meta data
  • Images / ReadMe.txt
  • Videos / ReadMe.txt
  • Media / ReadMe.txt
  • Misc / ReadMe.txt

---

Completing the Different Experimental Pages to understand HTML & inline CSS with Flexbox

• Index.html: create lessons and hyperlinks, use rest of HTML Tags
• Index.html: creating different lessons
• After H's explored, go back and adjust index.html
• Overwrite with vw units and demonstrate how these will change in a viewport

---

Understanding What the Semantic Tags are...

• Purpose: take how a blind person might use their imagination to "see" your website "knowing" where the Sematic Tags are located ...
• Purpose: take your content and place it in your Semantic Tags
• Develop your understanding of Semantic Tags and how these layout as divisions in your index.html & childTemplate.html pages
• https://www.w3schools.com/html/img_sem_elements.gif
• http://tutorials.jenkov.com/images/html5/semantic-elements.png
• https://assets.hongkiat.com/uploads/html-5-semantics/document-outline-example.jpg
• And this website has an image that is downloadable, scroll to "Example: A Semantic Outline": https://www.hongkiat.com/blog/html-5-semantics/
• And see Mr. Mercer about this exemplar website if you do not know how to execute this locally: https://github.com/Dev-Outreach/Introduction-Static-HTML

---