Difference between revisions of "Help:Wiki University VisualEditor--Links"

From FamilySearch Wiki
Jump to navigation Jump to search
(Created page with "{{VisualEditor School}}{{VisualEditor Tutorial Sidebar}} <div style="float:right; width:79%; margin-top:-35px"> <table style="width:100%; "> <tr> <td style="font-size:14pt; fo...")
 
m (Modified documentation per Visual Editor Upgrade)
 
(35 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{VisualEditor School}}{{VisualEditor Tutorial Sidebar}}
+
<div style="display:grid; grid-template-columns:1fr 1fr 2fr 2fr 2fr 2fr">
<div style="float:right; width:79%; margin-top:-35px">
+
<!--------------row 1-------------------------->
<table style="width:100%; ">
+
<!--tool bar--------------------------------------------------->
<tr>
+
{{VisualEditor School}}
<td style="font-size:14pt; font-family:arial;">[[Help:Wiki University VisualEditor--Text Styling|&lt;&lt; Previous Chapter]]</td>
+
<!----------------row 2---------------------------->
<td style="font-size:14pt; font-family:arial; text-align:right;">[[Help:Wiki University VisualEditor--Cite References|Next Chapter &gt;&gt;]] </td></tr>
+
<!-------------------menu-------------------------------->
</table>
+
<div style="grid-column:1/3; background-color:#FFEDCC; box-shadow:1px 1px 5px #888888">{{VisualEditor Tutorial Sidebar}}</div>
----
+
<!-----------------------main------------------------>
==VisualEditor toolbar==
+
<!-------------------------------chapters top row---------------------------------->
<table style="width:100%"><tr><td>[[File:Visualeditor7.PNG|1000px]]</td></tr></table>
+
<div style="grid-column:3/8; padding-left:0.5em">
 +
<!-------------------------------chapters top row---------------------------------->
 +
<div style="display:flex; justify-content:space-between; padding:10px; margin-bottom:-1em">
 +
<div style="font-size:1.3em">[[Help:Wiki University VisualEditor--Text Styling|<< Previous Chapter]]</div>
 +
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University VisualEditor--Cite References|Next Chapter >>]]</span></div>
 +
</div>
 +
<div style="margin-left:0.5em">
 +
<!-----------------------MAIN MATERIAL BELOW THIS LINE-------------------------------------------->
 +
==Visual Editor toolbar==
 +
<div style="display:flex">
 +
<!---------------------------UNDO ARROW-------------------------------------------------------------->
 +
<div style="flex:0.75; border-left:1px solid lightblue; border-bottom:1px solid lightgray; border-top:1px solid lightblue;">[[File:UndoVE.jpg|40px]]</div>
 +
<!---------------------------------REDO ARROW------------------------------------------------------------->
 +
<div style="flex:0.75; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue;">[[File:RedoVE.jpg|40px]]</div>
 +
<!---------------------------------------PARAGRAPH --------------------------------------------------------->
 +
<div style="flex:3; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">Paragraph <div style="margin-left:3vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
 +
<!--------------------------------------TEXT STYLE--------------------------------------------------->
 +
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"><div style="font-size:1.3vw; font-style:italic; text-decoration: underline">'''A'''</div><div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
 +
<!------------------------------------LINKS------------------------------------------------------------>
 +
<div style="flex:1; display:flex; align-items:center; justify-content:center; border:1px solid red">
 +
<div style="display:flex;">[[File:Link.png|50px]]
 +
</div>
 +
</div>
 +
<div style="flex:1.5; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">Cite<div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
 +
<!------------------------------LISTS---------------------------------------------------------------------->
 +
<div style="flex:1.2; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">
 +
 
 +
<div style="display:flex; flex-direction:column">
 +
<div style="display:flex"><div style="width: 5px; height: 5px; background: black; border-radius: 2.5px; margin-right:3px; margin-bottom:3px"></div><div style="display:flex; align-items:center; width:15px; height:5px"><div style="width:15px; height:3px; background-color:black"></div></div></div>
 +
<div style="display:flex"><div style="width: 5px; height: 5px; background: black; border-radius: 2.5px; margin-right:3px; margin-bottom:3px"></div><div style="display:flex; align-items:center; width:15px; height:5px"><div style="width:15px; height:3px; background-color:black"></div></div></div>
 +
<div style="display:flex"><div style="width: 5px; height: 5px; background: black; border-radius: 2.5px; margin-right:3px; margin-bottom:3px"></div><div style="display:flex; align-items:center; width:15px; height:5px"><div style="width:15px; height:3px; background-color:black"></div></div></div>
 +
</div>
 +
<div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div>
 +
 
 +
</div>
 +
<!----------------------------------------------INSERT------------------------------------------------------->
 +
<div style="flex:1.5; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">Insert<div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
 +
<!---------------------------------------------------------OMEGA----------------------------------------------------->
 +
<div style="flex:0.8; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"><span style="font-size:2vw">Ω</span></div>
 +
<!-------------------------------------------------------------------HELP----------------------------------------------------->
 +
<div style="flex:3; display:flex; align-items:center; justify-content:flex-end; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"></div>
 +
<div style="flex:1; display:flex; align-items:center; justify-content:flex-end; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">
 +
<div style="display:flex; align-items:center; justify-content:center; width:20px; height:20px; font-size:1.5em; margin-right:10px">'''?'''</div>
 +
</div>
 +
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">
 +
<div style="display:flex; flex-direction:column">
 +
<div style="width:15px; height:3px; margin-bottom:3px; background-color:black"></div>
 +
<div style="width:15px; height:3px; margin-bottom:3px; background-color:black"></div>
 +
<div style="width:15px; height:3px; background-color:black"></div>
 +
</div>
 +
</div>
 +
<!-------------------------------------------------------------TO GO WIKITEXT--------------------------------------------->
 +
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"><span style="font-size:1.3vw; font-weight:bold">[[File:VE Switch icon.png]]</span></div>
 +
<!--------------------------------------------------------SAVE--------------------------------------------------------->
 +
<div style="flex:2; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue; color:white; background-color:lightgray">Save changes...</div>
 +
</div>
 +
 
 
<!--visualeditor toolbar------------------------------------------------------------------------------------->
 
<!--visualeditor toolbar------------------------------------------------------------------------------------->
  
==VisualEditor in detail==
+
==Links==
  
 
<!--detailed explanation of items on VisualEditor toolbar------------------------------------------->
 
<!--detailed explanation of items on VisualEditor toolbar------------------------------------------->
  
 
<table style="width:100%; border:1px solid lightgrey">
 
<table style="width:100%; border:1px solid lightgrey">
 
<tr>
 
  
 
<!--links---------------------------------------------------------------------------------------->
 
<!--links---------------------------------------------------------------------------------------->
  
 
<tr>
 
<tr>
<td style="border:1px solid lightgrey">
+
<td style="border:1px solid red">
[[File:LinkVE.jpg|100px]]</td>
+
<div style="display:flex; padding:5px; width:40px">[[File:Link.png]]</div></td>
<td style="border:1px solid lightgrey">Links</td>
+
<td style="border:1px solid lightgrey; padding:5px; width:50px">Links</td>
<td style="border:1px solid lightgrey">Turns a bit of highlighted text into either an internal or external link.</td>
+
<td style="border:1px solid lightgrey; padding:10px">[[File:VE Internal Link.PNG|300px|right]]
</tr>
+
'''TO CREATE A LINK'''<br>
 
+
* Click the '''Edit''' tab.
<!--Cite--------------------------------------------------------------------------------->
+
* Highlight the text you want to make into a link, then click the '''link icon'''.
 
+
* ''Note: the text you highlighted is displayed in the search box.''
<tr>
+
* Select either the '''FamilySearch Wiki''' tab to create an <u>internal link</u> or the '''External site''' tab to create an <u>external link</u>.
<td style="border:1px solid lightgrey">
+
<br>
[[File:Visualeditor8.PNG|100px]]</td>
+
'''INTERNAL LINK'''
<td style="border:1px solid lightgrey">Allows you to place references or footnotes anywhere in the article</td>
+
* After clicking on the ''FamilySearch Wiki'' tab, enter the article title into the search box.
<td style="border:1px solid lightgrey">[[File:Visualeditor9.PNG|300px|right]][[File:Visualeditor10.PNG|300px|right]][[File:Visualeditor11.PNG|300px|right]]
+
* If you don't know the article title, enter a keyword and a list of suggested articles will be displayed in a drop down menu. Click on the article to which you want to link.
When you click on "Cite," the first panel appears.
+
* Click '''Done''' to add the link.
*You have two choices: Basic and Re-use. 
+
* To save your changes, click '''Save changes...''' on the Visual Editor tool bar, enter a Summary description of your changes, then click on the Save changes again.
*Clicking Basic brings up the second panel.
+
<br>
**The cursor will be blinking where you are to enter your reference or footnote. The tool bar just above, allows you to change your entry into a link or change the fontAt the bottom of this panel you will notice you can use an existing reference.
+
'''EXTERNAL LINK'''
*Clicking Re-use will bring up the third panel.
+
[[File:VE External Link.PNG|300px|right]]
**This will allow you to select an existing reference without having to retype the same reference again.
+
* After clicking on the ''External Site'' tab, enter the URL for the external link into the search box.
 +
