Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,664 --> 00:00:04,159 So far, we have placed headings, 2 2 00:00:04,159 --> 00:00:07,991 paragraphs, and images on our blog post webpage. 3 3 00:00:07,991 --> 00:00:12,063 Another very important thing in webpages are links, 4 4 00:00:12,063 --> 00:00:13,967 so let's go back to the little webpage 5 5 00:00:13,967 --> 00:00:16,134 that we were playing with. 6 6 00:00:17,871 --> 00:00:21,284 So, links are defined with the a tag, 7 7 00:00:21,284 --> 00:00:23,745 which stands for anchor. 8 8 00:00:23,745 --> 00:00:25,858 And we used the href attribute to tell 9 9 00:00:25,858 --> 00:00:29,086 the browser where the link should take us. 10 10 00:00:29,086 --> 00:00:33,149 For example, let's link to the Udemy website. 11 11 00:00:33,149 --> 00:00:36,482 Let's do it right here after this image. 12 12 00:00:39,571 --> 00:00:42,238 And as I said, we used an a tag, 13 13 00:00:43,704 --> 00:00:45,371 with href attribute. 14 14 00:00:47,768 --> 00:00:51,668 So, the link to the Udemy website is an external link, 15 15 00:00:51,668 --> 00:00:55,314 because that website doesn't make part of our project. 16 16 00:00:55,314 --> 00:00:57,218 So in that case we have to indicate 17 17 00:00:57,218 --> 00:01:00,864 the complete path to the website we want to link to, 18 18 00:01:00,864 --> 00:01:05,031 which means that it has to start with http://. 19 19 00:01:06,924 --> 00:01:09,341 For Udemy, that would be http 20 20 00:01:12,404 --> 00:01:15,571 //www.udemy.com. 21 21 00:01:19,532 --> 00:01:21,158 Alright, and now I close it, 22 22 00:01:21,158 --> 00:01:25,325 and here goes the text that will appear on the webpage. 23 23 00:01:26,499 --> 00:01:27,999 So, link to Udemy. 24 24 00:01:29,842 --> 00:01:32,745 So let's see if this works. 25 25 00:01:32,745 --> 00:01:34,162 Click right here, 26 26 00:01:35,647 --> 00:01:39,455 and yeah, it takes us to the Udemy website. 27 27 00:01:39,455 --> 00:01:40,288 Alright. 28 28 00:01:42,381 --> 00:01:44,378 Now, back in Brackets, 29 29 00:01:44,378 --> 00:01:46,961 we see this message right here, 30 30 00:01:48,488 --> 00:01:51,901 and this happened because we left the webpage 31 31 00:01:51,901 --> 00:01:53,364 we were working on. 32 32 00:01:53,364 --> 00:01:55,245 And so, the connection between Brackets 33 33 00:01:55,245 --> 00:01:57,328 and the browser was lost. 34 34 00:01:59,029 --> 00:02:00,779 So, let's close this, 35 35 00:02:01,746 --> 00:02:03,163 and hit it again. 36 36 00:02:07,993 --> 00:02:11,781 Okay, now the connection is back up. 37 37 00:02:11,781 --> 00:02:14,588 A solution for this would be 38 38 00:02:14,588 --> 00:02:17,420 to open the link in a new tab, right. 39 39 00:02:17,420 --> 00:02:20,137 Sometimes that's actually right thing to do. 40 40 00:02:20,137 --> 00:02:22,157 So I'll show you how to do that. 41 41 00:02:22,157 --> 00:02:23,295 It's quite easy, 42 42 00:02:23,295 --> 00:02:26,616 we just need to define the target attribute. 43 43 00:02:26,616 --> 00:02:30,075 So target, and then from these four options, 44 44 00:02:30,075 --> 00:02:32,408 we choose the blank options. 45 45 00:02:34,139 --> 00:02:36,368 And now let's test it again. 46 46 00:02:36,368 --> 00:02:38,618 I click here, okay, and so, 47 47 00:02:39,874 --> 00:02:42,624 the Udemy site opens in a new tab 48 48 00:02:43,473 --> 00:02:47,049 without leaving our original blog post. 49 49 00:02:47,049 --> 00:02:48,071 So if we close this, 50 50 00:02:48,071 --> 00:02:51,090 we are just back to our webpage. 51 51 00:02:51,090 --> 00:02:55,269 We can also link to any document inside our current project. 52 52 00:02:55,269 --> 00:02:57,939 For example, other webpages, 53 53 00:02:57,939 --> 00:02:59,774 which is very important, 54 54 00:02:59,774 --> 00:03:02,235 or even images, or other documents, 55 55 00:03:02,235 --> 00:03:05,254 and those will be internal links. 56 56 00:03:05,254 --> 00:03:07,950 So let's just add a link to the HTML image 57 57 00:03:07,950 --> 00:03:09,200 we used before. 58 58 00:03:11,535 --> 00:03:14,785 And I will do it right after this link. 59 59 00:03:15,668 --> 00:03:16,918 So again, the a 60 60 00:03:18,640 --> 00:03:19,473 href 61 61 00:03:21,334 --> 00:03:24,084 and I will choose this logo here. 62 62 00:03:25,305 --> 00:03:28,222 And again, we want it in a new tab. 63 63 00:03:33,176 --> 00:03:34,926 I will say HTML logo. 64 64 00:03:42,557 --> 00:03:44,724 Okay, and this also works. 65 65 00:03:46,087 --> 00:03:50,057 So you see, we cannot only link to other websites, 66 66 00:03:50,057 --> 00:03:53,640 but also to other documents such as images. 67 67 00:03:57,000 --> 00:03:58,788 These were links. 68 68 00:03:58,788 --> 00:04:01,040 Now you know how to make internal links 69 69 00:04:01,040 --> 00:04:04,128 and external links to other webpages. 70 70 00:04:04,128 --> 00:04:05,382 Congratulations, 71 71 00:04:05,382 --> 00:04:08,912 you made it to the end of the introductory HTML section. 72 72 00:04:08,912 --> 00:04:10,162 That's awesome! 73 73 00:04:11,094 --> 00:04:13,509 Remember, that this section was designed 74 74 00:04:13,509 --> 00:04:16,249 to make you familiar with HTML. 75 75 00:04:16,249 --> 00:04:19,918 So far, we covered the basic structure of a webpage, 76 76 00:04:19,918 --> 00:04:24,051 headings, paragraphs, images, and links. 77 77 00:04:24,051 --> 00:04:26,698 We'll start to really work with HTML 78 78 00:04:26,698 --> 00:04:31,133 when we're gonna start with our killer website project. 79 79 00:04:31,133 --> 00:04:32,782 But before we do that, 80 80 00:04:32,782 --> 00:04:34,941 the next section I'll introduce CSS 81 81 00:04:34,941 --> 00:04:37,774 to style the HTML we just created. 82 82 00:04:38,912 --> 00:04:41,025 Now to end this HTML section, 83 83 00:04:41,025 --> 00:04:43,277 make sure you take the following quiz 84 84 00:04:43,277 --> 00:04:46,296 to remember some things you learned so far. 85 85 00:04:46,296 --> 00:04:47,463 So, good luck. 6805