Tuesday, 16 November 2010 11:17

Web Design Step-by-Step Part - 3

Written by  romaine waite
Rate this item
(0 votes)

Websites have become a very important part of our society. People use them to collect and distribute information. They are also largely used for entertainment and pleasure. However there are only a small percentage of these people that not only understand how websites work but can build one themselves.

 

With this tutorial I want you be apart of that percentage. In order to under stand how to build a website you have to understand the language. Don’t worry we won’t be working on sentence structure, and spelling and you won’t have to write and essay, this isn’t English class. However you will have to learn the grammar of a language called HTML. (Hyper Text Mark Up Language) Luckily this is probably the easiest language you will learn.

 

Now the reason I call it a language is because, this is what you will use to communicate with your internet browsers. For review, an internet browser refers to the program used to search and display website. For example: Internet Explorer, Mozilla Firefox, Safari. These are the most popular ones. Alright. Now that we got that out of the way, let’s start talking about this language.

Depending on how old you are you may call it grammar school or English class. Remember all the punctuation you had to think about when writing a paragraph or a sentence. Well there is a little bit of “punctuation” in HTML. But pay close attention because it’s not periods and comma’s.

 

Alright enough chit chat let’s get into it.

 

HTML is made up of something called TAGS. Tags are the words you use to construct your sentence, which creates your paragraph to communicate to the browser. Now I’m using English

Writing terms so that you can understand. Imagine your writing a letter with instructions to your

Friend, but in this case your friends name is Internet Explorer or Firefox. And this friend only speaks TAGS. Get it? Good! Let’s move on.

 

Alright so what I’m going to do now is tech you how to setup and HTML page before you actually start adding tags. This would be the equivalent putting a title, date and header on your English essay before you actually write it. So your essay was about eggs you could call it Eggs Galore.

So without reading you essay people would have an idea of what it was about. Same thing with

Creating an HTML page except you can only give it one title HTML. Easy right?  Let me show you.

 

  1. Open up a simple text editor on your computer. (I.e. Word Pad, Note Pad, on a PC)
  2. In the blank Document I want you to types this <HTML>notice I put the letters in between the “<” symbol and “>” all tags have to go between these to symbols in order for it to work. For example when you’re writing a sentence. It must begin with a Capital and end with a period for it to be proper sentence, yeah I know it needs other stuff to but that’s the best example I could come up with for to understand.
  3. The next thing I want you to type is    make sure it’s in between the first tags that we did. What we’ve done is not only declare out HTML page we’ve also put the tags in place to give it a title
  4. Now in order to title your page type anything you want

<b> HERE</b>

 

Alright now that we have created our page let’s test it out. Now next step I’m going to show is probably the most important. But it’s actually the easiest. In the text editor your using I want you to go to FILE > SAVE AS > when the dialogue box comes up select a location for your file, I would put it on the desktop for now. Then in the “File name:” box make sure you change the file extension to .html. So your file name should read like this: YOURFILENAME.html

 

 

 

Once that’s complete you should have an html file on your desktop. Now if you go to your browser and open that file you should see a blank page with the title that you chose. Now that you have the setup you can experiment with the tags I have below to create your page. But there is one more tag you need before you go crazy. This tag is called the BODY tag. Like essay you need an open and closing paragraph and you’re body paragraph which is the main content of your essay. Same thing applies to the HTML page. If you’ve done it correctly your page in the text editor should now look like this

 

 

<b>YOUR TITLE HERE</b>

 

 

 

 

ALL OTHER TAGS GO IN THIS AREA BETWEEN THE BODAY TAGS

 

 

 

 

 

 

 

Part 1 – You can experiment with the tags below to add text and images to your web page.

 

Images

Make sure the image your using is saved in the same place the actual html page is located. For example if your home.html page is saved on the desktop be sure to save your image on the desktop as well.

No if you don’t want to do that you can put the path of the image instead. For example if you have the image in a folder put the full extension. i.e. Desktop/images/dog.jpg

Heading Elements

 

Largest Heading

 

 

. . .

 

. . .

 

. . .

 

. . .

 

 

Smallest Heading

 

Text Elements

 

This is a paragraph



(line break)


(horizontal rule)

This text is preformatted

 

Logical Styles

This text is emphasized
This text is strong
This is some computer code

Physical Styles

This text is bold
This text is italic

HTML Unordered Lists:

 


  • Coffee

  • Milk

 

HTML Ordered Lists:


  1. Coffee

  2. Milk

Text Fields

 


First name:

Last name:

 

Radio Buttons

 

 


Male

Female

 

HTML Hyperlinks (Links)

Link text

 

 

 

 

 

 

 

 

 

 

Part 2 – Different Web Languages

 

JavaScript: allows wed designers to spice up their web page with dynamic content or interactive content.

 

PHP: produces dynamic web pages

SQL: is a database computer language designed for managing data in relational database management systems

CSS: Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language 

 

 

 

 

Part 3 – Templates / Open Source / Resources

 

http://www.freecsstemplates.org/

http://drupal.org/

http://www.w3schools.com/

http://thefwa.com/

Additional Info

  • props:
  • teleprompter:
  • misc:
Last modified on Wednesday, 01 December 2010 01:43
Login to post comments

Friends Online