HTML Tutorial for Beginners- Part-1

HTML Tutorial For Beginners

HTML is a standard language used for creating a website. Nowadays we use HTML, CSS(cascading style) and JavaScript while creating a website. HTML is used for creating the structure/the skeleton of a website, CSS is used to give the website a proper look and javascript is used to performing any technical functions. This is just a brief introduction to HTML tutorial for beginners.

Here is a basic HTML code:-

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

This is going to be the structure of any HTML page. Inside it, you can add anything you want. Nowadays everyone is using web builders and other tools but what I believe is you should know the basics which will definitely help in tweaking small things which you might not find in web builder tools or you might find them while using the tools. So let’s get back to building website.

 

Starting from the top:

1.<!DOCTYPE html> –> Here DOCTYPE to determine how to render a page. Not including it can cause issue. Its            basically tells the browser what type of document it is.

2.<html> ……</html> —> Now inside this tag we need to include all the html code otherwise while executing the           .html file the html code won’t get recognized even if it is correct. It will directly view as a text in the webpage.

3.<head>…… </head> –> HTML metadata is data about the HTML document. It doesn’t get displayed. It defines           the document title, character set, styles, links, scripts, and other meta information. The following tags describe             metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

4.<body>…..</body> –>It contains all the contents of an HTML document, such as text, hyperlinks, images,                   tables, lists, etc.

5.<h>…</h> & <p>…</p> —> Are html tags that are used while writing a heading or a paragraph. There are lots           of tags used in html, so we will cover it as we move forward.Don’t worry.

Now while writing an HTML page you can use notepad or notepad++. You can use the above code. Write the code in a notepad or notepad++ then save as Index.html (file name), change the save type to all files or .html file and open with any browser. Done your first web page!

 

html tutorial for beginners

Now this page kinda looks too simple so let’s give it some background color, some style and let’s place the heading at the middle as it supposed to be.

Basically, we can use CSS in three ways:

  1. We can mention the CSS code inside the <style> tag in the HTML. This method is known as Internal.

eg:-

  1.      <head>
    <style>
    h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
    }
    p  {
    color: red;
    font-family: courier;
    font-size: 160%;
    }
    </style>
    </head>
  2. Or we create a CSS file and mention the name in the html file. This method is know as External.

eg:-

<head>
<link rel=”stylesheet” href=”styles.css”>
</head>

3.And the 3rd way is Inline- by using the style attribute in HTML elements. eg:-

<h1 style=”color: red;”>Heading 1</h1>

I prefer external css.

 

We are gonna use the same HTML file and add some styling to it using external css file.

index.html

<!DOCTYPE html>
<html>
<head>

<link rel=”stylesheet” type=”text/css” href=”style.css”>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 

style.css

body {

background: #ADD8E6 url(“flower.png”) no-repeat right top;

}

h1{

text-align:center;

}

p{

text-align:center;

font-family: “Times New Roman”, Times, serif;

font-size: 20px;

}

The final look:

html tutorial for beginners

Now coming to the CSS part we have used some attributes like background,text-align,font-family and font size. By looking at their name you can figure out what is their role out here.

Now inside CSS file, we have used body{…}, h1{…..} and p{….}. For each part, we have defined individually.

background: #ADD8E6 URL(“flower.png”) no-repeat right top;

I have given a background color–>#ADD8E6(hex code for  color) as well as a picture–>url(“flower.png”)

no-repeat –>we are using this to avoid repeating of the picture, this happens when the resolution of the picture is low.

right top —>mentioning the position of the picture.

 

Comodo SSL