Beginning Webmastering Techniques( with site design/management focus )


Full Description
Topics Covered : Site design, Performance Tuning, Adding audio, video and simple add-ons and also a broad overview of other Webmastering areas of speciality.

Prerequisite: Some programming experience is helpful.
Familiarity with networking concepts will also be helpful.

Software/Hardware Requirement : A student will need to have access to a PC( 486 or higher ), internet connection through a modem with reasonable speed/DSL etc.

Also students will have to have access to some kind of web hosting service that will host the sites they design as their assignments.




Course Textbook link:



Course Textbook



Reccomended Reading:



Dynamic HTML: The Definitive Reference



Web Performance Tuning: Speeding Up the Web


Outcomes:
On completion of this course a student will be able to design basic websites with good user interface and reasonable load time/ overall performance.

It will enable a student design quality websites which can not always be done using popular WYSIWYG( What You See Is What You Get ) editors.

This will also prepare students for taking Intermediate/Advanced level courses in Webmastering or introductory
courses in other speciality areas of Webmastering.


Lesson 1

What is the World Wide Web ?

There are very few people these days who did not do some sort of web surfing at some time, so it seems to be redunadant to talk about how it works for an user ? We will start with how it gets
implemented.

Web is nothing but a client/server system, where the user interacts with the client, gives the client some request to process, the client in turn passes the request to the web server, the server processes the request and sends the back to the client and the user gets the response back from the client.

When a client & a server communicate, they first need to establish a communication protocol. They need to follow the rules required by that protocol, so that communication remains smooth & effective.

The communication protocol used by an web client & an web server is called HTTP( Hypertext Transfer Protocol ). This is a protocol suited for the delivery of hypertext material such as HTML( hypertext Markup Language ) code, images etc.

How HTTP works ?

A connection gets opened between a client & the server. The client sends a message to the server requesting some type of service.The request contains HTTP request header which defines the type & length of the request packet.

The web server will service the request & send the response back. Just like the request, the response also contains a request header which defines the type & length of the response packet.
Then the connection gets closed.

It is important to note that HTTP is a stateless protocol. This means each request gets processed independently by its own connection. No information can be shared between two requests or responses. A new connection needs to be opened for sending a new request by the same client. Also a connection needs to be closed after a response is sent to a client. Obviously a server can serve more that one client at a time, and what we discussed is valid for one client talking to the server. This is quite different from other common protocols like TCP/IP where a connection can remain open for an entire client session & multiple client requests can be processed during one server session.

Locating a page, the Uniform Resource Locator( URL )

Each time we see an web page, we make a request to an web server. In another words all pages are served by some web server, however as an user we can not remember which server to contact for seeing which page. So the servers can get their unique names those are easy to remember. Once this name is registered it is easy to refer to a page by using the Uniform Resource Locator. The URL for a page commonly have the familiar format http://www.domain.com/yourpage.html.

WebMastering

Someone needs to create & maintain the material for the users to view & use them( in case of interactive pages ), for the time being we will be talking about static pages & sites. An webmaster can perform one or all of many duties like installing & maintaining an web server,
maintaining the database an website need to use or creating the contents for web site(s). In this course we will be covering that part, creating & maintaining web sites using basic & static web pages.

Creating a page

When we create a basic page, we use a language called HTML( hypertext markup language ).
This language is somewhat different from other programming languages. What it really is the text to be displayed with some embedded tags. These tags usually specify the formatting information for the page to be displayed. HTML tags are enclosed by <> to distingguish them from the text to be displayed. Also a starting tag should always be paired with an ending tag of . All HTML pages will have a head and a body . Following is the way we should start creating an HTML page when we are doing so without using any tool.

The header should start with the keyword HEAD enclosed in <> and should end with HEAD enclosed in , the same is true for body. Note that these tags are not case-sensitive.

