Introduction to Computers and Their Applications Lecture 10 Web Technology and Creating a Web Page The Web, the Net, and Hypertext The Web is an interlinked collection of information A hypertext is a group of interlinked files Hypertext link An HTML document is one way to store data for a Web page HTML tags 1
The Web, the Net, and Hypertext Web browsers and Web servers exchange HTTP messages. HTML and XHTML HTML is a markup language containing special instructions World Wide Web Consortium (W3C) developed and revises HTML specifications XHTML is the follow-up version to HTML 4 HTML tags are enclosed in angle brackets Self-closing tags Formatting tags, link tags, media tags, and operational tags 2
HTML and XHTML HTML and XHTML Most browsers include a menu option for viewing an HTML source document and the HTML tags it contains. This example illustrates how to view source HTML while using Internet Explorer. 3
Web Browsers Help you access Web pages Upgrade to new browser versions as they become available Popular browsers include: Netscape Navigator Internet Explorer Opera Firefox Helper Applications, Plug-ins, and Players Helper applications extend the browser s ability to work with file formats A plug-in is a type of helper application A player is any helper application or plug-in that helps a browser display a particular file format 4
Helper Applications, Plug-ins, and Players HTTP HTTP messages flow between a browser and a Web server. 5
Web Servers Includes HTTP software to fulfill HTTP requests Server farms can handle thousands of requests each second Excessive demand can crash a Web server Cookies Small chunk of data generated by a Web server and stored on your computer s hard disk Fix problems caused by HTTP s stateless protocol Relatively safe Your computer does not have to accept cookies 6
Getting Started With HTML To get started creating a web page with hypertext mark-up language, you need: A text editor A web browser After you write the text with the appropriate tags, save the file with the extension.html or.htm Then open it using your web browser A Simple Web Page <html> <title>title goes here</title> <body>body goes here</body> </html> Begins an HTML document Marks the beginning of the title Beginning of the body Marks the end of the title End of the body Ends an HTML document 7
Headings There are six different sizes of headings: <h1>heading size 1</h1> <h2>heading size 2</h2> <h3>heading size 3</h3> <h4>heading size 4</h4> <h5>heading size 5</h5> <h6>heading size 6</h6> How headings might look in your browser Heading size 1 Heading size 2 Heading size 3 Heading size 4 Heading size 5 Heading size 6 8
Paragraphs The opening tag for a paragraph is <p>, and the closing tag is </p>. The closing tag for a paragraph is not always needed, but I recommend using it anyway. <p>i thought that it was a good idea to include a few examples so you could see what it might look like.</p> Formatting Text There are several different types of tags that format text: <b>bold Face</b> <i>italics</i> <big>bigger type</big> <small>smaller type</small> Text <sup>superscript</sup> Text<sub>subscript</sub> 9
A View of Formatted Text Bold Face Italics Bigger type Smaller type Text superscript Text subscript Line Breaks The web browser will not show the spacing as it appears in your HTML file. If you wish to have extra line breaks, you have to include the <br> tag. The HTML: <p>this new paragraph should be broken into<br> 2 lines</p> Appears as: This new paragraph should be broken into 2 lines 10
Align Attribute Many tags support ALIGN attributes. The ALIGN attribute is placed in the opening tag before the >. Examples: <h4 align= left >Left align</h4> <h4 align= center >Centered</h4> <h4 align= right >Right align</h4> Left align Centered Right align Unordered and Ordered Lists It is easy to set up unordered lists with bulleted points: <ul> <li>bullet point one</li> <li>bullet point two</li> </ul> We can also set up ordered list with numbered items: <ol> <li>first numbered point</li> <li>second numbered point</li> </ol> 11
A View of Unordered and Ordered Lists Bullet point one Bullet point two 1. First numbered point 2. Second numbered point Tables It is often useful to be able to have information appear in a table format. A table has to begin and end with the tags <table> and </table>. Each row begins and ends with <tr> and </tr>. Each item in a row begins and ends with <td> and </td>. 12
An Example of a Table <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> The Table Displayed row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 13
Including An Image Images can be included if they are saved in a file format that is recognized by the browser. The most common formats are JPEG, GIF and PNG Examples: <img src = "myphoto.jpg"> <img src = "scooby.gif"> The align attribute can be used with the img tag. Adding Links With a web site, there will typically be several different web pages that are saved as separate file that can be linked together: <p>this is a link to <a href="myotherpage.html">my Other Page</a> Linking to pages elsewhere on the World Wide Web is a little more involved: <p>this is a link to <a href= http://www.myothersite.com">my Other Page</a> 14