Smart phones applications

Last Updated on Sunday, 12 February 2012 09:22 Written by Administrator Sunday, 15 January 2012 12:51

Most of the applications that you see on your desktop are available on the smart phone, at least the functions under different program names. Here are some of the applications that will be covered in this presentation: laguages, dictionaries & verbs, web browsers & editors, world-wide newspapers, text editors, office (suite), graphics programs , CAD, GPS, e-mail and social networks. Before starting, I would recommend that you would create a few folders in one of the shortcut screens, maybe the one having the file manager icon. You might name them as follows:dictionaries, languages, etc.
1) The process of creating a folder: press the menu button (while you are at the shortcuts screen), choose the Add button and touch it, from the select action pop-up window, choose the Add folder option. From the Select folder pop-up window, select New folder, the folder will appear infront of you. Now touch it and press header (folder title) and keep pressing for a second or 2, the rename folder pop-up window will appear in front of you can enter the folder name in the folder name field and touch OK.

2)Text editors & office apps: below is a file with a few text editors:

2-1) Text editors: example ones that run under Android OS are: Notepad (default), Ted, Just NotePad, 920 Text Editor, andEdit, Notepad+,Text Edit, Freewriter, another notepad.
2-1-1) Notepad (default): when you touch the Notepad icon a window with existing files built using notepad will open in front of you. If you want to add a new file, hit the Menu button in your phone a nd you will get a couple of options to choose from: Delete notes or Add a new note.Choose the Add new note, enter some daqta Now you touch the Menu button in your phone and a sub-menu will appear on the screen with 3 options, Save, Discard and Edit title, choose Save, your file will be saved under the text you entered on the first line. Now you can choose the file you have just created and touch the Menu button, you will get 4 choices to choose from: Discard, Delete, Edit title and Save (greyed out, inactive). Choose Edit title, in the Pop-up dialog box that will appear on the screen, enter the name of this file and hit OK (the file name is changed to the one you have just entered). Now you can more text files, open existing ones adding new data, deleting others, modifying your text and saving it.
2-1-2) Ted: touch the Ted icon, ablank page open with the emulated keyboard shown. Enter some text and then touch the Menu key on your phone, you would get 6 choices: New, Open, Save, Search, Recent files and More, choose the Save icon. A pop-up dialog box will appear in front of you where you can choose the folder to which yo are going to save your file, now in the file name field enter the file name and choose OK. Now, if you touch the the menu key on you phone, then you choose More, you would get a few choices which are: Save as, Settings and about. If you choose Settings you can select maximum number of recent files to be diaplayed (eg. 5), whether or not to show the line numbers, whether to activate or de-activate the word wrap option, choose the text size (eg. 16) and the end of line control character whether for Linux/Android/Unix, Windiows/Symbian/Palm or Mac/iIphone as well as whether to active the Automatic save or not.
2-1-3) Just NotePad: touch the icon perinent to this text editor, it will open a screen in front of you with a few icons at the top of the page (in the toolbar). The first icon for a new file, the second, tthe second icon lets you give a name to the file, the third would give you a list of recent files to choose from, the fourth would let yo open a file from you SDcard, the fifth icon is the to save the current file, the sixth is to close the current file, the seventh would allow you to publish the file to Facebook, the eighth to tweet it, the nineth to see it as an HTML file and the last icon allows you to search open (active) files for a specific word and it displays such files. The Menu key provides 4 choices which are: Revert, Send as mail, Background and Text options and On-line help.
2-1-4) 920 text editor: touch the icon of the text editor and a blank document will open infron of you with 6 icons in the top toolbar. The first is for a new blank document, the second to open an existing document (it would give a path to all folders/files on your external SD card, the thrd is the Save function, the fourth is the Save As function, the fifth and sixth are the ubdo and redo. If you toucj\h the Menu button, you will get 6 options which are: Reent files which would display the recent files opened by the user, Highlight code (eg. HTML/XML, php, C#, C++,...etc.) in a document, Encoding allows the user to choose the encoding of the characters (eg. UTF-8, ISO-8859,....etc), Search/replace which allows the user to search the document for certain words and replace them as well, Prefernces and Exit. Thre Preferences choice would include the settings for different document properties like View (which allows the user to set certain parameters regarding the display of the characters (font, font size, line numbers,...etc.), Highlight properties, Search properties, Other (auto save, auto indent, rememer last file,..etc.) and clearing history.
2-1-5) Freewriter: when you touch he icon a list of directories (folders) will open in front of you, at that time you can touch the Menu key on your phone, you will then get 3 options, a New Folder, New Text File and exit. Now, you can touch New Folder and in the pop-up window enter the folder name and touch OK. Now, touch one more time the Menu key but choose the Text File and enter is name and touch OK. Now you can enter whatever text and touch the Menu key, you will get 6 options which areSave File, which you can do now, Search, Show/hide text, Go to end, Options and More. The options choice would include among others the Fonts and colour settings (background as well as text). The more option would have the Save as and close.
2-1-6) another Notepad program: When you touch the icon, an untitled blank document will be opened. Enter some data, now touch the Menu key of you phone and choose Save. Now, you will have a list of directories (folders) infront of you. Choose the directory then touch Select button (at the bottom of the window). Enter the file nome in the pop- dialog window and touch OK. When you touch the Menu key you get 6 options one of them was the Save, the others are Save As, Open File, New, Recent Files and more. The More option would give the choice of the following actions: Delete File, Details (current file information, Send (you get a list of programs to chhose from including Gmail, Facebook, Bluetooth, Messaging, Twitter...), About, Exit and settings. The Settings option has 4 headings which are: display (which includes the selection of the font, text size, text color, background color & Selection color), Charset (which has the open and save file with your selection of the charset, when you touch any, you would get a list of all available character set encoding), File format (Auto, Mac, DOS, Unix) and advanced (select language, auto update & reset to default).

2-1-7) Notepad+ text editor program: when you touch the notepad+ icon, you would get a blank document, when you touch the Menu button on your phone, you would get 6 options which are: New, Open, Save, Save as, Exit and More. Obviously all menu items are self-explenatory. If you choose the More option, you would get the following list to choose from, Serch, Find & Replace, To the top, The end, Settings and Recent files. If you choose Settings, you would get the following parameters to set: text encoding (auto, iso, utf,...), file format when saving (the default ia DosWin, you can choose betweeen Unix and Mac), Interface that would gice you even more parameters to modify (menu, orientation, text colour, background colour, font(size, font type), search & replace (key to search & highlight color), recent files (numer of files to display and the choice to clear history of previously opened files), file manager (default folder where you swve yor text documents, the addition of the file extension .txt & whether to show or not the system files and folders)autosave on exit (checked or not). 2-2) Below is a file with a few office apps:

At time of preparing this document, the kingsoft office package has 3 document types (word with .doc file extension, text with .txt file extension and spread sheet with .xls file extension, which is equivalent to excel). Documents to go has 3 typesequivalent to MS office suite components for presentation (.ppt), spread sheet (.xls) and word processor (.doc). Finally, the olive office has 3 file types, word processing, presentation and spread sheet.
2-2-1) Kingsoft office: when you touch the app icon, a screen will appear infront of you showing the recently usedviewed documents. If you want to start a new document, touch the menu button on your phone and a drop-down menu will appear in front of you, from which you can choose the new icon, a screen will be displayed in front of you to choose the type of document you want to create. Tese 3 options are: blank word, blank spread sheet and memo. When you click a document the blank document will appear on the screen where you can enter the data you want, then you touch the save as icon in the drp down menu. Now, you will choose the folder where you want to save the present file to, enter its name in the field and then touch the save icon close to the top of the screen. If the document you want to access appears on the screen when you open this app, then touch it and it will displayed in front of you can chose the pusbutton or the Zoom icon from the drop-down menu. If you perform the latter task, a slide bar will appear in front of you from you you can move to yyour rght to increase the text size (zooming in). The icons included in the drop-down menu are: layout, zoom, full screen, save, save as, undo, redo, search, font selection options, text alignment options and page setup.
2-2-2) Documents to go: when you touch the icon, you would get a registration form to fill now or later. after, you would get a screen having the following options: recent files, starred files, local files, google documents, desktop files and uograde store. Now if you touch the local files you would get a list of locally stored spread, word and presentation files. You touch the icon with the plus sign on and start adding new documents in any of the following 3 formats: msword. ms excel or ms powerpoint.
2-2-3) Oliveoffice: when you touch the app icon, th program will check for updates and give the choice to install the ur skip this step. If you hit the cancel push button, you would get a screen with the following options: recent files, starred files, local files, google docs, dropbox (files stored to your dropbox account), file search and update. Now, if you touch lets say the local files item, then from the menu that appears close to the top of the screen you choose the icon with the plus sign on (adding a new file), you would get a window with a title :create new document" and having the famous 3 choices ms word, ms excel and ms powerpoint. Now, lets say you would choose the word, a blank document appears infront of you with 7 icons at the top of the screen. You touch the first icon to create the new file (giving it a name and saving it in the folder that you want), so, enter and chooe the required data and touch ok. The secondicon, if you touch it will save the current document. If you touch the third icon, the keyboard wil be displayed on the screen. The fourth will give the ability to highlight portions of the text in your document, To desselect the text you cantouch the same icon or the one next to it. The sixth will display a pop-up window with font options where you can change and adjust. The seventh and last is the quit/exit icon.

3) Web browsers: there is the default browser plus a few others. Here are a few browsers that you may download and install on your Android smart phone: Miren, Opera-mobile, Ninesky, Dolphin, Angel and Sleipnir.

3-1) The default browser (mobile safari): when you touch the browser icon, the browser will open dispkaying (rendering) the home page, that you can set from the More then Settings menu items. Now, if you touch the menu button on your phone, a menu will open having 6 options which are: New window, Bokkmarks, Windows, Refresh, Forward and More. if you touch the More icon, you get a new menu with the following items: Add bookmark, Find on Page, Select text, Page info, Share page, Downloads, Settings and About. If you choose the settings option, you would get all the settings that you may set/adjust divided into 4 headings: page content settings, privacy settings, security settings and advanced settings. The first heading would include the following: text size, default zoom, open pages in overview text encoding, block pop-up windows, load images, auto-fit pages, landscape only display, enable javascript, enable plug-ins, open in background & set home page. The second heading would include: clear cache, clear history, accept cookies, clear all cookie data, remember user input data in form fields, clear form data, enable location, clear location access. The third heading would include remember passwords, clear passwords, show security warnings. The fourth would include: set search engine, reset to default & website settings.

