In websites such as Fireburst News, you will see RSS feeds embedded into the webpage. Also, you may want to display your RSS feed in your site's homepage. To make an RSS file, visit this post. Here's the code to embed my blog's RSS:
<script src="http://gmodules.com/ig/ifr?url=http://sethsdiscoveries.blogspot.com/feeds/posts/default&synd=open&w=320&h=200&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
Showing posts with label file type. Show all posts
Showing posts with label file type. Show all posts
Tuesday, November 20, 2012
Friday, October 26, 2012
images: HTML
Images are so easy. There are all sorts of things you can do with images in HTML. The basic code is:
<img src="image url">
The most popular code customizes what you see when the image can't load, or images are disabled in the browser. Here it is:
<img src="image url" alt="tag">
tag is the text that's displayed when the image doesn't load or images are disabled. Sometimes search engines use it to define image search.
Defining the width and hight
If you want to change the size of the image, you may tell the browser how to size it:
<img src="image URL" alt="tag" width="400" height="400">
Customizing the border
You can create a border around images with a simple code. This is not in HTML 5 so I'll post about images in CSS later.
<img src="image URL" alt="tag" border="5">
or you could use this code:
<img src="image URL" alt="tag" width="400" height="400" border="5">
lots of HTML image attributes are deprecated in HTML 5. Luckily, CSS provides these and so much more. In the future, use CSS for your image effects.
<img src="image url">
The most popular code customizes what you see when the image can't load, or images are disabled in the browser. Here it is:
<img src="image url" alt="tag">
tag is the text that's displayed when the image doesn't load or images are disabled. Sometimes search engines use it to define image search.
Defining the width and hight
If you want to change the size of the image, you may tell the browser how to size it:
<img src="image URL" alt="tag" width="400" height="400">
Customizing the border
You can create a border around images with a simple code. This is not in HTML 5 so I'll post about images in CSS later.
<img src="image URL" alt="tag" border="5">
or you could use this code:
<img src="image URL" alt="tag" width="400" height="400" border="5">
lots of HTML image attributes are deprecated in HTML 5. Luckily, CSS provides these and so much more. In the future, use CSS for your image effects.
Thursday, October 25, 2012
Links, Part 1: The basic link
Links are an almost irremovable part of a site or even a page. Links are used to lead to other pages, other sites, even emails. Fortunately, links are very easy. In this post I will go over the hyperlink, the email link and the image link. The basic link code is <a href="http://sethstutorials.blogspot.com">Seth's Code & PC Tutorials</a> Replace with http://sethstutorials.blogspot.com with the address of the site you want to link to. Replace Seth's Code & PC Tutorials with the text you want your links to display.
Email Link
The email link is simple. The code is:
<a href="mailto:sethsevenyoln@aol.com">Email Me</a>
Replace sethsevenyoln@aol.com with your email address, and Email Me with the text you want displayed.
Image Link
The image link is a bit more complicated. Still, its quite possible. The code is:
<a href="http://fireburst.webs.com"><img src="image.gif" border="0"></a>
Replace http://fireburst.webs.com with the URL of the site you want to link to, and image.gif with the URL of the image you want displayed.
Opening a link in a new tab
If you want a link to be opened in a new tab, for the basic link use this code:
<a href="http://url" target="_blank">link text</a>
Email Link
The email link is simple. The code is:
<a href="mailto:sethsevenyoln@aol.com">Email Me</a>
Replace sethsevenyoln@aol.com with your email address, and Email Me with the text you want displayed.
Image Link
The image link is a bit more complicated. Still, its quite possible. The code is:
<a href="http://fireburst.webs.com"><img src="image.gif" border="0"></a>
Replace http://fireburst.webs.com with the URL of the site you want to link to, and image.gif with the URL of the image you want displayed.
Opening a link in a new tab
If you want a link to be opened in a new tab, for the basic link use this code:
<a href="http://url" target="_blank">link text</a>
HTML Video: Part 2
I already wrote a post on HTML5 video. This expands on it and explains things like auto play.
Master Code + controls = auto play, loop
To add loop, auto play and "poster" or image that's shown when the video first loads, use this code:
<video poster="thumbnail.png" autoplay loop controls tabindex="0">
<source src="vide.webm" type="video/webm"; codecs="vp8, vorbis" />
<source src="video.mp4" type="video/mp4"; codecs="theora, vorbis" />
</video>
Replace thumbnail.png with the URL of the pic you want to display when the video is first loaded, video.webm with the URL of the webm version of your video, video.mp4 with the URL of the mp4 version of your video. The autoplay and loop controls set what they sound like: autoplay making the video play upon loading and loop making the video repeat. More on HTML5 video is available at my former post.
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| HTML5 video | 20.0 | 12.0 | 9.0 | 12.0 | 5.1 |
Tuesday, October 23, 2012
How to tell users IE is incompatible
Internet Explorer is Microsoft's web browser. It's the second most popular in the world, but unfortunately, its web standard support is extremely limited. Fortunately, its easy to tell users to upgrade.
For IE6
IE 6 supports almost nothing, so don't be afraid to tell users to upgrade. It doesn't support Google CSE, or any advanced CSS. Here's how to tell users to upgrade IE 6. I know it says IE 7, but it won't do any warnings in IE 7. Insert this code between the <head> and </head> tags.
<!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 100px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>The browser you're using is slow, cumbersome, and outdated. <a href="http://opera.com">Click here</a> to get an up to update your browser easily or choose one of the links at right.</div> </div> <div style='width: 100px; float: left;'><a href='http://www.opera.com' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSwsZe3Taot9flGWq3Tka26n4SiWRFTHkse5dLsk19wwCkFjJb_JfrhNAdwnnPuktxNnYz6YWGJZDRmvq49IzYfUkAVUOb8YcocPzBhg1ekHDDHnUe__bRCx58FgRzcow-ViOU2XQFvk2/s1600/opera.jpeg' style='border: none;' alt='Get Opera 12'/></a>or get <a href="http://maxthon.com">Maxthon</a> <a HREF="http://mozilla.org/firefox">Firefox</a> <a href="http://dragon.comodo.com">Comodo Dragon</a> <p><a href="http://apple.com/safari">Safari</a> <A href="http://coolnovo.com">Coolnovo</a></div> </div> </div> <![endif]-->
For All Versions of IE NOT RECOMMENDED.
Insert between the <head> and </head> tags
<!--[if lt IE 9]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 100px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>The browser you're using is slow, cumbersome, and outdated. <a href="http://opera.com">Click here</a> to get an up to update your browser easily or choose one of the links at right.</div> </div> <div style='width: 100px; float: left;'><a href='http://www.opera.com' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSwsZe3Taot9flGWq3Tka26n4SiWRFTHkse5dLsk19wwCkFjJb_JfrhNAdwnnPuktxNnYz6YWGJZDRmvq49IzYfUkAVUOb8YcocPzBhg1ekHDDHnUe__bRCx58FgRzcow-ViOU2XQFvk2/s1600/opera.jpeg' style='border: none;' alt='Get Opera 12'/></a>or get <a href="http://maxthon.com">Maxthon</a> <a HREF="http://mozilla.org/firefox">Firefox</a> <a href="http://dragon.comodo.com">Comodo Dragon</a> <p><a href="http://apple.com/safari">Safari</a> <A href="http://coolnovo.com">Coolnovo</a></div> </div> </div> <![endif]-->
For IE6
IE 6 supports almost nothing, so don't be afraid to tell users to upgrade. It doesn't support Google CSE, or any advanced CSS. Here's how to tell users to upgrade IE 6. I know it says IE 7, but it won't do any warnings in IE 7. Insert this code between the <head> and </head> tags.
<!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 100px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>The browser you're using is slow, cumbersome, and outdated. <a href="http://opera.com">Click here</a> to get an up to update your browser easily or choose one of the links at right.</div> </div> <div style='width: 100px; float: left;'><a href='http://www.opera.com' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSwsZe3Taot9flGWq3Tka26n4SiWRFTHkse5dLsk19wwCkFjJb_JfrhNAdwnnPuktxNnYz6YWGJZDRmvq49IzYfUkAVUOb8YcocPzBhg1ekHDDHnUe__bRCx58FgRzcow-ViOU2XQFvk2/s1600/opera.jpeg' style='border: none;' alt='Get Opera 12'/></a>or get <a href="http://maxthon.com">Maxthon</a> <a HREF="http://mozilla.org/firefox">Firefox</a> <a href="http://dragon.comodo.com">Comodo Dragon</a> <p><a href="http://apple.com/safari">Safari</a> <A href="http://coolnovo.com">Coolnovo</a></div> </div> </div> <![endif]-->
For All Versions of IE NOT RECOMMENDED.
Insert between the <head> and </head> tags
<!--[if lt IE 9]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 100px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>The browser you're using is slow, cumbersome, and outdated. <a href="http://opera.com">Click here</a> to get an up to update your browser easily or choose one of the links at right.</div> </div> <div style='width: 100px; float: left;'><a href='http://www.opera.com' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSwsZe3Taot9flGWq3Tka26n4SiWRFTHkse5dLsk19wwCkFjJb_JfrhNAdwnnPuktxNnYz6YWGJZDRmvq49IzYfUkAVUOb8YcocPzBhg1ekHDDHnUe__bRCx58FgRzcow-ViOU2XQFvk2/s1600/opera.jpeg' style='border: none;' alt='Get Opera 12'/></a>or get <a href="http://maxthon.com">Maxthon</a> <a HREF="http://mozilla.org/firefox">Firefox</a> <a href="http://dragon.comodo.com">Comodo Dragon</a> <p><a href="http://apple.com/safari">Safari</a> <A href="http://coolnovo.com">Coolnovo</a></div> </div> </div> <![endif]-->
Wednesday, September 26, 2012
HTML5 Video
Html5 is a modern code supported by modern browsers such Opera12+ Internet Explorer 10, Mozilla Firefox 14+, Internet Explorer 10 and Google Chrome 18+. This is the video code. The video file should be Webm or mp4 for best support. If you can have your video in both file formats, that's great because then, if one browser doesn't support a file type, it will use the other. The basic code is:
<video src="videoURL"></video>
If you have mp4 and webm the master code is this:
<video>
<source src="videoURL.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="videoURL.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
Sorry, you're using an outdated browser! Upgrade to a fast, free web <a href="http://opera.com">here</a>.
<video>
This is the HTML5 video code. Much more simple than you thought?
<video src="videoURL"></video>
If you have mp4 and webm the master code is this:
<video>
<source src="videoURL.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="videoURL.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
Sorry, you're using an outdated browser! Upgrade to a fast, free web <a href="http://opera.com">here</a>.
<video>
This is the HTML5 video code. Much more simple than you thought?
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Video element | 20.0 | 12.0 | 9.0 | 12.0 | 5.1 |
Subscribe to:
Posts (Atom)
