Web development using html 5

Web Development Using

HTML

Anjan Mahanta LCCT - International Education Institute

[email protected] 1

What’s HTML?

• HTML is a language for describing web pages.

• HTML stands for Hyper Text Markup Language.

• HTML5 is the latest standard for HTML.

• HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

2 Copyright: LCCT International Education Institute :: Anjan Mahanta ::

W3C • World Wide Web Consortium (W3C)

• The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.


Text Editor We can develop HTML program using the following text editors

– Windows Note Pad

– Mac Text Edit

– Adobe Dreamweaver

– Komodo Edit

Komodo edit can be downloaded free from

http://komodoide.com/komodo-edit


Start Notepad

To start Notepad go to:

Start

All Programs

Accessories

Notepad


Lesson 1 Hello World

• Open the text editor

• Create a New File

• Save as, hello_world.html

• Write the following codes

• Save again

• Open the saved file, hello_world.html in any browser


Lesson 1 Example 1.1

• Create a New File

• Save as, example1.html

• Write the following codes

• Save again

• Open the saved file, example1.html in any browser


Explanation Example 1.1

•The DOCTYPE declaration defines the document type •The text between <html> and </html> describes the web page •The text between <head> and </head> is the visible head page content •The text between <title> and </title> is the visible title of the browser •The text between <h1> and </h1> is displayed as a heading •The text between <body> and </body> is the visible page content •The text between <p> and </p> is displayed as a paragraph


Web Browsers


The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display

them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

HTML Page Structure


HTML Tags


HTML markup tags are usually called HTML tags • HTML tags are keywords (tag names) surrounded by angle

brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the

end tag • The end tag is written like the start tag, with a forward

slash before the tag name • Start and end tags are also called opening tags and

closing tags

<tagname>content</tagname>

HTML 5 Declaration


<!DOCTYPE html>

The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.

Lab Exercise 1


The Web browser should display the followings,

HTML 5 Headings


HTML headings are defined with the <h1> to <h6> tags. Example <!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>

OUTPUT

HTML Paragraphs HTML paragraphs are defined with the <p> tag Example <!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>

OUTPUT

Copyright: LCCT International Education Institute :: Anjan Mahanta ::

15

HTML Links HTML links are defined with the <a> tag. Example: <!DOCTYPE HTML> <html> <head> <title> Hyperlink </title> <h1> Please Visit My College Website </h1> </head> <body> <a href = "http://www.lcct.ac.th"> Click here </a> </body> OUTPUT


16

HTML Comment

• Comments can be inserted into the HTML code to make it more readable and understandable.

<!DOCTYPE html> <html> <body>  <p>This is a regular paragraph</p> </body> </html>

OUTPUT


17

HTML Line Breaks

Use the <br> tag if you want a line break (a new line) without starting a new paragraph: <!DOCTYPE html> <html> <body> <p>This is<br>a para<br>graph with line breaks</p> </body> </html>

OUTPUT


18

HTML Images HTML images are defined with the <img> tag. Example: <!DOCTYPE html>

<html>

<body>

<img src="w3schools.jpg" width="104" height="142">

</body>

</html>

OUTPUT

Note:

The picture file should be saved in the same folder


19

Exercise 2

Output

LCCT

Lampang College of Commerce and Technology

www.lcct.ac.th


20

Welcome to LCCT !!

HTML Lines

• The <hr>tag creates a horizontal line in an HTML page.

<!DOCTYPE html> <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> </body> </html>

OUTPUT


21

HTML Text Formatting

<!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>

OUTPUT


22

HTML Links

• The Target Attributes

<!DOCTYPE html> <html> <body> <a href="http://www.lcct.ac.th" target="_blank">Visit LCCT!</a> <p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p> </body> </html> OUTPUT


23

HTML Links – The ID Attribute • The id attribute can be used to create a bookmark inside

an HTML document <!DOCTYPE html> <html> <body> <p><a id="tips">Useful Tips Section</a></p> <p><a href="#tips">Visit the Useful Tips Section</a></p> </body> </html>

OUTPUT


24

HTML Head

• The HTML <head> Element

• The <head> element is a container for all the head elements. • Elements inside <head> can include scripts, instruct the

browser where to find style sheets, provide meta information, and more.

• The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.


25

HTML Title

• The HTML <title> Element

