Craft Meaningful HTML

  1. Introduction

    • Craft Meaninful HTML; People have been using the most commonly used tags: <div>, <span>, <script>, <image>, and <a> and not a lot of the other tags out there.
    • Working with CodePen; CodePen is a web site where people could make their own websites with javascript, html, css, and other things online and other peple can also see their projects too.
    • Working with VS Code; We will move code from CodePen to the visual studio app from time to time, but we don't have to use it so I will use sublime.

  2. Convert Content to Semantic HTML Markup

    • Explore content and add it to CodePen; We read the Dressing up a salad text file and moved it to CodePen.
    • Identify major elements of a page; We have identified the main page elements, now we can use those elements to create the page better.
    • Identify headings and paragraphs; We have found the headings that would be there depending on what the content is, along with the paragraphs.
    • Enhance an article with emphasis and links; We have put down the <em> and <strong> in their correct spots along with the link tag <a>.
    • Ordered, unordered, and definition lists; We put an unordered list in the aside, and a definition list in the acids area.
    • Challenge: First pass at article markup; Missed the <em>, and <strong> tags, and didn't put an unordered list where there could have been one.
    • Solution: First pass at article markup; Fixed all that up.

  3. Build the Rest of the Webpage

    • Move your code from CodePen to Visual Studio Code (VS Code); Got to watch her move the file to VS Code, but I am using sublime.
    • Understand the head code; I sort of know what each part of the head is besides the title (I already know all about it).
    • Add semantic navigation; Added a navigation bar.
    • Add images, figures, and figure captions; Added all that.
    • Add footers with address, time, and date; Added that in the footer.
    • Add quotes, line breaks, and citations; Did it on CodePen since their are no quotes on the Two Trees Olive Oil.
    • When to use div and span elements; Did them on CodePen
    • Challenge: Identify semantic problems; Looks pretty good
    • Solution: Identify semantic problems;Didn't put Nav into a UL list, forgot header, apparently there was a abbreviation tag too, didn't need to put a OL over the DL, changed the inside quotes with blockquotes, organized the Follow us: part in a UL