HTML : Hyper Text Markup Language (Lecture 2)

HTML stands for HyperText Markup Language. It is the standard language used to create and structure the content of a webpage.

HyperText:
This refers to the ability to create links that connect web pages to one another, making the web a connected "web" of information.
Markup Language:
This means you use "tags" to surround your content, giving that content meaning and structure. You are "marking up" a plain text document.

Installation

1. Install Visual Studio Code

This is a free piece of software from Microsoft that you will use to write your code.

2: Install Visual Studio Code Extensions

Some important html tags and their syntax:

1: The Heading (<h1> to <h6>)

What it is: Headings are tags used to define titles and subtitles on your page. They are crucial for creating a logical hierarchy and outline for your content.

  • <h1> : The most important heading, typically used only once per page for the main title.
  • <h2> : A major section heading.
  • <h3> : A sub-section heading under an <h2>.
 <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

2: The Paragraph (<p>)

What it is: The paragraph tag is the most common tag you'll use. It's for grouping sentences and blocks of text together.

The Purpose: To define a distinct paragraph of text. Browsers automatically add space before and after a <p> element, separating it from other content. Avoid multiple line breaks; use multiple <p> tags instead.

 <p>This is the first paragraph. It contains several sentences about a topic.</p>
<p>This is a second, separate paragraph. The browser will display it with a space between it and the first one.</p>

3: HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

 <p>This is the first topic.</p> <hr />
<p>This is a completely different topic.</p>

4. The Line Break Tag: <br>

This tag tells the browser, "Stop writing on this line and immediately start on the next one." It's like hitting the Enter key once in a poem or an address.

 <p>221B Baker Street<br>
London, England</p>

5. List Elements (<u>, <ol>, <li>)

What it is: These tags are used to create lists. This is a perfect example of nesting.

  • <ul>: An Unordered List. It creates a bulleted list.
  • <ol>: An Ordered List. It creates a numbered list.
  • <li>: A List Item. Each item in either type of list must be wrapped in an <li> tag.
<ul>
<li>Tea Bag</li>
<li>Water</li>
<li>Sugar</li>
<li>Milk</li>
</ul>

<ol>
<li>First, boil the water in a kettle.</li>
<li>Add tea bag, sugar and milk into it</li>
<li>Keep boiling it for 5 minutes</li>
<li>Serve the tea by pouring it into cup</li>
</ol>

6: The Anchor Tag (<a>)

What it is: The Anchor tag is what makes the web "hypertext." It is used to create a hyperlink to another webpage, a file, or a location within the same page.
The Tag: <a>
The Purpose: To make text (or an image) clickable, allowing users to navigate. It requires an attribute calledhref (hypertext reference) to specify the destination URL.

HTML Links - The target Attribute

  • target → defines where the linked page will open.
  • Default: _self → opens in the same tab/window.
  • _blank → opens in a new tab/window
 <a href="https://www.coderarmy.in/">Visit Coder Army</a>

8. The Image Tag (<img>)

  • Tag: <img> (self-closing)
  • Purpose: Displays an image on a webpage.
  • Main Attributes:
    • src → path or URL of the image (required)
    • alt → text description for accessibility & fallback
 <img src="https://cdn.britannica.com/16/234216-050-C66F8665/beagle-hound-dog.jpg" height="300px" width="300px" alt="This is Dog Photo">

See the video lecture