HTML - Class 6 - HTML Images

Learn HTML

Assalam-U-Alikum Guys,

Welcome again, Today we learn about Images in HTML. Images are very important to beautify as well as to depict many complex things in simple way on your Web Page.

Never Doubt the Power of an Image

              Something that words not Explained But Image Can. means images play a vital role in understanding.This Tutorial POST will take you through simple steps to use images in your web page.

This Post Contains :

• Insert an Image
• Set Image Width and Height
• Set Image Border
• Set Image Alignments
• Using an Image as a Links

Basic Syntax :

In HTML, <img> Tag is used for defining the images.

The <img> is an empty Tag, and it contains a list of attributes only. 

The <img> Tag has no ending tag.

<img src="address or URL" style="width:width; 
height:height;" alt="Any_text_to Display">

• The src attribute specifies Address/Location of Image or the URL of the image.
• The alt attribute shows an alternate text for an image, if you cannot view image because of an Error or Connection problem or if you URL or Address id invalid.

Insert an Image :
To insert an image in web page <img> is used and specify the address or location of image using src (source) attribute. 

Some Rules for src Attribute are :

1. Make Sure that you specify a valid URL or Address for image.
2. Image name is always be Case Sensitive.
3. You can use these image Formats : JPEG, JPG, PNG, GIF or based on your need.  

Example :

<img src="D:images/bunny.jpg">

Set Image Width Height :

In HTML, you can also set the height and width of an image based on your requirement. For that purpose we can use Height and Width attributes of <img> Tag.

we can specify Height and Width in term of 
px  : that specify dimensions in pixels.
%  : Percentage of its original size.
em : allow you to change as per its parent element.

Example :

<img src="D:images/bunny.jpg" width="100px" height="100px">


Set Image Border :

By default, image will have border around it with everything is zero as well as you can specify border thickness, color, type by as your needs by two ways.

First one in Style Attribute and second one is separately using the border attribute. 

A thickness zero (0) means no border arround the picture.

Example :

<img src="D:images/bunny.jpg" width="100px" height="100px" border="3px">

<img src="D:images/bunny.jpg" width="100px" height="100px" 
Style="border:solid 5px black;">

Set Image Alignments :

In HTML by default, Images are Left Aligned or at he Left side of web page but to align them as per need we use Align attribute to set it in right, left or center.

Example :

<img src="D:images/bunny.jpg" width="100px" height="100px" 

align="center">

Using an Image as a Link

In HTML we can also use our images as a link, simply nest the <img> tag inside the <a> tag or write the <img> tag in between the <a> and </a> Tag.

<a href="https://weblayoutexpert.blogspot.com/">

  <img src="D:images/bunny.jpg"style="width:100px;height:100px;">

</a>

Thank you all for paying attention.

Good Bye (Allah Hafiz)

Tutor : Asad Saleem

HTML - Class 5 - HTML Comments

https://weblayoutexpert.blogspot.com/

Assalam-U-Alikum Guys,

Welcome again, Today we learn about Comment in HTML. Basically adding Comments will increase the Readability of our Code or programming. Let suppose you check your code after along period of time, at that you can't properly understand it if you add proper Comments in your source code during coding, that enable understanding about code even after passing many years. 

Now lets Start,

Introduction

The HTML Comment element is basically used to add the comments in an HTML document. Means comment elements make the content as disable code in a Web page, which is not take as part of code. Basically  purpose of Comments is readable explanation or annotation in the HTML code. 

• The HTML comment elements begin with <!–– and the comment closes with ––>.
• The HTML comment elements are not displayed in the web browser. 

For example:
------------------------------------------------------------------------------------------------------------------

<p><!-- this tag use for paragraph line --></p>

------------------------------------------------------------------------------------------------------------------

Multi-line Comments

In HTML, using comment elements you can also comments multiple lines text of a HTML page. Comment multiple line text must Begin with <!– tag and End with –> tag and place all text that treat as comment in this tag.

• HTML comment can span multiple line in you HTML document.
• Informative text comments when you explain to the code.

For Example:
------------------------------------------------------------------------------------------------------------------

   <body>
      <!--
         <p> This is a multiline comment </p>
         <p>It can span through as many as lines you like</p>
      -->
   </body>


------------------------------------------------------------------------------------------------------------------

Or

------------------------------------------------------------------------------------------------------------------

   <body>

      <h1>Welcome in HTML Tutorial.</h1> <!-- welcome heading that show in web page -->
   
   </body>
------------------------------------------------------------------------------------------------------------------

Conditional Comments

HTML conditional comments are nothing but exactly same like simple comment element in HTML that will be used by only Internet Explorer.

• Conditional comments only work in IE.
• Comments between <!–[if IE]> and <![endif]–>.
• A conditional comment block that is ignored by down-level browsers.

Comment Tag (<comment>)

HTML comment <comment> element is used to insert comment in the source code of HTML. 

• Comment Tag is supported by only few browsers.
• It start with <comment> Tag and end with </comment> Tag.

For Example:

   <body>
      <p>IE is <comment>not</comment> supported the HTML comment                   tag.</p>
   </body>


Some more things :

• If we use JavaScript in our HTML page. then "//" two Slashes in front of Text that need to make Comment.
• If we are using the CSS in HTML page then "//" for single line Comment and /*...content....*/ is used for multi-line Commenting.

Thank you all for paying attention.

Good Bye (Allah Hafiz)

Tutor : Asad Saleem

HTML - Class 4 Text Formatting in HTML

Assalam u Alikum Guys, 

Welcome again,

Today we learn about Text Formatting in HTML. 

Basically Formatting is known as the appearance or look or presentation of our Text in HTML. Formatting is also know as layout of Text.
HTML provide Tags for Formatting of Text
For Example : Bold Text, Italic Text, Underline Text, Strike Text, Monospaced Font, Super-Script Text, Sub-Script Text, Inserted Text, Deleted Text, Larger Text, Smaller Text, Grouping Content.

One by one all above Tags will Explain with Example.

Bold Text (<b>) Tag

<b> Tag is used Bold the Text in HTML without any extra Importance.
<b> Tag always start with <b> and end with </b>

HTML Example :
---------------------------------------------------------------------------------
<p>My mother has <b>blue</b> eyes.</p>
---------------------------------------------------------------------------------

Italic Text (<i>) Tag

<i> Tag is used make the Text Italic in HTML without any extra Importance. Means Text slant the text little bit toward right side.
<i> Tag always start with <i> and end with </i>

HTML Example :
---------------------------------------------------------------------------------
<p>My mother has <i>blue</i> eyes.</p>
---------------------------------------------------------------------------------

Underline Text (<u>) Tag

<u> Tag is used make the Text Underlined in HTML without any extra Importance. Means all the Text between <u>.........</u> displayed with underline.
<u> Tag always start with <u> and end with </u>

Strike Text () Tag

<strike> Tag put a line through the Text in HTML. Means all the Text between <strike>.........</strike> displayed with Strike-through which is thin line through the Text.
<strike> Tag always begin with <strike> and end with </strike>

HTML Example :
---------------------------------------------------------------------------------
<p>My father has <u>blue</u> eyes.</p>
---------------------------------------------------------------------------------

Mono-spaced Font (<tt>) Tag

<tt> Tag is used in HTML to display the Text in Mono-Spaced means "Each letter in the text have same distance or width with its neighbor letter". Most of the fonts are known as variable-width fonts because different letter have different widths. 

(Example : The Letter "M" has greater width than an another Letter "I") 

but in Mono-Spaced fonts each and every letter has same or equal width.

<tt> Tag always begin with <tt> and end with </tt>

HTML Example :
---------------------------------------------------------------------------------
<p>My <tt>uncle has blue</tt> eyes.</p>
---------------------------------------------------------------------------------

Super-Script Text (<sup>) Tag

The content or Text between the ^.......... Tags/Element is written in form of Super-Script the font size is same as the character surrounding it but is displayed half a character's height. 

