Std. 11th IT Practical - Skill Set 2 - Web Designing HTML-5

 IT Practical Skillset - 2 (HTML 5)

Click here for Full screen view

Std. 11th IT Practical - Skill Set 1 LibreOffice

 IT Practical Skillset - 1 (Libre Office)

Click here for Full screen view

1. Basics of IT - Part1-2

Lesson No. 1  - Basics of IT

Topics in Part 1:  IT, ICT, Data, Information, Computer Definition, Components, Block Diagram & Memory

Part-1 PDF

Topics in Part 2:  Hardware, Software, Software Types - System Software and Application Software

Part-2 PDF

QUESTION BANK - FILL IN THE BLANKS

1. Select the chapters, no. of questions and click on START button.
2. Click on Show Answer to display the answer.
3. Click on Next button to display the next question.

To appear a Test on this chapter click here

Information Technology [IT]

IT encompasses all of the technologies that we use to create, collect, process, protect and store information.
It refers to hardware, software and computer networks.

ICT (Information Communication Technology)

IT refers forms of technology that are used to transmit, process, store, create, display, share or exchange information by electronic means.
ICT includes technologies such as radio, television, DVDs, Telephone, Satellite systems and Computer hardware-software as well as equipment and services associated with these technologies.

Data

Data can be any character, text, word, number or raw facts.

Information

Information is processed form of data which is organized.

Definition of a Computer

A computer is an electronic device, that accepts input and processes it under control of instructions to produce meaningful output.

A Computer is a machine or device that performs processes, calculations and operations based on instructions  provided by a software or hardware program. It is designed to execute applications and provides a variety of solutions by combining integrated hardware and software components.

The Components of a Computer

A computer contains many electric, electronic, and mechanical components known as Hardware.

Input Device

Allows you to enter data and instructions into a computer

Output Device

Hardware component that conveys information to one or more people

System Unit

Case that contains the electronic components of the computer that are used to process data

Storage Device

Records (writes) and/or retrieves (reads) items to and from storage media

Communications Device

Enables a computer to send and receive data, instructions, and information to and from one or more computers or mobile devices

Computer System

A computer system is a set of integrated devices that input, output, process, and store data and information. 
Computer system is currently built around at least one digital processing device. 

There are five main hardware components in a computer system: Input, Processing, Storage, Output and Communication devices.

A Computer System performs five major functions:

• It accepts data or instructions by way of input.
• It stores data.
• It can process data as required by the user.
• It gives results in the form of output.
• It controls all operations.

Architecture of Computer

In computer engineering, computer architecture is a set of rules and methods that describe the functionality, organization, and implementation of computer systems
Computer Architecture is a specification detailing of how a set of software and hardware technology standards interact of form a computer system.

Computer System

Every Computer System has the following three basic components:

1. Input Unit
2. Central Processing Unit
3. Output Unit

1. Input Unit

This unit helps user to enter data and commands into a computer system.
Input unit converts data and instructions into binary form and directs into computer.

2. Central Processing Unit (CPU)

CPU is the brain of the computer.
CPU processes the data according to the instructions provided.
CPU is on a single chip called as Processor

The CPU has following units :
Arithmetic Logic Unit
Control Unit
Memory Registers

3. Output Unit

Output unit conveys data/information to users.
It converts the processed data into a format which human can understand.

Memory

Computer memory, device that is used to store data or programs (sequences of instructions) on a temporary or permanent basis for use in an electronic digital computer.
Memory is of two types :
1. Primary Memory or Internal Memory

2. Secondary Memory or External Memory

1. Primary Memory

a. RAM (Random Access Memory)

• It is the main memory or the working memory of the computer system.
• It is read-write memory.
• On starting the computer, the operating system is loaded in RAM.
• It is temporary memory.
• The information stored in RAM is lost on switching OFF Power supply.
• Therefore It is also called Volatile Memory.

b. ROM (Read Only Memory)

• It contains the programs (BIOS) needed to start a PC, which is essential for boot-up.
• It is permanent memory and read only.
• The ROM is used by Operating system to perform major input/output tasks. 
• There are numerous ROM chips located on the motherboard and a few on expansion boards. 
• The chips are essential for the basic input/output system (BIOS), boot up, reading and writing to peripheral devices, basic data management and the software for basic processes for certain utilities.

Because ROM cannot be changed and is read-only, it is mainly used for firmware. 

Firmware

• It is software programs or sets of instructions that are embedded into a hardware device. 
• It supplies the needed instructions on how a device communicates with various hardware components.
• Firmware is referred to as semi-permanent because it does not change unless it is updated. 
• Firmware includes BIOS, erasable programmable ROM (EPROM) and the ROM configurations for software.

REGISTERS AND CACHE MEMORY

Registers are high-speed sttorage locations inside the microprocessor. Designed to be accessed at much higher speed than conventional memory. Registers are classified according to the functions they perform.

Cache memory is an extremely fast memory type that acts as a buffer between RAM and the CPU. 
It holds frequently requested data and instructions so that they are immediately available to the CPU when needed. 
Cache memory is used to reduce the average time to access data from the Main memory.

