Transcript html
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 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 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 <CENTER> – You may use ALL lowercase <center> – You may use a combination <CeNtEr> 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 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: – YourName’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 – <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. Do Step.by.Step 1.4 on pages 397 and 398 • Save as: two. html • Open in Browser Internet Milestone • Page 396 • 1st 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: – <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: OrderedLists.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.Step1.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: 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)