Part1: Process & Design

Building websites or web application is not hard if you do it right. Any good developer can build a website in few days or maybe just in few hours depenging on the scal of the project. But the main key here is this website achieve the goal for which it was created ?. I don’t thinks so. You should build your website with a plan that starts with gathring some inforamtion a bout the targeted audiance and this stage of building the website called Design.

What questions should I ask to understand the audience’s needs?

1. Who is the site For ? Every website should be designed for the target audience and not just for yourself or the site owner.You should know if your vistitors are individuals or companies and if they are individuals you should know thier age and the area they live in .. etc.

2. Why PeoPle visit your Website ? Here you should search for your vistors Key motivations and specific goals.

3. What your visitors are trying to achieve ? You should create a list of reasons why people would be coming to your site.

4. What information your visitors need ? Now you need to work out what information they need in order to achieve their goals quickly and effectively.

5. How often people will visit your site ? Working out how often people are likely to revisit your site gives you an indication for how often you should update the site.

Site maps

After you gather the informations that you need you should start to organize them in hierarchical manner.

WireFrames

A wireframe is a simple sketch of the key information that needs to go on each page of a site. It shows the hierarchy of the information and how much space it might require. The wireframes make design easier because you know what information needs to appear on which page before considering how the the page should look.

Getting your message across using Design

• Design is about communication. Visual hierarchy helps visitors understand what you are trying to tell them.
• You can differentiate between pieces of information using size, color, and style.
• You can use grouping and similarity to help simplify the information you present.

Part 2: Structure

HTML

It is refer to hyper text mark up langauge. You have to know it is not a programming language instead it is a way of structuring data on the web using special write to do this purpose. In HTML we wrap every piece of data in tags that tags define how to present thies information. Tags it has two brakets and a charters between them like <p>data</p> each tag has an opening and closeing and every tag has it purpose. The opening tags can carry attributes, which tell us more about the content of that element. and every attribue has a name and value.

check this image to see how we structue data using html

HTML5 layout

Html went through some improvements to come to it is final version which called html5. Html5 interduced a new way of using tags it is repalsed using <dev></dev> tags with new tags the aim of it just to make the document readable and meaningfull.

Extra Markup

• DOCTYPES tell browsers which version of HTML you are using.
• You can add comments to your code between the markers.
• The id and class attributes allow you to identify particular elements.
• The <div> and elements allow you to group block-level and inline elements together.
• cut windows into your web pages through which other pages can be displayed.
• The tag allows you to supply all kinds of information about your web page.
• Escape characters are used to include special characters in your pages such as <, >, and ©.