Searching tutorial on html editing to build website

[satimis]

Hi folks,

I haven't built webpage for >10 years. I'm prepared coming back. Previously I ran software on MS Windows building website. Now I'll change my way doing html editing on simple text-editor instead.

Googling brought me hundred of links on guides building webpage on html, difficult for me to screen. Can folks on forum shed me some light. I expect to have a guide, step by step, to build webpage with examples to illustrate. TIA

B.R.
satimis

[DangerDev]

Hi
For you some suggestion:
-Its nice to use editor try notepad++, its realy nice
-Learn HTML, CSS, JavaScript and any one server side scripting language.
-see tutorials in daniweb.
-see w3school, its nice.
-its better if you read some basic book for mentioned subjects.

Hope this will help you.

[kingvjack]

Steve's HTML

This is just a simple example of HTML layout.... you can visit a variety of sites that include filler tags that you can include in the body to bring your pages to life.... Then add CSS for more life!!!!

[txwebdesign]

With so many WSYWIG editors out there, why would you ever want to hardcode unless you're just after the learning experience...or pain! LOL

Whatever the reason, do a search on google (or your fav search engine) for "hardcoding HTML" or any combo or variations of the words "hardcode" and HTML.

Here's a graphical site that will take you from the basics to CSS and Javascripting.

http://susanlucas.com/HTML/start.html

Outside that there are tons and tons of sites with plenty of code samples but the one of choice, which DangerDev alluded to already is http://w3schools.com/

[satimis]

Hi For you some suggestion: -Its nice to use editor try notepad++, its realy nice -Learn HTML, CSS, JavaScript and any one server side scripting language. -see tutorials in daniweb. -see w3school, its nice. -its better if you read some basic book for mentioned subjects.

Hope this will help you.

Noted with thanks

satimis

[satimis]

I use notepad as my editor and then keep a list of sites that have tags with them... So just google HTML Tags you can build whatever you want....

Thanks for your advice that is what I need "google HTML Tags", the searching criteria, instead of searching "html editor". I further found another good teaching material is on browser;

View --> Page Source

Of course, it needs a little effort sorting out the codes there.

B.R.
satimis

[satimis]

Hi txwebdesign,

Thanks for your advice.

With so many WSYWIG editors out there, why would you ever want to hardcode unless you're just after the learning experience...or pain! LOL

>10 years ago I ran WSYWIG editors building webpage, easy and comfortable. After turning to server building and admin I ceased building webpage. This time I come back and I want to start on basic rather than WSYWIG editors which actually is the frontend. The backend is still coding.Whatever the reason, do a search on google (or your fav search engine) for "hardcoding HTML" or any combo or variations of the words "hardcode" and HTML.
Thanks for your searching criteria. I was googling on "html editor" which brought me tons of articles.Here's a graphical site that will take you from the basics to CSS and Javascripting.

http://susanlucas.com/HTML/start.html

Outside that there are tons and tons of sites with plenty of code samples but the one of choice, which DangerDev alluded to already is http://w3schools.com/
Thanks for your URL.

I'll start on HTML first building some simple/basic webpages on server and/or BI technologies, etc.. I don't need complicate nor fashionable webpage.

I almost forgot java and pearl. I'll come back to java later. I think it needs swing on building webpage? Any advice on the respect? TIA.

B.R.
satimis

[kingvjack]

WYSIWYG development is a cool tool.... Learning to actually sit down and edit your code is essential to understanding and debugging problems that may arise in the future.
I created a whole series of pages using Dreamweaver when I first started out but found that different browsers, and different settings or whatnot displayed things alot differently than what I wanted, plus, sometimes I would get carried away in Jazz and tricks, the pages looked cool I thought, but sucked for the user...
I now just code using Notepad or Wordpad, keep it simple and post away. Hardcoding isn't difficult, it just takes the time to understand what your looking at... sorta like learning a more developed language... Like C.

[kingvjack]

Thanks for your advice that is what I need "google HTML Tags", the searching criteria, instead of searching "html editor". I further found another good teaching material is on browser;

View --> Page Source

Of course, it needs a little effort sorting out the codes there.

B.R. satimis

Cheating with Visual Basic...

If you own a copy of Visual Basic... Steal the code from a page and copy /paste into VB. It will sort all of your tags so you can see where your lines begin and end rather than trying to go behind your self and add spaces and /nl to the code to better understand it.

[satimis]

... I now just code using Notepad or Wordpad, keep it simple and post away. Hardcoding isn't difficult, it just takes the time to understand what your looking at... sorta like learning a more developed language... Like C.

Agree. In less than half hour I already have my webpage ready on a simple text editor. It is a simple/single page website without graphics. I'm now going adding some simple graphic icons and background.

B.R.
satimis

[satimis]

Cheating with Visual Basic...

If you own a copy of Visual Basic... Steal the code from a page and copy /paste into VB. It will sort all of your tags so you can see where your lines begin and end rather than trying to go behind your self and add spaces and /nl to the code to better understand it.

Interesting!!!

Unfortunately I don't own a copy of Visual Basic. Neither I have Windows PC here, all Unix and Linux PCs. Maybe I can find the solution on Open Source. Can you advise what criteria to be used for googling? Changing source code to html tags? TIA

