HTML from scratch for beginners
Hi.
I know many of you reading this wanna know what this HTML fuss is all about. Trust me, I was there not very long ago. After learning HTML the way I did, frankly, I found it quite easy and very interesting to code HTML. And I’ll try to make this read worth your while.
After going through my article, I’m sure you’ll gain good confidence in this area. And, if you have any doubts, I suggest finishing your read first and most of your queries will be answered as you proceed through my piece, because any doubts you may have, I’ve had them too, and hence I have tried to draft it as simplified and as basic as it can be. I will try to weave the concept into words in the best possible manner I can, also I’ll try to minimize the jargons, and will familiarize you with the important ones.
Let’s begin!
.
.
.
Html is a markup language. What does that mean?
It means that Html uses tags to declare and define elements within the document. It is a human-readable language that uses simple English words, rather than the usual jargon syntax that other complex languages use.
Can a markup language be considered as a programming language? No. Because a markup language is used to control how the data is presented or one can say how the data is structured in a web document.
Let us begin by setting up your text editor. What is that? A text editor or code editor is the platform used to write code into and then it is run in your default browser and you will be able to see your work. I personally use Sublime Text 3 for writing code and editing it. Let me walk you through the process I set it up with and started my work. I created a new folder and inside it, I created a new text document and renamed it index.html this means it not a .txt document but a .html document now. This was all you need to do, now just open your sublime text 3 code editor and start coding!
Before we start, let us first understand what are Html tags and Html attributes. Html works on Html Tags. Html tags are part of the document that contains Html contents. Html tags begin with the ‘<’ symbol and end with the ‘>’ symbol and everything written inside these symbols are called tags. For example — <h1></h1>, <em></em>, etc. Usually, Html tags come in pairs i.e. a start tag as well as an end tag. Also, it is not necessarily true that all tags must come in pair. For example, <br> tag, used to break the line i.e. put the text into the next line, is a singleton tag.
Html elements enclose the contents in between the tags. Everything written between the starting tag and the end tag is called Html element or content.
<h1>This is a heading tag</h1>
→ This is a heading tag
Html Attributes are used to define characteristics or give information about the Html elements. In simple words, they are used to provide additional styling to the Html elements. They are always placed inside the opening tag. For example —
<p align=”left”>This is a left aligned paragraph</p>
This is a left aligned paragraph
Let us start with the header file- <!DOCTYPE HTML>
All HTML documents must start with a !DOCTYPE.
A !DOCTYPE isn’t an HTML tag, but more of a way to inform the browser as to how the document must be interpreted. In HTML5, the doctype is declared as — <!DOCTYPE HTML>.
Next, we use the <html></html> tag. It contains all other HTML elements & it is used to specify that the document is an HTML one.
<head></head> tag followed by <title></title> — The head tag gives heading to our page. With the title tag, the page will have the heading at the top, in the tab section, that is what our tab will be named.
Now, the <body></body> tag — Consists of the whole body of the Html document. The body of the doc contains all other tags.
<h1></h1>, <h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6> — These are all heading tags for the body. They give headings of six different sizes. <p></p> are called paragraph tags, used to enclose paragraph.
There is a fun shortcut with the help of which you won’t have to type the tags again and again. You can just type the name of the tag and press the tab key, you’ll have the tag written for you with all the syntax.
To add comments, you can enclose your comment within :
When you are practicing your Html document and you want sample paragraph text, instead of typing some gibberish, you can simply type Lorem then press the tab button, you’ll have a sample text written on your screen.
Let us now learn how to add a link to your document-
The <a></a> tag is used to represent a hyperlink. This is usually a link to another document or a website. It comes with an attribute — href. The href attribute is used to enclose the URL of the page the link goes to. It looks like this —
If you add one more attribute called target=”_blank” in this tag, you can have a hyperlink that opens in a new tab and leaves the current tab as it was. The use of this attribute is that the visitor won’t have to leave your site to visit a new one, it will instead open the hyperlink in a new tab.
All the styling there is in a web document, is primarily done with the help of CSS(Cascading Style Sheets). Here, we’re not going to learn that. We are just learning Html5 here. I will bring an article on CSS later, but here we can do basic bold and italics.
Let us see some basic styling tags available in Html —
For italics we use the emphasis tag <em>Text in italics</em>
Text in italics
For bold we use the strong tag <strong>Text in Bold</strong>
Text in Bold
Next, we’ll learn how to implement Lists in Html:
It looks this way —
We can add Tables —
This is the line of code used for creating a table. The main tags i.e. <table></table>, <thead>used to give column headings</thead>, <tr>gives the heading row</tr>, <th>specifies the heading</th>, <tbody>used for the body of the table</tbody>,
Html Forms —
We can even create a form using Html. Great! Isn’t it?
Let us go ahead and see how it is done. Html forms, as expected, begins with <form></form> tags.
The ‘action’ attribute submits the form to a certain page. And under the ‘method’ attribute we specify how it will go, if we use ‘GET’ it’ll show it as it happens in a search option showing what we write in. And If we use ‘POST’, it’ll take the data to the database. POST is more secure than GET.
The <label></label>tag is used to give a name to the blank space where the user is going to enter the information. The <input> tag is used to take input into the form, and the attributes ‘type’ and ‘name’ help in clarifying what type of input will be given, and, helps the server identify where the data will go in the DB, respectively. We add label tags so that users can identify what to enter & we use the name attribute in the input tag for the server to identify where to send the data in the DB or file or page.
‘Placeholder’ attribute holds the place temporarily until some data is entered.
Let me conclude this article here, and I will publish it further in my next article. We will go through some even more interesting things that HTML can do, and learn it.
If there are any queries you can contact me through LinkedIn. And I hope to see you in the next article :)