FOR EVALUATION USE ONLY

Transcription

1 INSTRUCTOR S EDITION Web Design with XHTML, HTML, and CSS Level 1

2 Web Design with XHTML, HTML, and CSS Level 1

3 Web Design with XHTML, HTML, and CSS: Level 1 Part Number: Course Edition: 1.0 NOTICES DISCLAIMER: While Element K Corporation takes care to ensure the accuracy and quality of these materials, we cannot guarantee their accuracy, and all materials are provided without any warranty whatsoever, including, but not limited to, the implied warranties of merchantability or fitness for a particular purpose. The name used in the data files for this course is that of a fictitious company. Any resemblance to current or future companies is purely coincidental. We do not believe we have used anyone s name in creating this course, but if we have, please notify us and we will change the name in the next revision of the course. Element K is an independent provider of integrated training solutions for individuals, businesses, educational institutions, and government agencies. Use of screenshots, photographs of another entity s products, or another entity s product name or service in this book is for editorial purposes only. No such use should be construed to imply sponsorship or endorsement of the book by, nor any affiliation of such entity with Element K. This courseware may contain links to sites on the Internet that are owned and operated by third parties (the External Sites ). Element K is not responsible for the availability of, or the content located on or through, any External Site. Please contact Element K if you have any concerns regarding such links or External Sites. TRADEMARK NOTICES Element K and the Element K logo are trademarks of Element K Corporation and its affiliates. Windows Internet Explorer 7.0 is a registered trademark of Microsoft Corporation in the U.S. and other countries; the Microsoft Corporation products and services discussed or described may be trademarks of Microsoft Corporation. All other product names and services used throughout this course may be common law or registered trademarks of their respective proprietors. Firefox 2 is a registered trademark of Mozilla in the U.S. and other countries; the Mozilla products and services discussed or described may be trademarks of Mozilla. All other product names and services used throughout this course may be common law or registered trademarks of their respective proprietors. Copyright 2008 Element K Corporation. All rights reserved. Screenshots used for illustrative purposes are the property of the software proprietor. This publication, or any part thereof, may not be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, storage in an information retrieval system, or otherwise, without express written permission of Element K, 500 Canal View Boulevard, Rochester, NY 14623, (585) , (800) Element K Courseware s World Wide Web site is located at This book conveys no rights in the software or other products about which it was written; all use or licensing of such software or other products is the responsibility of the user according to terms and conditions of the owner. Do not make illegal copies of books or software. If you believe that this book, related materials, or any other Element K materials are being reproduced or transmitted without permission, please call (800) ii

4 Web Design with XHTML, HTML, and CSS: Level 1 Lesson 1: Creating a Basic Web Page A. Introduction to Web Design and Development... 2 B. Create a Basic Page Structure... 8 Lesson 2: Structuring Content A. Create Headings and Horizontal Rules B. Control Text Flow C. Create Lists Lesson 3: Applying Styles Using CSS A. Format Text B. Format Lists C. Format Images D. Modify Page Background Lesson 4: Working with Tables A. Create a Table B. Modify the Table Structure C. Format the Table Lesson 5: Linking Web Pages A. Create Hypertext Links B. Create Image Links C. Create Links iii

5 D. Format Links Appendix A: XHTML Character Entities Appendix B: CSS Properties and Values Lesson Labs Glossary Index iv

6 About This Course While using the Internet, you have probably encountered various attractive and useful websites, and you may have formed your own opinions of their capabilities and limitations. However, merely using the Internet will not give you an understanding of how these sites are created. In this course, you will examine the basics of foundational web technology and create your own functional web pages using markup languages such as Hypertext Markup Language (HTML), Extensible Hypertext Markup Language (XHTML), and Cascading Style Sheets (CSS). You have surfed the Internet and now you have an interest in creating web pages. HTML and XHTML are some of the most integral and foundational technologies that you will need to transition from the role of a web surfer to the role of a web designer. Whether you are interested in working on a small personal project or in eventually developing large web sites in a professional environment, you will need skills in HTML or XHTML to make it happen and this course will help you. Course Description Target Student is intended for students who are interested in creating web pages and web sites using popular web publishing technologies. Students who want to learn web design for their personal use or for business related purposes will benefit equally. Course Prerequisites You should be familiar with using personal computers with a mouse and keyboard and possess basic typing skills. You should be comfortable in the Windows environment and be able to use Windows to manage information on your computer. Specifically, you should be able to launch and close programs; navigate to information stored on the computer; and manage files and folders. Familiarity with Internet Explorer 7 and Firefox would be an advantage. v

7 How to Use This Book As a Learning Guide Each lesson covers one broad topic or set of related topics. Lessons are arranged in order of increasing proficiency with Web Design with XHTML, HTML, and CSS; skills you acquire in one lesson are used and developed in subsequent lessons. For this reason, you should work through the lessons in sequence. We organized each lesson into results-oriented topics. Topics include all the relevant and supporting information you need to master Web Design with XHTML, HTML, and CSS, and activities allow you to apply this information to practical hands-on examples. You get to try out each new skill on a specially prepared sample file. This saves you typing time and allows you to concentrate on the skill at hand. Through the use of sample files, hands-on activities, illustrations that give you feedback at crucial steps, and supporting background information, this book provides you with the foundation and structure to learn Web Design with XHTML, HTML, and CSS quickly and easily. As a Review Tool Any method of instruction is only as effective as the time and effort you are willing to invest in it. In addition, some of the information that you learn in class may not be important to you immediately, but it may become important later on. For this reason, we encourage you to spend some time reviewing the topics and activities after the course. For additional challenge when reviewing activities, try the What You Do column before looking at the How You Do It column. As a Reference The organization and layout of the book make it easy to use as a learning tool and as an afterclass reference. You can use this book as a first source for definitions of terms, background information on given topics, and summaries of procedures. vi Introduction

8 Course Icons Icon Description A Caution Note makes students aware of potential negative consequences of an action, setting, or decision that are not easily known. Display Slide provides a prompt to the instructor to display a specific slide. Display Slides are included in the Instructor Guide only. An Instructor Note is a comment to the instructor regarding delivery, classroom strategy, classroom tools, exceptions, and other special considerations. Instructor Notes are included in the Instructor Guide only. Notes Page indicates a page that has been left intentionally blank for students to write on. A Student Note provides additional information, guidance, or hints about a topic or task. A Version Note indicates information necessary for a specific version of software. Course Objectives In this course, you will create and design web pages with text, graphics, and data tables. You will then link these web pages to enable navigation between these web pages. You will: create a basic web page. structure the content on your web page. apply styles to the page elements. create, modify, and format a table. link web pages. Introduction vii

9 Course Requirements Hardware An Intel Pentium 4, Intel Centrino, Intel Xeon, or Intel Core Duo (or compatible) processor. 256 MB of RAM (512 MB recommended). 1.8 GB of available hard-disk space (additional free space required during installation). A color monitor with a 16-bit or greater video card. A monitor with 1024 x 768 monitor resolution. CD-ROM drive. Internet connection. Software Microsoft Internet Explorer 7.0. Mozilla Firefox 2.0 or above. Notepad or above. Class Setup 1. Install Windows XP Professional on the C drive using the following parameters. a. Accept the license agreement. b. Create a4gbpartition on the C drive. c. Format the C partition to NTFS. d. Select the appropriate regional and language settings. e. Enter the appropriate name and organization for your environment. f. Enter the product key. g. For each student computer, configure the settings. 1. Name of computer: Computer# (where # is a unique integer representing the student computer). 2. Administrator password: password. 3. Select your time zone. 4. Select the Typical network configuration. 2. Install Service Pack 2 for Windows XP. 3. Download and install Windows Internet Explorer 7 or Mozilla Firefox 2.0 or above. a. Windows Internet Explorer 7 can be downloaded at windows/downloads/ie/getitnow.mspx?wt_svl=20510a&mg_id=20510b. b. Mozilla Firefox 2.0 or above can be downloaded at firefox/. 4. Display the file extensions of your documents. a. Choose Start All Programs Accessories Windows Explorer. b. In Windows Explorer, choose Tools Folder Options. viii Introduction

10 c. Select the View tab and uncheck the Hide extensions for known file types check box. 5. Install Notepad a. Open in Internet Explorer. b. Click the Download link. c. Under Binary files heading, click the Download Notepad++ executable files link. d. In the SourceForge.net window, expand npp 4.6 bin. e. Click the npp.4.6 Installer.exe link. f. If you experience problems with the download, click the this direct link link. g. In the File Download Security Warning dialog box, click Run. h. In the Internet Explorer-Security Warning dialog box, click Run. i. In the Installer Language dialog box, verify if English is selected and click OK. j. In the Notepad++v.6 setup dialog box, click Next. k. In the License Agreement dialog box, click I agree. l. In the Choose Install Location dialog box, click Browse. m. In the Browse For Folder dialog box, click Make New Folder, name it as Notepad++ and then click OK. n. Click Next. o. In the Choose Components dialog box, check the As default html viewer check box. p. Click Install. q. Click Finish. 6. On the course CD-ROM, run the dd.exe self-extracting file located within. This will install a folder named Data on your C drive. This folder contains all the data files that you will use to complete this course. Solution files are also provided in this folder. These files may help you find a possible solution if you are unable to proceed at any point during the course. If you would like to view the final output or solution of an activity, navigate to the respective lesson\solution folder. List of Additional Files Printed with each activity is a list of files students open to complete that activity. Many activities also require additional files that students do not open, but are needed to support the file(s) students are working with. These supporting files are included with the student data files on the course CD-ROM or data disk. Do not delete these files. Introduction ix

11

12 1 Creating a Basic Web Page Lesson Time: 1 hour(s) Lesson Objectives: In this lesson, you will create a basic web page. You will: Describe the basics of web design and development. Create a basic page structure. Introduction You have viewed web pages while accessing the Internet. In order to create a basic web page or more complex pages similar to those that you have already seen while surfing the Internet, you will need to know a coding language. In this lesson, you will use Extensible Hypertext Markup Language (XHTML) 1.0 to create a basic web page with text and graphics. While accessing a website, users can become frustrated when the information is lost because the content can t be viewed or part of a site does not function correctly. To ensure that users have a satisfying experience, you need to create pages that appeal to the users needs and sensibilities, as well as function properly.

13 The World Wide Web TOPIC A Introduction to Web Design and Development You have accessed the Internet and viewed web pages. Now you are keen to know about how the Internet works and how web pages are developed. You will define and describe the Internet and its components. You will also identify a markup language and describe its role in the creation of web pages. For creating and managing a website, the knowledge of the Internet and the related technologies and concepts is essential. This will help you in enhancing the overall appeal of your website and make it user friendly as well as system friendly. The World Wide Web The World Wide Web (WWW), or simply the Web is a part of the Internet that stores and connects an indescribably large quantity of hypertext multimedia documents called web pages. Using a software application called the web browser, you can access, view and interact with the contents of these web pages. Figure 1-1: A sample web browser and web pages. 2 Lesson 1: Creating a Basic Web Page

14 The Process of Retrieving Web Pages The process of retrieving web pages consists of the following steps: 1. When you enter a web address into the address bar of your browser, your computer makes a request to a remote computer. This request is called an HTTP request. The remote computer that stores and processes the web pages is called a web server. 2. The web server receives the HTTP request from your browser, processes any scripts that may be found within the requested file, and then sends the file encoded with a markup language to your browser. 3. The browser then displays what it interprets onyour computer screen. Markup Languages Definition: A markup language is a set of symbols that allow you to render text on a browser or in print. The symbols, usually known as tags, are separated from the content by their surrounding angular brackets. Markup languages also enable you to render graphics, mathematical symbols, and even musical notations apart from text. Some of the well known and widely used markup languages include HTML, XHTML, MathML, and MusicXML. Example: Types of Markup Languages Some of the popular markup languages used to create documents for the web are HTML, XML, XHTML, and SGML. Markup Language Standard Generalized Markup Language (SGML) HyperText Markup Language (HTML) Description SGML was developed in the 1960s to define the syntax of a markup language. A markup language defined by SGML is called as SGML application. HTML is defined by SGML. The term HyperText is used because HTML files enable navigation from one web page to another using links. It was invented by Tim Berners-Lee in 1989 as a publishing language of the web. Markup Languages Lesson 1: Creating a Basic Web Page 3