B.R.
satimis

[MattEvans]

I think kingvjack is saying that VB will automatically format and layout code neatly (i.e. indentation, newlines, etc )

On Linux.. Quanta Plus does that, I think. Not sure about any Gnome apps, but any decent HTML/XHTML editor should have this as a feature.

[satimis]

I think kingvjack is saying that VB will automatically format and layout code neatly (i.e. indentation, newlines, etc )

On Linux.. Quanta Plus does that, I think. Not sure about any Gnome apps, but any decent HTML/XHTML editor should have this as a feature.

Thanks for your advice.

I'm replying your posting on Ubuntu server with only a light weight desktop, Fluxbox, running. Neither I have Gnome installed. However "apt-cache" found "quanta 4:3.5" on repo. I'll get an Ubuntu workstation to install this package.

Ah, I recall I have an Archlinux box here with "bluefish", the html editor, installed. I'll check whether it has this feature.

B.R.
satimis

[MattEvans]

You can also use a commonly available command-line program called 'tidy' ( thats also the command name ) to automatically layout an HTML file.. but, read the 'tidy' documentation first; because its also an error-fixer, and can thus be quite invasive..

[satimis]

You can also use a commonly available command-line program called 'tidy' ( thats also the command name ) to automatically layout an HTML file.. but, read the 'tidy' documentation first; because its also an error-fixer, and can thus be quite invasive..

I'm running a light-weight text editor, leafpad, on Ubuntu server. It works for me for html editing to build webpage.

What I need is a package which can read "page source" easily. On browser, clicking View --> Page Source, I can view the codes. But it is NOT easy to read w/o copying the same on a text editor and rearranging them. I expect to read the tags/code directly on a package w/o further treatment.

Re "tidy", I found follows on googling;
Clean up your Web pages with HTML TIDY http://www.w3.org/People/Raggett/tidy/

HTML Tidy Library Project
http://tidy.sourceforge.net/

Tidy online - HTML Tidy
http://infohound.net/tidy/

PHP: tidy - Manual
Tidy Functions
http://hk2.php.net/tidy

It is available on Ubuntu repo.
$ apt-cache policy tidy
tidy:
Installed: (none)
Candidate: 20051018-1
Version table:
20051018-1 0
500 http://us.archive.ubuntu.com feisty/main Packages
* end *

B.R.
satimis

[MattEvans]

The first link is the 'tidy' I'm talking about.

To use it would be a case of:

- Open page in browser
- View > Source
- Select All
- Copy
- Open Editor
- Paste
- Save as thefile.html
- Go to cmd line
- Run tidy -im thefile.html
- Reopen thefile.html in editor
- Examine.

Seems long.. but not really. Bluefish has tidy integrated as a plugin, but, you'd need to configure it to enable the indent option ( it's off by default )

'tidy' is listed by my package manager ( urpmi for Mandriva, offical repos ).

[tabassumraza]

It will helpful to visit E Learning Centre's website for learning html easily

[satimis]

The first link is the 'tidy' I'm talking about.

To use it would be a case of:

- Open page in browser - View > Source - Select All - Copy - Open Editor - Paste - Save as thefile.html - Go to cmd line - Run tidy -im thefile.html - Reopen thefile.html in editor - Examine.

Seems long.. but not really. Bluefish has tidy integrated as a plugin, but, you'd need to configure it to enable the indent option ( it's off by default )

'tidy' is listed by my package manager ( urpmi for Mandriva, offical repos ).

Thanks for your advice.

Now I 'm replying your positing on "Ubuntu 7.10" workstation. It is no good to do web design and graphic editing. I replied previous postings on Ubuntu 7.10 server.

$ apt-cache search tidy | grep tidy

csstidy - CSS parser and optimiser
libexporter-tidy-perl - Another way of exporting symbols
libtidy-ruby - Ruby interface to HTML Tidy Library
libtidy-ruby1.8 - Ruby interface to HTML Tidy Library
perltidy - Perl script indenter and reformatter
python-elementtidy - An HTML tree builder for ElementTree based on Tidy
python-utidylib - Python wrapper for TidyLib
tidy-doc - HTML syntax checker and reformatter documentation
tidy-proxy - A small http proxy which tidies html
php5-tidy - tidy module for php5

Which package/packages shall I install? TIA

I'm prepared doing graphic editing on php rather than going back to GIMP (PhotoShop) as I did previously. I'm interested on coding rather than clicking around on screen with mouse. I have php5, libgd2-xpm, php5-gd, etc packages installed on this workstation. I have no idea whether I need apache2. If needed I'll install it later.

B.R.
satimis

[satimis]

It will helpful to visit E Learning Centre's website for learning html easily

Whether you meant follow; http://www.e-learningcenter.com/free_html_course.htm

and similar sites. Thanks

B.R.
satimis

[satimis]

Hi MattEvans,

I go my problem solved as follow;

Adding following repo on /etc/apt/source.list

deb http://fr.archive.ubuntu.com/ubuntu feisty main

$ sudo apt-get update
$ sudo apt-get install tidy

Done

Following your advice, recreate a "tidyfile.html" file by running "tidy -im ....". Re-open the file. The format there is very clear. Thanks

B.R.
satimis