MakeOwnWebsite.net » Chapter

How to make an online store using Dreamweaver and PHP. Chapter 5

Admin — Mon, 21 May 2012 21:18:15 +0000

Watch the video tutorial, you read the article below it and follow relevant links as needed.
src=http://i.ytimg.com/vi/Um-4o0NKw48/default.jpg

RESEARCHING ONLINE: FIFTH EDITION …the most up-to-date Internet resource available…technology explained step by step…more on searching the web…all new case study on researching science…easier to use Web design chapter

Admin — Sat, 30 Oct 2010 16:32:42 +0000

Best Price at Amazon

Guide to basic web design – Intro and Chapter 2 (Headings, Alignment Formatting)

Admin — Wed, 21 Jul 2010 09:58:05 +0000

Its All About The Text

Now that you have created your first page we are going to look at how you can change the format of your page to suit your own specific needs.

Most of the examples I will be writing will be without all the and tags. You may be best to create a template so you are not writing the basic structure over and over again. All of the examples in this section need to be put in the body section.

We will be creating paragraphs, headings, changing the format and size of the text

HEADINGS

Headings are mostly used for the titles on pages and other places where you want the text to be large and stand out. Headings range in size from

to

.

We will create an example so you can see the size of the headings. This maybe useful to keep as it may be good as a reference in the future, until you get used to what size you want when doing headings.

Task

We will create an example so you can see the size of the headings.

Open a new notepad file and type the following HTML

Heading sizes

Heading size 1

Heading size 2

Heading size 3

Heading size 4

Heading size 5

Heading size 6

As you did with the first page you created go to file/save as and in the web design book folder you created save this file as headingsizes.htm.

If you double click the new file you have created, a new browser window will open and you will see 6 different lines which represent the 6 different sizes.

Spacing

Line spacing is done by using the
tag. The
tag basically puts a blank line in your text.

Example(try this if you wish)

Put the following in the Section of a new web page.

My name is Freddy

I Fancy A Curry

But They Give Me Gas

If done correctly you should see a web page where all these lines are split up some have more spaces than others. Remember each
inserts a blank line.
is also one of the rare times you do not need to close the tag as all it is doing is inserting a line so there is NO NEED to close it with

When you type sentences and put a space between words it is always counted as one space.

For example you could put:

Hello My name is Freddy.

The browser would output this as:

Hello my name is Freddy.

As you can see all the spaces you entered would be removed. There is a way to avoid this you can use the

 tag to make the text appear in your browser exactly as you type it but always remember to close the tag afterwards

.

Horizontal Lines

If you have ever wondered how people did the horizontal lines across the screen as I used to do you will be amazed at how easy that is.

That is all there is to it. You can change it to whatever colour you want. Also Note that colour is spelt the American way!!

Go ahead give it a try in your heading size document. Put the above code in the Body section below any code you already have. If you are using internet explorer you will see a red line. In other browsers it maybe grey.

Alignment

Text can be aligned a number of ways Left Aligned, Right Aligned, Center Aligned and also Justified(The text on each side is aligned making the text level on both sides).

Alignment can be applied to the tag and also can be applied to the

tag.

The

tag is something we have not looked at yet. The P basically stands for paragraph. So when you have a block of text you basically start with

then write your paragraph then close the tag with

. You will understand the

tag further on in the exercise but for now we will start with the tag that we have been covering.

So as a scenario say we wanted to have a big title at the top of the page that said “Products”. But we didn’t want it on the left hand side of the page we wanted it smack in the middle of page we could use the following

Products

Please note that centre in any HTML code is spelt the American way.

I have highlighted the code I have just put in. Formatting of any kind generally goes in the opening tag. We tell it what we want it to do which is ALIGN then we say we want it to align to the centre by using =”center”. As you can see where we want it to align to is put in double quotes. This would do exactly what we want and put the Heading in the centre of the page.

