Beginner’s Guide to Web Development Part 1 : Introduction to HTML
Welcome to a brand new series on web development. I will be teaching you how to become a web developer through this course. We will be learning HTML, CSS, Javascript for frontend development and PHP for backend development.
I will focus on making this series a practical one with including just the needed theory behind it. We will focus on making a personal website using all the technologies we have on our disposal.
First let’s start with HTML. HTML stands for Hyper Text Markup Language. This is the main language that the web speaks and understands. It was created by Tim Berners Lee in 1990.
So, what’s a Markup Language and why do I need it for web development? Well, good question. A markup language is basically a combination of information and instructions to make that information more useful or guide how to interpret that information provided. For example:
<todo>
<item>
Write "Beginner's Guide to Web Development Part 1" article.
</item>
<item>
Write "Beginner's Guide to Web Development Part 2" article.
</item>
<item>
Write "Beginner's Guide to Web Development Part 3" article.
</item>
</todo>
The greater than and less than signs with some word inside it signify a tag. Here, “<todo”, “</todo”>, “<item>” and “</item” are examples of individual tags. The the instruction “<todo>” lets us know that it is a todo list. And “</todo>” gives us the information that is it the end of the todo list. “<todo>” is called an opening tag and “</todo>” is called a closing tag. Similarly “<item>” and “</item>” mark the beginning and end of an item inside this todo list.
Not all tags have an opening and closing pairs. Some of them are singular tags in HTML like “<br>” and “<hr>”. “<br>” is for break line and “<hr>” for horizontal line.
The above “todo list” example is not really standard HTML markup language. Thus there is no tag called “todo” or “item” in standard HTML. Instead to make a list of items, we use “<ul>” and “<li>” for unordered list and list item respectively.
There are a lot of tags in HTML. Around 145 to be exact. We won’t need to use all of them for a simple web page. A handful will suffice. A reference of all the tags in HTML can be found at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Okay, let’s write the same thing in standard HTML.
<ul>
<li>
Write "Beginner's Guide to Web Development Part 1" article.
</li>
<li>
Write "Beginner's Guide to Web Development Part 2" article.
</li>
<li>
Write "Beginner's Guide to Web Development Part 3" article.
</li>
</ul>
That was just a part of a html document. This code should actually go inside a “<body>” tag. There is a format structure you have to start with for every HTML page. It is as follows:
<a href="https://medium.com/media/3a84750f434429c0581286ea244b26b4/href">https://medium.com/media/3a84750f434429c0581286ea244b26b4/href</a>
Line 1 declares the Document Type as html.
Line 2 starts with the main <html> tag showing us the intention that we’re going to write HTML code inside it. <html> tag has sub or inner tags <head> and <body>.
Line 3 starts with opening <head> tag. Inside the head tag we have <title> tag. Title tag is where we put the title of this web page. This is the title that appears on the tab of the browser.
Other than that <head> contains <link>, <script> and <meta> tags. <link> for linking external style sheets, <script> for JavaScript and <meta> for SEO (Search Engine Optimization) purposes.
Now the interesting part is the <body> tag on line 6. The <body> tag contains all the information we see on a web page.
Now let’s go ahead and add the todo list we prepared inside the body tag. The code now looks like this:
<a href="https://medium.com/media/4356433215220a4120cdcde3741d3a3e/href">https://medium.com/media/4356433215220a4120cdcde3741d3a3e/href</a>
Now, let’s use a text editor to store this code to a file. We’ll use Sublime Text editor for this purpose. Sublime is a lightweight and fast text editor for web development. You can download it from the official site: https://www.sublimetext.com/3
Once we have sublime text installed and opened, we can create a new file from the “File” menu on the top left of the editor. Or we can also use the shortcut “Ctrl + N” to create a new file. Once the file is created, we can now paste the code we discussed above onto that file. Then finally “Ctrl + S” to save the file. It will prompt you with the save file dialog box. You will want to save the filename as “index.html”. For now we can save it to the “Documents” folder. This is because the main file for a website always starts with the default index file. Also remember to enable the “view extension types” if you are on Windows. So that you won’t save the file accidently as index.html.txt. “.txt” format is for text files only.
Now we may open the file in your default browser by right clicking anywhere in our code area on Sublime Text. We will need to select the “Open in Browser” option on the right click context menu. We should see something like this on our browser.
Notice that we only see the content inside the <body> tags. And even inside the body we only see the text inside the <li> tags. All other tags are not shown at all. This is how the browsers interpret the html file we provided. It knew how to parse each tag according to their name and corresponding significance they carry. The “<ul>” gave the hint to the browser to show the items inside it in an unordered fashion. The dots in front signify that it is an unordered list without any numbering such as 1, 2 and 3.
Let’s change the title of our web page. Let’s put some content inside the <title> tag.
<title>My Website</title
Then “Ctrl + S” to save the file. And right click “Open in Browser”. We should see the title change on the tab.
That’s it for the first part. We will go through some of the common HTML tags on the next one while we continue to build our website.
Suggestions? Issues? Queries? Please leave them below on the comment section and I’ll try my best to help you.
Please subscribe for more episodes! And please give claps 👏 if you found the article helpful :)