Scribd
Upload
13 views

R G6 - Unit 3 - Programme and Development

Uploaded by

aryamaansingh12
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

R G6 - Unit 3 - Programme and Development

Uploaded by

aryamaansingh12
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Unit 3: Programme and Development

Learning Objectives
Learners will learn to:
 define HTML

 identify the features of HTML

 understand the basic structure of an HTML file

 create an HTML file

 view an HTML file in the browser

 use the basic HTML tags

 to change the properties of a tag using attributes

 to create lists in HTML

Vocabulary
tag
attribute
hexadecimal

Let Us Start

It is not magic, but it can be


Hey! I use many websites quite exciting! Websites are
on the internet. I wondered built using a special language
how websites are created called HTML.
and how they work.

1
Let Us Explore
We know that the internet is a network of computers connecting millions of people

worldwide and allowing them to communicate and share information. The World

Wide Web is a service provided by the internet that makes it easy to store, share and

search for information in the form of websites or web pages. HTML is the common

language that helps create these websites and web pages. Users can access these

web pages using the web browser application software.

Explore and find how web pages are created. List your findings below.

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

Get, Set, Go
3.1 What is HTML?
HTML is an abbreviation of Hyper Text Markup Language. It is the language used to

create web pages. HTML is made up of two parts:

 Hyper Text is a special text that, when clicked, takes you to another web page

linked to it.

 The Markup Language consists of tags that mark the text inside as a certain

type. For example, a tag can mark a text as italicised or a bulleted list.
Features of HTML
 HTML uses tags to define an element in a document. These tags provide

instructions on how the content should be structured and displayed.

 It defines the overall structure of a webpage, including headings, paragraphs,

lists, tables, and more. It organises content into a hierarchical structure,

making it easier for browsers to display the page correctly.

2
 It allows connecting web pages using hyperlinks that connect different web

pages. Links can point to other web pages, files, or resources, enabling

navigation between different parts of the web.

 It allows the developer to add images, audio, video, and other multimedia

elements directly within the content of a webpage. This enriches the user

experience and makes the page more engaging.

 HTML is supported by all modern web browsers, ensuring that web pages

created using HTML can be accessed and displayed consistently across

different devices and platforms.

3.2 The basic structure of HTML


Given below is the basic structure of an HTML page.

<!DOCTYPE html>
<html>
<head>
<title> First HTML Page </title>
</head>
<body>
Welcome to HTML. My first web page.
</body>
</html>

Every HTML document must contain the following basic tags.

<!DOCTYPE html> declaration

This is the first line of an HTML document and is used to indicate to the browser

which version of HTML is being used.

<html> … </html> tag

This tag tells the browser that the web page will be formatted in HTML. This is the

main element of an HTML document and contains all other tags.

3
<head> … </head> tag

This tag is used to define the web page's title and other information about the HTML

document. Elements defined under the <head> tag generally do not get displayed

on the web page.

<title> … </title> tag

It is used to give a title to the web page. The title will be displayed in the title bar at

the top of the browser.

<body> … </body> tag

This tag encloses all the tags, attributes and information to be displayed on the web.

Page.

3.3 Creating a webpage


There are various ways to create an HTML document. Many online websites allow

you to type HTML tags and view the output as a web page. You can also use a simple

text editor to create an HTML document and then open it in a browser to view it as a

web page.

Using a text editor


An HTML file is a simple text document containing HTML tags. However, it has to be

saved with the extension .htm or .html. Only then will the browser consider it an

HTML file and display it as specified. You can create or edit an HTML file using any

text editor such as Notepad, Notepad++, Atom or Brackets. Some text editors have

extra features such as syntax highlighting and viewing the web page in the browser

directly.

We will use Notepad++ for typing and saving HTML files. Notepad++ is a free and

open-source code editor. It offers syntax highlighting and auto-completion features,

which can make typing easier and more efficient.

Tech Tickler
You can download and install Notepad++ from the given link.
https://notepad-plus-plus.org/downloads/
4
Once you open Notepad++, select the language as HTML as shown. This ensures the

