Designing of Web Page: Document layout, List, Tables, Hyperlink, Working with Frames, Forms and Control

Designing a web page involves organizing various elements to create an effective and user-friendly experience. HTML (Hypertext Markup Language) provides a framework to structure content on the web.

Document Layout

The layout of a webpage is critical for usability and aesthetics. HTML5 introduced semantic elements that help define the structure of web pages, making them more readable for both developers and machines (like search engines).

• <header>: Contains introductory content or navigational links.

• <nav>: Used for navigation links.

• <main>: Represents the dominant content of the body of a document.

• <section>: Defines sections within a document.

• <article>: Independently distributable or reusable component of a page.

• <footer>: Contains footer information.

Using these elements, you can create a clear and semantic document structure that improves accessibility and SEO.

Lists

Lists are used for grouping a set of related items. HTML supports ordered lists (<ol>), unordered lists (<ul>), and description lists (<dl>).

<ul>

    <li>Coffee</li>

    <li>Tea</li>

    <li>Milk</li>

</ul>

Tables

Tables organize data in rows and columns and are defined using the <table> tag.

<table>

    <tr>

        <th>Name</th>

        <th>Email</th>

    </tr>

    <tr>

        <td>John Doe</td>

        <td>johndoe@example.com</td>

    </tr>

</table>

<tr> defines a table row, <th> defines a table header, and <td> defines a table data cell.

Hyperlinks

Hyperlinks are defined using the <a> tag and are essential for navigating between web resources.

<a href=”https://www.example.com”>Visit Example</a>

Working with Frames

Frames have largely been deprecated in favor of CSS for styling and layout. However, inline frames (<iframe>) are still widely used to embed other documents within a current HTML document.

<iframe src=”content.html” width=”300″ height=”200″></iframe>

Forms and Controls

Forms collect user input and are defined using the <form> element. Forms contain form controls like text fields, checkboxes, radio buttons, and buttons.

<form action=”/submit” method=”post”>

    <label for=”name”>Name:</label>

    <input type=”text” id=”name” name=”name”><br>

    <input type=”submit” value=”Submit”>

</form>

• Action: URL where the form data is sent when submitted.

• Method: HTTP method (GET or POST).