watch.htm
Basic Know How
The Html & JavaScript code layoutted here at rightside is producing the line 2 and line 3 at top left :
Line 1 contains just the title of the page [ watch.htm ]
Line 2 contains the form input.
Line 3 shows a link and a reset button.
It is not set in the code what kind of document is this, so any browser will assume, from its extension, that the file : "watch.htm" is an html document.
Now if your browser is not disabled to execute JavaScript, by clicking on the link in the third line from top :
What time is it ?
the JavaScript-function TimePlease() will execute the code by showing in this page the following text :
..." Same time of yesterday at this time ! "...

 <form name=ironic>
<input type=text name=ironictxt value="This is a Super Watch"size=34>
<script language=javascript>
<!--
function TimePlease(){
document.forms.ironic.ironictxt.value=' Same time of yesterday at this time ! ';}
document.write('<br><b><i><a href=javascript:TimePlease()>What time is it <font size=6>?</font></a></i></b> &nbsp; <input type=reset value=reset>')
//-->
</script></form>
...if we want to give more informations to the the browser and to the search engines that will crawl this page, if set online, then we will have to add a few html tags :  watch.html  and we also should put each source component in the correct place, in order to help the search engine spiders to crawl properly our pages. So the source code of this page should be more properly set as in the following  html complete layout
Test  your Copy & Paste ACCURACY.Forum   Table
<html>
<!--
This is a comment for the programmer or the user of this page usability and can be multilines, ENTER tab can be used.
Name of the file containing this code is : "watch.html"
-->
<head><title>Complete html document</title>
<style>
A:link {COLOR:blue;TEXT-DECORATION:none;}
A:visited {COLOR:red; TEXT-DECORATION:none;}
A:hover {COLOR:green; TEXT-DECORATION:underline;font-weight:bold;}
</style>
<script language=javascript>
<!-- This is another place where to put comments Do not use the ENTER tab here
function TimePlease(){
document.forms.ironic.ironictxt.value=' Same time of yesterday at this time ! ';}
//...do not use the ENTER tab here-->
</script>
<meta name="keywords" content="Vittorio Ognissanti, php, teacher, webmaster, webdesign, javascript, reseller, webhosting">
<meta HTTP-EQUIV="reply-to" CONTENT="vittorio_ognissanti@hotmail.com">
<meta NAME="author" CONTENT="Vittorio Ognissanti">
<meta NAME="description" CONTENT="Basic start page for newbies"><meta NAME="copyright" CONTENT="2007-2009">
</head>
<body bgColor=aliceblue>
<form name=ironic>
<input type=text name=ironictxt value="This is a Super Watch"size=34><br>
<b><i><a href=javascript:TimePlease()>What time is it <font size=6>?</font></a></i></b>
<input type=reset value=reset></form>
[<i><a href=watch.htm#html>code</a></i>]
</body></html>
Test  Top   Table

 
Test
... Nb : before you begin anything, check out if you have in your PC notepad.exe and also arrange to view all file extensions on your PC.
Check your ACCURACY in Copy & Paste

Test this script [click on the link aside]   
Copy to your PC ↓
  1. Select & copy the code in the right cell :
    from : <form name=test>... to :</form>
  2. Open a text editor program.
  3. Paste the code into the new file
  4. Click on menu File and choose : Save as...
  5. In the pop up window "Save as" rename with test.htm
  6. Choose a folder wherein to save and click "Save as..."
  7. The file is now ready to be opened and work on your Pc, so just double click on it and you should get this result, if so, then you are skilled enough to start programming...
Obviously the page must be completed with all html tags such as title, head, body etc... (the script would work anyway)
PHP programming is quite similar ... you only need a PHP webserver that provides you with the php extensions, check here what php extensions mean, or get more informations on php subdomains and packages in our website.
<form name=test>
<input type=text name=ironictxt value="This is a Super Watch"size=34>
<script language=javascript>
<!-- [...include the red form-tags in the selection ]
function Time_Please()
{document.forms.test.ironictxt.value=' Same time of yesterday at this time !';}
document.write('<br><b><i><a href=javascript:Time_Please()>What time is it <font size=6>?</font></a> </i></b>   <input type=reset value=reset>')
//-->
</script> </form>
 Note that for avoiding an error, the name assigned to this test-form is "test" as we already have a form like this in this page by name "ironic", also we need to rename the function into : "Time_Please" for the same reason.

Table   Top   html [complete]

Table
This is the middle row [cell is aligned to center]
Default alignment is to LEFT while vAlign default is middle

It is very important to master the html-table syntax as all database are based on this tag, especially when we will retrieve values from a database, we will need to know howto manage this tag perfectly.
All the source code to produce this auto-resizing table can be seen by rightclicking and choosing to view html source
The attributes and parameters are far to be all included here, a few of them are still to add to the ones herein contained.
A litttle explanation is necessary for cellspacing and cellpadding, the tiny square-line surrounding the text is the cellspacing [here=12] , it means that from the table tick-border to the tiny line there are 12 pixels (from top, bottom, right and left), cellpadding is the distance from the tiny line to text from top, bottom, right and left [here=5] 5 pixels.
This is the bottom row [cell is aligned to right]
Top   html [complete]   Test   phpBB-Forum



SUBFRAME CONTENT :


This URL has been targeted from : http://www.clone.c-php.com/bp/3.php#test ... Back