FYCOM Unit 1.pptx

Web Page Designing Using
HTML
Welcome to PowerPoint Presentation
on:

The Internet
❏ The Internet consists of millions of
interconnected computers that enable users to
communicate and share information.
❏ The World Wide Web was developed to make the
Internet easier to use and give quick access to
users.

Purpose of Internet
❏ For Information
❏ Sending and Retrieval (researches, facts and figures,
etc.)
❏ For Communication
❏ Via emails, chat, etc.

Structure of the Internet
This figure shows the physical structure of the Internet, which uses fiber- optic cables,
satellites, phone lines, and other telecommunications media to send data back and
forth.

Hypertext Documents
❏ Hypertext offers a better way of locating information.
❏ When you read a book, you follow a linear progression, reading
one page after another.
❏ With hypertext, you progress through pages in whatever way
is best suited to you and your objectives.
❏ Hypertext lets you skip from one topic to another.

Linear Versus Hypertext Documents
This figure shows how topics can be related in a hypertext fashion,as opposed to a
linear fashion.

Web Pages and Web Browsers
❏ A Web page is stored on a Web server, which
makes the page available to users of the Web.
❏ To view a Web page, the user runs a Web browser , a
software program that retrieves the page and displays
it.
❏ A Web browser can either be text-based, or graphical.

Using a Browser to View a Web Document on a Server
This figure shows to view web pages, the user runs a Web browser, a software
program that retrieves the page and displays it.
PRELIM

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://www.sjcem.edu.in- Our
School Website

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

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 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 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

⮚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 paragraph
HTML Paragraphs

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has
no empty tag. These tag is also called as non container tag.
<p> This content is before the line break<br> and this content after the line break</p>
Break Tag

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-

FYCOM Unit 1.pptx

Recommended

Recommended

More Related Content

Similar to FYCOM Unit 1.pptx

Similar to FYCOM Unit 1.pptx (20)

Recently uploaded

Recently uploaded (20)

FYCOM Unit 1.pptx