HTML Advanced Tutorial For Absolute Beginners

In this HTML tutorial, I am going to describe HTML advanced tags. I will describe about html elements, body attributes like bgcolor and background, HTML font tag, marquee tag, links etc. In HTML forms, I will describe about textbox, button, radio button, option, check box etc. So, If you want to learn advanced html tags then jump start with this advanced HTML tutorial.

What are HTML Elements?

In an HTML tag, from the opening tag to closing tag everything is an element. Even the tag's content is an element.
Example:
<p>This is a paragraph</p>
Above is the example of HTML element. Here, I have used opening paragraph tag then some content and after that closing paragraph tag. HTML elements always start with an opening tag and end with a closing tag. HTML elements can have attributes and also can have empty tags.

What does HTML attribute do and why it is important in HTML?

As I have already described that HTML elements can have attributes so the question is that why HTML elements have attributes? The answer is that HTML attributes are used to describe an element. In other words, HTML attributes are used to give additional information about elements. HTML attributes are always used in opening tags. Values of attributes should always enclose with the quotes.
Example:
<p align="right">This paragraph should be aligned in right side of the page</p>
In the above example, <p> is a paragraph tag and align is an attribute which is used to give additional information about the paragraph tag and right is the value of the align attribute.

Now, I am going to describe about HTML advanced tags.

How to insert a background color in an HTML web page?

If you want to insert a background image in your html web page then you need to use the bgcolor attribute of the <body> tag.
Example:
<body bgcolor="pink">

How to insert an image as a background in an HTML web page?

If you want to insert a beautiful background to enrich your web page then you need to use background attribute of the <body> tag.
Example:
<body background="bgImage.jpg">
In the above example, background attributes will use a background image. The image should be in a format which can be understood by HTML. Always use .jpg or GIF images as your background. You have to give the path of your image.

How to insert a scrolling text in your HTML web page?

If you want to insert a scrolling text in your HTML web page which can move your text right to left or left to right and up and down then you need to use HTML Marquee Tag. HTML marquee will animate your text. In marquee tag there is an attribute called direction which can help you to scroll your text as you want. Like you want to scroll your text in left to right direction or up or down then you need to pass the value in direction attribute. Look at the below examples for more understanding.
<marquee> I am scrolling text.</marquee>
<marquee direction="right"> I am scrolling left to right.</marquee>
<marquee direction="up"> I am scrolling down to up.</marquee>
<marquee direction="down"> I am scrolling up to down.</marquee>

HTML Font Tag and its attributes

By using HTML <font> tag, you can decorate your text. You can adjust the size, color and font face of the text.
Example:
<font face="Verdana" color="green" size=20>India Study Channel</font>
<font color="blue"> India Study Channel</font>
<font size=10> India Study Channel</font>

Using HTML attributes in Links

In HTML <link> tag, you can also specify attributes like opening a page in another window or making a link as do follow or No Follow. It's always a better idea to use attributes in a <link> tag.
Example:
<a href="http://www.IndiaStudyChannel.com/" target="_blank">Welcome to ISC!</a>
<a href=https://www.indiastudychannel.com/ rel="dofollow">Welcome to ISC!</a>
<a href=https://www.indiastudychannel.com/ rel="nofollow">Welcome to ISC!</a>

HTML Forms

HTML Forms are used to take input from users. HTML Forms are also used to redirect a user input to servers. We can take user input via a text box, password box, text area, select list, check box, radio button etc. We can also create buttons in forms. The input is the most important attribute of the form element.
Example:
<form>
…..Input elements like text box, checkbox etc.…..
</form>

Text Fields in HTML

To create an input text box we need to use <input type="text"/> element in HTML.
Example:
<form>
Name: <input type="text" name="name" />
</form>

Password Field in HTML

To create a password box we need to use <input type="password"/> element in HTML.
Example:
<form>
Password: <input type="password" name="pass" />
</form>

Radio Buttons in HTML

To create a Radio Button in HTML, we need to use <input type="radio"/> element in HTML.
Example:
<form>
<br />
Choose Course: <br />
<input type="radio" name="course" value="English" />English<br />
<input type="radio" name="course" value="Hindi" /> Hindi
</form>

Check Boxes in HTML

Check boxes are used to let a user select one or more action. You can create a check box by using <input type="checkbox" /> element in HTML.
Example:
<form>
<input type="checkbox" name="course" value="English" /> I have chosen English.
<input type="checkbox" name="course" value="Hindi" /> I have chosen Hindi.
</form>

Submit Button in HTML

In HTML, a submit button is used to send user input data to the server for further processing. You can create submit button by using <input type="submit" /> element in HTML.
Example:
<form name="input" action="formactionpage.aspx" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Text Area in HTML

In HTML, text area is used to create a multiline text box in which we can use unlimited numbers of text. The size of a text area is specified by the cols and rows attributes. We can use <textarea> tag to define a text area in HTML.
Example:
<textarea rows="2" cols="100">
IndiaStudyChannel is an educational website in India which offers learn as well as earn by sharing your knowledge on this site.
</textarea>

Select Tag in HTML

In HTML a select tag is used to create a drop down list. Inside <select> tag we use <option> tag to create options in HTML.
Example:
<select>
<option value="India Study Channel"> India Study Channel </option>
<option value="Java Study Channel"> Java Study Channel </option>
<option value="ZLobber">ZLobber</option>
</select>

Conclusion of Advanced HTML Tutorial for absolute beginners

In above advanced html tutorial, I have described almost all the tags which can make you a master of HTML if you practice these tags. You can also take some references to other websites too. If you have any difficulties then let me know. I will try to solve your queries at earliest. You can also read my HTML tutorial on A beginner's guide to HTML Tutorials.