1. 11/8/20151 07- Word Processing Building a Website Using Microsoft Word Please visit http://www.drivehq.com and sign-up the free account using verified e-mail Zaipul Anwar IPROM, UNIKL

2. 11/8/20152 Contents Conceptualizing your website Creating HTML in MS Word Using tables, formatting text and page Using graphics Putting things together: Linking documents Uploading files to the server (DriveHQ.com) Useful Links Note: I assume you know how to use MS Word for word processing.

3. 11/8/20153 Conceptualizing Target audience? Students; other parties who may be interested Information to share? Personal info and resume; class schedule and deadlines; notes and handouts Size of the website? Navigating; Organizing and updating Frequency of updates? Some info are static; others need to be updated often Layout? Look at other sites as examples Experience helps a lot

4. 11/8/20154 Working Example I would create a website that has Pictures and columns with information Links to other external websites You actually need to have some basic knowledge in using a photo editing software like Photoshop, GIMP or Paint.net

5. 11/8/20155 HTML in MS Word Create a LOCAL FOLDER to store all the files for the website C:…\desktop\test-site Open MS Word (2000, 2003, or XP) Type in the contents the usual way, in tables Save file as type “Web Page” or “Web Page, Filtered” (.htm or.html) Normally the first page of your website should be named index.htm to give the server a default page to display when your web address is called (for security and convenience), but in the case of DriveHQ.com you can name it with any name. Give useful names to the other files Avoid long names and spaces in file names To preview in Firefox or Internet Explorer : Double click on the file or type c:..\desktop\test-site\index.htm in the address bar

6. Use tables to manage the layout 11/8/20156 Note that in HTML there are no such things as tab spacing. Therefore, if you use a lot of tabs some of your documents may not convert properly. IMPORTANT If you have problems with your document lining up like you want it, then USE TABLES!

7. Steps in managing the table 11/8/20157 1.Click on the Insert Table in the toolbar (or choose Table, Insert, Table from the menu bar). 2.Select how big you want your table to be (number of rows x number of columns). 3.Then click on the grid to insert the table. Don’t worry if the table turns out to be too big or too small because you can change it later. 4.Start entering your content in the table. 5.Use the tab key to move from left to right in the table. Once you reach the end of the row hit tab again to move to the next row (or to start a new row if you are at the bottom of the table). 6.Table cells work similar to spreadsheet cells. You can select alignment settings, etc. for each individual cell, row or column. 7.Right-click on the table and then choose Properties from the pop-up menu to edit the properties of your table. 8.Word will automatically adjust column width based on what you type in a cell. However, you may still need to make some manual adjustments. Do so by placing your mouse pointer on the vertical line to the right of the column you want to adjust. When your mouse pointer turns into a two-way arrow. Hold down your left mouse button and drag the line to the right or left.

8. 11/8/20158 More adjustments for the tables: You may want to remove the borders Move the picture into the left cell and the contact information into the right cell Adjust the cell sizes Consider: May have its own formatting: background color, alignment, borders, etc. Can put a table within a table for more complicated layouts Steps in managing the table (continue)

9. 11/8/20159 Preview of sample website layout using table (created in MS Word XP) – later remove the border line of the table by selecting “no border” in MS Word

10. 11/8/201510 Formatting Text and Page Paragraph formats Normal, Headings, Hyperlinks, Bulleted, etc. Alignment: left (default), center, right, justify, indent Font properties Type, size, color, bold, underline, italicize, blinking, etc. Page properties Background color, background image, themes (later)

11. 11/8/201511 Using Graphics Position the cursor where the graphics will be placed To do: Insert  Picture  From File Locate and select the picture Resize the picture: Right click  Format Picture  Size Modify the other picture properties Save the html file Hints: Edit pictures using a photo editor for better results MS Word saves a copy of the picture in a folder called filename_files (e.g. index_files).

12. 11/8/201512 Inserting Images 1.Choose Insert, Picture, From File from the menu bar. 2.Locate the image that you want to insert into the document. 3.Double-click on the image to edit some of its properties. 4.To help you align your pictures properly, it is a good idea to insert a picture in a table cell that you’ve created ahead of time. (See earlier section on “Inserting Tables.”)

