SlideShare a Scribd company logo
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.

More Related Content

Similar to Html web designing background and rules

Html 2
Html   2Html   2
Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_language
Ishaq Shinwari
 
presentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptxpresentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptx
ssuser8001a61
 
HTML Presentation
HTML Presentation HTML Presentation
HTML Presentation
Nothinguse193
 
Animation in the web
Animation in the webAnimation in the web
Animation in the web
Vishal Polley
 
Presentation of Hyper Text Markup Language
Presentation of Hyper Text Markup LanguagePresentation of Hyper Text Markup Language
Presentation of Hyper Text Markup Language
JohnLagman3
 
html-150424090224-conversion-gate0.2.pdf
html-150424090224-conversion-gate0.2.pdfhtml-150424090224-conversion-gate0.2.pdf
html-150424090224-conversion-gate0.2.pdf
JohnLagman3
 
Css
CssCss
Html siva
Html sivaHtml siva
Html siva
ch samaram
 
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
adampcarr67227
 
Web fundamental concept and tags
Web fundamental concept and tags Web fundamental concept and tags
Web fundamental concept and tags
shameen khan
 
HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
Arvind Kumar
 
Html
HtmlHtml
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
Bulldogs83
 
Css
CssCss
Css
CssCss
Html
HtmlHtml
HTML5 with PHP.ini
HTML5 with PHP.iniHTML5 with PHP.ini
HTML5 with PHP.ini
Abhinav Bhatnagar
 
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
Sivakumar R D .
 
Chapter 2.pdf
Chapter 2.pdfChapter 2.pdf
Chapter 2.pdf
AnisZahirahAzman
 

Similar to 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
 
presentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptxpresentation_html_ppt_1534512076_351187.pptx
presentation_html_ppt_1534512076_351187.pptx
 
HTML Presentation
HTML Presentation HTML Presentation
HTML Presentation
 
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
 

More from Jesus Obenita Jr.

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
Jesus Obenita Jr.
 
Organization and management 2 Management Function
Organization and management 2 Management FunctionOrganization and management 2 Management Function
Organization and management 2 Management Function
Jesus Obenita Jr.
 
Organization and management 1
Organization and management 1Organization and management 1
Organization and management 1
Jesus Obenita Jr.
 
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
Jesus Obenita Jr.
 
Ms excel 2013 formatting worksheets
Ms excel 2013 formatting worksheetsMs excel 2013 formatting worksheets
Ms excel 2013 formatting worksheets
Jesus Obenita Jr.
 
Ms excel 2013 data management
Ms excel 2013 data managementMs excel 2013 data management
Ms excel 2013 data management
Jesus Obenita Jr.
 
Microsoft Excel introduction
Microsoft Excel introductionMicrosoft Excel introduction
Microsoft Excel introduction
Jesus Obenita Jr.
 
Word 2013 working with pictures
Word 2013 working with picturesWord 2013 working with pictures
Word 2013 working with pictures
Jesus Obenita Jr.
 
Word 2013 Formatting Page
Word 2013 Formatting PageWord 2013 Formatting Page
Word 2013 Formatting Page
Jesus Obenita Jr.
 
Word 2013 8
Word 2013 8Word 2013 8
Word 2013 8
Jesus Obenita Jr.
 
Ms word 2013 7
Ms word 2013 7Ms word 2013 7
Ms word 2013 7
Jesus Obenita Jr.
 
Ms word 2013 6
Ms word 2013 6Ms word 2013 6
Ms word 2013 6
Jesus Obenita Jr.
 
Ms word 2013 4
Ms word 2013 4Ms word 2013 4
Ms word 2013 4
Jesus Obenita Jr.
 
Ms word 2013 2
Ms word 2013 2Ms word 2013 2
Ms word 2013 2
Jesus Obenita Jr.
 
Ms word 2013
Ms word 2013Ms word 2013
Ms word 2013
Jesus Obenita Jr.
 
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
Jesus Obenita Jr.
 
Word processor
Word processorWord processor
Word processor
Jesus Obenita Jr.
 
Session 2 test construction.mt's
Session 2   test construction.mt'sSession 2   test construction.mt's
Session 2 test construction.mt's
Jesus Obenita Jr.
 
Cooking ingredients
Cooking ingredientsCooking ingredients
Cooking ingredients
Jesus Obenita Jr.
 
Color theory
Color theoryColor theory
Color theory
Jesus Obenita Jr.
 

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

Recently uploaded

Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
Federico Razzoli
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 

Recently uploaded (20)

Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 

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.