Web Site Development

WEBSITE

is a set of related web pages containing content (media), including text, video, music, audio, images, etc. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator. All publicly accessible websites collectively constitute the World Wide Web.

The seven (7) step method

Web DesignWhat will your web site look like and what

features will it contain? Write it down on paper using a stepwise approach:

Features ListLayout & NavigationKeyword AnalysisTextArtistic Preference

• Bandwidth & Web Space Requirements Analysis

What will it take in terms of web hosting to accommodate the web design in Step 1? Estimate the host disk space and monthly traffic requirements. We provide formulas, calculators and examples. How will you create the web pages? Web authoring software options examined.

• Domain Name RegistrationDo you need one? Effective domain name

selection and domain name registration procedures. Price comparisons. 

• Web HostingChoose a web hosting service that meets your

web site design requirements in Step 2. Web host comparisons, criteria driven searches, expert reviews, QA process.

• Web Development

Build the web pages. Method depends upon decisions reached in Step 2. Expert guides to coding, testing, validating, uploading, performance concerns.

• Web Site Promotion

Get your web site indexed. Search engine promotion and submission strategies. Proper keyword selection. Search engine ranking and web site optimization rules. 

• Web Site Maintenance

Ongoing web site promotion, traffic analysis, web site performance, links testing, popularity testing, host performance.

is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device.

This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links.

Web pages frequently subsume other resources such as style sheets, scripts and images into their final presentation.

Parts of Webpage

Banner This is an area of top of the page that is

often the same of all the page of the website. It is containing a company logo. It often a share box and located them and sometimes a hotspot to take your back in home webpage.

Menu System -The antithesis of a menu-driven program is a 

command-driven system, in which you must explicitly enter the command you want rather than choose from a list of possible commands.

Footer -One or more lines of text that appear at the

bottom of every page of adocument. Once you specify what text should appear in the footer, theapplication automatically inserts it.

Content-is the textual, visual or aural content that is

encountered as part of the user experience on websites. It may include, among other things: text, images, sounds, videos and animations.

If your website is an e-commerce website, you will traditionally see a shopping cart to the right. People usually read left to right so it's logical to see a shopping cart to the right of your banner ad and website ID.

On another tier of the same navigation bar, you may find a list of what the company is selling by category. Sometime you'll find this information on the left side of the page depending on how you set it up. It is believed that people like information directly in front of them for easy access.

On that same line of the navigation bar, a searchbox can be added as well. It depends on how manypages you have on your website. If your site is has alot of content, it's customary to add a search box. Ifyou have a lot of categories your visitors need to seefor better service to them, you can even add anothersection of the navigation buttons below the secondtier of navigation buttons

If you find you have a lot of subsections for the

products you're selling, you can add anothernavigation bar on the left side of the page.Maybe your website sells, flat screen TV's and you want to show more of a breakdown of the product by parts. A left side navigation bar could work.

Just below the header in the center of the page you will find your title with H1 Tag. I point out H1 tags because Header tags help search engines know the clear intention of your web page. The title will help optimize your page even better with a Header tag

Just below the title is where your visitors should find the content that describes your products and services; maybe listing TV's by parts and price

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags

HTML uses markup tags to describe web pages

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag, the second tag is the end tag

Start and end tags are also called opening tags and closing tags

• a line containing HTML version information,• a declarative header section (delimited by

the HEAD element),• a body, which contains the document's

actual content. The body may be implemented by the BODY element or the FRAMESET element.

The HTML element

<HTML> ...The head, body, etc. goes here... </HTML>

The HEAD element

The HEAD element contains information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content.

The Document Head

The title element The TITLE element is not considered part

of the flow of text. It should be displayed, for example as the page header or window title. Exactly one title is required per document.

The Document Body

The BODY element The body of a document contains the

document's content.

HTML headings are defined with the <h1> to <h6> tags.

Example<h1></h1>

<h2> </h2><h3></h3>

HTML paragraphs are defined with the <p> tag.

Example< p></p>

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:

Example<br />

<b></b> bold <strong></strong> strong <big></big> big<i></i> italic<em></em> emphasized <code></code> code subscript superscript<marquee></marquee><blink></blink>

<h1 style="font-family:verdana">This is a heading</h1>

<p style="font-family:courier">This is a paragraph.</p>

<html><body>

<h1 style="font-size:200%">This is a heading</h1>

<p style="font-size:110%">This is a paragraph.</p>

</body></html>

<html><body>

<h1 style="color:blue">This is a heading</h1>

<p style="color:red">This is a paragraph.</p>

</body></html>

<html><body>

<p style="font-family:verdana;font-size:110%;color:green">

This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it.

</p>

</body></html>

HTML links are defined with the <a> tag.

Example

<a href="http://www.w3schools.com">This is a link</a>

HTML images are defined with the <img> tag.

Example<img src="w3schools.jpg" width="104"

height="142" />

<body background="bgimage.jpg">

<table border="1">  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr></table>

<table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr></table>

<table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr></table>

<table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr></table>

<h4>A background color:</h4><table border="1" style="background-

color:blue"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>

<h4>Without cellpadding:</h4><table border="1"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>

<h4>With cellpadding:</h4><table border="1" cellpadding="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>

<table border="1"><tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr>

<td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td></tr>

<tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td></tr></table>

table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr>

<tr> <td>February</td> <td>$50</td> </tr></table>

<ul><li>Coffee</li><li>Milk</li></ul>

<ol><li>Coffee</li><li>Milk</li></ol>

HTML forms are used to pass data to a server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:

<form>.input elements.</form>

The most important form element is the input element.

The input element is used to select user information.

An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.

<input type="text" /> defines a one-line input field that a user can enter text into:

<form>First name: <input type="text“ name="firstname" /><br />Last name: <input type="text" name="lastname" /></form>

<input type="password" /> defines a password field:

<form>Username: <input type=“username" name="pwd" /></form>

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices:

<form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female</form>

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.

<form><input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /><input type="checkbox" name="vehicle" value="Car" /> I have a car </form>

<input type="submit" /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input" action="html_form_action.asp" method="get">Password: <input type="text" name="user" /><input type="submit" value="Submit" /></form>

Some of the valuable tips for website design are as follows:• Every website is designed with some goal or

objective. Have clear understanding about what are your exact business goals, based on that website designing is done. For instance you have an ecommerce website, and then all the aspects of your website should be concentrated to the aim of selling the products.

• Figure out your target audience. It would help in making plans about how to design a website so that it catches the attention of your target customers. What is their geographical location, interests, age group, religion, etc influences the pattern of website designing.

• Ask your website designer to make site map, it would show the manner in which your website will be constructed. Depending upon your website needs it can be simple or complex

• No visitor likes to wait for web pages that take much time to load. Ask your web designer to design website that loads quickly and does not take more than 15 seconds. Your website might have very attractive web design but it is not going to help you in business if it keeps your site visitors waiting. Faster loading pages are an asset for your website.

• Ensure your website is well-equipped with navigation links at appropriate location on the web page. This would help them in making them go through your website easily. Important links should be placed at right locations. Usually top position of web page is a place where a visitor looks for links. Menus can be placed on right and left side of the web page.

• After model of website design is set, convert it into set of web templates that is viewable in web browser. This type of mock model for the website will give you clear idea about how your real website is going to look like and function.

• You should test the mock up model of your website. Test whether it is according to the standards. It has to look good in major browsers. Also the website should be search engine friendly.