3-2) Miren browser: when you touch the browser icon, the screen displayed in front of you would have a tabwitha few favourite sites and a few others to add more favourite web sites plus 5 more buttons, top sites, bookmarks, history, rss feeds & downloads. If you touch the plus sign close to the top of the page you would get another tab with the same components as mentioned in the previous sentence. To add a favourite, you just have to press one of the empty boxes and entr the site url in the field shown (or if you already have it in the bookmarks, it will be displayed in front of you and you will just have to choose it). If you touch the menu button on the phone, 8 options will appear, which are bookmarks, home, share, brightness, settings, downloads, exit app and more. If you choose the more you would get the following options to choose from: select text, screen lock, feedback, find on page, back and UA (user agent). Now if you choose Settings option, you would get a screen for the common settings. From the bottom of the screen you can switch from common to advanced setting items and vice versa. The common settings would include: text size, panorama mode, load images (enable, disable, enable only when on wi-fi), smart full screen, volume button setting, action for sliding on page edges (none, go back or forward, switch tabs), always show tabs, bandwidth saving mode (disable, enable, enable with non-wifi connections), clean cache, reset to default settings an about miren browser. With the advanced settings, you would get a list: web page, gesture & operation, privacy and security, browser data full-screen control and download settings. Each one of these headings will have a set of sub-settings. The wb page would give the following options to set: text size, load images, display flash content, wap support, sve cache to sd card, user agent, encoding, page zoom setting, reading modeforum mode, block pop-ups, exit confirmation, set homepage and app upgrade. The gesture and operation settings would include: volume button setting (default, scroll page or switch tab), enable volume button setting (always or only if no music), action for sliding on page edges, single click action (open link in current tab, open link in new tab and switch focus to it or open link in new tab in background) and long click action (show context menu, open link in new tab and switch focus to it or open link in new tab in background). The privacy & security settings would include: clear cache, clear history, clear cookies, clear cache on exit, remember form date, clear form data, remember passwords, clear saved passwords, enable geolocation and disable geolocation. The browser data would include the following options: one key backup, one key import (data restore) and automatic backup. The full screen control would include the following settings: smart full screen, always show tabs, status bar (always show, always hide or auto) and floating buttons (show, auto-hide, never show floating buttons or hide back/forward in full screen mode). The download option would have 2 setting: stop download automatically when leaving wi-fi environment and choose the folder where the downloaded files will be stored in.

3-3) Angel browser: when you touch the icon, you would the home screen (the default is a speed dial). At the bottom of the screen, you have six icons (mini-buutons), 4 are already set and 2 that you may set yourself. The first icon is the home one, the second is the bookmark, the third is the setting, the fourth and sixth you can set it, the fifth is equivalent to the phone menu button.the speed dial icon. To set the fourth button, long-press it and you will get a screen with options to choose from, choose the back option. Now, go to the sixth icon and long-press it, choose forward. You can change as well the icon (fifth) having the equivalent to the phone menu button by long-pressing it. You can change to refresh for instance. You quite of a few functions to set these icons to: empty, menu, back, forward, refresh, home, bookmarks, screenshot, read later, add bookmarks, add screenshot, add read later, share page, social, settings, page info, local square, application launcher, select text, zoom in, zoom out, page up, page down, most up, most down, move right tab, move left tab, up key, down key, left key, right key, enter key, more, terminal info, notes, show cursor, change background colour, translate, download history, tab history, find on page, help, close tab, exit, sensor auto scroll, scroll menu, gesture, global search, create a qr (quick response) code, switching display tab, address bar display switch, status bar display switch, quick tabs, quick ua setting, changing brightness and plug-in. When you touch the settings icon (second one), you would get the following options to set: home witha drop-down list having speed dial, a list of bokkmarks or a specific URL, the next option is whether to display the status bar or not, dispaly tab, display address bar, show custom menu, show tab move buttons when scrolling, format web pages to fit the screen, open pages in overview, fixed auto-rotate, keep screen on, UA (desktop, android,.....), show page-down button, choose the search engine (google, yahoo or bing), text encoding, text size and default zoo. The previously mentioned options can all fall under the preferences heading. The other 2 settings groups are the privacy and the advanced. The privacy would include the following options to set: clear cache, accept cookies, clear cookie data, remember form data, clear form data, remember passwords, clear passwords, remember history, clear history, clear web search, enable location, clear location access, launch application & registration pattern, preferred ua settings, do not appear in the list and launch by default. The advanced settings would include: active tab click (would have 3 options: show tab menu, show tab history or close tab), double tap (would have the following options disable, full screen, zoom in/out, share page, quick tabs, show cursor, quick ua setting, gesture, custom menu on/off, close tab), link long click (gives you the following options open in new tab and switch, open in new tab in background or show link options), image long click (would give the following options download or show menu), screen long click/touch (disable, full screen, show menu, quick tabs, quick ua setting, share page, gestur or switching display tab), back-button long click (close tab, exit or tab history), clicking search button (find on page, show cursor, gesture or web search), clicking volume buttons (default android action, switch tabs, scroll up/down page, focus up/down key or zoom in/out), left or right flick would do nothing, go back and forward or switch tabs, when moving backward or forward either possible or not without reloading page, customizing your gestures, setting your download directory, video download (download store or watch streaming), enable plug-ins (always on, on-demand or off), screenshot data (internal or SD card), read later data (internal or SD card), load images whether or not display images in web pages, download time, confirmation dialog on exiting application, exit settings whether to clear or not cache on exiting, starting with the last page before exiting or not, show or not pinch zoom button, menu position *bottom, center or top), display or not a message on web page load, all-in-one search, bookmarks item sorting and trackball enabling or disabling.

3-4) opera mobile: it is quite similar to the its desktop counterpart. When you touch the browser icon, the speed dial screen appears. If you long touch the plus sign a dialog box will appear in front of you to enter the web site url you want to store in the speed dial screen. The bottom of the screen has 5 icons, one to move the screen backward, the second forward, the rhird is the refresh icon, the fourth has a pull-up mini screen to add (or close by touching the x image) tabs, the last gives you a pull-up screen with nine buttons. These buttons or icons are: bookmarks, history, start page (speed dial), saved pages, downloads, settings, find in page, share and help. if you touch the settings icon, you would get a list of parameters to adjust/set. The parameters are: load image (on or off), opera turbo (always off, always on or off when on wi-fi), opera link (off or if on you would have to enter user name. e-mail and password to create an account to enable this free service that synchronizes the bookmarks, speed dial and search engine between all your computters and phones), single column view (on or off), status bar (on or off), navigation bar (on or off), zoom (give the choice between 75% to 200% in 25% steps), text wrapping (on or off), privacy and advanced. The privacy settings would give the following options: remember passwords (on or off), accept cookies (on or off), clear history, clear passwords, clear cookies, clear cache, clear shared location. The advanced would include the ua (whether mobile or desktop) and the exit buttonv (whether on or off).

3-5) Ninesky browser: when you touch the browser icon, you would open the app and get the home page (or dashboard as it is called in Ninesky browser). The dashboard would have 2 tabs, navigation and tools. The navigation tab would have the speed dial web sites, top sites, reading, entertainment and lifestyle buttons. You can add your favourite sites to the speed dial portion of the ecreen. By pressing long on the plus sign you would get 2 options to choose from select a bookmark or add a new site, if you choose the latter you would be prompted to enter a name for the site and the url address of the site, then you press ok. If you touch the tools tab, you would get the following icons: extensions, bookmarks, downloads, history, reading list, feedback, rate me. now, if you look to the bottom of the screen, you would see 5 icons which are: a backward arrow, a forward one, a menu button (if you press it, you get a pull-up menu list with 3 tabs: general, setting & tool), the duplicate icon, if you touch it you would have a chance to add another dashboard to your screen, from the same icon you can close other dashboards (you can add dashboards by touching the plus sign close to the top of the screen and close dashboards by touching the x at the tab corner) and the last icon is the home one. The general tab of the menu button(on the screen or phone) would have the followingoptions: bookmarks, add to bookmarks, reading list, read & like. full screen, download and ecxit. the setting tab would have the following options: turn on low carbon (if selected, will not display images or play flashes), privacy toggle icon (if selected, will not record visit history, save cache or cookies and remember input data & passwords), page optimization on or off (if on, web page will load faster and fit for mobile screen, but some advanced features will be disabled like video playing,..), night mode, display orientation (always portrait, always landscape or follows default system setting), settings (which if clicked will display 3 tabs with the following headings: general, advanced and security). The tool tab of the menu icon would have 4 options namely, share page, find on page, cozy, feedback and about.Now back to the settings option on the setting tab, if you touch the settings icon, you would get a screen with the 3 tabs mentioned previously and the following options on the first tab (general): text size (tiny, small, normal, large or huge), default zoom (far, medium or close), ua (android, iphone, ipad, desktop-chrome or desktop-firefox) and reset to default settings. The advanced tab would have the following parameters: low carbon mode (on or off), load images (on or off), flash (on or off), auto fit pages (On or off), overview mode (on or off) and you choice of text encoding (eg. unicode/UT-8, Latin-1, chinese, japanese,..). And finally, he security tab would have the following parameters to set: block pop-up windows (on or off), security warning option (show all security checks or only show risk warning), privacy mode (on or off), clear history gives you the option to clear any or all of the following: visit cache data, cookies, form data, form password, and location data and the final parameter is the clear download history.

3-6) Dolphin browser: when you touch the browser icon, you would get a tab (new tab) with 2 sub-tabs (headings): speed dial and webzine. If you touch the webzine heading you would get a screen with a decorated boxes or certain web sites and a button to your right written in it featured. If you hit the featured area (rectangle) you would get a list of sites with a couple of buttons at the bottom of the screen, search all and view more. When you press any of the sites, you would four icons at the bottom of the screen, the first to take you to the previous page (move backward), the second addsthe site in front of you to the webzine part of you home page, the third icon would display the tab of the page you have infront of you and the last would refresh the web page you have displayed in fornt of you. In the wbzine section if you press long on a rectangle (site), you would get the option to delete it. Now, if you press the menu button on the phone, you would et a pull-up menu with 6 choices which are: refresh,bookmarks, toolbar, forward, exit and more. If you choose the toolbar, the frame infront of you would move to your left and 3 icons appear. These icons are: fullscreen (vs. normal display of the web page), add-on/themes and adding/duplicating or deleting tabs. The more icon would give a list of options: add bookmark, find on page, select text, share page, save page, mobile view (GWT, google webkit tool), downloads and settings. If you touch the settings option in the more pull-up menu item, then you would get a screen with the following items: dolphin settings, page content settings, data storaage, backup & restore, webzine settings, sign up for updates, reset to default, about, setup wizard and dolphin account setting. The setup wizard would ask to choose your preferences: flash plugin (always on, on demand or never) after you choose your preference you touch next, gesture setting (hide entry, bottom left or bottom right), data storage (cache to phone or cache to SD card), volume button (default android action, scroll up/down page or switch tabs), ua (android which is the default, desktop, iphone, ipad or custom), others (in which you can tick any or both these optionsadd short cut to home screen and show pinch-zoom button), import bookmarks (from dolphin original, dolphin mini and stock) and then press finish and you are done. Now, if you touch the dolphin settings you would get the following parameters to set: ua, volume button, orientation (auto, landscape, portrait), new tab settings give the option to show the bookmarks bar or not, exit settings (give the choice to clear cache and/or history and/or cookies whebn existing the app), enable or not swipe action, enable long press menu, keep status bar, show pinch-zoom button or not, keep screen on or not, open in background or not, open in new tab or not, download in background, set search engine (a choice between google, yahoo and bing), search suggestion (yes or no), set or not as default browser, set home page gives the choice between using the new page tab or having your favourite web page. The page content setting would give th chance to set the following parameters: text size, default zoom, text encoding, open pages in overview, block pop-up windows, load images, auto-fit pages, enable javascript and nable pug-ins. The data storage settings would have the following parameters, cache to sd card, browsing without history, clear data (cache, history, html5 data, cookie data, form data, passwords and location access), privacy and security dealing with accepting cookies, remembering form data & passwords, enabling location and showing security warnings and setting the download directory. The backup and restore settings would include the import bookmarks, backup of data (settings, bookmarks and other web data) to sd card, restoring such data frm sd card to app.webzine settings that would include the webzine text size, loading images either auto or manual and clearing webzine cache. The signing up for updates would include entering your e-mail address.

