A Gentle Intro to HTML — Build Your First Website (Part 1)

Part 1: HTML Basics Explained

Published in

ModernNerd Code

30 min readJul 15, 2024

In this video tutorial, we’re diving into essential HTML skills. By the end of this video, you’ll know how to create lists, add images, and make links in your HTML documents. Perfect for beginners or anyone looking to brush up on their HTML fundamentals.

If you want to practice, follow along with the video and try adding these elements to your own HTML document. Experiment with different images, links, and list items to see how they work.

Join the Community

Don’t forget to like this video, subscribe to our channel, and hit the bell icon to stay updated with our latest tutorials. If you have any questions or topics you’d like us to cover, leave a comment below. Happy coding!

The Parts of HTML That We Cover in the Video

1. Creating a List

HTML List Container: Use <ul> for an unordered list.
List Items: Add <li> elements within the <ul>.

<ul>
  <li>YouTube Video Tutorials</li>
  <li>Code Examples</li>
  <li>One-on-One Tutoring</li>
</ul>

2. Adding an Image

Image Element: Use <img> with the src attribute.
Attributes: Use width and height to control image dimensions.

<img src="image-url.jpg" width="500" alt="Description of image">

3. Adding a Link

Anchor Element: Use <a> with the href attribute.
Target Attribute: Use target="_blank" to open the link in a new tab.

<a href="https://www.java4humans.com" target="_blank">Java for Humans</a>

4. Linking Pages Within a Website

Creating Additional Pages: Make sure to create separate HTML files for different pages, e.g., contact.html.
Internal Links: Use relative paths to link pages within the same website.

<!-- In index.html -->
<a href="./contact.html">Contact Page</a>

<!-- In contact.html -->
<a href="./index.html">Go Back to Home Page</a>

5. Structuring HTML Documents

HTML Structure: Make sure each HTML file has the proper structure with <!DOCTYPE html>, <html>, <head>, and <body> tags.

<!DOCTYPE html>
<html>
<head>
  <title>Contact ModernNerd Code</title>
</head>
<body>
  <h1>Contact Us</h1>
  <p>If you would like to contact us, email us at support@example.com.</p>
  <a href="./index.html">Go Back to Home Page</a>
</body>
</html>

6. Adding More Content

Sections and Content: Use <div> tags to structure different sections of the page.
More Elements: Explore adding other HTML elements like videos, tables, forms, etc.

7. Learning and Expanding

Using Google for Learning: When in doubt, use search engines to find examples and documentation.
Future Enhancements: Plan to add CSS for styling and JavaScript for interactivity.

Summary

By following these steps, you can create a basic yet functional website. As you progress, you can enhance it by adding styles with CSS and functionality with JavaScript. Practice these basics to build a strong foundation in web development.

Video Key Moments

0:00 Intro
1:54 Creating Our Index HTML File
2:12 What is the Index HTML File?
2:59 How a HTML Document is Like Other Documents You Write
3:52 What HTML Stands For
4:58 How to Create an HTML Document
5:44 Start With the Head of the HTML Document
6:40 Adding a Body to Your HTML Document
7:31 Seeing Our HTML Website in the Browser
9:20 Editing the HTML Body
9:55 Milestone: You’ve Officially Created a Website
10:20 Let’s Build a Basic Website
10:58 HTML Element Explained
11:56 How to Create an HTML Element
13:17 How to Add Paragraph Elements to HTML
14:14 How to Add Header Elements to HTML
16:13 How to Add Container Elements to HTML Using DIV Tags How to Add a Divider Element to HTML Using HR Tags
17:16 Let’s Make Our HTML Content Realistic
18:13 How to Create List Elements in HTML
19:27 Introduction to the IMG Tag for Image Elements in HTML
21:31 An IMG Tag is Self-Closing
21:57 HTML Element Attributes Explained
22:10 How to Add an Attribute to an Element in HTML
22:59 How to Add an Image Element to HTML
23:22 You Can Add Multiple Attributes to an HTML Element
24:49 Challenge: Try to Add a Video Element to Your HTML on Your Own
27:11 Google is Your Friend When You’re Stuck
27:51 How to Add Links to Your HTML Website
30:54 Craigslist is Just an HTML Document With Many Internal Links
31:11 Visiting Our First External Link
31:28 How to Make a Link Open in a New Browser Tab
32:30 How to Make a Link Open in the Current Browser Tab
33:08 You Can Add As Many Links to Your HTML Website as You Want
34:54 Let’s Add an Internal Link to Another Page of Your HTML Document
35:06 How to Create Another Page in Your HTML Website
36:24 We Can Link Our Homepage (Index) to Our Contact Page in HTML
36:33 How to Add an Internal Link to Another Page of Your HTML Document
38:56 You’ve Built a Multi-Page HTML Website
39:05 How to Link Back to the Homepage From Another Page
40:08 Summary

