About Html.

[uptou]

Ive been playing with HTML recently,just for fun,writing some of the text,saving & opening just for fun,but with an idea to possibly design a webpage.I'm not that savy with pc,s,but no reason why i can't learn.

Can you set up a mock fuctioning webpage with notebook,without actually putting it on the web,or is there some site you can practice creating one?

Also what are the best books or educational sources for setting up your own sites using Html,etc,that are beginner freindly to advanced?

Thanks for any help.

[g00dgirl]

Most professionals start designing a site in Photoshop, without any html.

That way you do not restrict your ideas and creativity.

Only later you worry about how to do that design in html code by deciding which parts of your design needs to be an image, and which parts can be background colors, borders, text and tables.

Tables are very important in html code, so that is something you need to learn to get your design right.

You also should look into CSS in addition to html.

I would not recommend using WYSIWYG editors such as Frontpage, because they create bad html code and if you look at that code trying to learn from it it would confuse you.

It is best to only do html in text based editors.

You can practice on your own machine at home, you just save your .html file somewhere and the images that are on the page as well.

Then you open the html file with your browser. To create pages that work in all browsers, you would install all most common browsers and test your pages in all of them.

[uptou]

Thanks for that.

Is photo shop not to hard going,& easy to get going on for a complete beginner?

I may get a copy of "for dummies".

[Tywais]

If you do a search for >free web templates< you will find a lot of examples that you can download and modify. I find this a quick way to pick up on how it works. Also, many html tutorials available.

[Cuban]

Very easy

[g00dgirl]

Yes photoshop you also need to learn, especially working with layers to work efficiently. It is best done by observing someone else working, looking over their shoulders.

What Tywais said I can agree with, it is also very good to get a template and try to modify it by editing the code. If you are not sure where to find something in the code, then do a Ctrl+F search for it, and if you are not sure that you are editing the right part of the code, put some text in the code, save, reload the page and look where on the page it appears.

It would be important that the template is well coded and that the code is formatted so that it is easy to follow it, to read it, comments in the code will help you a lot, too, so try to find code with many comments. Also for the start try to find templates that do not include database programming like PHP, but only html templates.

Edited April 12, 2008 by g00dgirl

[uptou]

Thanks again.It seems quite easy to learn what the tags mean,eg </p>,close paragragh,but learning in what order to put the instructions,seems

another matter .I'll try the modifying the free templates to learn more.

Edited April 12, 2008 by uptou

[RKASA]

I learned html using frontpage and agree its better to not use WYSIWYG editors and learn it right to start.  De bugging is a lot easier if you really know the code.  In place of photo shop which still cost money if they haven't changed.  You can use gimp in both windows version or linux its free and does all the same stuff layers etc.  I know someone will jump its only 8 bit. true and no one can tell, plus the next release is going 16 bit  Google meet the gimp and you find a web site that teachs the use with up to 47 mp4 lessons on its use.  Also pick up some java.  Well that will keep you off the street for a few years

[Tywais]

It was quite a few years ago when I first started writing web pages. At that time there were no WYSIWYG editors and it was done with text editors, in my case vi under UNIX. Later, HTML editors came out, still not WYSIWYG, but you selected the HTML code by clicking on it from a menu then fill in the text between the tags. Then later, syntax checking, etc. My choice now is DreamWeaver because I really don't have time to hand code my sites now.

This may be useful for you > Web Design - HTML Editors. It covers more then just editors though.

[slackula]

To answer the OPs question: yes.

Make a file with notepad or any other text editor and save it with a .htm or .html suffix; then open the file with your browser. There are certain rules that need to be followed.

Avoid FrontPage or anything else from Microsoft because they do not produce anything remotely standards compliant. Flash only websites also suck IMHO because I am pretty old fashioned and like using text browsers most of the time because I hate avatars and all the rest of the cr&p that AOL and MS have introduced.

And if you wish to include advertisements on your site then please send me the URL of the ad server so I can block it.

Googling for "html lesson"will be your friend unless you are having problems setting up your MySpace page.

[klikster]

Part of the answer to your question would require answers to a few questions. Do you simply want to make a static site for yourself, or start learning how to build websites? Are you looking to build a brochure site, or a complex dynamic application?

