Getting Started with HTML

Getting Started with HTML

In the present day scenario, the Internet is one of the most popular medium to accomplish various tasks, such as accessing information, communicating through emails, socializing with the help of networking sites, shopping, or booking online tickets. There are several popular websites that help us accomplish the preceding tasks. These websites consist of one or more related Web pages. These Web pages could be either static or dynamic. One of the most popular languages for designing a Web page is HyperText Markup Language (HTML). This chapter introduces you to HTML and discusses how to create an HTML Web page.

Objectives

In this chapter, you will learn to:

  • Introduce HTML
  • Create an HTML Web page

Introducing HTML

HTML is a markup language that enables you to create attractive and interactive websites. A markup language
provides a way to describe the structure of a Web page, specifying how text or graphics are displayed on the Web page. It enables you to present the text in a readable format. For example, on the front page of the newspapers, certain news headings are bigger than the others. The news headings are followed by the details of the news stories in paragraphs, sometimes pointing to a different page. If the details are on a different page, a page number is specified along with the story or the heading. This page number is similar to the markup text. The following figure shows how text is presented in different styles in a newspaper.

 

The Text Displayed in Different Styles in a Newspaper

The Text Displayed in Different Styles in a Newspaper

The way text is presented in a newspaper is similar to the way the markup language defines, processes, and presents the content. The markup language specifies the code for defining, processing, and presenting the text on Web pages. These codes are called tags. Web pages are either static or dynamic. The static Web pages are delivered to the users exactly as these are stored. The content of these Web pages is not updated
dynamically. In contrast, in dynamic Web pages, the content is rendered at the time of request. The user gets the latest and most recently-updated information in case of dynamic Web pages. For example, while surfing any website on the Internet, you must have seen the Contact Us page that shows how to reach or contact the various offices of an organization. The content of this page is delivered to the users without any change. This is known as a static Web page. Now, consider an example of a dynamic Web page. If you want to access your Gmail account, you need to enter your credentials. Depending on whether the credentials are correct or not, the corresponding page is displayed. For example, if your credentials are valid, your inbox page is displayed. If your credentials are not valid, a page displaying a message that the credentials provided are incorrect appears to you. This is a dynamic behavior of a Web page. These Web pages or websites can be accessed through the
Internet. Among all technologies, the Internet has been the fastest growing technology. With the Internet,
organizations find a medium through which they could reach a larger range of people irrespective of their
geographical locations. The Internet enables organizations to share and access information on the Internet and corporate Intranet. This information can be accessed anywhere, anytime. This information is stored in a
storehouse called World Wide Web (WWW). The information can be accessed by using Web pages. The Internet is an interconnected network of computers across the globe. Today, it has proliferated into every sphere of life, such as schools, banks, and hospitals. It helps in performing various activities, such as booking tickets for travelling and movies, listening to music, watching movies, playing games,and  searching information. Over the years, the Internet has grown tremendously and is helping in the following areas:

  • Access to information: The Internet provides access to information on various topics, such as sports, news, and education.
  • Communication: The Internet enables easy and rapid communication across the world through a number of services, such as emails, chats, and social networks.
  • Data transfer: The Internet helps in transferring a large amount of data, such as files and images.
  • Electronic-commerce (e-commerce): The Internet is also used as a medium of trade by buyers and sellers, increasing their reach and reducing time and geographical gaps. This is known as e-commerce, which is defined as the process of buying and selling of goods and services electronically.

The Web or WWW is a collection of resources on varied topics that can be accessed through the Internet. These resources are stored in the form of Web pages and may contain text, graphics, audio, and video content.
WWW is a collection of Web pages that are scattered but interlinked. This interconnection among Web pages of a website is achieved by using a hyperlink. A hyperlink is the highlighted or underlined text on a Web page that contains the address of the linked Web page. When you click on a hyperlink, a Web page is opened, which the hyperlink is pointing to. Moving from one Web page to the other by using hyperlinks is called navigation.
Each website and every Web page has a unique address on the Internet. This address is known as the Uniform
Resource Locator (URL). To view a website, an application known as a Web browser is required. It lets the
users specify the URL of the website to be viewed. This URL is entered in the address bar of the browser. If the
URL does not point to any particular Web page, the browser opens the Home page of the website. The Home
page of a website is the first page that contains links for all the other pages of the website.

Creating an HTML Web Page

HTML is a versatile markup language that can be used on different Web browsers to publish information as a Web page. HTML provides tags that help in creating Web pages. The look and feel of these pages can further be enhanced by inserting graphics and specifying content in different font style, color, and size. This enhances the visual appeal of the Web page. HTML also allows the creation of hyperlinks to connect the different Web pages or sections of a single Web page. Consider the following code snippet for a basic HTML document:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Home Page of Book Your Hotel
</TITLE>
</HEAD>
<BODY>
Book your favorite hotel.
</BODY>
</HTML>
The browser interprets the HTML tags to display the Web page. A Web page is viewed by using an application
known as a Web browser. Most commonly-used Web browsers are Microsoft Internet Explorer and Google
Chrome.
The output of the preceding code snippet is displayed in the browser, as shown in the following figure.

Getting Started with HTML

The Output Displayed in the Browser

Web pages are created by using software applications known as editors. HTML editors are broadly classified
into the following categories:

  • Text editor
  • Graphic editor

Text Editor

A text editor is an application in which the HTML code is written for creating a Web page. Notepad and EditPlus are examples of text editor applications. After writing the  HTML code in the text editor, the user needs to save the file with the .htm or .html extension. The HTML code written in Notepad is displayed, as shown in the following figure.

Getting Started with HTML

The HTML Code Written in Notepad

There are advanced text editors, such as EditPlus, which provide several functionalities, such as format check, line numbers, and color coding. These functionalities make writing the HTML code easier as compared to simple HTML editors, such as Notepad. Moreover, the HTML code written in advanced HTML editors has better readability as the tags, text, and attributes are displayed in different colors. In addition, the lines of code are numbered, which further enhances readability. The HTML code written in EditPlus is displayed, as shown in the following figure.

 

The HTML Code Written in EditPlus

The HTML Code Written in EditPlus

 

Graphic Editor

Graphic editors enable a programmer to embed an HTML element into a Web page by using the drag-and-drop functionality, instead of writing the entire HTML code. This implies that it allows programmers to add an element to a Web page by simply clicking or double-clicking  the corresponding icon in the toolbox. One of the extensivelyused graphic editors is Dreamweaver.

Dreamweaver is a What You See Is What You Get (WYSIWYG) editor for creating Web pages. It is

developed by Adobe to provide an intuitive visual interface for creating Web pages.

Identifying the Basic Structure of an HTML Page

An HTML document is created by using various tags, such as <!DOCTYPE HTML>, <HTML>, <HEAD>, and <BODY> and their attributes. Tags are special markup codes enclosed in angular brackets that define the structure of an HTML document. Some of the HTML tags, such as <HEAD> and <BODY>, are called structural tags as they create the structure of a document and do not affect the appearance of the Web page. Every tag has some attributes associated with it. These attributes modify the appearance or enhance the functionality of the tag and are provided as name-value pairs.

An HTML page contains the following structural tags:

  • <!DOCTYPE HTML>
  • <HTML>
  • <HEAD>
  • <BODY>

<!DOCTYPE HTML>

The <!DOCTYPE> tag provides an instruction to the browser about the version of HTML. It should be the first tag in an HTML document. It does not have any end tag, as shown in the following code snippet: <!DOCTYPE HTML>

<HTML>

The <HTML> tag specifies to the browser that a document is an HTML document. The opening HTML tag, <HTML>, and the closing HTML tag, </HTML>, mark the beginning and end of a Web page. The <HTML> tag is a container tag

that encloses the entire content of the Web page. The following code snippet is used to specify the <HTML> tag:

<HTML>

……content of the Web page……

</HTML>

<HEAD>

The <HEAD> tag is contained within the <HTML> and </HTML> tags. It is used to describe the header of the HTML document. The header is the first section of an HTML

document where the global settings for the document, such as the Web page title, file format, and the last modified date, can be defined.

The following code snippet is used to specify the <HEAD> tag:

<HEAD>

…header content

</HEAD>

<BODY>

The <BODY> tag sets the boundary for the content in the HTML document. When the Web page is displayed in a browser, users can see the content enclosed within the opening <BODY> and closing </BODY> tags. The HTML content that can be placed within the <BODY> tag includes text and graphics to be displayed on the Web page. The following code snippet is used to specify the <BODY>

tag:

<BODY>

…content

</BODY>

Exploring the <HEAD> Tag

The head section contains the <HEAD> tag along with

 some other complex tags. The following tags are used in

 the <HEAD> section of an HTML document:

<TITLE>

<META>

<BASE>

<STYLE>

<LINK>

<SCRIPT>

<NOSCRIPT>

<TITLE>

The <TITLE> tag defines the title of the document that appears in the title bar of the browser window. In addition, this title:

  • Displays a title for the page to be used in the search-engine results.
  • Provides a title for the page that will be added to favorites.

An HTML document can have only one title. If a title is not provided, most Web browsers display the name of the HTML document as the default title of the Web page. Consider the following code snippet for defining the

<TITLE> tag:

<HEAD>

<TITLE> Book Your Hotel</TITLE>

</HEAD>