* Click '''Done''' to add the link.
 +
* To save your changes, click '''Save changes...''' on the Visual Editor tool bar, enter a Summary description of your changes, then click on the Save changes again.
 +
<br>
 +
'''LINK to a Page Section'''<br>
 +
There are times you may want to, not only link to a page, but go to a specific section or header on that page. ''Note: this may be done for internal links but NOT external links.''
 +
* Click on the ''FamilySearch Wiki'' tab.
 +
* Enter the article title into the search box.   
 +
* Place a pound sign ('''#''') immediately after the article title.
 +
* Directly following the pound sign, add the "exact" '''header name''' to which you desire to link.
 +
* Click '''Done''' and save your changes.
 +
* For example: McDonald County, Missouri Genealogy<font color="blue">#County Courthouse</font color>.
 
</td>
 
</td>
 
</tr>
 
</tr>
  
<!--bullet list structure------------------------------------------------------------------------------->
 
 
<tr>
 
<td style="border:1px solid lightgrey">
 
[[File:Visualeditor12.PNG|100px]]</td>
 
<td style="border:1px solid lightgrey">List structure</td>
 
<td style="border:1px solid lightgrey">[[File:Visualeditor13.PNG|200px|right]]If you click on bullet list this panel appears. 
 
*The first icon creates a bullet list.
 
*The second icon creates a numbered list.
 
*The following two icons allows you to indent to create sub bullet list or sub numbered lists.</td>
 
</tr>
 
  
  
Line 64: Line 118:
 
[[File:Tests.gif|100px|right]]
 
[[File:Tests.gif|100px|right]]
 
<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"><div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgray;">Quick Quiz</div> <div style="padding-top:12px; padding-left:10px;">
 
<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"><div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgray;">Quick Quiz</div> <div style="padding-top:12px; padding-left:10px;">
*What does the undo arrow allow you to do?
+
*The "Search pages" tab is for entering external links.
 +
::A. True
 +
::B. False
  
::A. Fix a mistake.
+
*The "External link" tab in the drop down menu is for external links.
::B. Reverse a link entered incorrectly
+
::A. True
::C. Fix a page that was messed up by someone else but no other edits have been made since then.
+
::B. False
::D. All of the above.
 
  
*How many kinds of headings are there?
+
*You can only use one of the suggested internal links when you click "Search pages"
 +
::A. True
 +
::B. False
  
::A. 4
+
</div> <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 VisualEditor Tutorial Answers#Links|Check your answers ]] </div> </div> </div>
::B. 5
 
::C. 6
 
::D. 7
 
  
*Where can the Page title header be used on a page?
 
  
::A. Anywhere
+
<!--Exercises -------------------------------------------------------------->
::B. Next to the last header
+
<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; border-radius:5px ">
::C. Only on Tuesdays
+
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
::D. None of the above
+
<div style="padding-top:12px; padding-left:10px; ">
 +
In your Sandbox create the following links using the Visual Editor:
 +
*Create an external link to "Wikipedia" using the word "Wikipedia."
 +
*Create an external link to "w3Schools.com" using the word "w3Schools."
 +
*Create an internal link to "Kentucky, United States Genealogy" using the word "Kentucky."
 +
*Create an internal link to "Kentucky, United States Genealogy" and to the section "Kentucky Information" using the words "Genealogical information for Kentucky."
  
*To make some text '''bold''', where do you click?
+
</div>
::A. Paragraph
+
<div style="background-color:lightgreen; width:100%; height:35px; padding-top:10px; ">
::B. Numbered list
 