If you are looking at a one-time and in the short run, get a WYSIWYG editor (like Dreamweaver) and start fiddling with it. At any time during the coding process, you can switch between "code" and "design" view. The difficulties with using a design only mode, is that you never really learn how to troubleshoot HTML/CSS code.

If you want to take a more serious approach, spend some quality time at http://www.w3schools.com/. They have many tutorials and reference lists. Also, search for tutorials. I often download an entire section and study them offline.

And as @slackula says, you can save the file as .htm (or .html) and open it in any browser. Many HTML editors have built in browsers .. plus the ability to preview your file in external browsers.

If you want to work on a Linux machine, you can get a free download of a WYSIWYG editor patterned after Dreamweaver. It's NVU (http://nvudev.com/index.php) which has versions ported to Windows, Mac and Linux.

As for publishing your site, that involves getting a domain name, hosting company, learning a little about FTP and yelling a lot when you can't connect.

It's all doable .. after all, I learned some of it .. but it's sometimes best to approach the tasks individually.

Edited April 13, 2008 by klikster

[Cuban]

Can you set up a mock fuctioning webpage with notebook,without actually putting it on the web,or is there some site you can practice creating one?

Sorry for my earlier short reply - I was being dragged from the computer. There are places where you can play putting up web sites on the internet that generally will be ignored. Yahoo for example offer 'free' web space for you to up load what ever you want to play with, some restrictions apply, you probably want to avoid anything personal - but if you are just experimenting with text, pictures, and basic interaction at this stage it's perfect. Understanding use of folders to separate images from HTML code seems to be a problem for some websites even now.

Doing this on the internet rather than just on your local hard disk allows you to get to grips with file transfer of the web content from your PC up to the web site. This can be a hurdle first time round but there are small helper applications availible if you do not wish to use command line FTP or a Windows Explorer both of which are fairly straight forward and help you understand what is happening.

[slackula]

Can you set up a mock fuctioning webpage with notebook,without actually putting it on the web,or is there some site you can practice creating one?

Sorry for my earlier short reply - I was being dragged from the computer. There are places where you can play putting up web sites on the internet that generally will be ignored. Yahoo for example offer 'free' web space for you to up load what ever you want to play with, some restrictions apply, you probably want to avoid anything personal - but if you are just experimenting with text, pictures, and basic interaction at this stage it's perfect. Understanding use of folders to separate images from HTML code seems to be a problem for some websites even now.

Doing this on the internet rather than just on your local hard disk allows you to get to grips with file transfer of the web content from your PC up to the web site. This can be a hurdle first time round but there are small helper applications availible if you do not wish to use command line FTP or a Windows Explorer both of which are fairly straight forward and help you understand what is happening.

That reply was probably even less informative than the last one you made in this thread!

[raro]

Have a look at those pages, they helped me a lot:

http://www.pagetutor.com/html_tutor/index.html

http://www.thesitewizard.com/gettingstarte...amweaver1.shtml

[unomi]

Ive been playing with HTML recently,just for fun,writing some of the text,saving & opening just for fun,but with an idea to possibly design a webpage.I'm not that savy with pc,s,but no reason why i can't learn.

Can you set up a mock fuctioning webpage with notebook,without actually putting it on the web,or is there some site you can practice creating one?

Also what are the best books or educational sources for setting up your own sites using Html,etc,that are beginner freindly to advanced?

Thanks for any help.

You can download a webserver to run on your own notebook so you can see exactly how it would behave 'in the wild'.

Check out http://www.wampserver.com/en/ which includes the Apache webserver, PHP engine and the mysql database. This may sound a bit over the top but it is actually very easy to use and would let you progress from basic HTML to PHP powered webdesign in a short time.

Also: http://www.w3schools.com/html/html_intro.asp

I personally wouldnt recommend using WYSIWYG programs like Dreamweaver or GoLive, which would let you 'design' web pages but not really teach you very much about html.

[uptou]

Have a look at those pages, they helped me a lot:

http://www.pagetutor.com/html_tutor/index.html

http://www.thesitewizard.com/gettingstarte...amweaver1.shtml

Cheers for the help people.At the moment i'm just playing with it,plus i dont have any serious laid out subject matter to start a web page as yet.

I wonder if i can pick your brains,as ive been reading through the 1st link suggested by Raro which is good for me.

Say i wanted to use the background on this page http://www.pagetutor.com/html_tutor/fixedbg.html(which is fixed).Can i recreate this background by copying a small section of the background?How would i go about it?

