The WYSIWYG text editor
Contents
• 1 WYSIWYG?
• 2 Text buttons
• 3 Copy / paste buttons
• 4 Insert image
• 5 HTML view button
• 6 Tables
• 7 Link buttons
• 8 General link properties
WYSIWYG?
WYSIWYG is an acronym that stands for 'What You See Is What You Get'. The term is used in this tutorial to illustrate the built-in HTML incorporated in
MOVIO that allows you to edit web pages not from your code but as a normal word processor, although it also gives the opportunity to do it using the
code.
Text buttons
Fill out the text content Filling the textual content in MOVIO is done via a visual text editor that provides the main functionality of style and text
formatting, such as, for example, the ability to assign styles, such as bold and italic, in parts of this and align it according to their own needs as well as
the ability to embed links to portions of the text.
Error creating thumbnail: File missing
The non-expert user can then produce complex textual content without having to know the principles and tools of the HTML programming, it will be the
system that will convert the textual content in HTML code visible in the application. Ultimately, the text editor is developed as a real HTML editor. Let's
see in detail the functions of the various buttons, although most are:
Text formatting buttons
Text alignment buttons
Orientation of the text buttons
Add / edit citation button
Window add/edit Citation
Error creating thumbnail: File missing
Add / edit text for revision buttons
Window add/editing text for revision
Error creating thumbnail: File missing
Add / edit acronyms and abbreviations buttons
Window adding/editing acronyms and abbreviations
Error creating thumbnail: File missing
Buttons for bulleted and numbered lists
Return and paragraph indentation buttons
Dropdown text formatting styles
Error creating thumbnail: File missing
Undo and redo buttons
Insert horizontal line button
Insert custom character button
Window to add a custom character
Delete / copy formatting buttons
Copy / paste buttons
More precisely:
• Cut
• Paste
• Paste text
• Paste only the text section contained in the clipboard and remove all the current formatting
• Paste text formatted from Microsoft Word
This is used when you want to paste some text which has been copied from a formatted Word document without pasting all the other tags in Word that
could "break" the page's HTML
• Select all
Insert image
If clicked, it allows a picture to be inserted inside the text. The image is selected from the Media Archive and it is possibile to specify a set of parameters
for positioning and formatting.
Error creating thumbnail: File missing
It is possibile to define:
• Alignment
• Measurement
• Vertical spacing
• Horizontal spacing
• Frame
• Possible CSS class
• Style
HTML view button
This button allows a window in the HTML code of the page that you are editing to be displayed, in this way experienced users can intervene and edit the
HTML code directly.
Error creating thumbnail: File missing
You have to remember that for reasons of usability, some tags, those not conforming to XHTML 1.1 strict, are not allowed by the system and therefore
even if added manually, they will be removed via this tool.
Tables
Button to add table
Window to add a table
Error creating thumbnail: File missing
Buttons to change line properties and properties of cell
Window to change properties of a cell
Error creating thumbnail: File missing
Buttons to insert / remove rows and columns
Split cells buttons
Link buttons
More precisely:
• Insert link
See below
• Remove link
Remove link that was highlighted in the text
• Anchor
Insert an anchor in the text to use when you want to insert an anchor link. See the following paragraph
Error creating thumbnail: File missing
Insert or edit a link
The properties that can be assigned in this window are used to assign a link and define its properties. According to the type of link chosen , the way in
which the details are be filled, changes:
Error creating thumbnail: File missing
General link properties
Type of link
Choose the type of link to be added between:
• internal link
• relative link
• external link
• media link
• anchor link
• glossary
Internal link
Link to internal pages to our website, if you choose this option, the internal Link field becomes active and you can choose the inside page of the site to
which the link that you are adding must link.
Example: Museo Museum
Relative link
Link to a sub-page of the current site. It does not require the inclusion of all the absolute paths of the page:
Example: /documenti/manuale.htm Documents/manual.htm
External link
Link to a page of another site. It requires the full address of the page Example. link to the page of the Google translation tool.
Example: http://www.google.it/language_tools?hl=it
Media link
Link to one of the media available in the media archive. If you choose this type, the CMS allows you to choose one of the media in the media archive.
Anchor
It is a tag <a>
Glossary link
Link to one of the terms in the media archive. If you choose this type, the CMS allows you to choose the term from those already stored in the glossary.
URL link
It corresponds to the attribute HREF for the tag <a>. It contains the destination document http:// Used for the links to the normal web pages (with
protocol http)
Example: http://www.athenaplus.eu/
https://
Used for the links to the secure web pages (with protocol HTTPS)
ftp://
Used for the link type FTP (File Transfer Protocol)
mailto://
Used when the link is an email address
Example: mailto:[email protected]
Internal link
Link to one of the pages managed by the CMS
Example: Museo Museum
Title
Corresponds to the attribute TITLE tag <a>. The value of this attribute will be displayed when the cursor stops over the link. The title attribute is very
important, and is used to specify an explanatory text for the element to which the attribute is referred (the title can also be used for different elements of
the anchors).
This additional explanation promotes accessibility of the site to disabled people, for example people who have impaired vision. If you hold the mouse
cursor on a link with the title for a few seconds, you see a kind of label with the specified text in the title appear:
Advanced properties
The properties that can be assigned in this window refer to the special attributes of the HTML tag <a>. Let's see an example of HTML code that
represents a link to a web page. This tag displays the word Google that when clicked, opens the home page of Google at this address, www.google.it. in
the same window The special attributes <a> are used for example to refer to documents that are logically next or previous to the current document,
documents that contain a glossary of the current document, and so on.
<body>
<a href="http://www.google.it">Google</a>
</body>
Id
Correspond to the attribute ID for the tag <a>. It is used to refer to the tag inside the page and it is used only by an expert programmer
Style
Corresponds to the attribute STYLE for the tag <a>. It defines the style to be applied to display the link
Example: font-style: italic
Class
Corresponds to the attribute CLASS for the tag <a>. It defines the class CSS to be applied to display the link. Used only by an expert programmer
Example: Class = ?custom_link?
Direction of the text
Specify the direction that the text of the document linked will have. For example Italian will have the direction from left to right while Hebrew will be from
right to left
Example: From left to right
LTR
Example: From right to left
RTL
Coding language
It is an attribute that improves the accessibility of the site, as well as being potentially useful for search engines (the attribute can be used for example to
specify the presence of a section of its website in English):
Coding language destination
Indicates the language of the linked document
Character encoding target
Indicates the character encoding used in the target document
Example: -8859-6
Relation page-destination
Specify the relation between the linked document and current one
Alternate
Indicates versions replacement / alternative documents that contain the link . When it is used together with the lang attribute , it denotes a translated
version of the document. When used together with the media attribute, it indicates a version designed for different media. Stylesheet Refers to an
external style sheet . It is used together with the link type "Alternate " for stylesheets
Start
Alternatives selectable by the users. Refers to the first document of a series of documents . This type of link tells the search engines which document is
considered by its author as the first document in the series. (eg the first chapter of an article on multiple pages
Next
Refers to the next document of a series of documents. It is used to indicate which document the system has to preload to reduce the perceived load
time of a page. For example (eg, the next chapter to the current page ) : REL attribute says that chapter2.html is the document that follows the current
document.
Example: <link rel="Next" href="capitolo2.html">
Prev Contents
Refers to the previous document of a series of documents. ( Eg the previous chapter)
Index
It refers to the document that contains a summary of the current document. It refers to the document that contains the index of the current document.
Glossary
Refers to a document providing a glossary of the terms of the current document
Copyright
It refers to the document that contains the copyright information of the current document.
Chapter
Refers to a document which serves as a chapter in a series of documents
Section
Refers to a document which serves as a section in a series of documents
Subsection
Refers to a document which serves as a subsection in a series of documents
Appendix
To a document which serves as an appendix in a series of documents
Help Bookmark
Refers to a document offering help (more information, links to other sources of information, etc.). Refers to a bookmark. A bookmark is a link to a key
point for a more extensive document. The title attribute can be used, for example, for the label of the bookmark. Note that a document can contain
multiple bookmarks.
Relation destination-page
Specifies that the report is in the current document with the document that is linked. The types of report are the same as the REL tag
Index TAB
Used to define an order in which the link, by pressing the TAB key is selected. Useful when you access the link via the keyboard. Each link will have a
TAB and index based on the number that will be chosen before or after other links.
Assigned button
Example: accesskey="h"
Corresponds to the accesskey of <a> tag. Is a character that defines the keyboard shortcut to access the link. It is a choice of letters in the keyboard
that - when typed by the user - allows you to go directly to certain pages. For example, you can specify: accesskey = "h" Typing "h + ALT + ENTER" with
Internet Explorer, or directly "h + ENTER" Mozilla has direct access to the specified link.