Information Technology (IT) Notes for Std. 12th HSC Board Exam

HTML

First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext Markup Language.

HTML is a markup language used for structuring and presenting content on the World Wide Web.

HTML is used to create electronic documents (called web pages) that are displayed on the World Wide Web.

Each web page contains a series of connections to other pages called hyperlinks.

HTML is definitely not a programming language but a mark-up language.

HTML5 was the fifth and last major version of HTML that is a World Wide Web Consortium recommendation.

It was released on 28th October 2014.

HTML is the standard markup language for creating Web pages.

HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page

HTML page structure:
The Basic structure of HTML page is given below. It contain some elements like head, title, body, … etc. These elements are used to build the blocks of web pages.

The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The  element defines a paragraph

HTML Tags/Elements

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

HTML tags normally come in pairs like and

The first tag in a pair is the start tag, the second tag is the end tag

The end tag is written like the start tag, but with a forward slash inserted before the tag name

The start tag is also called the opening tag, and the end tag the closing tag.

Tags tells the browser about content display property. If a tag is not closed then browser applies that effect till end of page.

<DOCTYPE! html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.

<html>: This is called HTML root element and used to wrap all the code. The <html> tag represents the root of an HTML document.
It is the container for all other HTML elements, which are enclosed in <html> ………. </html>

<head>: 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.

All the HTML elements that can be used inside the <head> element are:

<title>
<style>
<title>
<base>
<noscript>
<script>
<meta>
<link>

The <title> element: defines a title to web page which is displayed in the title bar of the Browser window.
It provides a title for the page when it is added to favorites

It displays a title for the page in search-engine results

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

Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element.

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>

HTML page can be created using any text editor (notepad).
Then save that file using .htm or .html extension and
open that file in a Web browser E.g. Chrome, Mozilla Firefox, Opera, Edge, Internet Explorer, etc.

Note: HTML is not case sensitive. You can write tags in small or capital letters or in combination

Example No. 1
Type the following html code in notepad and save it with firstpage.html

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> My First Web Page </TITLE>
</HEAD>

<BODY bgcolor=cyan text=blue>
This is my first web page. I love HTML.

</BODY>
</HTML>

In the above example tag is used to give a line break.

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.

The attributes link, alink and vlink will be used when we have hyperlinks in the web page.

Example No. 2

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> My School </TITLE>
</HEAD>

<BODY background="school.jpg" text=blue>
<H1> St. Judes High School </H1>

Started in 1995, St. Jude's High School
is a Roman Catholic, Co-ed school having till ISC Class 12.
The school is administered by St. Dominic Savio
Educational Society which is committed to providing
quality education to children.

</BODY>

</HTML>

In above example background attribute used in <body> tag to specify the background picture. Copy picture file in the same folder where you will be saving the html file.
Some formatting tags are used like , and

Formatting Tags
(All the tags will have a close tag)
 ….. – Displays the text in bold style.
 ….. – Displays the text in italics style.
 ….. – Underlines the text.
<tt> ….. </tt> – Displays text in mono spaced font style.
 ….. – Displays text bold style.
 ….. – Defines emphasized text.(browsers displays in italics style).
 ….. – Displays marked or highlighted text
<del> ….. </del> – Displays deleted or removed text.

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

 ….. – Defines subscripted text.
 ….. – Defines superscripted text.
 ….. – Reduces the font size of text by 1 unit.
<big>….. </big> – Increases the font size of text by 1 unit.

 ….. – Changes the font of the text.
Attributes of 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

Example No. 3
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Formatting tag example </TITLE>
</HEAD>

<BODY bgcolor=cyan text=blue>
<h1> Formatting in HTML </h1>
 The different programming languages are: 
 
<tt> Java </tt> 
 Python 
<del> Ruby </del> 
<big> React </big> 
 JavaScript 
 

<hr color="green" width="50%" size=3>
Example of sup and sub tags : 
a2 + b2 
H2SO4

</BODY>
</HTML>

Attributes of an html element

An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element's start tag.
An element's start tag may contain any number of space separated attribute/value pairs.

<hr> tag

It is used to display horizontal ruled line. The attributes of <hr> are:
color – sets the color for the ruled line.
width – specifies the length of line in % or pixels
size – sets the thickness of the line.
Example: <hr color=blue width=“50%” size=4>

Headings in HTML

HTML provides six level of heading tags.
The range is from 1 to 6.
Header tags will display text in bold and large size.
<H1> is largest level heading.

HTML provides an additional blank line before and after a heading in a web page.
Align attribute is used to specify horizontal alignment. (left, center and right)

Examples

<H1> Advanced Web Designing</H1>

<H2 align=“center”>HTML Forms</H2>

Paragraphs in HTML

tag is used to start a paragraph in HTML
Align attribute is used to set the alignment of the paragraph with respect to web page
The paragraph ends with

Example:
The Internet is a powerful media to transmit information. The pages of information displayed on the internet are referred to as webpages.

Example :

Output:

Text Formatting Elements

– Displays text bold style.
 – Displays marked or highlighted text
<del> – Displays deleted or removed text.
<ins> – Defines inserted(added) text.
 – Displays text in superscript form.
 – Displays text in subscript form.
<code> – To represent program code text.

tag

– Specify the font size, font face and color of text.
Attributes :
color - specifies the color of the text
face - specifies the font of the text
size - specifies the font size (Range 1 to 7)

Output:

Inserting Images in HTML

<img> tag is used to insert an image within a web page. It is an empty tag.

Attributes of <img> tag:

Attribute	Value	Description
src	URL	Specifies the URL of an image
Align	top bottom middle left right	Specifies the alignment of an image according to surrounding elements
height	pixels	Specifies the height of an image
width	pixels	Specifies the width of an image
alt	text	Specifies an alternate text for an image
border	pixels	Specifies the width of the border around an image

Types of Images:Image Format Types

File Extension
WebP (Web Picture)	.webp
JPEG (Joint Photographic Experts Group)	.jpg or .jpeg
PNG (Portable Network Graphics)	.png
GIF (Graphics Interchange Format)	.gif
BMP (Bitmap)	.bmp
TIFF(Tagged Image File Format)	.tiff

Example:

Output:

HTML Symbols

Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add such symbols to an HTML page, you can use an HTML entity name.
If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.

What is HTML Entity?

Entities are used to display reserved characters and symbols in HTML.
A character entity looks like this:
           &entity_name;
                        or
          &#entity_number;

Some of the Mathematical Symbols supported in HTML

Currency and other symbols :

To insert non breaking space in HTML web page

HTML Colors

Color values in HTML can be given in three ways:
A) Color Name          E.g. Orange, Tomato
B) Hex Color Code    E.g. #ff6347
C) RGB Code            E.g. RGB(255, 99, 71)

HTML supports 140 standard color names.

Example:

For HTML Symbols & Color Names

https://www.rapidtables.com/web/html/html-codes.html
https://www.w3schools.com/html/html_symbols.asp

For HTML Color Names and Codes

https://www.rapidtables.com/web/color/html-color-codes.html
https://www.w3schools.com/colors/colors_names.asp

Information Technology (IT) Notes for Std. 12th HSC Board Exam - Science

Pages

Pages

IT online Exam

Tuesday, 12 May 2020

HTMl Revision Part 1