Wednesday, March 12, 2025

Introduction to HTML

 

What is HTML?

HTML (HyperText Markup Language) is a set of markup symbols or codes used to structure content on a webpage. These codes define elements like paragraphs, headings, and lists. Additionally, HTML allows for the inclusion of media (such as images, videos, and audio) and interactive elements like forms.

A web browser interprets these HTML codes and renders the page accordingly. Since HTML is platform-independent, a webpage can be displayed on any operating system and browser.

The modern version of HTML, known as XHTML (eXtensible HyperText Markup Language), combines HTML elements with the syntax rules of XML (eXtensible Markup Language). However, this module will primarily focus on HTML.

What is a Web Browser?

A web browser is a software application that interprets and displays webpages in a user-friendly format. It serves as an interface between the user and the World Wide Web, processing HTML code and presenting information visually.

Popular web browsers include:

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Microsoft Edge

Browsers function as client programs, communicating with web servers to request and retrieve information, which they then display on the user’s screen. While browsers process HTML tags, they do not display them to the user.

HTML Tags

HTML uses tags to structure webpage content. Tags are enclosed in angle brackets (< >) and usually come in pairs:

  • Opening tag: <tagname>
  • Closing tag: </tagname>

Tags define different webpage elements, such as bold text, italic text, headings, paragraphs, and lists. Some tags are self-closing, meaning they do not require an end tag.

Common HTML Tags

Opening TagClosing TagFunction
<A></A>Creates a hyperlink
<BODY></BODY>Defines the main content of the page
<BR>N/ACreates a line break
<HEAD></HEAD>Contains metadata and page settings
<HTML></HTML>Defines an HTML document
<IMG>N/AEmbeds an image
<LI></LI>Represents an item in a list
<OL></OL>Creates an ordered (numbered) list
<UL></UL>Creates an unordered (bulleted) list
<TITLE></TITLE>Sets the title of the page

Example: Paragraph Tag

<p>This is a paragraph.</p>

Some tags, like <br>, do not require a closing tag.

HTML Attributes

Attributes modify HTML elements and are written inside the opening tag as name-value pairs:

<tagname attribute="value">Content</tagname>

For example, to set an image width:

<img src="image.jpg" width="300">

Structure of an HTML Page

A basic HTML document consists of the following essential elements:

  • <html>: The root element, encapsulating all HTML content.
  • <head>: Contains metadata, scripts, styles, and the page title.
  • <title>: Defines the page title, which appears in the browser tab.
  • <body>: Contains the main visible content of the webpage.

Example: Basic HTML Structure

<html>
<head>
    <title>My Webpage</title>
</head>
<body>
    <p>Welcome to my website!</p>
</body>
</html>

The <HEAD> Element

The <head> section contains metadata and additional elements that affect webpage behavior. It may include:

  • <title>: Defines the page title.
  • <style>: Embeds CSS styles.
  • <script>: Includes JavaScript code.
  • <meta>: Provides information about the document (e.g., keywords, description).
  • <base>: Sets a base URL for relative links.
  • <link>: Links to external resources, such as stylesheets.
  • <object>: Embeds multimedia content.

Example: <HEAD> Section with Metadata and JavaScript

<head>
    <meta name="keywords" content="HTML, Web Development">
    <meta name="description" content="An introduction to HTML">
    <base href="https://www.example.com/">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript">
        console.log("Welcome to my site!");
    </script>
</head>

The <TITLE> Element

The <title> tag defines the webpage title, which is displayed in the browser tab and used by search engines for indexing.

Example: <TITLE> Tag

<head>
    <title>Introduction to HTML</title>
</head>

The <BODY> Element

The <body> tag contains all visible content, such as text, images, and links.

Example: Basic HTML Page with <BODY> Content

<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Complete HTML Example

<html>
<head>
    <title>Welcome to My Website</title>
    <meta name="keywords" content="HTML, Web Development">
    <meta name="description" content="Learning HTML basics">
    <base href="https://www.example.com/">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript">
        console.log("Website loaded successfully");
    </script>
</head>
<body>
    <p>Welcome to my website!</p>
</body>
</html>

This concludes the basic introduction to HTML, including its structure, elements, and usage.

How to Create and Run HTML Code

Creating an HTML document is simple. HTML uses plain text (ASCII characters) for both content and formatting. To write HTML code, you need a basic text editor.

Recommended Text Editors:

  • Notepad (default on Windows)
  • VS Code, Sublime Text, or Atom (for advanced features)
  • Dreamweaver (if installed)

Note: Avoid using word processors (e.g., Microsoft Word) as they may add unwanted formatting.

Steps to Create and Run an HTML File

  1. Open a Text Editor

    • Launch Notepad or any preferred text editor on your computer.

  2. Write HTML Code

    • Type your HTML content. Example:
    <!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is my first webpage.</p>
</body>
</html>

  3. Save the File

    • Click File → Save As
    • Choose a location on your computer.
    • Enter a filename with .html or .htm extension (e.g., index.html).
    • Select All Files as the file type (not .txt).

  4. Run the HTML File

    • Locate the saved file.
    • Double-click it, and it will open in your default web browser (Chrome, Firefox, Edge, etc.).

Now, you’ve successfully created and run your first HTML page!

Labels:

posted by Hybrid Education @ March 12, 2025   0 Comments

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home