Curriculum
Course: HTML Basic
Login

Curriculum

HTML Basic

HTML Introduction

0/1

HTML Editors

0/1

HTML Basic

0/1

HTML Elements

0/1

HTML Attributes

0/1

HTML Headings

0/1

HTML Paragraphs

0/1

HTML Styles

0/1

HTML Formatting

0/1

HTML Quotation

0/1

HTML Comments

0/1

HTML Colors

0/1

HTML CSS

0/1

HTML Links

0/3

HTML Images

0/3

HTML Favicon

0/1

HTML Page Title

0/1

HTML Tables

0/8

HTML Lists

0/4

HTML Block and Inline

0/1

HTML Div

0/1

HTML classes

0/1

HTML id

0/1

HTML Iframes

0/1

HTML Java Script

0/1

HTML File Paths

0/1

HTML - The Head Element

0/1

HTML Layout

0/1

HTML Responsive

0/1

HTML Computer Code

0/1

HTML Semantic

0/1

HTML Style Guide

0/1

HTML Entities

0/1

HTML Symbols

0/1

HTML Emojis

0/1

HTML Charsets

0/1

HTML URL Encode

0/1

HTML vs. XHTML

0/1

HTML Forms

0/6

HTML Graphics

0/2

HTML Media

0/5

HTML APIs

0/5
Text lesson

HTML Attributes

HTML Attributes

  • Every HTML element can possess attributes.
  • Attributes offer extra details about the elements.
  • They are always placed within the opening tag.
  • Typically, attributes are structured as name/value pairs, following the format: name=”value”.

The href Attribute

The <a> tag designates a hyperlink. The href attribute specifies the URL of the page to which the link directs.

Example

<a href=”https://www.code7schools.com”>Visit code7chools</a>

The src Attribute.

The <img> tag is utilized for incorporating images into an HTML page, with the src attribute indicating the image’s file location.

Example

<img src=”img_girl.jpg”>

There are two methods to specify the URL in the src attribute:

  1. Absolute URL – This links to an external image hosted on another website. 

Note: External images may be subject to copyright. Without proper permission, their use may violate copyright laws. Additionally, you have no control over external images; they can be removed or altered unexpectedly.

  1. Relative URL – This links to an image hosted within the website. In this case, the URL doesn’t include the domain name. If the URL doesn’t start with a slash, it’s relative to the current page. For example: src=”img_girl.jpg”. If it starts with a slash, it’s relative to the domain. For example: src=”/images/img_girl.jpg”.

Tip: It’s generally preferable to use relative URLs. They won’t break if you change domains.

 

Click to Learn

 

The width and height Attributes

The <img> tag can also include width and height attributes to define the dimensions of the image in pixels.

Example

<img src=”img_girl.jpg” width=”500″ height=”600″>

 

Click to Learn

 

The alt Attribute

The alt attribute, essential for the <img> tag, provides alternative text for the image in cases where it cannot be displayed. This could result from slow internet, an error in the src attribute, or when the content is being accessed through a screen reader.

Example

<img src=”img_girl.jpg” alt=”Girl with a jacket”>

Example

Let’s observe the outcome when attempting to display an image that doesn’t exist:

<img src=”img_typo.jpg” alt=”Girl with a jacket”>

 

Click to Learn

 

The style Attribute

The style attribute is utilized for applying various styles to an element, including color, font, size, among others.

Example

<p style=”color:red;”>paragraph.</p>

 

Click to Learn

 

The lang Attribute

It’s recommended to always specify the lang attribute within the <html> tag to indicate the language of the web page, aiding both search engines and browsers.

Example

<!DOCTYPE html>
<html lang=”en”>
<body>
…
</body>
</html>

The title Attribute

The title attribute provides additional details about an element, and its value appears as a tooltip when the element is hovered over with a mouse.

Example

<p title=”I’m a tooltip”>This is a paragraph.</p>

Single or Double Quotes?

In HTML, it’s standard to encase attribute values in double quotes, though single quotes are also acceptable. If the value of an attribute includes double quotes, single quotes must be used instead.

Example

<p title=’John “ShotGun” Nelson’>

Chapter Recap:

All HTML elements can contain attributes.

  • The href attribute in an <a> tag defines the destination URL for the hyperlink.
  • The src attribute in an <img> tag indicates the location of the image to display.
  • The width and height attributes in an <img> tag specify the dimensions of the image.
  • The alt attribute in an <img> tag offers alternative text for the image.
  • The style attribute is employed to apply various styles to an element, like color, font, and size.
  • The lang attribute in the <html> tag specifies the language of the webpage.
  • The title attribute provides additional information about an element.

 

 

Previous
Next