How to write your own web page from scratch



For this tutorial, all you need is a notepad / WordPad /notepad++  or any other like the ones mentioned on your computer.


If you don’t have access to a computer that you can make use of, you can read how to write web pages from scratch using a mobile phone to learn how to use your mobile phone for web designing.

Now follow this tutorial on how to write your own very first webpage. We are going to be using HTML alone for this simple page.

What better way to learn than to start by actually doing something?  So let’s write some page.

Example 1

Writing a page that simply reads;
Hello World

Steps:
Open your notepad or WordPad on your computer

Copy the code below(explanation would be right up afterward)

Code:
<!Doctype html>
<html>
<h1>
Hello World</h1>
</html>


Save the file as Helloworld with .html extension





Change the Encoding to UTF-8

Then open the saved file with your browser.

Result:



How about writing more than a single line?

Example 2
Write a page stating these;

MY FIRST WEBPAGE
It is really exciting to start writing my very own page.
Soon I will design something pretty awesome

Steps:

Open your notepad or WordPad on your computer

Copy the code below (explanation coming soon on this)

Code:

<!Doctype html>
<html>
<h1>MY FIRST WEBPAGE</h1>
</html>

It is really exciting to start writing my very own page
Soon I will be designing something pretty awesome.


Save the file as firstpage with .html extension

Change the Encoding to UTF-8



Then open the saved file with your browser.

Result:



Code explanation 

<doctype! html> -is used for declaring that your document is html. It is important that you include it in your code, even though without it, your page would still load but is recommended that you do add it to your pages.

<html>- this tag is a must, it should come after <doctype! html>or if you are not going to write <doctype! html>(which is not recommended) then, you must write <html>first.

<h1> -this tag is used for headings; there are six different types of h-tag. This would be discussed in details in one of the upcoming posts.

<p>- this is used for declaring paragraphs


<br>- is used for inserting break in lines. In example two, if you remove the <br> tag, the two sentences would appear on a single line.

Result of Example 2 when <br> is removed:






</html>, </h1>, </p>, are closing tags, they are used to close their corresponding opening tags.

For example: <p> content </p>

Note: when saving your code, you can use any name you like save it with, it doesn’t matter but the extension(.html) does, else, you won’t be able to preview the web page.

More coming up soon in the next post

No comments:

Post a Comment

Contact Form

Name

Email *

Message *

Follow by Email

Popular Posts