For some time now I have been looking for a few things to add to my website, some call them "Snippets."  Lately I have been buying books and trying to learn HTML and CSS.  One of the books is, "Beginning Web Programming with HTML, XHTML, and CSS by Jon Duckett.  It was copywrighted in 2004 so it is pretty much out of date.  This is part of my learning, making old code pass validation.

Like I said, I have been looking for "Snippets" that I can use on my websites and those made with WebEasy.  One such "Snippet" is a "User Name and Password" Box.  I have made modifications to the code from the book so it would take on the appearance I want.  Next I had to size different parts so they would work in different applications. And then there was WebEasy, now that was fun!

I started off with an 800 by 600 blank page, I try not to use templates.  Using "Plain Text" I made an "HTML Placeholder".  Next I used my "Tools" and clicked on "Script" where I copied and pasted my code.  Then I "Built" and "Previewed" about 100 times, changing this and changing that in my code until I had it the way I wanted.

Here is the code for WebEasy8 :

<style type="text/css">

 body {
  background-color:#F5DEB3;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: medium;
  font-style: normal;
  font-variant: normal;
  font-weight: normal; }

 form {
  background-color:#fff8dc;
  border:solid 1px;
  padding:5px;
  margin-right:-25px; }

h1 {
  font-family: Arial, Helvetica, Sans-Serif;
  padding:5px; }

 p {
  font-family: Arial, Helvetica, Sans-Serif;
  padding:5px; }

</style>
</head>

<h1>Another Password Snippet</h1>

 <form action="http://www.softcity.com"method="post">
  <p><input type="text" name="txtusername" value="" size="20" maxlength="20">Username</p>
  <p><input type="password" name="pwdPassword" value="" size="20" maxlength="20">Password</p>
  <p><input type="submit" value="Submit"></p>
 </form>

 
<p><small>Created on ... August 15, 2010 by J. B. Kendall with NotePad Pro</small></p>

</body>
</html>

Now for those that have an HTML and CSS editor, here's the code:

<style type="text/css">

/*         The CSS does valadate - No Errors -  however the HTML does not         */

 body {
  background-color:#F5DEB3;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: medium;
  font-style: normal;
  font-variant: normal;
  font-weight: normal; }

 form {
  background-color:#fff8dc;
  border:solid 1px;
  padding:5px;
  margin-right:1160px; }

 p {
  font-family: Arial, Helvetica, Sans-Serif; }

</style>
</head>

<h1>Another Password Snippet</h1>

 <form action="http://www,softcity.com"method="post">
  <p><input type="text" name="txtusername" value="" size="20" maxlength="20">Username</p>
  <p><input type="password" name="pwdPassword" value="" size="21" maxlength="20">Password</p>
  <p><input type="submit" value="Submit"></p>
 </form>

<p>... This snippet is linked to Ink Creek Hosting but can be linked to any website.</p>
<p>... It is advisable to get an SSL so that Username and Password will be incrypted.</p>
<p>... Note: This snippet is a modification from "Beginning Web Programming with HTML, XHTML, and CSS" by Jon Duckett</p>

<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</p>

<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!" />
    </a>
</p>

<!--    Working on Footer separating line.  I am told that <hr> is improper usage but Validator does valadates it as correct    -->

<p><small>Created on ... August 15, 2010 by J. B. Kendall with NotePad Pro</small></p>

</body>
</html>

Now this does work and I have it set to come to Soft City.  Another thing, if you plan to use it site to site, you will want to get an SSL for the site this code resides on, otherwise the connection will not be secured.  I am also working on a "Sign-Up" Box to work in conjunction with this box.

All the code validates in the second code, not the WebEasy code.  Check out my banners I was given!  Kinda neat, I think.

JB

Post your comment

Submit