2. Secondary Memory

MAGNETIC TAPES

A magnetic tape drive is a storage device that makes use of magnetic tape as a medium for storage. 

It uses a long strip of narrow plastic film with tapes of thin magnetizable coating.

MAGNETIC DISKS

A magnetic disk is a storage device that uses a magnetization process to read, write, rewrite and access data. 

It is covered with a magnetic coating and stores data in the form of tracks, spots and sectors. 

Hard disks, zip disks and floppy disks are common examples of magnetic disks.

HARD DISK DRIVE (HDD)

A hard disk drive (HDD), hard disk, hard drive, or fixed disk is an electro-mechanical data storage device that uses magnetic storage to store and retrieve digital information using one or more rigid rapidly rotating disks (platters) coated with magnetic material. 
The platters are paired with magnetic heads, usually arranged on a moving actuator arm, which read and write data to the platter surfaces.

SOLID STATE DRIVE (SDD)

OPTICAL DISKS

FLASH MEMORY

Flash memory is an electronic (solid-state) non-volatile computer storage medium that can be electrically erased and reprogrammed.

Micro Sd cards, pen drives, etc..

PEN DRIVE

A USB flash drive or Pen Drive is a data storage device that includes flash memory with an integrated USB interface. 

Storage capacity: 2 GB, 4 GB,  8 GB, 16 GB, 32 GB, 64 GB, 128 GB, 256 GB and 512 GB

UNITS OF MEMORY

Bit – It is a binary digit that holds only one or two values : 0 or 1

Nibble – A group of 4 bits is called nibble E.g. 1101, 1001, 1111


Byte  -  A group of 8 bits is called byte. A byte is the smallest unit which can represent a character.

OLD SYLLABUS

Lesson No.1 Introduction to IT

Introduction to IT - Part 1 

Introduction to IT - Part 2


Lesson No. 1 Exercises 

HTML - Science and Commerce Section

Science and Commerce Section

HTML

Tags Summary Part - 1

 

Tags Summary - Part 2 

  Short Question Answers

• List the advantages of HTML.        
• List the disadvantages of HTML.        
• Explain <body> tag and list its attributes.        
• List any 4 physical style tags and state uses of each.        
• Explain the <OL> tag and its attributes.        
• Explain the <UL> tag and its attributes.        
• Explain the <img> tag along with its attributes.        
• List and give the use of tags used to create Tables.      

HTML

HTML stands for Hyper Text Markup Language. It is the basic markup language for creating

web pages and websites. A HTML web page contains markups or tags that defines how to display information on the browser’s window.

Advantages of HTML   -  Refer Textbook

Disadvantages of HTML  - Refer Textbook

Tag 

A tag in HTML document is a html element surrounded by angular brackets which has a specific meaning and task in HTML.

E.g.   <html>, <body>, <head>, <h1>, <br>, etc.

Structure of HTML document:

<html>

    <head>

               

    </head>

   <body>

              

   </body>

</html>

A HTML document has two sections

1) HEAD section       and   2) BODY section

A HTML file is saved with    .html   or    .htm  extension

<html> tag :

The <html> tag represents the root of an HTML document. It is the starting tag of web page.

It is the container for all other HTML elements, which are enclosed in <html> …… </html>

<head> tag:

The <head> element is a container for all the head elements.

The <head> element can include a title for the document, scripts, styles, meta information, and more. E.g.<title>, <style>, <base>, <link>, <meta>, <script>, <noscript>

<body> tag:

The <body> tag defines the document's body. This is the section which is displayed on the web page.

The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

which are enclosed in <body> …… </body>.

<title> tag: It defines the title for the web page. It is written in Head section. The title will be displayed on the browser window’s title bar.

Formatting Tags  (Physical Style tags)

<b> ...  </b>    -  To display text in bold.

<i> ...  </i>   - Displays text in  italics

<u> …  </u>   -   To underline the text.

<br>   -    stands for break rule.  It is used to start a new line. It has no closing tag.

<tt> ... </tt> – Displays text in mono spaced font style.

<strong> ... </strong> – Displays text bold style.

<em> ... </em> – Defines emphasized text.(browsers displays in italics style).

<mark> ... </mark> – Displays marked or highlighted text

<del> ... </del> – Displays deleted or removed text.

<ins> ... </ins> – Defines inserted(added) text.

 

_... – Defines subscripted text.

^... – Defines superscripted text.

<small> ... </small> – Reduces the font size of text by 1 unit.

<big>... </big> – Increases the font size of text by 1 unit.

<blockquote>... </blockquote> – Defines a quoted section.

<font> ... </font> – Changes the font of the text.

  Attributes of <font> tag:

       Face – specifies the name of the font

       Size – specifies the size of the letters values: 1 to 7

        Color – specifies the color name or color code

E.g.   <font face=”Arial Black” size=5  color=blue>

               Good Morning

          </font>

Heading tags (H1 to H6)

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading.

