Simple HTML hints part

This post is the second part of HTML tutorials. In fact these HTML tutorials are my notes when I was learning HTML I have made some changes to make it more comprehensive. I hope that it would be useful for beginner HTML learner.

For adding pictures into web pages, img element (tag) is used. Look at the example,

view raw test.html hosted with ❤ by GitHub

Alt attribute stands for alternative and it is used to display the text in front of alt when picture cannot be displayed because of any reasons. For instance, in text-mode web browsers, instead of picture alt text is displayed.

Note that image element is self closing tag.

When you resize image with img element attributes, the picture size actually is not changed and it just changes display size. Therefore, if the size of picture is so big, it takes time to load and if user saves picture, it will be saved in actual size not displayed size. So it is recommended to resize picture size with image editor such as Gimp before uploading it.

When you place content inside a div, it has no effect on the styling of the text it contains, except for the fact that it adds a break before and after the contained text. Unlike a p element, the div does not add any margins or padding. Keep in your mind that p tag should be used inside of div tag and the opposite way is not correct and does not work. Look at the example,

	<div>
	<p>
	First paragraph
	</p>
	<p>
	Second paragraph
	</p>
	</div>

view raw test.html hosted with ❤ by GitHub

It is good idea to separate different section of the web page with div tags. For instance, related paragraph could be put inside one div tag or introduction, main body and conclusion could be separated with div tag.

Nested div is also possible, if we separated related paragraph with div and separated introduction, body and conclusion with div tag then we have used nested div. See the example,

	<div>
	<div>
	<p>
	Introduction
	</p>
	</div>
	<div>
	<div>
	<p>
	Body paragraph 1
	</p>
	<p>
	Body paragraph 2 related to p1
	</p>
	<p>
	Body paragraph 3 related to p1
	</p>
	</div>
	<div>
	<p>
	Body paragraph 4
	</p>
	<p>
	Body paragraph 5 related to p4
	</p>
	<p>
	Body paragraph 6 related to p4
	</p>
	</div>
	</div>
	<div>
	<p>
	Conclusion
	</p>
	</div>
	</div>

view raw test.html hosted with ❤ by GitHub

You also can give a name to your div element like below,

	<div id="introduction">
	Something
	</div>

view raw test.html hosted with ❤ by GitHub

If you want to quote from somebody else you can use blockquote element. This element causes the text between open and close element to be intended. It is also good idea to mix i tag with blockquote tag like following,