This lesson is a part of a series of articles I am writing (and updating) that teaches newcomers the basics in Web development. I’ll also write more advanced tutorials for those already in the industry, but need specific help such as extending with plugins and hacks.  Moving forward, I plan to develop courseware covering a wide variety of subjects such as PHP and ColdFusion, CMS, Social site development, Web 2.0 standards and more.  -GeekyBitch

Objectives:

• Learn the different tools you’re need as a Web developer/Webmaster.
• The Differences between HTML and XHTML
• Introduce HTML Standards
• Create a Basic Web Document

This Lesson is an introduction to this course and explores some of the important topics that should be touched upon prior to starting any path to becoming a Web designer/webmaster. As you become more proficient in the Web profession, your will gain more in-depth knowledge about these subjects through experience.

As a Web professional you will need to know the fundamentals of how the Web works. It’s safe to assume that you understand the concept of the Internet is to share information and to communicate to others across the globe. The Web consists of a huge amount of documents stored on computers around the World. These computers are known as Web Servers because they “serve up” documents that are called upon through a URL (Universal Resource Locator). A URL is essentially an address to a Web site, Web page, or other file on the Web such as www.yahoo.com.

HTTP Protocols

The Web is made up of protocols that are used as methods of accessing Web documents and other files or programs. For accessing Web pages to view in a Web browser you use HTTP (Hyper Text Transfer Protocol). The HTTP protocol precedes a URL as follows: http://www.google.com. This type of address calls upon domain name which is the location to a particular server and the files it stores on the Web. When a domain name is typed in a browser (such as www.google.com) it accesses a Web site by displaying the default page which is often referred to as the home page or index page.

A Web site URL or Web address is referred to as a domain name, which is a text equivalent to the numeric IP address of a computer on the Internet. A domain name must be unique and can be accessed using a Web browser.

You can register your own domain name at a registrar such as www.register.com for a small yearly fee. When you’ve setup a hosting account to host a Web site online, you can follow the hosting service’s instruction for transferring the domain name to their IP address where your documents are located.

What *IS* a Web Page?

A Web page is a Hypertext Document that displays content (images, text) and can offer some form of functionality (such as data collection) on the Internet or an Intranet. One of the more important objectives behind hypertext documents is “linking.” Hyperlinks allow Web site owners to link to relative information either within a Web site (collection of Web pages on a server), to remote Web page or file (a document on another server), or within the actual page itself. (Hence the term “Web.”)

On a commercial medium, this means that a company, organization or even a personal presence can publicly offer their services or information globally.

Web pages are created by a number of methods and technologies. The primary technology that creates web pages is HTML (Hyper Text Mark-up Language) which instructs a Web page how to display content and link to other documents.

Types of Webs

There are several types of Web sites from static Web pages to advanced online applications and services. On a basic level, a Web site could be a collection of simple hypertext documents that are linked together. Static pages are created using HTML and they offer no functional features or interaction such as data processing or calculations.

Other Web sites might offer a lot more information and rather than create many pages of information, the Web site dispenses information from a database based on the user’s request. Other Web sites allow users to buy online using a shopping cart that calculates taxes and shipping costs and then debits monies from the user by a form of e-payment or credit card. Multimedia sites are graphically enhanced and usually offer animation, sound and video – some interactively others standalone.

Depending on the type of site depends on the technology behind the scene “running” the site.

Static Web Sites

The most fundamental languages to mention first are called “mark-up” languages such as HTML, XHTML and CSS. HTML (Hypertext Markup Language) creates Web pages and offers some presentational tags such as formatting text. Static Web sites offer no functionality such as interaction. HTML is no longer the working version and has been replaced by XHTML (eXstensible Hypertext Markup Language) which is designed to create Web pages with more structure and less presentation. CSS (Cascading Style Sheets) works with HTML and XHTML and offers presentational elements rather than structure. The goal is to eventually use XHTML for document structure and CSS to format text, images and other Web page elements.

Database Driven (Content Management)

Sometimes a Web site owner will want to offer their viewers a large amount of information that they might already have stored in a database. They might also want to provide a way for viewers to cross-reference that information. You can use “scripting” languages to access a database on a Web server to retrieve data and send it back to render in a Web browser. Some examples of languages are: ASP (Active Server Pages), PHP and Coldfusion.

