Jump to content
Killersites Forums

web design


peppyc2
 Share

Recommended Posts

Hi all your computer geeks and nerds out there

 

I am to web design what a one day new born baby is to this universe so you how advanced I am!

I just read and typed and saved the following as instructed in the tutorial:

 

<html>

<head>

<title>Your first hand coded page</title>

</head>

<body>

<h2>Hand coding web pages is easy! </h2>

<p>I would like to thank everyone who helped me type

this page.</p>

</body>

</html>

 

But when i open the web page with the browser it opens exactly as above and not without the tags. Anybody knows why?

Link to comment
Share on other sites

Some computers add hidden extensions, where you might call your file index.html, but the system adds a hidden extension and you actually have index.html.txt - check this thread for details:

 

http://www.killersites.com/community/index.php?/topic/3010-cant-open-my-website/page__gopid__16509&&do=findComment&comment=16509 (move to post # 6 in this threat and start there).

 

If that doesn't help, let us know and also let us know what program you're using to write your code, what OS you have, and exactly how you go about opening that file with your browser.

Link to comment
Share on other sites

Ok thanks Andrea. Well I used the notepad (and OpenOffice text writer) to write the tutorial text examples. I created a folder called 'my webpages' in my 'documents' folder and then saved the typed text in both formats 'text' and 'html' in this folder. When I save the text in html format the laptop autoimatically creates a browser icon in the same folder. Then when I double click this icon the original text with all the tags appears exactly as i originally typed it instead of the header and body in bold or whatever the tag is supposed to convert the text into. The same happens when i open the browser (either internet explorer or firefox) and click 'File' then 'Open file' the same original text appears. My OS is Windows Vista Home Premium. Thanks again for your help.

Link to comment
Share on other sites

When you save the file from Notepad, are you changing the 'Save as Type" drop down to "All Files"? And you have verified that there are no hidden extensions?

 

Also - do you see exactly what you show up there, the <html> tag and all that, or just this text:

Hand coding web pages is easy!
I would like to thank everyone who helped me type this page.

 

?

Link to comment
Share on other sites

Try a simple text editor instead - I don't know if your editor has something to do with this, but it's worth a try. And make sure you save it as .html and don't have any hidden extensions as discussed in above. Then, if this still does not work, copy what shows up in your URL and paste it here -maybe that'll give us a clue..

Link to comment
Share on other sites

Hey! I got it at last!! First I wrote the text in OpenOffice writer. then i copied and pasted it in notepad then saved it as you said. It opened without the tags as a web page with the browser. Does that make me a web designer?! well maybe not yet!! But what i noticed is that i can't edit the text in notepad. I need to save the original text as a text document to go back to to edit and go through the whole steps again. Am I right to say that the text and contents and all can not be edited in notepad?

Link to comment
Share on other sites

Does that make me a web designer?!

 

That's tomorrow - but you're clearly on your way. :clap:

 

Am I right to say that the text and contents and all can not be edited in notepad?

 

No - you can edit and write webpages in Notepad. I assume you're on a PC:

 

Either, go to your file in Windows Explorer, right-click it, chose "Open With" and open with notepad.

 

or

 

Open Notepad, go to 'File Open" - Set the File-Type Drop-down to 'All Files" - then find your html file, open it, make your changes, click 'Save As', make sure to change "Save as type" to "All Files" and save as .html.

 

If that does not seem to work for you - report back EXACTLY what you are doing and what's happening.

Link to comment
Share on other sites

  • 2 weeks later...

I uploaded a few jpg pics from my laptop files onto my website trying them out which worked ok. Then I uploaded the same pics onto a few of these online storage sites like kodak and flikr and photobox so when my laptop is shut down i can still look at these pics online via my website. But after the third pic they all show very blurd irrespective of which online storage site i use. Anybody has a guess why?

Link to comment
Share on other sites

The original page is basically made up of 2 rows of 4 pics which fill the webpage so when you open it you can see all 8 pics. This page is the second page to which i have a link in the master page. First i tried the link with one pic in the second web page just to see if and how it works, after which i added another 7 pics to fill the second page. Then by clicking the link i would go to the page with 8 pics and when it worked i thought to myself 'wow i'm invincible!!' like that guy in the Tom Cruz's mission impossible! Then i thought what if i'm out there at work or wherever and my laptop is off and at home. My website wouldn't show anything that's in my laptop files like these pics.. Then i thought aha! If my pics (or all of my source material)are stored online then it dosen't matter where i am. I can always access my website whenever and wherever. So i uploaded the same 8 pics as in my files to these storage sites. Now when i went to my website all 8 pics did show with the exception of only the first 3 pics on the left hand side in the top row were showing as sharp and clear as the original source pics in my laptop files and the rest of the pics were very cloudy. I changed the storage sites hence the source. It was the same. Then I tried each pic on its own. The same pics which were sharp showed sharp and the same pics which showed cloudy showed cloudy suggesting that maybe there is something wrong with those 5 pics. But cloudiness problem happens only when the source is internet and not files in my laptop. So I'm puzzled!