The output of the preceding code snippet is displayed, as shown in the following figure.

<META>

Consider a situation where you need to specify some keywords for your website so that they can be easily searched by search engines. To implement such functionality, you can use the <META> tag. The <META> tag provides additional information about the current document in the form of name and value pairs, such as the expiry date, author name, and list of keywords. Consider the following code snippet for defining the <META> tag:

<HEAD>

<TITLE>Book Your Hotel</TITLE>

<META name=”description” content=”This website provides you the benefit of booking rooms in the best hotels of US”>

<META name=”keywords” content=”hotel, online, booking “>

<META name=”author” content=”Harry Anem”>

<META http-equiv=”refresh” content=”30″>

</HEAD>

<BODY>

</BODY>

In the preceding code snippet, the <META> tag has been used with the attributes, name, content, and httpequiv.

The name attribute specifies the name of the metadata. The content attribute is used to give the value

associated with the http-equiv or name attribute. The following list describes the usage of the values that are assigned to the name attribute in the preceding code:

author: Specifies the name of the author who has created the document.

description: Specifies a short summary of the content of the Web page.

keywords: Specifies the keywords used in the Web page. The description and keywords attributes are useful for the search engines to list the reference to your website when relevant keywords are entered by a user for searching.

The names of the author, summary of the contents, or the keywords used in the Web page are actually specified by using the content attribute of the <META> tag. Similarly, the http-equiv attribute gets the information used to bind the value provided in the content attribute to an HTTP response header. The value, refresh, of the http-equiv attribute specifies that the page needs to be refreshed, but the time interval for the page to refresh itself is specified by using the content attribute.

Therefore, the document will be refreshed after every 30 seconds as 30 has been set as the value to the content attribute.

<BASE>

The <BASE> tag specifies a base URL or address for all the related links on a page. For example, all the images that are to be used in a website during its construction and hosting are located in a particular directory. To access these images, you can specify the absolute path of the

directory by using the href attribute of the <BASE> tag. Thereafter, you can refer to any image in the body section of the Web page simply by specifying the image name.

You can create one <BASE> tag in a document. Consider the following code snippet for defining the

<BASE> tag:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> The BASE tag Example</TITLE>

<BASE href=”d:/Images/”>

</HEAD>

<BODY>

<IMG src=”img1.jpg”>

<BR>

Best Hotels

</BODY>

</HTML>

<STYLE>

The content of a Web page is rendered without colors and styles in the browser. This makes it non appealing to the viewers. To render the content of the Web page aesthetically and to make it attractive, you need to stylize the text. For this, you can use the <STYLE> tag. The <STYLE> tag defines the style information associated with the HTML document. Using this element, you can

specify the way the HTML elements should render in a browser. The <STYLE> tag provides various attributes, which are listed in the following table.

Getting Started with HTML

Consider the following code snippet for defining the

<STYLE> tag:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<STYLE type=”text/css”>

h1 {color:red;}

p {font-style:italic;}

</STYLE>

</HEAD>

<BODY>

<H1>BookYourHotel</H1>

<P>It provides online hotel booking facility.</P>

</BODY>

</HTML>

In the preceding code snippet, the <STYLE> tag specifies that the heading is displayed in red color and the paragraphs in italic. When the browser comes across relevant tags in the body section, it applies the style associated with it while rendering the Web page. The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <STYLE> Tag

<LINK>

Consider a situation where you need to apply styles on your HTML content. For this, you have  created style sheets. A style sheet contains the styles that need to be applied on the HTML elements to enhance their look and feel. Now, you need to link this style sheet to your HTML document to which you want to apply styles. For this, you can use the <LINK> tag.

The <LINK> tag is used to establish the relationship of the current document with other documents in a website. It can also be used to specify the external resources, such as style sheets used in the current document. It does not have any visual appearance or effects associated with it. For example, the following code snippet can be used to link the style sheet named StyleHome.css with an HTML

file named home.html:

<LINK href=”StyleHome.css”rel=”stylesheet”/>

In the preceding code snippet, the rel attribute is used to establish a link from the current document to the external document, StyleHome.css. The href attribute specifies the name or the URL of the linked document. In addition to the rel and href attributes, the <LINK> tag provides various other attributes. The following table describes the attributes of the <LINK> tag.

Getting Started with HTML

The Attributes of the <LINK> Tag

<SCRIPT>

The <SCRIPT> tag specifies the client-side script, such as JavaScript, associated with the document. A script is a block of code used to add interactivity to Web pages. This tag contains various attributes that help you add scripts in a Web page. The following table describes the attributes of the <SCRIPT> tag.

Getting Started with HTML

The Attributes of the <SCRIPT> Tag

Consider the following code snippet for defining the

