1.56k likes | 1.98k Views
The Internet. Overview. An introduction to HTML Dynamic HTML Encryption Public Key Infrastructure Development of the Internet Web Browsers. Top 10 uses of Internet at Work (2000). 1 . E-mail : 73 % 2 . Business related research : 35 3 . Academic Research : 23
E N D
Overview • An introduction to HTML • Dynamic HTML • Encryption • Public Key Infrastructure • Development of the Internet • Web Browsers
Top 10 uses of Internet at Work (2000) • 1. E-mail: 73% • 2. Business related research: 35 • 3. Academic Research: 23 • 4. General browsing/surfing: 17 • 5. IT information: 11 • 6. Downloading Software: 11 • 7. News information: 10 • 8. Searching for personal information: 9 • 9. Reading Magazines/Newspapers: 7 • 10. Sports information: 7
How does the World Wide Web works? • User must have a program called "browser" running on the computer: Internet Explorer (IE) or Netscape • User establishes a connection with an ISP (Internet Service Provider) via dial-up or LAN (local area network). • User types in an URL (Uniform Resource Locator) as the target webpage address in browser's address field. For example, http://www.csd.uwo.ca/~cs031
(4-6 are behind the scene) Through ISPs, the English URL is translated into a numerical IP (Internet Protocol) address. Eg:130.100.11.3 • User's browser uses the IP address to establish a connection via local, regional, and/or national ISPs, with the target computer (a web server). • The web page that the user wants, HTML page, is sent back to user's browser. • User's browser interprets HTML commands, and displays the page with nice format to the user. HTML pages can have • Formatting information (text formatting, framing, etc.) • Hyperlinks (user clicks on and browser repeats steps 3-6) • Multimedia (pictures, audio, video, animations)
A Simple Example (simple.html) <h1>A very simple web page</h1> My name is <b>Charles Ling</b> <br><br> Here is a picture of mine <br> <IMG SRC=../c_ling2.jpg width=150> <br><br> My favourite thing to do is <ul> <li>Adventurous travelling around the world <li>Watching good movies <li>Reading news at <a href="http://www.cnn.com">CNN</a> </ul> For more info about me, click my <a href="http://www.csd.uwo.ca/faculty/ling">home page at UWO.</a>
Building Webpages • Writing html files directly (using notepad or other text editors) • Using MS Word and save as html • Using specialized software: MS Frontpage, Dreamwaver, etc. • Adding animations, forms, java, javascript, database functionality, …
Writing Simple html pages • Start notepad and writing html code directly • Save it as an html file (eg, my.html) • Start browser (eg, Internet Explore) • Click file > open, click browse to locate and open the html file (eg, my.html). • You will see how the html file is displayed!
HTML • HTML – HyperText Markup Language • A language used to define the content of, and the presentation instructions for, a Web document
When a browser presents a Web document, the browser scans the document and applies the presentation instructions to the content • Content that does not have presentation instructions will be presented using default instructions built into the browser
HTML documents must employ a simple format so anyone can create documents • HTML documents are stored in text (ASCII) files • This type of document can be created using any editor that allows you to save the document as a text file
To combine the content and the presentation instructions in the same file, there must be a way to distinguish between these two components • In HTML, the presentation instructions are inserted as “tags” • Anything that isn’t a presentation instruction is content
HTML tags normally occur in pairs • The pair of tags surround the content to which they apply • A start tag is indicated with angle brackets • <TAG> • An end tag is indicated with a slash after the opening angle bracket • </TAG>
HTML has a set of predefined tags • These tags can be used to • Control how the text in the document is displayed • Insert images into the document • Insert links to other documents
Document Tags • HTML documents are enclosed within <HTML> and </HTML> tags • Every HTML document will have a head and a body • The document head is enclosed within the <HEAD> and </HEAD> tags • The body is enclosed within the <BODY> and </BODY> tags
The basic structure of an HTML document is • The <TITLE> within the <HEAD> is displayed in the title bar of the browser
The <HEAD> of the document contains information used by the browser • All of the content for the document and the associated presentation instructions are placed inside the <BODY> tags
Formatting Tags • HTML contains tag definitions that allow you to control • Headings • Style • Ordered Lists • Unordered Lists • Definition Lists • etc.
Heading Tags • There are six heading levels • The levels are named H1, H2, H3, … H6 where H1 is the largest and H6 is the smallest • To create a heading, you enclose the text of the heading inside the opening and closing tags for the heading level
Physical Style Tags • Used to control the display of text • <B> - bold • <I> - italics • <U> - underline • <TT> - typewriter type face
Logical Style Tags • Examples of logical style tags • <EM> - for emphasis • <STRONG> - stronger emphasis • <CITE> - citation • <CODE> - computer code
Layout Style Tags • Used to control text layout • <CENTER> - center the text • <P> - new paragraph • <BR> - break, start a new line • <HR> - horizontal rule, draw a line
Lists • Lists of data can be defined using • Ordered List – enumerated lists • Unordered List – bulleted lists • Definition List – lists that are made of terms and their associated definitions
Ordered List • Use the <OL> and </OL> tags to start and end an ordered list • Within the ordered list, the list item (<LI>) tag is used to indicate the items on the list • The VALUE tag can be used to set the value of a list item • The START parameter is used to control the value of the first item
The TYPE parameter controls what enumeration scheme is used • The types are: • 1 – numbers (default) • a – lower case letters • A – upper case letters • i – small Roman numerals • I – large Roman numerals
Unordered List • Use the <UL> and </UL> tags to start and end an unordered list • Within the unordered list, the list item (<LI>) tag is used to identify the items on the list
The TYPE parameter can be used to control the look of the list • The types are: • Disc – a solid disc • Circle – a hollow circle • Square – a square symbol
Definition List • The <DL> and </DL> tags define the Definition List • The <DT> tag is used to indicate a definition term • The <DD> tag is used to indicate a definition
URL • An URL is a Uniform Resource Locator • An URL contains information about • The address of a document on the Internet • The protocol that will be used to access the document
Protocols • HTTP – HyperText Transfer Protocol • Designed to transmit files on the World Wide Web • FTP – File Transfer Protocol • Designed to transmit files over the Internet (before the Web developed) • ftp://ftp.csd.uwo.ca • Email: mailto:ling@csd.uwo.ca • These protocols are sets of rules that dictate how files are transmitted between computers
URL Example • In the following URL example, the protocol to be used is HTTP (before the “://”) • The document is “browse.html” and it is located in the “selected” folder at the World Wide Web site for UWO in Canada
Images • Images are added to documents using the <IMG> tag • A </IMG> tag is not required • The SRC parameter is used to indicate the SouRCe of the image
Image Formats • Standard image formats are needed so images can be • stored • retrieved • transmitted over the Web
Examples of image formats used on the Web are: • GIF – Graphics Interchange Format • JPG ( JPEG ) – Joint Photographic Experts Group • PNG – Portable Network Graphics • BMP – Windows Bitmap
Graphics Interchange Format • Uses the Lempel-Ziv Welch (LZW) compression algorithm • The algorithm searches the image for big blocks of the same color and then compresses these blocks • This compression reduces the size of the image
The algorithm also uses an indexed color scheme, in which a custom color palette for the image is selected using only 256 of the over 16 million available colors • This format is used when the image does not contain a wide range of colors or color shades
Joint Photographic Experts Group • Images can contain millions of colors • Uses Lossy compression algorithm • When the image is compressed it permanently loses some of its quality • The algorithm looks for similar colors (like a range of reds) and chooses the same red for very close shades