Monday, December 31, 2018
Thursday, December 27, 2018
Wednesday, December 26, 2018
Monday, December 24, 2018
Sunday, December 23, 2018
Saturday, December 22, 2018
How to use header tag in HTML5?
HEADER-TAG-IN-HTML5 |
<header> Tag in HTML5
1. Introduction of <header> tag
2. Syntax of <header> tag
3. Attributes of <header> tag
4. Example of header tag
Introduction to HTML5 <header> Tag
Before HTML5, any header of the webpage was defined by the DIV element. The id was given to separate the DIV section of the header from the other div section. As this has been given below.
<div id = "header">
// header text and image content here
</div>
Similar to the header, the other div elements also defined the id. Thus it was difficult to manage the different ids of each div.
HTML5 provides a dedicated tag to define every important section of the website making them easy to manage and apply styles on these. One of the tags is the <header> tag.
<header> tag of HTML5 is used to define a webpage or a header of a section. The header is an important part of any website. Header displays information about a website. Such as the name of the website and logo etc.
HTML5 <header> tag creates a container in which you can display any type of introductory content or navigational links. Mainly the information given below is displayed in the <header> tag.
1. Heading Tags.
2. Logo or Icon.
3. Any information about the content(Description).
The <header> tag can be easily managed by CSS. You will learn in next CSS course.
Syntax of HTML5 <header> Tag
The syntax for <header> tag is being given below.
<header>
// Header text and image content
</header>
Inside the <header> tag, you define the headline of the website from the heading tag and the headline of the website from the paragraph tag. For example, in the case of MyBlogHelp Tutorials, the <header> element will be defined as
<header>
<h1> MyBlogHelp Tutorials </h1>
<p> Blogging, SEO, Design & Development </p>
</ header>
As I've told you earlier, the <header> element is not only used for the webpage but also to define a header of a section. So you can use more than one header tags in a single document. You can define a <section> header like this.
<section>
<header>
<h1> Heading Section </h1>
</header>
// Other section elements
</section>
One important thing to be noted that you can’t define a <header> tag in <footer>, <address> or any other <header> tag.
Attributes of HTML5 <header> Tag
There is no specific attributes of the <header> tag are available. These tags support all HTML global attributes such as id, class, etc. If you are using <header> tag more than once in your webpage, these attributes can differentiate. The syntax is given below.
<header id = "WebsiteHeader">
// content here
</ header>
<header> id = "sectionHeader">
// content here
</ header>
Styling HTML5 <header> Tag
Like any other tag, CSS rules can be applied to the <header> tag as well. The syntax is given below.
header
{
// CSS rules here
}
Events related to HTML5 <header> Tag
<header> tag supports all global event attributes. By using Event attributes, you can handle events that are generated on the <header> element. The syntax is below.
<header onmouseover = "script-here">
// content here
</header>
The onmouseover attribute has been used in the above syntax. Similarly, other events can also be handled.
Example of HTML5 <header> tag
The above script generates the given output below.
EXAMPLE-OF-HEADER-TAG |
Friday, December 21, 2018
Thursday, December 20, 2018
Wednesday, December 19, 2018
Tuesday, December 18, 2018
Monday, December 17, 2018
How to use article tag in HTML 5 ?
1. Introduction of HTML5 <article> tag
2. Syntax of HTML5 <article> tag
2. Syntax of HTML5 <article> tag
3. Attributes of HTML5 <article> tag
4. Example of HTML5 <article> tag
Introduction to HTML5 <article> Tag
The header, footer and sidebar in the website can be the same on different pages but the article is unique on every page.
The article is the section of a website that contains the main content and which is most important to the user. On the basis of this section of your website, you get a ranking in search engines.
The content of the <article> tag is independent of the rest of your website content. That is, this content does not require other content. As there are different articles in the newspaper and these are all independent, so every article tag on your website is independent.
An article usually contains headings and paragraphs. Headings and paragraphs are defined by <h1> and <p> tags respectively. The HTML syntax of an article is as follows.
An article usually contains headings and paragraphs. Headings and paragraphs are defined by <h1> and <p> tags respectively. The HTML syntax of an article is as follows.
<article>
<h1> Heading </ h1>
<p> This is a paragraph. </ p>
</ article>
Sub headings (<h2>, <h3> etc.) are also used as required in an article. The footer can be also define in the <article> element. As shown below.
<article>
<h1> Heading </ h1>
<p> This is a paragraph related to main heading </ p>
<h2> Sub Heading </ h2>
<p> This is a paragraph related to subheading </ p>
<article>
Attributes of HTML5 <article> Tag
There is no element specific attribute of the <article> tag. But this tag supports all global attributes such as id, class, title etc.
<article id = "HTMLTutorial">
</ article>
Similarly, you can use other global attributes with <article> tag.
Styling <article> Tag
Like any other HTML element, you can also apply CSS rules to the <article>. You can define the width, color, and display of the article by CSS.
article
{
width: 920px;
color: # 272727;
display: block;
}
As you can see in the syntax above, styles are applied by CSS on the <article> element. Similarly, you can apply many more CSS rules on this tag.
<article> Event Attributes
<article> element supports all global event attributes like onclick, onfocus, etc. By handling these events, you can make the web page interactive.
<article onclick = "script-code-here">
As you can see in the syntax above, onclick event attribute has been defined in the <article> element. Similarly, you can also define other event attributes.
As you can see, in the above example, the main heading has been created inside the <article> element and later a paragraph has been added after that a subheading and a paragraph has been added again.
ARTICLE-TAG-EXAMPLE |
Sunday, December 16, 2018
How to use menu tag in html?
MENU-TAG-IN-HTML |
HTML <menu> Tag
1. Introduction of <menu> tag
2. Syntax of <menu> tag
2. Syntax of <menu> tag
3. Attributes of <menu> tag
4. Example of <menu> tag
4. Example of <menu> tag
Introduction to HTML <menu> Tag
HTML <menu> tag was included in the old versions but later it was excluded in HTML version 4.0.1. Now, this tag is included in HTML5 after redefining. <menu> tag is used to define the list of commands.
For example, you add an image to the web page. If you want to display your menu of the defined commands, and not display a default menu when someone right clicks on this image. For this, you will have to use the HTML <menu> tag.
Every command in the list of commands performs a specific task. For example, when you right-click on the desktop in the Windows operating system, you can see a list of some commands that perform different tasks.
Similarly, you can also create a list of commands for HTML elements, which will show the list of commands when the user right clicks on the specific text or image. Context menus, popup menus, toolbars and form controls can be created by <menu> tag.
In whatever element you want to apply the menu on the HTML element, you define the context menus attribute and pass it as the id value of the <menu> tag.
HTML <menuitem> Tag
The <menu> tag works as a container for the list of commands. Every command inside it is defined by <menuitem>. The <menuitem> tag has two main attributes label and icon.
In this, the display name of the command is defined by the label attribute and icon is defined by icon attribute. Defining the icon of the command is not mandatory. The general syntax of this tag is given below.
<menuitem label = "command-name" icon = "icon-image-url" event-attribute = "action"> </ menuitem>
What actions will be taken when clicking on a command, you can define it by HTML event attributes. For example, you can define from onclick event attribute what action will be taken when clicking on the command.
Syntax of HTML <menu> Tag
The general syntax for the HTML <menu> tag is given below.
<menu label = "" type = "" id = "">
<menuitem attributes ...>
</menuitem>
</menu>
As you can see above in syntax, it is defined <menuitem> tag inside <menu> tag. It can also be called the subtag of the <menu> tag.
Attributes of HTML <menu> Tag
With the <menu> tag, the available attributes are described as below.
label
With this attribute, you can define a display name of the menu. It is not mandatory to define it.
Type
By this attribute, you can define what type of menu you want to show. This attribute can have three possible values those are given as below.
list - When you want to create a list of commands.
toolbar - When you want to create a toolbar
context - When you want to create a context menu
<menu> tag also supports all global and event attributes of HTML.
Example of <menu> tag in HTML
An image is added to the above example. The context menu has been applied on the user-defined menu (myMenu) on this image. In this menu, the refresh command is given which will reload the image when clicked. This example produces output as below.
EXAMPLE-HTML-MENU-TAG |
This tag works only in the Mozilla Firefox web browser.
Saturday, December 15, 2018
Thursday, December 13, 2018
How to use HTML hr and br Tag?
The HTML <hr> tag is used to separate the content according to the subject. This tag generates a horizontal line that can be used to separate different topics. It is also called horizontal rule in HTML. In HTML5, the <hr> tag defines the thematic break and in old versions, it was used to create a horizontal rule.