<HTML/>

<h1>Hello</h1>

Getting Started

Open Notepad++ from your start menu and make save a new file with .html at the end. You can then press the launch in IE button to open a preview.

Making a Basic Template

<html>
    <head>
        
    </head>
    <body>

    </body>
</html>

Use the [TAB] key to indent your code to make it easier to read, however, it is not necessary.

Adding some text

<h1>My Page</h1>

<p>
    Some text about me...
</p>

<p>
    Some more text...
</p>

Put this in the body tags and see what happens...

Adding a title

<title>My Page</title>

Put this in the head tags

So far...

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>My Page</h1>
    <p>Some text about me...</p>
    <p>Some more text...</p>
  </body>
</html>

CSS

p {
    color: blue;
    background-color: green;
}

Adding Colours!

<style>
    p {
        color: blue;
    }
</style>

IDs and Classes

.myClass {
    color: red;
}
<p class="myClass">Paragraph 1</p>
<p class="myClass">Paragraph 2</p>
<p>Paragraph 3</p>
#text1 {
    color: red;
}

#text2 {
    color: green;
}

#text3 {
    color: blue;
}
<p id="text1">Paragraph 1</p>
<p id="text2">Paragraph 2</p>
<p id="text3">Paragraph 3</p>

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 1

Paragraph 2

Paragraph 3

Text Styles

<b>Bold Text!</b>

<i>Italic Text!</i>

<u>Underlined Text!</u>

Lists

<!-- List 1 -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<!-- List 2 -->
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Adding another page

<a href="secondpage.html">My Second Page</a>

Make another .html document in the same folder as your existing one and put some html inside. You can then link them together like this:

HTML

By Jake Walker

HTML

  • 600