Preview
Video Player
00:00
00:00
HTML Structure
7:25Get started with HTML by setting up an HTML file, understanding the .html file extension, and adding crucial declarations. Learn about essential HTML tags and see how text in the HTML file translates into a single line on the web page. Explore HTML documentation for further insights.
[MUSIC]
0:00
While webpages may appear
different from one another,
0:05
they all follow a common structure.
0:08
Every webpage you create should specify
the version of HTML you're using,
0:10
provide essential information about
the page such as the title, and define
0:16
where to display the visible content,
including images, text, and links.
0:21
If you haven't done so
0:26
already, click the Launch Workspace
button located next to the video.
0:28
This will open the text editor we'll use
to build our simple website using HTML.
0:32
Before we begin coding,
let's create an HTML file.
0:38
In the workspace menu,
navigate to File, New File.
0:42
Name the file index.html.
0:47
A file ending in .html signals to
the browser that it's an HTML file.
0:51
And index is the most common file
name used for the default or
0:57
homepage of a website.
1:02
Now we're ready to start
our coding journey.
1:04
Every HTML page starts with a document
type or doc type decoration,
1:06
which informs the browser about
the version of HTML being used,
1:12
ensuring correct rendering.
1:17
At the very top of your file,
simply type a left angle bracket
1:19
followed by exclamation point,
DOCTYPE html, and a right angle bracket.
1:25
This tells the browser that
we're using HTML version 5.
1:31
By explicitly specifying
the document type and version,
1:36
you are future-proofing your webpage.
1:40
Even as new HTML versions are released,
1:42
browsers will continue to recognize and
render old documents correctly,
1:45
as long as the appropriate doc
type decoration is included.
1:51
In the past, there were a lot of complex
document types, but HTML5 has simplified
1:55
it significantly, the declaration
is now much more straightforward.
2:01
Below the DOCTYPE, we'll add a set
of opening and closing HTML tags.
2:06
We'll type the opening tag
with a left angle bracket,
2:12
then html and a right angle bracket.
2:17
Most text editors will automatically
generate the corresponding closing tag.
2:20
In HTML every closing tag should include
a forward slash in front of the tag name.
2:25
Therefore, the closing HTML
tag should be left angle
2:31
bracket slash html right angle bracket.
2:35
These tags define the HTML element,
2:39
which typically serves as a root or
top level element of a web page.
2:42
They signal to the browser that everything
enclosed between the opening and
2:47
closing HTML tags is HTML code.
2:53
Hence, all our HTML code will be
written between these HTML tags.
2:55
HTML tags commonly include two
primary components, head and body.
3:01
I'll explain the roles of
both tags shortly, but
3:07
first let's add the head and body tags.
3:11
Inside the HTML element,
I'll indent two spaces by pressing
3:14
the space bar twice,
then add the two elements, head and body.
3:19
When one element is placed inside another,
this is known as nesting.
3:25
The head and body elements here
are nested within the HTML element.
3:31
To visually represent the fact that
one set of tags is inside another,
3:37
it's a good practice to indent
the nested tags as we did here.
3:42
The head element contains
essential information about
3:47
the page such as the page title,
which appears on the browser tab.
3:50
Most of the content you include in the
head isn't visible on the browser screen.
3:55
For instance,
you can add links to JavaScript and
4:00
CSS files to add the behavior and
presentation layers respectively.
4:03
However, for
now let's focus on adding a title.
4:08
Within the head tags nest a title
element by typing an opening and
4:12
closing title tags.
4:18
Between these tags we can add text
that defines the title of the webpage.
4:19
We'll be creating this recipe page, so
4:25
the title should reflect the recipe name,
such as Spaghetti Carbonara.
4:28
Between the title tags,
enter the text Spaghetti Carbonara.
4:33
Save the file and launch the preview
by clicking on the eye icon
4:38
located in the top right
corner of the workspace.
4:42
This opens the index.html file in
another browser window or tab.
4:46
You should see the text you wrote
between the title tags displayed in
4:53
the browser's title bar, or
on the tab at the top of the window.
4:57
Beneath the head is the body, where you
place any content you want to display
5:02
in the browser, such as images,
headings, paragraphs, and links.
5:07
Currently, the body element is empty,
5:12
resulting in the browser
displaying nothing.
5:15
So let's add some content.
5:18
Within the body element type the text,
My Recipe Book,
5:20
press Enter, and immediately
below type Spaghetti Carbonara.
5:25
Save the file and refresh the browser.
5:30
You'll notice that although
we entered this text on two
5:34
separate lines the browser
displays it on a single line.
5:38
The browser doesn't know how to
format this text on the screen, so
5:42
we need to add HTML tags or markup to
instruct the browser on how to display it.
5:47
HTML is comprised of numerous
tags that serve various purposes,
5:52
enabling the structuring and
formatting of text.
5:57
However, you don't need to memorize all or
even most of the tags.
6:00
An excellent resource for
reference is the MDN or
6:05
Mozilla developer network
HTML elements reference,
6:09
where you'll find a comprehensive
list of all available HTML elements.
6:13
Whenever you feel stuck, visit this page.
6:19
The elements are even grouped by function,
making it easier to locate what you need.
6:22
I've included the link to this page in
the teacher's notes, so why not take
6:28
a moment to explore MDN now and review
the HTML elements covered in this video.
6:33
You could even get a head start
on learning about heading and
6:38
paragraph elements, which we'll add
to the web page in the next video.
6:42
Remember, there should only
be one HTML head, title,
6:46
and body elements on the page.
6:51
Also know that you don't have
to retype the doc type and
6:54
common tags every time you
create a new web page.
6:58
Instead, create a copy or template
of this code to use as a reference.
7:02
Many text editors also offer
the convenience of quickly
7:07
inserting HTML snippets such as
a basic HTML template into your
7:11
file using keyword shortcuts or Emmet.
7:16
Additional information about HTML
code snippets is available in
7:19
the teacher's notes.
7:23