In HTML basics, we are going to discuss what are basics of html, editors, file extention etc. We gave introduction of html in our last post. You can check that post here.
Notepad for Windows:
You can start writing HTML codes in notepad if you are using windows. Notepad is simple to write and easy to execute code. You can find notepad in start menu, then program files and then in accessories.
TextEdit for MAC:
If you are using MAC, you can start writing codes in textedit, which you can find under applications in finder.
If you want to write and execute code online, then you can try w3school online editor. It will show you live results of your coding.
Write your first Code:
Before writing our first code, lets learn some basics of html, so get we can get familiar with some of the codes which we use frequently.
- Doctype: This tag is used to define the type of document to which it belongs. Clearly, we are writing html codes, so our document type will be of html in all of our files.
- <html> tag: This tag instructs the beginning of coding. We start writing codes under <html> tag. Command will not going to execute if this tag is missing.
- <head> tag: As the name suggests, this tag acts as head as that of head of human beings. Under this tag, comes the codes which determines how our page will going to look like.
- <title> tag: This tag is used for providing title for our document. This title appears in title bar above on the screen, when we open our code page in browser.
- <body> tag: All the commands that will be executed and shown on the web page comes under this tag. Web page shows only those content which we write under under <body> tag. All other tag’s content is not displayed on browser.
- <h1>,<h2>,<h3>,<h4>,<h5> and <h6> tags: <h> tags are used to provide heading for our content to be displayed on webpage. There are six types of headings which can be used according to our content’s need. Size of the heading keep decreasing with increase in the number in heading tags. For example, <h1> tag is the biggest heading of all, while <h2> tag is smaller than it, and subsequently sizes will decrease till <h6> tag.
- <p> tag: <p> tag is used for writing a paragraph for our content. It can be a single line or many lines constituting a paragraph.
- Image tag <img>: Image tag is used to insert images to your content. You can add images either from the folder saved on your drive or through online link. To add image you need to add source file (src), which describes the source from where image is being taken. You can also add alternative text for image with “alt” command. “ALT” command is used for images so as to give idea what image is all about, if image is not loaded or visible. For example: <img src=”images.jpg” alt=”webpage”>. Image tag is a self closing tag so we do not need to close it.
- Button tag <button>: This tag is used to provide button under a form that we want visitors to fill and submit.
- List tag: There are two types of lists tags in html. These are ordered list and unordered list. For ordered list we use <ol> tag, while we use <ul> tag for unordered list. Ordered list is used when you are mentioning some points in a sequential manner, whereby one option is just next to another. Numbered list comes under ordered list. Unordered list is when we include points with any sequence. Bullet list comes under unordered list.
As we have learnt the basics of the html, now ets move to write our first code. We are using notepad for all our coding in beginning. In future, we will tell you another application for coding which we will going to use for complicated codes.
Either you can write or paste these codes in your notepad editor. After the code is entered, the next task comes is to save this file with “.html” extention. .html extention shows that this file is html file. Let’s see how you have to save your file along with using extention.
Here we chose our file name as “basics” and we put “.html” after it. Below there is one more option is present with the name of “Encoding”. By default it is ASCI, while working of html codes, make sure you choose UTF-8 before saving the file. Although it doesn’t make any great differences. After you save file with html extention, one webpage file comes out with your notepad file with the symbol of internet explorer. This shows that this file belongs to html and it will appear in browser window if you want to open it. Let’s see how our first code looks in html browser.
Now lets add all the basic codings that we have learned above in the single window. Lets see how they are used in notepad and how they worked when we see them in web browser. Below is the notepad window where I type all the above codes with sequence, following this windows are two windows which is just the output of these coding. As the output window is big, i divided it in two parts for taking its screenshot. Go through them carefully and try it yourself also.
That’s all in html basics, we will talk about further in our next posts about html. Till then, practice it and try it, you can also post your comments below if you face any difficulty.
Thank you. 🙂