A website can be converted from HTML to XHTML by applying following 6 simple steps.
1. Add a <!DOCTYPE> :
Add an XHTML <!DOCTYPE> to the first line of every page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. Add an xmlns Attribute :
Add an xmlns attribute to the html element of every page.
<html xmlns="http://www.w3.org/1999/xhtml">
3. Change Tags And Attribute Names to Lowercase :
Replace all uppercase tags and attributes with lowercase tags and attributes respectively.
4. Quote All Attribute Values :
In every page, make sure that attribute values are quoted.
5. Close all Empty Tags :
Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br/>.
6. Validate XHTML With The W3C Validator :
Before an XHTML file can be validated, a correct DTD must be added as the first line of the file. Validate the document by url here, http://validator.w3.org/ .
Correct errors if any found.
<< HTML Advanced tutorial 30 : XHTML Doctypes
Showing posts with label HTML Advance. Show all posts
Showing posts with label HTML Advance. Show all posts
Wednesday, May 2, 2012
HTML Advanced tutorial 30 : XHTML Doctypes
The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly. XHTML document consists of three main parts, DOCTYPE declaration, the <head> section, and the <body> section. The basic XHTML document consists of following structure.
<!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>
<title> title here </title>
</head>
<body>
</body>
</html>
The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in XHTML documents.
Different types of Doctypes :
The <!DOCTYPE> declaration is the very first thing in an XHTML document, before the <html> tag. The <!DOCTYPE> declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
XHTML 1.0 Strict :
This DTD contains all html elements and attributes, but does not include presentational or deprecated elements e.g font etc. Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional :
This DTD contains all html elements and attributes, including presentational and deprecated elements. Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset :
This Document Type is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 :
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules, e.g to provide ruby support for East-Asian languages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML Advanced tutorial 31 : HTML to XHTML >>
<< HTML Advanced tutorial 29 : XHTML Syntax Rules
<!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>
<title> title here </title>
</head>
<body>
</body>
</html>
The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in XHTML documents.
Different types of Doctypes :
The <!DOCTYPE> declaration is the very first thing in an XHTML document, before the <html> tag. The <!DOCTYPE> declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
XHTML 1.0 Strict :
This DTD contains all html elements and attributes, but does not include presentational or deprecated elements e.g font etc. Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional :
This DTD contains all html elements and attributes, including presentational and deprecated elements. Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset :
This Document Type is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 :
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules, e.g to provide ruby support for East-Asian languages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML Advanced tutorial 31 : HTML to XHTML >>
<< HTML Advanced tutorial 29 : XHTML Syntax Rules
HTML Advanced tutorial 29 : XHTML Syntax Rules
While coding in XHTML, we must take care of following rules to avoid any error.
1.) Attribute Names Must Be In Lower Case :
<table WIDTH="100%"> ( This is wrong way )
<table width="100%"> ( This is correct way )
2.) Attribute Values Must Be Quoted :
<table width=100%> ( This is wrong way )
<table width="100%"> ( This is correct way )
3.) Attribute Minimization Is Forbidden :
<input checked> ( This is wrong way )
<input readonly>
<input disabled>
<input checked="checked" /> ( This is correct way )
<input readonly="readonly" />
<input disabled="disabled" />
4.) The Lang Attribute :
The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element. If you use the lang attribute in an element, then you must also add the xml:lang attribute. For example
<div lang="en" xml:lang="en">Hello word!</div>
5.) Mandatory XHTML Elements :
Following elements are mendatory, in XHTML documents.
- DOCTYPE declaration.
- html, head, title, and body elements.
HTML Advanced tutorial 30 : XHTML Doctypes >>
<< HTML Advanced tutorial 28 : What is XHTML
Tuesday, May 1, 2012
HTML Advanced tutorial 28 : What is XHTML
XHTML stands for EXtensible HyperText Markup Language. It is almost identical
to HTML 4.01. It is a stricter and cleaner version of HTML. It is HTML defined
as an XML application. It is Recommended by W3C. It is supported by all major
browsers.
The following HTML code does not follow the HTML rules, but it will work fine in a browser.
<html>
<head>
<title>bad page</title>
<body>
<h1>Bad h1 element
<p>This is a paragraph
</body>
New in XHTML :
Following are the few differences in XHTML from HTML.
XHTML Elements Must Be Properly Nested :
In HTML, elements can be improperly nested within each other, for example
<b><i>This text is bold as well as italic</b></i>
While using XHTML, all elements must be properly nested within each other e.g ,
<b><i> This text is bold as well as italic </i></b>
XHTML Elements Must Always Be Closed :
In XHTML, non-empty elements must have a closing tag. For example
<p>This is a paragraph ( This is wrong way )
<p>This is a paragraph</p> ( This is correct way )
Empty Elements Must Also Be Closed :
In XHTML, empty elements must also be closed. For example
A line break
<br> ( This is wrong way )
<br /> ( This is correct way )
An image tag
<img src="img.jpg" alt="image"> ( This is wrong way )
<img src="img.jpg" alt="image" /> ( This is correct )
XHTML Elements Must Be In Lower Case :
In XHTML, tag names and attributes must be in lower case. For example
<BODY> ( This is wrong way )
<P>This is a paragraph</P>
</BODY>
<body> ( This is correct way )
<p>This is a paragraph</p>
</body>
XHTML Documents Must Have One Root Element :
All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element. Following is the basic document structure used.
<html>
<head>
</head>
<body>
</body>
</html>
HTML Advanced tutorial 29 : XHTML Syntax Rules >>
<< HTML Advanced tutorial 27 : HTML Language Code
The following HTML code does not follow the HTML rules, but it will work fine in a browser.
<html>
<head>
<title>bad page</title>
<body>
<h1>Bad h1 element
<p>This is a paragraph
</body>
New in XHTML :
Following are the few differences in XHTML from HTML.
XHTML Elements Must Be Properly Nested :
In HTML, elements can be improperly nested within each other, for example
<b><i>This text is bold as well as italic</b></i>
While using XHTML, all elements must be properly nested within each other e.g ,
<b><i> This text is bold as well as italic </i></b>
XHTML Elements Must Always Be Closed :
In XHTML, non-empty elements must have a closing tag. For example
<p>This is a paragraph ( This is wrong way )
<p>This is a paragraph</p> ( This is correct way )
Empty Elements Must Also Be Closed :
In XHTML, empty elements must also be closed. For example
A line break
<br> ( This is wrong way )
<br /> ( This is correct way )
An image tag
<img src="img.jpg" alt="image"> ( This is wrong way )
<img src="img.jpg" alt="image" /> ( This is correct )
XHTML Elements Must Be In Lower Case :
In XHTML, tag names and attributes must be in lower case. For example
<BODY> ( This is wrong way )
<P>This is a paragraph</P>
</BODY>
<body> ( This is correct way )
<p>This is a paragraph</p>
</body>
XHTML Documents Must Have One Root Element :
All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element. Following is the basic document structure used.
<html>
<head>
</head>
<body>
</body>
</html>
HTML Advanced tutorial 29 : XHTML Syntax Rules >>
<< HTML Advanced tutorial 27 : HTML Language Code
HTML Advanced tutorial 27 : HTML Language Code
The HTML lang attribute can be used to declare the language of a Web page or a portion of a Web page. This is meant to assist search engines and browsers.W3C recommendation assist that, you should declare the primary language for each Web page with the lang attribute inside the <html> tag. For example
<html lang="en"> </html>
while using XHTML, you have to declare language inside the <html> tag in following way.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> </html>
Abbreviations :
HTML Advanced tutorial 28 : What is XHTML >>
<< HTML Advanced tutorial 26 : HTTP Status Messages
<html lang="en"> </html>
while using XHTML, you have to declare language inside the <html> tag in following way.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> </html>
Abbreviations :
Abbreviations for languages defined by ISO 639-1 are as fellow.
| Language | ISO Code |
|---|---|
| Abkhazian | ab |
| Afar | aa |
| Afrikaans | af |
| Albanian | sq |
| Amharic | am |
| Arabic | ar |
| Aragonese | an |
| Armenian | hy |
| Assamese | as |
| Aymara | ay |
| Azerbaijani | az |
| Bashkir | ba |
| Basque | eu |
| Bengali (Bangla) | bn |
| Bhutani | dz |
| Bihari | bh |
| Bislama | bi |
| Breton | br |
| Bulgarian | bg |
| Burmese | my |
| Byelorussian (Belarusian) | be |
| Cambodian | km |
| Catalan | ca |
| Chinese (Simplified) | zh |
| Chinese (Traditional) | zh |
| Corsican | co |
| Croatian | hr |
| Czech | cs |
| Danish | da |
| Dutch | nl |
| English | en |
| Esperanto | eo |
| Estonian | et |
| Faeroese | fo |
| Farsi | fa |
| Fiji | fj |
| Finnish | fi |
| French | fr |
| Frisian | fy |
| Galician | gl |
| Gaelic (Scottish) | gd |
| Gaelic (Manx) | gv |
| Georgian | ka |
| German | de |
| Greek | el |
| Greenlandic | kl |
| Guarani | gn |
| Gujarati | gu |
| Haitian Creole | ht |
| Hausa | ha |
| Hebrew | he, iw |
| Hindi | hi |
| Hungarian | hu |
| Icelandic | is |
| Ido | io |
| Indonesian | id, in |
| Interlingua | ia |
| Interlingue | ie |
| Inuktitut | iu |
| Inupiak | ik |
| Irish | ga |
| Italian | it |
| Japanese | ja |
| Javanese | jv |
| Kannada | kn |
| Kashmiri | ks |
| Kazakh | kk |
| Kinyarwanda (Ruanda) | rw |
| Kirghiz | ky |
| Kirundi (Rundi) | rn |
| Korean | ko |
| Kurdish | ku |
| Laothian | lo |
| Latin | la |
| Latvian (Lettish) | lv |
| Limburgish ( Limburger) | li |
| Lingala | ln |
| Lithuanian | lt |
| Macedonian | mk |
| Malagasy | mg |
| Malay | ms |
| Malayalam | ml |
| Maltese | mt |
| Maori | mi |
| Marathi | mr |
| Moldavian | mo |
| Mongolian | mn |
| Nauru | na |
| Nepali | ne |
| Norwegian | no |
| Occitan | oc |
| Oriya | or |
| Oromo (Afan, Galla) | om |
| Pashto (Pushto) | ps |
| Polish | pl |
| Portuguese | pt |
| Punjabi | pa |
| Quechua | qu |
| Rhaeto-Romance | rm |
| Romanian | ro |
| Russian | ru |
| Samoan | sm |
| Sangro | sg |
| Sanskrit | sa |
| Serbian | sr |
| Serbo-Croatian | sh |
| Sesotho | st |
| Setswana | tn |
| Shona | sn |
| Sichuan Yi | ii |
| Sindhi | sd |
| Sinhalese | si |
| Siswati | ss |
| Slovak | sk |
| Slovenian | sl |
| Somali | so |
| Spanish | es |
| Sundanese | su |
| Swahili (Kiswahili) | sw |
| Swedish | sv |
| Tagalog | tl |
| Tajik | tg |
| Tamil | ta |
| Tatar | tt |
| Telugu | te |
| Thai | th |
| Tibetan | bo |
| Tigrinya | ti |
| Tonga | to |
| Tsonga | ts |
| Turkish | tr |
| Turkmen | tk |
| Twi | tw |
| Uighur | ug |
| Ukrainian | uk |
| Urdu | ur |
| Uzbek | uz |
| Vietnamese | vi |
| Volapük | vo |
| Wallon | wa |
| Welsh | cy |
| Wolof | wo |
| Xhosa | xh |
| Yiddish | yi, ji |
| Yoruba | yo |
| Zulu | zu |
HTML Advanced tutorial 28 : What is XHTML >>
<< HTML Advanced tutorial 26 : HTTP Status Messages
Monday, April 30, 2012
HTML Advanced tutorial 26 : HTTP Status Messages
When a browser requests a service from a web server, an error might occur. This kind of error is shown using Status Message. Below a list of HTTP status messages that might be returned from server. These Status Messages are categories into different tables based on their type of responses.
HTML Advanced tutorial 27 : HTML Language Code >>
<< HTML Advanced tutorial 25 : HTML URL Encoding
Information :
These types of HTTP Status Message starts with 1xx. Their details are below.| Message: | Description: |
|---|---|
| 100 Continue | The server has received the request headers, and the client should proceed to send the request body |
| 101 Switching Protocols | The requester has asked the server to switch protocols |
| 103 Checkpoint | Used in the resumable requests proposal to resume aborted PUT or POST requests |
Successful :
These types of HTTP Status Message starts with 2xx. Their details are below.| Message: | Description: |
|---|---|
| 200 OK | The request is OK. This is the standard response for successful HTTP requests. |
| 201 Created | The request has been fulfilled, and a new resource is created |
| 202 Accepted | The request has been accepted for processing, but the processing has not been completed |
| 203 Non-Authoritative Information | The request has been successfully processed, but is returning information that may be from another source |
| 204 No Content | The request has been successfully processed, but is not returning any content |
| 205 Reset Content | The request has been successfully processed, but is not returning any content, and requires that the requester reset the document view |
| 206 Partial Content | The server is delivering only part of the resource due to a range header sent by the client |
Redirection :
These types of HTTP Status Message starts with 3xx. Their details are below.
| Message: | Description: |
|---|---|
| 300 Multiple Choices | A link list. The user can select a link and go to that location. Maximum five addresses |
| 301 Moved Permanently | The requested page has moved to a new URL |
| 302 Found | The requested page has moved temporarily to a new URL |
| 303 See Other | The requested page can be found under a different URL |
| 304 Not Modified | Indicates the requested page has not been modified since last requested |
| 306 Switch Proxy | No longer used |
| 307 Temporary Redirect | The requested page has moved temporarily to a new URL |
| 308 Resume Incomplete | Used in the resumable requests proposal to resume aborted PUT or POST requests |
Client Error :
These types of HTTP Status Message starts with 4xx. Their details are below.
| Message: | Description: |
|---|---|
| 400 Bad Request | The request cannot be fulfilled due to bad syntax |
| 401 Unauthorized | The request was a legal request, but the server is refusing to respond to it. For use when authentication is possible but has failed or not yet been provided |
| 402 Payment Required | Reserved for future use |
| 403 Forbidden | The request was a legal request, but the server is refusing to respond to it |
| 404 Not Found | The requested page could not be found but may be available again in the future |
| 405 Method Not Allowed | A request was made of a page using a request method not supported by that page |
| 406 Not Acceptable | The server can only generate a response that is not accepted by the client |
| 407 Proxy Authentication Required | The client must first authenticate itself with the proxy |
| 408 Request Timeout | The server timed out waiting for the request |
| 409 Conflict | The request could not be completed because of a conflict in the request |
| 410 Gone | The requested page is no longer available |
| 411 Length Required | The "Content-Length" is not defined. The server will not accept the request without it |
| 412 Precondition Failed | The precondition given in the request evaluated to false by the server |
| 413 Request Entity Too Large | The server will not accept the request, because the request entity is too large |
| 414 Request-URI Too Long | The server will not accept the request, because the URL is too long. Occurs when you convert a POST request to a GET request with a long query information |
| 415 Unsupported Media Type | The server will not accept the request, because the media type is not supported |
| 416 Requested Range Not Satisfiable | The client has asked for a portion of the file, but the server cannot supply that portion |
| 417 Expectation Failed | The server cannot meet the requirements of the Expect request-header field |
Server Error :
These types of HTTP Status Message starts with 5xx. Their details are below.
| Message: | Description: |
|---|---|
| 500 Internal Server Error | A generic error message, given when no more specific message is suitable |
| 501 Not Implemented | The server either does not recognize the request method, or it lacks the ability to fulfill the request |
| 502 Bad Gateway | The server was acting as a gateway or proxy and received an invalid response from the upstream server |
| 503 Service Unavailable | The server is currently unavailable (overloaded or down) |
| 504 Gateway Timeout | The server was acting as a gateway or proxy and did not receive a timely response from the upstream server |
| 505 HTTP Version Not Supported | The server does not support the HTTP protocol version used in the request |
| 511 Network Authentication Required | The client needs to authenticate to gain network access |
HTML Advanced tutorial 27 : HTML Language Code >>
<< HTML Advanced tutorial 25 : HTML URL Encoding
Saturday, April 28, 2012
HTML Advanced tutorial 25 : HTML URL Encoding
URL encoding converts characters into a format that can be transmitted over the Internet. Web browsers request pages from web servers by using a URL. The URL is the address of a web page, e.g http://www.yoursite.com.
URLs can only be sent over the Internet using the ASCII character-set. Since URLs often contain characters outside the ASCII set, the URL has to be converted into a valid ASCII format. URL encoding replaces non ASCII characters with a "%" followed by two hexadecimal digits. URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.
URL Encoding Examples
Character URL-encoding
€ %80
£ %A3
© %A9
® %AE
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5
HTML Advanced tutorial 26 : HTTP Status Messages >>
<< HTML Advanced tutorial 24 : HTML URL
URLs can only be sent over the Internet using the ASCII character-set. Since URLs often contain characters outside the ASCII set, the URL has to be converted into a valid ASCII format. URL encoding replaces non ASCII characters with a "%" followed by two hexadecimal digits. URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.
URL Encoding Examples
Character URL-encoding
€ %80
£ %A3
© %A9
® %AE
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5
HTML Advanced tutorial 26 : HTTP Status Messages >>
<< HTML Advanced tutorial 24 : HTML URL
HTML Advanced tutorial 24 : HTML URL
A URL ( Uniform Resource Locator ) is another word for a web address. A URL can be composed of words, or an Internet Protocol ( IP ) address. Most people enter the name of the website when surfing, because names are easier to remember than numbers.
When you click on a link in an HTML page, an underlying <a> tag points to an address on the world wide web. A URL is used to address a document (or other data) on the world wide web. A web address, like this, http://www.yoursite.com/html/index.html follows these syntax rules.
scheme://host.domain:port/path/filename
Below is the explanation of terms.
scheme - defines the type of Internet service. The most common type is http
host - defines the domain host (the default host for http is www)
domain - defines the Internet domain name, like yoursite.com
:port - defines the port number at the host (the default port number for http is 80)
path - defines a path at the server (If omitted, the document must be stored at the root directory of the web site)
filename - defines the name of a document/resource
Common URL Schemes
These are lists some common schemes.
http = HyperText Transfer Protocol :
Common web pages starts with http://. not encrypted
https = Secure HyperText Transfer Protocol:
Secure web pages. All information exchanged are encrypted
ftp = File Transfer Protocol:
For downloading or uploading files to a website. Useful for domain maintenance
file:
A file on your computer
HTML Advanced tutorial 25 : HTML URL Encoding >>
<< HTML Advanced tutorial 23 : HTML Entities
When you click on a link in an HTML page, an underlying <a> tag points to an address on the world wide web. A URL is used to address a document (or other data) on the world wide web. A web address, like this, http://www.yoursite.com/html/index.html follows these syntax rules.
scheme://host.domain:port/path/filename
Below is the explanation of terms.
scheme - defines the type of Internet service. The most common type is http
host - defines the domain host (the default host for http is www)
domain - defines the Internet domain name, like yoursite.com
:port - defines the port number at the host (the default port number for http is 80)
path - defines a path at the server (If omitted, the document must be stored at the root directory of the web site)
filename - defines the name of a document/resource
Common URL Schemes
These are lists some common schemes.
http = HyperText Transfer Protocol :
Common web pages starts with http://. not encrypted
https = Secure HyperText Transfer Protocol:
Secure web pages. All information exchanged are encrypted
ftp = File Transfer Protocol:
For downloading or uploading files to a website. Useful for domain maintenance
file:
A file on your computer
HTML Advanced tutorial 25 : HTML URL Encoding >>
<< HTML Advanced tutorial 23 : HTML Entities
Friday, April 27, 2012
HTML Advanced tutorial 23 : HTML Entities
Some characters are reserved in HTML. It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags. To actually display reserved characters, we must use character entities in the HTML source code. A character entity may looks like this.
&entity_name;
OR
&#entity_number;
To display a less than sign we must write: < or < The advantage of using an entity name, instead of a number, is that the name is easier to remember. However, the disadvantage is that browsers may not support all entity names (the support for entity numbers is very good).
Non-breaking Space
A common character entity used in HTML is the non-breaking space ( ). Browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them, before displaying the page. To add spaces to your text, you can use the character entity.
HTML Useful Character Entities
Entity names are case sensitive. Following is list of entity names with their description.
&entity_name;
OR
&#entity_number;
To display a less than sign we must write: < or < The advantage of using an entity name, instead of a number, is that the name is easier to remember. However, the disadvantage is that browsers may not support all entity names (the support for entity numbers is very good).
Non-breaking Space
A common character entity used in HTML is the non-breaking space ( ). Browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them, before displaying the page. To add spaces to your text, you can use the character entity.
HTML Useful Character Entities
Entity names are case sensitive. Following is list of entity names with their description.
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| non-breaking space | |   | |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¥ | yen | ¥ | ¥ |
| € | euro | € | € |
| § | section | § | § |
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
| ™ | trademark | ™ | ™ |
HTML Advanced tutorial 22 : HTML Scripts
HTML script Element
The <script> tag is used to define a client-side script, such as a JavaScript and JQuery. The script element either contains scripting statements or it points to an external script file through the src attribute. The required type attribute specifies the MIME type of the script. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
For Example
<script type="text/javascript">
document.write("Hello!")
</script>
The script above writes Hello! to the HTML output.
HTML noscript Element
The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting. The noscript element can contain all the elements that you can find inside the body element of a normal HTML page.
The content inside the noscript element will only be displayed if scripts are not supported, or are disabled in the user’s browser:
For example
<script type="text/javascript">
document.write("Hello!")
</script>
<noscript>This is not inside Script!</noscript>
HTML Script Tags
Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scripts
HTML Advanced tutorial 23 : HTML Entities >>
<< HTML Advanced tutorial 21 : HTML Meta
The <script> tag is used to define a client-side script, such as a JavaScript and JQuery. The script element either contains scripting statements or it points to an external script file through the src attribute. The required type attribute specifies the MIME type of the script. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
For Example
<script type="text/javascript">
document.write("Hello!")
</script>
The script above writes Hello! to the HTML output.
HTML noscript Element
The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting. The noscript element can contain all the elements that you can find inside the body element of a normal HTML page.
The content inside the noscript element will only be displayed if scripts are not supported, or are disabled in the user’s browser:
For example
<script type="text/javascript">
document.write("Hello!")
</script>
<noscript>This is not inside Script!</noscript>
HTML Script Tags
Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scripts
HTML Advanced tutorial 23 : HTML Entities >>
<< HTML Advanced tutorial 21 : HTML Meta
HTML Advanced tutorial 21 : HTML Meta
Metadata is information about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The <meta> tag always goes inside the head element. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
Keywords for Search Engines
Some search engines will use the name and content attributes of the meta element to index your pages. The following meta element defines a description of a page:
<meta name="description" content="Free Web tutorials on HTML" />
The following meta element defines keywords for a page.
<meta name="keywords" content="HTML, CSS, XML" />
The intention of the name and content attributes is to describe the content of a page.
HTML Advanced tutorial 22 : HTML Scripts >>
<< HTML Advanced tutorial 20 : HTML head Elements
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The <meta> tag always goes inside the head element. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
Keywords for Search Engines
Some search engines will use the name and content attributes of the meta element to index your pages. The following meta element defines a description of a page:
<meta name="description" content="Free Web tutorials on HTML" />
The following meta element defines keywords for a page.
<meta name="keywords" content="HTML, CSS, XML" />
The intention of the name and content attributes is to describe the content of a page.
HTML Advanced tutorial 22 : HTML Scripts >>
<< HTML Advanced tutorial 20 : HTML head Elements
Friday, April 20, 2012
HTML Advanced tutorial 20 : HTML head Elements
The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section
<title>, <base>, <link>, <meta>, <script>, and <style>.
title Element
The <title> tag defines the title of the document. The title element is required in all HTML/XHTML documents. The title element
1). defines a title in the browser toolbar
2). provides a title for the page when it is added to favorites
3). displays a title for the page in search-engine results
For example,below is simplified HTML document.
<html>
<head>
<title>Title Here</title>
</head>
<body>
content Here.
</body>
</html>
base Element
The <base> tag specifies a default address or a default target for all links on a page. For example
<head>
<base href="http://www.yoursite.com/images/" />
<base target="_blank" />
</head>
link Element
The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets. For example
<head>
<link rel="stylesheet" type="text/css" href="mystylefile.css" />
</head>
style Element
The <style> tag is used to define style information for an HTML document.Inside the style element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
The <meta> tag provides metadata about the HTML document.
The <script> tag is used to define a client-side script, such as a JavaScript.
HTML head Elements
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base /> Defines a default address or a default target for all links on a page
<link /> Defines the relationship between a document and an external resource
<meta /> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
HTML Advanced tutorial 21 : HTML Meta >>
<< HTML Advanced tutorial 19 : HTML Styles
<title>, <base>, <link>, <meta>, <script>, and <style>.
title Element
The <title> tag defines the title of the document. The title element is required in all HTML/XHTML documents. The title element
1). defines a title in the browser toolbar
2). provides a title for the page when it is added to favorites
3). displays a title for the page in search-engine results
For example,below is simplified HTML document.
<html>
<head>
<title>Title Here</title>
</head>
<body>
content Here.
</body>
</html>
base Element
The <base> tag specifies a default address or a default target for all links on a page. For example
<head>
<base href="http://www.yoursite.com/images/" />
<base target="_blank" />
</head>
link Element
The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets. For example
<head>
<link rel="stylesheet" type="text/css" href="mystylefile.css" />
</head>
style Element
The <style> tag is used to define style information for an HTML document.Inside the style element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
The <meta> tag provides metadata about the HTML document.
The <script> tag is used to define a client-side script, such as a JavaScript.
HTML head Elements
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base /> Defines a default address or a default target for all links on a page
<link /> Defines the relationship between a document and an external resource
<meta /> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
HTML Advanced tutorial 21 : HTML Meta >>
<< HTML Advanced tutorial 19 : HTML Styles
Wednesday, April 18, 2012
HTML Advanced tutorial 19 : HTML Styles
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet.
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="file.css" />
</head>
Internal Style Sheet
An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this.
<head>
<style type="text/css">
body {background-color:black;}
p {color:red;}
</style>
</head>
Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. For example.
<p style="color:red;margin-left:10px;">some paragraph.</p>
HTML Style Tags
Tag Description
<style> Defines style information for a document
<link /> Defines the relationship between a document and an external resource
HTML Advanced tutorial 20 : HTML head Elements >>
<< HTML Advanced tutorial 18 : HTML Doctypes
- External style sheet
- Internal style sheet
- Inline styles
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="file.css" />
</head>
Internal Style Sheet
An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this.
<head>
<style type="text/css">
body {background-color:black;}
p {color:red;}
</style>
</head>
Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. For example.
<p style="color:red;margin-left:10px;">some paragraph.</p>
HTML Style Tags
Tag Description
<style> Defines style information for a document
<link /> Defines the relationship between a document and an external resource
HTML Advanced tutorial 20 : HTML head Elements >>
<< HTML Advanced tutorial 18 : HTML Doctypes
HTML Advanced tutorial 18 : HTML Doctypes
A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly. For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
The content of Page here.
</body>
</html>
The above HTML document contains doctype of HTML 4.01 Transitional:
Different Doctypes
The doctype declaration is not an HTML tag, it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly. The doctype declaration should be the very first thing in an HTML document, before the <html> tag. Always add a doctype to your pages. This helps the browsers to render the page correctly!
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements e.g font and center etc. Framesets are not allowed in this Doctype. For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements e.g font etc. Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
HTML DOCTYPE Element
Tag Description
<!DOCTYPE> Defines the document type. This declaration goes before the <html> start tag
HTML Advanced tutorial 19 : HTML Styles >>
<< HTML Advanced tutorial 17 : HTML Layouts
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
The content of Page here.
</body>
</html>
The above HTML document contains doctype of HTML 4.01 Transitional:
Different Doctypes
The doctype declaration is not an HTML tag, it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly. The doctype declaration should be the very first thing in an HTML document, before the <html> tag. Always add a doctype to your pages. This helps the browsers to render the page correctly!
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements e.g font and center etc. Framesets are not allowed in this Doctype. For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements e.g font etc. Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
HTML DOCTYPE Element
Tag Description
<!DOCTYPE> Defines the document type. This declaration goes before the <html> start tag
HTML Advanced tutorial 19 : HTML Styles >>
<< HTML Advanced tutorial 17 : HTML Layouts
Tuesday, April 17, 2012
HTML Advanced tutorial 17 : HTML Layouts
Website Layouts
Web page layout is very important to make your website look good. Most websites have put their content in multiple columns For Example formatted like a magazine or newspaper. Multiple columns are created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.
Using Tables
The simplest way of creating layouts is by using the HTML <table> tag. The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:
<html>
<body>
<table width="450" border="0">
<tr>
<td colspan="2" style="background-color:Red;">
<h1>Header of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD800;width:110px;text-align:top;">
<b>Menu Here</b>
</td>
<td style="background-color:#EEEEEE;height:220px;width:410px;text-align:top;">
Web content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2012 yoursite.com</td>
</tr>
</table>
</body>
</html>
The HTML code above will produce the following result.
Using Div Elements
The div element is a block level element used for grouping HTML elements. The following example uses five div elements to create a multiple column layout, creating the same result as in the previous (using table tag) example.
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:Red;">
<h1 style="margin-bottom:0;">Header of Web Page</h1></div>
<div id="menu" style="background-color:#FFD800;height:200px;width:110px;float:left;">
<b>Menu</b>
</div>
<div id="content" style="background-color:#EEEEEE;height:220px;width:410px;float:left;">
Web content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 yoursite.com</div>
</div>
</body>
</html>
The HTML code above will produce the following result.
The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file.
HTML Layout Tags
Tag Description
<table> Defines a table
<div> Defines a section in a document
HTML Advanced tutorial 18 : HTML Doctypes >>
<< HTML Beginner tutorial 16 : HTML Colors
Web page layout is very important to make your website look good. Most websites have put their content in multiple columns For Example formatted like a magazine or newspaper. Multiple columns are created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.
Using Tables
The simplest way of creating layouts is by using the HTML <table> tag. The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:
<html>
<body>
<table width="450" border="0">
<tr>
<td colspan="2" style="background-color:Red;">
<h1>Header of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD800;width:110px;text-align:top;">
<b>Menu Here</b>
</td>
<td style="background-color:#EEEEEE;height:220px;width:410px;text-align:top;">
Web content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2012 yoursite.com</td>
</tr>
</table>
</body>
</html>
The HTML code above will produce the following result.
Header of Web Page |
|
| Menu Here | Web content goes here |
| Copyright © 2012 yoursite.com | |
Using Div Elements
The div element is a block level element used for grouping HTML elements. The following example uses five div elements to create a multiple column layout, creating the same result as in the previous (using table tag) example.
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:Red;">
<h1 style="margin-bottom:0;">Header of Web Page</h1></div>
<div id="menu" style="background-color:#FFD800;height:200px;width:110px;float:left;">
<b>Menu</b>
</div>
<div id="content" style="background-color:#EEEEEE;height:220px;width:410px;float:left;">
Web content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 yoursite.com</div>
</div>
</body>
</html>
The HTML code above will produce the following result.
Header of Web Page
Web content goes here
The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file.
HTML Layout Tags
Tag Description
<table> Defines a table
<div> Defines a section in a document
HTML Advanced tutorial 18 : HTML Doctypes >>
<< HTML Beginner tutorial 16 : HTML Colors
Subscribe to:
Posts (Atom)