Skip to content

Commit 40482c5

Browse files
vineeta24vineeta24
committed
html link content added
1 parent 39f5c94 commit 40482c5

File tree

4 files changed

+314
-0
lines changed

4 files changed

+314
-0
lines changed

‎05-html-links/html-link-style.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>HTML - Links 1</title>
8+
<link rel="icon" href="https://raw.githubusercontent.com/coding-dragon/coding-dragon.github.io/master/img/logo.png" type="image/x-icon">
9+
<link rel="stylesheet" href="main.css">
10+
<style>
11+
html {
12+
scroll-behavior: smooth;
13+
}
14+
#myBtn {
15+
background-color: #3124ee;
16+
color: #fff;
17+
padding: 10px 20px;
18+
text-decoration: none;
19+
border: 4px solid #9e98f1;
20+
border-radius: 5px;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<div class="jumbotron" id="top">
26+
<h2 class="display-3">&lt;a&gt; element styling</h2>
27+
<p class="lead">
28+
We use anchor element most of types in document to jump from one document to another.
29+
Its good practice to represent link in attentive style
30+
</p>
31+
</div>
32+
33+
34+
<div class="container p-3 bg-head">
35+
<h3>styling link as button </h3>
36+
<p class="lead">
37+
To remove underline from link, <code>text-decoration: none</code> is used in css styling.
38+
</p>
39+
<div class="code">
40+
<pre>
41+
<span>#myBtn {
42+
background-color: #3124ee;
43+
color: #fff;
44+
padding: 10px 20px;
45+
text-decoration: none;
46+
border: 4px solid #9e98f1;
47+
border-radius: 5px;
48+
}</span>
49+
50+
&lt;a href="https://www.google.com" id="myBtn" &gt;Click Here&lt;/a&gt;</pre>
51+
</div>
52+
</div>
53+
<br/>
54+
<div class="container">
55+
<a href="https://www.google.com" target="_blank" id="myBtn" >
56+
Click Here
57+
</a>
58+
</div>
59+
<hr/>
60+
<br/>
61+
<br/>
62+
63+
64+
<div class="container p-3 bg-head">
65+
<h3>link as anchor tag</h3>
66+
<p class="lead">
67+
To go specific location in same document, <code>id</code> attribute of that element is used in <code>href</code> with #.
68+
</p>
69+
<div class="code">
70+
<pre>
71+
&lt;a <span>href="#top"</span> &gt;Go to Top&lt;/a&gt;</pre>
72+
</div>
73+
</div>
74+
<br/>
75+
<div class="container">
76+
<a href="#top" >Go to Top</a>
77+
</div>
78+
<hr/>
79+
<br/>
80+
<br/>
81+
82+
</body>
83+
</html>

‎05-html-links/html-links.html

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>HTML - Links 1</title>
8+
<link rel="icon" href="https://raw.githubusercontent.com/coding-dragon/coding-dragon.github.io/master/img/logo.png" type="image/x-icon">
9+
<link rel="stylesheet" href="main.css">
10+
</head>
11+
<body>
12+
<div class="jumbotron">
13+
<h2 class="display-3">HTML &lt;a&gt; element</h2>
14+
<p class="lead">
15+
HTML links are hyperlinks.<br/>
16+
Links are found in nearly all web pages. Links allow users to click their way from page to page.
17+
</p>
18+
</div>
19+
20+
<div class="container p-3 bg-head">
21+
<h3>&lt;a&gt; element</h3>
22+
<p class="lead">
23+
The HTML <b>&lt;a&gt;</b> element with its <code>href</code> attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
24+
</p>
25+
<div class="code">
26+
<pre>
27+
<span>&lt;a href="https://www.google.com" &gt;</span>
28+
Go to google homepage
29+
<span>&lt;/a&gt;</span></pre>
30+
</div>
31+
<p class="lead">The most important attribute of the <b>&lt;a&gt;</b> element is the <code>href</code> attribute, which indicates the link's destination</p>
32+
</div>
33+
<br/>
34+
<div class="container">
35+
<a href="https://www.google.com" >
36+
Go to google homepage
37+
</a>
38+
</div>
39+
<hr/>
40+
<br/>
41+
<br/>
42+
43+
<div class="container p-3 bg-head">
44+
<h3>HTML link target attributes</h3>
45+
<p class="lead">
46+
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.<br/>
47+
The <code>target</code> attribute specifies where to open the linked document. Values are:
48+
<li><code>_self</code> which is default, opens in same window/tab as it was clicked</li>
49+
<li><code>_blank</code> opens in new window/tab</li>
50+
<li><code>_parent</code> opens in the parent frame</li>
51+
<li><code>_top</code> opens in the topmost browsing</li>
52+
</p>
53+
<div class="code">
54+
<pre>
55+
<span>&lt;a href="https://www.google.com" target="_self" &gt;</span>
56+
self target link
57+
<span>&lt;/a&gt;</span>
58+
<span>&lt;a href="https://www.google.com" target="_blank" &gt;</span>
59+
blank target link
60+
<span>&lt;/a&gt;</span></pre>
61+
</div>
62+
</div>
63+
<br/>
64+
<div class="container">
65+
<a href="https://www.google.com" target="_self" >
66+
self target link
67+
</a><br/>
68+
<a href="https://www.google.com" target="_blank" >
69+
blank target link
70+
</a>
71+
</div>
72+
<hr/>
73+
<br/>
74+
<br/>
75+
76+
77+
<div class="container p-3 bg-head">
78+
<h3>Image as link</h3>
79+
<p class="lead">
80+
To use an image as a link, just put the &lt;img&gt; tag inside the &lt;a&gt; tag:
81+
</p>
82+
<div class="code">
83+
<pre>
84+
&lt;a href="https://www.google.com" &gt;
85+
<span>&lt;img src="link_img.gif" alt="link_img" width="150" &gt;</span>
86+
&lt;/a&gt;</pre>
87+
</div>
88+
</div>
89+
<br/>
90+
<div class="container">
91+
<a href="https://www.google.com" >
92+
<img src="link_img.gif" alt="link_img" width="150">
93+
</a>
94+
</div>
95+
<hr/>
96+
<br/>
97+
<br/>
98+
99+
</body>
100+
</html>