::C. Links
 
::D. None of the above
 
  
*To make a list with bullet points, you click on?
 
::A. Text style
 
::B. Can only do it in Wikitext
 
::C. Bullet list
 
::D. All of the above
 
 
*To remove bullet points from a list you just created, you click on?
 
::A. Bullet lists
 
::B. Numbered lists
 
::C. Can only do it in Wikitext
 
::D. None of the above.
 
</div> <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 VisualEditor Tutorial Answers#VisualEditor toolbar (Part 1)|Check your answers ]] </div> </div> </div> <!--BOTTOM links to next chapter and previous chapter--------------------------->
 
{| style="width:100%;"
 
|-
 
| <div style="font-size:14pt; font-family:arial;">[[Help:Wiki University VisualEditor--Text Styling|&lt;&lt; Previous Chapter]] </div>
 
| <div style="font-size:14pt; font-family:arial; text-align:right;">[[Help:Wiki University VisualEditor--Cite References|Next Chapter &gt;&gt;]] </div>
 
|}
 
 
<br>
 
 
</div>
 
</div>
 
+
</div>
__NOTOC__
+
<!---------------------------------END OF MATERIAL------------------------------------------->
[[Category:Wikitext Lessons]]
+
</div>
 +
<!-------------------------------chapters bottom---------------------------------------------------->
 +
<div style="clear:both"></div>
 +
<div style="display:flex; justify-content:space-between; padding:10px">
 +
<div style="font-size:1.3em">[[Help:Wiki University VisualEditor--Text Styling|<< Previous Chapter]]</div>
 +
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University VisualEditor--Cite References|Next Chapter >>]]</span></div>
 +
</div>
 +
{{reflist}}
 +
</div>
 +
__NOTOC__
 +
[[Category:Wiki Lessons]]

Latest revision as of 17:41, 18 November 2020

Visual Editor toolbar[edit | edit source]

UndoVE.jpg
RedoVE.jpg
Paragraph
A
Link.png
Cite
Insert
Ω
?
VE Switch icon.png
Save changes...


Links[edit | edit source]

Link.png
Links
VE Internal Link.PNG

TO CREATE A LINK

  • Click the Edit tab.
  • Highlight the text you want to make into a link, then click the link icon.
  • Note: the text you highlighted is displayed in the search box.
  • Select either the FamilySearch Wiki tab to create an internal link or the External site tab to create an external link.


INTERNAL LINK

  • After clicking on the FamilySearch Wiki tab, enter the article title into the search box.
  • If you don't know the article title, enter a keyword and a list of suggested articles will be displayed in a drop down menu. Click on the article to which you want to link.
  • Click Done to add the link.
  • To save your changes, click Save changes... on the Visual Editor tool bar, enter a Summary description of your changes, then click on the Save changes again.


EXTERNAL LINK

VE External Link.PNG
  • After clicking on the External Site tab, enter the URL for the external link into the search box.
  • Click Done to add the link.
  • To save your changes, click Save changes... on the Visual Editor tool bar, enter a Summary description of your changes, then click on the Save changes again.


LINK to a Page Section
There are times you may want to, not only link to a page, but go to a specific section or header on that page. Note: this may be done for internal links but NOT external links.

  • Click on the FamilySearch Wiki tab.
  • Enter the article title into the search box.
  • Place a pound sign (#) immediately after the article title.
  • Directly following the pound sign, add the "exact" header name to which you desire to link.
  • Click Done and save your changes.
  • For example: McDonald County, Missouri Genealogy#County Courthouse.

Try these out[edit | edit source]

Tests.gif
Quick Quiz
  • The "Search pages" tab is for entering external links.
A. True
B. False
  • The "External link" tab in the drop down menu is for external links.
A. True
B. False
  • You can only use one of the suggested internal links when you click "Search pages"
A. True
B. False


Exercises

In your Sandbox create the following links using the Visual Editor:

  • Create an external link to "Wikipedia" using the word "Wikipedia."
  • Create an external link to "w3Schools.com" using the word "w3Schools."
  • Create an internal link to "Kentucky, United States Genealogy" using the word "Kentucky."
  • Create an internal link to "Kentucky, United States Genealogy" and to the section "Kentucky Information" using the words "Genealogical information for Kentucky."