Back to Subject
Practice MCQ

Unit 2 - Notes

CSE326

Unit 2: Expanding HTML Knowledge

1. Working with Lists

HTML lists are used to group a set of related items. There are three main types of lists in HTML.

A. Unordered Lists (<ul>)

Used for items where the order does not matter. Items are typically marked with bullet points.

  • Tag: <ul> starts the list, </ul> ends it.
  • List Item: <li> defines each item.
  • Attributes: type (values: disc, circle, square). Note: CSS list-style-type is preferred in modern development.

HTML
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

B. Ordered Lists (<ol>)

Used for items where the order is important. Items are marked with numbers or letters.

  • Tag: <ol> starts the list, </ol> ends it.
  • Attributes:
    • type: Defines the numbering style.
      • 1: Numbers (Default)
      • A: Uppercase letters
      • a: Lowercase letters
      • I: Uppercase Roman numerals
      • i: Lowercase Roman numerals
    • start: Specifies the start value of the ordered list.

HTML
<ol type="A" start="3">
  <li>Step 1 (Labeled C)</li>
  <li>Step 2 (Labeled D)</li>
</ol>

C. Definition Lists (<dl>)

Used to display a list of terms and their descriptions (like a glossary).

  • <dl>: Defines the description list.
  • <dt>: Defines the term (name).
  • <dd>: Defines the data (description).

HTML
<dl>
  <dt>HTTP</dt>
  <dd>HyperText Transfer Protocol</dd>
  <dt>FTP</dt>
  <dd>File Transfer Protocol</dd>
</dl>

2. Hyperlinks (Anchor Tag)

Hyperlinks allow users to navigate from one page to another or to specific parts of the same page.

  • Tag: <a>
  • Key Attributes:
    • href: The URL (destination) of the link.
    • target: Specifies where to open the link.
      • _self: Default (same window).
      • _blank: New tab/window.
    • title: Tooltip text when hovering.

Code Example:

HTML
<a href="https://www.google.com" target="_blank" title="Go to Google">Visit Google</a>

3. Inserting Images

Images are embedding using the <img> tag. This is a void element (it has no closing tag).

  • Tag: <img>
  • Key Attributes:
    • src (Source): The path to the image file (relative or absolute URL).
    • alt (Alternative Text): Text displayed if the image fails to load; crucial for screen readers (accessibility).
    • width / height: Defines the size in pixels.

Code Example:

HTML
<img src="logo.png" alt="Company Logo" width="200" height="100">

4. Embedding Media

HTML5 introduced native tags to embed audio and video files without requiring external plugins like Flash.

A. Audio

  • Tag: <audio>
  • Attributes: controls (play/pause buttons), autoplay, loop, muted.
  • Source: Can use the src attribute or nested <source> tags for multiple format support (mp3, ogg, wav).

HTML
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

B. Video

  • Tag: <video>
  • Attributes: controls, width, height, poster (thumbnail image), loop.

HTML
<video width="320" height="240" controls poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

5. HTML Favicon

A favicon (favorite icon) is a small image displayed next to the page title in the browser tab.

  • Implementation: Placed inside the <head> section using the <link> tag.
  • Standard Format: .ico (though .png and .jpg are widely supported now).

Code Example:

HTML
<head>
  <title>My Page</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>

6. HTML Div (<div>)

The <div> tag defines a division or a section in an HTML document.

  • It is a Block-level element (starts on a new line and takes up the full width).
  • It has no specific semantic meaning but is strictly used as a container for other HTML elements, usually to apply CSS styling or layout grouping.

Code Example:

HTML
<div style="background-color: lightgray; padding: 20px;">
  <h3>Section Title</h3>
  <p>This paragraph is inside a div container.</p>
</div>

7. HTML Text Formatting

HTML offers tags to format text for visual styling or semantic importance.

  • <b>: Bold text (visual only).
  • <strong>: Important text (semantic bold).
  • <i>: Italic text (visual only).
  • <em>: Emphasized text (semantic italic).
  • <mark>: Highlighted text (usually yellow background).
  • <small>: Smaller text.
  • <del>: Deleted text (strikethrough).
  • <sub>: Subscript (e.g., H2O).
  • <sup>: Superscript (e.g., X2).

