A Web-Based Introduction to Programming

A Web-Based Introduction to Programming Chapter 04 Basics of Markup – Creating a User Interface with HTML Chapter 04

Intended Learning Outcomes • Explain the purpose of markup languages. • Identify the technologies that led to HTML. • Identify basic protocols of the Internet and World Wide Web. • Create a simple Web page using common HTML tags. • Create an HTML table to display a list in columns and rows. • Create an HTML table to layout a simple Web page. • Explain the purpose of style sheets. • Create and modify a simple Cascading Style Sheet (CSS). • Create simple HTML forms. • Explain the role of the name attribute to submit HTML forms. Chapter 04

Introduction to Markup • All information has an appearance: Books Billboards Newspapers Web sites E-mail Packaging • Renderingis the term for providing information with a specific appearance. • Many professional fields are associated with rendering information.. Chapter 04

Related Professional Fields • Writing • Publishing/Editing/Layout • Graphics Design/Digital Media • Technical Communications • Web Design/Computer Programming • Usability • Advertising • TV/Film/Animation Chapter 04

Markup Languages • Rendering instructions define appearance: • Font type, color, size • Bold, italic • Indent, paragraph • Table, hyperlink • Markup languagesadd rendering instructions to text. • Hypertext Markup Language (HTML) is commonly used to render text for the Web Chapter 04

A Short History of HTML • HTML specifies how information is to be rendered by a Web browser. • Developed between 1989 and 1991. • First browsers appeared in 1993 (lynx and Mosaic). • Transmitted using the http protocol. • The latest version of HTML is named HTML5 • Includes features to handle audio and video, 2D drawing, local storage, form controls, and new elements to handle specific page content. Chapter 04

Origins of HTML • SGML (Std. Generalized Markup Language) • Developed in the 1970’s. • Large scale markup language used mainly in publishing. • Hyper-text • Invented in the 1940’s. • Idea of providing links within text to connect to additional information (multi-dimensional text). • The Internet • Established in the 1960’s. • Allows computers to communicate world-wide. Chapter 04

Introducing HTML Tags This is how a Web browsers renders myWeb1.html (in your samples folder). Let’s look at the markup.. Chapter 04

Content of myWeb1.html <!DOCTYPE html> <html> <head> <title>HTML Example</title> </head> <body> <h1>My First Web Page</h1> <p>Hi! My name is <strong>Mike O'Kane</strong>. Let me tell you a little bit about myself.</p> <p>I enjoy hiking, kayaking, painting, writing, cooking (and eating!) and gardening. Sometimes I even like to program!</p> </body> </html> Chapter 04

Introducing HTML Tags • HTML tags enclose text to specify how the text should be rendered. • Each HTML tag is enclosed between < and >. • Most HTML tags are paired to mark the beginning and end of a formatting feature: <html> and</html> <p> and </p> <h1> and </h1> <strong> and </strong> • The closing tag is the same as the opening tag but includes a forward slash / Chapter 04

The DOCTYPE Declaration <!DOCTYPE html> • This is a special declaration that tells the browser, which version of HTML is being used. • This DOCTYPE declaration specifies HTML5, the current version of HTML • The DOCTYPE declaration should always appear as the first line of your HTML files, before any other text in the file. Chapter 04

Comments •  • Any text between these tags is ignored by the browser. • Comments provide documentation for programmers who will view/edit the HTML file. • Comments may include the name of the developer, the creation date , the purpose, etc., for example:  Chapter 04

HTML Tags • <html> and </html> • Indicate the beginning and end of the entire HTML document. • <head> and </head> • The headingsection of an HTML document contains general information and processing instructions related to the page as a whole. • <body> and </body> • The bodysection of an HTML document contains all text that you wish to be displayed on the Web page. Chapter 04

HTML Tags • <h1> and </h1> • Indicate the beginning and end of a heading. • There are seven heading levels, for example <h3> and </h3> • strong> and </strong> • Indicate the beginning and end of emphasized text, usually rendered as bold • <p> and </p> • Indicate the beginning and end of a paragraph. Chapter 04

