Author Topic: Tutorial on Building Interactive and Dynamic websites  (Read 3954 times)

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Tutorial on Building Interactive and Dynamic websites
« on: March 16, 2010, 10:31:50 PM »
Saw this forum lacks tutorials and website reviews.

Will love to teach interested people how to build Interactive and Dynamic websites.

It will cover for Newbies, so newbies can pick up well.

I will teach:

HTML/XHTML
CSS
JAVASCRIPT
PHP
SQL
AJAX

Need peoples comments.

Thanks
Imonitie Mark

Ceo.  Marknollis World of Webmasters
www. marknollis. com

Developer.  Technoglobal Progarmmers
www. technoglobalprogrammers. net

Advertisements


Nigerian Best Forum . NBF

Tutorial on Building Interactive and Dynamic websites
« on: March 16, 2010, 10:31:50 PM »

Offline cashmoney4d

  • Jr. Member
  • Posts: 72
  • Gender: Female
  • OS:
  • Windows XP Windows XP
  • Browser:
  • Flock 2.5.6 Flock 2.5.6
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #1 on: March 17, 2010, 03:11:23 AM »
go ahead
www. lıvedatıng. tk

Nigerian Best Forum . NBF

Re: Tutorial on Building Interactive and Dynamic websites
« Reply #1 on: March 17, 2010, 03:11:23 AM »

Enter Your Email Below For Daily Jobs Updates, It's Free

100% Free


Offline Centjay

  • Full Member
  • *
  • Posts: 160
  • Gender: Male
  • Online Biz Jus Got Better...
  • OS:
  • Java Platform Micro Edition Java Platform Micro Edition
  • Browser:
  • Opera 9.80 (Opera Mini 4.2.13337) Opera 9.80 (Opera Mini 4.2.13337)
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #2 on: March 17, 2010, 03:26:59 AM »
Is it for free? Then wat are we waiting for.  We cant wait to start d lecture.  Ur welcome.
Make It Online Today.  .  .  Visit
hxxp: continuouswebcash.  blogspot.  com
hxxp: mesothelioma-is-dangerous. blogspot. com
hxxp: e-marketingtutor.  blogspot.  com

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #3 on: March 17, 2010, 04:09:18 AM »
Thanks.

Let me start with the basics.  And that will see use facing HTML:

Hypertext Markup Language abbreviated HTML is a language of the web, used to describe how a page is to be rendered.

The interesting part about HTML and other web based and even programming languages is the fact that they use alphabetical languages.

You can easily grab them, if you make more use of them.  Unlike what many web development tutors say, cramming it is a wrong option.  It is better used.  Over time the syntax will get mastered and HTML debugging is one of the easiest considering the fact that it is not a programming language.

Now lets get to action with the basic rendering:

To start a HTML page, you need to have a text editor.  Like notepad at least.  You save each line of tags/codes as test. html

Ensure whatever name given an ending extension of . html follows.

Now lets write out first HTML tags.

<html></html>

The tag above always start a html page.  It is used to declare the beginning of a html page

now in HTML, many tags must be closed as seen in the second html written.

</html>

When tags are opened the same named tags ought to be closed.  Although not all.
Lets write our first HTML and you will test it in a browser after compiling it by saving it a test. html using notepad.

<html>
<head>
<title>My first website</title>
</head>
<body>
<h1>Hello, i am developing my first website</h1>
<p>This tutorial will see me being a new born breed to the webmasters league in Nigeria</p>
<p>Watch out</p>
</body>
</html>
 
Explantion: Like i said before writing this tags, every page starts with a html tag.  Every, i mean every, if u use mozilla firefox use ctlr u to view the source code of anysite and u will see that it also started with html.

And if a tag starts, it has to close last, at least for this nature of tags that come with a closing tag.

There after the <html></html> or rather inside we placed a head tag <head></head> This tag is used to declare the head to a page.  This where all the sites matters are placed like the author and all other relevand issues.  Also style sheet can be placed there.  But when we move to css or before the  you will see a gazillion f things that are placed there.  Inside the head is a title.

The title tag shows the title of the page as seen in the top of a browser.  Lime this tutorials title is Tutorial on Building Interactive and Dynamic websites Nigeria Forum. . . . . . . . . . . . . . . . . . . . .