3-7) Sleipnir mobile browser: when you touch the icon, you get the home page opened. If you press the menu button on your phone, you get a pull-up menu with six options, tab group, bookmark list, full screen, home, forward and more. If you pres tab list you go to the tab list screen where you can manage your tabs, close tabs, add pages, to tabs,..etc. If you close all tabs and hit the backward buutton on your phone, you would get the speed dial screen having close to its bottom 2 buttons, home and bookmarks. Now, if you touch the more icon, you would get a list odf parameters/options to set. These options are:share page, search within this page, select text, download history, settings and exit application. When you choose exit app, you would have to confirm and select (or unselect) clear history and/or cache as well as closing all tabs. When you choose settings, you get a few parameters to set that are divided into a few headings (sections). These sections are: bookmarks, tab, security, gesture, privacy, user interface, details, and other. The bookmarks option would hav 2 parameters to adjust which are bookmark management and add quickly. The tab section would include the following settings: new tab ((most visited or home), home (you enter the url address of your home page), restore tabs (ask on exit or do not restore tabs), security (save password, clear password, security warning, gesture (flick side to side, up-right/up-left, L-shape, U-shape, circle, double clockwise swirls and the s, for search), privacy (clear cache, clear history, accept cookies or not, clear all cookie data), user interface (enable zoom button or not, enable scroll grip, display button on tab bar), details (enable hold and go,ask when downloading, always or not enable plugins, manage page display mode). And finally the other option would let you discover the app (how to use it), license and about the app.

The other common browsers are: Boat browser, Maxthon broweser and xScope.

4) The most commonly used e-mail programs are: yahoo, gmail and hotmail.The most important issue with mail programs is the sunc (synchronization) of the contact, inbox, sent,..and other folders between the remote server and your phone. once this is done done properly, the rest are more or less similar to accessing your mail, composing a new message, replying to an incoming mail from your laptop/netbook.

4-1) Yahho mail: after downloading, installing, adding your accounts and synchronizing your contacts, inbox and other folders, you open the e-mail app by touching the icon. Now, you will get as creen (named folders, you have another heading Accounts) with the following items: the inbox, the drafts folder, the sent folder, the spam and trash folders. Yiu would also get the smart folders which are email from contact, photos and files as well as those ones that you previously created on you email server, If you press the menu button on you phone, you would gett 6 icons, one to compose a new email, the second is the search icon, the third is the refresh, the fourth is the messenger, the fifth is the options icon and the last is the more one. If you choose the more, you would a list having the following functionsL empty trash, empty spam and add a folder. If you press options, you would get a list in which the first item is the general settings followed by a list of your accounts registered in the email app on your phone. If you choose the general settings, then you are given the following opyions to set: notifications sounds or not, message preview (dispaying a couple of lines of a message) or not, enable ssl and about. If you choose any of your email accounts you would get the following list to set its items: notify in ststus bar when email arrives, synch yahoo contacts, show signature and the signature to include at the end of your email message. Now if you choose the search icon you get a screen with acouple of pull-down lists to Filter the search accordingly entire message, from, to or subject and emails, photos or attachments, now you enter the word or whatever you are looking for and you would get a list of emails containing your search criteria. Now if you are in the folders screen and you press accounts, you would get a screen with a menu item manage anda list of all your accounts.If you tap manage you get a screen with 2 buttons, one to add additional account or accounts and one to remove accounts. If you press Add, you would get a screen to enter the username and the password as well as a sync contacts option that you set to yes or no (by ticking the square next to it).

4-2) gmail: when you touch the gmail icon, you would go directly to th inbox of your account. If you press your account to the right-hand-side top corner of your screen, you would get a list of all accounts registered (and synced) on your phone. From there you can choose the content of the inbox you would like displayed in front of you. If you press the inbox button to your left-hand side top corner of your screen, you would get a list of all folders yo have created or created by default in your email account. (eg. spam, trach, chats, outbox, sent, drafts, all mail, important, starred, priority, hydropower, biomass, ..). Now, if you press the menu button of your phone, yopu would get six options to choose from: refresh, compose, accounts, go to labels (i.e. different folders you have in this account), search and more. If you press refresh you get the content (messages) of the folder you are in updated. If you press compose, you would get a blank message, to add the address of the receiver (to field), the subject and the content of the message. Then if you to add a file to your mesage, you would press your phone menu button, and get six choices which are send, save as draft, add cc/bc, attach a file, discard and help. If you do not want to perform any of the following tasks, you can press the icon to the top of your screen to send your message. Now, if you press the menu button in your phone, then choose mre, you would get a pull-up list with 3 choices, settings, help and about. If you choose settings, you would get a list, the first heading is general preferences and then a list of your accounts.If you choose the general preferences, you have to set the following: message action, clear search history and clear show pictures. If you choose any of your accounts, you would get a few parameters to set (which are divided into general and notifications): priority inbox, signatureconfirm actions (archive, delete, send or none), replay all (making it the default for responding to messages), auto-advance, message text size, batch operations (which allows label operations on more than one message/conversation), sync inboxes and labels (allows you to choose which labels to be synchronized), email notifications (which labels to notify upon receipt of mail).

4-3) Hotmail: when you click the hotmail icon, you would get your home screen with a top menu having the following items (other than the home) all emails, your username (account), and search by contact as well as a push button at the bottom of the screen with add hotmail account caption. If you are at home and you tap the menu button on your phone, you would get the following options: general settings, support, pause and about. If you choose the general settings, you get the following parameters to set: character display/encoding (eg. utf-8), display delete confirmation message or not, notifications and alerts (notification methods upon receipt on new emails, audio, vibtate and/or message notification), support tools (advanced settings, log level and hotmail support), attachments settings (default folder for attachments), terms of use and enabling or not the app password protection. If you are at all emails on the main menu and you press the menu button on you phone, you would get a couple of options, compose and sort. If you are at your user name, you would get 6 optionsm, namely, check mail, pause, compose, account settings, sort and change folders. If you choose the change folders, you would get a screeen listing all folders in your accout with a push button at the bottom having folder settngs as caption. If you press it, you would get a list of folders to be able to choose from and refresh. If you choose the account settings option, you would get the following parameters to set: email (in which you have to set the following options: time limit i.e. messages from how many passed days, message size limit,10 kb, 25 kb,.., email read format html or text, adding signature to new emails or not, adding signature to replied and forwarded emails or not, the text that you want to appear in your signature and reply to header), folders (in which you set the folders you want synced), calenar (in which you can sign out, sync contact nd/or clendar), sync new calendars, contacts, quiet time, sychronization type i.e. how frequently you want to synchronize your account, general settingsmentioned previously , refreshing data and rmoving account from your phone.
5) Graphics: there are quite a few graphics-related apps in smart phones, just to list a few, skitch, sketch n draw, sketcher, sketch n paint, andcad, efinger paint and photoshop.
5-1) Skitch: when you click the skitch icon, you would get the home page that has 3 icons, the camera, the open (select picture, from gallery for example) and the new (plus sign), that when chosen open a blank document, where you enter shapes, text, move around, giving different colours, deleting it or part of it and then share it by sending it to your email account where you can download, use it or modify it. Below is an example for sketches produced by skitch app.

Now, if you open a blankdocument, wou would have on the same screen a top icons menu and a bottom on. The bottom menu would have 6 icons. They are the clour an thickness selector, the pen tool (free-hand drawing), the arrow (to draw arrows), the pointer/selector of components (after selecting the component of the drwing you can move it or delete it by touching the can, second top menu icon), the text tool (you touch it draw a square on the scree, it will appear in dashed lines, enter your text, move it around or even change its colour), the last icon in the bottom menu is a square from which you can choose the shape you are going to draw, a circle, aline or a square. The top menu would have the home icon, the recycle (deleting) icon, the undo/redo and the share ones.
5-2) Sketch n draw: when you touch the icon you will be presented with a blank document. If you press the menu button of your phone an inversed L-shaped menu will appear in front of you. The first icon (bottom-left) will allow you to choose the colour of your pen/brush, the next one gives the option to choose the brush shape including an eraser option (eg.web, squares, circles, grid,...), the one after mwould ake the menu icons disappear and let you enter the components of your drawing and the last adjusts the brush size.. The first icon from the top gives the choice of the size of the canavas (eg. default, 480x320, 800x480,...), the second icon from the top saves your drawing and gives the location (folder) and file name, the third icon lets you share your art or even send it to your email address to be able to download it to your netbook (or whatever device), the fourth let you undo your most recent action and the fifth is the redo icon and the sixth erases everything infront of you.

5-3) Sketcher: can draw straight lines in the x and y axes. When you press the icon you get a blank document in the landscape orientation. When you press the menu button on your phone, you would get a menu with six icons. They are undo, clear (delete), color, size, style and more. The more would give you thev options to save your sketch, share t as well as setting your preferences which is basicall clearinfg the screen when shaking the device or not. The color would give the facility to choose the pen colour, the size would give the chance to select the thickness of your pen (from 1 to 9), the style would give the chance to set the style of the line (whether solid, dashed as well as other few styles). To draw vertical lines (up and down) use the roller bar to your right and move it upward or downward, to move your cursor in the horizontal direction (right or left), use the roller bar to you left. If youmove it upward you would move to your right and downward to you left.

5-4) Sketch n paint: when you tap the icon, you get a blank canvas (document). At the bottom there are 7 icons. When you tap the first you get the dialog box regarding the canvas type (use same canvas, new canvas or photo that gives the option o view you gallery of pictures to choose one from there). The second icon gives the user the chance to choose the shape of the brush, its size and pressure. The third icon would let you choose the colour of the brush. The fourth icon provides the undo action and the fourth is the redo icon. The fifth is the movie icon, if you press it you would get a video display (player) with full set of buttons and the picture is built infornt of you as you have created in steps. And the last is the zoom icon.

5-5) AndCAD: for an introduction to CAD, in general, you may refer to the following link:An introduction to CAD. For a few common open source CAD programs and a couple or so secreenshots for qCAD, you may refer to the following link:CAD packages. when you touch the AndCAD icon, the app opens with a tip. Then you would get the dilog box regarding the layer property to select from: simple layer set, use empty layer set or use custom layer set. The properties of each type is displayed when you touch the help icon next to each layer type. After selecting the layer set type, you are taken to a bllank drawing screen where youcan start entering, your drawing elemets. At the bottom of this screen there is the toolbar, the bottom set of icons, and another set of icons displayed above the bottom ones and they are function of the icon you touch on the toolber (bottom row). From left to right the (bottom) icons in the toolbar are: file, modify, view, create, text/dim, snap, input, layers. If you touch the file icon, you would get the following icons displayed above the toolbar: new file, open file, save file, import dxf, export dxf, options, load image, exit, about and help. If you tap the second icon in the toolbat (modify), you get the following icons displayed above the toolbar: select, layer painter, undo, redo, erase, move, copy, rotate, scale and break. The view icon would display the following: pan zoom, zoom all, zoom 100%, zoom in, zoom out, grid toggle settings and layout togle. The create icon would give you the option to do the following: draw a line, rectangle, circle, a 2-point circle, an ars,a poliline, a polygon, a polystar nd point. The text/dim icon would allow you to edit text/note, to enter text to your drawing or a note, to set the drawing scale, to measure any distance in your drawing, to draw a linear and aligned dimension. The snap icon would dislay the following sub-icons: snap toggle/settings, snp to end point of line, snap midpoint, snap grid, snap center, snap quad, snap to the intersction of 2 lines (objects), snap perpendicular, snap tangent snap point, snap nearest, ortho toggle (allows only the drawing of horizontal and vetical lines), orth 45 (allows the drawing of lines inclined 45 degrees fom the y-axis in any dirction) and isometric toggle. The input icon would display the input panel (the iput panel has numbers from 0 to 9, plus special characters and a few with specific functions written on each of them which are: last, ref (@), feet, back, go, The layers manager would display the layers dialog properties, make visible, make invisible, delete,..etc. With this we come to the end of this coverage of apps of Android smart phones, but there will be a continuation with more apps under the following heading Smart phones, more apps.

Building web sites using Joomla

Last Updated on Sunday, 08 January 2012 10:08 Written by Administrator Sunday, 08 January 2012 10:03

Keywords: Site, menus, content, components, extensions, tools, help, add new article, article manager, front page mnanager, section manager, category manager, media manager, menu manager, language manager, user manager, global configuration. control panel, logout, mainmenu, user menu, top menu, banner, contacts, news feed. polls, search, web links, module manager, plug-in manager, template manager, clean cache, mass mail, read messages, write message.

1) after downloading and/or installing joomla to your server, go through the existing categories, sections and articles (it is the Hierarchy of building any site using Joomla), deleting or unpublishing those you do not to have in your site. Now you can go to the menu manager, modifying and deleting the existing ones.In the coming steps we shall create a new category, adding to it sections and articles and adding menu items to navigate through the site plus other funcions like external links.