15 Elements Markup Language Extensible Markup Language (XML) Extensible HyperText Markup Language (XHTML) Description XML began in the mid 1990s as a subset of SGML and is used to define the syntax of a markup language. It is extensible in the sense it allows the developers to create and define elements. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, XHTML is a combination of XML and HTML inheriting the advantages of both these languages. The HyperText Markup Language (HTML) HTML can be used to create basic web pages consisting of text, graphics, and links as well as advanced, dynamic web pages with animated content and interactive features. HTML is lenient toward errors such as mismatched or incomplete markup. Moreover, HTML was intended to deal with the structure and the content of any web page. Style languages such as CSS were developed to deal with the presentation aspect. Yet, HTML is used to control the presentation as well. For these reasons, HTML is known to be a flexible markup language. The Extensible HyperText Markup Language (XHTML) Since most browsers are lenient in rendering HTML, HTML allows you to create documents without strictly following the syntax rules. This leniency may result in inconsistent display of content across browsers. While HTML is based on SGML, XHTML is based on XML, which is restrictive and stricter than SGML. XHTML is, therefore, the best option for creating web sites that work well with today s browsers and alternate devices such as PDAs and mobiles. In XHTML, you are required to follow strict syntax rules so that your documents are error free and well formed. Elements In HTML and XHTML, elements are a set of instructions that describe the structure and content of a web page. These instructions are applied to the content of a web page through the use of tags. Elements can be either empty or container elements. A container element contains the data that is intended to be affected by that element. It consists of opening and closing tags. 4 Lesson 1: Creating a Basic Web Page

16 Figure 1-2: Container and empty elements. Tags Tags are indicators used to identify the type of a particular content. For example, enclosing text within the <h1> </h1> tags indicates that the text written inside these tags is a heading. Figure 1-3: The <h1> tag. Syntax for Tags The general syntax of an element containing tags is <tag>content</tag>. In case of an empty element, it is <tag/>. Attributes Definition: An attribute is a part of an XHTML element that modifies the characteristics of that element. Attributes are always included in the opening tag of a container element and they use a name="value" syntax. Most XHTML elements have a defined set of attributes that you can modify to suit your needs. Example: For example, the align attribute with center as the value specifies that the heading has to be positioned at the center of the web page. Tags Attributes Lesson 1: Creating a Basic Web Page 5

17 6 Lesson 1: Creating a Basic Web Page

18 ACTIVITY 1-1 Introducing Web Design and Development Scenario: You have decided to create your website and post it in the Internet. You would now like to explore the Internet and its components. You will define a markup language and its elements used in creating websites. 1. Identify the correct syntax of an XHTML attribute. a) name=value b) name: value c) name= value d) name: value 2. Which of the following XHTML elements are empty elements? a) <p>text</p> b) <br/> c) <title>title</title> d) <h6>heading</h6> e) <hr/> 3. Which markup language is used to define the syntax of a markup language? a) HTML b) SGML c) XHTML d) MathML 4. The remote computer that stores and processes the web pages is called a a) web server b) browser c) World Wide Web (WWW) d) the Internet Lesson 1: Creating a Basic Web Page 7

19 The Global Structure TOPIC B Create a Basic Page Structure You have learned about the Internet and its components. You have also defined a markup language and identified its role in creating a web page. You now intend to create a web page on your own. In this topic, you will use XHTML 1.0 to create a web page. To display a web page in your browser, you need to create a basic XHTML document with the required tags and other elements. The Global Structure The global structure is the overall structure of an XHTML document, which consists of the elements required to display a web page. Element DTD Namespace <head></head> <title></title> <body></body> <p></p> </html> Description Figure 1-4: The global structure of an XHTML document. The DTD is used to determine the elements and attributes allowed in an XHTML document. The namespace declaration informs the browser about the language used. The head section that contains the information such as the title of the web page, character set, and the style sheet of the document. The title of the web page. The body section that consists of the elements to be displayed on a web page. A paragraph containing some text to be displayed. The closing HTML tag. 8 Lesson 1: Creating a Basic Web Page

20 W3C The World Wide Web Consortium (W3C) is an international association, which aims to develop and regulate standards for HTML, XML, and other Internet technologies. These standards are known as W3C recommendations. XHTML and CSS are such recommendations that seek to improve accessibility, and device independence. Device independence implies the fact that the web pages are rendered uniformly in all the devices including the browser, PDAs, and mobiles. Document Type Definition Definition: Document Type Definition (DTD) is an XHTML element used to determine the elements, attributes, and character entities of a document. It is also used to determine the structure of the document. The DTD should be the first line of an HTML or an XHTML document. A DTD can either be strict or flexible depending on the declaration given in your XHTML document. Example: XHTML Namespace In order to conform to XHTML standards, you have to include the namespace in the opening <html>tag. The namespace is declared after the DOCTYPE declaration and is mainly used to inform the browser about the language used. The following code, <html xmlns= " xml:lang="en"> indicates that the language used is English. Character Sets A character set is a collection of characters used together for a particular function. One of the well known character set, ASCII consists of letters of the English alphabet. Unicode is a widely used character set that consists of 10,000 characters present in almost all the written languages available. The character set is declared inside the <meta> tag as seen in the code below: <meta http-equiv="content-type" content="text/html; charset=utf-8"> Document Type Definition Lesson 1: Creating a Basic Web Page 9

21 Types of DTD XHTML has three document types or DOCTYPES as they are commonly known. DOCTYPE XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset Declaration XHTML 1.0 Strict is used when the content and its structure are altogether separated from the presentational aspects. <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " XHTML 1.0 Transitional is similar to XHTML 1.0 Strict, but it allows you to combine presentational aspects with the structure and the content. <! DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" " XHTML 1.0 Frameset is used when you need to divide the browser window into separate frames, each of which can display different web pages. <! DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset//EN" " Syntax Differences between XHTML and HTML The differences between XHTML and HTML are mainly syntax-based rules. These rules are essential to create a valid and a well-formed XHTML document. Rule In XHTML, doctype is required. All tags and attributes must be written in lower case. All elements must be properly closed. The attribute values must always be quoted. Example <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " /DTD/xhtml1-strict.dtd"> <p>this is a paragraph.</p> Container elements must be closed with a corresponding closing tag. <title>citizens Information Center: You have the right to know</title> Empty elements must have a forward slash before the closing bracket. <br/> <img src="url" alt="text"/> All the elements must be properly nested. <p><em>this is an emphasized word.</em></p> 10 Lesson 1: Creating a Basic Web Page

22 Rule Attribute values must not be minimized. In XHTML, certain elements are deprecated. The structure and the content must be separated from the presentation. Comments Example <input checked="checked"> The tags and attributes that were allowed in HTML are no longer supported in XHTML. <p align="center"> The stylesheet or CSS must be used to deal with the presentation aspect of a web page. <style type="text/css"> p{text-align:center} </style> Comments are generally used to describe code segments in an XHTML document. They are not displayed in the browsers. You can use the comments tag to add reference notes to yourself or to another developer on your plans for a section of code, or to add information such as the developer s name and the date the page was created. Comments can also be used as a labeling mechanism for quick and easy identification of code segments. Figure 1-5: Comments in an XHTML document. Images Images have an attractive and functional role on your web pages. They can be used to display your company s logo, or as links or as bullets for a list. Compared to the file size of an XHTML file, images are typically large and the purpose of a web image format is to compress the files into smaller file sizes so that they can be easily downloaded on the web. The three image formats used for the web are GIF, JPEG, and PNG. Comments Lesson 1: Creating a Basic Web Page 11

23 Web Image Format GIF (Graphic Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphic) Alt Text Description Creates large file sizes, but it decompresses quickly. Utilizes 8-bit color with a maximum of 256 colors. The image quality doesn t degrade as the amount of file compression increases. Good for line art, graphics with large areas of solid color, and pictures with few colors. Variations include interlaced, non-interlaced, transparent, and animated. Files of this type are saved with.gif extension. Small files, but slow decompression. Utilizes 24-bit color with a maximum of over 16 million colors. The image quality degrades as the amount of file compression increases. Good for photographs; images are more realistic than GIFs. Variations include regular and progressive. Files of this type are saved with.jpg extension. Approved as a W3C recommendation in Uses a bitmapped image format. Employs lossless image compression. Files of this type are saved with.png extension. Colors are displayed more accurately. Alt text or alternative text is used to render textual information about an image when the browser is unable to display it. Alt text is declared as an attribute to the <img> tag. It is, therefore, a brief description of the corresponding image. Alt text is different from tooltip, which is a supplementary information for a displayed image. Internet Explorer, however, displays alt text as a tooltip also. 12 Lesson 1: Creating a Basic Web Page

24 Absolute and Relative File Paths The <img> tag requires the src attribute, which specifies the file path to an image. A file path can either be absolute or relative. An absolute file path consists of the complete address of the location of a file, while a relative file path consists of a specific address including the current location of the file and the file name only. The relative file path is used to specify the source of an image. The file path is also used to specify the URL for a link. An absolute URL includes the protocol and the domain name, and is used to link files located in an external website. A relative URL is used to link files located within the same website and the file name is given as the URL. Figure 1-6: Absolute and relative URLs. How to Create a Basic Page Structure Procedure Reference: Create a Basic Page Structure To create a basic document structure: 1. Open a blank document in the notepad application. 2. Click in the first line and enter the document type declaration. 1. Type <!DOCTYPE html. 2. Press Enter and type PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" type//en". 3. Press Enter and type " 3. Press Enter and type <html xmlns=" xml:lang="en"> to declare the namespace. 4. Press Enter and type <head> to enter the head section of your document. 5. Press Enter and type </head> to close the head section of your document. 6. Click after the opening <head> tag and press Enter. Absolute and Relative File Paths Lesson 1: Creating a Basic Web Page 13

25 7. Add the tile of your web page using the syntax: <title>web page title </title>. 8. Click after the closing </head> tag and press Enter. 9. Type <body> to begin the body section of your document. 10. Press Enter and type </body> to close the body section of your document. 11. Press Enter and type </html> to end the document. Procedure Reference: Save and View the File To save and view the file: 1. Choose File Save as to open the Save As dialog box. 2. In the File name text box, type Index.html. 3. From the Save as type drop-down list, select All Files and click Save to save the document. 4. Open your browser and choose File Open. 5. In the Open dialog box, click Browse and navigate to the specific location and click Open and then click OK to display the web page in your browser. Procedure Reference: Add Text and Images To add text and images: 1. Place the cursor after the opening <body> tag and press Enter. 2. Type <p> to add the opening paragraph tag. 3. Add the necessary content. 4. Type </p> to add the closing paragraph tag. 5. Click at the desired location, where you want to add an image. 6. Add the image using the syntax: <p><img src="file path" alt="text"</p>. 14 Lesson 1: Creating a Basic Web Page

26 ACTIVITY 1-2 Creating a Basic Document Structure Scenario: The Chermont community center has decided to create a website, to be titled Citizens Information Center, that will contain the information on Chermont, and also the latest updates on the news and events. Being a resident of Chermont, you volunteer to create the website using XHTML 1.0. You will create a basic page structure needed to display a web page in a browser. What You Do 1. Declare a document type definition and a namespace for your XHTML document. How You Do It a. Choose Start All Programs Notepad++ to open the Notepad++ folder. b. Within the Notepad++ folder, click the Notepad++ icon. c. On the first line of your document, click and type <!DOCTYPE html d. Press Enter and type PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" e. Press Enter and type " /xhtml1-strict.dtd"> and press Enter. The character identifies a line that is too long to fit in the printed book. You should enter it as one line in your editor. f. Type <html xmlns= " xml:lang="en"> to provide the namespace declaration for your XHTML document. Lesson 1: Creating a Basic Web Page 15

27 2. Enter the head section of your document. 3. Enter the body section of your document. a. Press Enter and type <head> b. Press Enter and type <meta http-equiv="content-type" content="text\html; charset= utf-8" /> and press Enter. c. Press Enter and type <title>citizens Information Center</title> to enter the title of your web page and press Enter. d. Press Enter and type </head> to close the head section of your document. a. Press Enter and type <body> b. Press Enter and type </body> to close the body section of your document. c. Press Enter and type </html> to close the XHTML document. 4. Save the file. a. In the Notepad++ window, choose File Save As to open the Save As dialog box. b. In the Save As dialog box, navigate to C:\085960Data\Creating a Basic Web Page\Citizens Information Center. c. In the File name text box, select the text and type index.html d. Verify whether the All types (* *) option is selected in the Save as type: drop-down list and click Save to save the file. 16 Lesson 1: Creating a Basic Web Page

28 5. View the file in Internet Explorer. a. Choose Start Internet Explorer to display the Windows Internet Explorer window. b. Choose Tools Menu Bar to display the menu bar. c. In the Windows Internet Explorer window, choose File Open to display the Open dialog box. d. In the Open dialog box, click Browse to open the Windows Internet Explorer dialog box. e. Navigate to the C:\085960Data\Creating a Basic Web Page\Citizens Information Center folder. f. Select the index.html and click Open. g. Click OK to display the web page in your browser. h. Verify whether the title of your web page is displayed in the title bar of the window. 6. View the file in Firefox. a. Launch Firefox and choose File Open File to display the Open File dialog box. b. In the Open File dialog box, navigate to the C:\085960Data\Creating a Basic Web Page\Citizens Information Center folder. c. Select index.html and click Open. d. Verify whether the title of your web page is displayed in the title bar of the window. Lesson 1: Creating a Basic Web Page 17