• The <title> tag defines the title of the document. • The <title> element is required in all HTML/XHTML documents. • The <title> element:

• defines a title in the browser toolbar • provides a title for the page when it is added to favorites • displays a title for the page in search-engine results

<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>


26

HTML Meta Tags

• <meta> Tags - Examples of Use

• Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

• Define a description of your web page:

<meta name="description" content="Free Web tutorials on HTML and CSS">

• Define the author of a page:

<meta name="author" content=“Anjan Mahanta">

• Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">


27

HTML Meta Tags

• <meta> Tags - Examples of Use

<!DOCTYPE html> <html> <head> <meta name="description" content ="Free Web Toturials"> <meta name ="keywords" content="HTML, CSS, Javascript"> <meta name ="author" content ="Anjan Mahanta"> <meta charset="UTF-8"> </head> <body> <h1> My Website</h1> <p> Some text...</p> </body> </html>


28

OUTPUT

HTML Tables • Tables are defined with the <table> tag

• A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag).

• td stands for "table data," and holds the content of a data cell.

• A <td> tag can contain text, links, images, lists, forms, other tables, etc.

<!DOCTYPE html> <html> <body> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html>

OUTPUT


29

HTML Table Header <!DOCTYPE html> <html> <body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html>


30

OUTPUT

Tables Without Borders

<!DOCTYPE html> <html> <body> <h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>400</td> <td>500</td> </tr> </table> </body> </html>


31

OUTPUT

Table Headers • Example: <!DOCTYPE html> <html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>

<h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html>


32

OUTPUT

Table with Caption • Example:

<!DOCTYPE html> <html> <body> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> </body> </html>


33

OUTPUT

Table cells that span more than one row or one column

• Example:

<!DOCTYPE html> <html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>

<h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>


34

OUTPUT

Tags inside a table • Example:

<!DOCTYPE html> <html> <body> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td>

</tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>


35

OUTPUT

Cell Padding • Example:

<!DOCTYPE html> <html> <body> <h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

<h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>


36

OUTPUT

Cell Spacing • Example:

<!DOCTYPE html> <html> <body> <h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing="0":</h4> <table border="1" cellspacing="0">

<tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing="10":</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>


37

OUTPUT

HTML LISTS

• The most common HTML lists are ordered and unordered lists:


38

Ordered List

• An ordered list starts with the <ol> tag.

• Each list item starts with the <li> tag.

• The list items are marked with numbers.


39

EXAMPLE OUTPUT

Ordered List


40

EXAMPLE: Numbered List OUTPUT

<!DOCTYPE html> <HTML> <title> Ordered List</title> <body> <h4> Numbered List:</h4> <ol> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ol> </body> </HTML>

Ordered List


41

EXAMPLE: Letters List OUTPUT

<!DOCTYPE html> <HTML> <title> Ordered List</title> <body> <h4> Letters List:</h4> <ol type="A"> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ol> </body> </HTML>

Ordered List


42

EXAMPLE: Lower Case List OUTPUT

<!DOCTYPE html> <HTML> <title> Ordered List</title> <body> <h4> Lower Case List:</h4> <ol type=“a”> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ol> </body> </HTML>

Ordered List


43

EXAMPLE: Roman Number List OUTPUT

<!DOCTYPE html> <HTML> <title> Ordered List</title> <body> <h4> Roman Number List:</h4> <ol type=“I”> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ol> </body> </HTML>

Ordered List


44

EXAMPLE: Lowercase Roman Number List OUTPUT

<!DOCTYPE html> <HTML> <title> Ordered List</title> <body> <h4> LowercaseRoman Number List:</h4> <ol type=“i”> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ol> </body> </HTML>

Unordered List

• An ordered list starts with the <ul> tag.

• Each list item starts with the <li> tag.

• The list items are marked with bullets.


45

EXAMPLE OUTPUT

Unordered List


46

EXAMPLE: Disc Bullet List OUTPUT

<!DOCTYPE html> <HTML> <title> Unordered List</title> <body> <h4> Disc Bullet List:</h4> <ul style="list-style-type:disc"> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ul> </body> </HTML>

Unordered List


47

EXAMPLE: Disc Bullet List OUTPUT

<!DOCTYPE html> <HTML> <title> Unordered List</title> <body> <h4> Disc Bullet List:</h4> <ul style="list-style-type:disc"> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ul> </body> </HTML>

Other Types: Circle, Square

Nested List - 1


48

EXAMPLE: Nested List OUTPUT

<!DOCTYPE html> <HTML> <title> Nested List</title> <body> <h4> A Nested List:</h4> <ul> <li> Coffee </li> <li> Tea <ul> <li> Green Tea</li> <li> Black Tea</li> </ul> </li> <li> Milk</li> </ul> </body> </HTML>

Nested List - 2


49

OUTPUT

<!DOCTYPE html> <HTML> <title> Nested List</title> <body> <h4> A Nested List:</h4> <ul> <li> Coffee </li> <li> Tea <ul> <li> Green Tea</li> <ul> <li> Chinese </li> <li> African </li> </ul> </li> </ul> <li> Milk</li> </ul> </body> </HTML>

Description List

• A description list is a list of terms/names, with a description of each term/name.

• The <dl> tag defines a description list. • The <dl> tag is used in conjunction with <dt> (defines

terms/names) and <dd> (describes each term/name):


50

EXAMPLE OUTPUT

The HTML <div> Element • The HTML <div> element is a block level element that can be used as a

container for grouping other HTML elements. • It is used for document layout. • The <div> tag defines a division or a section in an HTML document.


51

EXAMPLE OUTPUT

<!DOCTYPE html> <html> <title> DIV Example </title> <h1> This is an example of Div</h1> <body> <p>Hello! Welcome to IEI</p> <div style="color:#0000FF"> <h1> We love to study here..</h1> <p> We speak english..</p> </div> <p> Come join us!</p> </body> </html>

The HTML <div> Element


52

EXAMPLE

OUTPUT

<!DOCTYPE html> <html> <title> DIV Example With Border </title> <h1> This is an example of div with border and alignment</h1> <body> <div align="center" style="border:1px solid red"> <h1> We love to study here..</h1> <p> We speak english..</p> </div> <p> Come join us!</p> </body> </html>

The HTML <span> Element • The <span> tag is used to group inline-elements in a document.

• The <span> tag provides no visual change by itself.

• The <span> tag provides a way to add a hook to a part of a text or a part of a document.


53

EXAMPLE

<!DOCTYPE html> <html> <title>:: Example of Span ::</title> <body> <p> Welcome to study at the <span style="color:blue; font-weight:bold">IEI</span>. It is the best <span style="color:red; font-weight:bold"> internationalprogram </span> in the north of Thailand.</p> </body> </html> OUTPUT

HTML Layouts • Web page layout is very important to make your website look

good.

• Multiple columns are created by using <div> or <table> elements.

• Most websites have put their content in multiple columns (formatted like a magazine or newspaper).

• CSS are used to position elements, or to create backgrounds or colorful look for the pages.


54

HTML Layouts • Example


55

HTML Layouts • Code :: Part I ::


56

<!DOCTYPE html> <html> <title> :: Website Layout ::</title> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#0066FF";> <h1 style="margin-bottom:0;">International Education Institute</h1></div> <div id="menu" style="background-color:#00FFFF; height:200px; width:100px;float:left;"> <b> MENU</b> <br> About Us <br> Our Programs <br> Photogallery <br> Contact Us </div>

HTML Layouts • Code :: Part II ::


57

<div id="content" style="background-color:#EEEEEE; height:200px; width:400px;float:left;"> Main Content </div> <div id="footer" style="background-color:#0066FF; clear:both; text-align:center;"> Copyright © Anjan Mahanta </div> </div> </body> </html>

HTML Iframes • An iframe is used to display a web page within a web page.


58

<!DOCTYPE html> <html> <title> :: Example of iframe :: </title> <body> <h4> iframe</h4> <iframe src="http://www.lcct.ac.th" width="500" height="300"></iframe> </body> </html>

EXAMPLE

OUTPUT

HTML Iframes • Using iframe as a target for a link


59

<!DOCTYPE html> <html> <body> <iframe src="http://www.lcct.ac.th" name="iframe_a" width="300" height="200" frameborder="0"></iframe> <p><a href="http://www.lcct.ac.th" target="iframe_a">LCCT</a></p> <p><a href="http://www.lit.ac.th" target="iframe_a">LIT</a></p> </body> </html>

EXAMPLE

OUTPUT

HTML Colors • Colors are displayed combining RED, GREEN, and BLUE light.

