Short Notes On HTML

-

Introduction

HTML stands for Hyper Text Markup Language, it is an scripting language, NOT a programming language, a programming language includes loops, conditional statements and object oriented programming in order for making the program respond based on the conditions, or in other words, giving the capability to computer to think, while scripting languages are used by Browsers to render the UI(User Interface), looks of a page.

Softwares needed to run HTML

Code Editor: Notepad, Notepad++, Visual Studio Code

Browser: Google Chrome, Mozilla Firefox, Microsoft Edge etc.

How HTML runs on Browser?, What really happens?

When an HTML file is opened in a web browser, the browser acts as an interpreter, reading and processing the HTML code to display the web page. If the file is stored locally, the browser accesses it directly; if it's hosted on a web server, the browser sends an HTTP request to fetch the HTML document. Once received, the browser parses the HTML line by line, constructing the Document Object Model (DOM), which represents the page structure. If the document references external resources like CSS, JavaScript, or images, the browser fetches them and applies styles and scripts accordingly. The CSS (Cascading Style Sheets) controls the page's layout and appearance, while JavaScript adds interactivity, such as handling button clicks or form submissions. Finally, the browser renders the fully processed page for the user. If any interactions occur, such as clicking a button or scrolling, JavaScript dynamically updates the DOM, modifying the page without needing to reload. This entire process happens quickly, ensuring a smooth browsing experience.

Founder of HTML

The HyperText Markup Language (HTML) was invented by Tim Berners-Lee in 1991 while working at CERN (European Organization for Nuclear Research). He created HTML as a simple way to structure documents and link them using hypertext. His goal was to enable scientists and researchers to share information easily over the internet.

Evolution of HTML

  1. HTML 1.0 (1993)

    • The first official version.
    • Basic text formatting, links, and images.
    • No styling or scripting.

  2. HTML 2.0 (1995)

    • Introduced forms (text fields, buttons).
    • Added support for tables.
    • Became the standard for a short time.

  3. HTML 3.2 (1997)

    • First version standardized by W3C (World Wide Web Consortium).
    • Added support for scripting (JavaScript).
    • Included new elements like <font> and <table> for layout.

  4. HTML 4.01 (1999)

    • Introduced CSS support, separating content from design.
    • Improved form elements.
    • Deprecated some older tags (like <font>).
    • Last major version before the shift to XHTML.

  5. XHTML 1.0 (2000)

    • A stricter version of HTML using XML rules.
    • Required properly closed tags and lowercase element names.
    • Designed to make HTML more structured.

  6. HTML5 (2014 - Present)

    • Developed to replace XHTML and outdated HTML versions.
    • Introduced semantic elements like <header>, <article>, <section>, etc.
    • Supports audio, video, and animations without plugins (e.g., Flash).
    • Improved form controls and mobile-friendly design.
    • Supports JavaScript APIs (like geolocation, local storage).

Current & Future Trends

  • HTML Living Standard: HTML is now continuously updated as a "Living Standard" by the WHATWG (Web Hypertext Application Technology Working Group).
  • More focus on Web Components and Progressive Web Apps (PWAs).
  • AI & Automation integration in web development.

Basic HTML Structure


Explanation of the Structure:

  1. <!DOCTYPE html>

    • Declares the document type as HTML5.
    • Ensures the browser correctly interprets the page.

  2. <html lang="en">

    • The root element that wraps all HTML content.
    • The lang attribute defines the language of the page.

  3. <head> Section

    • Contains metadata (information about the document) and external resources.
    • Important elements inside <head>:
      • <meta charset="UTF-8"> → Ensures correct text encoding.
      • <meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes the page responsive.
      • <title> → Defines the title displayed in the browser tab.
      • <link rel="stylesheet" href="styles.css"> → Links an external CSS file for styling.

  4. <body> Section

    • Contains all the visible content of the web page.
    • Common elements:
      • <h1> → Defines a heading.
      • <p> → Represents a paragraph.
      • <a href="URL"> → Creates a hyperlink.


Tags in HTML

In HTML (HyperText Markup Language), tags are used to define elements and structure web pages. They are enclosed in angle brackets (<>) and usually come in pairs (opening and closing tags), though some are self-closing.

