What is Syntax? Syntax defines the rules of writing a particular language. Let's build our first first web page today. During the process of building the web page we will look at the basic building blocks of a web page. We start a html document with opening <html> tag and end it with a closing </html> tag.
<html> //first step in writing html page.
</html>
Inside the <html> tags we include <head> tags and <body> tags.
<html>
<head>
</head>
<body>
</body>
</html>
Inside the head tag we have <title> tag. It gives title to a web page and it is displayed on the title bar when a web page is loaded on a web browser. The process of writing tags inside another tag is called nesting. The outer tag is called as parent tag and tag's inside the parent tag are called children of parent tag - first-child,second-child, ..............nth-child. So let's include <title> tag inside <head> tag.
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>welcome to my first web page</p>
</body>
</html>
Let's refine our page according to latest HTML standard. To do this task let's take a look at history of html versions and DOCTYPEs. So what is a DOCTYPE? The html syntax requires a DOCTYPE to be specified to ensure that the web browser renders the page in a standard mode. Other than this DOCTYPE has no other purpose.
There are different DOCTYPEs for different versions of html.
1.HTML 4.01 transitional:
Around this point, development split off. The W3C focused on XHTML 1.0, and things like XHTML Basic became recommendations in 2000 and onwards. But Web designers didn't want to move to the rigid structure of XHTML, so in 2004, the Web Hypertext Application Technology Working Group (WHATWG) began working on a new version of HTML that is not as strict as XHTML called HTML5.
Difference between HTML and XHTML?
There are a number of differences between XHTML and HTML. But for now, all you need to know is that XHTML is HTML 4.01 re-written as an XML application. If you write XHTML, all your attributes will be quoted, your tags closed, and you could edit it in an XML editor. HTML is a lot looser than XHTML because you can leave quotes off attributes, leave tags like <p> without a closing tag </p> and so on.
The latest version of HTML is HTML5 and DOCTYPE for it is<!doctype html>. So we don't have to write those complex doctype's as we used write in older versions of the HTML. There are many new features of HTML5 which we will see later.
Before writing our code according to HTML5 standard lets look at one more thing i.e., character encoding.
So what is character encoding?
For the HTML syntax, Web developers are required to declare the character encoding. There are three ways to do that:
So here is our code in HTML5 standard:
<!doctype html>
<html lang="en"> <!--it tells browser that that this program is written in english -->
<head>
<meta charset="utf-8">
<title>My first web page.</title>
</head>
<body>
<p>Welcome to my first web page.</p>
</body>
</html>
so that's all for today in the next post I will discuss about different HTML elements.
<html> //first step in writing html page.
</html>
Inside the <html> tags we include <head> tags and <body> tags.
<html>
<head>
</head>
<body>
</body>
</html>
Inside the head tag we have <title> tag. It gives title to a web page and it is displayed on the title bar when a web page is loaded on a web browser. The process of writing tags inside another tag is called nesting. The outer tag is called as parent tag and tag's inside the parent tag are called children of parent tag - first-child,second-child, ..............nth-child. So let's include <title> tag inside <head> tag.
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>welcome to my first web page</p>
</body>
</html>
Let's refine our page according to latest HTML standard. To do this task let's take a look at history of html versions and DOCTYPEs. So what is a DOCTYPE? The html syntax requires a DOCTYPE to be specified to ensure that the web browser renders the page in a standard mode. Other than this DOCTYPE has no other purpose.
There are different DOCTYPEs for different versions of html.
1.HTML 4.01 transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://w3.org/TR/html4/strict.dtd">2.HTML 4.01 STRICT: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://w3.org/TR/html4/frameset.dtd">3.HTML 3.2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">DOCTYPEs of XHTML versions:1.XHTML 1.0 transitonal:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2.XHTML 1.0 strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3.XHTML 1.0 frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4.XHTML 2.0 transitonal:<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> The History of HTML
The first version of HTML didn't have a version number, it was just called "HTML" and was used to put up simple Web pages back in 1989 - 1995. In 1995, the IETF (Internet Engineering Task Force) standardized HTML and numbered it "HTML 2.0".
In 1997, the World Wide Web Consortium (W3C) presented the next version of HTML, HTML 3.2. It was folllowed by HTML 4.0 in 1998 and 4.01 in 1999.
Then the W3C announced that it would not be creating new versions
of HTML, and would begin to focus on extensible HTML or XHTML. They
recommend Web designers use HTML 4.01 for their HTML documents.
Around this point, development split off. The W3C focused on XHTML 1.0, and things like XHTML Basic became recommendations in 2000 and onwards. But Web designers didn't want to move to the rigid structure of XHTML, so in 2004, the Web Hypertext Application Technology Working Group (WHATWG) began working on a new version of HTML that is not as strict as XHTML called HTML5.
Difference between HTML and XHTML?
There are a number of differences between XHTML and HTML. But for now, all you need to know is that XHTML is HTML 4.01 re-written as an XML application. If you write XHTML, all your attributes will be quoted, your tags closed, and you could edit it in an XML editor. HTML is a lot looser than XHTML because you can leave quotes off attributes, leave tags like <p> without a closing tag </p> and so on.
The latest version of HTML is HTML5 and DOCTYPE for it is<!doctype html>. So we don't have to write those complex doctype's as we used write in older versions of the HTML. There are many new features of HTML5 which we will see later.
Before writing our code according to HTML5 standard lets look at one more thing i.e., character encoding.
So what is character encoding?
For the HTML syntax, Web developers are required to declare the character encoding. There are three ways to do that:
- At the transport level; for instance, by using the HTTP
Content-Typeheader. - Using a Unicode Byte Order Mark (BOM) character at the start of the file. This character provides a signature for the encoding used.
- Using a
metaelement with acharsetattribute that specifies the encoding within the first 1024 bytes of the document; for instance,<meta charset="UTF-8">could be used to specify the UTF-8 encoding. This replaces the need for<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">although that syntax is still allowed.
So here is our code in HTML5 standard:
<!doctype html>
<html lang="en"> <!--it tells browser that that this program is written in english -->
<head>
<meta charset="utf-8">
<title>My first web page.</title>
</head>
<body>
<p>Welcome to my first web page.</p>
</body>
</html>
so that's all for today in the next post I will discuss about different HTML elements.
Posts
0 comments:
Post a Comment