<h6> defines the least important heading.

<h1> heading is big in size about 1 inch  (72 pixels).

Attribute of Heading tag:  

Align – specifies the alignment for the heading values: left, center, right

The heading tags are block level HTML elements which means they begin with a new line.

<p> tag:

It is used to indicate a paragraph in a web page. It is a block level html element. It has the following attributes:

a)                 Align  - to specify alignment – left, center, right

b)                Style   -  to specify css style commands.

c)                 Width  - to specify horizontal dimension of the paragraph in pixels.

E.g.

<p align=center width=200>

      ………. …. …..paragraph  ……………..

</p>

<p style="color:blue;">

………….. paragraph …………….

</p>

<body> tag

Attributes of <body> tag:

background – contains the source URL of image file to be displayed in the background.

bgcolor – specifies the color name or color code for the background color of the web page.

text – specifies the color for the text in the web page.

link – specifies the color for the links in the web page.

alink - specifies the color of an active link in the web page.

vlink - specifies the color of an visited link in the web page.

E.g.  <body bgcolor=cyan  link=green vlink=red>

<body background="Images/plotters3.jpg">

Comments in HTML

In HTML to write comments the following tag is used:

<!--           comments are written here            -->                              

An HTML comment begins with <!-- and the comment closes with -->.

HTML comments are visible to anyone that views the page source code, but are not rendered by a browser. They are not shown on the window.

E.g.

<!-- Author: Mr. XYZ

    Description :   sample page of showing physical tags

-->

  

LISTS IN HTML

Html provides three types of lists which are as:

1)                 Unordered List

2)                Ordered List

3)                Definition List

Unordered List

It is the simplest list which is shown by bullet points.

Tags:      <UL>      </UL>   -  to define the list

                 <LI>     </LI>    - To define list elements

E.g.

<html>

<head>

       <title>List example</title>

</head>

<body>

        <h3>Fruit Lists </h3>

       <UL>

               <LI>Mango </LI>

               <LI>Apple</LI>

               <LI>Grapes</LI>

    </UL>

</body>

</html>

Type Attribute

It is used to change the shape of the bullets in the unordered list. It is used in <UL> tag.

There are three types :  DISC, SQUARE, CIRCLE

E.g.    <UL TYPE=SQUARE>

Ordered List

It displays the list in number format.   <OL>  and <LI> tag is used to create Ordered list.

It has two attributes:

1)                TYPE     -   specifies the type of numbering format. E.g.   1,2,3,4    or  A,B,C ..   or   I, II, III,    or a,b,c  ..

2)                START – specifies the start number in the list.

E.g.    <OL  TYPE=”A”  START=4>

Definition List

It is used to create a list of definitions of terms.

<DL>,   <DT>   and <DD> tag is used to create.

e.g

       <DL>

            <DT>Computer</DT>

            <DD>Computer is an electronic device which

Is used to store and process information.   </DD>

            <DT>Software</DT>

            <DD>Software is a collection programs. </DD>

      </DL>

<IMG> tag

It is used to insert images in the web page.

It has the following attributes:

Src   -     specifies the URL of the image.

Align   -    specifies the alignment of the image.

                   

Border  -   specifies the width of the border around

                    the image (Value in pixels)

Height  -   specifies the height of the image in pixels.

Width   -   specifies the width of the image in pixels.

Alt  -                     specifies the alternative text for the image. It is displayed instead of image, when image is not displayed on the web page.

LongDesc -   provides URL for the long description of the image.

E.g.

<img   src=”computer.jpg”  height=200 width=400

       Border=1    alt=”Computer image”>

HTML PRACTICAL ASSIGNMENT – 1 (Use different fonts, font styles and colors in Q. No. 1, 3 and 4)

Q1.   Create a web page that will display a heading HTML and a paragraph about HTML from the textbook along with an image.

Q2. Create a web page that contains picture gallery. (Small size images at least 5)

Q3.  Create web page containing an Unordered List showing list of Animals with Heading.

Q4.  Create a web page containing Ordered List of Students from your class with Heading.

        

Creating Tables in Web Page

To create table in a web page <table> tag is used.

<tr>    tag is used to define a row of table.

<td>  tag is used to define a column cell  of a row.

    <caption>   tag is used to give a title to table.

    <th>  tag is used to define column headers.

 E.g.  

<table border=1 align=center>

   <caption> Student List</caption>

     <tr>

           <th>Roll No  </th>

                 <th>Name </th>

     </tr>

     <tr>

            <td> 1  </td>

            <td> Kiran </td>

     </tr>

</table>

Attributes of <table> tag:

Align   - defines the alignment of a table and table cell.   Values – Left, Center, Right.

      -     Used with <td> tag to align cell contents.

Bgcolor   -  specifies the color for the table.

Width - specifies the width for the table in pixels or %

Border – Specifies the  border for the table. Values – 0 or 1

Cellpadding   -   specifies the distance between cell wall and the content given in pixels.

Cellspacing   -   specifies the distance between adjacent cells.