Ignoring White Space • A Web browser ignores white space when reading an HTML document: • Multiple blank spaces • Tabs and indentations • Blank lines • The browser only applies formatting based on the HTML tags in your HTML text, NOT on the layout of your text. Chapter 04

Adding Images and Links • Here is the rendering of myWeb3.html. • The page includes: • An image • Five links to other pages Chapter 04

HTML Code for myWeb3.html <h1>My First Web Page</h1> <img src = "okanepic.jpg" alt = "image of Mike" /> <p>Hi! My name is <strong>Mike O'Kane</strong>. Let me tell you a little bit about myself.</p> <p>I enjoy hiking, kayaking, painting, writing, cooking (and eating!) and gardening. Sometimes I even like to program!</p> <p>Here are some useful Web sites for this course:</p> <p> <a href = "http://www.w3c.org">The World Wide Web Consortium</a> <br /> <a href = "http://www.php.net">PHP Home Page</a> <br /> <a href = "http://www.w3Schools.com">W3Schools - Programming Tutorials</a> </p> <p><a href = "welcome.html">Welcome to the course!</a> <br /> <a href = "quoteGenerator.php">Quote for the day</a></p> Chapter 04

Adding Images to a Web Page • <img src = "okanepic.jpg" alt = "image of Mike" /> <img> tag adds an image to a Web page src = "okanepic.jpg" src is an attribute for the <img> tag to specify the name of the image file. alt = "image of Mike" alt is an attribute for the <img> tag to provide text that will be displayed if the browser does not display images. • Note that the two attributes are located INSIDE the <img> tag Chapter 04

Adding Links to a Web Page • <a href = "http://www.w3c.org">The World Wide Web Consortium</a> <a> tag allows you to anchor a link to a Web page href = " http://www.w3c.org"href is an attribute for the <a> tag used to specify the URL that the link will connect to. Between the <a> and the </a> tags, provide the link text. This is the text that the user clicks to go to the page indicated by the href attribute. Chapter 04

Absolute and Relative Addresses • Absolute addresses contain a complete URL: • <a href = "http://www.w3c.org">The World Wide Web Consortium</a> • <a href = "http://www.php.net">PHP Home Page</a> • Relative addresses are relative to the location of the current Web page: • <a href = "welcome.html">Welcome to the course!</a> • <a href = "quoteGenerator.php">Quote for the day</a> (these files are in the same folder as myWeb3.html ) Chapter 04

Some Tags Do Not Need Closing Tags • If a tag does not enclose text, a closing tag can omitted by adding / to the opening tag: • <img /> instead of <img></img> • The line break tag moves to the next line: • <br /> instead of <br></br> • The hard rule tag draws a line across the screen: • <hr /> instead of <hr></hr> Chapter 04

Introducing HTML Tables • HTML tables are used to align output neatly in rows and columns: • <table> and</table> indicate the beginning and end of a table. • <tr> and</tr> indicate the start and end of a row. • <td> and</td> indicate the start and end of a column within a row (td stands for table data) • <th> and</th> indicate the start and end of a column heading within a row. Chapter 04

Attributes of Table Tags • The table tags can include attributes, for example: • <table border = "1"> the border attribute can be used to set a border width in pixels ("0" indicates no border). • <td align = "right"> align indicates whether the data in the column should align "left", "center", or "right". • Many other attributes are available.. Chapter 04

Example (annualTemps2.html) Chapter 04

Table Code for annualTemps2.html • Just the first three rows are shown here.. <table border = "2"> <tr> <th>MONTH</th> <th>LOW TEMP (F)</th> <th>HIGH TEMP (F)</th></tr> <tr> <td align = "left">January</td> <td align = "center">25.8</td> <td align = "center">45.9</td></tr> <tr> <td align = "left">February</td> <td align = "center">28.0</td> <td align = "center">50.0</td></tr> </table> Chapter 04

