HTML Online Tutorial Contents

Following are the posts for HTML online Tutorial. To learn everything about HTML, just read these posts: HTML Online Tutorial HTML TAGS (2) HTML BASICS (3) HTML ELEMENTS (4) HTML ATTRIBUTES (5) More »

XHTML

XHTML stands for Extensible Hypertext Markup Language. It is also known as XML (Extensible Markup Language). It is a markup language. In XHTML, there are no predefined tags. The user defines the More »

HTML SUMMARY

In this tutorial, you learned: HTML Introduction HTML Tags HTML Basics HTML Elements HTML Attributes HTML Paragraphs HTML Headings HTML Formats HTML Image HTML Links HTML Lists HTML Frames HTML Table After More »

HTML TABLES (13)

HTML Tables are used to arrange data in web pages. HTML allows the use of tables by <table>…</table> tags. Each row in HTML table is recognized by <tr>…</tr> tag. In each row More »

HTML FRAMES (12.2)

Nested frames example: For the following example to work, there are two other simple HTML files : “HMTL11e1 frame a.html” and “HMTL11e1 frame b.html”. your browser will divide your screeub half. The More »

 
Slide2

Features of XHTML

We have concluded some of the significant features of XHTML in this post. So that you can understand it better.

XML is to structure, store and transport:

XHTML basically does not do anything . It is only used to structure, store and transport information. Consider an example of sending an email to your friend. In XML the text of your email should be like this:

<note>
<to>friend</to>
from>me</from>
<heading>xml example</heading>
<body>I am a text of example email written in xml</body>
</note>

The person you are sending your email is written inside <to> ../<to> tags. The from tag has you name in it. The subject of your email is mentioned in heading tags. Similarly, the actual body of your email is written in the body tags.

You should know that these tags will not do anything by themselves. You still have to develop a code which will send, receive and display this information to your friend. i.e. which will pick the header information and send it to your fiend so that it will appear in the subject field on his end

You need to invent your tags:

In XHTML, you have to define your own tags, there are no predefined. For example, the tags which are mentioned in above example, like to, from, header and body are not defined in XML standards. But on the other hand, the tags which you used in HTML are predefined. Even then you can only create a HTML document with only those tags which are defined in HTML standards like the <p> tag used to create a paragraph in HTML. All in all, you can not only define your own tags in  xml but also can create your very own document structure.

Is XHTML replacing HTML?

NO, XHTML is not considered as a replacement to HTML. In fact, XHTML complements HTML. As described in earlier post (HTML BASICS), HTML is used to format the data and then display it, while XHTML is used to transport data.

In the beginning, HTML was considered as extremely important, but now XHMTL has become as important as XHTML. Because it is now used as a mode of transmission between applications.

In this post you have understood some significant features of XHMTL. In the next post, we will explain the ways in which XHTML is used.

To get a mobile app for your business visit www.codescamp.com

Book a free consultation today!

Learn how to use CSS Selectors

Learn how to use CSS Selectors:

As explained earlier. you can use selectors to select certain HTML elements and manipulate them as well. The elements can be selected or found on the basis of their classes, id, types, attributes and their values etc. Following are example of few selectors:

Element Selector: This selector is used to chose the elements based on their name. You can select all <P> elements (as described in HTML Paragraphs,  HTML Paragraphs 2 this is a paragraph element) on one page and can align the text to right and set the color green by using following example:

p

{

text-align: right;

color: green;

 }

Id Selector: This selector is used to find or select any element by its id attribute of HTML tag. Since the id tag is unique on the page therefore you can use it to find the unique element on any page. You must remember that to select or find a unique id element, you must put a hash character followed by the element’s id. For example, you want to apply a style to the paragraph element whose id is “Paragraph3”.

#Paragraph3

{

text-align: left;

font-family: Comic Sans M

}

In the above example, the color of paragraph will be green and the alignment will be set to left and the font will be set Comic Sans M.

Class Selector: This selector is used to find the elements with a particular tags.  This selector uses HTML class attributes. You must remember that to write a period character, you must put a period character before the class name. In the following example, all the elements with class = car will be aligned to left and font will be Comic Sans M.