<SCRIPT> tag:

<!DOCTYPE HTML>

<HTML>

<BODY>

<SCRIPT type=”text/javascript”>

var name=prompt(“Please Enter Your

Name”,”John”);

alert(name);

</SCRIPT>

</BODY>

</HTML>

The preceding code snippet prompts users to enter their name by using the prompt() function and displays this name in a message box by using the alert() function. The prompt() function contains two parameters.the first parameter, Please Enter Your Name, asks the users to provide their name and the second parameter specifies John as the default name, as shown in the following

figure.

Getting Started with HTML

The Prompt

The alert() function in the preceding code snippet displays the message,Welcome John, when the OK

button in the prompt is clicked, as shown in the following figure.

Getting Started with HTML

The JavaScript Alert

<NOSCRIPT>

The <NOSCRIPT> tag displays an alternate content on the browsers on which the scripts have been disabled or on the browsers that do not support client-side scripting. Consider the following code snippet for defining the

<NOSCRIPT> tag:

<!DOCTYPE HTML>

<HTML>

<BODY>

<SCRIPT type=”text/javascript”>

document.write(“Welcome to

BookYourHotel website!”)

</SCRIPT>

<NOSCRIPT> Your browser does not

support scripts </NOSCRIPT>

</BODY>

</HTML>

In the preceding code snippet, the <NOSCRIPT> tag displays the text, Your browser does not support scripts, if the scripts are not supported by the browser.

Exploring the <BODY>Tag

The body section is the central part of the HTML document required to display content on the Web page. The body section begins with the <BODY> tag. It contains the actual visible content of an HTML document. You can enhance the body of the Web page by defining headings, images, and videos.

The body section is the central part of the HTML

document required to display content on the Web page.

The body section begins with the <BODY> tag. It contains

the actual visible content of an HTML document. You can

enhance the body of the Web page by defining headings,

images, and videos.

Applying Headings

With HTML, you can also define headings for a Web page. HTML allows six levels of headings, ranging from <H1> to <H6>. The <H1> tag is used to define the topmost heading, whereas the <H6> tag is used to define the lowest-level heading. The heading size indicates the heading level with <H1> being the biggest and <H6> being the smallest. Headings are used to specify the main idea of the content that follows it on the Web page. Consider the following code for specifying heading on the

BookYourHotel.com website:

<!DOCTYPE HTML>

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1> BookYourHotel </H1>

<H2>Rating of the Hotels</H2>

<H6>Local Sight Seeing</H6>

</BODY>

</HTML>

In the preceding code, different heading tags are used for specifying different level headings. The output of the preceding code is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the Heading Tags

Adding Paragraphs

You can use the following tags to add new paragraphs in an HTML document:

  • <P>
  • <DETAILS>
  • <SUMMARY>

<P>

The <P> tag adds a new paragraph in the HTML document. It specifies that there is a break in the content to begin a new paragraph. The <P> tag is a container tag. Browsers automatically add one line space before and after the content specified within this tag. Consider the following code snippet for defining the <P> tag:

<BODY>

<P> Welcome to BookYourHotel site. </P>

<P> Leave the Nitty Gritty of hotel booking on us. </P>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <P> Tag

<DETAILS>

The <DETAILS> tag specifies the additional content that a user can view or hide as per requirement. It makes an interactive widget on a website that a user can open and close. The <DETAILS> tag provides the open attribute. By default, this attribute expands the content present in the <DETAILS> tag.

Consider the following code snippet for defining the <DETAILS> tag:

<BODY>

<DETAILS>

<P>We provide standard rooms, triple or family rooms, deluxe rooms, and suite</P>

</DETAILS>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <DETAILS> Tag

<SUMMARY>

The <SUMMARY> tag specifies a heading for the <DETAILS> tag. Users can click this heading to view or hide the details. It should be the first child element of the <DETAILS> tag. Consider the following code snippet for defining the <SUMMARY> tag:

<BODY>

<DETAILS>

<SUMMARY>Categories of Rooms:</SUMMARY>

<P>We provide standard rooms, triple or family rooms, deluxe rooms, and suite</P>

</DETAILS>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <SUMMARY> Tag

Defining a Layout

The layout of a Web page specifies how various elements or content should be displayed on the Web page. You need to define a layout of a Web page properly so that the Web page appears appealing to users. To define a layout, you can use the following tags:

  • <DIV>
  • <SPAN>

<DIV>

The <DIV> tag is used to define a section in a document. It is used to group large sections as blocks and apply different styles on these blocks. For example, you can group headings in one <DIV> tag and paragraph content in another <DIV> tag and apply different layout styles on them. This makes the Web page look more structured and attractive.

<SPAN>

