Website Programming Languages
HTML Tutorials
CSS Tutorials
Javascript Tutorials
Applying Custom code to Weebly
Open Design
Free and amazing CSS web design to download and customize. Great site!
|
Lorem Ipsum
This site provides chucks of text that you can copy and paste in your design to test how normal font will look.
|
Rubric for web design
|
|
Advanced Tables
Copy and paste this code into the "Tryit Editor". Play with the code to change how it looks and what it does.
<table width="100%" height="100%" align="right" border="0" cellpadding="10" >
<tr>
<th colspan="2" bgcolor="red" height="15%,*">
<font size="30" align="left">
Header Text
</font>
</th>
</tr>
<tr>
<td width="15%,*" bgcolor="silver" valign="top" align="center">
<h2><a href="http://google.com" target="_blank">Home</h2><br></a>
<h2>Music</h2><br>
<h2>Movies</h2><br>
</td>
<td>
Big frame
</td>
</tr>
</table>
<tr>
<th colspan="2" bgcolor="red" height="15%,*">
<font size="30" align="left">
Header Text
</font>
</th>
</tr>
<tr>
<td width="15%,*" bgcolor="silver" valign="top" align="center">
<h2><a href="http://google.com" target="_blank">Home</h2><br></a>
<h2>Music</h2><br>
<h2>Movies</h2><br>
</td>
<td>
Big frame
</td>
</tr>
</table>
Advanced Table Code
<html>
<body>
<table width="100%" height="100%" align="right" border="1">
<tr height="15%, *">
<th colspan="3">
<center><font size="20">Header</font></center>
</th>
<tr>
<tr height="25px">
<th colspan="3">
This is a bar for cool looking buttons that you design
</th>
</tr>
<td rowspan="2" width="20%, *" cellpadding="7" valign="top">
Link 1<br>
Link 2<br>
Link 3<br>
Link 4<br>
Link 5<br>
</td>
<td>top right</td>
<td width="30%, *">This is it</td>
</tr>
<tr>
<td>
bottom right
</td>
<td>
Bottom right again
</td>
</tr>
</body>
</html>
<body>
<table width="100%" height="100%" align="right" border="1">
<tr height="15%, *">
<th colspan="3">
<center><font size="20">Header</font></center>
</th>
<tr>
<tr height="25px">
<th colspan="3">
This is a bar for cool looking buttons that you design
</th>
</tr>
<td rowspan="2" width="20%, *" cellpadding="7" valign="top">
Link 1<br>
Link 2<br>
Link 3<br>
Link 4<br>
Link 5<br>
</td>
<td>top right</td>
<td width="30%, *">This is it</td>
</tr>
<tr>
<td>
bottom right
</td>
<td>
Bottom right again
</td>
</tr>
</body>
</html>
Roll over to change bgcolor
The code below will allow your users to pass their mouse over text and change the actual background color of the page. Copy and paste this code in your body where you want the links to appear.
<A HREF=""onMouseOver="document.bgColor='black'">Black</a>
<A HREF=""onMouseOver="document.bgColor='green'">Green</a>
<A HREF=""onMouseOver="document.bgColor='yellow'">Yellow</a>
<A HREF=""onMouseOver="document.bgColor='red'">Red</a>
<A HREF=""onMouseOver="document.bgColor='brown'">Brown</a>
<A HREF=""onMouseOver="document.bgColor='white'">White</a>
The code below will allow your users to pass their mouse over text and change the actual background color of the page. Copy and paste this code in your body where you want the links to appear.
<A HREF=""onMouseOver="document.bgColor='black'">Black</a>
<A HREF=""onMouseOver="document.bgColor='green'">Green</a>
<A HREF=""onMouseOver="document.bgColor='yellow'">Yellow</a>
<A HREF=""onMouseOver="document.bgColor='red'">Red</a>
<A HREF=""onMouseOver="document.bgColor='brown'">Brown</a>
<A HREF=""onMouseOver="document.bgColor='white'">White</a>
Back Button
Paste this code into your body where you want the button to be. When clicked it will jump to the last webpage.
<FORM>
<INPUT TYPE="button" VALUE="Back" onClick="history.go(-1)">
</FORM>
<FORM>
<INPUT TYPE="button" VALUE="Back" onClick="history.go(-1)">
</FORM>
Scroll Boxes
This is called a Scroll Box. It is useful for many things in a website. Like when you have to have a lot of text in a little area. For example, if you had a little spot to put a contract which has a ton of words this would be the way to do it. It looks good and it is easy to put in your website using HTML.
Image Rollover Generator
Picture slide show that stops when mouseover
This chunk of code starts images sliding across your screen and when you move your mouse over the pictures they stop.
|
Web Hosting
So you've designed and built a website. Learn how to get it hosted so that anyone in the world can view it. Click on the link (above) to learn where and how to publish your website.