Skip to content

Commit 430afcf

Browse files
thatonevikashthatonevikash
authored
Merge pull request #2 from Ninja-Vikash/anchor
Anchor
2 parents e9d5979 + 9c8b40d commit 430afcf

File tree

8 files changed

+176
-70
lines changed

8 files changed

+176
-70
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"cmake.configureOnOpen": false
3+
}

‎05 - Anchor Tag/README.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
##### HTML Mastery Guide 🏅
2+
# Anchor Tag
3+
### What's Inside
4+
- What is an Anchor (`<a>`) tag?
5+
- Major roles of Anchor tag
6+
- Commonly used attributes with anchor tag
7+
- `<iframe>` tag
8+
9+
***
10+
## Overview
11+
### What is an Anchor tag?
12+
An anchor tag is used to render a **"Hypertext link"** using the `href` attribute. It can link to **Web Pages**, **files**, **email addresses**, **locations** on the same page, or anything else a URL can address.
13+
14+
> [!IMPORTANT]\
15+
> An anchor tag is an inline element.
16+
17+
```html
18+
<a href="URL">Click Here!</a>
19+
```
20+
### Major roles of Anchor tag
21+
#### To address html pages or any other document.
22+
In `href` give the relative path of `about.html` file.
23+
```html
24+
<a href="about.html">About Us</a>
25+
```
26+
In `href` give the relative path of `contact.html` file.
27+
```html
28+
<a href="contact.html">Contact</a>
29+
```
30+
#### Folder structure
31+
```
32+
📁05 - Anchor Tag
33+
└── about.html
34+
└── contact.html
35+
└── image.jpeg
36+
└── index.html
37+
└── README.md
38+
```
39+
#### To address any other webpage on the internet.
40+
In `href` use the web address of any website to open the webpage.
41+
```html
42+
<a href="https://www.google.com">Google</a>
43+
```
44+
45+
#### Anchor used to link any section of webpage
46+
```html
47+
<a href="#bottom">Move to bottom</a>
48+
```
49+
> [!NOTE]\
50+
> We can link any section using id's
51+
52+
### Commonly used attributes with anchor tag
53+
#### href attribute
54+
`href` attribute is a required attribute for anchor tags.
55+
> [!WARNING]\
56+
> Without href attribute anchor tag acts like a normal tag
57+
#### target attribute
58+
`target` attribute is used to define where to open the given path.
59+
60+
Generally used value with `target` attribute are-
61+
```html
62+
target= "_blank"
63+
```
64+
To learn more about anchor tag attributes [explore🔍!](https://github.com/Ninja-Vikash/HTML-Mastery-Guide/tree/main/03%20-%20Attributes#anchor-tag-attributes)
65+
66+
## iframe tag
67+
68+
### How to Embed online videos on webpage?
69+
We can Embed online videos through a corresponding `<iframe>`; tag.
70+
71+
> [!NOTE]\
72+
> `<iframe>` tag specifies an inline frame.\
73+
> An inline frame is used to embed another document within the current HTML document.
74+
75+
---
76+
77+
### Process of Embedding Youtube Video on Your webpage!
78+
Search for a video on `YOUTUBE`
79+
80+
![preview 1](https://github.com/Ninja-Vikash/asset-cloud/blob/main/assets%20-%20HTML/embed-1.png)
81+
82+
> Click on `Share`
83+
84+
![preview 2](https://github.com/Ninja-Vikash/asset-cloud/blob/main/assets%20-%20HTML/embed-2.png)
85+
> Select the Embed option from them
86+
87+
> Just - paste it on your HTML file
88+
89+
![preview 3](https://github.com/Ninja-Vikash/asset-cloud/blob/main/assets%20-%20HTML/embed-3.png)
90+
![preview 4](https://github.com/Ninja-Vikash/asset-cloud/blob/main/assets%20-%20HTML/embed-4.png)

‎05 - Anchor Tag/about.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>About page</title>
7+
<style>
8+
* {
9+
font-family: sans-serif;
10+
}
11+
a {
12+
text-decoration: none;
13+
color: black;
14+
font-weight: 600;
15+
font-family: sans-serif;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<button>
21+
<a href="index.html">back</a>
22+
</button>
23+
<h1 style="text-align: center;">This is about page</h1>
24+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore dicta quos suscipit. Molestias amet minima similique itaque adipisci tempora temporibus, nesciunt quis unde excepturi voluptatibus maxime laboriosam nam quos error omnis iure cupiditate quia ipsam quidem tenetur quo! Laborum, modi assumenda? Molestias quis voluptate doloribus.</p>
25+
</body>
26+
</html>

‎05 - Anchor Tag/contact.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Contact page</title>
7+
<style>
8+
* {
9+
font-family: sans-serif;
10+
}
11+
a {
12+
text-decoration: none;
13+
color: black;
14+
font-weight: 600;
15+
font-family: sans-serif;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<button class="button">
21+
<a href="index.html">back</a>
22+
</button>
23+
<h1 style="text-align: center;">Welcome to contact page!</h1>
24+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae corporis earum, neque cupiditate architecto ipsam sint dicta, voluptatem facilis accusamus iste rem atque!</p>
25+
<input type="tel">
26+
<input type="submit" value="call">
27+
</body>
28+
</html>

‎05 - Anchor Tag/google.jpg‎

65.8 KB
Loading

CHAPTER 5 - Anchor Tag/image.jpeg renamed to 05 - Anchor Tag/image.jpeg

File renamed without changes.

CHAPTER 5 - Anchor Tag/index.html renamed to 05 - Anchor Tag/index.html

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,51 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>What is Anchor tag?</title>
6+
<title>Anchor tag</title>
77
<style>
8-
#advanced {
8+
#bottom {
99
margin-top : 1000px;
1010
}
11+
* {
12+
font-family: sans-serif;
13+
}
14+
button a {
15+
text-decoration: none;
16+
color: black;
17+
font-weight: 600;
18+
font-family: sans-serif;
19+
}
1120
</style>
1221
</head>
1322
<body>
1423
<!-- BASIC USE OF ANCHOR TAG -->
1524
<section class="basic" id="top">
16-
<a href="../CHAPTER 1 - HTML Tutorial/index.html">Chapter 1</a> <!--page will load in the existing tab-->
17-
<a href="../CHAPTER 1 - HTML Tutorial/index.html" target="_blank">Chapter 1</a> <!--page will load in the new tab-->
18-
<a href="https://www.google.com">Google</a> <!--page will load google.com official webpage-->
19-
<a href="https://www.google.com" target="_blank">Google</a>
25+
<h2>Basic usage of anchor tag</h2>
26+
<!-- Anchor tag used to switch between html pages -->
27+
<a href="about.html">About Us</a>
28+
<a href="contact.html">Contact</a> <br> <br>
29+
<a href="https://www.google.com">Google</a> <br><!--page will load google.com official webpage--> <br>
2030

21-
<a href="image.jpeg" target="_blank">Image</a> <!--redirects to an image-->
31+
<button>
32+
<a href="image.jpeg" target="_blank">Open Image</a> <!--redirects to an image-->
33+
</button>
2234
<!-- We can make images clickable, and it will navigate to a URL/FILE/ANOTHER HTML -->
23-
<a href="https://www.google.com" target="_blank"><img src="image.jpeg" alt="" height="200px"></a>
24-
<div>
25-
<a href="#advanced">Move to Bottom</a>
26-
</div>
35+
<a href="https://www.google.com" target="_blank" style="float: left;"><img src="google.jpg" alt="" height="500px"></a> <br>
36+
37+
<button style="clear: left; display: block;">
38+
<a href="#bottom">Move to bottom</a>
39+
</button>
2740
</section>
2841

2942
<!-- WE CAN USE ANCHOR TAG TO NAVIGATE IN OUR WEBPAGE'S ANY SECTION -->
30-
<section id="advanced">
31-
<a href="#top">Move to top</a>
32-
<h1>This is the haeding of Advanced use of 'Anchor tag'</h1>
43+
<section id="bottom">
44+
<button>
45+
<a href="#top">Top</a>
46+
</button>
3347
<h2>This is a subheading of Advanced use of 'Anchor tag'</h2>
3448
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex assumenda consequuntur doloremque eveniet similique laborum fugiat vero nam quod optio molestias officia dolores, quasi atque facere labore. Repellendus porro hic architecto iure modi possimus harum! Perferendis ducimus voluptatibus ab, hic mollitia corporis porro accusamus corrupti nobis commodi cupiditate aliquid suscipit odit, nemo accusantium. Voluptas, quia iure.</p>
3549
</section>
3650

37-
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ec6riISgwtc?si=34rKrn6crfI1SdqA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
51+
<iframe width="420" height="240" src="https://www.youtube-nocookie.com/embed/ec6riISgwtc?si=34rKrn6crfI1SdqA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
3852
</body>
3953
</html>

‎CHAPTER 5 - Anchor Tag/README.md‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

0 commit comments

Comments
 (0)