1 00:00:00,960 --> 00:00:01,810 How did it go? 2 00:00:01,810 --> 00:00:02,930 Were you successful? 3 00:00:02,930 --> 00:00:06,210 Does your page somehow look like the final result? 4 00:00:06,210 --> 00:00:07,660 Well, if it didn't work out 5 00:00:07,660 --> 00:00:10,180 no worries, if it did work out, great. 6 00:00:10,180 --> 00:00:12,550 No matter what happened, let's solve it together now. 7 00:00:12,550 --> 00:00:16,530 So with that, let's go back to the initial state here. 8 00:00:16,530 --> 00:00:18,590 And let's think about the first changes 9 00:00:18,590 --> 00:00:20,820 we might want to implement here. 10 00:00:20,820 --> 00:00:24,530 I want to get started with the HTML layout 11 00:00:24,530 --> 00:00:26,680 that I mentioned in the last lecture. 12 00:00:26,680 --> 00:00:28,090 Because in the body 13 00:00:28,090 --> 00:00:30,420 we could actually say that our image 14 00:00:30,420 --> 00:00:33,010 the H one element, and the paragraph 15 00:00:33,010 --> 00:00:35,580 are part of the main section. 16 00:00:35,580 --> 00:00:37,253 You remember this main element. 17 00:00:38,120 --> 00:00:40,330 And down here, explore the full week 18 00:00:40,330 --> 00:00:44,200 well, this would be a nice footer here for our page. 19 00:00:44,200 --> 00:00:45,160 Let's implement this 20 00:00:45,160 --> 00:00:48,370 by going back to our index HTML file 21 00:00:48,370 --> 00:00:51,200 and here I'll first add the main element 22 00:00:52,120 --> 00:00:57,120 and now take these elements and add these right here. 23 00:00:58,030 --> 00:00:59,450 And as a second step 24 00:00:59,450 --> 00:01:01,960 I'll create a footer element 25 00:01:01,960 --> 00:01:03,770 a container again, basically 26 00:01:04,849 --> 00:01:07,883 which then contains our paragraph. 27 00:01:09,050 --> 00:01:11,450 Let's save and quickly format this. 28 00:01:11,450 --> 00:01:13,740 And of course, nothing changed on our page 29 00:01:13,740 --> 00:01:15,433 but we have more structure. 30 00:01:16,470 --> 00:01:18,600 Besides these layout parts 31 00:01:18,600 --> 00:01:22,820 I also mentioned that you have to use a new element in here 32 00:01:22,820 --> 00:01:25,560 because Wednesday, August 4th. 33 00:01:25,560 --> 00:01:29,700 So our date and the day should be highlighted. 34 00:01:29,700 --> 00:01:31,060 And what we have in here is 35 00:01:31,060 --> 00:01:32,600 we have an H one element 36 00:01:32,600 --> 00:01:34,180 which contains text 37 00:01:34,180 --> 00:01:37,960 and it should now be able to select parts of this text 38 00:01:37,960 --> 00:01:40,593 and to apply a different style to it. 39 00:01:41,570 --> 00:01:44,490 Now, I mentioned this span element 40 00:01:44,490 --> 00:01:46,310 and that's exactly what we need in here. 41 00:01:46,310 --> 00:01:49,040 It's a non semantic inline element 42 00:01:49,040 --> 00:01:53,020 meaning it can be added to a block element here 43 00:01:53,020 --> 00:01:54,550 inline basically 44 00:01:54,550 --> 00:01:59,130 And with that, we are able to select specific parts 45 00:01:59,130 --> 00:02:02,090 of the content of this H one element. 46 00:02:02,090 --> 00:02:03,980 It's a non semantic element though 47 00:02:03,980 --> 00:02:07,670 so you can use it on any purpose basically. 48 00:02:07,670 --> 00:02:09,780 The purpose here would be to select the date 49 00:02:09,780 --> 00:02:13,133 so we can add the span in here. 50 00:02:14,560 --> 00:02:19,487 Now we take our date like this and add it back here. 51 00:02:21,640 --> 00:02:23,940 And with that, if you go back 52 00:02:23,940 --> 00:02:25,400 you'll see it, nothing changed. 53 00:02:25,400 --> 00:02:26,730 It's an inline element 54 00:02:26,730 --> 00:02:29,980 so the text isn't broken into two lines now 55 00:02:29,980 --> 00:02:32,910 but in this year, as part of this project 56 00:02:32,910 --> 00:02:34,980 we can then add a different color 57 00:02:34,980 --> 00:02:39,980 or a different font weight to this span element. 58 00:02:40,465 --> 00:02:44,000 Talking about non semantic elements 59 00:02:44,000 --> 00:02:47,560 besides the non semantic inline element, the span 60 00:02:47,560 --> 00:02:51,240 we also have a non semantic block element. 61 00:02:51,240 --> 00:02:54,000 This is a so-called dif. 62 00:02:54,000 --> 00:02:56,390 A dif is something you will see very often 63 00:02:56,390 --> 00:03:01,010 in real world projects because these layout elements 64 00:03:01,010 --> 00:03:02,890 our main and footer ends are on. 65 00:03:02,890 --> 00:03:05,687 Unfortunately are not guidelines 66 00:03:05,687 --> 00:03:08,070 every web developer follows 67 00:03:09,020 --> 00:03:13,210 because in the end, main and footer are just block elements 68 00:03:13,210 --> 00:03:15,930 which contain more content. 69 00:03:15,930 --> 00:03:18,380 And, except of adding main here 70 00:03:18,380 --> 00:03:20,730 you could just add a dif right here 71 00:03:20,730 --> 00:03:25,227 and right there and do the same for the footer like this. 72 00:03:26,580 --> 00:03:29,390 And then you could give this an ID, for example 73 00:03:29,390 --> 00:03:32,160 stating well, main section 74 00:03:33,330 --> 00:03:34,630 and then down here 75 00:03:34,630 --> 00:03:39,550 an ID stating, footer, for example. 76 00:03:39,550 --> 00:03:41,490 Doesn't change the look of the site. 77 00:03:41,490 --> 00:03:43,260 Also doesn't change the 78 00:03:43,260 --> 00:03:45,980 way we can interact with these elements. 79 00:03:45,980 --> 00:03:47,930 Here, we just work with the ID's now 80 00:03:47,930 --> 00:03:49,840 and not the main or the footer element. 81 00:03:49,840 --> 00:03:52,370 However, the important thing is that such dif's 82 00:03:52,370 --> 00:03:56,190 can be used if you don't have any semantic element 83 00:03:56,190 --> 00:04:01,050 for your container, but generally we recommend to use the 84 00:04:01,050 --> 00:04:03,520 semantic elements whenever possible. 85 00:04:03,520 --> 00:04:06,280 That's while also undo these changes here 86 00:04:07,150 --> 00:04:09,069 and go back to main and footer. 87 00:04:09,069 --> 00:04:11,730 Important here just was that you saw 88 00:04:11,730 --> 00:04:15,660 these non semantic inline and non semantic block elements. 89 00:04:15,660 --> 00:04:17,233 So span and dif. 90 00:04:18,300 --> 00:04:22,710 This is already the HTML part of this project. 91 00:04:22,710 --> 00:04:27,253 So in the next lecture, we'll continue with our CSS styles.