2) our example will include adding a section named Building web sites, a couple of categories the first named HTML, CSS & JS and the second named CMS (content management system). Under the first category we shall have 3 articles named HTML, CSS and JS (javascript).The second category will have 2 articles namely joomla and drupal.

3) Go into Joomla administrator mode (logging into administrator as admin with your password), click Section Manager from the buttons infront of you. Click New button on the top, then enter the Title (in our example we shall call it Building web sites), then for the following parameters select as shown: Published: yes, Access level: public, now click Save shown closer to the top of your screen (you have created a new section and you gave it a title).

4) From the top menu, click Content then choose Category Manager.From the screen in front of you, select New, in the title field, enter the name of your category that belongs to section you created in (3) above (in our example, we enter HTML, CSS, JS), from the drop down list select the section name. Now click Save. Follow this process to create the second category, CMS, that belongs to the section named Building web sites.

5) Now we shall create the articles that belong to either of the categories in step (4) above and these articles contain what we want to show in our web pages. Click Content from the top menu, pick Article manager. From the 2 pull-down list boxes select the following: Section: Building web sites, Category: CMS. Now click the New button, close to the top of the screen, then enter the Title (in our example Joomla), Published, check yes, for Front page and check no. Type in the content (text) of the page whatever subject you want to cover and the visitors read, enter images, links,..etc. and format your text.Click save to save your web page. The same process can be followed to create other articles (web pages). For example you may want to create a Drupal page under the CMS category. Maybe you may want want to enter a page for HTML another for JavaScript under the category HTML, CSS, JS cretd in step (4) above. Note: your front page now will have Joomla as the first item in the Latest portion of the page.

6) To make it easy to navigate your site the Main menu (generally, on the left hand side should map what you have done so far) should include the Section, Categories and Articles. Click Menus item in the top menu, then choose Main Menu from the pull-down menu list. From the screen in front of you select New button, you will get a list to choose from (menu type), click Articles then choose Section Layout. Now in the screen that you will have, in Diplay in choose Main menu, in Parent item pick Top, in Parameters basic Section selection to your right hand side (on the screen) pick Building web sites. Click Save. The same approach is used to put categories menu elements under this section and further articles under their appropriate categories.

7) Click New in the Main menu screen, themenu type this time will be Articles, Category List, then in the screen that will appear in front of you Select Category (in our example will be CMS), Display in will be Main menu, Parent item will be Building web Sites (obviously ot Top) then click save to save the menu item. Now we shall put an article (Joomla) under the Category CMS. Click New in the Main menu screen, in the menu typ dialog, choose Articles then pick Article Layout then go to Parameters basic, click the Select button, a list of articles will be displayed in front of you to choose from, you can filter the list and choose the article (in our example Joomla), the Part item should be CMS. click save.

8) Adding a newsflash at the top of your page: after logging in, click Extensions from the top menu, choose from the drop down list Module manager, from the list that appears in front of you you can unpublish any unwanted items like poll, advertisement for example, then clik New clise to the tip of the page. Check News flash, then click next, now enter a tile (eg. Latest issues), Show title: Yes. In the module parameters area, choose a category (eg. building web sites/CMS), Title linkable: yes and save.

9) Adding users and contact us form: to add a user, in the control panel select user manager, click New. Enter the required data, including the e-mail address of the user. Enter the required fields in theParameters section, then click Save, you have just created a new user of your web site. To create a cotact to which inquiries or comments can be send to, click Components in the top menu, then choose Contacts, then Categories, you can either create a new cqategory by clicking New and entering the required data and then Save or you can use the existing category, Contacts. In or case we shall use the existing category, so, click Components, then choose contacts and hit Contacts, then choose New from the menu close to the top of the page. Enter the data required in the following sections: Details, Information and Contact Parameters and hit Save. You have just created a contact us form with the recaiving e-mail entered in the information section. Now we have to add this contact us form to the menus. hit Menus in the top menu, then choose Main menu, then click New. Choose the Menu item type, in our case it will be Contact Category Layout. Now, enter the Menu item details, Parameters (Bsic) including the Select Category field (in our case, it is Contacts). This menu item will display all contacts under this Category. Now you can enter a single contact in the top menu, click Menus, then choose top menu, click New and choose, from the menu types, Standard Contact Layout type. Enter the menu item details, and in the Parameters (basic), Select contact to which this form will be sent. Click save, you have just added a menu item to the top menu (contact us to a specific recipient).

10) Adding a news feed from other sites: Click Components, then choose News feed, from he 2 options that will appear in front of you choose Categories, add the category under which our news feed will be created (eg. VePi-related feeds). Now click again components and News feed, but this time choose Feeds option. Click New, enter the name of the feed, the link to the feed, the category to which it belongs, then click Save. Now we want to display this news feed category in the main menu. So, Click Menus, then choose Main menu, click New, from the available type options, choose News feed, then Category layout type. In the parameters (basic), select the category (in our example it will be VePi-related feeds). Type in the title and save.

11) Changing the favicon, the welcome to front page text and the header (logo): After preparing you icon and naming it favicon.ico you can upload it to your site using the FTP tool and save it under --/joomla/templates/your default template folder/favicon.ico. The setting for the Page Title is located in the parameters of each Menu Item under "Parameters (System)". So, in order to change the welcome to front page text, you log in as the Joomla administrator, then you click Menus and choose Main menu, then click home you move to your right hand side and click Parameters (system) and you either click no (Show page title) or you modify the title field and Save. To change the logo (header) there 2 ways, one to maintain the same image file name and just consruct you new logo (plus header text) and save the file under the existing file name for the logo. then using the FTp tool upload the image to replace the exiting one. In general the logo (header) files are located under joomla//templates/your template directory (eg. rhuk_milkyway)/images/your new logo image with .png extension. The second method is to build your header and save the file under any name you like with whatever graphic extension and then modify the template.css file to reflect the new image that you also have to upload it to where the original logo file is stored. Befor you can edit your template.css file you have to be sure that it is writtable. If it is not, you have to log on to your server and through the FTP tool you access the directory where this file is and change its permissions to read/write/execute by everyone. You locat the file, you pick it (by ticking the checkbox next to it, then got close to the top of the page and pick changemod button and click it change the permissions as mentioned and save. Now you can edit the file and add the new file name and save or log out and log in as the Joomla administrator. Choose from the top menu Extensions then choose template Manager, then pick your defaqult template, then choose from the top buttonn menu, Edit CSS, then choose template.css (it is the file that you made writable by everyone), then you find the line background: url(../images/mw_joomla_logo.png) 0 0 no-repeat; (which you will find a few lines under div#logo {. Now you change the file with .png extension with the file you had uploaded to th images directory, then click Save and you are done.

Note: for the Beez theme, the logo image is logo.gif and is located in the images and is refered to it in (main directory of the theme file named) index.php, as well as the slogan is written in the samw index file.

Read more: Building web sites using Joomla

Building sites using HTML tags

Last Updated on Wednesday, 25 January 2012 10:42 Written by Administrator Sunday, 08 January 2012 10:18

1) with HTML plus JS you are in full control, in the look and response of your web page. The use of CSS (cascaded style sheets) will make the look of the web pages in you web site consistent, The use of PHP in your site would enhance it and gives it more functionality.

2) The basic idea of HTML is the use of tags to tell the browser how and what to display in your page. Basically, there are types of tags one having a start and an end tag and the other has only one tag to describe the action or the function. Examples are <b></b> bold and <img src="/joomla/imagename3.ext">

3) More commonly used tags: <i></i> italics, <u></u> underline. <br>: carriage return or line feed.

4) These tags are called elements and can be classified broadly into: document structure elements, anchor element, block formatting elements, character data, document sound, dynamic documents, forms, inline images, character formatting elements, list elements and tables. The latest version is HTML5, the HTML standard is under the control of W3 (world wide web consortium) plus all other web related standards. The most widely acceptable HTML standard is version 4.01. HTML would have more elements (though so far not all browsers support the newer standard. The new tags belong to the following categories: markup elements, media elements, canvas element, form elements and input type attribute values.

5) To start a web page, open your favourite text editor, enter the tags and the text (body of your page) and save the document with .html extension (eg. index.html, index is usually the front page of your web site).

6) Document structure elements:

6-1) <html> and </html>: the first tag is the first entry in an html file and the closing tag is placed at the end of your web page. These tags are only ndicators of the beginning and the end and everything else should go in between, other tags and text. The html document is divided into a head and a body.

6-2) <head> </head> tags: the first indicates the begining of the upper part of the document and the latter the end of the head of the document. there are certain tags that are included in the head of the document and each tag may have one or more attributes. certain tags do not allow for attributes as will be seen later.

6-3) ><body> ></body>: These 2 tags indicate the beginning and the end of the body of the document aftterwich the closing html tag comes. All other tags except head and those mentioned in 6-4 below have to be included between the body tags. The body tag itself allows for attributes to be included inside the body tag.

6-4) The tags that are found inside the head start and end tags are: <title> and </title>, <base>, <link>, <nextid>, <style> and <meta>. These elements do not directly affect the look of he document when rendered , they can be used to provide important information to the browser, with the exception of the title that displays the page title in the tab of the browser.

6-4-1) <base>: allows the base address of the HTML document to be specified. If only relative addresses are given through out the document, the base address will be used to to complete the full address of a apage or any other object.

6-4-2) <link>: indicates relationship between documents. A document may have any number of link tags.

6-4-3) <nextid>: creates unique document identifiers.

6-4-4) <style>: specify styles within the document when used with browsers that support style sheets.

6-4-5) <isindex>: tells the browser that the document is an index document. Readers can query the document with a key word search by adding a question mark to the end of the document address followed by a list of keywords separated by plus signs. Usually it is added (generated) by the server that has search engine that is capable of supporting this element.

6-4-6) <meta>: specifies document information usable by servers and clients.

6-5) Attributes of elements found between the head tags:

6-5-1) <base>: there is 1 main attribute href eg. <base href="http://vepi.freevar.com/">. It could also include a target attribute.

6-5-2) <isindex>: it has 2 attributes, action and prompt. The first indicates the script to be used to serch for the tex tenterd and the latter the prompt to be shown to the user to enter his/her text to be searched.