tags are coloured correctly and the file is saved with the .html extension.

Steps to create and save a new HTML file in Notepad++


Step 1: Double-click the Notepad++ icon on the desktop.

Step 2: Click the FileNew option. A new tab will open for typing the content of the

file.

Step 3: Click the File Save As option from the File menu.

Step 4: Select the folder where you want to save the file.

Step 5: Type a file name.

Step 6: Click the Save button. The file is saved with the given file name. It will have

the extension .html. Start typing the HTML code in the saved file.
Title of the webpage

Content written inside


the <body> tag

5
Using Edublocks
Edublocks for HTML is a tool that allows you to create HTML documents by using

blocks instead of typing text. Similar to Scratch, it allows you to create an HTML

document by dragging and dropping blocks. Edublocks for HTML provide a

simplified way for users to understand and use HTML tags and its syntax.

One of the main advantages of Edublocks for HTML is that it uses the same block-

based interface as Scratch. This makes it easy for users who have experience with

Scratch to transition to creating web pages.

An HTML document in Edublocks An HTML document in a text editor

Output on the web page

Tech Tickler
Edublocks for HTML can be accessed using the given link.
https://app.edublocks.org/editor

6
Limitation of block-based coding
While Edublocks can be a great starting point for beginners to learn HTML, it has

some limitations.

 It lacks the full range of features and capabilities in professional web

development environments. This can limit the complexity and sophistication

of the HTML documents you create.

 It can get difficult to read and follow long pages of HTML code created using

blocks. It also becomes difficult to find and fix errors in block-based code.

3.4 Viewing a webpage


Once you have created an HTML file, you can view it in a browser. The HTML file

saved on your computer will appear in the saved location with the icon of your

default browser. To view in the default browser, navigate to the folder where you

have saved this file and double-click on it. The HTML file will now be visible as a web

page in your browser.

Activity 1
Perform the following tasks.
Task 1: Open Notepad++ on your computer.

Task 2: Create a web page containing a few lines on 'Save Water'.

Task 3: Save the file with the filename water.html.

Task 4: View the file on the web browser.

Task 5: Create a similar webpage using Edublocks.

7
3.5 HTML tags
Tags are instructions in an HTML document that tells the browser to do something,

such as display the text or image in a certain way. Each tag begins with a (<) and

ends with a (>). Tags are also called elements. HTML tags can be divided into two

types: paired and unpaired.


Paired tags
Paired tags, also known as ‘container tags,’ come in pairs with an opening and

closing tag. The tag name is enclosed in the '<' and '>' symbols. The content of the

tag is placed between the opening and closing tags.

For example, the header tag <h1> is a paired tag, its opening tag is <h1> and the

closing tag is </h1>.

<h1> Heading 1 </h1>


Unpaired tags
Unpaired tags, also known as ‘empty tags,’ do not have a corresponding closing tag.

For example, the line break tag ‘<br>’ is unpaired. It inserts a line break. <p>HTML

contains lots of predefined tags. <br>

Basic HTML tags


Let us look at some common tags used for text on a web page.
Header tag
Header tags are used to display headings and subheadings on a web page. All

headings are displayed in a larger size as compared to normal text. There are six

levels of headings according to their size, namely <h1>, <h2>, <h3>, <h4>, <h5>,

and <h6>. The <h1> tag displays the largest heading, while the <h6> tag displays

the smallest heading. The browser automatically adds a blank line above and below

each heading on a web page.

8
HTML code Output as a web page

Paragraph tag
The <p> tag is used to add paragraphs in HTML. Each paragraph starts on a new line

and some line spacing is added before and after a paragraph on a web page.

HTML code

Output as a web page

9
Line break tag
The <br> tag is used to begin a new line in the content on the web page. It generally

separates text into smaller, more readable portions or creates a visual break between

paragraphs. To add a line break, add the <br> tag where you want the line break to

appear. It is an empty tag, which means that it does not require a closing tag.

HTML code

Output as a web page

