Make Your Own Websites - HTML Basics (Part 1)

6,921

44

34

Posted

Introduction: Make Your Own Websites - HTML Basics (Part 1)

This will be a multi-part guide on how to build your own websites. I will cover everything from basic HTML code, to the more advanced PHP code, to using GUI editors to make your process faster. This first part will cover using basic HTML to make simple pages.

I will assume you know basic computer terms, such as browser and server, but not necessarily specific code or things like HTML editor (or even HTML). If you don't know what they mean, look them up on the internet (I will defiantly assume you know what that means, as you are using it).

Also, I will not be posting pictures in this guide, as they are quite irrelevant. Instead, I will be providing links to web pages used as examples.

To view the code that the example web page used, right click anywhere in it and click either "View Source" or "Page Source" (depending on the browser).

Let's begin shall we?

Step 1: The Editor

In order to build a website, we need some sort of editor to use. This is where we will type and edit the code. Some editors allow you to view the web page as you type the code, and some are just plain text editors. Some will highlight syntax (another name for code).

If you can afford it, the best HTML editor you can buy (in my opinion) is Adobe Dreamweaver (formally Macromedia Dreamweaver). Other good editors include FrontPage (included in some versions of Microsoft Office) and CoffeeCup.

There are many free HTML editors out there though. I personally use KompoZer , it is free and similar to Dreamweaver. Another free one is Notepad (comes with every version of Windows), just remember to save the file with a .html ending instead of the default .txt.

Step 2: HTML?

If you haven't guessed already, the coding language we will be using in this guide is HTML. But what is HTML?

HTML stands for HyperText Markup Language. It is a very simple language that is a part of every website. Some people make full websites out of HTML, while others will add other code to it.

HTML uses a set of simple English words to make it easy for a person to write it. Words like body, img (image), head, and table are just a few examples.

Step 3: The Beginning of a Website

OK, now you have an editor and a little knowledge about HTML. Lets get started.

Open your editor and make sure you are on a page you can code (might be the source or code tab on GUI editors)

Make sure it is blank before starting. Some GUI editors add information to the code.

The beginning of every HTML page must start with the command <html>. This can be written as <HTML> <hTMl> <Html>. It doesn't matter. Capitals are exactly the same as lower case in html.

The ending of every page will end with </html>. The forward slash signifies the end of any command.

So far your page should look like this

*-*-*-* - Signifies code. Ignore the starts and dashes
<html>
</html>
*-*-*-*
View this as a webpage

Nothing to see so far, but technically this is a webpage.

Step 4: The Body of the Page, and Some Words

In order to put things in the main part of a web page, we must use the command <body> and the ending command </body>.

*-*-*-*
<html>
<body>
</body>
</html>
*-*-*-*

Still nothing to see. We must add some text in there. For text you just type what you want it to say. There may be only one space between each word (other spaces are ignored) and new lines (enter key) will also be ignored.

*-*-*-*
<html>
<body>
Hello World.
This will be on the same line as the Hello World.

So will this!
</body>
</html>
*-*-*-*
View it

At this point you will not be able to use certain symbols (such as the < and >). We will cover those later.

Step 5: Line Breaks

Until now we haven't been able to see our text on separate lines. This is easily fixed with the <br> command. The <br> command is one that does not need an ending command (there is no </br>). Some people feel it is more correct to use the command like <br />, which is still proper code. I personally find it a waste of time to add the extra slash in it.

Our code can now look like this.
*-*-*-*
<html>
<body>
Hello World.<br>
This will be on the second line.<br>
<br>
<br>
This will be on the 5th line.
</body>
</html>
*-*-*-*
View it

Step 6: Title the Page

If you look up at the top of the browser, you should see that it says "Make your own websites - HTML basics (Part 1) - Title the page - Instructables - DIY, How to,..." This is the title of the web page.

In order to change anything outside of the body, we must first use the <head> command (ending with </head>). This specifies that you are changing the header of the website, and not the body. The <head> command goes between the <html> and the <body>.

It should look like this:
*-*-*-*
<html>
<head>
</head>
<body>
Hello World.<br>
This will be on the second line.<br>
<br>
<br>
This will be on the 5th line.
</body>
</html>
*-*-*-*

