Skip to content

Creating a simple webpage

Jump to bottom
Kristina edited this page Nov 2, 2017 · 1 revision

Building an simple HTML page is fairly easy. Just open a text editor on your computer and paste the following HTML text into it. If using Windows you can use Notepad.

<html lang=”en-US”>
   <head>
      <title>Title of Website</title>
   </head>
   <body>
      This is the text that will show up on page
   </body>
</html>

Save the file as index.html. Make sure sure you change the Save As Type dropdown to All Files.

To open the web page go to File -> Open File in your browser (IE and Firefox) and select the file that you just created.

For Firefox and IE you will need to hit the Alt button on your keyboard to display the file menu bar.

Firefox save memu

With Chrome just drag the file into the Chrome window and it should load the page.

Breaking down the HTML

The first line of code in the file you created is a DOCTYPE declaration – <!DOCTYPE html>. This declaration must be the first line in the file and tells the browser what version of HTML the page is written in. The declaration in the code above tells the web browser that the page is written using HTML 5 which is the latest version of HTML as of now. If the page was written using HTML 4.01 and did not use presentation or deprecated elements in the code then you will see this DOCTYPE declaration <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> instead.

Over time the HTML language is changed with new tags being added and other tags being removed. The DOCTYPE declaration is important because it tells the web browser what version of HTML it should load the page as.

The next thing that should be in your html file is the <html tag. Website are built using elements called tags. The <html> text that you see on the screen is what is called a tag. The html tag tells the browser that this is an HTML document and is the container for all the other tags on the page.

In HTML there are two types of tags

  • Void elements also knownBuilding an simple HTML page is fairly easy. Just open a text editor on your computer and paste the following HTML text into it. If using Windows you can use Notepad.
<html lang=”en-US”>
   <head>
      <title>Title of Website</title>
   </head>
   <body>
      This is the text that will show up on page
   </body>
</html>

Save the file as index.html. Make sure sure you change the Save As Type dropdown to All Files.

To open the web page go to File -> Open File in your browser (IE and Firefox) and select the file that you just created.

For Firefox and IE you will need to hit the Alt button on your keyboard to display the file menu bar.

Firefox save memu

With Chrome just drag the file into the Chrome window and it should load the page.

Breaking down the HTML

The first line of code in the file you created is a DOCTYPE declaration – <!DOCTYPE html>. This declaration must be the first line in the file and tells the browser what version of HTML the page is written in. The declaration in the code above tells the web browser that the page is written using HTML 5 which is the latest version of HTML as of now. If the page was written using HTML 4.01 and did not use presentation or deprecated elements in the code then you will see this DOCTYPE declaration <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> instead.

Over time the HTML language is changed with new tags being added and other tags being removed. The DOCTYPE declaration is important because it tells the web browser what version of HTML it should load the page as.

The next thing that should be in your html file is the <html tag. Website are built using elements called tags. The <html> text that you see on the screen is what is called a tag. The html tag tells the browser that this is an HTML document and is the container for all the other tags on the page.

In HTML there are two type as self closing tags

  • The < br /> tag which adds a line break is a void tag
  • Normal tag
    • All normal tags have an opening tag that looks like this <tag name> and an closing tag that looks like </tag name>

The html tag is a normal tag and has a opening tag located at the beginning of the document and closing tag at the end of the document. All normal HTML tags must have a closing tag or else the page may not load correctly

The next tag you is the head tag. The information between the head opening tag (<head>) and the closing tag (</head>) tag is not displayed on the page.

The head section is where you would put the following information:

  • Links to CSS files which are used to style the page
  • Meta data information which is used by search engines to search for the page
  • JavaScript files which are used to add additional functionality to the page and set the page title.
  • Title of the web site

The text between the <title> and </title> tag is what is displayed on the tab of the browser. Try not to choose a title that is too long because it will be cut off.

The next tag that listed after the head closing tag is the body tag (<body>). Everything in between the body opening tag (<body>) and closing tag (</body>) is what is displayed on the page in the browser. In this case whenever you load the page you will see the following text This is the text that will show up on page.

Always Learning

Clone this wiki locally