1 / 8

HTML in 21 minutes

A legal HTML document ( html/legalt.html ): <html> <head> <title>My Site</title> </head> <body bgcolor=white> <h2>My Site</h2> See the page <a href="http://www.it-c.dk/courses/W2/F2004/"> Web Publishing with Databases</a> </body> </html>

yuval
Download Presentation

HTML in 21 minutes

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. A legal HTML document (html/legalt.html): <html> <head> <title>My Site</title> </head> <body bgcolor=white> <h2>My Site</h2> See the page <a href="http://www.it-c.dk/courses/W2/F2004/"> 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! HTML in 21 minutes

  2. General Page Layout (ps1-extra.html) You should know about the following tags in HTML: • Headings/Overskrifter: <h1>. . .</h1>, . . . , <h4>. . .</h4> • Rules (vandret streg): <hr /> • Paragraphs and line breaks: <p>. . .</p>, <br /> • Quotes: <blockquote>. . .</blockquote> • Centering: <center>. . .</center> • Bold eller fed text: <b>. . .</b> • Italic eller kursiv text: <i>. . .</i> • Underlined eller understreget text: <u>. . .</u> • Ordered lists: <ol>. . .</ol> • Unordered lists: <ul>. . .</ul> • List items: <li>. . .</li>

  3. 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:nh@itu.dk">nh@itu.dk</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>

  4. 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:mael@itu.dk" 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:mael@itu.dk": • 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) A click on <input type="submit" value="Send Form" /> sends the completed form. A click on <input type="reset" value="Start Over" /> resets all fields, text areas, and menues.

  5. 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

  6. Input Fields — <input> The attribute type determines the type of the input field: • 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" ... />:

  7. 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 — html/formular.html • With a nicer lay-out (using <table>): html/formular2.html

  8. Completed questionnaire, when it is received via email With enctype="text/plain": lastname=Olsen studentid=da4567 sex=male paper=guardian comments=This is not a nice questionnaire. order=9 Without enctype="text/plain": lastname=Olsen&studentid=da4567&sex=male&paper=guardian& comments=This+is+not+a+nice+questionnaire.&order=9

More Related