E-Commerce

E-commerce pages are a bit easier to establish than learning an advanced scripting language such as ASP. E-commerce sites could very well use ASP or Coldfusion to run the site, or, you could choose a pre-created shopping cart that allows you to simply add products to your Web site. The Shopping Cart will allow viewers to browser a catalog, select products and check out using your choice of payment and shipping options. An example of a popular shopping cart is Miva Merchant (www.miva.com)

Flash

Adobe Flash movies are graphic animations for Web sites. They consist primarily of vector graphics, but they can also contain imported bitmap graphics and sounds. Adobe Flash movies can incorporate other languages, such as ColdFusion, to enable input from viewers. Web designers use Adobe Flash to create navigation controls, animated logos, and long-form animations with synchronized sound. Since Adobe Flash movies are generally compact vector graphics, they download rapidly and scale to the viewer’s screen size.

What Tools Do I Need to Start?

For a basic approach to Web page creation, all you need is a text editor to code XHTML and CSS, a Web browser to load and test the Web pages you create, and a paint program to create and edit images for your Web pages.

Working with Text Editors

You can use a simple text editor, such as Microsoft Windows. A text editor is a program used to create and edit documents that contain only text with no special formatting. This is a perfect environment for creating HTML and XHTML documents.

Working with HTML Editors

With today’s highly sophisticated Web pages, most designers rely on a professional HTML editor, such as Adobe Dreamweaver, to create their Web pages. Web page editors in combination with the knowledge of XHTML enable the designer to create very complicated Web page layouts using tables and other elements that are compatible with most Web browsers.

The only disadvantage is that the type of Web editor you use may end up placing nonstandard elements in your code. For instance, using Microsoft FrontPage might affect how your pages display in other browsers such as Firefox.

Most professionals tend to favor Web editors such as Adobe Dreamweaver. Dreamweaver uses standard tags and style elements and also allows you to build ASP, JSP, or ColdFusion applications.

Web Browsers

There are a number of Web browsers used on the Web today. All Web browsers are capable of certain basic tasks, such as locating Web pages and loading them into the Web browser’s window. Web browsers were designed to display Web pages following the HTML/XHTML standards and conventions. However, each browser application might display your Web pages differently, depending on the browser and how it renders HTML/XHTML standards. To ensure your Web page has maximum viewing capabilities, test your Web page on a variety of Web browsers before uploading it to the Web. You do not need an Internet connection to test your Web page. Web browsers have an Open Page for Open File feature in the File menu that allows authors to test their Web pages from a local disk.

The two most popular Web browsers used on the Web today are Netscape Mozilla Firefox and Microsoft Internet Explorer. Both Internet Explorer and Navigator comply with XHTML/HTML standards, as well as including their own HTML extensions. These extensions mainly provide multimedia enhancements and might not be supported by other Web browsers.

Paint Programs

Web design has transitioned from manipulating text-based HTML documents to integrating compelling images onto Web pages. There are an array of paint programs, some more complex than others. For both the amateur and the professional, there is a popular paint program that is both powerful and easy to use, Paint Shop Pro by Jasc, Inc.

Paint Shop Pro is a popular paint program used to create graphics for the Web. You can use Paint Shop Pro to create simple graphics, such as text logos, or more-complex graphics, such as a multilayered image. Paint Shop Pro also has a subprogram for creating animations, Animation Shop. Animation Shop is an easy-to-use full-featured application that helps you create your own animations.

Although Paint Shop Pro does offer some powerful features, there is no doubt that as a professional designer, you should consider using Adobe Fireworks or Adobe Photoshop.

Adobe Fireworks is ideal for designing graphics for the Web. In addition, it works well with other Adobe software, such as Dreamweaver (HTML editor) and Flash (advanced animation). In addition to creating high-end graphics, Fireworks comes packed with advanced tools specifically for the Web, such as animation, image slicing, mouseovers, and HTML exporting. You can learn more about Adobe by visiting their Web site at http://www.Adobe.com.

Adobe Photoshop is a standard in graphic designing and offers some versatile tools for both the Web and print media.

Moving Forward

This lesson was written to briefly introduce you to the basic tools you need to begin creating Web pages. In the next lesson, we will take a deeper look at Web standards, Web 2.0 methodology,