Designing A Website: For Beginners - Webmasters (2)

Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,156,515 members, 7,830,530 topics. Date: Friday, 17 May 2024 at 01:52 AM

Designing A Website: For Beginners - Webmasters (2) - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Designing A Website: For Beginners (37784 Views)

Blogging Advice For Beginners / Designing A Site With Php And Oracle Tutorial (Oracle 10G) / Designing A Website Using Coreldraw Application Package (2) (3) (4)

(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) ... (11) (Reply) (Go Down)

Re: Designing A Website: For Beginners by diddy4(m): 9:22pm On Jul 26, 2006

here is my code.

<html>
<title>designing a webpage</title>
<body bgcolor=blue>
<body>
<h3 align=center>WELCOME TO MA WORLD</h3>
<img src=buddies.jpg>
</body>
</html>

someone help me oooooooooo

Re: Designing A Website: For Beginners by my2cents(m): 9:32pm On Jul 26, 2006

diddy:

chances are that you aren't referencing your image correctly. So where is your image? if it is in, say, images folder, then u hv to reference it thus: images/buddy.jpg.

If this is the case, try the above and c if it works

Re: Designing A Website: For Beginners by xanadu: 10:24am On Jul 27, 2006

Hello all,

A good job done by ncpat and all those who have contributed to this series of tutorials in basic HTML. With all the 'advanced' coding stuff on nairaland, I believe that there are many people who simply want to learn basic html, and then move on from there.

I would like to add my 'two cents' worth as well. I think, though, that it may be a good idea for each person to take a specific area and deal with it. What do you guys think?

To start off, I could contribute a series on creating simple html forms - which could be used on contact us pages, etc, or used simply to collect data from visitors to your website. How does that sound?

I'll just wait to see some feedbacks, then proceed with the first in the series of tutorials on form-building.

Cheers.

Re: Designing A Website: For Beginners by MissEniola(f): 5:37pm On Jul 27, 2006

diddy4:

here is my code.

<html>
<title>designing a webpage</title>
<body bgcolor=blue>
<body>
<h3 align=center>WELCOME TO MA WORLD</h3>
<img src=buddies.jpg>
</body>
</html>

someone help me oooooooooo

check if:
-your buddies.jpg pic is an actual .jpg pic, it could be a .gif or .png pic. in the folder where it is, does it say buddies.jpg
-change your code, add quotes, ie <img src="buddies.jpg">
-make sure the image and htm file are in the same folder
-reach out and give your pangolo pc a serious whooozing

if none of that works, we have failed as tutors sad

come and whoze us backhand slap embarassed

Re: Designing A Website: For Beginners by diddy4(m): 9:06pm On Jul 27, 2006

@misseniola

thanks for that, i will try it and see how its gon work. just incase, u might start getting ready for whoozing. grin

thanks ma'am.

Re: Designing A Website: For Beginners by Jachoz(m): 12:57pm On Jul 28, 2006

I love this thread. I got everything right kiss

Re: Designing A Website: For Beginners by xanadu: 12:58pm On Jul 28, 2006

Well, I'll go ahead and talk a bit about HTML Forms. I hope this tutorial helps someone out there.

HTML FORMS
Overview:

