Web Design Module Outline

Transcription

1 Web Design Module Outline DAY 1 DAY 2 DAY 3 DAY 4 DAY 5 Lesson 1: WEB DESIGN OVERVIEW Lesson 2: INTRODUCTION TO HTML Lesson 3: TEXT & COLORS Lesson 4: IMAGES & LINKS Lesson 4: (cont.) IMAGES & LINKS what HTML is and what it is used for browsers source code discuss project create and view a simple document simple formatting tags colors font face and size background manipulation major types of image file formats add images to Web pages relative and absolute links In-class activities View source Write instructions In-class activities Create document Format document In-class activities Debugging code Personal Web page In-class activities Adding Images Changing image In-class activities File locations Debugging links DAY 6 DAY 7 DAY 8 DAY 9 DAY 10 Lesson 5: DESIGN STRATEGIES Lesson 5: (cont.) DESIGN STRATEGIES Lesson 6: LISTS Lesson 7: TABLES Lesson 7: (cont.) TABLES design principles design process site maps storyboarding in-class site mapping and storyboarding of Website design challenge sites ordered and unordered lists tables in HTML creating tables different uses for tables in websites including formatting In-class activities Design discussion In-class activities Sitemap Storyboard In-class activities Personal Web page, part 2 In-class activities Create a table In-class activities Format Web page Project table DAY 11 DAY 12 DAY 13 DAY 14 DAY 15 Module project: Website Design Challenge Module project: Website Design Challenge Module project: Website Design Challenge Module project: Website Design Challenge Module project: Website Design Challenge Extension Lessons: Creating Images (PhotoShop); Sounds; Anchors; Frames; Posting Pages Module Outline 115

2

3 Name: Date: Website Design Challenge Project Description In the next few weeks you will learn how to code HTML and create a website! There will be a set of minimum design requirements for your site (see the list below), but you are encouraged to go beyond that list and use your creativity. There are a million and one ways to do fun and cool things with HTML. This project is your chance to demonstrate what you ve learned so far and to try out some of those effects that you ve seen but never used. You may have the opportunity to post your website on the Internet to share it with everyone, and at the very least, may of your classmates will view it, so you are encouraged to create an interesting website for others to read. Here are a few website topic ideas: Create a website about life in Bermuda as a teenager: What do teenagers like to do in their free time? What sports do they like and participate in? Does everyone like to swim, fish and sail? Can you describe favorite styles of music, fashion and speaking? Create a website that describes your school: What does it look like? How many students attend? Do you have any sports teams, singing groups or after school clubs? Is there a school motto? Create a website that tells a fictional story. Create a website that tells a non-fictional story from the history of Bermuda. All of these topics can be enriched with pictures, sounds and links to other sites. You must have your teacher approve your topic before you begin designing. Standards As with any project assignment, this one has standards. Most of them are simply common sense, but they re worth stating explicitly right from the start. All parts of your entry must be your own work. You may look at the source code of other pages to see how something is done, but you may not cut and paste source code from other Web pages into your own document. You are not allowed to use Front Page or Page Mill or any other HTML generator. Web Design Project: Web Design Challenge 117

4 Introduction to Computing Collaboration Designers often work in teams. Working with others gives you the chance to create a more interesting and higher quality product. Everyone on the team can offer unique ideas about the project If you brainstorm with your partners, you will find that together you can come up with more ideas. The challenge is deciding which ones everyone wants to work on. Everyone on the team can offer his or her specific expertise Some people in your group might be good writers, readers or HTML coders, while others might know a lot about a topic or be good researchers. Others might have artistic talents or be good organizers. All of these talents are needed to create a great site. Team members can put their minds together to make sure the site works Finding the bugs or mistakes in a website is important. The more eyes you have checking, the better you will be at finding mistakes and fixing them. To take advantage of all the talents in your group, it is important to get organized. You may want to assign people to different jobs or you may decide to work on all parts of the site together. Either way, you should have a plan for how to work together. Website Requirements Following are the minimal requirements for your website, which are explained in further detail in later sections. 1. Your website must have at least 5 pages. 2. The pages must have links between them. 3. Your website must include at least 2 links to external sources. These sources should be related the theme of your site. 4. Your website must contain at least 1 table. 5. Your website must have an introductory page, with sub-pages containing more information. Users of your website must be able to quickly understand how the site is organized. 6. Your website must include some form of multimedia (images, sounds or movies) on at least 2 of the pages. The multimedia elements should be related to the theme of your site, and the content of the page. 7. Your website must include at least 1 page about the authors of the website. 8. Your website must have a common look and feel. Users of your website should be able to tell that all the pages belong together. 118 Web Design Project: Website Design Challenge

5 Web Design Module Quality Assessment Categories The following categories outline how your project will be evaluated. You should refer to the Self Assessment rubric for more information. 1. Project requirements 2. Graphical design 3. Screen navigation 4. Technical mechanics 5. Content/Communication Web Design Project: Web Design Challenge 119

6 Introduction to Computing Self Assessment 1: Website Requirements Use the chart below to make sure you have addressed all of the required elements: 1 My website is at least 5 pages. 2 The pages have links between them. 3 My website includes at least 2 links to external sources. These sources are related the theme of my site. 4 My website contains at least 1 table. 5 My website has an introductory page, with sub-pages containing more information. Users of my website can quickly understand how it is organized. 6 My website includes some form of multimedia on at least 2 of the pages. The multimedia elements are related to the my site theme, and the content of the page. 7 At least 1 page is about the authors of the website. 8 My website has a common look and feel. Users of my website can tell that all the pages belong together. yes no 120 Web Design Project: Website Design Challenge

7 Web Design Module Self Assessment 2: Website Quality Fill in the level of achievement you feel your website has earned: Website Requirements Graphical Design Screen Navigation Technical Mechanics Content/Communication Total Level of Achievement Use the rubric chart below to assess your levels of achievement: Website Requirements How well the website requirement specifications are followed. Graphical Design The use of color, font and information layout to create a consistent site that is easy to understand. Screen Navigation The use of screen layout and links to create a site that is easy to navigate. How quickly and easily a user can find his/her way around the site. Technical Mechanics Functionality and relevance of links, tables and images. HTML coding. Content/ Communication The ideas and knowledge that are presented. Attention to spelling and language. Creativity of presentation. 4 Excellent All requirements are met. The page about the designers is informative. All pages look consistent from use of color, font and layout. Text is easy to read. Main page shows where to find information on the site. All 5 pages have links or buttons that aid navigation. There are no missing images. All of the links work. Table/frame works. HTML code is clean. All of previous level is true, plus the website shows a great understanding of the topic. Very few spelling or grammatical errors. 3 Great At least 6 of the requirements are met. Designer page is less detailed. Most pages look consistent from use of color, font and layout. Text is easy to read. Main page shows where to find information on the site. Most pages have links or buttons that aid navigation. There are no missing images. Most of the links work. HTML code is relatively clean. The project has a clear goal. Many sources have been used to gather information. A few spelling/ grammatical errors. 2 In Progress At least 4 of the requirements are met. Designer page exists. A few pages look consistent. Text may be difficult to read in places. Main page does not show where to find information on the site. Only a few pages have links/buttons that aid navigation. There are some missing images. Few of the links work. The HTML code is not clean. The project may stray from focus at times. Minor factual errors or inconsistencies. A number of spelling/ grammatical errors. 1 A Start Less than 4 of the requirements are met. There is no designer page. Each page has a separate look and feel. Text is difficult to read. There is no main page. The pages are not logically organized. There are no links or buttons that aid navigation. Most of the images are missing. Most of the links don t work. HTML code has significant problems. Project seems hurried or unfinished. There are significant factual errors. Many spelling/ grammatical errors. Web Design Project: Web Design Challenge 121

8

9 Lesson 1: Web Design Overview READING Overview Web Design Module This module introduces students to the HTML Web programming language and the basics of Web design. The initial lesson should familiarize them with the source code behind Web pages, and should be used to go over the Website Design Challenge project. Estimated Time: 1 class period Objectives By the end of this lesson, students should be able to: Define HTML Open Internet browsers and view pages Use browsers to view Web page source code What is HTML? HTML is the language that people use to create Web pages. HTML stands for Hyper-Text Markup Language. Hyper-text is just a fancy way of saying that our document contains links to other pages. These links are what let us navigate around the Web, jumping from page to page. HTML itself is a scripting language that describes to the computer what a Web page should look like. It is a standard language that can be understood by different kinds of computers and Web browsers. How Does HTML Work? An HTML document is just a text document that is saved as an.html file. The document can be written in a word processing program like Microsoft Word, or in a simple text program like Notepad. It is made up of text that you want to appear on the page, and commands that format the text, reference images, and connect to other pages. If you open up a.html file in a word processing program, you will see the HTML code. If you open up a.html file in a Web browser, you will see the Web page. You can view the code behind the page by choosing View>Source from the Web browser menu. This will open the HTML code in Notepad, allowing you to see how any page on the Web was created. Lesson 1: Web Design Overview Reading 123

10 Introduction to Computing Lesson 1: IN-CLASS ACTIVITIES Activity 1: View Sample Sites Check out sample websites created by students, and the corresponding HTML code that created them. 1. Open your Web browser (usually Internet Explorer or Netscape Navigator) and view these links and/or others your teacher provides. A student website design competition (search the ThinkQuest categories) A collection of award wining sites designed by high school students 2. Check out the HTML that creates these websites. If you are looking at a Web page in Internet Explorer, go to the View menu and choose Source. A window containing the HTML code will open up and you can see the HTML that creates the page. Activity 2: Write Your Own Instructions Computers must be told exactly what to do. People do not because we have the ability to infer things. For example, if your cousin says, Please go get some milk, you know that you have to go to the store, get the milk, pay for the milk and walk home to give it to her. Even though she only said five words, you know what she wanted, and can perform the task. Computers get confused if you do not explain everything that you want in exact detail. Write the most detailed instructions you can describing how to brush your teeth (or any other task your teacher provides). Number your instructions. See how detailed you can be! Example NOT SO DETAILED: How to open a jar 1. Hold jar 2. Twist lid 3. Open jar Example DETAILED: How to open a jar 1. Put the jar in your left hand 2. Put your right hand on the lid of the jar 3. Grab the lid of the jar with the fingers of your right hand 4. Place the thumb of your right hand against the lid of the jar 5. Turn the lid of the jar counter-clockwise until the lid is free from the jar 6. Take the lid off of the jar 124 Lesson 1: Web Design Overview Activities

11 Lesson 2: Introduction to HTML READING Overview Web Design Module This module introduces students to the basics of Hyper Text Markup Language or HTML. After describing how HTML generally works, students are introduced to the basic tag structure of the language. The lesson culminates with the students creating their first Web page in HTML. Estimated Time: 2 class periods Objectives By the end of this lesson, students should be able to: Explain the basic concepts behind HTML Create and save a simple HTML document Use simple text and document formatting tags Tags HTML is made up of commands for the browser to follow. These commands are called tags. HTML tags are recognizable by the angled brackets, such as: <HTML>. Tags are used to format the page content. Anything text that is not a tag will simply display in the browser window. Tags most often come in pairs: the starting tag, which is a word or a letter in angle brackets: <HTML>, and an ending tag, which is the same word or letter in angle brackets with a slash before it: </WORD>. The starting tag begins the command and the ending tag ends it. Anything that is in between the starting and ending tags will be affected by the specified command. Example <B> is the command for bold. The following line in an HTML document: <B> This is bold text. </B> This is not bold. causes the text below to appear in your Web browser: This is bold text. This is not bold. There are many tags that make up the HTML language. It is not important or expected for students to memorize the commands. What is important is to understand the basics of the language and its syntax, and how to reference the specific tags, be it in a book, on the Web, or in class notes. Lesson 2: Introduction to HTML Reading 125

12 Introduction to Computing Creating an HTML Document NotePad is often used to create and edit HTML files, but you can use any text editor or word processing program. Every HTML document starts with an <HTML> tag and ends with an </HTML> tag. These tags should be the first and last things in every HTML document you create. HTML documents are divided into two sections, the head and the body. Simple Web pages mainly use the head section to contain the <TITLE> tags. The title of your Web page should be placed between these tags. This text will appear in the top bar of the Web browser window, not on the actual page itself. The body section contains most of the code and text which will create your Web page. Example <HTML> <HEAD> <TITLE>My First Web Page!</TITLE> </HEAD> <BODY> Tags making up the body of your page will go here. This is usually the longest section. </BODY> </HTML> HTML is not case sensitive (it doesn t care if you use uppercase letters or lowercase letters), so <HTML> and <html> are considered equivalent. However, consistency in any language is good programming style. It is a good idea to use either all upper or all lowercase in your tags. Uppercase tags are easily distinguishable from Web page text, therefore it is the style used in this course document. Code is the word used to describe the tags, or commands, in HTML. Document Formatting HTML doesn t pay attention to tabs, returns or indentations. If you want to begin a new paragraph of text on your Web page, you must use the paragraph tag to mark the beginning of each new paragraph with a <P> tag and mark the end of the paragraph with the </P> tag. 126 Lesson 2: Introduction to HTML Reading

13 Web Design Module If you just want to start a new line of text, you can use the line break tag: <BR>. Note that unlike most HTML tags, line breaks do not need a matching closing tag. 1 Example The following code in an HTML document: <B>Shopping List</B> <P> Carrots<BR> Bread and Butter<BR> Milk<BR> </P> causes the text below to appear in your Web browser: Shopping List Carrots Bread and Butter Milk Review Questions 1. What kind of file should your save your HTML document as? 2. Do you have to use NotePad to create Web pages? 3. What is the tag that should surround everything in an HTML document? 4. What is the tag that makes text show up in the bar on top of the Web browser? Where should this tag be placed in your HTML file? 5. What is the difference between the <B> tag and the <b> tag? 1 Actually, paragraph tags <P> can also be used without a closing </P> tag, but in the interest of style and consistency you should include them when you write HTML. Lesson 2: Introduction to HTML Reading 127

14 Introduction to Computing Lesson 2: IN-CLASS ACTIVITIES Activity 1: Create and View an HTML Document 1. Open NotePad Go to the Start menu and select Find, then select Files and Folders in order to search for a specific document or program on your computer. Enter NotePad. To open the program, you can either follow the path provided by the search results, or double click on the NotePad icon. 2. Type the following simple HTML into a new NotePad document: <HTML> <HEAD> <TITLE> Your Name s Web Page </TITLE> </HEAD> <BODY> Welcome to my Web page! </BODY> </HTML> 3. Check each of the tags to make sure you have a starting and an ending tag. 4. Save your file by choosing File>Save As Create a file name and add.html to the end. Save the file to your folder or a place that is easy to find it again, like the desktop. Microsoft Word documents have.doc at the end of their file name, and NotePad documents have.txt at the end of their file name. If you are working in NotePad and forget to add.html at the end of your file name, it will automatically save it as a.txt file and will not be a Web page. Don t worry, just open that in Notepad, and save it again correctly with the.html suffix. 4. Open Internet Explorer in order to view your document as a Web page. 5. Go to Internet Explorer s File menu and choose Open. 6. A window will pop up that either allows you to type in a file or a URL, or browse your computer for a file. Choose Browse, and locate your HTML file. Once you have found and selected your file, click Open. Congratulations, you have just created and viewed your first HTML page! Activity Question: Where does the text appear that you typed in the <TITLE> tag? 128 Lesson 2: Introduction to HTML Activities

