Learn HTML in 7 days -Day 1
Howdy viewers, welcome to the page of Learn HTML in 7 days of day 1 tutorial. In this HTML tutorial, you are going to learn about the basic document type declaration, the standard procedure to declare or start HTML coding, meta tags, relational tags and responsive tags. The codes discussed in this HTML tutorial series is very important to get started with because every website designing and development follows the standard syntax (or grammer for programming languages).
HTML Documents -The first approach to Designing and Development:
- Every HTML Document must start with <!DOCTYPE html>. It does not have any closing tag, so you don’t have to worry about it.
- Next to the step 1 declaration, you must declare opening HTML tag <html>. But remember, you must close the HTML tag at the end of the HTML coding.
- After you declare <html>, you must declare the <head> tag. The <head> tag contains the <meta> tag, <title> tag, <link> tag and other scripting code goes here. Later, the above tags declared, you need to close the </head> tag. Please note: You can also put the scripting codes after the closing of </head> tag but it is advisable not to follow it but you may follow it once you have the coding skill.
- The <title> tag that is declared within the <head></head> tag contains the title of the webpage. Since, it has a opening tag, you must have a </title> closing tag.
- After the </head> tag is closed, you must declare the <body> tag which contains the heavy lifting part of the website. You must close the </body> tag once the coding is done.
An snapshot of the HTML is-
<title>Basic HTML syntax</title>
<meta name=”keyword” content=”basic, basic html, html tutorial, html is easy”>
//The heavy lifting part of the website goes here
HTML meta tags:
HTML <meta> and <link> tags are the two most important parts of the website development. It is so because, if you are using a website to sell your product, your prime objective should be to ensure ranking in the search engine. A popular term Search Engine Optimization (SEO) is a approach that will help you to gain ranking in the search results. To achieve that approach meta tags are very important. So, let’s get started with <meta> tags and <link> tags. There are number of <meta> tags but in this 7 day HTML tutorial, I am going to show you about the fundamentals.
- Meta Keywords: The syntax <meta name=”keywords” content=”your keywords goes here, learn HTML in 7 days, HTML tutorial, 7 day HTML tutorial, and so on”>. The name=”keywords” identifies that you are going to declare it as a keyword and the content keeps your list of keyword name. Since, <meta> tag does not have a closing tag, but you need to close it as shown in the keyword syntax.
- Meta Description: You might have noticed that when you search for a keyword a summary or description copy about the web page appears in the search results. So, to do this, you need to declare (mandatory) a meta description tag which is an important factor for Search Engine Optimization (SEO). The syntax is <meta name=”description” content=”Put the summary of the web page here.”>
- Meta Viewport: The search engines give much more weight to the responsive websites. A web page that can be minimized to small screens or depending upon the size of the device screen is called responsive website/ web page. So, it is a mandatory option for you to declare a meta viewport tag. The syntax is <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
- Link icon image: The HTML code to add icon image to your site is <link rel=”icon” href=”your_icon.png” type=”image/png”> where in this case the image is of type .png (recommended image extension).
- Link your CSS file: There are four ways to link CSS to your HTML code.
- Inline CSS: In this method, you have to write the CSS code inside HTML element to primarily add style to that particular element in the web page. eg. <p style=”color: red;”>This is an Example of Inline CSS</p>
- External CSS: Suppose, you have the CSS in a separate file which has to be in .css extension. Now, to link it in your web page use the code inside the <head></head> tags <link rel=”stylesheet” type=”text/css” href=”your_css_file.css” media=”screen”/> where the media is optional and has different meaning (you will learn as you go with the tutorial). This is highly recommended when you are styling the whole or most of the web page.
- Embed CSS: In this method, you have to add the code <style type=”text/css”>//CSS code goes here</style> inside <head></head> tags.
- Importing CSS: In this method, you can import the external .css extension file just like external css method but the code is a bit different. eg. @import “your_css_file.css”;