Help getting started

Discussion in 'Web Design' started by dhall, Aug 16, 2007.

to remove all ads.
  1. dhall

    dhall New Member

    Messages:
    4
    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
     
  2. alloydog

    alloydog New Member

    Messages:
    36
    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.
     
  3. dhall

    dhall New Member

    Messages:
    4
    Thanks,

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

    alloydog New Member

    Messages:
    36
    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 ;)
     
    Last edited: Aug 16, 2007
  5. boyleswebdesign

    boyleswebdesign New Member

    Messages:
    49
    w3schools.com thats were I learned all the html i no. and its easy!
     
  6. dhall

    dhall New Member

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

    jeverd01 New Member

    Messages:
    19
    I would acctually suggest learning xhtml. No sense in learning outdated technology.
     
  8. jeverd01

    jeverd01 New Member

    Messages:
    19
    Firefox devolper toolbar is a good addon when you get into css
     
  9. alloydog

    alloydog New Member

    Messages:
    36
    True, but XHTML is effectively HTML4, tightened up with CSS added: XHTML 1.
     
  10. misho

    misho New Member

    Messages:
    11
    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.
     
  11. dhall

    dhall New Member

    Messages:
    4
    Thanks for your replies,

    I bought the book " Head First HTML with CSS & XHTML. I also bought and downloaded a video, "Web-design 1" from Killersites.com.

    Between the two, I am getting a good foundation, I think.

    Darryl
     
  12. riley454

    riley454 New Member

    Messages:
    23
    Through some of this forum's happy members, I was initially put onto the "Head First" book which is possibly the best outlay you can make if you seriously want to learn "proper" coding. Solely purchasing design software and filling in the gaps will help you build sites, but learning how to fix bugs by understanding proper coding will completely minimise site/browser problems.
     
  13. webmania

    webmania New Member

    Messages:
    1
    xhtml

    I suggest you learn xhtml to be up to date with the new specifications on the web. get yourself some of the sams teach yourself collection on web design. they have good books.
    Good luck !
     
  14. Scoobs

    Scoobs New Member

    Messages:
    1
    i used www.tizag.com to get started. i think it is very helpful.
     
    Last edited: Sep 5, 2007
  15. zkiller

    zkiller Super Moderator Staff Member

    Messages:
    1,639
    not really. xhtml, applies the more strict rules of xml to html. i don't know why you think css is added. css has nothing to do with anything here. css works equally well with html 4 and xhtml, as it is a separate technology, much like javascript. html is for content, css is for presentation and javascript for behavior.
     

Share This Page