Webpage Designing in HTML
-
Upload
humera-gull -
Category
Education
-
view
1.423 -
download
2
description
Transcript of 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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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
Prepared by: Miss Humera Gull Dept: Information System, KKU
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>