Complex Webpages use JavaScript and jQuery

This post will explain exactly how to use JavaScript and jQuery to put content from objects into the structure of a template.

JavaScript objects and HTML templates allow you to separate content from structure. This technique will allow you to make powerful and complex webpages. You put these two things together using JavaScript and jQuery.

The first step is to use jQuery to get the text of the template out of the DOM.

var source = $(“#image-template”).html();

 

Next, you have to compile the template. You call the Handlebars.compile function and pass in the source text you got from the template, and the result is a variable called template. The variable template is a JavaScript function that turns objects into HTML.

var template = Handlebars.compile(source);

 

Now you will want to call the template function, pass in your data, and assign that to some HTML.

var html = template(data);

 

Finally, the last step is to use jQuery to copy the HTML back into your DOM element.

$(‘#Content’).html(html);

 

This above sequence of steps is what you need to do to turn your template text and content object into HTML code.

Take a look at a more complete example of how this works. First, look at all the and stylesheets you will need to bring in.

Importing Stylesheets

Inside the <body> tags you will see an empty <div>. You will soon push content inside this empty <div>. Below that is the actual template.

The HTML Template

Then at the end you will see the JavaScript. This goes through the sequence of steps that was shown at the beginning of this post.

Sequence of Steps

The last thing not pictured is the closing </script> tag. Do not forget that.

Pictured below is what the HTML page should look like. It is very simple, but the process learned in this post will allow you to make more complex webpages.

Rendered HTML

 

Build Out Your Site

This lesson will take a look at how to build out a website. The site will be an image gallery, where you navigate to various photo albums, and then view individual photos in the albums.

Use the code from the lesson where you build the un-collapsed navigation bar, and modify it as follows:

<!– start un-collapsed navbar –>
<div class=”collapse navbar-collapse” id=”main_navbar”>
++<ul class=”nav navbar-nav”>
++++<li class=”active”><a href=”index.html”>Home</a></li>
++++<li><a href=”albums.html”>Albums</a></li>
++++<li><a href=”photos.html”>Photos</a></li>
++ </div>
<!– stop un-collapsed navbar –>

 

Files for WebsiteNow your navbar has links for the home, albums, and photos. Also, the href attribute specifies the correct file name for these pages, but you have not made those pages yet. That is the next thing to do. Simply make copies of our index.html file, and change the name of each copy respectively. Your website folder should contain the files as shown.

The photo1.html page was also added, because this is where you will show individual photos. However, it will not be in the navbar.

Now you can add photos to your albums page. Place the photos under the closing </nav> tag.

<div class=”container”>
++<h1>Photo Albums</h1>
++++<a href=”photos.html”><img class=”album_cover” src=”./images/img_1.jpg” alt=”graffiti image”></a>
++++<a href=”photos.html”><img class=”album_cover” src=”./images/img_2.jpg” alt=”english breakfast”></a>
++++<a href=”photos.html”><img class=”album_cover” src=”./images/img_3.jpg” alt=”lots of cheese”></a>
</div>

Notice each image links to the photos.html page.

The class “album_cover” will resize the picture, but you will need to add a styles.css sheet and use the following code:

.album_cover {
++++width: 25%;
++++border: 5px solid black;
}

Make sure you add <link href=”css/styles.css” rel=”stylesheet”> to your all your new html pages!

This resizes the photo with CSS3. The other option would have been to use a photo editor to make thumbnail size photos, and use thumbnails for your album covers. On a small mobile device, your albums page should now look like the photo shown below.

Wk2Albums

Add Pictures to the Photo Page

Now you can add pictures to your photos.html page. Use the code shown below.

<div class=”container”>
++<h1>Photos</h1>
++++<a href=”photo1.html”><img class=”photo_list” src=”./images/img_1.jpg” alt=”graffiti image”></a>
++++<img class=”photo_list” src=”./images/img_2.jpg” alt=”english breakfast”>
++++<img class=”photo_list” src=”./images/img_3.jpg” alt=”lots of cheese”>
</div>

Notice the href for the <a> tag links to the photo1 page. This allows the user to view a larger size of the image.

The CSS3 for the class “photo_list” can be:

.photo_list {
++++width: 25%;
}

It does not make sense that our photos page is just a list of the same photos of the album cover page, but this example is just for demonstrative purposes. you can add your own distinct photos, and your photo pages for each album. However, you can use the code in this example to guide you.

Finally, add the appropriate image to your photo1.html page.

<div class=”container”>
++<h1>Graffiti Photo</h1>
++++<img class=”single_photo” src=”./images/img_1.jpg” alt=”graffiti image”></a>
</div>

The CSS3 for the “single_photo” class can be:

.single_photo {
++++width: 75%
}

This code in the stylesheet will display a larger version of the image.

 

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.