There after was our body tag.  This tag is where all the main contents of the site reside.  Textual views, styles, and all other things.

It is the main part of a page.  Just like in letter, we have subject.  that serves as our <title></title> tag while <body></body> serves as where all the letter issues will go.

Inside it is where our <p></p> tag goes.  This tag means paragraph.  So little wonder on use, the text falls below to a new paragraph.  <p>This place is meant for all text</p>

Text go in like how it was place above and in first test tags we generated.

Before the <p></p> was a <h1></h1> tag.  This means Heading one.

There are six available headings and its works in a decending order. Texts placed in <h1> will be bigger that <h2> and <h2> will be bigger than <h3> and so on and forth till <h6>

The Heading tags are used to declare a head of a message or test.  like in letters or notes.

Thanks.  Hope you learnt from this lesson.

Will continue after i finish coding an application i am working on.


Offline ibukadebay4

  • Full Member
  • *
  • Posts: 104
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0b5 Firefox 3.0b5
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #4 on: March 17, 2010, 04:47:42 AM »
hi don puzo,can u get a material for this?

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #5 on: March 17, 2010, 04:53:22 AM »
Hello, if you mean like ebook.  You may sign up on www. marknollis. com  after logging in, click the link saying "Download our freebies" there you will see an ebook Complete Guide to Webdesign, that can server the beginner level.

Others are intermediate and proffesional books.

Also you may choose to take a free online HTML tutorial on www. w3schools. com

Thanks.  Hope to teach more here.

Offline cashmoney4d

  • Jr. Member
  • Posts: 72
  • Gender: Female
  • OS:
  • Windows XP Windows XP
  • Browser:
  • Flock 2.5.6 Flock 2.5.6
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #6 on: March 17, 2010, 05:14:01 AM »
tanx.  but i'm eager to learn more
www. lıvedatıng. tk

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #7 on: March 17, 2010, 09:50:53 AM »
Good Morning Everyone,

@cashmoney4d.  I appreciate your eagerness to learn more, i must confess, that it is one of the potentials that an IT student must posses.

Today we will be doing more and that includes building our first page with HTML. 

Yes, so this tutorial will be very interesting and action filled.

Before i continue, i will like to hear comments from those who ran the test. html page.

I want to hear what they saw, their questions, issues, and problems, if any.

Thanks.

Offline Centjay

  • Full Member
  • *
  • Posts: 160
  • Gender: Male
  • Online Biz Jus Got Better...
  • OS:
  • Java Platform Micro Edition Java Platform Micro Edition
  • Browser:
  • Opera 9.80 (Opera Mini 4.2.13337) Opera 9.80 (Opera Mini 4.2.13337)
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #8 on: March 17, 2010, 09:53:50 AM »
Idi ok guy.   

Post Merge: March 17, 2010, 09:58:05 AM
Idi ok guy.   

Post Merge: March 17, 2010, 09:58:39 AM
Idi ok guy. 

Post Merge: March 17, 2010, 11:47:35 AM
Donpuzo is da best.
« Last Edit: March 17, 2010, 11:47:35 AM by Centjay »
Make It Online Today.  .  .  Visit
hxxp: continuouswebcash.  blogspot.  com
hxxp: mesothelioma-is-dangerous. blogspot. com
hxxp: e-marketingtutor.  blogspot.  com

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #9 on: March 17, 2010, 06:57:19 PM »
Hello everyone, today i will be showing some other useful tags that will help render a first page and it any student here is smart and fast, will be able to create a full HTML only website.  Although using HTML alone can't  create stunning website, but it is a step in the right direction to ensure newbies eat every trick and know how of Hyper Text Markup languges.

Now to the business of the day.

One very strong root of HTML can can be seen is interlink with other pages.  It is neccesary to interact with other pages and sites, so ones site will not be one paged.

The tag used to create a link is know as a hyperlink

it is written like this <a href="contentlink. html">Home</a> you will see the use of a closing tag also in this <a></a> tag lines.

Now, inside the beginning <a> we have a "href" this is in English language represented as reference so the <a><a/> tag is used to make a reference to another file, page, or document.

Also we have a quotion mark which has a contentlink. html in it, this is the value we are referencing to.

