Conquest XHTML

Table of Contents

Chapter 1: HTML BASICS.
1.1. HTML Introduction.
1.1.1 What is HTML?.
1.1.2 Web pages.
1.1.2.1 Code Explained.
1.1.3 Terms to know..
1.2 HTML elements:
1.2.1 Nesting of HTML Elements.
1.2.1.1 Example Explained.
1.3 HTML attributes:
1.3.1 Attribute Example.
1.4. HTML text.
1.4.1 HTML headings.
1.4.2 HTML Comments.
1.4.3 Inserting Symbols In The Webpage:
1.4.4 HTML Line-Breaks.
1.4.5 HTML Empty Spaces.
1.5. HTML formatting.
1.5.1 Text Direction:
1.5.2 Abbreviations:
1.6 HTML pre formatting.
1.7 HTML fonts.
1.7.1 HTML - Font Size.
1.7.2 HTML - Font Color.
1.7.3 HTML - Font Face:

CHAPTER 2: HTML BASICS II
2.1 HTML links:
2.1.1 HTML Hyperlinks.
2.1.2 HTML - Email Links.
2.1.3 Target Attribute.
2.2 HTML lists.
2.2.1 Unordered Lists:
2.2.2 Ordered Lists:
2.2.3 Start Attribute:
2.3. HTML images:
2.3.1 Height and Width Attributes.
2.3.2 Image Alignment:
2.3.3 Image Links:
2.3.4 Thumbnails.
2.4 HTML tables:
2.4.1 Table Headers.
2.4.2 Table Caption:
2.4.3 Rowspan and Colspan Attributes:
2.4.4 Cell Padding:
2.4.5 Cellspacing:
2.5 HTML blocks:
2.5.1 <div> Element.
2.5.2 <span> Element.
2.5.3 Basic CSS:
2.5.3.1 Inline Styles.
2.5.3.2 Background Color.
2.5.3.3 Alignment of Text:
2.5.3.4 Font Styling:
2.6 HTML frames:
2.7 HTML Layouts:
2.8 HTML Colors:

Chapter 3: WEB FORMS.
3.1HTML Forms:
3.2 HTML input:
3.3 Text fields:
3.3.1 Maxlength Attribute:
3.4 HTML passwords:
3.4.1 Attributes of Password Fields:
3.5 HTML - Radio Buttons.
3.5.1 Checked Attribute:
3.6 Checkboxes:
3.6.1 Pre-checked Checkboxes:
3.7 Reset Button:
3.8 Submit Button:
3.9 Upload Forms:
3.9.1 Limiting the size of uploading file:
3.10 Textareas:
3.10.1 Textarea Wrap:
3.10.2 Disabling the Textarea:

Chapter 4: HTML Multimedia
4.1 Web Media.
4.1.1 Audio Formats.
4.1.2 Video Formats:
4.2 HTML audio:
4.2.1 Display attributes:
4.2.2 Functional Attributes:
4.3 HTML Video:
4.3.1 Video/Audio Thumnailing:
4.4 HTML YouTube:

Chapter 5: XHTML.
5.1 XHTML Introduction.
5.2 Element Syntax.
5.3 Attribute Syntax.
5.4 Conversion of HTML documents into XHTML:
5.4.1 XHTML - Elements.
5.4.2 Syntax Rules for XHTML elements:
5.5 XHTML Attributes:
5.5.1 Syntax Rules for XHTML elements:

List of Figures

Figure 1: Browser output for illustration 1.1

Figure 2: Browser output for illustration 1.11

Figure 3: Browser output for illustration 1.13

Figure 4: Browser output for illustration 1.14

Figure 5 : Browser Output for illustration1.15

Figure 6: Browser output for illustration 1.16

Figure 7: Browser output for illustration 1.1

Figure 8: Browser output for illustration 1.18

Figure 9: Browser output for illustration 2.5

Figure 10: Browser output for code given above

Figure 11: Browser output for illustration 2.6

Figure 12 : Browser output for illustration 2.7

Figure 13: Browser output for illustration 2.9

Figure 14

Figure 15 : Browser output for illustration 2.10

Figure 16: Browser output for illustration 2.11

Figure 17: Browser output for illustration 2.12

Figure 18: Browser output for illustration 2.14

Figure 19: Browser output for illustration 2.15

Figure 20: Browser output for illustration 2.17

Figure 21: Browser output for illustration 2.18

Figure 22 : Browser output for illustration 2.19

Figure 23: Browser output for illustration 2.20

Figure 24: Browser output for illustration 2.21

Figure 25: Browser output for illustration 2.22

Figure 26: Browser output for illustration 2.23

Figure 27: Browser output for illustration 2.24

Figure 28: Browser output for illustration 2.25

Figure 29: Browser output for illustration 2.27

Figure 30: Browser output for illustration 3.2

Figure 31: Browser output for illustration 3.5

Figure 32: Browser output for illustration 3.6

Figure 33: Browser output for illustration 3.8

Figure 34: Browser output for illustration 3.9

Figure 35: Browser output for illustration 3.10

Figure 36: Browser output for illustration 3.11

Figure 37: Browser output for illustration 3.15

Figure 38: Browser output for illustration 3.15

Figure 39: Browser output for illustration 3.15

Figure 40: Browser output for illustration 3.18

Figure 41: Browser output for illustration 3.19

Figure 42: Browser output for illustration 3.21

Figure 43: Browser output for illustration 3.22

Figure 44: Browser output for illustration 3.23

Figure 45: Browser output for illustration 3.24

Figure 46 : Browser output for illustration 4.1

Figure 47 : Browser output for illustration 4.2

Figure 48 : Browser output for illustration 4.4

Figure 49 : Browser output for illustration 4.5

Figure 50 : Browser output for illustration

Figure 51 : Browser output for illustration 4.7

Chapter 1: HTML BASICS

1.1. HTML Introduction

A warm welcome to the readers of this book! Herein we are going to learn the basics related to HTML (Hyper Text Markup Language), so that we can acquire enough skills with the same, necessary to design your own web pages and later the complete website. No point to waste further time in the intro but rather get started with business right away!

1.1.1 What is HTML?

HTML hasn't been around for many years as is the case with some popular programming languages like “Fortran” and C. Going a step further here only it is the first important thing to be mentioned in any good book for HTML around that “HTML should not be confused as a programming language; it is actually markup language” The HTML does have any inherent logical operating power of its own but inherits the same from some scripting languages like Java Script and others. HTML is only confined with the processes of presenting the data but possesses no capabilities whatsoever to operate the same.

HTML can be elaborated as "Hyper-Text Mark-up Language" - which is enough for you to know right now. Just for those readers who want to go somewhat into greater detail below is the greater elaboration for HTML.

- Hyper is the antonym of linear. What we mean when we associate the word Hyper in HTML is that we can browse to wherever one wants and at whatever time we want. As an illustration regarding this, it is not essential to visit goggle.com formerly one can visit iium.edu.my
- Text as a term stands quite palpable in itself.
- Mark-up is all about how to present our text in different ways and formats. It is carried out by means of set of finite and predefined markup tags.
- Language. After all HTML is the means for interacting with the web browser about how our data should be presented in the webpage. This way HTML can be thought of a Language. Some literatures regard HTML as web browsers "mother tongue".

To cut the long story short, HTML can be viewed as a markup tool or language for crafting web pages or the means for presenting data on the same.

- HTML stands for H yper- T ext M arkup L anguage
- HTML contains a finite number of markup tags or simply tags.
- HTML is not a programming language, but rather a markup language
- The purpose of the tags is to present page content differently as per their usage in the html document.

1.1.2 Web pages

A web page is a document that is created in html and displayed in the web browser. We generally come across webpages while we are surfing the internet. A web page can either be a local one or in most of the cases web pages are remote. When we say local webpage it means that the webpage and the browser in which it’s going to be opened are local to each other or in easier terminology both are residing on the same computer. With regard to remote webpages it means that the web page which we are opening in our browser is not resting on the local or same machine but rather on a different one(remote host). In most of this series of books on MASTERING WEB TECHNOLOGIES we are going to work with local webpages. This point is worth mentioning here that there is not a single present difference in the creation of the both of these webpages. The difference is only related to the places where the two are hosted.

Webpages are showing up their presence in every aspect of human life and is growing only. Their importance can be quantified by the facts given below:

- Web pages serve as a low-cost and easiest medium in order to spread information to a huge audience.
- Web pages serve as an efficient mechanism to market products or services.
- Web pages provide you with a platform for letting the world know and reach you easily.

The sole intent of this book is how to create and manipulate webpages using HTML and XHTML. Let’s get started with the creation of the one. We need two software product tools on our computer to create and view our basic webpage. One an ASCII text editor such as notepad for creation of the webpage and a web browser like (IE, Firefox, and Chrome etc.) to latter view the same. Open notepad and copy the code in the box as it for now and save file as filename.html or filename.htm with type all files. Once you do the same you will encounter a web document with the same name local to the text file and when you double click on the same a web page which you defined a while ago is being opened in the browser. We shall have an output something like as shown in figure 1 for illustration 1.1

illustration not visible in this excerpt

Illustration: 1.1

Figure 1: Browser output for illustration 1.1

We shall have an output something like as shown above in figure 1 i.e. opening the fwp.html in the browser, Firefox in this case will turn up like this.

1.1.2.1 Code Explained

- The DOCTYPE declaration defines the document type and is the syntax for the latest generation HTML - HTML5
- All the text amid<html> and </html>defines the webpage.
- The text among<title> and </title> shows up in the title bar of the browser.
- The text between <body> and </body> is the visible content on the web page
- The text between <b> and </b> is displayed in bold formatting.
- The text between <p> and </p> is displayed as a paragraph.

It is understood that the tags used in the above example are unfamiliar to you. Don't worry about it as the sole intent here was to teach you how to create and view a webpage not about teaching you the tags. You will learn all about them gradually while moving forward with reading this book. (Inshallah)

1.1.3 Terms to know

Throughout this book, we shall be using several terms that are unique to HTML. Thus making it is important for us to understand what these words mean, in the context of HTML.

Tag – Tags can be defined as the labels that we make use of in order to mark up the beginning and end of an element. All tags begin with a less-than sign "<" and end with a greater-than sign ">". Tags can be classified into two types -opening tags: <body> and closing tags: </body>. The only difference between an opening tag and a closing tag is the forward slash "/". We can label content by putting it between an opening tag and a closing tag. HTML is all about usage of the tags. To learn HTML is to learn and use these different tags.

Element – Elements as they are often regarded as the essence of HTML is the name given to a complete tag, having an opening <tag> and a closing </tag>.

Attribute –Attributes can be thought of as properties or parameters of an element that can be varied as per the value assigned to them in order to customize or modify an HTML element. Elements often possess multiple attributes.

We are going touch all of them in much deeper essence in coming sections.

1.2 HTML elements:

Elements enable us to structure a HTML document and conveys the web browser how we want our data to be presented on the webpage. In other words we can conclude HTML documents are defined by HTML elements. As stated in the earlier discussion elements consist of a start tag, some content, and an end tag

In case of the illustration 1.1

1. <title> My First Web Page</title>
2. <title> My First Web Page</title>
3. <p>Alhamudulillah I m a Muslim</p> All of them can be seen as elements including the <html>content</html> and <body>content</content>

It would be in place to mention here that start tag is often referred by the opening tag and the end tag is often called the closing tag. A single page can contain hundreds or thousands of elements, as there is no upper limit to the number of tags that can be present in a single html document. <html> is called root element and is present in every webpage ,marking the beginning and ending of the documents . Every webpage must possess only one html element. Its main purpose is to hold each web element nicely in position and serves the role of file cover; all other HTML elements are captured within the <html> element. Moreover this is the tag which lets the web browsers know, the following is an html document so that the browser know in advance how to render the same. <html> signifies the start of the HTML document while </html> signifies the end of html document. Now regarding html elements one needs to remember following points.

- Beginning of an HTML element is marked with a start tag / opening tag
- End of an HTML element is marked by end tag / closing tag
- Content of an element comprises of everything between the start and the end tag; which in many cases contains other elements
- Some html elements are without any content whatsoever and such html elements are referred as Empty elements; Empty elements are closed in the start tag <hr/> used in Example1 is an example of empty element.
- Most of the html elements possess attributes.

1.2.1 Nesting of HTML Elements

As already mentioned that an html element can contain other html elements thus an HTML documents consist of nested HTML elements. Let’s go to the illustration 1.2.

illustration not visible in this excerpt

Illustration: 1.2

The illustration 1.2 above contains 6 HTML elements. Let’s end the readers wait and explain what everything means in the above illustration 1.2.

1.2.1.1 Example Explained

illustration not visible in this excerpt

Illustration: 1.3

The </hr>(horizontal rule) element puts an horizontal line in the HTML document. We notice that the element is an empty one as it possesses no content and is closed in the opening tag only. Using <hr> instead of <hr/> will work in the same way but In XHTML, all elements must be closed. Adding a backward slash inside the start tag, like <hr/>, is the proper way of closing empty elements in XHTML (and XML). We will follow make this a standard in this book to close empty elements to make to readers used to it before moving to XHTML or XML and never the less it is the proper way.

illustration not visible in this excerpt

Illustration: 1.4

The <b>(bold) element makes the content inside this element presented in bold formatting in the web browser. It is utmost importance to close html tags as in this case if we skip </b> tag than everything after <b> in the html document will appear as bold. It is advised for the reader to erase </b> in the illustration 1.5 and view the webpage again to make the things clearer.

illustration not visible in this excerpt

Illustration: 1.5

The paragraph in the HTML document is defined by means of <p> element. <p>is used as a start tag </p> is used as an end tag. The content of the element is: Alhamudulillah I m a Muslim. <p> element automatically takes the text to the new line and leaves one line before the new content of the webpage.

illustration not visible in this excerpt

Illustration: 1.6

The organization of the HTML document is defined by the <body>element .<body> is used as a start tag and </body> is used as end tag. Element content in this case are other html elements in this case as show above in illustration 1.6

illustration not visible in this excerpt

The <title> element:

Illustration: 1.7

We can adds a title to our webpage using the <title> element The content inside this tag are not displayed in the webpage but on the title bar of the browser or at the top of browser tabs. Title is one of the first things the visitor of your webpage come across while visiting your webpage. It is in place to mention here that web pages you bookmark are saved using the web pages' titles.

illustration not visible in this excerpt

The <html> element:

illustration not visible in this excerpt

Illustration: 1.8

The <html> is the root element present mandatorily once in every html document, it defines the whole HTML document. <html> is used as a start tag and </html> is used as end tag. All other html elements present in the html document are placed as the content of html element.

One last thing that HTML tags are case insensitive: <P> means the same as <p>, <hTml> or<HTML> means same as <html>. We shall be only using lowercase tags in this book since the same is recommended by World Wide Web Consortium (W3C) in HTML 4.Also XHTML has support for lowercase tags.

1.3 HTML attributes:

HTML attributes can be regarded as the modifiers for HTML elements; or in simpler terminology can be seen as something which provides additional information regarding HTML elements. Most of the html tags have got attributes inherent to them, but the case is that if we are not specifying attribute values, default values are assigned to them and the browser renders them according to these default settings. Attributes can only be specified in the opening or starting tag of the element after the name of the element. Attributes mostly occur as name-value pairs disconnected by the symbol “=” like name="value". It must be taken care of that the values of attributes need to be in double Quotes.

1.3.1 Attribute Example

Links between html documents are defined by<a> (anchor) tag. This tag has the attribute href (called as hyper reference ) where we assign the address of the link if we do not specify the attribute and its value the link will be still created assigning the present document address to the href attribute. This can be well understood by the illustration 1.9 given below:

illustration not visible in this excerpt

Illustration: 1.9

The prime concern here is not to make you understand html links but rather give you a feeling about the using attributes. Analyzing the first line of code we can value of href attribute is assigned as “http://www.tanzeem.org” when we shall click on the LINK we will be navigate to the webpage whose address is specified as a value to href attribute. In the second case where we are not specifying the where we are not specifying any value to href attribute. Here also a link gets created on the webpage but when we click on the link we will not navigate as the href attribute has taken the default value which is that of the document itself in which the link is defined.

Two important things that need to be remembered regarding usage of attributes are:

First, the attribute values must always be enclosed in quotes. Both single or doule quotes for that matter are allowed but doule quotes are the most commonly used and are the standard in this book. It would be worth mentioning here that sometimes although not common, attribute names themselves may contain quotes; in such cases using of single quotes is the only alternative. As an example: name=’Assadullah “Humaira” Burhan’ Second attribute names and values both are not case sensitive i.e. HRef or HREF is same as “href” and same way for the attribute values can be varied in terms of their of their cases without any effect. Nevertheless lowercase are recommended for HTML 4 by W3C (World Wide Web Consortium).

1.4. HTML text

Now that we have got enough acquainted to the basic terminology and concepts regarding html, we shall start putting stuff in our webpages. If I am not wrong, probably HTML text is the first element that new bees learn to add to a webpage and you are not going to do something different. Text is rightly regarded as the spine of any webpage. It serves dual purposes one being the obvious one of that of content in the webpage, nevertheless if it provides the spiders and Search Engines on the World Wide Web (WWW)with meta data and keywords. In its first usage it has counterparts in form of audio, video and others but in second scenario it has got not no substitute until know.

illustration not visible in this excerpt

Inserting Text into the Webpage

Illustration: 1.10

Whatever text you shall put as the content in the body element of the webpage it can will be shown on the webpage. Although there are some restrictions which we may come across like if we put multiple space between two words in the html document only one space is visible in the browser output, or for that matter we are not able to put line breaks or do formatting changes to our text, but for all this we have their own types of tags which we shall come across on pages to come.

1.4.1 HTML headings

Heading are quite useful for adding titles and subtitles to our text. This can be achieved by using any of the six heading tags of HTML in webpages. Headings are demarcated using the<h1> to <h6> tags as per the importance of the heading i.e. <h1> defines the most important heading while <h6> can be used to define the least important one.

It is assumed from know you have got the general understanding of the html document structure and in examples to come html, body and title elements will not show up unless required.

illustration not visible in this excerpt

Illustration: 1.11

Placing above lines in the html document will produce results similar to the one given on next page:

Figure 2: Browser output for illustration 1.11

In the above figure 1.11 we see text changes size depending on which tag we choose, <h1> bearing the largest font with size of 24pt, while<h6> bearing the smallest font size at 8pt.

We can also notice the built-in attribute associated with the each heading element, that it puts a line break (blank line) before and after itself. This is expected from us, that as a web designer we should take these line breaks into consideration while designing a layout for our webpage. It is strongly stated that readers should use heading tags for heading only. They should not be tried to unleash formatting on the text i.e. to increase text size or emphasize the same, since heading are used by Search engines for the purpose of indexing the content of our webpages

1.4.2 HTML Comments

Comments are the text that is present html file but are overlooked and not displayed by the Web browsers. The sole purpose of putting comments in an html document is to make it more understandable to the developer at latter time. Comments are not of any use to the visitors of the webpage.

illustration not visible in this excerpt

Syntax for Comment

Illustration: 1.12

1.4.3 Inserting Symbols In The Webpage:

Some of the standard symbols are available as keys on the keyboard, thus can be easily inserted into the webpage by merely entering the same in our html document via a press of the key, But there are instances we may require other important symbols like ©(copyright symbol) ®(registration mark), For such cases easiest possible way-out is find ASCII (decimal) character code value for that particular symbol that we want on our webpage from internet or Word Processing Package and use it like &#169; in the webpage. Here 169 is the ASCII (decimal) character code value for ©.

