CIS 115 - HTML and CSS Basics

Objectives

  • Review basic XHTML and HTML5 concepts
  • Review basic CSS concepts
  • Explain how XHTML/HTML5, CSS, and JavaScript are used together
  • Develop a template to base most web pages on

Basic web page template (HTML5)

Note in the example below how tags are used to create containers. For example, there is a body tag that starts a container (element) of content, and a corresponding /body tag that ends that container (element). Elements must be properly nested within each other. A few elements do not contain any content and therefore have no end tag. The link and meta elements are examples of that. In the example below, there are two p (paragraph) elements contained within the body element.

<!DOCTYPE html> <html lang="en"> <head> <title>Title of page</title> <meta charset="utf-8"> <link rel="stylesheet" href="style1.css"> <style> /* style rules go here */ </style> <script src="js1.js"></script> </head> <body> <p>This is where the displayable content goes.</p> <p>In this case there are two paragraphs.</p> </body> </html>

Structure of a tag

We will discuss whatever HTML tags we need in class. The basic structure tags for elements with and without content is given below:

  • <tagname attribute1="value1" attribute2="value2">content of element</tagname>
  • <tagname attribute1="value1" attribute2="value2">

HTML comments

<!-- comment (may be multiline) -->

CSS overview

  • CSS controls the appearance of X/HTML elements
  • CSS can be included inline as a value of the style attribute of an XHTML tag
  • CSS can be embedded by placing it in a style element in the head of a web document
  • an external CSS file (usually with a .css extension) can be added to a web page using a link tag in the head of a web document
  • div tags are often used for specifying block-level elements without having to use the formatting the automatically comes with p, h1, h2, h3, etc. tags
  • HTML5 has a number of new elements such as article, section, aside, nav, details, summary, figure, header, footer, etc.
  • span tags are often used for specifying inline elements so that styles can be applied to them
  • class names are used to specify styles for potentially many elements that have the same class name; specified using a . (period)
  • id names are used to specify styles for a single element that has that unique id; specified using a # (octothorpe, pound sign, hash mark, sharp)

How it all fits together

  • XHTML (eXtensible HyperText Markup Language) or HTML5 is used to provide the structure and content of a web page
  • CSS (Cascading Style Sheets) is used for presentation, specifying the page's appearance
  • JavaScript controls the behavior of the web page

Examples of some HTML5 elements

  • a large heading: <h1>Text of heading</h1>
  • a slightly smaller heading: <h2>Text of heading</h2>
  • Note: There are six sizes of headings (h1, h2, h3, h4, h5, h6 in decreasing size/importance)
  • a paragraph: <p>Text inside paragraph</p>
  • a link: <a href="http://xkcd.com/">Link to online XKCD cartoon</a>
    The href value specifies where the link will go. The content of the "a" tag is what the user has to click on to use the link. The content is usually an image or text.
  • a list item (must be within a list): <li>Text of list item</li>
  • an unordered (bulleted) list: <ul> . . . list items would go here ... </ul>
    Example of an unordered list: <ul> <li>first item in list</li> <li>second item in list</li> <li>third item in list</li> </ul>
  • an ordered (numbered/lettered) list: <ol> . . . list items would go here ... </ol> Example of an ordered list: <ol> <li>first item in list</li> <li>second item in list</li> <li>third item in list</li> </ol>
  • a heading with an id: <h1 id="first">Text of heading</h1>
  • a heading with a class: <h1 class="green">Text of heading</h1>
  • an image: <img alt="description of image" src="URL_of_image">

Examples of some CSS rules

  • make the font color green for all "p" elements: p { color: green; }
  • make the text size 36 point for all "h2" elements: h2 { font-size: 36pt; }
  • highlight the element with the id "first": #first { background-color: yellow; }
  • highlight all elements with the class "green": .green { background-color: yellow; }