Adblock breaks this site

Need some HTML explaining

Discussion in 'Web Programming' started by sm321, Apr 13, 2012.

Thread Tools

Thread Tools

  • Thread ID:
  1. sm321

    sm321 Grand Master

    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0
    Need some HTML explaining
    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.

    [​IMG]

    to say anything, but for example "Computer"? Thankyou.
     
    sm321, Apr 13, 2012
    #1
  2. RS2Legit

    RS2Legit Member

    Joined:
    Jul 8, 2011
    Posts:
    92
    Referrals:
    1
    Sythe Gold:
    0
    Need some HTML explaining
    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, Apr 13, 2012
    #2
  3. sm321

    sm321 Grand Master

    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0
    Need some HTML explaining
    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, Apr 13, 2012
    #3
  4. wackywamba

    wackywamba Guru

    Joined:
    Jul 14, 2005
    Posts:
    1,358
    Referrals:
    0
    Sythe Gold:
    1
    Need some HTML explaining
    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, Apr 13, 2012
    #4
  5. sm321

    sm321 Grand Master

    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0
    Need some HTML explaining
    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.

    [​IMG]
     
    sm321, Apr 13, 2012
    #5
  6. novice

    novice Active Member

    Joined:
    Jun 21, 2008
    Posts:
    111
    Referrals:
    0
    Sythe Gold:
    0
    Need some HTML explaining
    RS2Legit already explained that.
     
    novice, Apr 13, 2012
    #6
  7. wackywamba

    wackywamba Guru

    Joined:
    Jul 14, 2005
    Posts:
    1,358
    Referrals:
    0
    Sythe Gold:
    1
    Need some HTML explaining
    And the award for the most useless comment goes to....

    <TITLE>Page Title</TITLE>
     
    wackywamba, Apr 13, 2012
    #7
  8. sm321

    sm321 Grand Master

    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0
    Need some HTML explaining
    Sorry, that's my fault for not concentrating. Thankyou for the replies :)

    EDIT: How does this change when it's on/offline:

    [​IMG]
     
    sm321, Apr 14, 2012
    #8
  9. Jazz00006

    Jazz00006 Apprentice
    Visual Basic Programmers

    Joined:
    Aug 26, 2005
    Posts:
    807
    Referrals:
    0
    Sythe Gold:
    0
    Need some HTML explaining
    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, Apr 14, 2012
    #9
  10. sm321

    sm321 Grand Master

    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0
    Need some HTML explaining
    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:

    [​IMG]
     
    sm321, Apr 14, 2012
    #10
  11. Jazz00006

    Jazz00006 Apprentice
    Visual Basic Programmers

    Joined:
    Aug 26, 2005
    Posts:
    807
    Referrals:
    0
    Sythe Gold:
    0
    Need some HTML explaining
    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;
     
    Jazz00006, Apr 14, 2012
    #11
  12. sm321

    sm321 Grand Master

    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0
    Need some HTML explaining
    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?
     
    sm321, Apr 14, 2012
    #12
  13. Jazz00006

    Jazz00006 Apprentice
    Visual Basic Programmers

    Joined:
    Aug 26, 2005
    Posts:
    807
    Referrals:
    0
    Sythe Gold:
    0
    Need some HTML explaining
    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, Apr 14, 2012
    #13
  14. sm321

    sm321 Grand Master

    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0
    Need some HTML explaining
    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 :)
     
    sm321, Apr 14, 2012
    #14
  15. Jazz00006

    Jazz00006 Apprentice
    Visual Basic Programmers

    Joined:
    Aug 26, 2005
    Posts:
    807
    Referrals:
    0
    Sythe Gold:
    0
    Need some HTML explaining
    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.
     
    Jazz00006, Apr 14, 2012
    #15
  16. T R 1 B A L

    T R 1 B A L Grand Master
    Retired Sectional Moderator

    Joined:
    Jun 27, 2007
    Posts:
    2,726
    Referrals:
    1
    Sythe Gold:
    0
    Need some HTML explaining
    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.
     
    T R 1 B A L, Apr 18, 2012
    #16
< Hiring php programmer | API Integration: PHP >


 
 
Adblock breaks this site