Difference between revisions of "Help:Wiki University HTML-- Font Bold-Italics"

From FamilySearch Wiki
Jump to: navigation, search
m
m
Line 38: Line 38:
 
</td></tr>
 
</td></tr>
 
</table>
 
</table>
 +
<!--italics----------------------------------------------------------------------->
 
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">ITALICIZED WORDS</h2>
 
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">ITALICIZED WORDS</h2>
<table style="float:right; "><tr><td style="font-size:24pt; border:2px solid black;  width:100px; text-align:center; vertical-align:middle; padding:5px ">Italics</td></tr></table>
 
 
<p>For a word to appear in italicized text, you use the "font-style:italic" attribute</p>
 
<p>For a word to appear in italicized text, you use the "font-style:italic" attribute</p>
 
<div style="border:2px solid crimson; background-color:moccasin;  
 
<div style="border:2px solid crimson; background-color:moccasin;  
Line 53: Line 53:
 
<p>It will look like this:</p>
 
<p>It will look like this:</p>
 
''Lorem ipsum dolor sit amet, consectetur adipiscing elit''.
 
''Lorem ipsum dolor sit amet, consectetur adipiscing elit''.
 
+
<table style="width:100%; border:3px solid green; ">
<table style="float:right; "><tr><td style="font-size:18pt; border:2px solid black;  width:100px; text-align:center; vertical-align:middle; padding:5px "><nowiki><em></nowiki></td></tr></table>
 
<p>An '''alternate method''' to make text bold is to flank the word or words with "em" tags like so:</p>
 
<div style="border:2px solid crimson; background-color:moccasin;
 
padding:10px; width:100%; font-size:10pt; font-family:Courier New">
 
<font color="red"><nowiki><em></nowiki></font color>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<font color="red"><nowiki></em></nowiki></font color></div>
 
<br><br><table style="width:100%; border:3px solid green; ">
 
 
<tr>
 
<tr>
 
<td style="width:50%; border:1px solid green; text-align:center; font-size:16pt; padding:5px; ">HTML</td>
 
<td style="width:50%; border:1px solid green; text-align:center; font-size:16pt; padding:5px; ">HTML</td>
Line 73: Line 67:
 
</table>
 
</table>
  
<br>
+
 
<p style="border:2px solid red; padding:5px">If you are wondering if you can use both the strong and em tags together, the answer is no.  The code will not work if you combine the two tags like so: <nowiki><strong><em></nowiki>  You have to use "font-family" and"font-weight" to have bold italic text in HTML.
 
 
<div style="border:2px solid crimson; background-color:moccasin;  
 
<div style="border:2px solid crimson; background-color:moccasin;  
 
padding:10px; width:100%; font-size:10pt; font-family:Courier New">
 
padding:10px; width:100%; font-size:10pt; font-family:Courier New">

Revision as of 18:09, 18 January 2018

MAIN PAGE
WIKI
WIKI MISSIONARY
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons

  1. HOME
  2. Introduction
  3. Headers
  4. Lists
  5. Nesting Lists
  6. Comments
  7. Paragraphs
  8. Fonts - Changing
  9. Font Size
  10. Font Colors
  11. Font Bold-Italics
  12. Padding
  13. Margins
  14. Borders
  15. Width and Height
  16. Alignment
  17. Tables
  18. Tables - Borders
  19. Tables - Widths
  20. Tables - Captions
  21. Tables - Col Labels
  22. Tables - Cells
  23. Tables - Rows
  24. Tables - Placement
  25. Tables - Sorting
  26. Tables - Scrolling
  27. Tables - Col Only
  28. Tables - Col Spans
  29. Tables - Row Spans
  30. Infobox - Creating
  31. Infobox - Placing
  32. Infobox - If function
  33. Sidebars
  34. Navboxes
  35. Position - Relative
  36. Position - Absolute
  37. Misc

Flexbox/CSS Grid

  1. Flexbox Training

Additional Helps


BOLD WORDS

For a word to appear in bold text, you apply the "font-weight:bold" attribute:

<p style="font-weight:bold">Lorem</p> ipsum dolor sit amet, consectetur adipiscing elit.
It will look like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

BOLD SENTENCES

The same method is used for sentences in paragraphs.

<p style="font-weight:bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

It will look like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Here is the contrast between HTML and Wikitext

HTML Wikitext

<p style="font-weight:bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

'''Lorem ipsum dolor sit amet, consectetur adipiscing elit'''.

ITALICIZED WORDS

For a word to appear in italicized text, you use the "font-style:italic" attribute

<p style="font-style:italic">Lorem</p> ipsum dolor sit amet, consectetur adipiscing elit.

It will look like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ITALICIZED SENTENCES

The same method is used for sentences or paragraphs. Place two apostrophes on either end of the sentence or paragraph:

<p style="font-style:italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

It will look like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML Wikitext

<p style="font-style:italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

''Lorem ipsum dolor sit amet, consectetur adipiscing elit.''


<p style="font-weight:bold; font-style:italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

TRY THESE OUT . . . . .

Tests.gif
Exercises
  • Make the second word of each sentence of the lorem ipsum bold.

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.

  • Make the next to the last sentence of lorem ipsum italic.
  • Make the last sentence both bold and italics.


Quick Quiz
  • To make a sentence in bold text, you use the "text-weight:bold" attribute
A. True
B. False
  • To make a word italicized, you flank the "text-style:italic" attribute
A. True
B. False