Day Six - More Link Attributes
Today we will learn:
-- How to make links open in a new window (and also in the entire current window)
-- How to make a link that will send mail
-- How to erase that annoying border around linked images
First off: Ever been to a site that you really liked, and seen a link you wanted to click on, but didn't know if the new page would load in the same browser window? There are various user-end ways of getting around this: control-N will open a new window with the same page, and then you can click the link and have both pages; also, right-mouse-click on the link and select Open In New Window. But not everyone does this. As a webmistress, I want people to stay on my site. So I can direct the browser to open the link in a new window.
Open your handy index.html in Notepad, and find a link. After the href="" attribute, type in this:
Save the file, open the index.html in a browser, and click the link. (If the index.html was already open, remember to hit the Refresh button, or hit F5, to reload the page so the change will take effect.) The link will open in a new browser window! Yay!
I can parse out this code a bit, but not entirely. For example, I can tell those curious to know that the 'target' command (which will come into a lot of use later) tells the link that something specific will happen, that the normal command of 'open this link' will be modified. The link will be targeted to someplace specific. 'Blank' means to open the link in a previously blank browser. If there are no previously blank browsers, the current browser will create one. Hence, you get a new window.
However, what the '_' is for, I do not know. It just is. Type it and be happy. *Smile*
Ever clicked on a link in, say, Hotmail, and it opens in a new window, but it has that little Hotmail bar still up at the top? The page is being viewed, but Hotmail's logo is still up there. Or, some people will code a frames-based site, and include a link to your page, but your page will load inside theirs? A common error, but an annoying one. There is a way out.
This tells the browser to load the link into the top of the currently open browser, thus erasing that nasty Hotmail bar, or 'breaking out of someone else's frames.' For example, if you are reading this page in MSIE, and scrolling through the little box inside the HTML 3-A-Day Index, and go all the way down to the bottom of this page where it has a link to the main page of IrgendAnders, and click that link, it will open in the whole page, not just in this iframe box. That link contains the 'target="_top"' command.
You've seen the links on pages. "Email me!" Maybe with a spinning icon of some sort, a mailbox, a letter. You click on this link, but instead of loading a whole new window, your mail client opens. Why?
It's the mailto attribute. Find some blank space and type:
<a href="mailto:firstname.lastname@example.org"> Email me at YourEmail@Domain.com </a>
Save, refresh, and lo and behold, an email link! You will never need to specify a target for email links; they automatically open in your default mail program.
Two lessons ago, you learned how to insert an image into your code and make it a link. However, it has a colored bar around it; ew. There is a short and sweet way to get rid of this colored bar. Go to the image that is linked, and in the img tag, but not the A href tag, type in this: border=0
Save, reload, and voila! The border is gone.
This command is in the img tag and not the a href tag because it deals only with the image, not with the link itself. If the link were text, it would not be effective to tell a text to have no border. But since it's an image attribute to have a border, you can tell the image to have no border.
If, for some reason, you wanted to, or it suited your website design purposes to have a border around linked images, sure, you can specify 'border=1' or 'border=4'. No one does it these days, but who knows, maybe it'll be the next fad. With the internet, you can't ever quite really tell.
So, that's that. Target blank and top, mailto, and border 0.
Guess what! It's been one week! You've been learning HTML for a mere six days, and can already make a pretty snazzy looking webpage! Congratulations! *Throws confetti and dances*
To sum it ALL up for Week One:
Day One: HTML, head, body.
Day Two: Title and two METAs.
Day Three: Text color, br, p.
Day Four: A href, Img src, and putting them together.
Day Five: bgcolor, background, and the links.
Day Six: Target blank and top, mailto, and image borders.
That's an awful lot, and all in one week! Be proud of yourself! You're well on your way to becoming a hard-core, well-versed programmer. And how easy is this?
If you're using these HTML tutorials to make a page on the Net, Please Please Please email me! I'd love to see! Sanna@SannaSK.com. And I bet you looked at that link and said, 'I know how to do that!!' Great for you!
And on the seventh day, you rest. Admire your webpage. If you have space on the Net, and have your page out there, email some of your friends and say, 'Look what I learned how to do, and all in one week!'
The day after that, please do come back. For we will start in anew.
Week Two, Day One: Intro to Tables.