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
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.
Now I want you to click on file, save as.
You 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.
- Select Desktop
- Name the file test.html
- Select “All Files” from the drop down
- Set the encoding to UTF-8 from the drop down.
- Save File
If you double click it then it will open your browser window but the file will be blank like below.
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 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.
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>
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>
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.
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.
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.
I hope you enjoyed the article. If I was able to help you please consider a tip for the content.
One Time Tip