Video Transcript

Hey there. Today we’re going to explore HTML, why we use it, why we need it, and what it is and how we write HTML code in order to present websites to users on the internet through web browsers like Chrome, Firefox, Safari, and so on. By the end of this video, you should understand how to create an HTML file and how to add content to it.

To present to your users. And of course, we’re going to build on that in future videos, but in this video, we’re going to just focus on the basics of creating an HTML document that we can build upon going forward. And that will set us up well to explore CSS and JavaScript in the future, which will allow us to add styling, such as colors and font sizes and backgrounds and so many other styling features that will make our website, our own.

Make it unique from all the other websites on the internet. And then JavaScript will allow us to add functionality such as buttons and handling forms and so many other things so that we can actually have some interactivity on our website so that users can do something on this website that we build.

But in this video, we’re going to be focusing just on the basics of HTML to get us started. But before we get to it, if you enjoyed this video and want to see more like it, do me a big favor and like the video and subscribe to the channel and comment your thoughts below. Let’s get to it. So here we are in our text editor.

That’s Visual Studio Code, VS Code is what I prefer. If you don’t have a text editor yet, you can pause this video and go check out my previous video on text editors that will introduce you to the concept. On how to download a text editor and then start writing code in it such as html css and javascript When you’re ready come back to the video and we can continue Okay, so we’re here in our text editor First thing we have to do if we want to create a website is create an index.html file Which will give us our home page of our website So in order to do that, all we have to do is go to our text editor and hit new file And give it a name. And we’re going to call it index.html. When you have a website and a user tries to go to your domain names, such as facebook. com or google.

com or instagram. com or myportfolio. com, your server will search for an index.html file by default. So we have to provide our server that index.html so that it can present that to the user. And in order to do that, we just type index.html. And it’s going to ask us where we want to save this file. And I have created a photo structure here.

That is my project. And in here is where I’m going to hold all of my code, including my index.html at the root level. So we can just create, hit create file. I already have it. So it’s letting me know I’m going to replace it and I’m going to replace it because I don’t need the old version. So now I have my index.html file. So before we get into HTML, let’s just talk about any document that we write out there, such as an essay or a business report. Or a letter to a friend. When we write that letter, it usually start with a header that tells the recipient who is coming from and what the title of the document is, right?

So a business report might have a title page that just says, Hey, this is the quarter two business report for the year of 2024 that just tells the recipient what the document is. And then from there, there’s a body of the document, which is telling the recipient, the actual content of the letter, the document.

So we have a header and we have a body. The body is where the actual content of the letter or the document is. The header just tells the recipient what the document is about. So HTML is very similar. All HTML is, is a document. And before we get any further, I should mention what HTML stands for. HTML stands for hypertext markup language.

All that means is that it’s the standard for writing a website. A document that a browser can read and present the contents of to a user on the internet. There’s a lot more jargon and details to the word hypertext and markup and of course the language that we write it in. But that’s basically all it is.

It’s a medium of communication for us developers to tell a computer how to present a website to a user, another person on the internet. That’s it. And browsers used what we write to present that content how we want it to be presented. So that’s all HTML is, and it’s very much like a document that you might write for your professor or business partner or your boss or to a romantic interest.

So now that we understand what HTML is and why we need it and how it’s used by browsers, we can now dive into creating our own HTML document. So to start the way we do that is by typing a HTML tag. So we’ve written our HTML here. This is the wrapper of the entire document. Everything in this document has to be between this opening HTML tag and this closing HTML tag right here.

So line one and line three, if we zoom in, this is. The entirety of our document, our HTML document. Now, as we mentioned before, an HTML document has a header and a body. The header tells the recipient what the document is about and gives it a name and description and so on. And then the body has the contents.

