• Log in or sign up for an account here: https://www.sythe.org/login

Need some HTML explaining

sm321

sm321

Grand Master
Joined
Nov 2, 2011
Sythe Gold
0
Messages
2,514
I know a little bit of HTML, but can someone explain the following to me?

Things highlighted in red are the things I don't know:

<a title="Trigger-Happy" class="linkopacity image" href="http://host.example.com" target="_blank"><img src="images/previmages/triggerhappy_previcon.gif" alt="Trigger Happy" width="99" height="159" style="border:0px"></a>

I can never get the alt text to work. Also, how is the "tab" title defined? E.g.

pmEU


to say anything, but for example "Computer"? Thankyou.
 
For the specified anchor tag (<a></a>) which acts as a link, the highlighted attributes act as follows:

title="..." -> The title is text that appears as you hover over the link as a tooltip. It also helps to improve the browsing of a visually impaired person. It should explain the link.

class="..." -> The class attribute is used to identify the element in terms of CSS. You apply style tags in CSS to specific IDs and classes. A class can be applied many times on a page, so for instance, if you have many links you want to look the same you would set them all equal to the same class, and then you just need to set styling for that class.

alt="..." -> This attribute is set for the image. It is similar to the title tag above; it appears if the image specified cannot be loaded, it appears when you hover your mouse over the picture and it also appears for the visually impaired. It should describe what the picture is.

To set a "tab title" you need to place the title tags <title></title> within your head tags:

<html>
<head>
<title> Your Title Here.. </title>
</head>
<body>
....
</body>
</html>

Hope this helped!
 
RS2Legit said:
For the specified anchor tag (<a></a>) which acts as a link, the highlighted attributes act as follows:

title="..." -> The title is text that appears as you hover over the link as a tooltip. It also helps to improve the browsing of a visually impaired person. It should explain the link.

class="..." -> The class attribute is used to identify the element in terms of CSS. You apply style tags in CSS to specific IDs and classes. A class can be applied many times on a page, so for instance, if you have many links you want to look the same you would set them all equal to the same class, and then you just need to set styling for that class.

alt="..." -> This attribute is set for the image. It is similar to the title tag above; it appears if the image specified cannot be loaded, it appears when you hover your mouse over the picture and it also appears for the visually impaired. It should describe what the picture is.

To set a "tab title" you need to place the title tags <title></title> within your head tags:

<html>
<head>
<title> Your Title Here.. </title>
</head>
<body>
....
</body>
</html>

Hope this helped!
Click to expand...

Is there are huge difference between the title and alt? I have tried alt before, but I'm yet to try title. And yes, it did help, thankyou :)
 
sm321 said:
Is there are huge difference between the title and alt? I have tried alt before, but I'm yet to try title. And yes, it did help, thankyou :)
Click to expand...

The difference as RS2Legit pointed out is that the alt is the "alternate text", so in the case of the picture being unable to display - the alt text will be displayed.

Whereas the title is shown when you hover over the link..

So in summary, they're hardly the same thing at all.
 
wackywamba said:
The difference as RS2Legit pointed out is that the alt is the "alternate text", so in the case of the picture being unable to display - the alt text will be displayed.

Whereas the title is shown when you hover over the link..

So in summary, they're hardly the same thing at all.
Click to expand...

That's why it didn't work... I thought that the alt text was the hover over text, not the title. Thankyou :)

EDIT: If anyone reads this bit, how do you define the tab name? E.g.

pqPM
 
That image is part of a bigger PHP script.

Pretty much;
Code: 
<?php
    if ($helpdeskOnline) {
        // Help desk is online
        print file_get_contents("online.png");
    } else {
        // Help desk is offline
        print file_get_contents("offline.png");
    }
?>


Although there would be some significant changes, that would be the gist of the script.
 
Jazz00006 said:
That image is part of a bigger PHP script.

