My HTML Tutorial: Part 1

I’ve started learning a little bit about HTML since I started this blog. And I’ve been thinking lately that I should learn some about it, especially if I end up in an IT job. So, to learn it myself, and for my readers benefit, I’m going to start posting lessons.

For a complete beginner, you’ll have questions like: “what is HTML?”, “what tools do I need to program in it?”, or others like that. I’ll try to explain enough that by the time I’m done with my lessons, we’ll both be experts in HTML.

To answer my sample questions first: HTML is an acronym for “Hypertext Markup Language”, from what I’ve read, it’s basically a page descriptor. Generally languages like C, C++, and Parallax Basic (for the microcontroller) will compile the code, which translates it into a more computer, and less user, friendly language. HTML code can be entered using something as simple as “Notepad”.

Now for some real HTML code:

First open a notepad window. Type in this code, the organization helps to make it easy for you and anyone else looking to understand what your file does.

<html>

<!–Here’s a comment, so you can explain the code to someone who’s looking at it, but it won’t show on the page–>

<head>

<title>

My Page

</title>

</head>

<body>

This is my page. Enjoy.

</body>

</html>

I read in a tutorial for the scripting language for a game I like playing. The author suggested to type in the code, rather than copy/pasting. I copied and pasted just a minute ago to test the code, and it doesn’t copy the formatting. So, I recommend typing as I’ve put it in, but don’t copy/paste it.  You’ll start learning the tags more quickly if you type them out. For now, you can just save it as ‘whatever’.html. It doesn’t really matter what the filename is, just the type of file you save it as. As we progress, it will become important, because the files will begin to link to each other.

The explanation of the tags:

<html>:

That’s the part that contains the code for the webpage. I’m still learning too, so I’m not sure what goes outside that in the code.

<head>:

This is the invisible, but still important part of the file, such as <title>, which tells your browser what to put on the page title (either the open tab, or the top of the window). If you don’t put anything here, it won’t display a name for your page.

<body>:

This is the text of your page.

Generally, you’ll need to close the section off with the ‘/’ before the tag.

The basic format of the page is

HTML

HEAD

BODY

in HTML, that looks like:

<html>

<head>

</head>

<body>

</body>

</html>

Now you’ll have the basics to make a single page, and change the title to that page. Next lesson, we’ll get into some of the tags to display different style text, like bold, and italics, and how to change the color.

A couple of footnotes:
The tags need to be in lowercase. Not all versions of HTML are case-sensitive, but some are. So, make it a habit. Any programming language is case-sensitive, so if you have any plans on doing any more programming than this, it’s vital to be used to thinking about the case you’re typing in.

Please comment on the blog, not on my Facebook post, because any reader will benefit from whatever questions you might have, and they’ll never see it on my Facebook page.

Advertisements

Any thoughts? I'd like to hear from you!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: