WordPress and HTML

Class Tuesday, September 17, 2019

 Today’s Goals:

  • Finish your page on the class website (go here  for directions and log-in link)
  • Learn more about WordPress
  • Start looking at HTML
  • Figure out what’s different about the class website

 Today’s featured website:

  • https://humans.fyi/ – This gallery of personal websites is inspirational and informative. Click on a site to see a color palette and the technology used to create it.

 More About WordPress

  • Let’s look at the HTML that was generated as you built your page. While you were adding text, images, and links in the Visual Editor on your page, the code was being added, which you can see by clicking on the Text tab on the top right of your page editor.
  • Let’s also look at the Visual Editor and click on some of the menu options. Then we will switch the view to the Text Editor to see the code. Let’s add headings, a link, an image, bold text, italicized text, and bullets (numbered and no numbers).
  • HTML code
    Let’s find the tags for images, bullets, headlines, and links
  • Is it easy to add images? Why or why not? What happens with image sizes? What is a good way to make sure your image is sized properly, not just for a WordPress page but for any webpage?
  • When you’re in your page editor, is there anything on your screen that you’re curious about?
  • What are your WordPress questions?
  • What is the most important thing you have learned about using WordPress to create your own page on the class website?

 HTML

  • What are HTML tags and why do we have to use them?
  • What characters on your keyboard are used in an HTML tag? (hint- 4 types)
  • Let’s view the code of this site  created by a student last year to answer the following questions:
    1. What is the head section?
    2. What is the body section?
    3. What is the title tag? Where can you see it?
    4. Where is the CSS on the page?
    5. How does CSS look different than HTML?
  • HTML summary: Let’s check this out here 
  • Let’s view and edit the code of a website using X-Ray Goggles . We will install this into our Chrome bookmarks bar and activate it by clicking on it in the bookmarks bar.
  • Are you actually changing the code of the website? How do you know?