HTML /XHTML 2011

Welcome to web designing!

Basically there are many ways of developing web sites with various languages and many
other tools. In this course we basically focus on the web sites designed with the HTML
(Hyper Text Markup Language).
The practical modules layout would be as follows.

Elements of a web page. .............................................................................................................. - 2 Create web pages using a text editor (Notepad). ...................................................................... - 3 Your first web page ...................................................................................................................... - 3 Paragraphs ................................................................................................................................... - 3 Horizontal Line & Line break ........................................................................................................ - 4 Horizontal line .......................................................................................................................... - 4 Line Break..................................................................................................................................... - 4 Text Formatting ............................................................................................................................ - 5 Text Heading ............................................................................................................................ - 5 Fonts ......................................................................................................................................... - 5 Hyperlink.................................................................................................................................. - 6 HTML Styles CSS .................................................................................................................... - 6 HTML Tables................................................................................................................................. - 7 Inserting a table .................................................................................................................... - 7 HTML Table Headers ............................................................................................................ - 7 HTML Lists .................................................................................................................................... - 8 Unordered Lists (bullets) ...................................................................................................... - 8 Ordered Lists ........................................................................................................................ - 8 Definition Lists ...................................................................................................................... - 8 HTML Forms ................................................................................................................................. - 9 Input Elements ...................................................................................................................... - 9 Text Fields ............................................................................................................................ - 9 Password Field...................................................................................................................... - 9 Radio Buttons .............................................................................................................................. - 10 Checkboxes ............................................................................................................................... - 10 Submit Button.............................................................................................................................. - 10 -

Good Luck!
Powered by Arjun De Silva

Page - 1 -

HTML /XHTML 2011

Elements of a web page.

8. TABLE

4. IMAGE

1. TITLE

2. BODY

7. LIST

6. TEXT FIELD

5. HYPERLINK

Powered by Arjun De Silva

3. FOOTER

9. FORM

Page - 2 -

HTML /XHTML 2011

Create web pages using a text editor (Notepad).
I.
II.
III.
IV.
V.

STEP 01: Open NOTEPAD application in the windows applications.

STEP 02: Insert starting tags.
STEP 03: Create the Title, Head, Body etcetera.
STEP 04: Insert closing tags to relevant places.
STEP 05: Save the file along wit the .html/.htm file extensions in a folder.

Your first web page

<html>
<body>
This is my first web page.
</body>
</html>

Paragraphs
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</body>
</html>

Powered by Arjun De Silva

Page - 3 -

HTML /XHTML 2011

Horizontal Line & Line break
Horizontal line
<html>
<body>
<p>This is a paragraph.</p>
<hr/>
<p>This is the second paragraph.</p>
<hr/>
<p>This is the third paragraph.</p>
</body>
</html>

Line Break
A paragraph basically addresses a specific matter. Therefore you should insert
paragraph tags <p> for different paragraphs in web pages. But to move down the
same paragraph the HTML uses another coding called a line break.

<html>
<body>
This is the first line of the paragraph. <br/>
This is the second line of the paragraph. <br/>
This is the third line of the paragraph
</body>
</html>

Powered by Arjun De Silva

Page - 4 -

HTML /XHTML 2011

Text Formatting
Text Heading
<html>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
</html>

Fonts
<html>
<body>

<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></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_subscript and ^superscript</p>

</body>
</html>

Powered by Arjun De Silva

Page - 5 -

HTML /XHTML 2011

Hyperlink
<html>
<body>
<a href="http://www.google.com">Go to Google</a>

</body>
</html>

HTML Styles CSS

<html>
<body style="background-color: PowderBlue ;">

<h1>Look! Styles and colors</h1>

<p style="font-family: verdana; color: red">

This text is in Verdana and red</p>

<p style="font-family: times; color: green">

This text is in Times and green</p>

<p style="font-size: 30px">This text is 30 pixels high</p>

</body>
</html>

Powered by Arjun De Silva

Page - 6 -

HTML /XHTML 2011

HTML Tables
Inserting a table

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

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

HTML Table Headers

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

Powered by Arjun De Silva

Page - 7 -

HTML /XHTML 2011

HTML Lists
Unordered Lists (bullets)

<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

Ordered Lists

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Definition Lists

<dl>
<dt>Coffee</dt>
<dd>- Coffee is a black hot drink</dd>
<dt>Milk</dt>
<dd>- Milk is a white cold drink</dd>
</dl>

Powered by Arjun De Silva

Page - 8 -

HTML /XHTML 2011

HTML Forms
Input Elements

<form>
.
input elements
.
</form>

Text Fields

<form>
First name: <input type="text" name="firstname" /> <br />
Last name: <input type="text" name="lastname" />
</form>

Password Field

<form>
Password: <input type="password" name="pwd" />
</form>

Powered by Arjun De Silva

Page - 9 -

HTML /XHTML 2011

Radio Buttons
<form>
<input type="radio" name="gender" value="male" /> Male<br />
<input type="radio" name="gender" value="female" /> Female
</form>

Checkboxes
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have
a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have
a car
</form>

Submit Button
<form name="input" action="html_form_action.asp"
method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Powered by Arjun De Silva

Page - 10 -