In this tutorial, we’ll learn the very basics and essentials of HTML (Hypertext Markup Language). HTML is the building blocks of every webpage or a web-app. This comprises of markups or tags which represent the building blocks of a webpage. Most of the HTML markups have opening and closing tags. For example, if you want to insert a paragraph in your webpage, you need to enclose your paragraph in <p></p> pair of tags as follows:
<p>This is a paragraph.</p><p> is the opening tag and </p> is the closing tag. So in HTML world anything between <p> and </p> will be rendered as paragraph. So let’s start tagging the stuff and build some basic webpages.
Choose a text/code editor. Want simple text editor? Then use Notepad on Windows; TextEdit on MacOS; Gedit on Ubuntu; Featherpad on MX Linux. Want a capable code editor which is lightning fast? Then use Notepad++ for Windows; Geany for Linux. Want to use full-fledged code editor with IDE level of capabilities? Then you have VSCode. For ninja level coders we have Vim.
So, open the editor of your choice. Insert following HTML line:
<h1>I'm heading</h1>Save file as index.html, close it, then open the same file in a browser. The file renders as HTML in browser and displays the contents as heading because of <h1></h1> tags. Now reopen this file in text/code editor and put some necessary tags as follows:
<!DOCTYPE html>
<html>
<body>
<h1>I'm heading</h1>
</body>
</html>Now we have basic structure of an HTML file. First line specifies the Doctype. Next the whole webpage contents go in between <html></html> tags. <body></body> encompass the contents on actual body of webpage. Moving on ahead, let’s enter a new pair of tags <head></head> and <title></title> as follows:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>I'm heading</h1>
</body>
</html>Note that tags can be nested i.e. <title></title> tags are inside <head></head> tags which in turn are inside <html></html> tags. Here <title></title> tags insert the title of webpage and displays the same at the Title bar of the browser window. Reload the webpage in browser by pressing F5 and observe the Title bar getting changed.
Coming back to body contents, let’s insert <h3></h3> tags to get perspective of headings:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>I'm heading</h1>
<h3>I'm heading 3</h3>
</body>
</html>
Save file and reload in browser. Now, there are two headings; first the bigger one i.e. h1 and second is smaller i.e. h3. It’s worth noting here that HTML offers 6 built-in headings which are h1, h2, h3, h4, h5 and h6.
Now, let’s put some photos into this webpage. For images, you may download as many as you want from pixabay.com; go to pixabay.com and search ‘cup’ and download couple of cup photos from there. You may choose the smallest size i.e. 640×426 for the time being. Rename the downloaded photos as cup1.jpg and cup2.jpg and move them into the same directory where the above index.html file is.
Let’s use the <img> tag to insert the photo as follows;
<img src="cup1.jpg" alt="cappuccino"><img> tag does not require ending </img> tag. Here <img> tag has two attributes i.e. src and alt; src defines the name and path of the image while alt defines the default wordings which would appear if the photo is not loaded. Now our index.html looks like as follows;
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>I'm heading</h1>
<h3>I'm heading 3</h3>
<img src="cup1.jpg" alt="cappuccino">
</body>
</html>
Save and reload index.html in the browser; you have photo in your webpage right after two headings. If the image is not rendering, it probably means writing mistake in src path or the photo is missing from the same directory as the index.html file.
Let’s move on the most important tag in HTML i.e. hyperlink. But first enter a line break in our webpage by inserting <br> tag (<br> tag has no ending tag). Then enter a hyperlink by inserting <a></a> tags as follows;
<br>
<a href="http://www.yahoo.com">Click here for Yahoo!</a><a></a> tags represent hyperlink or simply called a ‘link’. Hyperlink tag takes an attribute ‘href’ which holds the address of actual location of the link. Whatever you write between <a> and </a> becomes clickable and on click over the link browser takes us to the link location. Now our index.html looks like as follows;
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>I'm heading</h1>
<h3>I'm heading 3</h3>
<img src="cup1.jpg" alt="cappuccino">
<br>
<a href="http://www.yahoo.com">Click here for Yahoo!</a>
</body>
</html>
Save and reload index.html in the browser; there’s a new line right after the photo which is clickable. Now click on the link and off you go to the provided address in href attribute.
<a></a> tags can be nested with an image tag i.e. <img> in order to make image clickable. For that, let’s insert second cup photo into our webpage while making it clickable too with a hyperlink;
<br>
<a href="http://www.msn.com" target="_blank">
<img src="cup2.jpg" alt="latte">
</a>As we’ve nested the <img> tag into hyperlink tags, and whatever is between <a> and </a> becomes the clickable link, the photo will become clickable and with a click on it, the browser will take us to the address given in ‘href’ attribute. Here, I’ve inserted an extra attribute in <a> tag i.e. ‘target’. Target with value ‘_blank’ will simply open the link’s address in a new tab instead of replacing the webpage in the current tab. Now our index.html looks like as follows;
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>I'm heading</h1>
<h3>I'm heading 3</h3>
<img src="cup1.jpg" alt="cappuccino">
<br>
<a href="http://www.yahoo.com">Click here for Yahoo!</a>
<br>
<a href="http://www.msn.com" target="_blank">
<img src="cup2.jpg" alt="latte">
</a>
</body>
</html>
Save and reload index.html in the browser; there’s the second photo which is clickable. Now click on the second photo and note that the link’s address opened in the new tab instead of the current tab. Now, close the newly opened tab.
Wrapping up hyperlinks, let’s create another hyperlink which will be used to navigate within the same webpage. Suppose your webpage is very long and you want to jump to a specific location on that webpage by clicking a hyperlink, then first you need to id the location where you want to jump to. To understand this concept, let’s quickly amend our index.html as follows;
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 id="top">I'm heading</h1>
<h3>I'm heading 3</h3>
<img src="cup1.jpg" alt="cappuccino">
<br>
<a href="http://www.yahoo.com">Click here for Yahoo!</a>
<br>
<a href="http://www.msn.com" target="_blank">
<img src="cup2.jpg" alt="latte">
</a>
<br>
<a href="#top">Click here to go on top of the page!</a>
</body>
</html>
Here, an ‘id’ attribute has been inserted into the <h1> tag which has become <h1 id=”top”>I’m heading</h1>. Id attribute has inserted an identification (id) for this specific <h1> tag, so that later on we can approach this tag by its ‘id’. At the end of index.html we’ve inserted a hyperlink with href attribute having special character # and id of the tag where this link will take us to i.e. tag with id ‘top’.
Now save and reload index.html in browser. Scroll down and click on the last link. Now you’ll notice that the webpage has scrolled up to where the <h1> exists.
In part 2 of this tutorial we’ll look at lists and tables…
2 thoughts on “Essential HTML Tutorial – Part 1”