Help getting started

[dhall]

I just bought a domain & hosting, got a free template. The easy and quick way is turning out to not so easy and quick.

I am clueless, but I want to learn web-design and understand it from the ground up. I am not in a hurry to get anything going, so where do I start the learning process?

Should I get FrontPage, or just learn the process of code in notepad?

Any good, basic books to start with?

Thanks
Darryl

[alloydog]

I would suggest start with a slightly more enhanced version of Notepad, such as Notepad2 - it highlights the different parts of the mark-up in different colours, making editing easier.

Start with the basic HTML4.01 and CSS1 specifications.

Use a couple of browsers, at least Internet Explorer 6 and Firefox - after every few minutes of editing, check the results in both browsers.

As for the actual page layout/design and site structure - pencil and paper. Sketch layouts, draw diagrams showing how the information flows from one page to another and interlinking, and so on.

One of the most important thing, though is content - a good site can have a very basic layout, but with good content, people will revisit.

[dhall]

Thanks,

I did download Notepad++. I will need to learn it, don't understan all the functions.

[alloydog]

You shouldn't have to worry about anything - as soon as you save the file with the .html or .css extention, the syntax colouring will sort itself out.

I wrote these for another forum:

================================================== ==========

10 minute guide to HTML

"This is a short introduction to writing HTML. What is HTML? It is a special kind of text document that is used by Web browsers to present text and graphics. The text includes markup tags such as <p> to indicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML documents are often refered to as "Web pages". The browser retrieves Web pages from Web servers that thanks to the Internet, can be pretty much anywhere in World."

read on...

Getting started with HTML

================================================== ==========

HOWTO: Teach yourself HTML

This is not a HOWTO for HTML, instead, it is quick guide on how to teach yourself.

When I made my first web page, way back around 1997, the web browser Netscape came with an application called Composer. I used this, but soon noticed it had a few 'characteristics' which I didn't like, for example, it would seem, for no apparent reanson, to add extra linebreaks (<br>) where I didn't want them. So, I started to look at the HTML file with Notepad. I knew nothing about HTML then, but noticed at the end of every line was the (<br>) tag. Where the extra line-breaks were, there were two such tags. I also saw where I had bold text, the text was enclosed in the tags <b>and </b>, and so on.

I then did a web search for HTML specifications and found the W3C home pages.
I printed up the HTML 4.01 specifications and used it to read up on what each of the tags did.

From then on 99% of my web page editing has been done in plain text editors.

Useful applications
Your PC comes will all the necessary tools to create your own web pages. For Windows, these include Notepad, Wordpad and Internet Explorer. However, they are very basic, and in the case of Internet Explorer, not very compliant to the W3C requirements.

You can many applications that make web design much easier, even without having to learn the codes behind the page. These include web page editors where you literally see what the page looks like as you work on it, much using a word-processor, such as AbiWord or Microsoft Word. This method is known as WYSIWYG. There are also enhanced text editors that highlight the code, for example:
<a href="http://www.somewhere.net" title="An example link">Text about link here</a>.

The one's I have listed below are all freely available to download and use:

- Nvu: A graphical web page editor;
- Notepad2: A plain text editor with code high-lighting.
- Firefox: An alternative web browser to Internet Explorer.

Some more are listed here: Free web building tools

Also, either download or bookmark these:
- W3C HTML4.01 specification: The HTML 'rulebook';
- W3C CSS1 specification: The CSS 'rulebook'.

I have not listed any image editors, as there are so many out there, and you can put together a useful web site without graphics.

Teach yourself
The best way to learn something is to do it yourself. The next best way is to look at examples done by others.

Open a plain text file and write "Hello World", then save it as hello_world.HTML.
Now look at it with the web browser.

Use the HTML specifications to read how to make bold text, italics, justify paragraphs and so on.

Also, when you visit web pages, if you see an effect you like, right-click on the page with your mouse and select View page source - this will show the raw HTML code.

These days, using HTML to format and style web pages and discouraged. The preffered methed is to use style sheets, know as CSS. This evolution of HTML is known as XHTML.

In the header of your HTML document, you will tell the browser that the web page is styled using CSS, and you provide a link to the style sheet. Like HTML documents, CSS documents are written in plain, readable text, but have the extention .css, the most common one is style.css.

Style sheets are much better than trying to format everything in HTML. For example, if you use several different fonts, colours and sizes. In HTML, you have to define the font face, colour, size, and so on, every time you change from one style to another.

There are plenty of tutorials and sites to help you, the one considered the best is W3Schools.

The internet is huge place, a library greater than the one at Alexandria *. Use search engines such as alltheweb, Google Yahoo!, to name but a few.

Notes
[table][tr][td]CSS : [/td][td]Cascading Style Sheet[/td][/tr]
[tr][td]HTML : [/td][td]Hypertext Mark-up Language[/td][/tr]
[tr][td]WYSIWYG : [/td][td]What You See Is What You Get[/td][/tr]
[tr][td]W3C : [/td][td]World Wide Web consortium[/td][/tr]
[tr][td]XHTML : [/td][td]Extensible Hypertext Mark-up Language[/td][/tr]
[tr][td]XML : [/td][td]Extensible Mark-up Language[/td][/tr][/table]

* Search for it

[boyleswebdesign]

w3schools.com thats were I learned all the html i no. and its easy!

[dhall]

Thanks for the replies, some very good information. I have been using the
w3schools.com site, lots of info.

[jeverd01]

I would acctually suggest learning xhtml. No sense in learning outdated technology.

[jeverd01]

Firefox devolper toolbar is a good addon when you get into css

[alloydog]

Originally Posted by jeverd01

I would acctually suggest learning xhtml. No sense in learning outdated technology.

True, but XHTML is effectively HTML4, tightened up with CSS added: XHTML 1.

[misho]

I would do the following, in order:
1. Get comfortable with basic HTML.
2. Learn CSS to a point. (I'm still not too comfortable with it, but I know enough to be able to google what I don't know)
3. Learn JavaScript (things like AJAX are becoming popular, so it's likely to be useful)
4. Learn about server-side applications (things through run the Common Gateway Interface (CGI))
5. Learn a programming language that you can use on the server-side.

You can do 2 and 3 simultaneously and should do 4 and 5 simultaneously.

This is very generic, but I think it's a pretty good way to learn web programming.

Also, don't use FrontPage unless you're really in a hurry. It will likely cause more problems than it will solve if you try to do anything advanced with the site.