This is a free learning and interractive section for those willing to learn DHTML (Dynamic HTML) techniques. DHTML is a combination of the regular web programming languages which are divided into 2 major categories:
1. Client Sided : those that run on the web browser: this is where javascript, HTML, CSS , java applets, flash, vbscript fall belong.
2. Server sided: those that run on the web server: such as perl, php, asp, asp.net, jsp, cold fusion,


[size=14pt]
If you are new in web design or you are not grounded in coding, please follow the guideline first before you continue - https://www.nairaland.com/nigeria/topic-216485.0.html - this thread is actually meant for advance folks[/size]



Let me show an example of a DHTML Sample i just made http://ds.mwebng.net/dd/validator.html - this is explained later below - it is made up of html/javascript/php to check if a website url like www.google.com actually exist.

DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more dynamic
You see, DHTML is NOT a scripting language (like JavaScript), but merely a browser feature- or enhancement- that gives your browser the ability to be dynamic. What you really want to learn is not DHTML itself, but rather, the syntax needed to use DHTML. Before anything else, you may want to quickly visit http://www.dynamicdrive.com/ to see what this language is capable of.

For this our class here, i am going to place focus on html, css, javacript, php and mysql. That is going to be the basics of this class. But the greater part of this class is going to be question and answering section. I will try dropping in some articles from time to time whenever i am online. And other web developers are welcome to help [and not to diss me if i blunder but rather correct me so i will not report to Seun].


Dynamic HTML is not really a new specification of HTML, but rather a new way of looking at and controlling the standard HTML codes and commands.

When thinking of dynamic HTML, you need to remember the qualities of standard HTML, especially that once a page is loaded from the server, it will not change until another request comes to the server. Dynamic HTML give you more control over the HTML elements and allows them to change at any time, without returning to the Web server.

There are four parts to DHTML:


1. Document Object Model (DOM)
2. Scripts
3. Cascading Style Sheets (CSS)
4. XHTML


DOM [Document Object Model]
The DOM is what allows you to access any part of your Web page to change it with DHTML. Every part of a Web page is specified by the DOM and using its consistent naming conventions you can access them and change their properties.

Scripts
Scripts written in either JavaScript or ActiveX are the two most common scripting languages used to activate DHTML. You use a scripting language to control the objects specified in the DOM.

Cascading Style Sheets
CSS is used in DHTML to control the look and feel of the Web page. Style sheets define the colors and fonts of text, the background colors and images, and the placement of objects on the page. Using scripting and the DOM, you can change the style of various elements.


XHTML
XHTML or HTML 4.x is used to create the page itself and build the elements for the CSS and the DOM to work on. There is nothing special about XHTML for DHTML - but having valid XHTML is even more important, as there are more things working from it than just the browser.


Features of DHTML

There are four primary features of DHTML:

1. Changing the tags and properties
2. Real-time positioning
3. Dynamic fonts
4. Data binding


Before we go on, i am going to introduce some new tools we are going to be using to run our sample codes:
Notepad++ will be quite useful for use. At the same time you need something that can allow you to quickly preview
your code. So i just created a simple to use dynamic online html editor on http://htmleditor.mwebng.net/ and also made a windows package for it - also in the same place. I will review them later - but for the purpose of this class room, they will server for now.




Link To This Page Directly
A direct shortcut to this page in case you can't find it listed on the home page is http://nl.mwebng.net/ that will always bring you directly here. That will serve the same function as bookmarking this page on your browser.


Beginners
To minimize the efforts of those tryin to make this page work please read the first page of this forum and try to read those tutorials recommended before starting to post on this thread.


Regular Coders/Experts
Your support is require to make the whole thing work.

Everyone
You can post any question on any of the languages mentioned here on this thread. Just let your message be straight to the point
like "I am having problems with uploading images on my website". And if your message is regarding a site or something you created
it will be a good idea to upload it online and post the link in your message.

Forbidden
I strongly forbid anything relating to scam. Such as bulk mail, tracking sites, email tools,, i refuse to have anything to do
with stuffs like that, so if that is what you are looking for, i assure you that you will not get such from me!

Our First Lesson: to learn DHTML, first you need to have at least a baseline knowlege about the following languages:
HTML, CSS, Javascript and some PHP. because we are going to bring all these into play in DHTML.
This class does not expect you to be a professional in those languages but it does expect you to be able to code to an extent in these languages.
I believe some tutorials around have treated HTML, and there is @yawatide's free css book which i find to be very useful, i will request for permission to feature that css book here later.
But for now let me post links to sites where u can learn those basics or at least do a quick check through them.
http://w3schools.com/ will help you to learn html, css, javascript as well as PHP. That is just a guide, but i will respond to direct questions when necessary.
But it is a good idea to know those languages at least to a limited extent.