In this case we assume there is a file named contentlink. html.

Now we are gonna build on our test. html file we built in our first tutorial, so get ready to twick and retag/recode the former one with this new lines.

I will advice you write this tags ur self rather than copy and paste, cause by writing you have the feeling of being the owner/author and also learn this tags better.

<html>
<head>
<title>My first website</title>
</head>
<body>
<ul>
<li><a href="test. html">Home</a></li>
<li><a href="about. html">About</a></li>
<li><a href="contact. html">Contact</a></li>
</ul>
<h1>Hello, i am developing my first website</h1>
<p>This tutorial will see me being a new born breed to the webmasters league in Nigeria</p>
<p>Watch out</p>
</body>
</html>

Now what is new in this codes is <ul></ul> and <li></li> the <ul> tag means unordered list.

As you can see from the list, it is not numbers or ordered alphabetically.  Another tag that can be used is <ol> this makes it numbered.

The <li> tag introduced means list, so it means after we declare that the list type is gonna be ordered<ol> or unordered<ul> we declare the hyper link<a></a> i introduced earlier on.

In our <a> tags we put put new links known as contact. html and about. html

Those pages are meant to be like anyother one we build.  like the test. html.


In our next lecture we will build on other pages and link to them.

After then we will learn styling with HTML.  So expect color and style soon!!!




Offline Centjay

  • Full Member
  • *
  • Posts: 160
  • Gender: Male
  • Online Biz Jus Got Better...
  • OS:
  • Java Platform Micro Edition Java Platform Micro Edition
  • Browser:
  • Opera 9.80 (Opera Mini 4.2.13337) Opera 9.80 (Opera Mini 4.2.13337)
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #10 on: March 17, 2010, 07:53:36 PM »
God will bless u and replenish ur knowledge.  Thanks as u show us more.   
Make It Online Today.  .  .  Visit
hxxp: continuouswebcash.  blogspot.  com
hxxp: mesothelioma-is-dangerous. blogspot. com
hxxp: e-marketingtutor.  blogspot.  com

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #11 on: March 17, 2010, 10:09:12 PM »
Amen ohhhh.

Just pray also that i have that time also.  But i will try my best, as i am really dead busy this days programming.

@Every and Anyone.  Any question or help will be gladly accepted.

Offline fancybynature4ever@yahoo.

  • Global Moderator
  • Leader
  • ****
  • Posts: 2,500
  • Country: 00
  • Gender: Male
  • Your greatness isn't what you have today but what you create out of today...
  • OS:
  • Java Platform Micro Edition Java Platform Micro Edition
  • Browser:
  • Opera 9.80 (Opera Mini 4.2.13337) Opera 9.80 (Opera Mini 4.2.13337)
    • View Profile
  • Profession: ALUMINIUM FIBERICATOR AND DISTRIBUTOR SUCH AS ROOFINGS , WINDOWS AND DOORS call +2348037391565 or +2348057590539
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #12 on: March 18, 2010, 12:31:22 AM »
Can i obtain informations on building in these web?
I am what i am because THE GRACE OF "AM I ONLY I AM"

Offline Centjay

  • Full Member
  • *
  • Posts: 160
  • Gender: Male
  • Online Biz Jus Got Better...
  • OS:
  • Java Platform Micro Edition Java Platform Micro Edition
  • Browser:
  • Opera 9.80 (Opera Mini 4.2.13337) Opera 9.80 (Opera Mini 4.2.13337)
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #13 on: March 18, 2010, 08:59:16 AM »
U will find time.  Ur a gud man
Make It Online Today.  .  .  Visit
hxxp: continuouswebcash.  blogspot.  com
hxxp: mesothelioma-is-dangerous. blogspot. com
hxxp: e-marketingtutor.  blogspot.  com

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #14 on: March 18, 2010, 09:30:59 AM »
@fancybynature.  What do you mean>? Be more lucid.

