You are on page 1of 19

HTML Tutorial

From tutorialbook.net

Search

B o a o l u k T o i t r
Home

Free Tutorials on Web Design and Development


HTM L Codes Articles HTM L Examples HTM L Reference Send tutorials About us Feedback

HTML Basics
HTML Codes Introduction HTML Introduction HTML Elements HTML Tags HTML Attributes HTML Body Attributes HTML headings HTML P tag HTML line break HTML Img tag HTML a tag HTML Font tag HTML color names HTML table tag HTML table header HTML form row and cell tag html table of elements list HTML Font style HTML Frameset tag HTML iframe List in html HTML Ordered list HTML Image map HTML Form tag HTML Drop down list HTML Check box and radio button HTML form components Text fields and areas HTML horizontal line

Home
Hi users! Welcome to tutorialbook.net. This site offers you tutorials which are based on popular scripting languages. Currently we have promoted html tutorials, examples and references in our website. With the help of our site you can learn all the important html codes by learning our tutorials regularly. The level of the tutorials of our site extents from beginner to advanced. These tutorials are very useful and can be understood by everyone.

Follow us on Subscribe to Blog via Email


Enter your email address to subscribe to this blog and receive notifications of new posts by email. Email Address Subscribe

To know more about us you can visit our about us page. You would also be happy to know that we also allow the users to send us tutorials of languages mentioned. You are allowed send feedback about our site by selecting the option from our menu bar. The other content of our site is as shown below:

HTML Tutorials
The html tutorials of our site have a very hefty content which are in good and simple English. There are about two categories in this topic they are html basics and html advanced. There are lots of tutorials which make you master in html, so

start learning html now !

HTML Examples
To give you more clear idea about html, we have also promoted lots of html examples which are related to the html tutorials in our website. You can try all these examples in the editor, but make sure that you have learnt the tutorial for the example first. See all of them >

HTML Reference
You can also find html references in our site which can be used for quick reference. Also try to use to use these references after you have some knowledge of the tutorials since you will not get any idea about it when you are just a beginner. See all of them >

So get started with our tutorials, examples and references to learn html.

Introduction HTML doctype Marquee in html HTML and css Internal and external style sheets HTML meta tag HTML audio Embed swf in html HTML Video tag Embed video in html

Copyright
2013 Tutorial Book.

Return to top
Powered by WordPress and the Graphene Theme.

Search

B o a o l u k T o i t r
Home

Free Tutorials on Web Design and Development


HTM L Codes Articles HTM L Examples HTM L Reference Send tutorials About us Feedback

HTML Basics
HTML Codes Introduction HTML Introduction HTML Elements HTML Tags HTML Attributes HTML Body Attributes HTML headings HTML P tag HTML line break HTML Img tag HTML a tag HTML Font tag HTML color names HTML table tag HTML table header HTML form row and cell tag html table of elements list HTML Font style HTML Frameset tag HTML iframe List in html HTML Ordered list HTML Image map HTML Form tag HTML Drop down list HTML Check box and radio button HTML form components Text fields and areas HTML horizontal line

HTML Codes
Introduction
Welcome to our first html introduction chapter namely HTML Codes. This site offers you high quality tutorials in which various html codes are provided along with explanations about it. These explanations help you to remember the codes, what it means to browsers and avoid the mistakes committed by many programmers while type it in the editor. You can also use our html examples and references which will help you to understand these html codes better. Before we begin our journey to learn html, learn check answers for the questions which are commonly asked by beginners.

Subscribe to Blog via Email


Enter your email address to subscribe to this blog and receive notifications of new posts by email. Email Address Subscribe

Follow us on

Peoples opinion about building websites ?


Lots of people think that building websites is a tough task. But in reality its not so tough. Some even believe that it is expensive and requires many advanced software too. Fortunately, already a there is a software present in your computer. This software is named as notepad, where you can build webPages and easily create a website in no cost.

How does our html codes help you in learning html ?


In notepad you need to create an html files by using html language in order to create webPages. Many sites dont have enough content in it and tough to understand. To learn codes from such sites you have read it with full interest and put your mind totally in it. Fortunately, in our site each and every article has enough content which are in simple and also good English. Our codes automatically create interest among yourself so that you will understand it easily by just reading it once or sometimes twice.

HTML Advanced

How is html language compared to other ?

Introduction HTML doctype Marquee in html HTML and css Internal and external style sheets HTML meta tag HTML audio Embed swf in html HTML Video tag Embed video in html

