|
|
|
|
Publishing / FTX / Tutorial / all |
| FTX Tutorial Basics of page building
Before you begin
Next: Starting a page
Starting a new page Once you’re a LUGNET Member and are signed in, starting a new page on LUGNET is easy:
(Well, almost... There are a couple restrictions on the locations of pages -- they have to include your Member ID and be based off an existing category of the LUGNET website -- but never mind that detail for now.) Try it Let’s start with a very simple example. Open the following location in your web browser (but replace the 1234 with your own Member ID): http://www.lugnet.com/~1234/You should see a nearly blank page which says simply “(This page is empty)” with a button below it labeled “Start This Page.” (If you don’t see the button, make sure that you are properly signed in and that you have typed your LUGNET Member ID correctly in the page’s location. Now click the Start This Page button. A screen with an editing box will appear. Next: Typing in your page
Typing in your page Whatever you type into the editing box is what will appear on your page -- give or take a bit of automatic formatting. Try it Well, here you go! Type in a short paragraph or two -- for example:
(When you’re done, notice the three buttons below the editing box.) Next: Previewing your page
Previewing your page Whenever you edit pages on LUGNET, you have the option to “preview” the results of your editing before committing them for safekeeping. Below the editing box, notice the three buttons labeled Preview, Save, and Cancel. Try it Click the Preview button. A formatted version of your content will appear. Below that will be an editing box which you can use if you need to make any changes. Feel free to edit some more and click Preview again. You can keep doing this until you’re satisfied and ready to save your page. Next: Saving your page
Saving your page When you are satisfied with the editing you have done, you are ready to save your page to the server. Once saved, other people will be able to view your page, but only you can make changes to it. Try it Click the Save button which appears below the editing box. (You may need to scroll your web browser window downward if you have created a tall page.) As soon as your page is saved on the server, a copy of it will appear in your web browser. You will see exactly what other people will see when they visit your page, except that you, as the page’s owner, will also see an Edit This Page button, which you can use to make further changes, as needed. Next: Editing your page
Editing your page Any time you visit your own pages, you can change them. Alterations are as simple as clicking a button, typing your changes, and clicking another button. Try it Click the Edit This Page button which appears near the bottom of your page. You’ll see the familiar editing box. Type a couple of new sentences, take out some old ones, or just feel free to experiment. Click Preview to see the effects of your changes or Save to commit your changes. You can also click Cancel to reload the most recently saved version of your page, disregarding any changes. Next: Naming your pages
Naming your pages Page names (locations) can be short and simple, for example: http://www.lugnet.com/~1234/or long and complex, for example: http://www.lugnet.com/org/us/nelug/~1234/meeting/2000-05-25But how do you know what is OK and what is not OK? Here is the general “syntax” for LUGNET Member page URLs -- all LUGNET Member pages will look like this in one way or another: http://www.lugnet.com/xxx/~id/yyy/zzzwhere:
Examples The best way to get a sense for possibilities is to study a few more examples (these also use the Member ID# 1234): http://www.lugnet.com/~1234/ http://www.lugnet.com/~1234/AboutMe http://www.lugnet.com/~1234/Ideas/ http://www.lugnet.com/~1234/Ideas/Modular/LandingGear http://www.lugnet.com/faq/~1234/acronyms http://www.lugnet.com/robotics/tele/~1234/webcam/code http://www.lugnet.com/castle/org/cw/~1234/ http://www.lugnet.com/cad/mlcad/~1234/HowTo/Install http://www.lugnet.com/loc/us/ma/bos/~1234/map http://www.lugnet.com/org/us/nelug/~1234/meeting/2000-05-25 Characters allowed in page and directory names
Back to the main tutorial page Special formatting
Controlling text features In addition to writing simple block paragraphs of text, you can control certain text feature using a special characters. Boldface and italics You can use curly braces { and } to show italics and square brackets [ and ] to show boldface. You can even use both if you really need to.
What if you actually want to show a curly brace or square bracket character? Then put a “backtick” (reverse singe quote) ` in front of it, like this:
and that will display like this: “I can write boldface and brackets [ ]. I can write italics and curly braces { }.” Underlining Underlining should be used very sparingly because it can so easily be confused with hyperlinks. But it still has its uses, for example in acronym expansions or technical bibliographies. Underlining is turned on by a first _ character and turned off again by a second _ character. For example,
becomes “Every other word in this sentence is underlined.” and
becomes “Every other word pair in this silly sentence is underlined.” The best use for underlining is single-characters or very short runs of characters, for example in acronym expansions:
becomes “NELUG is the New England LEGO Users Group.” To write an actual underscore character (if you ever need to), simply prefix it with the ` character, for example
becomes “I can write an actual _ underscore if I really need to for some reason.”
Making horizontal rules To make a horizontal rule on your page, simply write a line of -’s all by itself as its own paragraph. For example,
becomes: last line of the previous paragraph first line of the next paragraph
Making lists You can write bulleted lists like this:
and they’ll show like this:
and they’ll show like this:
Writing section headers To make a minor section header, type it as its own paragraph (a blank line above and below it) and simply invoke boldface, for example:
To make a section header, type it on its own paragraph and make a line of -’s below it, for example:
To make a bolder section header, do the same thing, except use a line of =’s instead of -’s, for example:
Writing hyperlinks Writing hyperlinks is as easy as writing URLs in angle brackets. Linking to other websites To make hyperlinks to pages on other websites (that is, other than pages on www.lugnet.com), enclose the complete URL (including the http:// part) in angle brackets like this:
or, if you want to add a link label, include it before the closing angle bracket like this:
These display as http://www.lego.com/ and The Official LEGO World Wide Web Site, respectively. Linking to pages on LUGNET To make hyperlinks to pages on www.lugnet.com, simply enclose the partial URL (that is, without the http:// part) in angle brackets like this:
Or include a link label like this:
These display as /castle/ and Castle lovers click here!, respectively. Linking to your own pages To make hyperlinks to your own pages that you create, simply enclose a page’s URL in angle brackets, for example:
or
As in HTML, write your URLs so that they are relative to the page you are currently on. For example, if you are:
(But if you don’t see a shorter way to write a URL, you can always simply use the longer version. The point is that you don’t always have to write full URLs.)
Including images Simple images You can include images in your pages as easily as you can link to other pages. To include an image (make sure that you have permission first!), simply enclose its URL in double angle brackets. For example, this:
becomes this: 
Note: LUGNET automatically looks up the size (in pixels) of your image; you don’t have to tell it. Linked images You can also combine links with images and create linked images -- or images that link to other things. You might want an image to link, for example, to a larger version of itself, or perhaps to a set of pages. To make a linked image, write the destination URL (the “target”) between the first and second opening angle brackets. For example, this:
becomes this:
Note: If lines become uncomfortably long, you can split them into two lines, like this:
if you prefer. Adding alternate text HTML has an optional feature which allows older or nongraphical web browsers to display a text label in place of an image if the browser is unable to show the image. On modern graphical browsers, these labels (sometimes referred to as “alt tags”) may also show up in a little box above your cursor as it passes over the image. To include alternate text with an image, write the text inside the angle brackets after the image URL. For example, this:
becomes this:
And you can, of course, add alternate text to linked images, like this:
About the notation If you are used to HTML, the double angle bracket notation may seem a bit odd. Let’s back up for a moment and revisit regular links. If you look at the general form of regular links in FTX, you’ll see a pattern like this:
The URL is where the link goes when you click it. The label is what shows on the page (typically underlined text in blue or purple) in place of the actual URL. Now if, instead of underlined text, you wanted to show an image on the page, why not simply write the URL of the image in place of the text? In other words, you can simply write this:
and what that means is: Instead of showing a text label in place of the target URL, show an image in place of the target URL. Now if you want to show an image with no target URL (no link, just a plain image), you can omit the URL portion, which leaves simply this:
And if you want to show alternate text label in place of the image (this is a decision up to the browser), you can add that after the image like this:
So in other words, it’s actually all quite consistent: There is an opening angle bracket, followed by a URL, followed (optionally) by what to display in place of that URL, followed by a closing angle bracket -- and they can be nested two levels.
Making simple tables The Basics Simple tables are available using the tilde (~) character in column 1, followed by a space character. Each line signals a new column and paragraph breaks signal a new row. For example, you can write:
and it’ll show like this:
Optional Features Special formatting characters can optionally be used after the ~ to specify vertical or horizontal alignment:
The default alignment (if none is given) is ~<-, which means “flush left and center vertically.” The most common override is ~^, which means “flush left and align top.” Nested table are not supported. An example with images Here is a simple table displaying three Cool LEGO Site of the Week buttons. The input goes like this:
and the output goes like this:
Note the use of ~v| to align the data to the bottom of the cells and to center the data horizontally within the cells.
Including news articles Straight across You can include any number of LUGNET news articles right in your own webpages simply by writing the article’s partial URL between double angle brackets <<>>. For example, if you are viewing an article with this URL: http://www.lugnet.com/announce/?n=376Leave out the http://www.lugnet.com part and you get this partial URL: /announce/?n=376Now write that between double angle brackets:
When you view your page, here is how that portion would look:
In a table You can even put LUGNET news articles into table cells, like this:
Here is how that would look:
Including special characters In HTML, you must write complex things like ® to get the ® symbol and © to get the © symbol. In FTX, as in a word processor, you may simply enter these symbols directly. (The page processor automatically converts them to HTML whenever it displays your pages to web browsers.) You may need the assistance of a “key caps” or “character map” tool to locate or cut & paste special non-ASCII characters such as ©, ®, ™, ¶, ç, and so forth, but if you can get them into an editing box, you can make them part of your pages. In Microsoft Windows, for example, you can use the Alt key and the 10-key pad to enter these symbols using the keyboard. (Hold down the Alt key while typing the character’s four-digit code on the 10-key pad, then let up the Alt key.) A few examples are shown below.
Coercing line breaks Line-break character If you ever need to break a line at a specific point, there is a special line-break character you can use: ¬It it at position #172 in the standard ISO-8859-1 character set. In Microsoft Windows, for example, you can write this character by typing 0172 on the 10-key pad while holding down the Alt key. You may also be able to cut & paste it from a “key caps” or “character map” program. Automatic line breaks If you want to write a large block of text and force a line-break at the end of each line, you can prefix each line with a colon (:) in column 1, followed by a space. For example, this:
displays like this: Twinkle, twinkle, little star How I wonder what you are Up above the world so high Like a diamond in the sky Twinkle, twinkle, little star How I wonder what you are This might be useful, for example, for writing down poetry or music lyrics. If you wanted your lines to show in italics, you could surround each line by a pair of curly braces, like this:
or, as a shortcut, you could use a semicolon (;) in column 1 instead of a colon. For example, this:
displays like this: Twinkle, twinkle, little star How I wonder what you are Up above the world so high Like a diamond in the sky Twinkle, twinkle, little star How I wonder what you are Advanced Topics
Displaying computer code Word mode Once in a while you’ll want to express something in a computer-ish typeface, for example to describe a key on the keyboard or something you would like a reader to type. Using a pair of vertical bar characters around words, you can switch into HTML’s <TT> (teletype) font. Thus, if you wrote:
then it displays as “Press the Enter key.” Note: If you need to display a real vertical bar character, use a backtick just as you would for {, }, [, ], <, and >:
and this displays as “I can write teletype stuff and I can write vertical bars |.” Block mode You can also express entire blocks of text as pre-formatted text in the teletype font by using a vertical bar (followed by a space) at the beginning of each such line. For example, if you wrote:
then it displays as: int main(int argc, char *argv[])
{
...
Double block mode Alternatively, you can use two vertical bars (followed by a space) at the beginning of each line in a paragraph to show that block in a lightly shaded background with a thin border. For example, if you wrote:
then it displays as:
(This tutorial uses double-block mode judiciously.) Subtleties Note: Teletype mode behaves slightly differently between block-mode and word-mode. In block-mode (where the first two characters of the line are a vertical bar and a space character), you can safely use any other characters on the line. In word-mode, however, even though {, }, [, ], <, >, and _ are protected from interpretation, you’ll still need to use a backtick character for ` and |. For example,
displays nicely as “The size is given by $foo_bar->{zot}, if present.” But
will not display as “The vector $C is computed as $A | $B.” To get that, the backtick character ` still needs to be used, like this:
Including other pages The FTX document format has a very special and almost magical inclusion feature: Not only can you embed images or news articles into the pages you write, but you can also include (or transclude) whole other pages into your pages! In fact, doing this is extremely simple: Where you would normally link to a page using single angle brackets <>:
instead use double angle brackets <<>>:
It’s a little bit like embedding an image, except that the page you embed must be:
example and now the transcluded page:
OK, now we’re back to the regular page. The small paragraph above is not truly part of the page you’re viewing, but actually a copy of a different page (click the link that says “example” or the little square box on the right to view that page all by itself). “Transclusion?” Transclusion is a word coined by Project Xanadu® visionary Ted Nelson, who also coined the word Hypertext in 1963. Transclusion (also called transquoting) of materials is a form of transpublishing in which materials from one or more original sources are used or assembled at another location to make a new source. Transclusion of text (or of a page) is different from inclusion of text (or of a page). Inclusion implies actually including a copy of the source material, while transclusion implies storing only a reference to it and assembling a copy of it only when it needs to be viewed. Thus, when you transclude FTX pages, any changes made to the page referenced will automatically reflect in the page referencing it as well. (If you need to “lock in” to a particular historical revision of some FTX page, there is actually a way to do that, but it is beyond the scope of this tutorial.) Note: When you transclude someone else’s FTX page on LUGNET, the copyright notice at the bottom of the webpage changes to include the author whose page you are transcluding.
Recovering older versions of your pages All of your editing changes are stored in a chronological log on the server. If you ever need to go back to a previous revision of a page to look something up or perhaps grab a portion of content which no longer exists on the page, there is a way to do that (although the interface to do this is a bit clumsy at the moment). First, you can view the raw FTX source for any FTX page by affixing the suffix .ftx at the end of the URL. For example, if you are viewing the page http://www.lugnet.com/~1234/foo/bar/gortthen you can also view that page’s FTX source by loading this URL: http://www.lugnet.com/~1234/foo/bar/gort.ftxSimilarly, you can view any revision of an FTX page by affixing a $ suffix, followed by the revision number, at the end of the URL, for example: http://www.lugnet.com/~1234/foo/bar/gort$1 http://www.lugnet.com/~1234/foo/bar/gort$2 http://www.lugnet.com/~1234/foo/bar/gort$3and so forth. If you omit the revision number at the end and affix only a $ character, you’ll see a list of all the revisions, with timestamps and hyperlinks to each revision. OK, now you can put both the $ together with the .ftx and view the source for an older page, for example: http://www.lugnet.com/~1234/foo/bar/gort$1.ftx http://www.lugnet.com/~1234/foo/bar/gort$2.ftx http://www.lugnet.com/~1234/foo/bar/gort$3.ftxAgain, the interface for “going backward in time” like this is rather clumsy. The good news is that it may improve later. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
All text, images, or trademarks in this document are the intellectual property of their respective owners. |
| |
©2005 LUGNET. All rights reserved. - hosted by steinbruch.info GbR |
