SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member Maidment78's Avatar
    Join Date
    Dec 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Total Newbie! - Help Needed on Basic code

    Morning,

    I have just started to play with coding as I want to make my own website and I have only managed to get to chapter 2 before I got stuck so not too great there!

    Basically I have two issues but they seem to be similar in what is happening.

    I tried to place an image on a web page (told you this was basic stuff) and the code was the example from the book and all was going well until I added

    <p><img src="divers-circle.jpg" width="200" height="162"
    alt="A circle of divers practice their skills" /></p>


    the full code page now looks like this
    Code:
    	<head>
    		<title>Bubble Under – The diving club for the south-west UK.</title>
    		<meta http-equiv="Content-Type"
    			content="text/html; charet=utf-8 />
    	</head>
    	<body>
    		<h1>BubbleUnder***</h1>
    		<p>Diving club for the south-west UK — let’s make a splash!</p>
    		<h2>Welcome to our super-dooper Scuba site</h2>
    		<p><img src="divers-circle.jpg" width="200" height="162"
    			alt="A circle of divers practice their skills" /></p>
    		<p>Glad you could drop in and share some air with us! You've
    			passed your underwater navigation skills and successfully
    			found your way to the start point - or in this case, our
    			home page.</p>
    		<h3>About Us</h3>
    		<p>Bubble Under is a group of diving enthusiasts based in the 
    			south-west UK who meet up for diving trips in the summer 
    			months when the weather is good and the bacon rolls are flowing. 
    			We arrange weekends away as small groups to cut the costs of 
    			accommodation and travel, and to ensure that everyone gets 
    			a trustworthy dive buddy.</p>
    		<p2>Although we’re based in the south-west, we don’t stay on our own 
    			turf: past diving weekends have included trips up to Scapa Flow 
    			in Scotland and to Malta’s numerous wreck sites.</p2>
    		<p3>When we’re not diving, we often meet up in a local pub to talk about 
    			our recent adventures (any excuse, eh?).</p3>
    		<h3>Contact Us</h3>
    		<p>To find out more, contact Club Secretary Bob Dobalina
    			on 01793 641207 </p>
    	</body>
    </html>
    but when I run this in the broser all that happens is I lose all the text above where the code for inserting the jpeg starts, any ideas what I have done, or not done?

    Before

    BubbleUnder

    Diving club for the south-west UK — let’s make a splash!
    Welcome to our super-dooper Scuba site

    Glad you could drop in and share some air with us! You've passed your underwater navigation skills and successfully found your way to the start point - or in this case, our home page.
    About Us

    Bubble Under is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs of accommodation and travel, and to ensure that everyone gets a trustworthy dive buddy.
    Although we’re based in the south-west, we don’t stay on our own turf: past diving weekends have included trips up to Scapa Flow in Scotland and to Malta’s numerous wreck sites. When we’re not diving, we often meet up in a local pub to talk about our recent adventures (any excuse, eh?).
    Contact Us

    To find out more, contact Club Secretary Bob Dobalina on 01793 641207

    After

    Glad you could drop in and share some air with us! You've passed your underwater navigation skills and successfully found your way to the start point - or in this case, our home page.
    About Us

    Bubble Under is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs of accommodation and travel, and to ensure that everyone gets a trustworthy dive buddy.
    Although we’re based in the south-west, we don’t stay on our own turf: past diving weekends have included trips up to Scapa Flow in Scotland and to Malta’s numerous wreck sites. When we’re not diving, we often meet up in a local pub to talk about our recent adventures (any excuse, eh?).
    Contact Us

    To find out more, contact Club Secretary Bob Dobalina on 01793 641207

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi and welcome to SitePoint Forums,

    The problem you have is a tiny weeny thing and it is not to do with the image!
    The problem is in the DOCTYPE line:
    Code:
    <meta http-equiv="Content-Type"
    			content="text/html; charet=utf-8 />
    and specifically the " quotes.
    There is one missing after the utf-8

    Code:
    <meta http-equiv="Content-Type"
    			content="text/html; charet=utf-8" />
    Try that.
    Spike
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,501
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    First of all, welcome to SP

    Second, html questions should be posted in the html forum: http://www.sitepoint.com/forums/forumdisplay.php?f=52
    Don't repost there, I'm sure someone will move it for you

    Third, please use the code tags when you post code, it makes it so much easier to read:
    HTML Code:
    <head>
    <title>Bubble Under – The diving club for the south-west UK.</title>
    <meta http-equiv="Content-Type"
    content="text/html; charet=utf-8 />
    </head>
    <body>
    <h1>BubbleUnder***</h1>
    <p>Diving club for the south-west UK — let’s make a splash!</p>
    <h2>Welcome to our super-dooper Scuba site</h2>
    <p><img src="divers-circle.jpg" width="200" height="162"
    alt="A circle of divers practice their skills" /></p>
    <p>Glad you could drop in and share some air with us! You've
    passed your underwater navigation skills and successfully
    found your way to the start point - or in this case, our
    home page.</p>
    <h3>About Us</h3>
    <p>Bubble Under is a group of diving enthusiasts based in the
    south-west UK who meet up for diving trips in the summer
    months when the weather is good and the bacon rolls are flowing.
    We arrange weekends away as small groups to cut the costs of
    accommodation and travel, and to ensure that everyone gets
    a trustworthy dive buddy.</p>
    <p2>Although we’re based in the south-west, we don’t stay on our own
    turf: past diving weekends have included trips up to Scapa Flow
    in Scotland and to Malta’s numerous wreck sites.</p2>
    <p3>When we’re not diving, we often meet up in a local pub to talk about
    our recent adventures (any excuse, eh?).</p3>
    <h3>Contact Us</h3>
    <p>To find out more, contact Club Secretary Bob Dobalina
    on 01793 641207 </p>
    </body>
    </html>
    And last but not least: there is a line break after height="162". I don't know if that's the problem, but try and take it away. For the rest, the code seems ok to me.
    HTML Code:
    <p><img src="divers-circle.jpg" width="200" height="162" alt="A circle of divers practice their skills" /></p>

  4. #4
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,501
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by spikeZ View Post
    Hi and welcome to SitePoint Forums,

    The problem you have is a tiny weeny thing and it is not to do with the image!
    The problem is in the DOCTYPE line:
    Code:
    <meta http-equiv="Content-Type"
    			content="text/html; charet=utf-8 />
    and specifically the " quotes.
    There is one missing after the utf-8

    Code:
    <meta http-equiv="Content-Type"
    			content="text/html; charet=utf-8" />
    Try that.
    Spike
    Moved even before I posted!
    And I missed that missing quote. Good one, spike

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    LOL!

    Interesting thing with the line break inside a tag, it makes no difference to the actual code but breaks the visual code flow imho.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  6. #6
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,501
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    It also confuses this forum's parser

  7. #7
    SitePoint Member Maidment78's Avatar
    Join Date
    Dec 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this, I have to say that was a fast response. I have just done as per the above but point to note, I had added some div tags before I read your reply and for some reason after these were added the image was displayed.

    I am sure there is a good reason for this but I am going with gremlins for now until I start to know what I am doing,,

    Thanks again, I am sure I will be back before long!

  8. #8
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    The reason is that the quotes mismatch was corrected to a point where normal HTML could be output.

    ...that made sense in my head at least!!!!

    OK, what I mean is:

    the doctype is not a 'visible' tag like a div or an image which outputs something to the page. So, you start the doctype but leave the last " off so the browser carries on going until it finds what it thinks is the closing/matching " - which in this case is in the image tag.

    So in your code, the browser sees everything in the code box below as the doctype content and MUST NOT be output to screen.

    Code:
    			content="text/html; charet=utf-8 />
    	</head>
    	<body>
    		<h1>BubbleUnder***</h1>
    		<p>Diving club for the south-west UK — let’s make a splash!</p>
    		<h2>Welcome to our super-dooper Scuba site</h2>
    		<p><img src="
    Adding the DIV tags gives the browser it's matching " earlier and so the rest of the code is properly displayed.

    HTH and it's always tricky at first!

    Spike
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •