Bootstrap Grid System – Gain Control

The bootstrap grid system is a brilliant method to gain control over the responsiveness of your website. Consider the built-in bootstrap classes in the following code:

<div class=”row”> <!– start row –>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_1.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_2.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_3.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_4.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_5.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_6.jpg”>
++</div>

</div> <!– end row –>

The main thing you need to know about this example derives from the <div class=”col-xs-6 col-md-3 col-lg-2″> tag.

Remember that bootstrap is built on 12 evenly spaced grids.

The class “col-xs-6” indicates that on an extra small screen, the image will consume six of those grid spaces. Thus, you will see two columns of pictures.

The class “col-md-3” indicates that on a medium screen, the image will consume three of those grid spaces. Thus, you will see four columns of pictures.

The class “col-lg-2” indicates that on a medium screen, the image will consume two of those grid spaces. Thus, you will see six columns of pictures.

You can see how the bootstrap grid system (along with these built-in classes) allows you to easily gain control over how your content is displayed.

Plan first! So, as you build your site you will know how many of the grid spaces to consume on an extra small, medium, or large screen size.

Read the documentation on the bootstrap grid system, for more information.

How to Leave a Breadcrumb Trail

A good site should communicate to the users where they are on your site, at all times. A typical way to telling users where they are is to leave a breadcrumb trail on all your pages.

To build a bootstrap navigation bar, you use an unordered list, <ul>. For a bootstrap breadcrumb trail, you will us an ordered list, <ol>. This makes sense. Order is not so important for the navbar, but it is important for the breadcrumb trail. You want users to know where they are, and how to get back to where they came from.

For example, directly under the main heading, <h1>, on a page called “Albums”, you would create a breadcrumb trail as follows:

<!– start breadcrumb –>
<ol class=”breadcrumb”>
++<li><a href=”index.html”>Home</a></li>
++<li><a href=”albums.html”>Albums</a></li>
</ol>
<!– end breadcrumb –>

Using the bootstrap class “breadcrumb”, the trail on your albums page should display as pictured.

bootstrap breadcrumb trail

You would then add <li> elements to your breadcrumb trail depending on how many levels deep you go into your website. For example if someone clicks on one of your albums, then it would take that user to the photos page. Therefore, you would add a third <li> element to the breadcrumb on the photos page.

It is suggested to read the bootstrap documentation on breadcrumb trails, for more information.

Collapsible Navigation Bar – A Must for Mobile Friendly

After you learn how to build a basic bootstrap navigation bar, you will want to know how to transform it to a collapsible navigation bar. Why? Well, if the user is on a small mobile device, then the navigation bar may consume the entire screen. This would result in a bad user experience, and the user may quickly leave your site. If you build a collapsible navigation bar, then the user experience is improved.

In order to build a collapsible navigation bar, you will need to program your site so it knows what to display when the nav bar is collapsed, and when it is not collapsed.

Start with your basic nav bar code from the previous lesson, and build on it to add the code necessary to build a collapsible navigation bar.

The correct code is shown below. Directly below are descriptions of all the additions shown in the code.

Collapsible Nav Bar Code
HTML5 Code for a Collapsible Navigation Bar

An Analysis of the Collapsible Navigation Bar Code

Make another <div> element for the collapsed navbar. Label it with comments, so you can distinguish the nav bars.

Add the built-in bootstrap class “navbar-header” to the collapsed navbar. This class tells your page that the collapsed navbar should sit on top of everything else.

Add the “collapse navbar-collapse” class to your un-collapsed ‘div’ element.

The next step is to make a make the <button> in your collapsed ‘div’ interact with your un-collapsed <div>. So, set a “main_navbar” id inside your un-collapsed <div>.

Now you will add a whole slew of characteristics to your button. Look above at all the characteristics added to the <button> tag. The type given improves accessibility. The class tells what to show when the navbar is collapsed. The data-toggle is picked up by bootstrap.js to give the button interactivity. The data-target specifies what actually collapses (it’s the main navbar). Finally, aria-expanded implies the button will not initially be seen.