HTML forms are used in many cases to select and collect different kinds of user input. This input can then be sent to a processor (could be Perl, PHP etc page - don't worry, we'' talk about this in a later tutorial) that will process the data and carry out specific instructions (e.g send an email, access a database etc). HTML forms vary in complexity, depending on the use one requires of them. I'll start from very basic forms and we'll work our way up.

I have discovered that one of the best ways to learn forms, from a beginners point of view, is to actually learn from how others have done it - especially when you view the source on web pages that have forms. By looking first at the end result of some html coding, and then studying the actual code, you are able to understand how it all fits together much quicker.

You can view the source of most (html) web pages in Internet Explorer, for example, when you do the following: from the menu, click on 'View', then 'Source'.

Module One - Building a basic form
Lets start by studying the basic form below. It is a simple form that is designed to accept a user's name as input.

[center]

[/center]

Here's the html code for the above form:

<form name ="myform" method="post" action="post_form.php">
Please enter your name<input type="text" name="name">
<br><br>
<input type="submit" value="Send">

Now, taking a close look at the code we can study what part of the code does what:

Let's take the first line, <form name ="myform" method="post" action="post_form.php">. This line opens the form tag <form>. To create the form, we state the name of the form ("myform" wink

, the method we want to use to process the form ( do not worry about this yet, we come to this later on in the tutorial). Here, we specify the "post" method - basically we are telling the script to send the user's input to some other file, which is specified in 'action="post_form.php"', in this case a php file called "post_form.php". Again, do not bother yourself about the php file yet - we will come to that in a later tutorial.

The line <input type="text" name="name"> creates the text box where the user enters in their name. With most browsers, the size of this box is limited to 20, but this can be increased. This is the same line, but with input box size increased to 40: <input type="text" name="name" size="40">. Note that the box size does not necessarily limit the amount of characters one can type into it - what it means is that if, for instance you enter a name that is longer than 20 characters all of that name will not show when it it typed into the box.

The html tag <br> is a line break, and by entering that twice, we can skip two lines. Another way we can achieve the same result is if we use the paragraph (<p> wink

tag. This helps us arrange our form on the page a bit more neatly.

Finally, the line <input type="submit" value="Send"> creates a submit button for us. We can specify the text we want on this button where we have "value=", for instance if we wanted the text on the button to read "Submit My Name", the line would read <input type="submit" value="Submit My Name">.

When the user clicks on the submit button, the data input is sent to the file specified in the first line (<form name ="myform" method="post" action="post_form.php"> wink

, in this case post_form.php, which will have instructions to process the data.

Try the above html and play with some variations. You can create more input fields by replicating the second line, and prompting for some other information, e.g: 'Enter your height<input type="text" name="height"'>. Note that the name of each field or input (in our examples so far, "name" and "height" wink

MUST be unique for each field.

So we have created a basic html form that can accept user input. Before we go on to learn what happens to this input, it may be wise to learn about various kinds of form elements. In the next module, we'll learn about various types of form elements. You have probably seen forms that use checkboxes, radio buttons, drop-down, textarea etc. We'll take a look at these in the next tutorial

Next Module: Form Elements

1 Like

Re: Designing A Website: For Beginners by Zahymaka(m): 5:52pm On Jul 28, 2006

xanadu, abeg calm down. This one is for beginners like us -- we haven't moved to forms yet. Let's grasp the basics.

Re: Designing A Website: For Beginners by ncpat(m): 8:40am On Jul 31, 2006

I think I have to leave this thread for XANADU to continue b`cos i don`t normally have time to post and you people should tell him to calm down a little bit.

Re: Designing A Website: For Beginners by pholusho(m): 1:00pm On Aug 03, 2006

Good day,
i want to say thank you very much for the discussion, and when are you likely to continue.

Re: Designing A Website: For Beginners by tpia: 2:53am On Aug 06, 2006

xanadu, could you open a separate thread , while we continue with this one? I was trying to follow the step-by-step method ncpat started. Now I'm getting confused again.
Thanks for your help, but I think we may need two separate threads. God bless you both.

grin

you didn't do it on purpose, did you?

Re: Designing A Website: For Beginners by xanadu: 11:20am On Aug 07, 2006

Guys,

I think I need to apologise first to ncpat who from the sound of it seems quite upset, and more than likely believes I intentionally planned to 'seize' this post. Nothing can be further from the truth.

On July 22nd, I posted this:

Hello all,

A good job done by ncpat and all those who have contributed to this series of tutorials in basic HTML. With all the 'advanced' coding stuff on nairaland, I believe that there are many people who simply want to learn basic html, and then move on from there.

I would like to add my 'two cents' worth as well. I think, though, that it may be a good idea for each person to take a specific area and deal with it. What do you guys think?

To start off, I could contribute a series on creating simple html forms - which could be used on contact us pages, etc, or used simply to collect data from visitors to your website. How does that sound?

I'll just wait to see some feedbacks, then proceed with the first in the series of tutorials on form-building.

Cheers.

There was no reply, nothing saying no one was interested etc, so on July 28th, I started the first tutorial on forms. I thought I was being polite by waiting for a while before going ahead.

So for now, we shall suspend any tutorial on forms from myself. Or I'll simply start a new thread as tpia rightly suggested.

I want all the great members out there to understand that I was truly trying to make a contribution of some sorts to the forum. I have been a member of this forum for a while, and I know there are a lot of people out there who are interested in web programming or design.

Again, my apologies to ncpat and all others; and tpia, I certainly did not do that on purpose.

Stay well, all.

Re: Designing A Website: For Beginners by thirdeye(m): 2:10pm On Aug 07, 2006

great job just continue,

xanadu:

Well, I'll go ahead and talk a bit about HTML Forms. I hope this tutorial helps someone out there.

HTML FORMS
Overview:

HTML forms are used in many cases to select and collect different kinds of user input. This input can then be sent to a processor (could be Perl, PHP etc page - don't worry, we'' talk about this in a later tutorial) that will process the data and carry out specific instructions (e.g send an email, access a database etc). HTML forms vary in complexity, depending on the use one requires of them. I'll start from very basic forms and we'll work our way up.

I have discovered that one of the best ways to learn forms, from a beginners point of view, is to actually learn from how others have done it - especially when you view the source on web pages that have forms. By looking first at the end result of some html coding, and then studying the actual code, you are able to understand how it all fits together much quicker.

You can view the source of most (html) web pages in Internet Explorer, for example, when you do the following: from the menu, click on 'View', then 'Source'.

Module One - Building a basic form
Lets start by studying the basic form below. It is a simple form that is designed to accept a user's name as input.

[center][/center]

Here's the html code for the above form:
Now, taking a close look at the code we can study what part of the code does what:

Let's take the first line, <form name ="myform" method="post" action="post_form.php">. This line opens the form tag <form>. To create the form, we state the name of the form ("myform", the method we want to use to process the form ( do not worry about this yet, we come to this later on in the tutorial). Here, we specify the "post" method - basically we are telling the script to send the user's input to some other file, which is specified in 'action="post_form.php"', in this case a php file called "post_form.php". Again, do not bother yourself about the php file yet - we will come to that in a later tutorial.

The line <input type="text" name="name"> creates the text box where the user enters in their name. With most browsers, the size of this box is limited to 20, but this can be increased. This is the same line, but with input box size increased to 40: <input type="text" name="name" size="40">. Note that the box size does not necessarily limit the amount of characters one can type into it - what it means is that if, for instance you enter a name that is longer than 20 characters all of that name will not show when it it typed into the box.

The html tag <br> is a line break, and by entering that twice, we can skip two lines. Another way we can achieve the same result is if we use the paragraph (<p> tag. This helps us arrange our form on the page a bit more neatly.

Finally, the line <input type="submit" value="Send"> creates a submit button for us. We can specify the text we want on this button where we have "value=", for instance if we wanted the text on the button to read "Submit My Name", the line would read <input type="submit" value="Submit My Name">.

When the user clicks on the submit button, the data input is sent to the file specified in the first line (<form name ="myform" method="post" action="post_form.php">, in this case post_form.php, which will have instructions to process the data.

Try the above html and play with some variations. You can create more input fields by replicating the second line, and prompting for some other information, e.g: 'Enter your height<input type="text" name="height"'>. Note that the name of each field or input (in our examples so far, "name" and "height" MUST be unique for each field.

So we have created a basic html form that can accept user input. Before we go on to learn what happens to this input, it may be wise to learn about various kinds of form elements. In the next module, we'll learn about various types of form elements. You have probably seen forms that use checkboxes, radio buttons, drop-down, textarea etc. We'll take a look at these in the next tutorial

Next Module: Form Elements

Great job just continue with it I have been searching for this.THANK YOU FOR SHAIRING YOUR EXPERIENCE. It is a forum, you don't need to start any other thread. Continue with this.

Re: Designing A Website: For Beginners by Zahymaka(m): 3:58pm On Aug 07, 2006

Obviously, xanadu wants to teach us PHP and how to handle external variables that come in from the client. Forms are in that league and since this is a thread for beginners, it would be quite confusing to introduce forms at this stage.

Let us understand the basic HTML syntax first before we move up to that level.

Re: Designing A Website: For Beginners by LoverBwoy(m): 4:32am On Aug 08, 2006

hey people
ncpat, ive finish i got everything right oh, i cant believe im dong this, i will have my website/page online very soon if the tutorial continue!!
thank you ncpat

Does any1 else what to continiue with the basic or thats the end of basics, intermediate?

@xanadu
are u starting a new thread or is that part of the basics?

Re: Designing A Website: For Beginners by aderaskeey(m): 8:24pm On Aug 08, 2006

ncpat and xanadu, there is no reason for being cross with each other. Both of you have done a great job for our newbies.

Instead of either putting the newbies in suspense, let me intervene by way of sugesting sites that I always use to teach my 'students' in the school of web design and adsense. Just go to Virtually Ignorant http://www.virtuallyignorant.com/index2.htm the animated teaching aides are simple to understand.

Re: Designing A Website: For Beginners by deb(m): 11:19am On Aug 09, 2006

I'm not here to take over this thread from either ncpat or xanadu.

The excitment from you the beginners just reminded me of when I started coding.
I love to get you more excited by teaching you how to spark up your page with a little animation.

What I'm going to teach you now is called Marquee Animation.

Add the below code anyway within your <body> tag:

<marquee>My First Animation</marquee>

You should have My First Animation moving from right to the left of your screen wink

Like I said I'm not here to take over the thread. So I may not be posting more. Except its demand

Re: Designing A Website: For Beginners by Remmzy(m): 5:23pm On Aug 10, 2006

ncpat (m)
abuja,Nigeria
Re: Designing A Website: For Beginners
« #40 on: July 31, 2006, 08:40 AM »
I think I have to leave this thread for XANADU to continue b`because i don`t normally have time to post and you people should tell him to calm down a little bit.

You guys should not turn those learning from you to fools, why start something you know you cant finish, Control your temperance{n} & don't put a stop to this good work{x}, we beg you We are waiting!

Re: Designing A Website: For Beginners by md4real(m): 7:47pm On Aug 10, 2006

PLEASE LET SOMEBODY CONTINUE THIS TOTUTORIAL. IT ASERVICE TO YOUR NATION!

Re: Designing A Website: For Beginners by my2cents(m): 9:12pm On Aug 10, 2006

Service to your nation? LOL

What's next? Sending money via western union? wink

Re: Designing A Website: For Beginners by LoverBwoy(m): 1:23am On Aug 11, 2006

ncpat didnt say anything about being angry @ xanudu, he said he doesnt have time that much

ncpat:

I think I have to leave this thread for XANADU to continue b`because i don`t normally have time to post and you people should tell him to calm down a little bit.

Re: Designing A Website: For Beginners by Remmzy(m): 12:50am On Aug 12, 2006

wonder!

Re: Designing A Website: For Beginners by pati(f): 8:08pm On Aug 12, 2006

ncpat, thankx man

Re: Designing A Website: For Beginners by kg(f): 6:47pm On Aug 14, 2006

Good job everyone, I've always been an advocate of design your site yourself, it's possible and not difficult afterall.
Besides you don't need to know how to write codes in order to design your site, with a little guide and support you'll be amazed at what you can do.
However knowing how to write the codes will forever give you an advantage and a better understanding. I learnt how to write codes first before learning to use the WYSIWYG, drag and drop types,

In addition to the informations you've gotten on this forum

You can learn how to design your own website hear http://www.nvu.com

However, if you are interested in discovering further web designing tips and secret of how to design traffic generating and money making websites feel free to send an email to net365net@yahoo.com or call 08033792673 I'll be glad to help.

Re: Designing A Website: For Beginners by wilmabundu(m): 4:23pm On Aug 19, 2006

Waoooooh,
Hm, Knowledge dey sweet oooooh.
I think when one gets to know new things he gets so exhilarated that hunger and thirst take flight.I wish to congratulate evrybody, both the teachers and the students. I pray that we will continue to learn and improve ourselves. I am even planning to statrt teaching my younger brother. You kno what? The secret of perfection lies in practice, and here practice is done by teaching.
I look forward to teaching us one day.
Meanwhile, kudos to all and sundry
Cheerio!

Re: Designing A Website: For Beginners by babaijo(m): 5:33pm On Aug 27, 2006

@ncpat
Will this lecture ever continue?
I cant wait to learn more. Please let's progress more importantly on how to upload the designed web.

Re: Designing A Website: For Beginners by sirify(m): 9:42am On Aug 31, 2006

Please does anyone have any idea on how much it would cost to design a website/webpage

Re: Designing A Website: For Beginners by ncpat(m): 6:44pm On Sep 01, 2006

i`m back but i need to rest for a while and know the next level to go,see you all

Re: Designing A Website: For Beginners by Bhola(f): 10:09pm On Sep 03, 2006

Welcome back, teacher. Deb, MissEniola, Xanadu, and all others, you are all appreciated. Make JJC like me, learn something new.

Re: Designing A Website: For Beginners by b2dl(f): 11:55pm On Sep 09, 2006

oh pls ncpat, do continue i beg of u!
thx a bunch kiss

Re: Designing A Website: For Beginners by molluma(f): 3:16pm On Sep 10, 2006

ncpat thanks alot. pls continue. God bless ya all

Re: Designing A Website: For Beginners by imomoh24(m): 12:25pm On Sep 11, 2006

Does any1 have an actionScript dat i can apply to my banner to give more feel.
Pls hook a broda up.

imomoh24@gmail.com

(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) ... (11) (Reply)

Nigeria Plans To Ban Pornographic Websites - Sambo Dasuki, NSA / Nigerian Blogs / Spacex Rocket Explosion - Mark Zuckerberg Reacts

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 76
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.