SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Chapter 8
ENHANCING WEB PAGE
WITH BACKGROUND AND
RULES
USING COLORS AND
IMAGES AS BACKGROUND
 REMINDERS ON PUTTING
  BACKGROUND COLORS and IMAGES
 1. Consider the color harmony, a darker
  text color will be harmonious with lighter
  background and a lighter text color with
  a darker background.
 Consider the file size of the image, the
  bigger the file ,the slower will load your
  web page.
THE BGCOLOR
ATTRIBUTE
 Background    color tag <bgcolor> is
  used to set the background color of
  the entire Web page. The syntax for
  putting background color is:
 <body bgcolor= ncolor> where ncolor
  is n is the name/code of the color.
 Ex. <body bgcolor= red>


   Note: You can also used the HTML Color code.
BACKGROUND IMAGE
ATTRIBUTE
 BACKGROUND IMAGE TAG: Instead of
  background color, you can also put an
  image on your Web page to serve as
  background attribute.
 The syntax for adding image background is:
 <body background= ‘imagefile’>
 Where imagefile is the file name of the
  image you want to put as background.
   Note: The images should be in the same folder of your
    save web page documents.
PUTTING HORIZONTAL
RULES
 Web pages contain information on
  different categories, so it a good practice
  to organize them properly into sections
  or divisions. To indicate these
  divisions, a horizontal rule (dividing line)
  is used. To add a dividing line, the <HR>
  tag is used.
 The syntax is <HR>
<HR> tag WIDTH Attribute
   The width of a dividing line depends on the
    browser screen.
   For you to control the width of the line, you can
    set the WIDTH attribute of the <HR> tag you
    desired thickness in either pixels or
    percentage of the width of the browser screen.
   The syntax for using the WIDTH attribute is:
    <HR WIDTH= pixels> or <HR WIDTH=
    percent>

Ex. <HR width= 50> or <HR width= 25%>
The <HR> tag SIZE
attribute
 Size attribute defines the thickness of a
  line.
 The syntax to do this is:
  <HR Size= pixels>

                  Ex. <HR Size= 1>

   Note: The default size is 2 pixels
<HR> tag ALIGN attribute
 HR are centered by default. To specify
  your desired alignment, you set the
  ALIGN attribute of the <HR> tag to
  LEFT, RIGHT, or CENTER.
 The syntax for doing this is:
<HR ALIGN= alignment>
Ex. <HR ALIGN= left>
<HR NOSHADE> if you don’t want the HR
  to have shading.

Weitere ähnliche Inhalte

Ähnlich wie Html web designing background and rules

Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_languageIshaq Shinwari
 
presentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptxpresentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptxssuser8001a61
 
Animation in the web
Animation in the webAnimation in the web
Animation in the webVishal Polley
 
Presentation of Hyper Text Markup Language
Presentation of Hyper Text Markup LanguagePresentation of Hyper Text Markup Language
Presentation of Hyper Text Markup LanguageJohnLagman3
 
html-150424090224-conversion-gate0.2.pdf
html-150424090224-conversion-gate0.2.pdfhtml-150424090224-conversion-gate0.2.pdf
html-150424090224-conversion-gate0.2.pdfJohnLagman3
 
HTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docxHTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docxadampcarr67227
 
Web fundamental concept and tags
Web fundamental concept and tags Web fundamental concept and tags
Web fundamental concept and tags shameen khan
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box modelBulldogs83
 
Body Section in HTML - R.D.Sivakumar
Body Section in HTML - R.D.SivakumarBody Section in HTML - R.D.Sivakumar
Body Section in HTML - R.D.SivakumarSivakumar R D .
 

Ähnlich wie Html web designing background and rules (20)

Html 2
Html   2Html   2
Html 2
 
Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_language
 
HTML Presentation
HTML Presentation HTML Presentation
HTML Presentation
 
presentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptxpresentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptx
 
Animation in the web
Animation in the webAnimation in the web
Animation in the web
 
Presentation of Hyper Text Markup Language
Presentation of Hyper Text Markup LanguagePresentation of Hyper Text Markup Language
Presentation of Hyper Text Markup Language
 
html-150424090224-conversion-gate0.2.pdf
html-150424090224-conversion-gate0.2.pdfhtml-150424090224-conversion-gate0.2.pdf
html-150424090224-conversion-gate0.2.pdf
 
Css
CssCss
Css
 
Html siva
Html sivaHtml siva
Html siva
 
HTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docxHTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docx
 
Web fundamental concept and tags
Web fundamental concept and tags Web fundamental concept and tags
Web fundamental concept and tags
 
HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
 
Html
HtmlHtml
Html
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Html
HtmlHtml
Html
 
HTML5 with PHP.ini
HTML5 with PHP.iniHTML5 with PHP.ini
HTML5 with PHP.ini
 
Body Section in HTML - R.D.Sivakumar
Body Section in HTML - R.D.SivakumarBody Section in HTML - R.D.Sivakumar
Body Section in HTML - R.D.Sivakumar
 
Chapter 2.pdf
Chapter 2.pdfChapter 2.pdf
Chapter 2.pdf
 

Mehr von Jesus Obenita Jr.

Mehr von Jesus Obenita Jr. (20)

Organization and management 3 a Evolution of Management Theory
Organization and management 3 a Evolution of Management TheoryOrganization and management 3 a Evolution of Management Theory
Organization and management 3 a Evolution of Management Theory
 
Organization and management 2 Management Function
Organization and management 2 Management FunctionOrganization and management 2 Management Function
Organization and management 2 Management Function
 
Organization and management 1
Organization and management 1Organization and management 1
Organization and management 1
 
Designing web page marquee and img tag
Designing web page  marquee and img tagDesigning web page  marquee and img tag
Designing web page marquee and img tag
 
Ms excel 2013 formatting worksheets
Ms excel 2013 formatting worksheetsMs excel 2013 formatting worksheets
Ms excel 2013 formatting worksheets
 
Ms excel 2013 data management
Ms excel 2013 data managementMs excel 2013 data management
Ms excel 2013 data management
 
Microsoft Excel introduction
Microsoft Excel introductionMicrosoft Excel introduction
Microsoft Excel introduction
 
Word 2013 working with pictures
Word 2013 working with picturesWord 2013 working with pictures
Word 2013 working with pictures
 
Word 2013 Formatting Page
Word 2013 Formatting PageWord 2013 Formatting Page
Word 2013 Formatting Page
 
Word 2013 8
Word 2013 8Word 2013 8
Word 2013 8
 
Ms word 2013 7
Ms word 2013 7Ms word 2013 7
Ms word 2013 7
 
Ms word 2013 6
Ms word 2013 6Ms word 2013 6
Ms word 2013 6
 
Ms word 2013 4
Ms word 2013 4Ms word 2013 4
Ms word 2013 4
 
Ms word 2013 2
Ms word 2013 2Ms word 2013 2
Ms word 2013 2
 
Ms word 2013
Ms word 2013Ms word 2013
Ms word 2013
 
Parts of the ms word 2013 screen and
Parts of the ms word 2013 screen andParts of the ms word 2013 screen and
Parts of the ms word 2013 screen and
 
Word processor
Word processorWord processor
Word processor
 
Session 2 test construction.mt's
Session 2   test construction.mt'sSession 2   test construction.mt's
Session 2 test construction.mt's
 
Cooking ingredients
Cooking ingredientsCooking ingredients
Cooking ingredients
 
Color theory
Color theoryColor theory
Color theory
 

Kürzlich hochgeladen

My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 

Kürzlich hochgeladen (20)

My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 

Html web designing background and rules

  • 1. Chapter 8 ENHANCING WEB PAGE WITH BACKGROUND AND RULES
  • 2.
  • 3. USING COLORS AND IMAGES AS BACKGROUND  REMINDERS ON PUTTING BACKGROUND COLORS and IMAGES  1. Consider the color harmony, a darker text color will be harmonious with lighter background and a lighter text color with a darker background.  Consider the file size of the image, the bigger the file ,the slower will load your web page.
  • 4. THE BGCOLOR ATTRIBUTE  Background color tag <bgcolor> is used to set the background color of the entire Web page. The syntax for putting background color is:  <body bgcolor= ncolor> where ncolor is n is the name/code of the color.  Ex. <body bgcolor= red>  Note: You can also used the HTML Color code.
  • 5. BACKGROUND IMAGE ATTRIBUTE  BACKGROUND IMAGE TAG: Instead of background color, you can also put an image on your Web page to serve as background attribute.  The syntax for adding image background is:  <body background= ‘imagefile’>  Where imagefile is the file name of the image you want to put as background.  Note: The images should be in the same folder of your save web page documents.
  • 6. PUTTING HORIZONTAL RULES  Web pages contain information on different categories, so it a good practice to organize them properly into sections or divisions. To indicate these divisions, a horizontal rule (dividing line) is used. To add a dividing line, the <HR> tag is used.  The syntax is <HR>
  • 7. <HR> tag WIDTH Attribute  The width of a dividing line depends on the browser screen.  For you to control the width of the line, you can set the WIDTH attribute of the <HR> tag you desired thickness in either pixels or percentage of the width of the browser screen.  The syntax for using the WIDTH attribute is: <HR WIDTH= pixels> or <HR WIDTH= percent> Ex. <HR width= 50> or <HR width= 25%>
  • 8. The <HR> tag SIZE attribute  Size attribute defines the thickness of a line.  The syntax to do this is: <HR Size= pixels> Ex. <HR Size= 1>  Note: The default size is 2 pixels
  • 9. <HR> tag ALIGN attribute  HR are centered by default. To specify your desired alignment, you set the ALIGN attribute of the <HR> tag to LEFT, RIGHT, or CENTER.  The syntax for doing this is: <HR ALIGN= alignment> Ex. <HR ALIGN= left> <HR NOSHADE> if you don’t want the HR to have shading.