.car

{

text-align: left;

font-family: Comic Sans M

}

You have the ability to select a particular element of one class as well. For example, The paragraph element p will have the left alignment and Comic Sans M font.

p.car

{

text-align: left;

font-family: Comic Sans M

}

Grouping Selectors:

But what if you want to give various elements same style, you cannot write a code for each element separately as:

h1

{

text-align: left;

color: green

font-family: Comic Sans M

}

h2

{

text-align: left;

color: green

font-family: Comic Sans M

}

p

{

text-align: left;

color: green

font-family: Comic Sans M

}

h3

{

text-align: left;

color: green

font-family: Comic Sans M

}

 

To solve this issue you can group various elements as follows and assign them the same style.

h1,h2,p,h3

{

text-align: left;

color: green

font-family: Comic Sans M

}

In the above example, h1,h2,h3 and p will be left aligned, and green colored and with the font Comic Sans M.

 

To get a mobile app for your business visit www.codescamp.com

Book a free consultation today!

Understand the CSS Syntax or Lexical Structure

Understand the CSS Syntax or Lexical Structure:

The lexical structure of CSS is the set of rules that explains how to write code or program in that language. This is also known as CSS syntax. You can use CSS to associate various rules to the elements which will appear on your website. These rules are responsible for the content of those elements which should be rendered. The CSS rule is basically composed of two parts:

Selector: It shows those element or elements on which declaration is applied. If this applies to more than one element then you can use coma to separate the list of elements. Or you can say that it is the name of HTML tag or element to be defined by user.

Declaration: By using declaration you can set how the elements should be styled which are mentioned in the selector.

Example:

td {width:25px;}

Here td is a selector and 25px is Declaration. The declaration has two parts which are usually separated by colon:

  1. Property
  2. Value

Selector {Property: Value}

Property:

It is the property of the selected elements which you want to declare. It is usually the attribute of the HTML tag.

Value:

It is the value of the property of the HTML element or tag.

Example:

H1 {color: maroon}

In the above example, “Title” is the HTML element name, “Color” is the attribute to be changed and “maroon” is the value of the attribute.

It is possible to modify one or two tags at the same time e.g.

H1, H2 {color: yellow}

In the above example, you can change the color of any headings of size H1 and H2 to yellow.

H1,H3 { color: green; font-family: Comic Sans M}

In this example, you can change more than one property for more than one elements. In the above example, the color and font of both H1 and H3 heading will be changed to green and Comic Sans M respectively.

It is also possible to modify one or two attributes of the same tag at the same time e.g.

H1 {color: maroon; font-family: Comic Sans M}

The way in which element or elements can carry the attributes and how the attributes control the property of the element is similar to HTML or XHTML.

To get a mobile app for your business visit www.codescamp.com

Book a free consultation today!

Learn how to use JavaScript Comments, JavaScript Literals and JavaScript Identifiers:

Learn how to use JavaScript Comments, JavaScript Literals and JavaScript Identifiers:

First we will introduce you to comments style of this language. Mostly the comments style is same in some languages. You don’t mix the comment styles of various languages, it is necessary for you to know about how to write comments in JavaScript.

JavaScript Comments:

There are two styles of comments which are supported by JavaScript. First style is the one in which any text that you may put in between // and the end of each line is considered as a comment by JavaScript. This style is also known as Single Line Comment. Therefore this text is ignored by JavaScript. In the second style any text between /* & */ will be considered as a comment and will be ignored as well. You can use this style to enter paragraphs of comments in the code. Following are some examples of JavaScript comments:

//This is a first style of comment

/* This is a second style of comment */

/*You can enter the paragraphs of comment like this in your code.

*This style can be used to provide introduction of your program

*Or this style can be used to explain each instruction in your code.

*/

JavaScript Literals:

Any data which will appear directly in a program is known as a Literal. For your understanding we have provided various examples which are:

“i am a literal”                // A string of text

1989                               //The number is 1989

true                                // A Boolean value

null                                 // shows an absence of an object

{2,5,7,8,9,1,5,7,5}          //This is a way to initialize an Array

JavaScript Identifiers:

The identifier is basically a name. The words which are used to name variables, functions and labels of loops in JavaScript are known as Identifiers. You must remember that the identifier must start with a letter, dollar sign ($) or an underscore (_). The succeeding characters can be digits, letters, dollar sign or even underscore. You must remember that digits cannot be used as a first character of identifier. This rule exists so that JavaScript can differentiate between numbers and identifiers. You should notice the following legal identifiers:

you

i_am_blog

exercise14

_what is an identifier

$your

To make the code editing easy and portability the ASCII characters are usually used as in identifiers. But what if you want to use a mathematical symbol as a variable! To solve this problem, you can use letters and digits from an entire Unicode set in identifiers. Due to this, you can also use variables names from non-English languages. Following is example of mathematical symbol identifier:

var π = 3.14;

var ∑ = 4.2;

In this post, you have learned about comments, literals and identifiers in JavaScript. To Learn more about JavaScript subscribe to our RSS feed and newsletter and you will be expert in JavaScript in no time.

To get a mobile app for your business visit www.codescamp.com

Book a free consultation today!

Understand the basics of JavaScript Lexical Structure or Syntax

Understand the basics of JavaScript Lexical Structure or Syntax

Today, you will learn in detail about the lexical structure of JavaScript. The lexical structure of any programming language means the set of rules that explains how to write code or program in that language. Therefore, for new programmers like you, learning the lexical structure of any programming language is the first step. Moreover, the Lexical structure is also known as Syntax of the programming language. Therefore, for simplicity we will use the term SYNTAX throughout the tutorial. The first thing you need to know is a character set.

JavaScript Character set:

The Unicode character set is used to write JavaScript programs. You should know that Unicode supports every programming language on this earth & it is a superset of ASCII and Latin 1.

JavaScript Case Sensitivity:

This language is a case sensitive. In other words, the JavaScript variables Moon, MOON, MoOn etc are all considered as a different variables and can have distinct values stored in them. Same is the case with functions names, keywords and identifiers as well.

Confusion between JavaScript, XHTML and HTML case sensitivity:

You should notice that the XHTML is case sensitive, But HTML is not case sensitive. Therefore, for you being a new programmer it can be a little bit confusing. Another reason for the confusion is that the HTML has close association with the client side JavaScript. But with practice you will understand. For example there are various client side JavaScript objects and HTML Tags have the same name. i.e. these names can be written in any case in HTML, but in JavaScript they have to be case sensitive.

For better understanding consider the event handler named onclick of HMTL. This is sometimes written as OnClick or onclick in HTML because it is case insensitive. But this same attribute must be written only as onclick in JavaScript.

Line Breaks and White spaces in JavaScript:

The line breaks means that the command that terminates the line in a code and moves to the start of next line. The white spaces are basically the blank spaces in between the words. All those spaces that appear between the tokens in the programs are ignored by JavaScript. It mostly ignores the line breaks in the code as well.  This is useful for you, because you can easily create a neat and consistent piece of code by formatting and indenting freely. In other words, you can use as many spaces and free lines you want in your code to make it readable.

JavaScript usually considers following as a whitespace characters:

  • Tab
  • vertical tab
  • form feed
  • non breaking space
  • byte order mark
  • any character in Unicode  group

JavaScript considers following as a Line breaks or terminators:

  • line feed
  • carriage return
  • line separator
  • paragraph separator

You need to remember that the line feed and carriage return are considered as a single line terminator

Format Control Characters:

These characters controls the presentation of the text they occur in. For example, RIGHT-TO-LEFT MARK &  LEFT-T-RIGHT MARK. These characters are significant for the presentation of non-English languages. You should remember that they are allowed in comments, expression literals and string literals. But they are not allowed in identifiers like name of variables etc. Except, the ZERO WIDTH JOINER & ZERO WIDTH NON JOINER are allowed in identifiers but not in the first character place.

So, in this post you learned about Case Sensitivity, white spaces, line breaks and format characters of JavaScript. To Learn more about JavaScript subscribe to our RSS feed and newsletter and you will be expert in JavaScript in no time.

To get a mobile app for your business visit www.codescamp.com

Book a free consultation today!