Web Page Designing Using HTML

Web Page Designing Using HTML
Mahesh Sharma
Computer Facilitator, Ritamvara School
Welcome to PowerPoint Presentation on:
© Copyright, Mahesh Sharma. 2017

Agendas Today
1. Introduction to Web Page Designing using HTML
2. Introduction to HTML
3. HTML Tags, Attributes, Headings, Paragraphs
and Images
4. Describe the process to work with HTML

Introduction to Web Page Designing
WHAT IS A WEB PAGE?
The Internet Page displayed on the website is called A Web Page.
Some Examples are:
https://www.facebook.com/ - A Social Networking Site
https://www.google.com.np/- A Search Engine
http://ovps.edu.np/ - Our School Website
(N. Adhikary, 2017).

Introduction to Web Page Designing
A web page may include different Data and Information based
on:
I. Title, Heading and Paragraph
II. Images, Audios and Videos
III. Schedules of Events
IV. Search Forms
V. Sign Up and Login Forms etc

Introduction to HTML
 HTML Stands for Hypertext Markup Language
 The language for building Web Pages
 Describes the structure of Web pages using markup language
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by HTML tags
 Some of the Examples of HTML tags are:
<HTML> </HTML>, <HEAD></HEAD>, <TITLE></TITLE>, <BODY></BODY>, <H1></H1>
<P></P>, <B></B>, <U></U>, <I></I> etc.

HTML Tags
HTML Tags are enclosed in the < and the > symbols.
It has two pairs, an Opening tag eg. <html> and a closing tag eg.
</html>.
A closing tag is followed by symbol ‘/’.
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>
Input in Notepad saved as - Nepal.html
Output in a Web browser
- Google Chrome

HTML Tags Explained
I. The <!DOCTYPE html> declaration defines this document to be HTML5
II. The <html> element is the root element of an HTML page
III. The <head> element contains title of document
IV. The <title> element specifies a title for the document
V. The <body> element contains the visible page content
VI. The <h1> element defines a large heading
VII. The <p> element defines a paragraph
VIII.The <b> element defines the bold of text

HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Example: <body BGCOLOR = “green”> changes the background of
webpage to green color

HTML Headings
• Headings are important in HTML documents. They are the title of
HTML pages
• Headings are defined with the <h1> to <h6> tags.
• H1 is the largest heading tag while H6 is the smallest heading tag.
• <h1> headings should be used for main headings, followed by
<h2> headings, then the less important <h3>, and so on

HTML Paragraphs
The HTML <p> element defines a paragraph.
We define <p> tag with attribute and value to change the properties of the
paragraph
For instance:
I. <p align = “left”> - for left alignment of paragraph
II. <p align = “center”> - for center alignment of paragraph
III. <p align = “right”> - for right alignment of paragraph
IV. <p align = “justified”> - for justified alignment of paragragh
I. II. III. IV.

HTML Images
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="pic_mountain.jpg" alt="Mountain View" width= "340px" height="228px">
For Instance:
Input in Notepad saved as - Mountain.html
Output in Web Browser-
Google Chrome

HTML Images
I. Use the HTML <img> element to define an image
II. Use the HTML src attribute to define the URL of the image
III. Use the HTML alt attribute to define an alternate text for an
image, if it cannot be displayed
IV. Use the HTML width and height attributes to define the size of
the image
Note: Loading images takes time. Large images can slow down your
page. Use images carefully.

References
 (N. Adhikary, 2017). Web Page Designing Using HTML .Oasis Publication. 1st ed.
Pg. 159-168. [Accessed date: 03 Sept 2017]
 (W3schools.com, 2017) Introduction to HTML. W3Schools.com
https://www.w3schools.com/html/html_intro.asp/ [Accessed date: 05 Sept
2017]
 (Pradhan, 2017). Om Vajra Public School - OVPS is transforming to RITAMVARA
SCHOOL http://ovps.edu.np/ [Accessed date: 04 Sept 2017].

Web Page Designing Using HTML

In this document

More Related Content

What's hot

Similar to Web Page Designing Using HTML

More from Ashmita Tuition Center

Recently uploaded

Web Page Designing Using HTML