CSC 160 Introduction to HTML 1 What Is
- Slides: 25
CSC 160 Introduction to HTML 1
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 2
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
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
Basic Components of a Computer Central processing unit Input device Output device Memory unit Other peripheral devices 5
Schematic Design of a Personal Computer • • CPU (Central Processing Unit): the brain of a computer Memory: • I/O interface • • RAM (the main memory) Hard disk, floppy disk and CD-ROM (the secondary storage) • 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. 6
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. 7
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 8
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 9
Develop a Web Page • We will learn to use HTML & Java. Script • HTML (Hypertext Markup Language) • Specifies what information to be displayed on a web page • Java. Script • 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 10 MB web space • EKU Code of Ethics at http: //www. itds. eku. edu/codeofethics/ • No abusive, offensive, or commercial material 10
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 <HTML> <HEAD> <TITLE> Rendong's Web Page. </TITLE> </HEAD> <BODY> Welcome to Rendong's Web Page! </BODY> </HTML> 11
What is Java. Script? • 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 • <SCRIPT>…</SCRIPT> • To insert Java. Script code into an HTML document <HTML> <HEAD> <TITLE> Rendong's Web Page. </TITLE> <SCRIPT> window. alert("Welcome to CSC 160!"); </SCRIPT> </HEAD> <BODY> Welcome to Rendong's Web Page! <SCRIPT> document. write("This writes text to the page. "); </SCRIPT> </BODY> </HTML> 12
General Web Page Structure <HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <BODY> My web page content </BODY> </HTML> 13
HTML Tags: Basic Elements • <HTML>…</HTML> • Start/end of a web page • <HEAD>…</HEAD> • Page header. Generally includes page title, keywords • <TITLE>…</TITLE> • Page title, appears in the title bar of the browser • <BODY>…</BODY> • Page body: main content of a Web page • Can specify page color, text color, etc. by adding attributes 14
HTML Tags: Text Phrases & Paragraphs • Phrases & paragraphs • <BR> • Line break: starts a new line in a Web page • <P> (or <P>…</P>) • Start a new paragraph • Formatting • <B>…</B>: bold text • <I>…</I>: italicized text 15
HTML Tags: Lists • Numbered lists <OL> <LI> item 1 </LI> <LI> item 2 </LI> </OL> • Unnumbered (bullet) lists: <UL> <LI> item 1 </LI> <LI> item 2 </LI> </UL> 16
HTML Tags: Tables • <table>…</table>: identifies a table • <th>…</th>: specifies a data cell as a table heading <tr>…</tr>: defines a horizontal row • <td>…</td>: defines a data cell within that row <table> <tr> <th> Col 1</th> <tr> <td> data 11</td> <tr> <td> data 21</td> <tr> <td> data 31</td> </table> <th> Col 2</th> <td> data 12</td> <td> data 22</td> <td> data 32</td> <th> Col 3</th> <td> data 13</td> <td> data 23</td> <td> data 33</td> </tr> 17
HTML Tags: Hyperlinks (1) • <A HREF="url"> User text </A> • 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) <A HREF="snoopytyping. jpg">Snoopy is typing. </A> • Absolute link • To an specific URL (on a same or different server) <A HREF="http: //www. eku. edu"> EKU Home</A> • Email links <A HREF="mailto: rendong. bai@eku. edu"> My email address</A> 18
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 • <A NAME="xyz"> …</A> • Linking to an anchor • <A HREF="#xyz">…</A> • <A HREF="other. html#xyz">…</A> <H 2>Assignments for CSC 160</H 2> <UL> <LI><A HREF="#a 1">Assignment 1</A></LI> <LI><A HREF="#a 2">Assignment 2</A></LI> </UL> <A NAME="a 1"></A>Assignment 1 (Due 1/23) … <A NAME="a 2"></A>Assignment 2 (Due 2/4) … 19
HTML Tags: Images (1) • Adding an image • <img src="URL"> <img src="snoopytyping. jpg"> • Adding alternate text • <img src="URL" ALT="text displayed when someone selects or moves the mouse over this image"> <img src="snoopytyping. jpg" alt="Snoopy is learning Java. Script!"> 20
HTML Tags: Images (2) • Adjusting the height and width • <img src="URL" height="pixel or percent" width="pixel or percent"> • How many pixels, or <img src="snoopytyping. jpg" alt="Snoopy is learning Java. Script!" height="120" width="160"> • what percentage of the original height/width <img src="snoopytyping. jpg" alt="Snoopy is learning Java. Script!" height="20%" width="20%"> 21
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 <a href="snoopytyping. jpg"> <img src="snoopytyping. jpg" alt="Snoopy is learning Java. Script! Click here to view a larger image. " height="120" width="160"> </a> 22
HTML Tags: Page Colors & Background • Background and text colors • <BODY TEXT="color 1" BGCOLOR="color 2"> • TEXT: specifies the color of text on the page as ‘color 1’ • BGCOLOR: specifies the color of the background as ‘color 2’ <BODY TEXT="blue" BGCOLOR="lightgreen"> • 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 BODY TEXT="#ff 0000" BGCOLOR="#ffff 66" • Background images <BODY TEXT="blue" BACKGROUND="background. jpg"> 23
HTML Tags: Other Frequently Used Tags • <HR> • Horizontal rule • <CENTER>…</CENTER> • Center the stuff between the tags • Headers • • <H 1>…</H 1> – Header 1 (really large/bold text) <H 2>…</H 2> - Header 2 (smaller and less bold) … <H 6>…</H 6> – Header 6 (the smallest and least bold header) 24
Some Helpful Web Sites • Some web sites to help in selecting colors • http: //www. asahi-net. or. jp/~FX 6 M-FJMY /java 09 e. 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/html 40/ • http: //www. mcli. dist. maricopa. edu/tut/ • References for good web pages • http: //www. webstyleguide. com/ • http: //www. ology. org/tilt/cgh/ 25