القائمة الرئيسية

الصفحات

 منصة تحفيظ القران الكريم اون لاين 

https://quranmo.com

تعديل المشاركة

8 صفحات html جاهزة مع التطبيق

FAB
(0)
1.       Write an HTML Program to Illustrate Headings and horizontal rule tag.

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<hr>
<h2>This is heading 2</h2>
<hr>
<h3>This is heading 3</h3>
<hr>
<h4>This is heading 4</h4>
<hr>
<h5>This is heading 5</h5>
<hr>
<h6>This is heading 6</h6>
<hr>
</body>
</html>

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
 
2.       Write an HTML Program to Illustrate HTML STYLE (Background color, Text color, Text Font, Text size and Text alignment) tags.

<html>
<body style="background-color:powderblue;">
<hr>
<h1 style="font-family:verdana;">This is a heading</h1>
<hr>
<h1 style="font-size:300%;">This is a heading</h1>
<hr>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<hr>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>

</body>
</html>

This is a heading

This is a heading

Centered Heading

Centered paragraph.

I am normal

I am red

I am blue

I am big

 

3.       Write an HTML Program to Illustrate HTML Text formatting tags( Bold, Italic, sub, sup, emphasize , delete, mark and Small ).
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<hr>
<em>This text is emphasized</em>
<h2>HTML <small>Small</small> Formatting</h2>
<p>My favorite color is <del>blue</del> red.</p>
<h2>HTML <mark>Marked</mark> Formatting</h2>
<hr>
</body>
</html>

This text is bold

This text is italic

This is subscript and superscript

This text is emphasized

HTML Small Formatting

My favorite color is blue red.

HTML Marked Formatting

 
4.       Write a HTML Program to illustrate text background colors ( red, orange yello , cyan and blue)
<html>
<body>
<h2 style="background-color:red">
Background-color set by using red
</h2>
<h2 style="background-color:orange">
Background-color set by using orange
</h2>
<h2 style="background-color:yellow">
Background-color set by using yellow
</h2>
<h2 style="background-color: blue;">
Background-color set by using blue
</h2>
<h2 style="background-color:cyan">
Background-color set by using cyan
</h2>
</body>
</html>


Background-color set by using red

Background-color set by using orange

Background-color set by using yellow

Background-color set by using blue

Background-color set by using cyan

 




5.        Write a HTML Program to create a  table.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>


Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80
 




6.    Write an  HTML Program To prepare List (ordered and Unordered )

<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Computer Graphics</li>
<li>Internet Technologies</li>
<li>Information systems</li>
<li> Computer Networks </li>
<ol>
<li> Local Area Network </li>
<li> Wide Area Network </li>
<li> Metro Politian Area Network </li>
</ol>
                  
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li> Juice</li>
</ol>
</body>
</html>

An Unordered HTML List

  • Computer Graphics
  • Internet Technologies
  • Information systems
  • Computer Networks
    1. Local Area Network
    2. Wide Area Network
    3. Metro Politian Area Network

An Ordered HTML List

  1. Coffee
  2. Tea
  3. Milk
  4. Juice
 

7.       Write an HTML Program using class attribute to divide the page into sections.

<html>
<head>
<style>
div.cities {
    background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. </p>

</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>

</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</div>

</body>
</html>

London

London is the capital of England.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan.

 






8.       Write HTML Program to create form Elements using option attribute.

<html>
<body>

<p>You can preselect an option with the selected attribute.</p>

<form action="/action_page.php">
<select name="cars">
<option value="Toyota">Volvo</option>
<option value="Hyundai">Saab</option>
<option value="grand Marquis” selected>Grand Marquis </option>
<option value="audi">Audi</option>
<option value = “BMW”> BMW</option>
<option value = “Ford” > Ford </option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

You can preselect an option with the selected attribute.



 
تقييم:

أخر المواضيع من قسم : تقنيات الانرتت ،

تعليقات

إرسال تعليق

شاركنا الآراء ،،