Pretty much;
Code: 
<?php
    if ($helpdeskOnline) {
        // Help desk is online
        print file_get_contents("online.png");
    } else {
        // Help desk is offline
        print file_get_contents("offline.png");
    }
?>


Although there would be some significant changes, that would be the gist of the script.
Click to expand...

Ok, but I don't know about PHP, but I can sort of see how it works. Also, are there any ways to include a widget in a certain place other than the simple left, center and right? E.g. have it where this black box is:

pxgQ
 
Jazz00006 said:
http://www.tizag.com/cssT/position.php

You'll need to use CSS to get exact positioning.

That black box starts at 130:136, so you'd offset the widget by 130px on the left side, and 136px on the top.

Code: 
position: relative; 
top: 136px;
left: 130px;
Click to expand...

So if I had this code:

Code: 
<base target="_blank"><div align="center"><iframe allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.currencyconverter.co.uk/widget/ccwidget.html?from=GBP&to=EUR&val=1&du=3600&ac=1" border="0" id="ccwidget_iframe_0" name="ccwidget_iframe_0" scrolling="no" width="200" frameborder="0" height="236"></iframe><br /><div style="font-size:10px;margin:0;padding:0;text-align:center;width:200px;"><a href="http://www.currencyconverter.co.uk" style="text-align:center;" id="ccwidget_lnk">CurrencyConverter.co.uk</a></div>

How would I utilize CSS? Thankyou for your help by the way :)

EDIT: Is there any way to make it bigger too?
 
I assume you want the iframe modified.

Lets break it down;
Code: 
<iframe 
allowtransparency="true" 
hspace="0" 
vspace="0" 
marginheight="0" 
marginwidth="0" src="http://www.currencyconverter.co.uk/widget/ccwidget.html?from=GBP&to=EUR&val=1&du=3600&ac=1" 
border="0" 
id="ccwidget_iframe_0" 
name="ccwidget_iframe_0" 
scrolling="no" 
width="200" 
height="236"
frameborder="0" 
></iframe>

You want to edit these 2 parts first.
Code: 
width="200" 
height="236"

Make the width and height measurements pixels.

Code: 
width="200px" 
height="236px"


From there, modify them so they are bigger, then the iframe will get bigger.


Adding a style attribute allows you to use CSS inside your html tags.

Code: 
<iframe 
allowtransparency="true" 
hspace="0" 
vspace="0" 
marginheight="0" 
marginwidth="0" src="http://www.currencyconverter.co.uk/widget/ccwidget.html?from=GBP&to=EUR&val=1&du=3600&ac=1" 
border="0" 
id="ccwidget_iframe_0" 
name="ccwidget_iframe_0" 
scrolling="no" 
width="200px" 
height="236px"
style="position: relative; top: 136px;left: 130px;"
frameborder="0" 
></iframe>

or

Code: 
<iframe allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.currencyconverter.co.uk/widget/ccwidget.html?from=GBP&to=EUR&val=1&du=3600&ac=1" border="0" id="ccwidget_iframe_0" name="ccwidget_iframe_0" scrolling="no"  width="200px"  height="236px" style="position: relative; top: 136px;left: 130px;" frameborder="0" ></iframe>
 
Jazz00006 said:
I assume you want the iframe modified.

Lets break it down;
Code: 
<iframe 
allowtransparency="true" 
hspace="0" 
vspace="0" 
marginheight="0" 
marginwidth="0" src="http://www.currencyconverter.co.uk/widget/ccwidget.html?from=GBP&to=EUR&val=1&du=3600&ac=1" 
border="0" 
id="ccwidget_iframe_0" 
name="ccwidget_iframe_0" 
scrolling="no" 
width="200" 
height="236"
frameborder="0" 
></iframe>

You want to edit these 2 parts first.
Code: 
width="200" 
height="236"

Make the width and height measurements pixels.

Code: 
width="200px" 
height="236px"


From there, modify them so they are bigger, then the iframe will get bigger.