• The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF).

• Hex values are written as 3 double digit numbers, starting with a # sign.


60

HTML Color Name • 140 color names are defined in the HTML


61

HTML Entities • Reserved characters in HTML must be replaced with character entities.


62

<!DOCTYPE html> <html> <title> :: Example of Entities :: </title> <body> <h4> Entities</h4> <p> à</p> <p> &copy</p> </body> </html>

EXAMPLE

OUTPUT

HTML Entities


63

Useful HTML Character Entities

HTML Entities


64

Useful HTML Character Entities

HTML Multimedia


65

• Multimedia on the web is sound, music, videos, movies, and animations.

• The support for sounds, animations, and videos is handled in different ways by various browsers.

• Multimedia files have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

HTML Plug-ins


66

• A helper application is a small computer program that extends the standard functionality of the browser.

• Helper applications are also called plug-ins.

• Examples of well-known plug-ins are Java applets and Adobe Flash Player.

• Plug-ins can be added to web pages with the <object> tag or the <embed> tag.

The <object> Element


67

• The <object> element is supported in all major browsers .

• The <object> element defines an embedded object within an HTML document.

• It is used to embed plug-ins (like Java applets, ActiveX, PDF, and Flash) in web pages.

<!DOCTYPE html> <html> <title> :: Example of Plug-Ins ::</title> <body> <object width="500" height="300" data="cherry.swf"> </object> </body> </html>

EXAMPLE

Note : Save a file as cherry with .swf extension in the same folder as the html file

The <embed> Element


68

• The <embed> element is supported in all major browsers .

• The <embed> element defines a container for an external application or interactive content (a plug-in).

• The <embed> element will validate in an HTML5 page, but not in an HTML 4 page.

<!DOCTYPE html> <html> <title> :: Example of Plug-Ins ::</title> <body> <embed width="400" height="400" src="cherry.swf"> </body> </html>

EXAMPLE

Note : Save a file as cherry with .swf extension in the same folder as the html file

HTML Sounds/Audio


69

HTML Audio - Using <embed> • The <embed> tag defines a container for external (non-HTML) content. Problems • Different browsers support different audio formats • If a browser does not support the file format, the audio will not play without a

plug-in • If the plug-in is not installed on the users' computer, the audio will not play

<!DOCTYPE html> <html> <title> :: Example of Audio ::</title> <body> <embed width="300" height="100" src="song.mp3"> </body> </html>

EXAMPLE

Note : Save a file as song with .mp3 extension in the same folder as the html file

HTML Sounds/Audio


70

HTML Audio - Using <object> • The <object> tag can also define a container for external (non-HTML) content. Problems • Different browsers support different audio formats • If a browser does not support the file format, the audio will not play without a

plug-in • If the plug-in is not installed on the users' computer, the audio will not play

<!DOCTYPE html> <html> <title> :: Example of Audio ::</title> <body> <object height="50" width="100" data="song.mp3"></object> </body> </html>

EXAMPLE


HTML Sounds/Audio


71

The HTML5 <audio> Element

• The HTML5 <audio> tag defines sound, such as music or other audio streams.

• The <audio> element works in all modern browsers.

• MP3 file (for Internet Explorer, Chrome, Firefox 21+, and Safari)

• OGG file (for older Firefox and Opera).

<!DOCTYPE html> <html> <title> :: Example of Audio ::</title> <body> <audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> Your browser doesn't support this audio format </audio> </body> </html>

EXAMPLE

Note : Save a file as song with .mp3 / .ogg extension in the same folder as the html file

HTML Sounds/Audio


72

The HTML5 <audio> The Best Solution

• The best solution is to use the HTML5 <audio> element + the <embed> element.

• First it tries to play the audio either as MP3 or OGG. If that fails, the code "falls back" to try the <embed> element.

<!DOCTYPE html> <html> <title> :: Example of Audio ::</title> <body> <audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> <embed height="50" width="100" src="song.mp3"> </audio> </body> </html>

EXAMPLE

Note : Save a file as song with .mp3 / .ogg extension in the same folder as the html file

HTML Sounds/Audio


73

HTML Audio - Using A Hyperlink

• If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.

<!DOCTYPE html> <html> <title> :: Example of Audio :: </title> <body> <a href="song.mp3"> play the song</a> </body> </html>

EXAMPLE


HTML Videos