6-5-3) <link>: it may include any of the anchor attributes (the anchor attributes will be covered in details when covering the tags included in between the body tags). The link element may be used to specify the location of the style sheet that is to be used for the document. It is one of the primary style sheet inclusion mechanism elements. Example for such attributes are rel, type, title, href. The first indicates the relation between the HTML document and the file the link is pointing to (eg. stylesheet), the second gives the MIME type (eg. text/css), the hird gives the file titlt/name (eg. formal) and the fourth indicates the location (the path including the directory and file name) of the refered to file.

6-5-4) <meta>: the attributes that may be included in the meta tags are: content, http-equiv, name. The first is the meta information content associated with the given name or http-equiv. The second attribute binds the element to http response header, the third is a meta information name (if it is not present it is assumed to be equal to the http-equiv value).

6-6) Body tag (element) attributes: they are:

6-6-1) background, which gives the path to the backgrounf image eg. background="image.png".

6-6-2) style="background-color: rgb(rrr, ggg, bbb);" specifes the page background colour eg.<body style="background-color: rgb(255, 255, 0);">.

6-6-3) bgproperties=fixed: to give a page with a background image a watermarked effect, as you are scrolling the page, the background stays fixed.

6-6-4) leftmargin="x in pixels": it sets the left margin of he document, eg. leftmargin="40".

6-6-5) topmargin="x': it set the top margin of the document.

6-6-6) link="#rrggbb": it set the colour of the link text in the page eg. <body style="background-color: rgb(255, 255, 0);" link="#0000ff" vlink="#800080">.

6-6-7) vlink="#rrggbb": it shows what the text colour of a visited link will be.

6-6-8) alink="#rrggbb": it decides on the text colour on an active link.

6-6-9) text=""rrggbb": it sets the text colour of a document, for black text text="#000000".

7) The anchor elements, starting <a> and ending </a>: there are 8 attributes that could be included in the anchor element, 2 are more common then oters. these 2 attributes are href and name.

7-1) href: makes the text between the opening and closing anchor element (<a> </a>) a hyperlink. Below are few examples:

7-1-1) <a href="/joomla/psat0000.html"> this tag will appear as a link on your web page adwhen clicked will take to the page having the address next to href </a>

7-1-2) <a href="/joomla/hanepspac1.odt"> this anchor will open the download (save)/open file dialog box </a>

7-1-3) <a href="#wyedelta">Wthis link will to take to the sectionnamed wyedelta in the same page </a> a named section (using the anchor element) as will be shown below (7-2) has to be set

7-2) name:it allows the anchor to be the target of a link The value of the name attribute is an identifier for the anchor which must be unique within the page (html document). eg.: <a name="wyedelta"> Wye to Delta and vice versa transformation:</a>

7-3) methods: the value of the methods attribute is a comma-separated list oh htto methods supported by the object for public use.

7-4) rel: gives the relationship described by the current document to the linked (target) document. 7-5) rev: it is the reverse of the rel attributeand is not supported any of the major browsers.

7-6) target: the target attribute specifies where to open the linked document eg. target="_blank" will open the hperlink (page) in a new window or tab.

7-7) title: the title attribute specifies extra information about an element, it is for information only.

8) Block formatting elements (tags): are used for the formatting of whole block (rather than a line or a character) of text within an html document and obviously if present, they should be located within the bodyelents of the document.

8-1) <address> </address>: This tag defines the contact information for the author or owner of a document. it accepts standard attributes and supports event attributes. The content of the address element usually renders in italic. Most browsers will also add a line break before and after the address element.

8-2) <basefont size=...>: specifies the default font size for the document.

8-3) <blockquote> </blockquote>: quotes text from another source. Notice that a browser inserts white space before and after a blockquote element. It also inserts margins for the blockquote element. it suports standard and event attributes.

8-4) <br>: forces a line break (provides carriage return/line feed).

8-5) <center> </center>: centers the text on the page.

8-6) <!--...--> commen tag: is used to insert comments in the source code. Comments are not displayed in the browsers.

8-7) <dfn> </dfn> definition tag: encloses the defining instance of a term in HTML.

8-8) <div> </div>: defines a division or a section in an HTML document. It is also used to group block-elements to format them with styles.

8-9) <font> </font>: sets/changes the font size, colour and type. eg. <p><font size="3" face="verdana" color="red">This verdana font will have red colour and size = 3</font></p>

8-10) <hr>: creates a horizontal line in an HTML page.

8-11) <hx> </hx>: formats six levels of headings (h1 to h6).

8-12) <ul> </ul> and <ol> </ol> listing tags: the former for unordered (unumbered) list and the latter for a numbered one. eg.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol> 

8-13) >marquee<: creates a scrolling display. The attributes are: height (how tall the marquee is), direction (which direction the marquee should scroll), behavior (what type of scrolling), scrolldelay (how long to delay between each jump), scrollamount (how far to jump), loop (how many times to loop), bgcolor (background color), hspace (horizontal space around the marquee) and vspace (vertical space around the marque).
8-14) <p> </p>: defines a paragraph. Irt support align attribute as well as standard and event ones.
8-15) <pre> </pre>: defines preformatted text. it supports optional attribute (width), standard and event ones. The pre element is often used to display computer code.

9) Character data: Within an html document, any character between the html elements represent text. An html document (including elements and text is encoded by means of a special character set described by the charset parameter as specified in the text/html type. Examples for charset are ISO-8859-1 (encode the set of characters known as Latin-1) and UTF-8 (Unicode Transformation Format-8, it is an octet, 8-bit, it is the only practical character set option for applications that support multilingual documents). It is specified in the html document between the head tasgs and using the meta tag with its associated attributes, example: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">. Characters can be typed in with very few exceptions where they have to be escaped (entered as numeric entity) eg. ampersand is entered as & as well as the larger than and less than symbols.
9-1) Control characters: are non-printable ones. They are used for communication and device control, as format effectors and as information separators. The 3 control characters in html are the horizontal tab, line feed and carriage return.
9-2) Numeric character references: In addition to any mechanism by which characters may be represnted by the encoding of the html document, it is possible to explicitly refernce the printing characters using numeric character reference.

10) Document sound: The 2 tags that let sound be played (inline) in an html documents are bgsound and sound.
10-1) The bgsound element allows you to create pages that play sound clips (example file formats are .mid,.wav and .au). It accepts 2 attributes which are src and loop. The first attribute would specify the address of the sound (file) to be played and the second would indicate how many times the sound clip is to be played (eg. loop=infinite, he sound loops indefinitely.
10-2) The sound tag is not suported by all browsers and accepts 3 attributes which are src, loop and delay. The delay attribute would delay the playing of the sound file for certain number of seconds after the page and sound file finish loading (eg. delay=3).

11) Dynamic documents: are either server push or client pull. The first is controlled by the server and will not be covered here. The second method achieves the refreshing of the loaded page every few seconds or loading a new page through the use of the meta tag within the head tags in an html page. Examples: <META HTTP-EQUIV="Refresh" CONTENT="20">, in this case the page will be reloaded (updated) every 20 sweconds.
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://www.mynewsite.com/">, in this case after 10 seconds the user will be redirected to the new web site address indicated in the url path.

12) Forms: would allow the user to enter data, interactively and the javascript program may act upon such data and output results and they are used also to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
12-1) Input element tag within the start and end form tags: The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.

Examples:

First name: <input type="text" name="firstname" />, it defines a one-line input field that a user can enter text into.

Password: <input type="password" name="pwd" />, it defines a password field.

<input type="radio" name="response" value="yes" /> Yes, it defines a radio button which let a user select ONLY ONE of a limited number of choices.

<input type="checkbox" name="vehicle" value="Bike" /> I have a bike, it defines a checkbox, checkboxes let a user select ONE or MORE options of a limited number of choices.

<input type="submit" value="Submit" />, it defines a submit button.

12-2) <textarea>: it defines a multi-line text input control.

12-3) <label>: it defines a label for an input element.

12-4) <fieldset>: it defines a border around elements in a form.

12-5) <legend>: it defines a caption for a fieldset element.

12-6) <select>: it defines a select list (drop-down list).

12-7) <optgroup>: it defines a group of related options in a select list.

12-8) <option>: it defines an option in a select list.

12-9) <button>: it defines a push button.
A practical example for a form that accepts user input (numbers) and calls a JS function to act upon the inputted data and output a result:
<form> <a name="parallel">The equivalent of a few parallel branches (resistance or reactance elements):</a>
The Total Number of the parallel elements<input name="tnope" size=5 type="text" value="2">
First element:<input name = "par0" size=11 type="text" value="1">

Second element:<input name = "par1" type="text" size=11 value="1">

Third element:<input name = "par2" type="text" size=11 value="1">
Fourth element:<input name = "par3" size=11 type="text" value="1">

Fifth element:<input name = "par4" type="text" size=11 value="1">

Sixth element:<input name = "par5" type="text" size=11 value="1">
Seventh element:<input name = "par6" size=11 type="text" value="1">

Eighth element:<input name = "par7" type="text" size=11 value="1">

Nineth element:<input name = "par8" type="text" size=9 value="1">

<input type="button" value="click to obtain the result" onclick="parallel()">, parallel is the function name that is callled when the button is clicked

The equivalent of the<input name = "pres0" size=3 type="text" value="">elements:<input name = "pres1" type="text" size=11 value="1">

<hr size=1 width="50%">, this tag will draw a horizontal line. </form> 13) Inline images <img>: this element or tag is probably the second most comonly used tag behind the anchor one as it allows the inclusion of embedded graphical content in html documents, eg. <img src="/joomla/imagename3.ext"> . It accepts 7 attribute, they are:
13-1) align: accepts the valuesleft, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom, which apecify the alignment of the image with respect to the following text line.
13-2) alt: allows the setting of text as an alternative to the graphic for rendering in non-graphic environment, the alternate text will be provided by the browser whenever the graphic is not rendered.
13-3) border: controls the thickness of the border around the displayed image.
13-4) ismap: identifies an image as an imagemap (graphics in which certain regions are mapped to other documents, an image with clickable areas). Clien-side image maps are used rather than this attribute to achieve same result (point 14 below will cover this topic).
13-5) lowsrc: allows the usage of w images in the same space. The value of this attribute would be loded first and after the loading of the full document the value given for src would be loade din the same space as that of the lowsrc.
13-6) src: the value of the src attribute is the url of the image to be displayed, its syntax is he same as that of the href attribute of the <a> anchor tag (element).
13-7) vspace & hspace: they control the space around the (above & below and left & right) image in order to maitain some spacing between the image and the text displayed surrounding it.
14) Client-side image maps: the img tag must include an attribute named usemap, eg. <img src="/joomla/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> and then you have to use the map tags <map> and </map&gt. Between the starting and closing map tags, the area tags (that defines the clickable areas in the image map) are included with their attributes. The name attribute of the <map> element is required and it is associated with the <img border="0" />'s usemap attribute and creates a relationship between the image and the map. Example for a map element:
<map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="/joomla/image1.htm" alt="im1" /> <area shape="circle" coords="90,58,3" href="/joomla/image2.htm" alt="im2" /> </map>
15) Information-type elements & character formatting elements:
15-1) Information-type element: which are
15-1-1) <cite> </cite>: specifies a citation and typically is rendered in italics.
15-1-2) <code> </code>: used to render equations (not prefomated text), it is rendered inm monosapaced font and newlines as double spaced (on the same line).
15-1-3) <em> </em>: it is the emphasis element and typically render the included text in italics.
15-1-4) <kbd> </kbd>: defines keyboard input.
15-1-5) <samp> </samp>: defines sample output from a computer program.
15-1-6) <strong> </strong>: renders text as strong (highlighted, bold) text.
15-1-7) <var> </var>: defines a variable part of a text.
15-2) character formatting elements:
15-2-1) <b> </b>: specifies that the text should be rendered in boldface.
15-2-2) <big> </big>: specifies that the enclosed text should be displayed in big font.
15-2-3) <blink> </blink>: causes the enclosed text to blink.
15-2-4) <i> </i>: specifies that the text should be rendered in italics.
15-2-5) <small> </small>: specifies that the text should be displayed in small font..
15-2-6) <strike> </strike>: specifies that the text should be displayed with a horizontal line striking through the text.
15-2-7) : specifies that the enclosed text should be displayed as a subscript using a smaller font size.
15-2-8) : specifies that the enclosed text should be displayed as a superscript using a smaller font size.
15-2-9) <tt> </tt>: specifies that the text should be rendered in fixed-width typewriter font.
15-2-10) <u> </u>: specifies that the text should be rendered as underlined text.

16) List elements and tables: In point 8-12) above an introduction to the most common list tags were given, here we shall elaboratea little bit more on list elements before getting in to tables elements.
16-1 List elements:
16-1-1) <dir> </dir>: a directry list element can be used to present a list of items which can be arranged in columns, the dir element is followed by a list element li and each item of the directory is started by the li element (each item should end by /li element).
16-1-2) <dl> </dl>: a definition list element, it is usually used with the dt definition term element and definition data dd elements. The dl element may take one attribute which is compact to provide a compact rendering ofr the definition list, eg.
<dl><dt>a1<dd>definition of a1<dt>a2<dd>def of a2</dl>

16-1-3) <menu> </menu>: menu list elements renders a menu as discrete items, eg.
<menu><li>home </li><li>about us</li><li> contact us</li></menu>
16-1-4) <ol> </ol>: the ordered list element may take 2 attributes, the first to decide on the type of numbering eg. 1,2,3 or a,b,c,..etc (the different options for the type attribute are: type=A or a or i or I or 1) and start attribute for list to start at a number other than 1.
16-1-5) <ul> </ul>: the unordered list element may take 1 attribute, the type which can have any of the following values disc, circle or square.
16-2) Table & table-related elements: <table> </table>, <caption> </caption>, <tr> </tr>, <td> </td>.
16-2-1) <table> </table>: it can have any of the following attributes:
16-2-1-1) align="left or right": it allows a table to be aligned to the left or the right of the page, with the use of br clear=right or left element the surrounding text is organized nicely.
16-2-1-2) bgcolor="#rrggbb or colour name": it specifies the table background colour by either specifying the rrggbb hexadecimal triplet or the colour name.
16-2-1-3) background=graphics file name including the path: it allows the insertion of background picture to the table, it tiles it in all the cells. It can be used also in the tr or td elements.
16-2-1-4) border=border thickness: it allows the table to have a border surronding it.
16-2-1-5) bordercolor=colour name: it allows the table border to have a specific colour.
16-2-1-6) cellpading=value: it sets the white space between the borders of the table cell and the cell data.
16-2-1-7) cellspacing=value: it sets the amount of between individual table data cells.
16-2-1-8) height=value or percent: it sets the exact height of the table in pixels or percent of the browser display window (rarely used).
16-2-1-9) cellspacing=value: it sets the amount of between individual table data cells.
16-2-1-10) width=value or percent: it sets the width of the table in pixels or percent of browser display window..
16-2-2) <caption> </caption>: this is the caption of a table and it has to be included within the table elements (must be inserted immediately after the table tag). The text of the table title is placed between the openning and closing caption tags. It may take any of the following attributes: standard, events and 1 optional attribute align which can have any of the following values: left, right, top or bottom.
16-2-3) <col> </col>: defines attribute values for one or more columns in a table. It is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. They accept the following optional attributes: align, char, charoff, span, valign, width.
16-2-4) <colgroup> </colgroup>: is used to group columns in a table for formatting. It is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. tag can only be used inside a

element. The optional attributes are the same as the above.
16-2-5) <tbody> </tbody>: is used to group the body content in an HTML table. It is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer). Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page. The <tbody> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements.
16-2-6) <thead> </thead>: is used to group header content in an HTML table.
16-2-7) <tfoot> </tfoot>: is used to group footer content in an HTML table.
16-2-8) <tr> </tr>: defines a row in an HTML table. It contains one or more <th> or <td> elements.
16-2-9) <th> </th>: defines a header cell in an HTML table. They are bold and centered by default. The optional attributes are: abr, align, axis, bgcolor, char, charoff, colspan, height, rowspan, scope, valign (some of these attributes are deprecated and the standard style attribute is used instead).
16-2-10) <td> </td>: defines a standard cell in an HTML table. Itaccepts the same attribute as the th plus the headers attribute.
17) Frames (frame document): frames allow the browser display window to be subdivided into separate sections, each of which can be updated or have new documents loaded into it separabtly from (independent of) the remaining frame sections. Frames are generated by 3 elements (tags): <frame>, <frameset> and <noframes>. The body tags in an html document are replaced by the frameset ones.
17-1) <frameset> </frameset>: it may take 2 attributes, rows & cole. The first divide the frameset into certain number of rows and the second into columns. This tag can have other nested tags, frameset, frame or noframes.Here are a few examples:
<frameset rows="20%,100,*"> this tag specifies a 3 3-framed vertical layout where the first section uses 20% of the display window, the second section uses 100 pixels and the third section uses the remaining screen (it is a wild card character).
<frameset rows="25%,75%"> this will split the layout into 2 vertical frames one occupying 25% of the display window and the other 75%.
17-2) <frame> (as it is not a container it does not have an end matching tag): it can take up to 8 attributes. It defines a sigle frame in a frameset.
17-2-1) src="/joomla/url": it is used to specify the html document that will be used as the display in the paricular frame section of the frameset.
17-2-2) name="frame-name": it is used to assign a name to a frame so it can be targetes by links in other documents (usually in the same frameset) by using the anchor tag (a href="/joomla/erl" target="frame-name).
17-2-3) marginwidth="value": it forces indentation from both sides of the frame (right and left hand sides) and is given in pixels.
17-2-4) marginheight="value": it controls the top and bottom margins.
17-2-5) noresize: setting this flag prevents the frame from being resized as resizing is the default of frames specified in a document with frames.
17-2-6) scrolling="yes, no or auto": it can be used to control the appearance of any scroll bar that may appear as a result of the frame contrnt being too much to display in the available window area.
17-2-7) frameborder="yes or no": it controls the display of a border around the frame.
17-2-8) framespacing="yes or no": it allows the setting of extra space around the frame.
17-3) <noframes> </noframes>: it is used to allow the browsers that do not understand the frame tag to display the content inbetween the noframes tags.

Using CSS file with html ones

Last Updated on Thursday, 02 February 2012 13:30 Written by Administrator Friday, 13 January 2012 07:54

1) The css fileis (the files with the .css extension, included in the directory where the HTML files are, on the server) responsible for the presentation (look) of the information (content) included in the html file (the file with htm or HTML file).

2) Open your favourite text editor enter the CSS basic components, give the file a name and save it with the extension .css. The html file will include in the head tag a refernce to this CSS file.

eg. <head> <link rel="stylesheet" type="text/css" href="/joomla/jsites.css"> </head>

3) To decide on the look of the content in the html file using the CSS file, the css file would include for the tags in html a selector and a style block. The style block will include the elemnt properties and the style values.

eg. html file would include the following tags:

<h1>Building sites using Joomla</h1>

<p>Keywords: Site, menus, content, components, extensions, tools, help, add new article, article manager, front page mnanager, section manager, category manager, media manager, menu manager, language manager, user manager, global configuration, control panel, logout, mainmenu, user menu, top menu, banner, contacts, news feed. polls, search, web links, module manager, plug-in manager, template manager, clean cache, mass mail, read messages, write message.</p>

The corresponding CSS file in our example isjsites.css would include the following selectors to tell the html tags how to appear in the page:

h1 { color:red; background:yellow;}

body {background-color:tan;}

p {color:blue;}

The body colour decide on the page background colour.

4) The following topics will be covered, hereafter, how to include styling with html documents, id & class selectors, backgrounds, text, fonts, links, lists, tables, the box model (border, outline, margin & padding), plus a few advanced topics.
5) How to include styling: there are 3 methods the external style sheet, the internal style sheet and the inline styling method.
5-1) For the external style sheet, you open your favourite text editor, enter your style, how you want your web page or pages displayed in the browser, save the document with .css extension and you refer to it inbetween the head tags of the html page or pages.
5-2) For the internal the style of the page is defined in the head (between the head tags) section of the web page and it will be applicable to only this html page. The style tags are used to enclose the style defined in the head section (<style> </style>).
5-3) To use inline styles you use the style attribute in the relevant html tag (eg p, h1,...). The style attribute can contain any CSS property.
6) Selectors:
6-1) id selectors: an id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". An internal style sheet using id selector example is shown below:

<html>
<head>
<style type="text/css">
#eg1
{
text-align:center;
color:red;
} 
</style>
</head>
<body>
<p id="eg1">Hello World!</p>
</body>
</html>

6-2) class selector: it is used to specify a style for a group of elements. This allows you to set a particular style for many HTML elements (tags) with the same class. The class selector uses the HTML class attribute, and is defined with a "." Below is an example for a class selector used with the same attribute of both a heading an a paragraph:

<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p> 
</body>
</html>

7) Background effects: CSS background properties are used to define the background effects of an element. CSS properties used for background effects are: background-color, background-image, background-repeat, background-attachment, background-position. By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, then you would have to set the following property: background-repeat: to repeat-x or repeat-y or no-repeat. A few examples are given hereafter:
7-1) setting background colours for the different elements i an html document:

<html>
<head>
<style type="text/css">
h1
{
background-color:blue;
}
p
{
background-color:red;
}
</style>
</head>
<body>
<h1>header colour

7-2) adding a background image to the body of the document and set the repeat property:

<html>
<head>
<style type="text/css">
body {background-image:url('graphic_eg.png');
background-repeat:no-repeat;}
h1 {background-color:yellow;}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

7-3) adding a background image to the body and setting it position: note the margin setting property.

<html>
<head>
<style type="text/css">
body {background-image:url('graphic_eg.png');
background-repeat:no-repeat;
background-position:right bottom;
margin-top:500px;}
h1 {background-color:yellow;}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

8) Styling text: the properties that you can set for the text in your html documents are: color (eets the colour of text), direction (specifies the text direction/writing direction, left to right or right to left), letter-spacing (increases or decreases the space between characters in a text), line-height (sets the line height), text-align (specifies the horizontal alignment of text), text-decoration (specifies the decoration added to text), text-indent (specifies the indentation of the first line in a text-block), text-shadow (specifies the shadow effect added to text), text-transform (controls the capitalization of text), vertical-align (sets the vertical alignment of an element), white-space (specifies how white-space inside an element is handled), word-spacing (increases or decreases the space between words in a text). Here is an example:

