Welcome to My Website

Get fresh ideas for managing & growing your business.
Diposting oleh Mr. Andri Siagian Selasa, 18 Mei 2010

Welcome to the HTML Code Tutorial. Our goal is to provide the most helpful and complete guide to creating web pages anywhere. If you're just beginning

Snow on the page

Preview of the code:

************************************

First you need to open the page with a HTML editor such as dream weaver or front page or even note pad , notice that if you using any other page making (ASP, PHP , etc.) languages it doesn't matter. Just open it and access to source file.

When you Open it, there are some codes in HTML called tags:

you have to find something called "BODY"

In HTML code it's like



When you find it just skip a line and copy and paste after body tag the codes which we offered you in this website

Anyways if you couldn't find that just paste the codes in the end of the source file.

Rain on page

Preview of the code:

First you need to open the page with a HTML editor such as dream weaver or front page or even note pad , notice that if you using any other page making (ASP, PHP , etc.) languages it doesn't matter. Just open it and access to source file.

When you Open it, there are some codes in HTML called tags:

you have to find something called "BODY"

In HTML code it's like



When you find it just skip a line and copy and paste after body tag the codes which we offered you in this website

Anyways if you couldn't find that just paste the codes in the end of the source file.


Put password on your website to protect your pages

Preview of the code:

Login Area

UserID:

Password:

First you need to open the page with a HTML editor such as dream weaver or front page or even note pad , notice that if you using any other page making (ASP, PHP , etc.) languages it doesn't matter. Just open it and access to source file.

When you Open it, there are some codes in HTML called tags:

you have to find something called "BODY"

In HTML code it's like



When you find it just skip a line and copy and paste after body tag the codes which we offered you in this website

Anyways if you couldn't find that just paste the codes in the end of the source file.

Message to user by clicking a button

Preview of the code:

First you need to open the page with a HTML editor such as dream weaver or front page or even note pad , notice that if you using any other page making (ASP, PHP , etc.) languages it doesn't matter. Just open it and access to source file.

When you Open it, there are some codes in HTML called tags:

you have to find something called "BODY"

In HTML code it's like



When you find it just skip a line and copy and paste after body tag the codes which we offered you in this website

Anyways if you couldn't find that just paste the codes in the end of the source file.

Dancing status bar sliding nicely

Preview of the code:

First you need to open the page with a HTML editor such as dream weaver or front page or even note pad , notice that if you using any other page making (ASP, PHP , etc.) languages it doesn't matter. Just open it and access to source file.

When you Open it, there are some codes in HTML called tags:

you have to find something called "BODY"

In HTML code it's like



When you find it just skip a line and copy and paste after body tag the codes which we offered you in this website

Anyways if you couldn't find that just paste the codes in the end of the source file.

HTML Popup Window Code

First you need to open the page with a HTML editor such as dream weaver or front page or even note pad , notice that if you using any other page making (ASP, PHP , etc.) languages it doesn't matter. Just open it and access to source file.

the auto-fill email link

Copy and paste the following code into the HTML portion of your web page where you would like the email link to appear:


you@yourdomain.com?subject=Your Subject">

Edit the text in red to suit your needs.

Contact Us


If you're displaying your email address on your web site, you may be unknowingly setting yourself up to receive a ton of spam email. Unfortunately, spam robots are continuously crawling the Internet in search of email addresses they can use to not only send spam, but also sell to other spammers.

However, although it's very difficult to protect yourself from receiving spam email, there is a way you can still display your email address on your web site and protect it at the same time.

Instead of displaying the usual mailto:you@yourdomain.com email link within your web page, use the following code within your HTML:


@yourdomain.com">Contact Us

When your email link is clicked on, it will display your email address correctly.

Change the email address in the example above to the email address you would like to display.

By using this simple little code, you can protect your email address from spam bots.


Dynamic Calendar

Author: Constantin Kuznetsov Jr. | Homepage

Updated: Sept 15th, 2000 by Johan Notenboom Eradicated incorrect date display when cycling through year

Description: JavaScript calendars have existed for a long time now, but never have they looked pretty (literally), until DHTML came along. Check out Constantin's cool DHTML calendar, which not only looks handsome, but allows you to dynamically look up the calendar for any particular month/ year (by pressing the "Prev Next" buttons). Cool!

p.s: Dont forget to check out Dynamic Drive's DHTML calculators, which look equally stunning when compared to their JavaScript counterparts...

Demo:

Year: Prev Next
2010
Month: Prev Next
May
Mon Tue Wed Thur Fri Sat Sun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


Directions:

Step 1: Insert the below into the section of your page where you wish the calendar to appear:

Select All

Step 2: Add the below event handler into the tag itself, like this:

onLoad="setCurrentMonth()">

Step 3: Finally, you need to download the following file (by clicking it, or clicking it with the shift key depressed for NS users), and upload it into the same directory as the page containing the calendar:

calendar.js

You're done!








Directions:

Step 1: Insert the following code in the HEAD section of your page

Select All

The code above references one CSS file plus two external .js files, which you need to download below (right click/ select "Save As"):

  1. featuredcontentglider.css (read inline comments for tips on customizing the default CSS)
  2. featuredcontentglider.js

By default, upload these three files to the same directory as where your webpage resides.

Step 2: Insert the below sample code into the BODY section of your page:

Select All

It contains the HTML for the first demo you see above. That's it for installation! Lets move on to understanding how everything works.

Set up Information

The code of Step 2 shows how to apply the script to ordinary content on your page:



canadaprovinces" class="glidecontentwrapper">

glidecontent">
Glide content 1 here


glidecontent">
Glide content 2 here


glidecontent">
Glide content 3 here




p-select" class="glidecontenttoggler">
prev">Prev
toc">Page 1 toc">Page 2 toc">Page 3
next">Next

A main DIV (ie: "canadaprovinces") should surround all of the individual contents to be glided, with each glided content also wrapped in a DIV of its own and tied together with its peers using a shared CSS class name (ie: "glidecontent"). The Toggler DIV isn't tied down to the Glider DIV structurally, and can be added anywhere on the page (give it a unique ID as well, ie: "p-select"). We'll discuss what you can add inside the Toggler DIV in the next section, but moving on for now, finally, call featuredcontentglider.init() and supply it with the IDs of the various contents you've just defined, among other things, to get things going:

There are 8 parameters in total you can customize. Note the 3 red values- these must match the corresponding IDs you assigned in the HTML portion of the script! Allow me to draw your attention to the last 2 parameters on the list:

autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2]

As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.

HTML scrollbox

Result:

As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.

Example Comment Box Code:

The following comment box code consists of a form containing a small textarea (the comment box) and an input field (the submit button). It also contains a break (
)after each element so that each form element starts on a new line.



This results in:

Comments:


Example Marquee Code

Note that if you can't view the examples, it's likely that your browser doesn't support the marquee tag.

Slide-in text:

This text slides in from the right, then stays where it is. You will need to refresh this page to see the effect again.


HTML Examples


This page contains HTML examples - examples of basic HTML elements that you can use for your own website.

There are so many HTML examples here that I've separated them into types. To view more of each type, simply click on the relevant link (next to the example).

Alert Box
Confirm Box
Prompt


Example of...CodeExample
Text:

Small font Large font Colored font Bold font Italic font and more...


Links:

Example Link


Lists:
  1. HTML Examples
  2. HTML Tutorial
  3. HTML Codes
  4. and much more!

Images: Milford Sound in New Zealand
Tables:
Table cell 1
Table cell 2Table cell 3

Forms:

Quackit Tutorials



Frames:


























0 komentar

Posting Komentar