‎05-html-links/link_img.gif

39.6 KB
Loading

‎05-html-links/main.css

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
2+
3+
*,
4+
*::before,
5+
*::after {
6+
box-sizing: border-box;
7+
}
8+
html {
9+
font-family: sans-serif;
10+
line-height: 1.15;
11+
-webkit-text-size-adjust: 100%;
12+
-webkit-tap-highlight-color: transparent;
13+
}
14+
body {
15+
margin: 0;
16+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
17+
font-size: 1.25rem;
18+
font-weight: 400;
19+
line-height: 1.5;
20+
color: #212529;
21+
text-align: left;
22+
background-color: #fff;
23+
}
24+
h1, h2, h3, h4, h5, h6 {
25+
margin-top: 0;
26+
margin-bottom: .5rem;
27+
}
28+
h3 {
29+
font-size: 1.75rem;
30+
font-weight: 500;
31+
line-height: 1.2;
32+
}
33+
small {
34+
font-size: 80%;
35+
font-weight: 400;
36+
}
37+
pre {
38+
font-size: 18px;
39+
font-family: 'Montserrat', sans-serif;
40+
letter-spacing: .5px;
41+
}
42+
code {
43+
font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
44+
font-size: 87.5%;
45+
color: #e83e8c;
46+
word-wrap: break-word;
47+
}
48+
kbd {
49+
background-color: #eee;
50+
border: 1px solid #b4b4b4;
51+
border-radius: 3px;
52+
padding: 2px 4px;
53+
}
54+
.p-3 {
55+
padding: 1rem;
56+
}
57+
hr {
58+
margin-top: 1rem;
59+
margin-bottom: 1rem;
60+
border: 0;
61+
border-top: 1px solid rgba(0,0,0,.1);
62+
}
63+
.bg-head {
64+
background: #f7f7f7;
65+
}
66+
.container {
67+
width: 100%;
68+
padding-right: 15px;
69+
padding-left: 15px;
70+
margin-right: auto;
71+
margin-left: auto;
72+
}
73+
.jumbotron {
74+
padding: 2rem 1rem;
75+
margin-bottom: 2rem;
76+
background-color: #40a744;
77+
color: #fff;
78+
}
79+
.display-3 {
80+
font-size: 4rem;
81+
font-weight: 300;
82+
line-height: 1.2;
83+
}
84+
.lead, .lead li {
85+
font-size: 1.25rem;
86+
font-weight: 300;
87+
}
88+
.text-muted {
89+
color: #6c757d!important;
90+
}
91+
.code {
92+
background-color: #5d5d5d;
93+
color: #fff;
94+
padding: 15px 0;
95+
border-left: 10px solid #00BCD4;
96+
margin-left: 10px;
97+
overflow: scroll;
98+
}
99+
.code span {
100+
color: #FF9800;
101+
}
102+
103+
104+
@media screen and (min-width: 576px) {
105+
.container {
106+
max-width: 540px;
107+
}
108+
.jumbotron {
109+
padding: 4rem 2rem;
110+
}
111+
}
112+
@media screen and (min-width: 768px) {
113+
.container {
114+
max-width: 720px;
115+
}
116+
}
117+
@media screen and (min-width: 992px) {
118+
.container {
119+
max-width: 920px;
120+
}
121+
}
122+
@media screen and (min-width: 1200px) {
123+
.container {
124+
max-width: 1140px;
125+
}
126+
}
127+
@media screen and (max-width: 700px) {
128+
.display-3 {
129+
font-size: 3rem;
130+
}
131+
}

0 commit comments

Comments
 (0)