8. Working with Tables

Tables are used to arrange data into rows and columns.

Basic Structure

  • <table>: Container for the table.
  • <tr>: Table Row.
  • <th>: Table Header (Bold and centered by default).
  • <td>: Table Data (Standard cell).

Merging Cells (Colspan and Rowspan)

  • Colspan: Merges cells horizontally (across columns).
    • Attribute: colspan="n" where n is the number of columns to merge.
  • Rowspan: Merges cells vertically (across rows).
    • Attribute: rowspan="n" where n is the number of rows to merge.

Code Example (Colspan & Rowspan):

HTML
<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Contact Details</th> <!-- Merges 2 columns -->
  </tr>
  <tr>
    <td rowspan="2">John Doe</td> <!-- Merges 2 rows -->
    <td>Email: john@example.com</td>
    <td>Phone: 555-1234</td>
  </tr>
  <tr>
    <td colspan="2">Address: 123 Main St</td>
  </tr>
</table>

9. Working with Forms

Forms are used to collect user input and send it to a server for processing.

A. The <form> Tag Attributes

  1. action: Defines the URL where the form data is sent when submitted (e.g., login.php).
  2. method: Defines the HTTP method used to send data.
    • GET: Appends form data to the URL (e.g., page.php?name=John). NOT secure. Used for queries/search.
    • POST: Sends form data in the HTTP request body. Secure. Used for passwords/sensitive data.

B. Form Elements and Controls

1. Text Input Controls (<input>)

The <input> element varies based on the type attribute.

  • type="text": Single-line text field.
  • type="password": Masks characters (dots/asterisks).
  • type="email": Validates for email format.
  • Common Attributes: placeholder, name, required, value.

2. TextArea (<textarea>)

Used for multi-line text input (e.g., comments, address).

  • Attributes: rows (height), cols (width).
  • Note: Closing tag is required.

3. Buttons

  • <input type="submit">: Submits the form data to the action URL.
  • <input type="reset">: Resets all form values to default.
  • <input type="button">: A clickable button (usually triggered by JavaScript).
  • <button>: More flexible HTML5 button tag.

4. Checkboxes

Allows selection of zero or more options from a set.

  • type="checkbox"
  • Attributes: checked (pre-selects the box).

5. Radio Buttons

Allows selection of only one option from a set.

  • type="radio"
  • Important: All radio buttons in a group must share the same name attribute to function as a toggle.

6. Select (Dropdown Box)

Creates a drop-down list.

  • <select>: Wrapper element.
  • <option>: Defines items in the list.
  • Attributes: selected (on <option>), multiple (allows multiple selections).

7. File Select

Allows users to upload files.

  • type="file"
  • Requirement: The <form> tag must have enctype="multipart/form-data" for file uploads to work correctly.

Comprehensive Form Example

HTML
<form action="/submit-data" method="POST" enctype="multipart/form-data">
    <!-- Text Input -->
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="firstname" placeholder="Enter name" required><br><br>

    <!-- Password -->
    <label for="pwd">Password:</label>
    <input type="password" id="pwd" name="password"><br><br>

    <!-- Radio Buttons (Gender) -->
    <label>Gender:</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female<br><br>

    <!-- Checkboxes (Interests) -->
    <label>Interests:</label>
    <input type="checkbox" name="coding" value="yes"> Coding
    <input type="checkbox" name="design" value="yes"> Design<br><br>

    <!-- Dropdown Select -->
    <label for="country">Country:</label>
    <select name="country" id="country">
        <option value="usa">USA</option>
        <option value="uk">UK</option>
        <option value="india" selected>India</option>
    </select><br><br>

    <!-- Text Area -->
    <label for="msg">Message:</label><br>
    <textarea name="message" rows="4" cols="30"></textarea><br><br>

    <!-- File Upload -->
    <label>Upload CV:</label>
    <input type="file" name="cv_upload"><br><br>

    <!-- Buttons -->
    <input type="submit" value="Submit">
    <input type="reset" value="Clear Form">
</form>