HTML

What is HTML and how can we make a website using HTML?

Introduction to basics of HTML:

HTML is very basic need of a user now a days. As technology is rising very fast so everyone needs his/her business or occupation to be popular and vice versa. Learning of HTML is now not been so tough to do. It’s just a matter of understanding and lots of practice indeed. As you have heard “Practice makes a man perfect”. So if you want to be successful in this field then you must have to put your efforts into it. Now let us start with the basic introduction of HTML.

Question: What is HTML (hyper text markup language)?

Answer: HTML is an abbreviation of Hyper Text Markup Language. A language which is often written in web pages to make a website readable with usage of html tags which are basically a collection of alphabets.

First of all we should understand with an example that why we need html to make a website;

Suppose you are making house, you will need bricks, cement etc to construct a house. Just like that HTML is based on elements which altogether make a beautiful website, and we name these elements as Tags which you will learn later. But for now in this intro you must have to understand that html is a markup language which combines the alphabets and angle brackets to shape a tag. These tags are the building blocks, which will give you output into web browsers.

some of the common known HTML elements is as follow:

Tag Name Description
H1
Biggest Heading tag h1
H2
Smaller Heading than h1
H3
Smaller Heading than h2
H4
Smaller Heading than h3
H5
Smaller Heading than h4
H6
Smaller Heading than h5
P
Defines a paragraph

Let's be practical

Image Description
A basic startup code, that is consisted of most basic and initial level tags which will start building your website, let us have a look in the following picture;
This view is the HTML view where you can find the basic example of code. It’s very easy to understand. This picture demonstrate the Doc Type which is HTML5 doc type. It shows the document that what kind of code is written in this page. Is it semantic(we will discuss it later) code or not. All code is written under this document type. So don’t get afraid about document type. It’s just for your understanding. In beginning you don’t need to understand this document type. Just focus under the document type. This area and code is very important because this code demonstrate the website’s look and feel. That what kind of data will be in this page and what title could this page has? So this is very important to understand this portion of the website.
Image Description
All website code is written in notepad. The picture showing html, head and body tags is called html tag form, these tags are consisting of opening and closing brackets. To make sure the code is valid or not we must test it in our browser. 


Some points are very important in making of an html website which are same as i have already told that all website code is written in tag. Just like that there are some rules for making a website title and links. All type of links related to website i.e style sheet styling and conditional scripts and IE related conditional style sheets or scripts always written in tag. This portion is very important which can change the entire look of the website. We will cover this portion later but for now to show you the basic info about how to start working on a website or how to insert anything in the website. After section there is another section that is section. This section plays the main role to show the content in the website. Whatever we will write in the section, will be print on the website. For example;
Image Description
You must have to save it as an html file for example:






Image Description
When you will open this file you will find it like this:
Image DescriptionAfter saving the file when you will open it in your browser by double clicking the file the view will be;

So you saw how easily you made your first site but remember it's only on your system so only you can see your website till now. There are many other things to do if you have to on air your site to worldwide. You must have a domain and hosting account for your site to making your first site on air. You can purchase it from sites or some reliable companies if you have heard of some. 
This was the basic intro of how to make a website. There are some important things you must have some understanding of it. A document consists of multiple headings, titles, paragraphs, columns, links, and images. So for that we use some elements and attributes. Don't need to panic for that we will discuss it later with detail. Now the very important topic i am going to introduce is CSS.

Question: What is CSS and how to make a website interactive?

Answer: CSS stands for CasCading style sheet. It's a sheet where we can style our html. Usually there are three ways to assign some styling values to our html.

1- Inline Styles
2- Internal Styles
3- External Styles

All these can change the look of our html. What i mean is if we want to change the font size, line height, color or last but not the least background we can use our styles to change it and for that we use anyone of these methods. But the most good and professional way is to use the 3rd method that is External style sheet. Every website that we see uses many style sheets, java scripts files in it to make the website attractive and beautiful in looking and functioning. Web designers (front-end developers) and back-end developers works a lot to make a website beautiful in look and working with the help of all these files and many more.
Now coming on the main topic what is a style sheet. Let me tell you from first style method that is Inline styles.

1- Inline styles:


If we want to style our font size, line height, color, backgrounds then we will add a style attribute in our html for example;

Now what difference will it create is;

Image Description
As you can see the style attribute has changed the font size, line height, color and background of the tag paragraph. All this happened just because of inline style sheet. Now we will discuss internal styles.







2- Internal Styles: 

Image Description
Internal Styles can be implemented by typing the style tag in between the head tag. Every style in between the style tag will be written, will give an absolute change to the text or its occupied area.

After saving it open your index file and then you will see the result is same as above. Now we will discuss the third method that is to attach an external file and then attach it as a style sheet that is External Styles.

3-External Styles:

Image DescriptionWe will copy all styles that we mentioned in internal style and then we will open a new notepad file and there we will paste all that code and we will save it with .css extension for example;
Image Description
Output will be same as above. This was the best and easiest example of External styles.

Comments

Post a Comment

Please leave your comments or feedback at here....

Popular posts from this blog

What is Heading in html and how to add h1 in a web page or post?

Image
What is Heading in html and how to add h1 in a web page or post? Heading is the most important part of our website. It helps us in search engine optimization. It shows that there is some title to specific post. It behaves like a name to some post. It also express that what may be the article downwards or what can be the content that will be under it. It summarize the content. Like if someone come and open google and type there "List of restaurants in NY", Google will show the details about the particular search and will show a list of pages which will have the same text in their title. This was the simplest example for heading, which clearly shows that headings play an important role in getting traffic. List of Heading Tags h1 - The biggest heading in font size and line height h2 - Smaller than h1 h3 - Smaller than h2 h4 - Smaller than h3 h5 - Smaller than h4 h6 - Smaller than h5 We can utilize these headings like this; <h1>Your Heading</h...
Read more

What is the difference between HTML4 and HTML5?

Image
What is the difference between HTML4 and HTML5? The main difference in HTML4 and HTML5 are the document types. HTML4 has three different document types whether HTML5 has only one document type. The example of HTML4 document types are as follow; 1- Transitional Doctype: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" 2- Frameset Doctype: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd" 3- Strict Doctype: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" HTML5 is the latest revision of XHTML that supports the latest browsers. It is quite helping for browsers to understand the latest techniques like flash, animations, audio and videos etc. HTML5 is also said to be the semantic coding that is helpful in SEO. It's mostly using...
Read more

What is img tag and how to add src (source or path) in html website?

Image
What is img tag and how to add src (source or path) in html website? Images are the best option to increase the SEO and the importance of your website. The text you type may be consists of hundreds and thousands words but a small picture can illustrates all the meaning to your post. It is really very simple to add images using "img tag". Image has some compulsory attributes that includes, width, height, src and alt as well. These are the mandatory attributes for showing an image in your website. You can assign width, height and also add the path in img src using src attribute which demonstrates the location of your image. We use image tag to include an image to the post or a page. This image tag consists of “src, width, Height and Alt” attribute that gives the identity to the image that how much the width and height this image contains and what is the alternate text of the image. Alternative text is very important for SEO (search engine optimization) purposes. There ...
Read more