Webpage Designing in HTML

  • 1,382 views
Uploaded on

list of html programs with questions, output and html codes.

list of html programs with questions, output and html codes.

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,382
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. | 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:-
  • 2. | 2P 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. | 3P 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. | 4P 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. | 5P 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:UsersPublicPicturesSample Pictureskoala.jpg" width="104" height="142"> </body> </html>
  • 6. | 6P 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. | 7P 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. | 8P 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. | 9P 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. | 10P 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. | 11P 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. | 12P 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. | 13P 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. | 14P 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. | 15P 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>