At the beginning HTML is a bit tough and quite boring as you have to sit near blank white and type lots of codes. But later, when you try quite advanced programs, you can find interesting results. By using the codes provided in our website and also referring the html examples and html references html

becomes extremely easy.

Why is html knowledge required to build websites ?


However you need to have at least a little knowledge about html to build websites even if you use any other software like WordPress, Joomla, etc. In coming chapter you will all about html from basics to advance. We hope we will have lots fun while learning. I think if you learn 2 or 3 chapters a day can easily make you a master in html. By the above words you must have got some basic information about html. So check more html codess to learn more about html.

Advanced html
In this chapter namely advanced html we will learn some of the advanced elements and also techniques in html. Please remember that you must not proceed to this chapter with out the knowledge of the html basic chapter as it is very essential to learn this chapter. Information about the advanced html topic contents ? View page

Embed swf in html


We will begin this chapter by first knowing what is swf file. Then later we will learn how to embed swf in html. What are swf files ? You must have observed some time that when a video or audio file is played, the browser uses flash player plugin to do that or some times when View page

Embed video in html


In our last topic we had learnt how to embed video in html through a webpage; however this topic namely embed video in html involves complex coding. So now we will know some of the preferable methods to embed video in a webpage using various tags in html. They are as follows: Using embed tag:- The usage of View page

HTML a tag
Lets begin this html a tag chapter by learning some basics about linking in html. As we all that webpage is collection of webpage linked together. The link the webpages, hyperlinking is widely used. Even in this chapter we will learn how to link webpages by using hyperlinking. Linking a webpage is very essential so

Search

B o a o l u k T o i t r
Home

Free Tutorials on Web Design and Development


HTM L Codes Articles HTM L Examples HTM L Reference Send tutorials About us Feedback

HTML Basics
HTML Codes Introduction HTML Introduction HTML Elements HTML Tags HTML Attributes HTML Body Attributes HTML headings HTML P tag HTML line break HTML Img tag HTML a tag HTML Font tag HTML color names HTML table tag HTML table header HTML form row and cell tag html table of elements list HTML Font style HTML Frameset tag HTML iframe List in html HTML Ordered list HTML Image map HTML Form tag HTML Drop down list HTML Check box and radio button HTML form components Text fields and areas HTML horizontal line

Return to HTML Codes

HTML Basics
This topic is based on html basics, which you should learn before using html. So lets begin to know all the html basics.

Subscribe to Blog via Email


Enter your email address to subscribe to this blog and receive notifications of new posts by email. Email Address Subscribe

Information about html basics


What is html ? HTML is a basic scripting language, invented by Tim Berners-lee in 1990. HTML also consists of many other scripting languages programs like JavaScript, css, etc. You may find little difficult to learn this program at the beginning if you have never learnt any scripting language but when you get used to it, there is no question of confusion. You must have found html codes when you left click on the WebPages of various websites and then select View source option. Well this is a simple way of seeing source code of any webpage in the browser. How to save html files ? HTML files are saved with an extension of .htm or .html by clicking on the save button. This language is supported by most of the simple text editors which are already resent in most of the operating systems. If they appear dull to you and they does not detect any mistakes committed while typing the code, then you can think of going for a new one which is available for free to download, one such editor is notepad++. How to view a source of a webpage in browser ? To view a in the browser, you must click on view > source in the menu bar of the browser or open the file with the browser. I recommend you to use Google Chrome web browser since it supports most of the functions of html5 which is the latest version of html.

Follow us on

Source: html.net

HTML Advanced

What does html stand for ?

Introduction HTML doctype Marquee in html HTML and css Internal and external style sheets HTML meta tag HTML audio Embed swf in html HTML Video tag Embed video in html

The abbreviation HTML stands for Hyper Text Markup Language . You can learn the meanings of these letters below : Hyper is the opposite of linear. You may find many words starting with this letter, but here it is not a real word . Text is used to give an idea that the text and words are main content in
this program .

Markup is what you do with the text in the program for example :converting text to headings, italics, etc. Language is used to indicate that html is just a basic scripting language. More information based on HTML ? There are many versions of html such as html 2.0, html 3.0, html 5, etc. There is only little difference in the basics these versions of html that is the basic structure of a webpage always remains the same. This makes us more comfortable to use it. Finally we have come to end of our basic html topic. Read more articles from our website to know more about html.

Leave a Reply

Email (required)

Name (required)

Website

Notify me of follow-up comments via email. Notify me of new posts via email.

Copyright
2013 Tutorial Book.

Return to top
Powered by WordPress and the Graphene Theme.

