If you have been enjoying our <iframe> embed announced back in July we have some good news for you. Starting today, the <iframe> embed code is the default way to share videos on YouTube.com. We are also introducing an initial beta version of the <iframe> embed JavaScript Player API, making it a viable alternative for developers who previously used the API exposed by the ActionScript players. Let’s look at an example of the API usage:
<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
playerVars: { 'autoplay': 0, 'controls': 1, 'playlist':['your_video_id', '...']},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
This example will play a video for several seconds and then stop playback. An instance of YT.Player is used to control the player, defined by script loaded from http://www.youtube.com/player_api . For more information about the API usage, as always, please consult our Player API documentation and let us know what you think on our Developer Forum.
Showing posts with label HTML amp; CSS. Show all posts
Showing posts with label HTML amp; CSS. Show all posts
Monday, 5 March 2012
Friday, 17 February 2012
Create Textbox Watermark Using CSS and JavaScript
Lately I've been on this kick where I try to use basic CSS and JavaScript to mimic functionality available in the ASP.NET AJAX Library. It's not that I am trying to recreate the wheel, just that when I am able to, I get a kick out of recreating functionality that I (or my reader's) might find themselves using in the future. I also think it's funny that some of the controls (watermarked textbox for example) are considered Ajax. It's actually called JAC (JavaScript & CSS).
Another reason I created this functionality is because I have this ongoing project (ControlLibrary.csproj) that I am plugging these into. When I am done I will release in some form or another whether it be a .DLL or the actual source ($1 Million USD ;-) ). This way you don't have to download and install the ASP.NET AJAX Control Library to access functionality that really isn't even Ajax (in some cases like, not even close).
The watermarked textbox is a perfect example of something that is easy to recreate with elementary JavaScript and CSS. First the CSS we will use.
<style type="text/css">
.watermark
{
background-image: url('images/overlay.gif');
background-repeat: no-repeat;
padding-left: 20px;
vertical-align: middle;
color: DarkGray;
}
.normal
{
}
Even with the ASP.NET AJAX Library you need to specify the CSS classes to use. Here I have the "watermarked" and "unwatermarked" CSS class (normal). Watermark gives our textbox a little overlay image and changes the font-color to a darker shade of gray similar to the ASP.NET AJAX version. For the overlay.gif I just resized an icon with Paint.NET. FYI, a default ASP.NET TextBox control is roughly 21px high. In this case, I resized to 19px high and set the vertical-align to middle. Normal has no style and gives us a normal-looking textbox. Easy.
Next we need to add some client-side functionality to our textboxes. I simply put this in the Page_Load Event and when I create an actual control for this in the future this will be done behind the scenes based on properties that are set by the end-user. But, for proof-of-concept here's what I did:
Simple and painless. Setting attributes for TextBox to call our client-side functions. Again, this will be done behind-the-scenes from the control I am creating. The JavaScript is pretty basic also.
<script type="text/javascript" language="javascript">
function OnFocus(elementId, defaultText)
{
if (document.getElementById(elementId).value == defaultText)
{
document.getElementById(elementId).className = "normal";
document.getElementById(elementId).value = "";
}
}
function OnBlur(elementId, defaultText)
{
var textValue = document.getElementById(elementId).value;
if (textValue == defaultText || textValue.length == 0)
{
document.getElementById(elementId).className = "watermark";
document.getElementById(elementId).value = defaultText;
}
else
document.getElementById(elementId).className = "normal";
}
All we have to worry about are 2 relatively simple methods to handle the onfocus (or could've been onclick) and onblur event (or could've been ontextchanged). Since we are passing in the default value and the textbox's id we can compare the values and set the CSS class appropriately.
Here's what the finished product looks like.
You can see how this would be very easy to encapsulate into a control. When I am done you will be able to add to your form like this:
Easy.
Another reason I created this functionality is because I have this ongoing project (ControlLibrary.csproj) that I am plugging these into. When I am done I will release in some form or another whether it be a .DLL or the actual source ($1 Million USD ;-) ). This way you don't have to download and install the ASP.NET AJAX Control Library to access functionality that really isn't even Ajax (in some cases like, not even close).
The watermarked textbox is a perfect example of something that is easy to recreate with elementary JavaScript and CSS. First the CSS we will use.
<style type="text/css">
.watermark
{
background-image: url('images/overlay.gif');
background-repeat: no-repeat;
padding-left: 20px;
vertical-align: middle;
color: DarkGray;
}
.normal
{
}
</style> Even with the ASP.NET AJAX Library you need to specify the CSS classes to use. Here I have the "watermarked" and "unwatermarked" CSS class (normal). Watermark gives our textbox a little overlay image and changes the font-color to a darker shade of gray similar to the ASP.NET AJAX version. For the overlay.gif I just resized an icon with Paint.NET. FYI, a default ASP.NET TextBox control is roughly 21px high. In this case, I resized to 19px high and set the vertical-align to middle. Normal has no style and gives us a normal-looking textbox. Easy.
Next we need to add some client-side functionality to our textboxes. I simply put this in the Page_Load Event and when I create an actual control for this in the future this will be done behind the scenes based on properties that are set by the end-user. But, for proof-of-concept here's what I did:
string defaultValue = "Enter Value"; textFirstName.Attributes.Add("class", IsPostBack ? "normal" : "watermark");
textLastName.Attributes.Add("class", IsPostBack ? "normal" : "watermark"); if (!IsPostBack)
foreach (Control control in Page.Form.Controls)
if (control is TextBox)
{
TextBox textbox = (TextBox) control;
textbox.Attributes.Add("onfocus", string.Format("OnFocus('{0}', '{1}')", textbox.ClientID, defaultValue));
textbox.Attributes.Add("onblur", string.Format("OnBlur('{0}', '{1}')", textbox.ClientID, defaultValue)); textbox.Text = defaultValue;
} Simple and painless. Setting attributes for TextBox to call our client-side functions. Again, this will be done behind-the-scenes from the control I am creating. The JavaScript is pretty basic also.
<script type="text/javascript" language="javascript">
function OnFocus(elementId, defaultText)
{
if (document.getElementById(elementId).value == defaultText)
{
document.getElementById(elementId).className = "normal";
document.getElementById(elementId).value = "";
}
}
function OnBlur(elementId, defaultText)
{
var textValue = document.getElementById(elementId).value;
if (textValue == defaultText || textValue.length == 0)
{
document.getElementById(elementId).className = "watermark";
document.getElementById(elementId).value = defaultText;
}
else
document.getElementById(elementId).className = "normal";
}
</script> All we have to worry about are 2 relatively simple methods to handle the onfocus (or could've been onclick) and onblur event (or could've been ontextchanged). Since we are passing in the default value and the textbox's id we can compare the values and set the CSS class appropriately.
Here's what the finished product looks like.
You can see how this would be very easy to encapsulate into a control. When I am done you will be able to add to your form like this:
<wa:WatermarkTextBox WatermarkCss="a" NormalCss="b" Text="asdf" /> Easy.
CSS - Keep footers at the bottom of the page
When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done.
When I first ditched tables for pure CSS layouts I tried to make the footer stay at the bottom but I just couldn't do it. Now, after a few years of practice I have finally figured out a neat way to do it. My method uses 100% valid CSS and it works in all standards compliant browsers. It also fails gracefully with older browsers so it's safe to use on any website.
The main features
Works in all modern, standards compliant browsers
Compatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8Fails gracefully on older browsers
Older non-standards compliant browsers position the footer under the content as per normal. We can't help it if people are using an out of date browser, all we can do is reward people who have upgraded by giving them a better browsing experience through progressive enhancement.Longer content pushes the footer off the page
On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space.100% valid CSS with no hacks
The CSS used in this demo is 100% valid and contains no hacks.No JavaScript
JavaScript is not necessary because it works with pure CSS.iPhone compatible
This method also works on the iPhone and iPod Touch in the mobile Safari browser.Free to download
Simply save the source code and use it however you like.
There is only one limitation
You must set the height of the footer div to something other than
auto. Choose any height you like, but make sure the value is specified in pixels or ems within your CSS. This is not a big limitation, but it is essential for this method to work correctly.If you have a lot of text in your footer then it's also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default. Another way to solve the same problem is to set the height of the footer in em units; this will ensure that the footer grows in size along with the text. If you only have images in your footer than there's nothing to worry about – just set your footer height to a pixel value and away you go.
So how does it work?
It's actually not that complicated. There are two parts to it - the HTML and the CSS.
The HTML div structure
<div id="container"> <div id="header"></div> <div id="body"></div> <div id="footer"></div> </div>There are only four divs required for this to work. The first is a container div that surrounds everything. Inside that are three more divs; a header, a body and a footer. That's it, all the magic happens in the CSS.
The CSS
html, body { margin:0; padding:0; height:100%; }
#container { min-height:100%; position:relative; }
#header { background:#ff0; padding:10px; }
#body { padding:10px; padding-bottom:60px;
/* Height of the footer */ }
#footer { position:absolute; bottom:0; width:100%; height:60px;
/* Height of the footer */ background:#6cf; }
And one simple CSS rule for IE 6 and IE 5.5:
#container { height:100%; }The html and body tags
The html and body tags must be set to
height:100%; this allows us to set a percentage height on our container div later. I have also removed the margins and padding on the body tag so there are no spaces around the parameter of the page.The container div
The container div has a
min-height:100%; this will ensure it stays the full height of the screen even if there is hardly any content. Many older browsers don't support the min-height property, there are ways around it with JavaScript and other methods but that is out of scope for this article. The container div is also set to position:relative; this allows us to absolutely position elements inside it later.The header div
There is nothing unusual with the header. Make it whatever colour and size you like.
The body div
The body is quite normal too. The only important thing is it must have a bottom padding that is equal to (or slightly larger than) the height of the footer. You can also use a bottom border if you prefer but a margin won't work.
The footer div
The footer has a set height in pixels (or ems). The div is absolutely positioned
bottom:0; this moves it to the bottom of the container div. When there is little content on the page the container div is exactly the height of the browser viewport (because of the min-height:100%;) and the footer sits neatly at the bottom of the screen. When there is more than a page of content the container div becomes larger and extends down below the bottom of the viewport - the footer is still positioned at the bottom of the container div but this time you need to scroll down to the end of the page to see it. The footer is also set to width:100%; so it stretches across the whole page.The IE 6 & IE 5.5 CSS
Older versions of Internet Explorer don't understand the min-height property but lucky for us the normal height property behaves exactly the same way in these old Microsoft browsers, that is, it will stretch to 100% height of the viewport but if the content is longer it will stretch even further. We simply expose this 100% height rule to Internet Explorer only by using IE conditional comments. View the source on the demo to see how this is done.
So there you have it... A simple, valid way to make the footer get down! I hope you find it useful.
CSS Font-Size: em vs. px vs. pt vs. percent
One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.
In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).
When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.
In theory, the em unit is the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. When client settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design.
The winner: percent (%).
It’s been a couple years since I wrote this post, and I’d like to sum up the discussion and debate that has happened in that time. Generally, when I create a new design, I will use percent on the
Pixels are now considered acceptable font size units (users can use the browser’s “zoom” feature to read smaller text), although they are starting to cause some issues as a result of mobile devices with very high density screens (some Android and iPhone devices have upwards of 200 to 300 pixels per inch, making your 11- and 12-pixel fonts very difficult to see!). As a result, I will continue to use percent as my base font size in web documents. As always, discussion and debate is encouraged and welcome; thanks for all the great comments
Meet the Units
- “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
- Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
- Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
- Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
So, What’s the Difference?
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Em vs. Percent
We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.
In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).
When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.
The Verdict
In theory, the em unit is the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. When client settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design.
The winner: percent (%).
Addendum (January 2011)
It’s been a couple years since I wrote this post, and I’d like to sum up the discussion and debate that has happened in that time. Generally, when I create a new design, I will use percent on the
body element (body { font-size: 62.5%; }), and then use the em unit to size it from there. As long as the body is set using the percent unit, you may choose to use either percent or ems on any other CSS rules and selectors and still retain the benefits of using percent as your base font size. Over the past couple of years, this has really become the standard in design.Pixels are now considered acceptable font size units (users can use the browser’s “zoom” feature to read smaller text), although they are starting to cause some issues as a result of mobile devices with very high density screens (some Android and iPhone devices have upwards of 200 to 300 pixels per inch, making your 11- and 12-pixel fonts very difficult to see!). As a result, I will continue to use percent as my base font size in web documents. As always, discussion and debate is encouraged and welcome; thanks for all the great comments
Monday, 19 December 2011
Customizing the global navigation with Css and jQuery in SharePoint 2010
The global navigation in SharePoint is an important factor for the SharePoint site, this navigation are there to help orient users so they easily can move around the site. So when it comes to branding and customizing a SharePoint site it´s one of the key factors. When you branding the global navigation don´t forget to think simple but attractive, users may use the site navigation more than they use the search to find information.
In SharePoint 2010 the global navigation renders with unordered lists and list items (UL and LI), which gives us a simpler and more standard way for customization, especially compared to previous versions of SharePoint when the navigation rendered in a nestled table markup. There are a couple of ways and tools when it comes to build a custom navigation in SharePoint. The central point for the navigation is the functionality and the look and feel that means that we have to deal with CSS 2.1 or 3.0 and the SharePoint ASP menu control and its data source.
An example of a customized SharePoint OTB menu with use of CSS and jQuery. Check the nextcomming post (Part II) of how to extend the navigation with jQuery.
The options we have depend of the needs, but also the approach you choose depends if we talking about a public faced web site or an Intranet.
There is a lot to think about when it comes to customization of the SharePoint global navigation so therefore I´ll split this article in the minimum of three articles. So here´s the plan:
Below is a bunch of examples for customized navigation menus I have created specific for the article series. Of course, no guaranties for real cross browser CSS; these examples are mostly verified in IE 8 and Firefox 3.6.12, GC and Safari.
Open up your SharePoint top site with your favorite tool SharePoint Designer 2010 and create a CSS file and put in a reference to this in a your (custom) master page. Put in the following line just below SharePoint:CSSlink tag in the master page.
First off, a clean blue navigation with a smooth gradient background color. It has four properties for the background selectors and that´s because this is for various browsers. There are also a couple of extra classes below ‘Other stuff’ that you don´t need specific for the navigation. You can take those away if you prefer.
/*---| By @Cstahl 2010 |---*/
.s4-lp, body #s4-topheader2{
background-color:#2d9cc7; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#2d9cc7), to(#157db2));
background: -moz-linear-gradient(top, #2d9cc7, #157db2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2)";
margin-left:0px;
border-top:0px;
border-bottom:0px;
margin-left:0px;
}
.menu-horizontal{
margin-left:10px;
border-right: 1px #167FB3 solid;
background-image:none;
}
.menu-horizontal ul li{
color:#fff!important;
min-height:31px;
line-height:30px;
border:0px;
padding:0px;
margin:0px;
border-left:1px #167FB3 solid;
}
.menu-horizontal ul li a{
color:#fff!important;
font-weight:bold;
border:0px!important;
padding:0px!important;
margin:0px;
height:31px!important;
background-color:#2d9cc7; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#2d9cc7), to(#157db2));
background: -moz-linear-gradient(top, #2d9cc7, #157db2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2)";
padding-right:20px!important;
padding-left:20px!important;
}
.s4-toplinks .s4-tn > .menu-horizontal ul li a:hover {
text-decoration:none!important;
/*if use 333 the DD color will not work*/
color:#333!important;
background-color:#036ba8; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#036ba8), to(#4fb3d3));
background: -moz-linear-gradient(top, #036ba8, #4fb3d3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#4fb3d3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#4fb3d3)";
height:31px!important;
border:0px;
padding:0px;
margin:0px;
}
.s4-toplinks .s4-tn > .menu-horizontal a.selected {
color: #fff!important;
background-color:#4fb3d3; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#4fb3d3), to(#036ba8));
background: -moz-linear-gradient(top, #4fb3d3, #036ba8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4fb3d3, endColorstr=#036ba8);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4fb3d3, endColorstr=#036caa)";
line-height:30px;
height:31px;
border:0px;
padding:0px;
margin:0px;
}
.menu-horizontal A.dynamic-children SPAN.additional-background {
background-image:none!important;
}
.s4-tn ul.dynamic {
background-image:none!important;
border:1px solid #f7f7f7;
border-top:0px;
border-bottom:1px solid #ccc;
margin:0px;
padding:0px;
}
.s4-tn li.dynamic {
background-image:none!important;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:0px solid #ccc;
border-left:1px solid #ccc;
}
.s4-tn li.dynamic > .menu-item {
display:block;
padding-left:19px!important;
white-space:nowrap;
font-weight:normal;
background-color:#ffffff!important;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7))!important;
background: -moz-linear-gradient(top, #ffffff, #f7f7f7)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)!important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)"!important;
color:#333!important;
}
.s4-tn li.dynamic > a:hover {
background-color:#ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff))!important;
background: -moz-linear-gradient(top, #ffffff, #ffffff)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)!important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)"!important;
color: green!important;
}
/*----- Some other stuff -------*/
.col-fluid-1, .right-wp-zone-col {
margin-top:20px
}
#s4-leftpanel-content {
padding-top:20px!important;
border-right:0px!important;
border-bottom:0px!important;
margin-right:0px;
margin-left:0px;
background-color:#f7f7f7!important
}
.s4-title{
min-height:70px;
padding:0px;
}
.s4-titlelogo{
padding-left:10px
}
TD.ms-sbscopes {
padding-right:0px
}
.s4-search, .s4-rp{
padding-top:3px!important;
margin-right:0px;
}
.s4-search TABLE {
margin-right:0px
}
.s4-title-inner{
background-color:#a0d9e6; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#f7f7f7));
background: -moz-linear-gradient(top, #a0d9e6, #f7f7f7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#f7f7f7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#f7f7f7)";
padding:0px 0px 0px 0px;
margin:0px;
min-height:70px;
}
Next: A tabbed navigation with use of three images. In the next post I will show you have to interact with the tabs to make them jump on hover.
Want to try the tabbed navigation?
/*---| By @Cstahl 2010 |---*/
.menu-horizontal{
margin-left:5px;
}
.menu-horizontal A.dynamic-children SPAN.additional-background {
background-image:none;
}
.menu-horizontal ul li{
text-align:center;
font-size:11px;
line-height:18px;
padding:0;
margin:0;
}
.menu-horizontal ul li a{
width:105px;
background-image:url('/Style Library/Blog/Images/tab.png');
background-position: 0 0;
background-repeat:no-repeat;
padding:0;
cursor:pointer;
color:#0a7285;
text-decoration:none;
}
.menu-horizontal ul li.active{
width:105px;
height:18px;
margin:0;
}
.menu-horizontal ul li.active a{
background-image:url('/Style%20Library/Blog/Images/TabActive.gif');
background-position: 0 0;
background-repeat:no-repeat;
color:#0a7285;
width:105px;
height:18px;
padding-top:8px;
}
.menu-horizontal ul li a:hover{
background-image:url('/Style%20Library/Blog/Images/TabActiveHover.gif');
background-position: 0 0;
background-repeat:no-repeat;
width:105px;
}
.s4-toplinks .s4-tn a.selected{
border-style: none;
border-color: inherit;
border-width: 0px;
background-image:url('/Style%20Library/Blog/Images/TabActive.gif');
background-position: 0 0;
background-repeat:no-repeat;
background-color: transparent;
width:118px;
height:16px;
color:#333;
margin-top:1px;
margin-right:1px;
margin-bottom:0px;
margin-left:1px;
}
.s4-tn ul.dynamic{
background-color:#f7f7f7!important;
border:1px solid #ccc;
border-top:0px;
margin-left:2px;
}
.s4-tn li.dynamic > .menu-item{
display:block;
padding:5px 10px;
white-space:nowrap;
font-weight:normal;
background-image:none;
text-align:left
}
.s4-tn li.dynamic > a:hover{
font-weight:normal;
background-color:#9FD8E6;
background-image:none;
}
/*----- Other stuff -------*/
.col-fluid-1, .right-wp-zone-col {
margin-top:20px
}
#s4-leftpanel-content {
padding-top:20px!important;
border-right:0px!important;
border-bottom:0px!important;
margin-right:0px;
margin-left:6px;
background-color:#f7f7f7!important
}
.s4-titlelogo{
padding-left:10px
}
.s4-title{
padding-left:0px;
}
TD.ms-sbscopes {
padding-right:0px
}
.s4-search, .s4-rp{
padding-top:2px!important;
margin-right:0px;
}
.s4-search TABLE {
margin-right:0px
}
.s4-title-inner{
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#7ec1d0));
background: -moz-linear-gradient(top, #f7f7f7, #7ec1d0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0)";
padding:0px 0px 0px 0px;
margin:0px;
min-height:100px;
}
.s4-lp, body #s4-topheader2{
background-color:#7ec1d0;
margin-left:0px;
border-top:0px;
border-bottom:0px;
}
In SharePoint 2010 the global navigation renders with unordered lists and list items (UL and LI), which gives us a simpler and more standard way for customization, especially compared to previous versions of SharePoint when the navigation rendered in a nestled table markup. There are a couple of ways and tools when it comes to build a custom navigation in SharePoint. The central point for the navigation is the functionality and the look and feel that means that we have to deal with CSS 2.1 or 3.0 and the SharePoint ASP menu control and its data source.
Global navigation
▶
An example of a customized SharePoint OTB menu with use of CSS and jQuery. Check the nextcomming post (Part II) of how to extend the navigation with jQuery.
The options we have depend of the needs, but also the approach you choose depends if we talking about a public faced web site or an Intranet.
- Use the OTB control with changed settings
- Extend the OTB menu control with custom Css 2.1 or 3.0
- Extend the OTB menu control and hook it up with custom jQuery
- Extend the OTB menu control with a custom site map provider
- Code a new navigation control, and use a technique like Silverlight
- Use a complete stand-alone navigation with jQuery that isn’t connected to SharePoint
There is a lot to think about when it comes to customization of the SharePoint global navigation so therefore I´ll split this article in the minimum of three articles. So here´s the plan:
- Introduction and How to customize the global navigation with CSS 2.1 and 3.0 (this post)
- How to customize the global navigation with custom CSS and how to use jQuery to work with feeling of the navigation, like animating a menu. Go there
- Tips and tricks about navigation settings, how to use different site map providers & multiple navigation providers, branding dropdown menus and more.
Below is a bunch of examples for customized navigation menus I have created specific for the article series. Of course, no guaranties for real cross browser CSS; these examples are mostly verified in IE 8 and Firefox 3.6.12, GC and Safari.
Open up your SharePoint top site with your favorite tool SharePoint Designer 2010 and create a CSS file and put in a reference to this in a your (custom) master page. Put in the following line just below SharePoint:CSSlink tag in the master page.
<SharePoint:CssRegistration name="/Style Library/Blog/Blue.css" runat="server" After="corev4.css"/> |
First off, a clean blue navigation with a smooth gradient background color. It has four properties for the background selectors and that´s because this is for various browsers. There are also a couple of extra classes below ‘Other stuff’ that you don´t need specific for the navigation. You can take those away if you prefer.
/*---| By @Cstahl 2010 |---*/
.s4-lp, body #s4-topheader2{
background-color:#2d9cc7; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#2d9cc7), to(#157db2));
background: -moz-linear-gradient(top, #2d9cc7, #157db2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2)";
margin-left:0px;
border-top:0px;
border-bottom:0px;
margin-left:0px;
}
.menu-horizontal{
margin-left:10px;
border-right: 1px #167FB3 solid;
background-image:none;
}
.menu-horizontal ul li{
color:#fff!important;
min-height:31px;
line-height:30px;
border:0px;
padding:0px;
margin:0px;
border-left:1px #167FB3 solid;
}
.menu-horizontal ul li a{
color:#fff!important;
font-weight:bold;
border:0px!important;
padding:0px!important;
margin:0px;
height:31px!important;
background-color:#2d9cc7; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#2d9cc7), to(#157db2));
background: -moz-linear-gradient(top, #2d9cc7, #157db2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2)";
padding-right:20px!important;
padding-left:20px!important;
}
.s4-toplinks .s4-tn > .menu-horizontal ul li a:hover {
text-decoration:none!important;
/*if use 333 the DD color will not work*/
color:#333!important;
background-color:#036ba8; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#036ba8), to(#4fb3d3));
background: -moz-linear-gradient(top, #036ba8, #4fb3d3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#4fb3d3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#4fb3d3)";
height:31px!important;
border:0px;
padding:0px;
margin:0px;
}
.s4-toplinks .s4-tn > .menu-horizontal a.selected {
color: #fff!important;
background-color:#4fb3d3; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#4fb3d3), to(#036ba8));
background: -moz-linear-gradient(top, #4fb3d3, #036ba8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4fb3d3, endColorstr=#036ba8);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4fb3d3, endColorstr=#036caa)";
line-height:30px;
height:31px;
border:0px;
padding:0px;
margin:0px;
}
.menu-horizontal A.dynamic-children SPAN.additional-background {
background-image:none!important;
}
.s4-tn ul.dynamic {
background-image:none!important;
border:1px solid #f7f7f7;
border-top:0px;
border-bottom:1px solid #ccc;
margin:0px;
padding:0px;
}
.s4-tn li.dynamic {
background-image:none!important;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:0px solid #ccc;
border-left:1px solid #ccc;
}
.s4-tn li.dynamic > .menu-item {
display:block;
padding-left:19px!important;
white-space:nowrap;
font-weight:normal;
background-color:#ffffff!important;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7))!important;
background: -moz-linear-gradient(top, #ffffff, #f7f7f7)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)!important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)"!important;
color:#333!important;
}
.s4-tn li.dynamic > a:hover {
background-color:#ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff))!important;
background: -moz-linear-gradient(top, #ffffff, #ffffff)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)!important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)"!important;
color: green!important;
}
/*----- Some other stuff -------*/
.col-fluid-1, .right-wp-zone-col {
margin-top:20px
}
#s4-leftpanel-content {
padding-top:20px!important;
border-right:0px!important;
border-bottom:0px!important;
margin-right:0px;
margin-left:0px;
background-color:#f7f7f7!important
}
.s4-title{
min-height:70px;
padding:0px;
}
.s4-titlelogo{
padding-left:10px
}
TD.ms-sbscopes {
padding-right:0px
}
.s4-search, .s4-rp{
padding-top:3px!important;
margin-right:0px;
}
.s4-search TABLE {
margin-right:0px
}
.s4-title-inner{
background-color:#a0d9e6; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#f7f7f7));
background: -moz-linear-gradient(top, #a0d9e6, #f7f7f7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#f7f7f7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#f7f7f7)";
padding:0px 0px 0px 0px;
margin:0px;
min-height:70px;
}
Next: A tabbed navigation with use of three images. In the next post I will show you have to interact with the tabs to make them jump on hover.
Want to try the tabbed navigation?
/*---| By @Cstahl 2010 |---*/
.menu-horizontal{
margin-left:5px;
}
.menu-horizontal A.dynamic-children SPAN.additional-background {
background-image:none;
}
.menu-horizontal ul li{
text-align:center;
font-size:11px;
line-height:18px;
padding:0;
margin:0;
}
.menu-horizontal ul li a{
width:105px;
background-image:url('/Style Library/Blog/Images/tab.png');
background-position: 0 0;
background-repeat:no-repeat;
padding:0;
cursor:pointer;
color:#0a7285;
text-decoration:none;
}
.menu-horizontal ul li.active{
width:105px;
height:18px;
margin:0;
}
.menu-horizontal ul li.active a{
background-image:url('/Style%20Library/Blog/Images/TabActive.gif');
background-position: 0 0;
background-repeat:no-repeat;
color:#0a7285;
width:105px;
height:18px;
padding-top:8px;
}
.menu-horizontal ul li a:hover{
background-image:url('/Style%20Library/Blog/Images/TabActiveHover.gif');
background-position: 0 0;
background-repeat:no-repeat;
width:105px;
}
.s4-toplinks .s4-tn a.selected{
border-style: none;
border-color: inherit;
border-width: 0px;
background-image:url('/Style%20Library/Blog/Images/TabActive.gif');
background-position: 0 0;
background-repeat:no-repeat;
background-color: transparent;
width:118px;
height:16px;
color:#333;
margin-top:1px;
margin-right:1px;
margin-bottom:0px;
margin-left:1px;
}
.s4-tn ul.dynamic{
background-color:#f7f7f7!important;
border:1px solid #ccc;
border-top:0px;
margin-left:2px;
}
.s4-tn li.dynamic > .menu-item{
display:block;
padding:5px 10px;
white-space:nowrap;
font-weight:normal;
background-image:none;
text-align:left
}
.s4-tn li.dynamic > a:hover{
font-weight:normal;
background-color:#9FD8E6;
background-image:none;
}
/*----- Other stuff -------*/
.col-fluid-1, .right-wp-zone-col {
margin-top:20px
}
#s4-leftpanel-content {
padding-top:20px!important;
border-right:0px!important;
border-bottom:0px!important;
margin-right:0px;
margin-left:6px;
background-color:#f7f7f7!important
}
.s4-titlelogo{
padding-left:10px
}
.s4-title{
padding-left:0px;
}
TD.ms-sbscopes {
padding-right:0px
}
.s4-search, .s4-rp{
padding-top:2px!important;
margin-right:0px;
}
.s4-search TABLE {
margin-right:0px
}
.s4-title-inner{
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#7ec1d0));
background: -moz-linear-gradient(top, #f7f7f7, #7ec1d0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0)";
padding:0px 0px 0px 0px;
margin:0px;
min-height:100px;
}
.s4-lp, body #s4-topheader2{
background-color:#7ec1d0;
margin-left:0px;
border-top:0px;
border-bottom:0px;
}
Friday, 16 December 2011
Increase font text size in Sharepoint
It depends on a few things. Makesure you are running the javascript after the dom has loaded, either using a callback function for the window.load, as a triggered event from a target or placing the code at the bottom of the document which will be run immediately.
How are you applying the increase to font size?
for(var obj in document.getElementsByTagName("div")){
document.getElementsByTagName("div")[obj].style.fontSize = "16px";
}
or
document.getElementById("youeElementID").style.fontSize = "16px";
For example I have drummed up a quick html example. Please run to see the effects
<html>
<head>
<title></title>
<script type="text/javascript">
function useByTag(){
for(var i = 0; i < document.getElementsByTagName("div").length; i++){
document.getElementsByTagName("div")[i].style.fontSize = "22px";
}
}
function useByID(){
document.getElementById("Element1").style.fontSize = "18px";
}
</script>
</head>
<body>
<a href="javascript:useByTag()">Test ByTag</a>
<a href="javascript:useByID()">Test ByID</a>
<br/>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div id="Element1">Some text</a>
</body>
</html>
target _blank xhtml strict compatible
How to: target _blank xhtml strict compatible
You maybe know that you can't validate as xhtml strict a page if you use
Code:
<a href="http://www.w3it.org" target="_blank">w3it.org</a>
the target attribute for the a element in xhtml strict can't be recognized as possible value: in fact the XHTML strict DTD do not include this attribute.
There is a way in any case to fix the problem and achieve the result, creating a link that will be opened on another browser Page or Tab ( like the target="_blank" do ). The following code reproduce the same effect as the above link where is used the attribute target, but it is XHTML STRICT compatible:
Code:
<a href="http://www.w3it.org" onclick="window.open(this.href,'_blank');return false;">w3it.org</a>
Wednesday, 20 April 2011
URL Redirection on HTML Head meta code
<html>
<head>
<title></title>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://domain.com/">
</head>
<body>
</body>
</html>
<head>
<title></title>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://domain.com/">
</head>
<body>
</body>
</html>
Friday, 5 February 2010
HTML Image Maps
Image maps are images with clickable areas (sometimes referred to as "hotspots") that usually link to another page. If used tastefully, image maps can be really effective. If not, they can potentially confuse users.
To create an image map:
HTML Code:
OK, compared to our previous lessons, this code is looking quite complex. However, once you really study it, it is not that complex. All we are doing, is specifying an image, then we are creating a map with coordinates. The hardest part is getting all the coordinates right.
In our example, we use the
You can use the above attributes to configure your own image map with as many shapes and clickable regions as you like.
To create an image map:
- First, you need an image. Create an image using the usual method (i.e. via an image editor, then save as a gif or jpeg into your website's image folder).
- Use the HTML
maptag to create a map with a name. Inside this tag, you will specify where the clickable areas are with the HTMLareatag - Use the HTML
imgtag to link to this image. In the img tag, use with theusemapattribute to define which image map to use (the one we just specified).
Image Map Example
HTML Code:
<img src ="/pix/mueller_hut/mueller_hut_t.jpg"
width="225" height="151" border="0"
alt="Mueller Hut, Mount Cook, and I"
usemap ="#muellermap" />
<map id ="muellermap"
name="muellermap">
<area shape ="rect" coords ="90,80,120,151"
href ="javascript:alert('Me');"
alt="Me" />
<area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55"
href ="http://en.wikipedia.org/wiki/Mount_Cook"
alt="Mount Cook" />
<area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80"
href ="http://www.natural-environment.com/places/mueller_hut.php"
alt="Mueller Hut" />
</map>
OK, compared to our previous lessons, this code is looking quite complex. However, once you really study it, it is not that complex. All we are doing, is specifying an image, then we are creating a map with coordinates. The hardest part is getting all the coordinates right.
In our example, we use the
area in conjunction with the shape and coord attributes. These accept the following attributes:| shape | Defines a shape for the clickable area. Possible values:
|
| coords | Specifies the coordinates of the clickable area. Coordinates are specified as follows:
|
You can use the above attributes to configure your own image map with as many shapes and clickable regions as you like.
HTML Tables
In HTML, the original purpose of tables was to present tabular data. Although they are still used for this purpose today, many web designers tended to use tables for advanced layouts. This is probably due to the restrictions that HTML has on layout capabilities - it wasn't really designed as a layout language.
Anyway, whether you use tables for presenting tabular data, or for page layouts, you will use the same HTML tags.
Basic table tags
In HTML, you create tables using the table tag, in conjunction with the tr and td tags. Although there are other tags for creating tables, these are the basics for creating a table in HTML.
HTML Code:
<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
This results in:
| Table cell 1 | Table cell 2 |
You'll notice that we added a border attribute to the table tag. This particular attribute allows us to specify how thick the border will be. If we don't want a border we can specify 0 (zero). Other common attributes you can use with your table tag include width, width, cellspacing and cellpadding.
You can also add attributes to the tr and td tags. For example, you can specify the width of each table cell.
Widths can be specified in either pixels or percentages. Specifying the width in pixels allows you to specify an exact width. Percentages allows the table to "grow" or "shrink" depending on what else is on the page and how wide the browser is.
HTML Code:
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
This results in:
| Table cell 1 | Table cell 2 |
Table Headers
Many tables, particularly those with tabular data, have a header row or column. In HTML, you can use the th tag.
Most browsers display table headers in bold and center-aligned.
HTML Code:
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th>Table header</th>
<th>Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
This results in:
| Table header | Table header |
|---|---|
| Table cell 1 | Table cell 2 |
Colspan
You can use the colspan attribute to make a cell span multiple columns.
HTML Code:
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th colspan="2">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
This results in:
| Table header | |
|---|---|
| Table cell 1 | Table cell 2 |
Rowspan
Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple rows).
HTML Code:
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>
This results in:
| Table header | Table cell 1 |
|---|---|
| Table cell 2 |
Color
You can apply color to your table using CSS. Actually, you can apply any applicable CSS property to your table - not just colors. For example, you can use CSS to apply width, padding, margin, etc
HTML Code:
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th style="color:blue;background-color:yellow;" rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>
This results in:
| Table header | Table cell 1 |
|---|---|
| Table cell 2 |
HTML Forms
HTML enables us to create forms. This is where our websites can become more than just a nice advertising brochure. Forms allow us to build more dynamic websites that allow our users to interact with it.
An HTML form is made up of any number of form elements. These elements enable the user to do things such as enter information or make a selection from a preset options.
In HTML, a form is defined using the
This is the most commonly used tag within HTML forms. It allows you to specify various types of user input fields such as text, radio buttons, checkboxes etc.
Text fields are used for when you want the user to type text or numbers into the form.
This results in:
Radio buttons are used for when you want the user to select one option from a pre-determined set of options.
This results in:
Checkboxes are similar to radio buttons, but enable the user to make multiple selections..
This results in:
The submit button allows the user to actually submit the form.
This results in:
A select list is a dropdown list with options. This allows the user to select one option from a list of pre-defined options.
The select list is created using the
This results in:
Usually when a user submits the form, you need the system to do something with the data. This is where the action page comes in. The action page is the page that the form is submitted to. This page could contain advanced scripts or programming that inserts the form data into a database or emails an administrator etc.
Creating an action page is outside the scope of this tutorial. In any case, many web hosts provide scripts that can be used for action page functionality, such as emailing the webmaster whenever the form has been completed. For now, we will simply look at how to submit the form to the action page.
You nominate an action page with the
Example HTML Code:
This results in:
Oh, one last thing. You may have noticed the above example uses a
Possible values are:
Providing this attribute is optional. If you don't provide it, the method will be post.
An HTML form is made up of any number of form elements. These elements enable the user to do things such as enter information or make a selection from a preset options.
In HTML, a form is defined using the
<form></form> tags. The actual form elements are defined between these two tags.The Input Tag
This is the most commonly used tag within HTML forms. It allows you to specify various types of user input fields such as text, radio buttons, checkboxes etc.
Text
Text fields are used for when you want the user to type text or numbers into the form.
<input type="text" /> This results in:
Radio Buttons
Radio buttons are used for when you want the user to select one option from a pre-determined set of options.
<input type="radio" name="lunch" value="pasta" /><br />
<input type="radio" name="lunch" value="rissotto" />
This results in:
Checkboxes
Checkboxes are similar to radio buttons, but enable the user to make multiple selections..
<input type="checkbox" name="lunch" value="pasta" /><br />
<input type="checkbox" name="lunch" value="rissotto" />
This results in:
Submit
The submit button allows the user to actually submit the form.
<input type="submit" /> This results in:
Select Lists
A select list is a dropdown list with options. This allows the user to select one option from a list of pre-defined options.
The select list is created using the
select in conjunction with the option tag. <select>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
This results in:
Form Action
Usually when a user submits the form, you need the system to do something with the data. This is where the action page comes in. The action page is the page that the form is submitted to. This page could contain advanced scripts or programming that inserts the form data into a database or emails an administrator etc.
Creating an action page is outside the scope of this tutorial. In any case, many web hosts provide scripts that can be used for action page functionality, such as emailing the webmaster whenever the form has been completed. For now, we will simply look at how to submit the form to the action page.
You nominate an action page with the
action attribute.Example HTML Code:
<form action="/html/tags/html_form_tag_action.cfm" method="get">
First name:
<input type="text" name="first_name" value="" maxlength="100" />
<br />
Last name:
<input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>
This results in:
Oh, one last thing. You may have noticed the above example uses a
method attribute. This attribute specifies the HTTP method to use when the form is submitted.Possible values are:
- get (the form data is appended to the URL when submitted)
- post (the form data is not appended to the URL)
Providing this attribute is optional. If you don't provide it, the method will be post.
HTML Comments
Comments are a part of the HTML code and is used to explain the code. This can be helpful for other HTML coders when trying to interpret someone elses code. It can also be useful for yourself if you have to revisit your code in many months, or even years time. Comments aren't displayed in the browser - they are simply there for the programmer's benefit.
You write comments like this:
Comments always start with
You write comments like this:
<!-- Write your comment here -->Comments always start with
<!-- and end with -->. This tells the browser when a comment begins and ends.
HTML Meta Tags
Meta tags allow you to provide metadata about your HTML pages. This can be very useful for search engines and can assist the "findability" of the information on your website.
Metadata is information about, or that describes, other data or information.
If we relate this to a web page, if you think about it for a moment, you could probably come up with a lot more information about a web page than what you're actually displaying to the reader. For example, there could be a number of keywords that are related to the page. You could probably give the page a description. The page also has an author - right? All these could be examples of metadata.
Metadata is a very important part of the web. It can assist search engines in finding the best match when a user performs a search. Search engines will often look at any metadata attached to a page - especially keywords - and rank it higher than another page with less relevant metadata, or with no metadata at all.
You can add metadata to your web pages by placing
Keywords:
Description:
Revision date (last time the document was updated):
Refresh the page every 10 seconds:
The above examples are some of the more common uses for the meta tag.
What is Metadata?
Metadata is information about, or that describes, other data or information.
If we relate this to a web page, if you think about it for a moment, you could probably come up with a lot more information about a web page than what you're actually displaying to the reader. For example, there could be a number of keywords that are related to the page. You could probably give the page a description. The page also has an author - right? All these could be examples of metadata.
Metadata on the Web
Metadata is a very important part of the web. It can assist search engines in finding the best match when a user performs a search. Search engines will often look at any metadata attached to a page - especially keywords - and rank it higher than another page with less relevant metadata, or with no metadata at all.
Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing
<meta> tags between the <head> and </head> tags. The can include the following attributes:| Attribute | Description |
|---|---|
| Name | Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc. |
| content | Specifies the property's value. |
| scheme | Specifies a scheme to use to interpret the property's value (as declared in the content attribute). |
| http-equiv | Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie. |
Example HTML Code:
Keywords:
<meta name="keywords" content="HTML, meta tags, metadata" /> Description:
<meta name="description" content="Contains info about meta tags" /> Revision date (last time the document was updated):
<meta name="revised" content="Quackit, 6/12/2009" /> Refresh the page every 10 seconds:
<meta http-equiv="refresh" content="10" /> The above examples are some of the more common uses for the meta tag.
HTML Images
Images make up a large part of the web - most websites contain images. HTML makes it very easy for you to embed images into your web page.
To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.
Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the
HTML Code:
This results in:
width="100" height="100" alt="Smile" />
The
To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.
Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the
<img /> tag, specifying the actual location of the image.Example of Image Usage
HTML Code:
<img src="http://www.xyz.com/pix/smile.gif"
width="100" height="100" alt="Smile" />
This results in:
width="100" height="100" alt="Smile" />The
img above contains a number of attributes. These attributes tell the browser all about the image and how to display it. Here's an explanation of these attributes:| src | Required attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?) |
| width | Optional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with. |
| height | Optional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width. |
| alt | Alternate text. This specifies text to be used in case the browser/user agent can't render the image. |
HTML Links
Links, otherwise known as hyperlinks, are defined using the
To create a hyperlink, you use the a tag in conjunction with the href attribute (href stands for Hypertext Reference). The value of the href attribute is the URL, or, location of where the link is pointing to.
Example HTML Code:
This results in:
Hypertext references can use absolute URLS, relative URLs, or root relative URLs.
You can nominate whether to open the URL in a new window or the current window. You do this with the
The target attribute can have the following possible values:
Example HTML Code:
This results in:
You can make your links "jump" to other sections within the same page. You do this with named anchors.
To use named anchors, you need to create two pieces of code - one for the hyperlink (this is what the user will click on), and one for the named anchor (this is where they will end up).
This page uses a named anchor. I did this by performing the steps below:
This results in:
When you click on the above link, this page should jump up to the "Link Targets" section (above). You can either use your back button, or scroll down the page to get back here.
You're back? Good, now lets move on to email links.
You can create a hyperlink to an email address. To do this, use the
Example HTML Code:
This results in:
Clicking on this link should result in your default email client opening up with the email address already filled out.
You can go a step further than this. You can auto-complete the subject line for your users, and even the body of the email. You do this appending
Example HTML Code:
This results in:
You can specify a default URL for all links on the page to start with. You do this by placing the
Example HTML Code:
<a> tag - otherwise known as the anchor element.To create a hyperlink, you use the a tag in conjunction with the href attribute (href stands for Hypertext Reference). The value of the href attribute is the URL, or, location of where the link is pointing to.
Example HTML Code:
Visit the <a href="http://www.CodeItSimple.com/blog/">CodeItSimple Blog</a>
This results in:
Visit the CodeItSimple
Hypertext references can use absolute URLS, relative URLs, or root relative URLs.
- absolute
- This refers to a URL where the full path is provided. For example, http://www.codeitsimple.com/html/tutorial/index.cfm
- relative
- This refers to a URL where only the path, relative to the current location, is provided. For example, if we want to reference the http://www.codeitsimple.com/html/tutorial/index.cfm URL, and our current location is http://www.codeitsimple.com/html, we would use tutorial/index.cfm
- root relative
- This refers to a URL where only the path, relative to the domain's root, is provided. For example, if we want to reference the http://www.codeitsimple.com/html/tutorial/index.cfm URL, and the current location is http://www.codeitsimple.com/html, we would use /html/tutorial/index.cfm. The forward slash indicates the domain's root. This way, no matter where your file is located, you can always use this method to determine the path, even if you don't know what the domain name will eventually be.
Link Targets
You can nominate whether to open the URL in a new window or the current window. You do this with the
target attribute. For example, target="_blank" opens the URL in a new window.The target attribute can have the following possible values:
| _blank | Opens the URL in a new browser window. |
| _self | Loads the URL in the current browser window. |
| _parent | Loads the URL into the parent frame (still within the current browser window). This is only applicable when using frames. |
| _top | Loads the URL in the current browser window, but cancelling out any frames. Therefore, if frames were being used, they aren't any longer. |
Example HTML Code:
Visit the <a href="http://www.CodeItSimple.com" target="_blank">CodeItSimple</a>
This results in:
Visit the CodeItSimple
Named Anchors
You can make your links "jump" to other sections within the same page. You do this with named anchors.
To use named anchors, you need to create two pieces of code - one for the hyperlink (this is what the user will click on), and one for the named anchor (this is where they will end up).
This page uses a named anchor. I did this by performing the steps below:
- I created the named anchor first (where the user will end up)Example HTML Code:
<h2>Link Targets<a name="link_targets"></a></h2> - I then created the hyperlink (what the user will click on). This is done by linking to the nameof the named anchor. You need to preceed the name with a hash (#) symbol.Example HTML Code:
<a href="#link_targets">Link Targets</a>
This results in:
When you click on the above link, this page should jump up to the "Link Targets" section (above). You can either use your back button, or scroll down the page to get back here.
You're back? Good, now lets move on to email links.
Email Links
You can create a hyperlink to an email address. To do this, use the
mailto attribute in your anchor tag.Example HTML Code:
<a href="mailto:king_kong@codeitsimple.com">Email King Kong</a>
This results in:
Clicking on this link should result in your default email client opening up with the email address already filled out.
You can go a step further than this. You can auto-complete the subject line for your users, and even the body of the email. You do this appending
subject and body parameters to the email address.Example HTML Code:
<a href="mailto:king_kong@codeitsimple.com?subject=Question&body=Hey there">Email King Kong</a>This results in:
Base href
You can specify a default URL for all links on the page to start with. You do this by placing the
base tag (in conjunction with the href attribute) in the document's head.Example HTML Code:
<head>
<base url="http://www.codeitsimple.com">
</head>
HTML Colors
In HTML, colors can be added by using the
To add color to an HTML element, you use
This results in:
To add a background color to an HTML element, you use
This results in:
To add a colored border to an HTML element, you use
<h3 style="border:1px blue solid;">HTML Colors</h3>
This results in:
The most common methods for specifying colors are by using the color name or the hexadecimal value. Although color names are easier to remember, the hexadecimal values and RGB values provides you with more color options.
Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9 and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you preceed the value with a hash (#). Although hexadecimal values may look a little weird at first, you'll soon get used to them.
There are 16 color names (as specified in the HTML 4.0 specification). The chart below shows these color names and their corresponding hexadecimal value.
You can make up your own colors by simply entering any six digit hexadecimal value (preceeded by a hash). In the following example, we're using the same code as above. The only difference is that, instead of using "blue" as the value, we're using its hexadecimal equivalent (which is #0000ff):
This results in:
If we wanted to change to a deeper blue, we could change our hexadecimal value slightly, like this:
This results in:
By using hexadecimal or RGB color values, you have a choice of over 16 million different colors. You can start with 000000 and increment by one value all the way up to FFFFFF. Each different value represents a slightly different color.
style attribute. You can specify a color name (eg, blue), a hexadecimal value (eg, #0000ff), or an RGB value (eg rgb(0,0,255)).Syntax
Foreground Color
To add color to an HTML element, you use
style="color:{color}", where {color} is the color value. For example:
<h3 style="color:blue">HTML Colors</h3>
This results in:
HTML Colors
Background Color
To add a background color to an HTML element, you use
style="background-color:{color}", where {color} is the color value. For example:
<h3 style="background-color:blue">HTML Colors</h3>This results in:
HTML Colors
Border Color
To add a colored border to an HTML element, you use
style="border:{width} {color} {style}", where {width} is the width of the border, {color} is the color of the border, and {style} is the style of the border. For example:<h3 style="border:1px blue solid;">HTML Colors</h3>
This results in:
HTML Colors
Color Names
The most common methods for specifying colors are by using the color name or the hexadecimal value. Although color names are easier to remember, the hexadecimal values and RGB values provides you with more color options.
Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9 and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you preceed the value with a hash (#). Although hexadecimal values may look a little weird at first, you'll soon get used to them.
There are 16 color names (as specified in the HTML 4.0 specification). The chart below shows these color names and their corresponding hexadecimal value.
| Color | Color Name | Hexadecimal Value | Color | Color Name | Hexadecimal Value | |
|---|---|---|---|---|---|---|
| Black | #000000 | Green | #008000 | |||
| Silver | #c0c0c0 | Lime | #00ff00 | |||
| Gray | #808080 | Olive | #808000 | |||
| White | #ffffff | Yellow | #ffff00 | |||
| Maroon | #800000 | Navy | #000080 | |||
| Red | #ff0000 | Blue | #0000ff | |||
| Purple | #800080 | Teal | #008080 | |||
| Fushia | #ff00ff | Aqua | #00ffff |
You can make up your own colors by simply entering any six digit hexadecimal value (preceeded by a hash). In the following example, we're using the same code as above. The only difference is that, instead of using "blue" as the value, we're using its hexadecimal equivalent (which is #0000ff):
<h3 style="color:#0000ff">HTML Colors</h3>This results in:
HTML Colors
If we wanted to change to a deeper blue, we could change our hexadecimal value slightly, like this:
<h3 style="color:#000069">HTML Colors</h3>This results in:
HTML Colors
Choosing Colors - The Easy Way
By using hexadecimal or RGB color values, you have a choice of over 16 million different colors. You can start with 000000 and increment by one value all the way up to FFFFFF. Each different value represents a slightly different color.
HTML Attributes
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign.
Consider this example:
OK, we've already seen the body tag in previous lessons, but this time we can see that something extra has been added to the tag - an attribute. This particular attribute statement,
The browser knows to make the background color orange because we are using standard HTML tags and attributes (along with standard Cascading Style Sheets code) for setting the color.
Here's another example of adding an attribute to an HTML tag. In this example, we use the <a> tag to create a hyperlink to the
Many attributes are available to HTML elements, some are common across most tags, others can only be used on certain tags. Some of the more common attributes are:
You don't need to fully comprehend these just yet. The good thing about attributes is that, in most cases, they are optional. Many HTML elements assign a default value to its attributes - meaning that, if you don't include that attribute, a value will be assigned anyway. Having said that, some HTML tags do require an attribute (such as the hyperlink example above).
Example
Consider this example:
<body style="background-color:orange"> OK, we've already seen the body tag in previous lessons, but this time we can see that something extra has been added to the tag - an attribute. This particular attribute statement,
style="background-color:orange", tells the browser to style the body element with a background color of orange.The browser knows to make the background color orange because we are using standard HTML tags and attributes (along with standard Cascading Style Sheets code) for setting the color.
Another Example
Here's another example of adding an attribute to an HTML tag. In this example, we use the <a> tag to create a hyperlink to the
CodeItSimple website. <a href="http://codeitsimple.com/">CodeItSimple Website</a> Many attributes are available to HTML elements, some are common across most tags, others can only be used on certain tags. Some of the more common attributes are:
| Attribute | Description | Possible Values |
|---|---|---|
| class | Used with Cascading Style Sheets (CSS) | (the name of a predefined class) |
| style | Used with Cascading Style Sheets (CSS) | (You enter CSS code to specify how the way the HTML element is presented) |
| title | Can be used to display a "tooltip" for your elements. | (You supply the text) |
You don't need to fully comprehend these just yet. The good thing about attributes is that, in most cases, they are optional. Many HTML elements assign a default value to its attributes - meaning that, if you don't include that attribute, a value will be assigned anyway. Having said that, some HTML tags do require an attribute (such as the hyperlink example above).
HTML Formatting
You may be familiar with some of the formatting options that are available in word processing applications such as Microsoft Office, and desktop publishing software such as QuarkXpress. Well, many of these formatting features are available in HTML too! This lesson contains some of the more common formatting options.
There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from
Typing this code:
Results in this:
You specify bold text with the
Typing this code:
Results in this:
You specify italic text with the
Typing this code:
Results in this:
Typing this code:
Results in this:
Here is a
line break.
Typing this code:
Results in this:
Typing this code:
Results in this:
Note, that the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered, "u" for unordered).
Typing this code:
Results in this:
Headings
There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from
h1 for the most important, to h6 for the least important.Typing this code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Results in this:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Bold
You specify bold text with the
<b> tag.Typing this code:
<b>This text is bold.</b> Results in this:
This text is bold.
Italics
You specify italic text with the
<i> tag.Typing this code:
<i>This text is italicised.</i> Results in this:
This text is italicised.
Line Breaks
Typing this code:
<p>Here is a...<br />line break.</p> Results in this:
Here is a
line break.
Horizontal Rule
Typing this code:
Here's a horizontal rule... <hr /> ...that was a horizontal rule :) Results in this:
Here's a horizontal rule...
...that was a horizontal rule :)
...that was a horizontal rule :)
Unordered (un-numbered) List
Typing this code:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Results in this:
- List item 1
- List item 2
- List item 3
Ordered (numbered) List
Note, that the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered, "u" for unordered).
Typing this code:
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
Results in this:
- List item 1
- List item 2
- List item 3
HTML Elements
HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. These elements are defined using HTML tags. HTML tags tell your browser which elements to present and how to present them. Where the element appears is determined by the order in which the tags appear.
HTML consists of almost 100 tags. Don't let that put you off though - you will probably find that most of the time, you only use a handful of tags on your web pages. Having said that, I highly recommend learning all HTML tags eventually - but we'll get to that later.
OK, lets look more closely at the example that we created in the previous lesson.
Explanation of the above code:
As mentioned in a previous lesson, you'll notice that all of these tags have opening and closing tags, and that the content of the tag is placed in between them. There are a few exceptions to this rule.
You'll also notice that the closing tag is slightly different to the opening tag - the closing tag contains a forward slash (
Although most browsers will display your page regardless of the case you use, you should always code in lowercase. This helps keep your code XML compliant (but that's another topic).
HTML consists of almost 100 tags. Don't let that put you off though - you will probably find that most of the time, you only use a handful of tags on your web pages. Having said that, I highly recommend learning all HTML tags eventually - but we'll get to that later.
OK, lets look more closely at the example that we created in the previous lesson.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>
Explanation of the above code:
- The <!DOCTYPE... > element tells the browser which version of HTML the document is using.
- The <html> element can be thought of as a container that all other tags sit inside (except for the !DOCTYPE tag).
- The <head> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS), although the <title> tag is an exception to this. The content of the
<title>tag is displayed in the browser's title bar (right at the very top of the browser). - The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go.
- The <p> tag declares a paragraph. This contains the body text.
Closing your tags
As mentioned in a previous lesson, you'll notice that all of these tags have opening and closing tags, and that the content of the tag is placed in between them. There are a few exceptions to this rule.
You'll also notice that the closing tag is slightly different to the opening tag - the closing tag contains a forward slash (
/) after the <. This tells the browser that this tag closes the previous one.UPPERCASE or lowercase?
Although most browsers will display your page regardless of the case you use, you should always code in lowercase. This helps keep your code XML compliant (but that's another topic).
| Therefore... | Good: | <head> |
| Bad: | <HEAD> |
Getting Started HTML
When you create a web page you will usually do something like this:
OK, let's walk through the above steps in more detail.
OK, before we get too carried away, I'll explain what that code was all about.
We just coded a bunch of HTML tags. These tags tell the browser what to display and where. You may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between. Most HTML tags have an opening and closing tag.
All HTML documents should at least contain all of the tags we've just coded and in that order.
- Create an HTML file
- Type some HTML code
- View the result in your browser
- Repeat the last 2 steps (if necessary)
Creating a Webpage
OK, let's walk through the above steps in more detail.
Create an HTML file
An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a .txt extension).- Open up your computer's normal plain text editor (this will probably be Notepad if you're using Windows or TextEdit if you're using a Mac). You could use a specialized HTML editor such as DreamWeaver or FrontPage if you prefer.
- Create a new file (if one wasn't already created)
- Save the file as html_tutorial_example.html
Type some HTML code
Type the following code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>View the result in your browser
Either...- Navigate to your file then double click on it
...OR...- Open up your computer's web browser (for example, Internet Explorer, Firefox, Netscape etc).
- Select File > Open, then click "Browse". A dialogue box will appear prompting you to navigate to the file. Navigate to the file, then select "Open".
Repeat the last 2 steps until you're satisfied with the result
It's unrealistic to expect that you will always get it right the first time around. Don't worry - that's OK! Just try again and again - until you get it right.
Explanation of code
OK, before we get too carried away, I'll explain what that code was all about.
We just coded a bunch of HTML tags. These tags tell the browser what to display and where. You may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between. Most HTML tags have an opening and closing tag.
All HTML documents should at least contain all of the tags we've just coded and in that order.
Subscribe to:
Posts (Atom)