So let’s start with the header. In HTML, the way we create our header is by typing head and in there, in this head right here. We have to include the title of our document, our website. So we can call our website whatever we want. And whatever we write in here is what we’ll call our document. Our browser, the browsers will read our document and tell the user this is the title of this website.

So we can call it whatever we want. And in this case, I’m going to call my website, modern nerd and code. If we want, we can add more. We can add whatever we want in here. And that’s the title. So this is the very basic head of the document. There’s a lot more you can add to the documents head to tell the browser, more information about this HTML document, about this website.

But for now, let’s just stop there. Okay. Let’s now go to the body of our document to see how we can present content to our user, to our recipient, right? Again, the recipient of our document is the browser, and then it relays that information to our users, right? So we’re writing all this code for browsers to read and present it to our users.

And what our users actually see is in the body of the document. So in order to create the body of the document, we have to just type body. And now in this body of our document within our HTML document, in our body, we have to provide it content to show to the user. So we can start by just saying, hello, hello world.

And now that we have our HTML document, a very basic HTML document, Let’s see how it looks in the browser. In order to see how our code looks in the browser, we have to open it in our browser. You can, whatever browser you use, I use Chrome. You can use Safari or Firefox, whatever it is. You can go to your folder where you’ve saved your project and your index.html and open it in your browser. So in order to do that, I’m actually going to close this, this tab and close this welcome tab and go to file, open folder. And open my entire project folder so that I have all my code here in the sidebar. And as we can see, our index dot HTML is right here. So now we have our index.html opened up again. And what I’m going to do is just reveal this in the finder in the folder. So I have it in my file Explorer on my MacBook pro here. If you use windows, it’s a similar process. It’s open the folder where you have your project. And so I’m going to go ahead and right click and open with Chrome.

So now we can see our HTML document. We can see that the title of our document, which we wrote in the head is actually presented to the user in the tab of the browser. So my title was modern error code. The browser read that and presented it to the user in the tab. And again, that’s coming straight from here.

The title within the head of the document in the HTML document. And then we can see the content of our body right here. The document’s body is right here in the contents of the tab. So all of this is the actual document. And we can do more. We can change this to say, Hello world, I’m here. And if we refresh the page by doing command R or ctrl R or just hitting the refresh button we can see Our content has changed the contents of our HTML documents body That we wrote in our text editor is now presented in our browser when we visit our website so our index.html that we wrote is right here and Here’s the contents of that document That’s a big milestone. We’ve now created a HTML document and we can actually see it in a browser. You’ve created something that’s amazing because you can think of something in your head and create an HTML document and share it with the world.

It’s as easy as that. But of course it’s not exactly that easy because there’s a lot more to learn. So it’s going to take some time, but we’re going to step through and make a very basic website right now, just so you can see more of the potential of HTML documents. So let’s just go through step by step and see some of the things that we can do with our HTML document to make it a little bit more useful, to make it a little bit more presentable and provide actual content that somebody might want to read or that you might want to share with somebody that you know.

So in order to do that, let’s go back to our HTML document, our HTML file in our text editor. Okay, we’re back in our HTML document. Let’s go ahead and explore the different elements that we can add to our document to create more content on our website. But first, what is an element? So in HTML, an element is anything that holds content.

or presents content to the user on the website. And the way that we define a element, we declare an element in an HTML document is by typing our elements name, such as a paragraph, which is P or a div, D I V, which is a container, a table, which holds a table. And so many other options, but we’re going to start with a P for paragraph.

So if we want to add a paragraph to our document, we can do this in order to create an element in our HTML document. We simply write the tag name in this case of P for paragraph in between a left and right angle brackets. And then to close that element, to complete it, we write it in between a left And right angle bracket, but with a forward slash before the tag name, just like this.

So now that we have our paragraph tag again, P we can write our content in here. So instead of having our hello world, I’m here sentence out in the body, we can put it in the paragraph within the body. So that way it’s treated as a paragraph to the browser. Okay. Which determines how it was displayed to the user, which we’ll cover later, especially when we touch on adding CSS to our HTML document for styling.