There are also 2 more types of alignment that come in handy. You can also align text or headings to the top or bottom using VALIGN. Valign stands for “Vertical Alignment”. This may not sound like it could have any use at the moment but as you progress you will find this useful. I won’t go into detail but I guarantee you will use this at some point so it’s worth remembering that the example is here.

Test – This aligns the heading to the top of the page or table cell.

Test

– This aligns the heading to the bottom of page or table cell.

Its now time for some Practical exercises.

Type the code below into a new notepad document:

Text And Heading Alignment

This is centrally aligned

This is a paragraph that is left-aligned to the page. The first letter of each line appears under the first letter of the previous line. You may have to add more text than this to see its actual effect. I you have high resolution your page can eat up a lot of letters before it has to go to a new line

This is a paragraph that is right-aligned to the page. The Last Letter of each line appears under and level with the last letter of the previous line. You may have to add more text than this to see its actual effect. I you have high resolution your page can eat up a lot of letters before it has to go to a new line

This paragraph is justified to the page, which means

that the first and last letters of each line will appear under the first

And last letters of the previous line. We are putting a lot of text in this part as this paragraph needs to be relatively long to show the effects of a paragraph been justified if when you open this file all this text is on one or two line add more text until you have about 4 lines of text and you can see the effects. The weather is cold here today and I am getting very bored of writing sentences that don’t really make any sense and im tired so that makes it all the worse. Ok maybe that should do it I better go and see if it is long enough

As you can see we have a little bit of everything we have learnt in here.

We have a heading that is aligned then a line space. We have Paragraphs that align in various ways and are closed off with the

closing tag.

Text Formatting

To finish off this section we are going to look at the different styles of text you can have and the different fonts you can use.

As in programs like Word you can make text Bold Italic or Underlined or even a combination, Bold Italic, Bold Underlined

This can be done by using the following tags

Remember you must turn the tags off when you no longer want the text Bold for example

I want this part BOLDI don’t want this part bold

You can try this by putting the above code into a test file or in one of the files you have already created and seeing the results.

Different Fonts

As you may be aware from using other programs such as word processors there are a variety of fonts available. HTML gives you the ability to choose what font you want by using the tag. If you don’t specify a font in your code it will always default to whatever font is select in the browser options.

The tag also allows you to specify a font size unlike the tag you have a choice of 1-7. In the below example I have selected The font Papyrus and a size of 5.

This is Papyrus Size 5

This would give me the following:

This is papyrus Size 5

Try this out yourself and experiment with different font faces and sizes. ALWAYS remember to close off the font tag when you want to stop using the font.

Below is an exercise that will try to get you to use what you have learnt. Have fun and see what you can do…

Exercise

That’s it for this section. Have a practice on your own and look over the examples again if you are still unsure. If you are feeling confident lets move on to section 3.

Developer of 7 years and founder of CA-Development – Web Design and web application design and development, aswell as bespoke software solutions and freelance work.

Guide to basic web design – Intro and Chapter 1 (How To Edit, Name and Save Files)

Admin — Tue, 13 Jul 2010 10:04:45 +0000

About

The original idea of the book was to circulate among family and friends as I didn’t have time to deal with all their requests for basic websites especially since I was not getting paid for it.

So I created this book and whenever a family or friend asked me to do them a basic website I responded with “I can help you to do it yourself”.

Well it worked out great. I had more time to do work I was getting paid for, they found the book really helpful and 15 out of the 17 people I gave the book to produced their own sites (yes they were basic but they were happy THEY had done it)!!!

The book has obviously had a bit of a facelift since I originally did it. For example I corrected a few appalling spelling mistakes although I bet you still find some.

Anyway something about the book now.

Over the last year I have chopped and changed the book to try and explain things in the best possible way and from the feedback I have had it is easily understood and easy to follow.

The book is separated into 12 sections each dealing with a different area

On most sections there are exercises to complete at the end, which are relevant to whatever has been learnt in the section. It is very important to try and complete these exercises as they basically test your knowledge and understanding of the section.

I have also assumed that the reader has very little knowledge of how things work so to those of you who are more advanced and know a little more I apologise.

