1. Some members were not receiving emails sent from XJbikes.com. For example: "Forgot your password?" function to reset your password would not send email to some members. I believe this has been resolved now. Please use "Contact Us" form (see page footer link) if you still have email issues. SnoSheriff

    Hello Guest. You have limited privileges and you can't "SEARCH" the forums. Please "Log In" or "Sign Up" for additional functionality. Click HERE to proceed.

OT: HTML

Discussion in 'Hangout Lounge' started by woot, Mar 23, 2006.

  1. woot

    woot Active Member

    Messages:
    1,244
    Likes Received:
    3
    Trophy Points:
    38
    Location:
    <a href="http://maps.google.com/maps?q=44.777479+-
    Alright - the preamble. I am self confessed computer geek. I do know the standards that webpages should be written to and I use them frequently... I will not follow the standard in this because this way is easier to learn and is needed background before I can meaningfully talk about the standards.

    When I create webpages I use a plain text editor and so should you. :) Something like notepad is ALL you need. Using something like FrontPage or Dreamweaver is nice but there are a number of problems - you don't know what it is doing, it doesn't do it properly, and it's just witch craft for most users. Start from the beginning and get an understanding - if you do't agree with me after that use frontpage and I'll not argue.

    What is HTML? HTML stands for hyper text markup language. Simply put it's a way to make plain old type written text do more than just be text. You can stick pictures in, make links to other webpages, make the text change colour or size... pretty much anything you want to do.

    Where to start... open notepad and you will be faced by a webpage designers nightmare and dream - a blank page. Start things off and save it - save it AS test.html

    Leave notepad open, but browse to the file and you'll see a webpage icon instead of a text icon - click it and it'll open in (most likely) internet explorer... a completely empty page - nothing!

    Back to notepad - the lesson begins. The code won't work here so you'll have to past it into your webpage.

    The first thing you need to know is that in html if you want to tell it to do something you have to give it something to do. Anything you put between braces < > it thinks is a command - if it knows what to do with the command it does something to the page when it is viewed.

    For example. If I wanted to make something bold I'd tell it to make it bold

    Code:
    <b>This text is bold </b> and this text is not.
    Anything after the first B is bold until I tell it to stop being bold by saying /B

    That's the way html works.

    Code:
    <html>

<head>
<title>This is the title of my first webpage</title>
</head>

<body>

This is the first sentance I've typed in my first webpage

