Become A Web Developer - Part 3: HTML | Andrei Neagoie | Skillshare

Become A Web Developer - Part 3: HTML

Andrei Neagoie, Senior Software Developer + Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (39m)
    • 1. Build Your First Website

      7:55
    • 2. Developer Fundamentals: III

      3:33
    • 3. HTML Tags

      8:44
    • 4. HTML Tags 2

      1:50
    • 5. Self Closing HTML Tags

      5:36
    • 6. Anchor Tag

      5:03
    • 7. Q&A: index.html

      2:05
    • 8. Q&A Relative vs Absolute Path

      3:49
18 students are watching this class

About This Class

HTML and HTML 5


This is the tutorial you've been looking for to become a web developer in 2018. It doesn’t just cover a small portion of the industry. In this multipart video series we will covers everything you need to know to get hired: from absolute zero knowledge to being able to put things on your resume that will allow you to live the life you want. 

Sounds too good to be true? Give me 5 minutes of your time to explain to you why I built this course and what is different here than thousands of other courses all over the internet.

  1. There is no wasted time here. We won’t be using outdated technologies like PHP, Wordpress and JQuery. Although still useful, outdated technologies like the above are low paying and demands for them are decreasing. In this course, you will learn the specific technologies that are the most in demand in the industry right now. These include tools and technologies used by the biggest tech companies like Google, Facebook, Instagram, etc… It’s geared specifically for people that want to learn employable skills in 2018.

  2. After finishing this course, you will be able to apply for developer roles, or upgrade your job title as a developer and earn a higher salary. We won't be taking any shortcuts in this course. I am going to take your from absolute zero, where I teach you how the internet works, to mastery, where I show you how to build an image recognition app using a Machine Learning API (a subset of Artificial Intelligence).

  3. This course is taught by an instructor who has worked in silicon valley, and one of the top tech companies in Toronto. I have built large scale applications, and have managed a team of developers. I have worked directly with these technologies. I am not an online marketer or a salesman. I am a senior software developer who loves programming and believes that there needs to be a course out there that actually teaches valuable skills.

  4. I know your time is valuable. You want a course that outlines the best way to learn the topic in simple, well explained methods so that you fully understand topics instead of watching somebody on your screen and having no clue what is going on. I have created this course after consuming hundreds of books, tutorials, and online courses while I was learning. I have taken the best pieces, the best methods, that I have found, and condensed everything so that you can learn in the most efficient way possible. 50 hours of videos doesn't mean much if the instructor isn't engaging or focuses on outdated topics. 

  5. We have a thriving online chat community so you really feel like you are part of a classroom and not just watching videos by yourself. You will have a chance to communicate with fellow students, work on group projects together, and contribute to open source. Anytime you have a question you can ask in the chat and someone will surely be able to help you right away. 
  6. The course is designed to give you employable skills so you can get a job. Here is what one student recently wrote after taking the course and being hired right away: 
    "I’m a self taught dev, who has been out of work for ~6 months. I had some family things that came up that prevented me from seeking permanent employment, so for awhile I was Postmates/Uber delivery driver.
    After taking this course, I immediately got catapulted back to where I was before, but better equipped and with the knowledge to take on the next job. I had just finished the React section when I went to a recent interview, and it really helped me excel. As of today, I am officially re-employed back in the field, and it is all thanks to this course. I had a blast creating the final project, and FINALLY got around to learning SQL statements, and getting to use them in a project. I’m really ecstatic that Andrei went with teaching relational databases over something like MongoDB, which can also be fun, but is less practical for use on the job. So thanks Andrei , I really enjoyed the course and will be making sure to share it with others who find it helpful. I’m also looking forward to the new ES7/8 content that was recently added, and going through the DB stuff again when I go to build a personal project."

In this course, you will be taken through online videos and exercises where you will be able to do the following things by the end:

  • Build real complex applications and websites
  • Build an image recognition app together at the end of the course so you can add it to your portfolio
  • Go into a job interview confident that you understand the fundamental building blocks of web development and the developer space in 2018
  • Be able to go off on your own and grow your skills as a developer having built a solid foundation
  • Learn how front-end, servers, and databases communicate and how they all fit together in the eco system
  • Build your own startup landing page. 
  • Go off and remotely work by being a freelance developer and bid on projects.
  • Know EXACLTY what a day in the life of a developer is like and what the day to day technologies and tools will be that you are using. 

