How to design a simple webpage? (Html 1)

I will start with HTML
HTML is Hyper Text mark up Language. Its used to make webpages as it is easier to learn with simple coding. I am showing, How to make a simple webpage, as in begining we wont be working on heavy or dynamic sites. this lesson will give you the basic idea, what this language can do & how a basic webpage looks like. Ok, So here is the first lesson. 




It will be written in Notepad. You can go to Notepad by pressing windows key + r key. Or Start>programs>accessories>Notepad.




Its in three steps
1. Title of simple webpage
2. Body of web page
3. Closing 


This is the coding.
<html>
<head>
<title>
Facebook
</title>
<head>
<body bgcolor="blue">
<font size="7" color="green">
<div align="centre">
wel come to this site
</div>
</body>
</html>








Now write this code in notepad. Like shown in this pic

1.Title of Webpage.
<html> in starting means start of Hyper Text Mark Up language.
we use '<' & '>' for writing in & '/' before a code means 'closing tag' html.
<title> resemble the title of browser, that is the top right corner, where blogger is writter write now
I have used facebook to make the understanding easier.
Now </title> means closing of the title
</head> resembles the closing of that area.
2.Body of Webpage.
 Now starts the functioning of area beneath the address bar.

<body bgcolog="pink"> here pink is the color of back ground, (body bgcolor) means background color.

<font size="7" color="green"> font is the enlarge ment of character. space is given to separate size & color from font other wise code will not work.
<div align="right"> means the alignment towards 'left' 'right' or 'centre'
So that we can move text to where ever we want. (wellcome to this site) is the text of browser
3.Closing of webpage code

Now we need to close all of the three by using "/"
</head> resembles the closing of that Heading area.
</div> is used to close division
</body> 
is used to close body of browser
</html> 
is used to close Hyper text markup language.





Your webpage should look like this.


Now practice it three times, with changing title text & body text, font size (remember you can write from 1 to 7 as font size) and colors of font and body.


I Will give the first assignment in next post.

If you got any problem, you can ask me by leaving a comment.

1 comment:

  1. I have read your blog and I got very useful and knowledgeable information from your blog. It’s really a very nice article psd to html

    ReplyDelete

Please do not SPAM or ABUSE in the comments. Jazak Allah