CISC 1400 Discrete Structures

Size: px

Start display at page:

Download "CISC 1400 Discrete Structures"

Cynthia Davidson
6 years ago
Views:

1 CISC 1400 Discrete Structures Building a Website 1 The Internet A "network of networks" that consists of millions of smaller domestic, academic, business, and government networks. Worldwide, publicly accessible Mixing computing and communications technologies. Carrying information and services, such as electronic mail, online chat, file transfer, and the interlinked Web pages and other documents of the World Wide Web.

The World Wide Web Introduced in 1990 by Tim Berners- Lee A system of interlinked, hypertext documents (such as HTML files) accessed via the Internet.

2 The World Wide Web Introduced in 1990 by Tim Berners- Lee A system of interlinked, hypertext documents (such as HTML files) accessed via the Internet. With a web browser, a user views web pages that may contain text, images, and other multimedia and navigates between them using hyperlinks. Everybody Wants a Web Site Figure is from Head First Servlets & JSP

Client-Server Model A web browser (client) lets a user request a resource. A web server takes the client request and gives something back to the client. Clients and servers know HTML.

3 Client-Server Model A web browser (client) lets a user request a resource. A web server takes the client request and gives something back to the client. Clients and servers know HTML. Request Response Client What is Web Browser? A Web browser is a software that enables a user to display and interact with the Web s rich multimedia content such as text, images, and other information. The Web could be the World Wide Web, a local area network, or a web page on your own machine. Internet Explorer, Firefox or Chrome The appearance of a Web page may differ between browsers.

4 URL & Hyperlinks URL (Uniform/Universal Resource Locator) Web page address typing in Address field HTTP (HyperText Transfer Protocol) Protocol for transferring data over the Internet HTTPS (Secure HyperText Transfer Protocol) Protocol for transferring encrypted data over the Internet. Hyperlinks Graphical or textual elements Click to link to another Web page Loads new page into browser window What is XHTML? EXtensible HyperText Markup Language A markup language that specifies the format of the text that is displayed in a Web browser. Separation of the presentation of a document from the structure of the document s information Based on HTML

5 Editing XHTML XHTML documents Source-code form Text editor (e.g. Notepad, emacs, etc.).html or.htm file-name extension Web server Stores XHTML documents Web browser Requests XHTML documents First XHTML Example (1) XHTML comments starts with  Mandatory XHTML Elements: <! - this is an example page --> <html> <head> <title>title goes here</title> </head> <body> </body> </html>

6 First XHTML Example (2) html element is the root element of a XHTML document head element Head section: Title of the document and Style sheets and scripts body element Body section: Page s content the browser displays <body bgcolor= Red > <body background="bgimage.jpg"> First XHTML Example (3) Every element starts with Start tag and ends with End tag, with the displayed content in between them. Example: <html>...</html>, <head>...</head>.

7 Write Your Own HTML File Open Nodepad software on your PC. Start ->All Programs->Accessories- >Notepad. Type your HTML file in the opened Notepad window. Save your HTML file as index.html on the desktop of your computer. Click File -> Save As Type index.html in File Name part and choose All Files in Save as type part. Use gedit or kedit in Fedora. Headers Six headers ( header elements): h1 ~ h6 <html > <head> <title>title goes here</title> </head> <body> <h1> Level 1 Header </h1> <h2> Level 2 Header </h2> <h3> Level 3 Header </h3> <h4> Level 4 Header </h4> <h5> Level 5 Header </h5> <h6> Level 6 Header </h6> </body> </html>

8 Useful Tags Paragraph: <p> </p> New line/ line breaker: <br>

9 Linking Hyperlink References other sources such as XHTML documents and images Both text and images can act as hyperlinks Created using the a (anchor) element: <a href= > Yahoo! </a> 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 " 4 5  6  7 8 <html xmlns = " 9 <head> 10 <title>internet and WWW How to Program - Links</title> 11 </head> <body> <h1>here are my favorite sites</h1> <p><strong>click a name to go to that page.</strong></p>  20 <p><a href = " <p><a href = " Hall</a></p> <p><a href = " 25

