What is HTML?

Hyper Text Markup Language

A Text file containing tags that markup content to be displayed on the Worl Wide Web.
A tag is found in brackets… <h1>What is HTML?</h1>.
Tags tell the browser how to display the content.

Create your first HTML Page!

Open Notepad
- Start - Accessories - Notepad
- Notepad is a simple text editor
Type the following...
- <html>
  <head>
  <title>My First HTML Page</title>
  </head>
  <body>
  This is my first page. <strong>Whatcha Think??</strong>
  </body>
  </html>
Save the file as firstpage.htm
Open the firstpage.htm in Internet Explorer
- Open I.E.
- File - Open - Browse to the file and click open

You've just hand wrote your own HTML page! Don't you feel cool??

HTML Basics

Every HTML page must start and end with <html>....</html>. This marks the beginning and end of your HTML file.
HTML pages have two distinct parts, the head <head>...</head> and the body <body>...</body>. The head is not displayed in the browser window and contains the title along with any other header information. Everything found within the body tag is what you will actually see in the browser.
Every tag normally has a closing tag. and should be closed in proper order.
- For example... <em><strong>I'm all italics and bold!</strong></em>
  Instead of... <strong><em>I'm all italics and bold!</strong></em>
Tags should always be lowercase.
HTML files always have an htm or html file extension.

Basic HTML Tags

Headings

Heading tags are used to identify the HTMLs, yes you guessed it, Headings. They range from level 1 to 6, with 1 being the largest.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

As you can see the header tags automatically add a new blank line after the heading.

Add at least two headings to your first HTML page.

Paragraphs

The paragraph tag, <p> is used to identify a paragraph by placing a new blank line after the </p> tag.

Line Breaks

the <br> tag tells the browser to start a <br>
new line.

Lists

There are two main types of lists in HTML, the ordered and unordered lists. Lists are actually defined by two diffirent tags, the first identifies the start of the list and what type of list it is. The other identifies the list items themselves.

<ul>
<li>I'm a list item</li>
<li>I'm another list item</li>
</ul>

Looks like

I'm a list item
I'm another list item

<ol>
<li>I'm a list item</li>
<li>I'm another list item</li>
</ol>

Looks like

I'm a list item
I'm another list item

Add a list of your favorite website (at least 2) to your first HTML page.

Tables

Tables are used for many puroses in HTML, from displing tabular data to creating advanced layouts for an HTML page. Tables actually contain three tags and have attributes. The beginning of the table is marked with the table tag <table>. Then you define a table row, <tr> and rows are made up of table cells, <td>. Think of an Excel spreadsheet structure, this is what you are defining with HTML.

For Example...

Creates this...

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

In the above example <table border="1"> border is an attribute, it defines additional options for the tag. Other attributes exsist for not only the table tag but the table rows and cells themselves.