Basic linking and image tutorial (plus a little Astro-Porn)

[mckitterick]

This is Teh Age of Teh Intartubes, and everyone who posts to blogs or has a website should know a little HMTL. Here's how you type a link:

<a href="link-path" target="_blank">Text that shows up in LJ and describes link</a>

Insert the path to your link inside the quotation marks; use the _blank value for the target attribute to open the link in a new tab or window so the reader doesn't get lost and can return to LJ without clicking "back" a hundred times.

If you want to link a photo, use this:

<a href="link-path" target="_blank"><img src="link-to-photo"></a>

Here you have an anchor tag (that's what a does) again, which is what makes the image link to a website, and that link is anchored to an image (that's what img does) instead of text - works the same!

If an image you want to show is really big (on LJ, consider anything wider than 640 pixels to be too big to fit most display styles), you can cheat it down in size by modifying the code like this:

<img src="link-to-photo" width="600">

The width attribute tells the internet browser how wide it should display an image, no matter how wide it originally appeared; note that you don't need to define height in modern browsers.

Here's how it looks in practice, showing some awesome water geysers blasting into space over Saturn's moon, Enceledaus:


Click the image to see the story.

Hope that helps!

Chris

Comments

[stuology.livejournal.com]

You should probably mention that while your image tag is fine for html 4.01 and earlier, for the latest standards, you need to close it.

<img src="link-to-photo" width="600" />

[mckitterick.livejournal.com]

Well, except for browsers like Firefox and some others, which don't understand the / element in tags! (I discovered this while using it in the BR tag.) Not using the / in tags works in all current browsers....

[stuology.livejournal.com]

Um, huh? Yes it does.

[mckitterick.livejournal.com]

Hm, well, some weirdo browser that they have installed on the KU computer lab computers!

[stuology.livejournal.com]

It really depends on the DTD of the page you are editing. And it also depends that all the html before it is valid. It can seem like something later in your page isn't working, but that element is fine, it is rather something else that is is invalid which has cascaded down until your browser just can't figure out what you are trying to do.

I can guarantee you that if you are using the correct DTD, Firefox will recognize short form closing for tags that can use it.

[mckitterick.livejournal.com]

I noticed this while doing VERY basic HTML exercises during class, in the BR tag. Can't recall if it was Firefox (or if it was, what version) or some other offbeat browser. KU loves to use offbeat browsers. The only reason the WWW folks are putting in the extraneous / is for newbies who don't understand that a stand-alone tag needn't be closed, anyhow, so it shouldn't matter if it's there or not.

[stuology.livejournal.com]

The only reason the WWW folks are putting in the extraneous / is for newbies who don't understand that a stand-alone tag needn't be closed

No it isn't. The WWW folks put it in there to make it a well-formed document. It makes it easier for tools to read and use it. It helps to maintain interoperability between user agents.

*And* if you are making a website for the State of Kansas, then you have to follow Web Content Accessibility Guidlines. Part of those guidelines are that you have to make content that can be presented in different ways without losing information or structure and you have to make it compatible with current and future user agents, including assistive technology.

Part of implementing those specification are having well-formed documents, which includes all elements having start and end tags and nesting according to the specification of the DTD you are using.

[mckitterick.livejournal.com]

...which makes me wonder why KU installs browsers that don't display this form of tag properly....

(Thankfully, I only have one site that has to follow KU guidelines; most of what I do is for CSSF or my class websites, and those aren't official KU sites and, thus, free of that monstrous CSS.)

[siro-gravity.livejournal.com]

LOL!!! you're kidding, right? i've been resizing all my images up at photobucket, and have been doing so for. . .hmmmm. . .over 4 years. learn something new every day, right?

i've been doing the

[Error: Irreparable invalid markup ('<a [...] time,>') in entry. Owner must fix manually. Raw contents below.]

LOL!!! you're kidding, right? i've been resizing all my images up at photobucket, and have been doing so for. . .hmmmm. . .over 4 years. learn something new every day, right?

i've been doing the <a href thing for a long time, too...i don't understand what the "target" means here.

i go: < a href="the url i want it to go to" > then i write whatever text (or image) here, understanding that it will be hot, then i type: < /a> hope this makes sense!!

[siro-gravity.livejournal.com]

AAAAAAHAHA HA HAA HA!!! WHAT A MESS! i totally have to leave it there! it shows how much i need instruction! :D

[mckitterick.livejournal.com]

When making a link, you can identify the target window where the link opens (instead of closing the current one and moving on to the link) by using the target="new-window-name" attribute. If you use "_blank" as the target, it opens in a new window (or tab) each time.

[siro-gravity.livejournal.com]

well hot damn!!! it totally works! :D thanks, chris. i haven't tried resizing yet. i didn't use "_blank" but gave it a name instead.

[mckitterick.livejournal.com]

Cool! Giving it a name opens a new tab or window with that name, so if you use that name again, it'll open whatever other links you include in that same window (rather than a new one each time).

[mckitterick.livejournal.com]

So often, I see people post images (or link to others' images) that are wider than the screen - often comics. This is mostly for those folks. The astro-porn I post every so often usually comes from NASA and is almost always way bigger than the screen can show; I don't want to mess up my friends' views of their FLs.

[siro-gravity.livejournal.com]

i never post huge-ass pix, for the reason you give here: it's too wide for people's screens, and anyhow, it's kind of obnoxious. i've just always solved the problem by re-sizing at a separate upload site. now i know i can do it by typing the size in the tag.

eta: oops, meant to post that as a reply. oh well.

Newbie

[rambler75.livejournal.com]

hey I have 0 linking experience (unless you count copy and pasting in email) Can you write these instructions at the level of say a 3 year old. I tried to copy and past your phrase, but it didn't work when I input link.

I copy and pasted the link from the address bar in the web browser. Also I use Firefox.

Any help is much appreciated

Re: Newbie

[mckitterick.livejournal.com]

In this bit of HTML:

<a href="link-path" target="_blank">text you want to make into a link</a>

Replace "link-path" with the full path copied from your browser address. Also replace "text you want to make into a link" with the text you want to show up as hypertext.

(Now let me post this and see if it shows up properly *g*)

Re: Newbie

[rambler75.livejournal.com]

Maybe I am not doing it right. Do I keep the quotation marks or leave them off?

Re: Newbie

[rambler75.livejournal.com]

Neva mind, figured it out, was in rich text... good grief :)