[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