• Welcome to Overclockers Forums! Join us to reply in threads, receive reduced ads, and to customize your site experience!

Need a bit of HTML advice.

Overclockers is supported by our readers. When you click a link to make a purchase, we may earn a commission. Learn More.

grs

Member
Joined
Apr 3, 2006
Location
Dublin, Ireland
I'm trying to create my first website using HTML through MS Notepad. There is loads of info out there.
I would like to be able to add a paragraph of text that will not show up in a web browser, I don't mind if it shows up when you select view source, but is there a way of hiding this too?
The idea for this is so I can leave note about HTML code so I don't forget how I did some things!!
 
I'll have a look at the MS program. I have been using w3school.com for info alright.
Another question about images I want to display a grid of images with some information about the image below it. The problem is getting everything to line up. I can get a line of text with an image above it, when I move across for the second image and text they follow directly after with only the smallest space, as the text is short I getimage across half the page with text all grouped at the beging of the line.
 
html: <!-- comments and text :) -->

php: */ comments and text :) */

<comment> </comment> tag may not be in use anymore, not sure. I'm self taught as well, so I'm not up on standards etc.

Glad you found it first though, means you're thinking!
 
I'll have a look at the MS program. I have been using w3school.com for info alright.
Another question about images I want to display a grid of images with some information about the image below it. The problem is getting everything to line up. I can get a line of text with an image above it, when I move across for the second image and text they follow directly after with only the smallest space, as the text is short I getimage across half the page with text all grouped at the beging of the line.

A table with tables within/across it with given percentage widths, with text and image centered within each one. Look that up and you'll see what I mean :)
 
I found the following code to hide text:-

<!-- This text will not show -->

I was thinking of tables for the images, I don't want them to show up but if I set the colour to match the background it should be fine, right?
 
I got the following from w3school.com :-

<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="nice picture.jpg" width="108" height="75">
Second</td>
<td>Row</td>
</tr>
</table>

(nice picture is an image on my HDD) This is close to what I want but I'm not able to change the sixe of the image, when I adjust the width and height options it changes the box dimentions. How should I correct the code?
 
if you use tabs it makes reading the code alot easier

Code:
<table cellpadding="0" cellspacing="0" align="left" border="1">
<tr align="center">
	<td width="150">
		<img src="" alt="" width="" height="" /><br />
		something will go here
	</td>
	<td width="150">
		<img src="" alt="" width="" height="" /><br />
		something will go here too
	</td>
</tr>
</table>

also you should look at learning css at the same time, it makes changing colors, sizes, ect alot easier later on.
 
The <comment> tags aren't good practice. You're much better off using <!-- --> for commenting in HTML.

Don't change the height and width of the image in your <img> tags. That'll just distort the image. It stretches the image and makes it look all funky. If you need to make an image that's a certain size, then you'll need to create it at that size in an image manipulation program, like PhotoShop or ImageReady.
 
I am using tabs with the code, just when I copy and paste to here they seem to get lost.
Hate,
That example you gave is more like what I want but when I try add anything after it instead of appearing below the table, eveything appears beside the table till it reaches the bottom. I got around this by adding a whole series of <br>'s but there must be a simpler way of doing it?

Also I'm trying to use the align command in the table, I have an image with text below, I want the image to be center but I want to text to the left, how should I do this?
 
Last edited:
Don't change the height and width of the image in your <img> tags. That'll just distort the image. It stretches the image and makes it look all funky. If you need to make an image that's a certain size, then you'll need to create it at that size in an image manipulation program, like PhotoShop or ImageReady.

yes you shouldn't change the size of the images with html, but you should set the size of the images as it will make the page load smoother as all the images load.


I am using tabs with the code, just when I copy and paste to here they seem to get lost.

use the [-code][-/code] (without -) when posting code as it will keep the format of it.


Hate,
That example you gave is more like what I want but when I try add anything after it instead of appearing below the table, eveything appears beside the table till it reaches the bottom. I got around this by adding a whole series of <br>'s but there must be a simpler way of doing it?

a quick way of fixing it is to align the table center

Also I'm trying to use the align command in the table, I have an image with text below, I want the image to be center but I want to text to the left, how should I do this?

Code:
	<td width="150" valign="top">
		<img src="" alt="" width="" height="" /><br />
		<div align="left">something will go here too</div>
	</td>
 
yes you shouldn't change the size of the images with html, but you should set the size of the images as it will make the page load smoother as all the images load.

Never said he didn't need to declare correct <img> height and width attributes. I said he shouldn't change existing ones to avoid image distortion.
 
I was aware that the images would be distorted, but I've played with the ratios till that look roughly right, all the images are the same size.
That alignment code works fine, with <div> short for?
 
html: <!-- comments and text :) -->

php: */ comments and text :) */

<comment> </comment> tag may not be in use anymore, not sure. I'm self taught as well, so I'm not up on standards etc.

Glad you found it first though, means you're thinking!

Try /* */ for PHP :)
 
I'm trying to work on the next stage now. Creating an order form.

Its getting complicated maybe theres a simplier way?

I have a table with images (in 3X3 grid) below each image is a title and two check boxes, to buy a "framed" or "unframed" image, I would like to add an input field or drop down box after each input field where a customer can select a quantity. Below the table I would like to place a button labeled "Review and Confirm" and what happens then is a page will appear sumerising all the selections ("framed" or "unframed") and quantities made.
As not all the images will have a selection made I need the summary page to ignore images where a selection was not made.

There is more I'd like to add, but I'll deal with this much first.
 
Ah forms... good times. Forms can be very handy, though the process you're describing (where you're taken to a page that dynamically loads whatever selections the user makes on your form), it sounds like you might need a bit of server-side coding, which may be a bit more advanced than what you're learning right now.

It's very doable. In fact, it's not too difficult if you know a bit of PHP, Java, ASP.NET, ASP, etc. You could have the form post to a database, or write to an xml file, or even a text file... hell, you don't even necessarily need a data store... you could just have the server post back the user data and display it in a table that was invisible prior to the server postback.

When I just started out learning HTML, though, most of my forms dealt primarily with sending an email with the values submitted by the user.
 
I was reading that there were servers involved but I didn't fully understand the system.
Like you say a it may be easier to have all the options selected by the used be emailed to me.
I think the example I was looking at the email was not sent automatically but opens up a Windows Outlook Express message and then the user has to click on send themselves. I would preferre it if the use didn't see the message at all.
 
As stated above, you're going to need to learn a lot more than simple HTML to do this. If you're not able or willing to spend the time to learn PHP, ASP, Javascript, etc, then I would suggest hiring someone to do this for you.
 
Well, you don't have to have the user send it themselves via Outlook, Thunderbird, etc. All you really need to do to send the email when the user hits submit is declare the action attribute in your <form> tag. It'd look something like this:

<form method="POST" action="mailto:[email protected]">

So basically, the method attribute is saying that your form will send this data via HTTP POST, the action tells the form what to do with the data. You're simply directing it to your email address. Naturally, you'd replace "[email protected]" with your real email address.

As far as server-side coding goes, I don't think you need to get worried about that right this moment. Is this for a school project? Business? Learning just to learn new stuff? If it's for school or learning for fun, then I wouldn't even bother with outsourcing, etc... if you decide to go that route, then you'll likely pick up an OO language, and learn to do the server-side stuff on your own. Otherwise, if it is for business, and you feel a bit overextended, it may be time to outsource to a web developer w/ a nice portfolio and some good experience. :p
 
Back