HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf

AAFREEN SHAIKH pg. 1
CHHATRAPATI SHIVAJI JUNIOR
SCIENCE COLLEGE JALGAON
HSC CHAPTER 1
HTMl Revision Part 1
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 electronicdocuments(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 standardmarkuplanguagefor 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 containerfor all otherHTML elements, whichare 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 titleto web page which is displayedin
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 containsall the contentsof 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 – containsthe sourceURL 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 aboveexamplebackgroundattributeused 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 providesan additionalblank linebefore 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 imagewithina 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 surro
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 entityname 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:
<body bgcolor=“LawnGreen”>
<body bgcolor=“#7CFC00”>
<body bgcolor=“rgb(124, 252, 0)”>

HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf

More Related Content

Similar to HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf (20)

More from AAFREEN SHAIKH (20)

Recently uploaded (20)

HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf