HTML Coding #1: Basic Structures

Hello there. This is the first post about HTML coding. Go to the HTML coding page to learn more.

All coding starts with the DOCTYPE tag. It defines the HTML type (HTML5) and makes your project a local website. However, before you get into any of this, you need to get Notepad++.

Any notepad works, but Notepad++ is best for HTML coding, since it has a lot of features fine-tuned just for coders.

Once you have opened up Notepad++, type in <!DOCTYPE html> on the first line. This defines the page as a HTML5 project.

However, to open it in a web browser, you must do one last step. You have to save the file in a specific way.

Hit Ctrl-S or Cmd-S to save, or go to File->Save. It should open up a File Explorer window. Once you have found where you want to save your project, type in whatever name you want. You want to avoid spaces though, so try substituting spaces with _ or -.

IT IS IMPERATIVE you do this next step. If you have already clicked Save, then you have to start over by going to File->Save As. If you haven’t, the good on you. You must add “.html” to the end of your file name. So say if I call this project “My_First_Website”. I would save it as “My_First_Website.html”. Then only will the browser accept it as a HTML webpage.

Once you have done this, you will notice that your <!DOCTYPE html> has turned blue. This is confirmation that your computer has accepted your file as a HTML local webpage.

You want to type a few more tags now. (By the way, anything surrounded by <> is a tag. Tags are the backbone of the site, and it dictates how your webpage looks.)

After your <!DOCTYPE html>, click enter and type <html>. This means your webpage has begun. Type </html> also. This means your webpage ends here. Whenever a tag has a / in front of it, that means it is an “end” tag. You always have to end a tag, or the webpage won’t work right.

Make sure to hit enter after each tag, to organize your code. Another organizing tip is to click Tab to indent every time you put a tag or text between another tag, or “nest” a tag. It makes it much easier to make sense of.

(Everything else in your webpage takes place within the <html> tags.)

Next, type <head>. The “head” section of the webpage is for some of the “behind-the-scenes” part of your webpage, like <meta> and <link>. You’ll learn these later. Make sure to close the head with </head> on the line below.

Then, type <body>. This is the meat and potatoes of the webpage, and whatever you type in here will show up on your webpage. You can also add other tags to spice up your text.

Type in something, whatever you want. Then close it with </body>.

That should be enough for today.

Ex.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

My First Webpage!

</body>

</html>

Lesson #2: Content Tags is out now! Click here to check it out.

Advertisements

4 thoughts on “HTML Coding #1: Basic Structures

Leave a Reply

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