<html>
<head>
<style type="text/css">
h1 {text-align:center; background-color:tan; text-decoration:underline; letter-spacing:2px; color:red;}
p.opt1 {text-align:left; text-decoration:underline; color:blue; font-weight:bold;}
p.opt2 {text-align:justify; letter-spacing:5px; text-indent:50px; line-height:200%;}
p.opt3 {text-indent:70px; line-height:70%;}
</style>
</head>
<body>
<h1>CSS styling text example</h1>
<p class="opt1">Free educational material</p>
<p class="opt2">Free educational material in the electrical power field (power systems analysis, 
switchgear assemblies & circuit breakers, overhead & underground distribution sytems, motor controllers & 
MCCs and renewable energy resources), modern languages (spanish, french, italian and english), 
programming and scripting languages, applications (graphics, office suites, desktop publishing and CAD, 
operating systems and smart phones settings and applications.'</p>
<p class="opt3">INTRODUCTION: "Computer programming for power systems analysts" treats the 
subject of the electrical power systems distribution and analysis from a problem solving point of view.<br>
Chapter 1 offers an introduction to computer programming using two languages. The two languages are: 
Basic and C++. The main statements in each language that are required to build the programs that will 
solve the power systems problems were given, also, in this chapter. </p>
</body>
</html>

9) Styling fonts: font properties are: font (sets all the font properties in one declaration), font-family (specifies the font family for text), font-size (pecifies the font size of textin pixels or em=pixels/16), font-style (specifies the font style for text, eg. italic, normal, oblique), font-variant (specifies whether or not a text should be displayed in a small-caps font), font-weight (specifies the weight of a font, eg. bold,..).Below is an example:

<html>
<head>
<style type="text/css">
body {font-size:100%;}
h1 {text-align:center; background-color:tan; font-size:2.5em; color:red; font-decoration:underline;}
p.serif{font-family:"Times New Roman",Times,serif; font-style:italic; font-size:0.97em;}
p.sansserif{font-family:Arial,Helvetica,sans-serif; font-style:oblique; font-size:1em;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the 
Times New Roman italic font with .97em font-size.</p>
<p class="sansserif">This is a paragraph, shown in the 
Arial font, font style: oblique with 1em font-size.</p>
</body>
</html>

10) Styling links: Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Links can be styled differently depending on what state they are in. The four links states are: a:link (a normal, unvisited link), * a:visited a link the user has visited), a:hover (a link when the user mouses over it) and a:active (a link the moment it is clicked). Example:,br.

<head>
<style type="text/css">
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
</style>
</head>

11) Styling lists: the properties are: list-style (sets all the properties for a list in one declaration), list-style-image (specifies an image as the list-item marker), list-style-position (specifies if the list-item markers should appear inside or outside the content flow), list-style-type (specifies the type of list-item marker). An example is shown below:
<html> <head> <style type="text/css"> ul.a {list-style-type:circle; list-style-image:url('favicon.ico');} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>Example of unordered lists, the first with an image as list item marker and the second a squre marker :</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Mineral water</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Mineral water</li> </ul> <p>Example of ordered lists, the first using roman numbers as the numbering type and the second lower case alphabet:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Mneral water</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Mineral water</li> </ol> </body> </html>

12) Styling tables: it includes the following properties: table and cell borders, border collapse (to make the table and cell borders into one border), table width and height, text alignment, table padding, table colour. An example is given hereafter:

<html>

<head>
<style type="text/css">
th {background-color:yellow;
color:blue;}
td {background-color:tan;}
table, td, th
{
border:1px solid black;
}
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
</style>
</head>
<body>
<TABLE>
<tr>
<th>Study name</th>
<th>Description</th>
</tr>
<tr>
<TR>
<TD><a href="/joomla/afundam.htm" onmouseover="window.status='fundamental calc.';return true" 
onmouseout="window.status='';return true"><IMG SRC="fabcalc.gif" alt="fundamental calculations" 
HEIGHT=62 WIDTH=319></a></TD>
<TD>The equivalent of  parallel or series branches, Y to delta or
vice versa transformation, matrix manipulation & simultaneous equation
solution, per unit calculation, Z-bus & Y-bus calculations.</TD>
</TR>
<TR>
<TD><a href="/joomla/afaultca.htm" onmouseover="window.status='click to go to fault calc.';return true" 
onmouseout="window.status='';return true"><IMG SRC="sccalc.gif" alt="click to go to fault calc. page" 
HEIGHT=62 WIDTH=319></a></TD>
<TD>Calculation of 3-phase, 2-line, 2-line-to- ground and line-to-ground
fault currents for radial and network (grid) models.</TD>
</TR>
<TR>
<TD><a href="/joomla/afloload.htm" onmouseover="window.status='click to go to load flow calc.';return true" 
onmouseout="window.status='';return true"><IMG SRC="loadflow.gif" HEIGHT=62 WIDTH=319 
alt="power flow calculations"></TD>
<TD>Power flow (active & reactive) with motor starting effects &
the effects of applying capacitors for radial & grid systems.</TD>
</TR>
<TR>
<TD><a href="/joomla/reliability.html" onmouseover="window.status='click to go to transients/overvoltages calc.';
return true" onmouseout="window.status='';return true"><IMG SRC="reliabil.gif" HEIGHT=62 
WIDTH=319 alt="reliability studies"></a></TD>
<TD>Reliability studies for utilities as well as industrial/ commercial/ institutional plants.</TD>
</TR>
<TR>
<TD><IMG SRC="stabilit.gif" HEIGHT=62 WIDTH=319 alt="stability studies"></TD>
<TD>For such studies/analysis (operating under DOS platform), refer to <a href="/joomla/download.html">
Page of downloads</a>
(Power systems analysis tools).</TD>
</TR>
<TR>
<TD><a href="/joomla/transients.html" onmouseover="window.status='click to go to transients/overvoltages calc.';
return true" onmouseout="window.status='';return true"><IMG SRC="trans.gif" HEIGHT=62 
WIDTH=319 alt="transients/overvoltages calc."><a></TD>
<TD>Induced overvoltages due to lightning strokes, overvoltages due to direct lightning hits, overvoltages 
due to L.A. lead length & TRV (using the short method)</TD>
</TR>
</TABLE>
</body>
</html>

13) CSS box model: it is essentially a box that wraps around HTML elements, and it consists of: 
margins, borders, padding, and the actual content. The box model allows you to place a border around 
elements and space elements in relation to other elements. he margin clears an area around the border. 
The margin does not have a background color, it is completely transparent. The border goes around the 
padding and content. The border is affected by the background color of the box. The padding clears an 
area around the content. The padding is affected by the background color of the box. The cntent is where 
text and images appear. Total element width = width + left padding + right padding + left border + 
right border + left margin + right margin. Total element height = height + top padding + bottom 
padding + top border + bottom border + top margin + bottom margin.  

13-1) The CSS border properties allow you to specify the style and color of an element's border. The styles are: dotted dashed solid, double, groove, ridge, inset and outset. The border-width property is used to set the width of the border in pixels or predefined values (thin, thick & medium). The border-color property is used to set the color of the border. In It is possible to specify different borders for different sides of the box.
13-2) An outline is a line that is drawn around elements (outside the borders). The properties that can be set by the user are: outline (sets all the outline properties in one declaration, outline-style, outline-width, inherit), outline-color (sets the color of an outline, color_name, hex_number, rgb_number, invert, inherit), outline-style (sets the style of an outline, none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit) outline-width (sets the width of an outline (thin, medium, thick, length, inherit).
13-3) The CSS margin properties define the space around elements. The margin properties are: margin (a shorthand property for setting the margin properties in one declaration), margin-bottom (sets the bottom margin of an element), margin-left (sets the left margin of an element), margin-right (sets the right margin of an element), margin-top (sets the top margin of an element).
13-4) The CSS padding properties define the space between the element border and the element content. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The properties are: padding (a shorthand property for setting all the padding properties in one declaration), padding-bottom (sets the bottom padding of an element), padding-left (sets the left padding of an element), padding-right (sets the right padding of an element), padding-top (sets the top padding of an element). The following example may clarify the CSS box model.

<html>
<head>
<style type="text/css">
p.ex1
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
p.ex2
{
width:120px;
padding:10px;
border:5px solid red;
margin:10px;
}

p.ex3
{
margin-top:10px;
margin-bottom:100px;
margin-right:80px;
margin-left:50px;
border:5px solid yellow;
outline:green dotted thick;
background-color:tan;
padding-top:25px;
padding-bottom:100px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>

<body>
<img src="/joomla/250px.gif" width="250" height="1" /><br /><br />

<p class="ex1">This box is 250px wide (having 0px margin).<br />
Hello from CSS box model.</p>

<p class="ex2">This box is 170px wide as it has a 10px margin (on all 4 sides).<br />
Hello from CSS box model.</p>

<p class="ex3">This box has different margins on the 4 sides, has no specific width and has a 5px 
yellow border and a dotted green outline with tan paragraph background and padding on 4 sides. 
Hello from CSS box model.</p>

</body>
</html>

14) Grouping & nesting: selctors can be grouped as well as nested.
14-1) To minimize the code, you can group selectors. Separate each selector with a comma. Here is an example:

h1,h2,p
{
color:red;
}

14-2) It is possible to apply a style for a selector within a selector. It is cslled selectors nesting, you can specify a certain style for an element, then you create a class, then for a specific element for such a class you can still specify a different value for the style property. An example is given hereafter:

<style type="text/css">
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>

15) Dimension property: it allows the user to control the height and width of an element. An exmple is given hereafter:

<style type="text/css">
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>

In the above example the image can be displayed in normal size when it is called with the normal class and bigger when called with the big class. The same applies with the paragraph property, when any paragraph is called with the ex class, it will be displayed in an area having the height and width specified, otherwise, it will be displayed normally.
16) Display vs. visibility: The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. here are the differences. Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". Visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. Display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. Another use for the display property is displaying inline elements as block ones and vise versa. The following example displays a list horizontally (rather than from top to bottom)

<html>
<head>
<style type="text/css">
li{display:inline;}
</style>
</head>
<body>
<p>Display this link list as a horizontal menu:</p>
<ul>
<li><a href="/joomla/home.html" target="_blank">Home</a></li>
<li><a href="/joomla/page1.html" target="_blank">Page 1</a></li>
<li><a href="/joomla/page2.html" target="_blank">Page 2

17) Positioning property: allows you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. here are four different positioning methods: static, fixed, relative and absolute. The properties that can be declared after the position properties are: bottom (sets the bottom margin edge for a positioned box, with values: auto, length, %, inherit), clip (clips an absolutely positioned element, with values: shape, auto, inherit), cursor (specifies the type of cursor to be displayed, values: url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize,sw-resize, s-resize, w-resize, text, wait, help), left (sets the left margin edge for a positioned box, values: auto, length, %, inherit), overflow (specifies what happens if content overflows an element's box, the values are: auto, hidden, scroll visible, inherit), position (specifies the type of positioning for an element with values: absolute, fixed, relative, static, inherit), right (sets the right margin edge for a positioned box, with values: auto, length, %, inherit), top (sets the top margin edge for a positioned box, with values: auto, length, %, inherit) and z-index (sets the stack order of an element, with values: number, auto, inherit).
17-1) Static method: A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
17-2) Fixed positioning: an element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled. An exampple:

<style type="text/css">
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>

17-3) Relative positioning: Relative positioning moves an element RELATIVE to its original position to the left, right, top or bottom direction (by the value given in pixels, it can be positive to move the text/object in the opposite direction specified or negative to to move it in the direction specified). Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow. Overlap can be achieved as is shown in the following example:

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:20px;
}
h2.pos_right
{
position:relative;
right:20px;
}
h2.pos_top
{
position:relative;
top:20px;
}
h2.pos_bottom
{
position:relative;
bottom:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<h2 class="pos_top">This heading is moved toward the bottom according to its normal position, sort of 
overlapping</h2>
<h2 class="pos_bottom">This heading is moved toward the top according to its normal position, 
sort of overlapping</h2>
</body>
</html>

17-4) Absolute positioning: it is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html">. With absolute positioning, an element can be placed anywhere on a page. Absolutely positioned elements can overlap other elements. An example is given below:

