HTML Tutorials for Absolute beginners : Basic code structure and links

HTML Tutorials for absolute beginners : Basic code structure

In this tutorial we will dig into the coding of HTML.How is the basic code structure of HTML document and so on.

html5tutorials

Following is the code structure of HTML document :

<html>

<head>

</head>

<body>

…..

…..

</body>

</html>

HTML statement has the opening and closing tags.Any document starts with <html> and ends with closing </html>

In head section we provide information about the page title.A title is something which is displayed in browser window at the top.It also contains the meta description and meta keywords for that particular page.If you hace a css,js or any other file linked to HTML file we mention it’s link in head section.

A link to css file is given as follows :

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

And title is given as follws :

<title>HTML tutorials for absolute beginners : tutorial 2 | Brainytuts.com</title>

Heading and Paragraphs:

In any web page we give headings h1,h2,h3,h4,h5,h6 as per the priority of the headings.Heading is given similar to other tags in HTML.

<h1></h1>

Whatever we write in between this tags is highlighted as heading 1.

Open your notepad and wite <h1>This is my first HTML page</h1> and save it as mywebpage.html and now open it in your web browser.You must see a heading at top of the page.

Similarly you can give <h2></h2>,<h3></h3>,<h4></h4> and so on.

Paragraph:

Paragraph is given by opening and closing <p></p> tag.The sentences between <p></p> comes in a paragraph.

Links :

Links are given by the following code .

< a href=”http://www.brainytuts.com”>HTML tutorials for beginners</a>

“HTML tutorials for beginners” is a text which displays this link.It is called as anchor text.When you click on this text the page http://www.brainytuts.com opens in your browser.In your notepad try this code and check whether it works.If you want to give link to an image in plae of anchor text you have to give image link.

<a href=”http://www.brainytuts.com”><img src=”images/portfolio.png”  alt=”portfolio” width=”250″ height=”150″ align=”middle” /></a>

In img src we are giving address of the image : if your image is present in c drive in images folder and the name of the image is image.jpg then the image link will be as follows :

<img src=”c/images/image.jpg” /> the alt tag,height and width are optional fields.

Alt tag Is a tag which tells information about image to search engine.Always write a informative alt tag to images.We will see in detail about it in images.

Now open your notepad file and try this things.If you are doing it well we will go towards our third tutorial and if you have some problems feel free to ask them.

One comment

Leave a Reply