We have our paragraph declared in our body with the content, hello world. So this is exactly how you create an element, the opening tag and the closing tag and the content in between. So now let’s see how this looks in our website. So if we refresh the page, it looks exactly the same, nothing has changed.

But now let’s go ahead and add a second paragraph. And let’s just do lorem and get some dummy text. Again, all I did there was type lorem and tab and I get some dummy text from Visual Studio Code, it’s just a helper. Just to get some dummy text to fill in my paragraph. Now, if we refresh the page, command R, we see that our first paragraph is here.

Hello world. And our second paragraph is on a different line underneath the first paragraph. And there’s spacing in between the two there’s margin between these two. So we can add more paragraphs if we want to. And let’s just type in lorem, lorem again, tab, and we get a new dummy text. And if we refresh the page, command R, we can see that we have a third paragraph.

That’s how we add paragraphs. So now what if we want to add a header to our document to introduce the website to say, Hey, welcome to my website. We can do that by creating a header tag. And there are six different header tags. You can use the H one. Or H two, H three all the way to H six. The H one is the largest, and H six is the smallest.

And of course, everything else follows in between. So H one is big, H two is less big, and H three and so on. So let’s go over H one for our top header that will say, welcome to Modern Nerd Code. So now if we go to our website. And refresh the page. We can see it says, welcome to modern error code in bigger text, because that’s the header.

So the document reads your header tag, and it knows how to present that in a way that is conventionally correct to the user, something that they would expect. If you, the developer tell the browser that you want an H1 tag, it knows to make that bigger and bolder. So what if we want an H2 tag? We want one that is.

Just smaller above our third paragraph. We create an h2 tag and we say section 2 So this is the second section in our document so we can just give it that name We can call whatever we want, but let’s go with section 2. Let’s just type section 2 And if we refresh the page we see section 2 after the first two paragraphs which also come after our h1 header and And Then after our section two header, we can see our third paragraph here.

So now we have H1 tag H2 tag. We can continue on to add H3 all the way to H6, but that usually isn’t necessary. But if you want to, you can, it’s up to you how you want your document to be structured. So now what if I want to say that I want to contain my first section and my second sections in two different containers.

So if I go ahead and type div, that creates a container and now I can put stuff inside of my container. So if I go ahead and drag my two paragraphs into this first container, we can see that this container contains the two paragraphs. And if we go back to our browser and refresh, nothing changes because we haven’t added any styling to make this first container.

any different from how the paragraphs will be displayed otherwise. But we can if we want to and we’ll get to that later. But let’s look at adding another div to contain our second section. And what if we want to add a header to our first section? Let’s just go with h2 here and say section 1. And now we have section 1 and section 2.

And let’s say we want to Add a divider between these two sections. We can do that by typing the H R tag. So now we have a horizontal rule tag. The HR element simply draws a line where you put it in the document. So if we go back to our browser and refresh the page, we can see this HR right here is a horizontal rule.

It’s just a line, a horizontal line that we can use to divide our content. And we can put it wherever we want. So we can put it, we can even put it between these two paragraphs within the section one and we can see it’s there. And, but we don’t want it there. We just wanted to divide these first two sections that we have here.

So we’re back to just having one horizontal rule because we removed that second horizontal rule between these two paragraphs. Now let’s actually change this to be more useful. Let’s just call this first section our About section. And let’s give it some actually useful content. So we’re going to say what this website is about.

Modern Nerd Code is a website that helps you learn how to code. Just like that. We can see that our section header has changed to About, and our first paragraph now says this. and we can remove this paragraph because we don’t really need it so our first section only has the header and then one paragraph just like that now we can add more information in section two to be more useful so let’s just say where to find us and we can change the second paragraph to say you can find us on youtube and medium.

com Just like that and we refresh and there’s our new content for our website, so we’re off to a great start now What if I want to create a list of things that we offer? On our website if I create another section I can say hey h2 What we offer? And in here I can create a list. So in order to create a list, we can actually do two things.

We can create a ordered list, which is 1, 2, 3, 4, 5, 6, and so on. Or we can do an unordered list, which is just bullet points. So in this case I’m going to do a unordered list, which is ul. That’s what the U stands for on ordered. And if I wanted to do an order list, I could do ol, which is ordered list. But let’s just do UL for now, Unordered List.

So in order to create a list, we have to actually create our list container, which is the UL element. And then, in that list container, we create a list of list items. And in order to do that, we type li for list item. So, in our first item, we’ll say YouTube Video Tutorials. And if we go to our website, we can see we have a bullet point that says YouTube video tutorials under the section, what we offer.

And if we go in our HTML document, we can add another list item and say, we offer code and code examples, just like that. And now we have a second bullet point. And if we want, we can continue to go and add more and more one on one. Tutoring So that’s our third offering. So we offer YouTube video tutorials, code examples, and one on one tutoring.

That’s our list. We can add as many list items as we want within our list element here, the list container, which starts with the UL tag and ends with the forward slash UL tag. So this is how we create a list. Now, what if we want to add an image to our document, our website, in order to show our users what we offer at Modern Nerd Code?

We can do that very easily by adding an image element to our document. And we do that by typing img, which stands for image, and actually just type in forward slash to end our image tag. There are some elements in HTML that don’t have content in between their tags because their contents are defined solely by their tag name and attributes.

And so now we’re getting into attributes. Attributes tell the document more about the element without actually adding content to it. So attributes are more meta. They’re just informational and they might have an effect on what is presented to the user. And sometimes they don’t. In this case, an image tag must always have a source attribute.

An image’s source tells the browser where to find that image on the internet or on the server of the website. So just to keep it simple for now, we’re going to just use a image from the internet that already has a URL, a link that we can give to our document. And have the browser load in order to add an image source, we just add the source attribute, and that can be done by typing S R C and all attributes must have a equal sign and then quotation marks.

And within those quotes, we type in the actual content of that attribute. This is always the same. So we have our source attribute here right now. It’s empty. But we can add the content, the link, the URL to the image that we want the browser to load for this image. So if we go to the internet, we can look up something.

Let’s just do code and we can go to images and just copy one of these images. Let’s just, let’s use this one. I like this one. We can go right click and copy image address and then go back to our code and paste it in between. The quotes for our source attribute. So now we have our image tag and of course it ends itself is self closing.

It doesn’t have a, another tag like this. We don’t, we don’t need that because it closes itself. So all we need is this. So we have our image tag and it has a source attribute source equals. The URL. To the image that we want to load. So now we hit save and we go back to our website and we can see that our image is loaded in the web page right there.

But it looks a little odd. We don’t want it to be this big. It’s a little too big and greenly greeny. So let’s go ahead and see how we can make it smaller. So that is more presentable and doesn’t take up our entire screen. So if we go back to our code. We can actually add more attributes to our HTML elements tag.

So, we can actually add more attributes to this image to tell the browser how we want to present it. One of those attributes is the width attribute WIDTH equals and we can tell it how big in pixels. So let’s just say we want it to be a hundred pixels wide. So this attribute tells the browser to present our image in the dimensions of 100 pixels wide.

But now it looks too small. So let’s just make that bigger. Let’s make it 500 pixels wide. And now it’s 500 pixels wide. We can also tell the browser that we want it to be a certain height. And let’s make it 100 pixels. So now if we refresh, We can see our image is 500 pixels wide by 100 pixels tall, but that looks awkward.

So what we can actually do is let the browser just automatically determine the height that is appropriate for the image by just using its width. So by default, it will present the image as 500 pixels wide because we told it to. And then from there, using the proportions of the original image, we can It will let the image be as tall as it needs to, to be proportional.

So we can do the same thing with height. If we don’t know how wide we want the image to be, we can tell it how tall we want it to be. And in this case, we want it to be 300 pixels tall. So now if we go back, our image is 300 pixels tall, and it’s as wide as the browser needs it to be, to be proportional without distorting the image.

So we can actually make that, let’s say 600 pixels tall. And if we refresh, it’s now 600 pixels tall and probably a thousand pixels wide. So that’s how we add a width and a height or one or the other. Or we can again not have either and let the browser just lay it out as long as it is and as tall as it needs to be.

But that doesn’t look great, so let’s go back to make our width 500. Voila! Now we have an image. Now, what if we want to add a video to our website? We can do that, but it’s a little bit more work. So we’ll hold off on that until another video in the future. But if you want, you can go on Google and type in, how do I add a video element to my HTML document?

Check that out and see if you can add your video to this document. You can use the code we’ve already written for our HTML document. And then add your video element wherever you want. You can add it in the first section, or you can add it in the second section under your list, above your list, wherever you want.