29 In Notepad++, choose View Wrap to wrap the text to the window. ACTIVITY 1-3 Adding Text and Images Data Files: index.html Before You Begin: 1. Both your browser and index.html should be opened. 2. From the C:\085960Data\Creating a Basic Web Page folder, open the Introduction.txt file. 3. A folder named Graphics consisting of the images you need for this website, has been created. Scenario: You are now ready to start working on the home page of the Citizens Information Center. You want to add some introductory text about Chermont and an image of the community banner. You also decide to label different sections of the code, so that you can easily identify or locate a specific section of code in future. What You Do 1. Create a paragraph about your community and display it on your web page. How You Do It a. Click after the <body> tag and press Enter. b. Type <p> to insert a new paragraph. c. Open the Introduction.txt file and select the paragraph. d. Choose Edit Copy and switch to the index.html document. e. Choose Edit Paste and type </p> to close the paragraph. f. Choose File Save and switch to the Internet Explorer window. g. In the Windows Internet Explorer window, click the Refresh (F5) button to display the paragraph. The Go button and the Refresh button are combined in IE 7. As soon as a web page loads, the Refresh button replaces the Go button, which is present when you type the URL of a website in the Address bar. 18 Lesson 1: Creating a Basic Web Page

30 2. Embed the community s banner at the top of the web page. 3. Insert comments for the footer section of the web page. a. Switch to the index.html file and click after the <body> tag and press Enter. b. Type <p><img src= "graphics/banner.gif" alt="you have the right to know" /></p> to insert the banner on your web page. c. Choose File Save and switch to the Internet Explorer window. d. In the Windows Internet Explorer window, click the Refresh (F5) button to display the image. a. Switch to index.html and click after the paragraph containing text and press Enter. b. Type <!--Page Footer--> to label the section as page footer. c. Press Enter and type <!--Navigation Bar--> d. Click Save and switch to the Internet Explorer window. e. In the Windows Internet Explorer window, click the Refresh (F5) button to check that the comments you added are not displayed in the browser. f. Switch to the Notepad++ window. g. Choose File Close to close the index.html file. Lesson 1: Creating a Basic Web Page 19

31 Lesson 1 Follow-up In this topic, you learned the essentials of web design and development, that include the Internet, its components, markup languages, and their role in creating web pages. The knowledge of these are necessary for accessing, and creating a website. You also learned to create a basic web page with text and graphics and display it in the browser. 1. Which DTD would you prefer to use for your XHTML document and why? Answers may vary. 2. Where and when would you use comments in your XHTML document? Answers may vary. 20 Lesson 1: Creating a Basic Web Page

32 2 Structuring Content Lesson Time: 1 hour(s) Lesson Objectives: In this lesson, you will structure the content on your web page. You will: Create headings and horizontal rules. Control text flow. Create lists. Introduction You have created a web page with text and graphics. You now intend to organize the page in such a way that each section is distinct from the other, making your content more meaningful and readable. In this lesson, you will use the structuring elements of XHTML 1.0 to categorize your content. A crowded and a disordered web page may discourage the potential users from accessing your website. The XHTML elements that are presented in this lesson give you a host of structuring options that will allow you to create the type of professional web pages you typically see while surfing the web. These options include headings, horizontal rules, line breaks, and lists, which allow you to organize your content in a readable format.

33 Headings TOPIC A Create Headings and Horizontal Rules You have created a basic document structure consisting of some text and graphics. You would now like to arrange the contents in such a way that each section is distinguishable from the other sections. In this topic, you will create headings and insert horizontal rules to divide one section from another. Presenting a lot of content alone without a good design wouldn t fetch many visitors for your website. You need to make it more readable by organizing the content into different and appropriate individual sections in order to make it easier for the visitor to read your content. Headings Definition: A heading is a line of text used to indicate the nature of information given in the subsequent paragraph. In XHTML, there are six levels of headings, from <h1>, which is used to denote the most important headings to <h6>, which is used for the least important headings. A browser will render the more important headings using a larger font size, while the less important headings will be in a smaller font size. Example: 22 Lesson 2: Structuring Content

34 Horizontal Rules A horizontal rule is a long line or bar used to visually divide sections of a web page. You can specify the width, height, and the position of a horizontal rule on a web page. Figure 2-1: A horizontal rule dividing a page into two sections. How to Create Headings and Horizontal Rules Procedure Reference: Create Headings To create headings: 1. Determine the location for your heading. 2. Determine which level of heading you would like to use. This decision can be based either on the desired font size or on the hierarchy of importance. 3. Enter the opening heading tag <hn> for the chosen heading level, where n is the number denoting the level of the heading. 4. After the opening heading tag, enter the required text. 5. Following the text, enter the closing tag </hn> that corresponds with the heading level that you entered for your opening tag. 6. Save the file and test it in the browser. Procedure Reference: Insert Horizontal Rules To insert horizontal rules: 1. Determine the location to insert a horizontal rule. 2. In the chosen location, add the <hr/> tag for every horizontal rule that you want to create. 3. Save the file and test your work in the browser. Horizontal Rules Lesson 2: Structuring Content 23

35 Students may also test the activity in Firefox browser. ACTIVITY 2-1 Creating Headings and Horizontal Rules Data Files: index.html Before You Begin: 1. From the C:\085960\Structuring Content\Citizens Information Center folder, open the index.html file. 2. Open Internet Explorer displaying the home page. Scenario: You have created a web page with text and images. You will now create headings for each paragraph indicating the nature of the information given in each paragraph. You will also insert a horizontal rule to separate the main part of the web page from the footer. What You Do 1. Create a heading for the paragraph on your community. 2. Insert a horizontal rule to separate the page footer from the rest of the page. How You Do It a. In the Notepad++ window, click in the blank line after <p> Home Information Center Newsroom Contact Us </p> and type <h3>our Community</h3> to create a heading for the paragraph. b. Click in the blank line after offers on-site convention space.</p> and type <h3> Youngsters Excel at Graser County Fair </h3> c. Save the file and switch to the browser. d. Click the Refresh (F5) button to display the headings. a. Switch to the Notepad++ window and click after alt="click Here" /></p> and press Enter. b. Type <hr/> to insert a horizontal rule. c. Save the file and switch to the browser. d. Click the Refresh (F5) button to display the horizontal rule. 24 Lesson 2: Structuring Content

36 TOPIC B Control Text Flow You have divided blocks of text from each other and you feel the need to set some of the text within a block of text apart from the rest. You also intend to space out a few elements across the page contrary to what the browser does by default. In this topic, you will create and prevent line breaks, indent a particular block of text, and preserve the spacing and formatting you have done to a particular string of text. Imagine that you have come up with a beautiful slogan for your company and you would like to display it on your website as a stand-alone text at the center of the home page. Using paragraphs or the headings is not sufficient in this case. In order to display the text according to your intention, you need to control the text flow by coding it accordingly. Line Breaks When you use the <p> tag to make a string of text appear on a different line, it leaves a blank space above and below the block of text. Using the <br/> tag, you can break a line of text, just where you want it to, and start a new one without any space between the two lines. A <br/> tag is an empty element and has to be enclosed inside a <p> tag or other block-level tags. Figure 2-2: A line break to insert a break without a space between lines. Most often, decreasing the size of your browser window may create unwanted line breaks. You can prevent such line breaks by using the character entity. Line Breaks Lesson 2: Structuring Content 25

37 Character Entities Character Entities XHTML character entities are a set of symbols that allow you to display a greater range of characters on your web pages than what is available on the keyboard. They also allow you to display reserved characters that the browser would normally interpret as XHTML. They are defined by either character or numeric codes. Figure 2-3: XHTML character entities. <blockquote> Tags The <blockquote> tag is used to set apart a block of text from the surrounding content. It is normally used to display long citations and quotes. The text indents itself both on the left and the right side of a web page. <pre> Tags The <pre> tag is used to display the text exactly as you type it in your text editor. It is mainly used to preserve spacing and line breaks. The text within <pre> tags is rendered in monospace font by default. 26 Lesson 2: Structuring Content

38 How to Control Text Flow Procedure Reference: Create Line Breaks To create line breaks: 1. Identify the lines wherein you would want a line break. 2. Type <br/> in the determined locations. 3. Save the file and test it in the browser. Procedure Reference: Prevent Line Breaks To prevent line breaks: 1. Determine the string of text that you would like to prevent the browser from forcing a line break. 2. Type between the words to enter a non-breaking space. 3. Save the file and test it in the browser. Procedure Reference: Insert a Character Entity To insert a character entity: 1. Click before To educate and enable and type " to insert a quotation mark. 2. Click after enable and type " to close the quotation. 3. Save the file and switch to the browser. 4. Click the Refresh button to view the quotation marks. Procedure Reference: Indent a Block of Text To indent a block of text: 1. Determine the text you would like to indent. 2. Place the cursor before the text and type <blockquote>. 3. Place the cursor after the block of the text and type </blockquote> to end the quote. 4. Save the file and test it in the browser. Procedure Reference: Preserve Formatting To preserve formatting: 1. Type the text as you want it to be displayed in the browser. 2. Place the cursor before the text and type <pre>. 3. Place the cursor at the end of the text and type </pre>. 4. Save the file and test it in the browser. Lesson 2: Structuring Content 27

39 ACTIVITY 2-2 Controlling Text Flow Data Files: index.html Before You Begin: 1. Open both Internet Explorer and index.html. Scenario: You would like to separate the disclaimer note from the navigation bar in the page footer section of your web page. You intend to prevent the line breaks between the headings. You would also like to separate a word from the other in the navigation bar of the page footer. What You Do 1. Create a line break between the navigation bar and the disclaimer note. How You Do It a. In the Notepad++ window, click after the text Terms and Conditions. b. Type <br/> to insert a line break. c. Save the file and switch to Internet Explorer. d. Click the Refresh (F5) button to display the line break. e. Notice that the disclaimer note has come to the next line. 28 Lesson 2: Structuring Content

40 2. Prevent a line break between headings. 3. Insert a bullet entity to separate a word from the other in the navigation bar in the page footer section. Maximize the IE 7 window before you proceed. a. Resize the Internet Explorer window so that the heading Youngsters Excel at Graser County Fair breaks into two lines. b. Switch to the Notepad++ window, in the Youngsters Excel at Graser County Fair heading, click after the word at. c. Type and press Delete. d. Click after the word Graser, type and press Delete. e. Similarly, type between each word in the heading. f. Save the file and switch to Internet Explorer. g. Click the Refresh (F5) button to view the change. a. Switch to the Notepad++ window and click after <p> Careers and press the Spacebar once and then type to insert bullet characters. b. Similarly, insert bullet entities between Trademark and Copyright and Privacy Policy and Terms and Conditions. c. Save the file and switch to Internet Explorer. d. Click the Refresh (F5) button to display the bullet entities. Lesson 2: Structuring Content 29

41 ACTIVITY 2-3 Inserting <blockquote> and <pre> Tags Data Files: index.html Before You Begin: 1. Open both Internet Explorer and index.html. Scenario: You have come up with an interesting motto for your community and you would like to display it at the center of the web page. You also intend to display the motto in a unique font set apart from the rest of the content. What You Do How You Do It 1. Indent the motto of your community. a. In the Notepad++ window, click after Newsroom Contact Us </p> and press Enter. b. Type <blockquote>dedicated to Bringing People Together to Discuss Issues <br/> That are Important in Their Communities. c. Type </blockquote> to close the text. d. Save the file and switch to Internet Explorer. e. Click the Refresh (F5) button to view the change. 30 Lesson 2: Structuring Content

42 2. Preserve the spacing and line break of the motto. a. Switch to the Notepad++ window and click after the <blockquote> tag and type <pre> b. Click before the </blockquote> tag and type </pre> c. Click after Issues, press Shift and then click after <br/> tag. d. Press Delete to delete the <br/> tag and then press Enter. e. Save the file and switch to Internet Explorer. f. Click the Refresh (F5) button to view the change. Lesson 2: Structuring Content 31