Adding a style attribute allows you to use CSS inside your html tags.

Code: 
<iframe 
allowtransparency="true" 
hspace="0" 
vspace="0" 
marginheight="0" 
marginwidth="0" src="http://www.currencyconverter.co.uk/widget/ccwidget.html?from=GBP&to=EUR&val=1&du=3600&ac=1" 
border="0" 
id="ccwidget_iframe_0" 
name="ccwidget_iframe_0" 
scrolling="no" 
width="200px" 
height="236px"
style="position: relative; top: 136px;left: 130px;"
frameborder="0" 
></iframe>

or

Code: 
<iframe allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.currencyconverter.co.uk/widget/ccwidget.html?from=GBP&to=EUR&val=1&du=3600&ac=1" border="0" id="ccwidget_iframe_0" name="ccwidget_iframe_0" scrolling="no"  width="200px"  height="236px" style="position: relative; top: 136px;left: 130px;" frameborder="0" ></iframe>
Click to expand...

Ok, so I have this code:

Code: 
<iframe 
allowtransparency="true" 
hspace="0" 
vspace="0" 
marginheight="0" 
marginwidth="0" src="http://www.currencyconverter.co.uk/widget/ccwidget.html?from=GBP&to=EUR&val=1&du=3600&ac=1" 
border="0" 
id="ccwidget_iframe_0" 
name="ccwidget_iframe_0" 
scrolling="no" 
width="400px" 
height="472px"
style="position: relative; top: 544px;left: 520px;"
frameborder="0" 
></iframe>

Yet every time I change either:
Code: 
width="400px" 
height="472px"
Or
Code: 
style="position: relative; top: 544px;left: 520px;"

It just seems to move around the page, but not increase in size. Thankyou for your help by the way :)
 
Thankyou for your help by the way
Click to expand...
You're welcome.


Try
Code: 
style="position: absolute; top: 544px;left: 520px;"
This will make it have an absolute position, rather than one relative to the rest of the elements.


As for the size, I can see it getting bigger or smaller.
HOWEVER, the content inside of the iframe will always be the same size.
The textbox/select elements/buttons and general layout will never change, this is not something you can manipulate without investing in some javascript.
 
sm321 said:
Ok, so I have this code:

Code: 
<iframe 
allowtransparency="true" 
hspace="0" 
vspace="0" 
marginheight="0" 
marginwidth="0" src="http://www.currencyconverter.co.uk/widget/ccwidget.html?from=GBP&to=EUR&val=1&du=3600&ac=1" 
border="0" 
id="ccwidget_iframe_0" 
name="ccwidget_iframe_0" 
scrolling="no" 
width="400px" 
height="472px"
style="position: relative; top: 544px;left: 520px;"
frameborder="0" 
></iframe>

Yet every time I change either:
Code: 
width="400px" 
height="472px"
Or
Code: 
style="position: relative; top: 544px;left: 520px;"

It just seems to move around the page, but not increase in size. Thankyou for your help by the way :)
Click to expand...

The prior should be the height and width, the latter is the HTML's css styling defining where the item is. 'Relative' means it's in relation to where it would usually be, and you can move it in relation with top, bottom, left or right. Absolute defines where the element is directly, without relating it to where it would normally be.
 
You must log in or register to reply here.

Similar threads

Tr1gg4
 
any1 with HTML knowledge?
Replies
11
Views
288
Tr1gg4
Tr1gg4
H
 
whoo my first html knowledge
Replies
7
Views
1,084
hippohumper
H
N
 
explaining how to make html scripts (easy+++, good instructions)
Replies
4
Views
1,000
sulliwan
sulliwan
Pokemoners
 
Help with Tumblr coding
Replies
5
Views
1,073
Pokemoners
Pokemoners
brandonl1415
Lightbulb
selling lvl 73 init pure
Replies
0
Views
107
brandonl1415
brandonl1415
Runescape Gamblingrunescape gambling
Back
Top