Tuesday, July 18, 2017

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.



What is DOCTYPE?

HTML is a markup language which is used to defined the structure of the web document which can be shared on the internet. It can be than accessed using the internet protocol like HTTP, HTTPS or TCP given the specific URL. 

Doctype tells the client which standard we are following for HTML. For HTML5 we use doctype
<!DOCTYPE html>.


What all doctypes can be used in the web pag?

you can Valid DTD list to find all the valid doctype declarations.


What if I do not have a doctype defined?

If you do not specify a doctype in your html page then client is going to guess the doctype based on the html markup. I would suggest to always use a doctype in the html page. Also, you can use Markup validator to validate the html markup for a given doctype.
In the valid dtd list you will there are different types


Strict

All the items which are in the standard and does not contain items which are deprecated.


Transitional/Loose

All the items which are in the standard and have items which are deprecated. 


Frameset

When you are not having a body in your page but have different frames each one pointing to a different html document.


What is Head Element?

Head element is used to define the metadata. The information is used for the client but is not displayed to the user except the <title> tag which is used to set the title of the page.


What all elements are allowed in head element?

title

<title> is used to set the title of the page which we see on the client browser. 


meta

You can have many of  meta tags. It can have information like keywords, description, author etc. Are used by the search engines to see what the page is about. e.g.

<meta name="Author" content ="Karmjit" />
<meta name="keywords" content="tutorial, html5, basics" />

you can also use "http-equiv" to define the content for the http-header. e.g.

<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>


script

include the javascript which can be used to make the page interactive. we can use to define the inline javascript. e.g.

<script type="text\javascript">
    window.onload = function(){
      alert("window loaded");
    };
</script>


style

style can be used to defined inline CSS to design the web page. e.g.
<style type="text/css">
body { color : red; }
</style>


link

Client can be informed about the linked documents. link can be used to link the csss and javascript files. e.g

<link rel="stylesheet" type="text/css" href="index.css">


base

To specify the base uri for the links in the page. defines the vase address of all the relative links on the web page. e.g.

<base href="http://learprogrammingios.com/">

once you define the base url than all the href are going to be relative to the base. 


How to add comment to html page?

you can use <!-- comment goes here in between --> to add comments to the html page or to comment out the html section.


What is Body element?

Body is the content area of the web page which we will use to define different document sections with Headings, Text, Lists and different links to the web pages on the same server or different server. We can use tables to format the document, which can be done using <table> tag or we can use <div> with style sheets to define the tabular structure in web page. 

we can include different kind of media elements like audio, media and images in the web page. we will go through different kind of elements in the body. we will discuss the basic attributes of the elements with in the body elements. 


id

id is the attribute of the item which uniquely identify the element in the page. Id of different element should be unique.


class

class is the name of the style class which we use to design the element. When we say design the element means how we can change the way we want element to render on the client. 
we can also use class to find the element in the DOM.

<body id=content>
<div class="mainContent">
</div>
</body>

so now we have discussed the basics of the html. we will discuss different  Text elements in HTML which we can use in the body tag. Click on part 2 of the series if you want to jump directly to Text elements and is now confident about the basics of the html.

No comments:

Post a Comment