Angular Bootstrap Website V

The Angular Bootstrap Website V tutorial demonstrates how to move much of the logic and code introduced in the Angular Bootstrap Website IV tutorial. The idea is to tidy things up by moving all the logic out of the ‘html’ document and into the javascript document. First of all a PanelController is created. The PanelController…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

HTML5 Canvas Javascript Render

In this HTML5 Canvas Javascript Render post two effects are created using javascript methods on a html5 canvas element. The first example uses the following six methods to create an animated curved ‘sine’ line. ‘document.getElementById()‘ ‘getContext()‘ ‘clearRect()‘ ‘fillRect()‘ ‘Math.sin()‘ ‘setInterval()‘ See the Pen html5javascriptsine by Daniel (@Parsons) on CodePen. The next HTML5 canvas javascript render…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Javascript Affecting HTML Documents

To see javascript affecting HTML documents look at the following code snippet. In particular look at the javascript code on line 8 in-between the ‘script’ tags.

In the above example the h1 element in document.write() becomes a node in the document. To view the document with the newly created ‘h1’ node is possible…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Javascript HTML Document Object Model

The Javascript HTML Document Object Model is often abbreviated to DOM. The DOM or (Document Object Model) refers to the elements that javascript can interact with on a html page. To fully understand the DOM it is best to be aware of ‘Inspect Element‘. To explain the DOM first of all create a basic HTML…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

HTML Unordered List Tags

The html unordered list tags are used to create a bulleted list. Here is a basic example. First of all on line 9 we add the opening <ul> tag and closing </ul> tag.

On line 10 inside the ‘ul‘ tags we add an opening <li&gt and closing </li&gt tag. In between the ‘li’ tags…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

HTML Ordered List Tags

The html ordered list tags are used to list items in an ordered sequence. Here is a basic example. First of all on line 9 we add the opening <ol> tag and closing </ol> tag.

On line 10 inside the ‘ol‘ tags we add an opening <li> and closing </li> tag. In between the…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

HTML5 Table Element Example

First of all to begin the hTML5 table element example we add an opening <table> tag and closing </table> tag on line 9.

Next inside the table tags we add and opening <tr> tag and a closing </tr> tag on line 10. The ‘tr‘ tags define a row within the table.

Now inside…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

HTML5 Non-semantic Tags

While designing webpages every web designer will encounter the ‘div‘ and ‘span‘ tags. These two tags are examples of html5 non-semantic tags because they do not give a description. Furthermore they do not add structure to the document. Even though the ‘div’ and ‘span’ tags are considered non-semantic they are very commonly used due to…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

HTML5 Semantic Elements

HTML5 Semantic Elements give the language structure. These include the following: ‘Header’ <header></header> tags. ‘Main’ <main></main> tags. ‘Section’ <section></section> tags. ‘Article’ <article></article> tags. ‘Aside’ <aside></aside> tags. ‘Footer’ <footer></footer> tags. Lets start by creating a simple page that demonstrates how to use ‘semantic‘ HTML5 tags. Below is a basic webpage that contains code for the doctype,head…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

HTML5 Doctype Tag First.

First of all every html5 document must begin with the a ‘<!DOCTYPE html>’ tag. Always add the HTML5 Doctype Tag First.

This is due to the browser needing a ‘<!DOCTYPE html>’ to identify the document as being a HTML5 document. Adding the ‘<!DOCTYPE html>’ tag is also known as ‘the doctype declaration‘. The opening…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr