04/22/2003CSCI 150:Introduction to Computer Science - Session 241 Introduction to Computer Science CSCI 50 Section 002 Session 24 Dr. Richard J. Bonneau IONA Technologies

04/22/2003CSCI 150:Introduction to Computer Science - Session 242 Today’s Outline Today’s ‘notices’ Tonight’s Topic –HTML – Hyper Text Markup Language –Web Pages – constructed from HTML –Lab session with lab exercises at the end Next Class Topics –Chapter 10 - Virtual Environments for Computing –AKA ‘Operating Systems’ –CEF session to start off class on Tuesday – 15 minutes »Please be on time to get this done punctually!

04/22/2003CSCI 150:Introduction to Computer Science - Session 243 Today’s Notices Office Swords 339 Extension 2284 Office hours Tu-Th 4-6:30 and after class Homework 7 Status ??? Lab today … HTML and Web Pages Final Exam: Sat. May 3 rd 2:30 Here! Haberlin 408!

04/22/2003CSCI 150:Introduction to Computer Science - Session 244 Summary of Last Session Computer Architecture –hardware components –instruction set Assembly Language –how to program the instruction’s instruction set P88 - a simple, sample computer architecture COMP1 - P88 simulator PASCAL --> Assembly Language - Translation How does it happen? Production rules and semantics COMP2 : a Visual Compiler Pascal to P88

04/22/2003CSCI 150:Introduction to Computer Science - Session 245 Overview of HTML Getting Started – using PFE and Internet Explorer! HTML/Web Page Development Cycle Definitions Web Pages and Links HTML – tags Formatting Tags Lists of information Linking to other pages Graphics Advanced HTML Topics Lab Exercise – Personal Web Pages for Courses

04/22/2003CSCI 150:Introduction to Computer Science - Session 246 Getting Started – PFE and Internet Explorer !! Can use PFE again - now to compose Web Pages using plain text Web pages typically end with the extension.html (or.htm) Use Internet Explorer to “test” or “view” the HTML “programming” Let’s take a look at what a web page looks like – underneath !!! Or more simply:

04/22/2003CSCI 150:Introduction to Computer Science - Session 247 The HTML/Web Page Development Cycle PFE Web page 1 Web Page 2 Web Page 3 Internet Explorer Create Or update View and Inspect Make changes Link Page1.html Page2.html Page3.html View Use Refresh button to see updated pages

04/22/2003CSCI 150:Introduction to Computer Science - Session 248 Structure of HTML files Top level …. –Contains a HEAD and a BODY: Head … Body … Create a simple web page (see next page) –save it as lab1.html on your D: drive Open it (“render it”) in Internet Explorer –see following slide

04/22/2003CSCI 150:Introduction to Computer Science - Session 249 LAB1.HTML CSCI Lab 1 My Lab Experience Labs are useful to get hands on access to concepts and tools. CSCI 150 Labs teach me a lot! Header Section Body Section

04/22/2003CSCI 150:Introduction to Computer Science - Session 2410 Seeing your Page in Internet Explorer Bring up Internet Explorer On Menu Bar, select File Then Open Then Browse And navigate to your LAB1.HTML file Press OK You should then see your web page! Should look like the next slide.. To check the HTML go to View and Source –Works for ANY page on the web! –Good way to look at complex web pages!

04/22/2003CSCI 150:Introduction to Computer Science - Session 2411

04/22/2003CSCI 150:Introduction to Computer Science - Session 2412 Definitions HTML – Hyper Text Markup Language Hyper Text … –Ability to transcend “standard” or “static” text –Active link from one place on a web page to a completely different page – located anywhere! … Markup … –Able to supply both raw text (content) and how it should look (presentation) … Language –Formal specifications for how to define things –Syntax – carried primarily through HTML tags

04/22/2003CSCI 150:Introduction to Computer Science - Session 2413 HTML – text and tags Any “plain” text (not contained within ) you type will be shown on the output page – but it will not preserve your spacing or blank lines.. Just the facts … Any tags (things within matching - aka angle brackets ) are used to tell the browser what to do and do NOT show up in the output page – “formatting directives” Some tags are simple -, - for starting a new paragraph or a new line Some tags are complex and need a begin and a start tag: – …. –Ending tag is same as starting tag with / in front! –What is included between the tags is important!! Some tags contain additional information within the angle brackets –Information is called an attribute – usually name=“value” pair: –E.g. Information - HREF attribute