Search

B o a o l u k T o i t r
Home

Free Tutorials on Web Design and Development


HTM L Codes Articles HTM L Examples HTM L Reference Send tutorials About us Feedback

HTML Basics
HTML Codes Introduction HTML Introduction HTML Elements HTML Tags HTML Attributes HTML Body Attributes HTML headings HTML P tag HTML line break HTML Img tag HTML a tag HTML Font tag HTML color names HTML table tag HTML table header HTML form row and cell tag html table of elements list HTML Font style HTML Frameset tag HTML iframe List in html HTML Ordered list HTML Image map HTML Form tag HTML Drop down list HTML Check box and radio button HTML form components Text fields and areas HTML horizontal line

Return to HTML Codes

HTML Introduction
What are the requirements? Before learning how to get start with html, lets see the requirements for this. To create html files we need software called notepad, which is a simple text editor .You can find this software in start >all programs >accessories >notepad in windows, as shown in below image:

Subscribe to Blog via Email


Enter your email address to subscribe to this blog and receive notifications of new posts by email. Email Address Subscribe

Follow us on

Source: html.net

To can display html files you need a browser such as Internet explorer, Google chrome, etc. If you dont have any of them, you can download it from internet for free. This tutorial namely html introduction provides basic introduction to html. You neednt have to worry about it if you dont use windows, since you can use any other simple text editor such as Pico (Linux) or texteditor (Mac). What is notepad and its features ? Notepad is a very basic text editing program which supports many formats

HTML Advanced

Introduction HTML doctype Marquee in html HTML and css Internal and external style sheets HTML meta tag HTML audio Embed swf in html HTML Video tag Embed video in html

of scripting languages which also includes html. The major problem in notepad is that it doesnt detect or fix any type of error in the program. Even slight mistake can spoil the whole program. Is there any other editor better than notepad?
There are better editors than notepad, I told you about notepad because it is already available in the operating system. The most preferred editor is notepad++ which you can download from notepad-plus-plus.org. Notepad++ is better than notepad because unlike notepad, notepad++ is not and it also indicates the errors which is present in the program.

Do we need internet ? Actually there is no need of internet for creating and displaying html files. But we need internet to learn html online, as online is best method to learn such languages. You can get full idea about html unless you refer any website. Does html files requires lot of disk space?

Basically html files acquire very less space as they contain only some codes in it. Usually it may need only 2 or 3 kb for normal sized programs .For very large programs of 20 or more pages long may be of size 30 kb or more. So there is no question of thinking about disk space.

Leave a Reply

Email (required)

Name (required)

Website

Notify me of follow-up comments via email. Notify me of new posts via email.

Copyright
2013 Tutorial Book.

Return to top
Powered by WordPress and the Graphene Theme.

Search

B o a o l u k T o i t r
Home

Free Tutorials on Web Design and Development


HTM L Codes Articles HTM L Examples HTM L Reference Send tutorials About us Feedback

HTML Basics
HTML Codes Introduction HTML Introduction HTML Elements HTML Tags HTML Attributes HTML Body Attributes HTML headings HTML P tag HTML line break HTML Img tag HTML a tag HTML Font tag HTML color names HTML table tag HTML table header HTML form row and cell tag html table of elements list HTML Font style HTML Frameset tag HTML iframe List in html HTML Ordered list HTML Image map HTML Form tag HTML Drop down list HTML Check box and radio button HTML form components Text fields and areas HTML horizontal line

Return to HTML Codes

HTML Elements
What are html elements?
This topic is very important one as it tells you about the html elements. A webpage is divided to different elements in html. These elements have various types of uses and influence the webpage in many ways. Generally there are four different elements in an html file. They are the html, head, title and body element. You can learn the uses and influence created by these elements below:

Subscribe to Blog via Email


Enter your email address to subscribe to this blog and receive notifications of new posts by email. Email Address Subscribe

Follow us on

The ab ove image represents the structure of the html file in terms of elements.

<html>.</html> element
The html element beginning and ending indicates the browser when the program starts and ends. So you can always find this element before all the other html element, only doctype tag is used before it as they are used to specify declarations which refers to document type definition (dtd). This is the most major element as a program cant be declared as html file without using of this element; even other tags will be useless without this single element in a program. Generally there is no attribute or anything like that to this tag; it is just simply applied in a program.

<head>.</head> element
The head elements come just after the html element, is third most major element in a program. Generally heading of the program is typed in this element. Other scripting languages such as JavaScript and formatting languages such as CSS are placed in this element. This element is also affects the webpage in various ways.

