SitePoint Sponsor

User Tag List

Results 1 to 25 of 32

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to build your own website 2nd edition

    Chapter 2

    I have a copy of build your own website the right way" 2nd edition.

    I am currently going through chapter 2 and have come across a few issues.
    Firstly , the divers pausing in a circle image does not seem to appear on the webapage.
    Secondly i have tried to link the 3 web pages. The home page has all the links on which is , Home, about us and contact us. When I click on about us or contact us it takes me to the right page but the links are longer there.
    Could someone please assist?

    Regards


    Sami

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi Sami Al-Rawi. Welcome to SitePoint.

    the divers pausing in a circle image does not seem to appear on the webapage.
    That means to 'path' to the file is wrong, most likely. You need to make sure the image is stored where you are telling the browser to look for it. Could you describe where the image is stored in relation to the page, and show the code you use to link to it?

    The home page has all the links on which is , Home, about us and contact us. When I click on about us or contact us it takes me to the right page but the links are longer there.
    You'll need to place them on every page.

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello Ralph,
    thanks for your quick response.
    code I used was
    Code:
    <p><img src="drivers-circle.jpg" width="200" height="162"
        alt="A circle of divers practice their skills"/></p>
    I copied the image from archive and saved it in pictures.
    Last edited by molona; Jan 9, 2012 at 03:18. Reason: adding code tags for clarity

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sami Al-Rawi View Post
    I copied the image from archive and saved it in pictures.
    That may be your problem then. By 'saved it in pictures', do you mean a folder called 'pictures'? Because your link is telling the browser to look for the image in the same folder as the page itself. Let's say that your page (index.html) is in a folder called 'my_site', and let's say there's another folder inside that folder called 'pitcures'. Then your src link should be

    Code:
    src="pictures/drivers-circle.jpg"
    That's why I asked where your picture is located in relation to the page that is linking to it. This is a very important question. So could you describe your 'file structure'?

    EDIT: I've just looked at the book. Note that, on page 50, it says to place the image in the same folder as the HTML page. That implies—"don't put it in another folder inside that folder". If you do that, you have to change the link, as I showed above.

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yes I saved in the pictures file. Its not a seperate folder i created, its where all my pictures go . i tried src="pictures/drivers-circle.jpg" but nothing happened. The border of the picture is there wth a red cross in top left corner

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sami Al-Rawi View Post
    Its not a seperate folder i created, its where all my pictures go . i tried src="pictures/drivers-circle.jpg" but nothing happened.
    So where is the pictures folder? Is it in the same folder as the html page? Is its name all lower case letters?

  7. #7
    SitePoint Member
    Join Date
    Feb 2012
    Location
    Charleston, MO 63834
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi Sami Al-Rawi. Welcome to SitePoint.



    That means to 'path' to the file is wrong, most likely. You need to make sure the image is stored where you are telling the browser to look for it. Could you describe where the image is stored in relation to the page, and show the code you use to link to it?



    You'll need to place them on every page.

  8. #8
    SitePoint Member
    Join Date
    Feb 2012
    Location
    Charleston, MO 63834
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would you be so kind to tell me why I can not get picture to display similar to Chapter @ of "Build Your Own Web Site The Right Way Using HTML."

    I have picture fall.jpg in same folder as index file. This is code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Seniors Help Youth Morals Inc.   </title>
    <meta http-equiv= "Content-Type"
    	content="text/html; charterset=utf-8"/>
    </head>
    <body>
    <h1>SeniorsHelpYouthMorals.com</h1>
    <h2>Welcome to our web site to learn how we can improve morals and teach value of a dollar and care for others.</h2>
    <p><ing src="fall.jpg" width="480" height="359"
    alt="Fall grazing"/></p>
    <h3>About us:</h3>
    <p>Help local youth learn morals from semi-retired seniors in local church. Married couple invite seniors 
    and youth after school to first watch a short video about scriptures. Then spend an hour learning from seniors 
    their religious belief and understanding of related scripture.   </p>
    <p>We will prepare a healthy snack and offer it to all. Then we will encourage youth to care for chick we give them
     and plant a row of their favorite locally grown food.</p>
    <h2>Safety:</h2>
    <p>We will have video monitors for parent to view activities and require men not to be alone with a child without another adult present.</p>
    <h3>Contact us:</h3>
    <p>Seniors Help Youth Morals Inc. non-profit corporation president is: Stratton Pollock <a
    href="mailto:strattonpollock@gmail.com"> test@gmail.com</a> .</p>
    </body>
    </html>
    I will greatly appreciate your help.

    Thank you.
    Last edited by ralph.m; Feb 20, 2012 at 16:58. Reason: email obfuscation

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi Stratton. Welcome to SitePoint.

    Eveything is fine with your code, except that you've mistyped <img ...> as <ing ...>. Sometimes the smallest things can cause the most trouble.

    One way to help find mistakes is to run your code through the HTML validator.

  10. #10
    SitePoint Member
    Join Date
    Feb 2012
    Location
    Charleston, MO 63834
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Ralph.m,

    Thank you very much for your help. I made change of ing to img and saved but no picture yet. I then placed both picture fall.jpg and index.html alone in a file folder and had computer share each file and tried again but no picture.

    Thank you for this advice I also ran file through validator as you suggested and it passed with two warnings.

    You are kind to help me.

    Do you have any other suggestions?

    Sincerely,

    Stratton

  11. #11
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It should show now display once you have refreshed/reloaded the browser page if it's spelt correctly and in the same folder as 'index.html', if it isn't displaying the image (but the files are both in the same folder) you will most likely have made another typo somewhere in your index.html file.

    If you are still having issues after double-checking and reloading the browser. Then copy-and-paste the full page code of your file called: index.html that you are working on and post it here so we can see if anything else went wrong.

    So then we can eliminate whether it's a typo of a misplacement of your *.jpg file as really those two scenarios are the most likely cause in most cases - in nearly all cases - where this happens.

  12. #12
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!Doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
        "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/Xhtml">
    <head>
    <title>Bubble Under-The diving club for the south-west uk</title>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8"/>
      <link href="style1.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div id="header">
     <div id="sitebranding">
    <h1>BubbleUnder.com</h1>
     </div>
    <div id="tagline">
    <p>Diving club for the south-west UK-let's make a splash!</p>
      </div>
       </div> <!-- end of header div -->
     <div id="navigation">
       <ul>
         <li><a href="bubbleunder2.html">home</a></li>
         <li><a href="about.html">About Us</a></li>
         <li><a href="contact.html">Contact Us</a></li>
       </ul>
     </div> <!-- end of navigation div -->
     <div id="bodycontent">
    <h2>Welcome to our super-dopper scuba site</h2>
    <p><img src="web-design/divers-circle.jpg" class="feature" 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 
    underwater navigation skills and successfully found your way to the 
    start point- or in this case, our home page.</p>
       </div> <!-- end of body content div -->
     </body>
    </html>
    Last edited by Shyflower; Jan 5, 2012 at 11:56. Reason: inserted code tags

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You have several typos but the main part that matters the most is you haven't got the path to the image correct.

    I'll give you a "major tip" here, rather than type the whole 3 lines of Doctype it would be easier to copy-and-paste one from an official source - even I don't type those out by hand.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    Since it is 'case sensitive' and if you compare this with your sample, it differs so change those three lines with my code here.

    Then like we mentioned above the image is meant to reside in the same folder as your page in this case hence generically: <img src="example.png" alt="" /> you don't need to add the folder path since it is relative to the index.html file itself.

    Therefore change your:

    Quote Originally Posted by faulty code in red
    <img src="web-design/divers-circle.jpg" class="feature" width="200" height="162"
    alt="A circle of divers practice their skills"/>
    To the following:
    Code:
    <img src="divers-circle.jpg" class="feature" width="200" height="162"
        alt="A circle of divers practice their skills"/>
    I suspect you got confused with the folders and that index.html and divers-circle.jpg actually reside in a folder on your PC called "web-design". Since both files are already there you do NOT need add anything else - it's relative to itself.

    It will now work assuming both those files are where they are supposed to be.

  14. #14
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you the picture is now showing.
    I have another problem. when I try to go back to the homepage from the contact page or about us page, it wont display the webpage.

  15. #15
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I suspect without seeing those two other files you have made another typo in the filename or path - exactly like with the image but this time within the anchor element.

    Upon those other pages, which also should be in the same folder you will have somewhere something similar to this:

    Code HTML4Strict:
    <a href="index.html">Some Text</a>

    That also must be spelt correctly and match the file name, location and extension and that will link to the file: index.html and try to load it, i.e. go to that page.

    That link will link back to your file called 'index.html' (in the same folder) make sure your index page is called index.html and NOT index.htm if it doesn't link back then you've made a typo... or the file index.html has not been named that by you.

    The browser will only ever try to go to wherever it is told; so if you ever spell the path or filename wrong and it will just get lost... and you'll not get a working link that goes anywhere. In the case of the IMG (as you found out) no image displaying and a broken image link.

  16. #16
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thank you

  17. #17
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I assume it is now working and it was a pleasure to help, even I at one stage probably made similar errors when I first started teaching myself aeons ago.

  18. #18
    SitePoint Member m16guy's Avatar
    Join Date
    Feb 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    This may have already been answered but please can someone help.

    I have recently purchased "Build your own website the rightway using HTML & CSS, 2nd edition" I have couple of technical issues:

    1) In chapter 2, the links between the 3 web pages for the Diving club website aren't working on any of the pages. keep getting page cannot be found message.


    2) In Chapter 3, the text colour isn't displaying.

    <p style="colour: blue; font-weight: bold;">Bubble Under is a group......

    The text is showing in bold but not in blue. I have tried other colours such as red and yellow, they also dont work

    Please can you advise

    Thanks

  19. #19
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    In CSS colour is spelt using the lazy US spelling; color so change the spelling there and that should then display in blue. If you look at thes recent thread about linking between pages it might help you a little?

    Though if you are still having problems copy-and-paste your HTML for the index.html file in a new post in the Just Staring Your Design forum so we can determine if it is a typo in the markup or you have actually misplaced those files or saved them with the wrong name, etc.

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:

    Quote Originally Posted by xhtmlcoder View Post
    In CSS colour is spelt using the lazy US spelling
    I think you mean the proper, original Roman spelling*.

    * Not to mention, the original English spelling, too, before the Francophiles had their way.

  21. #21
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,285
    Mentioned
    181 Post(s)
    Tagged
    4 Thread(s)

    You say Tomato...

    @Sami Al-Rawi ; Do not forget that all references in an HTML page (images, links to other pages) are relative to the current page.
    There is an exception to this. If you use the BASE tag in your page, it establishes a [different] point for all references.

    Quote Originally Posted by xhtmlcoder View Post
    In CSS colour is spelt using the lazy US spelling; color
    I prefer to think of it as the more efficient - shorter spelling
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  22. #22
    SitePoint Member
    Join Date
    Feb 2012
    Location
    Charleston, MO 63834
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear ParkinT,

    Thank you very much for your advice.

    I will make these changes soon and you are very helpful to build my site <snip> which is crude now. I can't bring it up even though it has public access.

    Sincerely,

    Stratton
    Last edited by Shyflower; Feb 24, 2012 at 14:44. Reason: removed link

  23. #23
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Double clicking upon the *.html file should load it or even going to the web browser's menu: File > Open File... would work.

    Like Ralph, I really don't know what "share" has to do with these files at all. Are you restricting them on a mapped Network for some bizarre reason?

    On a local machine all you need do is place both the image *.jpg file and *.html in the same folder and double-click upon or open the *.html which in turn will launch the browser. That will thus request and load the image.

    If the image isn't displaying there is a extremely strong chance you still have typos in your markup or the image is not in the correct place the W3C Validator should have said; "Result: Passed" without any errors or warnings. If you still have errors fix them all first.

  24. #24
    SitePoint Member
    Join Date
    Feb 2012
    Location
    Charleston, MO 63834
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear All helpful advisers,


    Confused about error messages:

    The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.

    And

    Mismatch between Public and System identifiers in the DOCTYPE declaration

    This document uses an inconsistent DOCTYPE declaration. The Public Identifier -//W3C//DTD XHTML 1.0 Strict//EN declares the XHTML 1.0 Strict document type, but the associated System Identifier http://www.w3.org/TR/xhtml1-strict.dtd does not match this document type.

    The recommended System Identifier for XHTML 1.0 Strict is http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd.

    The safest way to use a correct DOCTYPE declaration is to copy and paste one from the recommended list and avoid editing that part of your markup by hand.

    I will keep reading text to fix errors identified by validator.

    I need to break for weekend but will get busy again next week.

    Thank you all for your help.

    Sincerely,

    Stratton

  25. #25
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Obviously you have lots of typos in your markup and have saved it with a BOM and typically you shouldn't use the BOM http://www.w3.org/International/ques...yte-order-mark.

    The top of the page should read:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    You didn't type the URI correctly you missed out the xhtml1/DTD/ point of note; when doing the DOCTYPE it's usually easier to copy a working example as it is 'case sensitive' and tales a lot of fiddly typing with XHTML.


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
  •