1. Lesson 1Quick HTML Know-How HTML and JavaScript BASICS, 4th Edition Barksdale / Turner

2. About the Presentations • The presentations cover the objectives found in the opening of each lesson. • All lesson objectives are listed in the beginning of each presentation. • You may customize the presentations to fit your class needs. • Some figures from the lessons are included. A complete set of images from the book can be found on the Instructor Resources disc.

3. Objectives • View HTML tags. • Enter starting tags. • Save correctly. • Integrate levels of headings into Web pages. • Create unordered, ordered, and embedded lists. 3

4. angle brackets apps Cascading Style Sheets (CSS) Flash gadgets home page HTML page Hypertext Markup Language (HTML) Java JavaScript landing page tags Vocabulary 4

5. Vocabulary (continued) Web browser Web page Web site welcome page XHTML XML 5 5

6. Communicating on the Web • Web pages share text, images, gadgets, maps, video, sound, and multimedia effects with a simple click on any computer. • Web sites are collections of related Web pages. • Web pages are displayed by Web browserswhose job it is to locate and display Web information. 6

7. Communicating on the Web (continued) • Dominant Web browser: Microsoft’s Internet Explorer • Early forerunners that went out of business: Mosaic and Netscape Navigator • New strong competitors: Mozilla’s Firefox, Apple’s Safari, and Google’s Chrome Popular Browsers 7

8. Interfacing HTML and Other Tools Hypertext Markup Language or HTML is the original Web page creation tool. Allows you to create dynamic Web pages Tells Web browsers how Web pages should look Works on Macintosh, Linux, and Windows Cascading Style Sheets (CSS) create convenient ways to determine the style on multiple Web site pages. 8 8

9. Interfacing HTML and Other Tools (continued) XML and XHTML give new power to HTML. Other languages work with HTML: Java, a programming language used widely with Internet applications Flash, a high-impact multimedia creation tool JavaScript, a Java-like scripting language used to create miniapplications called apps, and gadgets HTML tags let you determine the placement of content on Web pages. 9 9

10. Uncovering the Page Beneath the Page • The images below show the same page viewed in two different ways. A Google Sites CSS-style Web page (sites.google.com) HTML tags for the Google Sites-created page 10

11. Uncovering the Page Beneath the Page (continued) • How HTML Works: • HTML tags usually appear in pairs enclosed in <angle brackets> <center>HTML and JavaScript BASICS</center> • There is a starting tag, <center> • And a closing tag, </center> • The only difference between the two tags is a slash 11

12. Entering Your Mystery Tags the Old-Fashioned Way The many terms used to describe pages created with HTML tags: Web page: HTML page on the World Wide Web Home page: The main Web page of a Web site Welcome page: Designed for new visitors Landing page: Targeted “welcome” page used by Web advertisers Web site: Collection of many interconnected Web pages 12 12

13. Entering Your Mystery Tags the Old-Fashioned Way (continued) • Creating a Powerful Advantage with Tags: • There are many ways to create HTML tags. • You can use specialized software, such as Expression Web 2 by Microsoft or Dreamweaver by Adobe • You can use free tools such as Sites from Google (sites.google.com). • You can write your own tags using a text editor 13

14. Entering Your Mystery Tags the Old-Fashioned Way (continued) Why Learn HTML?: You will be able to Develop a deeper understanding of how HTML works. Quickly troubleshoot Web page errors. View other pages and achieved the same effects. Understand the file/folder structure of Web servers. Understand how different Web tools work together. 14 14

15. Entering Your Mystery Tags the Old-Fashioned Way (continued) What to Use: Any text editor will work for creating both HTML tags and JavaScript code In Windows, you can use Notepad On a Macintosh, you can use SimpleText 15 15

16. Saving and Viewing Your HTML Page HTML files are text files with an .html or .htm extension. The .html or .htm extensions signal to the Web browser that this is an HTML text file. All of the sophisticated word-processing commands are erased, leaving just the characters. Saving as text allows HTML files to move quickly over the Web. 16 16

17. Saving and Viewing Your HTML Page (continued) • File extensions identify file types. Common file extensions are 17

18. Using Headings Most printed documents use headings to help the reader find important portions of text. HTML has six standard headings or title sizes. Anything inside the heading tags will be made larger or smaller, depending on the number. Heading numbers indicate the level of importance for marked headings, with 1 being the most prominent and 6 being the least prominent. <h1>Very Big</h1> <h3>In the Middle</h3> <h6>Very Small</h6> 18 18

19. Using Numbered and Bulleted Lists One of the most powerful ways to organize information on a Web page is by the use of lists. There are several kinds of lists, including the following: <ul></ul> Unordered (or bulleted) lists <ol></ol> Ordered (or numbered) lists 19 19

20. Using Numbered and Bulleted Lists (continued) • Examples of lists An unordered list An ordered or numbered list 20

21. Summary In this lesson, you learned: How to identify HTML tags. How to enter your starting tags. How to save your HTML file correctly. How to integrate levels of headings into Web pages. How to create unordered, ordered, and embedded lists. 21 21