Formatting tags
Text can be displayed in different formats using formatting tags in HTML.

 Bold <b>…</b> - The enclosed text appears bold.

 Italic<i>…</i> - The enclosed text is italicised.

 Underlined<u>…</u> - The enclosed text is underlined.

10
HTML code

Output as a web page

Superscript and subscript tag


 Superscript text: The <sup>tag defines a superscript text. Superscript text

appears slightly above the normal line and is shown in a smaller size. It can be

used to show footnotes or exponents such as a2.

 Subscript text: The <sub> tag defines a subscript text. Subscript text appears

slightly below the normal line and is shown in a smaller size. This tag can be

used to display chemical formulas such as H2O.

11
HTML code

Output as a web page

Horizontal Rule tag


The <hr> tag in HTML stands for ‘horizontal rule’ and is used to insert a horizontal

line on a web page. This is an empty tag, so it does not require a closing tag. It is

generally used to separate content on a page visually.

HTML code

12
Output as a web page

Comments tag
Comments are codes not executed by the browser; therefore, they are not shown on

the web page. They can add personal notes or descriptions in the HTML document.

To create a comment, enclose it in the <!--and--> tag.

Activity 2
 Create an HTML page that contains information on ‘Chemical equations’.

 Make use of the following tags:

o Paragraph tag

o Line break tag

o Bold and italic tag

o Superscript and subscript

o HR tag

o Comments tag

13
3.6 Attributes of a tag
HTML tags can also contain attributes. Attributes are extra bits of information used

to define some specific characteristics of a tag. Attributes are placed inside the

opening tag. Each attribute has two parts- name and value. The tag gives instructions

for doing something, while its attributes decide how it should be done. Let’s see the

general form of elements and attributes.

Let us see the general form of a tag and its attributes.


Opening tag Closing

<h1 align=center> My webpage</h1>

Attribute Value Content

For example, the align attribute can be used with the <body>,<P>, <HR>or heading

tags to specify the alignment of text. There are four values that can be used for the

align attribute: left, right, justify and center.

Attributes of the <body> tag


The <body> tag has several attributes that can be used to modify its behaviour or

appearance. Some of the common attributes of the <body> tag are

 text: This attribute specifies the default text colour for the entire web page.

The value of this attribute should be a valid colour name or colour code of the

hexadecimal number system. Hexadecimal number system is an alphanumeric

code that represents different colours using alphabets and numbers ranging

from A-F and 0–9, respectively.

14
o Using the colour name

HTML code

Output as a web page

o Using the hexadecimal colour code


In HTML, there are some predefined colour names and their
corresponding hexadecimal codes for representing colours. Some of them
are given below. You can also use a hexadecimal code for specifying a
colour.

Name Hexadecimal code Colour displayed


Black #000000

Red #FF0000

Yellow #FFFF00

White #FFFFFF

Blue #0000FF

Green #00FF00

15
HTML code

Output as a web page

 bgcolor: This attribute specifies the background colour of the entire web

page. The value of this attribute should be a valid colour name or colour code.

HTML code

Output as a web page

16
 background: This attribute specifies an image that will be used as the

background for the entire web page. The value of this attribute is the file

name of the required image along with its extension.

HTML code

Output as a web page

Attributes of the <hr> tag


The attributes for the <hr> tag are as follows:
Attribute Used to Values
align specify the alignment of the left, centre, or right.
horizontal rule on the page
color set the colour of the horizontal rule Colour name or hexadecimal
value
size set the height of the horizontal rule Pixel or percentage
width set the width of the horizontal rule Pixel or percentage
noshade remove the shading effect of the -
horizontal rule

17
HTML code

Output as a web page

Activity 3
Refer to the code of the web page created in Activity 2 and perform the given tasks.
 Make use of the following attributes to improve the look of the web page:
o align (to specify the alignment of the text)
o bgcolor (to add background colour)
o text (to change the text colour)
 Use different attributes of the <hr> tag to divide the web page in different
sections.

18
3.7 Creating lists
A list is organising and presenting information as a group of related items. It makes

