On the previous page we used a <link> tag to link to our favicon, or the picture located on the tab at the top of the browser. We can use the same <link> tag to link our HTML page to an external CSS page. to do this, we simply write:

<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />

To learn more about CSS, please go to our CSS section.

Once we have done all of this, we are ready to build our webpage! HTML webpages are mainly filled with html tags similar to the ones we have already been using. To begin building our webpage, we start by defining the body of our webpage. The body of the webpage is basically all of the content that you will see in the browser window.

To define the body, we simply add a starter <BODY> tag, and corresponding </BODY> tag. These tags are not a part of the head, and therefore belong after the head tag. However, they are still a part of our HTML page, and therefore must be before the </HTML> tag.

Once we enter our <BODY> and corresponding </BODY> tags, anything we add between these tags will appear on our webpage. If you simply typed your name in between these two tags, your name would appear on the webpage. Try it now! Just don’t forget to save your file before opening it. Also, don’t forget to refresh your browser! Your code now should look something like mine:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Hello, world!</TITLE>
<link rel=”shortcut icon” href=”favicon.ico” />
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” /><!- -this is optional- ->
</HEAD>
<BODY>
Jacob Morris
</BODY>
</HTML>

NOTE: the text I added that states “this is optional” is only a comment. Every programming language has their own way of adding comments in their code that won’t be read. In HTML, you can add a comment by adding a “<” followed by an exclamation point and two dashes (-). Once you add your comment, you end with two dashes and a “>”.

Once we have this, let’s try to link to a page outside of our own!

Previous Next

Startup Discount
Small Business?
Contact us for an Enormous Discount!