17CS2025 – Web Technology Lab URK17CS____
Ex No:1 Simple Web Design using HTML
Date of Exercise
Aim
To build a web page that conforms to HTML5 standards and has the following elements:
div, p, headings, image, anchor, table ,audio, video, iframe, form, input, select, progress,
fieldset, label, embed..
Description
Hypertext Markup Language (HTML) is the standard markup language for documents
designed to be displayed in a web browser.
Working with Tables
The HTML tables are created using the <table> tag in which the <tr> tag is used to create
table rows and <td> tag is used to create data cells. The elements under <td> are regular
and left aligned by default. colspan attribute used to merge two or more columns into a
single column. Similar way rowspan is used to merge two or more rows. The caption tag
will serve as a title or explanation for the table and it shows up at the top of the table. You
can use one table inside another table. Not only tables you can use almost all the tags inside
table data tag <td>.
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
Working with list
HTML offers web authors three ways for specifying lists of information. Lists may contain
−
1
17CS2025 – Web Technology Lab URK17CS____
<ul> − An unordered list. This will list items using plain bullets.
<ol> − An ordered list. This will use different schemes of numbers to list your items.
<dl> − A definition list. This arranges your items in the same way as they are
arranged in a dictionary.
type attribute for <ul> tag to specify the type of bullet you like. By default, it is a
disc.
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
Working with Text
<abbr> tag defines an abbreviation or an acronym.
<blockquote> tag specifies a section that is quoted from another source.
<cite> tag defines the title of a work (e.g. a book, a song, etc.).
<code> tag is a phrase tag. It defines a piece of computer code.
<em> tag is a phrase tag. It renders as emphasized text.
<h1> to <h6> tags are used to define HTML headings.
<mark> tag defines marked text.
<pre> tag defines preformatted text.
<span> tag is used to group inline-elements in a document.
<sub> tag defines subscript text.
<sup> tag to define superscripted text
<p> element defines a paragraph
Working with links
HTML links are hyperlinks. It link another document. The target attribute specifies where
to open the linked document.
The target attribute can have one of the following values:
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is
default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
2
17CS2025 – Web Technology Lab URK17CS____
<body>
<p>Click any of the following links</p>
<a href = "/html/[Link]" target = "_blank">Opens in New</a> |
<a href = "/html/[Link]" target = "_self">Opens in Self</a> |
<a href = "/html/[Link]" target = "_parent">Opens in Parent</a> |
<a href = "/html/[Link]" target = "_top">Opens in Body</a>
</body>
HTML Entities
Some characters are reserved in HTML. Character entities are used to display reserved
characters in HTML. To display a less than sign (<) we must write: <
Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long. To make a bookmark, you must first
create the bookmark, and then add a link to it.
Image
Images are very important to beautify as well as to depict many complex concepts in simple
way on your web page. Insert any image in your web page by using <img> tag. src attribute
specify the location of the image file. Image name is always case sensitive. The alt attribute
is a mandatory attribute which specifies an alternate text for an image, if the image cannot
be displayed. You can set image width and height based on your requirement using width
and height attributes.
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/[Link]" alt = "Test Image" />
</body>
Source Code
[Paste your code here and Align it neatly]
Output Screen Shot
[Paste your web page screen shots and validator page]
3
17CS2025 – Web Technology Lab URK17CS____
Result
Thus the web page is designed with HTML5 elements and the document is validated with
w3validator.
Video URL (Youtube):
Web Hosting URL: