HTML/CSS Review
Objectives
Practice
More Info.

Basic Structure of an HTML Document

HTML, or Hypertext Markup Language, uses what is called a tag structure to markup text. A tag consists of a command inside <> with a closing tag at the end of the block. In the above example, you can see four such pairs (html, head, body, title). HTML is not programming in the sense of logic, but is simply used to tell a web browser how to render text. In other words, we can specify if certain text should be bold or red or big, etc.

When the WWW started, HTML was kind of like the wild west: very few rules. In recent years, with the inception of smart phones and tablet devices, the W3C (World Wide Web Consortium) has created standards that should render similarly on a variety of browsers, platforms, and devices. Let's take a quick look at some of the standards represented in this document:
  1. The document begins with a !DOCTYPE singleton tag that specifies html as the document type
  2. Each of the tags is written in lowercase.
  3. Each tag is paired with a closing tag
  4. Tags are properly nested (interior tags close before exterior tags)
<!DOCTYPE html>
<html>
    <head>
        <title>This is the title</title>
    </head>
    <body>
        This is the main content.
    </body>
</html>

HTML 5

HTML 5 is the next generation of HTML. Built out of a need for simple, valid, cross browser, cross platform web applications, HTML 5 supports mobile devices and reduces/eliminates the need for multimedia plugins. HTML 5 also provides semantic markup to better identify the coded sections of a web page AND provides a means of storing data client side for web applications across pages. 
<div id='header'>
    <h2>Page Title</h2>
    <div id='nav'>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </div>
</div>
<div id='content'>
      Lorem ipsum...
</div>
<div id='footer'>
    copyright NewWebWorlds.com
</div>
<header>
    <h2>Page Title</h2>
    <nav>
         <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
  </nav>
</header>
<section>
    Lorem ipsum...
</section>
<footer>
    copyright NewWebWorlds.com
</footer>
The new semantic tags include:

Other Useful Tags


CSS Basics

CSS stands for Cascading Style Sheets. A style is a rule that tells the browser how to render a piece of html code. Styles should be used for design, while html should be used to structure content. CSS styles are written in type/value pairs where the type and value are separated by a colon (:) and multiple rules are separated by a semicolon (;).

Styles can be applied in many ways:
There are three ways to apply styles to an html element: external, internal and inline. External style sheets are used to apply styles on a site level basis. They are written in .css files and are included in the html document using the <link> element. The benefit of external style sheets is that styles can be applied to all pages in a site by linking the style sheet to each page. This makes sitewide changes fast and easy. <link type='text/css' rel='stylesheet' href='main.css' />
Internal styles are used to apply styles on a page level basis. They are written in the html file inside the <style> tags that should be located in the head element. If a page uses both an external and internal style sheet and there are conflicting rules, CSS dictates that the closest style will be the style applied. So, an internal style would take precedent over an external style.

Finally, inline styles are used to apply a style on an element level basis. They are written as an attribute of a tag. Inline styles are the most local version of a style, so, in the case of conflicting styles, an inline style will always take precedence.

CSS Types