43 TOPIC C Create Lists You have learned to assign headings to specific sections of your web page and control the text flow to create well-organized content. XHTML provides you with yet another method of organizing the content by displaying it as a numbered or bulleted list of items. In this topic, you will create ordered or unordered lists depending on the nature of the items to be listed. Lists are commonly used on web sites. A client may ask you to create a bulleted list of features for some of their products, or maybe, you need to create a numbered list to write down the required steps/procedure for filling out a product order form. By creating a list, you can organize your content in a coherent manner. Lists Lists are typically used to present information that can be grouped under a particular category or heading. On web pages, you can display three types of lists: bulleted, numbered, and definition. A bulleted list or an unordered list is used to list items that don t have to be in a particular order. Each list item begins with a bullet. Bullets are available in various shapes and you can also use an image as a bullet. A numbered list or an ordered list is used to list items in a sequential order. You can choose the type of numbering system Arabic numerals, Roman numerals, or English alphabets. A definition list is useful when you want to add more information to describe the list items. Such lists consist of a series of terms and their corresponding definitions. Syntax Table for Lists The following table lists the syntax to be used for each kind of list. List Type Ordered List Unordered List Definition List Description The tags used to represent an ordered list are <ol> </>ol and each item in the list is represented within <li> </li> tags. Unordered lists are represented with <ul> </ul> and each item is represented within <li> </li> tags. Definition lists are represented with <dl> </dl> tags. The term is written inside <dt> </dt> tags and the description is enclosed within <dd> </dd> tags. 32 Lesson 2: Structuring Content

44 How to Create Lists Procedure Reference: Create Lists To create lists: 1. Type the appropriate opening tag to create a new list. Begin an <ul> to create an unordered list. Type <ol> to create an ordered list. 2. Add the items between the opening <li> tag and the closing </li> tag. 3. Add the appropriate closing list tag. Type </ul> to close an unordered list. Type </ol> to close an ordered list. 4. Save your work and test it in the browser. Procedure Reference: Create a Definition List To create a definition list: 1. Type <dl> to begin a definition list. 2. Add the definition term between the <dt> and </dt> tags. 3. Add the description between the <dd> and </dd> tags. 4. Type </dl> to close a definition list. 5. Save your work and test it in the browser. Lesson 2: Structuring Content 33

45 A new web page titled Information Center has been created with the required information such as the Doctype, text, and image. ACTIVITY 2-4 Creating Lists Data Files: info-center.html Before You Begin: 1. From the C:\085960\Structuring Content\Citizens Information Center folder, open the info-center.html file in the Notepad++ window. 2. Open Internet Explorer displaying the Information Center web page. Scenario: You intend to have a web page, which provides detailed information on your community. You would like to list all the facilities provided in the community. You also plan to provide a list of major industries and service providers in your community along with a brief description of each. What You Do How You Do It 1. Create an unordered list. a. In the Notepad++ window, click after <h3>community Facilities</h3> and press Enter. b. Type <ul> to open an unordered list. c. Press Enter and type <li> Public Golf Clubs </li> to enter the first item in the list. d. Similarly, enter the rest of the items in the list. Open the Unordered List file and copy the contents to your info-center.html file. e. Click in the line after <li> Spa and Beauty Centers </li> and type </ul> to close the unordered list. f. Save the file and switch to Internet Explorer. g. Click the Refresh (F5) button to display the list. 34 Lesson 2: Structuring Content

46 2. Create a definition list. a. Switch to the Notepad++ window and click after <h3>major Service Providers of Our Community</h3> and press Enter. b. Type <dl> to open the definition list and press Enter. c. Type <dt>our Global Company</dt> to enter the first definition term and press Enter. d. Type <dd>our Global Company Inc. provides consulting services for organizations willing to tackle the change agents operating in their business arena.</dd> to enter the description. e. Similarly, enter the rest of the items in the list. Open the Definition List file and copy the contents to the info-center.html file. f. Click in the blank line after the last definition and type </dl> to close the definition list. g. Save the file and switch to Internet Explorer. h. Click the Refresh (F5) button to display the list. Scroll down to view the definition list. i. Close all open files. Lesson 2: Structuring Content 35

47 Lesson 2 Follow-up In this lesson, you learned to create headings, insert horizontal rules at appropriate places, control text flow using line breaks, create lists and thereby, structure the content. Structuring the content with these options makes your content look readable and orderly. 1. For which kind of information would you use lists? Answers may vary. 2. Where and when would you use horizontal rules on your web page? Answers may vary. 36 Lesson 2: Structuring Content

48 3 Applying Styles Using CSS Lesson Time: 2 hour(s) Lesson Objectives: In this lesson, you will apply styles to the page elements. You will: Format text using CSS. Format lists. Format images. Modify the page background. Introduction You added a good deal of content in the form of text and images to your pages that is formatted using the browser s default styles. Formatting the content is of foremost importance for your web page to get a professional look. In this lesson, you will apply styles. Placing text and graphics sequentially on a web page might not be enough to keep your users engaged. By customizing text and non-text elements such as images, you can greatly enhance the user s experience, thereby making your website more engaging and visually appealing.

49 Styles TOPIC A Format Text Text content without any kind of formatting will fail to convey the relative importance of the content on a web page. You have many options to format the text to suit your design requirements. In this topic, you will format text. While the browser s default formatting styles are generally relevant to their function on a page, they are often inappropriate for your particular design. Styles give you the flexibility to modify the appearance of text such as its size, font-face, and color so that it fits your design needs. Styles Definition: A style is a formatting rule that is used to change the appearance and position of an element on a web page. Styles define the font, colors, and layout of the web page. Styles can be applied to a web page element either through attributes or through style sheets. Example: Formatting in HTML In HTML, styles were applied to HTML elements through attributes coded within the HTML tags. Most of the HTML tags have particular attributes that are specific to them. These attributes control the appearance of the content on the web page. Deprecated Elements and Attributes In its earliest form, HTML was strictly a means to re-create simple hardcopy document components, such as paragraphs and tables. As time passed, authors found the need to increasingly enhance the presentation of their web documents; therefore, many elements and attributes were added to the HTML specification that allowed web authors to apply formatting to their documents. As the specification became cluttered with formatting elements, the group that governs HTML realized that there was a need to develop a separate formatting method. They 38 Lesson 3: Applying Styles Using CSS

50 responded to this need by deprecating many of the elements used for formatting in favor of Cascading Style Sheets (CSS). Deprecating an element or attribute is discouraging its use in favor of newer formatting practices. An item designated as being deprecated may eventually become obsolete. The reason for the deprecation of formatting in HTML is to get it back to its intended function document structure. Cascading Style Sheets Cascading Style Sheets (CSS) are a set of rules that define the appearance of a web page. Using CSS, you can modify a web page s appearance by changing the formatting of page elements. The main purpose of CSS is to separate the web page content and its presentation elements. Figure 3-1: A Cascading Style Sheet. Cascading Style Sheets are of three types: inline, embedded, and linked. Style Sheet Type Inline style sheet Embedded style sheet Linked style sheet Description Affects the XHTML element that it is directly inserted into. Controls the styles for the page on which it is embedded. It allows you to separate all your style information from the page structure (the elements that make up the XHTML document). Controls the design of multiple documents. This is done by linking the style sheet to multiple documents. Cascading Style Sheets Lesson 3: Applying Styles Using CSS 39