I am not expecting to see questions here such as:
1. How do i display an image on a web page.
2. How do i insert javascript into a web page.
3. How do i specify the color of links,
4. How do i submit forms on my website
5. How do i upload files to the server
Those ones you will learn from the basic tutorials,

The kinds of questions here should be:
1. How do i submit a form and get the result back on the same page.
2. If people fill in email addresses into my forms, i want to validate to make sure the email is in right format.
3. When users fill urls into my web forms, i want to validate those urls to make sure they are correct.
4. How do i display information from databases in pages.
5. How do i upload files without leaving the web page.
6. How do i set up captcha/image verification on my web forms
7. How do i validate forms.
8. How do i make use of jquery
9. How can i start using ajax, i already know some javascript
10. How do i create classes in php and javascript
11. How do i create a search on my website

However you are free to ask any question related to any of the languages, but these are just what i expect from you guys.

Article 1: How To Validate A URL:
The example is on my site: http://ds.mwebng.net/dd/validator.html
You can enter a website address and it will report if it exist or not.
I am going to explain the php aspect of this script.

validator.php

<?php
ini_set("display_errors","false";
$url=$_REQUEST['url'];
$handle = fopen("$url", "rb";
$contents = fread($handle, 1);
fclose($handle);
echo strlen("$contents";
?>

Line 1: will set php not to display any errors or warnings
Line 2: will fetch the url specified to the script
Line 3: open the url for reading.
Line 4: attempt to read 1 byte of the page into a variable
Line 5: closes the file handle - a good habit in php
Line 6: displays the length of the bytes read

Result discussion:
You can access this script directly by validator.php?url=http://www.yahoo.com/
It will either print 0 if the site does not exist or print 1 on the browser

The other aspect, the page in the demo uses javascript/ajax to post a url to this php file.
Ajax for beginners means Asynchronous Javascript - a techniques used to communicate with the web server
without reloading the page.
Ajax will call the validator.php?url=whatever-u-entered and will fetch the result either 0/1 and on that basis will display
whether the site actually exist or not!

validator.html - this is a bit advanced and will be discussed later.


Now that is a long code, but in summary it just make uses of ajax to call that php validator in a fast and smart way without leaving the web page.
I will post an article on ajax later that will be easy to follow.
This example is a typical dhtml script - that is why i am featuring it this early just to give you an idea of what is coming.

Welcome to DHTML Evolution
Alright folks, i can see some other DHTML Programmers are coming in to help - that is great.
So i will have to lift one of the rules - you can now ask any question concerning website design here - i will try my best to answer as best as i can - even if it is asp.net, and i will like to introduce mysef here by saying i am Tony, a freelance software programmer and website developer who reside somewhere in lagos city. But for the purpose of this class, let's just assume i am a web developer intereseted in sharing some DHTML resources with my fellow nairalanders - since the begining of my DHTML career, i have only been learning from and with the white but not with my fellow brothers and sisters - this is a sort of newyear resolution.
Happy New Year to all of you fellas here.

HTML Editor Lite Version 1.0
So guys about the HTML Editor i posted above - if you have any issues with it, just say it - and the downloadable version is compatible with both windows xp and windows vista you can download it directly on http://htmleditor.mwebng.net/html_edit.zip

The original version of that editor - which i made for mysef initially can run php/mysql codes -  i will modify it and place it for download later so that you can in a similar fashion master your server sided php programming skills.

Some Stuffs You Are Recommended To Read Before Coming To Class

Please be warned that the order is important (experts correct me if i am wrong) so that you will not get lost and frustrated.

[list]
[li] HTML Tutorial http://w3schools.com/html/default.asp[/li]
[li] CSS Tutorial http://w3schools.com/css/default.asp[/li]
[li] Javascript Tutorial http://w3schools.com/js/default.asp[/li]
[li] PHP Tutorial http://w3schools.com/php/default.asp[/li]
[li] SQL Tutorial http://w3schools.com/sql/default.asp[/li]
[li] HTML DOM http://w3schools.com/htmldom/default.asp[/li]
[li] DHTML http://w3schools.com/dhtml/default.asp[/li]
[li] AJAX http://w3schools.com/ajax/default.asp[/li]
[/list]


The order of those things are very important, and you are free to ask questions concerning any of the above even if it is about wap sites [this one is not yet popular in Nigeria - but if you are interested in creating wap sites let me know]

Chairman,
i really appreciate may the good lord bless you i have some hardcopy on this Dhtml bt have not done d practicals when we start it i will get u informed if am confuss in any area
my mail naks4dtp@yahoo.com i hail u master!

I see you really want to be of help. I'll likely come in at intermediaries.

Another you should try doing is to always get learners a reference on w3school's website, where they can go and read up more contents for themselves. Something like intros (eg Intro to HTML DOM), they should read stuffs like that up at w3schools then ask questions. I guess that will minimize much tutorial typing and increase chances for more questions.

Don't paste so much codes at a time. You are dealing with beginners so don't expect them to become intermediates asap. Take things gradually.

Well, just keep it up.

Happy New Year!

Some Definitions you Need To Know

HTML aka hypertext Markup Language. It is the language of the web - all web browsers understand this language and can read it well - there are some slight deviations which i will skip here for now.

CSS is aka Cascading Style Sheet: it is a way of making your web page more attractive and colourful.

Javascript: it is a language that tells the browser what to do - like display a message, hide that picture, pull down that menu - submit that form.
And make no mistake - JAVAScript is completely different from java.

PHP: aka ( P Hypertext P reprocessor) is a powerful server-side scripting language for creating dynamic and interactive websites.


ASP: aka ( Active server page) is similar to asp but made by microsoft.

ASP.NET: is the senior brother of ASP.


JSP: Java Server Pages is similar to ASP/PHP but made.


AJAX: Asynchronous Javascript [my speciality] is a technique of exchanging data with the web server without reloading the page - it is a combination of javascript with some of the regular server sided langs like php, asp, aspx/asp.net, jsp,

I am still waiting for questions to start coming. I will soon start posting articles - so watch out.

Why not hang on a bit and let's have some members back from the holiday. If you continue, it will become much for them to read and digest. Just hold until say 3rd then you can continue.

Happy New to All!!!

Yeah right, let's not leave those on holidays behind, i will wait then. And another thing, i created a redirection to this thread on my site for easy access - nl.mwebng.net will come straight here - i am wonderin if this is breakin any rules?

You can simply use the URL with the NairaLand domain here then for other e-classroom you want to offer, you simply use that from you website. I stand to be corrected but this is just what I think.

Hope you know this won't be so easy when all the peeps in the house are all back. Just get ready for new sign ups that are entirely novice too

@moderator: i know this is not goin to be an easy task - but i will try my best anyway. And there is another thing again, i intended to create a tutorial section on my site - but now i have changed my mind - i think this one is just fine - but considering that i want other people that are not on nairaland to come right here, i am thinking of creating a message filter that will pull information directly from this page and display it on my site, but to post or reply or do anything, you will be redirected to this page directly.
I have not yet implemented this - i want to get your advice or seun's advice on this. I like this forum the way it is, the contacts i have here, friends, i am not interested in creating a forum for myself where my friends on nairaland will be left out - i enjoy this place very much - that is why i am doin all this.

'Tis just as simple as you want it. More people are needed in here to make posts and contributions. Provided all you want to do is to feature posts from here on your website but replies come back here, "after due registrations and all those activation stuffs", I think there is no much problem. In fact, what you intend doing is creating a new channel from where new members get the awareness of the existence of nairaland.com. Anyway, I'll come back and tell you more on this here after speaking to the admin about it.

I like your insight. Just good for my liking. Keep it up!

I have done it now, you can try http://www.mwebng.net/?net=tt plus the script can pull any front page of a thread on nairaland images and all - i tested it all and is just about 10 lines of code. any link clicked there like a said will bring the person directly here.
I have a little exam next week, so i will have to wait till about 2 weeks from now before i start serious posting, meanwhile i can still answer the incoming questions.

Nice script there.

Best of luck in your exams!

God guide you so you write well and come out with great success.

Thanks.

Good work here Dhtml
I like your zeal towards perfection.

You are welcome - this is 2009 - we must not slack this year.

Oh boy,
you have quite a loadful here and your effort is quite commendable. I just wonder if your audience appreciates it that much.
Have you considered leaving a legacy behind for generations, using your skill?
If you would like to be a part of a team working on something that would revolutionise the entertainment industry,
express your interest through info@e247daily.com

Thanks for the offer - err that is the least I can say and yes, Happy New Year.

oya start the thing now?
what kind of business man will still be in his village at this date of the year?
lets eat from your brain of knowledge,, but i aint no vampire o.

Yo bugsy - that is my man. So we are going to practice DHTML alright, our first class project shall be to create an ultra small social networking site.
Features:
- No graphics shall be included - it will be plain html codes and css.
- It will feature login, signup, forgot password, profile wall and some other little things - and ajax.

I will start off later tonight - i am tryin to complete my website update right now.

@poster,

I just want to thank you for everything. Though you are yet to bring out your true self but it is very clear that you are a guru in web design and programming. You are the kind of webmaster that any normal human being who is interested in web designing would want to learn from. So many of those who call themselves webmasters can't even write any simple script. Please we are despirately waiting to learn from the master, just go ahead and start up the tutorial. Please throw more light on DATABASE and PHP.

Dhtml, I was expectin your mail at the address, or maybe I got your reply wrong. The Yes. It'd be a pleasure workin wit you buildin somethin. It's your call,

Thanks for the responses y'all. @zero i want to make a difference by not posting my email all over the place - what if my box were to be hacked or blocked? that is why i prefer to use my site directly - that one is very flexible - sending message through www.contact.mwebng.net is the fastest way to reach me after phone and chat - i hardly come to chat room, and when i do, i usually go invisible - but if u send me an offline and i am online - i will respond.

u still havnt started?
guess u want everyone to leave this thread for you.

I figured out eventually that it will not be easy to start off dhtml tutorial just like that - so i left this thread to create smaller threads around just so ppl may brush up wherever needed. Some of the threads i created on NL are on some topics i wished to share with y'all.

Note that many of these topics are related to DHTML techniques. Yes, all of them. However, this particular thread is more like my
home page on NL. However, i dont want to make it to be all too complex - so i decided to go back and start off small just so i will
not be writing codes wey boys no go fit understand.

Create Ajax Chat & Learn Web Page Data Xchange via Json Vs Xml - https://www.nairaland.com/nigeria/topic-214542.0.html

Moving To Oop Javascript/php Class Module Creation & Instantiation - https://www.nairaland.com/nigeria/topic-214495.0.html

How To Use Ajax For Image Verification Aka CAPTCHA - https://www.nairaland.com/nigeria/topic-214568.0.html

How To Build Your First Website And Upload It Online In Less Than 1 Week! - https://www.nairaland.com/nigeria/topic-213936.0.html

Sample Script- Profile Wall Of Facebook - https://www.nairaland.com/nigeria/topic-214623.0.html

How To Use Ajax (asynchronous Javascript) - https://www.nairaland.com/nigeria/topic-214605.0.html

Javascript For Beginners - Learn How To Script Today - https://www.nairaland.com/nigeria/topic-214685.0.html

Programming Cookies with JavaScript - https://www.nairaland.com/nigeria/topic-215381.0.html

Looking For Any Script/Service? Please Check Here - https://www.nairaland.com/nigeria?topic=214688.0

Database Using Php & Mysql & Xml - https://www.nairaland.com/nigeria?topic=215364.0

Facebook Applications Designing! - https://www.nairaland.com/nigeria?topic=215579.0


I just finished with the facebook application designing some minutes ago - i have to get to personal work - i will be back tomorow to continue from where i stopped.

I just created a roadmap/guideline today for newbies to follow to help them learn how to utilize the resources available in this forum properly.
I will advise that you read that guideline first before you continue - https://www.nairaland.com/nigeria/topic-216485.0.html

And i want to announce my leave from nairaland. i will be back by the end of next week (God willing).

to dhtml.pls i want you to teach me web design that is privately.and i also want to no how much it will cost me.my email is sam_alayo2009@yahoo.com.hope to hear from you soon

Ehm, I am very sorry about that - i dont take private lessons - there is no time - the best i can do is to make posts in this place for now. It seems those that run private lessons do not make much posts here - and will usually want to sell books - so we dont really know how good they are. However, if you ask me any question in the appropriate section - html, i will answer as best as possible even if it means screenshots, all i know i learnt from ppl on the web, u can do that too - and i do software programming too - intranet/internet application programming before with vb 6.0 but now with vb .net - the net is a great place to learn especially if you have a forum where ppl will answer most of your questions and point you in the right direction. U can find your private teacher - but me, i will remain here,

Confession: the dude dhtml (not the technique) is making me shiver. u're so freaking good! i hate u dude!! get out of ma head!!!
lol

*shivers out of the thread*

@moderator, thanks for dropping by.

our first class project shall be to create an ultra small social networking site.
Features:
- No graphics shall be included - it will be plain html codes and css.
- It will feature login, signup, forgot password, profile wall and some other little things - and ajax.

I did mentioned that before - but i got some info that some people (many ppl) were not following what was going on here - so i decided to go and create smaller threads, so now we are back here,
i am not fully back from leave, but lets see what we can do tonight - i will supply the layout our our virtual social networking site later on tonight.