04/22/2003CSCI 150:Introduction to Computer Science - Session 2414 Web Pages and Links The power of Web Pages is that they are not self-contained and can point to each other through links Allows Web Page authors (or webmasters) the freedom to organize information into useful units for quick download and readability but still allow complex information to be provided through links Links are what allow the text to be HyperText Links show up in most browsers as underlined text which you can just click on to link to another page – on the same computer or on another continent! Can have links back to existing pages (I.e. pages you have already seen, like the “back” button) or to new pages –New page can be on the same web site (local page) –New page can be anywhere on the Internet! (remote page)

04/22/2003CSCI 150:Introduction to Computer Science - Session 2415 Formatting Tags Paragraph tag – - ends current line, inserts blank line Break tag (new line) – - ends current line Horizontal line – Header tags – H1 through H6 – From bigger to smaller in relative size – some very important information –… – some less important information Bold, italic, and other text formatting –,, (typewriter style!)

04/22/2003CSCI 150:Introduction to Computer Science - Session 2416 Lists of information Create lists with indentation and bullets/numbers Need to start a list, end a list and identify each item in the list Several different types of lists supported –ordered (OL) – with numbers –unordered (UL) – without numbers – just bullets Example – unordered (UL): First Item Second Item Third Item Can be nested – lists within lists – even different types of lists within each other (ordered or not)

04/22/2003CSCI 150:Introduction to Computer Science - Session 2417 Linking to other Web pages The link tag is (A is for “anchor”) Text in link The HREF attribute part of the tag identifies the other page to be linked (HREF = HyperText Reference) –Must be enclosed within (double) quotes Can be as simple as the name of a file in the same folder as the original file / Web page – Page 1 Could be much more complicated – a “URL” – Uniform Resource Locator – Holy Cross

04/22/2003CSCI 150:Introduction to Computer Science - Session 2418 Let’s take a look at Test.html Show the actual HTML file and the IE pages side by side to see what things look like …

04/22/2003CSCI 150:Introduction to Computer Science - Session 2419 Adding Graphics to your page A number of useful attributes for such things as: –Alignment of graphic within page –Alternate text – what to show if no graphics are allowed by the browser or the user –Width and height of graphic on the page “Name of graphics file” can be –A local file name (D:MyPicture.JPG) –a full URL for some graphics file somewhere else on the internet » e.g. Often used within a link tag to supply a graphic to click on instead of text: – –This makes a link with a graphic to click on instead of text!

04/22/2003CSCI 150:Introduction to Computer Science - Session 2420 Advanced HTML Topics Fonts and Size and Color and … Forms – way to get information from user ~ readln in Pascal !! Tables –Allow you to organize information/data into rows and columns for better readability –Cells in the table can contain text, graphics and links to other pages Frames –Allow you to organize browser page into a number of independent frames with different pages being displayed in each frame, each scrollable and adjustable Invoking programs from within a web page –Java applets – remember the sorting demo a few weeks back? Written in Java and then run as an applet from a web page –JavaScript – mini Java programs –DHTML – Dynamic HTML – extensions to HTML to provide dynamic capabilities –And so on … Much much more in HTML specifically and Web Pages in general –Tools to simplify composition, publishing and editing web pages –E.g. – Microsoft Word! And free tools on the web –On line instruction – go to Google and type HTML Course –e.g. –Or –

04/22/2003CSCI 150:Introduction to Computer Science - Session 2421 Lab Exercise – Create 3 Personal Web Pages for Your Courses Create three web pages = three text files on your D drive: Try to use as many of the different tags discussed in class today: 1.Index.html 1.Your Name 2.Class/Year of Graduation 3.Major Field of Study 4.Any other information you’d like to include 5.A link to the holy cross web site 1.Use HREF=“ in your link taghttp:// 6.A Bulleted list of your courses 1.At least two of these bullets must be a link to two more pages 2.Page1.html 1.Information about one of your favorite courses – be creative! 2.Link back to index.html page 3.Page2.html 1.Information about another one of your (favorite?) courses – namely CSCI 150 !!!- (maybe even a link to the start page for the course?) 2.Link back to index.html page Print out your pages (both in text/html format (from PFE) and from within IE) Store them onto a diskette to be handed in at the end of the lab Add some graphics if you wish and have a graphics file to add in! E.g. HC graphics from HC web site? See Handout

04/22/2003CSCI 150:Introduction to Computer Science - Session 2422 Summary HTML Summary list here ! rbonneau: Need to fill in this page with outline info? rbonneau: Need to fill in this page with outline info?

04/22/2003CSCI 150:Introduction to Computer Science - Session 2423 Next Session Thursday – April 24 CEF survey at the start of class – please try to be on time! Lecture on Chapter 11 - Computer Communications - also known as Networking Computers! Assignment #8 due!