1. 1 CSC160 Introduction to HTML

2. 2 What Is a Computer?  A computer is a programmable machine that can store data, interacts with users and devices, and executes programs.  Data includes words, numbers, images, sounds, ….  Execute instructions to perform operations on data and produce the results.  Instructions tell the computer what to do with the given data.  Computers can handle repetitive chores without becoming bored or exhausted and at a great speed.  Computers are flexible to be able to handle a wide range of tasks

3. Computer Hardware The Physical Components of a Computer I/O interface Connects input/output devices to the computer and allows the computer to exchange information with the outside Input device: inputs data and commands into the computer. E.g., keyboard, mouse, scanner, microphone Output device: outputs the data to users. E.g., printer, monitor Memory unit Stores data and instructions. 3

4. Computer Hardware (cont’d) Central processing unit (CPU) Interpret and executes instructions Control unit: interprets the instructions & control their execution Algorithmic/logic unit: perform mathematical/boolean operations Other peripheral devices Auxiliary storage device (E.g., disk drive, CD_ROM and DVD_ROM) Communication device (E.g., modem) To communicate and exchange data with another computer 4

5. 5 Basic Components of a Computer Central processing unit Memory unit Input device Output device Other peripheral devices

6. 6 Schematic Design of a Personal Computer CPU (Central Processing Unit): the brain of a computer Memory: RAM (the main memory) Hard disk, floppy disk and CD-ROM (the secondary storage) I/O interface I/O interface (ports, graphic card, sound card and network card) connects different kinds of input devices (keyboard and mouse) and output devices (printer, monitor and speakers) to the computer.

7. 7 Computer Programs A program is a sequence of instructions and decisions that the computer carries out to achieve a task. Computer programming is the act of designing and implementing programs. A computer itself cannot analyze a problem and come up with the steps to solve it. Without programs, a computer can do nothing. A programmer designs and implements these programs.

8. 8 Computer Networking  To interconnect computers and devices together via communication media and devices in order to communicate and exchange information. Application examples Email Multimedia streaming (e.g., Video-on-demand) Internet telephony Distributed games Instant messaging World Wide Web Many other applications

9. 9 World Wide Web & Web Pages World Wide Web contains millions of documents (Web pages) stored on Web servers that are distributed all over the world A Web page is a text file that contains text, graphics, video, sound, links to other Web documents, and so on. To access and view a web page, open it in a web browser E.g., Microsoft Internet Explorer and Netscape Navigator

10. 10 Develop a Web Page We will learn to use HTML & JavaScript HTML (Hypertext Markup Language) Specifies what information to be displayed on a web page JavaScript It is usually placed in an HTML file to make the Web page more interactive and dynamic Text editor: notepad, JS-IDE, etc. Where is the Web page placed? To make your Web pages available to everyone on the Internet, the Web page and all supporting files must be placed on a computer that acts as a Web server. You may use a commercial or free Web-hosting service EKU student web place Each EKU student has 10MB web space EKU Code of Ethics at http://www.itds.eku.edu/codeofethics/http://www.itds.eku.edu/codeofethics/ No abusive, offensive, or commercial material

11. 11 What is HTML? A markup language that specifies what information is to be displayed in a web page It is written as plain text that any Web browser can read Display static information Rendong's Web Page. Welcome to Rendong's Web Page!

12. 12 What is JavaScript? A web scripting language used to write web pages It is usually placed in an HTML file to make the Web page more interactive and dynamic … To insert JavaScript code into an HTML document Rendong's Web Page. window.alert("Welcome to CSC160!"); Welcome to Rendong's Web Page! document.write("This writes text to the page.");

13. 13 General Web Page Structure Page Title My web page content

14. 14 HTML Tags: Basic Elements … Start/end of a web page … Page header. Generally includes page title, keywords … Page title, appears in the title bar of the browser … Page body: main content of a Web page Can specify page color, text color, etc. by adding attributes

15. 15 HTML Tags: Text Phrases & Paragraphs Phrases & paragraphs Line break: starts a new line in a Web page (or … ) Start a new paragraph Formatting … : bold text … : italicized text

16. 16 HTML Tags: Lists Numbered lists Unnumbered (bullet) lists: item1 item2 item1 item2

17. 17 HTML Tags: Tables … : identifies a table … : specifies a data cell as a table heading … : defines a horizontal row … : defines a data cell within that row Col1 Col2 Col3 data11 data12 data13 data21 data22 data23 data31 data32 data33

18. 18 HTML Tags: Hyperlinks (1) User text Uniform Resource Locator (URL) Specifies the address of a Web page, a Internet resource, or a file. User text Describes this link and where it goes. Linking to files and Email Relative link To a related page (on the same server, often in the same folder) Absolute link To an specific URL (on a same or different server) Email links Snoopy is typing. EKU Home My email address

19. 19 HTML Tags: Hyperlinks (2) Linking within a page Point to a specific spot inside an HTML document Anchor is a named point on a Web page. Defining an anchor … Linking to an anchor … Assignments for CSC 160 Assignment 1 Assignment 2 Assignment 1 (Due 1/23) … Assignment 2 (Due 2/4) …

20. 20 HTML Tags: Images (1) Adding an image Adding alternate text

21. 21 HTML Tags: Images (2) Adjusting the height and width How many pixels, or what percentage of the original height/width

22. 22 HTML Tags: Images (3) Thumbnail images To link from one image to another Create a smaller version of the image file, called a thumbnail Click the thumbnail to open the larger image file

23. 23 HTML Tags: Page Colors & Background Background and text colors TEXT: specifies the color of text on the page as ‘color1’ BGCOLOR: specifies the color of the background as ‘color2’ Colors can also be specified as “#rrggbb” “rr”, “gg”, “bb” are hexadecimal values from 00 to ff specifying the amount of red, green, and blue for the desired color Background images BODY TEXT="#ff0000" BGCOLOR="#ffff66"

24. 24 HTML Tags: Other Frequently Used Tags Horizontal rule … Center the stuff between the tags Headers … – Header 1 (really large/bold text) … - Header 2 (smaller and less bold) … … – Header 6 (the smallest and least bold header)

25. 25 Some Helpful Web Sites Some web sites to help in selecting colors http://www.asahi-net.or.jp/~FX6M-FJMY /java09e.html http://www.antiques-internet.com/useful_things/colors.htm http://www.cs.brown.edu/cgi-bin/colorcomb HTML Reference Sites http://huizen.dds.nl/~pbb/webref/index.htm http://www.htmlhelp.com/reference/html40/ http://www.mcli.dist.maricopa.edu/tut/ References for good web pages http://www.webstyleguide.com/ http://www.ology.org/tilt/cgh/