10 Malicious Link Manipulation Phishing: a link in an leads to the spoofed website Make the anchor text for a link appear to be valid <a href= > </a> Misspelled URL <a href= >BR</a> Images (1) Three most popular formats Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) img element with attributes: src attribute : Specifies the location of the image file width and height attributes: Pixels ( picture elements ) alt attribute : the text will be displayed if the browser could not display the image.

Images (2) Empty elements Terminated by character / inside the closing right angle bracket (>), or by explicitly including the end tag Example: <img src= 1.

11 Images (2) Empty elements Terminated by character / inside the closing right angle bracket (>), or by explicitly including the end tag Example: <img src= 1.jpg height= 238 width= 183 /> 7 8 <html > 9 <head> 10 <title>internet and WWW How to Program - Welcome</title> 11 </head> <body> <p> 16 <img src = "xmlhtp.jpg" height = "238" width = "183" 17 alt = "XML How to Program book cover" /> 18 <img src = "jhtp.jpg" height = "238" width = "183" 19 alt = "Java How to Program book cover" /> 20 </p> 21 </body> 22 </html>

12 Image as Link Use an image as a link <a href= > <img src= "yahoo.gif" width="232" height = "44" /> </a> Image has no border <a href="firstexample.html"> <img src="home.png" width="125" height="26" alt="go Home" border="0" /> </a> 7 8 <html > 9 <head> 10 <title>internet and WWW How to Program - Navigation Bar 11 </title> 12 </head> <body> <p> 17 <a href = "links.html"> 18 <img src = "buttons/links.jpg" width = "65" 19 height = "50" alt = "Links Page" /> 20 </a><br /> <a href = "list.html"> 23 <img src = "buttons/list.jpg" width = "65" 24 height = "50" alt = "List Example Page" /> 25 </a><br />

13 Unordered Lists Unordered list element ul Creates a list in which each item begins with a bullet symbol (called a disc) li (list item): Entry in an unordered list Format: <ul> <li> </li> <li> </li> </ul>

1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 4 5 <!-- Fig. 4.10: links2.html --> 6 <!

14 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 " 4 5  6  7 8 <html xmlns = " 9 <head> 10 <title>internet and WWW How to Program - Links</title> 11 </head> 12 links2.html 13 <body> 14 (1 of 2) 15 <h1>here are my favorite sites</h1> <p><strong>click on a name to go to that page.</strong></p>  20 <ul>  23 <li><a href = " <li><a href = " <li><a href = " <li><a href = " 30 </ul> 31 </body> 32 </html>

15 Nested and Ordered Lists Represent hierarchical relationships Ordered lists (ol) Creates a list in which each item begins with a number Format <ol> <li> </li> <li> </li> </ol> 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 " 4 5  6  7 list.html 12 (1 of 3) 8 <html xmlns = " 9 <head> 10 <title>internet and WWW How to Program - Lists</title> 11 </head> 13 <body> <h1>the Best Features of the Internet</h1>  18 <ul> 19 <li>you can meet new people from countries around 20 the world.</li> 21 <li> 22 You have access to new media as it becomes public: 23

16 list.html (2 of 3) 24  25  26  27 <ul> 28 <li>new games</li> 29 <li> 30 New applications  33 <ol> 34 <li>for business</li> 35 <li>for pleasure</li> 36 </ol> 37 </li> <li>around the clock news</li> 40 <li>search engines</li> 41 <li>shopping</li> 42 <li> 43 Programming  46 <ol> 47 <li>xml</li> 48 <li>java</li> 49 <li>xhtml</li> 50 <li>scripts</li> 51 <li>new languages</li> 52 </ol> </li> 55 list.html 58 (3 of 3) 56 </ul>  57 </li> 59 <li>links</li> 60 <li>keeping in touch with old friends</li> 61 <li>it is the technology of the future!</li> </ul>  </body> 66 </html>

17 Want to Learn More? Internet Resources:

18 Build your own website On our server storm.cis.fordham.edu, each student has an account. In this account, there is a public_html directory. Create your homepage in html, save it in index.html, and transfer it to public_html directory. View your website on the Internet Software you need to transfer your file Filezilla: Download the client package for your own computer.

Chapter 4 - Introduction to XHTML: Part 1

Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example 4.4 W3C XHTML Validation Service 4.5 Headers 4.6 Linking 4.7 Images 4.8 Special Characters and