By the end of this course you will be comfortable using the below skills and you will be able to put them on your resume:

  • HTML5
  • CSS
  • Bootstrap 4
  • Javascript (ES6/ES7/ES8)
  • React + Redux
  • Git + Github
  • Node.js
  • Express.js
  • NPM
  • PostgresSQL
  • SQL

This course is the accumulation of all of my years working, learning, and teaching coding and all of the frustrations and incomplete information I have encountered along the way. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem. I have gone through thousands of coding books and online tutorials and bootcamps. I have worked with these tools on real applications. Throughout the years I have taken notes on what has worked, and what hasn't and I've created this course to narrow down the best way to learn and the most relevant information. 

I will succeed if you succeed in this course. Therefore, I will be there every step of the way helping you understand concepts and answer any questions you have.

I am 100% confident that you won't find a course like this out there that is as well organized, and as useful, to build a strong foundation for you to start a new career. We're not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won't find anywhere else are:

  • React.js + Redux: you will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.
  • A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.
  • How does the internet actually work. What is the history of these technologies: I will actually have you understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.
  • How do you actually deploy a real life app so that it is secure, and won't get hacked: How does a real life app get out to the public?
  • What is Machine learning and how you can harness it's power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness it will have an advantage. 
  • What is your developer environment on your computer look like: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go into the workforce.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough and you won't be able to grow in your role and command a higher salary. I am teaching you these things because these are the things you should know in 2018 so that you are miles ahead of the rest. 

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey. 

This is the proudest work I have ever done in my life and I am confident that you won't find a course better than this. 

See you inside!

Taught by: 

Andrei is the instructor of the highest rated Web Development course on many platforms. His graduates have moved on to work for some of the biggest tech companies around the world like Apple. He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.  Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the course! 

Transcripts