13. 11/8/201513 1.Locate a non-copyrighted image on a website. 2.Right-click on the image. 3.Choose Save Image As or Save Picture As (depending on which web browser you are using). 4.Locate where you want to save the image to (preferably wherever you are saving the web pages you working on). 5.You will not need to enter a file name unless you want to name the file something different than it is already named. 6.Do not change the file type or this could cause the image to not display properly on your website. 7.Click Save. Notes about Images: 1.The two common image types that are used for web pages are JPG or GIF. Any other format used may not show properly on other users’ web browsers. 2.You may scan an image in, import images from a digital camera, or download images from the web to use in your web page. 3.You can use Microsoft’s clipart option. When you use clipart it will be saved in a sub-folder when you convert your document to HTML. 4.Make sure this sub-folder is uploaded with the rest of your website. This will be explained further when we get to the FTP portion of this handout. 5.If you’re having trouble finding an image, try one of these Web sites: Microsoft’s Design Gallery: http://dgl.microsoft.com/default.asp 6.Google’s Image Search: http://www.google.com and choose the Images tab. Saving images from the Internet

14. 11/8/201514 Preview of sample website layout after inserting the image files

15. Inserting Hyperlinks 11/8/201515 1.Select the text you want to make a link by holding down your left mouse button and dragging across the desired text. 2.Choose Insert and then Hyperlink from the menu bar (or CTRL + K). 3.The first field (Text to Display) should have the text that you selected already inserted. 4.In the address field type the name of the file to which you want to link. 5.Click on the OK button. 6.Your selected text should now be blue and underlined, indicating that it is now a hyperlink.

16. 11/8/201516 Insert hyperlink to the website Put hyperlink here to http://www.apple.com/macosx/features/300.html. Go to Insert tab, click to “Hyperlink” and key in the link

17. 11/8/201517 Notes About Links If you are linking to another file in the same directory as the page that contains the link, simply make the link filename.htm. If you are linking to another website, then the link format needs to be ex.: http://www.whatever.com. If you are linking to a file that is contained in a sub-folder of your web directory then the link format needs to be subfolder/filename.htm. For creating an e-mail address link the format needs to be, ex.: mailto:username@institute.edu.my. The mailto: tells the web browser to launch the user’s e-mail client and insert your e-mail address in the TO: field. If you try this feature in the computer labs, it is normal to get an error message since there are no e-mail clients currently set up in the labs. All files are stored in the same folder as my index.htm. Hints: To have a page open in a new IE window, do Hyperlink  Target Frame  New Window Do not leave “dead” links, i.e., do not put links to files/pages that do not (yet) exist

18. 11/8/201518 Uploading files to webserver (ex.: DriveHQ.com) Log-on to DriveHQ.com Make sure you have the folder wwwhome Copy all files and folders in c:\desktop\test-site to wwwhome. You may use Windows Explorer or other free version of FTP software ex.: Smartftp.com or DriveHQ’s own FTP Software: DriveHQ FileManager In the web browser’s address bar type http://www.drivehq.com/web/yourname/index.htm index.htm should show up Hint: Organize your website files by using subfolders for different sections (e.g. for each subject you learn, for pictures, etc.) For updates, upload only the updated and all related files

19. 11/8/201519 Screenshot of uploading files to the webserserver at DriveHQ.com using Windows Explorer 1.At Windows Explorer type: ftp://ftp.drivehq.com. 2.Go to File, Login as.. Key in your Username & Password

20. 11/8/201520 Screenshot of uploading files to wwwhome at DriveHQ.com using DriveHQ Filemanager Drag to wwwhome

21. Preview webpage in your browser (ex: http://www.drivehq.com/web/zaipul/index.htm) 11/8/201521

22. 11/8/201522 Some Useful Links MS Office http://office.microsoft.com/en- us/assistance/default.aspx Basic MS Word Tutorial http://www.baycongroup.com/wlesson0.htm Creating Web Pages Using MS Word http://www.domainstobuy.com/support/msword_web site.php http://www.archiva.net/mstutorial3web.htm

23. 11/8/201523 Thank you. Creating a website is a life-skill. Enjoy doing it!