Intro to Web Development For this assignment you will be using the KompoZer program because it free to use, and we wanted to keep the costs of this course down. You may be familiar with other webpage editing programs that you can purchase, such as Adobe s Dreamweaver or Microsoft s Expression software. NOTE: Copy and paste may not work from your web browser. Please save this file to your computer and open it normally (by double clicking the downloaded file) before continuing with the assignment. Objectives: After completion of this assignment, you should be able to: 1. Create your own web page using KompoZer. 2. Publish your own web page so that is can be accessed on the Internet. Introduction: If you know all the syntax rules of HTML, you can use a simple text editor, such as Notepad, to create web pages. Most people do not know all the syntax rules of HTML and must use special software to help them create web pages. KompoZer is one such piece of software, often called a WYSIWYG (What You See Is What You Get) HTML editor. KompoZer runs on Windows, Macintosh, and Linux. Installing KompoZer: Instructions for Creating Web Pages Using KompoZer 3. KompoZer is already installed on campus so if you are using a campus computer, skip to step 6. If KompoZer is not installed on your computer, download the kompozer.zip file from Canvas. Although you can get this program elsewhere on the web, we have included a few extra files for future assignments. 4. Navigate to the folder you just downloaded kompozer.zip into using the My Computer icon. 5. Unzip the kompozer.zip file, which can be done as follows: a. Double click the kompozer.zip file. You should see a folder called Kompozer 0.7.10. b. Right-click the KompoZer 0.7.10 folder and select Copy c. Navigate to where you would like to paste this folder, like your C: or F: drive. d. Right click a blank area of the folder and select Paste from the pop-up menu. A folder is created called Kompozer 0.7.10 Running KompoZer: 6. On campus, open the KompoZer program by clicking the desktop folder called SUU Programs, then clicking CSIS KompoZer. If you just downloaded Kompozer, open the Kompozer 0.7.10 folder, then double-click the kompozer.exe file. 7. The KompoZer program is now running.
8. Close the KompoZer tips menu by clicking the Close button at the bottom. You should see a window like the following: Menu Bar Toolbars Mode Tabs Web Page Design Area Creating a simple web page 9. Click in the Web Page Design Area, and type Firstname Lastname s Web Page, replacing the Firstname and Lastname with your information. 10. Press Enter and compose a paragraph containing interesting information relating to you and your hobbies or experiences here at SUU. 11. Press Enter and type the following sentence: I am a student at SUU, and the University has a Facebook account. 12. Create a link to the SUU homepage, which can be done as follows: a. Select the word SUU you typed in step 11, by clicking and dragging over the text with your mouse. b. Click the Link icon on the Toolbar. You should see the following Link Properties dialog box: Link Location c. Type http://www.suu.edu into Link Location area of the Link Properties dialog box then click OK. d. Click somewhere in the white area of the page to deselect the text, and your text is now in blue and underlined indicating that it is a link. e. Repeat steps a through d, but select the word Facebook and link to https://www.facebook.com/suutbirds?rf=111006092257934 13. Viewing the actual HTML created by KompoZer. a. When you type text into the Web Page Design Area in the Normal mode, KompoZer converts that text into an HTML document behind the scenes. HTML documents are
specially formatted documents that allow text and images to be displayed over the internet, and even between different operating systems, such as Microsoft Windows, Apple OS, and Linux. b. Click the Source Mode tab found at the bottom of the screen. The actual html code is displayed. Notice that there are special symbols and markings in various colors. HTML tags normally come in pairs, for example, the first purple tag is <html> and the final purple tag is </html>. c. Click the Normal Mode tab. 14. Insert a picture, which can be done as follows: a. Move your cursor to the end of the document and press the Enter key four times. b. Click the Image icon on the Toolbar. You should see the following Image Properties dialog box: c. In the Image Location text box, type in the following address: http://www.suu.edu/faculty/barkern/csis_1000/povray.jpg d. In the Alternate text: text box, type Povray Image e. Click the Link tab and type into the web location text box the following address: http://povray.org f. Click OK and a picture now appears in your document. 15. Changing font sizes a. Font sizes can be changed in html by selecting the text, and then using the Smaller Font Size, or Larger Font Size buttons. Font sizes can also be changed from the Format -> Paragraph menu. Select the first line in your html document. This line should contain your name. b. Select Heading 1 from the Format -> Paragraph menu. Your name is now in a larger font. In HTML, there are 6 standard heading tags. The H1 tag displays text in a larger font than an H2 tag. Note that many of the same text editing features found in other text editors, such as Microsoft Word, are also found here in KompoZer, such as changing Font size, Font color, and creating Lists and tables.
16. Embedding a YouTube video. a. Web pages can contain text, images, and video. One of the most popular video websites today is www.youtube.com. YouTube allows users to embed a video from their website onto a webpage and even provide a way for users to do so. Crtl+click the following link http://www.youtube.com/watch?v=79iyzvyivla. The Digital Dossier video should start playing in your web browser as shown in the following figure: YouTube video Share Button Embed Button HTML Code YouTube might be working incorrectly. Verify that you have http: in the src= area b. Click the Share button below the video. A new drop-down area should appear. c. Click the Embed button in the new drop-down area. A new text area should appear with some html code. d. Copy this code and switch to your KompoZer window. e. Click the Source tab in KompoZer to view the html code of your current webpage. f. Insert a new line above the </body> tag at the bottom of the page, and paste your copied code into it. Verify that there is an http: in the src area as shown above. g. Click the Normal tab to see a large black area at the bottom of the page under the image. This is where the video will play. 17. Saving your web page a. Click the Save icon on the Toolbar. The Page Title popup window will ask to enter the title of your page. Type your first and last name into the text area and click OK. b. The Save Page As dialog box will let you choose the location for your web page. Name the file Firstname_Lastname.html and save this file with the other files for this class. c. You may now close the KompoZer application. 18. Viewing your web page in a web browser. a. Navigate to where you saved your new webpage. b. Double click the file to open it in the default web browser on your computer. c. Clicking the SUU text should load the SUU webpage. d. Clicking the Facebook text should load SUU s facebook webpage. e. Clicking the picture should load the Povray webpage. f. Clicking on the YouTube video should start the video.
Publishing Your Own Web Pages You must use a web server to publish your web pages on the internet. There are many web servers on the internet that allow you to publish web pages, some are free to use, like Yahoo or Google, and other web servers usually charge on a monthly basis, depending on the features your web page uses. Submitting your Assignment 19. Submitting your assignment. a. Upload your Firstname_Lastname.html file to Canvas. b. You will be graded as follows: i. The title of your web page is your name. ii. Your name appears at the top of the document in a Heading 1 font. iii. There is a paragraph of text with information relating to you. iv. The SUU text links you to the SUU homepage. v. The Facebook text links you to SUU s facebook web page. vi. The Povray picture links you to the Povray website. vii. The Digital Dossier YouTube video appears on your webpage.