September 06, 2024

Introduction to Html

Introduction to HTML


  • What is HTML?
  • Hypertext Markup Language. It refers to links that connect web pages either within a single website or between websites.
  • HTML was invented by Tim Berners-Lee in 1991, with the first version, HTML 1.0, released in 1993. The most widely used version in the 2000s was HTML 4.01, which became the official standard in December 1999. The latest version, HTML5, was officially released on January 22, 2008, with a second revision published on December 14, 2017.
  • HTML defines elements such as text, images, and other content displayed in the browser. Some basic HTML elements are: <head>, <title>, <body>, <header>, <section>, <footer>


Example HTML Structure:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This is Title</title>
</head>
<body>
    <p>This is Paragraph</p>
</body>
</html>


Case Sensitivity

  • HTML is non-case-sensitive, which means you can write tags in lowercase, uppercase, or a mixture of both. For example:

 

    <header></header>
    <Header></Header>
    <HEADER></HEADER>


  • However, it's recommended to write tags in lowercase for consistency.


What are elements and tags?

1. Elements: Elements are part of web pages. It is building components of web pages. It is with opening and closing. It may contain data of text or images, or any type of content.


Elements like,

    

    <a href=""></a>
    <p></p>
    <header></header>
    <section></section>
    <img src="" alt="">
    <br>


2. Tags: elements are those tag names only. But tags are with an element start tag, its content, and a closing tag. That means tags are the building blocks of web pages.


    <header>This is the header.</header>
    <section>This is section.</section>
    <p>This is a paragraph.</p>


What are attributes?


  • Attributes are special properties in HTML elements that provide additional information about that element. They usually appear in the element's opening tag and are written in the form of name=” value” pairs.



    <a href="home" target="_blank">HOME</a>
    <img src="image.jpg" alt="">
    <button title="Click to submit the form">Submit</button>
    <button disabled>Disabled Button</button>

   


  • In the <a> tag, the href attribute specifies the destination of the link. It tells the browser where the link should lead when the user clicks on it. In this case, it points to "home," which could be a page within the same website or an external link. And target attribute specifies where to open the linked document. In this case, it opens in a new tab. It should also be _parent, _selt, _top.


  • In the <img> tag, the src attribute defines the path to the image file that should be displayed. The alt attribute provides alternative text that describes the image, which is useful for accessibility purposes and is displayed if the image cannot be loaded.


  • In the <button> tag, the title attribute provides additional information about the element. When the user hovers over the element, this information is typically displayed as a tooltip.


  • In the second <button> tag, the disabled attribute is a boolean attribute that disables an HTML element, making it unclickable or unusable.


  • Headings and paragraphs
  • Headings in HTML are used to define the titles and subtitles of content. They range from <h1> to <h6>, where <h1> represents the most important heading and <h6> represents the least important.


  1. <h1> Main heading, used for the main title of a page or section.
  2. <h2> Subheading, used for secondary headings.
  3. <h3> Sub-subheading, used for subheadings under the h2.
  4. <h4> to <h6> Further subdivisions, each one progressively smaller and less important.


    <h1>Title of Website</h1>
   
    <h2>About Us</h2>
   
    <h3>Our Mission</h3>
   
    <h4>Our Team</h4>
   
    <h5>Contact Information</h5>
   
    <h6>Last Updated</h6>


  • Paragraphs in HTML are represented by the <p> tag. They are used to define blocks of text content, making it easier to read and structure information on the web page.


  • Line Breaks To create line breaks within a paragraph without starting a new one, the <br> tag is used.


<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Molestias rerum sed totam magni perferendis! Nostrum harum magni, iste eveniet totam hic dicta eius at quibusdam autem, veritatis porro deleniti esse!</p>

html
Case Sensitivity
Elements
Tags
attributes