CSS Forums - Web Programming

CSS Forums (http://www.cssforum.com.pk/)

- Computer Science (http://www.cssforum.com.pk/css-optional-subjects/group-i/computer-science/)

- - Web Programming (http://www.cssforum.com.pk/css-optional-subjects/group-i/computer-science/17371-web-programming.html)

[B][U][SIZE="5"][FONT="Book Antiqua"]HTML,[/FONT][/SIZE][/U][/B]

HTML, an initialism of HyperText Markup Language, is the predominant markup language for web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as links, headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of tags, surrounded by angle brackets. HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code (such as JavaScript) which can affect the behavior of Web browsers and other HTML processors.

HTML is also often used to refer to content of the MIME type text/html or even more broadly as a generic term for HTML whether in its XML-descended form (such as XHTML 1.0 and later) or its form descended directly from SGML (such as HTML 4.01 and earlier).

By convention, html format data files use a file extension .html or .htm.

[U][B]What is HTML[/B][/U]
HTML is a simple, universal mark-up language that allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used.
All you really need to create Web pages is a simple text editor and a basic understanding of HTML. To put your files on the Web, you will need an ftp client like WS_FTP LE for Windows, or Fetch for Mac. These are free downloads for students and will let you connect to a server, where you will store your files. Software like Dreamweaver or GoLive have FTP capabilities built in. (See How to FTP).

HTML is just a series of tags that are integrated into a text document. They're a lot like stage directions - silently telling the browser what to do, and what props to use.

[B][U]What are HTML tags?[/U][/B]
HTML tags tell a browser how to display information. Users of word processors were once required to type control-b to start bolding text and then control-b to stop bolding. Likewise, HTML tags usually (but not always) consist of a pair of tags that "turn on" and then "turn off" directions to affect text display.

HTML tags are usually English words (such as blockquote) or abbreviations (such as "p" for paragraph), but they are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is , and the blockquote tag is <blockquote>. Some tags dictate how the page will be formatted (for instance, begins a new paragraph), and others dictate how the words appear ( makes text bold).

When you open a tag- say <blockquote> - you must also close it off with another tag - in this case, </blockquote>. Note the slash - / - before the word "blockquote"; that's what distinguishes a closing tag from an opening tag.

Example use of bold tag How it will display
I'm bold I'm bold
This will bold one word. This will bold one word.

[U][B][SIZE="4"]HTML markup[/SIZE][/B][/U]
HTML markup consists of several key components, including elements (and their attributes), character-based data types, and character references and entity references. Another important component is the document type declaration.

[B][B][U]Elements[/U][/B][/B]
Elements are the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element's content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start tag (e.g. <element-name>) and an end tag (e.g. </element-name>). The element's attributes are contained in the start tag and content is located between the tags (e.g. <element-name attribute="value">Content</element-name>). Some elements, such as , do not have any content and must not have a closing tag. Listed below are several types of markup elements used in HTML.

[B][U]Structural[/U][/B] markup describes the purpose of text. For example, <h2>Golf</h2> establishes "Golf" as a second-level heading, which would be rendered in a browser in a manner similar to the "HTML markup" title at the start of this section. Structural markup does not denote any specific rendering, but most Web browsers have standardized on how elements should be formatted. Text may be further styled with Cascading Style Sheets (CSS).

[B][U]Presentational[/U][/B] markup describes the appearance of the text, regardless of its function. For example boldface indicates that visual output devices should render "boldface" in bold text, but gives no indication what devices which are unable to do this (such as aural devices that read the text aloud) should do. In the case of both bold and italic, there are elements which usually have an equivalent visual rendering but are more semantic in nature, namely strong emphasis and emphasis respectively. It is easier to see how an aural user agent should interpret the latter two elements. However, they are not equivalent to their presentational counterparts: it would be undesirable for a screen-reader to emphasize the name of a book, for instance, but on a screen such a name would be italicized. Most presentational markup elements have become deprecated under the HTML 4.0 specification, in favor of CSS based style design.

[B][U]Hypertext[/U][/B] markup links parts of the document to other documents. HTML up through version XHTML 1.1 requires the use of an anchor element to create a hyperlink in the flow of text: <a>Wikipedia</a>. However, the href attribute must also be set to a valid URL so for example the HTML code, <a href="http://en.wikipedia.org/">Wikipedia</a>, will render the word "Wikipedia" as a hyperlink.To link on an image, the anchor tag use the following syntax: <a href="url"><img src="image.gif"></a>

[B][U][SIZE="4"]Attributes[/SIZE][/U][/B]
Most of the attributes of an element are name-value pairs, separated by "=", and written within the start tag of an element, after the element's name. The value may be enclosed in single or double quotes, although values consisting of certain characters can be left unquoted in HTML (but not XHTML).[14][15] Leaving attribute values unquoted is considered unsafe.[16] In contrast with name-value pair attributes, there are some attributes that affect the element simply by their presence in the start tag of the element[17] (like the ismap attribute for the img element[18]).

Most elements can take any of several common attributes:

The id attribute provides a document-wide unique identifier for an element. This can be used by stylesheets to provide presentational properties, by browsers to focus attention on the specific element, or by scripts to alter the contents or presentation of an element.
The class attribute provides a way of classifying similar elements for presentation purposes. For example, an HTML document might use the designation class="notation" to indicate that all elements with this class value are subordinate to the main text of the document. Such elements might be gathered together and presented as footnotes on a page instead of appearing in the place where they occur in the HTML source.
An author may use the style non-attributal codes presentational properties to a particular element. It is considered better practice to use an element’s son- id page and select the element with a stylesheet, though sometimes this can be too cumbersome for a simple ad hoc application of styled properties.
The title attribute is used to attach subtextual explanation to an element. In most browsers this attribute is displayed as what is often referred to as a tooltip.
The generic inline element span can be used to demonstrate these various attributes:

HTML
This example displays as HTML; in most browsers, pointing the cursor at the abbreviation should display the title text "Hypertext Markup Language."

Most elements also take the language-related attributes lang and dir

[SIZE="4"][U][B]Data types[/B][/U][/SIZE]
HTML defines several data types for element content, such as script data and stylesheet data, and a plethora of types for attribute values, including IDs, names, URIs, numbers, units of length, languages, media descriptors, colors, character encodings, dates and times, and so on. All of these data types are specializations of character data.

[U][B][SIZE="4"]Hypertext features not in HTML[/SIZE][/B][/U]HTML lacks some of the features found in earlier hypertext systems, such as typed links, transclusion, source tracking, fat links, and more.[20] Even some hypertext features that were in early versions of HTML have been ignored by most popular web browsers until recently, such as the link element and in-browser Web page editing.

Sometimes Web services or browser manufacturers remedy these shortcomings. For instance, wikis and content management systems allow surfers to edit the Web pages they visit.

[B][U]What is HTML?[/U][/B]
HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the » W3C, the organisation charged with designing and maintaining the language.

The definition of HTML is HyperText Markup Language.

HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.
Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).
HTML is a Language, as it has code-words and syntax like any other language.

[B][U]How does it work?[/U][/B]

HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages.

[B][U]What are the tags up to?[/U][/B]

The tags are what separate normal text from HTML code. You might know them as the words between the <triangle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don’t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:

These words will be bold, and these will not.

In the example above, the tags were wrapped around some text, and their effect will be that the contained text will be bolded when viewed through an ordinary web browser.

If you want to see a list of a load of tags to see what’s ahead of you, look at this tag reference. Learning the tags themselves is dealt with in the next section of this website, My First Site.

[B][U]Is this going to take long?[/U][/B]

Well, it depends on what you want from it. Knowing HTML will take only a few days of reading and learning the codes for what you want. You can have the basics down in an hour. Once you know the tags you can create HTML pages.

However, using HTML and designing good websites is a different story, which is why I try to do more than just teach you code here at HTMLSource — I like to add in as much advice as possible too. Good website design is half skill and half talent, I reckon. Learning techniques and correct use of your tag knowledge will improve your work immensely, and a good understanding of general design and the audience you’re trying to reach will improve your website’s chances of success. Luckily, these things can be researched and understood, as long as you’re willing to work at it so you can output better websites.

The range of skills you will learn as a result of running your own website is impressive. You’ll learn about aspects of graphic design, typography and computer programming. Your efficiency with computers in general increases.You’ll also learn about promotion and your writing will probably improve too, as you adapt to write for certain audiences.

[B][U]Do I have to be online all the time?[/U][/B]

Not at all. You can code your entire website offline, storing it all on your own computer, and then just transfer all the files onto the web. Then whenever you have new content, you just add that to the existing online version of your site. It’s really quite simple.

[B][U]Is there anything HTML can’t do[/U][/B]?

Of course, but since making websites became more popular and needs increased many other supporting languages have been created to allow new stuff to happen, plus HTML is modified every few years to make way for improvements.

Cascading Stylesheets are used to control how your pages are presented, and make pages more accessible. Basic special effects and interaction is provided by JavaScript, which adds a lot of power to basic HTML. Most of this advanced stuff is for later down the road, but when using all of these technologies together, you have a lot of power at your disposal.

Applets
This lesson talks about the basics of applets, advantages of applets over applications, how to load applets in a web page, how to convert applications to applets and how applets work. You should thoroughly understand this lesson before going further in this trail.
An applet is a special kind of Java program that a browser enabled with Java technology can download from the internet and run. An applet is typically embedded inside a web-page and runs in the context of the browser. An applet must be a subclass of the java.applet.Applet class, which provides the standard interface between the applet and the browser environment.

Swing provides a special subclass of Applet, called javax.swing.JApplet, which should be used for all applets that use Swing components to construct their GUIs.

By calling certain methods, a browser manages an applet life cycle, if an applet is loaded in a web page.

Life Cycle of an Applet: Basically, there are four methods in the Applet class on which any applet is built.

init: This method is intended for whatever initialization is needed for your applet. It is called after the param attributes of the applet tag.
start: This method is automatically called after init method. It is also called whenever user returns to the page containing the applet after visiting other pages.
stop: This method is automatically called whenever the user moves away from the page containing applets. You can use this method to stop an animation.
destroy: This method is only called when the browser shuts down normally.
Thus, the applet can be initialized once and only once, started and stopped one or more times in its life, and destroyed once and only once.

For more information on Life Cylce of an Applet, please refer to The Life Cycle of an Applet section.
When to write Applets vs. Applications

In the early days of Java, one of the critical advantages that Java applets had over Java applications was that applets could be easily deployed over the web while Java applications required a more cumbersome installation process. Additionally, since applets are downloaded from the internet, by default they have to run in a restricted security environment, called the "sandbox", to ensure they don't perform any destructive operations on the user's computer, such as reading/writing to the filesystem.

However, the introduction of Java Web Starthas made it possible for Java applications to also be easily deployed over the web, as well as run in a secure environment. This means that the predominant difference between a Java applet and a Java application is that an applet runs in the context of a web browser, being typically embedded within an html page, while a Java application runs standalone, outside the browser. Thus, applets are particularly well suited for providing functions in a web page which require more interactivity or animation than HTML can provide, such as a graphical game, complex editing, or interactive data visualization. The end user is able to access the functionality without leaving the browser.

Loading Applets in a Web Page

In order to load an applet in a web page, you must specify the applet class with appropriate applet tags. A simple example is below:
<applet code=AppletWorld.class width="200" height="200">
</applet>

For development and testing purposes, you can run your applet using the lightweight appletviewer application that comes with the JDK. For example, if AppletWorld.html is the html file name, then you run the command as

appletviewer AppletWorld.html

Once you know your applet runs within the appletviewer, it is important to test your applet running in a web browser by loading the applet's web page into the browser window. The browser can retrieve the class files either from the internet or from the local working directory used during development. If you make changes to your applet's code while it is loaded in the browser, then you must recompile the applet and press the "Shift + Reload" button in the browser to load the new version

[B][U][SIZE="5"]Applets[/SIZE][/U][/B]

An applet is a special kind of Java program that a browser enabled with Java technology can download from the internet and run. An applet is typically embedded inside a web-page and runs in the context of the browser. An applet must be a subclass of the java.applet.Applet class, which provides the standard interface between the applet and the browser environment.

Swing provides a special subclass of Applet, called javax.swing.JApplet, which should be used for all applets that use Swing components to construct their GUIs.

By calling certain methods, a browser manages an applet life cycle, if an applet is loaded in a web page.

Life Cycle of an Applet: Basically, there are four methods in the Applet class on which any applet is built.

[B]init(): This method is called to initialized an applet

start(): This method is called after the initialization of the applet.

stop(): This method can be called multiple times in the life cycle of an Applet.

destroy(): This method is called only once in the life cycle of the applet when applet is destroyed.[/B]

[B][U]init () method[/U][/B]: The life cycle of an applet is begin on that time when the applet is first loaded into the browser and called the init() method. The init() method is called only one time in the life cycle on an applet. The init() method is basically called to read the PARAM tag in the html file. The init () method retrieve the passed parameter through the PARAM tag of html file using get Parameter() method All the initialization such as initialization of variables and the objects like image, sound file are loaded in the init () method .After the initialization of the init() method user can interact with the Applet and mostly applet contains the init() method.

[B][U]Start () method:[/U][/B] The start method of an applet is called after the initialization method init(). This method may be called multiples time when the Applet needs to be started or restarted. For Example if the user wants to return to the Applet, in this situation the start Method() of an Applet will be called by the web browser and the user will be back on the applet. In the start method user can interact within the applet.
[B][U]
Stop () method: [/U][/B] The stop() method can be called multiple times in the life cycle of applet like the start () method. Or should be called at least one time. There is only miner difference between the start() method and stop () method. For example the stop() method is called by the web browser on that time When the user leaves one applet to go another applet and the start() method is called on that time when the user wants to go back into the first program or Applet.

[B][U]destroy() method: [/U][/B]The destroy() method is called only one time in the life cycle of Applet like init() method. This method is called only on that time when the browser needs to Shut down.

[B][U]When to write Applets vs. Applications[/U][/B]

In the early days of Java, one of the critical advantages that Java applets had over Java applications was that applets could be easily deployed over the web while Java applications required a more cumbersome installation process. Additionally, since applets are downloaded from the internet, by default they have to run in a restricted security environment, called the "sandbox", to ensure they don't perform any destructive operations on the user's computer, such as reading/writing to the filesystem.

However, the introduction of Java Web Starthas made it possible for Java applications to also be easily deployed over the web, as well as run in a secure environment. This means that the predominant difference between a Java applet and a Java application is that an applet runs in the context of a web browser, being typically embedded within an html page, while a Java application runs standalone, outside the browser. Thus, applets are particularly well suited for providing functions in a web page which require more interactivity or animation than HTML can provide, such as a graphical game, complex editing, or interactive data visualization. The end user is able to access the functionality without leaving the browser.

[B][U]Loading Applets in a Web Page[/U][/B]

In order to load an applet in a web page, you must specify the applet class with appropriate applet tags. A simple example is below:
<applet code=AppletWorld.class width="200" height="200">
</applet>

For development and testing purposes, you can run your applet using the lightweight appletviewer application that comes with the JDK. For example, if AppletWorld.html is the html file name, then you run the command as

appletviewer AppletWorld.html

Once you know your applet runs within the appletviewer, it is important to test your applet running in a web browser by loading the applet's web page into the browser window. The browser can retrieve the class files either from the internet or from the local working directory used during development. If you make changes to your applet's code while it is loaded in the browser, then you must recompile the applet and press the "Shift + Reload" button in the browser to load the new version

[B][U][COLOR="Blue"]WORLD WIDE WEB[/COLOR][/U][/B]

A system of Internet servers that support specially formatted documents. The documents are formatted in a markup language called HTML (HyperText Markup Language) that supports links to other documents, as well as graphics, audio, and video files. This means you can jump from one document to another simply by clicking on hot spots. Not all Internet servers are part of the World Wide Web.
There are several applications called Web browsers that make it easy to access the World Wide Web; Two of the most popular being Netscape Navigator and Microsoft's Internet Explorer.

World Wide Web is not synonymous with the Internet.

[B][U]The Difference Between the Internet and the World Wide Web[/U][/B]

Many people use the terms Internet and World Wide Web (aka. the Web) interchangeably, but in fact the two terms are not synonymous. The Internet and the Web are two separate but related things.
The Internet is a massive network of networks, a networking infrastructure. It connects millions of computers together globally, forming a network in which any computer can communicate with any other computer as long as they are both connected to the Internet. Information that travels over the Internet does so via a variety of languages known as protocols.

The World Wide Web, or simply Web, is a way of accessing information over the medium of the Internet. It is an information-sharing model that is built on top of the Internet. The Web uses the HTTP protocol, only one of the languages spoken over the Internet, to transmit data. Web services, which use HTTP to allow applications to communicate in order to exchange business logic, use the the Web to share information. The Web also utilizes browsers, such as Internet Explorer or Firefox, to access Web documents called Web pages that are linked to each other via hyperlinks. Web documents also contain graphics, sounds, text and video.

The Web is just one of the ways that information can be disseminated over the Internet. The Internet, not the Web, is also used for e-mail, which relies on SMTP, Usenet news groups, instant messaging and FTP. So the Web is just a portion of the Internet, albeit a large portion, but the two terms are not synonymous and should not be confused

[B][U]How the Web works[/U][/B]
Viewing a Web page on the World Wide Web normally begins either by typing the URL of the page into a Web browser, or by following a hyperlink to that page or resource. The Web browser then initiates a series of communication messages, behind the scenes, in order to fetch and display it.

First, the server-name portion of the URL is resolved into an IP address using the global, distributed Internet database known as the domain name system, or DNS. This IP address is necessary to contact and send data packets to the Web server.

The browser then requests the resource by sending an HTTP request to the Web server at that particular address. In the case of a typical Web page, the HTML text of the page is requested first and parsed immediately by the Web browser, which will then make additional requests for images and any other files that form a part of the page. Statistics measuring a website's popularity are usually based on the number of 'page views' or associated server 'hits', or file requests, which take place.

Having received the required files from the Web server, the browser then renders the page onto the screen as specified by its HTML, CSS, and other Web languages. Any images and other resources are incorporated to produce the on-screen Web page that the user sees.

Most Web pages will themselves contain hyperlinks to other related pages and perhaps to downloads, source documents, definitions and other Web resources. Such a collection of useful, related resources, interconnected via hypertext links, is what was dubbed a "web" of information. Making it available on the Internet created what Tim Berners-Lee first called the WorldWideWeb (a term written in CamelCase, subsequently discarded) in 1990.[1]

Is thats all what they ask in the exam about HTML???????
Because it took couple of months for me to learn HTML, yet I am not perfect in it.

In CSS .. Web Programming Means Client Side Programming ??

[QUOTE=touqeer2010;233655]In CSS .. Web Programming Means Client Side Programming ??[/QUOTE]

In syllabus, they have mentioned some server side programming as well (PERL, JAVA and PHP)