1. INTRODUCTION TO WEB PROGRAMMING WITH HTML AND JAVASCRIPT

2. Lesson 1 Quick HTML Know-How

3. HTML What does it stand for?? –Hyper Text Markup Language Official language of the World Wide Web The colors, pictures, and backgrounds on Web pages are determined by HTML tags

4. TAGS HTML tags work with any Web browser –Tags usually appear in pairs HELLO WORLD!

5. Under the Page Right Click and Choose View Source OR Click on View Menu and Choose Source Ctrl + U

6. Internet Milestone – History p. 386 The World Wide Web (WWW) was created in the late 1980s in Europe –Switzerland –Tim Berners-Lee Mostly for academic circles Didn’t capture public’s imagination until 1994. Mosaic – University of Illinois –First Web Browser –Marc Andressen

7. Hint The World Wide Web is a large Web of computer networks that share HTML files. Lots of tags and lots of ways to use them Remember: –HTML tags are just instructions to the web browser –They tell the browser how to display information

8. Web Page Web document created in HTML that can be placed on WWW

9. Home Page The main or primary page for a corporation, organization, etc.

10. Welcome Page Designed especially for new visitors to a Web site

11. HTML page Any document created in HTML

12. Web Site Include a collection of many interconnected Web pages organized by a specific company, organization, college or university.

13. 5 Reasons for Entering Tags the “Old-Fashioned Way” refer to p. 388 You will develop a deeper understanding of how HTML really works You will be able to troubleshoot Web pages when picky little errors occur. You will be able to view other pages and learn how they achieved certain effects. You will better understand the file and folder structures found on Web computers. Most importantly, you will understand how HTML and JavaScript work together.

14. You Need 2 Things to Create Your Very Own Web Page 1. a basic word processing program….like Notepad –Start | Programs | Accessories | Notepad 2. a web browser …. Like Microsoft Internet Explorer OR Netscape Navigator File | Open... | locate your html file

15. Net Tip p. 389 HTML is NOT case-sensitive –You may use ALL uppercase –You may use ALL lowercase –You may use a combination

16. File Types and Extensions To tell one kind of file from another, computers often add file extensions to filenames..doc Microsoft Word documents.rtfMicrosoft Rich Text Format.wpdCorel WordPerfect documents.txttext files.htmlHTML files.htmHTML files on some computers

17. Let’s Get Started!

18. EVERY web page you construct MUST begin and include …. COMMENTS/DOCUMENTATION use 2 hyphens, no space

19. Opening Tags -- wakes up browser and lets it know a web page is about to come on. -- used for special instructions by the web designer. -- anything placed within these tags is shown on the browser’s title bar/tabs -- anything placed within these tags is viewed by the surfer -- ends the web page

20. Between the tags type: –YourName’s Webpage After the tag type: –Your full name. –Your birthday –Your year in school

21. Save and View Your HTML Page HTML documents are text files. –Save them in the simplest way Saving as text allows HTML to move quickly over the Web. BEFORE YOU SAVE: 1. Create a folder -- HTML-kah 2. Know what 3 letter file extension to assign your file.

22. To SAVE: File Save As... Give your file a name with ….. h t m l extension

23. Let’s PREVIEW! Open a web browser …. Like Microsoft Internet Explorer OR Netscape Navigator File | Open... | locate your html file

24. Participation Points!!! In your notebook leave one page for listing HTML TAGS Do Step.by.Step Exercises 1.2 and 1.3 on pages 389 and 391.

25. Using Headings Headings are used to divide sections of text – Monday – Tuesday – Wednesday – Thursday – Friday – Saturday The higher the number the smaller the font. Text enclosed within these tags appear to be bold and there is a blank line left AFTER the text.

26. Do Step.by.Step 1.4 on pages 397 and 398 Save as: two. html Open in Browser

27. Internet Milestone Page 396 1 st Browser: Mosaic 1994: Netscape Navigator entered the market 1995: Microsoft Internet Explorer

28. Google or Bing: Web Browsers Identify 5 different browsers that are on the market today: Chrome Opera Safari Camino Firefox Torch Internet Explorer Seamonkey Arachne AOL Maxthon Konquerer iCab

29. Line Spacing Tags: – New Paragraph—adds a blank line after the tag when used as a single tag. – Break – kicks the text immediately following to the beginning of the next line – centers all text following the tag until a is reached. You can use “LEFT” or “RIGHT” in aligning paragraphs.

30. Numbered and Bulleted Lists

31. Let’s Do It!! Create a Web Page Unordered Lists by your name »Next slide

32. Unordered Lists For a bulleted list use these tags Monday Tuesday Wednesday What you see on the page is: Monday Tuesday Wednesday

33. Wrap It Up!! Save and view on browser

34. Maximize Notepad and make the following changes…

35. Ordered Lists For a numbered list use these tags Monday Tuesday Wednesday What you see on the page is: 1.Monday 2.Tuesday 3.Wednesday Save As: OrderedLists.html View in browser

37. Embedding and Indenting Lists Let’s take a look at Step.by.Step1.5, Instructions 10-13 on pages 403 and 404

38. Net Careers – p. 404 Webmaster –Is the person assigned to maintain Web pages for a Web site.

39. Assignment All Step.by.Step Exercises 1.2 through 1.5 Do the Thinking About Technology on p. 399 AFTER Step.by.Step 1.4. Name it: twoTAT.html Worksheets and Workbook Projects 1-1, 1-2, 1-3, and 1-4 attached to your worksheet. Extra HTML Exercises (handout from Mrs. Hatfill)