Scribd
Upload
114 views

Web Programming SCV1223: Dr. MD Sah Bin HJ Salam En. Rosely Bin Kumoi

This document provides an overview of HTML elements for formatting text, images, links, tables, and forms. It explains basic tags like <html>, <head>, <title>, <body>, and <p> as well as other common tags for bold, italics, font, size, color, images, links, tables, and form elements. Sample code is given to demonstrate how to use many of these tags to structure and style a web page.

Uploaded by

Peter Hazops
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
114 views

Web Programming SCV1223: Dr. MD Sah Bin HJ Salam En. Rosely Bin Kumoi

This document provides an overview of HTML elements for formatting text, images, links, tables, and forms. It explains basic tags like <html>, <head>, <title>, <body>, and <p> as well as other common tags for bold, italics, font, size, color, images, links, tables, and form elements. Sample code is given to demonstrate how to use many of these tags to structure and style a web page.

Uploaded by

Peter Hazops
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

WEB PROGRAMMING SCV1223 HTML

Dr. Md Sah bin Hj Salam En. Rosely bin Kumoi

Guide to HTML code


Not case sensitive Use tag for formatting output: new line, paragraph, text size, color, font type, etc. Can be a single or coupled tag Tag general format:
Single: <tag_format> Double: <tag_format> . . . </ tag_format>

Very simple HTML code


<html> <head> <title>Simple HTML</title> </head> <body> Hello World </body> </html>

More complex code


<html> <head> <title>More about HTML Text</title> </head> <body> This is a normal text<br><b>This is a text (bold)</b> <br> <i>This is a text (italic)</i> <p> <font face=Arial color=#FF0000 size=+3> This is a text with font = Arial, size = 3, color = Green </font> <p> Please set me to bold, italic, font = Arial, size = 3, color = Red <p> <pre> This is a preformatted text </pre> </body> </html>

Sample output from previous script

Image
<img src=image_file_name ... >

Link
<a href=reference object . . . > linked object </a>

reference object :
Part of text in the same document Other document Image / animation / audio / video Application logic (CGI script) Client script (JavaScript / VBScript)

linked object :
Text Image

Table
Begin table Begin row Column1, Column2, . . . End row ... End table

Table
Begin table = <table . . . > End table = </table> Begin row = <tr . . . > End row = </tr> Column = <td . . . > column content </td>

column content : text, image, linked object, etc.

Table
Table with 2 rows & 3 columns for each row:
<table border cols=3 rows=2 width=100%> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>

More complex table #1

There are two rows:

STEP 1

<table> <tr> . . .</tr> <tr> . . .</tr> </table>

More complex table #1

First row -> two columns Second row -> one column

STEP 2

<table> <tr> <td>. . .</td> <td> . . . </td> </tr> <tr> <td> . . . </td></tr> </table>

More complex table #1

Span two columns for the single column in the second row: STEP 3 - end
<table> <tr> <td>. . .</td> <td> . . . </td> </tr> <tr> <td colspan=2> . . . </td></tr> </table>

More complex table #2

There are two rows (max):

STEP 1

<table> <tr> . . .</tr> <tr> . . .</tr> </table>

More complex table #2

Column: Column:

is the first column in the first row is the second column in the first row is the second column in the second row STEP 2

Column:

<table> <tr> <td>. . .</td> <td>. . .</td> </tr> <tr> <td>. . .</td> </tr> </table>

More complex table #2

STEP 3 - end Span two rows for column:


<table> <tr> <td rowspan=2>. . .</td> <tr> <td>. . .</td> </tr> </table> <td>. . .</td> </tr>

More complex table #3

Its your turn. Try This ???

Form
Begin form Form object components End form

Form
Begin form = <form . . . > Form object components =
Textfiled, Password, Hidden File Checkbox, Radio Button TextArea, List Box, Combo Box, Submit Button, Reset Button, Buttons

End form = </form>

Form
<form method=? action=? > Form object components </form>

Form object components


Textfield
<input type=text name=txt value=TextField>

Password
<input type=password name=pswd size=15>

Hidden <input type=hidden name=any_name>

Form object components


TextArea
<textarea name=comment rows=5 cols=23> default textarea value </textarea>

Form object components


List Box (single)
<select name=card> <option value=M selected>Master Card <option value=V>Visa <option value=A>American Express </select>

Form object components


List Box (multiple selection)
<select name=language multiple> <option value=C>C <option value=CPP>C++ <option value=Java>Java </select>

Form object components


Radio Button
<input type=radio name=card value=M checked> Master Card <input type=radio name=card value=V> Visa <input type=radio name=card value=A> American Express

Check Box
<input type=checkbox name=C value=C checked>Chicken <input type=checkbox name=F value=F checked>Frog <input type=checkbox name=S value=S checked>Snail

You might also like