X / HTML
Apple Safari 4.0: Something Very Different
by Hemz on Mar.05, 2009, under Information Technology and Communications, X / HTML
Believe it or not, I have started using Safari leaving Firefox behind. Yes, the new Safari 4.0 (beta) has caught my attention and I am glued to it. A claimed whopping 150 features are waiting for you to explore them.
The most striking feature is the Top Sites which is ala Speed Dail of Opera and Most Visited on dashboard of Chrome.
Then you have a full History search and Cover Flow which are imported from Mac. You get a similar interface. Works effortlessly. The feature of auto completion of the web address is intelligent. Tabs are put on the top, and added animation like a slide bar has been thrown in when you want to bring two far ended tabs closer.
I love the way they have put it as against Opera and Chrome. Of-course it consumes more ram, but then if I have some extra ram to spare, then why not.
Now, a bit from the Web Designer and Developer View.
The W3C XHTML | How to validate your XHTML?
by Hemz on Jan.15, 2009, under X / HTML
The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding. On this page, you’ll find how to incorporate W3C Website guidelines in your website. I feel that we all should design our webpages in accordance with the Guidelines laid out by the governing body.
The following are some of the common errors which form a part of W3C XHTML Validations (see W3C Website Guidelines on W3C website). The following is an XHTML Validator Tutorial of sorts. You all can take a look at the same, and try to adapt it to your websites as well. You can validate your website at the W3C HTML Validator
Complaince to W3C Standards is legaly complusary in some countries including in the UK, the USA or else some one might sue you! You can use various Validators to validate your HTML files, however I would advice that you follow the original W3C Validtor.
DOCTYPE: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
The above declaration is a compulsory factor. Though, the Delclaration may vary according to your settings, it is always advised to follow the latest Declarations. It comes above the <html>.
People in India are thought nothing about DOCTYPE. Some of the people are surprised to know that there is something known as DOCTYPE. Even in the Book published by some prominent state boards do not have any mention of DOCTYPE.
HTML Tag: <html>
Obviously, the above declaration is a compulsory factor.
Character Type
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
The above declaration helps the browser to understand the character set your webpage is using. It comes below the <html>. The character set can be changed according to the characters you are using in your webpage, most commonly used is iso-8859-1
Its also important to have all the elements in lower case. You should code <html> instead of <HTML>
Elements
<script language=”javascript” type=”text/javascript”></script>
You will have to avoid using the language attribute. Use of type=”text/javascript” is must
Usage of border=”0″ is not allowed. instead use the style elements: style=”border-width:0px;” etc.
topmargin=”0″ bottommargin=”0″ leftmargin=”0″ rightmargin=”0″ marginheight=”0″
Instead use the alternative style elements: style=”margin-left:0px; margin-right:0px;” etc.
Target=”_blank” Target=”_top” Target=”_parent” Target=”_self”
You will have to avoid using the target element. We can use JavaScript Window.Open property. Using JavaScript is a not entertained though because poping open windows can be very annoying.
” ” (double quotes)
The double quotes are important for specifying values/ i.e. values have to be like [id="company"] [ alt="companyname-caption" ]
start tags for text and subtags
Text, or sub-tags (like input, select, img, a href etc.) should be in <div>*[text to be put inside <P>]<p> or <ul> <ol> <h1> etc.
Images
alt is necessary for images. border not applicable. read [border="0"] for more information
End tags
End tags for all start tags are compulsory. it is also important that you have to end the tag at proper location. use <br />, <img src=”somefile” alt=”something” style=”border-width:0px; />”
<form name=”frmsize” action=”something” method=”get”>
A form tag has to contain the action=”someaction.aspx”
<div id=”name” name=”name” class=”name_id”>
Avoid using name=” name “ attribute
& in URIs / URLs
If you have to use & in any url (uri) please make special effort to make it &
<U>
You have to remove it and avoid using it. Use style=”text-decoration:underline;”
<select class=”text” id=”selLanguage” onchange=jumpbox(); name=”select_lang”>
When you write the JavaScript element onchange=jumpbox(); , make sure you put “jumpbox();” in double quotes, avoid the name attribute
<select class=”text” id=”selLanguage”>
The id should be declared compulsorily)
<input type=”hidden” name=”Language” />
/ necessary where ever an end tag in not specified.
Close of Head tag, scripts and styles
The close head tag has to be proper and the style tag to be included in head tag along with script tags.
Valign
Valign used in image tags, td/tr/table should be avoided. Instead use, “style:vertical-align:top;”
align
We have a strong habbit to use the ALIGN element. Avoid using ALIGH and start using the CSS property text-align:left; or right“style:vertical-align:top;”
Option Element
This element is used under the Select Tag. Well, here the only catch is <option></option> simply does not work for validation. If you want to have a blank one, then please put
Flash Objects
Inserting Flash Objects can be tricky and would add to your woes when checking the document for your HTML document. It is better to use the following coding type which helps in attaining our goal of a completely Validated XHTML.
<object type=”application/x-shockwave-flash data=”c.swf?path=movie.swf” width=”400″ height=”300″>
<param name=”movie” value=”c.swf?path=movie.swf” />
<img src=”noflash.gif” width=”200″ height=”100″ alt=”" />
</object>
The solution for this comes from A List Apart article on the Embedding Flash While Supporting Standards
What is HTML? Basics of HTML and XHTML
by Hemz on Dec.18, 2008, under X / HTML
Some information on HTML
1) What is HTML?
HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the » W3C, the organization charged with designing and maintaining the language.
The definition of HTML is Hyper Text Markup Language.
• Hyper Text is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.
• Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicized text, for example).
• HTML is a Language, as it has code-words and syntax like any other language.
2) What is XHTML? What is the difference between XHTML & HTML?
XHTML is just cleaner HTML—tags are consistently lowercase, all tags are closed, and tags are properly nested.
3) Explain with an example how do you create a Cell in XHTML?
The Cell can be created in the following format.
<table>
<tr>
<td> This is a Cell </td>
</tr>
</table>
The above illustration shows how a cell is created. The Table tag defines to the browser that the following code will be displayed in a Tabular Format.
TR tag defines the start of the row… where as TD defines the start of the Cell.
With the closing each and every tag in a properly nested format, with lower case, can make it XHTML.
4) You have a website with the following illustration. Please create a Valid XHTML code.
The look and feel of the table should be exactly same with font pixels set at 10px, and you are supposed to use CSS to style the following table.
Table Table of Contents
Type of Buildings Type A – Flat Systems Type B – Flat System
Bungalow System
Type of Material Bricks Wood
Answer:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Document Title</title>
<style>
table
{
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;
}
.style1 {color: #FF6600}
.style2 {color: #0033CC}
</style>
</head>
<body>
<table>
<tr>
<td>Table</td>
<td colspan=”2″>Table of Contents</td>
</tr>
<tr>
<td rowspan=”2″ valign=”top”><span class=”style1″>Type of Buildings</span></td>
<td><span class=”style2″>Type A – Flat Systems</span></td>
<td class=”style2″>Type B – Flat System</td>
</tr>
<tr>
<td width=”394″ colspan=”2″ valign=”top” class=”style2″>Bungalow System</td>
</tr>
<tr>
<td>Type of Material</td>
<td class=”style2″>Bricks</td>
<td class=”style2″>Wood</td>
</tr>
</table>
</body>
</html>
5) Define Doc Type. How does it help in creating HTML / XHTML code?
DocType is the Document Declaration Tag.
This helps the browser to understand the version of HTML or XHTML the files is being created in. After determining the HTML / XHTML version, the browser renders the code in the respective format.
This particularly helps in terms of older versions of HTML / XHTML. With every new HTML version, some of the tags are added and some are removed. If the browser is supporting the latest version and the HTML is of older version, it will not support the tags removed in the latest version.
However, if proper doc type declaration is made, then the browser will understand that for rendering the HTML page is to be made according to the earlier version.
6) What do you understand by W3C?
W3C stands for World Wide Web Consortium. Its an organization which develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding.
7) What do you understand by MIME Types? Please mention some examples
MIME types are another part of the HTML header – an important one. Also known as the content-type header, they tell the browser what kind of file they are about to send. Browsers don’t rely on HTML files ending in .html, JPEG images ending in .jpeg, and so on: they rely on the content-type header.
text/html – HTML.
text/css – CSS
text/plain – plain text.
image/gif – GIF image.
image/jpeg – JPEG image.
image/png – PNG image.
audio/mpeg – MP3 audio file.
application/x-shockwave-flash – Flash movie.
What do you understand about Accessibility?
Accessibility is basically making websites accessible to the disabled. The disabled use specific browsers to read out the HTML based web pages on the website.
>> The British Disability against Discrimination Act, the US Sec 508, The Australian Disability Law etc, are the laws of the respective countries where following web accessibility is made compulsory.
