1
00:00:00,830 --> 00:00:05,890
In the HTML, very few things have changed
from the Publish a Story course.

2
00:00:05,890 --> 00:00:10,880
However, I've added some special features,
such as the language attribute in our

3
00:00:10,880 --> 00:00:14,560
HTML tag, the link to our style sheet, and
an image tag.

4
00:00:14,560 --> 00:00:15,630
Let's break it down.

5
00:00:17,320 --> 00:00:21,540
In our HTML document, in our opening HTML
tag,

6
00:00:21,540 --> 00:00:24,460
I've added some more information about our
page.

7
00:00:24,460 --> 00:00:29,190
I've added the language it's written in,
and in our case, it's written in English.

8
00:00:29,190 --> 00:00:30,850
While it's not necessary,

9
00:00:30,850 --> 00:00:35,330
it does help a search engine know what
language the content of your page is.

10
00:00:35,330 --> 00:00:38,380
This language tag is called an attribute,

11
00:00:38,380 --> 00:00:42,080
because it adds information to an opening
tag.

12
00:00:42,080 --> 00:00:44,290
What is an attribute you ask?

13
00:00:44,290 --> 00:00:47,170
An attribute adds information to a tag.

14
00:00:47,170 --> 00:00:51,610
For example, in our HTML tag, by adding
the language attribute,

15
00:00:51,610 --> 00:00:55,060
it is also defining the language our page
is written in.

16
00:00:55,060 --> 00:00:58,040
The value, put between the quotations
marks,

17
00:00:58,040 --> 00:01:00,840
gives information about that attribute.

18
00:01:00,840 --> 00:01:05,240
For our language attribute, the value is
en, for English.

19
00:01:05,240 --> 00:01:10,000
This tells a browser, or a search engine,
that our website is written in English.

20
00:01:11,020 --> 00:01:14,540
Inside of our head tag, we have a few new
things.

21
00:01:14,540 --> 00:01:18,310
Like a link to a Google font, and a link
to our style sheet.

22
00:01:18,310 --> 00:01:22,548
Here you can see that the link to the
Google font is an external webpage,

23
00:01:22,548 --> 00:01:27,850
and the style.css is a link right to a
file in our own file tree.

24
00:01:27,850 --> 00:01:33,040
In the link to our style sheet, you can
see we only need an href and

25
00:01:33,040 --> 00:01:34,570
a rel attribute.

26
00:01:34,570 --> 00:01:38,870
The href attribute specifies the path to
the resource.

27
00:01:38,870 --> 00:01:44,340
Here it's our style.css file, and the rel
attribute is used to define

28
00:01:44,340 --> 00:01:48,560
the relationship of the current page, to
the thing that we're linking it to.

29
00:01:48,560 --> 00:01:52,440
Here, the value of our rel attribute,

30
00:01:52,440 --> 00:01:56,570
tells us the document we're linking to is
a style sheet.

31
00:01:56,570 --> 00:01:58,770
It's the same up here for our Google
fonts.

32
00:02:00,190 --> 00:02:05,120
The last new feature I've added to our
HTML page is the image element.

33
00:02:05,120 --> 00:02:09,370
The image element is used to add an image
within a webpage.

34
00:02:09,370 --> 00:02:14,385
The src attribute specifies the path to
the image file, and

35
00:02:14,385 --> 00:02:17,403
in our case, it's just joy.jpg.

36
00:02:17,403 --> 00:02:21,510
The alt attribute works kind of like a
placeholder.

37
00:02:21,510 --> 00:02:24,400
The value you put in the alt attribute
will be

38
00:02:24,400 --> 00:02:28,890
the text displayed if the image doesn't
load or loads incorrectly.

39
00:02:28,890 --> 00:02:32,240
It'll also be read to anyone using a
screen reader.

40
00:02:32,240 --> 00:02:34,260
So, it's important information to provide.

41
00:02:35,620 --> 00:02:38,040
That wraps it up for HTML document.

42
00:02:38,040 --> 00:02:42,340
Before moving on, let's finish our HTML
lesson with a quiz and

43
00:02:42,340 --> 00:02:47,900
code challenge on attributes, values, and
the new HTML elements we used.

44
00:02:47,900 --> 00:02:50,660
In the next video, we'll move into our
style sheet, and

45
00:02:50,660 --> 00:02:51,690
start styling our web page.