html

Class Monday, September 30, 2019

 Today’s Goals:

  • Quick review: block and inline elements
  • Create an HTML table to display a partial Patriots’ football schedule
  • Learn how to create a favicon (image that appears next to page title in top of browser)
  • Preview: HTML Championships 

 Today’s featured website:

  Block and Inline Elements

  • Block elements take up as much space as they can (the full width of a page or container) and start on a new line (like paragraphs, headlines) while inline elements (the default display) only take up the space they need for the width of their content and don’t start on a new line (like images, links).
  • Let’s look at our practice webpage and identify the block and inline elements: paragraph, link, image, headline, iframe, bullets. What is each one? How can you tell?

 HTML Tables

  • Tables are mainly used on webpages to display data and other types of content that might commonly be put into a spreadsheet. You will learn later on this year how to make tables responsive and mobile-friendly.
  • Web developers often used tables before CSS was used to control the layout of webpages
  • Let’s look at some table examples: W3Schools.com  reference, this Code Pen example 
  • Code to know: Table tag table, table row tr, table cell/data td, and table header th
  • Table Practice
    1. Open up Notepad++ and start a new webpage with opening and closing html, head, title, and body tags.
    2. Save as tables.html
    3. Let’s start with the code from W3Schools . Only copy the table code and nothing else!
    4. We’re going to create a table that shows the next 5 Patriots games (four October games and one November game before the bye week). Schedule link: https://www.patriots.com/schedule/
    5. We will need to add 2 more rows and change the table headers to Date, Opponent, and Time.
    6. The first row should have 3 table headers that say Date, Opponent, and Time. Then, the second row should say October 6, Washington Redskins, 1:00 pm. We will continue to build our table like this using the schedule details.
    7. What problems do you think could happen when trying to view tables on small screens?

 Favicons

  • Favicons are the tiny icons next to your page title in the browser.
    • What’s ours on the class website?
  • Favicons are 16 x 16 pixels and the code for adding them goes into the <head> section
  • To make one for your website:
    • Download and save this image  in the same location as your webpage. OPEN IT by clicking on this image, RIGHT-CLICK on the image, choose SAVE IMAGE AS, and then make sure you save it in the SAME LOCATION as your webpage.
    • Save this file as favicon.png (will save automatically with that name if you don’t change anything)
  • Add the code
    • Now add this code to your <head> section to link your favicon to your webpage:
      • <link rel="shortcut icon" href="favicon.png">