To add a title to the page, we put the <title> and </title> in between the <head></head> tags (tag is another word for command in HTML). The title itself goes between the <title></title> tags.
*-*-*-*
<html>
<head>
<title>This is the title of the page</title>
</head>
<body>
Hello World.<br>
This will be on the second line.<br>
<br>
<br>
This will be on the 5th line.
</body>
</html>
*-*-*-*
View it

Step 7: Font

To change the font of the text we use...
... you guessed it. The <font> tag. As with most tags, the font tag has what I call subtags. They are little parameters that allow you to change something in that specific tag.

The font tag has many "subtags". Here are a couple common ones:
color - Allows you to change the color of the text. You can use regular words for colors (red, blue, etc) or you can use hexidecimal colors (#FF8CE3)
size - Changes the size of the font. You can use standard font size numbers, or you can say that you want it 3 font sizes bigger than the current font by typing +3.

The proper syntax is as follows <font color="red" size="+2"></font>. Subtags may be switched around in the tag. This would also be correct <font size="+2" color="red"></font> and would do exactly the same as the first one.

Lets put some font into our code.

*-*-*-*
<html>
<head>
<title>This is the title of the page</title>
</head>
<body>
Hello World.<br>
<font size="+2" color="red">This will be on the second line and will be bigger and red.</font><br>
<br>
<br>
<font color="blue">This will be on the 5th line and blue.</font>
</body>
</html>
*-*-*-*
View it

Step 8: Adding Pictures

Adding pictures is pretty simple. We will use the <img> tag. To display a picture you would type <img src="xxx.jpg">. After the src subtag, put the address to the picture (URL). You can only use JPG, PNG, or GIF (some browsers support more types of pictures, but these 3 are the standards).

Lets add a picture to our code:

******
<html>
<head>
<title>This is the title of the page</title>
</head>
<body>
Hello World.<br>
<font size="+2" color="red">This will be on the second line and will be bigger and red.</font><br>
<br>
<br>
<font color="blue">This will be on the 5th line and blue.</font>
<br><br>
Lets put the instructables robot in our sweet page.
<img src="https://www.instructables.com/files/deriv/FOI/P4EJ/FD80X5Q0/FOIP4EJFD80X5Q0.MEDIUM.gif" />
</body>
</html>
******
View it

Step 9: Links

Links are also pretty simple. You use them to allow someone to click to another page. You will use the <a> tag and the "href" subtag. It is used like this: <a href="http://www.website.com/link.htm">Text you want to make a link</a>

Let's try it out:

******
<html>
<head>
<title>This is the title of the page</title>
</head>
<body>
Hello World.<br>
<font size="+2" color="red">This will be on the second line and will be bigger and red.</font><br>
<br>
<br>
<font color="blue">This will be on the 5th line and blue.</font>
<br><br>
Lets put the instructables robot in our sweet page.
<img src="https://www.instructables.com/files/deriv/FOI/P4EJ/FD80X5Q0/FOIP4EJFD80X5Q0.MEDIUM.gif" />
<br> Lets make a <a href="https://www.instructables.com/member/Instructables+Robot/">link</a> to the instructables robot's web page.
</body>
</html>
******
View it

Step 10: Read Part 2

This is the first part of a series of them. Check back every once-in-a-while. I'll post a second one soon and I'll link to it here on this page.

Share

Recommendations

  • Epilog Challenge 9

    Epilog Challenge 9
  • Gluten Free Challenge

    Gluten Free Challenge
  • First Time Author Contest 2018

    First Time Author Contest 2018
user

We have a be nice policy.
Please be positive and constructive.

Tips

Questions

34 Comments

Hi I have a to make something to my school as a project

The question is "for your next PAT (practical assessment task) you will have to find out if you can create a web page in css, but not any web page you can chose from 3.

Number 1 find out if you can make a member page that show the members and allows you to log in as one or to become one.

Number 2 find out if you can create a page where you can upload files but it must only be available to members same for the downloads.

Number 3 find out if you can use css to create a web page or a section of the web page were a random anonymous person can donate money.

Remember this is all in css
Have fun."

That is the question we have

simple with windows just press F12 on windows 7 or higher

you have to get a host....

orpreview it in firefox/opera/IE...etc

i want to make a web site so that i can host my FTP...i dont want anything fancy, i just want like a list.....would html do the trick?

When i use the backround code down there, on my website, it doesn't do anything, but form my computer, it works. Is there a way to use a URl for the backround?

user

i forgot the code for image backgrounds. and whats the code for music embedding?