The <SPAN> tag enables you to group and apply styles to inline elements. The <SPAN> tag is dependent on the style attribute for applying styles on the text that is enclosed inside it. style is a global attribute that specifies an inline style for an element. Consider the following code snippet that defines the <SPAN> tag:

<BODY>

<P>The demo of <spanstyle=”color:blue;fontweight:bold”>span</SPAN> tag.</P>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <SPAN> Tag

Formatting a Web Page

The content on a Web page needs to be attractive. You can enhance the appearance of the content of the Web page by using formatting tags. The following formatting tags are used to format the content in an HTML document:

  • <B>
  • <I>
  • <U>
  • <LI>
  • <BR>
  • <HR>

<B>

The <B> tag is used to make the text boldface. Consider the following code snippet for defining the <B> tag:

<BODY>

<P><B> Hotel booking from the comfort of your home.</B></P>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <B> Tag

<I>

The <I> tag is used to italicize the text. The <I> tag is a container tag. Consider the following code snippet for defining the <I> tag:

<BODY>

<P><I> Hotel booking from the comfort of your home.</I></P>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <I> Tag

<U>

The <U> tag is used to underline the text. The <U> tag is a container tag. Consider the following code snippet for defining the <U> tag:

<BODY>

<P><U> Hotel booking from the comfort of your home.</U></P>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <U> Tag

<LI>

The <LI> tag is used to create lists. In HTML, lists are represented with the help of a special set of tags. These special tags have attributes that help in manipulating the appearance of the lists displayed on the Web pages. These tags may be nested, which means that one set of tags can be embedded within another set of tags. The following types of lists are used in HTML:

  • Ordered or numbered list
  • Unordered or bulleted list
  • Definition list

Ordered or Numbered List

An ordered list or a numbered list represents a set of items in a sequence or an order. The tag for the ordered list is <OL>. The <OL> tag contains individual list items represented by the <LI> tag. By default, all the <LI> tags within the <OL> and </OL> tags are separated by a

line break. Both, <OL> and <LI>, are container tags. Consider the following code snippet for defining the

<OL> tag:

<BODY>

<P>Our ranking in the hotel and hospitality industry</P> <OL>

<LI>Ranked 1st among all the hotels in providing best hospitality</LI>

<LI>Ranked 2nd in terms of infrastructure</LI>

<LI>Ranked 3rd in terms of number of

food items we provide</LI>

</OL>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

An Ordered List

The <OL> tag provides various attributes that are used to mark a list. These tags are described in the following table.

Getting Started with HTML

The Attributes of the <OL> Tag

Unordered or Bulleted List

An unordered or bulleted list represents a set of related items that do not need to follow a specific order. The tags used to represent the unordered list are <UL> and </UL>. The <UL> tag contains individual list items, which are represented by the <LI> tag. Consider the following code snippet for defining the <UL> tag:

<BODY>

<P>Category of Rooms:</P>

<UL>

<LI>Standard Room</LI>

<LI>Deluxe Room</LI>

<LI>Super Deluxe Room</LI>

</UL>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

An Unordered List

Definition List

A definition list is used when one or more terms and their definitions are to be included in an HTML document. The definition list is represented by the <DL> tag. This container tag comprises two other tags, <DT> and <DD>, where DT stands for Data Term and DD stands for Data Definition. The data term text is displayed on the left and the data definition term is displayed slightly right to it.

There is a paragraph indent after the data term. Theopening list tag is the <DL> tag followed by the first dataterm, <DT>.

Consider the following code snippet for defining the <DL> tag:

<BODY>

<DL>

<DT>Term1</DT> <DD>This is the

definition of the first term.</DD>

<DT>Term2</DT> <DD>This is the

definition of the second term.</DD>

</DL>

</BODY>

The preceding code snippet displays two terms and their definition on a Web page. The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <DL> Tag

<BR>

The <BR> tag is used to insert a single line break. It is an empty tag, which means that it has no end tag. Consider the following code for defining the <BR> tag in HTML:

<BODY>

Welcome to the Website of<BR> BookYour Hotel

</BODY>

The output of the preceding code is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <BR> Tag

<HR>

The <HR> tag adds a horizontal rule in a Web page. A rule is a straight line. The <HR> tag is an empty tag. Consider the following code snippet for defining the <HR> tag:

<BODY>

<P> Welcome to “Book Your Hotel”website.

<HR>

<BR> This site is very user friendly.

<BR> This site gives information of all the hotels in USA.

</P>

<P> You can book your hotel while

sitting at home. </P>

</BODY>

The output of the preceding code is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <HR> Tag

Adding Images

Images add an artistic value to a Web page. They make the Web page more interesting as ideas are well communicated with images and graphics. Adding images to a website helps enhance its visual

