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

2. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 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. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 33 Objectives View HTML tags. Enter starting tags. Save correctly. Integrate levels of headings into Web pages. Create unordered, ordered, and embedded lists.

4. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 44 Vocabulary angle brackets apps Cascading Style Sheets (CSS) Flash gadgets home page HTML page Hypertext Markup Language (HTML) Java JavaScript landing page tags

5. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 55 Vocabulary (continued) Web browser Web page Web site welcome page XHTML XML

6. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 66 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 browsers whose job it is to locate and display Web information.

7. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 77 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

8. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 88 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.

9. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 99 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.

10. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E Uncovering the Page Beneath the Page The images below show the same page viewed in two different ways. 10 A Google Sites CSS-style Web page (sites.google.com) HTML tags for the Google Sites-created page

11. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E Uncovering the Page Beneath the Page (continued) How HTML Works: HTML tags usually appear in pairs enclosed in HTML and JavaScript BASICS There is a starting tag, And a closing tag, The only difference between the two tags is a slash 11

12. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 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

13. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 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. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.

15. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 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

16. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.

17. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E Saving and Viewing Your HTML Page (continued) File extensions identify file types. Common file extensions are 17

18. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 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. Very Big In the Middle Very Small

19. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 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: Unordered (or bulleted) lists Ordered (or numbered) lists

20. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E Using Numbered and Bulleted Lists (continued) Examples of lists 20 An unordered listAn ordered or numbered list

21. Lesson 1 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.