1. Basic Structure Tags

These tags define the fundamental structure of an HTML document.


2. Text Formatting Tags

These tags control how text appears on the webpage.


3. List Tags

Used to create ordered and unordered lists.


4. Table Tags

Used to create tables in HTML.


5. Form Tags

Used to create input fields and user interaction elements.


6. Media Tags

These tags are used to insert media like images, audio, and video.


7. Semantic Tags

These tags improve accessibility and SEO.


8. Link & Metadata Tags

Used for linking styles, scripts, and defining metadata.


9. Interactive & Advanced Tags

Used to enhance web functionality.


Attributes in HTML

In HTML, attributes provide additional information about an element. They are always included inside the opening tag and follow the syntax:

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

For example:

<a href="https://www.google.com">Visit Google</a>

Here, href is an attribute that specifies the link destination.

Types of HTML Attributes (with Examples)

  1. Global Attributes (Applicable to all elements)

    • id (Assigns a unique ID to an element)
    • class (Groups elements for styling)
    • style (Adds inline CSS)
    • title (Displays a tooltip on hover)
    • lang (Defines language)

    Example:

    <p id="intro" class="text" style="color: blue;" title="This is a paragraph" lang="en">
    Hello, World!
</p>

  1. Anchor Attributes (Used in <a> tag)

    • href (Specifies the link URL)
    • target (Defines how the link opens: _blank, _self, etc.)
    • rel (Defines relationship: nofollow, noopener)
    • download (Triggers file download)
    • type (Specifies the MIME type)

    Example:

    <a href="https://example.com" target="_blank" rel="noopener" download="file.pdf">
    Download File
</a>

  1. Image Attributes (Used in <img> tag)

    • src (Specifies image URL)
    • alt (Defines alternative text for accessibility)
    • width / height (Sets dimensions)
    • loading (Specifies lazy loading)
    • title (Shows tooltip on hover)

    Example:

    <img src="image.jpg" alt="A beautiful scenery" width="300" height="200" loading="lazy">

  1. Form Attributes (Used in <input> and <form> tags)

    • type (Defines input type: text, password, checkbox, etc.)
    • placeholder (Displays hint text)
    • value (Sets default value)
    • required (Makes field mandatory)
    • readonly (Prevents user input)

    Example:

    <input type="text" placeholder="Enter your name" value="John Doe" required>

  1. Table Attributes (Used in <table> tag)

    • border (Defines border width)
    • cellpadding / cellspacing (Adjusts space inside and between cells)
    • width (Sets table width)
    • align (Aligns content)
    • colspan / rowspan (Merges columns or rows)

    Example:

    <table border="1" width="50%">
    <tr>
        <td colspan="2">Merged Cell</td>
    </tr>
</table>
Check out Alison Certificate Courses for deeper understanding.

😀We hope you found it helpful, Keep track on us, follow us , for more such helpful content!, we are blessed to have you here!, great time ahead!, please leave your feedback in the comments section.

Comments

Post a Comment

Popular posts from this blog

Short Notes on CSS

-
Image
What is CSS? CSS is used to style HTML elements. It stands for Cascading Style Sheets . Ways to Apply CSS Inline CSS : Directly inside an element ( style="color: red;" ). Internal CSS : Inside <style> tags in <head> . External CSS : In a separate .css file and linked via <link> . CSS Syntax: selector {   property: value; } e.g; h1 {   color: blue;   font-size: 20px; } CSS Selectors Types of Selectors: Universal ( * ) → * { margin: 0; } Element ( h1, p ) → p { color: green; } Class ( .class-name ) → .box { border: 1px solid black; } ID ( #id-name ) → #header { background: gray; } Group ( h1, p ) → h1, p { color: red; } Descendant ( div p ) → div p { font-size: 14px; } Child ( div > p ) → div > p { color: blue; } Adjacent ( h1 + p ) → h1 + p { margin-top: 10px; } CSS Box Model Understanding Box Model Components: Content → Actual text/image inside the element. Padding → Space around content. Border → Line around pa...
Read more