HTML 5 tutorials Part 3 - Bacis of HTML - Lists and Links

In this part we are going to discuss different kind of lists and links.

Lists

Unordered List

unordered list is the bulleted list which is defined using the tags ul and li.

<ul>

<li>1^st</li>

<li>2^nd</li>

</ul>

We can create nested lists with another ul tag within the li tag.

                <ul>

<li>1^st

<<ul>

<li>1.1</li>

</ul>

</li>

<li>2^nd</li>

</ul>

Ordered List

We can create ordered lists using the <ol> and <li> tags. Define in the same way as unordered list.

Definition List

Definition list are used to have term and put its definition next to it.

<dl>

<dt>HTML</dt>

<dd>Hyper text markup language</dd>

</dl>

HTML 5 Tutorial Part 2 - Basics of HTML - Text Elements

So, we have learned about the basics of html5 in the Part 1 of the series of tutorials. In this part we will discuss different Text elements and their attributes.

Note: No examples included please try them in an HTML page and see for yourself that what would be the text like. This is done intentionally. Purpose is to make you aware of the elements and encourage to try them yourself.

Block vs Inline Elements

Block elements are used to define a block of content like div or p tag. They are rendered on different lines, we can make them render on the same line using css. But we can say that block element render in the next line.

Inline elements are used to defined links or acronyms like span tag, a tag. Text will be rendered inline to the content. 

Headings

H1 - Primary heading

Primary heading of the document. It is also used by the search engines. 

H2-H6 - Sub headings

HTML have subheadings ranging from H2 - H6. So you can have subheading H2, H3, H4, H5 and H6. You want to use one primary heading for your page and subsequent sub headings. 

Note: We do not want to use the heading for the font size, we can style the text using style sheets.

<pre>

When client sees the pre tag it will honor the whitespace in the content.

<br/>

Used to add the newline.

<hr/>

Adding a horizonal rule and you can style it look different way.

&nbsp - non breaking space

This is instruction to client that do not break a line at that point while doing text wrapping.

&lt and &gt

Used to show the less than and greater than signs in the web page. As we have < and > being used in the html and if you want to show those as symbols than we need to use &lt and &gt.

<sup> and <sub>

superscript and subscript used to set the text as superscript and subscript.

<cite>

Information for citing a particular person or entity. It will be rendered as Italic text. you can style the cite in the styles. These are mostly for the search engines.

<abbr> and <acronym>

acronym is used to put the acronym and set the title attribute to set the full name of the acronym. Full name of the acronym will be shown in the mouse hover tooltip. abbr is used in the same way.

<em> and <strong>

emphasis and strong can be used to highlight the text. em is going to render the text in italic and strong is going to make the fond bold.

<blockquote><q>

blockquoute and qoute are used to put some quoutes in the text. Blockqoute as the names suggest is block element and q is inline qoute.


Note: Please try them at home.

HTML5 Tutorial Part 1 - Basics of HTML

In this part we will discuss the basics of HTML before we dive in to the html5 elements and features of html5. 

Terms will be used

Client

Client will be user Browser. Which render the html documents. You would not see the html tags on the page but the render web page.

Server

Machine hosting the HTML web documents and that can be located using the specific URL. URL is universal resource locator. There's lot happen when you click on a URL. we can cover that in separate blog.

Framework

Client side javascript framework which help in development of client rich applications. Most popular frameworks are AngularJS and React.

Hybrid App Development Part 1

So, in the previous blog Introduction to hybrid app development we learn about what is hybrid app. Today, we will learn more about hybrid app.

1. Hybrid App Architecture : Hybrid App Development Part 1
2. Development tools           : Hybrid App Development Part 2
3. Debugging techniques      : Hybrid App Development Part 3
4. Building Hybrid App        : Hybrid App Development Part 4
1. UI Development     : Part 4.1
2. Fetching Data and Angular Caching : Part 4.2
5. Testing the App                : Hybrid App Development Part 5
6. Deployment of App          : Hybrid App Development Part 6

We will talk about Architecture of Hybrid Mobile Application. We will discuss each of the component in detail. 

So first question that came to my mind when I think of Hybrid App Development is that what is it that enables this?

Answer to this Question is 

Web vs Native vs Hybrid Applications

In my previous blog Introduction to Hybrid Application development, we talk about different technologies which we will can use to build a Hybrid Application development.

However, before going into deep with Hybrid Application Development I was thinking to do a comparison between Web vs Native vs Hybrid Mobile applications.

Web vs Native vs Hybrid Mobile Applications

What I think about these different techniques for Mobile Application Development is that we should go with Hybrid Mobile Application development as over the past couple of years the Tools which are being used for Hybrid App development are matured and have been popular enough.

I didn't want to mention this but if you are a mobile app developer than you can see that the jobs in the IBMWorklight are more than any other Tool being used for Hybrid Mobile Application Development. If you would ask me what I am favoring the Hybrid App development is because

1. Single CodeBase for all the platforms. You need to maintain only one code for different platforms like iOS, Android and Windows.
2. Development is faster. As we are using the existing Web application development technologies like JavaScript, HTML and CSS with Apache Cordova
3. Deployment as Native apps by wrapping the web app using native framework.
4. IBM Worklight provide Single Notification server which can be used to deliver notifications to all the different platforms.
5. Integration with native features is very easy.
6. Offline databases can be used to store data when network is not available which huge advantage for offline support is.
7. There is huge repository of Cordova Plugins which can be integrated easily.

I would like to know your opinion on this before I start the Hybrid application development series and please suggest if there is anything specific you want me to include in the series.