appeal. Also, the human brain has a tendency to recollect facts faster through visual aids, such as graphics, as compared to the use of text. The three extensively-used image formats on the Web are:


GIF: The Graphic Interchange Format (GIF) format is the most commonly-used image format

on the Web. It is used if the image involves drawing lines, such as images having polygonal

shapes. It is considered superior to other formats for its clarity and ability to maintain the

originality of an image without lowering its quality.

JPEG: The Joint Photographic Experts Group (JPEG) format is used when the image is a

photograph, medical image, or complex photographic illustration. JPEG images are inherently full-color images. Therefore, they appear distorted when viewed on a monitor supporting 256 colors or less.

PNG: The Portable Network Graphics (PNG) format is an alternative to GIF. The PNG format

defines a portable, well-compressed, and wellspecified standard for bitmapped image files that

retain their high resolution.

You can use the <IMG> tag to insert images in a website. The <IMG> tag is used to place static as well as animated images on a Web page. You need to use the src attribute inside the <IMG> tag to specify the URL of the image that you want to insert in the Web page. Consider the following

code snippet for defining the <IMG> tag:

<BODY>

<IMG src=”Room.jpg”>

</BODY>

The preceding code snippet displays the Room.jpg image by using the src attribute of the <IMG> tag. This image is stored in the same folder where the Web page in which you want to display the image is stored. However, if the image is stored at some other location, you need to specify the whole path of the image in the src attribute. The output of the preceding code snippet is displayed, as

shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <IMG> Tag

While inserting images in a Web page, you can also specify their height, width, and alternative text. This can be done by using the following attributes:

alt: The alt attribute is used to specify an alternate text for an image. This text is displayed if the image cannot be displayed in a browser. The value of the alt attribute is a user-defined text. Consider the following code snippet for defining the alt attribute:

<IMG src=”Room.jpg”alt=”DeluxeRoom”>

In the preceding code snippet, the image named Room.jpg is displayed on the Web page. If the browser does not support images, the alternate text, DeluxeRoom, will be displayed on the Web

Page.

height and width: The height and width attributes specify the size in which the image

should be displayed. These attribute values are, by default, specified in pixels. Consider the

following code snippet for setting the height and width in the <IMG> tag:

<IMG src= “Room.jpg” alt=”DeluxeRoom Hotel” width=”304″height=”228″>

In the preceding code snippet, the height and width of an image has been set to 228 and 304

pixels, respectively.

Adding Navigation Links

A website consists of interlinked Web pages. To view all the Web pages in the website, you need to navigate through the Web pages. An easy way of navigating is using hyperlinks. A hyperlink provides links to Web pages, images, multimedia files, and documents created by using applications, such as Acrobat Reader and MS Word. If the website has a poor navigational aspect, the user will move away from it. The navigation between the Web pages is important. Therefore, the Web pages should be linked logically. This can be achieved by creating a hyperlink between the Web pages by using the <A> tag. The <A> tag, which is known as an anchor tag, defines a hyperlink

that links one page to another. The attributes of the <A>

tag are:


href: The href attribute specifies the URL of the document that opens on clicking the

hyperlink. Consider the following code snippet for defining the <A> tag along with its href

attribute:

Log on to the <A href=”homepage.html”> BookYourHotel </A> site to get your favorite hotel booked.In the preceding code snippet, clicking the hyperlink, BookYourHotel, navigates the user

to homepage.html.


target: Browser windows can have names associated with them. A hyperlink in one browser

window can refer to another window by using the target attribute of the <A> tag. When the link

is activated, the referenced HTML document is displayed in the window specified by the

target attribute. If the window is not open, the Web browser opens a new window. The target

attribute is used to open the HTML document in a specified frame or window. Consider the

following code snippet for defining the target attribute in the <A> tag:

<A href= “Aboutus.html” target=”Frame1″>About Us</A>

In the preceding code snippet, the Aboutus.html document is opened in a window named Frame1 when a user clicks the hyperlink, About Us.

Adding Multimedia Components

Nowadays, the use of multimedia elements, such as audio and video, is common on the websites. Adding multimedia elements help you embed sound in the website and improve visual effect of the website, which, in turn, grabs the attention of the viewers. You can add multimedia elements in a Web page by using the following tags:

1.<AUDIO>

2.<VIDEO>

1.<AUDIO>

The <AUDIO> tag is used to include an audio file in a Web page. It provides various attributes to help you play an audio.The attributes of the <AUDIO> tag are described in the following table.

Getting Started with HTML

The Attributes of the <AUDIO> Tag

Consider the following code snippet for defining the <AUDIO> tag:

<AUDIO controls=”controls”src=”Audio1.mp3″>

Your browser does not support this audio format.

</AUDIO>

