HTML & CSS Primer

CS418 - Web Programming - Spring 2015

Old Dominion University

Mat Kelly (mkelly@cs.odu.edu)
http://www.cs.odu.edu/~mkelly/cs418

What this lecture will cover

  • Basic structure, DOCTYPEs, and semantics
  • HTML Forms
  • CSS Basics

An HTML Page


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>My Web Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <h1>My Web Page</h1>
    <h2>Home to my stuff</h2>
  </header>
  <nav>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
    </ul>
  </nav>
  <section id="section1">
    <h2>Welcome to Section 1!</h2>
    <p>A section of content!</p>
  </section>
</body>
</html>
					

DOCTYPEs w3c logo

  • HTML5:
    <!DOCTYPE html>
  • HTML 4.0.1 Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.1:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML head element

<head>
<meta charset="utf-8">
  <title>My Web Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
  • Defines page content's encoding
  • Location to supply metadata about web page
  • Reference to stylesheets (CSS), external or inline

HTML body element

<body>
  <header>
    <h1>My Web Page</h1>
    <h2>Home to my stuff</h2>
  </header>
  <nav>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
    </ul>
  </nav>
  <section id="section1">
    <h2>Welcome to Section 1!</h2>
    <p>A section of content!</p>
  </section>
</body>
  • Defines main content of the page
  • Use semantic markup

Web Standards &
Semantic Markup

  • Content/Structure (HTML), style (JavaScript), behavior (CSS)
  • Use CSS for position, color, etc.
    • Only tabular data in tables!
  • Align the purpose of the content/structure with an appropriate tag
    • e.g., <nav> for navigational items
  • Validate your HTML/CSS

HTML Forms

  • index.html

<form method="post" action="login.php">
	<label for="username">Username:</label>
	<input type="text" id="username" name="username" />
	
	<label for="password">Password:</label>
	<input type="password" id="password" name="password" />
	
	<input type="submit" />
</form>
					
  • method - refers to HTTP method (RFC 2616)
  • action - destination of submitted form
  • name - variable name used for value of input
  • type - UI element type

HTML form element types


<form method="post" action="login.php">
	<label for="username">Username:</label>
	<input type="text" id="username" name="username" />
	
	<label for="password">Password:</label>
	<input type="password" id="password" name="password" />
	
	<label for="state">State</label>
	<select name="state" id="state">
	  <option value="virginia">Virginia</option>
	  <option value="maryland">Maryland</option>
	  <option value="newyork">New York</option>
	</select>
	
	<label for="sex_male">Male:</label>
	<input type="radio" name="sex" value="male" id="sex_male" checked>
	<label for="sex_female">Female:</label>
	<input type="radio" name="sex" value="female" id="sex_female">
	
	<input type="submit" />
</form>
					

Even more form elements!

<input type="reset" value="Clear" />
  • Clears all set inputs in the form"
<input type="hidden" name="to" value="weigle" />
  • Used to maintain pseudo-state
  • Recall, HTTP does have state
<input type="checkbox" name="fries" value="wantsFries" />Fries
<input type="checkbox" name="coke" value="wantsCode" />Coke
  • For selecting multiple items

Reading submitted content

  • index.php (recall)

<?php
	$username = $_POST['username'];
	$password = $_POST['password'];
	// connect to the database, validate credentials, etc.
?>
					

Document Object Model (DOM)

  • Defines STRUCTURE of a representation
  • Tree-based
  • Basis for specifying elements in CSS/JavaScript
    • CSS:
      p {background-color: blue;}
      section > h1 {font-size: 24px;}
      
    • JavaScript:
      var navs = document.getElementsByTagName("nav");
      var mainNav = nav[0];
      var secondItem = mainNav.childNodes[1];
      

Sample DOM Diagram

DOM diagram

Identifying DOM elements - id

  • id for unique identification
    • HTML definition
      
      

      Lorem Ipsum

    • CSS association
      
      #myParagraph {color: red;}
      
    • JavaScript reference
      
      var myP = document.getElementById('myParagraph');
      

Identifying DOM elements - class

  • class for grouping
    • HTML definition
      
      

      Lorem Ipsum

      Another group's contents
      Dolor Sit Amet
    • CSS association
      
      .specialElements {text-decoration: underline;}
      
    • JavaScript reference
      
      var mySpecialElements = document.getElementsByClassName('specialElements');
      var secondSpecialElement = specialElements[1]; //note the array syntax
      

Cascading Style Sheets

  • Provides style to documents
  • Defined remotely or inline
    • Remotely in a separate file
      
      <link rel="stylesheet" type="text/css" href="myStyle.css"  />
      
    • Inline within the HTML document
      
      <style type="text/css">
      p {color: red;}
      p#myUniqueParagraph {font-family: 'Times', 'Georgia', sans-serif;}
      .myGroupedElements {color: green;}
      p.myGroupedElements {color: red;}
      </style>
      
  • Cascading?

    • Specificity defines precedence
      • inline style > id > class > element
    • <p>Hello</p> p {color: red;}

      Hello

      <p class="test">Hello</p> p {color: red;}
      p.test {color blue; background-color: yellow;}

      Hello

      <p class="test" id="myP">Hello</p> p {color: red;}
      p.test {color blue; background-color: yellow;}
      p#myP { background-color: orange;}

      Hello

      <p class="test" id="myP"
         style="color: white;">Hello</p>
      p {color: red;}
      p.test {color blue; background-color: yellow;}
      p#myP { background-color: orange;}

      Hello

      <p style="color: white;" id="myP">
       Hello <span>World</span>
       <em>!</em>
      </p>
      p#myP { background-color: orange;}
      p span {background-color: purple}

      Hello World!