Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
HTML table tag is used to display data in tabular form (row * column) There can be many columns in a row.
We can create a table to display data in tabular form using <table>element with the help of <tr>, <td>, and <th> elements.
In Each table table row is defined by <tr> tag, table header is defined by <th> tag and table data is defined by <td> tags.
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only closing tags are not used in HTML image element.
Example:
<h1> HTML Image tag </h1>
<img src="Good Morning.jpg" alt="Good Morning Friends">
Output:
The scr and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below:
It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server.
The location of image may be o the same directory or another server.
The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.
It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.
It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.
You have learnt about how to insert an image in your web page now if we want ot give some height and width to display image according to our requirement, then we can set it with height and width attributes of image.
Example:
<img src="animal.jpg" height="180" width="300"alt=">
Output:
We can use alt attribute with tag. It will display an alternative text in case if image cannot be displayed on browser.
Example:
<img src="animal.jpg" height="180" width="300"alt="animal image">
To insert an image in your web that image must be present in your same folder where you have put the HTML file. But if in some case image is available in some other directory then you can access the image like this:
<img src="D:\Shahnawaz\Image" height="180" width="300" alt="animal image">
Output:
We can also link an image with other page or we can use an image as a link. To do this put <img> tag inside the <a> tag.
Example:
<a href="https://www.shaahnawaz.com/image"><img src="rabbit" height="100" width="100"></a>
Output:
The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. The "href" attributer is the most important attribute of the HTML a tag. and which links to destination page or URL
The href attribute is used to define the address of the file to be linked. In other words, it points out the destination page.
The Syntax of anchor tag is given below:
<a href="#">Link Text </a>
Example:
<a href="second.html">Click of Second Page</a>
Output:
If we want to open that link to another page then we can use garget attribute of <a> tag. With the help of this link will be open in next page.
Example:
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<p> Click on <a href="https://www. shaahnawaz.com/" target="-blank">this-link</a>to go on home page of Mohammad Shahnawaz.</p>
</body>
</html>
Output:
Note:
The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of text or semantics of text. Following is the list of phrase tags, some of which we have already discussed in HTML formatting;
HTML paragraph or HTML p tag is used to define a paragraph in a web page or HTML document. Paragraph s are basically blocks of similar content, images, links, etc grouped together and displayed on a web-page. It always starts with a new line and browsers automatically add some white spaces before and after each paragraph. It has a starting <p> and ending</p> tag.
Example:
<p>This is first paragraph.</p>
<p>This is second paragraph</p>
<p>This is third paragraph</p>
If you put a lot of spaces inside the HTML <p> tag browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one.
Example:
<p>
I am toing to provide
you a tutorial on HTML and
hope that it will be very
beneficial for you.
</p>
<p>
Look I put here a lot of space but I know browser will ignore it.
</p>
<p>You cannot determine the display of HTML because resized windows may crate different result</p>
Output:
An HTML <br> tag is used for line break and it cab be used with paragraph elements.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>use of line break with paragraph tag</h2>
<p>Twinkle, twinkle, little star,<br>
How I wonder what you are!<br>
Up above the world so high,<br>
Like a diamond in the sky.<br>
</p>
</body>
</html>
Output:
An HTML <hr> tag is used to apply a horizontal line between two statements or two paragraphs.
Example:
Output:<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>use of horizontal line with paragraph tag</h2>
<p>An HTML hr tag draw a horizontal line and separate two paragraphs with that line
<hr>it will start a new paragraph.
</p>
</body>
</html>
HTML heading is a basic need to make our web page attractive and systematic. In order to achieve this, HTML5 provides six basic headings tags (h1 to h6) that are displayed on the webpage as titles, subtitles or any other relevant details. Let us learn these heading in HTML in details now.
2. Headings are useful for various such engines, such as Google, to index the layout and content of their web pages.
3. Headings offer an efficient and fast perusal of the web page for the users.
4. HTML headings can be nested with other elements and provide a better structure to the HTL document.
5. The purpose of the overall page can be depicted using these headings.
There are six different HTML heading which are defined with the <h1> to <h6>, tags from highest level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important.
Headings in HTML helps the search engine to understand and index the structure of web page.
The heading tags can be styled using the style attribute and its properties. By default, the CSS styling used for headings by most of the browsers are:
HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML These Tags are used to make text bold, italic and underlined. There are almost 14 options available that how text appears in HTML.
Formatting tags are divided into two categories:-
Following is the list of HTML formatting text:
<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (Not supported in html 5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in html 5)
<sup> It displays the content slightly below the normal line.
<sub> It display the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added.
<big> This tag is used to increase the font size by one conventional unit.
<small> Tis tag is used to decrease the font size by one unit from base font size.
HTML <b> and <strong>formatting elements.
The HTML <b> element is a physical tag which display text in bold font, without any logical importance. If you write anything within <b>....</b> element is shown in bold letters.
Example:
<p> <b> Write your first paragraph in bold text.</b> </p>
Output:
Example:
<p> <strong>This is an important content</strong> and this is normal content</p>
Output:
<!DOCTYPE html>
<html>
<head>
<title>Formatting elements</title>
</head>
<body>
<h1>Explanation of formatting element</h1>
<p><strong>This is an important content</strong>, and this is normal content</p>
</body>
</html>
Output:
HTML <i>and <em> formatting elements
The HTML <i> element is physical element which display the enclosed content in italic font without any added importance. If you write anything within <i>.....</i> element is shown in italic letters.
Example:
<p><i> Write your first paragraph in italic text.</i></p>
Output:
The HTML <em> tag is a logical element which will display the enclosed content in italic font, with added semantics importance.
Example:
<p><em> This is an important content</em> which displayed in italic font.</p>
Output:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Formatting elements</title>
</head>
<body>
<h1>Explanation of italic formatting element</h1>
<p><em>This is an important content</em>,which displayed in italic font.</p>
</body>
</html>
If you want to mark or highlight a text you should write the content within <mark>......</mark>.
Example:
<h2> I want to put a<mark>Mark</mark>on your face</h2>
Output:
Example:
<p> <u> Write your first paragraph in underlined text.</u> </p>
Output:
Anything written within <strike>-------------------</strike> element is displayed with strike through. It is a thin line which cross the statement.
Example:
<p> <strike>Write your first paragraph with strikethrough</strike> </p>
Output:
If you want that each letter has the same width then you should write the content within <tt> -----</tt> element.
We know that most of the fonts are known as variable -width fonts because different letters have different width. (example 'w' is wider than 'i' ), Monospaced font provides similar space among every letter.
Example:
<p> Hello<tt> Write your first paragraph in monospaced font.</tt> <p>
Output:
If you put the content within <sup>-------------</sup> element is shown in superscript, means it is displayed half a character's height above the other characters..
Example:
<p> Hello<sup> Write your first paragraph in superscript. </sup> </p>
Output:
If you put the content within <sub>--------<sub> element is shown in subscript means it is displayed half a character's height below the other characters.
Example:
<p> Hello<sub>Write your first paragraph in subscript.</sub> </p>
Output:
Anything that puts within <del>---------------</del> is displayed as deleted text.
Example:
<p> Hello<del>Delete your first paragraph. </del> </p>
Output:
Anything that puts within <ins>---------</ins> is displayed as inserted text.
Example:
<p> <del>Delete your first paragraph.</del> <ins>Write another paragraph</ins> </p>
Output:
If you want to put your font size larger than the rest of the text then put the content within <big>----</big> It increase one font size larger than the previous one.
Example:
<p>Hello> <big>Write the paragraph in larger font.</big></p>
Output:
If you want to put your font size smaller than the rest of the text then put the content within <small>---</small> tag. It reduces one font size than the previous one.
Example:
<p>Hello<small>Write the paragraph in smaller font.</small> </p>
Output:
Such as: <p>Hello </p>
Example:
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>This is my first web page</h1>
<h2>How it works?</h2>
<p>It looks nice!!!!!</p>
</body>
</html>
Void element: All the elements in HTML do not require of have start tag and end tag, some elements does not have content and end tag such element s are known a Void elements or empty elements. These elements are also called as unpaired tag. Some Void elements are <br> represent a line break. <hr> represents a horizontal line etc.
Nested HTML Elements: HTML can be nested which means an element can contain another element.
For the default display and styling purpose in HTML all the elements are divided into two categories:Following are the block-level elements in HTML:
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div> style="background-color: lightblue">This is first dev</div>
<div>style="background-color: lightgreen">This is second div</div>
<p> style="background-color: pink">This is a block level element</p>
</body>
</html>
Output:
In the above example we have used tag which defines a section in a web page and takes full width of page.
We have used style attribute which is used to styling the HTML content and the background color are showing that it's a block level element.Inline elements are those element which differentiate the part of a give text and provide it a particular function.
These elements does not start with new line and take width as per requirement.
The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>,<input>, <kbd>, <label>, <map>, <object>, q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> and <var>.
Example:
<!DOCTYP html>
<head>
</head>
<body>
<a href="https://www.shaahnawaz.com/html-tutorial">Click Onlink</a>
<span style="background-color: lightblue">This is inline element</span>
<p> This will take width of text only</p>
</body>
</html>
Output:
Following is the list of the some main elements used in HTML:-
<h1> to <h6> These elements are used to provide the headings of page.
<p> This element is used to display a content in form of paragraph.<div> This element is used to provide a section in webpage.
<br> This element is used to provide a line break(void element)
<hr> This element is used to provide a horizontal line. (void element)
HTML attributes are special words which provide additional information about he elements or attributes are the modifier of the HTML element.
Each element or tag can have attribute which defines the behavior of that element.
Attributes should always be applied with start tag
The Attributes should always be applied with its name and value pair.
The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.
You can add multiple attributes in one html element but need to give space between two attributes.
Syntax:
<element attribute_name="value">content</element>
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is Style attribute</h1>
<p style="height: 40px; color: blue">It will add style property in element</p>
<p style="color: red">It will change the color of content</p>
</body>
</html>
Output:
In the above statement, we have used paragraph tags in which we have applied style attributes. This attribute is used for applying CSS property on any HTML element It provides height to paragraph element of 40px and turns it color to blue.
<p style="color: red">It will change the color of content</p>
In the above statement we have again used style attribute in paragraph tag which turns its color Red.
The title attribute is used as text tooltip in most of the browsers. It display its txt when user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text. In our example we are taking this with paragraph tag and heading tag.
Example:-
with<h1> tag:
<h1 titile="This is heading tag">Example of title attribute</h1>
With <p> tag:
<p title="This is paragraph tag"> Move the cursor over the heading and paragraph and you will see a description as a tooltip</p>
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 title="This is a heading tag">Example of title attribute</h1>
<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
</body>
</html>
The href attribute is the main attribute of <a> anchor tag. This attribute gives the link address which is specified in that link. The href attribute provides the hyperlink and if it is blank the it will remain in same page.
Example:
With link address:
<a href="https://www.shaahnawaz.com/html-anchor"> This is a Link </a>
And without link address:
<a href="#">This is a link</a>
Output:-
The src attribute is one of the important and required attribute of <img> element. It is source for the image which is required to display on bowser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display the image.
Example:
<img src="logo2.png" height="400" width="600">
Output:
Quotes: Single quotes or double quotes:- In this chapter you have seen that we have used attribute with double quotes but some people might use single quotes in html. So use of single quotes with html attributes is also allowed. The following both statements are absolutely fine.
<a href="https://www.shaahnawaz.com">A link to HTML</a>
<a href='https://www.shaahnawaz.com'>A link to HTML</a>
In HTML5 you can also omit use of quotes around attribute values.
<a href=https://www.shaahnawaz.com>A link to HTML</a>
Html document on to the browser can be a tedious task if the given HTML document is not attractive. The styles in HTML are rules for making the web pages more attractive, engaging and presentable.
In inline styling, the properties of CSS are mentioned within the style attribute of the element that needs to be formatted. The style attribute supports multiple properties that are mentioned as "property's name: value";
Example:
Html Tags are like keywords which defines that how web browser will format and display the content. With the help of tags a web browser can distinguish between an html content and a simple content. Html tags contain three main parts- opening tag, content and closing tag. But some Html tags are unclosed tags.
When a web browser reads an html document browser reds it from top to bottom and left to right. HTML tags are used to create html documents and render their properties. Each Html tags have different properties.
An html file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.
All html tags must enclosed within < > these brackets.
every tag in html perform different tasks.
If you have used an open tag <tag> then you must use a close tag </tag> (except some tags)
An html document consist of its basic building blocks which are;
Syntax:
<tag name attribute_name="attr_value"> content</tag name>
Example:-
<!DOCTYPE html>
<html>
<head>
<title>The basic building blocks of html</title>
</head>
<body>
<h2>The building blocks</h2>
<p> This is a paragraph tag</p>
<p style="color: red">The style is attribute of paragraph tag</p>
<span>The element contains tag, attribute and content</span>
</body>
</html>
1. HTML code with Notepad: Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all versions of Windows, from where you easily access it.
Step 1:- Open Notepad:
Step 2:- Write code in html:
Step 3:- save the html file with .html extension.
Step 4:- Open the html page in your web browser.-
To run the html page you need to open the file location where you have saved the file and then either double-click on file or click on open with option;
Step 1 :- Open Sublime Text editor :- To open sublime text editor got start screen-----type sublime text----Open it. To open a new page press CTRL+N.
Step 2 :- Save the page before writing any code:- To save your page in sublime text press Ctrl+S , to save a file use extension html. We recommend to save the file first then write the code because after saving the page sublime text editor will give you suggestions to write code.
Step 3:- Write the code in sublime text editor:
Step 4:- Open the html page in your browser:- To execute or open this page in web browser just right click by mouse on sublime text page and click on open in browser.
Hyper Text: Hypertext simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. Hyper Text is a way to link two or more web pages (HTML documents) with Each other.
Markup Language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated by a web browser. A web page can be identified by entering an UEL A Web page can be of the static or dynamic type. With the help of HTML only, we can crate static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content.
Example:
The major points of HTML are given as below:
In this tutorial, you will get a lot of HTML examples, at least one example for each topic with explanation. You can also edit and run these examples. Learning HTML is fun, and it's very easy to learn.
<!DOCTYPE>
<html>
<head>
<title>Web page tile</title>
</head>
<body>
<h1>Write your first heading</h1>
<p>Write your first paragraph</p>
</body>
</html>
