Jump to content

Starting out.


Recommended Posts

While messing around with target attributes I couldn't help but notice it didn't make any difference what I put in the value part. Initially I put target="blank" instead of target="_blank" and it seemed to still work fine, so I thought I'd test it out and tried target="speedboat" and again it made no difference. Also it only opens a new tab in the browser, what about if I want it to open in a separate window? Or am I getting ahead of myself.Edit: And should I not bother spending too much time on moving framesets? I can't remember ever going to a website where they were used and assume there's a reason for that.
Targets work a little wierd when not used in a FRAME setting.Examples: target="_blank" is the correct way to get a new window each time, no matter how many links on the page
<a href="test.html" target="_blank">Test page</a><a href="test1.html" target="_blank">Test page</a>Both of these open in new windows/tabs

target="test" will only make a new window so long as no other windows named 'test' are open. Make 2 different links in a page both with the same target, and they will use the same window.

<a href="test.html" target="test">Test page</a><a href="test1.html" target="test">Test page</a>Both of those open in the same window/tab.

Hope that was help.Oh, and the reason you have new windows opening in tabs instead of windows is due to a browser settings. IE7 has that feature, as I am sure Opera/FF2/3 does as well. No idea on other browsers. But look in the preferences of the browser for tab settings and remove "open new windows in new tab". Tell me the browser and I'll try to give better directions to turn it off.

Link to comment
Share on other sites

  • Replies 87
  • Created
  • Last Reply
Targets work a little wierd when not used in a FRAME setting.Examples: target="_blank" is the correct way to get a new window each time, no matter how many links on the page
<a href="test.html" target="_blank">Test page</a><a href="test1.html" target="_blank">Test page</a>Both of these open in new windows/tabs

target="test" will only make a new window so long as no other windows named 'test' are open. Make 2 different links in a page both with the same target, and they will use the same window.

<a href="test.html" target="test">Test page</a><a href="test1.html" target="test">Test page</a>Both of those open in the same window/tab.

Hope that was help.

You kidding? That was great, thanks for taking the time with the examples, I meant to ask about opening different new tabs with each link or using the same tab.
Oh, and the reason you have new windows opening in tabs instead of windows is due to a browser settings. IE7 has that feature, as I am sure Opera/FF2/3 does as well. No idea on other browsers. But look in the preferences of the browser for tab settings and remove "open new windows in new tab". Tell me the browser and I'll try to give better directions to turn it off.
I'm using ff3, to be honest I hate pop-ups I just thought I should know how they work.
Link to comment
Share on other sites

Well the W3C indicates that we should allow the client to choose - that is, have it open in the same window and if the client decides to they can right-click and open in a new window (or middle-click as you can on modern browsers).I can't find that document though....

Link to comment
Share on other sites

The /> thing is for XML documents, so if you are using XHTML - yes, HTML - no.

Link to comment
Share on other sites

In FF3: Tools > Options > Tabs > A new window (at the top)As for image link... no sure exactly what you are asking... but something like this?

<a href="http://www.link.com/coolpage.html"><img src="mypicture.gif" alt="my picture" border="0"></a>

You can use that if the image is in the same directory as the html file you are using. Or... to use any file on your computer, you can use: file:///C:/Documents and Settings/User/My Documents/My Pictures/mypicture.gifOr, if i was completly wrong in your problem, hopefully the above is useful.Remember, all my examples are HTML and not XHTML. There are a great deal of differences... ie: Target command = bad in XHTML, and /> is used for many commands... and width/border type commands are usually css based... oh, and UL/OL etc are different... and and and... Hopefully everyone who replies will remember you stated you were learning HTML first and not XHTML. Thread is getting big enough I doubt people read all the above posts. Anyway, best of luck.

Link to comment
Share on other sites

jpegs and gifs are the most commonly used image types on the web. Gifs work best for images with fewer colors or abrupt color transitions, like small buttons and icons. Jpegs work best for photos and larger, more detailed art. png types are gaining popularity and I predict will become the most common for new images. Their alpha transparency makes for nice-looking drop shadows. IE6 doesn't support the alpha stuff, but that user group is declining every year.A browser interprets an image but doesn't "convert" it to anything.

Link to comment
Share on other sites

In FF3: Tools > Options > Tabs > A new window (at the top)As for image link... no sure exactly what you are asking... but something like this?
<a href="http://www.link.com/coolpage.html"><img src="mypicture.gif" alt="my picture" border="0"></a>

