- Introduction to My First Web Page 4:32
- Changing Your HTML 3 objectives
- Changing Your CSS 2 objectives
- Text Editors and External Style Sheets 3:46
- Text Editors and External Style Sheets 5 questions
- What's New in Your HTML 2:52
- New HTML Features 3 questions
- Editing an Image Tag 2 objectives
- Comments, Selectors, and Syntax 2:36
- Comments, Selectors, and Syntax 3 questions
- Color Keywords, Hex Colors, and Font Families 3:13
- Color Keywords, Hex Colors, and Font Families 5 questions
- Wrap Up 0:11
- CSS Review 5 questions
Preview
Video Player
00:00
00:00
What's New in Your HTML
2:52Learn about a few new features such as the language attribute in our html tag, the link to our style sheet, and an image tag.
In the HTML, very few things have changed
from the Publish a Story course.
0:00
However, I've added some special features,
such as the language attribute in our
0:05
HTML tag, the link to our style sheet, and
an image tag.
0:10
Let's break it down.
0:14
In our HTML document, in our opening HTML
tag,
0:17
I've added some more information about our
page.
0:21
I've added the language it's written in,
and in our case, it's written in English.
0:24
While it's not necessary,
0:29
it does help a search engine know what
language the content of your page is.
0:30
This language tag is called an attribute,
0:35
because it adds information to an opening
tag.
0:38
What is an attribute you ask?
0:42
An attribute adds information to a tag.
0:44
For example, in our HTML tag, by adding
the language attribute,
0:47
it is also defining the language our page
is written in.
0:51
The value, put between the quotations
marks,
0:55
gives information about that attribute.
0:58
For our language attribute, the value is
en, for English.
1:00
This tells a browser, or a search engine,
that our website is written in English.
1:05
Inside of our head tag, we have a few new
things.
1:11
Like a link to a Google font, and a link
to our style sheet.
1:14
Here you can see that the link to the
Google font is an external webpage,
1:18
and the style.css is a link right to a
file in our own file tree.
1:22
In the link to our style sheet, you can
see we only need an href and
1:27
a rel attribute.
1:33
The href attribute specifies the path to
the resource.
1:34
Here it's our style.css file, and the rel
attribute is used to define
1:38
the relationship of the current page, to
the thing that we're linking it to.
1:44
Here, the value of our rel attribute,
1:48
tells us the document we're linking to is
a style sheet.
1:52
It's the same up here for our Google
fonts.
1:56
The last new feature I've added to our
HTML page is the image element.
2:00
The image element is used to add an image
within a webpage.
2:05
The src attribute specifies the path to
the image file, and
2:09
in our case, it's just joy.jpg.
2:14
The alt attribute works kind of like a
placeholder.
2:17
The value you put in the alt attribute
will be
2:21
the text displayed if the image doesn't
load or loads incorrectly.
2:24
It'll also be read to anyone using a
screen reader.
2:28
So, it's important information to provide.
2:32
That wraps it up for HTML document.
2:35
Before moving on, let's finish our HTML
lesson with a quiz and
2:38
code challenge on attributes, values, and
the new HTML elements we used.
2:42
In the next video, we'll move into our
style sheet, and
2:47
start styling our web page.
2:50