See if you can do that yourself. Go ahead and Google that. Googling is a very important skill when you’re learning. If you don’t have the answer for something, you have to go on Google and type in your question and say, in HTML, how do I add a video? Or how do I add a table? And so on. So we’re going to get to more of those elements in the future, but if you want to skip ahead and see if you can do it yourself, Google’s your friend.

Now, what if we want to add a link to our website, to another page on our website, or to a different website altogether on the internet? Let’s start by doing the latter. What if we want to point our user to a book that we recommend for them to read? We can do that by adding a link to our content. So a link is actually very easy to add.

A link is an anchor tag, an anchor element, and the way we create an anchor is by typing A, that’s the whole tag name, and then we need to put some content inside of it. So our book we’re going to recommend to our user is called Java for Humans. I actually wrote that book in college and my students used it to supplement their coursework to learn Java.

Another programming language that you can learn if you want to and you can do that by reading this book. But it’s a separate topic so this is just for an example. So we’re going to recommend to our users that they read Java for Humans. So what we have so far for our link are the opening and closing tags.

And then inside of that, we have our content, which is what the user will actually see. And in this case, it’s Java for Humans. So if we go back to our, if we save that and go back to our website, we can actually see it right here. But if I click on it, nothing happens. A link is supposed to take me somewhere.

So, something’s missing. What’s missing is the Attribute that tells the browser where to take the user when they click this link. And that attribute is called an H ref. H R E F it stands for hypertext reference. So that just tells the browser where to send the user. So in this case, again, uh, attribute must have equal, and then the opening and closing quotations.

And in there we can add our link. So where we want to send our users is HTTPS www. java4humans. com. Doesn’t have to be in capitals. I just did that for fun. That’s our link. That’s our href. This is the whole URL that our user will be sent to when they click this link. So if we could save that and go back to our website and refresh, we can now see our link is in blue, has an underline.

This is a link. This is the anchor tag. That’s how browsers to present the anchor, the link by default. If you go on Craigslist and you look at Craigslist, we can actually do that right now, craigslist. com. We can see that Craigslist loves links. All they have is a bunch of links. These are all links. If you click on them, you will be taken to a different page on Craigslist.

But for us, we’re sending our user to a different website. So we click this, it takes us to java4humans. com. And this is the website. A different website, which I built for my book. If we click back, we are back on our website. So what if we want to open this link in a different tab? Because currently it opens in the same tab that users own, which takes them away from our website.

We don’t want that because this is a different website. We want to keep users on our website, but send them to a different website on a different tab. So we can do that. We go back first and then go back to our document. We can add more attributes to our link. And in this case, we’re going to tell the browser where to send the user when they click this link and how to send them there.

And so we’re going to tell the browser, the target for this link is blank. Blank tells the browser that we want to use a new window, a blank window, a blank tab. So when they click this, if we refresh this and now we click this, it opens a new tab and. Opens that UL, that new website. And we still have our website here opened up.

So the user stays on our website, but still gets to visit the website that they clicked. So if we change that to self, we can see what that is. The self target tells the browser to open the link in the same tab, in the same window. So you can see when we click that, it opened the link in the same window.

And so we have to go back to our website. Now, if we go back to blank again, we can see and save that and refresh. We can see that the link is still here and now opens in a new tab. Voila, we have a link. This is how we create a link on a website. Now, what if we want to add more links to our website?

Because a website can have many links, not just one. You can have zero or a hundred. Or a thousand, a million links, right? Because Facebook has millions and millions of links, right? Every user on Facebook has their own link. So we can add as many links as we want to our own website as well, just like we saw on Craigslist.

So what if we want to tell our user where to find us, which is this section right here, our second section, but then give them a way to go to that page, that website on the internet, we can do that by adding a link around this text. So we have medium. com. Let’s just go here and say medium. com slash modern nerd code.

So that’s the, that’s the link to our publication on medium. And so that now will tell the user that they can find us at medium. com slash modern nerd code. And so if we save this and go back to our website, we can change, we can see that that changed. So this is the text now, but it’s still not a link because there’s no href, we need to add our href.