Offline Centjay

  • Full Member
  • *
  • Posts: 160
  • Gender: Male
  • Online Biz Jus Got Better...
  • OS:
  • Java Platform Micro Edition Java Platform Micro Edition
  • Browser:
  • Opera 9.80 (Opera Mini 4.2.13337) Opera 9.80 (Opera Mini 4.2.13337)
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #15 on: March 18, 2010, 11:21:36 AM »
Geez
Make It Online Today.  .  .  Visit
hxxp: continuouswebcash.  blogspot.  com
hxxp: mesothelioma-is-dangerous. blogspot. com
hxxp: e-marketingtutor.  blogspot.  com

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #16 on: March 19, 2010, 10:18:01 PM »
<html>
<head>
<title>My first website</title>
</head>
<body style="background-color=silver";>
<ul>
<li><a href="index.  html">Home</a></li>
<li><a href="about.  html">About</a></li>
<li><a href="contact.  html">Contact</a></li>
</ul>
<h1 style="text-align=center; color=maroon";>Site Name</h1>
<hr style="color=red";>
<p>Hello, web development tutorial just got much more interesting, i am currently using only HTML to style outlook of site.  That means if i learn more languages i will be a GURU.  Anyway, i will just sit around and have fun.  As i get to learn more. </p>
<p>Whoopy, i just forgot to mention the name of the tutor, what's that his name?&nbsp; Can i recall.  </p>
<br>
<br>
<p>Yezeeer i just remembered his name is Donpuzo</p>
<p>His favorite quote is F*uk the world</p>
<p>Below is a picture of me. </p>
<img src="image. jpg">
<P>Watch out!!!</P>
</body>
</html>

Here is the explanation of new things i introduced.  I introduced this:

style="background-color=silver"; and incoperated it into out body tag, that made the body of the page silver color, we first declared style by using the style=""; tag.  If we used color: not background-color, all the contents inside the body tag, will become silver.  But background-color made only the background color of the body silver.

2.  We made our <h1></h1> come to the center and also gave it maroon color.  We made it come to the center by intoducing text-align to our style rule. 

style="text-align=center; this made it float to the center.  Other options include right and left, but the default me normally left.

I guess we understand the color=maroon tag, as explained when we explained the background color.

3.  We introduced an entirely new tag, known as the horizontal rule tag <hr> this makes a line come in and we styled the line by giving it a red color.

4.  We introduced also, what is known as a non breaking space character. 

&nbsp;

This is used to give additional space between texts like used in our:

<p>Whoopy, i just forgot to mention the name of the tutor, what's that his name?&nbsp; Can i recall.  </p> It made what's that his name and can i recall have additional space.  if you use that character more than once, it will give additional space.

Then finally we made saw how to display images on a website.  by using the <img> tag.

Inside the <img> was declared a src="image. jpg" the  src means source, which means where is the image in and what is its name.

And that led the picture to a default place where the files for this test site is.  So if i created a folder named webimages and had the image i want to display in it, then it will be <img src="webimages/image. jpg">

The image name is image, and the extension is jpeg that is . jpg so if ur image is of the format . png or . gif it will not work.

So that is all for today.  I expect you to work on other pages and name them whats our <a></a> tag showed to like this

<a href="index. html">Home</a>
<a href="about. html">About</a>
<a href="contact. html">Contact</a>

So if we have other pages known as about. html and another as contact. html and they are in the same area or file, better still save in your desktop, this will make up a 3 paged site.

You see how far we have gone.  In our next lecture, i will show you how to create more tags, and many that are used to make dropdown list, checkbox, radio botton, tables and many others.  Then we will move on to the main thing that makes sites interesting looking, Cascading Style Sheet.

Stay in touch and practice.

God bless.

Offline Centjay

  • Full Member
  • *
  • Posts: 160
  • Gender: Male
  • Online Biz Jus Got Better...
  • OS:
  • Java Platform Micro Edition Java Platform Micro Edition
  • Browser:
  • Opera 9.80 (Opera Mini 4.2.13337) Opera 9.80 (Opera Mini 4.2.13337)
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #17 on: March 20, 2010, 04:08:41 AM »
Bad mon! Lol.  We're followin.
Make It Online Today.  .  .  Visit
hxxp: continuouswebcash.  blogspot.  com
hxxp: mesothelioma-is-dangerous. blogspot. com
hxxp: e-marketingtutor.  blogspot.  com

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #18 on: March 27, 2010, 12:00:19 PM »
Hello everyone.  I am very sorry i have been off this topic, its cause i have been developing a site and also handling requests by newbies.