15 Web Design Module Activity 2: Formatting Part 1: Format your text You have had a look at the bold tag (<B>), but there are many other tags that can be used to format text, too. Guess what each of the following tags will do, then add them to your HTML document and view the page in your Web browser to see if you were right: <I>your text here</i> <CENTER>your text here</center> <H1>your text here</h1> <H6>your text here</h6> Activity Question: What do you think the 1 and the 6 mean in the <H> tags? Try out other numbers between 1 and 6 to help you with the answer. Part 2: Format your document 1. Within the body of your working HTML document, type the following information: Shopping List Carrots Bread Butter Milk Before you view it in a browser window, write what the text will look like in the space below. Open your page in Microsoft Explorer to see if you were correct. 2. Use HTML to create a Web page with the following formatted text: Constellations in the Summer Sky: Virgo Cassiopeia Constellations in the Winter Sky: Orion Taurus Lesson 2: Introduction to HTML Activities 129

16

17 Web Design Module Lesson 3: Colors and Text READING Overview This section continues the exploration of HTML by introducing the tags needed to change the color and font characteristics on a Web page. Estimated Time: 1 class period Objectives By the end of this lesson, students should be able to: Use color in a Web page Change the font type and size of text on a Web page Explain the advantages and disadvantages of specifying the font type and size of text on a Web page Change the background, text and link colors in a document Attributes We have learned that a tag is a recognized command. Specifying colors in HTML introduces the concept of an attribute. An attribute is an added piece of information you can include within a tag. You will usually assign the attribute a value. <FONT COLOR = red > This is red text </FONT> COLOR is an attribute of the <FONT> tag, and red is the value of the COLOR attribute. There are 16 built-in colors which Web pages can recognize 2 : Aqua Navy Black Olive Blue Purple Lime White Fuchsia Red Gray Silver Green Teal Maroon Yellow Be aware that colors may show up differently on different monitors. For this reason it is good to use the simple, commonly used colors, and to test your pages on multiple browsers. 2 If you want to choose colors other than the 16 built-in colors, you need to use special numerical values. A simple search of the Internet looking for HTML color values will reveal many online references which list these values, one such example is: Lesson 3: Colors & Text Reading 131

18 Introduction to Computing Document Colors You can change the color of the page itself by specifying a background color. This is done by including the background color attribute (BGCOLOR) to the <BODY> tag. The body tag is the tag that signifies the beginning of the main portion of your Web page. Any attributes included in this tag will affect the entire page. <BODY BGCOLOR = color name > Other attributes that can be placed inside the <BODY> tag include: LINK = color name > Defines the color for links on your Web page LINK = color name > Defines the color of links that have been clicked on (visited links) LINK = color name > Defines the color of the text on your Web page Attributes can be combined within a tag by separating them with a space. <BODY BGCOLOR= color name LINK= color name VLINK= color name TEXT= color name > When you use attributes in the opening tag, you do not need to specify them in the closing tag. For example, to close the <BODY> tag above you simply use the </BODY> closing tag. Text The <FONT> tag includes a variety of attributes that can define the color, size and face of specified text. Font color The <FONT> tag with the COLOR attribute will change the color of the included text. Font size <FONT COLOR = blue > This text will print blue. </FONT> The <FONT> tag with the SIZE attribute will change the size of the included text. <FONT SIZE = 7> This text will print in size 7. </FONT> You can also specify a relative size, making it bigger or smaller than its normal size. <FONT SIZE = +1> This text will be one size bigger than normal. </FONT> Font face The <FONT> tag with the FACE attribute will change the font of the included text. <FONT FACE = Arial > This text will print in the Arial font. </FONT> It is a good idea to only use common fonts (Arial, Geneva, Times New Roman). If you use a strange font that the user s computer does not have, it will substitute it with a default, making it look different than you intended. 132 Lesson 3: Colors & Text Reading

19 Web Design Module Review Questions 1. Describe the Web page created using the following body tag: <BODY BGCOLOR = blue TEXT = red > 2. Describe the segment of a Web page created by the following HTML code: The rain <FONT SIZE=+3>falls </FONT> down. 3. Describe the segment of a Web page created by the following HTML code: The kitten <FONT SIZE=-2>purrs </FONT>. 4. What is the difference between specifying <FONT SIZE = 2> and <FONT SIZE = +2>? 5. What is the relationship between a tag and an attribute? 6. Why is it a good idea to use common fonts when specifying the font face in a Web page? Lesson 3: Colors & Text Reading 133

20 Introduction to Computing Lesson 3: IN-CLASS ACTIVITIES Activity 1: Web Browser Reproduction Use colored pencils and paper to reproduce what the following code looks like when opened in a Web browser: <HTML> <HEAD> <TITLE> Books I Like </TITLE> </HEAD> <BODY BGCOLOR = white TEXT = black > <H1> Books I Like </H1> <P> <FONT COLOR = red > I really like books that tell of </FONT> <FONT COLOR = blue > adventures. </FONT> <BR> I especially like <FONT SIZE = +3> mysteries! </FONT> </P> </BODY> </HTML> Activity 2: Debugging A bug is a mistake in code that makes it do something other than what the programmer intended. Debugging is the act of fixing problems in code. Someone has created a Web page entitled My Favorite Books, but it is not working properly. It s your job to debug it! 1. Open the debug1.html file in your Web browser. The file contains a description of the author s favorite books. The titles are in bold, and the descriptions are in regular text. Something has gone wrong the descriptions of the last two books are all in bold. 2. Open the debug1.html file in NotePad. 3. Find the bug, and eliminate it by fixing the code. 4. Check your work by resaving the file as debug1fixed.html, and opening it in the browser window. Activity 3: Personal Web Page This activity is the first of three steps to creating your own personal Web page! 1. Create a new.html document in NotePad and save it as yourname.html. 2. Use your name for the title of the page using the <TITLE> tag. 134 Lesson 3: Colors & Text Activities

21 Web Design Module 3. Use attributes in the <BODY> tag to specify colors for the background, text, links and visited links. 4. Write your name in large letters at the top of the page. 5. Write one or two paragraphs about yourself. Remember to use the <P> tag to separate paragraphs. 6. Use at least two of the four text formatting tags you have learned about so far (bold, center, underline or italics) in an appropriate context. You have created the initial version of your personal Web page. Save your work. Lesson 3: Colors & Text Activities 135

22

23 Web Design Module Lesson 4: Images and Links READING Overview In this lesson, students are introduced to the tags used to include images and links in a Web page. Additionally, this section includes a discussion of the various types of images commonly used on the Web and the kinds of links that can be created. The concept of links leads to websites (as opposed to Web pages) and file organization. Estimated Time: 2 class periods Objectives By the end of this lesson, students should be able to: Define and describe the major types of image file formats Add images to an HTML document Use an image as the background of a Web page Distinguish between relative and absolute links Define a website Include links to relative pages using a simple file structure Include links to absolute Web pages Image Formats For the Web Images on the World Wide Web must be in a format that the browser can understand. The two most common formats are.gif (Graphic Interchange Format) and.jpeg (Joint Photographic Experts Group). GIF Most images on the Web today are GIFs because the GIF format keeps files very small so they load onto a page quickly. The files are small because GIF images only use 256 colors. This file type is best used for simple computer-drawn or hand-drawn images (lettering, simple cartoons, black-and-white line drawings, logos). JPEG JPEG images are not limited in the number of colors they can use, so while the files are usually bigger, the image is of higher quality. This file type is best used for photographs or more detailed artwork. Images in HTML The image tag <IMG> is used to insert images into a Web page. The image tag must include the source (SRC) attribute, which specifies the name and location of the image: <IMG SRC = mypicture.gif > Lesson 4: Images & Links Reading 137

24 Introduction to Computing The following HTML code produces the Web page below. In this case, the image cat.jpg was in the same folder as the HTML document. <HTML> <HEAD> <TITLE> A Picture </TITLE> </HEAD> <BODY> <CENTER> <H1> A Picture of a Cat </H1> <BR> <IMG SRC = cat.jpg > </CENTER> </BODY> </HTML> Using an Image as a Web Page Background Just as the BGCOLOR attribute can be used in the <BODY> tag to define the color of the background of your Web page, there is also an attribute that identifies an image to use as the background of your Web page. Be aware that the image will repeat, or tile, to fill the browser window. <BODY BACKGROUND = imagename.jpg > It is a good idea to use light, muted, or simple images for a background. If the image is too busy, it is difficult to see text or other elements of the Web page, and can distract the user from your page s content. 138 Lesson 4: Images & Links Reading