<style type="text/css">
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>

In the above example, The heading would be placed 100px from the left of the page and 150px from the top of the page.
17-5) Overlapping Elements: When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top. An element with greater stack order is always in front of an element with a lower stack order.
18) Floating of elements in CSS: Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed.
19) Block elements horizontal alignment for layout purposes: Block elements can be aligned by setting the left and right margins to "auto". Setting the left and right margins to auto would center the block element. Absolute positioning method could be used as well to align block elements. The float property as well could be used in aligning block elements.

20) CSS pseudo-elements: they are used to add special effects to some selectors. The syntax of pseudo-elements is: selector:pseudo-element {property:value;}. The pseudo elemnts/methods are: :link (a:link selects all unvisited links, a:visited selects all visited links, a:active selects the active link, a:hover selects links on mouse over), :focus (input:focus selects the input element which has focus), :first-letter (p:first-letter selects the first letter of every <p> element, p:first-line selects the first line of every <p> element, p:first-child selects every <p> elements that is the first child of its parent, p:before inserts content before every <p> element, p:after inserts content after every <p> element), :lang - language (p:lang(it) selects every <p> element with a lang attribute value starting with "it". Several pseudo-elements can also be combined. Pseudo-elements can be combined with CSS classes.
20-1) The :first-line Pseudo-element: it is used to add a special style to the first line of a text. The "first-line" pseudo-element can only be used with block-level elements. The following properties apply to the "first-line" pseudo-element: font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height and clear. an example is shown below:

<html>
<head>
<style type="text/css">
p:first-line 
{
color:#ff0000;
font-variant:small-caps;
background:yellow;
text-decoration:underline;
font-weight:bold;
text-alignment:center;
}
</style>
</head>
<body>
<p>You can use the :first-line pseudo-element to add a special effect to the first line of a text. 
This is the example to show some of its effects</p>
</body>
</html>

20-2) The "first-letter" pseudo-element: it is used to add a special style to the first letter of a text. The "first-letter" pseudo-element can only be used with block-level elements. The following properties apply to the "first-letter" pseudo- element: font properties, color properties, background properties, margin properties, padding properties, border properties, text-decoration, vertical-align (only if "float" is "none"), text-transform, line-height, float, clear.

<html>
<head>
<style type="text/css">
p:first-letter 
{
color:blue;
font-size:xx-large;
background:yellow;
text-decoration:underline;
text-weight:bold;
line-height:40px;
margin-left:40px;
}
</style>
</head>
<body>
<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>

20-3) The :before" pseudo-element can be used to insert some content (text or images) before the content of an element. On the other hand, the ":after" pseudo-element can be used to insert some content after the content of an element.

<html>
<head>
<style type="text/css">
h2:before {content:"this is the placeholder of the before content  ";}
h1:before {content:url(vepi.jpg);}
</style>
</head>
<body>
<h2>This is a heading</h2>
<p>The :before pseudo-element inserts content (text in this case) before an element.</p>
<h1>This is a heading with image :before content</h1>
</body>
</html>

21) Pseudo classes: they are used to add special effects to some selectors. CSS classes can also be used with pseudo-classes. The syntax for the former is: selector:pseudo-class {property:value;}. The syntax for the latter is: selector.class:pseudo-class {property:value;}. We have seen the a:link pseudo-class before.
21-1) The :focus pseudo-class: you can control the properties of the field that would get the focus, an example is shown hereafter:< br>

<html>
<head>
<style type="text/css">
input:focus
{
background-color:tan;
}
</style>
</head>
<body>
<form action="form_action.asp" method="get">
الاسم: <input type="text" name="fname" /><br />
اسم العيلة: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

21-2) The :lang pseudo-class: it allows you to define special rules for different languages. An example is given below:

<html>
<head>
<style type="text/css">
p:lang(it)
{ 
background:yellow;
}
p:lang(ar)
{background:tan;}
p:lang(sp)
{background:blue;}
q:lang(no)
{
quotes: "/" "/";
}
</style>
</head>
<body>
<p lang="sp">Holla!</p>
<p lang="it"><q lang="no">Ciao bella!</q></p>
<p lang="ar">صباح الفل</p>
</body>
</html>

21-3) The :first-child Pseudo-class: it matches a specified element that is the first child of another element. The next examples will clarify this class:
eg. 1:

<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
} 
</style>
</head>
<body><div>
<p>This is the first child in the division (div) text.</p></div>
<p>This is some text.</p><div>
<p>This is the first child in the second division (div), thus displayed in blue.</p></div>
</body>
</html>

eg. 2: the selector matches the first <em> element in all <p> elements:

<html>

<head>

<style type="text/css">

p > i:first-child { color:red; background:yellow; text-decoration:underline; font-weight:bold; font-size:xx-large; font-variant:small-caps; }

</style> </head>

<body>

<p>This is example 2 of <i>:first-child</i> pseudo-class. This is example 2 of <i>:first-child</i>
pseudo-class.</p>

<p>This is example 2 of <i>:first-child</i> pseudo-class. This is example 2 of <i>:first-child</i>
pseudo-class.</p>

</body> </html>

eg. 3: the selector matches all elements in <pl> elements that are the first child of another elements:

<html>
<head>
<style type="text/css">
p:first-child i
{
color:red;
background:yellow;
text-decoration:underline;
font-weight:bold;
font-size:xx-large;
font-variant:small-caps;
} 
</style>
</head>
<body>
<p>This is example 2 of <i>:first-child</i> pseudo-class. This is example 2 of <i>:first-child</i> 
pseudo-class.</p>
<p>This is example 2 of <i>:first-child</i> pseudo-class. This is example 2 of <i>:first-child</i> 
pseudo-class.</p>
</body>
</html>

22) The navigation bar: navigation Bar = list of Links, a navigation bar needs standard HTML list as a base. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense and then to display the list as a menu (navigation bar), use display (block or inline) property for the li element and float (with the block dispaly property value) to enhance the look of the horizontal navbar.
eg. 1:

<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="http://vepi.eu5.org/">Home</a></li>
<li><a href="http://vepi.eu5.org/Site_content_power.html">on-line books</a></li>
<li><a href="http://vepi.eu5.org/mypage.php">Contact us</a></li>
<li><a href="http://vepi.eu5.org/about.php">About us</a></li>
</ul>
</body>
</html>

eg.2:

<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
float:left;
margin:10;
}
a
{
display:inline;
width:180px;
background-color:yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="http://vepi.eu5.org/">Home</a></li>
<li><a href="http://vepi.eu5.org/Site_content_power.html">on-line books</a></li>
<li><a href="http://vepi.eu5.org/mypage.php">Contact us</a></li>
<li><a href="http://vepi.eu5.org/about.php">About us</a></li>
</ul>
</body>
</html>

23) Images with CSS:
23-1) Image galleries: here is an example to show how to use CSS clases, properties and attributes in conjunction with html tags to build a gallery of images with every image having a link to arelevant web page.

<html>
<head>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid red;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
div.img:hover {border: 3px solid yellow;}
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid blue;
}

div.img a:hover img {border: 2px solid yellow;}

div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}

div.desc:hover {font-weight: bold;}
</style>
</head>
<body>
<div class="img">
 <a target="_blank" href="http://vepi.freevar.com/"><img src="/joomla/jdrupal01.png" alt="first image" 
width="110" height="90" /></a>
 <div class="desc">image 1</div>
</div>
<div class="img">
 <a target="_blank" href="http://vepi.freevar.com/drupal/"><img src="/joomla/jdrupal02.png" 
alt="second image" width="110" height="90" /></a>
 <div class="desc">image 2</div>
</div>
<div class="img">
 <a target="_blank" href="http://vepi.eu5.org/joomla/"><img src="/joomla/joomla_main1.png" 
alt="third image" width="110" height="90" /></a>
 <div class="desc">image 3</div>
</div>
<div class="img">
 <a target="_blank" href="http://vepi.freevar.com/joomla"><img src="/joomla/joomla_main2.png" 
alt="fourth image" width="110" height="90" /></a>
 <div class="desc">image 4</div>
</div>
</body>
</html>

 

23-2) Image Opacity / Transparency: the following example will show images with transparencyand when the mouse hover over he image, the opacity factor changes to 1 showing the regular image.

<html>
<head>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid red;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
div.img:hover {border: 3px solid yellow;}
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid blue;
  opacity:0.4;
}
div.img a:hover img {border: 2px solid yellow; opacity:1.0;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
div.desc:hover {font-weight: bold;}
</style>
</head>
<body>
<div class="img">
 <a target="_blank" href="http://vepi.freevar.com/"><img src="/joomla/jdrupal01.png" alt="first image" 
width="110" height="90" /></a>
 <div class="desc">image 1</div>
</div>
<div class="img">
 <a target="_blank" href="http://vepi.freevar.com/drupal/"><img src="/joomla/jdrupal02.png" 
alt="second image" width="110" height="90" /></a>
 <div class="desc">image 2</div>
</div>
<div class="img">
 <a target="_blank" href="http://vepi.eu5.org/joomla/"><img src="/joomla/joomla_main1.png" 
alt="third image" width="110" height="90" /></a>
 <div class="desc">image 3</div>
</div>
<div class="img">
 <a target="_blank" href="http://vepi.freevar.com/joomla"><img src="/joomla/joomla_main2.png" 
alt="fourth image" width="110" height="90" /></a>
 <div class="desc">image 4</div>
</div>
</body>
</html>

23-3) Image Sprite: it is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
eg. 1: the full image is displayed than portions of it:

<html>
<head>
<style type="text/css">
img.a1
{
width:46px;
height:44px;
background:url(image_navbar.png) 0 0;
}
img.a2
{
width:43px;
height:44px;
background:url(image_navbar.png) -91px 0;
}
</style>
</head>
<body>
<img src="/joomla/image_navbar.png" />
<br /><br />
<img class="a1" src="/joomla/image_navbar.png" width="1" height="1" />
<br /><br />
<img class="a2" src="/joomla/image_navbar.png" width="1" height="1" />
</body>
</html>

eg. 2: it could be a vavigation bar (menu) with 3 menu elements (images) rendered using one image:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD
/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:37px;}
#home{background:url('eg2.png') 0 0;}
#prev{left:43px;width:37px;}
#prev{background:url('eg2.png') -47px 0;}
#next{left:89px;width:37px;}
#next{background:url('eg2.png') -91px 0;}
</style>
</head>
<body>
<ul id="navlist">
  <li id="home"><a href="http://vepi.freevar.com/"></a></li>
  <li id="prev"><a href="http://vepi.eu5.org/"></a></li>
  <li id="next"><a href="http://vepi.web44.net/"></a></li>
</ul>
</body>
</html>

eg. 3: this menu bar will have the images changed upon hovering the mouse over them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:37px;}
#home{background:url('eg2.png') 0 0;}
#home a:hover{background: url('eg2.png') -47px 0;}
#prev{left:43px;width:37px;}
#prev{background:url('eg2.png') -47px 0;}
#prev a:hover{background: url('eg2.png') 0 0;}
#next{left:89px;width:37px;}
#next{background:url('eg2.png') -91px 0;}
#next a:hover{background: url('eg2.png') -47px 0;}
</style>
</head>
<body>
<ul id="navlist">
  <li id="home"><a href="http://vepi.freevar.com/"></a></li>
  <li id="prev"><a href="http://vepi.eu5.org/"></a></li>
  <li id="next"><a href="http://vepi.web44.net/"></a></li>
</ul>
</body>
</html>