Basic Skeleton of a WebPage

So lets start with writing some code of HTML/XHTML.

AS we by now that the major difference between HTML and XHTML is that HTML had no rules whereas XHTML has and XHTML includes HTML, CSS and JavaScript. XHTML is the latest version of HTML. So mainly I would be talking about XHTML as that’s the standard (at least for now).

HTML/XHTML is all made of special codes that are called ELEMENTS/TAGS/MARKUPS. All these terms represent the same thing. Its just that with passage of time and with newer version of XHTML, the name changed. As a developer we just need to know that these three are the same.
So lets start.

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

These are some of the very basic and the “Core Elements” of HTML/XHTML. These elements are required in every web page. As you can see, HTML/XHTML elements are in the form of

<element_name> </element_name>

That is angular bracket start (less than sign), element name, angular bracket close (greater than sign). This is the opening of the element. Then again angular bracket start (less than sign), slash (/), element name, angular bracket close (greater than sign). This is the closing of the element. And in between the opening and closing of an element, there would be some data depending upon which element your are using.

Congratulations, you have learned a major part of HTML/XHTML. All you need to know now is what are different elements available and what they do.

HTML/XHTML elements exist in two forms, paired elements and single elements. All the elements in this example are paired elements as they have a separate opening and closing. Single elements have start and end within themselves. We’ll see them as they come along. Lets see what these four elements are for.
  • <html> . . . . . </html>
The html element marks the start and end of a web-page. This clearly means that there can be only one html element in a single web-page. It is also called the “root-element”.
  • <head> . . . . . </head>
The head is a very important element. It contains information about the web-page itself. The content placed in the head section is never displayed directly on the web-page but it not only contains the information about the content that is placed on the page, but it also contains information about how the display of the content in the body section is controlled and how it is displayed. head has many optional elements placed in it. They are meta, script, style, and link. I’ll be describing them in a separate writing.
  • <title> . . . . . </title >
The text inside the title element is displayed in the title of the web page you are viewing. title element is always placed inside the head element.
<title>This is our first web page</title>
  • <body> . . . . . </body >
This is the main element of any web-page that actually contains all the text, images, audios, videos that are actually displayed on the page.
<body> Hello Welcome to our First Web page </body>

Code Example

Save the following code as first.html and view it in your browser.
<html>
<head>
<title>ProgrammerPlusPlus </title>
</head>
<body>
Welcome to our home page
</body>
</html>

No comments:

Post a Comment