How to Create Redirects in HTML
How to Create Redirects in HTML
HTML is one of the most open-sourced and creative markup languages. No matter how complicated a web page seems to be, HTML is always required as the base of your web page. However, creating different hyperlinks that connect your web pages as a whole can be confusing, especially as a beginner. This article includes different methods that can allow you to create redirects/hyperlinks in HTML.
Steps

Creating a Redirect Button

Create a basic HTML webpage using any text editor tool. For example, you could be using Notepad, a free Windows system application. If you've already done this, you may skip this step. You should include the basic structure of an HTML document.

Create your button using CSS. Under the Click on the button to view wikiHow's main page!

Personalize your button. You can add color, borders, font, and many more. You can refer to this page if you'd like a more detailed list of CSS properties. Below is a basic design you may start with. Click on the button to view wikiHow's main page!

Add your redirect. Under the tag, use the tag. The tag is used to indicate a redirect. Your link/file should be mentioned in between the speech marks. If it is redirecting to another webpage, mention the link. If it is redirecting to another file, mention the file name including it's extension, making sure it is saved in the same location as your html file. If not, mention it's location. For example, /downloads/music.mp3. Click on the button to view wikiHow's main page!

Add your button to your redirect. Under the tag, use the will be displayed inside your button. Click on the button to view wikiHow's main page!

Save your file using the .html extension. Press "file" and Save as, name your file and ensure to add the .html towards the end. This step is important, as your file will only be considered a text file if you do not change the extension.

Test your button. If done correctly, you should receive the correct outcome. The location of the button depends on where you've placed it according to your code, however, this should not affect the button's functionality.

Creating an Image Hyperlink

Create a basic HTML webpage using any text editor tool. For example, you could be using Notepad, a free Windows system application. If you've already done this, you may skip this step.Basichtmlcodeimageredirect.png You should include the basic structure of an HTML document.

Resize your image using CSS. Before placing your image, you can use CSS to specify your image dimensions on your website. Under the

Add your redirect. Determine where you'd like to place your Hyperlink. The Hyperlink may be placed anywhere, depending on how you'd like your webpage to look. Using the tag, add your desired redirect. It may be a webpage link, or any file of your choice. Ensure you place your redirect in between the speech marks. Note that you should not place your image file here, as this tag redirects you to the file/link between the speech marks, and does not display it. However, if you'd like to redirect to an image, you can place your image file here. Ensure your file is saved in the same location as your html file. If not, mention it's location. For example, /downloads/music.mp3.

wikiHow Main Page

Add your image. To add an image to HTML, you use the tag. This tag should be placed directly after your tag. Your resize property should be placed in the section, in between the speech marks. Ensure your file is saved in the same location as your html file. If not, mention it's location. For example, /downloads/wikiHow.png.

wikiHow Main Page

Save your file using the .html extension. This step is important, as your file will only be considered a text file if you do not change the extension.

Test your redirect. If done correctly, your image should now redirect you to your link/file when clicked on. The location of the image on your webpage depends on where you've placed it, however, this does not affect its functionality.

Creating a Text Hyperlink

Create a basic HTML webpage using any text editor tool. For example, you could be using Notepad, a free Windows system application. If you've already done this, you may skip this step.

Add your redirect. Using the tag, add your redirect to your text. This tag should be used directly before the portion you'd like to convert to a hyperlink. The link/file you'd like to redirect to should be mentioned in between the speech marks. Ensure to close the tag using . If it is redirecting to another file, mention the file name including it's extension, making sure it is saved in the same location as your html file. If not, mention it's location. For example, /downloads/AboutwikiHow.pdf wikiHow Main page Click Here

Add your link target. In HTML, a link target is a way of nominating whether your link/file opens in a new tab, or in the current browser window. Inside the tag, after your link, use . Your target property is inserted inside the speech marks. _blank is used to open the URL/file in a new browser window. _self is used to open the URL/file in the current open browser window. _parent will open the URL/file in the parent frame, still within the currently open browser window. This is only applied if you've used frames in your website. _top will open the URL/file in the current browser window, it is applied when you've used frames in your webpage, and you'd like to ignore them during the redirect.' wikiHow Main page Click Here

Save your file using the .html extension. This step is important, as your file will only be considered a text file if you do not change the extension.

Test your Hyperlink. If done correctly, your text should redirect you to your desired location once clicked on. The location of the hyperlink depends on where you've placed it, in this case, it is placed in the body.

Creating a Mailto Link

Create a basic HTML webpage using any text editor tool. For example, you could be using Notepad, a free Windows system application. If you've already done this, you may skip this step. You should include the basic structure of an HTML document.

Add your redirect. Use the tag directly before the text you'd like to convert to a hyperlink. The email address you'd like to be redirected to should be mentioned in between the speech marks, after mailto: . If you'd like to send the same email to more than one email address, separate each email using commas. Ensure you close the tag using .

wikiHow Support

Email WikiHow

Autofill your CC/BCC. This is optional, however, HTML allows you to autofill certain properties in an email. To autofill the CC/BCC, use the ?cc= or &bcc= parameters. This should be inserted within the a href="" tag, after your mailto email address. Your cc/bcc email address should be inserted after the equal sign. If you'd like to add both CC and BCC, add the BCC after the CC using &bcc=.

wikiHow Support

Email wikiHow

Autofill your subject. This is optional, however, HTML allows you to autofill certain properties in an email. To autofill the subject, use the &subject= parameter. This should be inserted within the tag. Your subject should be inserted after the equal sign.

wikiHow Support

Email wikiHow

Autofill your body. This is optional, however, HTML allows you to autofill certain properties in an email. To autofill the body, use the &body= parameter. This should be inserted within the a href="" tag. Your body should be inserted after the equal sign.

wikiHow Support

Email wikiHow

Save your file using the .html extension. Press "file" and Save as, name your file and ensure to add the .html towards the end. This step is important, as your file will only be considered a text file if you do not change the extension.

Test your Redirect. If done correctly, when the text is clicked on, the user's default email service app will open along with all your autoformatting. The location of the hyperlink depends on where you've placed it, in this case, it is placed in the body.

What's your reaction?

Comments

https://popochek.com/assets/images/user-avatar-s.jpg

0 comment

Write the first comment for this!