HTML Kit: A User Manual
Contents
1. Enable syntax highlighting colorize a Default colors use Colors tab for colorized files Start Defaut jn Default Fditor Test FontColor Background Reload Externally Modified Files Gutter Tert FontColor Background f Mever C Fromet C Always Cancel I wrap at column 0 auto wrap 177 W Show wrap column M Mark wrapped lines Figure 6 Preferences Window with Editor Options 3 To turn on WordWrap click on the check box next to the Wrap at column checkbox 4 The fill in box to the right gives the width of the wrap column Enter 0 for auto wrap or select a width of your choice Tip For convenience use a width that allows viewing of the Workspace window without blocking text Experiment with different settings to get the best results for your monitor A The Mark wrapped lines checkbox marks the lines in the gutter showing where the wrap has occured Page 8 HTML Kit Users Guide Drop Down Tags Reminder This function presents a drop down list of tag options as you type To use the Drop Down Tags Reminder you can do one of the following 1 Type in an opening bracket of a tag lt After a brief pause a drop down list of tags will appear q shody D 00 iF if m a Pad aid eel cod A fo cote A e fe feed A A e fo fem A p OO Oe E Po E Co CEA e Ea Te H E button F You can then either xf p zq Opening agp Bracket abbr acr2. Insertion 7 S g Ll lt body gt 12 lt html gt Figure 5 Editing window after tag insertion Indent and Un indent Select any part of the line s you would like to indent or un indent gt Indent From the Main Edit Menu choose Increase Indent or press Ctrl gt Un Indent From the Main Edit Menu choose Decrease Indent or press Ctrl Word Wrap This feature wraps lines so that they can be seen in the editing window without scrolling vertically To turn on Word Wrap 1 Click on the Preferences button in the Standard tool bar HTML Kit User s Guide Page 7 2 In the Preferences dialog box click on the Editor tab The Editor dialog box appears See Figure 6 Word Wrap Option Box Preferences ee cee Seeeaaes x Messages Help File Types Actions Workspace Proxy Author Frograms Misc General Startup Editor Save Preview Frint Proofing Colors tuto Complete TIDY Format General Options Tab Options W word select W Use tab character Smart tab Optimal fill W Drag and drop editing e H ps o Tab stop Columns 39 Show hidden characters Word Wrap Options W Show tabs IY Show gutter If Show line numbers in gutter W Use block cursor in overnite mode Cursor beyond end of line If Show right margin at column feo A m W Track column ia iii J Enable mouse wheel supported scrolling IY Auto indent Block indent size f2 p4 W
3. s name on the Workspace e Click OK Step 2 Uploading Files If the Workspace is not open already click on the view Workspace button on the Task Bar Action Box see Figure 1 Main Screen and Enlargement of Action Box on page 2 The Workspace shows a list of files with signs and should now include the name you have chosen for your ftp server see Step 1 To Upload a file follow these steps a Open the HTML document that you would like to upload b In the Workspace window click on the sign beside the name of your FIP server The message window should now show the messages that HTML Kit is establishing a connection to the server c Drag and drop the upload icon on the bottom of the editor menu onto the Workspace Additional Resources HTML Kit offers many other features that are beyond the scope of this manual Further information can be found at the HTML Kit home page at http www chami com html kit Support is available through the newsgroup chami public htmlkit misc Many plugins are also available at http www chami com html kit plugins HTML Kit User s Guide A Action Box 2 enlarged 2 Actions Bar 2 3 Additional Resources 16 C Colors adding 13 choosing 14 inserting 15 D Document Bar 3 Drop Down Tags Reminder 8 turning on off 8 E Editing Window 2 Existing document opening 5 F Favorites Bar 3 Forms Bar 4 FIP server adding to Workspace 15 H HTM
4. HTML Kit A User Manual by Paul Strickberger HTML Kit User Manual Contents SUT OGG IO Narsi r a 1 Tne MIMo Cr rECN ainn O 1 Displaying or Hiding Elements of the Screen cccceececeeeeeeeeeeeeeeeeeeeeeeeeenaeees 1 Getting Around the Main Screen c ccccsseeseseecenseceesesenseeeeneenes 3 ENEN OKS DACE oenn n N tidacadanemaia ees 3 PACHIONS Balt sevessecteteunnarsna stags SEENT 3 Getting Started in HTML Kit 0 0 ccc ceeeceeeeseeeseeeeeeeeeeees 4 Creating a New DOCUMENT arseen E tect ce ai eo eared 4 Opening AN EXISTING COCUMENL ccccccseceeceeeceeceeeceeceeesesseeseesseaeeessaseesaaees 5 UEC LOMPAT Serrie e a E stat seleusnnvaceudnnshdendea 5 USMO UIT KIT oicnarnksuinnnea en 5 BaSICEAUNO FUNCIONS essea neater naenietnerceuiawienieatrmieretbhonas soareuals 5 Tag NS OMI OM rsson e e leap 5 Hdentand Un INde Nisin a A dente keae 6 WOOLEY AD eai E a a a S 6 Drop Down Tags HCMINGESN veusersshunttaususnsiscvuiaknetoetutdcanisendvadtietauversnddemenkertians 8 PrevioWNgG VOU AGC ann T E 9 HAS CUING an IMAG C eener rE aviweiebhadaxershonasessevimadsesereass 9 WSN ANG VV O MKS OAC Cette treet Cored etre E nals 9 Using the Insert Image Tags WIZard ccccccccsseeeceeeeeeeeeeeeaeeeeseeeeeseeeeaees 10 PROGIIG LADIS araea sate ne E teat ence sets Oieude neem meee AOU eae ele 12 Adano GON ONS sates ct cients ta tac srt etch arte eg oe teteese uaa 13 BelOre YOUNB COIN nictatavahcuerwespnsinstateni
5. L Kit Newsgroup 16 plugins 16 support 16 HTML Kit home page 16 Image Insertion using the Tags Wizard 10 using the Workspace 9 Indent and Un indent 6 Main Menu 2 Main Screen 2 displaying 1 hiding 1 Messages Window 2 N New Document Page Index creating 4 Newsgroup 16 O Objects Bar 4 OnLine Bar 4 P Pick Color Menu accessing 13 Custom Colors Tab 14 Web Safe Colors Tab 14 Plugins 16 Previewing Document with default browser 9 Previewing document with built in browser 9 S Status Bar Action Box enlarged 2 Style Bar 4 T Tables adding 12 Tables Bar 4 Tag Insertion around text 5 new 5 Task Bar 2 Templates 5 Text Bar 4 Tool Bars 2 Tools Bar 3 U Un indent and Indent 6 Uploading files 15 W Web safe colors inserting 14 Word Wrap 6 turning on 6 Workspace 2 3 WYSIWYG editors 1
6. P code block Server Side Includes functions CGI functions CGI SSI ASP Variables PHP Code Block and Comments tags e Style Bar Contains options for editing Cascading Style Sheets e Text Bar Contains a number of tags and options for editing text including Paragraph lt p gt Bold lt b gt Italic Big Small lt font gt tags Horizontal Rule Line Break Unordered and Ordered lists List Items Directory List Menu Definition List Preformatted Text teletype Underline Strikethrough Blockquote Address Emphasis Strong Define Code Sample Keyboard Variable Citation Abbreviation Acronym Subscript and Inserted Deleted e Tables Bar Allows easy insertion of tables and table structures See Adding Tables on page 12 e Objects Bar Contains tags related to objects including Anchors Bookmarks Images Maps Map Area Objects Applets Scripts No Script JavaScripts VBScripts TCLScripts Events Links and Images e Forms Bar Contains tags and options for using Forms including Form Form Action Input But ton Select Option Option Group Text Area Isindex Label Form Control Group and Legend e OnLine Bar Provides links to online information and HTML validators and access to the Web Getting Started in HTML Kit Creating a New Document Click on the new document button LI on the Standard tool bar HTML Kit User s Guide Page 5 A new document is started with lt DOCTYPE gt lt h
7. ad gt lt thead gt lt ETLOOL gt lt LLOOL gt lt thody gt lt tbody gt Table Column Group lt colgroup gt lt colgroup gt Table Column lt Gol gt lt col gt HTML Kit User s Guide Page 13 Adding Colors The Pick Color Menu offers an easy way to preview select and insert the appropriate color into your document Before You Begin Place the cursor in the current HTML document where you would like to insert the hexa decimal value of the color For example to create a table data cell with a particular background color insert the following tag placing the cursor between the quotation marks lt td bgcolor place cursor here gt Accessing the Pick Color Dialogue Box Click on the Tools tab of the Action Bar and click on the Color button gt The following dialog box appears Figure 8 Closest Web Safe Color Preview Panels Pick Color Recently Used Colors pun E may Rea HOU Sd2 FFFFF wee 003333 bkg foo E p _ T RGE 000 O61 039 Pee HESL 159 255 03 E i E1 ea W Text 27 23 J Convert to HSL system Color Copy screen Color Limit to web safe colors Cancel OUsd2 Web Safe Colors Custom Colors Hamed Colors Figure 8 The Pick Color Dialog Box with Custom Colors tab selected Page 14 HTML Kit Users Guide Choosing Colors From this dialog box you can select colors in a number of d
8. cs watch3 gif 6563 4K PSG oN Ny RCN nT Seer ten err een a arr Ren er Tree rere quill amp g gif Strip ail watch ail Fae E sanseeeenssnnnnesseensnnnnassseenenninsssetenennens Guill jpa i watch jpa i watch jpg ae ROR TERE S E EE se Ripplear cif Ei watch ipg Ei watch5 ipg Co e Ae E mE width BB a milang OOKO y a aaa ay N H Reset Save s Retrieve Tagswizard Data Lancel Image Preview Image Attributes Pane List Figure 7 Tags Wizard Image with example figure previewed 2 Select the file containing the image from the Look in drop down box If the file is not available click on the Add button and select the appropriate file 3 Select the image from the Image List The image is previewed with the appropriate tag and path in the Preview Pane Default height and width are assigned in the Image Attributes box 4 You can change or add image attributes by selecting from the list in the Image Attributes box 5 Click OK to insert the image Page 12 HTML Kit Users Guide Adding Tables To insert tables and table structures click on the Tables tab of the Action Bar Table 1 provides a list of buttons functions and inserted tag Table 1 The Tables Action Bar Whole Table Insertion lt table summary gt lt Ur gt lt Ld gt lt td gt lt tre lt table gt na o Table Row and Cell Kpro lt td gt lt td gt lt tr gt a lt caption gt lt caption gt lt the
9. how hide the Work space click on the appropriate button in the Action Box Figure 1 Actions Bar The Actions Bar provides an easy way to access many commonly used tags Along the top of the bar are tabs that allow access to the various bar components Figure 2 To view a bar component click on the corresponding tab Favorites Tools Document Style Tent Tables Objects Forms Online Figure 2 Actions Bar Tabs e Favorites Bar You can customize this bar to add functions from the other Action Bars that you use most often 1 Choose a button from another Action Bar that you want to add to your Favor ites Bar 2 Right click on the button 3 Select Add to Favorites from the drop down menu e Tools Bar Includes a number of useful tools to modify or clean up your HTML Figure 3 Favorites Tools Document Style Test Tables Objects Forms Online m coy Soo Ae cy ae ID z ty ath HTML ba Colors ive lator ad a Ae Tidy Attributes Time Spaces UL sal maeri m Text Prototype Tags Wizard Names neck Poe Figure 3 Tools Bar Page 4 HTML Kit Users Guide e Document Bar Contains a number of tags and options related to formatting documents including whole document tags document type tags lt head gt lt title gt lt meta gt lt link gt lt base gt lt body gt headings tags lt div gt lt span gt lt center gt lt frameset gt lt frame gt lt noframe gt Inline Frame tag AS
10. ifferent ways The color that you choose will be previewed as background and as text in the preview panels in the top right corner The 25 most recently used colors are shown along the top of the dialog box To reuse a color simply click on the square of your choice You can choose colors using the following methods e Custom Colors Tab gt Use the three sliders to choose the color Each slider corresponds to the Red Blue Green RGB color scale As you move the slider the corresponding colors change in the preview color panels The Convert to drop down list converts the numbers of the chosen color to different values based on other color models including HSB CMY CMYK and HSL gt System Color Allows color selection from a palette and storage of 16 custom colors gt Copy Screen Color Allows copying of any color on the screen 1 Open the document or page from which you would like to copy a color 2 Reduce the size of HTML Kit by clicking on the restore button J in the upper right hand corner and then use the mouse to drag or resize the HTML Kit window so that the color you want to copy 1s visible 3 Click the Copy Screen Color button 4 The cursor becomes a 4 headed arrow and a preview box appears in the right bottom corner of the screen 5 As you move the cursor the preview box changes to the color upon which the cursor rests Once the color in the preview box is the one you want click OK 6 The new c
11. ndeiaunawig ora duskdvedamsalegsaie iecttinudaeviatonressitay 13 ACCeSSING Ne PICK G OlOK MG MU riene iaetsadceeee ene 13 CMOOSING GOlONS seve 2en ce setnangascasnedassmata nencuseeneederiua nave testeasecerstonsesaeaeucenuanhenssended 14 MSENGI COll erai N iemexceisttetoseecnsncusanbuiesosess 15 OV OIIIN GTN OS eset sees ze rs erie n TE aes and Oe eels aa 15 Add your FTP server to the Workspace Menu cscccseeeeeeeeeseeeeeaeeees 15 WI DIO AGING FNC Seaan Ceuta Souetie din Gee ee hiassdece saa eeh as edngie eee teae 16 Additional RESOUN CCS wircvscccsscasccaiesereders pent srestaswwesreveceredseintedvestarectsieene 16 HTML Kit User s Guide Page 1 Introduction This manual gives a brief introduction to HTML Kit a full featured HTML editor The manual is geared to people who already have some basic understanding of HTML author ing and a familiarity with basic Windows commands HTML Hyper Text Markup Language is a language designed to allow a reader to easily navigate between documents Because of this capability HTML is the chosen language for documents shared over the Internet and World Wide Web The building blocks of HTML are tags which are inserted around text A Web browser such as Internet Explorer or Netscape Navigator interprets each tag and applies structure and formatting to the the text surrounded by the tag The formatted or marked up text is then displayed in the browser window HTML Kit offers numer
12. nsertion point in the HTML document where you would like to insert the image Step 2 Add the folder containing the image to your Workspace If the folder containing the desired image is currently on the Work space skip to Step 3 a Right Click on the Workspace and select Add Remove FTP Folder from the drop down menu b Select Add Local Folder c In the Add Folder dialog box type in the folder path or choose the open folder icon to browse your folders and select the folder containing your image d Type in the name you would like displayed for the folder in the Workspace and click OK Page 10 HTML Kit Users Guide Step 3 Insert the Image a In the Workspace click on the sign to expand the folder containing your image b Right Click on the desired image file c From the pop up list choose Insert as Image Using the Insert Image Tags Wizard 1 In the Objects Action Bar click on the Insert Image button i or Go to the Tags menu select Image and then Insert Image from the slide out menu The dialog box shown in Figure 7 appears HTML Kit User s Guide Page 11 fin T agsizard img Image i Image source URL Supported in H45 H4L H3L H2L E3L N2L X15 X1LKB1 Attributes Mode Mw Preview pale Se D AMy Documents eb Site Lr Add Remove Files of type Image Files gif pa peg pra watchs git 4E DMZ 0D ocunme File D SMu Documents eb Site Graphi
13. olor is now shown in the preview panels in the dialogue box 7 Click OK to insert the hexadecimal code into your document e Web Safe Colors Tab The Web Safe Colors tab provides a selection of web safe colors AU Tip Once you have chosen a color you can select the web safe color closest to it by A clicking on the box below the preview panel See Figure 1 HTML Kit User s Guide Page 15 Inserting Colors Once you have chosen a color using one the previous methods click on OK to insert the hexadecimal value of that color at the appropriate place in the document Uploading files One convenient feature of HTML Kit is that it allows you to upload your files directly from the Edit menu without having to separately access your FIP Server program To upload files follow the following steps Step 1 Add your FTP server to the Workspace Menu a Click on the Workspace Menu b Select Add FTP Server Folder from the drop down list c Select Add FTP Server from the two available choices The following box appears Server address Fort 21 Login user name Password M Remember password Display name Advanced Options Initial directory optional Timeout fin sec fao Use proxy firewall f Passive mode Host type Auto Detect Figure 9 The Add FTP Server dialog box Page 16 HTML Kit Users Guide d Type in your Server address Login user name Password and Display name your server
14. onym address applet area b base basefont bdo bgsound big blirik blockquote body br Drop Down List a Expand a particular tag by clicking on the sign next to it and select from the list of attributes or b Type in the name of your tag As you type each letter the list changes and highlights the appropriate tag You can then select the attribute you would like to insert from the list Or 2 Type in an opening bracket lt and then the first word of the tag followed by a space eg lt font You can then select an attribute from the drop down list milliseconds box gt To turn off the drop down tags reminder click on the preferences button in the toolbar and click on the Help tab Uncheck the Display after idle time in HTML Kit User s Guide Page 9 Previewing Your Page To preview your HTML document e Use the built in browser Click on the Preview tab below the editing window e Use your default browser Right Click anywhere in the Editing Window and select Preview in Default Browser from the drop down Menu Inserting an Image Using the Workspace The Workspace provides a convenient way to insert images without leaving the desk top Before You Begin Display the Workspace if it is not already on your desktop by clicking on the Work space display button in the Task Bar Action Box See Figure 1 Main Screen and Enlargement of Action Box on page 2 Step 1 Place the i
15. ous tools that make the process of insertion and editing of HTML tags easier In contrast to many WYSIWYG What You See Is What You Get editors HTML Kit gives complete control over the HTML development and editing process HTML Kit can be downloaded free from the following site http www chami com html kit The Main Screen Figure next page shows the main screen of HTML Kit as it appears after a new docu ment is created Note that document type title header and body types have been automat ically inserted Displaying or Hiding Elements of the Screen Go to View in the Main Menu and choose which component to view or remove Or To display hide the Message Window the Action Bar or the Workspace click on the appropriate button in the Action Box as shown enlarged in Figure 1 Page 2 HTML Kit Users Guide Figure 1 Main Screen and Enlargement of Action Bar Main Menu Main Tool Bar Actions Bar Editing Window Workspace lt DOCTYPE HTML PUBLIC lsc DTD HTML 4 0 lt html gt lt head gt lt title gt Untitled lt title gt lt head gt lt body gt workspace j sim a a E _ entra Messages Task Bar Status Bar Window Show Hide Message Window Show Hide Action Bar Manage NN Show Hide Open Workspace Windows Action Bar Enlarged HTML Kit User s Guide Page 3 Getting Around the Main Screen The Workspace Allows quick access to files including opening and uploading To s
16. tml gt lt head gt and lt body gt tags inserted Opening an existing document Click the open document button f on the Standard toolbar Built in Templates HTML Kit has a number of built in Templates that allow you to base your document on HTML or other features To base a new document on a built in template Go to File New The template box will appear Choose an appropriate template from the menu Using HTML Kit Basic Editing Functions Tag Insertion gt To insert a new tag Click on the tag button you would like to insert The tag is inserted and the insertion point is placed between the beginning and ending tag gt To insert tags around text 1 Highlight the text Figure 4 lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN gt lt html gt lt head gt lt titlesUntitled lt title gt lt head gt Highlighted Text lt body gt _ il lt hody gt Ll lt html gt mm J MA wm ee Ww M Fe Figure 4 Editing window with highlighted text Page 6 HTML Kit Users Guide 2 Click on the appropriate tag in this case you can choose the Bold button from the Text Action Bar 3 The tag is inserted around the selected text Figure 5 lt DOCTYPE HTML PUBLIC 039C DTD HTML 4 01 Transitional EN gt lt body gt a lt b gt This is bold text lt bh gt 1 2 lt html gt 4 lt head gt 5 ctitle gt Untitleds title After Tag E lt head gt
Download Pdf Manuals
Related Search