You can use that if the image is in the same directory as the html file you are using. Or... to use any file on your computer, you can use: file:///C:/Documents and Settings/User/My Documents/My Pictures/mypicture.gifOr, if i was completly wrong in your problem, hopefully the above is useful.Remember, all my examples are HTML and not XHTML. There are a great deal of differences... ie: Target command = bad in XHTML, and /> is used for many commands... and width/border type commands are usually css based... oh, and UL/OL etc are different... and and and... Hopefully everyone who replies will remember you stated you were learning HTML first and not XHTML. Thread is getting big enough I doubt people read all the above posts. Anyway, best of luck.

No it's OK, I got it, I keep trying to make things more complicated than they actually are. Also I wasn't sure if it had to be gif or not. If I want to use a picture/animation from another website can I just copy link location and insert it? Though I suppose then it runs the risk of being deleted.Appreciate you guys help a lot, I know you've probably got more productive, less tedious things you could be doing.
jpegs and gifs are the most commonly used image types on the web. Gifs work best for images with fewer colors or abrupt color transitions, like small buttons and icons. Jpegs work best for photos and larger, more detailed art. png types are gaining popularity and I predict will become the most common for new images. Their alpha transparency makes for nice-looking drop shadows. IE6 doesn't support the alpha stuff, but that user group is declining every year.A browser interprets an image but doesn't "convert" it to anything.
What are "abrupt color transitions", stark contrasting colors? So in coding it doesn't matter whether they're jpeg, png or gif, it's just an issue of quality/sharpness/file size of the picture?"Their alpha transparency makes for nice-looking drop shadows.":) I'll be honest, I have no idea what that means.
Link to comment
Share on other sites

Correct. the picture format doesn't matter at all for coding purposes.However, you can have a lot more fun with the design of the website if you involve gif/png transparency, or a vibrant jpg/png for your logo's. A gif logo will have pretty bad quality, due to limit of number of colors.As for quality, JPG can be brought down in quality on purpose to lower the file size of the picture. Technically all 3 can be lowered, but it's usually actually called "quality" in image programs when it comes to JPG. Lowering quality also gives it a blurry effect, to try and hide the fact its using less colors. If you lower a gif or png, you are doing the same thing by lowering the amount of colors used, which lowers file size.In reality, if you are good at image production the colors themselves dont matter. However, if you have a JPEG file from a camera of a neon green sign on a dark red background, it's going to be huge... because it tries to use as many shades of each color when transitioning to the next. (neon green to dark green and then a bit blue to dark red, etc).1. Anyway, file type doesnt matter for coding.2. Creative use of the file types DOES matter for DESIGNHope that mess makes sense to someone besides me.

Link to comment
Share on other sites

Abrupt color transitions. Imagine white text on a sky-blue background. At medium-low resolution (smaller file size) jpg's compression algorithm will introduce "artifacts," funky blurry junk, into the blue parts adjacent to the letters. Gifs don't do that.from wikipedia: "alpha compositing is the process of combining an image with a background to create the appearance of partial transparency."A .png image can be made with full-to-partiallly transparent sections so that any background material on your page will show through. This allows for things like drop shadows and smooth rounded edges.All modern browsers support this except (if you want to call it modern) IE6, still widely in use. Some javascript hacks exist that can be linked to your document that DO make alpha compositing work in IE6, but only if JS is enabled, and only if you want your client to download the extra overhead just to make your shadows pretty.

Link to comment
Share on other sites

You'll have to help me out a bit. I'm using notepad to view on ff, but your code doesn't seem to work in that way... in fact, you guys all using notepad? I get the sense I'm going quite... lowtech, on this.
Notepad++ if you're on a Windows machinejEdit if you're on a Mackate/kedit if you're on Fedora/Linux
Link to comment
Share on other sites

Abrupt color transitions. Imagine white text on a sky-blue background. At medium-low resolution (smaller file size) jpg's compression algorithm will introduce "artifacts," funky blurry junk, into the blue parts adjacent to the letters. Gifs don't do that.from wikipedia: "alpha compositing is the process of combining an image with a background to create the appearance of partial transparency."A .png image can be made with full-to-partiallly transparent sections so that any background material on your page will show through. This allows for things like drop shadows and smooth rounded edges.All modern browsers support this except (if you want to call it modern) IE6, still widely in use. Some javascript hacks exist that can be linked to your document that DO make alpha compositing work in IE6, but only if JS is enabled, and only if you want your client to download the extra overhead just to make your shadows pretty.
So how can I change a jpeg into a gif, vice versa, or either into a png? I just "save as" and put .png/.jpeg/.gif at the end and it'll sort itself out?This system seems overly complicated.
Link to comment
Share on other sites

