Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

HTML Basics For Beginners Edit
Last Update:2024-10-17 19:30:35
The Change:2024-10-16 10:33:26

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. https://youtu.be/lOwIqTNiseg

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 Now that you have notepad opened copy and paste the code below into the document.

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 as


Now on your desktop you should seethe 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 window


On 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. Go in between the carrots and enter "This is the Title Tag". You title tag should look like this. This is the Title Tag 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.


This is a h1 Tag


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.


This is a h1 Tag


This is a h2 tag


This is a h3 tag


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 gt;lt; on the p.

This is a P tag

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. A1WEBSITEPRO


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. a1websitepro When you refresh your browser it should look like this.

html basics img tag