SlideShare a Scribd company logo
1 of 8
DEVELOPING A
WEB PAGE
ADDING
BACKGROUND
IMAGE
DESIGNING A WEBPAGE
You can create a website
wireframe in three methods:
1. Drawing it by hand on paper
2. Using Adobe Photoshop,
illustrator, paint or any
graphics software
3. Using software created for
this type of task like
OmniGraffle
GUIDELINES IN DESIGNING A
WEBPAGE
•Use web safe color so that everyone can see the design and content
clearly
•Provide navigation and site map
•Fill it with interesting text, not just graphics
•Organize the layout of the site
•Make the text readable
•Limit the number of images and other multimedia files such as
animation
CREATING AN ACTUAL WEBPAGE
Here is the basic skeleton for an HTML document:
Here are some of the important words you should know on learning
about HTML:
•Tag – piece of code that acts as a label that web browser
interprets.
•Element – a complete tag with an opening and closing
tags
•Attribute – a property value that customizes or modifies
an HTML element
APPLYING BACKGROUND IMAGE
•To apply background image, background is the HTML
attribute used to place pictures or images in the
background of HTML elements.
•Example HTML Background Image Code:
<table height=”100” width=”150”
background=”/images/background.jpg”>
<html>
<head>
<title> </title>
<style>
body {
background-image:
url("SpongeBob.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
ADDING A LINE BREAK
•The <br> tag inserts a single line
break. It is an empty tag meaning it
has no closing tag. <br> tag is use to
insert line breaks and is not intended to
create paragraphs.

More Related Content

Similar to ADDING BACKGROUND IMAGE BASICS IN HTML.pptx

Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry university
CIS363A
 
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Harshith Rockx
 
Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010
Mahesh Panchal
 
Cis363 a week 1 ilab 1
Cis363 a week 1 ilab 1Cis363 a week 1 ilab 1
Cis363 a week 1 ilab 1
CIS363A
 
Cis363 week 1 i lab 1
Cis363 week 1 i lab 1Cis363 week 1 i lab 1
Cis363 week 1 i lab 1
jkkjhdy798iyi
 
Cis363 week 1 i lab 1
Cis363 week 1 i lab 1Cis363 week 1 i lab 1
Cis363 week 1 i lab 1
CIS363A
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
Mediacurrent
 

Similar to ADDING BACKGROUND IMAGE BASICS IN HTML.pptx (20)

Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry university
 
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
 
Chapter 1.pdf
Chapter 1.pdfChapter 1.pdf
Chapter 1.pdf
 
Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010
 
1_Intro_toHTML.ppt
1_Intro_toHTML.ppt1_Intro_toHTML.ppt
1_Intro_toHTML.ppt
 
Simple Website Development
Simple Website DevelopmentSimple Website Development
Simple Website Development
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
Beginning Site Design
Beginning Site DesignBeginning Site Design
Beginning Site Design
 
Dreamweaver_Abhijit
Dreamweaver_AbhijitDreamweaver_Abhijit
Dreamweaver_Abhijit
 
Share point 2013 Building Websites
Share point 2013 Building WebsitesShare point 2013 Building Websites
Share point 2013 Building Websites
 
Images, lists and links
Images, lists and linksImages, lists and links
Images, lists and links
 
Website
WebsiteWebsite
Website
 
Cis363 a week 1 ilab 1
Cis363 a week 1 ilab 1Cis363 a week 1 ilab 1
Cis363 a week 1 ilab 1
 
Cis363 week 1 i lab 1
Cis363 week 1 i lab 1Cis363 week 1 i lab 1
Cis363 week 1 i lab 1
 
Cis363 week 1 i lab 1
Cis363 week 1 i lab 1Cis363 week 1 i lab 1
Cis363 week 1 i lab 1
 
Microsoft FrontPage PPT
Microsoft FrontPage PPTMicrosoft FrontPage PPT
Microsoft FrontPage PPT
 
Making Your Site Printable: Booster Conference
Making Your Site Printable: Booster ConferenceMaking Your Site Printable: Booster Conference
Making Your Site Printable: Booster Conference
 
Web Design Norms
Web Design NormsWeb Design Norms
Web Design Norms
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 

Recently uploaded

Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 

Recently uploaded (20)

Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 

ADDING BACKGROUND IMAGE BASICS IN HTML.pptx

  • 2. DESIGNING A WEBPAGE You can create a website wireframe in three methods: 1. Drawing it by hand on paper 2. Using Adobe Photoshop, illustrator, paint or any graphics software 3. Using software created for this type of task like OmniGraffle
  • 3. GUIDELINES IN DESIGNING A WEBPAGE •Use web safe color so that everyone can see the design and content clearly •Provide navigation and site map •Fill it with interesting text, not just graphics •Organize the layout of the site •Make the text readable •Limit the number of images and other multimedia files such as animation
  • 4. CREATING AN ACTUAL WEBPAGE Here is the basic skeleton for an HTML document:
  • 5. Here are some of the important words you should know on learning about HTML: •Tag – piece of code that acts as a label that web browser interprets. •Element – a complete tag with an opening and closing tags •Attribute – a property value that customizes or modifies an HTML element
  • 6. APPLYING BACKGROUND IMAGE •To apply background image, background is the HTML attribute used to place pictures or images in the background of HTML elements. •Example HTML Background Image Code: <table height=”100” width=”150” background=”/images/background.jpg”>
  • 8. ADDING A LINE BREAK •The <br> tag inserts a single line break. It is an empty tag meaning it has no closing tag. <br> tag is use to insert line breaks and is not intended to create paragraphs.