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

From FamilySearch Wiki
Jump to navigation Jump to search
m (→‎Try these out: minor edit)
m (Modified documentation per Visual Editor Upgrade)
 
(14 intermediate revisions by 4 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------------------------>
 +
<!-------------------------------chapters top row---------------------------------->
 +
<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==
 
==Visual Editor toolbar==
<table style="width:100%"><tr><td>[[File:Visualeditor7.PNG|1000px]]</td></tr></table>
+
<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 drop 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 to. ''(No double square brackets required as with Wikitext coding.)''
+
* Click the '''Edit''' tab.
'''Section of a page with Internal links'''
+
* Highlight the text you want to make into a link, then click the '''link icon'''.
*If you want to link to a particular place on a page rather than the whole page, place a pound sign (#) after the title of the article and the exact name of the header as entered on the page after the pound sign. For example: McDonald County, Missouri Genealogy#County Courthouse.  Again, no double square brackets are required as in wikitext.
+
* ''Note: the text you highlighted is displayed in the search box.''
'''External 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>.
*"External link" tab is for entering the URL of the external link.  ''(No single square brackets required as with Wikitext coding)''.
+
<br>
'''To save links'''
+
'''INTERNAL LINK'''
*Click "Done" when finished
+
* After clicking on the ''FamilySearch Wiki'' tab, enter the article title into the search box.
*Click "Save page" in the VisualEditor tool bar.
+
* 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.
*Fill in "Summary" on panel that appears and then "Save page."
+
* 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 65: Line 137:
 
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
 
<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; ">
 
<div style="padding-top:12px; padding-left:10px; ">
Create the following links using the Visual Editor:
+
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 "Wikipedia" using the word "Wikipedia."
*Create an external link to "w3Schools.com" using the word "w3School."
+
*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" 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."
 
*Create an internal link to "Kentucky, United States Genealogy" and to the section "Kentucky Information" using the words "Genealogical information for Kentucky."
Line 75: Line 147:
  
 
</div>
 
</div>
</div> <!--BOTTOM links to next chapter and previous chapter--------------------------->  
+
</div>  
{| style="width:100%;"
+
<!---------------------------------END OF MATERIAL------------------------------------------->
|-
+
</div>
| <div style="font-size:14pt; font-family:arial;">[[Help:Wiki University VisualEditor--Text Styling|&lt;&lt; Previous Chapter]] </div>  
+
<!-------------------------------chapters bottom---------------------------------------------------->
| <div style="font-size:14pt; font-family:arial; text-align:right;">[[Help:Wiki University VisualEditor--Cite References|Next Chapter &gt;&gt;]] </div>
+
<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>
<br>  
+
<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>
 
</div>
 
+
__NOTOC__
__NOTOC__
+
[[Category:Wiki Lessons]]
[[Category:Wikitext 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."