25 Web Design Module Image Attributes Alternate (ALT) Attribute Not all browsers are capable of displaying graphics, and some users choose not to display graphics so that pages will load faster. The ALT attribute displays a line of descriptive text if the browser can not display your image. The ALT attribute also displays the line of text in place of an image while it waits for it to download, and also pops up in a small window when the user hovers the mouse over the image. <IMG SRC = cat.jpg ALT = picture of my cat > Height (HEIGHT) and Width (WIDTH) Attributes The HEIGHT and WIDTH attributes determine the size of the image displayed. If you do not specify a size attribute, the browser will use the actual size of the chosen image. If you do specify a size, make sure that it is proportional to the actual image or else it will look distorted. The HEIGHT attribute is always expressed in pixels, while the WIDTH attribute can be expressed in pixels or as a percentage of the browser window width. A pixel is the smallest dot that a monitor s screen can display. If you want the picture to be 100 pixels tall and half the window wide, type: <IMG SRC = cat.jpg HEIGHT = 100 WIDTH = 50% > If you use only the WIDTH attribute with a percentage, it will retain the image s proportions. Using Images on the Web The Web is a form of publication. It is important to use your own images (that you have created or scanned in) or images from clipart or some other freely distributed site. If you are using someone else s image, you need to get their permission and reference where you got it on your site. Often people will put a line of text under the image to give credit to the actual owner of that picture. If you are just working in class, it is OK to use images for educational purposes, but it is a good idea to get into the habit of referencing. If the pages are going to be published on the Internet, you must be given permission to use any elements that are not your own and should cite this on your pages. Links Hyperlinks, or links for short, connect your Web page other pages on the Web. Links are often underlined (the default) so that a user knows they are clickable. Lesson 4: Images & Links Reading 139

26 Introduction to Computing There are two main types of links: Absolute links send the user to another website that may be anywhere on the Web. Relative links usually send the user to a different page within your own website. An anchor tag <A> is used to add a link to the body of an HTML document. The anchor tag must include the HREF attribute, which specifies the location of the website you want to link to. <A HREF = pagename.html > Link to the page </A> Absolute links The location of a Web page is specified by its URL (Universal Resource Locator), the address of a Web page. Example If you wanted to include a link on your Web page that read Go to Yahoo! and sent the user to the Yahoo! s website, you would include the following code: starting anchor tag with HREF attribute URL linked text ending anchor tag <A HREF = > Go to Yahoo! </A> Relative links When providing a relative link, you do not need to type the full URL because the file is within your website. If the file is in the same folder as the file you are currently working on, you just need the file name. If the file is in another location (in another folder) you need to provide directions from the file you are currently working on. Example If you wanted to create a link to Europe.html from the page Intro.html that read to Europe, you would include the following line of code in the body of Intro.html: <A HREF = Continents/Europe.html > to Europe </A> 140 Lesson 4: Images & Links Reading

27 Web Design Module Review Questions 1. If you wanted to include a picture of your family on your Web page, which image format would be better to use: JPEG or GIF? 2. John tried to include a picture of his cat on his Web page by using the tag below. Why doesn t his tag work? <IMG = cat.jpg > 3. What will the following tag produce on the screen in a browser that is not capable of displaying graphics? <IMG SRC = friends.jpg ALT = picture of my friends > 4. What size will the following three images be in the browser window? <IMG SRC = friends.jpg HEIGHT = 100 WIDTH = 125> <IMG SRC = friends.jpg HEIGHT = 150 WIDTH = 25%> <IMG SRC = friends.jpg > 5. What attribute do you use with the <A> tag in order to generate a link? 6. Use the following code to answer both parts of this question: <A HREF = > Use Search Engine </A> a. Where will the link send a user who clicks on it? b. Draw what the link will look like in a browser window. 7. If the HREF attribute of a link starts with what type of link is it: relative or absolute? Lesson 4: Images & Links Reading 141

28 Introduction to Computing Lesson 4: IN-CLASS ACTIVITIES Activity 1: Adding Images In order to include images on your Web page, you must first have the image itself. Use images that your teacher provides, or go to a site that offers royalty free images. This means that the sites offer pictures that you can use without paying a fee for their use or getting permission. Though permission is already granted for you to use these images, you should always cite where you got the images in order to give credit to the people who took or created the pictures. A simple citation is a small line of text under the image with the website you found the image on. Some sites that freely distribute images are: Images from the Galileo spacecraft Hurricanes and weather events Government of Australia s image library Various images of natural scenes and life Animal pictures 1. Go to the sites and choose 3 images to download. 2. Download the images to your computer in the folder that contains your html pages. To download images from the Web onto your computer, hold down the right mouse button on the image that you want to download. Choose Save Image and then specify where you want to save the image on your computer. 3. Add the 3 images to one of your existing Web pages using the <IMG> tag. <IMG SRC= picturename.jpg > 4. Reference the site where you found the image on your page by putting the website URL under the images in small letters. Activity 2: Change Image Sizes Choose one of your images, and add HEIGHT and WIDTH attributes to change the size: 1. Make your image taller and thinner. 2. Make your image shorter and wider. Use a percentage for the width measurement. 3. Specify only the WIDTH and record what happens in the space below. 142 Lesson 4: Images & Links Activities

29 Web Design Module Activity 3: Specify File Locations Example If you were working on the Intro.html file, the tag for a link that reads To Europe that takes the user to the Europe.html file would look like this: <A HREF = Continents/Europe.html> To Europe </A> 1. You are working on the Atlantic.html file. Write a tag for a link that reads See the Pacific that takes the user to the Pacific.html file. 2. You are working on the Africa.html file. Write a tag for a link that reads Learn about Asia that takes the user to the Asia.html file. 3. You are working on the Intro.html file. Write a tag for a link that reads Oceans Nearby that takes the user to the Atlantic.html file. Activity 4: Debugging Someone has created a Web page entitled Areas in Computer Science, but it is not working properly. It s up to you to fix it! Open the debug2.html file in your Web browser. The file contains links to different areas of interest. Something has gone wrong with one of the links instead of being a link, some of the code is showing. Open the debug2.html file in NotePad. Find the bug, and eliminate it by fixing the code. Lesson 4: Images & Links Activities 143

30

31 Web Design Module Lesson 5: Design Strategies READING Overview In this lesson, students are introduced to some of the fundamental elements of Web design through engaging in a Design Process of design, coding, testing, and revising. Students learn what is meant by the term user-friendly and are shown the advantages of designing a website with a common look and feel. Two design techniques, site maps and storyboards, are introduced. Estimated Time: 2 class periods Objectives By the end of this lesson, students should be able to: Describe their own design process Discuss what features make websites user-friendly Recognize some of the human factors that make good design Construct a site map Create a basic storyboard for both a site and a page Web Design Some websites are just plain good, while others are hard to understand, hard to use and not very user-friendly. Of course, there are no absolute right or wrong answers in design, because it depends on the opinion of the user, and everyone s opinion is different. However, there are a number of factors that you should consider when designing a Web page. Many of them can be the deciding factor between a Web page that s good and one that s great, or between one that s just okay and another that s awful. Important Information to Include In Your Site It is a good idea to provide as much information as possible on all pages of your website, not just the main page, because you never know where someone is going to start. Author information All Web pages should contain some basic information about the author and the source of information contained within the Web page. There are many Web pages that contain misleading or wrong information knowing who created the site helps a user decide if the information on the page is accurate. Lesson 5: Design Strategies Reading 145

