Skyscraper
CS 1371 Lab 2 - HTML
Home   –   Assignment   –   How to: HTML | CSS | Validate | SFTP   –   Templates
Basics Mailform Sample Resources

HTML Sample

You can copy and paste this into a plain text editor such as Note Pad, TextEdit, or any similar program. Make sure you are in plain text mode. This means that all rich text controls, such as bold, italic, underline, colors, and the like are not only turned off, but the options are not even given to you.

DO NOT use Microsoft Word or any other "fancy" word processor. The fewer features, the better.

A note to OSX users that will be using text edit:
In OSX start TextEdit and do the following: Open the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change these.

When you save, name the file with a .html extension. This lets the computer know that you've written html, not just text. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Web Page Title Here</title>
<link rel="stylesheet" type="text/css" media="screen" href="cssSampleReal.css" />


</head>
<body>

<h1>This is a Big Heading</h1>

<p>
This is a generic paragraph.
This text will appear on the same line as the previous text.
<br />
This text will appear a line down from the previous text.
</p>

<h3>This is a medium sized heading Heading</h3>


<p class="special">
This is a paragraph with a CSS class of special
</p>

<table>
 <tr>
  <td>This is the top left table cell</td>
  <td>This is the top right table cell</td>
 </tr>
 <tr>
  <td>This is the middle left table cell</td>
  <td>This is the middle right table cell</td>
 </tr>
 <tr>
  <td colspan="2">This is a big cell that takes up the whole bottom row</td>
 </tr>
</table>

<br />
<a href="http://www.google.com" title="This is a tooltip. Hover to see it.">
This is a link to Google</a>


</body>
</html>

This is what the above code looks like after it has been saved. (It's meant to be used in conjuction with the CSS Sample. CSS Code Only)