74

HTML Video - The Best Solution

• The best solution is to use the HTML5 <video> element + the <embed> element.

<!DOCTYPE html> <html> <title> :: Example of Video ::</title> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4" <source src="movie.ogg" type="video/ogg" <source src="movie.webm" type="video/webm" <object data="movie.mp4" width="320" height="240"></object> <embed src="movie.swf" width="320" height="240" </video> </body> </html>

EXAMPLE

Note : Save a file as movie with .mp4/ogg/webm/swf extension in the same folder as the html file

HTML YouTube Videos


75

Playing a YouTube Video in HTML

<!DOCTYPE html> <html> <title> :: Example of YouTube Videos ::</title> <body> <iframe width="420" height="345" src="http://www.youtube.com/embed/6zElOFNkbiQ"> </iframe> </body> </html>

EXAMPLE YouTube iFrame

HTML YouTube Videos


76

Playing a YouTube Video in HTML

<!DOCTYPE html> <html> <title> :: Example of YouTube Videos ::</title> <body> <embed width="420" height="345" src="http://www.youtube.com/v/6zElOFNkbiQ" type = "application/x-shockwave-flash"> </embed> </body> </html>

EXAMPLE YouTube Embedded

HTML Forms


77

• HTML forms are used to pass data to a server.

• An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.

• A form can also contain select lists, text area, field set, legend, and label elements.

• The <form> tag is used to create an HTML form

<form> . input elements . </form>

HTML Forms - The Input Element


78

• The most important form element is the <input> element.

• The <input> element is used to select user information.

• An <input> element can vary in many ways, depending on the type attribute.

• An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.

EXAMPLE FORM LAYOUT



79

HTML Code

<!DOCTYPE html> <html> <title>:: Input Form ::</title> <body> <form action="#" method ="post"> First Name: <input type="text" name="first" id="first"> </br> Last Name: <input type="text" name="last" id="last"> </br> Password: <input type="password" name="password" id="password"> </br> <input type= "reset" value="Clear"> <input type ="submit" value="Send"> </form> </body> </html>



80

Form Layout Using Table

<!DOCTYPE html> <html> <title>:: Input Form ::</title> <body> <form action="#" method ="post"> <table> <tr> <td> First Name:</td> <td> <input type="text" name="first" id="first"></td> </tr> <tr> <td> Last Name: </td> <td> <input type="text" name="last" id="last"></td> </tr> <tr> <td> Password: </td> <td> <input type="password" name="password" id="password"> </td> </tr>



81

Form Layout Using Table

<tr> <td> <input type= "reset" value="Clear"> </td> <td> <input type ="submit" value="Send"> </td> </tr> </table> </form> </body> </html> OUTPUT



82

Form Using Radio Buttons and Check Boxes



83

Form Using Radio Buttons and Check Boxes - Code Part 1

<!DOCTYPE html> <html> <title>:: Input Form ::</title> <body> <form action="#" method ="post"> <table> <tr> <td> First Name:</td> <td> <input type="text" name="first" id="first"></td> </tr> <tr> <td> Last Name: </td> <td> <input type="text" name="last" id="last"></td> </tr> <tr> <td> Password: </td> <td> <input type="password" name="password" id="password"> </td> </tr>



84


<tr> <td> Gender: </td> <td> <input type="radio" value="male" name="gender"> Male <input type="radio" value ="female" name="gender"> Female </td> </tr> <tr> <td valign="top"> Age Range: </td> <td> <input type ="radio" value="0" name="age"> Under 18 </br> <input type ="radio" value="1" name="age"> 19 - 39 </br> <input type ="radio" value="2" name="age"> 40-59 </br> <input type ="radio" value="3" name="age"> Over 60 </br> </td> </tr> <tr>



85


<tr> <td valign="top"> Places you like: </td> <td> <input type="checkbox" value="bangkok" name="places"> Bangkok </br> <input type="checkbox" value="chiangmai" name="places"> Chiangmai </br> <input type="checkbox" value="phuket" name="places"> Phuket </br> <input type="checkbox" value="pattaya" name="places"> Pattaya </br> </td> </tr> <tr> <td> <input type= "reset" value="Clear"> </td> <td> <input type ="submit" value="Send"> </td> </tr> </table> </form> </body> </html>

Web development using html 5

Education

Transcript of Web development using html 5