FamilySearch HTML Backgrounds: Difference between revisions
m (Text replacement - "\<p(.*?)\>(.*?)\<\/p>" to "<span$1>$2</span>") |
mNo edit summary |
||
| (12 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
{{HTML School}}{{HTML Tutorial Sidebar}} | {{HTML School}}{{HTML Tutorial Sidebar}} | ||
<div style=" float:right; width: | <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: | <div style="font-size:14pt; font-family:arial; ">[[FamilySearch HTML Multi-attributes|<< Previous Chapter]] </div> | ||
</td> | </td> | ||
<td> | <td> | ||
<div style="font-size: | <div style="font-size:14pt; font-family:arial; text-align:right; ">[[Help:Wiki University HTML-- Padding|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> | |||
---- | ---- | ||
==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=" | <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=" | <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: | ||
< | <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> | ||
< | <p>Again, here is the link to a list of colors accepted by all browsers: [http://www.w3schools.com/html/html_colornames.asp list]. </p> | ||
---- | |||
==Try these out== | |||
[[File:Tests.gif|100px|right]] | [[File:Tests.gif|100px|right]] | ||
<!--Exercises --------------------------------------------------------------> | <!--Exercises --------------------------------------------------------------> | ||
| Line 39: | Line 35: | ||
</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; ">[[ | <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 45: | ||
<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; ">[[ | <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 57: | ||
<table style="width:100%; "> | <table style="width:100%; "> | ||
<tr><td> | <tr><td> | ||
<div style="font-size: | <div style="font-size:14pt; font-family:arial; ">[[FamilySearch HTML Multi-attributes|<< Previous Chapter]] </div> | ||
</td> | </td> | ||
<td> | <td> | ||
<div style="font-size: | <div style="font-size:14pt; font-family:arial; text-align:right; ">[[Help:Wiki University HTML-- Padding|Next Chapter >>]] </div> | ||
</td></tr> | </td></tr> | ||
</table> | </table> | ||
{{reflist}} | {{reflist}} | ||
</div> | </div> | ||
__NOTOC__ | __NOTOC__ | ||
[[Category:HTML Lessons]] | [[Category:HTML Lessons]] | ||
Revision as of 09:37, 2 September 2015
Lessons
- HOME
- Introduction
- Headers
- Lists
- Nesting Lists
- Comments
- Paragraphs
- Fonts - Changing
- Font Size
- Font Colors
- Font Bold-Italics
- Padding
- Margins
- Borders
- Width and Height
- Alignment
- Tables
- Tables - Borders
- Tables - Widths
- Tables - Captions
- Tables - Col Labels
- Tables - Cells
- Tables - Rows
- Tables - Placement
- Tables - Sorting
- Tables - Scrolling
- Tables - Col Only
- Tables - Col Spans
- Tables - Row Spans
- Infobox - Creating
- Infobox - Placing
- Infobox - If function
- Sidebars
- Navboxes
- Position - Relative
- Position - Absolute
- Misc
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.
Again, here is the link to a list of colors accepted by all browsers: list.
Try these out[edit | edit source]
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.