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 • HTML tags work with any Web browser – Tags usually appear in pairs <Center> HELLO WORLD! </Center>

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

Internet Milestone – History p. 386 • The World Wide Web (WWW) was created in the late 1980 s 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

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

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

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

Welcome Page • Designed especially for new visitors to a Web site

HTML page • Any document created in HTML

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

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 Java. Script work together.

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

Net Tip p. 389 • HTML is NOT case-sensitive – You may use ALL uppercase <CENTER> – You may use ALL lowercase <center> – You may use a combination <Ce. Nt. Er>

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 Word. Perfect documents. txt text files. html HTML files. htm HTML files on some computers

Let’s Get Started!

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 - ->

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

• Between the <TITLE> tags type: – Your. Name’s Webpage • After the <BODY> tag type: – Your full name. – Your birthday – Your year in school

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.

To SAVE: • File • Save As. . . • Give your file a name with …. . html extension

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

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.

Using Headings • Headings are used to divide sections of text – <H 1>Monday</H 1> – <H 2>Tuesday</H 2> – <H 3>Wednesday</H 3> – <H 4>Thursday</H 4> – <H 5>Friday</H 5> – <H 6>Saturday</H 6> • 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.

Do Step. by. Step 1. 4 on pages 397 and 398 • Save as: two. html • Open in Browser

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

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 i. Cab

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.

Numbered and Bulleted Lists

Let’s Do It!! • Create a Web Page • <HTML> • <HEAD> </HEAD> • <TITLE>Unordered Lists by your name</TITLE> • <BODY> » Next slide

Unordered Lists • 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

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

Maximize Notepad and make the following changes…

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

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

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

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: two. TAT. 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)