. 1) Absolute URL - Links to an external image that is hosted on another website.
Example: src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation
of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.
2) Relative URL to an Image within the Website:
Scenario 1: If the URL starts without a slash, like src="img_girl.jpg", it means the image is in the
same folder or directory as the current web page. It's like saying, "Hey, the image I want is right here
in the same place as this webpage."
Scenario 2: If the URL starts with a slash, like src="/images/img_girl.jpg", it means the image is in a
specific folder called "images" at the root of the website. It's like saying, "The image is in the
'images' folder at the main location of the website, no matter which page we are on."
The title attribute defines some extra information about an element
LIKE: <p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>
--<Just for naming the paragraphs>--
HORIZONTAL RULE: Use of <hr> is called horizontal rule. <hr> is
similar to <br> but also add a Horizontal line. It is used to separate
the content.
<pre> vs <p> : if <pre></pre> is used, we can see the same gaps
between the text as it is written in the pre tag but it is not possible in
<p> tag.
By default, the linked page will be displayed in the current browser window. To change this,
you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
HTML LINK STATES
1) LINK : AN AVALIABLE LINK OR FIRST IMPRESSION FOR THE USER.
2) HOVER : WHEN THE YOUR MOUSE IS ON THE LINK
3) ACTIVE : WHEN YOU PRESS ON THE LINK
4) VISITED : AFTER VISITING THE LINK WHEN YOU COME BACK ON THE
PREVIOUS PAGE IT WILL BE THE VISITED LINK.
Difference Between Classes and Ids in HTML
Classes:
Classes are used to group multiple HTML elements together.
You can apply the same class to multiple elements on a page.
They are useful for styling or scripting common features shared by different
elements.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">This is a highlighted paragraph.</p>
<p>This is a regular paragraph.</p>
<p class="highlight">Another highlighted paragraph.</p>
</body>
</html>
In this example, both paragraphs with the class "highlight" will have a yellow
background.
IDs:
IDs are unique identifiers for individual HTML elements.
Each ID should be unique within a page; it must only be used for a single
element.
Useful when you want to target and style or script a specific element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#uniqueElement {
font-weight: bold;
}
</style>
</head>
<body>
<p id="uniqueElement">This paragraph is unique and has a bold font.</p>
<p>This is a regular paragraph.</p>
</body>
</html>
In this example, the paragraph with the ID "uniqueElement" will have bold text.
In summary, use classes when you want to group multiple elements together and apply the
same styles or behaviors to them. Use IDs when you need a unique identifier for a specific
element, and make sure to maintain the uniqueness of IDs within your HTML document.
While browsers may not strictly enforce this uniqueness for IDs, it's considered good practice
to follow the specification and ensure clean, maintainable code.
HTML Iframes
An HTML <iframe> (inline frame) is used to embed another document or webpage
within the current HTML document. It allows you to display content from another
source, such as a different website, into your own webpage. This can be useful for
incorporating external content like maps, videos, or other web pages.
Here's a basic structure of the <iframe> tag:
<iframe src="URL_of_the_external_document"></iframe>
Let's break down the key attributes and properties:
src (source): Specifies the URL of the document to be embedded.
width and height: Defines the width and height of the iframe.
Border : Add Border by using css border.
Example 1: Embedding a Web Page:
<!DOCTYPE html>
<html>
<head>
<title>IFrame Example</title>
</head>
<body>
<h2>Embedded Web Page</h2>
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>
</body>
</html>
Iframe - Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe src="demo_iframe.htm" name="iframe_a" height="300px"
width="100%" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>
<p>When the target attribute of a link matches the name of an iframe, the
link will open in the iframe.</p>
</body>
</html>
File Path Examples
Path
Description
<img src="picture.jpg">
The "picture.jpg" file is located in the same folder as
the current page
<img src="images/picture.jpg">
The "picture.jpg" file is located in the images folder i
the current folder
<img src="/images/picture.jpg">
The "picture.jpg" file is located in the images folder a
the root of the current web
<img src="../picture.jpg">
The "picture.jpg" file is located in the folder one leve
up from the current folder
