🌟 You have probably heard about links before.
🌟 A link is an HTML element lets you move to another location when you click or tap it.
🌟 So now we are going to create links which lead us to another location (The exciting
news is, you are going to be able to code links that lead to any website you want, any image you want, any pdf file you want or anything that is supported for the browser to open. That means if the browser can open a pdf file you can
add a link and make the link lead you to the pdf file.)
🌟 In this section of our course we are going to create a link that leads us to 'google.com'.
Follow along
1. Open up your notepad.
2. Code the basic html code
(You'll be able to code it by yourself by now)
3. Inside the body tag open up a link tag that looks like this
'<a></a>'.
Tip: The 'a' tag is called the anchor tag.
4. Add an attribute called href in the a tag. Which means
<a href=""></a>
🌟 href short for hypertext reference is a specification that is used to define the relationship between web pages and browsers.
5. Inside the opened quotation marks type in "https://www.google.com"
6, And between the tags lets add something to it. Maybe 'My link'
Our code would look like:
<a href="https://www.google.com">My link</a>
7.Save your notepad file and run your code!! Your code should look like these.
<html>
<head>
<title>My link web page</title>
</head>
<body>
<a href="https://www.google.com">My link</a>
</body>
</html>
Now you can see that you have been directed to Google website Congratulations!!!!
Buttons and links could work together. That means we can make a button take as somewhere by using the
link tag (anchor tag or a tag).
Example:
<button><a href="https://www.google.com"></a></button>
For example:
<html>
<head>
<title>My link web page</title>
</head>
<body>
<button>
<a href="https://www.google.com">Google</a>
</button>
</body>
</html>
We can also use a link to take us to a part of a page by using id. We use id to differentiate elements from each other. There is something called class too. It also helps the same. But the difference between id and class
is that an id can overwrite a class. That means if you write a property for an element with a class and write another property for it with an id, the element takes the property of the id not the class. We will learn about classes and
ids in the future.
Project
Build a website that redirects you to a cat image as you click at a cat button.
Elements to use
🤩 Basic HTML code
🤩 Links
🤩 Button
🤩 Image
Image link: https://images.unsplash.com/photo-1611003228941-98852ba62227?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YmFieSUyMGRvZ3xlbnwwfHwwfHw%3D&w=1000&q=80
