Chapter 13 Web Editing 2013 Cengage Learning All

Lessons • Lesson 13. 1: HTML and Coding • Lesson 13. 2: Ensuring Universal Access Digital Media, 3 e 2

Learning Outcomes 13. 1 Describe the functions of HTML 13. 2 Write correct HTML code 13. 3 Explain key features of Web editors 13. 4 Explain how Web developers meet the needs of universal access • 13. 5 Explain the differences between HTML and XHTML • 13. 6 Explain the principles of well-formed code • 13. 7 Explain how to validate code • • Digital Media, 3 e 3

HTML and Coding • HTML (Hyper. Text Markup Language) is the code used to create Web pages • A browser is a computer program that allows you to view Web pages • No matter which hardware or browser you are using, all Web pages will be displayed in a largely similar way – HTML files do not have quite the universal constancy of PDF files – All Web browsers do not show Web pages in exactly the same way Digital Media, 3 e 4

Inside HTML • HTML is a simple code designed to translate text and graphics into a viewable page • A tag is an HTML code used to identify an element in an HTML file and instruct browsers on how and where to display the element • Each code (usually written in lower case letters) is enclosed in angle brackets (the characters < and >) Digital Media, 3 e 5

Inside HTML (continued) • HTML Basics – Web pages begin with an opening <html> tag – The page then goes to the <head> – The next element is the <title> and </title> – Many tags appear in pairs • The start tag is the first tag in a pair; also called opening tag • The end tag is the second tag in a pair; also called closing tag Digital Media, 3 e 6

Inside HTML (continued) • HTML Basics (cont. ) – An element is a unit of a Web page, defined by start and end tags • Elements include the head, the title, the body, headings, paragraphs, and bulleted lists • One element can contain several others – An attribute is a part of a tag that further describes or defines an element, which consists of the attribute type and a value for that attribute • Appear in the start tag only • Are written in the form attribute name=“value” – Empty elements are elements that do not have any content Digital Media, 3 e 7

Inside HTML (continued) • Common HTML Tags – HTML has dozens of tags, and they cover a broad range of functions Digital Media, 3 e 8

Inside HTML (continued) • Learn by Copying – One way to learn HTML tagging is to examine source code • Begin with pages that are relatively simple so you do not get too confused • Focus on just one section of a page at a time so you can better understand the code and its effects – Study the codes in conjunction with the text, images, and other design features on a Web site to begin to understand the effects of various codes – By understanding the effects created by different codes, you can design pages using the tags you want – Another approach to learning HTML is to use online tutorials Digital Media, 3 e 9

The Ethics of Copying Code • How much code can you “borrow” before it is no longer your page? • Is it important to give credit for innovative techniques? • Does this borrowing hinder or encourage development of new ideas? • What do you think? Digital Media, 3 e 10

Web Editing Software • A Web editor is computer software that creates HTML code automatically as part of the Web design process • You can also write code in a simple text editor or a word processing program • Writing HTML in a text editor or word processing program lets you focus on the code so you gain a better understanding of the code Digital Media, 3 e 11

Web Editing Software (continued) • Different Ways of Viewing a Site – One advantage of using Web editing software is that it provides a WYSIWYG (What You See Is What You Get) interface – Most Web editors have two panels: one displaying the text and codes and the other showing how it will appear in a browser Digital Media, 3 e 12

Web Editing Software (continued) • Features of Web Editors – Web editors provide tools to create many different effects, including these commonly used ones: Page backgrounds using color or images Text in different sizes and colors Wraparound text and other special effects Graphics including horizontal rules, bulleted lists, rollover images, and image maps • Drop-down menus, option buttons, and forms that users can fill out • Links to other pages • • – A vital feature is the ability to conduct compatibility checks with different browsers Digital Media, 3 e 13

Web Editing Software (continued) • Features of Web Editors (cont. ) – Consider these features in evaluating a Web editor: • • • Digital Media, 3 e Templates Media Interactive elements XHTML, CSS, and Java. Script Tables 14

Obstacles to Universal Access • There access limitations that stem from the varying capabilities of three features connected with how people access the Internet: – The display screen being used – The speed of the computer and the Internet connection – The browser being used • A special issue is the question of smartphones or mobile Web browsing • The issue of accessibility for people with disabilities is also important to consider in Web design. Digital Media, 3 e 15

