On this course, you are not required to learn HTML markup. However there are a couple of handy wiki markup tips you can use to improve page layout. In this section, we also provide tips for improving layout of pages for mobile responsive design.
Useful wiki markup code
| Markup
|
Purpose
|
| <br>
|
Single forced line break
Sometimes the author must manually insert a line break to force the text which follows to start on a new line.
|
| <nowiki> … </nowiki>
|
To force the wiki to ignore (or ‘escape’) the effect of wiki markup contained between the opening and closing <nowiki> tags
For example, when an author wants to show the raw wiki markup, instead of the wiki applying the relevant formatting in the published view.
Note that the </nowiki> tags must be applied on every line where it is needed.
|
| {{Clear}}
|
To stop text that appears immediately after the insertion of this template from wrapping around a floating element like an image.
For example, this is used with images to force text to appear below the image on a new line without text wrapping[1].
|
Images and mobile devices
When authoring online materials it’s important to remember that the user may be viewing the content using a different screen size to the one you are using for developing the materials. Bear in mind that the layout displayed on the user’s screen will vary depending on the screen size of the display device and as a developer it is hard to predict what screen the student will be using.
Note that images that use the ‘Frame’ or ‘Thumb’ attribute in the wiki markup do not automatically resize for different display widths on the WordPress site. Consequently we recommend that you avoid using framed or thumbnail images, where possible, to circumvent this challenge.
Remember that the view port size of mobile phones in portrait view vary. The display width of the average mobile phone in portrait view ranges between 320 pixels and 414 pixels. So to avoid awkward wrapping of text around images on a mobile phone in portrait view, we recommend using an image markup that supports automatic resizing of the image to fit the display port if the image width is wider than the phone display.
As a rule of thumb, we recommend that you use the following markup for the majority of images:
[[image:name_of_file.png|414px|right]]
- ↑ This is the equivalent of the HTML tag: <br style=”clear:both;” />
On this course, you are not required to learn HTML markup. However there are a couple of handy wiki markup tips you can use to improve page layout. In this section, we also provide tips for improving layout of pages for mobile responsive design.
Useful wiki markup code
Sometimes the author must manually insert a line break to force the text which follows to start on a new line.
For example, when an author wants to show the raw wiki markup, instead of the wiki applying the relevant formatting in the published view.
Note that the </nowiki> tags must be applied on every line where it is needed.
For example, this is used with images to force text to appear below the image on a new line without text wrapping[1].
Images and mobile devices
When authoring online materials it’s important to remember that the user may be viewing the content using a different screen size to the one you are using for developing the materials. Bear in mind that the layout displayed on the user’s screen will vary depending on the screen size of the display device and as a developer it is hard to predict what screen the student will be using.
Note that images that use the ‘Frame’ or ‘Thumb’ attribute in the wiki markup do not automatically resize for different display widths on the WordPress site. Consequently we recommend that you avoid using framed or thumbnail images, where possible, to circumvent this challenge.
Remember that the view port size of mobile phones in portrait view vary. The display width of the average mobile phone in portrait view ranges between 320 pixels and 414 pixels. So to avoid awkward wrapping of text around images on a mobile phone in portrait view, we recommend using an image markup that supports automatic resizing of the image to fit the display port if the image width is wider than the phone display.
As a rule of thumb, we recommend that you use the following markup for the majority of images:
Footnotes
Project lead
Supported by
Development Partner