51 Selectors and Properties Selectors and Properties A style sheet rule consists of a selector and a declaration. Every style rule begins with a CSS selector that selects the element you want to style. Any valid XHTML element, such as body, p, or h3, can be a selector. A declaration applies the style to the selector. It consists of a property or series of properties and each property has an associated value. Properties are predefined terms that define the action taken on an element. For example, the font-size property defines the font size of the text. All properties have a value an exact specification of the property. For example, the fontsize property can have a value of 10pt. Figure 3-2: A style sheet rule. Example of Inline Styles Inline styles use the style attribute of XHTML to insert CSS styles directly in XHTML elements. In the following example, each element has an inline style: <body style="background-color: #ddd;"> <p style="font-variant: small-caps; font-size: 14px;"> Example of Embedded Style Sheets Embedded style sheets consist of a set of style sheet rules that declare how certain elements are rendered on a page or throughout a site. Embedded style sheets use the XHTML <style> element to contain its style sheet rules. The <style> element must be placed inside a document s head section (the <head> element). For example: <head> <style type="text/css"> body { background-color: #eee; font-size: 12px; } h1 { color: navy; } p { color: #333; } </style> </head> Style Sheet Precedence According to the W3C, the closer a style rule is defined to the element, the higher its priority. In other words, if you define a style in an embedded style sheet and then set an inline style, the inline style takes precedence as it is closer to the element. 40 Lesson 3: Applying Styles Using CSS

52 Grouping Properties A rule can have multiple properties there s no limit to the number of properties you can declare. For example, if you want all paragraphs to have navy blue text and a silver background, you can group the properties together within a rule by separating each property with a semicolon, as follows: p { color: blue; background-color: silver; } Grouping Selectors If you want the same styles to apply to more than one element, you can group selectors. By grouping multiple selectors into one rule, you can avoid redundant statements, making your style sheets more economical. For example, say you want two elements to share the same style characteristics. It would be a very laborious task to declare each style separately, as shown below: td { color: orange; } p { color: orange; } You can instead group all two selectors into one rule by separating each selector with a comma, as follows: td, p, { color: orange; } Classes A class is an attribute that you can apply to an XHTML element to define its category or type. A class is created so that you can format the elements in it using CSS. You can create a class by adding the class="classname" attribute to the element s XHTML tag. Figure 3-3: A class applied to a <p> tag. Example of a Class Let s say you wanted to designate that a particular paragraph is a legal disclaimer so that you can format it appropriately or otherwise treat it differently than standard text. The class= identifier in the opening <p> tag, shown in this example, creates the disclaimer class. <p class="disclaimer">while we take care to ensure the accuracy and quality of this Web site, we cannot guarantee the accuracy of the information presented herein.</p> Classes Lesson 3: Applying Styles Using CSS 41

53 Class Selectors Class Selectors A class selector is a type of CSS selector that you can use to apply CSS styles to a particular class of XHTML elements. The class identifies those elements that you want to format. The class selector, which is part of the style sheet, defines the way in which these elements are to be formatted. You can associate class selectors with a particular type of XHTML element or you can create independent class selectors, which you can use to apply similar formatting to differing XHTML elements. In your style sheet, you can create a class selector that is associated with a particular XHTML tag by listing the XHTML tag name, followed by a period, and then the class s name, with no spaces included. The declarations that form the remainder of your CSS rule follow that class selector. You can create independent selectors by listing a class s name preceded by a period. Again, your style declarations would follow. Figure 3-4: Example of class selectors. Example of a Class Selector Let s say you had a series of paragraphs, one of which you identified as a legal disclaimer with this tag: <p class="disclaimer">. Furthermore, let s say you also had one or more XHTML elements that you wanted to serve as warnings; some are paragraphs, others are table cell, heading, or other XHTML elements. To each of these, you assign the class= "warning" attribute. To format these elements, you could use CSS class selectors, as shown in this embedded style sheet example. <style type="text/css"> <!-- p.disclaimer { font-family: Times, serif; font-size: 6px; font-style: italic; }.warning { color: red; font-weight: bold; } --> </style> 42 Lesson 3: Applying Styles Using CSS

54 Text Properties There are several text properties that you can use to enhance the readability and appearance of your content. Property text-align vertical-align text-indent letter-spacing word-spacing line-height text-decoration text-transform Description Controls the horizontal alignment of text content. The text-align style property allows you to align text to the left, center, right, or justify text. Controls the vertical alignment of text content. Applies an indent of any specified length to the first line of text in a paragraph or other element containing text. Modifies the amount of space between the letters of any given text element. This is known as kerning. Modifies the amount of space between the words of any given text element. Controls the spacing between adjacent lines of text. This is known as leading. Creates underline, overline, and line-through effects on any given text element. Controls the casing of text; either uppercase, lowercase, or initial-capitalized letters. This property is especially powerful for enforcing a site s style guide in regard to text casing. Units of Measurement Many CSS properties accept numerical values. You need to specify a unit of measurement for these values. The following table lists the units of measurement in CSS. Unit of Measurement pixels (px) inches (in) centimeters (cm) millimeters (mm) points (pt) Description A standard screen measurement. One pixel equals one physical pixel on a computer screen, which varies with screen resolution. A standard English measurement. One inch is equal to 2.54 centimeters. A standard metric measurement. One centimeter is equal to almost 2/5 of an inch. A standard metric measurement. Ten millimeters are equal to one centimeter. A standard print measurement. One point is equal to 1/72 of an inch. In reality, point values are not this precise on the Web, and vary according to the font face in use. Lesson 3: Applying Styles Using CSS 43

55 Unit of Measurement picas (pc) Font Properties Description A standard print measurement. One pica is equal to 12 points. Font properties allow you to specify the font styles of the text. Browsers apply their own default fonts and font sizes. Using the font properties, you can override these default styles and control all aspects of your text design. Property font-family font-style font-variant font-weight font-size font How to Format Text Description Allows you to declare a font face for any text element. Allows you to create or disable italic text. Allows you to create or disable small-caps. Allows you to make text bold in varying degrees, depending on the font in use. Allows you to declare a specific font size using a variety of keywords and units of measurement. Allows you to declare all font properties at once. Procedure Reference: Format Text Using an Inline Style Sheet To format text using an inline style sheet: 1. Enclose the text or element you want to format within a container tag. You can use any of the valid XHTML container tags to do this, including <p>, <h1>, and so forth. 2. Place the insertion point before the > symbol of the container tag. 3. Type style="property:value [; property:value]..." to apply text styles to the text inside the container tag. 4. Save the file, switch to the browser window, and refresh the page. 5. Verify the result of the style rules. Procedure Reference: Format Text Using an Embedded Style Sheet To format text using an embedded style sheet: 1. Place the insertion point in the document s <head> section. 2. Type <style type="text/css"> and press Enter. 3. Type </style> to create an embedded style sheet. 4. In the <head> section, click after the <style type="text/css"> tag and press Enter. 5. Enter the desired style rule using the syntax selector {property:value [; property:value]... } to apply text styles to the text inside the selector tag. 44 Lesson 3: Applying Styles Using CSS

56 6. Save the file, switch to the browser window, and refresh the page. 7. Verify the result of the style rules. Procedure Reference: Create Class Styles To create class styles: 1. If necessary, determine the element class or independent class to achieve the desired style. 2. Add the class="myclass" attribute to the element or elements you want to style, using a logical name that describes how the style is used. 3. Create a new rule in the style sheet using either the element class or independent class as the selector for your desired styles. 4. Save the file, switch to the browser window, and refresh the page. 5. Verify that only those elements with the class="yourclassname" attribute pick up the style(s). Lesson 3: Applying Styles Using CSS 45

57 ACTIVITY 3-1 Formatting Text Using Inline Styles Data Files: index.html Before You Begin: 1. From the C:\085960Data\Applying Styles\Citizens Information Center folder, open the index.html file in the Notepad++ application. 2. From the C:\085960Data\Applying Styles\Citizens Information Center folder, open the index.html file in Internet Explorer 7. Scenario: While the home page is coming together nicely, there are numerous formatting issues that need to be addressed. The text for the page footer is aligned to the left of the page and this makes the footer appear as part of the main content. You would like to separate it from the main content by aligning it to the center of the page. 46 Lesson 3: Applying Styles Using CSS

58 What You Do 1. Format the footer of the page using an inline style sheet. Code Sample 1 How You Do It a. In the Internet Explorer window, scroll down to display the page footer section. b. Observe that the page footer text is aligned to the left of the page. c. Switch to the Notepad++ application. d. Scroll down and in the <p> tag containing the page footer text, click after <p to place the insertion point. e. Press the Spacebar and type style="text-align: center" to apply text styles to the text inside the <p> tag. See Code Sample 1. f. Save the file. <p style="text-align: center">careers Trademark and Copyright Privacy Policy Terms and Conditions<br/> This website represents a fictitious organization and is used for training purposes.</p> 2. Verify the changes in the browser. a. On the taskbar, click Citizens Information Center - Windows Internet Explorer to display the Internet Explorer window. b. In the Citizens Information Center - Windows Internet Explorer window, click the Refresh button to verify that the page footer is aligned to the center of the web page. Lesson 3: Applying Styles Using CSS 47

59 ACTIVITY 3-2 Formatting Headings Using Embedded Style Sheets Data Files: index.html Before You Begin: 1. Open the index.html file in the browser and in the Notepad++ application. 2. Switch to the Notepad++ application. Scenario: You find that the headings in the home page don t really stand out very well. You would like to fix this issue by giving a distinct look and color to the headings. What You Do 1. Insert an embedded style sheet container. 2. Set the font family and the font size of the heading text. How You Do It a. Scroll up and in the documents <head> section, click after the </title> tag and press Enter. b. Type <style type="text/css"> c. Press Enter and type </style> a. Click after the <style type= "text/css"> tag and press Enter. b. Type h3 { font-family: Arial,Verdana,sans-serif; } to specify the font family of the heading text. See Code Sample 1. When specifying a font face, you need to declare multiple, similar font faces so that the users who don t have your first font choice will at least see a similar one thus preserving your intended design. 48 Lesson 3: Applying Styles Using CSS

60 Code Sample 1 <style type="text/css"> h3 { font-family: Arial,Verdana,sans-serif; } </style> 3. Specify the margins of the heading text. c. Save the file, switch to the Internet Explorer window, and refresh the page. d. Observe that the font family of the heading text is changed to Arial. e. Switch to the Notepad++ application. f. In the style rule for the h3 tag, click after font-family: Arial,Verdana,sans-serif; and press Enter. g. Type font-size: 13px; to set the font size of the heading text. h. Save the file, switch to the Internet Explorer window, and refresh the page. i. Observe that the font size of the heading text has changed. a. Switch to the Notepad++ application. b. Press Enter and type margin-left: 15px; to set the margins of the heading text. c. Save the file, switch to the Internet Explorer window, and refresh the page. d. Observe that the margins for the left side of the heading text have been set. Lesson 3: Applying Styles Using CSS 49

61 4. Apply a color to the heading text. a. Switch to the Notepad++ application. 5. Set the margins for the <body> element. b. Press Enter and type color: #001a5c; to apply a blue color to the heading text. c. Save the file, switch to the Internet Explorer window, and refresh the page. d. Observe that the color of the heading text has changed to blue. a. Switch to the Notepad++ application. b. Click after the closing braces of the h3 style rule and press Enter. c. Type body { margin: 0; } to set the margins of the <body> element to zero. d. Save the file, switch to the Internet Explorer window, and refresh the page to verify that the margin is set to zero for the body elements. 50 Lesson 3: Applying Styles Using CSS

62 ACTIVITY 3-3 Formatting Paragraphs Using Class Styles Data Files: index.html Before You Begin: 1. Open the index.html file in the browser and in the Notepad++ application. Scenario: You would like to modify the paragraph text to give the page more clarity and visual appeal. You have ideas for the entire site, but would like you to try out a few simple styles on the home page first. If you find them good, you would like to apply these styles for all the paragraphs on the site. Lesson 3: Applying Styles Using CSS 51

63 What You Do How You Do It 1. Create and apply a class style. a. In the C:\085960Data\Applying Styles\ Citizens Information Center\index.html - Notepad++ window, in the embedded style sheet, click after the closing braces of the body style rule and press Enter. b. Type p.bodypara to define a class selector that is associated with the <p> XHTML element and press the Spacebar. c. Type { font-family: Arial,Verdana,sans-serif; } to specify the font family of the paragraph text. d. Scroll down and in the <body> section, in the <p> tag containing the text starting with the words Chermont, click after <p, press the Spacebar and type class= "bodypara" See Code Sample 1. e. Save the file, switch to the Internet Explorer window, and refresh the page. f. Observe that the font family of the first paragraph is changed to Arial. g. Switch to the Notepad++ application. h. Scroll up and in the style rule for the p.bodypara class, click after font-family: Arial,Verdana,sans-serif; and press Enter. i. Type font-size: 12px; to set the font size of the paragraph text. See Code Sample 2. j. Save the file, switch to the Internet Explorer window, and refresh the page. k. Observe that the font size of the paragraph text has changed. Code Sample 1 52 Lesson 3: Applying Styles Using CSS

64 <p class="bodypara">chermont is a large city located in the Northeast United States. It has a population of just under 2 million, ranking its size among cities such as Housto n. The city is a hub for trade in the region, positioned at a key point on a major river. Chermont International A irport handles flights from all over the world, and also offers on-site convention space.</p> Code Sample 2 p.bodypara { font-family: Arial,Verdana,sans-serif; font-size: 12px; } 2. Format the first paragraph text using a class style. a. Switch to the Notepad++ application. b. Press Enter and type margin-left: 15px; to set the margins of the paragraph text. c. Save the file, switch to the Internet Explorer window, and refresh the page. d. Observe that the margins for the left side of the paragraph have been set. e. Switch to the Notepad++ application. f. Press Enter and type color: #222222; to set the color of the paragraphs. g. Save the file, switch to the Internet Explorer window, and refresh the page. h. Observe that the color of the paragraph text has been changed. Lesson 3: Applying Styles Using CSS 53

65 3. Format the second paragraph using the bodypara class style. Code Sample 3 a. Switch to the Notepad++ application. b. Scroll down and in the <body> section, in the <p> tag containing the second paragraph text that starts with the words At the County Fair, click after <p, press the Spacebar and type class="bodypara" See Code Sample 3. c. Save the file, switch to the Internet Explorer window and refresh the page to verify that the second paragraph that starts with the words At the County Fair appears formatted. d. Close the Internet Explorer window. e. In the Notepad++ window, close the index.html file. <p class="bodypara">at the County Fair held last Tuesday, a number of young people from across the county participated and walked away with prizes. Over the past year, the yo ungsters showing a keen interest in honing their talents sewed dresses, planned parties, raised unusual animals as pets, crafted artworks, held painting exhibitions etc. to impress the judges at the Fair with their unique skills. <br /> <br /> <br /> </p> 54 Lesson 3: Applying Styles Using CSS

66 TOPIC B Format Lists You have formatted text to suit your design requirements. The lists you have added to the web page will look ordinary since it is formatted with the default styles. You would want to change the appearance of the lists so that they are distinct from the rest of the text. In this topic, you will format lists. Plain looking lists might not attract user attention and in turn might fail to convey vital information. However, using CSS, you can apply styles to lists to dramatically change the appearance of lists. List Properties List properties are specifically meant to address lists. There are three list style properties, and they all control the list item labels, which are the bullets and alphanumeric characters that define the list items in lists. The following table describes the various list properties. Property list-style-type list-style-position list-style-image Margin Properties Description Allows you to specify one of 10 label (bullet) types for a bulleted list. It also allows you to specify the type of numbering system for the numbered list. Allows you to control where your list labels are displayed. Allows you to use images as list labels. A margin defines the space between the edges of an element and any surrounding content. There are five margin properties. The following table describes the various margin properties. Property margin-top margin-right margin-bottom margin-left margin Description Sets the top margin between the element and the page or surrounding content on the top. Sets the right margin between the element and the page or any element to its right. Sets the bottom margin between the element and the page, or any element that follows it. Sets the left margin between the element and the page, or any element to its left. Sets multiple sides of an element s margin at once. Lesson 3: Applying Styles Using CSS 55

67 Padding Properties Padding is the space provided between an element s content and its borders. Like margins, you can set all the four sides of an element s padding. There are five padding properties. The following table describes the various padding properties. Property padding-top padding-right padding-bottom padding-left padding How to Format Lists Description Sets the top padding between the element s content and its borders. Sets the right padding between the element s content and its borders. Sets the bottom padding between the element s content and its borders. Sets the left padding between the element s content and its borders. Sets multiple sides of an element s padding at once. Procedure Reference: Format Unordered Lists To format unordered lists: 1. In the embedded style sheet, type li{property:value [; property:value]... } to format the list items. 2. Press Enter and type ul{property:value [; property:value]... } to modify the bullet type of the unordered list. 3. Save the changes and switch to the browser window. 4. Refresh the page to verify the result of the style rules. Procedure Reference: Format Ordered Lists To format ordered lists: 1. In the embedded style sheet, type li{property:value [; property:value]... } to format the list items. 2. In the embedded style sheet, type ol{property:value [; property:value]... } to specify the type of numbering system for the ordered list. 3. Save the changes and switch to the browser window. 4. Refresh the page to verify the result of the style rules. Procedure Reference: Format Definition Lists To format definition lists: 1. In the <head> section, click after the <style type="text/css"> tag and press Enter. 2. Type dt{property:value [; property:value]... } to format the terms of the definition list. 56 Lesson 3: Applying Styles Using CSS

68 3. Type dd{property:value [; property:value]... } to format the definitions of the list. 4. Save the changes and switch to the browser window. 5. Refresh the page to verify the result of the style rules. Lesson 3: Applying Styles Using CSS 57

69 ACTIVITY 3-4 Formatting Lists Data Files: info-center.html Before You Begin: 1. From the C:\085960Data\Applying Styles\Citizens Information Center folder, open the info-center.html file in Internet Explorer From the C:\085960Data\Applying Styles\Citizens Information Center folder, open the info-center.html file in the Notepad++ application. Scenario: The paragraph text in the website has been formatted but other textual content such as the lists appears plain and unformatted. You would like to make the list items prominent and also improve the aesthetic appeal of the bulleted list by adding images as bullets. You would also like the text in the list items to appear with the same formatting as the paragraph text to establish consistency across the pages of the website. 58 Lesson 3: Applying Styles Using CSS

70 What You Do How You Do It 1. Format the unordered list. a. In the C:\085960Data\Applying Styles\ Citizens Information Center\infocenter.html - Notepad++ window, in the <head> section, in the embedded style sheet, click after the closing braces of the h3 style rule and press Enter. b. Type li { font-family: Arial,Verdana,sans-serif; color: #000000; font-size: 12px; } to modify the font family, color, and font size of the unordered list. c. Save the file, switch to the Internet Explorer window, and refresh the page. d. Observe that the unordered list under the heading Community Facilities appears formatted with the styles you specified in the style sheet. e. Switch to the Notepad++ application. f. In the li style rule, click after font-size: 12px;, press Enter, and type margin-bottom: 6px; to insert space below each list item. g. Save the file, switch to the Internet Explorer window, and refresh the page. h. Observe that the space between the list items has increased. i. Switch to the Notepad++ application. j. Press Enter and type padding-left: 10px; to increase the space between the bullet and the text. k. Save the file, switch to the Internet Explorer window, and refresh the page. l. Observe that the space between the bullet and the text has increased. Lesson 3: Applying Styles Using CSS 59

71 2. Change the bullet type of the unordered list to images. a. Switch to the Notepad++ application. b. Click after the closing braces of the li style rule and press Enter. c. Type ul { list-style-image: url(graphics/bullet.jpg); } to display the image as the bullet type. d. Save the file, switch to the Internet Explorer window, and refresh the page. e. Observe that the image you specified appears as the bullet type for the unordered list under the heading Community Facilities. f. Switch to the Notepad++ application. g. In the ul style rule, click after list-style-image: url(graphics/bullet.jpg); and press Enter. h. Type vertical-align: text-top; to align the text and the bullet. i. Save the file, switch to the Internet Explorer window, and refresh the page. j. Observe that the text is aligned with the bullets. 60 Lesson 3: Applying Styles Using CSS

72 3. Format the terms of the list. a. Switch to the Notepad++ application. b. Click after the closing braces of the ul style rule and press Enter. c. Type dt { font-family: Arial,Verdana,sans-serif; color: #000000; font-size: 12px; margin-left: 15px; font-weight: bold; } to format the terms of the definition list. d. Save the file, switch to the Internet Explorer window, and refresh the page. e. Observe that the terms of the list under the heading Major Service Providers of our Community are formatted with the styles you specified in the style rule. Lesson 3: Applying Styles Using CSS 61

73 4. Format the definitions of the list. a. Switch to the Notepad++ application. b. Press Enter and type dd { font-family: Arial,Verdana,sans-serif; color: #000000; font-size: 12px; } to format the definitions of the list under the heading Major Service Providers of our Community. c. Save the file, switch to the Internet Explorer window, and refresh the page. d. Observe that the definitions of the list under the heading Major Service Providers of our Community are formatted with the styles you specified in the style rule. e. Switch to the Notepad++ application. f. In the dd style rule, click after font-size:12px;, press Enter, and type margin-bottom: 6px; to insert space below the definitions of the list. g. Press Enter and type margin-top: 6px; to insert space above the definitions of the list. h. Save the file, switch to the Internet Explorer window, and refresh the page to verify that space is inserted above and below the definitions of the list. i. Close the Internet Explorer window. j. In the Notepad++ window, close the infocenter.html file. 62 Lesson 3: Applying Styles Using CSS

74 TOPIC C Format Images You have formatted the text and the lists on your web page. You have also added images to your web page but positioning the image at the right place in the web page is of primary importance. In this topic, you will format images. Images make a huge value addition to your website in various ways. But if they are not of the right size and not placed at the right place, they would become an eyesore. Right sizing the images and formatting them would provide a professional look and feel to the web page. Image Properties Image properties are specific to images and are used to control the dimension and position of images on web pages. The following table describes the various image properties. Property width height float:left float:right Description Allows you to specify the width of an image. It can also be used to specify the width of any XHTML page element. Allows you to specify the height of an image. It can also be used to specify the height of any XHTML page element. Allows you to align the image to the left of the page and wrap the text to the right of the image. Allows you to align the image to the right of the page and wrap the text to the left of the image. Lesson 3: Applying Styles Using CSS 63

75 How to Format Images Procedure Reference: Format Images To format images: 1. Determine the styles you want to apply to a given image. 2. In the style sheet, create a rule that declares your desired styles for the image. 3. If necessary, use the width and height properties to specify the width and height of an image. 4. If necessary, use the float property to align the image to the left or the right of the page and to wrap text the right or left of the image. 5. Save the file, switch to the browser window, and refresh the page. 6. Verify the result of the style rules. 64 Lesson 3: Applying Styles Using CSS

76 ACTIVITY 3-5 Formatting Images Data Files: index.html Before You Begin: 1. From the C:\085960Data\Applying Styles\Citizens Information Center folder, open the index.html file to open it in Internet Explorer From the C:\085960Data\Applying Styles\Citizens Information Center folder, open the index.html file in the Notepad++ application. Scenario: The text formatting of the home page is complete and looks neat and consistent. But you find that the main text appears below the image and this makes the web page look like a text document in which text and graphics are arranged sequentially. You want to fix this by making the graphics appear to the right of the text. Lesson 3: Applying Styles Using CSS 65

77 What You Do How You Do It 1. Modify the width of the image. a. In the C:\085960Data\Applying Styles\ Citizens Information Center\index.html - Notepad++ window, in the <head> section, in the embedded style sheet, click after the closing braces of the p.bodypara class style rule and press Enter. Code Sample 1 b. Type.image to declare an independent class selector and press the Spacebar. c. Type { } width: 460px; to specify the width of the image. d. Scroll down and in the <body> section, in the second <img> tag containing the communities.gif image, click after <img, press th Spacebar, and type class="image" See Code Sample 1. e. Save the file, switch to the Internet Explorer window, and refresh the page. f. Observe that the width of the communities image is set according to your style declarations. <img class="image" src="graphics/communities.gif" alt="bringing people together" /> 66 Lesson 3: Applying Styles Using CSS

78 2. Wrap text to the left of the communities.gif image. 3. Wrap text to the right of the news.jpg image. Code Sample 2 a. Switch to the Notepad++ application. b. Scroll up and in the image class style rule, click after width: 460px; and press Enter. c. Type float: right; to move the image to the right of the page and wrap text to the left of the image. d. Save the file, switch to the Internet Explorer window, and refresh the page. e. Observe that the communities.gif graphic is moved to the right of the page and the text gets wrapped to the left of the image. a. Switch to the Notepad++ application. b. In the <head> section, in the embedded style sheet, click after the closing braces of the image class style rule and press Enter. c. Type.newsimage { float: left; } to wrap text to the right of the image. d. Scroll down and in the <body> section, in the third image tag containing the news.jpg image, click after <img, press the Spacebar and type class= "newsimage" See Code Sample 2. <img class="newsimage" src="graphics/news.jpg" alt=""/> e. Save the file, switch to the Internet Explorer window, and refresh the page. f. Observe that the text gets wrapped to the right of the news.jpg image. Lesson 3: Applying Styles Using CSS 67

79 4. Apply margins to the news.jpg image. a. Switch to the Notepad++ application. Code Sample 3.newsimage { float: left; margin-left: 15px; } 5. Apply margins to the communities.gif image. Code Sample 4.image{ float: right; margin-left: 7px; } b. Scroll up and in the newsimage class style rule, click after float: left;, press Enter, and type margin-left: 15px; to apply a margin to the news.jpg image. See Code Sample 3. c. Save the file, switch to the Internet Explorer window, and refresh the page. d. Observe that a margin has been applied to the left of the news.jpg image. a. Switch to the Notepad++ application. b. In the image class style rule, click after float: right;, press Enter, and type margin-left: 7px; to apply margins to the left of the image. See Code Sample 4. c. Press Enter and type margin-bottom: 30px; to apply margins to the bottom of the image. d. Save the file, switch to the Internet Explorer window, and refresh the page to verify that margins have been applied to the left and the bottom of the image. 68 Lesson 3: Applying Styles Using CSS

80 TOPIC D Modify Page Background You have already explored the significance of images in your design enhancements. Background colors and images can also play an important role in your website s appearance. In this topic, you will modify page backgrounds. If you would like people to visit your web page more often, the best way would be to add colors and images to the web pages. By using color backgrounds and image backgrounds, you can give a unique look to your web page. ID Selectors An ID selector is a type of CSS selector that can be used to apply unique styles to individual page elements. The individual page elements are provided with a unique identifier (ID). However, unlike classes, styles declared with an ID selector must be unique to a page the ID cannot be shared with other elements in a document. ID selectors must be written with only alphanumeric characters and an optional hyphen. Characters such as underscores are forbidden, and they cannot begin with a number. In your style sheet, you create an ID selector that is associated with a particular XHTML tag by listing the XHTML tag name, followed by a #, and then the ID name, with no spaces included. The declarations that form the remainder of your CSS rule follow that ID selector. If you need a particular ID style to be accessible by different elements throughout multiple pages in a site, you can create an independent ID selector that s not associated with any XHTML element. You can create independent ID selectors by listing an ID name preceded by a #. Again, your style declarations would follow. Figure 3-5: Example of an ID selector. Example of an ID Selector For example, the rule p#logo { My Styles } selects a <p> tag that contains an id="logo" attribute. ID Selectors Lesson 3: Applying Styles Using CSS 69

81 Foreground and Background Colors Color Methods Color methods are the means by which you can specify the colors of your web page. There are three color methods that allow you to declare the color of an element. Color Method Color Names Hexadecimal Values RGB Format Description Foreground and Background Colors Predefined keywords that represent a specific color. There are 16 color name keywords in the CSS specification; these are considered safe colors because they get displayed the same way across different browsers and operating systems. The most commonly applied color method on the web. Hexadecimal values consist of a hash symbol (#), followed by any combination of the integers 0 9 and the letters A through F. There are three pairs of these value combinations; one for each red, green and blue value. They are expressed as #RRGGBB. The value 00 gives no color value, while FF gives a full red, green, or blue value. Used to specify gradations of red, green, and blue that combine to create a specific color any color in the visible spectrum. Specifying color with the RGB format is a more powerful and flexible method than using color names because there are more than 16 million colors available in the full color palette. There are 256 possible gradations (0 255) for each red, green, and blue value 256 times 256 times 256 equals 16,777,216 colors. An element s foreground color is simply its text color. For non-text elements such as images, the foreground color has no effect. An element s background color is displayed behind the text. The two properties that control the foreground and background colors are color and background-color respectively. 70 Lesson 3: Applying Styles Using CSS

82 Figure 3-6: Foreground and background colors applied to a web page. The Color Property The color property controls an element s foreground color. The default foreground color for any text element depends on the browser, but it is typically black. If you want all your paragraphs to be blue, you can simply write: p { color: blue; } The Background-Color Property The background-color property controls an element s background color. For example, if you want all <p> elements to have a silver background, you would write: p { background-color: silver; } By default, when you apply a background color to a block-level element, the background color fills the element s entire containment area, which is defined by the width of the browser window, any margins that might be present, the width of the element s parent element, or the width of the element itself. Background Images Background images are graphics that are placed behind the content of a web page to enhance its visual appeal. The images used for backgrounds are typically textures and not pictures so that they do not distract the reader from the overlaying text. Pictures can be used as background images by making them transparent and then using them as watermark images so that the text can be read without any difficulty. Background Images Lesson 3: Applying Styles Using CSS 71

83 Figure 3-7: A watermark image applied as a background image to a web page. Background Image Properties There are five background image properties and they all control the styling of background images. Property background-image background-repeat background-position background-attachment background Description Declares a background image for an element. Controls the direction of image tiling. Controls the precise position of a background image. Determines if a background image should scroll with page content. Declares the other four background image properties at once. 72 Lesson 3: Applying Styles Using CSS

84 How to Modify Page Background Procedure Reference: Create an ID Style To create an ID style: 1. Determine if you need an ID to achieve the desired style. 2. Determine if you need an element ID or an independent ID to achieve the desired style. 3. Add the id="myid" attribute, using a logical name, to the element to which you want to apply the style. 4. Create a new rule in the style sheet using either the element ID or the independent ID as the selector for your desired styles. 5. Save your changes and verify that only the single element using the ID picks up the style(s). Procedure Reference: Add a Background Image To add a background image: 1. In the embedded style sheet container, declare an image for the element using YourElement { background-image: url(yourimage.gif); }. 2. If necessary, use the background-repeat property to control how the image tiles. 3. If necessary, use the background-position property to control the image s position on the page or behind an element. 4. If necessary, use the background-attachment property to determine if the background image should scroll with page content. 5. Save and verify the changes. Procedure Reference: Apply a Background Color To apply a background color: 1. Determine the XHTML element to which you want to apply a background color. 2. In the style rule for the XHTML element, type background-color: value to declare the background color for the element. 3. Save and verify the changes. Lesson 3: Applying Styles Using CSS 73

85 ACTIVITY 3-6 Applying a Background Color Using ID Styles Data Files: index.html Before You Begin: 1. Open the index.html file in the browser and in the Notepad++ application. Scenario: A coworker has reviewed your home page and given you certain suggestions for improving the visual appeal of the page. He wants you to create a background color strip behind the text that will be used for navigation across the web pages of the site. 74 Lesson 3: Applying Styles Using CSS

86 What You Do 1. Apply a gray color background to the line containing the navigation text. Code Sample 1 How You Do It a. In the embedded style sheet, click after the closing braces of the newimage class style rule and press Enter. b. Type p#colorstrip to define the ID selector and press the Spacebar. c. Type { } background-color: #cccccc; to apply a background color for the p element. d. Scroll down and in the <body> section, in the <p> tag containing the navigation text, click after <p, press the Spacebar and type id="colorstrip" See Code Sample 1. e. Save the file, switch to the Internet Explorer window, and refresh the page. f. Observe that a grey strip appears as a background to the text below the banner image. <p id="colorstrip"> Home Information Center Newsroom Contact Us</p> Lesson 3: Applying Styles Using CSS 75

87 2. Specify the width and height of the color strip. Code Sample 2 p#colorstrip { background-color: #cccccc; width: 1000px; height: 22px; } a. Switch to the Notepad++ application. b. In the embedded style sheet, in the p#colorstrip id style rule, click after background-color: #cccccc;, press Enter and type width: 1000px; height: 22px; to define the width and the height of the <p> XHTML element. See Code Sample 2. c. Save the file, switch to the Internet Explorer window, and refresh the page. d. Observe that the width and height of the color strip are set according to your style declarations. 76 Lesson 3: Applying Styles Using CSS

88 3. Apply padding to the text inside the color strip. Code Sample 3 p#colorstrip { background-color: #cccccc; width: 1000px; height: 22px; padding-top: 6px; padding-left: 15px; } 4. Set the margins of the <p> element to zero. Code Sample 4 p#colorstrip { background-color: #cccccc; width: 1000px; height: 22px; padding-top: 6px; padding-left: 15px; margin: 0px; } a. Switch to the Notepad++ application. b. Press Enter and type padding-top: 6px; padding-left: 15px; to set the top and the left padding between the element s content and its bounding box. See Code Sample 3. c. Save the file, switch to the Internet Explorer window, and refresh the page. d. Observe that the top and left padding has been applied to the text inside the color strip. a. Switch to the Notepad++ application. b. Press Enter and type margin: 0px; to set the margins on all four sides of the element to zero. See Code Sample 4. Lesson 3: Applying Styles Using CSS 77

89 5. Remove the space between the banner graphic and the color strip below it. Code Sample 5 a. In the <body> section, in the first <p> tag containing the banner image, click after <p, press the Spacebar and type style="margin: 0px" to set the margins on all the four sides of the <p> element to zero. See Code Sample 5. b. Save the file, switch to the Internet Explorer window, and refresh the page to verify that there is no space between the header graphic and the color strip. c. Close the browser window. d. In the Notepad++ window, close the index.html file. <p style="margin: 0px"><img src="graphics/banner.gif" alt=" You have the right to know" /></p> 78 Lesson 3: Applying Styles Using CSS

90 ACTIVITY 3-7 Adding a Background Image Data Files: contact-info.html Before You Begin: 1. From the C:\085960Data\Applying Styles\Citizens Information Center folder, open the contact-info.html file to open it in Internet Explorer From the C:\085960Data\Applying Styles\Citizens Information Center folder, open the contact-info.html file in the Notepad++ application. Scenario: Another coworker suggests that you add the logo image as a background image to the page containing the contact information. You plan to implement his idea but you do not want the background image to be tiled across the page. What You Do How You Do It 1. Add a background image to the page. a. In the embedded style sheet, in the style rule for the <body> tag, click after margin:0;, press Enter, and type Code Sample 1 body{ margin: 0; background-image: url(graphics/logo.jpg); } background-image: url(graphics/logo.jpg); to declare the logo graphic as a background image for the page. See Code Sample 1. b. Save the file, switch to the Internet Explorer window, and refresh the page. c. Observe that the logo graphic is placed as a background to the page and appears tiled. Lesson 3: Applying Styles Using CSS 79

91 2. Prevent tiling of the image and position the image at the center of the page. a. Switch to the Notepad++ application. b. Press Enter and type background-repeat: no-repeat; to prevent the tiling of the image. c. Press Enter and type background-position: center; to position the background image at the center of the page. d. Save the file, switch to the Internet Explorer window, and refresh the page to verify that the background image does not tile across the page and is positioned at the center of the page. e. Close the browser window. f. In the Notepad++ window, close the contact-info.html file. 80 Lesson 3: Applying Styles Using CSS

92 Lesson 3 Follow-up In this lesson, you applied styles to the page elements. This would enable you to modify the appearance of a web page so that it meets your design needs. 1. What are the styles that you would apply to improve the visual appeal of your company website? Answers will vary. 2. Which selector and style sheet types do you think you ll use most often, and why? Answers will vary. Lesson 3: Applying Styles Using CSS 81

93

94 4 Working with Tables Lesson Time: 45 minutes Lesson Objectives: In this lesson, you will create, modify, and format a table. You will: Create a table. Modify the table structure. Format the table. Introduction You formatted the textual and graphical content on the website to make it more appealing. Different types of data need different forms of presentation, for example, statistical data is best presented in the form of tables. In this lesson, you will create, modify and format a table. Imagine that a transit company has hired you to include its bus schedule on its website. Describing the pick-up times and locations using paragraphs of text might not be the ideal way of presenting this information. If this data is displayed in a table, people can refer to it more easily.

95 TOPIC A Create a Table If you have seen a table in a document or a spreadsheet, then you know that it is an excellent way to display many types of data. Before you can display data in a table, you need to create the table body. In this topic, you will create a table. Suppose you need to present the sales data of your company for each month of a year. Presenting this data in the form of a bulleted list or in a paragraph could affect the clarity of the information, and the audience might not understand what you are trying to convey. Using a table to present this data will effectively bring out the relationship among the data. Table Structure Tags The body of an XHTML table contains rows and cells, which are all enclosed within tags. Tag <table></table> <tr></tr> <td></td> <th></th> How to Create a Table Description Opening and closing tags that define a table. Opening and closing tags that define a table row. Opening and closing tags that define a table cell. Opening and closing tags that define a header cell. Procedure Reference: Create a Table To create a table: 1. Determine where you want the table to be located. 2. In your text editor, at the chosen location, type <table> and press Enter twice. 3. Type </table> to close the table container. 4. Click in the blank line between the <table> tag and the </table> tag and type <tr>. 5. Press Enter twice and type </tr> to create the first row of the table. 6. Click in the blank line between the <tr> tag and the </tr> tag, press Tab two times and type <td></td> to create the first cell of the first row in the table. 7. If necessary, create rows and cells until the table fits the structure and quantity of the data that you want to display. 8. Click after the first <td> tag of the first row and type the desired text. 9. Add the desired data to the table cells. 10. Save the file, switch to the browser window, and refresh the page. 11. Verify the result in the browser. 84 Lesson 4: Working with Tables

96 Procedure Reference: Create Table Headers To create table headers: 1. Click after the <table> tag, press Enter and type <tr>. 2. Press Enter twice and type </tr> to create the header row of the table. 3. Click in the blank line between the <tr> tag and the </tr> tag, press Tab two times and type <th></th> to create a table header cell. 4. Click after the first <th> tag and type the desired text. 5. Save the file, switch to the browser window, and refresh the page. 6. Verify the result in the browser. Procedure Reference: Add a Caption to the Table To add a caption to the table: 1. Click after the <table> tag, press Enter, and type <caption>. 2. Type the desired table caption. 3. Type </caption>. 4. Save the file, switch to the browser window, and refresh the page. 5. Verify the result in the browser. Procedure Reference: Add Borders to the Table To add borders to the table: 1. In the embedded style sheet, type table { border:value; } to apply a border to the table. 2. Press Enter and type td { border: value; } to apply a border to the cells. 3. Press Enter and type th { border: value; } to apply a border to the header cells. 4. Save the file, switch to the browser window, and refresh the page. 5. Verify the result in the browser. Lesson 4: Working with Tables 85

97 ACTIVITY 4-1 Creating a Table Data Files: info-center.html Before You Begin: 1. Open Internet Explorer From the C:\085960Data\Working with Tables\Citizens Information Center folder, open the info-center.html file to open it in Internet Explorer Switch to the Notepad++ application. 4. From the C:\085960Data\Working with Tables\Citizens Information Center folder, open the info-center.html file in the Notepad++ application. Scenario: Your manager would like you to describe the weather conditions in Chermont on the website. You decide to present this information in the form of a table and also add a title to the table. The table is given below. Seasons Temp (in Farenheit) Temp (in Celsius) Avg. Winter Temp F C Avg. Summer Temp F C 86 Lesson 4: Working with Tables

98 What You Do How You Do It 1. Create the structure of the table. a. Scroll down and in the <body> section, click after the closing </p> tag of the first paragraph text of the web page, press Enter and type <table> Code Sample 1 <table> <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> </table> b. Press Enter twice and type </table> to close the table container. c. Click in the blank line between the <table> tag and the </table> tag and type <tr> d. Press Enter twice and type </tr> to create the first row of the table. e. Click in the blank line between the <tr> tag and the </tr> tag, press Tab two times, and type <td></td> to create the first cell of the first row in the table. f. Select <td></td> to select the code for the first cell and press Ctrl+C to copy the code. g. Press End and press Ctrl+V two times to create the second and the third cells of the first row. h. Copy the code for the first row that starts with the opening <tr> tag and ends with the closing </tr> tag. i. Press End, press Enter, and paste the code on the line below the closing </tr> tag of the first row to create a second row containing three cells. See Code Sample 1. Lesson 4: Working with Tables 87

99 2. Enter the data for the table. a. Click after the first <td> tag of the first row and type Avg. Winter Temp Code Sample 2 <table> <tr> <td>avg. Winter Temp</td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> </table> 3. Create the structure of the table header. See Code Sample 2. b. Save the file, switch to the Internet Explorer window, and refresh the page to display the text for the first cell. c. Switch to the Notepad++ application. d. Similarly enter the text for the other cells of the table using the table given in the scenario. e. Save the file, switch to the Internet Explorer window, and refresh the page to display the text for the two rows. a. Switch to the Notepad++ application. b. Click after the <table> tag, press Enter, and type <tr> c. Press Enter twice and type </tr> to create the header row of the table. d. Click in the blank line between the <tr> tag and the </tr> tag, press Tab two times and type <th></th> to create a table header cell. e. Select <th></th> to select the code for the first header cell and press Ctrl+C to copy the code. f. Press End and press Ctrl+V two times to create the second and the third header cells of the first row. 88 Lesson 4: Working with Tables

100 4. Enter the data for the table header. a. Click after the first <th> tag and type Seasons Code Sample 3 See Code Sample 3. b. Save the file, switch to the Internet Explorer window, and refresh the page to display the table header text in bold. c. Switch to the Notepad++ application. d. Similarly enter the text for the other header cells of the table using the table given in the scenario. e. Save the file, switch to the Internet Explorer window, and refresh the page to display the header row for the table in bold. <table> <tr> <th>seasons</th><th></th><th></th> </tr> <tr> <td>avg. Winter Temp</td><td>25.00 F</td><td> C</td> </tr> <tr> <td>avg. Summer Temp</td><td>75.40 F</td><td>24.11 C</td> </tr> </table> 5. Add a caption to the table. a. Switch to the Notepad++ application. b. Click after the <table> tag, press Enter, and type <caption>climate in Chermont</caption> to define the caption of the table. c. Save the file, switch to the Internet Explorer window, and refresh the page to display the caption of the table. Lesson 4: Working with Tables 89

101 6. Add borders to the table. a. Switch to the Notepad++ application. b. In the embedded style sheet, scroll up and click in the line after the closing braces of the last style rule, press Enter and type table { border: solid 1px; } to apply a border to the table. c. Save the file, switch to the Internet Explorer window, and refresh the page to display the borders around the table. 7. Add borders to the table body cells. a. Switch to the Notepad++ application. b. Press Enter and type td { border: solid 1px; } to apply a border to the body cells. c. Save the file, switch to the Internet Explorer window, and refresh the page to display the borders around the table body cells. 8. Add borders to the table header cells. a. Switch to the Notepad++ application. b. Press Enter and type th { } border: solid 1px; to apply a border to the header cells. c. Save the file, switch to the Internet Explorer window, and refresh the page to display the borders around the table header cells. 90 Lesson 4: Working with Tables

102 TOPIC B Modify the Table Structure You have created a table body that has an equal number of cells in each row and an equal number of rows in each column. In some cases, you may want a table row or cell to extend into an adjacent row or cell without disrupting the structure of the table. In this topic, you will modify the structure of a data table. Imagine that you had a table of data that had a large amount of identical, adjacent data. Instead of entering the same data into each adjacent table cell, you can show that the same data applies to multiple rows or columns by spanning the rows and cells. This will present the data more clearly, while decreasing the amount of required XHTML code. Column and Row Spanning Spanning is the process of combining two or more table cells to form a single cell. Column spanning refers to the process of spanning cells across two or more columns and this is achieved using the colspan attribute. Row spanning refers to the process of spanning cells across two or more rows and this is done using the rowspan attribute. Figure 4-1: Spanning cells across columns and rows. Column and Row Spanning Lesson 4: Working with Tables 91

103 How to Modify the Table Structure Procedure Reference: Span Cells To span cells: 1. Determine the cells or rows that you would like to extend. 2. Add the colspan="value" attribute to the cell that you would like to extend horizontally across columns. 3. Add the rowspan="value" attribute to the cell that you would like to extend vertically across rows. 4. Delete the code for the cells that will be replaced by the extended cell. 5. Save the file, switch to the browser window, and refresh the page. 6. Verify the result in the browser. Procedure Reference: Modify the Size of the Table To modify the size of the table: 1. In the embedded style sheet, in the table style rule, type height: value; width: value; to specify the height and with of the table. 2. Save the file, switch to the browser window, and refresh the page. 3. Verify the result in the browser. 92 Lesson 4: Working with Tables

104 ACTIVITY 4-2 Modifying Table Structure Data Files: info-center.html Before You Begin: 1. Open the info-center.html file in the browser and in the Notepad++ application. 2. Switch to the Notepad++ window. Scenario: You feel that the clarity of the data in the table can be enhanced by increasing the size of the table. You also want to insert another table header that is common to all three columns of the table. What You Do 1. Increase the height and width of the table. How You Do It a. In the embedded style sheet, in the table style rule, click after border: solid 1px;, press Enter, and type height: 100px; width: 380px; to specify the height and with of the table. b. Save the file, switch to the Internet Explorer window, and refresh the page. c. Observe that the size of the table has changed according to the specified dimensions. Lesson 4: Working with Tables 93

105 2. Add a table header. a. Switch to the Notepad++ application. Code Sample 1 b. Scroll down and in the body section, click after </caption>, press Enter, and type <tr> <th>seasonal Temperatures</th> </tr> to insert another header row containing one cell. See Code Sample 1. c. Save the file, switch to the Internet Explorer window, and refresh the page to display another header row with one cell. <table> <caption>climate in Chermont</caption> <tr> <th>seasonal Temperatures</th> </tr> <tr> <th>seasons</th><th>temp (in Farenheit)</th><th>Temp (in Celsius)</th> </tr> <tr> <td>avg. Winter Temp</td><td>25.00 F</td><td> C</td> </tr> <tr> <td>avg. Summer Temp</td><td>75.40 F</td><td>24.11 C</td> </tr> </table> 94 Lesson 4: Working with Tables

106 3. Span the header across three columns. Code Sample 2 <tr> <th colspan="3">seasonal Temperatures</th> </tr> a. Switch to the Notepad++ application. b. In the first <th> tag, click after <th, press the Spacebar and type colspan= "3" to span the cell across three columns. See Code Sample 2. c. Save the file, switch to the Internet Explorer window, and refresh the page to verify that the header cell containing the text Seasonal Temperatures spans across three columns. Lesson 4: Working with Tables 95

107 TOPIC C Format the Table You have created the table and modified it to suit your requirements. The next step will be to format the table to improve readability and also enhance the aesthetic appeal of the table. In this topic, you will format the table. Imagine that you have a large table containing data. You can apply colors to the background of this type of table to make its contents easier to understand and reference. When a background color is applied to header cells, they stand out from the rest of the data. Formatting the table will drastically improve the readability of the table. How to Format the Table Procedure Reference: Format the Table To format the table: 1. Determine the styles that you want to apply to a given table. 2. In the style sheet, create a rule that declares your desired styles for the table. 3. Save the file, switch to the browser window, and refresh the page. 4. Verify the result in the browser. 96 Lesson 4: Working with Tables

108 ACTIVITY 4-3 Formatting the Table Data Files: info-center.html Before You Begin: 1. Open the info-center.html file in the browser and in the Notepad++ application. 2. Switch to the Notepad++ window. Scenario: You have created the table body and the data has been entered, but you notice that the data in one column is too close to the data in another column. You want to change the alignment of text to create more space between the data in columns. You also feel that you can make the header row more distinct by applying a background color to it. Lesson 4: Working with Tables 97

109 What You Do How You Do It 1. Format the text in the table. a. In the embedded style sheet, in the table style rule, click after width: 380px;, press Enter, and type font-family: Arial,Verdana, sans-serif; font-size: 12px; to specify the font and font size for the text in the table. b. Save the file, switch to the Internet Explorer window, and refresh the page. c. Observe that the font family and font size of the text in the table have changed. d. Switch to the Notepad++ application. e. Press Enter and type text-align: center; to align the text to the center of the cells. f. Press Enter and type margin-left: 15px; to specify the margins for the table. g. Save the file, switch to the Internet Explorer window, and refresh the page. h. Observe that the text is aligned to the center of the cells and a left margin is applied to the table. 2. Apply padding to the body cells. a. Switch to the Notepad++ application. b. In the embedded style sheet, in the td style rule, click after border: solid 1px;, press Enter, and type padding: 2px; to specify the cell padding for the table cells. c. Save the file, switch to the Internet Explorer window, and refresh the page. d. Observe that the padding has been applied to the cells. 98 Lesson 4: Working with Tables

110 3. Apply padding and a background color to the header cells. a. Switch to the Notepad++ application. b. In the embedded style sheet, in the th style rule, click after border: solid 1px;, press Enter, and type padding: 2px; to specify the cell padding for the table header cells. c. Press Enter and type background-color: #cccccc; to apply a background color to the header cells. d. Save the file, switch to the Internet Explorer window, and refresh the page. e. Observe that the padding and background color have been applied to the header cells. 4. Format the table caption. a. Switch to the Notepad++ application. b. In the embedded style sheet, click after the closing braces of the th style rule, press Enter and type caption { font-weight: bold; font-size: 13px; text-align: left; color: #001a5c; } c. Save the file, switch to the Internet Explorer window, and refresh the page to verify that the table caption is formatted with the styles you specified in the style rule. d. Close the browser window. e. In the Notepad++ window, close the info-center.html file. Lesson 4: Working with Tables 99

111 Lesson 4 Follow-up In this lesson, you created, modified, and formatted a table. Tables enable you to present complex information to your audience in an organized manner. 1. What are the instances in which you will create tables to present data on your website? Why? Answers will vary. 2. Apart from applying background colors to table headers, to which other elements of a table will you apply a background color? Why? Answers will vary. 100 Lesson 4: Working with Tables

112 5 Linking Web Pages Lesson Time: 45 minutes Lesson Objectives: In this lesson, you will link web pages. You will: Create hypertext links. Create image links. create an link. Format links. Introduction You have created different web pages with different features such as paragraphs, images, lists, and tables. You want your users to access all the web pages and you have to enable navigation between these web pages. In this lesson, you will link the web pages you have created to enable your users to navigate between these pages. Rather than trying to fit the entire contents of your website onto a single web page, it is always better to create separate, logical pages. Eventually, your users will have to use links to navigate through these pages to access the entire content.

113 Hypertext Links Bookmark Links TOPIC A Create Hypertext Links Now that you have created web pages, the next logical step is to create links that allow users to navigate through them. XHTML allows you to create links with text, thereby enabling your users to move from one page to the other. In this topic, you will transform the static text into hypertext links, so that a different page from the same site or any other site is displayed when a user clicks the link. Including too much information on the same page makes it appear cluttered and tedious for your user to access the content. It is a good practice to divide your content into logical units and place them on different pages. By creating links, you will provide your users an option to move from one page to another within a website and to any other website. Hypertext Links Definition: A hypertext link is a kind of link that is represented by words or a string of text, which when clicked takes you to a different web page. By default, the text on a hyperlink is highlighted with blue, underlined characters and this is a cue to the user that the text is an available link. A hypertext link can be used to link to another web page within a website or to an external website. The hypertext link is declared within an anchor tag with the href attribute, which specifies the destination of the link. Example: Hyperlinks The term hyperlink is different from hypertext link. Hypertext link is represented by words or strings alone, while the term hyperlink is a general reference to any link that enables navigation from one page to another. A hyperlink can be an image, hotspot, word or phrase, that when clicked takes you to a different destination. 102 Lesson 5: Linking Web Pages

114 Bookmark Links Definition: A bookmark link is a type of link, which when clicked takes you to a specific location within the same web page. A bookmark link is otherwise known as an on-page link or a named anchor. A bookmark link is declared using a pair of tags specifying the location to which the link is targeted and defining the target with the id attribute. Example: How to Create Hypertext Links Procedure Reference: Create Hypertext Links To create hypertext links: 1. Determine the text you would use as a link. 2. Place the cursor before the desired text. Type <p><a href="web page name.html">text</a></p> to navigate from the current web page to the page 2. Type <p><a href="website address">text</a></p> to navigate from the current page to the home page of the everything for coffee website. 3. Save the file and test it in your browser. 4. Click on the links to view the destination page. Procedure Reference: Create Bookmark Links To create bookmark links: 1. Type <p><a href="#id">target text</a></p> to create a bookmark link. 2. Navigate to the destination and type <a id="id">destination Text</a>. 3. Save the file and test it in your browser. Lesson 5: Linking Web Pages 103

115 4. Click on the bookmark link to navigate to the desired section. 104 Lesson 5: Linking Web Pages

116 ACTIVITY 5-1 Creating Hypertext Links Before You Begin: 1. From the C:\085960\Linking Web Pages\Citizens Information Center folder, open the index.html file in the Notepad++ application. 2. From the C:\085960\Linking Web Pages\Citizens Information Center folder, open the index.html file in Internet Explorer. Scenario: You have a string of text available below the header image that you intend to change to a navigation bar, that will allow users to navigate to the other three pages of your website. You also want to provide your users an option to visit the websites of service providers such as Everything For Coffee and Our Global Company. Since the Information Center web page is lengthy, you will also provide the option to your users to navigate quickly from the bottom of the web page to the top of the web page. Lesson 5: Linking Web Pages 105

117 What You Do 1. Create hypertext links to pages within the Citizens Information Center website. How You Do It a. Scroll down and click before Home and then type <a href="index.html"> b. Click after Home and type </a> to convert the text Home to a hypertext link. c. Click before Information Center and type <a href="info-center.html"> d. Click after Information Center and type </a> to convert the text Information Center to a hypertext link. e. Click before Newsroom and type <a href="newsroom.html"> f. Click after Newsroom and type </a> to convert the text Newsroom to a hypertext link. g. Click before Contact Us and type <a href="contact-info.html"> h. Click after Contact Us and type </a> to convert the text Contact Us to a hypertext link. i. Save the file, switch to Internet Explorer, and refresh the page in the browser. j. Observe that every word in the navigation bar is underlined, indicating that they are links. k. Click Information Center to display the Information Center web page. 106 Lesson 5: Linking Web Pages

118 2. Create links to the Our Global Company website. a. In the Windows Internet Explorer window, choose View Source to display the info-center.html file. b. Scroll down and click before Our Global Company</dt> and then type <a href= " c. Click after Our Global Company and type </a> to insert a hypertext link. d. Save the file and refresh the page in the browser. e. Scroll down and click Our Global Company to navigate to the Our Global Company website. 3. Create a bookmark link. a. Switch to info-center.html, scroll down and click at the end of </dl> and then press Enter. b. Type <p><a href="#intro">top</a> </p> to create a bookmark link. c. Scroll up and click between <h3> and Information Center and then type <a id="intro"> to declare an ID to the target. d. Click before </h3> and type </a> e. Save the file, switch to the Information Center web page, and refresh the page in the browser. f. Click top to navigate to the top of the web page. Lesson 5: Linking Web Pages 107

119 Image Links TOPIC B Create Image Links You have transformed static text into hypertext links that enable users to navigate from page to page on the web, but you may not always want to use text. Instead of text, you have the option to create a link using an image. In this topic, you will create an image link so that a different page is displayed when a user clicks the image. Creating links with hypertext will always be an available option, but using a graphic as a link can offer the same functionality with an increased aesthetic appeal. This technique is commonly used to create graphical navigation bars and banner advertisements. For professional development work, you will be adding links to your sites in one form or another. Image Links Definition: An image link is a type of link representing an image, which when clicked takes the user to a different web page. By default, the image link is displayed with a border to indicate that it is a link. Graphic images can be converted into links by enclosing an <img> tag inside the anchor tag. Example: 108 Lesson 5: Linking Web Pages