So we can make this an actual link by adding an href attribute to our anchor tag. And we have our link already. So we just don’t paste that in there. And it’s medium. com slash modern error code. So let me save that and go back to our website, refresh. And we can see now is a link again. And we click that and we’re on medium.

com slash modern error code. Of course, we don’t need to have the actual link in here. We can just say medium. And now, if we go back to our website, we can see it says Medium. And click, and it still goes to the same page. Now, what if we want to add a link to another page on our website? Well, right now we only have a single page on our website, and that is the index.html page. So, if we want to add another page, and a link to it, we first need to create that page. So, let’s go into our page. Text editor here on the left side and do right click new file and say contact.html This will be our contact page. So if we type our html again And we give it a head and we give it a title We can say contact modern nerd Code that’s the title of this page now.

We need a body And we need a paragraph and a header and in here it will say contact us and the paragraph will say if you would like to contact us email us at support at example. com this is not a real email it’s just an example email and that’s how we’ll tell people to contact us. So now if we go to our browser and in our UAL, we changed this from index html to contact html, we can see our contact page.

So this is just the same as our index page with just different content, and it’s called contact HTM l. The index page is the homepage of our website. The contact page is just another page on our website. We can have as many pages as we want. In this case, we have a contact page. So now what we have to do is give the user a way to get from our home page to our contact page.

And the way we do that is by creating an internal link that tells the user how to get there. So if we go here and do div, we can say h2 contact us, how to contact us. and we’ll put a paragraph and we’ll say click this link to see our contact information and we’ll just add our link here so what we gotta do now is let’s format this real quick so now all we have to do on a new line is type a for our anchor tag close that and say contact page so this will tell the user to visit our contact page Now, if we go to our website and refresh, we have our new section down here, how to contact us, and it has the information we put in as well as our link content.

But again, it’s not a link yet because there’s no href. So we need to add our href attribute, href equals, and put in our contact.html, just like that. What we’re doing here is we’re telling the browser that we have a page, another document, on our website called contact.html. This dot and forward slash tells the browser to look in the current directory, and then it tells it which file to load, and that is the contact.html. So again, it will look in the current directory, and then find the contact.html file. Because you can see here, These two files are in the same directory, index and contact.html. Index.html and contact.html are siblings in the same folder. So that’s why we put this dot and forward slash before the contact.html. So now if we save this and go to our website and refresh, we can see our contact page is now a link. And if we click that, we’re taken to our contact page. Isn’t that wonderful? We now have a website that has multiple pages and a link from the first page, the home page, to the second page. But what if we want to give the user a way to get back to the home page without having to click the back button in their browser?

We can do the same thing by putting a link to the home page in our contact page. And we can do that simply by typing A again for our anchor. And saying, go back to home page. And in here we can type our href, which again, we now want to get the browser, the URL to our home page again, because it’s on our website.

We just simply type period forward slash and index dot HTML. And now if we go back to our website and refresh our contact page, We can see that we have a link to our homepage right here and we click it. It goes back to our homepage index.html. And we can see that right here. So now we have a website again with two pages and they both link back to one another.

The homepage links to the contact page and the contact page links back to the homepage. We’ve covered a whole lot. We now have an idea of how to create an HTML document with content, a link. And an image and headers and paragraphs and divs for containing different sections and HRs for horizontal rules to create lines between sections.

We’ve learned a whole lot in this video, but there’s so much more to learn and we can make this website a lot more rich. And so as we go on in the future, in future videos, we’re going to expand upon this website to create a portfolio website for yourself. So you can create your own website that says hi, I’m Lincoln.

This is what I do This is what I like. These are my hobbies and This is my resume if you want to hire me, there’s so much more to learn in the future videos We’re going to cover how to add CSS how to make our website prettier because HTML is only for Providing the browser the structure the contents of your website And then you add CSS to it to add the styles to make it look pretty and unique to yourself, your own style.

And then you can add JavaScript to give it functionality using functions to tell it what to do when users take action on your website, such as clicking a button or an image. I’m glad you’re here. I hope this video was helpful. And if it was, do me a favor, like this video and subscribe to the channel to tell me that I’m doing a good job and that you want to see more.

And of course, if you have any questions or you have any topics you would like me to cover, comment below and I will do my very best to get to those. That’s it for now, I am Lincoln, and I’ll see you in the next one.