Simple HTML hints (part_2)

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,

< img src=”Mypic.jpg” width=”300” height=”400” alt=”image cannot found”/>

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.

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>

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>

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

<div id=”introduction”>

</div>

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,

<div id=”quotation”>

<blockquote>

<p>

<i>” Here is quotation from somebody else. “</i>

</p>

</blockquote>

For citation, you can use “cite” tag. This element has no difference with “i” and “em” elements.

“strong” element makes the text bold, it is exactly does the same thing such as “b” tag.

send your idea and information to kasra.madadipouya@geeksweb.eu.org

Leave a Reply