Internet Media

Internet Media

As a student or professional who wants to portray technical information to a vast audience, using the Internet would be your greatest tool. A website can be hosted for very cheap, and it does not cost your viewers money to visit your website.

Individuals can view your website through a web browser, requesting information from the website’s file server that hosts your website’s domain name. The information is then returned to your browser, which renders it accordingly.

History of Browsers

The data that travels across the Internet, as it is known today, is primarily viewed within a web browser. Although the languages that are used to produce a website vary, a primary set of standards have long been provisioned in order to produce consistency for Internet users.

With these standards came the ability to produce an Internet graphical user interface, otherwise known as a web browser. A browser allows the user to view a document from another network, with additional markups, hyperlinks, and graphics displayed within it.

However, these standards are often inconsistently rendered by web browsers. Across the hierarchy of browsers, the rendering of these languages are typically the same. Nevertheless, there are inconsistencies that produce both minor and major issues for web developers.

The majority of these issues come from upgrades to the languages themselves. As new commands become available and standardized within a web programming language, browsers must be updated to allow these commands to be rendered. However, older versions of browsers are left without this ability. This requires viewers to continuously upgrade their web browser software.

The current versions of popular web browsers are:

Chrome 7.0
Firefox 4 (beta)
Internet Explorer 9 (beta)
Opera 10.63
Safari 5

The current status of standard web languages is migrating to HTML5 and CSS3, which will be discussed in the following section.

HTML

HTML stands for Hypertext Markup Language, which is the most prominent Internet language available. The name originates from providing the unique ability to hyperlink to other Internet documents. The commands within this language allow a programmer to arrange and display information, along with the ability to display graphics as well. By its very nature, HTML is a static language, as it does not have dynamic features. However, HTML elements can be manipulated within a web page, as we will discuss in later sections.

Here is an example of a simple HTML document:

<html>
    <head>
        <title>My Website</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>Welcome to my website!</p>
    </body>
</html>

W3Schools provides an excellent resource to begin learning HTML as your primary web language. To get started with learning HTML, be sure to visit W3Schools HTML tutorials.

Once you program your first HTML web page, make sure to validate it’s correctness at the W3 HTML Validator. Without code validation, there is a higher probability that it will be rendered incorrectly by various web browsers.

CSS

CSS stands for Cascading Style Sheets. This language was produced to give web designers the ability to alter and manage styles of HTML elements within their web page. This does not mean that CSS makes HTML a dynamic language. Various features include font-weight, padding, margins, backgrounds, and positioning.

Here is an example of CSS:

body { 
    color: #ffffff;
    background: #053756 url(img/bg.gif) repeat-x;
    text-align: left;
    font-family: Verdana;
    font-size: 11px;
}

Just as with HTML, W3Schools offers resources for those who want to learn CSS. To get started with learning CSS, check out the W3Schools CSS tutorials.

Once you begin to add CSS to your HTML web page, you will find you have more control over the visual elements of your document. However, just as with HTML, you will need to validate your CSS in order to ensure it is rendered as expected. You can validate your CSS with the W3 CSS Validator.

HTML5 & CSS 3

HTML5 and CSS3 have opened up a world of possibilities for web designers because there were so many additions to those languages. Some of the new features allow the browser to hold information, CSS styles to move, and custom fonts to be embedded into web pages.

The only disadvantage of using HTML5 and CSS3 is that the older browsers do not support many of the features and since it is not a final specification there are many different features that are not rendered properly on all browsers or even not at all.

Page Layout

Within the web design community, a lot of discussion has taken place about the best page layout. Some of the most notable through the history of the Internet were pages with multiple columns, rows, and frames.

Choosing a good page layout should be decided before beginning to code your website, or else you will be forced to recode and redesign your pages. Yet, before you decide what your page layout should be, you need to understand what information you are displaying and how much of it there is. In summary, your content will choose your layout, and your layout will choose your code.

Four excellent examples of page layouts are:

Three Rows – use this layout when you have five or six pages of information. This layout is typically used by small businesses for advertisement. The three rows are the header, body, and footer.

Three Rows
Image Unavailable

Three Columns - use this when a lot of information is needed to be portrayed and is very diverse. The middle column should have the greatest width, and contain the information with the highest priority. The left column should provide the more important hyperlinks than the right column. Many websites use the right column for advertisements. This layout typically also has a row at the top that serves as a header.

Three Columns
Image Unavailable

Two Columns - use this layout when the information is symmetrical and related. This layout is typically used in blogs and websites that are updated regularly.

Two Columns
Image Unavailable

Center Column - use this layout when information is sparse and does not need a complex structure. Often referred to as a minimalistic layout by designers, it is still used often by bloggers.

Center Column
Image Unavailable

Graphic Formats

As with most web designers, you will probably want to include graphics into your website. However, your viewer will likely look at your graphics before the rest of your content, so you will want to ensure that the graphics are relative, informative, and aesthetic.

Relative and informative are dependent on your content, but aesthetic depends on the graphic itself. This is why it is important to choose a good graphical format.

As you need to make an educated decision on what graphical format you want to use, you need to know what each format is best at. If you want to save disk space or have images load quickly, JPG will provide you the smallest file size. If your image requires transparency, you will need to choose between PNG and GIF. For the best quality, you will want to choose PNG. However, GIF offers the ability to have multiple frames within one image, creating a video effect.

For a full discussion of graphics and various formats, see Chapter 2.

Interactivity on the Internet

The internet has evolved into a very dynamic and fast-paced environment. Capabilities such as streaming videos and music directly from your web browser are a major contributor to the penetration that the Internet has around the world. In addition to this, technological advancements in wireless Internet, Internet-enabled mobile phones, and high-speed Internet have contributed to the advancement of the World Wide Web.

Flash

Adobe Flash was one of the reasons why the Internet became so popular so quickly. Flash enabled web developers to add audio, video, and interactivity to their websites. Some examples include video advertisements, YouTube, Hulu, MySpace music players, and interactive games. These examples are indicative of how Flash plays an integral part in the daily use of the Internet.

The disadvantage of Flash is that there is a separate plugin that has to be installed in order to see flash objects. One family of products that does not have support for Flash is the iPod Touch, iPhone, and iPad, which has recently caused some turmoil in the mobile development community.

Silverlight

Silverlight is essentially Microsoft’s competitive answer to Adobe’s Flash. Silverlight has support for adding multimedia, graphics, animation, and interactivity to any site. Silverlight is based on .Net programming languages so any of those languages can be used to program a website. The most solid example of Silverlight’s strengths is Photosynth, which produces three-dimensional models of objects or locations from digital photographs.

The disadvantages that Silverlight has are the same as Flash, as it needs a separate plugin for the web browser. Additionally, Silverlight is much newer than Flash, so it does not have as much market penetration with your average Internet consumer.

JavaScript

JavaScript was invented to add interactivity on websites, without the external container that is needed to run Flash. Originally named ECMAscript, JavaScript is rendered by the browser instead of a separate plugin, giving JavaScript an advantage in speed. The main difference between JavaScript, Flash, and Silverlight is that JavaScript allows the developer to interact with HTML elements on the page, whereas Flash and Silverlight must be rendered within the boundaries of its own container.

Some primary examples of JavaScript are slideshows, drop-down menus, client-side form verification, and alert boxes. The disadvantage of JavaScript is that the browser needs a rendering engine to produce the results. Some mobile phones do not have a full JavaScript rendering engine and are unable to perform JavaScript actions. In addition the user could disable JavaScript which could disrupt the website, if it is dependent upon JavaScript.