The Most Basic Web Page in the World?

**portana** · Oct 14, 2011 05:43

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

**ralph.m** · Oct 14, 2011 05:51

Hi portana. Welcome to SitePoint.

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

**xhtmlcoder** · Oct 14, 2011 05:57

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.

**portana** · Oct 14, 2011 05:58

Yes it did help

I can now open it on chrome!

Thank you.

**xhtmlcoder** · Oct 14, 2011 06:16

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

**portana** · Oct 14, 2011 09:01

Now the picture doesn't come up and all was going so well

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)

**xhtmlcoder** · Oct 14, 2011 13:31

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.

**portana** · Oct 14, 2011 14:27

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

**portana** · Oct 14, 2011 14:33

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

Pictures still a mystery...

**Karin Sue** · Oct 14, 2011 16:45

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.

**Black Max** · Oct 14, 2011 17:25

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

Code:

imagename.jpeg.jpg

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

**ralph.m** · Oct 14, 2011 17:35

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:

Originally Posted by Karin Sue

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

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.

Code:

<p><img src="logo_21460_web.jpeg" 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:

Code:

<p><img src="images/logo_21460_web.jpeg" 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!

**portana** · Oct 15, 2011 09:45

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

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

I'm starting the Gallery page...

**xhtmlcoder** · Oct 15, 2011 11:33

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.

**portana** · Oct 15, 2011 16:23

OMG www.wayforwardenterprise.co.uk

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

<panic>

**portana** · Oct 16, 2011 02:15

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

**TechnoBear** · Oct 16, 2011 03:44

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

Code:

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

Code:

logo/logoimage1.png

but it will depend on exactly how you uploaded them.

**portana** · Oct 16, 2011 03:50

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

**TechnoBear** · Oct 16, 2011 05:52

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.

**portana** · Oct 16, 2011 07:54

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

**TechnoBear** · Oct 16, 2011 08:15

You need to have the path to your uploaded picture. I always make a folder called images (very imaginative!) and put all my pictures in there. I keep this folder in the same directory as my html files, so the pathway to the picture is always the same, whether it's on my computer or the server. For example, I could have a folder on my computer called Website, which contains another folder called images and my html files. When I upload these to the server, I can just upload the entire contents of Website to the root directory. Because everything is still in the same relative position, it all still works without having to change any file paths.

I've tried looking for a directory called logo on your site and it doesn't exist, so that's at least part of your problem - you're asking the browser to find a picture in a non-existent location. First, we need to find where that picture actually is, and then correct the path name.

Can you locate the picture using Filezilla, as I suggested earlier? Another way to do it would be by using the control panel to your web site. The exact details will vary, depending on your hosting, but if you're using a host with cPanel controls, you can log in to your cPanel, and choose the "File Manager" option. This will let you see which files you have where.

Don't lose heart - we're here to help.

**portana** · Oct 16, 2011 14:12

Sorted!!

I was doing everything right but FileZilla was not updating my html document with the right pathway for the picture. I found this out when I right clicked on the website to look at the markups and the logo directory was still there even though I had changed it to images (several times).

It was driving me nuts!!

So when I closed Filezilla and opened it again I uploaded the doc with the right pathway again and it worked. Then I just repeated the same process to all the html docs. Phew!!

Now I need to know how to make my page pale green instead of white? Please?

Thank you
Ana

**Black Max** · Oct 16, 2011 14:41

Originally Posted by portana

Now I need to know how to make my page pale green instead of white? Please?

Easy! Most browsers default to showing the background of a page as white (#ffffff or #fff, if you like shortcuts), unless you tell it otherwise. So to your body style, do this:

Code:

body {
  background-color: #f0fff0;
  font-family: Verdana, Arial, "Times New Roman", sans-serif;
  line-height: 125%;
  padding: 0;
  border: 0;
}

Or replace the #f0fff0 with whatever color you like. I like to use this site for color codes, but there are more sophisticated hexcode providers out there.

**portana** · Oct 16, 2011 15:31

Thank you

any suggestions on how I could improve www.wayforwardenterprise.co.uk?

Thank you

**ralph.m** · Oct 16, 2011 15:40

Originally Posted by portana

any suggestions on how I could improve www.wayforwardenterprise.co.uk?

At this point, it would be best for you to post in the Website Reviews forum. But please make sure to revew three others' sites first, as that's the way it works there.

User Tag List

Thread: The Most Basic Web Page in the World?

Thread Tools

Display

The Most Basic Web Page in the World?

Bookmarks

Bookmarks

Posting Permissions