Entry #6: 5/8/15
How to implement Bootstrap (online version):
Copy-paste the following into the head section of your HTML page:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Copy-paste the following into the body section of your HTML page:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Source: http://getbootstrap.com/getting-started/
For more tutorial information go to: http://www.w3schools.com/bootstrap/default.asp
Entry #5: 4/17/15
To make text bounce from side to side:
<marquee behavior=alternate width="WIDTH">TEXT_HERE</marquee>
WIDTH is width (in pixels or percent) of the bouncing area of the text
TEXT_HERE is the text that will bounce
Example:
For example go to: http://alik1999g.ga/wikiexamples/bouncy.html
Source: http://web-design.lovetoknow.com/Cool_HTML_Codes
Entry #4: 3/27/15
To make a tooltip pop up when hovering for a couple of seconds over text:
<span title=”POPUP”>TEXT_HERE</span>
POPUP is the text on the popup when hovering over the text
TEXT_HERE is the text hovering over which will make the tooltip pop up
Example:
Hover over this text
Source: http://www.makeuseof.com/tag/7-cool-html-effects-that-anyone-can-add-to-their-website-nb/
Entry #3: 3/13/15
To make a scrollable text box:
<div style="height:HEIGHT; width:WIDTH; border:1px solid #ccc; font:16px/26px Georgia, Garamond, Serif; overflow:auto;">
TEXT_HERE</div>
overflow:auto; makes the text box scrollable
HEIGHT is the height of the text box
WIDTH is the width of the text box
TEXT_HERE is the text contained in the text box, which should be longer than the text box to make the scroll bars appear
Example:
This is a demonstration of a scrollable text box. Try scrolling to see how it works. As you can see, the text has to be long enough to make the text box scrollable.
Source: http://www.quackit.com/html/codes/html_scroll_box.cfm
Entry #2: 2/27/15
To make bullets images instead of simple black bullets:
<dl>
<dd><img src="URL_IMG" height="HEIGHT">Bullet 1</dd>
<dd><img src="URL_IMG" height="HEIGHT">Bullet 2</dd>
<dd><img src="URL_IMG" height="HEIGHT">Bullet 3</dd>
</dl>
URL_IMG is the URL of the corresponding bullet's image
HEIGHT is the height of the bullet
Example:
Bullet 1 Bullet 2 Bullet 3
Source: http://bignosebird.com/docs/h14.shtml
Entry #1: 2/6/15
To make an image change when the mouse rolls over it, use:
<a href="#"><img src="URL_IMG-1" onmouseover="this.src='URL_IMG-2'" onmouseout="this.src='URL_IMG-1'" /></a>
URL_IMG-1 is the URL of the image visible when the mouse is not over the picture
URL_IMG-2 is the URL of the image visible when the mouse is over the picture
# is the URL to go to on mouse click
Source: http://www.saypoint.net/2011/04/creat-simple-image-rollover-html-code.html
Comments (5)
Lori said
at 12:06 pm on Feb 24, 2015
Entry #1, 4/4. Very useful and practical topic. Please provide an image which will help visually explain the outcome of your code.
Lori said
at 8:10 am on Mar 17, 2015
Entry #2: 4/4. All required elements are provided in the post. Your directions are clear and easy to follow. I would be interested to try this code out, I have not seen it before.
Lori said
at 8:27 am on Mar 31, 2015
Entry #3: 4/4. All required elements are provided. This is a useful code and very impressive how you got it to work inside your Wiki page.
Lori said
at 8:50 am on Apr 9, 2015
Entry #4: 3/4. THis is a useful tip although, your example does not work in the post or on the Website resource. Also, do the directions for "popup" need to be applied anywhere or is it a rule the Web already knows?
Lori said
at 7:56 am on May 20, 2015
Entry #5: 4/4
Entry #6: 4/4
Both of these are very useful and Adv. 1 level entries. I really like the bootstrap post. Be careful on the bouncing text post, if not implemented correctly in terms of design principles it can be very distracting.
You don't have permission to comment on this page.