link
Spread the love

In this Blog we learn how to make HTML Link Generator Tool.

HTML Link Generator Live Tool

Note:- To make a live change in the HTML generator, you have to click on the refresh button once.

HTML LINK GENERATOR
Refresh
Link
Destination URL: Anchor Text:
Link Target: rel Attribute:
Styles
Text Size: Text-Decoration:
Background Color:
Link Color:Visited Color:
Hover Color:Active Color:

Select your LINK Code

Here is the code that was generated:

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="https://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="https://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.


Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *