2020-01-15
90
Inserting an image in the HTML code of the page.
<!DOCTYPE html>
<html>
<body>
<h2> Flowers in China </h2>
<img src="img_china.jpg" alt="Flowers in China" height="345">
</body>
</html>
Inserting a table in the HTML code of the page.
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<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>
Adding a horizontal line in the HTML code.
The HTML <hr> tag is used for creating a horizontal line. This is also called Horizontal Rule in HTML.
The HTML <hr> tag also supports following additional attributes −
| Attribute | Value | Description |
| align | left right center | Deprecated − Specifies the alignment of the horizontal rule. |
| noshade | noshade | Deprecated − Removes the usual shading effect that most browsers display. |
| size | pixels or % | Deprecated − Specifies the height of the horizontal rule. |
| width | pixels or % | Deprecated − Specifies the width of the horizontal rule. |
<!DOCTYPE html>
|
|
|
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr size=”5” color=”#ff0000>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
</body>
</html>
Change the background color to yellow in the HTML code of the page.
<!DOCTYPE html>
<html>
<body bgcolor="yellow">
<h1>Hello world!</h1>
</body>
</html>
Create a list of students in the HTML code.
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML also supports description lists. A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Create an HTML file that specifies a page that contains a heading and two paragraphs of text. Use the HTML tags.
<html>
<head>
<title> ict test web-site </title>
<body>
<h1> This is heading 1</h1>
<p> This is some text.</p>
<hr>
<h2> This is heading 2</h2>
<p> This is another text.</p>
<hr>
</body>
</head>
</html>
Create a webpage that prints your name to the screen in the HTML code.
<html>
<head>
<title> My official web page </title>
<body bgcolor="blue">
<h1 align="center"> Oliver Twist </h1>
</body>
</html>
Create two lists with any information you want. One list should be an ordered list, the other list should be an unordered list in the HTML code.
|
|
|
<html>
<head>
<body>
<h1> My favourite drinks </h1>
<ul style="list-style-type:disc">
<li>coffee</li>
<li>tea</li>
<li>milk</li>
</ul>
<h1> My favourite sweets </h1>
<ol type="1">
<li> ice-cream </li>
<li> chocolate </li>
<li> waffles </li>
</ol>
</head>
</body>
</html>