Could i copy a small section of the page via microsoft word,& then save it in the same file with the Notepad document,then when i click on the np document it will automatically grab the fixed background file below?

<body background="parchment.gif" style="background-attachment:fixed">

Thanks all.Hopefully somebody other than i can also benifit from this.

[Tywais]

With Firefox you just put the mouse over the background area and right click and select "View Background Image" then you can right click on the image that comes up and save it to disk.

Example >

Alternative is to use "Save Page As" and the complete page will be saved for you to look at.

[uptou]

As it happens they have firefox here.Just tried it & completed cheers.

[klikster]

Alternative is to use "Save Page As" and the complete page will be saved for you to look at.

That, and making lots of mistakes, is actually how I learned HTML. It is sometimes very difficult to figure out how to get a certain layout or effect unless you see an example.

One thing Dreamweaver is good for, you can open an example page in 'design view', click a section of code, then switch to "code view". The Section will be highlighted and you can see the code tags specific to that feature of the page.

I'm still working on some advanced CSS and I don't design without tables.

[raro]

The design view in Dreamweaver dows not exactly show you what you will see online later. It is actually quite irritating....I upload the page after every change onto the server and look at it in the internet. That way I know what's happening.

My major problem now is to figure how to make the page look good at various resolutions. On smaller resolutions the items on the page are misplaced.

CSS is great, but I still have a rather limited understanding of all the commands.

Anyone for a webdesign workshop? Are there schools outside where I can learn this?

[klikster]

The design view in Dreamweaver dows not exactly show you what you will see online later. It is actually quite irritating....I upload the page after every change onto the server and look at it in the internet. That way I know what's happening.

My major problem now is to figure how to make the page look good at various resolutions. On smaller resolutions the items on the page are misplaced.

CSS is great, but I still have a rather limited understanding of all the commands.

Anyone for a webdesign workshop? Are there schools outside where I can learn this?

Yes, dreamweaver has some foibles. I referenced it because it's easy to locate code snippets .. and has some great tools that have nothing to do with WYSIWYG site creation.

For repetitive tasks, the snippets tool is great. Likewise the "search / replace" feature. I work almost exclusively in code view except when I'm typing an article, etc. It automatically inserts the proper code for "qhotation marks", as one example.

I also use a lot of "includes" for menus, headers and footers, and DW shows those on design view.

To see a page representation in a browser, open your saved file with the browser. You can also configure DW to work with 2 different browsers and view the page by keystrokes [F12] or [Control-F12].

You can set those in Edit>Preferences>Preview in Browser

If you are making .php pages, you need to set up a virtual server on your desktop.

As for learning web design, the links above can take you a long way. Also, hang around the right topics on webmasterworld, sitepoint and digitalpoint. For servers, webhostingtalk.

Edited April 16, 2008 by klikster

[uptou]

If you are not sure where to find something in the code, then do a Ctrl+F search for it, and if you are not sure that you are editing the right part of the code, put some text in the code, save, reload the page and look where on the page it appears.

Hello goodgirl.What do you mean by "look where it appears on the page"?Do you mean the webpage after youve saved the Notepad text?I'm thinking that notepad cannot tell where to insert text,& you have to do the work?

Edited April 17, 2008 by uptou

[Tywais]

Hello goodgirl.What do you mean by "look where it appears on the page"?Do you mean the webpage after youve saved the Notepad text?I'm thinking that notepad cannot tell where to insert text,& you have to do the work?

She is referring to saving the notepad copy then opening it in a browser to see the effect and/or changes you made.

[Tywais]

My major problem now is to figure how to make the page look good at various resolutions. On smaller resolutions the items on the page are misplaced.

CSS is great, but I still have a rather limited understanding of all the commands.

One technique I use is to set the page width to 100% and not use pixels. It will adjust itself automatically to the screen size. And also I fine tune it in a smaller screen size then test in higher resolutions. And CSS will help here by setting your font size/definitions in a central file so they look the same across different resolutions. I have a css file just for different font sizes and effects.

It can be a major juggling act to get it right. I use at least three browsers and three resolutions in each to fully test my site.

[raro]

Thanks for this advise. I use a fix pixel width for the left column where the navigation menu is and for the main content 80%. Will try the 100% option and report back.