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. 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. 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.
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
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 <!-- and end with --> Mandatory XHTML Elements: <! - this is an example page --> <html> <head> <title>title goes here</title> </head> <body> </body> </html>
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>.
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>
Useful Tags Paragraph: <p> </p> New line/ line breaker: <br>
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= http://www.yahoo.com > Yahoo! </a> 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.5: links.html --> 6 <!-- Introduction to hyperlinks --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>internet and WWW How to Program - Links</title> 11 </head> 12 13 <body> 14 15 <h1>here are my favorite sites</h1> 16 17 <p><strong>click a name to go to that page.</strong></p> 18 19 <!-- Create four text hyperlinks --> 20 <p><a href = "http://www.deitel.com">deitel</a></p> 21 22 <p><a href = "http://www.prenhall.com">prentice Hall</a></p> 23 24 <p><a href = "http://www.yahoo.com">yahoo!</a></p> 25
Malicious Link Manipulation Phishing: a link in an email leads to the spoofed website Make the anchor text for a link appear to be valid <a href= http://www.badsite.com > </a> www.paypal.com Misspelled URL <a href= http://www.bananarepubli.com >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.jpg height= 238 width= 183 /> 7 8 <html > 9 <head> 10 <title>internet and WWW How to Program - Welcome</title> 11 </head> 12 13 <body> 14 15 <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>
Image as Link Use an image as a link <a href= http://www.yahoo.com > <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> 13 14 <body> 15 16 <p> 17 <a href = "links.html"> 18 <img src = "buttons/links.jpg" width = "65" 19 height = "50" alt = "Links Page" /> 20 </a><br /> 21 22 <a href = "list.html"> 23 <img src = "buttons/list.jpg" width = "65" 24 height = "50" alt = "List Example Page" /> 25 </a><br />
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 <!-- Unordered list containing hyperlinks --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 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> 16 17 <p><strong>click on a name to go to that page.</strong></p> 18 19 <!-- create an unordered list --> 20 <ul> 21 22 <!-- add four list items --> 23 <li><a href = "http://www.deitel.com">deitel</a></li> 24 25 <li><a href = "http://www.w3.org">w3c</a></li> 26 27 <li><a href = "http://www.yahoo.com">yahoo!</a></li> 28 29 <li><a href = "http://www.cnn.com">cnn</a></li> 30 </ul> 31 </body> 32 </html>
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 "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 4 5 <!-- Fig. 4.11: list.html --> 6 <!-- Advanced Lists: nested and ordered --> 7 list.html 12 (1 of 3) 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>internet and WWW How to Program - Lists</title> 11 </head> 13 <body> 14 15 <h1>the Best Features of the Internet</h1> 16 17 <!-- create an unordered list --> 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
list.html (2 of 3) 24 <!-- this starts a nested list, which uses a --> 25 <!-- modified bullet. The list ends when you --> 26 <!-- close the <ul> tag. --> 27 <ul> 28 <li>new games</li> 29 <li> 30 New applications 31 32 <!-- nested ordered list --> 33 <ol> 34 <li>for business</li> 35 <li>for pleasure</li> 36 </ol> 37 </li> 38 39 <li>around the clock news</li> 40 <li>search engines</li> 41 <li>shopping</li> 42 <li> 43 Programming 44 45 <!-- another nested ordered list --> 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> 53 54 </li> 55 list.html 58 (3 of 3) 56 </ul> <!-- ends the nested list of line 27 --> 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> 62 63 </ul> <!-- ends the unordered list of line 18 --> 64 65 </body> 66 </html>
Want to Learn More? Internet Resources: www.w3schools.com
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 http://storm.cis.fordham.edu/~yourusername Software you need to transfer your file Filezilla: https://filezilla-project.org/ Download the client package for your own computer.