1 / 26

HTML and Active Pages

HTML and Active Pages. What does “markup” mean? How do you link web pages to a database? What do .cgi, .asp, and .php file extensions tell you? Where can you find help for HTML?. Terminology. HyperText Markup Language ( HTML )

valencia-cruz
Download Presentation

HTML and Active Pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML and Active Pages • What does “markup” mean? • How do you link web pages to a database? • What do .cgi, .asp, and .php file extensions tell you? • Where can you find help for HTML? CS 105 Fall 2007

  2. Terminology • HyperText Markup Language ( HTML ) A convention of codes used to display words, pictures, etc. Without HTML code, a document would be unreadable by a Web browser. Right now, HTML is the Language of the World Wide Web, but the web is moving toXHTML Extensible Markup Language (XML) is the universal format for structured documents and data on the Web—it is compatible with XHTML but not with HTML. XML is built into the Windows XP operating system. CS 105 Fall 2007

  3. What does “markup” mean in CS105? Choose the best answer: • Spraying graffiti on a wall. • The difference between original cost and the selling price. • Codes that determine how text or pictures will look when displayed. CS 105 Fall 2007

  4. The browser displays a page: <head> <title> </head> <body> <h1> </h1> CS 105 Fall 2007

  5. Elements (tags) • Elements are the structures that describe parts of an HTML document. For example, the p element represents a paragraph while the em element gives emphasized content. • An element has three parts: start tag, content, and an end tag. • <b> Look at me! </b> becomes: Look at me! CS 105 Fall 2007

  6. More about elements (tags) • XHTML element names are always case-sensitive, so use <em> and not <EM> • Be sure to close the elements: • <p> Whatever is in the paragraph. </p> • <p> Next paragraph. <p> • <br> used to be OK, but close it now: <br /> CS 105 Fall 2007

  7. <p> versus <br> • <p> Denotes that a new paragraph is beginning, and there may be a blank line inserted above and below each paragraph. The closing is </p>. • <br /> The BR element forces a break in the current line of text: Google is at <br /> http://google.com/ <br /> You will like it! <br /> CS 105 Fall 2007

  8. Also, nest markup in order Raw XHTML <head> <title> MPS</title> </head> <center> <h1>MPs</h1> </center> <i><b> All MPs for will be posted here.</b></i> CS 105 Fall 2007

  9. Attributes An element's attributes … define various properties for the element. For example, theimgelement takes asrcattribute to provide the location of the image and analtattribute to give alternate text for those not loading images: <img src="wdglogo.gif" alt="Web Design Group"> CS 105 Fall 2007

  10. List Items <ul> Tells the computer it will be a bulleted list <li> Means it is a list element <li> Another list element </ul> End of list <ol> Would have been a numbered list <li> Item # 1 <li> Item # 2 </ol> CS 105 Fall 2007

  11. Sick links • Some of you have already experienced these! • Common problem is that you create a document on your computer and link to other pages, but when you load your document on Netfiles, you cannot find your page or image! CS 105 Fall 2007

  12. Using a Helper Application • You may get a messed-up link like this one: • <img width=512 height=384 src="Doc1_files/image001.jpg" CS 105 Fall 2007

  13. Put the .jpg image in the same folder as your web page, then make the link local: <img width=512 height=384 src="image001.jpg“ • Is it too small? Get rid of the sizing! • <img src="image001.jpg"> CS 105 Fall 2007

  14. Where to go from here • Web pages are amazingly sophisticated now, and likely to change even more • How to learn more? • Flash, DreamWeaver and so on CS 105 Fall 2007

  15. So what is an interactive page? • People got restless and wanted more than static web pages • They wanted information that changes depending on the time (game scores) or the query (who wrote Atlas Shrugged?) CS 105 Fall 2007

  16. Thus… dynamic web pages! CS 105 Fall 2007

  17. Pull-down menu on IMDB - Internet Movie Database http://www.imdb.com/ CS 105 Fall 2007

  18. HTML for the form on the Internet Movie Database: • <form action="/Find" method="get"> <td> <select name="select"> <option selected="on">All</option> <option>Titles</option> <option>My Movies</option> <option>Names</option> <option>Companies</option> <option>Keywords</option> <option>Characters</option> <option>Quotes</option> <option>Bios</option> <option>Plots</option> CS 105 Fall 2007

  19. The CS105 demo link • http://www.cs.uiuc.edu/class/fa07/cs105/websql/ • See the Course Guide for more explanation. CS 105 Fall 2007

  20. Kinds of scripts you might find: • Microsoft's Active Server Pages (ASP) • Java • PHP (Hypertext Preprocessor) • CGI (Common Gateway Interface) • We used .php CS 105 Fall 2007

  21. How to tell the Browser to create a form with PHP: <form action="websql.php" method="POST"> The above is a relative link. The file named websql.php is in the same folder as index.html </form> Note: this calls a .php script to execute in the CS105 public_html folder. CS 105 Fall 2007

  22. What does the html look like for each choice? <option value="select sum(Wins) from Stats where Season=2005">How many games won in 2005? </option> CS 105 Fall 2007

  23. .cgi and .php Here is a view of what happens: CS 105 Fall 2007

  24. PHP can do anything any other CGI program can do, such as collect form data, generate dynamic page content, or send and receive cookies. PHP scripts CS 105 Fall 2007

  25. You will create a form on a web page. • You can figure out the scripting from the example given in the Course Guide. • Just use your own words for the queries. CS 105 Fall 2007

  26. To Summarize: • What does “mark-up” mean? • Where can you find help for HTML? • How do you link web pages to a database? • What do .cgi, .asp, and .php file extensions tell you? • Your moment of Zen • http://youtube.com/watch?v=c-6XA-50xXQ CS 105 Fall 2007

More Related