However i am back, and would like to know how far anyone here has gone developing more than a page with what i showed down.  As that is only way i can ascertain that my posts are not a waste.

After then we will learn for the last lesson HTML and we will move to CSS the main deal on websites.  Bet me if you learn this well, you are good to go. . . . . . . . . . . . . . . . .

Offline cashmoney4d

  • Jr. Member
  • Posts: 72
  • Gender: Female
  • OS:
  • Windows XP Windows XP
  • Browser:
  • Safari 4.0 Safari 4.0
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #19 on: March 30, 2010, 07:00:17 PM »
@donpuzo ı am short of words.  To summarıse everythıng ı would lıke to say a mıllıon thanks to you once agaın God bleşs you
www. lıvedatıng. tk

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #20 on: March 30, 2010, 07:21:17 PM »
Thanks.  I feel humbled.

I will do my best, to make a great developer of you guys, if you guys just co-operate by following up and also by showing me how well my lesson is going.

And i can spend more time with you guyz, cause i have completed the site i was developing to some extent. . . . just minor updates. . .  www. nigeriatradosports. com
Thanks.

Offline Obisboy2000

  • Jr Poster
  • Posts: 40
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Microsoft Internet Explorer 7.0 Microsoft Internet Explorer 7.0
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #21 on: March 30, 2010, 08:05:06 PM »
HEY!!!!!! every body

Kinda wanna contribute 2 this forum too

VISIT my blog page to learn how to get a US address while u  r here in nigeria.
also learn how to register and take online survey with the us Address and make a whole lots of cash.
waitng to here ur comments

Offline cashmoney4d

  • Jr. Member
  • Posts: 72
  • Gender: Female
  • OS:
  • Windows XP Windows XP
  • Browser:
  • Firefox 3.6 Firefox 3.6
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #22 on: March 30, 2010, 10:28:19 PM »
Quote from: donpuzo link=topic=68507. msg289575#msg289575 date=1269687619
Hello everyone.   I am very sorry i have been off this topic, its cause i have been developing a site and also handling requests by newbies. 

However i am back, and would like to know how far anyone here has gone developing more than a page with what i showed down.   As that is only way i can ascertain that my posts are not a waste. 

After then we will learn for the last lesson HTML and we will move to CSS the main deal on websites.   Bet me if you learn this well, you are good to go.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 
I will do all my best to promote your site.  and god will surely bless you
www. lıvedatıng. tk

Offline donpuzo

  • Cadet
  • Posts: 14
  • Gender: Male
  • OS:
  • Windows Vista Windows Vista
  • Browser:
  • Firefox 3.0.18 Firefox 3.0.18
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #23 on: March 30, 2010, 11:34:16 PM »
Ok.    Enough of the waiting, lets have fun and learn more.   .   .   .   .   You know as it goes, i am trying to make things easy and nice here.   .   .   .   .   .   .   .   .   .   .   .   

Today we will be finishing HTML.   .   .   .   And when next we meet, it will be Cascading Style Sheet we will be teaching.   

I hope i come back early enough for the CSS classes cause my study section will be starting on 12th April, and i am trying to concentrate with my students.    Enough of history and talking.    Today we will learn new  HTML tags and also learn how to create tables with HTML and also more things.   .   .   .   .   .   .   .   .   .   

<html>
<head>
<title>My first website</title>
</head>
<body style="background-color=silver">
<ul>
<li><a href="index.     html">Home</a></li>
<li><a href="about.     html">About</a></li>
<li><a href="contact.     html">Contact</a></li>
</ul>
<h1 style="text-align=center; color=maroon">Site Name</h1>
<hr style="color=red">
<p>Hello, web development tutorial just got much more interesting, i am currently using only HTML to style outlook of site.     That means if i learn more languages i will be a GURU.     Anyway, i will just sit around and have fun.     As i get to learn more.    </p>
<p>Whoopy, i just forgot to mention the name of the tutor, what's that his name?&nbsp; Can i recall.     </p>
<br>
<br>
<p>Yezeeer i just remembered his name is Donpuzo</p>
<p>His favorite quote is F*uk the world</p>
<p>Below is a picture of me.    </p>
<img src="image.    jpg">
<P>Watch out!!!</P>
<hr style="color=red">
<h3 style="font-size:30px; color:maroon;">Contact Us Here</h3>
<form name="contactform" action="handler.   php" method="post"></form>
<label for="name" style="color:red">Name:</label>
<br />
<input type="text" name="namefield">
<br />
<label for="email" style="color:red">Email:</label>
<br />
<input type="text" name="email">
<br />
<label for="message" style="color:red">Message</label>
<br />
<textarea name="message" cols="50" rows="8"></textarea>
<br />
<input type="submit" value="Contact Us">
<hr style="color=red">
<table border="1">
      <th>Web Design</th><th>Web Programming</th>
