In this Blog we learn how to make HTML Link Generator Tool.
Table of Contents
HTML Link Generator Live Tool
Note:- To make a live change in the HTML generator, you have to click on the refresh button once.
Benefit:-
Copy and paste the URL.
Select the link target
Select the Rel Attribute
Select Custom CSS Style.
Select the Link Code.
One Click & Copy Code.
Use the subsequent HTML link generator to form a link for your web site. In HTML, links (also called “hyperlinks”) square measure created victimization the tag. usually this can be} often stated because the “anchor” tag. The link code generator below mechanically creates this tag, additionally because the relevant CSS for any customization.
Customizing The HTML
Once you’ve got generated your HTML link code, if you wish to form more changes, verify the <a> Tag. this can be the part that’s employed in the higher than code.
Customizing The CSS
The CSS is that the code between the <style>…..</style> Tags. These square measure the codes that verify sorts of your link (such as its color, underline, etc.). you’ll modification the CSS properties (or add new ones) as you wish.
If you plan to use a similar designs across several pages (a whole web site, for example), you ought to move them to associate degree external sheet.
How to create HTML Link Generator?
HTML link generator requires HTML, CSS and JavaScript which are as follows:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Codes by myprograming.com -->
<title>HTML LINK GENERATOR</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<article class="content">
<h1 class="page-title">HTML Link Generator</h1>
<form name="LinkCodeGenerator" id="LinkCodeGenerator">
<table class="LinkCodeGenerator">
<tr class="linkliveoutput">
<td class="preview">
<div id="displayResult">
</div>
</td>
</tr>
<tr>
<td class="refreshbutton">
<span >Refresh</span>
<input style="" type="checkbox" name="" required="" id="LinkTarget" onchange="javascript:LinkGeneratorCode();">
</td>
</tr>
<td class="toolBar">
<table>
<tr title="Copy the URL from the destination page, then paste it here.">
<th colspan="4">Link</th>
</tr>
<tr>
<td colspan="2">Destination URL:
<input name="LinkUrl" value="http://www.myprograming.com" type="text" size="15" maxlength="2000" onkeyup="javascript:LinkGeneratorCode();" onclick="this.focus();this.select()" style="width:90%;">
</td>
<td colspan="2">Anchor Text:
<input name="LinkText" value="Enter Your LINK Title..." type="text" size="15" maxlength="100" onkeyup="javascript:LinkGeneratorCode();" onclick="this.focus();this.select()" style="width:90%;">
</td>
</tr>
<tr>
<td>Link Target:</td>
<td>
<select name="LinkTarget" id="LinkTarget" onchange="javascript:LinkGeneratorCode();">
<option value="_self"> _self</option>
<option value="_top"> _top</option>
<option value="_blank" selected> _blank</option>
<option value="_parent"> _parent</option>
</select>
</td>
<td><code>rel</code> Attribute:</td>
<td>
<select name="LinkRel" id="LinkRel" onchange="javascript:LinkGeneratorCode();">
<option value=""> None</option>
<option value="alternate"> Alternate</option>
<option value="author"> Author</option>
<option value="bookmark"> Bookmark</option>
<option value="help"> Help</option>
<option value="license"> License</option>
<option value="next"> Next</option>
<option value="nofollow"> Nofollow</option>
<option value="noreferrer"> Noreferrer</option>
<option value="prefetch"> Prefetch</option>
<option value="prev"> Prev</option>
<option value="search"> Search</option>
<option value="tag"> Tag</option>
</select>
</td>
</tr>
<tr>
<th colspan="4">Styles</th>
</tr>
<tr>
<td>Text Size:</td>
<td><input name="TextSize" value="40" type="text" size="2" maxlength="3" onkeyup="javascript:LinkGeneratorCode();">
<select name="TextSizeMetric" id="TextSizeMetric" onchange="javascript:LinkGeneratorCode();" style="max-width:70px;">
<optgroup label="Absolute">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative">
<option value="em"> Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
<option value="%"> Percent</option>
</select>
</td>
<td>Text-Decoration:</td>
<td>
<select name="TextDecoration" id="TextDecoration" onchange="javascript:LinkGeneratorCode();">
<option value="none" selected> None</option>
<option value="underline"> Underline</option>
<option value="overline"> Overline</option>
<option value="line-through"> Line-Through</option>
<option value="blink"> Blink</option>
</select>
</td>
</tr>
<tr>
<td>Background Color:</td>
<td><input type="color" name="BackgroundColor" id="BackgroundColor" value="#CCFF00" style="background-color: #CCFF00">
</td>
</tr>
<tr>
<td>Link Color:</td><td><input name="LinkColor" id="LinkColor" value="#006600" style="color:#006600" type="color" >
</td>
<td>Visited Color:</td><td><input name="VisitedColor" id="VisitedColor" value="#009900" style="color:#009900" type="color" >
</td>
</tr>
<tr>
<td>Hover Color:</td><td><input name="HoverColor" id="HoverColor" value="#99CC00" style="color:#99CC00" type="color" >
</td>
<td>Active Color:</td><td><input name="ActiveColor" id="ActiveColor" value="#FF9900" style="color:#FF9900" type="color" >
</td>
</tr>
</table>
</td>
<tr>
<td class="code" style="background:grey;" colspan="2">
<h2>Select your LINK Code</h2>
<p>Here is the code that was generated:</p>
<textarea name="generatedCode" id="generatedCode" onclick="this.focus();this.select()"></textarea>
</td>
</tr>
</table>
</form>
</article>
</div>
<script src="demo.js"></script>
</body>
</html>Step2:- Create style.css File.
.LinkCodeGenerator {
width:50%;
border-collapse:collapse;
background:#f1f7e9;
color:#65885e;
}
.LinkCodeGenerator td {
border:1px solid #000;
vertical-align:top;
padding:10px;
}
.LinkCodeGenerator td.toolBar {
font-size:11px;
width:50%;
height:100px;
padding:0px;
margin:0px;
}
.LinkCodeGenerator td.toolBar table {
border-collapse:collapse;
width:100%;
}
.LinkCodeGenerator td.toolBar th {
background-color:grey;
color:#000;
font-size: 25px;
padding-left:3px;
}
.LinkCodeGenerator td.toolBar td {
font-size:18px;
padding:5px;
border:none;
color: #000;
}
.LinkCodeGenerator td.preview {
background:#f4f4f4;
}
.LinkCodeGenerator div#displayResult {
max-width:400px;min-height:200px;max-height:400px;overflow:auto;margin-bottom:10px;padding:10px;
}
.LinkCodeGenerator textarea#generatedCode {
width:100%;min-height:200px;
}
.LinkCodeGenerator input {
border:1px solid #ccc;
width: 100%;
}
.linkliveoutput{
position: fixed;
left: 50%;
}
.refreshbutton span{
font-weight: bold;
color: #000;
font-size: 35px;
}
.refreshbutton input{
width: 50px;
margin: auto;
padding: 10px;
}
.code{
color: #fff;
font-weight: 700;
}
.toolBar
table
tr
td
input{
width: 50px;
}
Step3:- Create demo.js File.
.LinkCodeGenerator {
width:50%;
border-collapse:collapse;
background:#f1f7e9;
color:#65885e;
}
.LinkCodeGenerator td {
border:1px solid #000;
vertical-align:top;
padding:10px;
}
.LinkCodeGenerator td.toolBar {
font-size:11px;
width:50%;
height:100px;
padding:0px;
margin:0px;
}
.LinkCodeGenerator td.toolBar table {
border-collapse:collapse;
width:100%;
}
.LinkCodeGenerator td.toolBar th {
background-color:grey;
color:#000;
font-size: 25px;
padding-left:3px;
}
.LinkCodeGenerator td.toolBar td {
font-size:18px;
padding:5px;
border:none;
color: #000;
}
.LinkCodeGenerator td.preview {
background:#f4f4f4;
}
.LinkCodeGenerator div#displayResult {
max-width:400px;min-height:200px;max-height:400px;overflow:auto;margin-bottom:10px;padding:10px;
}
.LinkCodeGenerator textarea#generatedCode {
width:100%;min-height:200px;
}
.LinkCodeGenerator input {
border:1px solid #ccc;
width: 100%;
}
.linkliveoutput{
position: fixed;
left: 50%;
}
.refreshbutton span{
font-weight: bold;
color: #000;
font-size: 35px;
}
.refreshbutton input{
width: 50px;
margin: auto;
padding: 10px;
}
.code{
color: #fff;
font-weight: 700;
}
.toolBar
table
tr
td
input{
width: 50px;
}
Note:- Also add style.css and demo.js link in index.html File.
How to Create Text Link?
In HTML, links (also known as “hyperlinks”)To create a link in HTML, we use the HTML < a> tag, also known as the “anchor” tag. The anchor tag is represented by the letter “A”. So, the syntax is something like < /a>< a href=”…some URL…”> anchor text .
Example:-
<a href="https://www.myprograming.com/" target="_blank">Click Me....</a>Output:-
Click Me….How to Create Image Link?
Turn a tag out of the img tag in Starting and close where the img Tag close. Insert the URL inside the tag and the anchor tag href = ” “.
Example:-
<a href="https://www.myprograming.com/" target="_blank"> <img src="http://www.myprograming.com/wp-content/uploads/2021/07/myprograming-logo.png"></a>Output:-
HTML Link Generator Tool Codepen
See the Pen HTML Link Generator Live Tool by khushal (@mr__khushal) on CodePen.