1. Build Your First Website: hello and welcome back to a very exciting section. Why is it exciting? Well, we finally get to code and we're going to start off by learning html and then finally building our very first West site. In order for us to get started, we need to set up our environment and we do that by Let's open up Google Chrome and we're gonna search for sublime text three. This is, ah, tax Editor that a lot of developers use. I myself have used it for years. Absolutely. Love it in your day to day job. You'll use something like this. I highly recommend sublime text. If you have a Mac, the version over here. If you have a PC running Windows, you'll have the download link for Windows. So for me, I'm going to download for the Mac, and you can see here it's downloaded, and I can drag it to my applications folder if I want, and we can double click. And if this is your first time, Dahlan, the sublime text. You'll get something like this to, um give it permission to load. And there you go. We have sublime taxed. Now what is a text editor a text editor is a program that allows us to write coat. You can see over here on the right hand side of sublime tax that it just says plane tax so I can type anything that I want. And there's nothing much different than if you wrote this in word or a text file. But the par with Attacks editor, especially with something like sublime that's geared towards coding. If you click on plain text here, you'll have a whole bunch of options of what type of code you writing. So in our case, we're doing HTML. So if I click on HTML, nothing changes except for the bottom part over here. But now if I type something well, everything looks the same. But if I start typing a Shia, Mel, well, actually recognize it and help with syntax. So here. Now, if I write HTML, look at that, get a nice little color completion. So for us, for now, we're gonna be writing a scene. While you can see over here that there's different options, there's where is it there CSS JavaScript will will learn later, so we're gonna be using sublime text for this. For now, click on HTML and let's write our very first webpage in order for us to have a web page we write HTML, which stands for hypertext markup language. So bear with me here, this is going to be new. But keep in mind that this is exactly what every single issue melt page has these air, the set of rules that all HTML files must follow. And it goes like this. We define a doc type. And don't worry, I'll get into what that means in the next video. I don't want caps here. Then we have hey html and we closed the stags. HTM Oh, the second part. We have a head and a closing head. You can see over here some patterns forming. Don't we all get back to these tags and explaining what they do in a bit. And then we also have body and then closing tax. And finally, here in the head, we have something called a title tack. Okay, so this over here is the rule that every single issue mill file must fall to. Just looking at this right now without knowing any a shimali, you get an idea of what everything means so html were defining that This is an HTML were saying that this is the head of the Asian Mall with the title and we're saying that this is the body of the Asian. So let's try something here. Let's save this file and we're gonna save it. Let's do desktop and we're gonna call it index dot html. You can see that it's already completed the html syntax for us safe. And we have an index dot html file here. Let's drag this all the way down to our Google chrome and open it up and we'll nothing happens. But let's add a bit off texted. So in the title, I'm going to say my first website exclamation mark and then in the body. I'm just going to put Helou there, Okay, so if I say this and just to show you from now on, I'm gonna be doing command us to save Just will be faster. And now if I refresh this page, I have Hello there and you can see the power over here of what we just did. We have hello there as the text which is in the body. And then we also have my first website as the title, and you can see over here in the file that we're referencing index dot html on my desktop, we can see here that we have HTML. We have the head, which we haven't really talked about yet. But we see that the titles in the head kind of like a header. And then we have the body, which, by looking at this, we can assume that it's whatever shows up onto the webpage before we expand on this and make it a little bit prettier. Because now it's just simple tax. I want to reiterate the fact that what we've just done is very similar to what a server does. If we go back to our mock ups here, you remember that when we enter google dot com, the servers send us an HTML file that when we moved the index dot html file all the way down to Google Chrome, that's what we just did. We mimicked a server and we gave it to the browser to load up the HTML felon because browsers are built to know what a she male falls are. It can read this syntax and say, OK, yeah, this is the nature TML. Okay, You want my title to be my first website and you want my body to say hello there. That's perfect. These are the default HTML rules that you'll see all the time. It is a little bit confusing at first, but this is it. You just have to remember that there is a tag. So in html, tag a head tag, a title tag, a body tag, and these tags usually have an opening and a closing. There's some exception to this rule, and we'll get into that a little bit later on in the videos. But just remember this for now. So I want you to try creating your very first website and seeing how it works. And once you're done with that, I want to show you that sublime tax actually has a nice shortcut. So you don't have to keep writing those tags over and over. So the way you do that is you type in html and then press the tab key, and it loads all this up for you. Okay, so now that we've done this, I want to go off and create your very first website. I know it's very very simple. You can put whatever you want in the title, and you can put whatever you want in the body. And in the next video, we're going to start expanding on our first website. I'll see in the next one. Bye bye. 2. Developer Fundamentals: III: and welcome back in the previous video, we went over the basic rules that all HTML files must follow, and I kind of glossed over this doc type A She em all tack. And I did that on purpose because I want you to develop another developer fundamental concept. And that is the fact that most of the time as developers, there's so much information out there. There's no way that you can keep all of that in your hat. And as developers, we must give really, really good at problem solving. So for the doc type, let's say if I was working and somebody gives me this file and I say, OK, I got this, that's good, but I'm not sure what Doc type is. Well, again, we want to get really good. It's Googling here, and I know it sounds silly, but trust me as a developer, you're gonna be Googling a lot and going to get really, really good at looking for answers and understanding meanings behind coat. So if I go into Doc, type HTML and we Google, that one of the first things we get is the doubly three school, and this is a resource that I highly, highly recommend. It'll actually explain what the doc type is and even show you a demo of what it does. You can read into this and skin more familiar with it. But the general rule and the concept behind doc type is that Doc type says to the browser, Hey, just a heads up. This file is gonna use html five and we'll get into what html five is. But right now, a schimmel has evolved from back in the day when Tim Berners Lee invented it to where it is now and has developed and involved so that it has a few more tags, has a few more features. And this is the way for us to say, Hey, browser, we're gonna be using a shame all five. So please make sure that you load the website properly. We'll get into what those new tags are in. Some of the new syntax is, but again, most likely in your day to day job, you're gonna be writing this at the top because we're writing in html five. If that ever changes and something new comes along, we might change this but doc type. That's what it is the G concept here is that I really want you to start Googling, and any time you see in my video something that you don't fully understand or you want to dig a little bit deeper, you really want to grow those roots of your foundation so that you really understand how the landscape works. Okay, so from there, I just wanted to get that concept across that as a developer, you really want to understand how things work and what they meet, and you'll come across in your day today many things that it's very easy to just on the surface, copy and paste, or just look at an example and do without fully understanding what it does. But the developers that give really, really good salaries really good jobs and are considered senior developers are the ones that fully understand all the meaning behind the things that they do. We're gonna be taking that throughout the course and making sure that we develop those fundamentals. But any time, like I said, you have any questions or you don't understand something fully. I do encourage you to Google and get the answers because there's a ton of free resource is out there for you to get fully, fully comfortable with a topic I'll see in the next one. 3. HTML Tags: Welcome back in this video. We're going to expand our knowledge and introduce you to a few more HTML tags and make this website look a little bit prettier than just hello there to get started. I'm just gonna move the screens around so you can see better. All right, so we have the left from rate and again just to make sure everything works. If I change anything here, too, do and then I click, save, and then I refresh the page. I have everything updating. Perfect now discerned the Onley html tags that you'll encounter. There's actually Aton of them. And if you go back to the W three schools dot com, you'll see over here all the HTML tags that exist. There's a lot of them we're only gonna be going through, I would say maybe 10 or 15 or so because those are the Onley ones that, well, technically, that I've used them many years of development. There's a few things on here that I've never even heard of. I've never used can always look this up and learn them yourself, but I'll say that there's about 10 or 15 tags that are used 99% of the time, and they'll sort of the ones that you'll encounter. So we'll go through some of those most popular ones. And a schimmel doesn't really get any harder than than this. This is the syntax. As long as you get used to these little signs and structure, you're pretty much a HTML developer. So the first tag that I want to introduce you to is the H one tack. So the way that I have it here is actually not right. You want to make sure that everything is surrounded by a tax. So a Web browser right now can see boo and just print out boo. But if you want to do it right, you'd want to put something like an H one and an H one tag. If I save this and I refresh, we get what we call a header. So that is a header and then one. What does one mean? Well, it actually goes all the way up to six. So if I change this to to and I'm not going to do every single one, let's just do another one. H six boo 86 And if I save this and refresh the page. You can see that there's different sizes in the tax, So that's the header tag. And again, if I scroll through the W three schools and I go to the H, you see over here that there's the header tax explain here, and this website is really, really cool because you can actually click on, try to yourself and you can play around with different things. Click, run, and it changes there for you. So again, this is a really, really good website for you to get familiar with all the tags. But again, we're gonna stick to our website for now. Another thing that I want to introduce you to is something called a P Tech or a paragraph Tech. A paragraph tag lets you have paragraphs. So now if I refresh well, there's not much different from what we have before, which was no tags and just saving it. Refresh. But you can see the difference. When I copy and paste this and have a few paragraphs versus this. We'll see what happens. I see this you'll see over here that, um, with sublime tax after I don't know, I want to say about maybe like 20 saves will ask you to make a purchase. Because technically, this is an unregistered one you can ignore for not just click Cancel again is just one annoying thing that will pop up every now and then. I actually have a register Sublime text. I just want to show you this air. So you're not surprised when you see it? Um, you sublime tax for as long as he needed for free. When you start getting into the developer roll and working full time with it, I do recommend that you make a purchase is a great program, and, uh and you still get everything through the unregistered. You just have this pop up that shows up after a few saves. But anyway, from now on, I'm gonna be using a registered sublime account. I just wanted to show you that there. If I refresh the page here, you'll see that I have the paragraphs show up nicely. But these unstructured pieces of tax will everything is kind of in lining, and html doesn't really know what to do with this. So it puts everything l in one line. I also want to show you one other quick trick and sublime tax. So writing this gibberish is not very exciting and kind of takes a bit of time and developers air lazy. We want to make sure that everything is down fast and efficient. So if you actually put Laura here and then press tab, you'll get Laura myths and paragraphs. So let's do that and then delete that Lauren tab and then one more lower em tap. Perfect. Let's say that and refresh and we have nice paragraphs. As you can see, we have some tags and will be called Nested Tax so you can see that the body is the parent and sublime text actually lets you, um, close and open these So you have the body tag. You have the header tags, which are Children of the body tag, and then we have P tax. A lot of people get confused, and the naming I've mentioned the says tags. So essentially anything that has this syntax is a tag. But this is called an H one element, so that's when its an entire block of functionality with content inside it. So again, tags. And then this is an H one element again. It's is just naming, but you'll hear tags and elements kind of used interchangeably. But those are the specific differences. All right, let's get into some of the more exciting things. Let's say, for example, I really want to emphasize Lauren Ipsum here. Well, I can use another tag, be tag and then we close it at Lauren Gypsum. And let's make that screen here a little bit bigger just so you can see. There you go. So we have the B tags over here, and if I click safe, I refresh. We don't want to translate the spade. Ah, we see that this is now bold it again. Let's make it a little bit bigger. There you go. Now this syntax is actually not used anymore or it's not recommended. Obviously still works. But there was a problem that is. Gemma was initially used for websites that ran on computers on PCs and Macs. And now we have things such as mobile phones and iPad. Although the bold it text and we actually have another one, which was the, uh, italicized Hi. Although we had this for most phone, some of them didn't have ability to bold attacks and didn't have the ability to italicize or some screen readers which people who are visually impaired use didn't really understand the meaning behind Intel, Seisint and Bolt. So now we use something called strong for Boldin and Refresh. And then for italicized, we use E. M for emphasis. There you go. Now the reason this change was made, it was a move towards more something called semantic html, and we'll get into that into a later lesson. But just know that there's some tags that have evolved over the years, and it's part of why issue Mall five exists. We'll get into that a little bit more, but I just wanted to give you a quick note on that. All right, I think that's enough for now. We're going to get into more tags in the next video for now, play around and I'll see in the next one 4. HTML Tags 2: and welcome back in the previous video, we talked about a few of the common tags that issue mall uses. We're gonna expand on that knowledge and learn a few more. So I'm gonna delete thes and I'm gonna teach you about something called a ordered list. So a Noel tag. And within this stag, we have list items banana and know their list. Tied em, do apple. And lastly, let's dio orange. So if I say this again, I refresh and we have banana apple orange So you can see here. This is how you make lists and this is an ordered list, so you can see we have 123 if we want to make it without the numbers, we use something called on a northward list. And again I say that and refresh and we have these Now there's also some fields that you can use. So again, this is all about nesting and having parent tags and Children tags. So let's say within Apple's, we wanted to have let me structure that a little bit cleaner. There you go. Within Apple's, we also want to emphasize that there is the Fuji Apple and there is honey crisp and Ah, Well, I can't think of 1/3 type of apple, so I'm just gonna delete that if I save this and refresh. Well, we have a nested list. There you have it. We have your list items I'll see in the next video where we're gonna learn about putting images into our website and self closing tax. See in the next one. 5. Self Closing HTML Tags: and welcome back in this video, we're gonna be learning about self closing tags. Up until this point, we've used a schimmel tax at have the opening and then the closing, which has this slash in it. Now, there are a few elements that don't have this syntax, but they have something called self closing tags. So let's say here between Fuji and Honey Crisp, I wanna have a bit of a line break. I can use something like BR here break. And if I save this and I refresh, we have a little line break, There's also HR, which is horizontal. So you get a horizontal line. If I refresh right through here, hr break. I just have one single element self closing. You might also see something like this, and that is something from the old version of HTML which uses xhm. Oh, um, you can read up more about it on your own, but just keep in mind that with HTML five, we're just gonna be using this. So obviously, on webpages there's gonna be images. So would it be nice if there was a picture of a Fuji apple here? Let's ah see how we can do it so with an image stack. And let's think about this critically if I didn't know what an image tag is, and I wanted to add an image to my HTML file. Well, if I Google image HTML tag again. One of the first website that pops up is thes E W three schools, and we'll show you exactly how an image tag works. If I click, try yourself. You can see it in action. You can play around with it, but you can see here that an image tag is a self closing tag. There's no closing image tags, just just one single tag. And if I do image and we have something gold source here, and this is something called an attribute, some a schimmel tax can have something called attributes, which is add special properties to the specific tack. So Anat Tribute always has a value attached to it, and the image source that's what SRC stands for tells us where the images coming from. So let's find an image of Fuji Apple. Let's go images. Well, I like this one must do view image and will give us the link of where this image is so I'm just gonna copy that. Pace it in here. Let's go back to our example here. We can see here that there's a few more attributes that we can add to an image tag, but for now we can just leave it here. Close the tag. You can see that sublime texts has the nice highlighting for us. And if I save this, go back to our website and I click. Refresh. I get this massive Fuji apple, and obviously that's that's too big. Ideally, we can make it a little bit smaller again. If we go back into the example, we'll see that it has width and height so we can actually just copy that and added to the attributes so that we specify the with and this is in pixels. So I say that I refresh. Look at that. We have the Fuji Apple looks very, very pretty. Let's add the picture for honey crisp as well. I'm gonna do this fast. You should be able to just copy this image, and again, we want to make it the same size as the previous one song, and I leave the width and height the same. And let's find a an image of a honey crisp apple. So, honey, Chris Apple images well, looks quite similar, doesn't it? And few image. Let's copy the source from here. I'm gonna save that. Go back to our website and let's refresh and look at that. We have our apples. So in this tax air, very, very useful. You might be asking yourself, What is the Ault Attribute meat, and this is something that you can actually read up on. So if you scroll down, if you look over here, you can see that Ault specifies an alternate texts for an image. So again, this is something that can be used by screen readers, and you can define what the images off. So in here, the Ault is smiley face, so that when a screen reader reads, it says in this part of the website, there is a smiley face. Just to recap. We learned about self closing tags, which don't require two of them. So in opening and a closing tag just a single one. So we used BR for line break. We used HR for a horizontal line, and then we have the image tag that also has have some attributes, so it has a source which tells us where to grab the image from. It has a wit that to Butte a height attribute with a value of 42 pixels and 42. All right, I'll see you in the next lesson, but why? 6. Anchor Tag: and welcome back in the previous videos, we talked about some of the most common HTML tags and how the A C mall document is read by the browser. However, we've missed one critical feature of HTML, and if we go back to our diagram here that we should remember from the first section the A . C M. O Phile gets sent to us. But the power of a Shia Mel is in its ability to link to other documents. So if I go back here to our website, it's a simple one page website, but a camera lee click on Fuji or apple or banana. It doesn't link to anything. There must be an HTML tag that we can use for that, right? Well, yes, there is, Um, it's called a anchor attack. So an anchor tag is very easy. Just a A. And this anchor tag has something cold and a treff, which is an attribute, and it's the hypertext reference. So in this H ref, you'll be able to link something. Let's close this a tag has an opening and a closing tag, and if I see this and refresh the page well, nothing happens because you need something in the anchor attack. So let's do new page. I save that, I refresh and we have new page here Now. If I click this, nothing happens. So you can see that it's has the link and the mouse changes images, so it's clickable, but nothing happens. Well, that's because we need to specify where we want the link to go. Now let's think about this. If we want a link to a new page, we don't really have another new new page. If you remember in our desktop over here and let me close some of these, we only have index dot html wouldn't be great if there was another file that we can link to . Well, let's create another file. So let's open up sublime tax. Actually, I'm gonna say file you file. I'm going to save this as index to actually let's just name a new page and we're gonna save it to death. Stop and see over here. How when I went to sublime text, it's now a plain text. I need to make sure that this is an HTML file, so I can just do dot html safe and sublime texts automatically adjusted to the HTML. So again I can type in that short commend HTML and tab that comes with sublime text. And let's do the title New page and the body. We can just do a header that says, This is the new page. If I save this great, we have a new page. And if I go to my desktop here, you see that I have new page and index dot html. So how do we link these two together? Well, it's very simple. We open up sublime again and within index dot html. Th rough can now say we're linking to new page that a she male. Let's save that. Let's give it a try Fresh a page, quick. And this is a new page. Awesome. But to go back, we have to press the back symbol. So let's link back to the original file again. We can do this by let's do a P tag, which is four paragraph I'm gonna say, Go back, close that tag. But hold on a minute. I need an anchor tag, right. If I just saved this and refresh the page, I say go back. But what if you really, really want this to be a paragraph or let's say you want this to be an H two, but you also want it to be an anchor attack. Well, that's very simple. You just wrap it in an anchor attack. And just so it's nice and clear, we're gonna have the nice spacing here and again. An anchor tag must have an h ref, which tells us where to go and we want to go to Index sought a shame. Also index dot html safe and refresh. Let's go back. Let's go to the next one and back. So this is the power that comes with a she male disability to link to other pages. And, yeah, we can have tax. We can have lists. We can have images. But the true power is in this linking ability. And the next episode we're gonna expand on this. I'll see you on that one. Oh, my 7. Q&A: index.html: and welcome to the student Q and A section as students take the scores. Usually I get a bunch of questions. Some of them are really, really good. Some of them I get often, and we're gonna use these Q and A sections for me to make a reply video to answer some of those really, really good questions, and the 1st 1 we're gonna tackle for this video is index dot html. If we go back to our example that we had, you've noticed that I've always used index dot html as the first page, and then we created a new page dot html. Now you might be asking yourself why index dot html? Why not home dot html or apples? Got a she male and you could actually do that. But I can explain this really well by looking at this diagram. Most of the time, there are more than a few HTML files. You saw that with our example. We had our index dot html and also new page dot html. But when we make that request to, let's say, google dot com, how does the server know which HTML to return first for the home page and you could go into the server and configure it and tell it You know what I want about dot html to be the first page. But by default, most servers just say I'll return index today, Shimon, if I see index dot html and the servers, I'll just returned that. So this is just a common practice that you'll see in a lot of the projects that a lot of the websites that you'll work with is that index dot html is Usually you can think of it as the home page, the first HTML file that the server returns. And if anybody in the index dot html clicks on a link, then it will return whichever link they return. So that would be, Let's say they click on about anchor attack, then they'll get about dot html. So that's it. That is your answer to your question. I'll see in the next one 8. Q&A Relative vs Absolute Path: and we got another Q and A video for you. And this one is going to be talking about something that you may have seen yourself well following along these videos. And that is the fact that this file over here is different than let's say, if you go to a website and you see http, S what does that mean? If you go into our example? You also saw here that we have an anchor tag that references new page dot html that has nothing like file or http in front of it. And then you also saw that the images here are referencing some sort of a website that links to a picture. So what's the difference here? The difference here is that the first is using the file protocol, and that means that this Web page I can't really access it outside of my computer. This is using something called a relative path. If I go into my index dot html, I am saying to link to new page dot html relative to where index dot html is so if we go to our desktop, you see that index dot html lives in the same directory, which is the desktop as new page, so I can reference it through here. If I created a new folder, let's say test. I would have to reference it this way. So let's let's check your If I save this and going to the Web page, refresh and click New page. I'll get Your foul was not found. But now if I go into my desktop and create test and I put the new page in here and let's bring back everything we fresh and click on you page. This is now working, and you can see over here that I'm accessing it through desktop test new page dot a shima. So that's colder relative path to relative to where index dot html pages. I am saying index dot html. I watched to access from test new page HTML. If you look at the images, you'll see that we have something different. We're accessing the image through http, which will get into into later videos when we talk about servers. But this is how we access files over the Internet. If I wanted this anchor tag this new page to actually linked to something, maybe another website, maybe to this hilarious gift. Well, I can copy this link open up my sublime taxed. And now I can just copy this with the https protocol. And now this is an absolute link. No matter where I referenced this, if I put it into new page dot html or index dot html, no matter what, this link will get me to this gift. So let's test that out. I say this, I refresh, and I click on new page. And look at that. We have the gift. All right, Hopefully that answers your question. We'll get into http and https later on in the course, but for now, keep that in mind that there is absolute path, and then there is relative gonna fix that. So we have it back for the next video I'll see on the next one. But by