(Example : Mostly in mathematics we write "Square of 'x' " as X² is the Example of Super-Script).

HTML Example :
---------------------------------------------------------------------------------
<p>The Square of 'x' " is written as X². 2 is Super-Script(X²).</p>
---------------------------------------------------------------------------------

Sub-Script Text (<sub>) Tag

Its description is totally as same as the Super-Script. The Difference is 
_......... element is used. 
(Example : Mostly in Chemistry we write a Formula "H2O" as H₂O is the Example of Sub-Script).

HTML Example :
---------------------------------------------------------------------------------
<p>In the formula "H<sub>2<sub>O" is written as as H₂O  . 2 is Sub-Script.</p>
---------------------------------------------------------------------------------

Inserted Text (<ins>) Tag

Anything that is Appeared within the <ins>.......</ins> element is displayed or present as Inserted Text.The formal difference between depends on the HTML specification that we choose to regard as official.

HTML Example :
---------------------------------------------------------------------------------
<p>My mother has <ins>blue</ins> eyes.</p>
---------------------------------------------------------------------------------

Deleted Text (<del>) Tag

Anything that is Appeared within <del>.......</del> element is displayed or present as Deleted Text.The formal difference between depends on the HTML specification that we choose to regard as official.

HTML Example :
---------------------------------------------------------------------------------
<p>My mother has <del>brown</del> eyes.</p>
---------------------------------------------------------------------------------

Larger Text (<big>) Tag

Anything that is written within the <big>.......</big> element is displayed little bit larger or one font larger than the rest of Text.

HTML Example :
---------------------------------------------------------------------------------
<p>My father has <big>black</big> eyes.</p>
---------------------------------------------------------------------------------

Smaller Text (<small>) Tag

Anything that is written within the <small>.......</small> element is displayed little bit smaller or one font smaller than the rest of Text.

HTML Example :
---------------------------------------------------------------------------------
<p>My sister has <small>green</small> eyes.</p>
---------------------------------------------------------------------------------

Grouping Content (<div>, <Span>) Tag

In HTML <div>, <Span> tags are used for grouping the elements or allow us to group together several elements to create sections or sub sections of page.
Means the Tag divide the elements in Block Form. 
(Example : More than one <p> or other tags within <div>........</div> elements and also can apply same designing to all elements in that <div>.)
The <span> tag enable in Web page to group/blocked inline-elements in a document/Web page.

The <span> tag makes no visual effect by itself.

HTML Example :
---------------------------------------------------------------------------------
<div style="color:#0000FF">
  <h3>This is Div Example heading</h3>
  <p>This is Div Example paragraph.</p>
</div>
---------------------------------------------------------------------------------
<p>My baby has <span style="color:blue">blue</span> eyes.</p>
---------------------------------------------------------------------------------


Thanks for paying attention !

NOTE : Friends and Fellow Plzzzzzzzzzzzzzzzzz Follow me to get my post. You get Notification on each new Post. Thank You.


If you get any Mistake or any confusion in POST so plzzzzzzz tell in Comments. Questions are also be Entertained.

Tutor : Asad Saleem

HTML - Class 3 Tags (Line break, Centering Content, Horizontal Line, Non-Breaking Space)

Assalam u Alikum Guys, 

In this POST, we discuss some more HTML Tags Line break, Centering Content, Horizontal Line, Non-Breaking Space etc.

• Line break (<br/>)

HTML break Tag use to insert a single line break and enable the next character starts from the next line. HTML break Tag start with <br/> but there is no ending Tag. Just use the <br/> Tag, onward text or element placed in next line. 

• HTML's <br/> Tag is an Empty Tag.
• Break Tag is useful for writing an Addresses or poems.

Example :

<p>hello <br/> How are you </p>

• Centering Content (<center>)

HTML center Tag <center> is used to put any content or element in the center of the page. That centered the content only Horizontally.

