1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 5.00 out of 5)

HTML Basics For Beginners

HTML Basics For Beginners is a post for the newbies to HTML. HTML is an acronym for Hypertext Markup Language and its really easy to understand.

Experiment with HTML Basics *

You can experiment with HTML right on your computer. You do not have to have any software installed. Below is a code that I want you to copy and save in a notepad document. So open up your notepad on your computer. Go to start and then type in notepad

HTML Basics For Beginners

Subscribe To My YouTube Channel:

Now that you have notepad opened copy and paste the code below into the document.

<html>
 <head>
 <title></title>

 </head>
 <body>
 <h1></h1>
 <h2></h2>
 <h3></h3>
 <p></p>
 <a href=""></a>

<img src="" alt="" />

 </body>
</html>

Your notepad document should look like this.

HTML Basics For Beginners

 

Now I want you to click on file, save as.

html for beginnersYou are going to get another box pop up and this is where we will name the file and set the encoding. Do the following and make sure you save it to a place where you can easily open it like the desktop.

  1. Select Desktop
  2. Name the file test.html
  3. Select “All Files” from the drop down
  4. Set the encoding to UTF-8 from the drop down.
  5. Save File

html basics save file asNow on your desktop you should see the file you just saved!

html basics desktop test file

 

If you double click it then it will open your browser window but the file will be blank like below.

html basics browser windowOn the top line you can see the “file path”. The file path on my computer is  file:///C:/Users/MaximusMovie/Desktop/test.html.

Editing Tags *

Now we are going to go back to our notepad document and edit tags so you can see how editing html works.

Title Tag *

Go to your notepad document that still has the test.html open in it and find the title tag.  It should look like this.

 <title></title>

Go inbetween the carrots >< and enter “This is the Title Tag”.  You title tag should look like this.

<title>This is the Title Tag</title>

Now save the file and refresh your browser and you will see that the title tag in action.

html basics title tag

 

Heading Tags *

There are several different heading tags that you can use. H1 is the most important. You should never have any more than 1 H1 tag in a web page. Lets enter something into our H1 tag and see what happens. Go in between the carrons on the h1 tag and enter this is a h1 tag. Save the file and refresh your browser window.

<h1>This is a h1 Tag</h1>

html basics h1 tag

Now do the same thing with your other h tags and you will see different sizes applied to them in your browser.

 <h1>This is a h1 Tag</h1>
<h2>This is a h2 tag</h2>
<h3>This is a h3 tag</h3>

html basics h tags

P Tags in HTML *

Most of the time we are typing in a P-Tag. Lets enter “This is a P Tag” in between the carrots >< on the p.

 <p>This is a P tag</p>

It should look like this.

html basics p tag

 

Anchor or Link Tags *

Anchor links is what we display in html documents when want to link to another page. They are written like this. In the quotes you put in the web page that you want to link to and in the carrots you type in the text that you want displayed. This is called anchor text because it is anchored to a link that takes you to a web page.

<a href="https://a1websitepro.com">A1WEBSITEPRO</a>

html anchor text and links

Image Tags in HTML *

The last tag we will be discussing in this article is the image tag. We use this to insert image files within an html document. We also use the alternate text by entering text in the quotes of alt=””. Copy the code below and save it to your document and see what happens.

<img src="https://a1websitepro.com/wp-content/uploads/2014/09/logo200.png" alt="a1websitepro" />

When you refresh your browser it should look like this.

html basics img tag

HTML Basics For Beginners was last modified: May 7th, 2015 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

HTML-Basics-For-Beginners

1 Comment

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.