Rendering Technology

HTML5 and CSS

Randy J. Fortier
randy.fortier@uoit.ca
@randy_fortier

Outline

  • Hypertext Markup Language (HTML)
  • Cascading Stylesheets (CSS)
    • Styling
    • Layout
  • Document Object Model (DOM)
  • Responsive User Interfaces

HTML5 and CSS

Hypertext Markup Language

Hypertext Markup Language (HTML)

  • Stores the document/data
  • Should not contain any styling

Hypertext Markup Language (HTML)


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Document Title</title>
    <link rel="stylesheet" href="styles/main.css" />
    <script type="javascript" src="js/main.js"></script>
  </head>
  <body>
    <h1>Heading</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

HTML5 and CSS

Cascading Stylesheets

Cascading Stylesheets (CSS)

  • Determines how the browser will render the HTML
  • A series of rules
  • Purpose:
    • Styling
    • Layout

Cascading Stylesheets (CSS)


.logoText {
    font-family: 'Caveat';
}
body {
    padding-top: 50px;
    font-family: Montserrat;
}
                        

HTML5 and CSS

Document Object Model

Document Object Model (DOM)

  • Generated by the browser when parsing the HTML and CSS
  • Hierarchical (tree-shaped) data structure
  • The in-memory version of the document

Document Object Model (DOM)

DOM Tree

HTML5 and CSS

Responsive User Interfaces

Responsive User Interfaces

  • Viewports
    • Defines the default viewing area (and zoom level)
    • A common mistake is to just zoom out to show the entire web page
  • Zoomed 100%, setting page width to device's width:

<meta name="viewport" content="width=device-width, initial-scale=1" />
                        

Responsive User Interfaces

  • Does the same set and style of UI elements make sense on all screen sizes?
    • Television
    • Desktop/laptop
    • Tablet
    • Phone
  • Media queries to the rescue!

Responsive User Interfaces


<link rel="stylesheet" 
      href="styles/main.css" 
      type="text/css" />
<link rel="stylesheet" 
      href="styles/tablet.css" 
      type="text/css" 
      media="screen and (min-width: 701px) and (max-width: 800px)" />
<link rel="stylesheet" 
      href="styles/phone.css" 
      type="text/css" 
      media="screen and (max-width: 700px)" />
                        

Wrap-Up

  • In this section, we learned about:
    • HTML
    • CSS
    • DOM
    • Responsive UIs