Skip to content

Making web pages with HTML

HTML stands for “hypertext markup language”. It’s a language for describing (marking up) a page with tags – pieces of code – so that a browser like Chrome or Internet Explorer knows what to do.

How to make a new web page

Here’s how you can start a web page:

  1. Open Notepad.
  2. Type this inside:
    <HTML>
    <BODY>
    This is my page!
    </BODY>
    </HTML>
  3. Save the file to your desktop as “Page.html”. Yes, you have to use the quote marks so that Notepad will save it as “Page.html” and not “Page.html.txt”.
  4. Now go to your desktop and doubleclick Page.html. It will open in your web browser!

Do that now, but put whatever text you want in there, instead of “This is my page!”.

Important: You have to put every single thing for your web page between the <BODY> and </BODY> tags. So maybe your page code will eventually look like this:

<HTML>
<BODY>

<H1>This is my webpage!</H1>

<B>Hi!</B> This is my page, and you’re welcome here.

</BODY>

</HTML>

Learn about tags

Every web page you make will have to have those tags inside. The tags are the things that look like this: <BODY>.

  • <HTML> tells the browser, “the web page is beginning”
  • </HTML> tells the browser, “the web page is ending”
  • <BODY> tells the browser, “the main part of the page (the body of the page) is beginning”
  • </BODY> tells the browser. “the main part of the page is ending”.

Most HTML tags must have a beginning marker (like <HTML>) and an ending one (like </HTML>).

AND, you can’t overlap HTML tags; if you tried to do this, the page might mess up:

<HTML>
<BODY>
This might mess up, because the HTML tag ends before the BODY tag ends.
</HTML>
</BODY>

If you have questions about that, just ask me.

Change your web page

There are lots of tags you can use.

  • <B>This will make text bold.</B>
  • <U>This will make text underlined.</U>
  • <CENTER>This will make the text centered in the page.</CENTER>
  • <H1>This will make the text a big title, or “header”</H1>
  • <FONT COLOR=”red”>This text will be red.</FONT>
  • <FONT SIZE=10>This text will be bigger.</FONT>
  • <BR>This will start the text on a new line. This is one of the few tags that does NOT need an ending tag. (You don’t use </BR>.)

You can get lots more information about tags on this web page for kids, and on this web page for everyone. You can also watch videos about HTML if you want to.

Linking to another web page

That reminds me. Notice how I linked to other pages? To do that, we use an “anchor” tag:

<A HREF=”http://minecraft.gamepedia.com/Minecraft_Wiki”>Minecraft Wiki</A>

That one looks weird, so let’s talk about it.

  • The part that says <A HREF= means, I’m anchoring (linking) to another page.
  • The next part is just the URL – the web address – inside quotes.
  • Then you finish off the beginning tag, with this: >
  • THEN, you put the text in that should show up as a link. The code above will make text like this:
    Minecraft Wiki
  • Then you close the anchor tag with </A>

How do I change the background color?

Oh that’s easy. Remember the <BODY> tag? You can add attributes to it, like background color!

<BODY BGCOLOR=LIGHTBLUE>

How to add a picture

Use the image tag. If you are going to use an image that’s online, get the address of the image itself. (You can do this by right-clicking the image and selecting Copy Image Address.)

<IMG SRC=”http://www.web.com/image.jpg“>

Now use the tag, just like above. Only instead of http://www.web.com/image.jpg, paste in the address of the image!

If, on the other hand, you want to use an image that’s on your computer, things will be a little bit different.

  1. Navigate to the place where the image is saved, like C:\Users\ben.MIDNIGHT\Documents\. Copy that file path, and paste it into your image tag, like this:
    <IMG SRC=C:\Users\ben.MIDNIGHT\Documents\>
  2. We’re not done yet. Because this is a file on your computer, you have to add “file:///” to the beginning of the path, like this:
    <IMG SRC=file:///C:\Users\ben.MIDNIGHT\Documents\”>
  3. Finally, put in the actual file name. Like this:
    <IMG SRC=“file:///C:\Users\ben.MIDNIGHT\Documents\eagle.jpg>

There’s lots more

We haven’t even started on some of the other cool stuff. You can:

  • put images in your web page
  • put videos in your web page
  • change the page’s background color
  • change the background itself so that it’s an image
  • strike through text, like this
  • and more.
Advertisements
%d bloggers like this: