1
00:00:00,000 --> 00:00:06,986

2
00:00:06,986 --> 00:00:10,450
>> DAVEN FARNHAM: Today, I'm going to
talk a little bit about HTML,

3
00:00:10,450 --> 00:00:12,330
HyperText Markup Language.

4
00:00:12,330 --> 00:00:14,450
You see HTML everywhere these days.

5
00:00:14,450 --> 00:00:17,190
In fact, if you're watching this
video in a browser, you're

6
00:00:17,190 --> 00:00:19,120
seeing HTML right now.

7
00:00:19,120 --> 00:00:22,760
HTML is not a programming language,
rather, it's a markup language used by

8
00:00:22,760 --> 00:00:25,460
web browsers to render pages
on the internet.

9
00:00:25,460 --> 00:00:30,410
>> So you might ask, how exactly is writing
a web page in HTML different

10
00:00:30,410 --> 00:00:33,574
from writing a program in a programming
language like C?

11
00:00:33,574 --> 00:00:38,010
Well, C is a language with very strict
syntactical rules that needs to be

12
00:00:38,010 --> 00:00:39,880
compiled before it can run.

13
00:00:39,880 --> 00:00:43,070
If you've ever forgotten to include a
semicolon at the end of a statement in

14
00:00:43,070 --> 00:00:46,660
your C code, you know what I'm talking
about in regards to strict syntax.

15
00:00:46,660 --> 00:00:50,360
>> Web browsers though, are a bit more
forgiving when it comes to HTML.

16
00:00:50,360 --> 00:00:53,860
Even if your HTML isn't syntactically
correct, your page may still be

17
00:00:53,860 --> 00:00:57,150
displayed by a browser, but it might
not look as you intended.

18
00:00:57,150 --> 00:00:59,640
So it's always best to
follow the rules.

19
00:00:59,640 --> 00:01:01,990
The best way to get an intuition
about how things work is to

20
00:01:01,990 --> 00:01:03,300
go through an example.

21
00:01:03,300 --> 00:01:07,360
>> So what we have here is a basic
blueprint for a web page.

22
00:01:07,360 --> 00:01:10,690
You probably noticed a lot of things
in between angled brackets.

23
00:01:10,690 --> 00:01:12,900
Well, those are just tags.

24
00:01:12,900 --> 00:01:15,810
Tags basically inform web browsers
that, hey, something

25
00:01:15,810 --> 00:01:17,150
is coming your way.

26
00:01:17,150 --> 00:01:20,770
Remember though, whenever you open a
tag, you need to close it once you are

27
00:01:20,770 --> 00:01:21,750
done using it.

28
00:01:21,750 --> 00:01:24,690
>> So for example, I open a section
of code with open

29
00:01:24,690 --> 00:01:26,960
bracket body, close bracket.

30
00:01:26,960 --> 00:01:31,280
I then add some text, in this case, my
first web page then when I went to

31
00:01:31,280 --> 00:01:35,540
close this section, I use almost an
identical tag except this time with a

32
00:01:35,540 --> 00:01:37,660
forward slash before body.

33
00:01:37,660 --> 00:01:41,140
In general, this is the format you're
going to use whenever you are opening

34
00:01:41,140 --> 00:01:42,680
and closing tags.

35
00:01:42,680 --> 00:01:47,900
Together, an open tag and an end tag
compose what's called an element.

36
00:01:47,900 --> 00:01:51,870
>> If you look at the first line, you'll
see an exclamation point followed by

37
00:01:51,870 --> 00:01:53,350
DOCTYPE html.

38
00:01:53,350 --> 00:01:56,280
This is really just telling your browser
that the file is a web page

39
00:01:56,280 --> 00:01:58,280
written in HTML.

40
00:01:58,280 --> 00:02:01,970
The HTML tag essentially says,
here comes some HTML.

41
00:02:01,970 --> 00:02:04,950
Then we have a head tag with
a title tag inside it.

