Friday, September 19, 2025

4.3 HTML

  4.3 HTML



4.3.1 Introduction to HTML

What is HTML?

  • HTML stands for Hypertext Markup Language, the standard language used to create and structure web pages.

  • Hypertext refers to the ability to link to other texts or web pages.

  • Markup refers to the collection of tags and instructions used to format and structure a document.

HTML allows us to create webpages by defining elements such as text, images, forms, and links, and how they should be displayed in the browser. HTML is considered the skeleton of a webpage, providing the basic structure without focusing on design or styling.

History of HTML:

  • Invented by Tim Berners-Lee in 1990 at CERN (European Particle Physics Laboratory).

  • Public Release: HTML was made public in 1993, bringing the World Wide Web to life.

  • The latest major version is HTML5, which supports modern features like audio, video, and responsive design.

  • W3C (World Wide Web Consortium) controls the development of HTML.

HTML Editors:
To create HTML documents, you can use simple text editors such as Notepad, or feature-rich text editors like:

  • Sublime Text

  • Visual Studio Code

  • Notepad++

Common Uses of HTML

HTML is used for various purposes in web development:

  • Creating Webpage Layouts: Defining the structure of web pages.

  • Formatting Text: Creating headings, paragraphs, and lists.

  • Embedding Media: Adding images, videos, and audio to web pages.

  • Interactive Elements: Creating tables, forms, and links.

4.3.2 HTML Tags

What Are HTML Tags?

  • HTML Tags are predefined commands that browsers use to display content on a web page. They tell the browser how to structure and format content.

  • HTML tags are enclosed in angle brackets (e.g., <h1>).

Types of HTML Tags:

  1. Container (Paired) Tags: These tags have both an opening and a closing tag. Example: <p>Text</p>.

    • The opening tag activates the tag, and the closing tag deactivates it.

  2. Empty (Unpaired) Tags: These tags don’t have a closing tag. Example: <br> (line break), <img> (image).

HTML Attributes:

  • Attributes modify the behavior of HTML tags. They are written within the opening tag. For example, <p align="center">This is a centered text.</p> where align="center" is an attribute.

4.3.3 Structure of HTML

A typical HTML document follows this structure:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

  • <!DOCTYPE html>: Declares the document type and version of HTML.

  • <html>: The root element that contains all HTML code.

  • <head>: Contains metadata like the page title, character encoding, and links to CSS or scripts.

  • <body>: Contains the visible content of the page.

Organizing Text in HTML

  1. Comment Tag:

    • Used to insert comments or notes in the HTML code for developers. Comments are ignored by the browser.

    • Syntax: <!-- This is a comment -->.

  2. Line Break <br>:

    • Inserts a line break to move the content to the next line, similar to pressing the "Enter" key.

  3. Non-breaking Space &nbsp;:

    • Used to add extra spaces between words or elements. One &nbsp; equals one space.

  4. Paragraph <p>:

    • Defines a paragraph. Text inside <p> tags is grouped together.

    • Example: <p>This is a paragraph of text.</p>.

    • You can align paragraphs using the align attribute: align="left", align="center", or align="right".

4.3.4 Text Formatting Tags

Text formatting tags are used to enhance the appearance of the content on a webpage.

  1. Heading Tags <h1>…<h6>:

    • Used to create headings of different sizes. <h1> is the largest, and <h6> is the smallest.

    • Example: <h1>This is Heading One</h1>, <h6>This is Heading Six</h6>.

  2. Horizontal Line <hr>:

    • Creates a horizontal line or a "rule" across the page.

    • It is a self-closing tag.

    • Example: <hr align="center" width="50%" size="3" color="blue">.

  3. Text Styles:

    • Bold <b>: Makes text bold. Example: <b>This is bold text</b>.

    • Italic <i>: Makes text italic. Example: <i>This is italic text</i>.

    • Underline <u>: Underlines the text. Example: <u>This text is underlined</u>.

    • Superscript <sup>: Places text above the baseline. Example: E = mc<sup>2</sup>.

    • Subscript <sub>: Places text below the baseline. Example: H<sub>2</sub>O.

  4. Font <font> (older HTML, still exam-important):

    • Used to control the font, size, and color of text.

    • Example: <font face="Times New Roman" size="5" color="red">This is red text.</font>.

  5. Marquee Tag <marquee>:

    • Used to create scrolling text or moving images.

    • Example: <marquee behavior="scroll" direction="left" bgcolor="yellow">Scrolling text here!</marquee>.

4.3.5 Anchor, List, Table, Image Tags and Their Properties

Anchor Tag <a>:

  • Used to create hyperlinks to other web pages, sections, or external sites.

  • Syntax: <a href="URL">Link Text</a>.

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

List Tags:

  • Unordered List <ul>: Displays items with bullet points.

    • Example:

      <ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

  • Ordered List <ol>: Displays items with numbers or letters.

    • Example:

      <ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

  • Definition List <dl>: Displays terms and their definitions.

    • Example:

      <dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

Table Tag <table>:

  • Used to display tabular data.

  • Example:

    <table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Image Tag <img>:

  • Used to insert images on a webpage.

  • Syntax: <img src="image.jpg" alt="description" width="500" height="300">.

4.3.6 Form and Div Tags

Form Tag <form>:

  • Used to collect input from users and send it to the server for processing.

  • Example:

    <form action="submit.php" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required><br>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required><br>
  
  <button type="submit">Login</button>
</form>

Div Tag <div>:

  • A container element used for grouping content. It is helpful in structuring the layout of a webpage.

  • Example:

    <div class="container">
  <h2>Welcome to My Website</h2>
  <p>This is a paragraph inside a div element.</p>
</div>

Conclusion

HTML is the fundamental building block of web development, providing the structure and layout for web pages. By combining tags like headings, paragraphs, lists, images, and links, web developers can create organized and interactive web content. Understanding HTML tags and their attributes is essential for anyone looking to develop websites or web applications.

By on

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)