32 Introduction to Computing Links to your home page If your website contains more than one page, it is a good idea to have a home page that has links to all other sections of your site, sort of like a table of contents. Then you can put a link to the home page on all of the pages in your site, so the user can easily find all the information. Last modified date It is a good idea to include this date in your website. This lets readers know if the information on your site is recent, or whether it s ten years old. Technology Considerations The following technology considerations can help you create effective websites: Downloading speed If you put a lot of large graphics on your page, people viewing your Web page have to wait to download all those images before they can see the whole page. But images are useful, so use your judgment. Make sure the image content is worth the download time. Monitor size People with smaller monitors may not be able to see your whole Web page at once, and they will have to scroll down or to the right. Don t make your Web pages too long or too wide. Otherwise, people will have to scroll on and on to reach the end. Web-friendly text Reading a lot of text on a computer screen is hard on the eyes. Information on the Web often needs to be displayed in an easy-to-read format like bullet-point lists, or in small chunks of information. This will ensure that the most important things you have to say will be noticed. User Considerations The following facts about human perception can help you create effective designs. Positioning of items on a page People look at a Web page from left to right, and from top to bottom like you read a book. Therefore, if there s something on your page that you wish to receive special attention, place it near the top left it will be the first thing people see. Use of color Too many colors used in the basic layout of a single Web page can confuse the eye. It is a good idea to pick three basic colors, and stick with this color scheme throughout your site. This will also contribute to the common look and feel of your website. 146 Design Strategies Reading

33 Web Design Module Consistency Users should be able to tell that all your pages belong to the same website. This is achieved by having a similar look and feel to all of your pages. Aside from using the same, similar or complimentary color schemes, a common look and feel can be aided by formatting the pages in a similar fashion, and including navigation links in similar locations across all of the pages. Design Process Web designers usually go through a series of steps to create a truly successful website. Many of these steps take place before the designers write any HTML. This is how the design process typically works: 1. Pick a topic and brainstorm ideas for content. 2. Answer preliminary design questions: What is the project? Who is audience? What do you want to show and how can you best do that? 3. Research topic and gather/create possible text and images. 4. Create a paper mock-up of the site using a site map and/or storyboard(s). Repeat 4, 5, 6 5. Use the paper mock-up(s) to review your design and get comments from others. 6. Revise your design based on feedback from yourself and others. 7. Build the site. Repeat 7, 8, 9 8. Review your site and get comments from others. 9. Revise the site based on feedback from yourself and others. Design Techniques Many designers start to design on paper before they write any code at all. It is easier to change your designs on paper, and when you start coding you will know almost exactly what to create. Sitemaps Using a pencil and a piece of paper, the first step in making a website is to develop a sitemap. Decide the site structure, how your pages are connected to one another and what to name each page. Lesson 5: Design Strategies Reading 147

34 Introduction to Computing football.html index.html basketball.html cricket.html Naming Conventions It is a good idea to name your beginning page index.html so that users know where to start. Web browsers will automatically open index pages first if no page is specified. worldcup.html Name your other pages with names that are easy to understand, for both you and your user. Storyboarding After you have worked out a site map, storyboarding your site is a way to plan out each page in detail. Storyboarding helps you to decide what exactly what things look like, and what to include on each page. Use paper, a pencil and colored pencils or crayons to construct your storyboards. The first step in storyboarding is to decide on your overall site colors. It is important to keep your site consistent, and choosing colors early will help. Some common choices are: background color, text color, link color, and visited link color. It is a good idea to come up with a color scheme to base your choices on, and this will help you when you go to choose title colors and other variations as your site progresses. It is a good idea to storyboard each level of page. In the site map above, there are 3 levels. Include where images are to be placed, what they are named, along with headers, text, colors, links and anything else you want to specify. Cricket.html CRICKET goal.gif picture of cricket player scoring a goal red team.gif picture of my cricket team learn about football in Bermuda learn about basketball in Bermuda back to main page link to: football.html link to: basketball.html 148 Design Strategies Reading

35 Web Design Module Additional Pointers 1. Try to use images and other media in a way that enhances your site. You can often use images as icons or a way to tell a story instead of relying only on text to convey all of your information. However, do not overload the user with images that are slow to load. Choose your media carefully! 2. Before your site is complete, have someone look it over and give you their thoughts, or feedback. They can tell you what they really like, or things that confused them. You can then use this feedback to improve your site. Lesson 5: Design Strategies Reading 149

36 Introduction to Computing Lesson 5: IN-CLASS ACTIVITIES Activity 1: Design Discussion Your teacher will be showing you a website for you to critique. Think about design issues, and how the site design could be improved. Make a list of at least 5 improvements in the space provided. Be as detailed as you can. Guiding Questions: Is the text hard to read? Is the site clear, and easy to navigate, or do you get lost on a page with no way out? Do the pages have a common look and feel (can you tell that they belong together)? Do you understand what the site is about? Do you have to scroll way down to get all the information? Activity 2: Beginning The Website Design Challenge 1. Read the Website Design Challenge packet and break into your project teams. 2. Answer the following preliminary design questions on a separate sheet of paper: What is your project topic? What information do you want to present to your audience? What are some ideas for best presenting that information? 3. Create a sitemap. Use a pencil and paper to create a simple site map that lays out how you want to organize your Website Design Challenge site, how pages are connected to one another and what you want to name each page. 4. Storyboard your site. Use colored pencils/crayons and paper to storyboard the different levels of your Website Design Challenge pages. Decide document colors, how the pages are connected, what images and links are included on each page, etc. 150 Lesson 5: Design Strategies Activities

37 Web Design Module Lesson 6: Lists READING Overview This lesson introduces lists in HTML. Students learn when and why to use ordered and unordered lists in a Web page and will use HTML code to incorporate lists into their Web page documents. Estimated Time: 1 class period Objectives By the end of this lesson, students should be able to: Define a list in HTML and give examples of when to use a list in a Web page Explain the difference between ordered and unordered lists Create both ordered and unordered lists in an HTML document Lists HTML provides an easy way to make lists appear on a Web page. There are two main types of lists: Ordered lists are lists that appear with numbers before each element on the list: 1. Apples 2. Oranges 3. Bananas Unordered lists are lists that appear with a symbol before each element on the list: Apples Oranges Bananas Use the tag <UL> to begin an unordered list, or <OL> to begin an ordered list. Type <LI> (list item tag) before each new item on your list. Use the tag </UL> to end an unordered list, or </OL> to end an ordered list. The following code recreates the ordered list shown above: <OL> <LI> Apples <LI> Oranges <LI> Bananas </OL> Lesson 6: Lists Reading 151

38 Introduction to Computing Unordered list attribute Unordered lists usually appear with bullets next to the list entries. You can choose to use a different symbol by using the TYPE attribute in the <UL> tag: <UL TYPE = circle> The types available are: disc, which creates the normally used bullet, circle, which creates unfilled circles, and square, which creates squares. Review Questions 1. What is the difference between the <OL> tag and the <UL> tag? 2. What would the following code produce on the screen? <HTML> <HEAD> <TITLE> Fruits and Vegetables </TITLE> </HEAD> <BODY> <CENTER><H1> Fruits and Vegetables </H1></CENTER> <H2> My Favorite Fruits </H2> <OL> <LI> Apples <LI> Oranges <LI> Bananas </OL> <H2> My Favorite Vegetables </H2> <UL> <LI> Carrots <LI> Broccoli <LI> Peas </UL> </BODY> </HTML> 3. Give examples of when you would use both types of lists, ordered and unordered. 4. Write the HTML code that would create an unordered list of your four favorite colors that appear with squares as the symbols. 152 Lesson 6: Lists Reading

39 Web Design Module Lesson 6: IN-CLASS ACTIVITES Personal Web Page, Continued This activity is the second step to creating your own personal Web page! Part I: Add images 1. Open your Personal Web Page html file (YourName1.html). It is time to add some images. 2. Select two images you want to include on your page. Scan in a picture of yourself, get some cool images from the Web or get some sample images from your teacher. Be sure to cite any images that are not your own creation. 3. Place the first image on the left-hand side of the page just below your name. Text should flow along the right side of your picture. 4. Place the second image wherever you think is appropriate. 5. Save this latest version of your Web page as YourName2.html. Part II: Add lists 1. Add a list on your page (ordered or unordered) of at least three of your hobbies or interests. 2. Check the page in your browser window to ensure that the list is appearing properly. 3. Find a website corresponding to one of the interests/hobbies on your list and create a links from the list item text to the site. 4. Save this latest version of your Web page as YourName3.html. Lesson 6: Lists Activities 153

