How to make a website using HTML/CSS

Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

How to make a website using HTML/CSS

In CS 2340 you will need to code CSS and HTML for the design twist at the very end of the course. Quite a few Computer Science majors dont know how to this. So I am going to comment the code with // // and describe to the viewing audience on what they should do in order to create a login page with a CSS sheet among other attributes. You can do this by hand because it does take a lot of time to find a respectable CSS/HTML page creator. I have used everything from AOL Press back in 1996 to CS4 Adobe Dreamweaver. Note you will have to hardwire the smalltalk code and run the server in order to hardwire this to your smalltalk code.

This is the header that every HTML/CSS website needs at least to have defined attributes.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>University Management System Login</title> // this is the title of your website you can name it anything you want //
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
//////This is where the user defines the font family, it allows the user to select an assortment of fonts. You can look through font types on a  text document such as Word to find which ones you want. size is also determined in PX which is pixel. 10px is smaller, 14px is larder.//////
}
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
//////This defines the font family in the body an tables. This is pretty much the same as the above category but color is defined differently. Color is defined in Hexadecimal notation. You can google whatever color you want in hexadecimal and place it after "color:". Note you must use the pound sign.  ///////
}
body {
	background-color: #E9E9E9;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
/////background color is defined by hexadeciaml numbers. margins describe how much space you want away from the browser. 2px, 4px, 6 px////
}
a {
	font-size: 12px;
	color: #7278F8;
}
a:link {
	text-decoration: none;
/////changes anything about a hyperlink to another website./////
}
a:visited {
	text-decoration: none;
	color: #7278F8;
////changes the color of the link when it has been visited before.////
}
a:hover {
	text-decoration: underline;
	color: #0000A6;
////text-decoration is used here and its underline. What his does is it underlines the link when the mouse is hoovering over the top of the link. There are other text-decorations that can be found as well. Such as making the text bold when scrolled over.////
}
a:active {
	text-decoration: none;
	color: #7278F8;
}
.styleSheet {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
///this is from the imported style sheet in CSS////
}
-->
</style>
</head>

This allows the user to make tables, text fields, and buttons.

This is what the code makes

This is the actual code used

<body>
<div align="center"> // aligns the table to be in the center. you can use left or right as well.
  <table width="400" border="0">  // makes the table width of up to 400 you can go to a thousand or even use percents such as 100% which maximizes the table to be the size of the viewing screen.
    <tr>
      <td><div align="center">Login to University Management System</div></td>

    </tr>
    <tr>
      <td>

<form name="form1" method="post" action=""> // this makes the text field for your username to be entered
        <label>
        <div align="center">Username: 
          <input type="text" name="Username" id="Username"> // note that it is given a name username and an id username this is very important when hooked with code.
        </div>
        </label>


      </form>

      </td>
    </tr>
    <tr>
      <td>

<form name="form2" method="post" action=""> // this makes the text field for your password to be entered.
        <label>
        <div align="center">Password
          <input type="text" name="Password" id="Password"> // notice it is given a name an id this is very important when hardwiring it with code
        </div>
        </label>

      </form>
      </td>
    </tr>
    <tr>
      <td><form name="form3" method="post" action=""> // this creates the actual login button
        <label>
        <div align="center">
          <input type="submit" name="Login" id="Login" value="Login"> // remember this is given the value of login.
        </div>

        </label>
      </form>
      </td>
    </tr>
  </table>
</div>
</body>

</html>

Working code with attributes

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>University Management System Login</title>
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
body {
	background-color: #E9E9E9;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a {
	font-size: 12px;
	color: #7278F8;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #7278F8;
}
a:hover {
	text-decoration: underline;
	color: #0000A6;
}
a:active {
	text-decoration: none;
	color: #7278F8;
}
.styleSheet {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}
-->
</style>
</head>

<body>
<div align="center">
  <table width="400" border="0">
    <tr>
      <td><div align="center">Login to University Management System</div></td>

    </tr>
    <tr>
      <td><form name="form1" method="post" action="">
        <label>
        <div align="center">Username: 
          <input type="text" name="Username" id="Username">
        </div>
        </label>
      </form>

      </td>
    </tr>
    <tr>
      <td><form name="form2" method="post" action="">
        <label>
        <div align="center">Password
          <input type="text" name="Password" id="Password">
        </div>
        </label>

      </form>
      </td>
    </tr>
    <tr>
      <td><form name="form3" method="post" action="">
        <label>
        <div align="center">
          <input type="submit" name="Login" id="Login" value="Login">
        </div>

        </label>
      </form>
      </td>
    </tr>
  </table>
</div>
</body>

</html>

Link to this Page

Cases last edited on 30 July 2011 at 2:33 am by r59h132.res.gatech.edu