More HTML Tags, Images & Hyperlinks

Learn Additional HTML Tags, Insert Images, and Create Hyperlinks

In this class, students will learn more HTML text formatting tags, how to insert images into a webpage, and how to create hyperlinks to connect webpages and external websites.

Class Objective

• Use additional HTML text formatting tags
• Insert images into a webpage
• Create hyperlinks between webpages and external sites

Recap of Previous Class

• HTML document structure
• Basic tags: heading, paragraph, line break, horizontal line
• Text formatting tags: bold, italic, underline

More HTML Text Tags

Strong and Emphasis

<strong>This text is important</strong><br>
<em>This text is emphasized</em>

Small Text and Highlight

<small>This is small text</small><br>
<mark>This text is highlighted</mark>

Superscript and Subscript

H<sub>2</sub>O<br>
10<sup>2</sup>

Inserting Images in HTML

The <img> tag is used to insert images in HTML. It is a self-closing tag.

Common Image Attributes

• src – image path
• alt – alternate text
• width, height – image size

Image Example

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

• Image file should be in the same folder as the HTML file
• Always use the alt attribute

Hyperlinks in HTML

Anchor Tag

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

Linking to Another Webpage

<a href="about.html">Go to About Page</a>

Opening Link in New Tab

<a href="https://www.youtube.com" target="_blank">YouTube</a>

Email Link

<a href="mailto:example@gmail.com">Send Email</a>

Practice Task

• Add one image
• Add one external link
• Add one internal link to another HTML file
• Use at least three new text tags learned in this class

Assignment

• Create index.html and about.html
• Add navigation links between both pages
• Insert at least one image
• Use strong, em, mark, sup, and sub tags