Tutorial on Creating Your First HTML 5 Page

admin — Sun, 14 Oct 2012 05:53:30 +0000

In this tutorial we will create a very simple HTML 5 page. We will keep it as simple as possible so that you can get something up and running quickly.

HTML 5 is a significant change from HTML 4. It comes with brand new tags and a new doctype plus more. However older browsers that was in existence prior to HTML 5 will not know of these news tags. Of course, we will want our page to be viewable on these older browser as well. Therefore there are various tricks and techniques that we have to employ in order to get our HTML 5 page to render on older browsers.

The easiest way to start is to start with an HTML 5 template that has all these techniques and best practices coded for you already. HTML 5 Boilerplate is the popular template to use. We will use this template as the skeleton for our HTML page.

1. First download the latest HTML5 Boilerplate from http://html5boilerplate.com/

In this tutorial we are using version 4.0.0.

2. After you have downloaded and extracted the zip file into a new folder on your hard disk, you will see a bunch of files like the following…

3. The main file that we are interested in is index.html. Open this file in your favorite text editor. (I’m using Dreamweaver).

4. Note the new doctype is now the following…

This is the new doctype for HTML5. If you see this, it means that the author intends for this to be an HTML 5 document.

5. Without changing any code, just test it by running the index.html file in your browser. We are using Chrome for this viewing. As of this writing in October 2012, Chrome version 22 is the browser that supports the most features of the latest HTML5 specifications, according to HTM5Test.com. That is why many web designers like to using Google Chrome during development.

You will see the following in the browser …

which indicates that everything currently works.

You can say that this is your first “Hello World” HTML5 page. Of course, we now want to start writing some code so that we can understand how all the pieces are put together.