Using Tables to Layout Web Pages • Tables can be used to layout entire Web pages. • The page can be organized by placing page components in table rows and columns. • Images, paragraphs, groups of paragraphs, even other tables, can be located inside a single <td> </td>. • Let's look at myWeb4.html.. Chapter 04

Using Tables to Layout Web Pages Chapter 04

Table Code for myWeb4.html • This table has one row with two columns. (some text has been omitted to save space..) <table><tr> <td> <img src = "okanepic.jpg" alt = "image of Mike" /> </td> <td><p>Hi! My name is <strong>Mike O'Kane</strong>. Let me tell you s little bit about myself .. </p> <p><a href = "http://www.w3c.org">The World Wide Web Consortium</a> <br /> <a href = "http://www.php.net">PHP Home Page</a> <br /> <a href = "http://www.w3Schools.com">W3Schools – Programming Tutorials</a><br /> </td> </tr></table> Chapter 04

More HTML Tags • This book is not intended to cover HTML in depth. • There are many more HTML tags available than those described here. • Each tag allows the use of a number of attributes. • See Appendix E for more information about HTML tags. Chapter 04

Maintaining an entire Web site • A single HTML document contains many HTML tags. • An entire Web site may contain many HTML documents. • All pages on a Web sites should have a consistent "look and feel" with standard menus, fonts, colors, layout. • Changes must be applied to every page, which is time consuming and leads to errors. • Style sheetsprovide a solution.. Chapter 04

Introducing Style Sheets • Style sheets define how tags should render text. • For example, <h1> text should be Arial, red and 18 pt. • A single style sheet can be referenced by any number of HTML documents • The most common type of style sheet used with HTML documents is a Cascading Style Sheet (CSS) • A Cascading Style Sheet can be saved as a .css file and referenced by any HTML documents. • The look and feel of an entire Web site can be changed by changing the style sheet. Chapter 04

Cascading Style Sheet - Example • A simple style sheet: • This style sheet provides specifications for the <body>, <h1>, <p>, and <table> tags. body { background: white } h1 { font-family: Arial, Helvetica, Sans-serif; font-size:18pt; color:red; font-weight:bold; } p { font-family: Arial, Helvetica, Sans-serif; font-size:10pt; color:black; } table { font-family: Arial, Helvetica, Sans-serif; font-size:12pt; color:darkblue; background:lightblue } Chapter 04

Cascading Style Sheet - Example • Note the syntax of a cascading style sheet: • Each tag name is referenced on the left (these are known selectors) • The list of formatting requirements for each selector is enclosed in braces{ and } • Each requirement consists of a propertyand valueseparated by a colon. • Each property:value pair is separated by a semi-colon. Chapter 04

Cascading Style Sheet syntax body { background: white } • Any Web page using this style sheet will have a white background. h1 { font-family: Arial, Helvetica, Sans-serif; font-size:18pt; color:red; font-weight:bold; } • Any text inside <h1></h1> tags will be Arial, 18 point, red, and bold. If the Browser cannot display Arial it will be display Helvetica, or Sans-serif. Chapter 04

Cascading Style Sheet syntax p { font-family: Arial, Helvetica, Sans-serif; font-size:10pt; color:black; } • Text inside <p></p> tags will be Arial, 10 point, and black. table { font-family: Arial, Helvetica, Sans-serif; font-size:11pt; color:darkblue; background:lightblue } • Text inside <table></table> tags will be Arial, 11 pt, and dark blue, with a light blue background. Chapter 04

Different styles for a single tag • What if you want someparagraphs to contain red "alert" messages in italics? • We can add a special style to our CSS file: p.alert { font-style: italic; color:red; } • To apply this style to a paragraph, add a class attribute to the <p> tag: <p class = "alert">Be sure to save your files before you close down the computer!</p> • The p.alert style inherits all values from the p style, except where these are over-ridden. Chapter 04

