|
ncpat (m)
|
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
|
|
|
|
|
|
|
|
nuellabond (f)
|
hello,
thanks a lot for your web design tutorial.I enjoyd it.Hope u continue.
|
|
|
|
|
|
bocamadias
|
Thanks please continue
|
|
|
|
|
|
Sir Kay (m)
|
@ ncpat,
Many thamks. When are we continuing with the tutorials?
|
|
|
|
|
|
dondele (m)
|
God bless you brother.
|
|
|
|
|
|
ncpat (m)
|
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
|
|
|
|
|
|
diddy4 (m)
|
thanks man. im right on track.
|
|
|
|
|
|
ncpat (m)
|
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.
note: 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, for more info call me on 08065942445
|
|
|
|
|
|
diddy4 (m)
|
thanks man. im with you.
|
|
|
|
|
|
ncpat (m)
|
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>) 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.
|
|
|
|
|
|
Sir Kay (m)
|
@ ncpat,
God bless you abundantly beyond your imagination. It's very interesting and am already doing the whole thing over and over again, so as to get used to it and master it.
More tutorial please
|
|
|
|
|
|
ncpat (m)
|
back to lesson 5, now we are going to add a picture to our webpage with the <IMG SRC>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> <img src=titanic.jpg> </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><img src=titanic.jpg> </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><img src=titanic.jpg alt="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 |
|
|
|
|
|
teeewai (m)
|
@ncpat
10x for the tutorial i really apreciate it. abeg continue ooooo. we need more of d tutorials.plzzzzzzzzzzzzzzzzzzzz i beg we still dey expect more tutorialz.
|
|
|
|
|
|
Sir Kay (m)
|
@ ncpat,
More please
|
|
|
|
|
|
MissEniola (f)
|
good job ncpat, can i join you?
|
|
|
|
|
|
diddy4 (m)
|
im with you man, make we dey go.
|
|
|
|
|
|
diddy4 (m)
|
@misseniola
yeah u can join. just start from his first lesson cuzz we havent gon far yet. welcome
|
|
|
|
|
|
MissEniola (f)
|
@misseniola
yeah u can join. just start from his first lesson cuzz we havent gon far yet. welcome
thanks, i was actually asking if i could help add some more tutorials  |
|
|
|
|
|
diddy4 (m)
|
ummm, i think i will leave him to answer that but u can send me some tutorials if u don't mind at all. my email addy is DIDDY4DT@yahoo.com |
|
|
|
|
|
MissEniola (f)
|
cool i think ill just open my own thread because i want to cover another area, but ill send u a simple tutorial later tonight  |
|
|
|
|
|
diddy4 (m)
|
ok, thanks alot ma'am. |
|
|
|
|
|
Sir Kay (m)
|
@ MissEniola,
That's a good idea. More from you all please. We are learning something to be proud of here
|
|
|
|
|
|
Farriel (m)
|
Hmm, all of these tutorials makes me wonder.
|
|
|
|
|
|
Zahymaka (m)
|
Hmm, all of these tutorials makes me wonder.
Why? |
|
|
|
|
|
Farriel (m)
|
Like, there are tons of just these same tuts out there on the web. That some tips and tricks needed to accomplishing specific tasks might be a bit more valuable. Tasks that newbies get troubled with in their course of becoming master designers or something. You get my drift?
|
|
|
|
|
|
Zahymaka (m)
|
Like, there are tons of just these same tuts out there on the web. That some tips and tricks needed to accomplishing specific tasks might be a bit more valuable. Tasks that newbies get troubled with in their course of becoming master designers or something. You get my drift?
Well, I'm learning too. At least real-life questions can be asked our instructors. |
|
|
|
|
|
D3n3n (m)
|
ncpat
Nice one, it always very good when there is a chance to learn something new. thanx alot, don't stop there, keep on going.
|
|
|
|
|
|
my2cents (m)
|
To ncpat: Considering that everyone is conversant with googling for information, I commend you for taking the time to put this tutorial on this forum. MissEniola, I troway salute on the intermediate section as well. To all: In general, u may want to use actual hex codes to specify color as not all browsers interprete the english versions well. So use "#ffffff" as opposed to "white". Also, regardless of what u use, enclose the color in qoutes. It may still work otherwise, but its good coding practice to enclose in quotes. Same as telling someone who takes shots in soccer that though if his shot goes over the bar, it is still a shot, it would be better if it were on target to hit the back of the net  Again, good job to ncpat and MissEniola. |
|
|
|
|
|
ncpat (m)
|
hi everyone, i want to use this medium to say thank you to everyone who has been contrubuting to the successful work here, i will like to let you all know that i will like to continue as much as possible but time factor is making it impossible and as for the fact that i have to leave home for the cybercafe is not that easy but i will still try my best, 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. |
|
|
|
|
|
diddy4 (m)
|
please i have a small problem, my image is not working. i wrote the code and eerthing but its still not loading. the picture is stored in the same folder where i stored my work. can u help me with this?
|
|
|
|
|
|
MissEniola (f)
|
please i have a small problem, my image is not working. i wrote the code and eerthing but its still not loading. the picture is stored in the same folder where i stored my work. can u help me with this?
hey diddy, is your image a jpg, gif, png etc post your code here |
|
|
|
|
|
![Nairaland [Nigerian Forum] Home](http://www.nairaland.com/Themes/default/images/english/home.gif)
Author
note pad.jpg (25.46 KB, 640x480 )