Take a look at your progress. The images below show how the nav bar appears, collapsed and un-collapsed, on a small screen.

Wk2NavBarCollapsedWk2NavBarUnCollapsed

Properly Edit HTML5 – How To

To properly edit HTML5, every page of content should be wrapped with the <html> tag and the <body> tag.

This next bit is kind of tricky, but you should also include a <header> tag between your <html> and <body> tag. Within the header you should put a <title> tag. This contains meta-data about your web page, and is an important part of SEO. The title will not display on your page, but it should display on your browser tab. It is common for <title> and <h1> tags to contain the same text.

Below is a picture from a text editor to show you a properly edited basic page.

basic HTML5

HTML5 Makes Your Page Respond To Different Screen Sizes

Visit some random web pages and play with size of your browser window. Alternatively, view the pages on a desktop and then a smart-phone. Does the page respond to different screen sizes? If it does then you can assume that it was edited in HTML5.

Now take a moment to view the source code of the world’s first web page. You can view the source code and the HTML that was written. Using Google Chrome to view source code you click on ‘Tools’ and select ‘Developer Tools’. Notice that the HTML is a bit different from HTML5. That’s because HTML is a living language that constantly evolves. HTML5 simply represents a point when the W3C decided to mark it as the latest standard for HTML editing.

 

Must Know HTML5 Tags

You should become familiar with must know HTML5 tags that appear on almost every page.

If you want to put an image on your page then you will need to use the <img> tag with a src attribute. The source attribute contains the URL for your image.

For an example you can go to Google Images. Be sure to click on ‘Search Tools’ and ‘Labeled for Reuse’ so you do not violate any copyrights. Search for an image you like, right-click on it, and select ‘Save Image URL’.

Example of HTML5 <img> Tag

Here is an example of how to edit your HTML5 tag to display a standard Google image.

<img src=”https://encrypted-tbn2.gstatic.com/imagesq=tbn:ANd9GcSdW68P3DrocDWRhCvvr_SrKUyffhspfjGUqlHo03NbOlEbBi9w” />

 

Note that the image tag is self-contained. It does not have a separate </img> closing tag.

Example of HTML5 <img> Tag with Size Percentage Attribute

Here is an image of some bananas, with the width adjusted to 50%:

<img src=”https://encrypted-tbn3.gstatic.com/imagesq=tbn:ANd9GcTq9pG5b4c2fo2EIV044MAChiwDCYt4ReShWJg0cqwrQGu7xFlNzA” width=”50%” />

 

Notice that you can use a percentage for adjusting the width. This is a nice feature to give your site a responsive quality.

Example of HTML5 <a> Tag Wrapped Over <img> Tag

You can also make the image a link itself. You can do this if you want to direct a user to another URL by clicking on the image.

The following is an example of how to edit your code so the image of bananas links to an article about bananas.

<a href=”http://healthyeating.sfgate.com/health-benefits-one-banana-day-3316.html”>
++++<img src=”https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTq9pG5b4c2fo2EIV044MAChiwDCYt4ReShWJg0cqwrQGu7xFlNzA” width=”50%” />
</a>

 

As you can see, you simply put the <img> tag inside the <a> tag. Wrapping tags inside tags is a common practice with HTML5 editing, and it can go several layers deep. However, it is not permitted to overlap tags.

For example, the series of tags <p> <h2> </p> </h2> is not allowed. You can probably see by now why overlapping tags does not make sense.

Example of Using HTML5 Smaller Header Tag

You can make a smaller heading as follows:

<h3>This is a smaller heading. Use it where you want a small heading.</h3>

 

Example of HTML5 List Tags

You can also creat a numbered list, or as the tag suggests, an ordered list as follows:

<h4>Top Three Rock Guitar Players</h4>
++++<ol>
++++++++<li>Jimi Hendrix</li>
++++++++<li>Jimmy Page</li>
++++++++<li>Eddie Van Halen</li>
++++</ol>

 

You can also do an un-ordered list that shows bullet points.

<h4>Random Prime Numbers</h4>
++++<ul>
++++++++<li>1973</li>
++++++++<li>677</li>
++++++++<li>3</li>
++++</ul>

 

