260 likes | 335 Views
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 )
E N D
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
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
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
The browser displays a page: <head> <title> </head> <body> <h1> </h1> CS 105 Fall 2007
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
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
<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
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
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
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
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
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
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
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
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
Thus… dynamic web pages! CS 105 Fall 2007
Pull-down menu on IMDB - Internet Movie Database http://www.imdb.com/ CS 105 Fall 2007
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
The CS105 demo link • http://www.cs.uiuc.edu/class/fa07/cs105/websql/ • See the Course Guide for more explanation. CS 105 Fall 2007
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
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
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
.cgi and .php Here is a view of what happens: CS 105 Fall 2007
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
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
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