6. Let’s add a title to our page by typing in “Our First HTML5 Page” into the index.html file in between the tags as shown… <a href="/wp-content/uploads/2012/10/add-title.jpg"></a> This is known as the “Page Title”. After saving the file and refreshing the browser, you should see that our page title shows up in the browser tab. <a href="/wp-content/uploads/2012/10/page-title-chrome.jpg"></a> 7. HTML5 Boilerplate intends for you to delete things from it that you do not need. One of the things that it puts in near the bottom of the HTML file is a code snippet intended for Google Analytics. Since we will not be using that in this example, we will delete it. If you don’t know what Google Analytics is, then you don’t need it. Delete the code as that is marked as shown… <a href="/wp-content/uploads/2012/10/delete-google-analytics.jpg"></a> If you save file and view in browser, you will see that the deletion had no effect. 8. Let’s make the background color be a pale gray. Styling information is done in CSS. And if you are using HTML5, you would be using CSS3 (as opposed to CSS2). The CSS code is found in the main.css file within the css folder. You can see that our index.html file links to this css file via the link tag shown below … <a href="/wp-content/uploads/2012/10/html-link-css.jpg"></a> 8. Now open up the main.css file in your editor and look for the section that says “Author’s custom styles” — that’s for us. <a href="/wp-content/uploads/2012/10/add-first-css.jpg"></a> 9. We write our first CSS rule into that section. The code shown above highlighted by the red rectangle is the code that we just added. This tells the browser to set the background color of our page to be light gray (which is the hexidecimal color #CCCCCC). Save changes in the CSS file and refresh browser. Our page now has gray background. <a href="/wp-content/uploads/2012/10/gray-background.jpg"></a> 10. Now you may have noticed that the index.html page also links to another css file called normalize.css. <a href="/wp-content/uploads/2012/10/normalize-css.jpg"></a> 11. You don’t have to worry about that css file. Not all browsers may use the same default styling for a HTML page. Hence, one technique is to use CSS to make the styling consistent among browsers . This is known “normalizing the styles” and the code for doing that is known as “css reset code”. That is what is contained within normalize.css. 12. Also within normalize.css, you will see this code … <a href="/wp-content/uploads/2012/10/block-display-new-tags.jpg"></a> <a href="/wp-content/uploads/2012/10/block-display-new-tags.jpg"></a>This is to allow older non-HTML5 browser to work well with the new HTML5 tags (some of which are article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary). The CSS contain styling to make these new tags display as “block style” tags. Shown above is the “display” property with the “block” value for these new tags. Don’t worry about what that means for now since this is your first HTML5 page. We have to take things one step at a time. Just know that the above CSS code is needed to make older browser work with the new HTML5 tags. 13. Next, let’s give some definition to our content area containing the text by adding some borders and a different content background color to set it apart from the background color. In the index.html file, we will add an “article” tag (one of the new HTML5 tags) around the text content as shown… <a href="/wp-content/uploads/2012/10/article-tags.jpg"></a> Note that the starting tag (the first tag) is <article> And the closing tag is </article> with the extra slash at the end. That is how most tags work. They come in pairs with a starting tag and a closing tag. Save changes and refresh browser. 14. You will see no effect until we add styling rule for the article tag. Let’s add the article CSS rule to the main.css file… <a href="/wp-content/uploads/2012/10/css-page-definition.jpg"></a> We set the width of our page to be 500 pixels with the line … <pre>width: 500px;</pre> The margin property has two values … <pre>margin: 20px auto</pre> The first value 20px represents the top and bottom margins of our page. The second value represents the left and right margins of our page. Since we set that to “auto”, it has the effect of making the page be centered horizontally across the browser. Saving the file and running in browser, we get … <a href="/wp-content/uploads/2012/10/first-html5-page-centered.jpg"></a> 15. In CSS3, we can have rounded corners and drop shadows like … <a href="/wp-content/uploads/2012/10/corners-drop-shadow1.jpg"></a> by adding the following two lines to our article CSS rule as shown below … <a href="/wp-content/uploads/2012/10/article-css-rule.jpg"></a> For the border-radius property, we set the roundness to 8 pixels (the greater the value, the more rounded). The first two values of the box-shadow property represents the horizontal and vertical offset respectively. The third value is the amount of blur. And the fourth value is the color of the shadow. 16. One last thing before we are done, the text content is too close to the left edge of the page. Add a bit of padding around the article element by …. <a href="/wp-content/uploads/2012/10/padding-article.jpg"></a> and we should get … <a href="/wp-content/uploads/2012/10/after-padding.jpg"></a> Since we had only specified one value for the padding property, it will use the 30 pixels as padding for the top, right, bottom, and left edges. In this case, since all the properties of the article CSS rule is unique, it does not matter which order you place the properties in. We just like putting the padding property where it was. And that is your first HTML 5 page. </article> <article> <h1>List Drop Down Menu Examples</h1> admin — Thu, 06 Sep 2012 04:50:25 +0000 It is not a problem building a basic horizontal menu, but building a horizontal menu with drop down item upon hover is a bit more challenging — especially if it is a complex multi-level menu system. Plus there are so many different ways of building them, from pure CSS menus to those that uses some jQuery. Making them cross-browser compatible is another chore. There are so many drop down menu examples out there, that you might want to look through a few to find one the most closely matches what you are looking for and then see how it works. Here is a list of some drop down menu example (listed in no particular order). <ul> <li><a href="http://www.alistapart.com/articles/dropdowns">SuckerFish</a> – AListApart.com</li> <li><a href="http://www.htmldog.com/articles/suckerfish/dropdowns/">Son of SuckerFish</a> – HTMLDog</li> <li><a href="http://users.tpg.com.au/j_birch/plugins/superfish/">SuperFish</a> -</li> <li><a href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/">How to Create a drop-down nav menu with HTML5, CSS3, and JQuery</a> – tutsplus.com</li> <li><a href="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm">Smooth Navigation Menu</a> – dynamicdrive.com</li> <li><a href="http://www.hv-designs.co.uk/2009/02/17/sliding-jquery-menu/">Sliding JQuery Menu</a> – hv-designs.co.uk</li> </ul> </article> <article> <h1>Resizable Images that does not break out of container</h1> admin — Sun, 02 Sep 2012 06:56:28 +0000 It is great when we create <a href="/page-resize-with-browser">pages that resizes with the browser</a>. However, it is not so great when an user resizes the browser to be smaller than an image. Typically, the image would remain at its fixed width and break out of its container. This can be fixed by applying … img { max-width: 100%; } to the image. This constrains the maximum width of the image to be the width of its container. If the container resizes smaller, the image will accordingly resize smaller to fit the container. If the container resizes larger than the image width, the image will just be as big as its native width. The image will not scale up, unless you do … img { width: 100%; } which in this case would cause the image to be always at the width of its container. This is known as fluid image. It not only work for images, but works for other media as well. Often designers will use the rule … img, embed, object, video { max-width: 100%; } Alternatively, instead of resizing the image, one can hide any portion of the image that falls outside its container by … img { overflow: hidden; } </article> <article> <h1>CSS Based Horizontal Tabs</h1> admin — Mon, 25 Jul 2011 02:50:48 +0000 In this tutorial, we are going to create CSS-based horizontal tabs as shown here. <div id="attachment_437" class="wp-caption alignnone" style="width: 361px">horizontal CSS tabs</div> <a href="/example/code/horizontal-tabs.html">View live code here</a>. <h2>Graphics Used</h2> The graphics looks like this … Default gradient tab: default_tab.jpg Highlighted tab… But instead of using two different graphic files for the two tabs, we combine the default tab and highlighted tab into one graphic as shown. Combined tab: tabs.jpg Because the two tab images are on one file, they will load with the single file. This will improve performance due to one less server call to get another graphics file. And it will avoid any “flicker” that may occur if we had to wait for the browser to load a separate image for the hover state. <h2>Page Structure</h2> First, we will start out with a page structure on to which we will place our tabs to be sitting right on top of the gold nav strip. <div id="attachment_441" class="wp-caption alignnone" style="width: 535px">page structure for horizontal tabs</div> The code for this page looks like … <div id="attachment_442" class="wp-caption alignnone" style="width: 518px">code for page structure of CSS tabs</div> Note that for the sake of simplicity, this tutorial had placed the CSS on the same page embedded in the head section. However, for production code, you should put the CSS in a separate CSS file. Also images will be referenced in the same directory. Again, for production code, they would normally be in a separate directory. <h2>Coding the CSS Based Horizontal Tabs</h2> 1. Start by letting the tabs be links in an unordered list… And we get this … 2. Because different browsers may have different default margins and paddings for ul‘s and li‘s, we set them all to zero first and then we can adjust them later. We give the ul element an id of tabnav and create a CSS rule to select this ul and li’s that it contains. 3. In the CSS, we remove the bullets that normally appears in the unordered list. And we remove the underlines that normally occurs in the links for li’s. 4. The main characteristic about horizontal css tabs is that they actually be horizontal. We make the list items horizontal by floating the li’s. When we float the li’s, we need to give it a width. We set the li’s to 88px by 23px since that is the size of our graphic image for one tab. Now the list items are horizontal … 5. We set the display of the link to be block so that the link will expand to fill the entire width of the li, making the entire tab clickable and not just the text clickable. This is done with the following CSS … display:block; 6. We set the background image of link to be the tab graphic. We center align the text. Finally, we stylize the link with a color and font size that is suitable to match the tab graphics… And we get… 7. Notice that the tabs are much shorter than we would like. In fact, the tab height is only taking up as much height as needed by the text instead of the full 23px height of the tab graphic. Therefore, we remove the “height” attribute from the “li” to the “a” selector rule. And we get … 8. The text is sitting a little bit too high in relation to the tab graphics, so we add 3px top padding to the link. But when we add padding to the link, remember to decrease the height by the same amount since “height” in CSS is defined as “content height” and does not include any padding. 9. To create the hover effect where the highlighted tab is displayed when the mouse cursor is over the tab, we add a new CSS rule using the hover pseudo-class where we shift the background image to the left by 88px. Recall that the highlighted tab image is on the right-half of the graphics file and that each tab image is 88px in width. We also altered the link color upon hover to better constrast with the highlighted tab. And here is what it looks like if you hover over the home tab… 10. If we want the home tab to stay highlighted because this is the “home” page, then we have to add a class to the “home” link to make it different from the rest of the links. We’ll give it the arbitrary class called “selected” and add the CSS selector rule as shown… 11. We want the tabs to be sitting on the gold nav strip, not floating near the top of the page masthead. No problem. With some graphical measurements, we determined that all we need to do is to move the whole tab structure 71px lower. We do so by giving a top margin to the ul element, since the ul element is what contains all the tabs. And now it looks like … 12. Let’s space the horizontal tabs apart by adding 10px right margin to the li element. And we got our final product that looks like … <div id="attachment_437" class="wp-caption alignnone" style="width: 361px">horizontal CSS tabs</div> And there you have it. </article> <article> <h1>CSS Rollover Buttons</h1> admin — Mon, 04 Jul 2011 14:53:20 +0000 We want to create rollover buttons using CSS like the follow… <style> .btnContinue { width: 89px; height: 27px; display: block; font-size: 10px; text-decoration: none; background-repeat:no-repeat; background-image:url(/example/css-button/button.gif); } .btnContinue:hover { background-position:right; } </style> <a class="btnContinue" href="/"> </a> When you roll your mouse over the button, the button state changes. 1. First we put the images of the two button states into one single image file called button.gif… The advantage of having both the hover-state graphic and the default-state graphic on the same image file is that they are loaded at the same time during page loads. This avoids any flicker-effect during hover-over cause by the extra loading of the hover-state graphics. 2. The left side of the image represents the default state of the button. And the right side of the image represents the hover state. The image is in GIF format with a transparent background. 3. Write the code for a simple link with a single space as the link text. We don’t need text for the link since the “Click Me” text is already in the graphics of the button. <div id="attachment_162" class="wp-caption alignnone" style="width: 612px">CSS button code</div> 4. We gave this link a class name of “btnContinue”. 5. We define this new CSS class “btnContinue” in the head style section as shown above. We had set the height and width properties to be 89px and 27px since that is the size of one button in the image. In order for the link to be clickable in the entire 89 pixel by 27 pixel area of this button to be clickable, we set display: block. We set font-size to 10px to ensure that our space in the link does not become larger than the 89px by 27px area of the button. We set text-decoration:none so that there would not be an underline under the space character of the link. Finally, we set the background image to be our graphical button.gif. We also specify background-repeat:no-repeat as we did not intend for the button image to repeat. The graphical image with the two button is 178px wide. But we only see the blue graphic button in its default state since our link element is only 89px wide. By default, the background image will show the left and topmost portion of an image if it can not fit the whole image. 6. Now if you have your browser render the HTML code so far, you should get… <div id="attachment_163" class="wp-caption alignnone" style="width: 254px">default button state</div> As you hover over the button, you get the <a href="/cursor-hand-pointer">hand pointer cursor icon</a> of your browser. 7. Time to build in the hover effect so that the orange background image appears as well as you hover over the link. We will use the hover pseudo-class. To do that we create another CSS rule using the same class name btnContinue but with :hover after it as shown… .btnContinue:hover { background-position:right; } This rule is selected (or applies) when the user hovers over the element of the specified class. So when the user hover over our link with the class btnContinue, the properties in the rule .btnContinue:hover will apply as well as the properties in the .btnContinue rule. The only property that we need to change upon hover is the background-position. By setting the background-position to right, we see the right portion of the graphic file which shows the orange hover state of the button. <div id="attachment_164" class="wp-caption alignnone" style="width: 245px">CSS button hover state</div> </article> <article> <h1>Vertical Menu with Hover Effect using CSS</h1> admin — Mon, 04 Jul 2011 05:21:44 +0000 We will be constructing this vertical menu with HTML / CSS… <div id="attachment_97" class="wp-caption alignnone" style="width: 201px">vertical menu</div> <a href="/example/vertical-menu/vertical-menu.html">View live code »</a> Step 1: Setup a new HTML file with a tan background color as shown. <div id="attachment_98" class="wp-caption alignnone" style="width: 318px">vertical menu step 1</div> Step 2: Create a HTML unordered-list structure with list elements that will become our menu. <div id="attachment_99" class="wp-caption alignnone" style="width: 281px">vertical menu step 2</div> And this is what we have… <div id="attachment_100" class="wp-caption alignnone" style="width: 238px">vertical menu output after step2</div> Step 3: Because we want our menu buttons to be clickable, we make them anchor links. <div id="attachment_101" class="wp-caption alignnone" style="width: 349px">vertical menu step 3</div> <div id="attachment_102" class="wp-caption alignnone" style="width: 170px">vertical menu after step3</div> Step 4: To remove the bullets from our unordered list, we give our unordered list a class name called sidemenu and stylize it with list-style: none as shown… <div id="attachment_103" class="wp-caption alignnone" style="width: 343px">vertical menu step-4</div> Step 5: We want our list text to be of san-serif font (such as Verdana or Arial) for a cleaner uncluttered look. We add the font-family property as shown below. And we make the font-size 80% of normal. <div id="attachment_104" class="wp-caption alignnone" style="width: 402px">vertical menu step 5</div> Now we have … <div id="attachment_105" class="wp-caption alignnone" style="width: 144px">vertical menu output after step 5</div> Step 6: Add borders to our individual list elements with the following rule. This rule says to give a one pixel wide solid border of color #6F3E04 to <li> elements found within the <ul> element of class sidemenu. <div id="attachment_106" class="wp-caption alignnone" style="width: 279px">vertical menu step-6</div> Note that we specify a top, left, and right borders; but we do not specify a bottom border. That is because we don’t want both a top and bottom border for the <li> elements. Otherwise adjacent elements will have double borders. <div id="attachment_107" class="wp-caption alignnone" style="width: 321px">vertical menu output after step 6</div> Step 7: To close the menu, we add a bottom border to the <ul> element. Also we need to fix the width of the <ul> element to be 100px and give our menu a lighter background color of #EEEEDC. All this is done by the addition of the following properties. <div id="attachment_108" class="wp-caption alignnone" style="width: 402px">vertical menu step-7</div> Now our menu is starting to look like a menu. <div id="attachment_109" class="wp-caption alignnone" style="width: 242px">After step 7 in Internet Explorer</div> as seen in Internet Explorer 6.0. At least in Internet Explorer that is. Take a look at it in Firefox, and this is what you see… <div id="attachment_110" class="wp-caption alignnone" style="width: 250px">After step 7 in Firefox</div> That is because different browsers have different default paddings and margins on elements. Step 8: Hence, we will explicitly zero out the padding and margin on our <ul> element… <div id="attachment_111" class="wp-caption alignnone" style="width: 410px">vertical menu step8</div> and this makes it look correct on both browsers… <div id="attachment_112" class="wp-caption alignnone" style="width: 321px">vertical-menu after step8</div> Step 9: The underlining of the links is adding clutter. Get rid of the underline from the links by setting the text-decoration of the <a> element to the value none as shown here… <div id="attachment_113" class="wp-caption alignnone" style="width: 216px">vertical-menu step-9</div> The underline is gone. But they are still links as evidence by the hand icon when you hover your mouse over the text. The problem is that if you hover over the non-text portion of the menu, the hand icon disappears — making the non-text portion of the menu non-clickable. <div id="attachment_114" class="wp-caption alignnone" style="width: 307px">step9 vertical-menu</div> Step 10: We fix this by setting the <a> element to display: block. <div id="attachment_115" class="wp-caption alignnone" style="width: 234px">step10 code</div> This works in Firefox but not in Internet Explorer. <div id="attachment_116" class="wp-caption alignnone" style="width: 352px">step10 output</div> Step 11: It turns out that Internet Explorer likes to have a width in order for display: block to take effect. For the time being, we set this width to be 100px — the same as the width that we had set for the <ul> element. <div id="attachment_117" class="wp-caption alignnone" style="width: 254px">vertical-menu step-11</div> Step 12: Next step is to stylize the links to get rid of that default blue color. And apply some padding as shown in the below rule. <div id="attachment_118" class="wp-caption alignnone" style="width: 248px">step12 vertical-menu</div> And here is the result… <div id="attachment_119" class="wp-caption alignnone" style="width: 170px">step12 output</div> Step 13: If you take a look at the menu in both Firefox and Internet Explorer 6.0, you will notice that after we have added the padding, the width of the menu in Explorer is no longer correct. It has become too width. <div id="attachment_120" class="wp-caption alignnone" style="width: 335px">vertical-menu step-13</div> Step 14: To fix this, we have to set the width of the <a> links to be 78px. Why 78px? We have to remember that the definition of width is the content width of an element — that is the width excluding the margin, padding, and borders. Our <ul> is 100px. Inside the <ul> is our <li> which has an one pixel left border and a one pixel right border. So the content width of our <li> is 98px. The <a> that is inside our <li> has a left padding of 10px and a right padding of 10px. Excluding the padding, the content width of the <a> element is 78px. <div id="attachment_121" class="wp-caption alignnone" style="width: 212px">vertical-menu step14</div> Step 15: And now it looks perfect in both Internet Explorer and Firefox. <div id="attachment_122" class="wp-caption alignnone" style="width: 335px">vertical-menu step-15</div> Step 16: Next we add a hover effect to the menu by adding the following rule. As the mouse hovers over the menu, the text color changes to #EEEEDC and the background color changes to #B9BB79. <div id="attachment_123" class="wp-caption alignnone" style="width: 287px">vertical-menu step-16</div> Step 17: Test this in Firefox and Internet Explorer and see that it works as expected. <div id="attachment_124" class="wp-caption alignnone" style="width: 201px">vertical menu step-17</div> The menu is complete, you can get the full code by <a href="/example/vertical-menu/vertical-menu.html">viewing the live code</a> and doing a view-source in your browser. </article> <article> <h1>Using Cursor Hand or Cursor Pointer?</h1> admin — Mon, 04 Jul 2011 01:42:09 +0000 The truth is that most often you need neither … cursor: hand; nor cursor: pointer; Most of the time, your browser will change the cursor to be a clickable icon when you hover over a link. For example, the following code will give you a proper cursor without any CSS rules… <div id="attachment_18" class="wp-caption alignnone" style="width: 529px">hand cursor example code</div> <a href="/example/code/cursor-auto.html">View live code</a> And this is the standard perferred way of constructing a clickable image. However, sometimes you do not have an <a> tag link bounding your image. You just have an image which uses Javascript to implement a click as in … <div id="attachment_19" class="wp-caption alignnone" style="width: 571px">hand cursor code 2</div> <a href="/example/code/cursor-alt.html">View live code.</a> Then the browser will not know to change the cursor to a hand icon when mouse is over the image unless you add the CSS rule cursor: pointer; on your image as shown above. All “modern” browsers will support “pointer” and that is the W3C standard. As you can see from the <a href="http://www.w3.org/TR/REC-CSS2/ui.html#cursor-props">W3C specs</a>, “hand” is not a valid valid for the “cursor” property. But you sometimes might see old code that uses … cursor: hand; That is because the “hand” value is only needed by Internet Explorer 5.5 and below. But hardly anyone uses Internet Explorer 5.5 anymore. So use… cursor: pointer; And not worry about… cursor: hand; </article> </main></body></html>

Learn Web Design Online » css

Tutorial on Creating Your First HTML 5 Page