I would also recommend that for the book you use internet explorer even if it is not your default browser. The reason being is that most of the examples were done using IE and results may differ in other browsers.

There are some sections in this book that I only touch upon briefly. This is because this book was designed to be a basic guide to web design not an in depth guide. The aim was to enable people to produce their own basic website after using this book.

I think that’s enough of an introduction I am sure you want to get started so why don’t you move to the first section.

Section 1   Edit, Name And Save Files

Section 2    Headings, Alignment And Formatting

Section 3    Text And Background Colours

Section 4    Working With Images

Section 5    Linking Your Pages

Section 6    Formatting Page Content

Section 7    Layouts With Tables

Section 8    Collecting Input From Users

Section 9    Working With Frames

Section 10    Style Sheets

Section 11    Multimedia

Section 12    JavaScript

Extras

How To Edit, Name and Save Files

The Great Thing about HTML is that in order to create pages you don’t need any special program like you do in things such as software developing. Web pages can be designed in something as simple as notepad that comes with windows.

There are alternatives out there to notepad such as Textpad (pc). Textpad is shareware that can be downloaded from http://www.textpad.com/. Below is a task you can do yourself that will get you on your way to creating your first webpage follow the instructions below.

Task

For those of you who have never seen HTML Source code before open any webpage in internet explorer and go to View then go to Source you will see notepad open and show you the source code for the page.

If you haven’t already done so open notepad on your computer you will be presented with a new blank document. You can minimize this for now.

Each Web page contains commands that tell the web browser what to do and how to display information.

These commands are called tags.

HTML tags are surrounded by the angle brackets < and >.

It is always good practice to try and enter all tags in uppercase it makes your HTML code easier to read should you need to update it later. e.g.. .

Every Webpage has a structure. The basic structure starts with the tag this basically tells the browser that everything after this will be written in HTML. Next comes the tag. Inside the head tag you may have a title tag . The title tag contains the name of your page that will appear in the top of the browser when someone looks at it. <br/><br/>As we have opening tags we also have closing tags so for example: <br/><br/><TITLE>This is a test page

What this basically tells the browser is to open the title tag it takes the title and then it closes the title as if to say I have finished with the title now. You can get away with not closing some tags but this is very very bad HTML coding and will not only make code very hard to read and messy it could also affect many other things such as where you rank in search engines etc

Ok its time to create our first webpage in the exercise below:

Type the code below into the open notepad document you have:

My first Web Page Anything I want to be displayed on the screen goes in this Section

After you have typed the above into Notepad:

If you now go to the place where you saved the file and double click the file firstpage.htm you should see a new browser window with the page title you gave it and some text in the main window.

As a quick recap:

tells the browser that everything after this line will be written in the HTML language.

is the section at the beginning of every web page that you can use to create individual display styles.

is the meaningful title that you give your web page. This will appear at the top of your browser window. <br/><br/><BODY> is where you place all the HTML, text and images that you want to display in the browser window. <br/><br/>Congratulations you have just created your first web page move on to section 2!!!!! <br/><br/>Look out for part 2 <br/><br/></p> <div style="margin:5px;padding:5px;border:1px solid #c1c1c1;font-size: 10px;"> <p>I have been a web/software developer for the past 7 years working on small scale bespoke software systems to large scale custom web application and database driven sites. Currently freelancing while i complete some long running projects. </p> <p><a rel="nofollow" onclick="javascript:pageTracker._trackPageview('/outgoing/article_exit_link');" href="http://www.ca-development.co.uk">CA-Development – </a>Web Design and web application design and development, aswell as bespoke software solutions and freelance work.</p> </div> </article> <article> <h1>CSS Web Designers Intro : Chapter 2</h1> <p>Admin — Thu, 14 Jan 2010 09:57:56 +0000</p> <p> <param name="movie" value="http://www.youtube.com/v/jvAgpWrKNDQ?fs=1"></param><param name="allowFullScreen" value="true"></param> </object><br /> Cascading Style Sheet for Markup Languages</p> </article> </main></body></html>