1
00:00:05,390 --> 00:00:09,620
Welcome back and this lecture we're going to code out the solutions for your first assessment in the

2
00:00:09,860 --> 00:00:11,390
team I'll crash course.

3
00:00:11,390 --> 00:00:13,750
Let's head over to the text editor to get started.

4
00:00:13,760 --> 00:00:19,190
All right here you have a basic h tim l file that is totally blank and in my browser over here on the

5
00:00:19,190 --> 00:00:25,040
right hand side I have the actual solution file linked to it so I can see what I need to build out and

6
00:00:25,040 --> 00:00:29,840
then and the other time I have a blank file which is just as basic T.M..

7
00:00:29,900 --> 00:00:32,170
So let's make sure that these are all linked together.

8
00:00:32,180 --> 00:00:38,700
I'm going to type out HVM l enter and we'll go ahead and in the body start with that heading.

9
00:00:39,040 --> 00:00:40,110
So say Heading 1.

10
00:00:40,190 --> 00:00:43,150
And if we take a look at the solution file it says Welcome to my Web site.

11
00:00:43,310 --> 00:00:45,380
So let's add that into the heading File.

12
00:00:45,380 --> 00:00:50,810
Welcome to my test site Save it.

13
00:00:51,190 --> 00:00:55,530
Come over here refreshed and it looks like they are linked and I have the heading one.

14
00:00:55,690 --> 00:00:59,550
So now I can just say something like welcome to my Web site and have the match up.

15
00:01:01,420 --> 00:01:04,000
OK so that was the first to those here.

16
00:01:04,000 --> 00:01:06,080
We have a heading and will have a heading here.

17
00:01:06,250 --> 00:01:08,650
Keep in mind I have different levels of zoom here.

18
00:01:08,770 --> 00:01:13,400
So if the font doesn't actually match exactly size wise that's not a big issue.

19
00:01:13,750 --> 00:01:14,590
OK.

20
00:01:14,590 --> 00:01:19,180
The next thing you should notice is the exercise title over here and the tab is actually a different

21
00:01:19,180 --> 00:01:22,540
title than just the basic HTL title.

22
00:01:22,540 --> 00:01:29,470
So what we're going to do is say exercise title inside of my title so I'll save that and then I should

23
00:01:29,470 --> 00:01:32,970
see when I refresh that tab change up here.

24
00:01:34,360 --> 00:01:38,680
Up next it looks like I have three paragraphs and one of them noticed is an anchor tag.

25
00:01:38,860 --> 00:01:44,800
So let's add those in we'll start with the first paragraph tag and this one just says I'm excited to

26
00:01:44,800 --> 00:01:45,910
eventually learn flask.

27
00:01:45,910 --> 00:01:47,720
So let's just say the same thing.

28
00:01:47,850 --> 00:01:57,610
I am excited excited to learn flask and then we have an anchor tied to the way that works is we say

29
00:01:57,680 --> 00:02:00,260
for anchor and then we need to give it a reference.

30
00:02:00,260 --> 00:02:05,160
So this is linked to the official flask Web site and if you click on the link instead of the solution

31
00:02:05,210 --> 00:02:10,940
file or if you just google search flask documentation or Veloce Web site you'll notice that it has kind

32
00:02:10,940 --> 00:02:18,770
of a funny u r l s flask p o c o o or.

33
00:02:19,040 --> 00:02:22,330
And then we're going to do here is actually typed in the text we want to show it.

34
00:02:22,370 --> 00:02:35,370
So we'll say here is a link to flask website save that and then let's refresh my page.

35
00:02:35,560 --> 00:02:37,240
Now it says I'm excited to learn a flask.

36
00:02:37,240 --> 00:02:42,110
Here's a link to the flask Web site let's open that link in a new tab and make sure it works.

37
00:02:42,130 --> 00:02:42,750
And there we go.

38
00:02:42,750 --> 00:02:44,710
It looks like it's working just fine.

39
00:02:45,480 --> 00:02:47,510
Let's add in that last paragraph tag.

40
00:02:48,910 --> 00:02:56,500
That says here is a picture of a puppy.

41
00:02:56,850 --> 00:02:59,640
And then we actually provided the picture for you.

42
00:02:59,670 --> 00:03:06,360
All you need to do was say an image tag and then say the source was that puppy pic so we'll see puppy

43
00:03:06,390 --> 00:03:07,790
underscore pick.

44
00:03:07,870 --> 00:03:14,440
Jay Pead And remember this puppy pic thought she asked to be in the same location as your HTML file.

45
00:03:14,640 --> 00:03:19,440
Otherwise you'll need to pass in the entire file path for this image file.

