Entry #9- How to make a search bar on a website:
<!-- Google Custom Search Element →
<div id=”cse” style=”width:100%;”>Loading</div>
<script src=”http://www.google.com/jsapi” type=”text/javascript”></script>
<script type=”text/javascript”>google.load(‘search’, ‘1’);
google.setOnLoadCallback(function(){var cse = new google.search.
CustomSearchControl();cse.draw(‘cse’);}, true);</script>
http://www.dummies.com/how-to/content/how-to-set-up-a-search-box-on-your-website.html
Entry #8- How to make an image moving using HTML:
direction="left">
<img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" />
</marquee>
http://www.html.am/html-codes/marquees/scrolling-image.cfm
Entry #7- How to make a div diagonal using CSS:
.disabled {
background: red;
width:100px;
height:30px;
line-height:30px;
text-align: center;
color:#fff;
font-weight: bold
}.disabled {
width:100px;
height:30px;-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);
transform: rotate(45deg);}
http://stackoverflow.com/questions/5931496/diagonal-div-overlay
Entry #6- How to make a 3D button effect using CSS:
div.button {
color: black ;
background-color: #9cf ;
border-top: 1px solid #c0ffff ;
border-right: 1px solid #00f ;
border-bottom: 1px solid #00f ;
border-left: 1px solid #c0ffff ;
}
http://www.thesitewizard.com/css/3d-buttons.shtml
Entry #5- How to insert a music playlist into the website:
<embed name="music_playlist"
src="music_playlist.m3u"
width="300"
height="90"
loop="false"
hidden="false"
autostart="true">
</embed>
http://www.quackit.com/html/codes/create_music_playlist.cfm
Entry #4- How to password protect a website:
<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Please Enter Your Password',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "letmein") {
alert('You Got it Right!');
window.open('protectpage.html');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Protected Area" onClick="passWord()">
</FORM>
</CENTER>
http://www.javascriptkit.com/script/cut10.shtml
Entry #3- How to insert a "tweet to mention @SKinder14" button:
<a href="/https://twitter.com/intent/tweet?screen_name=SKinder14" class="twitter-mention-button" data-related="SKinder14">Tweet to @SKinder14</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
https://twitter.com/about/resources/buttons#mention
Entry #1- How to create a drop-down menu with four options:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
http://www.w3schools.com/tags/tag_select.asp
Entry #2- How to use an image as a link:
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="/default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p>
<p>No border around the image, but still a link:
<a href="/default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p>
</body>
</html>
(The smiley face is the link, there is no rectangular image, therefore only the circular smiley face is a link.)
Comments (12)
Lori said
at 10:18 am on Sep 19, 2013
Entry #1: 4/4, All required elements are provided. This is a very useful code especially when working on larger sites. If possible try to include the CSS on how to format the menu.
Lori said
at 10:01 am on Sep 27, 2013
Entry #2: 3/4. Be sure to post the newest entry on top and to include a resource link for all posts. Also, try to post on more advance techniques.
Lori said
at 10:03 am on Oct 9, 2013
Entry #3 & #4: 4/4. All required elements are provided in the post and both posts are very useful pieces to add to a site. I use both of these codes very often. Be sure to title each post, Entry #1....
Lori said
at 10:43 am on Oct 28, 2013
Post #5 & #6: 4/4. All required elements are provided and each post include practical and realistic codes to add to your site. Just make sure that each code post works on all browsers.
Lori said
at 11:38 am on Nov 18, 2013
Post #7 & #8: 3/4. Both very useful posts and great job implementing CSS3. You need to provide more detailed directions on where to paste the code and how to edit the code.
emmoncata said
at 12:17 pm on Jan 10, 2014
I thought your post about adding a music playlist to a site was really interesting! I could definitely use this code in the future.
vltrofimov said
at 12:23 pm on Jan 10, 2014
awful posts on most things. HAHA jk! great stuff. I love your wiki entries on the 3D text, very cool looking (unlike you LOL! jk!). TTYL! :)
reboucher said
at 12:27 pm on Jan 10, 2014
Your moving image code was really cool. I'd love to use that on a site! Great work Syd!
aidoherty said
at 12:31 pm on Jan 10, 2014
I liked the code that you provided. I think the code to password protect the website will be useful for some web designers and is definitely a good code to know.
brbenjamin said
at 12:49 pm on Jan 10, 2014
The code to password protect a project was really cool considering a lot of sites on the web need better security. Nice job!
Lori said
at 6:12 pm on Jan 12, 2014
Post #9: 4/4. This is a great post- very useful especially for larger sites.
Post #10: 4/4. Excused/working on Art flyer.
semavaddat said
at 2:41 pm on Jan 14, 2014
The code for adding a password into a website is really cool and I haven't seen that before, the other information was great and this wiki was really easy to use.
You don't have permission to comment on this page.