Introduction

To

HTML

What IS

HTML?

Common HTML Terms

Element

Tag

Attribute

Doctype

Our First Web Page

Create a File & Folder

Create a new folder called `first-web-page`
Open your text editor
Create a new file and save it as first.html
Type the following in the file and click save :

 hello, this is my first web page

Structuring the Document

<!doctype html>
<html>
  <body>
    hello, this is my first web page
  </body>
<html>

Adding some Structure

<!doctype html>
<html>
  <body>

    <h1>hello</h1>

    <p>This is my first web page.</p>
  </body>
<html>

Adding The Head

<!doctype html> <html>
  <head>
    <title>My Awesome Website</title>
  </head>
    <body>
    <h1>hello</h1>

    <p>This is my first web page.</p>  </body>
<html>

A Second Heading & A List

<!doctype html> <html>
  <head>
    <title>My Awesome Website</title>
  </head>
    <body>
    <h1>hello</h1>

    <p>This is my first web page.</p>    <h2>My favorite foods</h2>   <ul>      <li>Pizza</li>      <li>Oysters</li>      <li>Cheeseburgers</li>    </ul>  </body><html>

Our Second Page

In the same directory create a new file called second.html

Our Second PAge

<!doctype html> <html>
  <head>
    <title>My Awesome Website</title>
  </head>
    <body>
    <h1>Page No. 2</h1>

    <p>This is my second web page.</p>  </body>
<html>

Link to Our First Page

<!doctype html> <html>
  <head>
    <title>My Awesome Website</title>
  </head>
    <body>
    <h1>hello</h1>

    <p>This is my second web page.<a href="first.html">Visit my first.</a>        </p>  </body>
<html>

Link TO An Outside PAge

<!doctype html> <html>
  <head>
    <title>My Awesome Website</title>
  </head>
    <body>
    <h1>hello</h1>

    <p>This is my second web page.<a href="first.html">Visit my first</a>         or look at <a href="http://dmd1070.github.io/">our course web     site</a> </p>  </body>
<html>

Activity

Create a third page. Link all three pages to one another.

Common

HTML Tags

Paragraphs

 <p>This is a paragraph</p>

Headings

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Emphasis & Strong

<em>Emphasis, aka italics</em>
<strong>Strong, aka bold</strong>

Lists

 <ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
    <li>Unordered list item 3</li>
</ul>

<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
    <li>Ordered list item 3</li>
</ol>

Links

<a href="http://dmd1070.github.io/">This is an external link</a><a href="about.html">This is an internal link</a>

Images

 <img src="pizza.jpg">

Comments

 <!-- This is a comment. Anything put here will not appear on the page -->

The Basic HTML Page Template

https://github.com/DMD1070/html-template

VAlidating

http://validator.w3.org

Example VAlid vs. Invalid

Valid

<p>This is <strong><em>really</em></strong> great.</p><p><a href="link.html">Link text</a></p>

Invalid

<p>This is <strong><em>really</strong></em> great.</p><p><a href="link.html">Link text</p></a>

Activity

Marking up a document