40

41 Web Design Module Lesson 7: Tables READING Overview This lesson introduces the use of tables in a Web page, and the associated tags and attributes necessary to place a table in an HTML document. The section begins with a discussion of table anatomy, which is then followed by descriptions of the relevant tag and attribute parameters necessary to format a table. Tables constitute one of the more complex attributes of HTML, but are tremendously useful as a formatting tool as students have more defined ideas of where elements should be placed in their pages. Estimated Time: 2 class periods Objectives By the end of this lesson, students should be able to: Identify reasons to use tables in Web pages Create a table in a Web page using HTML Use simple table attributes to format the table design Use tables both for display of data and for page formatting Tables Tables in a Web page are just like tables in Word, or a table you may create by hand. They are made up of rows and columns and cells which contain data. A simple use of a table in a Web page is to organize data. For example, to display the score of your school s latest soccer game on a Web page, you could use a table: How Do Tables Work in HTML? Though tables created with HTML look just like other tables you have seen before, with rows, columns, and cells, their creation is a bit different. Instead of just indicating how many rows and columns you want, and then filling in the individual cells created, tables are created from the top left, to the bottom right, filling in each cell as you go. Table Table Row Table Data Table Data Table Data Table Row Table Data Table Data Table Data Table Row Table Data Table Data Table Data Lesson 7: Tables Reading 155

42 Introduction to Computing A table is started by using the <TABLE> tag. Within the table, a new row is begun using the <TR> (Table Row) tag. Within a row, data boxes (cells) are created using the <TD> (Table Data) tag. The information in the data cells can be any legal HTML content, like text or images. The table data box is then closed with the </TD> tag. The number of data boxes that are specified determines the number of columns the table will have. When you have entered all of the data boxes you require, the table row is completed using the </TR> tag. This process is repeated until you have all of the rows completed, at which point the end of the table is signified using the </TABLE> tag. Note that you can also use header cells rather than data cells by using the <TH> tag. The <TH> tag acts exactly the same as the <TD> tag except that the contents of the <TH> tag are displayed in bold and are centered, rather than left-aligned. For example, following is the code to create the table, and the table in a browser window: <TABLE WIDTH = "100" BORDER> <TR> <TH WIDTH = "50%">US</TH> <TH>THEM</TH> </TR> <TR> <TD ALIGN = CENTER>3</TD> <TD ALIGN = CENTER>1</TD> </TR> </TABLE> Table Tag Attributes The table tag <TABLE> can include attributes that change the appearance and spacing of your table. Like other attributes, they should be included within the <TABLE> tag and they should be separated by a space. Border Tables are normally displayed without a border. You can provide the BORDER attribute without a value, which will result in the browser drawing a default set of borders, or you can specify the width of the border in pixels. <TABLE BORDER> or <TABLE BORDER = width in pixels > 156 Lesson 7: Tables Reading

43 Web Design Module Width The width of the table can be specified either in pixels or as a percentage of the screen width. <TABLE WIDTH = width in pixels or percentage > Align Table alignment specifies how the table is placed in the Web browser window. <TABLE ALIGN = your alignment choice> Alignment choices are: center: table is placed in the center of the browser and any text on the page appears above and below; left: table is placed on the left side of the browser and text flows around it to the right; and right: table is placed on the right side of the browser and text flows around it to the left. For example, if you wanted to create a table that was 300 pixels wide, with borders two pixels thick and was centered in the window, you could type: <TABLE BORDER = 2 WIDTH = 300 ALIGN = center> Background color The BGCOLOR attribute sets the color of the background of the table. <TABLE BGCOLOR = colorchoice> Table Row and Table Data Attributes Table Row <TR> attributes will set the properties of all of the data cells in the row, unless an individual table data cell has its own attributes. The <TD> Table Data tag can include attributes that set the properties of individual cells. Horizontal alignmentthe ALIGN attribute controls how cell contents are aligned horizontally. It can be set to: left, center, or right. If no ALIGN attribute is set, table data cells will be left aligned. ALIGN = your alignment choice Vertical alignment The VALIGN attribute controls where the contents of a cell are placed vertically. It can be set to top, center, or bottom. The default is center. VALIGN = your alignment choice Background color The BGCOLOR attribute sets the color of the background of the data cell. BGCOLOR = your color choice Lesson 7: Tables Reading 157

44 Introduction to Computing Height The HEIGHT attribute specifies the height of a cell in pixels. The height will be extended to fit all the data in cells whether or not you use the HEIGHT attribute. HEIGHT = height in pixels Width The WIDTH attribute specifies the cell width in pixels or a percentage of the screen width. WIDTH = width in pixels or percent Using Tables To Format Your Page As you may have noticed, it is difficult to neatly line up items in a Web page. You can use a table to help you align items more precisely. When you turn off the border attribute, no one will even guess that there is a table organizing your page. See the example below: 158 Lesson 7: Tables Reading

45 Web Design Module Review Questions 1. Write the line of code that would right-align the text in a data cell. 2. What is the difference between putting the BGCOLOR attribute in a <TR> tag and a <TD> tag? 3. If both a <TD> cell tag and its surrounding <TR> have the same attribute, but with different values, what happens? 4. Can you put an image in your data cell? 5. What are the two major uses of tables in a Web page? 6. Write out the HTML code that would create the following table: A B C D E F Lesson 7: Tables Reading 159

46 Introduction to Computing Lesson 7: IN-CLASS ACTIVITIES Activity 1: Create a Simple Table Create the following table using HTML: Specifications The table width is 200 pixels. The first row is 50% of the total table width. Activity 2: Use a Table to Format a Web Page Create a Web page that uses a table to format it. The dotted lines represent the table: Leave this data cell blank Leave this data cell blank Put a page title in this data cell Leave this data cell blank Put text about your image in this data cell Put an image in this data cell Specifications The table has no borders, and is centered on the page The table width is 75% of the browser window. The second column is 75% of the total table width. Activity 3: Website Design Challenge Table One of the requirements for the Website Design Challenge is that your website must include at least one table. Think about how you can best use a table in your website, and sketch your ideas out on paper. Write the HTML for your table in a new HTML document. Once you have the table working correctly, you can cut and paste the table code into your existing website. 160 Lesson 7: Tables Activities

47 Web Design Module Extension Lesson: Creating Images READING Overview This extension section provides a reference for students interested in creating their own images using Adobe PhotoShop, or other similar paint program. The basic functionality of PhotoShop is explored in a setting geared toward Web design. Estimated Time: 1 class period Objectives By the end of this lesson, students should be able to: Design and create simple images in PhotoShop Use the basic tools available and be confident in further explorations of the program Save created images in browser compatible formats Paint Programs You can create your own image or modify an existing image using paint programs. These applications allow you to paint and draw on the screen, and then save your image as a file. A powerful and popular paint program is Adobe PhotoShop. Familiarity with PhotoShop will lead to quick understanding of other image creation applications. An important concept in paint programs is that there are no objects, just a canvas. If you draw a line in a word processing program, it remains on the page until the entire line is deleted. If you draw a line in a paint program like PhotoShop, it is made up of pixels. You can erase parts of the line by pixel, much like drawing on a real piece of paper. This lesson is simply a brief overview of PhotoShop and how it can be used to create images for the Web. References to PhotoShop tutorials and guides are included at the end of the lesson. New Document Before you can begin a new document, a dialog box appears asking for document information. When you open a new word processing document, it opens a document the size of a piece of regular paper. When you open a new paint program document, you need to specify the size. you could be creating a tiny button, or a large mural. Extension Lesson: Creating Images Reading 161

48 Introduction to Computing Name your image. Determine the size of your image (height and width). The resolution for web images is usually 72 pixels/inch. The background of your document will fill with what is chosen here. When you have filled in your document specifications, click OK to open your new document. Use the pull-down menus if you want to change the unit of measurement to inches. Use the pull-down menu to change your color mode. RGB (all colors are created from Red, Green and Blue) is the most common for web images. Main Screen Tools Canvas Roll your cursor over the tools and their names will pop up. If there is a little arrow to the right of a tool, you can hold your mouse down to view additional tool options like this: The percentage at which your image is being viewed. You can click on this box to change it. Click on a tool, and a description of how to use it appears here. 162 Creating Images Reading

49 Web Design Module Tools Some tools will be familiar, like the paintbrush. Click on a tool to activate it. Some of the basic tools are explained below: Rectangular Marquee: Select a rectangular part of your canvas by holding the mouse key down and dragging. Lasso: Select parts of your canvas by holding the mouse key and tracing the shape. Eraser: Erase parts of your image. Paint Bucket: Fill an entire selected area with the foreground color by clicking on it. Foreground Color: All drawing tools will use this color (paint, draw line, spray point, etc.) Change this color by clicking on it, then choosing another color. Choosing A Color Move: Move a selected area by holding the mouse key down and dragging. Paintbrush: Paint by holding down the mouse key. Line: Draw a straight line by clicking the mouse to begin the line, and letting it go to where you want the line to end. Type: Add words by clicking the mouse where you want to insert the type. Zoom: Zoom in on an area of your image by clicking on the area. You can zoom out again by holding down the ALT key and clicking with the zoom tool. Background Color: The eraser will use this color. Change this color by clicking on it, then choosing another color. To switch the background and the foreground colors, click on the double arrow. To use many of the drawing tools (like the paintbrush or the pencil or the paint bucket) you will want to specify the color you want to draw in. Double click on the foreground color. The Color Picker will appear on your screen. There are many ways you can specify a color. You can alter the levels of colors by specifying the percentage of each component color (RGB: Red, Green, Blue; CMYK: Cyan, Magenta, Yellow, Black) or you can move the circle over colors until you find one you like; PhotoShop will alter the numerical levels for you. Click OK and your chosen color will be the new foreground color. Extension Lesson: Creating Images Reading 163

50 Introduction to Computing Saving Your Image Choose the format you want to save your image as: JPEG or GIF, depending on the kind of image you re working with. Remember that simple line drawings should be saved as a GIF, and more detailed work like photographs should be saved as a JPEG. Choose Save for Web from the File menu. From the settings section you can choose GIF or JPEG, and depending on which you choose you will have additional options such as size and colors. The normal monitor resolution is 72 pixels per inch. The2-up and 4-up tabs allow you to compare different settings of your image to see which one works best at the smallest size. Play around with different compressions until you have the optimal file format and compression, then click OK to save your image. It is important to note that compression (turning a large image into a smaller Web format like jpeg or gif) flattens complicated elements in your image such as layers, and reduces the number of colors. It is a good idea to save a version of the image in its original PhotoShop format so that you can go back and edit or change it or reuse it. In order to do this, simply choose Save As from the File menu. Review Questions 1. What is a pixel? 2. At what resolution should you save your image for the Web? 3. If you want to move a part of your image that is already selected, what tool do you use? 164 Creating Images Reading

51 Web Design Module Extension Lesson: Sounds READING Overview This extension lesson introduces students to the necessary tags used to include sounds in an HTML document. The various types of sound file formats are also discussed, along with methods for creating custom sounds. Estimated Time: 1 class period Objectives By the end of this lesson, students should be able to: Identify formats of sound files that can be used in an HTML document Incorporate sounds into Web page using HTML Using Sounds on the Web You can put links to sound files on your Web page in the same way that you link to other Web pages. A user can click on the link, and instead of going to a new page, the sound will play. Use the A HREF tag followed by the name of the sound file which you wish to link to. For example, to link to a sound file called song1.au in your local Sounds directory, you would need the following HTML line: <A HREF="Sounds/song1.au"> Song 1 </A> The text you put in between the tags ( Song 1 in the example above) is up to you. It is the text link that will play the sound file when clicked. Audio files come in many formats. Some common ones on the web are.au,.wav, and.mp3 suffixes. These sound files can be played by Netscape Navigator and Internet Explorer browsers. There are lots of resources on the Web for sounds 3. As with images, cite your sources. As a rule, sound files on the Web should be short. Users don t want to wait for huge files to download, nor do they want to listen to lengthy monologues. Like images, sound should be used wisely to enhance the content of your site. 3 : sound clips from popular movies. : various animal sounds. : various sounds related to race cars, dragsters and motorcycles. Extension Lesson: Sounds Reading 165

52 Sounds: IN-CLASS ACTIVITIES Incorporating Sound Into Your Web Page Web Design Module 1. Check out the following sites and choose a few sounds you want to use in your pages: sound clips from popular movies. various animal sounds. various sounds related to race cars and motorcycles. Using sounds from the Internet is like using images. You need to ensure that the sounds you are using are free to the public. In order to download sounds onto your computer, hold down the right mouse button on the sound that you want to download, choose Save Source, and specify where you want to save the sound on your computer. As with images, cite your sources. 2. Open one of your existing Web pages in NotePad (or begin a new Web page) and insert some links that play sounds using the A HREF tag. <A HREF="songName.au"> Play my song! </A> Try to find and use sounds that go along with the content of your Web page. For example, if you are developing a page about different kinds of dogs, you could include links to the sounds of different dogs barking. 166 Extension Lesson: Sounds Activities

53 Web Design Module Extension Lesson: Anchors READING Overview This extension lesson takes a closer look at the anchor tag first introduced to create links. Students explore the use of anchors within a page jump to identified subsections. Estimated Time: 1 class period Objectives By the end of this lesson, students should be able to: Explain the use of anchors in Web page design Use anchors in an HTML document What is an Anchor? When you click on a link to a new Web page, you are usually brought to the top of the appropriate page. If the page is very long, you may not want to scroll all the way down to find the information you are looking for. Anchors are a way to mark specified locations within your HTML document, which you can then reference. With anchors, the user can decide to jump directly to the middle or the end of the document, depending on the information they want. Anchors are often used to provide a back to top link within web pages. To use an anchor you must (1) Create the anchor; (2) Reference the anchor in a link. Step 1: Create the Anchor To create an anchor, place your cursor in the part of the HTML document where you want the user to jump. You can then use the anchor tag <A> with the NAME attribute. You can close the tag after the first word. Nothing will appear on the Web page, it is simply a marker. <A NAME = anchor name > Example The following code is from a document titled AboutMe.html <A NAME = friends >My friends</a> <P> Abigail<BR> Tanisha<BR> Justin<BR> </P> Extension Lesson: Anchors Reading 167

54 Introduction to Computing Step 2: Reference the Anchor in a Link To link to a specific anchor, use the same tag as a regular link, but specify that the tag is looking for an anchor by using the # sign. If you want to provide a link at the top of a long document that jumps to a specified anchor farther down in the same document: <A HREF = "#anchorname > link text </A> If you want to provide a link to another page, but you want it to open at a specific anchor point instead of at the top of the page: <A HREF = document.html#anchorname > link text </A> Example To provide a link at the top of the AboutMe.html document to the friends anchor: <A HREF = #friends > See the cool people I hang out with! </A> To provide a link on main.html to the friends anchor in AboutMe.html: <A HREF = AboutMe.html#friends > See my friends! </A> Review Questions 1. Why would you use anchors in a Web page? 2. Describe what a link to an anchor (<A HREF = #anchorname >link</a>) opens in a Web browser. 3. Can you only use an anchor in the same page as the link, or can you link to an anchor on an external page? 4. You can assume that there is a tag in a Web page that creates an anchor called my pets <A NAME = my pets > Create the tag to create a link that says read about my pets that will jump to the my pets anchor when clicked. 168 Web Design Module Extension Lesson: Anchors Reading

