How to Create a Link With Simple HTML Programming
Method 1 of 2:
Linking to Another Web Page
- Open your HTML file. Open the HTML file for the page you would like to edit. (If you're starting from scratch and need some background info, create the document before reading this article.)
- Place a link on your page. Add the following code to the body of your HTML document, where you would like the link to appear:
- Link text
- This displays like this: Link text.
- Write the link text to display. Anything in between the and tags will appear on your page as a link. You can alter this with other html tags just as you would any other text.
- You can also turn an image into a link:
.
The user will see the image wikihow_logo.png, and can click the image to visit https://www.wikihow.com/.
- You can also turn an image into a link:
- Change the destination of the link. The tag you just created is called an "anchor." The href attribute inside the anchor defines the destination of the link. Replace https://www.wikihow.com/ in the example above with the URI you would like to link to.
- Always surround the URI with quotation marks.
- URIs are case sensitive.[1] Copy-paste them or type them in exactly as they appear.
- Link to a page in the same folder. You do not need to include a full URL if you are linking to a page on the same website (although it will work). It's easier to keep your website organized if you use relative links instead, without including the domain name. Here's a simple example linking from one page to another in the same folder:
- Let's say you're editing the page http://example.edu/about/author.html.
- To link to the page http://example.edu/about/family.html, just type the file name:
Link text
- Link to other pages on your website. You can also use relative links to direct the link to any other page on the same site. There are only two things you need to know:[2]
- To link to a page in a subfolder, include the new file path. For example, if you're on the page http://example.edu/about/author.html and want to link to http://example.edu/about/pets/dog.jpg, you can skip everything up to "about:"
Link text - To link to a page in a different branch of the site, use "../" to move up to a higher folder. For example, to link from /about/author.html to http://example.edu/writing/books.html, type:
Link text
- To link to a page in a subfolder, include the new file path. For example, if you're on the page http://example.edu/about/author.html and want to link to http://example.edu/about/pets/dog.jpg, you can skip everything up to "about:"
Method 2 of 2:
Linking Within a Page
- Create a destination anchor. If you're linking to a long web page, you might want to lead people to a specific point on the page instead of the top. To make this possible, open the HTML document for the destination page. Insert this anchor tag at the point you want to link to:
- Anchor text.
This will display as normal text, since it is the destination of a link and not a link itself. You can replace "anchorname" with any name, as long as you don't use the same name twice on one page.
- Anchor text.
- Link to the destination anchor. To link to a specific point on the page, add the symbol # to the end of the URI, followed by the exact name you used for the id attribute. This is case sensitive.
- For example to link to the anchor on the page http://example.edu/vacation.html, type:
Link text.. - You can add this to absolute or relative links (see instructions in separate method).
- For example to link to the anchor on the page http://example.edu/vacation.html, type:
- Add an anchor to any HTML tag. You can also create an anchor by inserting id="anchorname" into any HTML tag.[3]Link to this in exactly the same way. Here are a couple examples:
-
Header Text
Link to this by adding #topheader to the URL. -
Paragraph text
Link to this by adding #introparagraph to the URL.
-
4.2 ★ | 9 Vote
You should read it
May be interested
- How to Build a Calculator with HTMLin addition to countless pre-built calculators, you can also do math on your desktop computer by using html code to build your own. to create a calculator from html, you need to learn some basic knowledge about this programming language, then copy the necessary code into a text editor and save it as html. at this point, you can open the html document in your favorite browser and start using your computer. just like that, you can not only do math in the browser but also learn a few basics about the art of programming!
- Paths in HTMLyou can find links (links) throughout the web. link allows clicking to switch to another page.
- Why write neat and organized HTML?you will get many benefits from writing clean and precise html code. here's why it's a good idea to write optimal html code.
- HTML formthe form in html contains form elements - the element types that take input data such as filling in text fields, checkboxes, buttons, submit buttons ...
- Beginners of computer programming need to focus on what?programming is very interesting and extremely useful. so what should beginners learn about computer programming? let's find out in the article below!
- How to Learn PHP and MySQLphp is one of the most widely-used programming languages on the internet, and it allows you to do much more than simple html. mysql allows you to easily create and modify databases on your server. used together, these tools can create...
- Common HTML mistakes that you should avoid for better web programminglearning html is not difficult, but when running it in the browser, errors often occur. here are common html errors and how to handle them for better web development.
- 10 best free HTML editing tools for Windows 2018a good html editor must have a spell checker, line number, autocomplete, page preview and a text and image editing tool. there are many types of editing tools (text, object and wysiwyg), so it is important to find an appropriate tool.
- Table in HTMLwhat does it take to create a table in html? is it complicated? want to add color to the table border, how to add the background color to the text in the table? in this article tipsmake.com will answer those questions and guide you to basic operations with tables on html, in addition to adding alternate color schemes for rows in the html table. invite you to follow along.
- Tutorial for creating slideshows in JavaScript with 3 easy stepsif you are studying or interested in programming, do not skip the article below to guide how to create slideshows in java script with 3 simple steps.