Link to comment
Share on other sites

I'm confused.

 

Where is your website - the part with the HTML and CSS? I assume you have that uploaded to a hosting account? (Else, you could only access it from whatever computer it's on). Why don't you just upload those images to the same hosing account? That's standard practice. Webdesigners don't host their images on Photobucket (or whatever) so they can import them into their sites.

 

Do you have a link to the site you're talking about - if you post it, we can see what exactly is going on.

 

 

I'm also not quite sure what you mean by 'cloudy' - photos lose quality if they are compressed too much or displayed larger than they actually are. See how many pixel wide and high your original is and compare that to how large it is displayed.

 

And that 'invincible' thing - get that out of your head. You'll understand the next time you spend 3 hours trying to figure out why something doesn't work only to discover you have a stupid typo in the file name.....

Link to comment
Share on other sites

I'm not using any hosting account. It's just me and my laptop experimenting and trying out different tags to see how they work. I'm attaching the two web pages i've i'm talking about to let you see what i mean. i'm not sure if you will see what i see at my end but by cloudy i mean frosty like holding a sharp clear pic behind a frosty piece of glass and looking at it.

Template 1.html

Template 2.html

Link to comment
Share on other sites

I'm still confused - if your html file is only on your labtop, why can the pictures not be only on your laptop? You won't be able to see the html from anything but the laptop.

 

Then, looking at your code - Template 1

All your code, this part:

<p style="text-align:center;"><span style="font-family:Arial;font-size:14px;font-style:normal;font-weight:bold;text-decoration:underline;text-transform:capitalize;color:000000;background-color:FFFFFF;">a 6-bed licensed terraced house in the heart of kemptown</span>
</p><p style="font-family:arial,sans-serif;font-size:10px;"></p>

<p align="center"><img src= "file:///C:/Users/my%20pc/Documents/Properties%20pics/I.%20P.,%20Property%20details%2001-07-10/I. P., Front view.jpg" alt="Front view" width="230" height="160"/></p> 

<p align="center">
<a href="http://maps.google.co.uk/maps?hl=en&cp=21&gs_id=44&xhr=t&q=islingword+place,&gs_upl=&bav=on.2,or.r_gc.r_pw.,cf.osb&biw=1280&bih=668&um=1&ie=UTF-8&hq=&hnear=0x487585973ddc67ff:0xbaf1a4a4b9b58d60,Islingword+Pl,+Brighton+BN2+9XG&gl=uk&ei=Gt8AT5fyO86UOrzszJkB&sa=X&oi=geocode_result&ct=title&resnum=1&sqi=2&ved=0CB0Q8gEwAA">View location on map</a>
</p>   


<p style="position:relative;left:250px;top:0px;"><span style="font-family:Cursive;font-size:14px;font-style:normal;font-weight:bold;text-decoration:none;text-transform:none;color:330000;background-color:ffffff;"><a href="file:///C:/Users/my%20pc/Documents/Properties%20pics/I.%20P.,%20Property%20details%2001-07-10/I.%20P.,%20Ground%20floor%20hallway.html">Hallways</a></span>
</p><p style="font-family:arial,sans-serif;font-size:10px;"></p>

belongs between the opening and closing BODY tag, NOT between the closing head and opening body tag.

 

Secondly, you should look into using external stylesheets versus inline styling.

 

Looking at template 2 - the code is in the right place, but I looked at the picture of the sink. In reality, it's 90 x 120 but you're displaying it at 240 x 320 - that's what I meant when I said images get distorted. Images should always be the size they are dsplayed. If they are smaller than displayed, you lose quality, and if they are larger, you waste bandwidth.

Link to comment
Share on other sites

Yes both my html files and pictures are on my laptop. There is no problem there and there is no issue of cloudy pictures when i use my laptop as my pictures source on my webpage. It's only when I upload the pictures onto photobox (online storage site)and use that as source in my coding that pictures show cloudy when viewing them on my webpage.

 

Yes I see what you mean by the code in template 1 being in the wrong place. Well spotted. I corrected it and placed it between <body> and </body>. But that dosen't seem to have made any difference one way or the other.

 

And resizing the pics doesn't seem to have had any effect whatsoever on the quality of the pics on iota when using my laptop as the source of the pics. It's only when I use the online storage that pics go very very cloudy. The reason I resized the pics was to fit them all on a viewing page (100%)so the viewer dosen't have to scoll the page up and down.

 

So the mystery of the cloudy pics goes on!!

 

By the way how do you use colour in writing different parts of the code in notpad? The notepad page dosen't have colour coding facility like the text writer or what am i missing?

Link to comment
Share on other sites

If I upload your pages, I get this for template 1 (btw, it's best to NEVER put any spaces in filenames, and if you stick to a consistent always lower-case policy, you save yourself a lot of grief over time) - so here is Template 1 - you can see, the image isn't there, because the path leads to your computer:

"[url=""]file:///C:/Users/my%20pc/Documents/Properties%20pics/I.%20P.,%20Property%20details%2001-07-10/I. P., Front view.jpg[/url]

which of course won't show on anything but your computer. The same with the link to the hallway, as the path also leads to a file on your computer.

 

When you view your Template 2 (which I renamed template2.htm, you see this - the first 3 images are missing, because, as you can see in the source, the path again leads to your C Drive. The other images are all displayed at a width of 240px and different heights, but in reality, they are mostly 90 or 120 px wide. And that, as I said before, is why you get the crappy quality. Imagine you paint a picture on plastic, and then stretch the 'canvas' - you'll get pretty much what happens when you display a thumbnail at full size. If you want better picture quality, resize them to what you will display them first, then upload them at THAT size.

 

What I still don't understand - if your html file is only viewable on one specific computer, why don't you just keep the images on the same computer and skip the photobucket (or whatever) altogether?

Link to comment
Share on other sites

By the way how do you use colour in writing different parts of the code in notpad? The notepad page dosen't have colour coding facility like the text writer or what am i missing?

 

Forgot about this question:

 

Notepad does not color the code. For that, try Notepad ++

Link to comment
Share on other sites

My pictures ARE on my laptop. I just wanted to see if I upload these pics (or any of my files) somewhere online and have them as the source rather than my laptop will my webpages still work or not. I actually re-sized the picture to 90 by 120 like you said and there it was. No cloudiness but a much smaller size picture. I can see what's happening now. Where in my code did you find the actual size of the pic to be 90 by 120? I had it much larger as it says in my laptop file icon which is why the pictures where showing cloudy online because i was stretching them as your analogy explained it well.

And i downloaded the notepad++ which does give colored text but colors are not editable are they?

Link to comment
Share on other sites

And i downloaded the notepad++ which does give colored text but colors are not editable are they?

I never used notepadd++ but you might try GridinSoft Notepad Lite which does have color schemes for various situations plus you can edit colors. However, my version is quite old and so I do not know how the new version is if it allows you more or less things you can configure.

Link to comment
Share on other sites

Where in my code did you find the actual size of the pic to be 90 by 120?

 

I didn't, it's not in your code - but I right-clicked to 'view source' and followed the link to it in your source to the image. Then I used my Firefox's Webdeveloper Toolbar feature of 'Display image Dimension" and it showed me the actual size.

Link to comment
Share on other sites

Thanks again for your guidance.

The other thing that I still haven't found is the html or css code for a pdf file. From what i have seen on internet tutorials there isn't such a code and pdf file needs to be converted by specialist software to jpg file and then be incorporated in the web page as a jpg file. Is that right?

Link to comment
Share on other sites

No, there is no css or html code for a pdf file. They each are different file types, same as .doc, .png, .xls, .gif, and so forth. What is doable is to insert a link to a pdf file into your html - like so:

<a href="pdffile.pdf">Your PDF File</a>

 

But that won't insert the pdf itself, only link to it.

 

Taking a screenshot of your pdf document is one way to turn it into a jpg, but there's the potential for quality loss, also, many photo editors let you save a pdf as a jpg. There are probably more ways to go about this, but these are the two I'm familiar with.

Link to comment
Share on other sites

I never used notepadd++ but you might try GridinSoft Notepad Lite which does have color schemes for various situations plus you can edit colors. However, my version is quite old and so I do not know how the new version is if it allows you more or less things you can configure.

Great thanks. I tried it. It's good. U can edit the text like a word document, not only that but it corrects your text too if you misplace a / or whatever. Thanks.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...