Html in 21 minutes
1 / 8

HTML in 21 minutes - PowerPoint PPT Presentation

  • Uploaded on

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=""> Web Publishing with Databases</a> </body> </html>

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'HTML in 21 minutes' - yuval

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Html in 21 minutes

A legal HTML document (html/legalt.html):



<title>My Site</title>


<body bgcolor=white>

<h2>My Site</h2>

See the page

<a href="">

Web Publishing with Databases</a>



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

General page layout ps1 extra html
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>

Hyper links ps1 extra html
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=""></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>

Html forms
HTML forms

A form can contain text areas (<textarea>), input fields (<input>), and menus (<select>)

Example: html/formular.html (and formular2.html)

<form action=""

method="post" enctype="text/plain">

... more code ...

<input type="reset" value="Start Over!" />

<input type="submit" value="Send Form" />


Attributes to the <form> tag:

  • action="":

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

Text areas textarea
Text Areas — <textarea>

In a text area (<textarea>) any text can be written:

<textarea name="comments" rows="5" cols="80">

Write your comments here!


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

Input fields input
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" ... />:

Menu choices select
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>


  • 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

Completed questionnaire when it is received via email
Completed questionnaire, when it is received via email

With enctype="text/plain":





comments=This is not a nice questionnaire.


Without enctype="text/plain":