How to build your own website 2nd edition

Community
21
22

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:

<!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"> [noparse]test@gmail.com[/noparse]</a> .</p>
</body>
</html>

I will greatly appreciate your help.

Thank you.

23

Hi Stratton. Welcome to SitePoint. :slight_smile:

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

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

24

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

25

Hm, very odd, because that’s all you need to do. I even tested your code myself and it works. So there ust be something in your workflow getting in the way. How are you ‘opening’ the page, and what do you mean by this?—

… and had computer share each file

26

Dear Ralph.m,

Thank you again for all your help.

I apologize for the delay. I had to get barrels of corn for the livestock which we will use for the project to help youth morals.

I open the page as text taught by going to start then search and type name in box. Click name and page appears in firefox.

Using Windows 7, I go to file of both fall.jpg and index.html. I then right mouse click each file and click share with, and click homegroup (read) for each file instead of leaving it as nobody.

I hope you are doing well. Thanks again for your advice and time.

Sincerely,

Stratton

27

Dear Ralph.m,

I also opened index.html in Windows Explorer and at least got the outline of the picture. When I left clicked it and clicked view picture nothing happened. Complicated technology it seems to me.

Thanks again.

Sincerely,

Stratton

28

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.

29

@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.

I prefer to think of it as the more efficient - shorter spelling

30

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

31

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

32

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/questions/qa-byte-order-mark.

The top of the page should read:

<!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.