42
00:02:04,950 --> 00:02:09,430
The head tag you can think of as
comprising HTML code that comes for

43
00:02:09,430 --> 00:02:12,670
the bulk of your web page's
actual content.

44
00:02:12,670 --> 00:02:16,700
>> In general, you put the title of your
web page here, though there are some

45
00:02:16,700 --> 00:02:19,350
other tags that can appear
here as well.

46
00:02:19,350 --> 00:02:25,020
Next comes your web page's body, the
actual meat and bones of your website.

47
00:02:25,020 --> 00:02:28,910
In our example, we've just put a simple
sentence, My First Webpage,

48
00:02:28,910 --> 00:02:34,100
which, if we run our site, will look
a little something like this.

49
00:02:34,100 --> 00:02:36,810
Our web page isn't too queer,
but don't worry.

50
00:02:36,810 --> 00:02:39,210
We'll spruce it up soon.

51
00:02:39,210 --> 00:02:44,070
>> So the above HTML, we'll give you a very
basic template for a web page,

52
00:02:44,070 --> 00:02:46,310
nothing fancy, just the bare bones.

53
00:02:46,310 --> 00:02:49,160
But if I'm creating a web page,
what if I want to add a

54
00:02:49,160 --> 00:02:50,760
picture of, say, myself?

55
00:02:50,760 --> 00:02:52,760
Well, I can do that.

56
00:02:52,760 --> 00:02:55,460
There are a couple of ways to
add images to your site.

57
00:02:55,460 --> 00:02:59,780
If the image is in the same folder as
your HTML file, you can link to the

58
00:02:59,780 --> 00:03:01,950
image via path like this.

59
00:03:01,950 --> 00:03:05,910
>> You open up with an image tag followed
by in Alt attribute in the

60
00:03:05,910 --> 00:03:07,240
source of the image.

61
00:03:07,240 --> 00:03:12,030
The Alt attribute's value is just some
alternative text in case a user can't

62
00:03:12,030 --> 00:03:13,580
see the image.

63
00:03:13,580 --> 00:03:19,680
Alternatively, you can also link to
images via a full URL, like this.

64
00:03:19,680 --> 00:03:24,180
Now, that website doesn't really exist,
but if there were a picture of

65
00:03:24,180 --> 00:03:27,760
me at that address, I could use
the source URL to include

66
00:03:27,760 --> 00:03:29,930
its image on my website.

67
00:03:29,930 --> 00:03:35,590
Either way, you end up with a much
prettier website, something like this.

68
00:03:35,590 --> 00:03:39,730
>> Well, that's pretty cool, but I kind
of want some text here as well.

69
00:03:39,730 --> 00:03:43,020
So let's just add something
super simple above the

70
00:03:43,020 --> 00:03:45,210
image, like the header.

71
00:03:45,210 --> 00:03:50,830
All I've done so far is use the header
tag, H1, and a line break tag, br.

72
00:03:50,830 --> 00:03:54,900
The header tag makes the font a little
bit bigger and more prominent.

73
00:03:54,900 --> 00:03:58,930
The line break tag, on the other
hand, is kind of cool.

74
00:03:58,930 --> 00:04:03,720
Unlike most other tags, you don't have
an opening and closing break tag, just

75
00:04:03,720 --> 00:04:05,120
the one shown above.

76
00:04:05,120 --> 00:04:10,420
This is because break has no content
and is therefore, an empty element.

77
00:04:10,420 --> 00:04:14,940
>> Empty elements like this, you can open
and close simultaneously simply by

78
00:04:14,940 --> 00:04:20,420
including a forward slash at the
end of the initial declaration.

79
00:04:20,420 --> 00:04:24,390
So now my website looks a little
something like this.

80
00:04:24,390 --> 00:04:27,410
Better, but it kind of feels
like a dead end.

81
00:04:27,410 --> 00:04:30,850
There's nowhere else to go aside
from this main page.

82
00:04:30,850 --> 00:04:33,075
Well, let's fix that by
including a link.

