1 / 39

INTRODUCTION TO WEB PROGRAMMING WITH HTML AND JAVASCRIPT

INTRODUCTION TO WEB PROGRAMMING WITH HTML AND JAVASCRIPT. Lesson 1. Quick HTML Know-How. 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. TAGS.

awilson
Download Presentation

INTRODUCTION TO WEB PROGRAMMING WITH HTML AND JAVASCRIPT

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <Center> HELLO WORLD! </Center>

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

  6. Internet Milestone – Historyp. 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 Tipp. 389 • HTML is NOT case-sensitive • You may use ALL uppercase <CENTER> • You may use ALL lowercase <center> • You may use a combination <CeNtEr>

  16. File Types and Extensions • To tell one kind of file from another, computers often add file extensions to filenames. .doc Microsoft Word documents .rtf Microsoft Rich Text Format .wpd Corel WordPerfect documents .txt text files .html HTML files .htm HTML files on some computers

  17. Let’s Get Started!

  18. EVERY web page you construct MUST begin and include ….COMMENTS/DOCUMENTATION <!- - Your Name - - > use 2 hyphens, no space <!- - The date - -> <! - - the assignment number and description - ->

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

  20. Between the <TITLE> tags type: • YourName’s Webpage • After the <BODY> 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 • <H1>Monday</H1> • <H2>Tuesday</H2> • <H3>Wednesday</H3> • <H4>Thursday</H4> • <H5>Friday</H5> • <H6>Saturday</H6> • 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 • 1st 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: • <P> New Paragraph—adds a blank line after the tag when used as a single tag. • <BR>Break – kicks the text immediately following to the beginning of the next line • <P ALIGN = “CENTER”> centers all text following the tag until a </P> 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 • <HTML> • <HEAD> </HEAD> • <TITLE>Unordered Lists by your name</TITLE> • <BODY> • Next slide

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

  33. Wrap It Up!! • </BODY> • </HTML> • Save and view on browser

  34. Maximize Notepad and make the following changes…

  35. For a numbered list use these tags <OL> <LI>Monday</LI> <LI>Tuesday</LI> <LI>Wednesday</LI> </OL> What you see on the page is: Monday Tuesday Wednesday Ordered Lists Save As: OrderedLists.html View in browser

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

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

  38. 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)

More Related