HTML Advanced

Introduction HTML doctype Marquee in html HTML and css Internal and external style sheets HTML meta tag HTML audio Embed swf in html HTML Video tag Embed video in html

<title>.</title> element
The title elements come after head element. You can also make this element as optional to save more time. This element influences the webpage only in few ways. The title of the webpage is typed in this element. By default, when you skip this element in the program, the title of the webpage will be set as the address of the file, by default it is the web address if in a website or file address in the computer.

<body>.</body> element
The body elements are the second most influential in a webpage. It is placed after all the elements. Unlike other elements in body element, the attributes of it are commonly used in WebPages. Here the body of the webpage is typed. This element consists of all markup tags, about which we will learn in coming chapters. Generally the body elements acquire more space compared to other elements in a program. However this element is not an optional one, as there is no meaning of creating html program without using this element as the body of the webpage is determined by this element. Finally we have come to end of our html elements topic. Keep learning more articles from our website to know more about html.

Leave a Reply

Email (required)

Name (required)

Website

Notify me of follow-up comments via email. Notify me of new posts via email.

Copyright
2013 Tutorial Book.

Return to top
Powered by WordPress and the Graphene Theme.

Search

B o a o l u k T o i t r
Home

Free Tutorials on Web Design and Development


HTM L Codes Articles HTM L Examples HTM L Reference Send tutorials About us Feedback

HTML Basics
HTML Codes Introduction HTML Introduction HTML Elements HTML Tags HTML Attributes HTML Body Attributes HTML headings HTML P tag HTML line break HTML Img tag HTML a tag HTML Font tag HTML color names HTML table tag HTML table header HTML form row and cell tag html table of elements list HTML Font style HTML Frameset tag HTML iframe List in html HTML Ordered list HTML Image map HTML Form tag HTML Drop down list HTML Check box and radio button HTML form components Text fields and areas HTML horizontal line

Return to HTML Codes

HTML Tags
This topic is based on html tags; we will also learn how the tags are defined in an html file. We will also try to know how to begin and end a tag in a program. Now lets begin the topic, as we all know generally html tags are defined in body section in a program. But there are some tags which are also defined within head element such as script tag. Generally these tags also contain other scripting languages in it such as CSS, Javascript, etc. These tags are also called html markup tags. There are about countless tags in html, its a tough challenge to learn all of those.

Subscribe to Blog via Email


Enter your email address to subscribe to this blog and receive notifications of new posts by email. Email Address Subscribe

Follow us on

The above image shows how the tags start and end in the body section. Firstly, we will learn how tags are used in an html file. The markup tags contain keywords which tell the browser which tag should be applied. These keywords are surrounded by angle brackets (<,>) in the both sides for example :- <b>. Generally these tags come in two pairs. That is all about how to applying a tag in html program. As mentioned before, there are two pairs of tag in html. Lets know about the difference between both the pairs of a tag. First comes the start tag (open tag), indicating the browser when the tag must begin. At end is comes the end (close) tag, which is applied to send a command to the browser for ending a tag, unlike start tag / is used just before typing the name of the tag. These tags can also be called as open and close tag. Remember that you must apply this method to all types of tags, but there are exceptions for only some tag. There are also some attributes which can be applied in these tags, we will learn about then in our next chapter html attributes proceed to learn more about html5.

Leave a Reply
HTML Advanced

HTML Advanced
Introduction HTML doctype Marquee in html HTML and css Internal and external style sheets HTML meta tag HTML audio Embed swf in html HTML Video tag Embed video in html Website Name (required) Email (required)

Notify me of follow-up comments via email. Notify me of new posts via email.

Copyright
2013 Tutorial Book.

Return to top
Powered by WordPress and the Graphene Theme.

Search

B o a o l u k T o i t r
Home

Free Tutorials on Web Design and Development


HTM L Codes Articles HTM L Examples HTM L Reference Send tutorials About us Feedback

HTML Basics
HTML Codes Introduction HTML Introduction HTML Elements HTML Tags HTML Attributes HTML Body Attributes HTML headings HTML P tag HTML line break HTML Img tag HTML a tag HTML Font tag HTML color names HTML table tag HTML table header HTML form row and cell tag html table of elements list HTML Font style HTML Frameset tag HTML iframe List in html HTML Ordered list HTML Image map HTML Form tag HTML Drop down list HTML Check box and radio button HTML form components Text fields and areas HTML horizontal line

Return to HTML Codes