These tags will tell how it needs to formatted when it is being displayed by a browser for an user to see.
An HTML page needs to be saved in a file with an extension of .html or .htm. It should be created using a plain text editor. Word processors are NOT best-suited for this purpose as there should not be anything but plaintext and HTML tags in the final version that will need to be uploaded to an web server. One of the popular word processors Microsoft Word gives you the option of saving your file as an .html file.

At this time there are many web editing tools available in the market. I will not mention/ recommend or compare them as we are learning to work with basic HTML.

We will not be able to discuss all possible HTML tags available in the latest version of HTML. An HTML reference book needs to be consulted for that purpose.

Testing/Debugging

Unlike programming languages, HTML does not have compiler. So the only way to debug a page is to preview it by accessing it using its URL after it gets uploaded to a web server. Sometimes it can get tedious but this is the way an HTML page needs to be tested. If your page does not look like what it should look like, your code needs to be scrutinized for mistakes to fix. A missing < or a > is a very very common problem.

Cross-browser compatibility

Despite all the efforts made to standardize HTML, all the tags do not always work the same for all the versions of all popular browsers. Always consult an HTML reference book to avoid or to work around such incompatibility.

Uploading .html file to an web server

Once your file is ready, it needs to be uploaded. The most common way of doing so is using the FTP( File Transfer Protocol ). Many web service providers provide graphical interfaces which are often easier to use.

At this stage it is important to make sure that the file goes to the right directory on the web server on uploading otherwise the page will not be found by the user even if it is there on the web server.

Most commonly your provider will provide you with a subdirectory for uploading the pages you want to keep there. You will have to work with your service provider to figure out where it will be. Also you will have to make sure that the path goes correctly into the URL you are providing for viewing your page. Say your provider has a domain called http://www.provider.com and say your userid there is userone and say your page name is index.html. So commonly the URL for your page will be http://www.provider.com/userone/index.html.

First page of your multi-page site is usually named index.html.

It is always a good idea to check if you can access your page using the URL, that you think should be the URL for locating your page. If not check its location on the server first.

Assignment

Create an HTML file describing why you are taking this course, name it index.html. Upload it to an web server. Check to make sure it is available there.















Assessment:
There will be questions/quizzes at the end of each week’s study. 50% of the assessments will involve an website designed and launched by a student.

Week 1
We will start with general introduction to World Wide Web and Webmastering. We will learn how to use an HTML editor, run/preview completed code. We will also learn basic HTML tags and how to upload HTML files to the servers, where they need to go. Will discuss testing/debugging HTML code.
Week 2
We will learn how to add color, link, and static images etc. to an website. We will also discuss using icons and some relatively advanced concepts like tables, forms etc.
Week 3
We will also discuss some look-and-feel/UI issues. Will discuss good design/layout vs bad design/layout.We will briefly discuss compatibility issues between major browsers( Netscape Navigator & Internet Explorer ).

Week 4
We will discuss performane issues & performance tips. We will learn how to create sites that are attractive yet effective in terms of performance. We will be focusing on client-side optimization that is within the scope of the work of a web-author/site-designer.
Week 5
We will discuss dynamic content generation, Dynamic HTML( DHTML ), Documents Object Model( DOM )& event handling. Also discuss object containment in DOM, DOM constructs & Equivalent HTML tags.

Week 6
We will discuss the use of Cascading Style Sheet( CSS ).

Week 7
We will discuss using simple add-ons including adding ready-made small javascript code. Mention URLs where such scripts can be found as shareware.

There will not be any detailed discussion of coding in Javascript/Java .

We will discuss adding animation/ audio/video to a site. We will discuss various popular tools available today.

We will not be teaching ‘how to use these tools( Flash,Dreamweaver, Fireworks etc )’ in detail.

They are in the scope of advanced Site Design course, so no additional software will be needed.

Week 8
We will have a broad overview of the other speciality areas of Webmastering e.g. networking, server
administration, server-side and database development.

Contact Hours: 30