Webpage Designing in HTML

| 1 P a g e

Prepared by: Miss Humera Gull Dept: Information System, KKU

HTML

HTML is a language for describing web pages.HTML stands for Hyper Text

Markup Language

A markup language is a set of commands that tell a computer how to format your

document.

A markup language is a set of markup tags .HTML uses markup tags to describe

web pages

HTML documents contain HTML tags and plain text

The purpose of a web browser (like Internet Explorer or Firefox) 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:

The text between <html> and </html> describes the web page .The text between

<body> and </body> is the visible page content

Editing HTML :

HTML can be written and edited using many different editors, we use editor

Notepad to edit HTML.

.HTM or .HTML File Extension?

When you save an HTML file, you can use either the .htm or the .html file

extension. There is no difference

The beginning of the tag <>,The end of the tag is </>

Following are the HTML programs with their output:-

| 2 P a g e


1. Design a webpage to display text ”Introduction to Information Technology” as

title on the page.

<html>

<body> <Title> Introduction to Information Technology

</Title> </body>

</html>

2. Design a webpage to scroll the text “ King Khalid University” right direction

using marquee tag.

<html> <body>

<marquee direction=”right”> King Khalid University </marquee>

</body> </html>

| 3 P a g e


3. Design a web page to write a simple paragraph.

<html>

<body> <p>This is a paragraph.</p>

<p>This is a paragraph.</p> <p>This is a paragraph.</p>

</body> </html>

| 4 P a g e


4. Design a webpage to display text in different sizes using six heading tags.

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

| 5 P a g e


5. Design a webpage to display another link on the page.

<html> <body>

<a href="http://www.w3schools.com"> This is a link</a>

</body> </html>

6. Design a webpage to display an image on the page.

<html> <body>

<img src="C:\Users\Public\Pictures\Sample Pictures\koala.jpg" width="104" height="142">

</body> </html>

| 6 P a g e


7. Design a web page to write a paragraph along with horizontal line.

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

| 7 P a g e


8. Design a web page to format a paragraph using different formatting options like,bold,Italic,small.superscript and subscript.

<html> <body>

<p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><em>This text is emphasized</em></p>

<p><i>This text is italic</i></p> <p><small>This text is small</small></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body> </html>

| 8 P a g e


9. Design a webpage to write a line of text from right to left using bi-directional override.

<html> <body>

<p> If your browser supports bi-directional override (bdo), the next line will be written from the

right to the left (rtl): </p>

<bdo dir="rtl"> Here is some Hebrew text </bdo>

</body> </html>

10. Design a webpage to mark deleted and inserted text.

<html> <body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>

</body> </html>

| 9 P a g e


11. Design a webpage as follows using style tag.

<html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2>

<p style="background-color:green;">This is a paragraph.</p> </body> </html>

12. Design a webpage to display page background color as blue.

<html>

<body bgcolor=”blue”> </body>

</html>

| 10 P a g e


13. Design a webpage to display the unordered list of the following

<html>

<body>

<h4>An Unordered List:</h4>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

| 11 P a g e


14. Design a webpage to display the ordered list of the following

<html>

<body>

<h4>An Ordered List:</h4>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

15. Design a webpage to display “Welcome to KKU” at center of the

page

<html>

<body> <center> Welcome to KKU</center>

</body>

</html>

| 12 P a g e


16. Design a webpage to create a simple ‘monthly Saving’ Table.

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

| 13 P a g e


17. Design a webpage to display check boxes on the page.

<html>

<body>

<form action="">

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

</body>

</html>

| 14 P a g e


18. Design a webpage to display radio buttons on the page

<html>

<body>

<form action="">

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

</body>

</html>

19. Design a webpage to create a button on the form.

<html>

<body>

<form action="">

<input type="button" value="Hello world!">

</form>

</body>

</html>

| 15 P a g e


20. Design a webpage to create a text field on the form.

<html>

<body>

<form action=" ">

First name: <input type="text" name="first name"><br>

Last name: <input type="text" name="last name">

</form>

</body>

</html>

Education

Webpage Designing in HTML