<tr>
<td>#40,000</td>
<td>#125,000</td>
</tr>
</table>
<select size="1">
   <option>Select Your Category</option>
   <option>Wed Design</option>
   <option>Web Programming</option>
   <p>Tick a Payment Plan</p>
   <input type="radio" name="option" value="bank">
   <label>Online Transfer</label>
   <input type="radio" name="option" value="online">
   <label for="bank">Bank Transfer</label>
   <input type="submit" value="Make an Order">
</select>
</body>
</html>



Post Merge: March 31, 2010, 12:58:13 AM
Ok.    Enough of the waiting, lets have fun and learn more.   .   .   .   .   You know as it goes, i am trying to make things easy and nice here.   .   .   .   .   .   .   .   .   .   .   . 

Today we will be finishing HTML.   .   .   .   And when next we meet, it will be Cascading Style Sheet we will be teaching. 

I hope i come back early enough for the CSS classes cause my study section will be starting on 12th April, and i am trying to concentrate with my students.    Enough of history and talking.    Today we will learn new  HTML tags and also learn how to create tables with HTML and also more things.   .   .   .   .   .   .   .   .   . 

<html>
<head>
<title>My first website</title>
</head>
<body style="background-color=silver">
<ul>
<li><a href="index.     html">Home</a></li>
<li><a href="about.     html">About</a></li>
<li><a href="contact.     html">Contact</a></li>
</ul>
<h1 style="text-align=center; color=maroon">Site Name</h1>
<hr style="color=red">
<p>Hello, web development tutorial just got much more interesting, i am currently using only HTML to style outlook of site.     That means if i learn more languages i will be a GURU.     Anyway, i will just sit around and have fun.     As i get to learn more.    </p>
<p>Whoopy, i just forgot to mention the name of the tutor, what's that his name?&nbsp; Can i recall.     </p>
<br>
<br>
<p>Yezeeer i just remembered his name is Donpuzo</p>
<p>His favorite quote is F*uk the world</p>
<p>Below is a picture of me.    </p>
<img src="image.    jpg">
<P>Watch out!!!</P>
<hr style="color=red">
<h3 style="font-size:30px; color:maroon;">Contact Us Here</h3>
<form name="contactform" action="handler.   php" method="post"></form>
<label for="name" style="color:red">Name:</label>
<br />
<input type="text" name="namefield">
<br />
<label for="email" style="color:red">Email:</label>
<br />
<input type="text" name="email">
<br />
<label for="message" style="color:red">Message</label>
<br />
<textarea name="message" cols="50" rows="8"></textarea>
<br />
<input type="submit" value="Contact Us">
<hr style="color=red">
<table border="1">
      <th>Web Design</th><th>Web Programming</th>
<tr>
<td>#40,000</td>
<td>#125,000</td>
</tr>
</table>
<select size="1">
   <option>Select Your Category</option>
   <option>Wed Design</option>
   <option>Web Programming</option>
   <p>Tick a Payment Plan</p>
   <input type="radio" name="option" value="bank">
   <label>Online Transfer</label>
   <input type="radio" name="option" value="online">
   <label for="bank">Bank Transfer</label>
   <input type="submit" value="Make an Order">
</select>
</body>
</html>

Below is the explanation.   sorry for double posting it is exactly the same line of tags. 

The new thinngs we did are: First we opened a new tag <h3 style="font-size:30px; color:maroon;">Contact Us Here</h3> after a rule, while i have thought on.   In inline styling we have many style tags and possibility, one of while is font-size:30px it makes the element which bears the tag to have a pixel size of 30 increasing it, increases the size and reducing it reduces it's size.   Many other format exist like pm or %  thats is we can write 30pm or 30% although  using another will not give the same size as this, i used px, that's my pattern of styling in CSS and i am used to it.   Maintaining one particular format is a sign of good styling skill and also prevents cross-browser problems i.  e Difference in looks in different browsers. 

