Webpage Designing in HTML

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

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

| 3P a g e
3. Design a web page to write a simple paragraph.
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>

| 4P 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>
</body>
</html>

| 5P 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:UsersPublicPicturesSample Pictureskoala.jpg" width="104" height="142">
</body>
</html>

| 6P 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>
<hr>
<hr>
</body>
</html>

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

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

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

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

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

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

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

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

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

Webpage Designing in HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (17)

Similar to Webpage Designing in HTML

Similar to Webpage Designing in HTML (20)

Recently uploaded

Recently uploaded (20)

Webpage Designing in HTML