CBSE Tuts

CBSE Maths notes, CBSE physics notes, CBSE chemistry notes

CBSE Notes for Class 7 Computer in Action – Introduction to HTML

CBSE Notes for Class 7 Computer in Action – Introduction to HTML

Internet is a worldwide web of computer networks which has revolutionised the way people communicate, exchange views, search for information, shop and so on. One of the most popular services of the Internet is the World Wide Web or WWW. WWW is a collection of interconnected webpages that are identified by an address called URL (Uniform Resource Locator). A webpage is a page containing text, images, audio, videos and links to other webpages. These pages are written using a special language called Hyper Text Markup Language (HTML). A software called the web browser is used to view the HTML pages. Let us learn the basics of HTML.

DEFINING HTML

HTML is a language used for designing webpages. It is a language that describes the content, format and layout in which a webpage should be displayed over the World Wide Web.

HTML TAGS
Commands in HTML are known as tags. A tag is an HTML command that defines the manner in which the content should be formatted and displayed in the browser. All HTML tags are enclosed within the angle brackets (< >).

Examples of HTML tags are <BODY>, <H1> and <HR>.

A tag can be a container tag or an empty tag.

Container Tag
A container tag is a tag that needs to be closed. A tag is closed by putting a forward slash (/) in front of the tag name. For example, <H1> is a container tag. Container tags are always used in pairs as shown in the following example.

 <Hl> Hello World </Hl>

In this example, <H1> is the opening tag or the start tag and </Hl> is the closing tag or the end tag.

Empty Tag
An empty tag is a tag that does not requires closing tag. Examples of empty tags are <HR> and <BR>

ATTRIBUTE

An attribute is a special keyword used inside the tag to specify additional information about the tag and customise it.
For example,

 <H1 align = "center">

In this example, ‘align’ is an attribute of <H1>. It indicates that the text inside the <H1> tag is to be displayed in the center.
Most attributes are optional and are only used when the default behavior of a tag is to be changed.

STRUCTURE OF AN HTML DOCUMENT

An HTML page is also called an HTML document. Every HTML document must contain certain standard HTML tags. These tags define the basic structure

The basic structure of an HTML document is shown here.

 <HTML>
 <HEAD>
 <TITLE> Title of the webpage </TITLE>
 </HEAD>
 <BODY>
 Tags that define the content of a webpage are written here.
 </BODY>
 </HTML>

<HTML> Tag: The <HTML> tag identifies the document as an HTML document. It is a container tag. The entire code to design a webpage is written between the opening and the closing HTML tags.
<HEAD> Tag: The <HEAD> tag is used to provide some additional information, including title, scripts used and so on, about a webpage. It is also a container tag.
<TITLE> Tag: The <TITLE> tag is used to specify the title of a webpage. The title appears on the Title bar or on the tab in the browser window. It is also a container tag.
<BODY> Tag: The <BODY> tag defines the content of a webpage that would be visible in the browser. It is also a container tag. All the tags that display text, images or links in a web page are written between the opening and the closing <BODY> tags.

HTML EDITORS

To create an HTML document, you require an HTML editor. An HTML editor is a software program that enables you to easily create HTML documents. There are two types of HTML editors—WYSIWYG editor and Text editor.

WYSIWYG Editor
WYSIWYG stands for What You See Is What You Get. These editors provide an in-built interface wherein you can quickly design webpages without writing any HTML tags as well as preview the webpages. Some of the popular WYSIWYG HTML editors are Adobe Dreamweaver, Microsoft Expression Web, Kompozer and so on.

Text Editor
Text editors such as Notepad and WordPad let us create HTML documents by writing HTML commands.

CREATING AND SAVING HTML DOCUMENTS

We will be using Notepad as the text editor for creating HTML documents. Follow the given steps to create and save HTML documents.

Step 1
Use the Search box next to the Start button to open the Notepad window.
Step 2
Type the HTML code in the Notepad window as shown in Figure 6.2.
Step 3 
Click on the File menu and choose the Save option. The Save As dialog box gets displayed.
Step 4
In the Save As dialog box, after selecting the appropriate folder, specify the name of the HTML file along with the extension .html or .htm in the File Name box as shown
in Figure 6.4.
Step 5
Click on the Save button to save the file.

cbse-notes-for-class-7-computer-in-action-introduction-to-html-1

cbse-notes-for-class-7-computer-in-action-introduction-to-html-2

cbse-notes-for-class-7-computer-in-action-introduction-to-html-3

VIEWING HTML DOCUMENTS

After writing the HTML code to create a webpage using an HTML editor, we can check how the webpage will look like, using a web browser. Some examples of web browsers are Internet Explorer, Mozilla Firefox, Netscape Navigator and Google Chrome.

To view HTML page on a web browser like Google Chrome, follow the steps.

Step 1
Open Google Chrome and press Ctrl+O. The Open dialog box appears.
Step 2
Choose the folder and file.
Step 3
Click on the Open button. The selected file opens in the Google Chrome window (Fig. 6.6).

cbse-notes-for-class-7-computer-in-action-introduction-to-html-4

cbse-notes-for-class-7-computer-in-action-introduction-to-html-5

Words to Know

  1. HTML: HTML or Hyper Text Markup Language is used to design web pages.
  2. Attribute: A special keyword used inside an HTML tag to specify additional information about the tag and customise it.
  3. Tag: HTML command that defines the manner in which the content should be formatted and displayed in the browser.
  4. Web Browser: A software that lets you view the HTML page.
  5. URL: URL or Uniform Resource Locator is the address of a web page or any other resource on the World Wide Web.