Lists can add a nice dynamic to your page content. You can practice making lists at this free and interactive HTML Lists Tutorial at W3 Schools.

 

There are no universal rules on how to use indentations, but you should try to edit it so that it’s easy to read. Your eyes will thank you later. Writing clean code could also help you land a job.

 

Create HTML5 Links – How To

The ‘HT’ in HTML stands for Hyper Text. It’s the idea that your document can link to other documents, and vice versa. This is why we create HTML5 links. The following will explain how to create HTML5 links.

The ability to create links was very exciting when it was first introduced because the linking of many documents allowed for information to flow more freely.

To create HTML5 links you will use the <a> tag with an href attribute. Here is an example:

<a href=”www.google.com”>Go to Google.</a>

Notice the href attribute is inside the opening tag.

Watch a 3.5 Minute Video Tutorial to Create HTML5 Links


If you edit multiple <a> tags you will need to put ‘&nbsp;’ between your tags. Why? Because even if you have space in your text editor, your browser will ignore this ‘whitespace’. Inserting ‘&nbsp;’ between tags forces your browser to put a visible space between your links. It stands for non breaking space.

If this post was helpful, then you might enjoy this post about CSS3 link styling.

Simple HTML5 Tags to Start With

Open the text editor of your choice (such as Notepad++ or Sublime), and you can start editing with some simple HTML5 tags.

These examples will use HTML5.

What is HTML5? HTML5 is the latest finalized standard of the HTML markup language that is used to structure content on the World Wide Web. It was standardized on October 28, 2014. You can read more about HTML5 on Wikipedia.

Start with Simple HTML5 Tags


You can create a main heading as follows:

<h1>This is a main heading</h1>

 

Because you used the <h1> tag, your browser will interpret this with large bold text, which is what you might expect for a main heading.

You can practice using simple HTML5 tags for free, and interactively on the W3 Schools HTML5 Tutorial.


Conceptually, you use tags to structure your page, and your browser can default to a format, like the  large bold text you see for a main heading.

A smaller heading could be edited as follows:

<h2>This is a sub-heading</h2>

 

Note that there is an opening and closing tag.

If you wish to change the default formatting that your browser interprets, then you will need to learn CSS3 font styling. CSS is used to style the appearance of a web page.

A paragraph would be created as follows:

<p>This is the text you will see in a paragraph</p>

 

There are many more types of tags you can use. These were examples of marking up text. Note, the ‘ML’ in HTML stands for markup language.

Continue with more HTML5 tags, and learn how to create links with HTML5.

HTML Introduction and World’s First Web Page

HTML stands for Hyper Text Markup Language.

HTML uses angular brackets for the markup tags. These tags tell the computer how to display the content. Content is different from appearance.

CSS is used in tandem with HTML to control the style of the content.

HTML files are commonly saved with .html extension. Sometimes you will see them saved as .htm, but not as often.

The world’s first web page was written in HTML. You can see how straightforward the content is displayed. Everything you see is the default structure used by HTML, i.e., the size of the headings, the blue links. There is no styling to change the appearance, and there is no interactivity to the page. It is strictly HTML.

HTML5 is the latest industry standard for editing in HTML.

Get started fast with HTML, this W3 Schools tutorial is a great resource, with interactive examples.

Get a Free Text Editor

You need a text editor to write HTML.

Here are some popular choices:

If you have Mac you can download TextWrangler.

If you use Windows you can download Notepad++ or the increasingly popular Sublime Text download. Sublime text is also available for Mac or Linux machines.

Do not use word processing software such as Microsoft Word or Google Docs for writing HTML. It causes extra formatting to be put into your code, and you will end up using a text editor to get rid of it. So it’s best to choose from one of the simple text editors described above.

It’s also important to note that while HTML5 is intended to be cross browser compatible, you should still check your pages to see how they will look in other browsers. For example, you might use the popular Chrome, but someone else might use Mozilla. Always check how your page will look in different browsers. Do not expect uniformity.

Knowing how to code well in the latest version of HTML is a web development skill that any good developer should know.