How to Start Designing A Website: For Beginners

Website design and development, management of forums, blogs, wikis, and all sorts of websites.

7 people like this topic, 6 people dislike this topic

3direct
Posts: 0
Joined: Thu Oct 30, 2014 4:34 pm

How to Start Designing A Website: For Beginners

Postby 3direct » Sat Apr 04, 2015 7:03 pm

Here we are going to learn how to design a web site using a simple application called note pad that is in your system already, I am going to show you just how easy it is using HTML (hypertext markup language) this are tag code recognize by internet explorer but we are not going into that so that you don`t get confuse. we are going to produce a very basic but nevertheless functional web page using nothing more complicated than windows note pad and a little of your time, I suggest you follow my simple step by step to get the most from this lesson.

1.start note pad by clicking on the “start” button and than moving first to “programs” and then move to “accessories” menu where the note pad icon is located, you will be presented with an empty page. All web page start with a declaration that states “I am an HTML document” to any software that looks at it. This accomplished by the use of <HTML> tags within which everything else is located.

2. type in “<html>”press enter and type “</html>”

on the file menu on the note pad click on save as,save the file with any name but with htm extension (.htm) so that it will be recognize as html document or website document which ever one you understand e.g save as(web.htm) and click save, then go to your internet explorer window and click on file menu then open, browse the file you save as (web.htm) but only the word(web) will appear, then open it and you will see a blank internet explorer page, if you see this blank page, you have pass this first lesson, the next lesson will be on how to add colour to our website, see you all

 



3direct
Posts: 0
Joined: Thu Oct 30, 2014 4:34 pm

back to the designing tutor,

Postby 3direct » Sat Apr 04, 2015 7:10 pm

back to the designing tutor, lesson 2,here we are going to learn how to give our website or webpage a title, so we type in the following tag and always remember to start from the previous lesson,type in the following.

<HTML>
<TITLE>designing a web page</TITLE>
</HTML>


Save it just as we are told in lesson 1 and open it with internet explorer,you will see your title(designing a web page)at the top of the explorer window,if you got this, let me know so that we can now put a colour to our web page known as background
3direct
Posts: 0
Joined: Thu Oct 30, 2014 4:34 pm

back to lesson 3,now we

Postby 3direct » Sat Apr 04, 2015 7:11 pm

back to lesson 3,now we are  going to apply any colour of our choice to our webpage so let`s continue from previous lesson,so type the following

<html>

<title>designing a webpage</title>

<body bgcolor=green>

</html>


save it as usaul and use internet explorer to open it and you a your webpage in a green colour,you can edit your note pad and put any colour of your choice.
<b>note</b>: bg stands for backgroung and also take note on the spelling of colour=color(that is american spelling or as well as the spelling microsoft have for it)see you all next when we are going to learn how to put a wellcome note on our webpage,
3direct
Posts: 0
Joined: Thu Oct 30, 2014 4:34 pm

back to lesson 4 let`s

Postby 3direct » Sat Apr 04, 2015 7:12 pm

back to lesson 4 let`s put a writing on our webpage like a welcome note, so type in the following

<html>

<title>designing a webpage</title>

<body bgcolor=green>

<body>
WELCOME TO MY WORLD
</body>

</html>

now save it as usual and open it as usaul with your internet explorer and you will get you welcome note or what ever you have written, the body tag enable us to write on our webpage but in your internet explorer the letters looks small,so let`s try to make it bold and this is done by the following tags (<h1>,<h2>and <h3>wink so type in the following by chosing <h1> as example


<html>

<title>designing a webpage</title>

<body bgcolor=green>
<body>
<h1>WELCOME TO MY WORLD</h1>
</body>
</html>

now save it as usaul and open it with internet explorer,the letters looks bold but not well position,so now we are going to tell the browser to position in a center position. now type in the following.

<html>

<title>designing a webpage</title>

<body bgcolor=green>
<body>
<h1 align=center>WELCOME TO MY WORLD</h1>
</body>
</html>

save it as usaul and open it with internet explorer and the letters are now centered, so see you all next when we will learn how to put image on our webpage and more writings,see you all.
3direct
Posts: 0
Joined: Thu Oct 30, 2014 4:34 pm

back to lesson 5, now

Postby 3direct » Sat Apr 04, 2015 7:13 pm

back to lesson 5, now we are going to add a picture to our webpage with the tag,it is used to tell the browser where the picture file can be found and remember to copy your picture or image to the same folder where you saved your webpage designing, for example we have a picture name TITANIC been saved in JPG format so you the name like this(titanic.jpg) now type in the following.

<html>

<title>designing a webpage</title>

<body bgcolor=green>
<body>
<h1 align=center>WELCOME TO MY WORLD</h1>

</body>
</html>

now save it as usual and open the same way, you now have your image in your webpage,though the image may not be position well so we are going to use this <P ALIGN> to position it so you type in the following.

<html>

<title>designing a webpage</title>

<body bgcolor=green>
<body>
<h1 align=center>WELCOME TO MY WORLD</h1>
<p align=center>
</body>
</html>

save and open this way you have been doing and you will get your image in a good position.

now let`s try and put title to our image so that when you point your mouse to it it will display the title,this title or lebel is nomally display first when your webpage is loading and it is done by the <ALT>tag so type the following.

<html>

<title>designing a webpage</title>

<body bgcolor=green>
<body>
<h1 align=center>WELCOME TO MY WORLD</h1>
<p align=center>two lovers
</body>
</html>

save and open the same way then point your mouse to your image and the title (two lovers) will appears. so do this and see you next
3direct
Posts: 0
Joined: Thu Oct 30, 2014 4:34 pm

now let`s add writings to

Postby 3direct » Sat Apr 04, 2015 7:13 pm

now let`s add writings to our page by seperating the heading(welcome note) and under lining it before writing below our image so now type the following.

<html>
<head>
<title>designing a webpage</title>
</head>
<body bgcolor=green>
<body>
<h1 align=center>WELCOME TO MY WORLD</h1>
<hr width="50%">
<p align=center><img src=titanic.jpg alt="two lovers">
<p align="center">welcome to my webpage,relax and feel comfortable as i take you round my world
</body>
</html>

save and open as usaul and take note of the added code as i will explain later i`m runing out of time, see you all next.

Return to “Webmaster”

Who is online

Users browsing this forum: No registered users and 2 guests

cron