HTML and CSS

Questions

  • Where did HTML come from?
  • What kinds of things can HTML pages contain?
  • How do I create headings? Lists? Tables? Links?
  • How do I include images?
  • How can I change the appearance of elements on a page?
  • How can I reference specific elements on a page?

Introduction

History

Formatting

Text

Escape Sequence Character
&lt; <
&gt; >
&amp; &
&copy; ©

Pages

<html>
  <head>
    <title>This text is displayed in the browser bar</title>
  </head>
  <body>
    <h1>Displayed Content Starts Here</h1>
    <p>
      This course introduces core features of <em>JavaScript</em>
      and shows where and how to use them.
    </p>
    <!-- The word "JavaScript" is in italics (emphasis) in the preceding paragraph. -->
  </body>
</html>

Attributes

Lists

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>
<ol>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
  1. first
  2. second
  3. third

Tables

<html>
  <head>
    <title>Lists and Tables</title>
  </head>
  <body>
    <table>
      <tr> <th>Alkali</th>   <th>Noble Gas</th> </tr>
      <tr> <td>Hydrogen</td> <td>Helium</td>    </tr>
      <tr> <td>Lithium</td>  <td>Neon</td>      </tr>
      <tr> <td>Sodium</td>   <td>Argon</td>     </tr>
    </table>
  </body>
</html>
Lists and Tables
Alkali Noble Gas
Hydrogen Helium
Lithium Neon
Sodium Argon
<a href="http://gvwilson.github.io/js-vs-rc/">This course</a>
<a href="https://nodejs.org/">Node.js</a>
<a href="https://facebook.github.io/react/">React</a>

Images

<img src="./html5.png" alt="HTML5 Logo with local path"/>
<img src="https://github.com/gvwilson/js-vs-rc/blob/master/src/htmlcss/html5.png" alt="HTML5 logo online"/>

Cascading Style Sheets

<html>
  <body>
    <h1 align="center">Heading is Centered</h1>
    <p>
      <b>Text</b> can be highlighted
      or <font color="coral">colorized</font>.
    </p>
  </body>
</html>
<html>
  <head>
    <link href="simple-style.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="title">Heading is Centered</h1>
    <p>
      <span class="keyword">Text</span> can be highlighted
      or <span class="highlight">colorized</span>.
    </p>
  </body>
</html>
h1.title {
  text-align: center;
}
span.keyword {
  font-weight: bold;
}
.highlight {
  color: coral;
}
<html>
  <head>
    <link href="selector-style.css" rel="stylesheet" />
  </head>
  <body>
    <p>
      First <span id="major">keyword</span>.
    </p>
    <p class="details">
      Full <span id="minor">explanation</span>.
    </p>
  </body>
</html>
#major {
  text-decoration: underline red;
}
#minor {
  text-decoration: overline blue;
}
.details {
  font-style: italic;
}

Bootstrap

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      div {
        border: solid 1px;
      }
    </style>
  </head>
  <body>

    <div class="jumbotron text-center">
      <h1>Page Title</h1>
      <p>Resize this page to see how the layout adjusts dynamically.</p>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <h2>First column is 4 wide</h2>
          <p>Text here goes</p>
          <p>in the column</p>
        </div>
        <div class="col-sm-8">
          <h2>Second column is 8 wide</h2>
          <p>Text over here goes</p>
          <p>in the other column</p>
        </div>
      </div>
    </div>

  </body>
</html>

Challenges

Cutting Corners

What does your browser display if you forget to close a paragraph or list item tag like this:

<p>This paragraph starts but doesn't officially end.

<p>Another paragraph starts here but also doesn't end.

<ul>
  <li>First item in the list isn't closed.
  <li>Neither is the second.
</ul>
  1. What happens if you don’t close a ul or ol list?
  2. Is that behavior consistent with what happens when you omit </p> or </li>?

Mix and Match

  1. Create a page that contains a 2×2 table, each cell of which has a three-item bullet-point list. How can you reduce the indentation of the list items within their cells using CSS?
  2. Open your page in a different browser (e.g., Firefox or Edge). Do they display your indented lists consistently?
  3. Why do programs behave inconsistently? Why do programmers do this to us? Why? Why why why why why?

Naming

What does the sm in Bootstrap’s col-sm-4 and col-sm-8 stand for? What other options could you use instead? Why do web developers still use FORTRAN-style names in the 21st Century?

Color

HTML and CSS define names for a small number of colors. All other colors must be specified using RGB values. Write a small JavaScript program that creates an HTML page that displays the word color in 100 different randomly-generated colors. Compare this to the color scheme used in your departmental website. Which one hurts your eyes less?

Units

What different units can you use to specify text size in CSS? What do they mean? What does anything mean, when you get right down to it?

Key Points

  • HTML is the latest in a long line of markup languages.
  • HTML documents contain elements (represented by tags in angle brackets) and text.
  • Elements must be strictly nested.
  • Elements can contain attributes.
  • Use escape sequences beginning with ampersand to represent special characters.
  • Every page should have one html element containing a head and a body.
  • Use <!--…--> to include comments in HTML.
  • Use ul and ol for unordered and ordered lists, and li for list elements.
  • Use table for tables, tr for rows, th for headings, and td for regular data.
  • Use <a href="…">…</a> to create links.
  • Use <img src="…" alt="…" /> to include images.
  • Use CSS to define appearance of elements.
  • Use class and id to identify elements.
  • Use selectors to specify the elements that CSS applies to.