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

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 1980s in Europe –Switzerland –Tim Berners-Lee Mostly for academic circles Didn’t capture public’s imagination until 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 JavaScript 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 –You may use ALL lowercase –You may use a combination

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

Let’s Get Started!

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

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

Between the tags type: –YourName’s Webpage After the 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 ….. h t m l 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 – 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.

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

Internet Milestone Page 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 iCab

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.

Numbered and Bulleted Lists

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

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

Wrap It Up!! Save and view on browser

Maximize Notepad and make the following changes…

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

Embedding and Indenting Lists Let’s take a look at Step.by.Step1.5, Instructions 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: 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)