Obstacles to Universal Access (continued) • Display – Challenging to design a Web page that will appear exactly as you anticipate • Some computers have larger display screens than others • Some displays will not have the same fonts as yours • Some will not be able to display as many colors as yours – Following these principles will help minimize displayrelated problems: • Design the Web page for an 800 × 600 (width by depth) pixel resolution • Avoid font issues by choosing common fonts and specifying optional fonts that are similar to each other Digital Media, 3 e 16

Obstacles to Universal Access (continued) • Download Speed – Download speed depends on both the speed of the user’s computer and of his or her Internet access – Follow these guidelines to develop faster Web sites: • Keep the overall file size of each Web page relatively small • Keep images small and compressed • Include music, video, and animation only if they are essential to your purpose • Run error checks on HTML code and CSS styles • Avoid placing tables within tables • Use a host computer that is as fast as possible Digital Media, 3 e 17

Obstacles to Universal Access (continued) • Browser – Some compatibility issues are related to browser software – Some functions or formatting commands are not available in all browsers – The Web editor may help you by indicating if a particular function is not available to all browsers – The browser compatibility check can help resolve issues • Mobile Devices – Display, download speed, and browser type are all factors in the use of smartphones for Web browsing – Smartphones cannot display as much text as can be seen on a computer screen Digital Media, 3 e 18

Obstacles to Universal Access (continued) • Accessibility – Many Web users have various disabilities such as impaired vision, difficulty hearing, or color-blindness – Designing a Web page with these individuals in mind is considered a standard for good Web design – World Wide Web Consortium (W 3 C) is an organization that sets standards for the World Wide Web, including such issues as privacy, markup languages, styles, and other issues – Web Content Accessibility Guidelines (WCAG ) are accessibility standards set by the WC 3 for Web developers to follow in order to make Web sites accessible to individuals with disabilities Digital Media, 3 e 19

Ensuring Access by Using XHTML • XHMTL is a markup language similar to HTML but with stricter requirements • Well-formed code is formatting code that meets the quality standards of the coding system • To validate is to check the code used to generate Web pages to make sure it meets quality standards Digital Media, 3 e 20

Naming and Uploading a Web Site • A Web server is a computer used to store Web pages so that browsers can access them • The domain name is the unique name for a Web site, which becomes part of the site’s URL and which must be formally registered • Hacking is the unauthorized modification of a Web site, usually in ways that distort the original purpose of the site or seek to harm the site’s owner • FTP (File Transfer Protocol) is a communications protocol used to transfer files from one computer to another over a network; FTP is often used to upload Web pages to a Web server Digital Media, 3 e 21

Key Concepts • HTML (Hypertext Markup Language) is the code that identifies what and how content will be displayed on Web pages; Web browsers interpret HTML tags to show Web pages • Certain tags are needed to mark the beginning and end of the document in HTML; the content of the Web page is contained within the two codes <body> and </body> • The body of a document is composed of any number of elements, each of which may be further described by attributes; some attributes are themselves characterized by values • One way to learn HTML code is by copying the code from Web pages that have design elements you like; browsers make it possible to reveal the source code underlying the page Digital Media, 3 e 22

Key Concepts (continued) • Web editors are software programs that make it possible to write HTML code or to create Web pages in a WYSIWYG format; a key feature is balancing the ability to design a variety of elements while maintaining ease of use • How a Web page is displayed depends not only on how it is designed but also on the type of device on which the page is being viewed, the speed of the computer and Internet access of the user, and the type of browser • Web developers can take steps to minimize the variations in loading speed and in the appearance of their Web pages to try to minimize these barriers to access Digital Media, 3 e 23

Key Concepts (continued) • The proliferation of smartphones and other mobile browsing devices raises other questions since the display on these devices is very small compared to that of a computer • The World Wide Web Consortium (W 3 C) recommends various practices for making it possible for individuals with disabilities to have access to Web content • The W 3 C also recommends that Web developers adopt XHTML to code Web documents in order to make their display more standard across different browsers and devices Digital Media, 3 e 24