Section 2: More HTML and Intro to CSS

CSE 154

Agenda

  • Using Semantic HTML Tags
  • How to Add Style to your Webpage with CSS
  • Time to Work on CP1 and "Demo GitGrade Submission"

Lingering Git/Atom issues?

Check out this REALLY awesome FAQ written by our TA Jack!

Exercise 1 (HTML): What Semantic Tags Should I Use?

Remember: Dive down below for each exercise!

What semantic tags do you see in this page?

Wikipedia screenshot

What semantic tags do you see in this page?

New York Times screenshot

Exercise 2: Wireframing

Programming is always easier when you've got a plan! For this exercise we will be collaborating to create a wireframe for this website.

A wireframe is a way to represent what you want a website to look like before you start coding it. You will want to annotate it with things like colors, possible links, images, and other features you want to add to it.

A good wireframe might look something like this:

Wireframes sketched in a notebook

Source: https://www.flickr.com/photos/148443584@N05/33875203552

Exercise 3: Styling our about.html page with style.css

Cascading Style Sheets (CSS): <link> 

<head>
...
  <link href="filename" rel="stylesheet" />
...
</head>

HTML (template)

<link href="style.css" rel="stylesheet" />

HTML (example)

CSS describes the appearance and layout of information on a web page (as opposed to HTML, which describes the structure for content)

Basic CSS Rule Syntax

selector {
  property: value;
  property: value;
  ...
  property: value;
}

CSS (template)

p {
  color: red;
  font-family: sans-serif;
}

CSS (example)

Demo: What Rules Should We Apply To about.html?

MDN has a great list of CSS properties to look through!
Beware, it is a bit long.

Time to Work on CP1

Demo: Submitting CP1 on GitGrade

Note: You should re-submit once you've finished all the requirements by Saturday at 11PM!

Steps to follow when submitting an assignment

  1. Check your code in the validators to catch errors.
  2. git add, commit and push the files
  3. Go to your gitlab repository and make sure your submission is uploaded.
  4. Go to the course website page with the assignment and hit the "turn in" button.
  5. Turn in the assignment on that page. (this can be done multiple times. We will grade the most recent one)

Resources, Looking Ahead & Extra Practice

Debugging In The Browser

Guide to using the Chrome Inspector

Extra Practice: GOT Selectors

Directions: Use the given HTML code and CSS selector tool on the slide below to improve your skills in CSS selectors!

NOTE: We will be visiting context selectors (AKA combinators) in depth during Friday's lecture as well as the beginning of next week, but it could be a useful exercise to gain some early familiarity! 


<!DOCTYPE html>
<html>
  <head><title>GOT FTW</title></head>
  <body>
  <h1>Game of Thrones Page</h1>
  <div id="intro">
    <h2>Introduction</h2>
    <p>Game of Thrones is the best series ever!</p>
  </div>
  <div id="content">
    <div class="bordered">
      <p>
        There are five books: A Game of Thrones, A Clash of Kings, a Storm of Swords, a Feast for Crows, and a Dance with Dragons.
      </p>
    </div>
    <h2>Houses</h2>
    <ul>
      <li>House Stark</li>
      <li>House Targaryen</li>
      <li>House Lannister</li>
      <li>House Tully</li>
    </ul>
    <h2>Plot</h2>
    <p>It's too long to describe. Just read the books!</p>
  </div>
  <div id="footer">
    <h2 class="bordered">Thank you!</h2>
  </div>
  </body>
</html>

HTML

Write a CSS selector here for:

  1. all h2 elements
  2. element with ID intro
  3. h2 elements inside intro
  4. h2 elements inside content and footer
  5. p elements inside content
  6. p elements directly inside content
  7. elements with class bordered
  8. h2 elements with class bordered

GOT Selectors: Solutions

  1. all h2 elementsh2
  2. element with ID intro#intro
  3. h2 elements inside intro#intro h2
  4. h2 elements inside content, footer#content h2, #footer h2
  5. p elements inside content#content p
  6. p elements directly inside content#content > p
  7. elements with class bordered.bordered
  8. h2 elements with class borderedh2.bordered

Extra practice: (HTML and CSS): CSS Stands For...?

Given the following HTML, what HTML and CSS would be necessary to produce the expected output below? (You can download the HTML here). 


            <h1>CSS: Corgis, Short &amp; Sweet</h1>

HTML

CSS: Corgis, Short & Sweet

output

  • The "CSS" text is green, underlined and 40pt font.
  • Both "Short" and "Sweet" have a cursive font type.
  • Any text that is not green/purple has a color of #444.
  • The "short" text is all lower-case and has a font-size of 14pt.
  • The "Sweet" text is purple and italicized.

Note: you may add <span> tags as appropriate to get the desired output.

Exercise 3: Solution


                  

                    CSS: Corgis,
                    Short &amp;
                    Sweet

HTML

h1 {
  color: #444;
}

#css-abbr {
  color: green;
  font-size: 40pt;
  text-decoration: underline;
}

#short, #sweet {
  font-family: cursive;
}

#short {
  font-size: 14pt;
  text-transform: lowercase;
}

#sweet {
  color: purple;
  font-style: italic;
}

CSS