In the preceding code snippet, the <AUDIO> tag is used to display the audio file, Audio1.mp3, on the Web page. The content inside the <AUDIO> and </AUDIO> tags is displayed when the browser does not support the audio format.

2.<VIDEO>

The <VIDEO> tag is used to display a video file on a Web page. It provides various attributes to help you play a video.

The attributes of the <VIDEO> tag are described in the following table.

The Attributes of the <VIDEO> Tag

Consider the following code snippet for defining the

<VIDEO> tag:<VIDEO width=”320″ height=”240″controls=”controls”autoplay=”autoplay”src=”D:\HTML\Video1.mp4″>

Your browser does not support this

audio format.

</VIDEO>

In the preceding code snippet, the <VIDEO> tag is used to display the video file, Video1.mp4, on the Web page. The content inside the <VIDEO> and </VIDEO> tags is displayed when the browser does not support the video format.

Measuring Data and Displaying a Progress Bar

Consider a scenario where you need to enable a user to download files, such as images, from a website. In addition, you want that while saving the file, the user is able to view the disk space that is left. Moreover, you require that while saving the file, the user is able to know the level of the task that has been completed. In other words, the progress of the task should be displayed to the user. These tasks can be done by using the following tags:

1.<METER>

2.<PROGRESS>

<METER>

The <METER> tag specifies a scalar measurement within a known range. It is also known as gauge. It can be used to display disk usage. It provides various attributes to help you measure data. The attributes of the <METER> tag are described in the following table.

Getting Started with HTML

The Attributes of the <AUDIO> Tag

Consider the following code snippet for defining the

<AUDIO> tag:<AUDIO controls=”controls”src=”Audio1.mp3″>

Your browser does not support this audio format.

</AUDIO>

In the preceding code snippet, the <AUDIO> tag is used to display the audio file, Audio1.mp3, on the Web page. The content inside the <AUDIO> and </AUDIO> tags is displayed when the browser does not support the audio format.

<VIDEO>

The <VIDEO> tag is used to display a video file on a Web page. It provides various attributes to help you play a video.

The attributes of the <VIDEO> tag are described in the following table.

Getting Started with HTML

The Attributes of the <VIDEO> Tag

Consider the following code snippet for defining the<VIDEO> tag:

<VIDEO width=”320″ height=”240″controls=”controls”autoplay=”autoplay” src=”D:\HTML

\Video1.mp4″>

Your browser does not support this audio format.

</VIDEO>

In the preceding code snippet, the <VIDEO> tag is used to display the video file, Video1.mp4, on the Web page. The content inside the <VIDEO> and </VIDEO> tags is displayed when the browser does not support the video format.

Measuring Data and Displaying a Progress Bar

Consider a scenario where you need to enable a user to download files, such as images, from a website. In addition, you want that while saving the file, the user is able to view the disk space that is left. Moreover, you require that while saving the file, the user is able to know the level of the task that has been completed. In other words, the progress of the task should be displayed to the

user. These tasks can be done by using the following tags:

1.<METER>

2.<PROGRESS>

<METER>

The <METER> tag specifies a scalar measurement within a known range. It is also known as gauge. It can be used to display disk usage. It provides various attributes to help you measure data. The attributes of the <METER> tag are described in the following table.

Getting Started with HTML

The Attributes of the <METER> Tag

Consider the following code snippet for defining the <METER> tag:

<P>Display a meter:</P> <METER value=”4″ min=”0″ max=”10″></METER>

The preceding code snippet displays a meter specifying that 4 out of 10 tasks have been done as the current value has been specified as 4 and the maximum value as 10. The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

A Meter Being Displayed

<PROGRESS>

The <PROGRESS> tag is used to display the progress of a task. It provides the following attributes to display the progress bar:

max: Specifies the amount of work a task requires.

value: Specifies the amount of task that has been completed.

Consider the following code snippet for defining the

<PROGRESS> tag:

Progress of a task:<PROGRESS value=”12″ max=”100″></PROGRESS>

The preceding code snippet displays a progress bar specifying that 12% of the task has been done, as shown in the following figure.

Getting Started with HTML

The Progress Bar Being Displayed

Identifying Semantic Tags

Semantic tags are used to provide better readability of Web pages to Web designers. They clearly define their meaning to the browser. The semantic tags provided by HTML are:

1.<HGROUP>

2.<ARTICLE>

3.<ASIDE>

4.<HEADER>

5.<FOOTER>

6.<NAV>

7.<FIGURE>

<HGROUP>

Consider a situation where you need to group related headings and sub titles together. For example, you need to show the heading and sub heading, Book Your Hotel and Rating of the Hotels, together. In such a situation, you can use the <HGROUP> tag. This tag allows you to group different levels of headings. This tag helps you associate secondary titles, such as subheadings, alternative titles,