83
00:04:33,075 --> 00:04:36,860
>> What I'm going to do here is use an
attribute denoted by A and make the

84
00:04:36,860 --> 00:04:40,780
image a link to, let's say, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
That way, whenever anybody clicks on me,
their browser will be directed to

86
00:04:44,460 --> 00:04:47,810
another, probably more
useful, web page.

87
00:04:47,810 --> 00:04:51,040
I've had to minimize the size of the
text a bit because our web page is

88
00:04:51,040 --> 00:04:52,470
getting more advanced.

89
00:04:52,470 --> 00:04:54,590
But hopefully, it's still clear.

90
00:04:54,590 --> 00:04:59,460
My website looks exactly the same only
now, whenever I click on the picture,

91
00:04:59,460 --> 00:05:04,410
my browser will open up another
tab for the CS50.tv web page.

92
00:05:04,410 --> 00:05:08,970
>> Lastly, let's say I'm going to style
this website later using CSS.

93
00:05:08,970 --> 00:05:11,730
CSS is what is known as a
cascading style sheet.

94
00:05:11,730 --> 00:05:15,230
And it basically provides an efficient
way to edit and style

95
00:05:15,230 --> 00:05:16,910
similar blocks of code.

96
00:05:16,910 --> 00:05:21,290
I want to start organizing my HTML to
make it easier to style later on.

97
00:05:21,290 --> 00:05:26,900
Here, I set up two different kinds of
identifiers to help organize my code.

98
00:05:26,900 --> 00:05:31,170
I've used the ID attribute inside a
division, or div tag, and I've used a

99
00:05:31,170 --> 00:05:34,120
Class attribute inside
another div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID and Class attributes
work similarly.

101
00:05:37,190 --> 00:05:41,210
The only difference is you can only have
one element, the specific ID, but

102
00:05:41,210 --> 00:05:43,600
any number of elements
can share a class.

103
00:05:43,600 --> 00:05:47,690
So for example, I can use the class
image multiple times, but I can't

104
00:05:47,690 --> 00:05:50,533
create another division
with the ID top.

105
00:05:50,533 --> 00:05:54,750
Although I haven't gone into CSS,
another language commonly used

106
00:05:54,750 --> 00:05:59,700
alongside HTML, once I start styling
my code with CSS, I can use these

107
00:05:59,700 --> 00:06:03,730
organizational attributes to influence
my web page's aesthetics.

108
00:06:03,730 --> 00:06:07,600
>> Everything within the division top
will have similar stylings or any

109
00:06:07,600 --> 00:06:12,010
other group of HTML I group into the
class image will share a similar look.

110
00:06:12,010 --> 00:06:15,700
This is much easier than trying to edit
and style images or blocks of

111
00:06:15,700 --> 00:06:17,690
text individually.

112
00:06:17,690 --> 00:06:21,480
>> So we went over the basics of how
to make a web page with HTML.

113
00:06:21,480 --> 00:06:25,280
HTML has a bunch of other features too
that when paired with other languages

114
00:06:25,280 --> 00:06:29,220
like CSS and JavaScript, can really
make pages stand out.

115
00:06:29,220 --> 00:06:32,960
The best way to get comfortable with
HTML is just to mess around with it,

116
00:06:32,960 --> 00:06:35,120
see what works, and what doesn't.

117
00:06:35,120 --> 00:06:36,570
>> My name is Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
This is CS50.

119
00:06:37,820 --> 00:06:40,640

120
00:06:40,640 --> 00:06:45,690
>> So for example, I can use
the class image--

121
00:06:45,690 --> 00:06:48,028
No, there are so many attributes.

122
00:06:48,028 --> 00:06:52,500

123
00:06:52,500 --> 00:06:53,950
My name is Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
This is CS 650.

125
00:06:58,560 --> 00:06:59,810
I want to say CSS.

126
00:06:59,810 --> 00:07:02,325

127
00:07:02,325 --> 00:07:03,575
This is CSS.

128
00:07:03,575 --> 00:07:05,408