An Image can be linked to another URL by just wrapping a hyperlink around the image. It makes your images “clickable” so that when a user clicks the image, it opens another URL.
Example:
|
1 |
<a href="http://www.w3school.in"><img src="w3school-logo.jpg" alt="W3school.in" /></a> |
Output:
HTML Text Links are formally know as hyperlinks or link. Link allows visitors to navigate the website from one page to another page.
A link is created using <a href=””> tag known as anchor tag and value of href attribute is the URL or PATH where the link is pointing to.
Syntax:
|
1 |
<a href="HTML Document URL" attr_name="attr_value"...more attributes /> |
This attribute specifies the target url for the linked element. A target can be absolute, relative or root relative URLs.
It specifies where to open the selected link.
It is not always required you to complete URL for every link but we can specify a default URL for all links on the page.This can be achieved by putting base tag in the HTML document’s <head> section.
Example:
|
1 2 3 |
<head> <base url="http://www.w3adda.com"> </head> |
Images plays a very important role in presenting the information.We can also embed the images into the HTML Document, this can be accomplished using <img> tag.
Syntax:
|
1 |
<img src="image URL" alt="some_text" attr_name="attr_value"...more attributes /> |
| Attribute | Value |
|---|---|
| width | This optional attribute specifies the width of the image element. |
| height | This optional attribute specifies the height of the image element. |
| border | This attribute specifies the border around the image. |
| src | This attribute specifies the path to the image. It can be either an absolute path, or a relative path, it is required attribute |
| alt | This attribute specifies the alternative text to be displayed when the browser can’t find or render the image. |
| align | This attribute specifies the horizontal alignment of the image. Example -left, right or center. |
Example:
|
1 |
<img src="w3schoollogo.png" alt="W3school.in" /> |
Output:
HTML Marquee used to set a scrolling (vertically or horizontally) text or image. Using <marquee> tag we can set text/images scroll from right to left, left to right, top to bottom, or bottom to top.
Syntax:
|
1 2 3 4 5 |
<marquee attribute_name="attribute_value"....more attributes> One or more lines or text message or image </marquee> |
| Attribute | Value |
|---|---|
| direction | This attribute specifies the direction of scroll. Example – up, down, left or right. |
| behavior | This attribute specifies the type of scrolling. Example- scroll, slid and alternate. |
| scrolldelay | This attribute specifies the interval between each jump. |
| scrollamount | This attribute specifies the amount of jump. |
| loop | This attribute specifies the number of time text/image will scroll. |
Examples:
|
1 2 3 |
<marquee behavior="scroll" direction="left"> Your scrolling text </marquee> |
Output:
Your scrolling text
HTML <font></font> tags is used to specify the size, color, and face of the text presented on the HTML Document.
Note:- The font tags is deprecated and removed in HTML5.
Here is list of basic attributes for <font></font> tag –
| Attribute | Value | Description |
|---|---|---|
| color | #RRGGBB or #RGB
rgb(rrr%,ggg%,bbb%) or rgb(rrr,ggg,bbb) colorname |
This attribute specifies the color of text |
| face | ont_family | This attribute specifies the font of text |
| size | Number | This attribute specifies the size of text |
Example:
|
1 |
<font face="arial,helvetica" color="red" size="+1">This is example text</font> |
Output:
This is example text
HTML Formatting Tags enable us to organize the HTML Element in manner that enhance the readability of the webpage. Formatting tags allows us to define the proper format or structure for the information to be presented on the webpage. A well organized information is combination of heading, paragraph, listing element, space, line breaks etc.
HTML Heading tags are used to add heading element in a webpage, there are six level available for heading elements.
Example –
|
1 2 3 4 5 6 |
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> |
output:
Paragraph can be created using <p></p> tag on webpage.
Example:
|
1 |
<p>Here is a first paragraph of text.</p> |
Output:
Here is a first paragraph of text.
Sometimes we need a paragraph or text to keep its formatting as it is, this can be achieved using <pre> tag.
Example:
|
1 2 3 4 |
<pre>Line one, Line two, Line three, Line four</pre> |
Output:
|
1 2 3 4 |
Line one, Line two, Line three, Line four |
Text on a webpage can be aligned center using <center> tag.
Example:
|
1 2 3 |
<center style="border:1px solid red;height:50px;"> <p>This paragraph is aligned center.</p> </center> |
Output:
Line break (<BR>) tag is used to insert a break of one line in text or paragraph.
Example –
|
1 |
<p>We are going to insert <br />line break.</p> |
Output:
We are going to insert
line break.
We can add a Horizontal Rule in webpage using <hr> tag.
Example:
|
1 |
We are going to insert horizontal rule... <hr /> ...that was a horizontal rule. |
Output:
We are going to insert horizontal rule…
…that was a horizontal rule.
Some times we need to represent the text in the form of list of items. An unordered list items can be created using <ul> tag.
Example:
|
1 2 3 4 |
<ul> <li>Item 1</li> <li>Item 2</li> </ul> |
Output:
A numbered list of items can be created using <ol> tag.
Example:
|
1 2 3 4 |
<ol> <li>Item 1</li> <li>Item 2</li> </ol> |
Output:
Example:
|
1 2 3 4 5 6 7 8 |
<p>An example of <b>Bold Text</b></p> <p>An example of <em>Emphasized Text</em></p> <p>An example of <strong>Strong Text</strong></p> <p>An example of <i>Italic Text</i></p> <p>An example of <sup>superscripted Text</sup></p> <p>An example of <sub>subscripted Text</sub></p> <p>An example of <del>struckthrough Text</del></p> <p>An example of <code>Computer Code Text</code></p> |
Output:
An example of Bold Text
An example of Emphasized Text
An example of Strong Text
An example of Italic Text
An example of superscripted Text
An example of subscripted Text
An example of struckthrough Text
An example of Computer Code Text
HTML Elements can have an optional list of modifiers added to the tag. This modifiers are known as HTML attributes, they defines the characteristics of the HTML Elements on which they are applied.
Whenever HTML Elements is rendered by browser, the attributes gives the more information about the appearance and the behavior the HTML Elements.
Attributes made of a name and a value pair separated by the equals (=) sign.
Syntax:
|
1 |
<tagname attribute-name="attribute-value">content</tagname> |
| Attribute | Attribute Values | Description |
| align | right, left, center | This attribute specifie the horizontal alignment of an HTML element. |
| valign | top, middle, bottom | This attribute specifie the vertical alignment of an HTML element. |
| bgcolor | numeric, hexidecimal, RGB values | This attribute specifie background color for an HTML Element |
| background | URL | This attribute specifie background image for an HTML Element |
| id | User Defined | This attribute used to specify the unique identifier for the HTML Element. |
| class | User Defined | This attribute specifies the CSS Class for the HTML Elemetns. |
| width | Numeric Value | This attribute specifies the width of HTML Elemetns like tables, images, or table cells. |
| height | Numeric Value | This attribute specifies the height of HTML Elemetns like tables, images, or table cells. |
| title | User Defined | This attribute specifies title of HTML Elements. |
Meta Tag is a singular HTML Tag placed inside the head section, used to provide information about the document such as the author, keywords or relationships to other documents, all this details is represented using <META> tag’s attribute. All the meta information provided in this section is used by search engines to find and rank the page.
This meta tag is used to set the keywords for the web page. Used to by search engines to find the most relevant search item.
|
1 |
<meta name="keywords" content="w3school, w3school html meta tags" /> |
This meta tag is used to provide the description of the web page, giving an appropriate description of the page helps better search engine indexing for relevant search item.
|
1 |
<meta name="description" content="Learn web development from best resource." /> |
This META Tag helps to specify the author name for a web page.
|
1 |
<meta name="author" content="Beth Anderson" /> |
HTML document can be set to refresh after a defined set of interval using META Tag.
|
1 |
<meta http-equiv="refresh" content="10" /> |
HTML document can also be redirected to another web page using META Tag, we can also set interval for the redirection action.
|
1 |
<meta http-equiv="refresh" content="20; url=http://www.w3adda.com" /> |
|
1 2 3 4 5 6 7 8 |
<HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> This is where the page content comes. </BODY> </HTML> |
As we can see a basic web page can be created with the following tags –
| Tag | Description |
|---|---|
| <html>…</html> | All HTML documents should begin with <HTML> and end with </HTML> tags. The <HTML> element indicates to the browser that this is an HTML document. |
| <head>…</head> | This section provides the information about the document, such as the title, author, keywords or relationships to other documents, all this details is placed inside <HEAD>…</HEAD> element.The beginning of the head section is marked by the <HEAD> tag, and the end of the head section with the </HEAD> tag.Elements that go in the head part are advanced stuff used by search engines. |
| <head>…</head> | This section provides the information about the document, such as the title, author, keywords or relationships to other documents, all this details is placed inside <HEAD>…</HEAD> element.The beginning of the head section is marked by the <HEAD> tag, and the end of the head section with the </HEAD> tag.Elements that go in the head part are advanced stuff used by search engines. |
| <title>…</title> | Title tag is used to represent the title of the web page. Page title appears at the very top of your browser’s window when you view the page.No other HTML Elements placed between this tag.The beginning of the title is marked by the <TITLE> tag, and the end with the </TITLE> tag.Titles should be short, descriptive, and limited. |
| <body>…</body> | The Body section contains all the HTML Elements that is supposed to be presented on the web page. Everything between those two tags will be visible on your page.The beginning of the body section is marked by the <BODY> tag, and the end of the body section with the </BODY> tag |
Hypertext – It defines the the way webpages are linked together and you can move around webpages using a special text which linked to other webpage is known as Hyperlinks.
Markup Language – HTML is a language used to markup the plain text using various Markup Tags.
HTML is a easy to use and understandable scripting language used to develop website. First invented in year 1990 with the sole purpose of presenting information on internet. HTML defines the logical organization and formatting of the HTML Entities or content on document.HTML documents are also known as Web Pages, what we see when we view a web page on the browser is the interpretation of HTML.
Hyper Text Markup Language is a set of special short codes formally know as HTML Markup Tags which can be embedded in text to add formatting and linking of information.
Note:- HTML documents are just text files with the “.html” extension.
HTML Files can be created with the any simple text-editor program like notepad. Some popular HTML editors are FrontPage and Dreamweaver.
Example – Basic HTML page structure
|
1 2 3 4 5 6 7 8 |
<HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> This is where the page content comes. </BODY> </HTML> |
HTML Document is just a text file which contains the series of markup tags, this text files is saved as HTML file with an “.html” extension. This HTML document is viewed using web browser like Internet Explorer, Mozilla Firefox etc. Web Browser reads this html files and interprate them into visible form by rendering it on the screen. HTML document can contain the Rich Text Media like text, powerfull graphics ,audio and videos etc.