⇓

INTRO TO HTML

The Problem of Creating a Web Page

We know a server sends files to a client, but what is the fundamental nature of these files? How do we write a document that a web browser can understand, not just as plain text, but as a structured page with links, headings, and paragraphs?

• The HyperText Problem: The first websites were text documents with a key feature: the ability to link to other documents. In an era without search bars, the primary challenge was navigation: how do you get from one document to another?.
  • Solution (Hyperlinks): The concept of HyperText was created, referring to text that contains special, clickable links (Hyperlinks) that allow a user to navigate from one page to another. This connected "web" of information is the foundation of the World Wide Web.
• The Markup Problem: If you write plain text with a heading and a paragraph in a file, a browser will display it all on a single, messy line, ignoring your intended structure. The browser doesn't inherently understand which part is a heading and which is a paragraph.
  • Solution (A Markup Language): To solve this, we use a Markup Language. We "mark up" our plain text by wrapping it in special instructions, called Tags, that tell the browser the structure and semantic meaning of the content. This is the core idea behind HTML (HyperText Markup Language).

The Problem of a Place to Write Code

• The Editor Problem: Where do we write our HTML code? A simple text editor lacks the features needed for efficient development.
  • Solution (A Code Editor): We use a specialized Code Editor, such as Visual Studio Code, which is designed for writing and managing code.

• The Efficiency Problem: How can we streamline the development process to see our changes instantly and keep our code clean?
  • Solution (Editor Extensions): We install extensions to enhance our editor:
    • Live Server: To automatically refresh the browser and show our changes the moment we save the file.
    • Prettier: To automatically format our code, ensuring it remains clean and readable.

The Building Blocks of a Web Page: Core HTML Tags

HTML provides a set of tags to solve the most common structural problems when creating a document. An HTML Element refers to the complete structure, from the opening tag to the closing tag, including the content inside.

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

The Problem: How do we define the main title and sub-topics of our page to create a clear, logical hierarchy for users and search engines?.

The Solution: We use heading tags from <h1> to <h6>.

• <h1>: This is the most important heading, used for the main title of the page. It should typically only be used once per page.
• <h2> to <h6>: These are used for sub-headings of decreasing importance, creating a nested structure.

A Note on Importance vs. Size: The primary purpose of heading tags is to define semantic importance, not just to control font size. <h1> tells a search engine what your page is about, which is crucial for SEO (Search Engine Optimization). The visual size is a default style that can be changed later.

<h1>This is the most important heading.</h1>

2. The Paragraph (<p>)

The Problem: How do we group and display standard blocks of text?.

The Solution: The <p> tag is used to define a distinct paragraph of text. Browsers automatically add space before and after a <p> element.

<p>This is a paragraph containing several sentences of text.</p>

3. Separators (<hr> and <br>)

The Problem: How can we create a visual, thematic separation between sections, or force a line break within a block of text?.

The Solution:

• <hr> (Horizontal Rule): Creates a thematic break, most often displayed as a horizontal line across the page.
• <br> (Line Break): Forces the content that follows it onto the next line, like hitting the Enter key in a poem or address.

<p>First topic.</p> <hr /> <p>Second topic starts here.<br>This is a new line.</p>

4. List Elements (<ul>, <ol>, <li>)

The Problem: How do we present a series of related items, like ingredients for a recipe or steps in a guide?.

The Solution: We use list tags to structure this information.

• <ul> (Unordered List): Creates a bulleted list where the order of items does not matter.
• <ol> (Ordered List): Creates a numbered list where the sequence is important.
• <li> (List Item): For both list types, each individual item must be wrapped in an <li> tag.

<ul><li>Milk</li><li>Sugar</li></ul>

5. The Anchor Tag (<a>)

The Problem: How do we create the clickable hyperlinks that allow users to navigate between pages?.

The Solution: The <a> (Anchor) tag creates a hyperlink.

• Attributes: This tag requires attributes to define its properties.
  • href (hypertext reference): This is a mandatory attribute that specifies the destination URL.
  • target="_blank": An optional attribute that forces the link to open in a new browser tab instead of the current one.

<a href="https://www.coderarmy.in/" target="_blank">Visit Coder Army</a>

6. The Image Tag (<img>)

The Problem: How do we display a visual image on our webpage?.

The Solution: The <img> tag is used to embed an image. This is a self-closing tag.

• Attributes:
  • src (source): A mandatory attribute that contains the URL or path to the image file.
  • alt (alternative text): Provides a text description of the image. This is crucial for accessibility, as screen readers read it for visually impaired users, and it's displayed if the image fails to load.
  • height and width: Used to specify the dimensions of the image.

<img src="dog.jpg" height="200" width="200" alt="A photo of a cute dog">

Sources: Internet. All copyrights © reserved #DarkProgrammer, Let's connect.