Monday, 15 January 2018

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.
 
<sub> ... </sub> – Defines subscripted text.
<sup> ... </sup> – 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.

Commerce Lesson No. 5 File and Disk Utilities

Commerce Section

Lesson No. 5 File and Disk Utility


Short Question Answers



Explain Fragmentation.        
Write a note on Disk De-fragmentation.        
Write a note on File Names and File Icons        
Explain Encryption.        
Explain File Compression.        
Explain the two types of Compression.        
Differentiate between Fragmentation and De-fragmentation.        

Lesson No. 5 File and Disc Utility




Files and Folders
  A file, or document, is a collection of data that has a name and is stored in a computer
  A directory (folder) called stores a number of files on your disk.
Files
  A file is a collection of data or information, which has a name and is stored in the computer.
  A file also has an extension, which is mostly three letters.  E.g.  .docx,  .jpg,   .mp3
  Extension tells the type of file.

File Extension
  A filename extension is a set of characters that helps the Operating system to understand what type of data is in file and what program should open it.
  It appears at the end of the file name, followed by a period (dot).
  E.g      Myfile.docx,      marksheet.xlsx,        myphoto.jpg,      1 song.mp3,     myvideo.mp4
Image File extensions
What's The Image For?
Recommended File Type
Details
Web Buttons and Logos
PNG
Allows for compression, alpha transparency, true color and is great with straight lines and text
Web Photos
JPEG
High detail with small compression. Great with gradual color changes in regular photos
Printing Images
TIFF
No compression for highest image quality
Editing Images
PSD/XCF/CRD
Standard file type for respective programs (Photoshop, GIMP, Corel). Maintains extra data like layers and effects
Images in Documents
PDF
Maximum compatibility in sharing with extra security and saving features
Simple Web Animations
GIF
Small and simple web animations

Filename Rules
  The maximum length of the file name in Windows XP is 255 characters.
  You can’t use any of the following special characters like   <,  >, :, “, /, \, |, ?, * in a file name.
  Use letters and/or numbers for filename.
  Use uppercase or lowercase letter for file name.

Folders
  A directory (folder) called stores a number of files on your disk.
  Folders or directories can also store other directories, which may store more files or other directories and so on.
  Directory is a collection of different files and different directories.
  Directory allows people to organize all files in a way that can be easily searched.

Organizing Files and Folders
Windows organizes folders and files in a hierarchy, or file system
Windows stores the folders and important files it needs to turn on the computer in its root directory
Folders stored within other folders are called subfolders

File Archival
  A file archival is a program, which combines more than one files into one archive file for easier transportation from one computer to another or storage devices.
  The archival takes a list of files and sequentially concatenates their contents into the archival.
  It also contains information about the names and lengths of the originals for proper construction.
  Archival also stores metadata about a file, which is provided by the operating system, like as timestamps, ownership and access control.
  The process of making an archival file is called archiving or packing.
  Process of conversion of archival file in to its original format (Reconstructing the original file from the archive) is called unarchiving, unpacking or extracting.

File Compression
  Compression is the reduction in size of data or file in order to save space, transmission time for encoding data more efficiently
  Also for reduction in the number of bytes used to store the information
  Compression is done by using some compression algorithms that rearrange and reorganize data or information so that it can be stored more economically.
  For compression of data or information two different algorithms are used
  Lossless Compression and Lossy Compression

Lossless Compression
  Lossless compression reduces file size without a loss of information in the process. The original file can recreated, as it is when you uncompressed it.
  It is used to compress document file, database files, program files, etc.
  ZIP, RAR compressions are example of lossless.
  In images, PNG is lossless compression.

Lossy Compression
  Lossy compression reduces file size of a file by eliminating bits of information.
  It also permanently deletes any unnecessary data.
  This compression algorithm is usually used with image files, audio files and graphics where a loss of quality is affordable.
  THE ORIGNAL FILE CANNOT BE RETAINED.
                Example – jpg, mp3, etc

Disk Compression
  Disk Compression software utility increases the free space in the hard disk to store more data by reducing the size of files and deleting the unused space and the data, which is not frequently used.

Encryption
  Encryption is an algorithm, which gives protection for data from unauthorized people.
  It is the conversion of plain data into a cipher text or non-readable text.
  Encryption is the process to convert data into coded form.
  Encryption process is especially important in wireless communications.
  It is used in WWW for carrying out sensitive transaction such as purchasing of goods using credit-card, or transferring company’s secret document between departments.

Decryption
  Decryption is the process of converting encrypted data or cipher text back into its original form that means decoding of coded data.
  The correct decryption key is required to convert the contents of an encrypted signal.
  document between departments.


Disk Utilities
Disk Fragmentation
How does a disk becomes fragmented?
       The total free space of disk is broken into little pieces, this process is called fragmentation.
       Fragmentation is occurred when maximum, but non-contiguous memory space is available in hard disk after deleting unwanted files or programs.
       Fragmentation occurs on a hard drive, a memory module, or other media when data is not written close enough physically on the drive.
Fragmentation means two things:
       A situation when the free space on a disk scattered here and there rather than contiguous few free space. It is called as disk fragmentation. It decreases the performance of Hard disk.
       A situation when an individual program or file stored on a disk are not contiguous but are broken up in pieces scattered around the disk. This is called as file fragmentation. It causes performance problems when reading files.

Disk De-fragmentation
To reduce the amount of fragmentation, defragmentation process is used.
       It rearranges the files or programs and gives large number of contiguous free space on storage devices and increase the performance of storage device.