Grade 9 course covers up following topics out of which some may not be dealt in deep enough as they may be out of scope of the curriculum.
1) Text Basics:
Divisions and Paragraphs
Headings
Changing Text Appearance
Content-based Style Tags
Physical Style Tags
Expanded Font Handling
Precise Spacing and Layout
Block Quotes
Addresses
Special Character Encoding
2) Rules, Images,and Multimedia:
Using Horizontal Rules
Inserting Images in Your Documents
Document Colors and Background Images
Animated Text
Other Multimedia Content
Beyond HTML
3) Links and Webs:
Hypertext Basics
Referencing Documents: The URL
Creating Hyperlinks
Creating Effective Links
4) Formatted Lists:
Unordered Lists
Ordered Lists
The <li> Tag
Nesting Lists
Directory Lists
Menu Lists
Definition Lists
Appropriate List Usage
5) Tables:
The HTML Table Model
Table Tags
Beyond Ordinary Tables
6) Forms:
*(This part needs great depth study)
**So here only designing aspect will be discussed.
***Means forms here won't be functional at all (say no programming parts)
Form Fundamentals
Form Input Elements
Multiline Text Areas
Multiple Choice Elements
Creating Effective Forms
Tuesday, December 28, 2010
Practical 04 - Body of HTML
1) The Document Body:
The document body is the important of the matter; it's where you put the contents of your document. The <body> tag delimits the document body.
2) The <body> Tag:
Within HTML 4.0, the <body> tag has no attributes and is little more than a placeholder in your documents. Various browsers, as we'll see, have extended the tag to give greater control over your document's appearance.
<body>
Function:
Defines the document body
Attributes:
in HTML 2.0
ALINK (Netscape only), BACKGROUND (extension), BGCOLOR (extension), BGPROPERTIES (Internet Explorer only), LEFTMARGIN (Internet Explorer only), LINK (extension), TEXT (extension), TOPMARGIN (Internet Explorer only), and VLINK (extension)
in HTML 4.0
BACKGROUND=URI (background image for document)
BGCOLOR=Color (background color for document)
TEXT=Color (text color for document)
LINK=Color (link color for document)
VLINK=Color (visited link color for document)
ALINK=Color (active link color for document)
ONLOAD=Script (document has been loaded)
ONUNLOAD=Script (document has been exited)
End tag:
</body>; may be omitted
Contains:
body_content
Used in:
html_tag
Anything inside the <body> tag and its ending counterpart </body> is called body content. The simplest HTML document might have only a sequence of text paragraphs within the <body> tag. More complex documents will include heavily formatted text, graphical figures, tables, and a variety of special effects.
Since the position of the <body> and </body> tags can be inferred by the browser, they can safely be omitted from the document. However, like the <html> and <head> tags, we recommend that you include the <body> tags in your document to make them more easily readable and maintainable.
NOw we can begin our tour of HTML document (web-page designing). As you know HTML is not enough to maked dynamic and interactive web-page.
TML is just the beginning journey of the web-design.
The document body is the important of the matter; it's where you put the contents of your document. The <body> tag delimits the document body.
2) The <body> Tag:
Within HTML 4.0, the <body> tag has no attributes and is little more than a placeholder in your documents. Various browsers, as we'll see, have extended the tag to give greater control over your document's appearance.
<body>
Function:
Defines the document body
Attributes:
in HTML 2.0
ALINK (Netscape only), BACKGROUND (extension), BGCOLOR (extension), BGPROPERTIES (Internet Explorer only), LEFTMARGIN (Internet Explorer only), LINK (extension), TEXT (extension), TOPMARGIN (Internet Explorer only), and VLINK (extension)
in HTML 4.0
BACKGROUND=URI (background image for document)
BGCOLOR=Color (background color for document)
TEXT=Color (text color for document)
LINK=Color (link color for document)
VLINK=Color (visited link color for document)
ALINK=Color (active link color for document)
ONLOAD=Script (document has been loaded)
ONUNLOAD=Script (document has been exited)
End tag:
</body>; may be omitted
Contains:
body_content
Used in:
html_tag
Anything inside the <body> tag and its ending counterpart </body> is called body content. The simplest HTML document might have only a sequence of text paragraphs within the <body> tag. More complex documents will include heavily formatted text, graphical figures, tables, and a variety of special effects.
Since the position of the <body> and </body> tags can be inferred by the browser, they can safely be omitted from the document. However, like the <html> and <head> tags, we recommend that you include the <body> tags in your document to make them more easily readable and maintainable.
NOw we can begin our tour of HTML document (web-page designing). As you know HTML is not enough to maked dynamic and interactive web-page.
TML is just the beginning journey of the web-design.
Practical 03 - Header of HTML Document
1) The Document Header:
The HTML document header describes the various properties of the document, including its title, position within the Web, and relationship with other documents. Most of the data contained within the document header are never actually rendered as content visible to the user.
2) The <head> Tag:
The <head> tag has no attributes and serves only to encapsulate the other header tags. Since it always occurs near the beginning of a document, just after the <html> tag and before the <body> or <frameset> tag, both the <head> tag and its corresponding ending </head> can be unambiguously inferred by the browser and so can be safely omitted from the document. Nonetheless, we do encourage you to include them in your documents, since it promotes readability and better supports document automation.
<head>
Function:
Defines the document header
Attributes:
None
End tag:
</head>; rarely omitted
Contains:
head_content
Used in:
html_tag
The <head> tag may contain a number of other tags that help define and manage the document's content. These include, in any order of appearance: <base>, <basefont>, <isindex>, <link>, <meta>, <nextid>, and <title>. For more information, see Chapter 6, Links and Webs.
3) The <title> Tag:
The <title> tag does exactly what you might expect: the words you place inside its start and end tags define the title for your document. (We told you this stuff is pretty much self-explanatory and easier than you might think at first glance.) The title is used by the browser in some special manner, most often placed in the browser window's title bar or on a status line. Usually, too, the title becomes the default name for a link to the document if the document is added to a link collection or to a user's ``hot list.''
<title>
Function:
Defines the document title
Attributes:
None
End tag:
</title>; never omitted
Contains:
plain_text
Used in:
head_content
The <title> tag is the only thing required within the <head> tag. Since the <head> tag itself and even the <html> tag may be safely omitted, the <title> tag could be the first line within a valid HTML document. Beyond that, most browsers will even supply a generic title for documents lacking a <title> tag, such as the document's filename, so you don't even have to supply a title. That goes a bit too far even for our down-and-dirty tastes. No respectable author of an HTML document should serve up a document missing the <title> tag and a title.
Browsers do not specially format title text and ignore anything other than text inside the title start and end tags, such as images or links to other documents.
Here's an even barer barebones example of a valid HTML document to highlight the header and title tags:
<html>
<head>
<title>Using HTML: The Definitive Guide</title>
</head>
</html>
What's in a title?
Selecting the right title is crucial to defining a document and ensuring that it can be effectively used within the World Wide Web.
4) Related Header Tags:
Other tags you may include within the <head> tag deal with specific aspects of document creation, management, linking, or automation. That's why we only mention them here briefly, and they are far from scope of the course of grade 9.
Briefly, the special header tags are:
<link> and <base>
Define the current document's base location and relationship to other documents.
<isindex>
Creates automatic document indexing forms, allowing users to search databases of information using the current document as a querying tool.
<nextid>
Makes creation of unique document labels easier when using document automation tools.
<meta>
Provides additional document data not supplied by any of the other <head> tags.
<basefont>
Defines the default font size for a font model that some advanced browsers support, but that is not part of the HTML 2.0 standard.
Besides we can also add <Script> which also can be placed in HTML body.
The HTML document header describes the various properties of the document, including its title, position within the Web, and relationship with other documents. Most of the data contained within the document header are never actually rendered as content visible to the user.
2) The <head> Tag:
The <head> tag has no attributes and serves only to encapsulate the other header tags. Since it always occurs near the beginning of a document, just after the <html> tag and before the <body> or <frameset> tag, both the <head> tag and its corresponding ending </head> can be unambiguously inferred by the browser and so can be safely omitted from the document. Nonetheless, we do encourage you to include them in your documents, since it promotes readability and better supports document automation.
<head>
Function:
Defines the document header
Attributes:
None
End tag:
</head>; rarely omitted
Contains:
head_content
Used in:
html_tag
The <head> tag may contain a number of other tags that help define and manage the document's content. These include, in any order of appearance: <base>, <basefont>, <isindex>, <link>, <meta>, <nextid>, and <title>. For more information, see Chapter 6, Links and Webs.
3) The <title> Tag:
The <title> tag does exactly what you might expect: the words you place inside its start and end tags define the title for your document. (We told you this stuff is pretty much self-explanatory and easier than you might think at first glance.) The title is used by the browser in some special manner, most often placed in the browser window's title bar or on a status line. Usually, too, the title becomes the default name for a link to the document if the document is added to a link collection or to a user's ``hot list.''
<title>
Function:
Defines the document title
Attributes:
None
End tag:
</title>; never omitted
Contains:
plain_text
Used in:
head_content
The <title> tag is the only thing required within the <head> tag. Since the <head> tag itself and even the <html> tag may be safely omitted, the <title> tag could be the first line within a valid HTML document. Beyond that, most browsers will even supply a generic title for documents lacking a <title> tag, such as the document's filename, so you don't even have to supply a title. That goes a bit too far even for our down-and-dirty tastes. No respectable author of an HTML document should serve up a document missing the <title> tag and a title.
Browsers do not specially format title text and ignore anything other than text inside the title start and end tags, such as images or links to other documents.
Here's an even barer barebones example of a valid HTML document to highlight the header and title tags:
<html>
<head>
<title>Using HTML: The Definitive Guide</title>
</head>
</html>
What's in a title?
Selecting the right title is crucial to defining a document and ensuring that it can be effectively used within the World Wide Web.
4) Related Header Tags:
Other tags you may include within the <head> tag deal with specific aspects of document creation, management, linking, or automation. That's why we only mention them here briefly, and they are far from scope of the course of grade 9.
Briefly, the special header tags are:
<link> and <base>
Define the current document's base location and relationship to other documents.
<isindex>
Creates automatic document indexing forms, allowing users to search databases of information using the current document as a querying tool.
<nextid>
Makes creation of unique document labels easier when using document automation tools.
<meta>
Provides additional document data not supplied by any of the other <head> tags.
<basefont>
Defines the default font size for a font model that some advanced browsers support, but that is not part of the HTML 2.0 standard.
Besides we can also add <Script> which also can be placed in HTML body.
Practical 02 - Basic of HTML Tags
1) HTML Embedded Tags:
You might have noticed that every words (say text) are display in the browser except those which are found inside a pair of less-than (<) and greater-than (>) characters.
HTML is an embedded (and/or interpreted) language: we insert the language's directions (instructions) or tags into the document that we load into a browser to view. The browser uses the information (directions/instructions) which are enclosed within less-than (<) and greater-than (>) characters also called HTML tags to decide how to display or treat the subsequent contents of your HTML document.
For example <i> tag that precedes the word "Hello" in previous example tells the browser to display the following text in italics.
Mostly tags comes in pair opening tag like <i> and its closing tag </i>. Remember closing tag name starts with forward slash (/) indicating it is ending tag. Effect of particular tag is confined between the opening and closing tag.
There are fews tags that comes along or say having no closing tag.
2) Types of Tags:
There are basically two (2) types of tags: They are-
(i) Empty tag/Singular tag:
Tag that only have opening tag is called empty/singular tag. For example <br>, <hr>
(ii) Paired Tag (content tags)/Plural tag:
Tag that have both opening and closing tags is called paired/plural tag. For example <i>, <b>
Yes, remember if tag is paired type and its closing tag is omitted and mis-placed will bring undesirable consequent (result).
But still there are some paired tag even if omitted doesn't effect at all. Example of such a tag is <p> tag.
3) Syntax of Tags:
Every HTML tag consists of tag --name--, sometimes followed by an optional lists of tag --attributes--, all placed between opening and closing angular bracker (< >).
Simple tag is nothing more that a name appropriately enclosed in brackets, such as <head> and <i>.
More complicated tags have attributes, which may have specific value. They appear as attribute="value".
If value is number than double-quotes can be eliminated. But to keep things simple it is good to use double-quotes in all cases.
Tag writing rules (convention):
(i) Tag names and attribute names are case insensitive. In some cases attributes are case sensitive depending on browser and server. Similarly the values may be case sensitive like URI/URL's.
(ii) Tag attributes, if any, belong after the tag name, each separated by one or more tab, space, or return characters. Their order of appearance is not important
(iii) A tag attribute's value, if any, follows an equal sign (=) after the attribute name. You may include spaces around the equal sign, so that width=6, width = 6, width =6, and width= 6 all mean the same. For readability, however, we prefer not to include spaces. That way, it's easier to pick out an attribute/value pair from a crowd of pairs in a lengthy tag.
(iv) If an attribute's value is a single word or number (no spaces), you may simply add it after the equal sign. All other values should be enclosed in single or double quotes, especially those values that contain several words separated by spaces. The length of the value is limited to 1024 characters
(v) Most browsers are tolerant of how tags are punctuated and broken across lines. Nonetheless, avoid breaking tags across lines in your source document whenever possible. This rule promotes readability and reduces potential errors in your HTML documents.
Sample Tags:
Here are some tags with attributes:
<a href="http://www.ora.com/catalog.html">
<font face="arial" size=10 style="italic">
4) Nesting Tags (Proper and Improrer):
When tags appears between the other tags then we need to follow proper nesting rules. The rule is the last opened tag need to be first closed and so on.
Otherwise result will be not as expected. In some browser the case is more worst. Nothing will be displayed on the browser.
Eaxmple:
<b>Ram <i>went</i> to market</b>
Here <i> is opened last so closed first.
It is example of proper nesting.
As a result: we get "Ram went to market" bold and the word "went" in italic as well.
Let's make improper nesting.
<b>Ram <i>went</b> to market</b>
As a result: Here we get "Ram went" bold and "went" italic as well and "to market" will be displayed regular.
Improper nesting most be avoided, sometime they may may bring very worst scenario.
You might have noticed that every words (say text) are display in the browser except those which are found inside a pair of less-than (<) and greater-than (>) characters.
HTML is an embedded (and/or interpreted) language: we insert the language's directions (instructions) or tags into the document that we load into a browser to view. The browser uses the information (directions/instructions) which are enclosed within less-than (<) and greater-than (>) characters also called HTML tags to decide how to display or treat the subsequent contents of your HTML document.
For example <i> tag that precedes the word "Hello" in previous example tells the browser to display the following text in italics.
Mostly tags comes in pair opening tag like <i> and its closing tag </i>. Remember closing tag name starts with forward slash (/) indicating it is ending tag. Effect of particular tag is confined between the opening and closing tag.
There are fews tags that comes along or say having no closing tag.
2) Types of Tags:
There are basically two (2) types of tags: They are-
(i) Empty tag/Singular tag:
Tag that only have opening tag is called empty/singular tag. For example <br>, <hr>
(ii) Paired Tag (content tags)/Plural tag:
Tag that have both opening and closing tags is called paired/plural tag. For example <i>, <b>
Yes, remember if tag is paired type and its closing tag is omitted and mis-placed will bring undesirable consequent (result).
But still there are some paired tag even if omitted doesn't effect at all. Example of such a tag is <p> tag.
3) Syntax of Tags:
Every HTML tag consists of tag --name--, sometimes followed by an optional lists of tag --attributes--, all placed between opening and closing angular bracker (< >).
Simple tag is nothing more that a name appropriately enclosed in brackets, such as <head> and <i>.
More complicated tags have attributes, which may have specific value. They appear as attribute="value".
If value is number than double-quotes can be eliminated. But to keep things simple it is good to use double-quotes in all cases.
Tag writing rules (convention):
(i) Tag names and attribute names are case insensitive. In some cases attributes are case sensitive depending on browser and server. Similarly the values may be case sensitive like URI/URL's.
(ii) Tag attributes, if any, belong after the tag name, each separated by one or more tab, space, or return characters. Their order of appearance is not important
(iii) A tag attribute's value, if any, follows an equal sign (=) after the attribute name. You may include spaces around the equal sign, so that width=6, width = 6, width =6, and width= 6 all mean the same. For readability, however, we prefer not to include spaces. That way, it's easier to pick out an attribute/value pair from a crowd of pairs in a lengthy tag.
(iv) If an attribute's value is a single word or number (no spaces), you may simply add it after the equal sign. All other values should be enclosed in single or double quotes, especially those values that contain several words separated by spaces. The length of the value is limited to 1024 characters
(v) Most browsers are tolerant of how tags are punctuated and broken across lines. Nonetheless, avoid breaking tags across lines in your source document whenever possible. This rule promotes readability and reduces potential errors in your HTML documents.
Sample Tags:
Here are some tags with attributes:
<a href="http://www.ora.com/catalog.html">
<font face="arial" size=10 style="italic">
4) Nesting Tags (Proper and Improrer):
When tags appears between the other tags then we need to follow proper nesting rules. The rule is the last opened tag need to be first closed and so on.
Otherwise result will be not as expected. In some browser the case is more worst. Nothing will be displayed on the browser.
Eaxmple:
<b>Ram <i>went</i> to market</b>
Here <i> is opened last so closed first.
It is example of proper nesting.
As a result: we get "Ram went to market" bold and the word "went" in italic as well.
Let's make improper nesting.
<b>Ram <i>went</b> to market</b>
As a result: Here we get "Ram went" bold and "went" italic as well and "to market" will be displayed regular.
Improper nesting most be avoided, sometime they may may bring very worst scenario.
Practical 01 - A first HTML Document
1) Writing Tools:
We don't need to spend hours to start our first HTML document. HTML is simple to read and understand, and it's simple to write, too.
Let's get started...
As you know well our much focus will be writing HTML manually using plain text editors:
For MS-Windows Notepad,
We can test out HTML document using locally installed (or OS integrated) web-browsers, like
Internet Explorer or other.
*Note:
(1) While saving files in Notepad either enclose file names (along with extension either .html or .htm) within double quotes. For e.g. "firstpage.html"
(2) write filenames attached with extension .html or .htm and set Save as Type to --All Files (*.*)--
2) A First HTML Document
Like every programming language book often starts off with a simple example on how to display message "Hello World". so here it is:
<html>
<head>
<title>My first HTML document</title>
</head>
<body>
<!-- this is way of writing comment -->
<h2>My first HTML document</h2>
Hello, <i>World Wide Web!</i>
</body>
</html>
Save this file as instructed above i.e. file with extension .html or .htm. Then you may double to open the file in the web-browser.
3) Lesson of this simple HTML document
Every HTML document will have common skeleton. In grade 9, we will mostly work on BODY part of the HTML document.
HTML basic Skeleton:
<HTML>
<HEAD>
<!--scripts and web-page title that displays on Title bar is written here-->
<TITLE>Tilte </TITLE>
</HEAD>
<BODY>
<!--content with HTML defined structures which can be viewed on the browser screen is written here-->
</BODY>
</HTML>
Remember HEAD and BODY are the two main parts of every HTML documents that comes one after another.
We don't need to spend hours to start our first HTML document. HTML is simple to read and understand, and it's simple to write, too.
Let's get started...
As you know well our much focus will be writing HTML manually using plain text editors:
For MS-Windows Notepad,
We can test out HTML document using locally installed (or OS integrated) web-browsers, like
Internet Explorer or other.
*Note:
(1) While saving files in Notepad either enclose file names (along with extension either .html or .htm) within double quotes. For e.g. "firstpage.html"
(2) write filenames attached with extension .html or .htm and set Save as Type to --All Files (*.*)--
2) A First HTML Document
Like every programming language book often starts off with a simple example on how to display message "Hello World". so here it is:
<html>
<head>
<title>My first HTML document</title>
</head>
<body>
<!-- this is way of writing comment -->
<h2>My first HTML document</h2>
Hello, <i>World Wide Web!</i>
</body>
</html>
Save this file as instructed above i.e. file with extension .html or .htm. Then you may double to open the file in the web-browser.
3) Lesson of this simple HTML document
Every HTML document will have common skeleton. In grade 9, we will mostly work on BODY part of the HTML document.
HTML basic Skeleton:
<HTML>
<HEAD>
<!--scripts and web-page title that displays on Title bar is written here-->
<TITLE>Tilte </TITLE>
</HEAD>
<BODY>
<!--content with HTML defined structures which can be viewed on the browser screen is written here-->
</BODY>
</HTML>
Remember HEAD and BODY are the two main parts of every HTML documents that comes one after another.
What is WWW?
(1) What is the World Wide Web?
The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience:
- A uniform naming scheme for locating resources on the Web (e.g., URIs).
- Protocols, for access to named resources over the Web (e.g., HTTP).
- Hypertext, for easy navigation among resources (e.g., HTML).
- The ties between the three mechanisms are apparent throughout this specification.
(2) URIs
Every resource available on the Web -- HTML document, image, video clip, program, etc. -- has an address that may be encoded by a Universal Resource Identifier , or "URI".
>>URIs typically consist of three pieces: <<
- The naming scheme of the mechanism used to access the resource.
- The name of the machine hosting the resource.
- The name of the resource itself, given as a path.
- Consider the URI that designates the W3C Technical Reports page:
http://www.w3.org/TR
This URI may be read as follows: There is a document available via the HTTP protocol, residing on the machine http://www.w3.org/, accessible via the path "/TR". Other schemes you may see in HTML documents include "mailto" for email and "ftp" for FTP.
Here is another example of a URI. This one refers to a user's mailbox:
...this is text... For all comments, please send email to <A href="mailto:jean@somesite.com%22%3EJean%3C/A>.
*Note: Most readers may be familiar with the term --"URL"-- and not the term "URI". URLs form a subset of the more general URI naming scheme.
(3) Relative URIs
A relative URI doesn't contain any naming scheme information. Its path generally refers to a resource on the same machine as the current document. Relative URIs may contain relative path components (e.g., ".." means one level up in the hierarchy defined by the path), and may contain .
Relative URIs are resolved to full URIs using a base URI. As an example of relative URI resolution, assume we have the base URI "http://www.acme.com/support/intro.html". The relative URI in the following markup for a hypertext link:
<A href="suppliers.html">Suppliers</A>
would expand to the full URI "http://www.acmhte.com/support/suppliers.html", while the relative URI in the following markup for an image
<IMG src="../icons/logon.gif" alt="logon">
would expand to the full URI "http://www.acmhte.com/icons/logon.gif".
In HTML, URIs are used to:
- Link to another document or resource.
- Link to an external style sheet or script.
- Include an image, object, or applet in a page.
- Create an image map .
- Submit a form .
- Create a frame document.
The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience:
- A uniform naming scheme for locating resources on the Web (e.g., URIs).
- Protocols, for access to named resources over the Web (e.g., HTTP).
- Hypertext, for easy navigation among resources (e.g., HTML).
- The ties between the three mechanisms are apparent throughout this specification.
(2) URIs
Every resource available on the Web -- HTML document, image, video clip, program, etc. -- has an address that may be encoded by a Universal Resource Identifier , or "URI".
>>URIs typically consist of three pieces: <<
- The naming scheme of the mechanism used to access the resource.
- The name of the machine hosting the resource.
- The name of the resource itself, given as a path.
- Consider the URI that designates the W3C Technical Reports page:
http://www.w3.org/TR
This URI may be read as follows: There is a document available via the HTTP protocol, residing on the machine http://www.w3.org/, accessible via the path "/TR". Other schemes you may see in HTML documents include "mailto" for email and "ftp" for FTP.
Here is another example of a URI. This one refers to a user's mailbox:
...this is text... For all comments, please send email to <A href="mailto:jean@somesite.com%22%3EJean%3C/A>.
*Note: Most readers may be familiar with the term --"URL"-- and not the term "URI". URLs form a subset of the more general URI naming scheme.
(3) Relative URIs
A relative URI doesn't contain any naming scheme information. Its path generally refers to a resource on the same machine as the current document. Relative URIs may contain relative path components (e.g., ".." means one level up in the hierarchy defined by the path), and may contain .
Relative URIs are resolved to full URIs using a base URI. As an example of relative URI resolution, assume we have the base URI "http://www.acme.com/support/intro.html". The relative URI in the following markup for a hypertext link:
<A href="suppliers.html">Suppliers</A>
would expand to the full URI "http://www.acmhte.com/support/suppliers.html", while the relative URI in the following markup for an image
<IMG src="../icons/logon.gif" alt="logon">
would expand to the full URI "http://www.acmhte.com/icons/logon.gif".
In HTML, URIs are used to:
- Link to another document or resource.
- Link to an external style sheet or script.
- Include an image, object, or applet in a page.
- Create an image map .
- Submit a form .
- Create a frame document.
What HTML isn't?
(1) HTML: What It Isn't?
With all its multimedia-enabling features and the hot technologies that give life to HTML documents over the Internet, it is important also to understand the language's limitations: HTML is not a word processing tool, a desktop publishing solution, or even a programming language, for that matter. That's because its fundamental purpose is to define the structure and appearance of documents and document families so that they might be delivered quickly and easily to a user over a network for rendering on a variety of display devices.
"Jack of all trades, but master of none"- so to speak.
(2) Don't waste your time trying to force HTML to do things it was never designed to do. Instead, use HTML in the manner it was designed for: indicating the structure of a document so that the browser can then render its content appropriately.
To be professional web-designer or web-developer you need learn and use several other web building resources like:
- WYSIWYG web designing software like Dreamweaver, MS-Frontpage
- Instead of WYSIWYG you may use extra features (enhanced) text-editors like Notepad++
- These days more efficient web-development tools are available that can replace above mentioned tools i.e. CMS (Content Management System) like Joomla, Durpal, etc.
Besides GUI/Editors/CMS web-development requires more knowledge on topics like
- XML (eXtended Markup Language)
- CSS (Cascade Style Sheet)
- Server-side Scripting like ASP (Active Server Page) or JavaServerlet or PHP (Hypertext Pre-processor)
or CGI scriptings like Perl
- Client-side Scripting like JavaScript, VBScript
Besides these you may like make your page or site more graphically rich than you require more extensions of knowledge like
- Graphics softwares like Photoshop
- Animation and multimedia interactive softwares like Flash
- Java applets and other shockwave programs
and many more...
With all its multimedia-enabling features and the hot technologies that give life to HTML documents over the Internet, it is important also to understand the language's limitations: HTML is not a word processing tool, a desktop publishing solution, or even a programming language, for that matter. That's because its fundamental purpose is to define the structure and appearance of documents and document families so that they might be delivered quickly and easily to a user over a network for rendering on a variety of display devices.
"Jack of all trades, but master of none"- so to speak.
(2) Don't waste your time trying to force HTML to do things it was never designed to do. Instead, use HTML in the manner it was designed for: indicating the structure of a document so that the browser can then render its content appropriately.
To be professional web-designer or web-developer you need learn and use several other web building resources like:
- WYSIWYG web designing software like Dreamweaver, MS-Frontpage
- Instead of WYSIWYG you may use extra features (enhanced) text-editors like Notepad++
- These days more efficient web-development tools are available that can replace above mentioned tools i.e. CMS (Content Management System) like Joomla, Durpal, etc.
Besides GUI/Editors/CMS web-development requires more knowledge on topics like
- XML (eXtended Markup Language)
- CSS (Cascade Style Sheet)
- Server-side Scripting like ASP (Active Server Page) or JavaServerlet or PHP (Hypertext Pre-processor)
or CGI scriptings like Perl
- Client-side Scripting like JavaScript, VBScript
Besides these you may like make your page or site more graphically rich than you require more extensions of knowledge like
- Graphics softwares like Photoshop
- Animation and multimedia interactive softwares like Flash
- Java applets and other shockwave programs
and many more...
What HTML is?
(1) HTML: What it is?
HTML is a document-layout and hyperlink specification language (or say markup language). It defines the syntax and placement of special, embedded directions that aren't displayed by the browser, but tell it how to display the contents of the documents, including text, images, and other support media. The language comes up with one very peculiar features of document interactivity through special hypertext links, in short called --hyperlinks--, which connect one document with other documents in the collections of documents, as well as with other Internet resources, like FTP and Email.
>>HTML gives authors the means to:<<
- Publish online documents with headings, text, tables, lists, photos, etc.
- Retrieve online information via hypertext links, at the click of a button.
- Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
- Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
(2) HTML standards and extensions, standards organizations:
Currenly HTML 4.0 and above is already in implementations. Browser developers rely upon the HTML standard to program the software that formats and displays common HTML documents. With development of newer versions of HTML some changes in the tags occurs. Sometime older tags are deprecated or say replaced by newer tags. Often new tags are introduced. But meantime we need to use proper version browsers to run HTML we are using. Support of tag differs from browsers to browsers with respect to brands and their versions.
Like many popular technologies, it became obvious that more formal means were needed to define and manage --to standardize-- HTML's features, making it easier for everyone to created and share documents.
Focus, concern, reponsibility, how they work may differ to some degree from standards organizations. Major players in ther World Wide Wide standards are-
(i) The World Wide Web Consortium (W3C) and
(ii) The Internet Engineering Task Force (IETF)
HTML is a document-layout and hyperlink specification language (or say markup language). It defines the syntax and placement of special, embedded directions that aren't displayed by the browser, but tell it how to display the contents of the documents, including text, images, and other support media. The language comes up with one very peculiar features of document interactivity through special hypertext links, in short called --hyperlinks--, which connect one document with other documents in the collections of documents, as well as with other Internet resources, like FTP and Email.
>>HTML gives authors the means to:<<
- Publish online documents with headings, text, tables, lists, photos, etc.
- Retrieve online information via hypertext links, at the click of a button.
- Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
- Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
(2) HTML standards and extensions, standards organizations:
Currenly HTML 4.0 and above is already in implementations. Browser developers rely upon the HTML standard to program the software that formats and displays common HTML documents. With development of newer versions of HTML some changes in the tags occurs. Sometime older tags are deprecated or say replaced by newer tags. Often new tags are introduced. But meantime we need to use proper version browsers to run HTML we are using. Support of tag differs from browsers to browsers with respect to brands and their versions.
Like many popular technologies, it became obvious that more formal means were needed to define and manage --to standardize-- HTML's features, making it easier for everyone to created and share documents.
Focus, concern, reponsibility, how they work may differ to some degree from standards organizations. Major players in ther World Wide Wide standards are-
(i) The World Wide Web Consortium (W3C) and
(ii) The Internet Engineering Task Force (IETF)
A Brief History of HTML
(1) A brief history of HTML
HTML was originally developed by Tim Berners-Lee while at CERN, and popularized by the Mosaic browser developed at NCSA. During the course of the 1990s it has blossomed with the explosive growth of the Web. During this time, HTML has been extended in a number of ways. The Web depends on Web page authors and vendors sharing the same conventions for HTML. This has motivated joint work on specifications for HTML.
HTML 2.0 (November 1995) was developed under the aegis of the Internet Engineering Task Force (IETF) to codify common practice in late 1994. HTML+ (1993) and HTML 3.0 (1995) proposed much richer versions of HTML. Despite never receiving consensus in standards discussions, these drafts led to the adoption of a range of new features. The efforts of the World Wide Web Consortium's HTML Working Group to codify common practice in 1996 resulted in HTML 3.2 (January 1997).
Most people agree that HTML documents should work well across different browsers and platforms. Achieving interoperability lowers costs to content providers since they must develop only one version of a document. If the effort is not made, there is much greater risk that the Web will devolve into a proprietary world of incompatible formats, ultimately reducing the Web's commercial potential for all participants.
Each version of HTML has attempted to reflect greater consensus among industry players so that the investment made by content providers will not be wasted and that their documents will not become unreadable in a short period of time.
HTML has been developed with the vision that all manner of devices should be able to use information on the Web: PCs with graphics displays of varying resolution and color depths, cellular telephones, hand held devices, devices for speech for output and input, computers with high or low bandwidth, and so on.
HTML was originally developed by Tim Berners-Lee while at CERN, and popularized by the Mosaic browser developed at NCSA. During the course of the 1990s it has blossomed with the explosive growth of the Web. During this time, HTML has been extended in a number of ways. The Web depends on Web page authors and vendors sharing the same conventions for HTML. This has motivated joint work on specifications for HTML.
HTML 2.0 (November 1995) was developed under the aegis of the Internet Engineering Task Force (IETF) to codify common practice in late 1994. HTML+ (1993) and HTML 3.0 (1995) proposed much richer versions of HTML. Despite never receiving consensus in standards discussions, these drafts led to the adoption of a range of new features. The efforts of the World Wide Web Consortium's HTML Working Group to codify common practice in 1996 resulted in HTML 3.2 (January 1997).
Most people agree that HTML documents should work well across different browsers and platforms. Achieving interoperability lowers costs to content providers since they must develop only one version of a document. If the effort is not made, there is much greater risk that the Web will devolve into a proprietary world of incompatible formats, ultimately reducing the Web's commercial potential for all participants.
Each version of HTML has attempted to reflect greater consensus among industry players so that the investment made by content providers will not be wasted and that their documents will not become unreadable in a short period of time.
HTML has been developed with the vision that all manner of devices should be able to use information on the Web: PCs with graphics displays of varying resolution and color depths, cellular telephones, hand held devices, devices for speech for output and input, computers with high or low bandwidth, and so on.
Internet Terminologies in Brief
(1) TCP/IP Protocols and IP Address:
In the roads we have traffic rules and signals so that many vehicles can use the same to reach to destination safe. Similar to traffic rules and signals; Protocols are also rules data communication.
Various protocols of different standards at different layers of communication protocols play role during information(data) exchange which is the mere (or say most common) function/use of Network or it be internet.
Among many different protocols suite TCP/IP is the protocols suites used by publicly accessible internet besides due to its many features its also commonly used in other networking standards as well like Ethernet.
Every computer connected to the Internet has a unique address: a number whose format is defined by the Internet Protocol (IP), the standard that defines how messages are passed from one machine to another on the Net. Basically IP address of version 4 which is still in use though IPv6 is already launched, consists of 4 octets say (4x8=32 bits) each octet separated by periods, such as 192.12.221.2 or 131.56.3.1.
(Details of IP is beyond the scope of the class 9....)
Its hard to remember numbers so with help of DNS (Domain name system) each unique IP addressed is assigned with the names. So we use these IP address names in internet surfing. Fully qualified domain name of WWW (a internet application) looks something like http://www.facebook.com/, http://www.yahoo.com.in/, http://www.ntc.net.np/. Mainly 3 parts can be seen in the names, they are domain name like facebook, yahoo and ntc, another part if domain type .com, .net or .edu and finally (occasionaly) comes up with country suffix like .in for india, .np for nepal, .us for usa.
(2) Clients, Servers, and Browsers:
Internet connects two kinds of computers: servers, which serve up documents, and clients, which retrieve and display documents for us humans in the context of internet. Things that happen on the server machine are said to be on the --server side--, while activities on the client machine occur --client side--.
Server side activies (say web sites/documents) are handled by the --web-server--, a software there in server machines. Clients uses --web browser--, a software in the client machines, to request web sites and display the fetched electronic documents --web pages-- of the web-site.
Examples of Web-Servers are - Apache, Internet Information Service (IIS), Reactor
Example of Web-browers are - firebox, netscape navigate, opera, internet explorer
Still students may be able to grab the concept how data flows in the internet, or say how internet functions...
Actually its out of the course though understanding it in big-picture could be beneficial to the students.
More light on the mechanisms of how internet or WWW work will be put only on demand students... (Interactive class shall be arranged to figure out it).
In the roads we have traffic rules and signals so that many vehicles can use the same to reach to destination safe. Similar to traffic rules and signals; Protocols are also rules data communication.
Various protocols of different standards at different layers of communication protocols play role during information(data) exchange which is the mere (or say most common) function/use of Network or it be internet.
Among many different protocols suite TCP/IP is the protocols suites used by publicly accessible internet besides due to its many features its also commonly used in other networking standards as well like Ethernet.
Every computer connected to the Internet has a unique address: a number whose format is defined by the Internet Protocol (IP), the standard that defines how messages are passed from one machine to another on the Net. Basically IP address of version 4 which is still in use though IPv6 is already launched, consists of 4 octets say (4x8=32 bits) each octet separated by periods, such as 192.12.221.2 or 131.56.3.1.
(Details of IP is beyond the scope of the class 9....)
Its hard to remember numbers so with help of DNS (Domain name system) each unique IP addressed is assigned with the names. So we use these IP address names in internet surfing. Fully qualified domain name of WWW (a internet application) looks something like http://www.facebook.com/, http://www.yahoo.com.in/, http://www.ntc.net.np/. Mainly 3 parts can be seen in the names, they are domain name like facebook, yahoo and ntc, another part if domain type .com, .net or .edu and finally (occasionaly) comes up with country suffix like .in for india, .np for nepal, .us for usa.
(2) Clients, Servers, and Browsers:
Internet connects two kinds of computers: servers, which serve up documents, and clients, which retrieve and display documents for us humans in the context of internet. Things that happen on the server machine are said to be on the --server side--, while activities on the client machine occur --client side--.
Server side activies (say web sites/documents) are handled by the --web-server--, a software there in server machines. Clients uses --web browser--, a software in the client machines, to request web sites and display the fetched electronic documents --web pages-- of the web-site.
Examples of Web-Servers are - Apache, Internet Information Service (IIS), Reactor
Example of Web-browers are - firebox, netscape navigate, opera, internet explorer
Still students may be able to grab the concept how data flows in the internet, or say how internet functions...
Actually its out of the course though understanding it in big-picture could be beneficial to the students.
More light on the mechanisms of how internet or WWW work will be put only on demand students... (Interactive class shall be arranged to figure out it).
HTML and WWW
(1) Internet Conception/Background:
In the eatly days say internet in its adolescence was a sandbox or just experiment of miliatry or few academics. Recently since 1990 onward its rapidly growing with wild diversified community of computer users and information vendors. Today internet is popular among individuals, professionals and from businesses to non-profit organizaions.
(2) The Internet:
The concept of the Internet is really simple. It's a collection of networks-- a network of networks-- computers sharing digital information via a common set of networking and software protocols.
But still we must admit that internet is not well organized so it may be little more complicated than we may think and much hard to tap its full potential.
(3) HTML and the World Wide Web (WWW):
After success of development of the Network under project called ARPANET of DARPA of DOD, USA. Internet opened up for business, some physicits at CERN, the European Partical Physics Laboratory, released an authoring language and distribution system they developed for creating and sharing multimedia-enabled, integrated electronic documents over the Internet. And so was born HyperText Markup Language (HTML), browser software, and the World Wide Web(WWW).
Lift-off happened when some bright students and faculty at the National Center for Supercomputing Applications (NCSA) at the University of Illinois, Urbana/Champaign, wrote a Web browser called Mosaic. Although designed primarily for viewing HTML documents, the software also had built-in tools to access the much more prolific resources on the Internet, such as FTP archives of software and Gopher-organized collections of documents.
More insights like advantages and disadvantages of Internet, services of internet, components of internet, and other related terminologies can be found in grade 10 under the chapter entitled "The Internet"
In the eatly days say internet in its adolescence was a sandbox or just experiment of miliatry or few academics. Recently since 1990 onward its rapidly growing with wild diversified community of computer users and information vendors. Today internet is popular among individuals, professionals and from businesses to non-profit organizaions.
(2) The Internet:
The concept of the Internet is really simple. It's a collection of networks-- a network of networks-- computers sharing digital information via a common set of networking and software protocols.
But still we must admit that internet is not well organized so it may be little more complicated than we may think and much hard to tap its full potential.
(3) HTML and the World Wide Web (WWW):
After success of development of the Network under project called ARPANET of DARPA of DOD, USA. Internet opened up for business, some physicits at CERN, the European Partical Physics Laboratory, released an authoring language and distribution system they developed for creating and sharing multimedia-enabled, integrated electronic documents over the Internet. And so was born HyperText Markup Language (HTML), browser software, and the World Wide Web(WWW).
Lift-off happened when some bright students and faculty at the National Center for Supercomputing Applications (NCSA) at the University of Illinois, Urbana/Champaign, wrote a Web browser called Mosaic. Although designed primarily for viewing HTML documents, the software also had built-in tools to access the much more prolific resources on the Internet, such as FTP archives of software and Gopher-organized collections of documents.
More insights like advantages and disadvantages of Internet, services of internet, components of internet, and other related terminologies can be found in grade 10 under the chapter entitled "The Internet"
Subscribe to:
Posts (Atom)