Introduction

Websites are built using HTML (HyperText Markup Language). Here is an example of a simple web page. This is the code for that page:

<html>
    <head>
        <title>Example Web Page</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>This is a simple web page.</p>
        <p>Return to <a href="https://spiders.coolcherrycream.com/">Spider's Web Tutorials</a></p>
    </body>
</html>

You can view the HTML code of almost any website by right clicking on an empty space on the page and choosing View Page Source. Some websites disable right click to try to prevent you from viewing the code, but your web browser (eg. Internet Explorer or Firefox) likely has an option somewhere in its menus to view the page source.

HTML is written in plaintext editors (like Notepad) or in programs designed specifically for programming (like Microsoft FrontPage or Dreamweaver). Programs like Microsoft Word are not meant for writing HTML. You can create your own website by copying and pasting the above code into Notepad, saving the file as "index.html", and then opening the file in your browser. If you make changes to the file and then refresh the page in your browser, you will be able to see the changes immediately.

Elements

Websites are made up of many different elements, like links, images, buttons, and tables. Each element has a name, which is enclosed in less than and greater than symbols. For example <button> represents a button. Sometimes, this is referred to as a tag.

If an element contains text, the element is represented by an opening tag, followed by the text, followed by a closing tag. For example <button>Click Here</button> displays a button that looks like this:

Here are some of the most common elements you may encounter.

Paragraph

<p>TEXT</p>

Line Break
Line 1
Line 2

Line 1<br>Line 2

Bold

<b>TEXT</b>

Underline

<u>TEXT</u>

Italic

<i>TEXT</i>

~~Strikethrough~~

<del>TEXT</del>

Heading 1

<h1>TEXT</h1>

Heading 2

<h2>TEXT</h2>

Heading 3

<h3>TEXT</h3>

Heading 4

<h4>TEXT</h4>

Heading 5

<h5>TEXT</h5>

Heading 6

<h6>TEXT</h6>

Small Text

<small>TEXT</small>

Blockquote

<blockquote>TEXT</blockquote>

Marquee

<marquee>TEXT</marquee>

<button>TEXT</button>

Horizontal Rule

<hr>

Nested Elements

Elements can contain other elements.

Paragraph with one bold word

<p>Paragraph with one <b>bold</b> word</p>

Text that is both bold and italic

<b><i>Text that is both bold and italic</i></b>

Some elements are always used alongside other elements. For example, lists have list items, and tables have rows and columns.

Bulleted List

Item 1
Item 2

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Numbered List

Item 1
Item 2

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Table

First Row, Column 1	First Row, Column 2
Second Row, Column 1	Second Row, Column 2

<table>
    <tr>
        <td>First Row, Column 1</td>
        <td>First Row, Column 2</td>
    </tr>
    <tr>
        <td>Second Row, Column 1</td>
        <td>Second Row, Column 2</td>
    </tr>
</table>

Attributes

Any element may have attributes that provide additional information about that element. For example, if you want to display a link to another page, you would use an <a> tag, like so: <a>Click Here</a>. However, that code only indicates the type of element and the link text; we need to use an attribute to specify where the link leads.

Link

<a href="https://example.com" target="_blank">TEXT</a>

href: The address of the page you want to link to.
target: Open page in new window.

<img src="URLHERE" alt="TEXT" height="100" width="150">

src: The link to the image.
alt: Alternative text. This text is used to help visually impaired users understand what the image represents.
height: Change 100 to another number.
width: Change 150 to another number.

Elements with attributes can also be nested.

<a href="https://example.com" target="_blank"><img src="IMAGEURL" alt="TEXT" height="100" width="150"></a>

href: The address of the page you want to link to.
src: The link to the image.
alt: Alternative text. This text is used to help visually impaired users understand what the image represents.
height: Change 100 to another number.
width: Change 150 to another number.
target: Open page in new window.

Styling Elements

HTML is mainly used to describe the meaning of text on the page. To change the appearance or style of an element, you would typically use CSS. However, you can also sometimes use HTML to style elements.

Align Left

<p align="left">TEXT</p>

Align Center

<p align="center">TEXT</p>

Align Right

<p align="right">TEXT</p>

Font Color, Family, and Size

<font color="RED" face="COMIC SANS MS" size="4">TEXT</font>

color: Change RED to another color.
face: Change COMIC SANS MS to a different font name.
size: Change 4 to another number from 1 to 7.

Horizontal Rule

<hr width="80%" size="4" color="GREEN">

width: The width of the line.
size: The thickness of the line.
color: The color of the line.