FamilySearch HTML Backgrounds: Difference between revisions

From FamilySearch Wiki
VisualWikitext
m (Text replacement - "\<p(.*?)\>(.*?)\<\/p>" to "<span$1>$2</span>")
mNo edit summary
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{HTML School}}{{HTML Tutorial Sidebar}}
{{HTML School}}{{HTML Tutorial Sidebar}}
<div style=" float:right; width:73%; margin-bottom:0px; margin-top:-30px">
<div style=" float:right; width:70%; margin-bottom:0px; ">
<!--first table links at top of page---------------------------------------------->
<!--first table links at top of page---------------------------------------------->
<table style="width:100%; margin-bottom:-10px; ">
<table style="width:100%; margin-bottom:-10px; ">
<tr><td>
<tr><td>
<div style="font-size:1.2em; font-family:arial">[[FamilySearch HTML Multi-attributes|<< Previous Chapter]] </div>
<div style="font-size:14pt; font-family:arial;  ">[[FamilySearch HTML Multi-attributes|<< Previous Chapter]] </div>
</td>
</td>
<td>
<td>
<div style="font-size:1.2em; font-family:arial; text-align:right">[[Help:Wiki University HTML-- Padding|Next Chapter >>]] </div>
<div style="font-size:14pt; font-family:arial; text-align:right; ">[[ FamilySearch HTMLPadding|Next Chapter >>]] </div>
</td></tr>
</td></tr>
</table>
</table>
==Backgrounds==
<p style="background-color:lightblue; padding:5px; ">You have leaned how to change the font, size of the font, and the color of the font inside a paragraph. What if we only want to change the color of the background of a paragraph for emphasis?</p>
----
----
==Backgrounds==
<p style="
background-color:lightblue;
padding:5px;
">You have leaned how to change the font, size of the font, and the color of the font inside a paragraph. What if we only want to change the color of the background of a paragraph for emphasis?</p>


==Changing Backgrounds==
==Changing Backgrounds==
*To change the background color we use the following attribute:<br>
*To change the background color we use the following attribute:<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="blue">background-color:</font><font color="red">select a color</font color></div>
<div style="background-color:wheat; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="blue">background-color:</font><font color="red">select a color</font color></div>
<p>Let's take our lorem ipsum paragraph and change the background color to blue and the font to white.  Here is the attribute coding:<br><br>
<p>Let's take our lorem ipsum paragraph and change the background color to blue and the font to white.  Here is the attribute coding:<br><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="blue">background-color:</font><font color="red">blue; </font><font color="blue">color:</font><font color="red">white</font color>">Lorem ipsum...<nowiki></span></nowiki></font color></div><br>
<div style="background-color:wheat; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><nowiki><p style="</nowiki><font color="blue">background-color:</font><font color="red">blue; </font><font color="blue">color:</font><font color="red">white</font color>">Lorem ipsum...<nowiki></p></nowiki></font color></div><br>
*Here is the result:
*Here is the result:
<span style="color:white; background-color:blue; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span>
<p style="color:white; background-color:blue; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</p>
----


<span>Again, here is the link to a list of colors accepted by all browsers: [http://www.w3schools.com/html/html_colornames.asp list]. </span>
==Try these out==
 
 
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-5px; margin-top:-20px; padding:0px">TRY THESE OUT . . . . . </h2>
[[File:Tests.gif|100px|right]]
[[File:Tests.gif|100px|right]]
<!--Exercises -------------------------------------------------------------->
<!--Exercises -------------------------------------------------------------->
Line 39: Line 33:
</div>
</div>
<div style="background-color:lightgreen; width:100%; height:35px; padding-top:10px; ">
<div style="background-color:lightgreen; width:100%; height:35px; padding-top:10px; ">
<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">[[FamilySearch HTML Tutorial Answers#Backgrounds|Check your answers ]] </div>
<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">[[Help:Wiki University Wikitext--Tutorial Answers#Backgrounds|Check your answers ]] </div>
</div>
</div>
</div>
</div>
Line 49: Line 43:
<div style="padding-top:12px; padding-left:10px; ">
<div style="padding-top:12px; padding-left:10px; ">
*How to make text invisible on a page without erasing it.
*How to make text invisible on a page without erasing it.
:A. Black text on a black background.
::A. Black text on a black background.
:B. White text on a white background.
::B. White text on a white background.
:C. All of the above.
::C. All of the above.
</div>
</div>
<div style="background-color:lightgray; width:100%; height:35px; padding-top:10px; ">
<div style="background-color:lightgray; width:100%; height:35px; padding-top:10px; ">
<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">[[FamilySearch HTML Tutorial Answers#Backgrounds|Check your answers ]] </div>
<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">[[Help:Wiki University Wikitext--Tutorial Answers#Backgrounds|Check your answers ]] </div>
</div>
</div>
</div>
</div>
Line 61: Line 55:
<table style="width:100%; ">
<table style="width:100%; ">
<tr><td>
<tr><td>
<div style="font-size:1.2em; font-family:arial">[[FamilySearch HTML Multi-attributes|<< Previous Chapter]] </div>
<div style="font-size:14pt; font-family:arial;  ">[[FamilySearch HTML Multi-attributes|<< Previous Chapter]] </div>
</td>
</td>
<td>
<td>
<div style="font-size:1.2em; font-family:arial; text-align:right">[[Help:Wiki University HTML-- Padding|Next Chapter >>]] </div>
<div style="font-size:14pt; font-family:arial; text-align:right; ">[[FamilySearch HTML Padding|Next Chapter >>]] </div>
</td></tr>
</td></tr>
</table>
</table>
----
{{reflist}}
{{reflist}}
</div>
</div>
__NOTOC__
__NOTOC__
[[Category:HTML Lessons]]
[[Category:Wikitext Lessons]]

Revision as of 14:32, 22 August 2015

Lessons

Flexbox/CSS Grid

Additional Helps

Backgrounds[edit | edit source]

You have leaned how to change the font, size of the font, and the color of the font inside a paragraph. What if we only want to change the color of the background of a paragraph for emphasis?

Changing Backgrounds[edit | edit source]

  • To change the background color we use the following attribute:
background-color:select a color

Let's take our lorem ipsum paragraph and change the background color to blue and the font to white. Here is the attribute coding:

<p style="background-color:blue; color:white">Lorem ipsum...</p>

  • Here is the result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Try these out[edit | edit source]

Tests.gif
Exercises
  • What is the coding to change the color of the background of the lorem ipsum paragraph to green and the text to orange?
  • Create a paragraph of your favorite color for the background of the lorem ipsum paragraph and another color for the text from the list of colors.


Quick Quiz
  • How to make text invisible on a page without erasing it.
A. Black text on a black background.
B. White text on a white background.
C. All of the above.
Retrieved from "https://integration-ru.familysearch.org/en/wiki/index.php?title=FamilySearch_HTML_Backgrounds&oldid=2269663"