1.4.4 HTML Line-Breaks

There may be situations where we want to put a line break in our document similar to the use of (Shift + Enter) in Microsoft Word Package without starting a new paragraph. For these we make use of <br /> element in html documents. Wherever we want to put a line break in our document we should simply write <br/> there. <br> can be also used in place of <br/> and works similarly but the reason we are making <br/> a standard throughout this book, because in XML and XHTML it is necessary for each element to have a closing tag.It should be worth mentioning here that <p> element can be seen as a counterpart to pressing of Enter key in the Microsoft Word Package. For illustration of the usage of Line Break element go to the Example 1 once again.

1.4.5 HTML Empty Spaces

You have come across the fact any appearance of spaces in the html document count as only one space in the webpage displayed. So there seems a problem to tackle how to insert multiple spaces in our webpage, but there are nevertheless two possible solutions by using either of (&#160; or &nbsp;) in the our html document as many no of times as many spaces we need as illustrated on the next page:

illustration not visible in this excerpt

Illustration: 1.13

These above lines of code given in illustration 1.13 put into an HTML document will produce the output as given below in figure 3. The example is self-explanatory in itself

Figure 3: Browser output for illustration 1.13

1.5. HTML formatting

Now, as we are able to insert more and more text elements in your webpage serious need may be felt to perform various formatting operations on the text of our webpage. Special tags exist in HTML to do the same. Given below Illustration:1.14 is the implementation of the common HTML formatting tags.

illustration not visible in this excerpt

Illustration: 1.14

Figure 4: Browser output for illustration 1.14

It is necessary for the readers to remember that formatting tags should be closed properly as an illustration if we forget to close the <b> (bold tag) in the first we shall get all the text in our after this tag as bold in our webpage. Readers are advised to check the same by omitting the </br> tag in the above example.

It may be noted here that, although <b> and <i> give the same output as <strong> and <em> respectively there is a basic difference in their meaning. When we want that our text should be rendered in web browser such that it seems important to the visitor of our webpage. Nowadays majority of browsers render <em> as italics and <strong> as bold, but nevertheless it is not something quite reliable; it may vary with browsers and time as well. This is very much possible that tomorrow web browsers render the differently or for that matter different web browsers render <em> and <strong> differently from each other.

1.5.1 Text Direction:

illustration not visible in this excerpt

If our web browser has support for bidirectional text than we can make use of an html tag < bdo> to change the direction of text of our html document when the same is displayed in the Web Browser. By default the direction of text is set to left to right but we can also change it right to left. Given below illustration 1.15 is an example of bidirectional output element.

Illustration: 1.15

Figure 5 : Browser Output for illustration1.15

1.5.2 Abbreviations:

There exists a tag in html which can be used to show the spelled out version of the abbreviations in our webpages once we rest a mouse pointer over them. Given below in illustration 1.16 is the example of the <abbr> tag.

illustration not visible in this excerpt

Illustration: 1.16

Figure 6: Browser output for illustration 1.16

1.6 HTML pre formatting

We already know at this stage that our HTML document is interpreted as being a single long line. We can’t make changes to the output simply by putting extra lines and spaces in our HTML document. Any extra lines and spaces if present within our html document are removed when the same is rendered by our browser. Be there any number of extra lines and extra spaces present in our html document they shall be counted as a single line and space when the webpage is displayed in the web browser.

In previous sections we came to know that how to tackle this problem using the (<br/> and &nbsp;) mechanisms. But there may be instances where this process may become annoying as spaces and tabs are somewhat dissimilar to each other. There lies a solution for such scenarios also in html; it is the usage of previously formatted text tag <pre>. There may be some situations wherein we desire that the output of the text in the web browser should appear exactly as was typed in the html document. <pre> tag will preserve the line breaks, tabs and spaces that exist in the html document. This tag is often used for code of computer programs. Given below illustration:1.17 shows the usage of <pre> tag.

illustration not visible in this excerpt

Illustration: 1.17

[...]