46
00:03:19,760 --> 00:03:23,630
And let's come back to our exercise title to refresh this page.

47
00:03:23,690 --> 00:03:24,250
Now I see.

48
00:03:24,250 --> 00:03:26,680
Here's a picture of puppy and this nice puppy pic.

49
00:03:29,260 --> 00:03:33,000
The next thing I wanted to do is if we scroll down we have another tag.

50
00:03:33,130 --> 00:03:34,860
Here are three reasons why Flash is cool.

51
00:03:34,910 --> 00:03:40,420
And then we have an ordered list so I'll add a little paragraph tag for the actual header there that's

52
00:03:40,480 --> 00:03:48,790
saying here are three reasons so here are three reasons for flask and it's not a big deal if your text

53
00:03:48,790 --> 00:03:50,010
in a match exactly.

54
00:03:50,020 --> 00:03:56,080
We're really testing your understanding of each time at elements so this is an ordered list because

55
00:03:56,080 --> 00:03:57,620
it's numbered 1 to 3.

56
00:03:57,820 --> 00:03:59,150
So I will say oh well.

57
00:03:59,410 --> 00:04:04,640
And then provide my list items so I'll say very simple.

58
00:04:04,740 --> 00:04:08,200
The next will be lots of add ons.

59
00:04:10,510 --> 00:04:15,720
And the last one create a site in a few minutes.

60
00:04:17,860 --> 00:04:21,180
Save that lets come back over here to our exercise title.

61
00:04:21,220 --> 00:04:23,880
If I refresh says Here are three words for flask.

62
00:04:23,920 --> 00:04:27,160
Very simple lots of add ons and create a site in a few minutes.

63
00:04:27,160 --> 00:04:30,720
So all you have to do is use the tag and then the list item tags.

64
00:04:31,030 --> 00:04:33,700
OK that was it for the basics of the exercise.

65
00:04:33,700 --> 00:04:38,830
The last thing was this optional extra credit which was can you figure out how to make a picture into

66
00:04:38,920 --> 00:04:40,020
a link.

67
00:04:40,030 --> 00:04:44,270
So the way you do that is you really just combine two tags to compile.

68
00:04:44,300 --> 00:04:49,720
If you combine your anger time with your image tag so that it is typically for the anchor tag.

69
00:04:49,750 --> 00:04:55,570
We have text in here which is what the splays as the linking device but what we could do is just put

70
00:04:55,570 --> 00:05:00,240
an image tag there instead and that will link to the site instead.

71
00:05:01,420 --> 00:05:08,050
So I'm going to show you an example of this will create an anchor tag and will keep it simple or is

72
00:05:08,080 --> 00:05:17,270
going to link back to that flask site will say HTP colon forward slash forge slash flask Poku the org

73
00:05:17,750 --> 00:05:22,760
and it could really be any site and then instead of saying here is the link.

74
00:05:22,760 --> 00:05:27,950
For instance if I receive that and refresh then I say here is the link.

75
00:05:27,950 --> 00:05:32,060
So instead of that I'm going to add in an image tag and in fact I'm just going to copy and paste the

76
00:05:32,060 --> 00:05:34,310
image here for the puppy that we had earlier.

77
00:05:34,340 --> 00:05:38,560
So is copy and paste and put that inside of the sinker.

78
00:05:38,840 --> 00:05:42,880
Save it and if I refresh now I see the image.

79
00:05:42,890 --> 00:05:46,070
But notice the difference in my mouse as they hover over the first image.

80
00:05:46,070 --> 00:05:48,760
This first image is just that jpg file.

81
00:05:48,830 --> 00:05:54,110
This image is actually going to link me when I click link in the tab that's going to link to that flask

82
00:05:54,150 --> 00:05:54,900
website.

83
00:05:55,220 --> 00:05:58,750
So again when I click this image it takes me to the flask website.

84
00:05:58,820 --> 00:06:03,860
When I click on this image nothing happens and you can see my cursor change from just a normal mouse

85
00:06:03,890 --> 00:06:10,370
to the actual hand for the link and that's how you can link an image to another Web site or another

86
00:06:10,370 --> 00:06:12,890
page on your Web site.

87
00:06:13,400 --> 00:06:21,380
OK so main ideas here is that we understand headings paragraph anchor tags and image tags as well as

88
00:06:21,380 --> 00:06:27,530
how to do either an ordered list an art or an unordered list and then we have the ability to also make

89
00:06:27,560 --> 00:06:30,130
images into their own linking devices.

90
00:06:30,140 --> 00:06:32,920
If you have any questions feel free to post the Kewaunee forums.