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

From FamilySearch Wiki
Jump to navigation Jump to search
VisualWikitext
m (Modified documentation per Visual Editor Upgrade)
 
(25 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------------------------------------------------------------------------------------->
  
Line 20: Line 76:
  
 
<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">[[File:Visualeditor22.PNG|300px|right]]Click "Edit source" and highlight text you want to make either an internal or external link. The following down down menu appears.  ''(Note: this menu might list possible links you may want to use depending on what you highlighted.)''
+
<td style="border:1px solid lightgrey; padding:10px">[[File:VE Internal Link.PNG|300px|right]]
−
'''Internal links'''
+
'''TO CREATE A LINK'''<br>
−
*"Search pages" tab is for selecting links to articles within the Wiki. Suggested articles might be shown. Otherwise, enter name of article you want to link too. ''(No double square brackets required)''
+
* Click the '''Edit''' tab.
−
'''External links'''
+
* Highlight the text you want to make into a link, then click the '''link icon'''.
−
*"External link" tab is for entering the URL of the external link without the square brackets.
+
* ''Note: the text you highlighted is displayed in the search box.''
−
'''To save links'''
+
* 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>.
−
*Click "Done" when finished
+
<br>
−
*Click "Save page" in tool bar.
+
'''INTERNAL LINK'''
−
*Fill in "Summary" on panel that appears and then "Save page."
+
* 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.
 +
<br>
 +
'''EXTERNAL LINK'''
 +
[[File:VE External Link.PNG|300px|right]]
 +
* 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>
Line 44: 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.
 
*The "Search pages" tab is for entering external links.
 
::A. True
 
::A. True
Line 54: Line 126:
 
::B. False
 
::B. False
  
−
*You can only use one of the suggested internal links when you click "Search pages"?
+
*You can only use one of the suggested internal links when you click "Search pages"
 
::A. True
 
::A. True
 
::B. False
 
::B. False
  
−
</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--------------------------->  
+
</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>
−
{| style="width:100%;"
+
 
−
|-
+
 
−
| <div style="font-size:14pt; font-family:arial;">[[Help:Wiki University VisualEditor--Text Styling|&lt;&lt; Previous Chapter]] </div>  
+
<!--Exercises -------------------------------------------------------------->
−
| <div style="font-size:14pt; font-family:arial; text-align:right;">[[Help:Wiki University VisualEditor--Cite References|Next Chapter &gt;&gt;]] </div>
+
<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; border-radius:5px ">
−
|}
+
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
 +
<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."
  
−
<br>
 
 
</div>
 
</div>
 +
<div style="background-color:lightgreen; width:100%; height:35px; padding-top:10px; ">
  
−
__NOTOC__
+
</div>
−
[[Category:Wikitext Lessons]]
+
</div>
 +
<!---------------------------------END OF MATERIAL------------------------------------------->
 +
</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."
Retrieved from "https://wwwp.familysearch.org/wiki/en/index.php?title=Help:Wiki_University_VisualEditor--Links&oldid=4149412"