Next we opened a form <form></form> and pass some elements to it, that is only useful when we process this form.   And that is done with a server-side programming language like php or Asp (I will teach php here)

After that or inside the form tag was a label tag <label></label> the label tag is used mostly to tie up a text if you dont want it to be formated like the <P></P> tag, which leaves a line break and paragraphs. 

We used it to pass some fields like Name and Email and Message. 

After each we placed line breaks and then <input> tag.   This tag is mainly used for forms and its a server side language that handles forms.  . 

Inside the first input  tag we placed a type="text" name="namefield" the "type" there is used to specify that it is a text that we want to be written inside the namefield .   If we wanted it to show asterics to hide , like in case of a pass word, it will be  <input type="password"> other pypes exist for many uses.   The "name" which we  put after the type, which we named namefield is to distinguish it from others in the page, incase we were to process it as a real form in a server side langauge. 

After then was a <textarea></textarea> then we placed a col="" and row="" in it and placed value of 50 and 8 in them.   This is meant to serve as the height and weight.  .  .  .  .  .  Learning HTML tables will make you know mare about column and rows. 

Thereafter was our <input type="submit" value="Contact Us"> which is meant to create a submit button to submit the form to the server side script language that will take action to what is filled.  .  .  .  .   The Value can be changed to whatever you want to show you can change it to "Submit Now" or  whatever. 

After that was a horizontal rule styled with red color and we opened a <table></table> tag. 

Two table heads were opened for the datas that the table will hold <th>Web Design</th><th>Web Programming</th> so this makes twwo fields exist and their heads are the values passed. 

Thereafter i opened the main tag <td>#40,000</td> before then was a <tr></tr> this tag just makes us know that a rule has been made that opens for the datas the datas held will fall in the order of the table head we opened which was the costs for each. 

We the closed the table rule and the table itself with the </table>

There after was a dropdown list with webdesign and programming as relation to the cost we made in a table.   The select tag is used to open up a dropdown list which then has option tags in it three options were created:
       <option>Select Your Category</option>
   <option>Wed Design</option>
   <option>Web Programming</option>

We were suppose to close the select tag <select></select> there but i included the next tag in it before closing it and that was the radio button <input type="radio" name="option" value="bank"> and the one we gave a value of online for the processing end to distinguish them.   After then waas our submit button. 

Thanks for following up once again and i encourage you to  learn HTML/XHTML more in www.  w3schools.  com or preferably a paid webdevelopment tutorial from www.  marknollis.  com/students.  html cause i omitted a lot of important Table skills and also input types like checkbox and others.  .  .  .  .  .  Cause of time and other things. 

See you next time when we will be learning Cascading Style Sheet (CSS). 

God bless


Post Merge: March 31, 2010, 01:28:57 AM
I will have to discontinue this tutorial, cause i noticed that a member of this site pasted this exact tutorial in his blog, without a link back to the author. . . All what i am reaching you guyz are 100% by me and i deserve accholades, if you even decide copy and pasting it on your site, let alone taking the glory.

This is never done, not even in www. nairaland. com or www. naijavoice. com where i am a frequent poster.

hxxp: www. ebenzforcashmoney. blogspot. com/ is the site.

Sorry for this development, but this is the last ii will teach.

Thanks.
« Last Edit: March 31, 2010, 01:28:57 AM by donpuzo »

Offline cashmoney4d

  • Jr. Member
  • Posts: 72
  • Gender: Female
  • OS:
  • Windows XP Windows XP
  • Browser:
  • Firefox 3.6.2 Firefox 3.6.2
    • View Profile
Re: Tutorial on Building Interactive and Dynamic websites
« Reply #24 on: April 01, 2010, 12:41:40 PM »
why now
www. lıvedatıng. tk

Nigerian Best Forum . NBF

Re: Tutorial on Building Interactive and Dynamic websites
« Reply #24 on: April 01, 2010, 12:41:40 PM »


 

Enter Your Email Below For Daily Jobs Updates, It's Free

100% Free