Web development using html 5

Web Development Using

Anjan Mahanta LCCT - International Education Institute

anjan_mahanta@hotmail.com 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:

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 ::

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

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

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

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

<html>

<body>

</body>

</html>

OUTPUT

The picture file should be saved in the same folder

Exercise 2

Output

Lampang College of Commerce and Technology

www.lcct.ac.th

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

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

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

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

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

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>

HTML Meta Tags

• <meta> Tags - Examples of Use

• Define keywords for search engines:

• Define a description of your web page:

• Define the author of a page:

• Refresh document every 30 seconds:

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>

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

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>

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>

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>

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>

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>

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>

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>

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>

OUTPUT

HTML LISTS

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

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.

EXAMPLE OUTPUT

Ordered List

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

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

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

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

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.

EXAMPLE OUTPUT

Unordered List

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

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

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

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):

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.

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

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.

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

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

HTML Layouts • Example

HTML Layouts • Code :: Part I ::

<!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 ::

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

<!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

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

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

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

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

EXAMPLE

OUTPUT

HTML Entities

Useful HTML Character Entities

HTML Entities

Useful HTML Character Entities

HTML Multimedia

• 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

• 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

• 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

• 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

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

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

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

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

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

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

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

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

• 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

• 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

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>

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>

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

Form Using Radio Buttons and Check Boxes

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>

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

<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

Designing static pages using html

Web Application Development 1georgecorser.com/courses/cis255/slides/cis255_04c.pdf · HTML 5 Canvas HTML 5 SVG HTML 5 Google Maps HTML 5 Media HTML 5 Video HTML 5 Audio HTML 5 Plug-ins

How the Web Works Using HTML

DESIGN OF CANAL REGULATOR USING HTML

Creating a Web Page Using HTML, XHTML, and CSS: The … 6/Do NOT touch/html/htm… · Creating a Web Page Using HTML, XHTML, and CSS Module 6 ... Creating a Web Page Using HTML, XHTML,

Using Html

Skill Explained - Bihar Skill Development Mission - …€¦ · Web viewThe HTML and CSS are internally commented to describe code usage. 2 O HTML is validated to HTML5 using the

HTML, CSS , Javascript€¦ · HTML JavaScript HTML Editors HTML can be edited by using professional HTML editors like Microsoft WebMatrix, Sublime Text, Notepad, Text edit, Any editor

HTML Templates Using Clear Silver

Project on Library Using HTML

CIS 205—Web Design & Development Dreamweaver Chapter 5 Using HTML Tables to Lay Out a Page.

Web designing using html

using HTML in PowerSchool

Web Development Benedicto B. Balilo Jr.. Web Development This course covers Web site development using three methods: hand- coding HTML using a text editor;

Html web designing using tables

Html Development Companies

WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS.

Using HTML Access - VMware Horizon 6

Printing photos-html-using-android

[XLS]kcg.gujarat.gov.inkcg.gujarat.gov.in/content/topic_list_Subject_Final_12... · Web viewWebsite Development - I ( Introduction about HTML & simpel tags using) Website Development