55 Anchors: IN-CLASS ACTIVITIES Creating Internal Anchors Web Design Module Open the Web page tales.html which contains the text for two African folk tales. As you can see, this is a very long page with a lot of text. To get to the second folk tale, you must scroll way down the page. You are going to create 2 anchors at the beginning of each tale, and 2 links at the top of the page, so that the user can jump directly to either tale without scrolling. 1. Add an anchor at the beginning of the title, A Caterpillar s Voice and name it caterpillar. 2. Add an anchor at the beginning of the title, The Blacksmith s Dilemma and name it blacksmith. 3. Create a link at the top of the page that reads to the first tale. Make this link jump to the anchor named caterpillar. 4. Create a link at the top of the page that reads to the second tale. Make this link jump to the anchor named blacksmith. 5. Save the new document as mytales.html. Open the document in your Web browser and test it. Extension Lesson: Anchors Activities 169

56

57 Web Design Module Extension Lesson: Frames READING Overview This extension lesson briefly introduces the concept of frames in HTML. This is a difficult aspect of HTML and it has largely fallen out of favor among designers due to advancements in other areas of Web design that accomplish a similar result, such as Flash. However, they are still used in older pages, and students interested in Web design or related areas may find them useful. Estimated Time: 2 class periods Objectives By the end of this lesson, students should be able to: Identify the use of frames within Web pages viewed on the Web Discuss the reasons to use frames in a website, and pros and cons of this issue Create a simple frameset in HTML What is a Frame? Tables are one common way to format Web pages using HTML. Frames are another. HTML frames are used to break up the browser window into a number of sub-windows called frames. Each frame is a separate HTML file. The frameset is the HTML file that displays the separate frames on one screen. The Web page below consists of two separate frames, a left and a right. The left frame contains menu.html and the right frame contains homepage.html. The frames are displayed using the frames.html frameset. menu.html homepage.html Extension Lesson: Frames Reading 171

58 Introduction to Computing <FRAMESET> Tag Normal (no frames) Web pages use the <BODY> and </BODY> tags to enclose the HTML for the main part of your Web page. A Web page using frames will use the <FRAMESET> and </FRAMESET> tags instead. The <FRAMESET> tag defines the number of frames that will appear inside of the browser window, and specifies their location and size using two important attributes: COLS and ROWS. Columns The COLS attribute splits the browser window into frames vertically by specifying the column widths separated by commas. The frames are next to one another: Column width can be specified in three ways: 1. Width of columns in pixels: <FRAMESET COLS = 200, 400 > will produce 2 frames: the first 200 pixels wide, and the second 400 pixels wide. 2. Percentage of screen the column is to cover: <FRAMESET COLS = 25%, 75% > will produce 2 frames: the first will fill ¼ of the screen and the second will fill the remaining ¾ of the screen. 3. The * notation, which means cover the rest of the screen with this column : <FRAMESET COLS = 100, * > will produce 2 frames: the first 100 pixels wide, and the second will fill the remaining width of the screen. Rows The ROWS attribute splits the browser window into frames horizontally by specifying the row heights separated by commas. The frames are on top of one another: 172 Extension Lesson: Frames Reading

59 Web Design Module As with columns, rows can be specified as pixels, percentages, or using the special * notation. The first row height listed creates the top frame. Frames should be listed from top to bottom, then left to right. <FRAME> Tag The individual <FRAME> tags define the contents of each frame within the frameset. The <FRAME> tag has no corresponding ending tag. Required attributes The SRC attribute determines what is displayed within the frame. Usually, this is an HTML page, but it can also be anything else a browser can read (such as a GIF or JPEG). The NAME attribute names the frame. It is useful to give each frame a name so that you can refer to it later and change its contents. <FRAME SRC = page name.html NAME = page one > Optional attributes NORESIZE By default, the user can resize the individual frames shown in the browser window. Setting the NORESIZE=no attribute informs the browser that a particular frame should not be resizable. SCROLLING By default, the browser will display scroll bars on a frame if they are needed (when the frame s contents are too large for the frame). By setting SCROLLING = yes, you force the browser to always display scroll bars. By setting SCROLLING = no, you force the browser to never display scrollbars. MARGINHEIGHT This attribute, used together with MARGINWIDTH, can be used to specify how much space (in pixels) exists between the frame contents and the frame itself, e.g. MARGINWIDTH = 5. MARGINWIDTH This attribute, used together with MARGINHEIGHT, can be used to specify how much space exists between the frame contents and the frame itself, e.g. MARGINHEIGHT = 5. FRAMEBORDER By default, the frameset will show a border. This attribute is used to control whether or not a border is displayed around the frame, e.g. FRAMEBORDER = no. Extension Lesson: Frames Reading 173

60 Introduction to Computing Accounting For Browsers That Do Not Display Frames Browsers which do not display frames will ignore the HTML code within the <FRAMESET> and </FRAMESET> tags, and instead display anything listed between the <NOFRAMES> and </NOFRAMES> tags. You can list any legal HTML including a <BODY> and </BODY> tag between the <NOFRAMES> and </NOFRAMES> tags. Debugging With Frames Unfortunately, the Netscape browser will not reload the frameset if you use the reload button. This means that if you change your frameset file, save the file, and hit the reload button, nothing will happen. In order to make the browser reload your file, you need to close the browser window and reopen the page. Review Questions Use the following HTML code to answer questions 1-3: <FRAMESET COLS = 25%, * > 1. How many frames are produced? 2. Are they next to each other, or on top of one another? 3. What are their measurements? 4. Why would you choose to use frames in your website? 174 Extension Lesson: Frames Reading

61 Web Design Module Frames: IN-CLASS ACTIVITIES Creating A Frameset Your teacher will provide you with two Web pages: title.html and body.html. Open both documents in your browser and check out the contents of each. You will be creating a frameset named index.html that displays both of these pages. title.html is a Web page that will become the title of the frameset page you will create. This page displays the title as a header that reads Bermuda History: A Timeline of Events During the 1800 s. This will go on the top of the frameset screen. body.html is a Web page that will become the body of the frameset page you will create. This page contains a timeline. It will go on the bottom of the frameset screen. 1. Open a new NotePad document. Create a new HTML document that is named index.html and save it in the same location as the documents listed above. 2. Use the <FRAMESET> tag to create a frameset in the page. The frameset should divide the Web page into two rows. The first row should cover the top 110 pixels of the screen, and the second row should cover the rest of the screen below. <FRAMESET ROWS = 110, * > 3. Use the <FRAME> tag to define the contents of each frame. Remember, the format for the <FRAME> tag is: <FRAME SRC = page name.html NAME = page one > Recreate the following format: index.html 4. Save index.html and open it up in your web browser to test it. 175 Extension Lesson: Frames Activities

62

63 Web Design Module Extension Lesson: Posting Pages Overview This lesson introduces the mechanics behind actually making an HTML document available on the Internet. Estimated Time: 1 class period Objectives By the end of this lesson, students should be able to: Explain what it means to post a Web page Identify a few ways to post a document to a Web server What It Means to Post a Page Up until now, students have been viewing their own Web pages from the computer that it is located on. The pages you view on the Internet are available to everyone on the WWW because they are housed on a special computer called a server. A server allows access to other computers connected to the Internet. A completed Web page or site can be copied onto a server in order for everyone around the world with access to the Internet can view it. In order to post pages you need to have access to a server, which means you have to know the host name of the server, and the password. Many schools have a server that may provide space to students or teachers. See the technical support staff for more information about host names and passwords. Even if you do not have access to a school server, there are organizations that provide server space to the public. Some are on a fee basis, and some provide space for free to educational organizations. This use of space is called Web page hosting. How to Post Pages Files are transferred (or uploaded) to the server using an FTP (File Transfer Protocol) program. To open a connection, you need to be online. You will be asked for the host name of the server that you want to connect to, and you will need to supply a password. Once you are connected, you will see the documents on your computer, and also the documents present on the server that you have connected to. You can then choose to download files (from the server to your computer) or upload files (from your computer to the server). 177 Extension Lesson: Posting Pages Activities