Tuesday, January 30, 2018

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></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>

</body>

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

Or

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

<body>

<h1>Welcome in HTML Tutorial.</h1> 

</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 <sup>..........</sup> 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<sup>2</sup>. 2 is Super-Script(X²).</p>
---------------------------------------------------------------------------------

Sub-Script Text (<sub>) Tag

Its description is totally as same as the Super-Script. The Difference is
<sub>.........</sub> 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

Monday, January 29, 2018

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 ( )

The non-breaking space is represented with   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   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

HTML - Class 1 (Get Started with HTML)

Assalam-u-Alikum Guys,

First of all need to understand the basic Structure of HTML.

Structure should be like this :

----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>
----------------------------------------------------------------------------------------------------------------------
that is the BASIC structure of HTML.

Every document contain <!doctype html> tag that is Document type Declaration.
You see that All tags are starts must be ended. Example : <html> ....content.... </html>
Some tags has no need to ending. Example : <br/> - <!DOCTYPE html> - <input>
All contents that web page contain written between the <body> tag.

Now lets Start :

First of you need to OPEN text editor. No need to write just GO TO File>Save.
Now write name of file with Extension .html (Named the file as you want)
and save the file.

For Example : sample.html

Your File contains :

----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1st class</title>
</head>

<body>

<h1>That my 1st Class of HTML</h1>

<p>I am from Attock, Pakistan......and that is my first paragraph</p>

</body>

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

afterward save the file (CRTL + S).

OPENING the HTML file :

1- Goto location where you SAVED the file.

2- Right click on file and click on open with.

3- Select your browser.

you will see- a heading (That my 1st Class of HTML) - a paragraph (I am from Attock, Pakistan......and that is my first paragraph)

that are we write between the <Body> tag in our file.

Note : Don't worry if example use tags or something ambiguous taht you have not learned until. You will learn about all the Tags in the next POSTs.

INSHA ALLAH

Thanks for paying attention.

Tutor : Asad Saleem

Introduction To HTML

Assalam-u-Alikum guys,

Welcome to my HTML5, CSS3 and Bootstrap Tutorial

First of all to participate in my tutorial you need a Text Editor .
So, if You on MAC you can used Edit_Text or download a Free software named Text wrangler abd if you are using Windows you can used Notepad or Notepad++ or Sublime Text Editor.

In HTML we will cover approximately all the Tags and then move on towards HTML5 basic Page Layout for a Responsive website.

INTRODUCTION TO HTML :

HTML is the standard markup language for designing Web pages.

HTML's abbreviation is Hyper Text Markup Language
HTML describe the structure of Web pages using Markup
HTML components are the building pieces of HTML pages
HTML elements are represented by tags or tags are used for designing our web page.
HTML tags, For Example : "Heading", "Body", "Table" etc
Browsers do not display the HTML tags,, yet utilize them to render the substance of the page.

HTML5 is latest Version 5 of language.

Older version are 4.01 and XHTML 1.0

HTML5 also supports the multimedia such as AUDIO and VIDEOs.

HTML5 will enable web designers to use cleaner, neater code. We can remove div tags and replace them with semantic HTML5 elements.

We will formally start our HTML Tutorial from Next Post.

Thanks to all.

Tutor : Asad Saleem

Next Level Tutorial

Tuesday, January 30, 2018

HTML - Class 5 - HTML Comments

Introduction

Multi-line Comments

Conditional Comments

Comment Tag (<comment>)

HTML - Class 4 Text Formatting in HTML

Bold Text (<b>) Tag

Italic Text (<i>) Tag

Underline Text (<u>) Tag

Strike Text () Tag

Mono-spaced Font (<tt>) Tag

Super-Script Text (<sup>) Tag

Sub-Script Text (<sub>) Tag

Inserted Text (<ins>) Tag

Deleted Text (<del>) Tag

Larger Text (<big>) Tag

Smaller Text (<small>) Tag

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

Monday, January 29, 2018

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

Line break (<br/>)

Centering Content (<center>)

Horizontal Line (<hr/>)

Non-Breaking Spaces ( )

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

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 - Class 1 (Get Started with HTML)

Note : Don't worry if example use tags or something ambiguous taht you have not learned until. You will learn about all the Tags in the next POSTs.

INSHA ALLAH

Thanks for paying attention.

Tutor : Asad Saleem

Introduction To HTML

Popular Posts

Tuesday, January 30, 2018

Introduction

Multi-line Comments

Conditional Comments

Comment Tag (<comment>)

Bold Text (<b>) Tag

Italic Text (<i>) Tag

Underline Text (<u>) Tag

Strike Text () Tag

Mono-spaced Font (<tt>) Tag

Super-Script Text (<sup>) Tag

Sub-Script Text (<sub>) Tag

Inserted Text (<ins>) Tag

Deleted Text (<del>) Tag

Larger Text (<big>) Tag

Smaller Text (<small>) Tag

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

Monday, January 29, 2018

Line break (<br/>)

Centering Content (<center>)

Horizontal Line (<hr/>)

Non-Breaking Spaces (&nbsp;)

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Note : Don't worry if example use tags or something ambiguous taht you have not learned until. You will learn about all the Tags in the next POSTs. INSHA ALLAH Thanks for paying attention.

Tutor : Asad Saleem

Non-Breaking Spaces ( )

Note : Don't worry if example use tags or something ambiguous taht you have not learned until. You will learn about all the Tags in the next POSTs.

INSHA ALLAH

Thanks for paying attention.