</body>
</html>
    That's a big chunk. The very first line says - html. That tells the webbrowser the stuff that is coming is in html. It tells the browser to read it and use the codes to make the page look the way you want it to look.

    The next section is called the head. In the head we can tell it what the title of this webpage is going to be. To make a title just say title. :)

    After we've close the title tag by saying /title we close the /head tag.

    Now - the body is, you guessed it, where we'll do the interesting stuff... this is where all the words and pictures go.

    In this case I just said something trivial.

    When we're all done we close the body and close the html by saying /body and /html.

    What do we notice? All of the tags so far have come in pairs. If we start doing something it keeps assuming it's doing it until we say to stop. We said bold and it stayed bold until we said not bold. All of the tags make sense once you think about it - the page title tag is title. Bold is B. I bet you can guess what italic would be... that's right I.

    Lets save this and go back to internet explorer for a moment. If you refresh the page you should see:

    "This is the first sentance I've typed in my first webpage"



    So what comes next. Text formatting.


    When you right in the body the text just wraps to fit inside of the webpage. Where you hit enter in notepad doesn't matter as in the webpage you won't see it. Test this out if you want. Type one word, hit enter a bunch of times and this then type another word. If you save it and look at it again your two words will be on the same line... why is that?

    Well - to make things difficult it ignores you hitting enter. To start a new line type
    Code:
    <br>
    ... this is one of those exceptons to the pairs of tags - this is a one hit wonder - each time you type it you got down a line. To put 5 lines of blank space type it in 5 times! :)




    What about capter type headings? Often the very first line of a webpage I make Heading 1. All of the sub paragraphs I might announce with a smaller heading - maybe heading 2... smaller ones? how about heading 3.

    How'd I make a heading?

    Code:
    <h1>This is your first heading</h1>


    Alright - so this is supposed to be so you can do a how-do-I-do-this-to-my-bike page so you'll need pictures.

    All you have to do is tell it where the picture is.

    Code:
    <img src = "picturesname.jpg">
    This is another of those exceptions ( like the line break <br> I mentioned before.... there is no close image tag - it's a one shot deal.

    That is the simple version - but there are extra's you can tag onto the img tag to tell it to do more... like set the height of the picture (in pixels)

    Code:
    <img src = "picturesname.jpg" HEIGHT=200 WIDTH=400>
    Toy with those sizes - you can make the image different shapes and sizes to suit your needs. Remember that this is the web so keep things small for the people on dial up.



    And finally the link. The most important thing! This is the whole point of the web - to be able to refer to someone else (and so they can refer to you!)

    to make a link you need to know the address of the document you want to refer to. It has to be available on the internet. I say document because you can link to anything - typically it is a webpage but it could be an image, a movie or an email address for example.

    Code:
    <a href = "http://www.google.ca"> This is a link to google </a>
    The first part says this is an Anchour. It is a reference and that reference is to http://www.google.ca. The HTTP:// part is important - that tells it the reference is to another webserver - a place with webpages.

    Then we say something - this is the text that gets underlined in the link - it'll keep underlining the text until we tell it to stop that by saying
    Code:
    </a>


    I'll stop there - but with those 10 or so comands you can easily create a webpage that has pictures, links and text. It might be plain but at least it doesn't have those GOD AWFUL flashing scrolling text in neon colours!

    A revision or another post to follow if there is interest.
     
    woot, Mar 23, 2006
    #1
  2. Speedwagon

    Speedwagon Member

    Messages:
    109
    Likes Received:
    0
    Trophy Points:
    16
    Location:
    Littleton, CO
    Was this a request, or are you just posting this for S&G? Either way, good job.

    Shameless plug: The guys over at the Opera browser community forums are always happy to help people code a page properly. I've been using Opera for a few years now, and it is a wonderful browser, that supports standards. Not MS standards, real standards.

    Don't know much about Firefox, but I do know Opera has support for those who want it, when it comes to developing web pages.
     
    Speedwagon, Mar 23, 2006
    #2
  3. woot

    woot Active Member

    Messages:
    1,244
    Likes Received:
    3
    Trophy Points:
    38
    Location:
    <a href="http://maps.google.com/maps?q=44.777479+-
    I did spend alot of time learning the standards and still spend time trying to keep up with the standards... they are done for a reason - but on the other hand when you try to start from the beginning it's difficult to explain the perfect way when the old slightly non-standard way will work for them... for instance Bold should have been done in CSS and I should have wrapped bold text in a span or perhaps a div depending on what I was doing.

    I'd be happy at some point to sit down and explain why we do things a different way... that is interesting and it is important when making a full on webpage. Sadly most commercial places are terrible at following the standards - there are very few companies that have a nice looking webpage that they've created following these standards. It costs at least double to do it right the first time (maintance is cheaper but try argue that on a quote)

    So that is the S&G's version that wasn't really asked for but I mentioned I would do if there was a hint of interest... there really wasn't much interest but I had 15 minutes so I wrote it ;)


    All of the code above will work in any browser -- even lynx (my favorite)... :)
     
    woot, Mar 24, 2006
    #3
  4. Robert

    Robert Active Member

    Messages:
    7,479
    Likes Received:
    9
    Trophy Points:
    38
    Location:
    Ventura CA
    I was lucky to get a C- in all three of my programming classes. As one of my instructors said "You are either wired to be a programmer or you are not, there is no in-between". This was his explaination as to why I had such a difficult time with it all (took basic twice). I liked VB but never had any interest in using any of it. I took to PLCC programming quickly however, strange. It made sense. So does Boolean logic (I love math). Go figure. I understood only half of what you said in your last post. Not from lack of trying on your part however, so don't worry Woot. I'll keep trying.
     
    Robert, Mar 24, 2006
    #4
  5. geebake

    geebake Member

    Messages:
    381
    Likes Received:
    0
    Trophy Points:
    16
    Location:
    Audubon, NJ
    I think your instructor was correct. I happen to be a programmer by profession and I've known a lot of very smart people who just couldn't get the knack for it.

    I think the real key to programming is the ability to break down a process to smaller and smaller pieces. When presented with a big task, I still sit down and write a reasonably good flow chart. It's often impossible to wrap your mind around an entire thing and that abilty to be able to see it in pieces eludes a lot of people.

    I used to think that some skills related to others. I've always been very good at picking up foreign languages and I thought that somehow that might be related to being able to pick up programming languages. I don't think that any more. I sat down once and really thought about how each work. I tend to look at spoken languages in a very mathematical sense. To me, a sentence is very much like an equation where all of the various parts have to agree. Once I understand the rules, it's just a matter of filling in the vocabulary. Programming isn't like that. While math skills are definitely very important, it's more of a basic logic flow kind of thing. As I mentioned earlier, I feel it's the ability to look at a system and break it down to it's most fundamental pieces.

    I think motorcycle manitenance is actually similar in a lot of ways. There are tons of folks who just wouldn't consider taking some things apart. And, if they did, the parts wouldn't make sense to them anyway. Some people just have an uncanny ability to look at mechanical systems and understand how they work. I wish I were one of them. I can hold my own, but I guess wrong as often as I guess right!

    Greg
     
    geebake, Mar 24, 2006
    #5
  6. RyanfromOhio

    RyanfromOhio Member

    Messages:
    151
    Likes Received:
    0
    Trophy Points:
    16
    Location:
    Toledo Ohio
    wow thats a lot of information...

    With all the new fangled stuff now days seems like html is a dinosaur.

    When I do pages I still use it though. I have done a few in Flash via "swish" but its kinda hard to do. Im a "utility" type person, so it has to work and be logical in design.

    Ive used Front Page some time ago, maybe about 2000ish?

    The last few years Ive been using a webpage designer called "coffeecup" and in all honesty Im amazed by it. Its easy to use but not as dumbed-down as Front Page. You can always easily view/edit HTML. THen you can even preview the page :)

    If you can do the page all in your own editor like notebook more power to you.

    If you cant, there is always coffeecup!
     
    RyanfromOhio, Mar 24, 2006
    #6
  7. woot

    woot Active Member

    Messages:
    1,244
    Likes Received:
    3
    Trophy Points:
    38
    Location:
    <a href="http://maps.google.com/maps?q=44.777479+-
    Well - html is and it isn't. Technically the new flavour is xhtml - or extendable html. The idea is to make it more standardized, seperate presentation from content... this makes it easier to change the presentation on the fly for palm devices, brail or voice browsers... text browsers.

    A long story short - many places went to make their webpages really graphical thinking of you and I at our desks. The problem comes in when you change that - what about everyone else?

    Coffeecup sounds good - Anything to make it easier to do... I still teach from the foundations in raw text... work up from there; but I'm a bit of a hold over ;)

    Ah dear - I'm getting into something I could talk too long about... :) I'll try to get back to listening
     
    woot, Mar 24, 2006
    #7
  8. SnoSheriff

    SnoSheriff Site Owner Staff Member Administrator

    Messages:
    20,740
    Likes Received:
    111
    Trophy Points:
    63
    Location:
    MB, CAN
    WOW, I had no idea there were so many geeks here 8O. Very interesting indeed 8O :p. I just may have to make a geek forum or something :lol: :lol: :lol:
     
    SnoSheriff, Mar 24, 2006
    #8
  9. Speedwagon

    Speedwagon Member

    Messages:
    109
    Likes Received:
    0
    Trophy Points:
    16
    Location:
    Littleton, CO
    I've used Coffeecup. That program is awesome! And you can use visual or text editor in it.
     
    Speedwagon, Mar 25, 2006
    #9
  10. woot

    woot Active Member

    Messages:
    1,244
    Likes Received:
    3
    Trophy Points:
    38
    Location:
    <a href="http://maps.google.com/maps?q=44.777479+-
    SnoSheriff- I didn't know where to post this so I put it here. I don't think we need any more sections though... :) Otherwise I, and maybe others, will get lost and miss topics.

    That and do you really want to promote people like us going off topic? :D
     
    woot, Mar 25, 2006
    #10
  11. woolsac

    woolsac Member

    Messages:
    63
    Likes Received:
    2
    Trophy Points:
    6
    Location:
    Sparta, NJ
    NetObjects Fusion is the way to go. It is a great creator that provides you with WYSIWYG interface.
     
    woolsac, Mar 25, 2006
    #11
  12. Hired_Goon

    Hired_Goon Member

    Messages:
    619
    Likes Received:
    3
    Trophy Points:
    18
    Location:
    Oz
    I tryed Coffecup once but I dumped it as I get too many emails from them promoting the next version.

    Used frontpage and many other wysywig programs over the years but now I use a program called nvu.

    I'm lazy and prefer the wysywig approach due to the ease of formatting but usually end up in text html to tidy up.

    Got to agree with Roberts instructor. Unfortunately not enough instructors have the same insight. There are many people programming these days that know the language and principles but still miss the logic required to problem solve the problems that crop up.

    Bike mechanics is just like programming. If you can understand the logic of the problem then half the problem is solved. The rest is just applying the logic to fix the problem.

    And a test of logic for the budding programmers......

    one + one = four
    Why?



    Because one = 2 :wink:


    Top marks on the beginners tutorial woot. :)
     
    Hired_Goon, Mar 25, 2006
    #12
  13. woot

    woot Active Member

    Messages:
    1,244
    Likes Received:
    3
    Trophy Points:
    38
    Location:
    <a href="http://maps.google.com/maps?q=44.777479+-
    We used to have problems with the one + one business... using the wrong operator equals you could set the value of one to something other than one... it was particularily horrible if you put in tricks like

    for i = 0; i < 10; i+= 1{
    result += i;
    }

    Which would count by two's to ten and give you 0+2+4+6+8 = 20 - because it was counting by 2 not 1. Very sneaky way to make sure you kept the maintance contract. ;)

    I think you made an excellent point. Programming isn't particularily difficult - what you have to be able to do is think of the problem in small parts and solve the smaller problems logically. If you can't seperate the problem into solveable chunks then you're stuck and probably won't solve the problem... and I think that applies to just about everying.

    To use your example - motorcycle maintance is very similar... solve it step by step logically. To be able to do that you have to familiarize yourself with the bike...

    For web programming I start from the beginning... notepad. If you can understand what is going on under the hood then it gets very easy to get it done. But I come at it from a very different angle then most - I'm trying to be good at it, it has importance to me in terms of my career and my side hobbies. Most people don't need to have that kind of understanding of it and the WYSIWYG (what you see is what you get) programs work for these people.

    Sounds to me you know what is going on under the hood - but you use a better tool to do it than notepad... and that I think is where most people should aim for. You can think about the problem logically but not waste time in the semantics.

    Thanks for the comments, if anyone is interested in continuing a web lecture series I'm game... I'm sure we have other people here that are in the position to teach us something too... everyone brings unique talents and skills to the table. :)
     
    woot, Mar 25, 2006
    #13

Share This Page