SIMPLIFIED MARKUP LANGUAGE DOCUMENTATION
Prepared by: Y. Kirani Singh
Co-Developer of SML Simplified Markup Language (SML) for HTML 4.0
Simplified Markup Language (SML) is a language that simplifies and shortens the tags of the HTML. It is basically a code language that represents the HTML codes in compact forms. We can now make web pages in a much easier way without having to type the html tags repeatedly. It also provides a means for making web pages in some of the major Indian languages such as Hindi, Bengali, Manipuri, Assamese etc in a much easier way.
There is a translator program that translates the codes written in SML into the corresponding HTML codes. SML uses “[“ symbol to indicate start and “]” to indicate the end of a tag. Usually a “[“ followed by a character signifies a probable starting point of a tag. For example, [t Making Web Pages] in SML is equivalent to writing
Installing SML translator The SML translator is a utility program, which can be run by simply double clicking it. Simply copy the SML translator in any folder or desktop and click it when you want to use it. There is no need of registering the program in the operating system. However, it is password locked. When you first run the program, you will be asked to enter password. If the password is wrong, a sequence of 10 numbers will be generated. Send the 10 numbers to the vendor by email or SMS in the email address or mobile number provided.
SML Translator Interface: When correct password is provided, the SML translator interface as shown in Figure-1 will be displayed. It consists of five menus,(namely File, Edit, Convert, View and Help), two combo boxes of SML and HTML tags and an Editor Window. The functions of the components in the SML translator are briefly described.
File Menu: The File menu consists of five menu items New, Open, Save, SaveAs and Exit. Their functions are briefly listed as follows. New (Shortcut Ctrl +N) allows us to create a new SML document. Open (Shortcut Ctrl +O) allows us to open an existing SML document to open in the editor window for further editing or modification. Save (Shortcut Ctrl + S) allows us to save the editing document by the same file. Save As (Shortcut Ctrl + Shift + S) allow us to save the editing document in a different file. Exit allows us to exit the application (SML translator).
Edit Menu: The Edit menu consists of five menu items Cut, Copy, Paste, Select All, Clear to facilitate editing. Each of these menu items are described below. Cut (Shortcut Ctrl + X) to cut selected text in the editor window. Copy (Shortcut Ctrl + C) to copy selected text in the editor window. Paste (Shortcut Ctrl + V) to paste the cut or copied selected text in a desired location in the editor window or in a different text editor. Select All (Shortcut Ctrl + A) allows us to select the whole content in the editor window. Clear (Shortcut Alt + C) to delete the whole content in the editor window.
Figure-1: SML Translator Interface.
Convert Menu: The Convert menu consists of two menu items HTML Code and SML Code. The SML Code menu item is in disabled state initially. It becomes enabled when the HTML Code menu item is executed. The HTML Code menu item enables us to convert the SML tags written in the editor window into corresponding HTML tags. The functions of the two menu items under Convert menu are listed below. HTML Code (Shortcut Ctrl + H) to convert the SML code written in the editor window to HTML code. SML Code (Shortcut Ctrl + E) to go back to the SML code in the editor window for further editing.
View Menu: The View menu consists of two menu items, Web Page and HTML File. It uses an HTML viewer application to display web contents. The Web Page allows us to see the current web page of the corresponding SML code written in the editor window. The HTML File menu item allows us to see any external HTML file in the HTML viewer of the SML Translator. So, the functions of the menu items in the View menu are listed below. Web Page (Shortcut Ctrl +W) allows us to see the web page corresponding to the SML code written in the editor window. HTML File (Shortcut Ctrl + Shift +W) allows us to see the content of any external HTML file.
When HTML File item under View menu is selected, a file browser is displayed to enable us select the desired HTML file.
Help Menu: The Help menu consists of two menu items, About Key Mapping and About SML. The About Key Mapping menu item provides key mapping information for typing Manipuri, (Bengali, Assamese as well), Devanagari and Mathematical Symbols using the key board keys. The key mapping of Bengali Unicode and Devanagari Unicode is made to type unicode characters of these two scripts in an easier way when creating web pages in these languages. Also, key mapping of Mathematical symbols allows us to write symbols whenever required for making a web page.
When the About Key Mapping menu item under Help menu is clicked, a window form as shown in Figure-2 will be appeared. This form contains three radio buttons labeled Bengali , Devanagari, Mathemathical and a button labeled Display. Select the appropriate radio button for which key mapping help is sought and click the Display button. The corresponding Key Mapping will be displayed in the same window. By default the Bengali key mapping is selected, which will be displayed when About Key Mapping is clicked. Figure-2 shows the Bengali character key mathematical Symbols incorporated in the SML. Figure -3 shows the Devanagari key mapping and Figure-4 shows the key mapping for mathematical symbols that can be used in SML.
The About SML menu item shows the version information of SML. Figure-2: Bengali Key Mapping. Figure-3: Devanagari key mapping Figure-4: Mathematical Symbols’ key mapping
Combo boxes of SML and HTML tags: The combo boxes of SML and HTML tags contain tags that can be used for making web pages in SML and HTML. The combo box of SML tags contains all SML tags. HTML tags combo box contains the HTML tags corresponding to the SML tags in the SML tag combo box. When a particular SML tag or its format is forgotten, SML tag combo box help in finding the tag information. When a particular SML is selected in the SML tag combo box, the corresponding HTML tag is also selected in the HTML tag combo box. Also, the selected SML or HTML tag will be displayed in the text box provided below the combo boxes. The displayed tag can then be copied, modified and used in SML editing.
Figure-5 shows the selection of irs tag in the SML tag combo box. When this tag is selected from the combo box, the corresponding HTML code is displayed in HTML tag combo box and the same SML code is displayed in the display box. Figure-5: SML code of irs tag of SML displayed in display box.
When a particular HTML code is desired to be shown in the display box, select that code from HTML tag combo box. Figure-6 shows the HTML code in display box corresponding to the SML code of using irs tag shown in Figure-5.
Figure-6: HTML code (of the SML code in figure-5 ) displayed in the display box.
Copying content in code display box The SML or HTML code displayed in the code display box can be copied and pasted it in the editor window to save typing or easy modification of attributes of a tag. To copy the content in the display box, first select the content and right click. A popup menu will appear as shown in figure-7. Select the Copy option from the popup menu. The selected text can be pasted in the editor window of SML translator or in any text editor.
Figure-7: Copying the content of the code display box. Making a Webpage in SML
Making a webpage in SML is much simpler and easier than making a webpage using HTML because we do not have to write longer and repeated tags in SML. SML code can be written in a text editor or SML editor of SML translator application. Open a text editor and write the SML code and save it with extension .sml. To see the corresponding webpage, open the file in SML translator and then press view Web Page button. Alternatively, we can directly write the SML code in the editor window of the translator window. Click the view webpage button to see the corresponding webpage. Write the following code in Editor Window.
[h [t Web Page in SML ] ] [bd:] Creating web page in SML is much simpler than creating in HTML.
To see webpage, go to View menu and click Webpage menu item. The web content will be displayed in the HTML viewer.
To see the actual HTML code for the above SML code, go to Convert menu and click the Convert To HTML menu item. The corresponding HTML code given below will be displayed.
Saving to an HTML file: The displayed HTML code can be saved as an html file which can be viewed in any web browser. To save the displayed or generated HTML code, go to File menu and select Save As menu item. A save file dialog will appear, select the desired directory, give an appropriate name and change the Save as Type to HTMLfile and click the Save button.
Figure-8 shows the (Save File dialog) interface of saving the above HTML code in a file called Testing1.html. Figure-8: File Save dialog
The testing1.html file saved in G:\biramani\test1 can be viewed using any browser. To open testing1.html, go to the directory containing the file, and then double click the file. The file will be opened in the default browser. If you want to open in any browser other than default, then select the file and right click on it to display the context menu. Select the Open with option from the pop-up menu and select the desired browser. The file will be opened in the selected browser. Note here that the title text which was ignored in HTML viewer now appears in the title bar of the browser.
Figure 9-a shows testing1.html opened in Mozilla browser and Figure 9-b shows the same file opened in Internet Explorer.
Figure 9-(a): Displaying testing1.html in Mozilla browser Figure 9-(b): Displaying testing1.html in Internet Explorer Saving the SML code SML codes are much shorter than the corresponding HTML codes. To save the web content in SML file saves a lot of memory. Also, saving the SML file allows to modify the SML content later on. To save the SML code, go to FILE menu and click the Save As or Save menu item. A file save dialog will appear. Select the desired location, give the name of the file, change the Save as Type to SML and click the Save button. The SML file will be saved in the desired location by the given name with sml extension. The saved sml file can be opened in SML Translator editor or in any text editor such as Notepad or Wordpad to view its content.
Heading tags in SML Headings are used to divide a web page into different sections. There are six different headings used in HTML, namely
to . These headings are represented by [h1 to [h6 in SML.
Example: Heading in SML and HTML SML: [h1 Manipur as a gateway to south East Asia ] [h3 Border Town Moreh ]
The corresponding HTML code for the above SML is
Manipur as a gateway to south East Asia
Border Town Moreh
Example: Headings of different sizes Type the following in the editor window of the SML editor and view it in the HTML viewer. [h1 Manipur as a gateway to South East Asia] [h2 Manipur as a gateway to South East Asia] [h3 Manipur as a gateway to South East Asia] [h4 Manipur as a gateway to South East Asia] [h5 Manipur as a gateway to South East Asia] [h6 Manipur as a gateway to South East Asia] The corresponding headings are shown in figure -10.
Figure-10: Headings of different sizes.
Paragraph tags in SML The SML tag for paragraph is represented by [p ], whose corresponding HTML tag is . The text to be put in next paragraph is enclosed within the tag. Example: Using paragraph tag in SML. [p Mainpur is a border state of India neighboring Myanmar erstwhile Burma] [p Loktak lake in Manipur is the largest fresh water lake in north eastern India. It is the home of the rare brow antlered dancing deer locally known as Sangai]
Let us add two separate heading for the two paragraphs. [bd:] [h1 Manipur] [p Manipur is a border state of India neighboring Myanmar erstwhile Burma] [h3 Loktak Lake] [p Loktak lake in Manipur is the largest fresh water lake in north eastern India. It is the home of the rare brow antlered dancing deer locally known as Sangai]
Type the above SML code and click Web page menu item under View menu. The corresponding web content will be displayed as shown in Figure-11. Figure-11: Using Paragraph tags in SML.
Aligning Paragraph Content The content in a paragraph is by default written in left align mode. But the alignment can be set to other modes such as right, center and justify. This is done by using the [pa tag. Its format is [pa align: text] Where align is the mode of alignment to be set to the content of the paragraph, whose value may be left, right, centre or justify, text is the content in the paragraph.
Following is a valid [pa tag in SML. [pa justify: Some paragraph text]
The corresponding HTML code is
Example: Alignment of paragraph contents [bd:] [C [h1 Manipur] ] [pa center: Manipur is a border state of India neighboring Myanmar erstwhile Burma] [h3 Loktak Lake] [p justify: Loktak lake in Manipur is the largest fresh water lake in north eastern India. It is the home of the rare brow antlered dancing deer locally known as Sangai]
Note that the [C tag in the above code will make the content of heading at the center position. The corresponding web content is shown in Figure 12. Figure-12: Paragraph alignments using [pa tags.
Body tag in SML Body tag comes after title tag in HTML. All contents displayed in the browser are enclosed in body tag. In the body tag, we can change background and foreground text color. In SML, opening body tag is represented by [bd]. The closing tag is automatically added by the SML translator. It has the following format [bd bgcolor, text, vlink, alink ] Where bgcolor is the background color of a web page, text is the text color of a webpage, vlink is the color of the visited links in a webpage, alink is the color of active link not yet visited in a webpage.
The body tag can take one or two arguments. The first argument is the background color and the second argument is the foreground color or text color. The arguments must be separated a comma and a colon must be given after the last argument. The values of the color name can be given by name or by corresponding hex value preceded by # symbol. Following are some of the possible forms of body tags in SML.
[bd ] [bd green] [bd #00FF] [bd green, red] [bd #00FF00,#FF0000]
The first is the body tag with no argument. The second and third tags are body tags with green background color. In the second tag, the value of background color is given by using color name and in the third by hex value. The fourth and fifth tags are body tags with background color in green and foreground color in red.
Example: Putting background color of a webpage in green and foreground color in blue.
Type the following code in the editor window of SML translator and view it in HTML viewer. [bd blue,red] [h1 Manipur] [p Mainpur is a border state of India neighboring Myanmar erstwhile Burma] [h3 Loktak Lake] [p Loktak lake in Manipur is the largest fresh water lake in north eastern India. It is the home of the rare brow antlered dancing deer locally known as Sangai]
Figure-13 shows the resulting webpage in HTML viewer.
Figure-13: Webpage in blue background and red foreground.
Body Tag for specifying color of links
In addition to setting the background and foreground colors, we can also set the colors of active and visited links in a web page in body tag by assigning desires colors to alink and vlink attributes. Links are used to link to link to different parts of the same webpage or to different web pages. Links are formed by anchor [a ] tags. More information on links can be found later in anchor tag.
Example: Setting color of active and visited links [bd #33bbcc, #acFF22, blue, cyan] [h1 Districts in Plain: ] [p The plain region of Manipur is mainly inhabited by meiteis. The plain areas of Manipur is classified into four districts. They are listed below. [u [a Bishenpur.html: Bishenpur]; [a ImphalEast.html: Imphal East]; [a ImphalWest.html: Imphal West]; [a Thoubal.html: Thoubal ]]
The corresponding web content when displayed in HTML viewer is shown in figure-14.
Figure-14: Setting colors for active and visited links.
Body Tag for Background Picture: If desired, we can also use a suitable picture in a webpage. It is done in SML using [bp tag as given below. [bp background, bgproperties] This is used as a body tag in which a picture or its repetition is used in the background of a webpage. background is the full path name of the image file to be used as background picture. bgproprties indicates whether the background picture is Fixed or Scrollable.
If the bgproperties is set to Fixed, only the text is scrolled when a slider is moved. If set to Scrollable, the background picture is also scrolled along with the text when a slider is moved.
Example: Scrollable text on fixed background [bp g:\imagegallery\imagejpg\bpic.png, fixed] [p Manipur is the only state in India, where the Manipuri or meiteilon is the state language. The literary meaning of Manipur is the land of Jewels. It is plain area surrounded by several layers of hills. It has many scenic sites in both the hill and the plain regions. The largest fresh water lake called Loktak in the North-East India, is in the plain area of Manipur. It looks like a looking glass when seen from its surrounding hill tops. Seeing its natural scenic beauty, Jawaharlal Nehru once described it as Switzerland of India.]
Figure-15: Adding scrollable background picture.
Background sound tag [bs ] This tag is used to play short music in the background when a web page is first opened or loaded. Its format is as follows [bs src, loop] Where src is the path or web address of the music file to be played in the background, Loop is the number of time the music file is to be repeated. Its value may be infinite to keep on playing the music until the webpage is closed.
To play the song1.mid in the music folder of the current directory, twice the SML code is [bs music\song1.mid, 2] The corresponding HTML code generated will be
More on embedding a music or multimedia file can be found in anchor tag, image tag, embed and object tags. Normal Lists There are two types of normal lists we used in listing items. One is the ordered or numbered list and the other is unordered or bulleted list. The ordered list is used when we need to write the items in sequential order. When the order of the items to be appeared in a list is immaterial, we generally use unordered or bulleted lists.
Ordered lists Ordered list is represented by [o ] in SML. The [o indicates that an ordered list starts with items separated by semicolons and ] indicates end of the ordered list. The items of list in SML are separated by semicolons. An ordered list is written in SML as [o Moirang; Sendra; Keibul Lamjao; Loukoipat]
The corresponding ordered list in html is.
- Moirang
- Sendra
- Keibul Lamjao
- Loukoi Pat
[bd blue,red:] [h1 Manipur] [p Mainpur is a border state of India neighboring Myanmar erstwhile Burma] [h3 Loktak Lake] [p Loktak lake in Manipur is the largest fresh water lake in north eastern India. It is the home of the rare brow antlered dancing deer locally known as Sangai]
Tourist places in Bishenpur distric [o Moirang; Sendra; Keibul Lamjao; Loukoi Pat]
Go to view menu and click Webpage. The corresponding webpage will be displayed in HTML viewer as shown in Figure-16. Figure-16: Webpage containing ordered list.
The numbering in listing the items in the list may be done using arabic numerals (default), roman numerals or alphabets. For listing in English numerals, we use [o1 (oh one), but we can use [o omitting its listing type 1 to denote arabic numeral. If we want to list the items using other types, we must use a second letter after [o as follows. [o ] or [o1 ] lists items starting from 1 using English numerals. [oa ] lists the items starting from a using small letters of roman alphabets [oA ] lists the items starting from A using Capital letters of roman alphabets [oi ] lists the items starting from i using roman numerals in small [oI ] lists the items starting from I using roman numerals in capitals
Also, the listing in an ordered can be started from any number. For that, we append one or two digit number after [o1, [oa etc. For example, following is an ordered list numbered in arabic numerals starting from 3. [o13 Nongmaijing; Ningthoukaba; Leibakpokpa; Yumjakeisa]
This will generate an ordered list that starts from 5 as in the following html code
- Nongmaijig
- Ningthoukaba
- Leibakpokpa
- Yumjakeisa
Listing of four Manipuri Months starting from 5th using English numerals [o15 Thawan; Langban; Mera; Hiyanggei] Listing of four Manipuri Months starting from 5th using big Roman alphabet [oA5 Thawan; Langban; Mera; Hiyanggei] Listing of four Manipuri Months starting from 5th using big Roman Numerals [oI5 Thawan; Langban; Mera; Hiyanggei]
Figure-17 shows the corresponding web page containing the ordered lists.
Figure-17: Ordered lists in English numeral, in big Roman alphabet and numeral starting from 5th. Unordered list [u ] represents the tag of the unordered list. Three different types of symbols are used in listing the items in html. They are disc, circle and square. The unordered list with disc, circle and square are denoted by [ud, uc and us. By default [u denotes unordered list with disc symbols. The items in the list are separated by semicolons.
For example, following is an unordered list in SML
[u Govindaji Temple; Hanumanji Temple; Thangjing Temple; Mondum Mahadev Temple ] The equivalent html code for the above sml code is
- Govindaji Temple
- Hanumanji Temple
- Thangjing Temple
- Mondum Mahadev Temple
Example: Unordered lists in SML Type the following in the editor window of SML translator and view it as webpage in HTML Viewer of the application.
Some popular temples in Manipur. [u Govindaji Temple; Hanumanji Temple; Thangjing Temple; Mondum Mahadev Temple ] Some Popular tourist centres in Manipur [uc Siroi Hill; Sendra; Keibul lamjao; Iroisemba zoo ] Some popular Gardens [us Kaching Mahadev Garden; Rose Garden; Kombirei Garden; Matai Graden]
The webpage corresponding to the above SML code is shown in Figure-18. Figure-18: Unordered list Glossary or Dictionary list Glossary list is another kind of list in which certain terms and their associated definitions or descriptions form items of the list. In SML tag of glossary list, colons separate terms from definitions and semicolons separate the items.
Example: A glossary list in SML. [d Siroi Lily: A rare flower grown in Siroi Hill in Manipur; Nongyin: A state bird of Manipur; Pengba: A tasty fish of Manipur ]
The corresponding HTML code is
- Siroi Lily
- A rare flower grown in Siroi Hill in Manipur
- Nongyin
- A state bird of Manipur
- Pengba
- A testy fish of Manipur
Figure-19: Dictionary list Line break or Newline Breaking a sentence or to start some written or displayed from a new line is done by using the -/ combination ( hyphen followed by slash) as tag. Put this line break tag where you want to break the line.
Example: Putting line break Type the following in the editor window of the SML editor and view it in the HTML viewer. The corresponding web content is shown in figure-20.
Twinkle twinkle little star -/ What I wonder what you are -/ Up above the world so high -/ Like a diamond in the sky.
Figure-20: Line breaks produced using -/ tag.
Line break tag also can have an attribute call clear. The clear attribute can have, left, right or all as its value. In SML, the line break tag with clear attribute having its value set to left, right or all is represented as -/l, -/r or -/a. They are mainly used when dealing positioning text around a graphic object. The HTML of the line breaking tags in SML -/a, -/l and -/r are
,
and
Formatting Tags [b ] for bold. The text to be made in bold is enclosed within bold tag.
SML: [b This text will be in bold ] HTML: This text will be in bold
[e ] for emphasis: It emphasizes the text enclosed. SML: [e This text will be emphasized] HTML: This text will be emphasized
[S ] for strong emphasis. SML: [S This text will be strongly emphasized ] HTML: This text will be strongly emphasized
[i ] for italic. The text to be made in italic is enclosed within italic tag. SML: [i This text will be in italic ] HTML: This text will be in italic
[U ] for underline. The text to be underlined is enclosed within underline tag. SML: [U This text will be underlined ] HTML: This text will be underlined
Example: Formatting code in SML Type the following in the editor window of the SML Translator. Go to View menu and click Webpage from the menu items.
[d [b Siroi Lily]: A rare flower grown in Siroi Hill in Manipur; [e Nongyin]: [i A state bird of Manipur]; [S Pengba]: [U A tasty fish of Manipur] ]
In the above code, the term Siroi Lily is enclosed in bold. Similarly, the terms Nongyin and Pengba are respectively enclosed in emphasis and strong tags. The definition of the term Nongyin is enclosed in italic and that of Pengba is enclosed in underline tag. The web content when displayed in HTML Viewer is as shown in Figure 21.
Figure-21: Dictionary lists in bold, italic and underline. Center tag [C text] This tag is to align the content in the center. It is generally used to align the content of other tags at the center. The following SML code will align the heading 1 at the center, [C [h1 Manipur] ] The corresponding HTML code is
Manipur
It may enclose two or more tags as well.
Example: Positioning text content at the centre
Type the following in the editor window of the SML translator. [C [h1 Manipur ] [p Mainpur is a border state of India neighboring Myanmar erstwhile Burma. It has many tourist places. Some of the popular ones in Bishenpur distric are:] -/ [/0 [o Moirang; Sendra; Keibul Lamjao; Loukoi Pat]]]
The corresponding content when displayed in HTML viewer is shown in Figure-22.
Figure-22: Aligning web content at the center.
Note that in the above SML code, the list of items is placed in a table using [/ tag so that the order number in the list appear in the same margin. Otherwise, the individual items in the list will also be aligned centrally, which will not look good visually as a list. Keeping text format This tag is used to keep or preserve the format or design of the text. This tag generates
tag in HTML. Example: Keeping text format intact [k Twinkle Twinkle Little Star What I Wonder what you are! Up above the world so high Like a diamond in the sky! ]Figure-23: Preserving text format
Subscript and Superscript To increase the readability or to simplify representation, subscript and superscript tags in SML do not start with [ and hence have no end part ].
Subscript In SML, subscript is written using an underscore “_”. Any character just after an underscore is written as subscript. If two or more characters are to be written as subscript, the characters should be enclosed in ( ).
Following is some chemical formula written in SML Water - H_2O, Sulpheric acid - H_2SO_4 Glucose - c_6H_(12)0_6, Lactose - c_(12)H_(22)O_(11)
The corresponding code when written in HTML is Water - H2O, Sulpheric acid - H2SO4 Glucose – c6H1206, Lactose - c12H22O11
Superscript In SML, superscript is written using a caret “^”. Any character just after ^ is written as superscript. If two or more characters are to be written as superscript, the characters should be enclosed in ( ). Following are some mathematical expressions in SML (x+y)^2=x^2 + 2xy + y^2 (x+y)^(1/5) or (x+y)^(0.5) The corresponding HTML codes for the expressions are (x+y)2=x2 +2xy+ y2 (x+y)1/5 or (x+y)0.5
To include parenthesis in the subscript or superscript, it is preceded by a quote SML: (x+y)^"(1/5") HTML: (x+y)(1/5)
Note that there should not be any space between just after ^ or - while writing the superscript and subscript characters.
Example: Using Subscript and Superscript tags in SML Type the following in the editor window of the translator and view as webpage. [h2 Some chemical formulas] Water - H_2O, Sulpheric acid - H_2SO_4 -/ Glucose - c_6H_(12)0_6, Lactose - c_(12)H_(22)O_(11) [h2 Some mathematical formulas and expressions] (x+y)^2=x^2 + 2xy + y^2 -/ (x+y)^3=x^3 + 3x^2y + 3xy^2 + y^3 -/ (x+y)^(1/5) or (x+y)^(0.5) [h3 Zigzag pattern of roman alphabet] a^bc_de^fg_hi^jk_lm^no_pq^rs_tu^vw_xy^z
The corresponding webpage when viewed in HTML viewer is shown in Figure-24. Figure-24: Webpage containing subscript and superscript Abbreviation tag [ab :] It generates the tag in HTML. It may take title as an argument. Its format is [ab title: Abbreviation] Where title is the full expansion of the abbreviation. If the full expansion of the abbreviation is given in the title, the full term will appear when the mouse is placed over the abbreviation word. Following is the abbreviation tag in SML. [ab Tronglaobi Youth Club: TYC]
The corresponding HTML code is TYC
Example: [pa justify: [ab Tronglaobi Youth Club: TYC] has many roles to do to bring development in the region. It may create employment opportunities to the growing up youths of the region. It may conduct social awareness programs to make the people aware of policies and plans of the government and other agencies working for social upliftment.]
The corresponding web content when viewed in HTML viewer is shown in figure-25. Figure-25: Abbreviation expanded when mouse is placed over the TYC.
Acronym [ac : ] It is used to generate acronym tag tag in HTML. It is similar to abbreviation tag. It also has title as an optional attribute. It has the following format [ac title: Acronym] Where title contains the full expansion of the acronym term.
Following is the acronym tag in SML. [ac Professor: Prof.]
The corresponding code in HTML is Prof.
The acronym tag works in the same way as the abbreviation tag and they can be used interchangeably. Address [ad ] tag This tag is used to generate
tag in HTML. It is used to write contact information along with address at the end of webpage. The address code causes the texts written in the address tag visually different and conspicuous from the neighboring texts. Following is a valid SML code of using address tag[ad Yumnam Kirani Singh -/ Tronglaobi Awang Leikai]
Its corresponding HTML code is
Yumnam Kirani Singh
Tronglaobi Awang LeikaiExample: [f+2: Send your details in the following address] [ad Yumnam Kirani Singh -/ Tronglaobi Awang Leikai -/ P. O.: Moirang, Distric: Bishempur, -/ State: Manipur, India]
The content when displayed in HTML viewer is shown in Figure -24. Note that the tag [f+2 :] is used to increase the size by two from the current font size. More on font tag is discussed next. Figure-26: Address written using address tag. Font tag [f : ] In SML, the [fp1, face, color: text ] denotes the font tag. The first parameter p1 denotes the size which is immediately followed after f with no intervening space. The second parameter denotes the font face and the third parameter denotes the color of the font to be applied on the enclosed text. Note that there should not be any space between the p1 and [f of the tag. The other two parameters may or may not present in the tag. The parameters are separated by commas and a colon is put after the last parameter included in the tag.
The next character or next two characters after [f corresponds to the first parameter p1 that specifies the size of the font. If absolute size is to be given, it is given as the next character. There are only seven different sizes, namely 1 to 7, so the absolute size given in next character following the [f tag must between 1 and 7. If the next character after [f is a space, the font size is taken as 3. The font size may also be specified as relative value using prefixing + or – sign. The + sign indicates the relative increase, and – sign indicates the relative decrease of the current font size. So, the next two characters after [f is +k or –k, the current font size will be increased or decreased by k. If only + or – is given, the value of k is assumed to be 1. Also note that a colon must be given after the font parameters. Following is the list of possible font size formats for the first parameter p1.
[f : text] sets the font size to 3 [fk : text] sets the font size to k [f+k: text] increases the current font size greater by k [f-k : text ] decreases the current font size less by k [f+ : text ] increases the current font size by 1 [f-1: text ] decreases the current font size by 1
Following examples illustrates the change of font size in SML. Example: Different ways of setting font sizes in SML Type the following in the editor window and view it as webpage in HTML viewer.
[f-2: SML is Simple (font size 1)] -/ [f-: SML is Simple (font size 2)] -/ [f : SML is Simple (font size 3)] -/ [f+: SML is Simple (font size 4)] -/ [f5: SML is Simple (font size 5)] -/ [f6: SML is Simple (font size 6)] -/ [f+4: SML is Simple (font size 7)] -/ [f+3: SML is Simple (font size 6] -/ [f+2: SML is Simple (font size 5] -/ [f4: SML is Simple (font size 4)] -/ [f3: SML is simple (font size 3)] -/ [f2: SML is simple (font size 2)] -/ [f1: SML is Simple (font size 1)]
When we view the above SML code in the HTML viewer, we will see the text in different font sizes as shown in Figure-27.
Figure-27: Setting font size in SML
The second parameter p2 of the font tag [f denotes the font face, that is name of the font to be applied to the text being enclosed in the tag. Some of common font names are Times New Roman, Courier, Halvetica, Monotype Corsiva etc. Usually a single font name is given as second parameter. However, two or more font names may also be given as value of the second parameter p2. In that case, the font names are to be separated by semicolons.
Example: Displaying web content in different fonts Type the following SML code in the editor window and display the web content in HTML viewer.
[f4,Arial Unicode MS: SML is Simple -- Arial Unicode MS] -/ [f4,Monotype Corsiva: SML is Simple -- Monotype Corsiva] -/ [f4,Lucida Handwriting: SML is Simple -- Lucida Handwriting] -/ [f4,Comic Sans MS: SML is Simple -- Comic Sans MS]
The corresponding web content when viewed in HTML Viewer is shown in Figure 28.
Figure-28: Web content in different fonts
The third parameter p3 of the font tag [f represents color of the text. The value of the third parameter can be given as known color name or a six digit hex value preceded by # such green or #00FF00.
Example: Displaying web content in different fonts and colors Type the following SML code in the editor window and view the content in HTML Viewer.
[f4, Arial Unicode MS,Red: SML is Simple -- Arial Unicode MS] -/ [f4, Monotype Corsiva,Blue: SML is Simple -- Monotype Corsiva] -/ [f4, Lucida Handwriting,#bbffaa: SML is Simple -- Lucida Handwriting] -/ [f4, Comic Sans MS,#feaacc: SML is Simple -- Comic Sans MS]
The corresponding web page when displayed in HTML viewer is shown in Figure-29. Figure-29: Displaying Texts in different font colors.
Also, if we want to omit one or more previous parameters, we can give only the comma in place of those parameters. In that case, the values of the previous missing attributes will be “”.
To specify only a font face in the font tag, then it is written as. [f , Courier: This font is in Courier] This will generate the following HTML code This font is in Courier
To specify two or more fonts in the font face, we separate the font names by semicolons. The following is a font tag in SML in font size 4 and two font faces.
[f+ ,Monotype Corsiva;Halvetica: This is different font in different size ]
This is equivalent to the following HTML code
This is different font in different size
To specify only the font color, specify that color replacing other two preceding parameters by commas.
[f , , #23ee55: SML is Simple]
The missing parameters will be replaced by spaces. The HTML code for the above SML code is given below SML is Simple
Note here that the size parameter is 3, which is default value. The face parameter has no default value, so its missing value is given a space. Image tag [I ] Image in a webpage can be added by using [I ] tag. It has the following format.
[I src, alt, align, width, height, border, vspace, hspace, usemap] Where src is the source name of the image file to be displayed in the webpage, alt is the alternate text description of the image for the browsers that do not support displaying image, align is the alignment of the image in the webpage. Its value may be left, right or center. width is the width of the display area of the image in pixels. height is the height of the display area of the image in pixels. hspace is the horizontal spacing to be introduced at the top and the bottom of the image, vspace is the vertical spacing to be introduced at the left and the right sides of the image, usemap is the name of area mapping for the image being used as image map. The name of the image map is preceded by #.
Example: Displaying image in a webpage. Type the following in the SML editor and view it with HTML viewer. There is an endemic, rare and endangered species of deer found only in Manipur, India. Its local name is called Sangai, its common English name is Manipur Brow-antlered Deer and the scientific name is Rucervus eldii eldii. It is recognized as state animal of Manipur.
[I G:\ImageGallery\Sangai1.jpg, Picture of Sangai, left, 170,120, 1, 5,5]
It lives in the marshy wetland in Keibul Lamjao about 45 km from Imphal, the capital of Manipur. Its habitat in Keibul Lamjao located in the southern parts of the Loktak Lake, the largest freshwater lake in Eastern India, is now protected as a National Park of India.
Figure-30: Embedding image in a webpage using [I tag.
Note that the image size will be adjusted to fit the specified width and the height in the image tag. If the size of the image is small, then the image will be shown enlarged to fit the specified width and the height. If the image size is larger, then the image will be shown reduced in size. Suppose, we have an image called planets.gif which will be used as an image map using the mapping of the different areas specified in a map called plantetmap formed by the map tag[m. Then following is the SML code for the image map.
[I planets.gif, Planets, ,150 ,130, , , #planetmap]
Its equivalent HTML code is
Image tag for video display [Id ] [Id dynsrc, controls, width, height, align, loop, start] Where dynsrc, controls, width, heights, align, loop parameters are the same as described in [E ] tag. start is used to indicate the way how the video file is invoked to play. Its value may be fileopen or mouseover. If its value is fileopen the video is played when the file is downloaded. If it is mouseover, then the video is played when the cursor is hovered over the multimedia interface. Map tag [m:] It is used to map certain regions of an image clickable and linked to some websites when clicked. Its format is as follows. [m name: shape, cords, href ] Here, name is the name of the image map. Each area code is separated by a colon. The parameters of area code are given in the parameters after each colon. The parameters are shape, cords and href. The value of the shape attribute may be circle, poly or rectangle. The coordinates of the corresponding shape element are given separated by semicolons. The value of href parameter is the name of the html page to which the particular region is linked.
Example: SML: [m map1: poly, 23;67;43;45, pg1.html : circle, 23;12;6, pg2.html] HTML: Blockquote tag [q ] This tag is used to generate
tag in HTML which is generally displayed with indent on both the left and right margins and with space above and below the paragraph. This makes the block of enclosed text can be easily identifiable. In SML, it is represented as[q text] Where text is the block of text messages to be written as blockquote.
Example: Quoting a block of text. [pa justify: There is an endemic, rare and endangered species of deer found only in Manipur, India. Its local name is called Sangai, its common English name is Manipur Brow-antlered Deer and the scientific name is Rucervus eldii eldii. It is recognized as state animal of Manipur.]
[q Sangai is an endangered brow-antlered deer only available at the phumdis of Loktak lake at Kebul Lamjao in Manipur. It is considered as state animal of Manipur]
[pa justify: It lives in the marshy wetland in Keibul Lamjao about 45 km from Imphal, the capital of Manipur. Its habitat in Keibul Lamjao located in the southern parts of the Loktak Lake, the largest freshwater lake in Eastern India, is now protected as a National Park of India]
The corresponding web content as displayed in HTML viewer is shown in the following figure. Figure-31: Adding blockquote between paragraphs.
The block quote text is appeared as a block of text indented from both the margins.
Cite tag [c ] This tag is used to give citation or reference to other web pages or articles. It generates the tag in HTML. The cited texts usually appear in italic. In SML, it is written as [c text]
Where text is the citation or reference text of a web page or article.
Code tag [co ] The code tag is used to identify or distinguish the part of computer code, such as a snippet of C, C++, Java, Perl, Javascript, HTML, XML or other programming language. Most browsers will render the content within code tag in a fixed-width font, such as Courier.
The code tag is often used in conjunction with the pre tag to preserve format used in code content by keeping the whitespace and carriage returns intact.
Example: Embedding program code [bd #33bbcc, #acFF22][p Scilab is a open source tool used in scientific and technical computing. It is easy to learn and implement any algorithm into a program. It does not require declaration of variables before they are used in a program. Following is a Scilab code to find the average of an array.
[co [k function y=average(x) "[m,n"]=size(x); s=0; for i=1:m for j=1:n s=s+x(i,j); end end y=s/(m*n); endfunction ] ]
Figure-32: Embedding program code. Division tag [D ]
[Da align: text content ] for
text contentThe value of align parameter is any one of left, right, center or justify. [Ds style:- text content ] fortext contentWhere style is the list of attribute and value pairs separated by semicolons and every attribute is separated from value by a colon. Note that the list of style attributes and values is ended with a colon immediately followed by a hyphen as :-.Example: Aligning text content using division tag in SML. [Ds Color:#ccfcdd; font-size:13pt; font-face: Helvetica:- [h1 Loktak Lake] [pa It is the largest fresh water lake in the North Esatern states of India. It is also the home of the rare brow-antlered deer locally known as Sangai]
Figure-33: Division tag in SML Definition tag [Df ] It is similar to the abbreviation or acronym in the sense that it is used to define a term in title attribute. When mouse is placed over the term, the definition given in the title appears. [Df A State Fish of Manipur: Pengba] is a very tasty fish available in Manipur. Pengba is a very tasty fish available in Manipur. Figure-35 show the result of the above definition tag as displayed in HTML viewer. When the mouse is placed over the term Pengba, the definition written in the title appears. Figure-34: Definition tag
Span tag [sp : ] It is used for adding special effects on displayed text enclosed in it. Its format in SML is given below. [sp p1 v1; p2 v2; … : text ]
Where [sp ] stands for span tag and parameters p1, p2 etc may substitute one of following attributes. fb - background fc—color ff— font-family fs—font-size fS—font-style fw—font-weight fv—font-variant ls—line-spacing lh—line-height ta—text-align td—text decoration ti—text-indent va—vertical-align ws—word-spacing and v1, v2, v3 etc are the corresponding appropriate values for the attributes specified as parameters p1, p2, p3 etc.
Following is the SML code using span tag to write a text in red in blue background using font Monotype Corsiva at size 25.
[sp fb blue; fc red; fs 25; ff Monotype Corsiva: Red text in blue blackground ]
The corresponding HTML code is
Red text in blue background
Example: Using span tag in SML Type the following in SML editor and display the content in HTML viewer by clicking the Webpage menu item from the View menu.
[sp fb #0000ff; fc red; ff Monotype Corsiva; fs 25; ws 15: Twinkle Twingkle Little Star!] -/ [sp fb #00ff00; fc #0000bb ; ff Courier; fs 25; ws 10: How I Wonder What You Are!] -/ [sp fb yellow; fc blue; ff Helvetica; fs 20; ws 5: Up above the sky so high -/ Like a Diamond in the sky!]
The content of the webpage as seen in the HTML viewer is shown in figure 36.
Figure-35: Texts designed using span tag
Span tag can also be used to refer to external class. It format is [sP classname: text on which the style specified in the class is to be applied]
Meta tag [M ] or [Mh ] In HTML, the meta tag is primarily used to include relevant information about a document, such as the creation date, author, or copyright information. The information included in a tag is invisible to the reader but is useful for search engines, web browsers. A document may more than one meta tag and the meta tags are always placed inside the head tag of a web document. There are two types of tags, one for the name attribute and another for http-equiv attribute. In either case, the content attribute is necessary to provide a value (or values) for the named attribute. In SML, the meta with http-equiv attribute is implemented using [Mh ] tag and that with name attribute is implemented with [M ] tag. Their format is given below. [Mh http-equiv, content] [M name, content] Where http-equiv is the valid information that can be used as http response header. name is the relevant term or keyword related to the document. content is the value or values for the http-equiv or name attributes. When there are more than one value in the content, they are separated by commas.
Following are some SML meta tags. [Mh content-language, fr] [M Authors, Yumnam Kirani Singh, Khoishnam Biramani Singh]
The corresponding HTML meta tags are
Anchoring tag [a ] or [an ] Anchoring tag is used to generate corresponding tag in HTML. It is used to link a different webpage from a current webpage, or to link to different parts of the same webpage or different web pages. In SML, if we want to link to different web page, it is done using [a ] tag. Its format is as follows.
[a linkname, target: linktext ] Where linkname is the address of the web page or the name of the anchor in a webpage to which the link is to be made. target denotes the name of window frame to which the linked web page is to be displayed. It is used when we want to display webpage to a particular frame for webpage having two or more frames. The value of the target may be blank to display the linked web page in a new window, self to display the linked web page in the same frame containing the link top loads the page into the browser window, replacing any current frames. parent loads the page into the parent window, which in the case of a single frameset is the main browser window. framename to display the linked webpage in the frame whose name is specified. And linktext is the clickable text clicking which the linking will be initiated.
To link to different parts of a webpage, we need to identify the parts by giving an anchor name. It is done using the [an ] tag whose format is as follows. [an name: ] Where name is the name of the anchor to be given to a specific place or point in a web page to which the link is to be made.
Example: Linking to different parts of a webpage [an sangai:]There is an endemic, rare and endangered species of deer found only in Manipur, India. Its local name is called Sangai, its common English name is Manipur Brow-antlered Deer and the scientific name is Rucervus eldii eldii. It is recognized as state animal of Manipur. [an pic:] [I G:\ImageGallery\Sangai1.jpg, Picture of Sangai, left, 170,120, 1, 5,5]
It lives in the marshy wetland in Keibul Lamjao about 45 km from Imphal, the capital of Manipur. Its habitat in Keibul Lamjao located in the southern parts of the Loktak Lake, the largest freshwater lake in Eastern India, is now protected as a National Park of India.-/-/Go to[u [a #sangai: Sangai of Manipur]; [a #pic, blank: Picture of Sangai]]
To clearly see the links work, the page should be large or the display area should be reduced enough so that the links can be seen after scrolling with scroll bar. Shown in Figure-36 is the web content of the above SML code with anchor links.
Figure-36: Web page containing anchor links
When the clickable link text Sangai of Manipur is clicked, the webpage will be jump to the beginning of the page where the anchor named sangai was placed as shown in Figure- 37. Figure-37: Web page jumped to anchor point sangai.
When the link text Picture of Sangai is clicked, the webpage will be jumped to the place where the anchor named pic was placed and at the same time the content will be displayed in a new page in Internet Explorer as shown in Figure-38. Note that the parameter blank in the second [a tag causes the web content to be displayed in a new browser window. Figure-38: Web page displayed in new window in Internet Explorer.
We can use anchor tag to invoke outlook express email service by giving the linkname value as “mailto:emailAddress” such as “mailto:[email protected]”. For example, [a “mailto:[email protected]”: Mail Me] will create a clickable link text Mail Me clicking which invoke outlook express email service to write mail to the given email address.
Also, we can use anchor tag to link to a sound or multimedia file by giving the path name or web address of the file as value of href, i.e. as first parameter in [a ] tag as [a music1.wav: Click to play music] [a “http:\\www.myweb.com\music1.wav”: Click to Play music] [a “video1.mov”:Click to play Movie]
Also, we can display an image by clicking a link test by giving the full path of the image file. [a “G:/ImageGallery/ImageJPG/artPic.jpg”: Art Picture]
Note that if the path name consists of a colon, the path name must be enclosed in double quote.
Figure 39: to be inserted*************
Form tag [F : ] [F url m form elements] for form. It generates form tags with different method. If the parameter m is :, method is get, if ; the method is post. SML: [F http://www.lamjing.com/sml.php : Your name ] HTML:
Example: Creating a text box and a submit button as form elements. Type the following in SML editor and view it in the HTML viewer. [F http://www.lamjing.com/sml.php: Your name ]
The corresponding web content when displayed in HTML viewer is shown in Figure-40.
Figure-40: Text box as input element Input tag [in ] It is generally used within the form tag in practice. The general format of input tag in SML is as follows
[in type, name, size, maximum, value, readonly]
Where type is the type of the input element whose possible values are text, radio, checkbox.
name is any valid name to identify the input type
size is the size of the input element, usually a positive number.
maximum is the maximum length or number of characters in case text box.
value is the value given for the input element.
readonly if present is readonly, which prevents the modification of the value of input element.
Following is a valid code in SML to create a text box. Your name: [in text, username]
The corresponding code in HTML is Your name Other input elements such as checkbox, radio box, submit button etc can be created using the [in ] tag by specifying the appropriate value to the type attribute. Following is a valid code in SML to create radio box.
[in radio, q1, , , imp] Imphal
The corresponding code in HTML is
Imphal
Example: Enter your name:[in text, username] -/ Enter your age: [in text, age , 5] -/ -/ Which is the capital of Manipur? [in radio, q1, , , imp] Imphal [in radio, q1, , , koh] Kohima [in radio, q1, , , shi] Shilong
Figure-41: Text boxes and radio buttons as input elements
Radio box tag in SML The radio box tag in HTML can be made in SML using the input tag [in by giving the type parameter as radio. However, we have to write input tag for every radio box we want to create. Also, we have to put the paragraph and break tags to arrange the radio boxes. To simplify this, SML also provide separate tag for creating radio boxes. There are three ways in which radio boxes can be arranged in SML, so there are three slightly different tags namely [ir, [irs and [ird.
[ir ] tag: This tag is used to create radio boxes in a line. Its format is as follows.
[ir n1 – v1: choice 1; n2 – v2: choice 2; n3 – v3 : choice 3; …. ] Where n1– v1: Choice 1 denotes the name and value of the first radio box with the option text Choice 1. n2–v2: Choice 2 denotes the name and value of the second radio box with the option text Choice 2 and so on. Note the hyphen between the name and value parameter and also the colon after name and value parameter. They are required as a part of the format. Also, there should not be any space between the parameter, hyphen and the value of the parameter.
The following SML code will create radio boxes in a line. Which is the capital of Manipur? [ir q1–imp: Imphal; q1-koh: Kohima; q1-shi: Shilong] Given below is the corresponding HTML code. Which is the capital of Manipur? Imphal Kohima Shilong
[irs ] tag: Creating radio boxes in line is not suitable if the option texts are long. So most often we create radio boxes in separate lines. To create radio boxes in separate lines in single spacing [irs tag is used in SML. Its format is similar to that of [ir tag except that [ir is replaced with [irs.
The following SML code will create radio boxes in separate lines with single spacing. Which is the capital of Manipur? [irs q1 – imp: Imphal; q1-koh: Kohima; q1-shi: Shilong] Its corresponding HTML code is given below. Which is the capital of Manipur?
Imphal
Kohima < br/> Shilong[ird ] tag: This tag is used to create radio boxes in separate lines with double spacing. Its format is similar to that of [ir tag except that [ir is replaced with [ird.
The following SML code will create radio boxes in new lines with double spacing. Which is the capital of Manipur? [ird q1 – imp: Imphal; q1-koh: Kohima; q1-shi: Shilong] Its corresponding HTML code is given below. Which is the capital of Manipur?
Imphal
Kohima < /p>
Shilong
Example: Creating radio boxes in SML
Which is the capital of Manipur? [ir q1-imp: Imphal; q1- koh: Kohima; q1-shi: Shilong] -/ -/ Which is the capital of Manipur? [irs q1-imp: Imphal; q1- koh: Kohima; q1-shi: Shilong] -/ Which is the capital of Manipur? [ird q1-imp: Imphal; q1- koh: Kohima; q1-shi: Shilong] Figure-42 Creating radio boxes Checkbox tag: Check boxes are similar to radio boxes in the sense that it also provides a list of options to select. But the main difference is check boxes allow users to select more than one options whereas radio boxes allows users to choose only one of the given options. Check boxes can be created using input tag by setting the type parameter to checkbox. But the input tag is required to create every single check box. Usually, we need to create two or more check boxes. So, we need to repeatedly type the input tag. To avoid repeated typing of input tag for creating check boxes, check box tag is separately created. Similar to tag for radio boxes, there are three slightly different tags in SML for creating check boxes, namely [ic, [ics and [icd.
[ic ] tag: This tag is used to create check boxes in a line. Its format is similar to [ir tag as given below.
[ic n1 – v1: Check 1; n2 – v2: Check 2; n3 – v3 : Check 3; ….]
Where n1– v1: Check 1 denotes the name and value of the first check box with the option text Check 1. n2–v2: Check 2 denotes the name and value of the second check box with the option text Check 2 and so on. Following is the SML code to create check boxes in a line Which are the temples you visited in Manipur? [ic q1- thangjing: Thangjing at Moirang; q1- govinda: Govindaji at Imphal East; q1-koriphaba:Koriphaba at Nambol; q1-mahabali: Mahabali at Imaphal West]
The HTML code corresponding to the above SML tag to create check boxes in a line is as follows. Which are the temples you visited in Manipur? Thangjing at Moirang Govindaji at Imphal East Koriphaba at NambolMahabali at Imaphal West
[ics ] tag: This tag is used to create check boxes in separate lines with single spacing. Its format is similar to that of [ic tag except that [ic is replaced by [ics.
Following is the SML code to check boxes in new lines in single spacing Which are the temples you visited in Manipur? [ics q1- thangjing: Thangjing at Moirang; q1- govinda: Govindaji at Imphal East; q1-koriphaba:Koriphaba at Nambol; q1-mahabali: Mahabali at Imaphal West]
The corresponding HTML code to create check boxes in new lines in single spacing is as follows. Which are the temples you visited in Manipur?
Thangjing at Moirang
Govindaji at Imphal East
Koriphaba at Nambol
Mahabali at Imaphal West[icd ] tag: This tag is used to create check boxes in separate lines with double spacing. Its format is similar to that of [ic tag except that [ic is replaced with [icd.
Following SML tag will create check boxes in new lines in double spacing
Which are the temples you visited in Manipur? [icd q1- thangjing: Thangjing at Moirang; q1- govinda: Govindaji at Imphal East; q1-koriphaba:Koriphaba at Nambol; q1-mahabali: Mahabali at Imaphal West]
The corresponding HTML tag to create check boxes in separate lines in double spacing is as follows. Which are the temples you visited in Manipur?
Thangjing at Moirang
Govindaji at Imphal East
Koriphaba at NambolMahabali at Imaphal West
Example: Creating check boxes in SML Type the following SML code in the editor window of SML translator and view the weppage in HTML viewer.Which are the temples you visited in Manipur? [ic q1- thangjing: Thangjing at Moirang; q1- govinda: Govindaji at Imphal East; q1-koriphaba:Koriphaba at Nambol; q1-mahabali: Mahabali at Imaphal West] -/-/ Which are the temples you visited in Manipur? [ics q1- thangjing: Thangjing at Moirang; q1- govinda: Govindaji at Imphal East; q1-koriphaba:Koriphaba at Nambol; q1-mahabali: Mahabali at Imaphal West] -/ Which are the temples you visited in Manipur? [icd q1- thangjing: Thangjing at Moirang; q1- govinda: Govindaji at Imphal East; q1-koriphaba:Koriphaba at Nambol; q1-mahabali: Mahabali at Imaphal West]
Figure-43 shows the web content of the webpage when displayed in HTML viewer.
Figure-43: check boxes created using SML tags
Submit button tag [iS ] There can be one submit button on a form to submit the content filled in different input data to be submitted to the server or a script file in the server. Its format in SML is [iS v ] Where v is the value, that is the label to be given on the submit button.
Following is a valid SML code to create a submit button on a form. [iS Click to submit] The corresponding HTML code is
Reset button tag [iR ] There can be one reset button on a form to reset the content filled in different input data. Its format in SML is [iR v] for reset button Where v is the value, that is the label to be written on the submit button. Following is the valid SML code for using reset button. [iR Click to Reset] The corresponding HTML code is
Example: Creating Submit and Reset buttons on a form [F http://www.lamjing.com/qiuz1.php; -/ Your Name: [in text, username] -/ -/ Which is the capital of Manipur? [irs q1-imp: Imphal; q1- koh: Kohima; q1-shi: Shilong] -/ -/ Which are the temples you visited in Manipur? [ics q1- thangjing: Thangjing at Moirang; q1- govinda: Govindaji at Imphal East; q1-koriphaba:Koriphaba at Nambol; q1-mahabali: Mahabali at Imaphal West] -/ -/ [iS Click to Submit] [iR Click to Reset] ] Figure-44: Adding submit and Reset button on a webpage form
File Browser with [in ] tag File browser provides facility to select a desired file to be uploaded. It provides a file browser interface which consists of a text box and a button labeled with Browse. When the Browse button is click, a file open dialog box will be opened from which a desired file can be selected. The selected file name with full path will be displayed in the text box. Following is a valid input tag in SML to create file browser [in file, abc]
The corresponding code in HTML is HTML:
Example: Creating a file browser Type the following in SML editor and view it in HTML viewer. [in file, Open] The corresponding file browser interface as displayed in HTML viewer is shown in Figure-45.
Figure-45: File browser interface in a webpage. Input image tag [ii ] Small image of suitable size can be used as submit button. [ii src, name ] Where src is the location of the image source name is the name assigned to the button.
Following is a valid SML code to create a button with picture as its label. [ii image1.jpg, btname ] The corresponding HTML code is
Example: Using small image as clickable button Type the following in SML editor and display it in HTML viewer. [F http://webm1.php: Your Name: [in text, username] [ii g:\imagegallery\imagejpg\btn1.png] ]
The corresponding web content as displayed in HTML viewer is shown in Figure-46.
Figure-46: Image using as button
Push button tag [ib ] This button is used to invoke a function written in a scripting language when clicked. It has the following format. [ib name, value, onclick] Where ib indicates the type of input and takes button as its value for push button. name is the name assigned to the button value is the label given to the button onclick takes the function name which will be invoked when the push button is clicked.
Following is a valid SML code to create a push button [ib verify, verify, function() ]
The corresponding HTML code is Hidden input tag [ih ] It has the following fomat [ih name, value] Where name is the name given to the hidden input element, value is the value given the hidden input element.
Following is a valid SML code [ih survey1,1043 ] The corresponding HTMaaqL code is
Textarea tag [ta : ] Textarea tag is used to create a larger editable area for a user to type comments. Its format is as follows.
[ta name, rows, cols: initial text ]
Here, name is the name of the text area, rows and cols are the numbers of rows and columns in the text area and initial text is the display text when created. Note that the parameters are separated by commas and end in a colon.
The SML code to create a text are named text1 having 10 rows and 40 columns with the intial display text “Write your comments here” shown below.
[ta text1, 10, 40: Write your comments here ]
The corresponding HTML code is as follows.
Example: Creating text area in SML Type the following code in the editor window of the SML translator and view its content in HTML viewer. Which is your fovorite picnic spot? [irs s-s:Sendra Tourist Home; f-f:Fubala Tourist Home; i-i:Ithai Dam] -/ Give reasons supporting your choice. -/ [ta reason, 10,30: Write your comments here]
The corresponding web page of the above SML code when displayed in HTML viewer is shown in Figure-47. Figure-47. Webpage containing text area.
Select tag [sl : ] This tag is used to create a list box containing list of selectable items. It format is as follows, [sl name, size, multiple : option1; option2; option3; …; optionN ] Where name parameter denotes the name given to the list box to be created. size denotes the number of items to be displayed at a time in the list box. It is specified by giving a positive number. multiple, when present allows to us select more than one items from the list box. option1; option2; …; optionN are the list of N selectable items. Note the colon before option items, which separates the select tag parameter from the option items.
Following is SML tag to create simple list box with name subjects of size 2, allowing selection of multiple items. [sl subjects,2, multiple : Mathematics; Physics; Chemistry; Computer Science; Software Design ] The corresponding HTML code is show below. There is a another select tag in SML with slight variation, which allows giving values to option items and to set an item preselected when created. In this tag, the select tag is replaced by [sL ] and the option items are given as value1-option1; value2-option2 and so on. When a particular item is to be set as preselected item, the hyphen that separates value and option is replaced by an asterisk. Following is an SML code for creating a list box with value parameter and pre-selected item. [sL subjects, 2, multiple : p01- Mathematics; p02-Physics; p03-Chemistry; p04 * Computer science; p05 - Software design ]
The corresponding HTML code generated to create the same list box is
When the item lists are long and we want to group the items under different headings, it is done by writing the items to be in a specific heading enclosed in a parenthesis. Following is the SML code that creates a list box which lists Science and Arts items under different headings. [sl Subjects ( Science: Physics; Chemisty; Mathematics; Biology) ( Arts: Political Science; Economics; Geography; History)]
The corresponding HTML code is as follows.
Example: Creating list boxes in SML. Type the following in the editor window of the SML translator and display the web content in the HTML viewer by clicking the WebPage item under View menu. Select the subjects you studied so far in the science stream.-/ [sl subjects,3, multiple : Mathematics; Physics; Chemistry; Computer Science; Software Design ] -/-/
Which is the main subject in your IT course?-/ [sL subjects, 3, multiple : p01- Mathematics; p02-Physics; p03-Chemistry; p04 * Computer science; p05 - Software design ]-/-/
Which is the main subject in your graduate course?-/ [sl Subjects,8 ( Science: Physics; Chemisty; Mathematics; Biology) ( Arts: Political Science; Economics; Geography; History)]
The web content corresponding to the above SML code when viewed in HTML viewer is as shown in Figure-48. Note that second listbox is scrolled down to show the pre-selected item Computer Science.
Figure-48: List boxes, simple, pre-selected item and categorized items.
Creating Table in SML For creating simple table we use the tag [\ ]. Here, [/ denotes the start of a table code and the end of a table is denoted by ]. A table consists of rows and columns. A table is formed by combining two or more rows. The row elements are separated by commas and rows are separated by semicolons. Following is a SML code for creating a table with two rows and two columns. [/ Name,Age; XYZ,12] The corresponding HTML code for the above table is given below.
The format has also options for row and column span. Care must be taken while making table with column and row spans about the actual numbers of rows and column in the table. When we want only a column span or a row span, the number of span is enclosed in | | or ! ! as
Name Age XYZ 12 |n| denotes span of n successive columns, !n! denotes span of n successive rows. Before writing SML code for creating table with row span and column span, we must have the clear picture of the table in our mind. Best practice is to draw the table in a paper and identify the areas where the row spans and column spans are to be applied. Figure- 49 shows a table for which we will write SML code.
Figure-49: Temperatures in 3 districts of Manipur.
While creating table, we need to study the cells row wise. The first cell in the table spans 2 rows. So, we need to specify the first cell as !2!, followed by the content in the cell. The second cell in the first row of the table spans 2 columns, which need to be specified as |2| followed by the content in the cell. Similarly, the 4th cell in the first row spans 2 rows and is specified as !2! Average. This ends the specification of the first row. In the second row, as the first cell has been spanned by the first cell, we need not specify its content. Also, we need not specify the content of the third cell for the same reason. So, in the second row, we need to specify values for only the second and the third cell. After third row, we specify the rows normally with its contents separated by commas.
Following is the SML code to generate the table in Figure-33.
[/!2! Location |2| Temparature !2! Average; Min, Max; Imphal,10,24,17; Bishenpur, 8,22,15; Ukhrul, 5,17,11]
Note that there should not be any space between [\ and ! or | making the row span or column span at the first cell. Here is another table in Figure-50, which uses column spans and row spans in some of first column cells. Figure-50: Price Table in Moirang Bazar
The corresponding SML code to generate the table in Figure-50 is given below.
[/|3| Moirang Bazar Price; Category, Name, Price per Kg;!3! Fruits,Apple, 150; Banana, 110; Orange, 130;!4! Vegetables, Potato, 30; Cabbage, 25; Raddish, 35; Carrot,40]
Note that there is no space between semicolon and the operater ! used for row span. It is essential to create row span in the first cell of a row.
When a cell of a table spans m rows and n columns it is written using by combination of | and ! operators as
|m!n! to span a cell m colums and n rows, !m|n! to span m rows and n columns.
That is, the first two operators (occurrence of ! and |) determine how spanning of a cell is to be done. The third operator may be either ! or |. Shown in Figure-51 is a table showing fictitious class timing of a science college just to show a table with cells having row span and column span. Let us analyze the table structure carefully so that we can correctly write SML code to make the table. Figure-51: Fictitious class timing
In the first row, the first cell spans 2 rows, the second cell spans 3 columns. In the fourth row, the third cell spans 2 rows and 2 columns. In the fifth row, the fifth cell spans 2 rows. In the sixth row, the second cell spans 2 columns. So, the corresponding SML code to create the table is
[/!2! Day |3| Weekly Class Timing - Theory, Practical; 10 - 11 AM, 11 - 12 AM, 12 -1 PM, 2 - 4 PM; Monday, Mathematics, Physics, Chemistry, Physics; Tuesday, Biology !2|2! Off, Chemistry; Wednesday, Physics !2! Off; Thursday |2| Off, Mathematics; Friday, Chemistry, Biology, Physics, Biology]
We can also add border to the table by giving a digit 0 to 9 just after [/ with no intervening space. It must be noted that border cannot be added to a table which will have row span or column span in the first cell of the table.
Example: Creating a table with wider border Type the following code in SML editor window and view it in HTML viewer.
[/5 Name, Address, Email; L. Arun Singh, Moirang Khunou, [email protected]; Y. Hemchand Singh, Tronglaobi, [email protected]; N. Shanta Singh, Kumbi Terakha, [email protected]]
The corresponding table is shown in Figure-52. We see that the table has wider border as a result putting 5 after [/ in the SML code. If we put 0 in place of 5, the table will have no border. Figure-52: Table with wider border. Table with Parameters The [/ tag is simple and useful to create various kinds of tables with no colors or alignments or other attributes. SML provides alternative tag to create more complex tables with many attributes which are not included in [/ tag. Using this tag, we can change border to any table, add headers, change the background color of a cell, align cell content etc.
The table with arguments can be implemented using the following tag [* arguments : (H Hargument: caption title ) (c carguments: ) (r rarguments: ) (h hargument: ) (d targuments: ) ]
Where arguments are the list of values separated by commas of attributes to be applied in the table. It may take maximum of 15 arguments as values of the following attributes in the given order. border, bgcolor, cellpadding, cellspacing, background, align, frame, height, width, hspace, vspace, rules, bordercolor, bordercolordark and bordercolorlight. That is, the first argument corresponds to the value of border attribute, the second argument to the value of bgcolor, the third argument to the value of cellpading and so on.
The Hargument corresponds to the value of align attribute to be given to the caption of the Table. It may take any of the four values, left, right, top and buttom. The carguments are values of attributes for embedded colgroup tag (c. It may take maximum of six parameters as values in the order of the attributes, i.e., span, width, align, valign, char, charoff.
The rarguments are values of attributes that can be given to a table row. It may take maximum of seven parameters as values of the attributes in the following order i.e, align, valign, bgcolor, background, bordercolor, bordercolordark, nowrap.
The hargument takes only a value corresponding to the align attribute. The darguments are values of attributes that can be given to a particular cell (d. It may take maximum of eleven parameters as values of the attributes given in following order, i.e., align, rowspan, colspan, bgcolor, background, valign, bordercolorlight, height, width, bordercolor, bordercolordark.
Example: Simple table with [* tag Type the following in SML editor and view it HTML viewer. [* : (r: (d: Name, Address, Email); (d: Kirani, Tronglaobi, [email protected]); (d: Biramani, Tronglaobi, [email protected]))]
The corresponding table is shown in Figure -53.
Figure-53: Simple table creates with [*
To write a cell content or a row of cell contents as head elements, (h: can be used instead of (d: as Example: Table with headers [* : (r: (h: Name, Address, Email); (d: Kirani, Tronglaobi, [email protected]); (d: Biramani, Tronglaobi, [email protected]))]
Note that the cells in the first row of the table become table header and are displayed at centre of each cell in bold as shown in Figure-54.
Figure-54: Table with headers
Example: Coloring table and adding cellpadding and cellspacing The following SML code will generate a table with background color #55ddaa, cellpading of 5 pixels and cell spacing of 2 pixels. [* 2, #55ddaa, 5, 2: (r center:(h : Name, Address, Email); (d: Kirani, Tronglaobi, [email protected]); (d: Biramani, Tronglaobi, [email protected]))]
The corresponding table is shown in Figure-55.
Figure 55: Table with background color and padded cells
Example: Adding table heading at the bottom. The following SML code will generate a table with “Table-1: SML Developers” as caption at the bottom of the table.
[* 2, #55ddaa, 5, 0: (H bottom: Table-1": SML Developers) (r center:(h : Name, Address, Email); (d: Kirani, Tronglaobi, [email protected]); (d: Biramani, Tronglaobi, [email protected]))]
Note the left quote within caption tag (H. This acts as escape sequence to ensure that the colon just after it appear in the caption. Without the quote, colon will be interpreted as a part of the table tag. The corresponding table is shown in Figure-56.
Figure-56: Table with caption at the bottom and 0 cell-spacing.
The two elements under the Address heading can be combined using rowspan attribute of (d: tag as.
Example: Creating Table with row span in [* [* 2, #55ddaa, 5, 0: (H bottom: Table-1": SML Developers) (r center:(h : Name, Address, Email); (d: Kirani) (d center, 2:Tronglaobi, [email protected]); (d: Biramani, [email protected]))]
The corresponding table is shown in Figure-57
Figure-57: Table with row span in [*
Also, we can set the width and the height of the table using the col attribute.
Example: Setting column widths in [* The following SML code will set the widths of the first two columns to 150 pixels and the width of the third column to 200 pixels. It is done using the internal (c (l )) tags associated with [* tag.
[* 2, #235632, 1, 1: (H bottom: [i Table 1 ": SML Developers])(c (l 2, 150; 3, 200) ) (r: (h: Name, Address, Email) ; (h: Kirani) (d center, 2 : Tronglaobi, [email protected]) ; (h: Biramani)(d: [email protected]))]
The corresponding HTML code is as follows.
Table 1 : SML Developers Name Address Kirani Tronglaobi [email protected] Biramani [email protected] The corresponding table is shown in Figure-58 Figure-58: Setting widths of first two columns 150 pixels and third column to 200 pixels.
Frameset tag [fs :]
The frameset tag is used to create frameset tag in HTML. It describes how a give window frame is divided into two parts. It has the following format
[fs cols, rows, frameborder, border, framespacing: [fr ] ]
Where cols specifies how many columns are contained in the frameset and the size of each column. It can be specified in absolute pixel values, percentage or relative space availability using * symbols.
cols="100, 500,100" to create three vertical frames which will have width of 100, 500, 100 pixels. cols="10%, 80%,10%" will create three vertical frames which will have width 10%, 80%, 10% of the browser window. cols="10%, *,10%" will create three vertical frames, the first and the last frame will have widths about 10% of the browser window and the remaining space (i.., 80%) of the browser window will be given to middle frame. rows attribute works in the similar way as cols attribute, but it is used to create horizontal frames in the frameset. For example, rows="*, *, *" will create a frameset with three horizontal frames having the same widths. frameborder specifies whether a three-dimensional border should be displayed between frames. Its value is either 1 (yes) or 0 (no). border specifies the width of the border of each frame in pixels. Its value is any non- negative integer. When its value is zero, it creates frames with no border. framespacing specifies the amount of space between frames in a frameset. Its value is any non-negative integer.
In SML, the values of rows or cols are given separated by semicolon in [fs ].
For example, in SML to create three horizontal frames with widths 100,500,100 pixels, it is written as
[fs 100;500;100:]
To create vertical frames in a frameset in SML using [fs ] tag with respective widths 10%, 80%,10% it is written as
[fs , 10%;80%;10%:]
Note the first comma after [fs, it is required to create only vertical frames. Without the first comma, it will create horizontal frames.
SML also provides [fc tag to create vertical frames in a frameset. It is similar to [fs tag, only difference is that the first attribute in the tag is cols not rows. Frame tag [fr ]
The frameset tag is always followed by the frame tag to create actual frames. The frame tag in SML is represented by [fr] and its format is as follows.
[fr src, name, scrolling, frameborder, bordercolor, marginwidth, marginheight]
Where src is the address or pathname of the webpage to be loaded in current frame. name is the name given to the current frame. It is useful to distinguish one frame from another and to identify the frame in which a webpage is to be loaded when a link is clicked. scrolling allows to choose whether the frame should be made scrollable or not. Its value may be any of yes, no and auto. frameborder specifies whether or not the borders of that frame are shown. If present it overrides the value given in the frameborder attribute given in frameset tag. Its value is either 1 (yes) or 0 (no). marginwidth is used to specify the amount of space for the left and the right margins of a frame. mirginheight is used to specify the amount of space for the top and the bottom margins of a frame.
Suppose, we have three html files named webpage1.html, webpage2.html and webpage3.html. Their contents are
Content of webpage1.html
Web Page-1 Frame-1
This is the first frame named frame1. It occupies the upper half of the frameset.Content of webpag2.html
Web Page-2 Frame-2
This is the second frame named frame2. It occupies the left half in the lower half of the frameset.Content of webpag3.html
Web Page-3 Frame-3
This is the second frame named frame3. It occupies the right half in the lower half of the frameset. We want to display them respectively in three frames, named frame1, frame2 and frame3. Following example shows how to display them in frames. We assume that the html files must be in the same directory where the frameset files reside.Example: Creating frameset using frames
[fs *;*: [fr webpage1.html, frame1, yes, 0] [fc *;*: [fr webpage2.html, frame2, auto, 1] [fr webpage3, frame3 , no, 1] ] ]
The corresponding HTML code is
Figure-59: Frames created using SML tags.
Inline frame tag [if ] The inline frame tag provides the flexibility of placing a frame anywhere inside a web page. It is implemented in SML as [if ] tag. It has the following format
[if src, name, width, height, align, hspace, vspace, frameborder]
Where src is the name of the html document to be displayed in the floating or inline frame, width is the width of inline frame, height is the height of the inline frame, hspace is the horizontal spacing around the frame. vspace is the vertical spacing around the frame. frameborder is the thickness of the border. Its default value is 1. Frameborder of 0 value indicates no border.
Following is the SML code to create an inline frame of width 200, height 150, at the left side with spacing of 10 pixels around the frame.
[if abc.html, iframe1, 350, 150, left, 10,10]
The corresponding HTM code is as follows
Suppose the content of abc.html is as follows.
ABC ABC
By ABC, we generally mean the roman alphabet used to write English language. There are actually 52 charcters altogether in ABC. Small letter set of 26 characters and big or capital letter set of 26 characters.
Figure-60 shows the actual inline frame of the above SML code using [if] tag. Figure-60: Inline frame Noframes tag [nf ] This tag corresponds to the
tag in HTML, which is used to alternate text to the browsers that do not support frames. This tag is usually used inside frameset tag. </p><p>Following is a valid code of [nf] tag in SML</p><p>[nf Sorry, your browser does not support frames!]</p><p>The corresponding HTML code is </p><p><noframes> Sorry, your browser does not support frames! Applet tag [ap ] or [ap :] Applet tag is used to embed java applet in a webpage. It is implemented in SML using [ap ] tag. Its format is as follows.[ap code, width, height, align, vspace, hspace] [ap code, width, height, align: param, value; param, value; …]
Where code is the name of the java applet, width is the width of applet interface height is the height of the applet interface, align is the left, right, centre alignment of the applet in a webpage. vspace is the vertical space around the applet interface, hspace is the horizontal space around the applet interface, param is the name of the parameter required by the applet value is the value of the parameter specified parameter.
Note that the colon separates the applet attributes from the parameters and each parameter and value combination is separated by semicolons and a coma is used to separate the parameter name and its corresponding value.
Following is the SML code to embed an applet [ap calculator.class, 150, 200, left]
The corresponding HTML code is
Embed tag [E ]: This tag is used to embed multimedia file, such as flash animation, movie clip, audio files in a webpage. It has the following format in SML
[E src, controls, width, height, align, loop, autostart, hidden, volume, hspace, vspace]
Where src is the pathname of the multimedia file, controls is the display configuration of the multimedia player. Its value may be console, smallconsole, playbutton etc. width is the width set for the multimedia interface, height is the height set for the multimedia interface, align is the left, right alignment of the interface to the web page, loop is the number of times the media file is to be played. Its value may be a specific number, true or false. If its value is true, the file will play continuously. If false, the media file played only once when invoked. autostart, when set to true the embedded media file will start playing when the webpage is opened or loaded. If false, the file is played only when its link is clicked. hidden is used to hide or display the embedded media console. Its value is either true or false. volume indicates the sound level. Its value is any number between 0 and 100. hspace is the horizontal space around the embedded multimedia interface, vspace is the vertical space around the embedded multimedia interface.
Following is a valid SML code for embedding an audio file
[E lesson1.wav, smallconsole, 144, 15, left,1, false]
The corresponding HTML code is
Note that if the multimedia file being embedded is not in the location of the webpage, the full pathname of the multimedia file must be given as value of the src attribute.
Embedding video tag [Ev] SML has another tag, which is made for embedding video file in a webpage. It is similar to the embed tag but some of its parameters are different. It has the following format.
[Ev src, width, height, autoplay, controller, loop, playeveryframe, pluginspage] autoplay, its value is false by default in which case user has to click the play button. If set to true, the video will start playing automatically as soon as the webpage is opened. controller, its value is true by default to make the controls visible to the users. If false, the control will be invisible. loop, its value is false by default in which case the video will be played once. If true, the video will be played continuously. It may also take another value called palindrome, in which case the video will play through, then play in reverse and then then play it through again. playeveryframe, its value is false by default in which case frames can be skipped while playing. Setting it true will cause every frame to be played. pluginspage, Its value is the web address where the plug-in for playing the video will be found.
Example: SML code for embedding video is [Ev movie1.mpeg, 120, 150, false] The corresponding HTML code is
Noembed tag [nE ] This tag corresponds to the
tag in HTML, which is used to give description about the embedded object to the browsers that do not support activex objects. Following is a valid code in SML, which will display image1.jpg for browsers that do not support embed tag.
[nE [I image1.jpg]]
The corresponding code in HTML is
<img src= “image1.jpg”> Object Tag [O ]
It is the most generic tag to embed applet, HTML file, image, multimedia file, pdf readers, plug-ins etc to a webpage.
It has the following format in SML. [O classid, codebase, width, height, name] [O classid, codebase, width, height, name, data, : name1, value1; name2, value2; … ]
Where classid is the registration number of an activex player for flash files, codebase is the webaddress of the object where it is available for download, name is the name given to the embeded object. data url of the resource to be used by the object type specifies the type of the media data usemap specifies the name of image map in the client side to be used by the object. name1, value1; name2, value2; …, are the parameter list of named parameters and their corresponding values required to run the active object.
Following is a valid SML code Fieldset tag [Fs : ] The field set tag is used to group related elements that can be placed on a form. When the elements are enclosed in a formset tag, they are enclosed in a box when displayed in a browser. The fieldset tag can have caption to give information about the group. It has the following format. [Fs caption: form elements] Where caption is the text given as caption for the form elements enclosed, form elements are one or more elements that can placed on a form.
Following is a valid code in SML using fieldset tag. [Fs Select Your Fruits: [ic f1-apple: Apple; f2-orange: Orange; fc3-pineapple: Pineapple]] The corresponding HTML code
Note: When a colon is part of caption, two successive colons must be given after the caption text.
Example: Grouping form elements in a group using [Fs ] tag Type the following in SML editor and view it in the HTML viewer.
[Fs Personal Information:: -/ Name: [in text, , 30] -/ Age: [in text, , 30] -/ Email: [in text, , 30] -/ -/ ]
The corresponding web content as seen in HTML viewer is shown in Figure-61. Figure-61: Grouping form elements using fieldset tag.
Horizontal rule tag [r ] This tag is used to draw horizontal line ( rule) to separate sections or to add some artistic look in a web page. Its format is
[r align, size, width, noshade, color ] where the parameters are align is the mode of alignment. Its possible values are left, center and right. size is thickness of the line. Its value may be any positive integer usually less than 10, e.g., 2,4, 5, 6 etc. width is the length of the line. It may be specified either as percent of width of the web page window or as a absolute number of pixels. noshade if absent gives 3-dimensional line. Its value if present is noshade. Color is the color of the line. Its value may be given as name of color name or color code in hex preceded with a hash, e.g., green or #00FF00.
Following is SML code for drawing a horizontal line in green. [r center,4, 50,noshade,#00FF00]
Its corresponding HTML code is
Example: Creating horizontal lines of different lengths and colors aligning at the center. Type the following SML code in SML editor and view it in HTML viewer.
[r center, 4, 200,noshade ] [r center, 4, 400,noshade, #ddaacc ] [r center, 4, 600,noshade ]
The corresponding web content is shown in Figure-62.
Figure-62: Horizontal lines aligned at center. Label tag [La: ] Format [La for: Label Text] Where for is the name of Id for which the label will be used with matching name or id of an input element, such as text box.
Example: [La surname: First Name: ] [in text, surname]-/-/ [La lastname: Last Name: ] [in text, lastname] -/-/ [La address: Address: ] [in text, address, 32]
The corresponding web content is shown in figure 42.
Figure-63: Putting labels to input text boxes Link tag [L ] It is used for linking external style sheet file to a webpage. It is usually placed inside the head tag. It has the following format
[L rel, href, type]
Where rel gives the linked document’s relation to the current document, href is the web address of the file containing information of the style sheet, type is the type of the file used in the link.
Following is a valid link tag code in SML.
[h [stylesheet, style1.css, text/css]] The corresponding HTML is
Marquee tag [mq:] It has the following format. [mq behavior, width, height, align, bgcolor, direction, scrollamount, scrolldelay, loop, hspace, vspace: Marquee text]
Where behavior determines how the text should behave. It may takes scroll(default), slide or alternate as its value. When set to slide, the text stops scrolling as soon as the text starts touching the margin. When set to alternate, the text start moving back and forth. align aligns the marquee text to the top, middle or bottom of the neighboring text line. bgcolor sets the background color of the marquee. direction determines the direction of scrolling. Its value may be left, right, up or down. scrollamount determines the step size of each scroll movement scrolldelay determines how fast the scrolling will be done. It is specified in milliseconds. hspace horizontal space around the marquee. vspace vertical space around the marquee.
Following is a SML code to produce text “Happy SML Coding” running left to right.
[mq scroll, 400, 70, bottom, #ccfcdd, right, 10, 250, 10, 20, 10: Happy SML Coding]
The corresponding HTML code is as follows
Figure-64 shows the screen shot of the marquee text running from left to right. Figure-64: Scrolling text left to right
Script tag [sc:] It is used to enable use of scripting language in a webpage to make the webpage dynamic or interactive. It has the following format [sc language, src, charset] Where language is the language such as Javascript or VBscript in which the script is written. src is the name of the external script file to be used in the webpage. charset is the name of the character set to be used in writing the script.
Following is a valid SML code using [sc:] tag
[sc javascript: document.write("Hello, How are you?")]
The corresponding HTML code is
If you have an external script file called myscript.js and want to use in a webpage, it can be done by using the src attribute. That is, the external file name is to be given as second argument to the [sc] tag.
For example, following is SML code of using external script.
[sc javascript, myscript.js]
The corresponding HTML code is
Note that full pathname of the external script file must be given if the script file is in a different location other than the location in which the webpage using the script is kept. Noscript tag [ns] This tag corresponds to the
For example, following is a valid SML code of [ns ] tag.
[ns Your browser does not support JavaScript] The corresponding HTML tag is
Style tag [st: ] It has the following format.
[st type, href, media: stylecode]
Where type is the content type of the style sheet. It usually has text/css as its value. href is the web address or location of the style sheet file media is the type of target display device. It default value is all. stylecode is the actual code of the style sheet to be implemented in one or more associated tags.
Following is a valid SML code of using style tag. [st text/css: p.st1{background-color: yellow; border:4pa solid green}]
The corresponding HTML code is
Example: Highlighting a paragraph in yellow background enclosed in green border. [st text/css: p.st1{background-color: yellow; border:3px solid green; font-size:16pt}] [pc st1: This text will shown in font size of 16 point in yellow background in a box in green border with thickness of 3 pixels] The corresponding web content is shown in Figure-68.
Figure-68: Highlighting a paragraph text in yellow background Cascading Style Sheet (CSS) Cascading Style Sheet (CSS) is introduced to allow webpage maker apply typographical styles and spacing for HTML elements on a webpage. Style sheets are basically the declaration of attributes of one or more tags on how they will be rendered when displayed on a webpage.
Its format takes the form selector{ attribute1:value1; attribute2:value2; … }
Where selector is the name of an HTML tag without < and > characters, attribute1, attribute2, etc are the attributes of the corresponding tag, value1, value2, etc are the values to be applied to the attributes of the tag.
Note that every attribute and its corresponding value or a set of values is separated by a colon and the successive pairs of attributes and values are separated by semicolons.
Following is a style sheet declaration for paragraph tag p{ font-face: Helvetica; font-size: 12pt }
Here, p is the tag selector for the paragraph tag in HMTL, font-face and font-size are attributes; helvetica and 12pt are their corresponding values.
The above declaration states that the text in a paragraph following the declaration would be in Helvetica in size 12 pt.
If two or more tags require the same set of attributes and values as a style sheet they can be jointly declared in a single body with selector tags separated by commas as
h1, h2, h3, p{ font-face:Helvetica, color: #33cfdd} When such declared style of a tag is to be applied to a web page, they are declared within the style tag as
The comments in the style tag is optional. Its present will hide the declaration text in the browsers that do not support style sheet. The style tag is usually placed within the head tag. However, it can be applied anywhere before applying the style to any particular tag.
One can directly write the HTML Style tag in SML translator enclosing them in [h tag as [h ]
Once such a style for a particular tag is declared, every time we use the tag, the corresponding style associated with it will be applied.
Example: Embedded Style sheet for p and h2 [h ] [bd] [h2 Assam] [p It is one of the north eastern states of India sharing border with Bangladesh.] [h2 Manipur][p It is one of north eastern states of India sharing border with Myanmar]
The corresponding web content is shown in figure-69.
Figure-69: Web page rendered with Style sheet Inline style sheet There is another way to incorporate style sheet in an HTML tag by embedding style as attribute of the tag. This is called inline style sheet and has the highest priority to implement the style. It will override any rule defined in tags or rules defined in any external style sheet file. In SML writing inline style is limited to div, span and p tags only. Inline style is not fully incorporated for all tags in the current version of SML. It is applicable to div, span and style tags only.
Inline paragraph tag [ps] The inline style tag corresponding to paragraph tag in HTML has the following format
[ps ff v1; fs v2; fS v3; fw v4; fv v5;fc v6; fb v7; ta v8; td v9; ti v10; ts v11;tt v12; ls v13; lS v14; lh v15; va v16; ws v17, wS v18: text]
Where [ps indicates the start of inline paragraph style tag which is followed by a sequence of attribute and value pairs separated by semicolons. The end of the parameters is indicated by a colon. The shortcuts for attributes are described below. ff for font-family fs for font-size (xx-small, x-small, small, smaller, medium, large, x-large, xx-large, larger, in relative % or absolute pixel values) fS for font-style (normal, style, oblique) fw for font-weight (normal, bold, bolder, lighter, 100, 200, 300, upto 900) fv for font-variant (normal, small-caps) fc for color of the text fb for background of the text ta for text-align (left, right, center, justify) td for text-decoration (none, underline, overline, line-through, blink) ti for text-indent ts for text shadow ( tt for text-transform (none, capitalize, uppercase, lowercase) ls for line-spacing lS for letter-spacing (normal, pixel values ) lh for line-height va for vertical-align ws for word-spacing wS for white-space (none, pre, nowrap) v1, v2, --v14 are the values of the corresponding preceding attributes which are the same as defined in the span-tag.
[ps lS 5px; fS oblique; fv small-caps; ta justify: This is how an inline paragraph tag is written in SML] Figure-70: Writing paragraph text in small-caps font-variant
Example: Incorporating text styles in [ps [ps fs large; td line-through: where the mind is with out fear] [ps fS oblique; tt capitalize; lS 3px: where the mind is without fear] [ps fS italic; tt uppercase; ws 6px: where the mind is without fear]
Figure-71: strikethrough, capitalize and upper case styles in [ps
For div tag, the style sheet is incorporated as [Ds ]
Div tag with class attribute [Dc ] This element can be used to group two or more HTML tags. It can also be used to create multicolumn web page by setting the width, float and margins with appropriate values. The float attribute is set to left, the width attribute is set to the actual width desired in each column. The margin value determines the gap between the columns. [Dc tag tags one argument which corresponds to the name of a class declared in style sheet.
[st text/css: .cola, .colb {float: left; width: 250px; margin: 10px}] [Dc cola: [h2 Manipur & its people] [pa justify: Manipur, located in a lush green corner of North East India, is an oval shaped valley surrounded by nine ranges of bluish green hills intertwined with cascading rapids, carpets of flowers and lazy lakes. A little paradise on Earth with her rich cultural heritage and sublime natural beauty, Manipur promises to be a favourite new Tourism Destination. The people and tribes of Manipur include Meiteis, Nagas, KukiChinMizo groups, Gorkhas, MeiteiPangals and many other colourful communities who have coexisted in complete harmony for centuries.]] [Dc colb: [h2 Manipur & its Culture] [pa justify: Manipur is a mosaic of ancient traditions and rich cultural patterns. In the field of arts and culture, the State is best represented by its classical and folk dance forms. Raas Leelas depict the Leelas of Lord Krishna as a child with Gopies of Brindavan and express their yearning for communion with the Lord. The Raas Dance is perfectly lyrical and has extremely graceful movements. The spring festival, the “LaiHaraoba” held in April – May is symbolized by a traditional stylized and ritualistic dance performed for peace and prosperity.]]
Figure-72: Two-column web page created with [Dc] tag.
Span tag When giving values to attributes in a style sheet, the values can be given relatively in percentage and some in absolute units.
% -- Defines a measurement as a percentage relative to another value, typically an enclosing element. E.g., p {font-size: 16pt; line-height: 125%;} em -- equivalent to the size of a current font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt. e;g, p {letter-spacing: 7em;} ex -- This value defines a measurement relative to a font's x-height. The x-height is determined by the height of the font's lowercase letter x. e.g., p {font-size: 24pt; line- height: 3ex;} Pc -- A pica is equivalent to 12 points, e.g., p {font-size: 20pc;} Pt -- A point is defined as 1/72nd of an inch, e.g., body {font-size: 18pt;} Px -- Defines a measurement in screen pixels, e.g., p {padding: 25px;}
Text formatting in css
Paragraph margins: Margin-top sets the top margin Margin-bottom sets the bottom margin Margin-left sets the left margin Margin-right sets the right margin Margin can set all the margins in one declaration. If only one value is given, all the four margins will be set to the given value. If two values are given, top and bottom margins will be set to the first value; left and right margins will be set to the second value. If three values are given, the top margin will be set to the first value, left and right margins will be set to the second value and the bottom margin will be set to the third value.
Example: [st text/css: p.bdr{ margin:15px 20px; border: 2px solid cyan}] [pc bdr: This paragraoh will have top margin of 15 pixels. The left and right margins will be of 20 pixels. The paragraph will be enclosed in cyan border of width 2 pixels]
Figure-73 Style sheet for Tables: If the style sheet is declared for table or td tag, it can be used in SML in either [/ ot [* tab for creating tables.
Attributes of table commonly used in CSS are border-collapse controls the appearance of the adjacent borders of cell. It may have either separate or collapse as its value. border-spacing controls the space between the cells. caption-side specifies the location of the caption text. It may take any of the four values, top (default), bottom, left or right. empty-cells specifies whether the border should be shown for an empty cell.
Example: Tables with collapsed and separate cell borders
Table with collapse borders -/ [st text/css: table{border-collapse:collapse}] [/ one, two, three, four, five, six; seven, eight, nine, ten, eleven, twelve] -/ Table with separate borders [st text/css: table{border-collapse:separate}] [/ one, two, three, four, five, six; seven, eight, nine, ten, eleven, twelve]
Figure-74: Tables with collapsed and separate cell borders
Width and border spacing can also be added to the style as [st text/css: table{ border-collapse:collapse;width:150px; border-spacing:10px}] [/2 one, two, three; four, five, six] -/ [st text/css: table{ border-collapse:separate;width:150px; border-spacing:10px}] [/2 one, two, three; four, five, six] Figure-75: Table with cell width 150 pixels and cell-spacing 10 pixels
When style for a table or a cell is to be applied in the form of a class, it can only be applied using [*- tag.
Example: Tables with different cell colors and border styles [st text/css: table.sep{ caption-side:top;border- collapse:collapse;width:150px; border-spacing:10px} table.coll{ caption-side:top; border- collapse:separate;width:150px; border-spacing:10px} td.odd { border-style:dotted; border-width:3px; border- color:#00ff00; padding: 5px; background-color:yellow; } td.evn {border-style:solid; border-width:3px; border- color:#3333ff; padding:5px; background-color:#ccccff }]
[*- sep, 2: (H: T-1": collapse borders) (r: (d- odd: one) (d- evn: two) (d- odd: three); (d- evn: four) (d- odd: five) (d- evn:six))] -/ [*- coll, 2: (H: T-2": Separate borders) (r: (d- odd: one) (d- evn: two) (d- odd: three); (d- evn: four) (d- odd: five) (d- evn:six))] Figure-76: Table with different cell colors and border styles
Background Image in CSS: background-image: To use an image in the background. Its value is the location or web address of the image. background-repeat: determines whether the background image is to be repeated or not. Its value may be repeat (default), repeat-x, repeat-y or no-repeat. When set to repeat-x, the image is repeated in the background along the horizontal direction. When set to repeat-y, the image is repeated in the background along the vertical direction. When set to no-repeat, the image is displayed only once without any repetition. When this attribute is not set to any value or to repeat, the image is repeated along horizontal as well as in vertical direction. background-position: controls the position of the image in the background. It may take a single value or two values. The first value is the horizontal distance of the position of the image from the top-left corner of the background. The second value is the vertical distance of the image from the top-left corner of the background. background-attachment: specifies whether image in the background will be allowed to scroll or not. Its value may be fixed or scroll. When set to fixed, the background is not come along when the web content is scrolled. When set to scroll, the background image comes along with the web content when scrolled. background: One or more attributes can be set at once using this attribute. The values are given separated by space. E.g., “background: url(g:\image\im1.png) no-repeat fixed” is equivalent to setting background-image:url(g:\image\im1.png) background-repeat: no- repeat and background-attachment: fixed.
Example: Adding a background image in a table [st text/css: table{ background-image: url (G:\ImageGallery\RegularLines\p23.png); background-repeat: no-repeat; background-position: 70px 28px;}] [/ one, two, three, four, five; six, seven, eight, nine, ten; eleven, twelve, thirteen, fourteen, fifteen; sixteen, seventeen, eighteen, nineteen, twenty; twentyone, twentytwo, twentythree, twentyfour, twentyfive]
Figure-77: Adding background image in a table
The same effect can be obtained using the background property as [st text/css: table{ background:url (G:\ImageGallery\RegularLines\p23.png) no-repeat 70px 28px;}] [/ one, two, three, four, five; six, seven, eight, nine, ten; eleven, twelve, thirteen, fourteen, fifteen; sixteen, seventeen, eighteen, nineteen, twenty; twentyone, twentytwo, twentythree, twentyfour, twentyfive]
Example: Table with dotted border [st text/css: table{ background-image: url(G:\ImageGallery\RegularLines\p23.png); background- repeat:no-repeat; background-position: 70px 28px; border- width:4px; border-color:#33fcee; border-style:dashed}] [/ one, two, three, four, five; six, seven, eight, nine, ten; eleven, twelve, thirteen, fourteen, fifteen; sixteen, seventeen, eighteen, nineteen, twenty; twentyone, twentytwo, twentythree, twentyfour, twentyfive] Figure-78: Table with dotted border
If desired, the four lines of a border can set in different colors by giving different color values in the following attributes. Border-top-color Border-right-color Border-bottom-color Border-left-color
Example: Coloring border lines in different colors [st text/css: table{ background-image: url(G:\ImageGallery\RegularLines\p23.png); background- repeat:no-repeat; background-position: 70px 28px; border- width:4px; border-left-color:#f3772e; border-top-color: 3fc3ee; border-right-color:5523de; border-bottom-color: 3cfe3e; border-style:dashed}] [/ one, two, three, four, five; six, seven, eight, nine, ten; eleven, twelve, thirteen, fourteen, fifteen; sixteen, seventeen, eighteen, nineteen, twenty; twentyone, twentytwo, twentythree, twentyfour, twentyfive]
Figure-79: Coloring borders in different colors
Example: Table with border lines in different styles and colors [st text/css: table{ border-width:5px; border-left- color:#f3772e; border-top-color: 3fc3ee; border-right- color:5523de; border-bottom-color: 3cfe3e; border-left- style:dashed; border-top-style:double; border-right- style:dotted; border-bottom-style:solid}] [/ one, two, three, four, five; six, seven, eight, nine, ten; eleven, twelve, thirteen, fourteen, fifteen; sixteen, seventeen, eighteen, nineteen, twenty; twentyone, twentytwo, twentythree, twentyfour, twentyfive]
Figure-80: Table with border lines in different styles and colors Id and class selectors of other HTML elements The id attribute is not incorporated to any of the SML tags. So, it is not possible to apply style sheet using id attribute to a webpage using only SML tags. But SML translator recognizes HTML tags. So, when an id selector is required in a tag for a style sheet, we can write them in full HTML tag with id attributes. Similar is the case for other tags in SML in which id and class attributes are not implemented yet but required for implementing a style sheet.
Example: Heading in different sizes
[st text/css:h2#b{ color:blue; font-size:40px}] [st text/css: #g{color:green; font-size:30px; font- style:oblique}]
Heading 2 in blue color
Heading 2 in green
Heading 3 not in blue
Heading 3 in green
Figure-81: Heading in different sizesChild Selector Any tag is referred to as child selector if it is preceded by a tag name and separated by space when declared. The previous tag is known as parent tag. The style defined is effective only when the child tag is used within the parent tag.
Example: Bold tag used as child selector of paragraph tag [st text/css: p b{ color:#7aeedd; font-size:15pt}] [b Bold as child selector] [p My name is [b Y. Kirani Singh]. I am from [b Tronglaobi Awang Leikai], a village in Bisenpur distric of Manipur ]
Figure-82: Bold tag used as child selector of paragraph tag.
In the above figure, the style of the bold tag defined is not applied to the text of the first bold tag, as it occurs outside the paragraph tag. The texts of the bold tags within the paragraph tag are rendered according to style defined embedded in the style sheet. External Style Sheet
If we are interested to reuse a style sheet declaration to two or more web pages, the declaration part can be saved as a file with .css extension. Such a css file is known as external style sheet. When required in a web page, they are referred using the link tag or import tags in the head section of the webpage.
Using external style sheet has some other advantages. It makes loading the web pages faster as downloading of style sheet part is done once but not in every pages using it. Modifying or updating a style of a particular tag is also simple. It also increases the readability of the HTML file. So, it is considered as good practice to have separate style sheet. However, it has the lowest priority in the sense that the styles defined in an external sheet is executed only when there is no inline or embedded style sheet.
Example: [h [L stylesheet, style1.css, text/css] ] [h1 Heading 1] [h2 Heading 2]
Web pages in Manipuri, Bengali and Assamese There is a language tag included in SML to enable a user create web pages in Manipuri, Bengali and Assamese. Manipuri language is written with Bengali script with modified sound units and word formation structure. The language tag in SML to write Manipuri is based on Unicode Bengali. The tag in SML is represented by [lm ] made specially to make it semi-intelligent so that typing those Unicode Bengali characters becomes easier. Attempts have been made to map a Bengali character to a keyboard character so that only one key is pressed to type a Bengali Unicode character. The key mapping used in [lm ] tag is shown in Figure-83. Figure-83: Key map for Bengali Unicode
From the above key map, we see that a keyboard character is mapped to one Bengali Unicode character. Also, the vowel characters a,e,i,o,u, E, I, O,U are also mapped to vowel modifiers of Bengali vowels. When any of such character is found in the text inside the language tag [lm], the character is automatically converted to the corresponding Bengali vowel or its modifier depending on the word formation rule. In some cases, we may want to write actual vowel instead of modifier, often a vowel in the middle or at the end of a word. In such a case, to forcefully render a Bengali vowel character, single quote is used as prefix before the vowel character. That is, ‘e will produce ey not eykar. Some other characters are also shown mapped with single quote used as prefix. Also, when two or more characters are to be joined to form conjunct characters, the characters are joined using z (mapped to virama). The language tag can be used together with other SML tags to create web page in Manipuri, Bengali or Assamese language. Unicode characters in SML corresponding to the small letters can be generated as [lm a b c d e f g h I j k l m n o p q r s t u v w x y z ] The generated Bengali characters are
Unicode Bengali characters in SML corresponding to roman capitals can be generated as [lm A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ] The generated Bengali characters are
The vowel modifiers are generated from the corresponding vowels according to contexts. [lm kri tOba yaore hayu ]
The Bengali numerals can be generated in SML as [lm 1 2 3 4 5 6 7 8 9 0 ] The generated Bengali numerals are
Example- Simple web page in Manipuri Type the following in the editor window of SML translator and view it in the HTML viewer by clicking the web page menu under View menu.
[h [t Web page in Manipuri]] [h1 [lm mNipur]] -/ [f4 : [lm mNipur asi vartkI mnuqda mEtESiqna mpuq oina Kunzdaba szTeT amni. szTeT asida cIqmI icin inao amdi atopzpa jati kyamromzna Kunzday. mNipurda Kunzdariba mIoi kaqlupSiqsigI mSa mSagI oiba lol kyamuksu lEjE. adubu mNipuri ( mEtElon) na szTeT asigI lol oiba mrmzna toMan toManba mIoi kaqlupSiqgI mrkzta pao faonznba lol oiri. mNipuri lol asi mNipurdta ntztna vartkI amdi pLBibIgI mEtEsiqna yumliqduna Kunzdaba mfmsiqdsu MaqnE. ] ]
The corresponding web content as seen in HTML Viewer is shown in the following figure. Figure -84: Web content in Manipuri
From the above, we see that we can conveniently make web pages in Manipuri, Bengali and Assamese in SML translator.
Creating list in Manipuri: The ordered and unordered list can be created in Manipuri by enclosing the texts or item lists in [lm tag or write the list tag after the language tag.
Example: Creating list in Manipuri Type the either of following SML code in the editor window of the SML translator and view it in the HTML viewer. [lm mNipurda paqBokznba kuhzmE Krdi ] [u [lm kLxzNa jnzma]; [lm durzga puja]; [lm gOrzbrzVN puja]; [lm lkzxmI ( lkzsmI ) puja ]; [lm hEgzru (hEkzru) hidoqba] ; [lm KLxzTmas ]] [lm aduga mIyamzna yamzna pamnba kuhzmE ahumdi mBq SiZna] [o [lm YaoSq]; [lm Sjibu]; [lm niMol cakzkOba]]
Or
[lm mNipurda paqBokznba kuhzmE Krdi -/ [u kLxzNa jnzma; durzga puja; gOrzbrzVN puja; lkzxmI ( lkzsmI ) puja ; hEgzru (hEkzru) hidoqba ; KLxzTmas] aduga mIyamzna yamzna pamnba kuhzmE ahumdi mBq SiZna -/ [o YaoSq; Sjibu; niMol cakzkOba]] Figure-85: List of celebrations in Manipur
There are several words with conjunct characters formed by combination of two or more characters, which are often found to be difficult to write in Manipuri (Bengali or Assamese). The following example gives a list of some difficult words when writing in Bengali Unicode. Many people find it difficult to read such words in Manipuri. So, corresponding approximate pronunciations are of the words are also given alongside the words in Bengali unicode.
Example: List of some difficult words Type the following in SML translator and view the web content in HTML viewer. [lm ani ntzrga anidgI henba myekSiq Smjinznrga Semzba wahESiqsi ibda Kra cekSinba mBO tai. mEtElonzda ibda luna Bokpa wahE KrgI liszT] [u [lm bixzNu] Bishnu ---- [lm szbrzga] Swarga ---- [lm kzbak] Kwak ---- [lm kzbakzta] Kwakta; [lm tzroqlaobI] Tronglaobi ---- [lm Makzra] Ngakra ---- [lm MakzriczrO] Ngakrichrou ---- [lm ukzroq] Ukrong; [lm tmzfa] Tampha ---- [lm kolzhiq] Kolhing ----[lm ckzriq] Chakring ----- [lm tmzpak] Tampak; [lm bzrja bLnzdabn] Braja Brindaban ---- [lm arzBaSaszTzra] Arthasastra ---- [lm bzYakrn] Byakaran ---- [lm aMzka ] Angka ; [lm SMzgu ] Sangu ---- [lm SMzgm] Sanggam ---- [lm SMzgom] Sangom ---- [lm biXzjan] Bigyan; [lm SzbrzNalta] Swarnalata ---- [lm KzbaqjeZ] Khwangjet ---- [lm xzTeTmenzT] Statement ---- [lm kzYuba] Cuba ; [lm kaXzcipur] Kanchipur ---- [lm axzTzreliya] Australia ---- [lm kmkzxzYa] Kamakhya ---- [lm kObzru] Koubru; [lm biSzbbidzYaly] Bishwabidyalay ----- [lm SMzkzraNzTi] Sangkranti ---- [lm ckzrbihu] Chakrabihu ---- [lm vIxzma] Bhishma; [lm surzyagzrhn] Suryagrahan ---- [lm cnzdzrgzrhn] Chandragrahan ---- [lm sukzrcarzyzYa] Sukracharya ---- [lm dzrorzNacarzyzYa] Dronacharya ; [lm szbxzTi] Swasti ---- [lm hzYumen] Human ---- [lm ekzsceXzj ] Exchange ---- [lm DixzTzrik] Distric; [lm caNzDa] Chanda ---- [lm JrKNzD] Jharkhand ---- [lm jmzmu kaSzmIr] Jammu Kashmir ---- [lm utztzrarzXzcl] Uttaranchal ]
The corresponding web content as viewed in HTML Viewer is shown in figure-86.
Figure-86: Some complex spellings in Manipuri
Note that anything written outside the language tag [lm ] is not converted into Bengali Unicode character. So, when we want to include English word in a Manipuri sentence, enclose the words before the English words in [lm ], write the English word and then enclose the remaining words in [lm ] tag.
Creating table in Manipuri The process of making table in Manipuri remains the same as making table in SML except that the items in the table must be enclosed in [lm ] tag if they are to be written in Manipuri, Bengali or Assamese.
Example: create a sample table in Manipuri.
[/|3| [lm moiraq bjargI mml]; [lm poSk], [lm mmiq], [lm mml kejida];!3! [lm uhE-wahE] , [lm Apel], 150; [lm lfoi], 110; [lm kmla], 130;!4! [lm mna-mSiq], [lm Alu], 30; [lm kobi mnatabI], 25; [lm mula], 35; [lm gajr],40]
The corresponding table as seen in HTML viewer is shown in Figure-87.
Figure-87: Table in Manipuri
Creating Web pages in Assamese Creating web pages in Assamese is almost the same in making web pages in Manipuri except that whenever the r character comes it is replaced by back quote `r. Following is the Assamese text written in SML ( taken from vikaspedia site in Assamese). [h2 [lm Si`xa`r uZk`yx'T anuSIln]] [lm [u ekaVik bud'Vimt'ta`r sut'r; p'raBmik Si`xa`r `xet'rlE Si`xk shaYkskl`r kar'yk`rI awdan; ekaVik S'reNI A`ru ekaVik s'tr p`ris'Bitit Si`xN un'nt k`ra; sus'B smaj gPo Ahk] Figure-88: Web content in Assamese Creating website in Bengali Creating web page in Bengali is similar to making a web page in Manipuri. It is done by using the language tag [lm ] in SML.
Example: Web content in Bengali Type the following in SML editor and view it in HMTL viewer. [f+1: [lm Sisuder aVikar ] ] -/ [lm Si`xa hl mOlik manbaVikar. Si`xar aVikar p'rtiTi nagriker. b'Yak'ti hisebe ebq smaj hisebe un'nyne gurut'b aprisIm.] -/ [f+1: [lm Sisu aM'gn]] -/ [lm ei bivagTi bij'Xanvit'tik GTnabli sm'pr'ke abhit krbe, s`yx'TiSIl cin'tavabnay ud'bud'V krbe ebq parm'prik vab binimy, p'rbn'V o dr'Sn maV'Ymer sahaY`Ye Si`xap'rk'riyay sk'riy Yogdane uZsahit krbe.]
Figure-89: Web content in Bengali (Note: The above Bengali text is extracted from Bengali Vikaspedia). Creating Web Page in Devanagari To facilitate creating web content in Devanagari, the key mapping of the keyboard characters is made in SML. The number of characters in Devanagari is much larger than the number of characters available in a key board, so the mapping is done in two ways, normal character key mapping and key mapping with back quote. In normal character key mapping, every keyboard character used in the mapping corresponds to a particular Devanagari character. For key mapping with back quote, back quote immediately followed by a keyboard character is mapped to a less frequently used character or a commonly used conjunct character. All conjunct characters cannot be mapped using the back quote. Any conjunct character can be formed by using small z or single quote.
Also note that, in normal mapping a vowel character is mapped to either to a Devanagari vowel or its modifier. The SML translator will automatically modify to a vowel or its modifier depending on the context. However, if a particular vowel is required in the middle or the end of a word, it can be produced using the back quote of the vowel.
The Devanagari key mapping in SML is shown in Figure-60. The key mapping is also available in the help menu for quick reference.
In SML, the Devanagari is invoked using the language tag [lh ]. The first character of the tag is the small letter L not one. Figure-90: Devanagari Key mapping in SML
Example: Some Devanagari words with conjunct characters Type the first [lh tag or the second [lh tag in SML editor and view its web content in the HTML viewer.
[lh bijzXan, kzxetzra, vkzta, kurukzxetzra, lkzxmI, kzrxzNpkzx, krzk, karzykzrm, SzrImdz vagwt kBa jzXanyjzX, surkzxa, SrNarzBI, enDIefbI, kaqgzres, raxzTzrpti k'YxzNpkzx, k'Ypa, Vznzyabad, SasztzrIjI, mhatzma gaqVi, bidzya, SzrdzVa, pzrjzjzwlit, Szr'Yqgar, ttzpSzcat, pzrtzyek, sdszyoq, aVzykzx, sqKzya, sidzVarzB aqtrzraxzTzrIy ttzpSzcat, aVzykzx, wakyudzV, pzrtzykzx, wiSejzXoq, d'YxzTi, pzrOVzyog, puNzy, vTzTacarzy] or [lh bij'Xan, k'xetzra, vk'ta, kuruk'xet'ra, lk'xmI, k'rx'Npk'x, kr'k, kar'yk'rm, S'rImd' vagwt kBa j'Xanyj'X, surk'xa, SrNar'BI, enDIefbI, kaqg'res, rax'T'rpti k`Yx'Npk'x, k`Ypa, V'n'yabad, Sas't'rIjI, mhat'ma gaqVi, bid'ya, S'rd'Va, p'rj'j'wlit, S'r`Yqgar, tt'pS'cat, p'rt'yek, sds'yoq, aV'yk'x, sqK'ya, sid'Var'B aqtr'rax'T'rIy tt'pS'cat, aV'yk'x, wakyud'V, p'rt'yk'x, wiSej'Xoq, d'Yx'Ti, p'rOV'yog, puN'y, vT'Tacar'y]
The corresponding web content as displayed in HTML viewer is shown in Figure-91.
Figure-91: Devanagari words as viewed in HTML viewer.
Mathematics symbols and letters The mathematical symbols and letters can be easily generated using the tag [lM ( el em)]. In this tag, two different mapping are used. One is the normal mapping of the key board characters to the commonly used mathematical symbols. The other is the key mapping of the key board characters (with single quote as a prefix) to less commonly used symbols. Figure-92 shows the key mapping of the mathematical symbols included in the [lM ] tag. Figure-92: Mathematical Symbol key mapping in SML In this figure, key map characters are given in odd columns and the next column to its right represents mapped the mathematical symbols.
Example: Generating mathematical symbols and Greek characters in SML [lM 'a 'b 'c 'd 'e 'f 'g 'h 'i 'j 'k 'l 'm 'n 'o 'p 'q 'r 's 't 'u 'v 'w 'x 'y' 'z -/ 'A 'B 'C 'D 'E 'F 'G 'H 'I 'J 'K 'L 'M 'N 'O 'P 'Q 'R 'S 'T 'U 'V 'W 'X 'Y 'Z -/ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z -/ a b c d e f g h i j k l m n o p q r s t u v w x y z]
Figure-93: Mathematical symbols mapped using single quote as prefix. Example: Special symbols created using direct html codes Other Special symbols can be added by directly incorporating the html codes for the symbols. -/ Cent: 5¢ or 15¢ -/ Pound: 5£ or 15£ -/ Yen: 5¥ or 15¥ -/ -/ Other Symbols -/ Inverted exclaimation: Oh¡ or oh¡ -/ Inverted question mark: ¿ or ¿ -/ Section Sign: § 5 or § 6 -/ Divide: 8 ÷5 or 10 ÷6 -/ Multiply: 5 ×3 or 6 ×5
Figure-94: Some special symbols
Example: Writing equations in SML:
[lM 100'`]C is equivalent to [lM 212'`]F. -/ [lM 0'`]C is equivalent to[lM 32'`]F. -/ -/ So, T[lM '`]C = T[lM '*9/5 +32 '`]F. -/ And T[lM '`]F =(T[lM '- 32) '* 5/9 '`]C.
Figure-95:
Example: Algebraic formula in Greek Algebraic identity: -/ [lM (a+b)^2 = a^2 + 2ab + b^2 -/ a^2 - b^2 = (a + b)(a - b) -/ a^3 - b^3=(a - b)( a^2 + ab + b^2)]
Figure-96: Algebraic formulas in Greek
Example: Trigonometric identities Trigonometric identities: -/ sin^2[lM q] + cos^2[lM q=1] -/ 1 + tan^2[lM q=] see^2[lM q -/ 1 + ] cot^2[lM q =] cosec^2[lM q]
Figure-97: Trigonometric identities
Example: Flooring and Ceiling symbols
Flooring and Ceiling: -/ Flooring of 7/2 written as [lM '[7/2']=3] -/ Ceiling of 7/3 written as [lM '(7/3')=3] -/ Flooring of 7/4 written as [lM '[7/4']=1] -/ Flooring of 7/5 written as [lM '[7/5']=1] -/ Ceiling of 7/6 written as [lM '(7/6')=1] Figure-98: Flooring and Ceiling examples
Mathematical Expression in Fractional Form Some mathematical expressions are better expressed in fractional form. SML provides a special braces tag [{a/b}] to enable us write expression in fractional form, where a is the numerator and b is the denominator. The [{ denotes the start of the fractional form and the }] denotes the end of the fractional form.
Example [{ 25/100}] writes in fractional form with 25 as numerator and 100 as denominator if something is required to be written aligned with the main line that separates the numerator and denominator, then it is enclosed within the ( ) which is separated by commas from the preceding and succeeding fractional terms as [{{25/100},(=),{1/4})}]
Figure-65 shows the web content of the above SML code.
Figure-65: Fractional form in SML.
By properly nesting the fractional terms, we can write more complex fractional form.
Example: Writing fractional form in SML Type the following in SML editor and view it in HTML viewer. [{(Find the value of),{{{a/b},(-), {c/d}}/{{a/b},(+), {c/d}}},(-), {a/b}}]
Figure-66: Writing complex factional form
If desired the text part can be rendered into Manipuri, Bengali or Assamese by using -lm tag as [{[lm (velu kyano puBok`u)], {{{a/b},(-), {c/d}}/{{a/b}, (+), {c/d}}},(-), {a/b} }]
The corresponding web content in Manipuri is shown in Figure-67.
Figure-67: Fractional form in Manipuri.