the content easy to read and understand. You can create different lists using HTML:

ordered lists and unordered lists.

Ordered lists tag


Ordered lists are lists in which the items are numbered. The <ol>... </ol> tag is used

to create an ordered list. Each item in the list is specified by the <li> tag.

HTML code Output as a web page

Attributes of the <ol> tag


Attribute Used to Values
type define the numbering style for each ‘1’, ‘I’, ‘a’, etc

item of an ordered list

start specify the starting value of the first any number

list item

19
HTML code Output as a web page

Unordered lists
In an unordered list, the items do not appear in a numbered sequence; instead, a

bullet appears before each item. The type attribute decides the style of the bullet. An

unordered list is created using the <ul> tag.

HTML code Output as a web page

20
Attribute of the <ul> tag

Attribute Used to Values


type specify the type of bullet disc, square, circle, and none

HTML code Output as a web page

Unit Review
1. HTML is an abbreviation of Hyper Text Markup Language. It is the language

used to create web pages.

2. Every HTML document has a basic created using different tags.

3. There are various ways to create an HTML document – using a text editor and

edublocks.

4. You can create or edit an HTML file using any text editor, Notepad++.

5. Edublocks allows you to create an HTML document by dragging and dropping

blocks.

21
6. To view in the default browser, navigate to the folder where you have saved

this file and double-click on it.

7. Tags are instructions in an HTML document that tells the browser to do

something. Tags are also called elements.

8. Each tag begins with a (<) and ends with a (>).

9. HTML tags can be divided into two types: paired and unpaired.

10. Header tags are used to display headings and subheadings on a web page.

11. The paragraph tag is used to add paragraphs in HTML.

12. The <br> tag is used to begin a new line in the content on the web page.

13. Formatting tags make the text bold, italic and underlined.

14. The <sup>tag defines a superscript text.

15. The <sub> tag defines a subscript text.

16. The <hr> tag in HTML stands for ‘horizontal rule’ and is used to insert a

horizontal line on a web page.

17. Comments are codes not executed by the browser.

18. HTML tags can also contain attributes.

19. Attributes are extra bits of information used to define some specific

characteristics of a tag.

20. A list is organising and presenting information as a group of related items.

21. You can create different lists using HTML: ordered lists and unordered lists.

Check for Understanding


1. Select the correct answer.
a. Which of the following heading tags will display the largest heading size?
i. H1
ii. H2
iii. H3
iv. H4

22
b. What is the file extension to save an HTML document?
i. .txt
ii. .html
iii. .htm

c. Which tag is used to insert a line break?


i. <hr>
ii. <br>
iii. <ol>

d. Which tag is used to type in a paragraph?


i. <b>
ii. <p>
iii. <i>

2. Answer the following questions.


a. What does HTML stand for, and what is its primary purpose
__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

b. Give two features of an HTML document.

_________________________________________________________________________________________

_________________________________________________________________________________________

________________________________________________________________________________________

_________________________________________________________________________________________

_________________________________________________________________________________________

________________________________________________________________________________________

23
c. What are attributes in HTML? Explain their use.
______________________________________________________________________________________

______________________________________________________________________________________

______________________________________________________________________________________

______________________________________________________________________________________

______________________________________________________________________________________

d. Differentiate between paired and unpaired tags.

___________________________________________________________________________________

___________________________________________________________________________________

___________________________________________________________________________________

___________________________________________________________________________________

___________________________________________________________________________________

___________________________________________________________________________________

___________________________________________________________________________________

Lab Activity
Q1. Write an HTML code to display the formulas below on a web page.

 (a+b)³ = a³+3a²b+3ab²+b³

 H2SO4, H2O, NH3, SO3

Q2. Create a web page on ‘My Dream School’ using the instructions given below.

 An introduction with the highest level of heading and any two formatting tags

 A background image related to the theme.

 An ordered list of five items related to the theme.

24
Resources
https://www.w3schools.com/html/

Reference Material
https://www.youtube.com/watch?v=x9bTBcron78

25

You might also like