• HTML's center Tag is always begin with <center> and must be end with </center>. Carefully need or must be close the center Tag otherwise that put all remaining content horizontally align.
• We can use That Tag but better idea is to align the elements /content in center is using CSS (center-align) that will in future POST's.
• One of the drawback of <center> Tag is that is Not supported in HTML5.

Example :

<center>All that content aligned in center of page Horizontally.</center>

• Horizontal Line (<hr/>)

In HTML Horizontal Line (<hr/>) Tag is used to Visually Break-up the section of HTML page or Web page. In another words, a horizontal line comes between the is sections.
or the document break in an HTML page or Web page.

• The <hr/> tag must start with <hr/> but there is no ending Tag for <hr/> in HTML means that is an Empty element (Element that have no Ending Tag like : <br/> Tag ).
• You can give Line between two paragraphs or some time used for underlining the text but that is not a good idea.
• In HTML5, <hr/> Tag define a thematic break.

Example :

<p>This paragraph is above the Horizontal Line</p>

<hr/>

<p>This paragraph is above the Horizontal Line</p>

• Non-Breaking Spaces (&nbsp;)

The non-breaking space is represented with &nbsp; it is a common character entity that used in HTML. means usually, HTML not allow the extra space between text or content of paragraph or other any other element so using &nbsp; we add spaces in our content.

or That is a space that will not break into a new line.

• That is Like ordinary space that we used.
• Ampersand (&) must add in start and Semicolon (;) must be placed at the end of &nbsp.

Example :

<p>This&nbsp;paragraph&nbsp;is&nbsp;above&nbsp;the&nbsp;Horizontal&nbsp;Line</p>

Result: This paragraph is above the Horizontal Line


Thanks for paying attention !

ALLAH Hafiz and Take Care.......

Tutor : Asad Saleem

HTML - Class 2 (HTML's (Elements,Attributes, Headings, paragraphs))

Assalam u Alikum Guys,

Now we move toward All things of HTML that are frequently used in web designing.

• HTML Elements

An Element of HTML refers to "Everything that is have Starting Tag and Ending Tag"

<tagname>Content goes here...</tagname>

Starting Tag : <html>  ,   <h1>   ,    <p>

Ending Tag : </html>  ,   </h1>   ,    </p>

HTML element with no content known as Empty element. 

like : <br> or <input> etc.

HTML tag can also be Nested means on Tag in between of an another Tag.

like : <p>Hello ! My name is <h1>Asad</h1>. I am from Pakistan.</p>

NOTE : A common mistake usually made by Developer is : Leave the ending Tag that cause unusual behavior. or not properly implementation of Web Design.

• HTML Attribute

Attributes belongs to Element or Tags of HTML. 

Basically, describe any Element or gives information of any Element of HTML.

Some of attributes are :

"lang" for <html> Tag.

"src" and "alt" for <img> Tag

"width" and "height" for more than one Tags.

All HTML elements have different and some common attributes.

Attributes are discuss in detail in Upcoming POSTs when we Discussing each Tag individually.

NOTE : use small letters for attribute as well as use single quotes or double quotes for attribute value.

• HTML Headings 

Every one what are Headings so, i just tell you how to use Headings in HTML.

<h1> to <h6> tags are used for Headings
<h1> is largest Heading and <h6> is the Smallest.

Something liike this :

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

• HTML Paragraph

HTML paragraphs are defined by using : <p> Tag.

Example : 

--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph No 1.</p>
<p>This is a paragraph No 2.</p>
<p>This is a paragraph No 3.</p>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------

Another things is : 

In HTML, we can't change the Result with some extra spaces or extra lines in our HTML code.

Our browser will remove all extra spaces and extra lines when the page is displayed in Browser.

so, Keep all format that used in HTML coding we can use <pre> Tag. Means all extra spaces and extra lines remain display in browser

Example : 
--------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>

<pre>
This 
is          a 
paragraph         ...... Hello        World. . . .
</pre>

</body>

</html>
--------------------------------------------------------------------------------------------------------------------------

Thanks for paying Attention !

Tutor : Asad Saleem