The Most Basic Web Page in the World?

I have just bought the book and I already have the most basic question in the world: Why is it that when I double click on my basic.html. document it doesn’t open in my internet browser as the book says? It opens on Notepad, naturally so what am I doing wrong please?

I am using Windows 7 and Google Chrome.

Thank you in advance.

Ana

Hi portana. Welcome to SitePoint. :slight_smile:

Well, that’s odd, as it should open in your browser. Presumably the filename doesn’t have a dot at the end, as you typed it above? it should be just

basic.html

and not

basic.html.

Does that help? (I know, I’ve answered with a really basic question, but we all gotta start somewhere!)

You don’t have the correct file extension. I suspect you have a file called *.txt as you will see in your web browser URL Address bar (if you open the browser via the browser’s File open). Make sure when you save the file in Notepad it doesn’t have the *.txt extension. It should end in *.html for example: basic.html NOT basic.html.txt like I suspect you accidentally called it - which you’ll see in the browser address bar when you open the file via the browser.

Assuming you have the 3rd Edition refer to [page 33] I don’t have Windows 7 but in the old versions of notepad you had to double check you didn’t accidentally save as *.txt file. You can obviously just rename the file extension back to *.html or just re-save as *.html

It also helps if you have your file settings so you can see file extensions so you might want to use “Hide extensions for known file types” to being unchecked.

Yes it did help :slight_smile: I can now open it on chrome!

Thank you.

No worries glad it helped you get the file extension issue solved. :slight_smile:

Now the picture doesn’t come up and all was going so well :slight_smile:

It’s my logo I am trying to upload and it’s in jpeg format so I don’t know what’s wrong?

Sorry to annoy but I need all the help I can get as I can’t afford to pay someone to do my website. (I’m having fun actually)

When you say “upload” to you mean upload to your own public website or do you mean you are just trying to get an image to display within a webpage like the code excerpt on page 49? If you are just following the book, if you can tell us what page you have got up (and stuck on) to it might help. Because usually it’s a case of a small typo for a filename or directory or misplaced image.

I have put this on notepad <p><img src=“logo_21460_web.jpeg” width=“200” height=“162”
alt=“Our logo”/></p>

but I can’t see the picture on the web browser, only a square with my alternative comment inside.

Also where do you insert the navigation markup for a background, border, etc.? On the style1 document on notepad? I have done this but nothing happened so I’m thinking I should insert it somewhere else?

Thanks

Just solved the second mystery, wasn’t typing the right id attribute.

Pictures still a mystery…

Double check that the name of the image is exactly the same as the name you used in the html document. My guess is that the image uses .jpg while your html is looking for .jpeg.

Also, be sure that the image is in the same folder as the html document.

I bet it’s a variant of the same problem you had before:

imagename.jpeg.jpg

I think most all of us agree: it is extremely fun coding a site. :smiley:

The file extension certainly is a possibility, but the most common cause here is that the path to the image is not correct, so my money is on Karin Sue’s suggestion:

You can put the image anywhere you like, but the above comment was made because, currently, you are telling the browser to find the image in the same folder as the web page itself.

<p><img src="[COLOR="#FF0000"]logo_21460_web.jpeg[/COLOR]" width="200" height="162"
alt="Our logo"/></p>

However, if you had the image in a folder called /images/ that is in the same folder as basic.html, then the path should look like this:

<p><img src="[COLOR="#FF0000"]images/logo_21460_web.jpeg[/COLOR]" width="200" height="162"
alt="Our logo"/></p>

There are many variations on that, so you have to consider the path (or link, or URL, or whatever you want to call it) very carefully. It’s the same as giving someone directions to a location. You are telling the browser where to go to find the image. If your directions are wrong, it will get lost!

Thank you, it worked. Can I just say I love you all so much? :slight_smile:

This is quite difficult though, I really admire you people who know a lot about this!

I’m starting the Gallery page…

I’d have nearly tempted you into entering the Pink for October contest. Since entries numbers are low and you are about a quarter of the way into the book and just about will have enough skills to create a simple design it would have been good for practice. In time with enough practice it will get easier and be like riding a bike. Once you get used to how files link it starts to make more sense, etc. :slight_smile:

OMG www.wayforwardenterprise.co.uk

It doesn’t look like what I have done at all! Where are the pictures and the colors?

<panic>

So, I have now uploaded my style sheet and I can see the colors but even though I passed all the validation checks (link, html and css) it all still looks a mess and I can’t see the pictures: www.wayforwardenterprise.co.uk.

Any ideas since the website is live?
Thank you
Ana

OK - a quick look at your source code suggests it’s just a simple mistake in the pathway to the file, like you had previously.

For example, the location of your logo is shown as

src="desktop/logo/logoimage1.png"

This was probably correct on your local machine, but it’s unlikely to be right now. It’s saying that the file logoimage1.png is located inside a folder called logo - which may well be correct - inside another folder called desktop - and I’d guess that’s where your problem lies.

Just alter the paths to show the correct location of the images - probably

logo/logoimage1.png

but it will depend on exactly how you uploaded them.

I’ve done that and it still did not work.

I think it may have to do with what you said about how I uploaded them. But how do I know? I uploaded everything on Filezilla and I think I followed the steps on the book correctly. I really don’t know what is wrong…

Unfortunately, I don’t have the book, so I can’t check what the instruction say there.

Open Filezilla and connect to your site. In the panel on the right-hand side, you will see the list of files and folders for the site. Your index.html file and the other pages of your site will be in the root directory - a folder called public or www or something similar. Are your images directly in the same folder, or are they inside a sub folder? If they’re in another folder, check that you’re using the correct name. Also, folder and filenames can be case-sensitive, so if your pathway reads logo/logoimage1.png, but your folder is called Logo, that won’t work either.

See if that helps you locate the problem.

Do I have to write the path to a picture in my computer or the uploaded picture in the web hosting server? I have tried everything I can think of and also suggestions on other websites and really can’t find a solution. I’m quite disappointed but I do need to finish the website.

Also, the book that led me to this website tells me to just write the name of the picture and not the location but that doesn’t work either.

Thanks