Page 8 - DCAP604_MODERN_WEB_PROGRAMMING_TOOLS_AND_TECHNIQUES_I
P. 8

Modern Web Programming Tools and Techniques – I




                    Notes          hyperlinks, italic  and bold  formatting, horizontal  lines, and so on. For example,  <h1>Some
                                   Text</h1> uses the <h1> element. This element tells the browser to display Some Text in the
                                   Heading 1 style, which uses a large, bold font. Similarly, <p>This is a sample web page.</p>
                                   creates a paragraph with one line of text. The <head> element groups the header information
                                   together, including the title that appears in the browser window, while the <body> element
                                   groups together the actual document content that’s displayed in the browser window.
                                   Figure 1.1 shows this simple HTML page in a browser. Right now, this is just a fixed file (named
                                   sample_web_page_heading.htm) that contains HTML content.  It has no interactivity,  doesn’t
                                   require a web server, and certainly can’t be considered a web application.

                                                      Figure 1.1:  Ordinary HTML:  the “brochure”  Site





























                                   HTML 2.0 introduced the first seed of web programming with a technology called HTML forms.
                                   HTML forms expand HTML so that it includes not only formatting tags but also tags for graphical
                                   widgets, or controls. These controls include common ingredients such as drop-down lists, text
                                   boxes, and buttons. Here’s a sample web page created with HTML form controls:
                                   <html>
                                   <head>
                                   <title>Sample Web Page</title>
                                   </head>
                                   <body>
                                   <form>
                                   <input type=”checkbox” />
                                   This is choice #1<br />
                                   <input type=”checkbox” />
                                   This is choice #2<br /><br />
                                   <input type=”submit” value=”Submit” />
                                   </form>
                                   </body>
                                   </html>




          4                                 LOVELY PROFESSIONAL UNIVERSITY
   3   4   5   6   7   8   9   10   11   12   13