My HTML Handcoding! Awesomeness!


click here

xoxo Erin


For Next Class (3/15)

  • Read Journalism Next – Chapters 1 and 2. (No, seriously, read it, it’ll help you understand HTML).
  • Find a portfolio site / multimedia site that you really like the design of and POST IT IN THE COMMENTS. (Try doing research on what other Journalism schools are doing).
  • Prepare your accounts. Make sure they work and that you can login with SSH Secure Shell. Refer to this link if you need assistance:
  • Get started on your CSS Hand Coding 1 assignment. It is due 3/20.

HTML Overview & things to know


Websites are a collection of related web pages.

All websites include the following components:

  • HTML
  • CSS
  • Interactive Programming
  • Audiovisual Content


HTML is the predominant markup language for all web pages that all browsers read to understand the site. It’s the language that both the programmer and the browser both understand, so that the programmer can tell the browser how it wants the site structured.

Basic Structure:

<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN””&gt;

<html xmlns=””&gt;

Title Goes Here



<h1>headline goes here</h1>

<p>Text goes here</p>



All HTML code is contained within two basic HTML elements:

  • Head: <head> … </head>
  • Body: <body> … </body>

The HEAD Tag
The head tag contains:

  • Document type and coding standards to be communicated to the web browser
  • The title of the web page
  • The web page description
  • Keywords
  • CSS (look of the pages)

The BODY Tag
The body tag contains:

  • ALL of your content, including text, audiovisual, etc.

Semantic markup is the HTML that defines what specific items are in an HTML document. This is the coding that tells your browser and your style sheets that something is a heading, a paragraph, an image, etc. Examples:

  • Heading <h>
  • Paragraph <p>
  • Bold <b>
  • Underline <u>
  • Italic <i> or Emphasis <em>
  • Images <img src=”___.jpg”>

Audiovisual content includes:

  • Image files
  • Audio files
  • Movie files


  • Image files
  • Audio files
  • Movie files
  • Flash
  • Java Script

What’s most important to remember is that web pages don’t actually contain these elements directly. Instead, they contain links to these files that automatically download when a person opens up a page. This is why some websites are slower to load than others. Sites with large audiovisual files take a bit longer to download the content.