and tag lines, with the main heading.

Consider the following code snippet for defining the

<HGROUP> tag:

<BODY>

<HGROUP>

<H1> BookYourHotel </H1>

<H2>Rating of the Hotels</H2>

<H6>Local Sight Seeing</H6>

</HGROUP>

</BODY>

The output of the preceding code snippet is shown in the following figure.

Getting Started with HTML

The Output of the Usage of the <HGROUP> Tag

<ARTICLE>

The <ARTICLE> tag defines an independent or a selfcontained content. It is mostly used to specify independent entry for a blog or a magazine. Consider the following code snippet for defining the <ARTICLE> tag:

<BODY>

<ARTICLE>

<H1>The BookYourHotel Blog</H1>

<P>This Blog is specifically designed to provide details about BookYourHotel</P>

</ARTICLE>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <ARTICLE> Tag

<ASIDE>

The <ASIDE> tag specifies the content other than the main tag, such as a note or a tip. However, it should be related to the main content. Consider the following code snippet for defining the <ASIDE> tag:

<BODY>

<H3>Book Your Hotel</H3>

<ASIDE>

<P>Get discounts on booking rooms today</P>

</ASIDE>

</BODY>

The output of the preceding code snippet is displayed, as shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <ASIDE> Tag

<HEADER>

The <HEADER> tag is used to group introductory headings or navigational links. It generally includes website heading and information, such as the title and version of the website. You can use multiple <HEADER> tags in your document. Each of these tags will become a header for a particular section.

Consider the following code snippet for defining the <HEADER> tag:

<!DOCTYPE HTML>

<HTML>

<HEADER>

<H1>Book Your Hotel</H1>

<P>An easy way of booking hotels</P>

</HEADER>

</HTML>

The preceding code snippet creates a header consisting of the heading and paragraph text for a Web page.

<FOOTER>

The <FOOTER> tag is used to represent footer for a Web page or a section of a Web page. The footer generally contains the information, such as the author of the document, copyright information, privacy policy, and links to related documents. Consider the following code snippet for defining the <FOOTER> tag:

<!DOCTYPE HTML>

<HTML>

<FOOTER>

Author: John Bart

</FOOTER>

</HTML>

The preceding code snippet displays the author name of a document in footer.

<NAV>

The <NAV> tag enables you to group links created by using the <A> tag in such a way that looks more semantic and structured. All the major navigational links are generally grouped inside the <NAV> tag. The <NAV> tag is used to declare a navigational section in a Web page that

links to other pages or parts of a Web page. These links enable the user to navigate the website.

Consider the following code snippet for defining the <NAV> tag:

<NAV>

<A href=”/Hotels/”>Hotels</A> |

<A href=”/Rooms/”>Rooms</A> |

<A href=”/Booking/”>Booking</A> |

<A href=”/LocalPlaces/”>Local Places</A>

</NAV>

In the preceding code snippet, all the navigational links are placed inside the <NAV> tag. This creates a navigational section in the Web page. The output of the preceding code snippet is displayed, as

shown in the following figure.

Getting Started with HTML

The Output Displaying the Usage of the <NAV> Tag

<FIGURE>

The <FIGURE> tag is used to specify the self-contained content, such as images, diagrams, photos, and code, and associate caption with it. It should have some content related to the main content. However, if removed, it should not affect the flow of the document. Consider the following code snippet for defining the <FIGURE> tag:

<BODY>

<FIGURE>

<IMG src=”LocalPlacestoVisit.jpg” alt=”ZContinental” width=”304″ height=”228″>

</FIGURE>

</BODY>

In the preceding code snippet, an image will be displayed which will give a visual glimpse of local places near the hotel. If this <FIGURE> tag is removed, the content about the hotel will not be affected because it is more important to show the pictures of the hotel rather than pictures of the

local places.

You can also define a caption for the image inserted through the <FIGURE> tag by using the

<FIGCAPTION> tag. The <FIGCAPTION> tag is the optional tag and can appear either before or after the content within the <FIGURE> tag. In the <FIGURE> tag, only one <FIGCAPTION> tag can be nested. Consider the following code snippet for defining the <FIGCAPTION> tag:

<FIGURE>

<FIGCAPTION> Deluxe Room </FIGCAPTION>

<IMG src=”Room.jpg” alt=”ZContinental”width=”304″ height=”228″>

</FIGURE>

In the preceding code snippet, a figure caption, Deluxe Room, along with its image will be displayed on the Web page, as shown in the following figure.

Getting Started with HTML

The Image with the Caption Being Displayed

 

Leave a Reply

Your email address will not be published. Required fields are marked *