HTML Attributes
In this html attributes chapter we will learn how to apply an attribute to a tag. Most of the tags have various attributes for applying. As I mentioned in previous chapter html elements the <body> elements many attributes. Why html attributes are used ? Firstly all attributes are used to provide additional information about an element or a tag. For instances in the <body> element, bg color attribute is used to provide the additional information that which background color must be applied instead of default color for the webpage. Another important aspect is that the attribute are specified only in start tag rather than end tag.

Subscribe to Blog via Email


Enter your email address to subscribe to this blog and receive notifications of new posts by email. Email Address Subscribe

Follow us on

How an attribute must be specified ? The attributes are specified in pair. Firstly the name of the attribute is specified and then the value is specified with = sign and (quote) symbol should be used, in both the side of value of the attribute. Beware, if you miss this symbol in any place, the whole program will go wrong as the values wont be executed.
For example :- <font size=3>, Here word size is the attribute of font tag and

the value given is 3 Whether there is any tag which doesnt have any attribute? Generally all tags have attributes, some may have a lot of them and some only two or three. You will be curious to know that there are some tags which dont have any attributes at all. Most of these tags are used to indicate font styles (eg :- <i>, etc) but there are only few tags which are not used to indicate font styles. Finally we have come to end of the topic. I hope that our useful content has given you enough knowledge about the html attributes. You can move to next chapter to learn more useful information about other elements and sub elements in html and continue learning html.

HTML Advanced

Introduction HTML doctype Marquee in html HTML and css Internal and external style sheets HTML meta tag HTML audio Embed swf in html HTML Video tag Embed video in html Email (required)

Leave a Reply

Name (required)

Website

Notify me of follow-up comments via email. Notify me of new posts via email.

Copyright
2013 Tutorial Book.

Return to top
Powered by WordPress and the Graphene Theme.

Search

B o a o l u k T o i t r
Home

Free Tutorials on Web Design and Development


HTM L Codes Articles HTM L Examples HTM L Reference Send tutorials About us Feedback

HTML Basics
HTML Codes Introduction HTML Introduction HTML Elements HTML Tags HTML Attributes HTML Body Attributes HTML headings HTML P tag HTML line break HTML Img tag HTML a tag HTML Font tag HTML color names HTML table tag HTML table header HTML form row and cell tag html table of elements list HTML Font style HTML Frameset tag HTML iframe List in html HTML Ordered list HTML Image map HTML Form tag HTML Drop down list HTML Check box and radio button HTML form components Text fields and areas HTML horizontal line

Return to HTML Codes

HTML Body Attributes


Now, in this topic HTML Body Attributes we will learn the body element attributes in html. Generally, only body element has attributes. So lets learn about the important attributes of body element .Firstly we will learn the most basic attributes and then we will move to the advanced ones.

Subscribe to Blog via Email


Enter your email address to subscribe to this blog and receive notifications of new posts by email. Email Address Subscribe

Follow us on

Source: nhsdesigns.com

HTML Body Attributes


Bgcolor : - The most commonly used attribute of body element is bgcolor attribute. The background color of the webpage can be specified using this attribute in body element. You can directly specify the name of the color ( Remember this is valid for only few colors ) or you specify the hexadecimal value of the color or rgb color values which you can find in your website in the tool menu bar, which you will learn in coming chapters.
Id: - An id for the body of the program can be specified by using id attribute of body element. This attribute is advanced attribute and also not so common in use.

Title: - To provide extra information for the user about the body, the title of body tag is used to specify the tile of the body of the program. Forecolor: - Like bgcolor attribute, this attribute is also specified by using color names, hexadecimal values or rgb color value but the main aspect is that this attribute is used set the default color of text instead of background of the webpage. Link: - This attribute is used within the body tag to determine the color

HTML Advanced

Introduction HTML doctype Marquee in html HTML and css Internal and external style sheets HTML meta tag HTML audio Embed swf in html HTML Video tag Embed video in html

of the link which is specified in the body of the html program.


Vlink: - This attribute of body tag is used to specify the color of the link which already has been visited by the user.

Other attribute: - The background can also be set as an image by bgimage of body element if you wish to set an image as background instead of colors to the webpage, even bgsound attribute of body element can be used to set the background sound of the webpage.

Leave a Reply

Email (required)

Name (required)

Website

Notify me of follow-up comments via email. Notify me of new posts via email.

Copyright
2013 Tutorial Book.

Return to top
Powered by WordPress and the Graphene Theme.

The html tutorials arent over yet, to continue learning html proceed to next topic >>

You might also like