LearnHow: Make a simple web page using HTML

By | December 9, 2019


Hey everyone. Leander here. And today we’re going to learn how to make
a very simple webpage using HTML. So this video is for complete beginners in
web programming. First, we need a text editor to write our
HTML code. If you’re using Windows, you have a text editor–
It’s called Notepad. Or, if you’re one of my Japanese viewers,
it’s going to be called メモ. So go ahead and open up your text editor. Now, let’s save this blank page as our web
page. Just put it right on the desktop. Call it page. And we add “.html” to tell the computer that
this is an HTML file to be read by a web browser. Let’s just save that. And here is our web page. If I click on it, it’ll open up in my default
web browser. And of course, there’s nothing on the page
yet. So let’s add something. “Hi”. Save that. Go back. Refresh our web browser. And, here we go– Our text appears. Let’s add some more text. “This is my first web page.” Save that. Go back. Refresh our browser. And, uh oh… Something’s different. Let’s try adding some more return spaces. Still no change. So this is the big difference between just
writing in regular text and coding in HTML. With HTML, we have to use code to organize
information on the page, including breaking text into two different lines. So, one way to break this text into two different
lines is to use the “break” tag. And, to do that, you just make these brackets
here and add “br”. Save that. And now our text is broken into two different
lines. Let’s add some more breaks. Now how about we add a heading for the top
of our page. “My Page”. This doesn’t really look like a heading yet. But we can use some HTML code to make it look
better. So in brackets, we write “h1”, and then at
the end of our heading, we write the same thing, but we put this slash here before the
“h”. That looks better. Let’s go back and take another look at our
heading tags. We have an opening tag and a closing tag. This closing tag is really important. Let’s see what happens if we forget it. The browser doesn’t know where to stop making
into a heading. So everything becomes a heading. Let’s put that closing tag back on. Oops. I’m forgetting something. Let’s go back and take a look. Do you see what I forgot. That’s right. The slash. And now we’re back to normal. So some HTML code is like our break tag–
You don’t need any closing tag. But most HTML is like our code for our heading,
and you need a closing tag. So, that’s something to be careful about. Next, let’s make a link. We’ll put it at the bottom of the page. And the tag for a link is not “l”. It’s actually “a”. And “a” stands for “anchor”. So it’s like you’re ‘anchoring’ your page
to another page. And you close that with slash “a”. I’m going to make the text for my link “Find
another page”. Because I’m going to link to Google Search. Next, we need to add the reference to the
link, so that it’ll go to the Google Search page. To do that, we go back to the opening tag,
and we add “href” which stands for “hypertext reference”. Then “=” and double quotations, and in those
double quotations, we’re going to put the web address or URL of Google Search. So I’ve added the URL including the “https”
and “www” part. We save that. Refresh our page. And here’s our link. If I click it, it takes us to Google search. Now, what if we want to link to another page
that we’ve made on our site. To find out, we need to make another page. So let’s go back to our text editor. “New” Type “2” here. And save this as “page2.html” in the same
folder, our desktop. And here’s our new page. Now let’s go back to our original page. Open. Desktop. Where is it. Oh, I have to do this– show all files… Here it is. Now all we do is change this URL here to the
name of our page 2 file, which is “page2.html”. Don’t forget the “.html” part. And I’m going to change our text to “Page
2”. And save that. Go back here. And now when we click on the link, it takes
us to page 2. Next, how about we add an image. To do that, first we need to find an image. And to make things easy, I’m just going to
paste this on the desktop. Now we go back to our text editor. Add a couple breaks. And we use the image tag. And then to tell the browser which image we’re
talking about, we type “src” which means ‘source’. Equals in double quotations. And now we put the name of the file– the
image file, which is “fuji”. Save that. Refresh. And, uh oh, our image isn’t showing up. What’s going on? Let’s go back and look at our code. We wrote “fuji” for the name of our image
file, and that’s what the computer tells us the name is. But maybe our computer is hiding something
from us. See, it calls our web page just “page” but
we known the real name is “page.html”. That part of the file name after the dot is
called the file extension. And it tells the computer or browser what
to do with the file. So it’s really important. To show the file extension, we need to go
to our desktop folder settings. Go to view, and click “file name extensions”. And now, we can see that fuji isn’t just “fuji”–
It’s “fuji.png”. So let’s add that “.png” to “fuji” our source. And now our image shows up, but it’s really
huge. So how do we change the size? Well, we can go back to our code, and in the
image tag, after our source, we can add “width” equals double quotations “500px”. “px” stands for pixels. Save that. And now our image is 500 pixels wide. Much better. If we wanted to, we could also change the
height. So I’ll just try something here: “height”
equals 50 pixels. Save that. And now, it looks really weird. So generally it’s a good idea to just do one
or the other- width or height. And the computer will automatically adjust
the image to make the right proportions. So I’m just going to get rid of height. Ok, our page is starting to take shape. Now, let me give you a quick tip about text. So far, to put text on a new line, I’ve just
been using breaks. But there’s actually a better way do this:
And that is using the paragraph tag. So let me show you how that works. So for “Hi” we just put a tag like this “p”. And then at the end slash “p”. And now we can get rid of this. And we can get rid of that. Save it. Refresh. And, I guess, we had an extra break here… There. It, looks about the same. But it’s more concise. And, the paragraph tag, tells the browser,
“Hey this a paragraph of text,” which is different, for example, from an image or some other element
on a page. So that’s why we try to use the paragraph
tag instead of just doing a lot of breaks. So let me fix up the rest of the text using
the paragraph tag. OK, so we only have one break left, and that’s
just to get a little extra white space after the heading. But everything else now has paragraph tags. So let’s see what that looks like in the browser. And there we are– it looks about the same. But our code is more concise. There’s another thing we can do to make our
code easier to read. Check out this last line. It’s a little hard to read. We have a link element inside of a paragraph
element. To make it easier to read, we can put the
inside element on its own line, and tab it over, and then close the outside element right
below where that element starts. This way, we can kind of see what element
is inside what other element, and it makes it really easy for us to figure out if we
need to close something or not. So I recommend always tabbing over nested
elements like this. So far, we’ve been dealing with just the main
visible part of our web page. This is called the “body” . And we actually
need to indicate that this code is all part of the body element by adding the body tags. So up here, type “body” in brackets. And then we close the element down here. And, because all of this stuff is inside the
body element, to make it readable, we should tab it all over. Adding the body tags doesn’t change the way
our page is displayed right now. But it will help the browser to read elements
that don’t belong in the body, for example, the title. If you look at the top of the tab here, we
don’t have a title yet. So let’s add one. Before we can add a title, we need to give
our page a head in addition to the body. So add the head tag. Close the element. And inside of this head element, we add the
title: “A Simple Web Page”. Save it. Now, our page has a title. There are just two more things we should add
to our code to make sure that browsers can easily read it. First, we should put all of our HTML code
inside of html tags. So we take all of this stuff and put it all
inside of html tags. And to make it easy for us to read, we should
tab everything over. The last thing we should add is a declaration
of our document type. To do that, we write in brackets “!” and “DOCTYPE”
in all caps, and then in lower case “html”. Adding html tags and declaring the doc type
won’t really change how your page looks, but it will help your page load correctly and
quickly in the browser. So it’s a good idea to make sure you add those. And now, our simple web page is complete. Congratulations, you know basic HTML. But there are a few things we should do differently
the next time we code. First, we should put all of our web pages
into a single folder that’s just for our web site. Why don’t we do that right now. Second, we should name our main page, not
“page” but “index”. “index.html”. Third, we should not use Internet Explorer
as our default browser. Instead, I recommend using Google Chrome. Google Chrome is much better for web programming. If you don’t have it, I’m going to put the
download link below this video. So go ahead and download it and install it. And then, just go to one of your HTML files,
right click, go to “properties” and change the browser to Google Chrome. And now our page opens up in Chrome. The last change we should make is– We should
stop using our computer’s default text editor for our programming. There are a lot better text editors out there
for web programming. My favorite is called Sublime Text. And there’s a free version available. So I’m just going to include the link to this
program below. Download it. Install it. Things will be much easier for you. Let me quickly show you what I mean. If I go to Sublime Text, and I open up the
file we just made, it looks like this. Compare to Notepad. Which is easier to read? Over here, Sublime Text automatically makes
HTML tags red. It makes text white. A lot easier to read. And here’s another thing. Remember when we had to tab all this stuff
over one line at a time. That was pretty tedious. But with Sublime Text, we just highlight everything
we want to tab over, and just hit ‘Tab’ and it all tabs over. And if we go to far, hold down ‘Shift’, and
hit ‘Tab’ again. And we can bring it back. That’s just one of the neat tricks you can
do with Sublime Text. So I highly recommend it. And that’s it. Thanks for watching guys. And enjoy programming in HTML.

7 thoughts on “LearnHow: Make a simple web page using HTML

  1. LearnHow Post author

    The text is a little small in this video, so I recommend watching in a higher resolution (780p looks alright). I also recommend watching in 'Theater mode'.

    Reply
  2. Flora Belas Post author

    Thank you so much! I finally got to learn that, i watched other videos but your is the best!

    Reply
  3. The game gamer gamer The Mario Gamer Post author

    I'm not a beginner… I'm a Web Creator who makes web pages with html

    Reply
  4. The game gamer gamer The Mario Gamer Post author

    NO SUBLIME TEXT! NO NOTEPAD! USE NOTEPAD++

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *