HTML - More Text & Colors, Links & Images

Day 2 - HTML - More Text & Colors, Links & Images

Niotechone Marketing Team
November 13, 2025
10:03 am

Learning Objectives (Before the Tutorial)

By the end of this tutorial you will:

Know how to use quotations in HTML.
Know how to add color using names, RGB, hex and HSL values.
Create hyperlinks and bookmarks using the <a> tag.
Know how to add an image and manage it using the <img> tag, image maps and the <picture> element.
Add a favicon and background image to your page.
Understand the role of the <title> and <head> sections in HTML.

Concept Box – Why This Matters

Colors, links, and images make webpages engaging and appealing! They can improve your site’s attractiveness, functionality, and user engagement!
Knowledge of how to leverage color, links, and images empowers you to create a complete and visually appealing webpage.

Section 1: Quotations in HTML

HTML has the following tags for quoting or citing text in your page:
• <blockquote> – for longer quotes (indented text)
• <q> – for short inline quotes
• <cite> – to define the source or author
• <abbr> – for abbreviations

🌐

<blockquote>
  HTML stands for HyperText Markup Language.
</blockquote>
<p>Tim Berners-Lee said, <q>The web is for everyone!</q></p>
<p><cite>– Tim Berners-Lee</cite></p>
<p><abbr title="World Wide Web">WWW</abbr> is a system of interlinked hypertext documents.</p>

Quick Recap:

Use <blockquote> for long quotes.
Use <q> for inline quotes.
<cite> defines source names.
<abbr> helps define abbreviations.

Section 2: Working with Colors

There are several ways to add color using HTML:
1. Named Colors (like red, blue, green)
2. RGB Colors (rgb(255, 0, 0))
3. HEX Colors (#ff0000)
4. HSL Colors (hsl(0, 100%, 50%))

🌐

<p style="color:red;">This is red text using the color name.</p>
<p style="color:rgb(0, 128, 0);">This is green text using RGB.</p>
<p style="color:#0000ff;">This is blue text using HEX code.</p>
<p style="color:hsl(240, 100%, 50%);">This is blue using HSL.</p>

Section 3: Links – Creating and Styling Links

Links are used to connect different web pages. You can create links by simply using the <a> tag.

🌐

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

You can also use internal links or bookmarks:
<a href="#about">Go to About Section</a>
<h2 id="about">About Us</h2>

You can style link colors with CSS:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: green; }

Quick Recap:

<a> tag creates links.
Use href for URL.
Use id for bookmarks.
CSS changes link color states.

Section 4: Images in HTML

You can display images by using the <img> tag. You can also create more advanced options like image maps as well as using the <picture> element.

🌐

<img src="image.jpg" alt="Sample Image" width="300" height="200">

Background Image Example:
<body style="background-image:url('bg.jpg'); background-size:cover;">
    
Picture Element Example:
<picture>
  <source media="(min-width:650px)" srcset="large.jpg">
  <source media="(min-width:465px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Sample Image">
</picture>

Favicon Example (in <head>):
<link rel="icon" type="image/x-icon" href="favicon.ico">

Quick Recap:

<img> tag displays images
Use alt for accessibility
<picture> element when you want to use responsive images
<link rel=’icon’> when you want to use a favicon

Section 5: Page Title & Head Section

The <head> section contains information about the page, not visible on the screen. The <title> tag defines the title shown in the browser tab.

🌐

<!DOCTYPE html>
<html>
  <head>
    <title>My Awesome Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Welcome!</h1>
  </body>
</html>

Common Mistakes

Forgetting to add an alt attribute in <img>.
Incorrect file paths for images.
Not closing tags properly.
Unnecessarily putting CSS styles in <body>.
Not wrapping attribute values in quotes.

Mini Practice Challenges

Create a web page that uses three different colors in three different formats (RGB, HEX, and HSL).
Add an external link to Google as well as an internal bookmark link on the same page.
Insert any image and create alt text for the image.
Create a favicon for your HTML page.
Use the <head> section properly. Include a title and meta information.

Summary – What You Learned

In this lesson, you learned how HTML builds a page with elements, attributes, and tags, and wrote some headings, paragraphs, and inline styles. You also learned how to write a comment and have a better understanding of what to avoid doing when building HTML.

LeetCode and Practice References

– LeetCode HTML Practice: https://leetcode.com/problemset/all/?topicSlugs=html

– W3Schools HTML Links and Images: https://www.w3schools.com/html/html_links.asp

– W3Schools HTML Colors: https://www.w3schools.com/html/html_colors.asp

Source code:
https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/Html-Mastery/Day%20-%202%20-%20HTML%20-%20Text%20%26%20Colors%2C%20Links%20%26%20Images