Selecting colors • Most browsers recognize a large number of color names, 16 are accepted as completely standard : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow • 65,536 colors can be referenced using their hexadecimal value, for example the color teal can also be represented as #008080. Chapter 04

Referencing a Cascading Style Sheet • How do you indicate that an HTML document should use a style sheet? • The <head> section now includes a <link> tag that indicates that the HTML document will apply the formats specified in sample.css. • Note that the <link> tag is added to the <head> section and not the <body> section. <head> <title>HTML Example</title> <link rel ="stylesheet" type="text/css" href="sample.css" /> </head> Chapter 04

Applying a style to multiple pages • Once you have defined a style sheet you can reference it in multiple documents. • Now if you change a value in the style sheet, the change will be reflected in the appearance of every page that references that style sheet. • The samples.css style sheet is referenced in most documents in the sample folder. • Try changing the background color.. Chapter 04

Using style sheets in this course • Style sheets are used extensively for Web design, and for rendering other documents. • The capabilities of style sheets are complex. • We will not cover syntax/use of style sheets in detail. • We will mostly use the sample.css style sheet. • Include the sample.css link in your documents unless told otherwise and ensure that a copy of this file is in each of your coursework folders. Chapter 04

Interactive User Interfaces • A Graphical User Interface (GUI) uses visual components for user interaction: Submit/Reset buttons Prompts Text input boxes Drop down lists Radio buttons Check boxes • Web applications use HTML forms to obtain user input. Chapter 04

Introducing HTML forms • Consider the following requirement: Wage1 requirements: Write a program that allows the user to submit a request to calculate the weekly pay and display the hours worked, hourly wage, and weekly pay for an employee who works 19 hours and earns $15.75 an hour. Chapter 04

Interface Design • This application will consist of two screens: Chapter 04

Algorithms wage1.html algorithm: Display Submit button to execute Wage1.php END wage1.php algorithm: hourlyWage = 15.75 hoursWorked = 19 weeklyWage = hourlyWage * hoursWorked Display hourlyWage, hoursWorked, weeklyWage END • We are only concerned with wage1.html.. Chapter 04

Code for wage1.html <html> <head> <title>Wage Report</title> <link rel ="stylesheet" type="text/css" href="sample.css" /> </head> <body> <h1>Wage Report</h1> <p> This page will provide your current wage report. <form action = "wage1.php" method = "post" > <input type = "submit" value = "Get Your Wage Report Now" /> </form> </p> </body> </html> Chapter 04

The <form> Tag • This <form> tag has two attributes: • action = "wage2.php" specifies that the form is to be processed by a program named wage2.php • method = "post" Specifies the manner in which any form data is sent to the server – we will always use method ="post“ in our form tags. <form action = "wage1.php" method = "post" > </form> Chapter 04

Adding a Submit Button • The <input> tag mustbe located between the <form> and </form> tags, otherwise it not part of the form! • This <input> tag has two attributes: type = "submit"tells the browser to display a Submit button for the user. value = "Get Your Wage Report Now" specifies the message to display on the Submit button. <input type="submit" value="Get Your Wage Report Now" /> Chapter 04

Obtaining User Input • The form in wage1.html does not receive any user input. Consider a modified requirement: Wage2 requirements: Write an application that allows the user to submit their hours worked and hourly wage. The program should calculate the weekly pay and display the hours worked, hourly wage, and weekly pay. Chapter 04

Interface Design • This application will consist of two screens: Chapter 04

Algorithms wage2.html algorithm: Prompt user for hourly wage Get hourlyWage Prompt user for hours worked Get hoursWorked Submit hourlyWage, hoursWorked to wage2.php END wage2.php algorithm: Receive hourlyWage, hoursWorked from wage2.html weeklyWage = hourlyWage * hoursWorked Display hourlyWage, hoursWorked, weeklyWage END • We are only concerned with wage2.html.. Chapter 04

A Web-Based Introduction to Programming