Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML in 21 Minutes - Department of Computer Science
Document related concepts
Transcript
Course Preliminaries Web publishing and Web-based services Development of static Web pages Version control HTML in 21 minutes Some Web design rules Examples of SQL CGI-scripts and applets, etc. A note on programming languages Introduction to problem set 1 CSC 405: Web Application And Engineering II 1.1 Web publishing Web publishing is often associated with content similar to what is contained in magazines. Examples are product catalogues, news services, and so on. Web services are distinguished by solving a particular problem for a user. For instance: a todo-list, comment service, book ordering, ticket ordering, and so on. Start by asking what a user is interested in! What can you do to enrich a user? Avoid: user modeling, entry tunnel, exit tunnel flashy slow graphics Support multiple views on content: For instance, allow user comments... CSC 405: Web Application And Engineering II 1.2 Web-based services From desktop applications to Web-based programs Examples: Groupcare (http://www.groupcare.com) Calendar system Email (http://gmail.google.com) Text processing and version control CourseGrader Course evaluation Blogs (http://wordpress.org) ... Bugs and errors in Web-based programs can be fixed immediately! CSC 405: Web Application And Engineering II 1.3 Development of static Web pages Draw a site map Give structure to content; add names to files. Think about how secondary files (such as images) should be organized. Construct an “only-text” site. Hire a graphics designer!? Construct a maintenance plan. How is content updated? Is it possible to delegate responsibility to those who write the content or is it necessary with a central “Home Page Department?” Construct periodical user tests—functional tests and CSC 405: Web Application And Engineering II 1.4 Version Control Problem: Joe downloads Version A of a document at 9 am from the company Web site and uses a whole day editing the document. Tina downloads Version A at 1 pm and corrects a spelling mistake. Tina uploads the document (Version B) to the server at 1:10 pm. Joe uploads his document (Version C) to the server at 5 pm. Tina’s correction to the page is gone! Version C does not contain the correction in Version B! Solutions: “locking” of files with emails, Emacs, CVS, Subversion,. . . . CVS: http://www.cvshome.org/ Subversion: http://subversion.tigris.org/ CSC 405: Web Application And Engineering II 1.5 Why Learn to Program? Better understanding of possibilities and limitations of dynamic Web pages Necessary condition for development of advanced Web sites Better possibilities for imagining new types of Web sites CSC 405: Web Application And Engineering II 1.6 Why Learn PHP? PHP is well suited for developing dynamic Web sites (just like Perl, ASP, C#, Java, Standard ML, . . . ). PHP is freely available as a module for the open source Web server Apache. PHP is good at manipulating strings (and therefore good for Web programming). PHP is supported by many hosting companies. CSC 405: Web Application And Engineering II 1.7 Special (domain-specific) languages: HTML and SQL HTML: For describing the structure of hypertext and (partly) the layout. Example (html/hello.html): <html> <head><title>Hello</title> </head> <body> Hello Students </body> </html> Browsers do not normally require HTML to be strictly correct HTML—but you should write correct HTML anyway! SQL: A language for sending data back and forth between a program and a database. SELECT navn, addr FROM names ORDER BY name; INSERT INTO names (name, addr) VALUES (’Iris’, ’Gallevej 435’); There are many SQL dialects—but in many cases, the differences are trivial CSC 405: Web Application And Engineering II 1.8 Why Should I Care About HTML? To be certain that a Web site works with all browsers There are things that cannot be done with a WYSIWYG HTML editor To reuse HTML code written by others WYSIAYG = What You See Is All You Get; sometimes HTML editors generate unnecessary HTML For Web programming, one writes programs that generate HTML; so Web programming requires that one understands HTML CSC 405: Web Application And Engineering II 1.9 Why Use an HTML Editor? Why use a HTML editor like Microsoft Frontpage, DreamWeaver, or Nvu rather than writing the HTML by hand? It always generate correct HTML (or so it should) One can learn HTML from it (but be aware of browser specific code) It is easier to get going CSC 405: Web Application And Engineering II 1.10 HTML in 21 minutes A legal HTML document (html/legalt.html): <html> <head> <title>My Site</title> </head> <body> <h2>My Site</h2> See the page <a href="http://www.itu.dk/courses/W2/F2006/">Web Publishing with Databases</a> </body> </html> It can be difficult to format HTML code nicely — but try to be consistent! Write the HTML code yourself! Later we shall construct programs that generate HTML code! CSC 405: Web Application And Engineering II 1.11 General Page Layout (ps1-extra.html) You should know about the following tags in HTML: Headings: <h1>. . . </h1>, . . . , <h4>. . . </h4> Rules: <hr /> Paragraphs and line breaks: <p>. . . </p>, <br /> Quotes: <blockquote>. . . </blockquote> Centering: <center>. . . </center> Bold text: <b>. . . </b> Italic text: <i>. . . </i> Underlined text: <u>. . . </u> Ordered lists: <ol>. . . </ol> Unordered lists: <ul>. . . </ul> List items: <li>. . . </li> CSC 405: Web Application And Engineering II 1.12 Hyper links (ps1-extra.html) Hyper links: <a href="link">name</a> Local named hyper links: <a name="thename">. . . </a> References to a name: <a href="index.html#thename">The Name</a> Mail-to links <a href="mailto:[email protected]">[email protected]</a> Tables: <table>. . . </table>, <tr>. . . </tr>, <th>. . . </th> and <td>. . . </td> Images: <img src="pluto.jpg" /> Colors: <font color="red">. . . </font> and <body bgcolor="yellow">. . . </body> CSC 405: Web Application And Engineering II 1.13 HTML forms A form can contain text areas (<textarea>), input fields (<input>), and menus (<select>) Example: html/formular.html (and formular2.html) <form action="mailto:[email protected]" method="post" enctype="text/plain"> ... more code ... <input type="reset" value="Start Over!" /> <input type="submit" value="Send Form" /> </form> Attributes to the <form> tag: action="mailto:[email protected]": the completed form is sent by email method="post" should be used when the completed form is sent by email enctype="text/plain" sends the form as ordinary text (not encoded) CSC 405: Web Application And Engineering II 1.14 Text Areas — <textarea> In a text area (<textarea>) any text can be written: <textarea name="comments" rows="5" cols="80"> Write your comments here! </textarea> The attributes: name specifies a name for the field rows specifies the number of lines (rows) in the text area cols specifies the number of characters (columns) in each line in the text area CSC 405: Web Application And Engineering II 1.15 Input Fields — <input> Text and Passwords Single-line text areas: <input type="text" name="lastname" /> Passwords, which are not to be displayed by the browser: <input type="password" name="studentid" /> Check boxes, possibly more than one item can be checked at a time: <input type="checkbox" name="paper" value="nytimes" /> <input type="checkbox" name="paper" value="wpost" /> <input type="checkbox" name="paper" value="guardian" /> Radio buttons, only one item can be checked at a time: <input type="radio" name="sex" value="male" /> <input type="radio" name="sex" value="female" checked="yes" /> Button for resetting a form: <input type="reset" ... /> Button for sending a completed form: <input type="submit" ... /> CSC 405: Web Application And Engineering II 1.16 Menu Choices, <select> A drop-down menu, which allows the user so choose between a series of items (+<option>+): <select name="order"> <option value="9">Pepperoni Pizza</option> <option value="70">Pizza Bambino</option> <option value="47">Chicken Dipper (9 pieces)</option> </select> The attribute multiple in the <select> tag allows the user to choose more than one item. Complete form Bare, with no layout structure: html/formular.html An example course evaluation with a nicer lay-out (using <table>): html/formular2.html CSC 405: Web Application And Engineering II 1.17 Completed Questionnaire, When Sent By Email With enctype="text/plain": lastname=Olsen studentid=da4567 sex=male paper=guardian comments=This is not a nice uestionnaire. order=9 Without enctype="text/plain": lastname=Olsen&studentid=da4567&sex=male& paper=guardian &comments=This+is+not+a+nice+questionnair e.&order=9 CSC 405: Web Application And Engineering II 1.18 Find five bugs In an HTML document without consistent indentation: <html><head><title>Hello</title></head>Hello<cent er>great page<p> this is in <b>bold<i> and italics</html> In an HTML document with consistent indentation: <html> <head> <title>Hello</title> </head> Hello <center> great page <p> this is in <b>bold<i> and italics </html> Firefox shows this document without errors! Or does it? CSC 405: Web Application And Engineering II 1.19 Cascading Style Sheets We don’t want to mix the structure with the presentation of our web pages Use HTML for the logical structure Use Cascading Style Sheets (CSS) for the presentation Advantages of CSS We get a consistent look of our pages We only have to change the layout in one place We can tailor the presentation to different devices (medias) by using different style sheets CSC 405: Web Application And Engineering II 1.20 Giving Our Form Some Style Say, we want our form to have a blue background, white text, a grey dotted border, and nice wide margins. Thus, we add the following style element to the head of our HTML form: <html> <head><title>Form Example</title> <style type="text/css"> body { background-color: blue; color: white; margin-left: 20%; margin-right: 20%; border: 3px dotted gray; padding: 10px 10px 10px 10px; } </style> </head> <body> <h1>Questionnaire</h1> ... </body> CSC 405: Web Application And Engineering II 1.21 Style An Element With Some Class What if we want one of our elements to stand out? Add a class attribute: <p class="thesexquestion"> Enter sex: Male <input type="radio" ... Add a rule for the class in the style element: <style type="text/css"> body { ... } p.thesexquestion { background-color: rgb(50%, 0%, 0%); } </style> Use <div> and <span> elements to give extra structure to your page if needed. CSC 405: Web Application And Engineering II 1.22 Style An Element With Some Class Some HTML Rules Avoid large tables for page layout (difficult and slow for browsers to render). Be careful with redefinitions of link colors. Make it possible for the user to construct black-and-white printouts (e.g., some web browsers prints white text on a blue background as white text on a white background!) Think about the user’s screen as a limited resource. Avoid the use of frames (frames do not work well with printing, bookmarks, or email). Remember to give your HTML pages a title (used for bookmarks, e.g.) A goal could be that both Firefox and Internet Explorer can show your page. What about WebTV, Palm Pilots, mobile phones, . . . CSC 405: Web Application And Engineering II 1.23 More Web Design Rules Let information be the user interface: By a click on an informative word, the user is sent to a page with more in-depth information about the concept (avoid “here-links”). Provide users with a wide, flat overview of the Web site, instead of a sequential or deep tree structure. Organize your Web site according to user interests, instead of after the internal organization. Why use icons for navigations when words are more intuitive and take up less space? Construct long documents instead of wide documents. Remember to put a link back to the index page on every page — for instance, to support users coming from search engines. Add contact information to your pages. CSC 405: Web Application And Engineering II 1.24 Example SQL Given a table student with student data As an example, we can ask about first name and last name, sorted after last name, first name: SELECT firstname, lastname FROM student ORDER BY lastname, firstname; It is possible to add a new row to the table: INSERT INTO student (lastname, firstname, studentid) VALUES (’Fong’, ’Joe’, ’JF0032’); It is possible to delete one or more rows: DELETE FROM student WHERE lastname = ’Fong’; . . . and much more CSC 405: Web Application And Engineering II 1.25 Use of Server-side Web Scripting 1. A client obtains an HTML page with an HTML form from a Web server. 2. The client completes the HTML form, and sends it back to the Web server. 3. The Web server executes a program that processes data from the client, for instance by updating a database. 4. The Web server sends an HTML page back to the client. CSC 405: Web Application And Engineering II 1.26 Use of Applets for Updating a Database 1. A client obtains an HTML page and an associated applet from a Web server. 2. The client starts executing the applet as a program; requests and updates are send directly to the database. Comments: Applets work well only on newer browsers and applets take a long time to download. On the other hand, they can be more interactive. We do not discuss applets and other similar technologies (e.g., Flash) in this course. CSC 405: Web Application And Engineering II 1.27 What is a Programming Language? A programming language is a notation for instructing a computer what to do (i.e., a notation for programs). There are many different programming languages, including: PHP, Perl, Tcl, Standard ML, Java, C#, C, C++, Erlang, Haskell, Pascal, Forth, Fortran, Prolog, Ada, Python, Common Lisp, Scheme, . . . CSC 405: Web Application And Engineering II 1.28 What is a Programming Language? Programmers needs to be careful to get the syntax right! A computer is normally very pedantic. This issue is particularly frustrating to novice programmers. Example: A Correct PHP command: echo "I’m alive!"; A very wrong PHP command: Echo "I’m alive!; Experienced programmers are good at locating errors. CSC 405: Web Application And Engineering II 1.29