I think I need to clarify, I didn't study computer science at all.I'm confident I can learn the language of coding, put it to use, and I've got a good eye for creative marketable products, but I think I'm missing some of the basics, or not getting the philosophy of programming/computers.I'm not sure if that makes sense to anyone.

Link to comment
Share on other sites

So how can I change a jpeg into a gif, vice versa, or either into a png? I just "save as" and put .png/.jpeg/.gif at the end and it'll sort itself out?
Depends on the software. You need a dedicated image converter or an actual image editing program. Photoshop is pretty common among people who do this stuff seriously. And anyway, conversion doesn't buy you a whole lot. It's how you save your image from the original edit that matters. If the artifacts are already there, conversion won't make them go away.
I think I'm missing some of the basics, or not getting the philosophy of programming/computers.
So what do you think you're missing? It seems like we're discussing image formats a lot more than maybe we need to right now . . . How's your HTML coming along? Do you have any pages up somewhere that we can look at?
Link to comment
Share on other sites

I don't really have anything particularly fascinating at the moment as I'm only up to frames, I didn't get much done yesterday unfortunately I had a lot of work. I'll hopefully cover tables and images now and then I'll put something up that you can look at. I mean I could look ahead and make something more interesting I suppose but I was trying to stick with what I can commit to memory, otherwise it feels a bit like cheating.

Link to comment
Share on other sites

Don't worry if you can't commit every single thing (like all the attributes for <tr>) to memory - most of us can't. The trick is to learn the general syntax and structure of the language, and for specific things use references, and eventually you will be able to remember more and more.

Link to comment
Share on other sites

OK had to go out briefly but here's an example, I just used movies.

<html><head><title>Blah Blah Movies</title></head><body bgcolor="	#989898"><br><hr><h1 align="center">Blah Blah Movies</h1><hr><a href="#spider">Spiderman</a><br><a href="#starwars">Starwars</a><br><a href="#Batman">Batman</a><br><hr<p align="center">   <a name="spider"></a>	  <a href="http://spiderman.sonypictures.com/" target="_blank">		 <img border="0" src="http://www.comicbookmovie.com/images/news/spider-man-3/spiderman3_blackchestposter.jpg" width="300" height="450">			</a>			   </p><br><br><br><p align="center">   <a name="starwars"></a>	  <a href="http://www.starwars.com/clonewars/site/index.html" target="_blank">		 <img border="0" src="http://www.taylortheteacher.com/wordpress/wp-content/uploads/2007/11/694px-star_wars_logosvg.png" width="550" height="400">			</a>			   </p><br><br><br><p align="center">   <a name="Batman"></a>	  <a href="http://www.starwars.com/clonewars/site/index.html" target="_blank">		 <img border="0" src="http://blog.ugo.com/images/uploads/DrakKnightPoster-4-24-08.jpg" width="450" height="600">			</a>			   </p><br><br><br></body></html>

Tell me what you think of the coding I know it's simple (and probably sloppy) but it's only been a couple of days. Also, how could I make those 3 picture links for example, so instead of one under another, all three are next to each other, but evenly spaced, kind of like columns in a newspaper.

Link to comment
Share on other sites

Not bad for where you're at. The indentation is a little weird, but that could be a copy/paste thing.There are two technical errors. First, add a doctype to the top of your document. I recommend getting used to the strict rules, so add this:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Next, notice in the lines below, the <hr> lacks a closing bracket. Typos will eventually mess you up.

<a href="#Batman">Batman</a><br><hr

Also, to qualify under strict html rules, image tags require an alt attribute. Even alt="" is legal, if a little lazy.The other thing I notice is that you've included a lot of style information using old-school methods. I mean things like this<body bgcolor = "#989898"><p align="center">where today the background and alignment would come in a CSS declaration. Now, I realize you've limited yourself to HTML without CSS, but I recommend not getting in any bad habits that you'll have to unlearn in just a few days or weeks. Better to have no style at all for now. I'm guessing you're getting these methods from a textbook or something? Better upgrade your source.As to your question, that too becomes a CSS issue. Yeah, I could tell you all kinds of old-fashioned work-arounds (stuff we did back in the 1990s!) but I won't. Rest assured the CSS methods exist, and when you make that leap, they'll be waiting for you. (You're really pretty close.) The good news is you've begun to recognize the sorts of limitations that led to the development of CSS in the first place.Anyway, keep it up. You might want to make a table to hold some spreadsheet-type data, and maybe a form, even if it doesn't do anything yet. And start validating your code. You can copy and paste here: http://validator.w3.org/

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...