Need some HTML explaining

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

Sign in to Post
Thread Tools

Thread Tools

  • Thread ID:
Need some HTML explaining
  1. Unread #1 - Apr 13, 2012 at 6:36 AM
  2. sm321
    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0

    sm321 Grand Master

    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.
     
    Share
  3. Unread #2 - Apr 13, 2012 at 9:49 AM
  4. RS2Legit
    Joined:
    Jul 8, 2011
    Posts:
    92
    Referrals:
    1
    Sythe Gold:
    0

    RS2Legit Member

    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!
     
    Share
  5. Unread #3 - Apr 13, 2012 at 11:19 AM
  6. sm321
    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0

    sm321 Grand Master

    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 :)
     
    Share
  7. Unread #4 - Apr 13, 2012 at 1:55 PM
  8. wackywamba
    Joined:
    Jul 14, 2005
    Posts:
    1,358
    Referrals:
    0
    Sythe Gold:
    1

    wackywamba Guru

    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.
     
    Share
  9. Unread #5 - Apr 13, 2012 at 3:17 PM
  10. sm321
    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0

    sm321 Grand Master

    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]
     
    Share
  11. Unread #6 - Apr 13, 2012 at 6:50 PM
  12. novice
    Joined:
    Jun 21, 2008
    Posts:
    111
    Referrals:
    0
    Sythe Gold:
    0

    novice Active Member

    Need some HTML explaining
    RS2Legit already explained that.
     
    Share
  13. Unread #7 - Apr 13, 2012 at 6:52 PM
  14. wackywamba
    Joined:
    Jul 14, 2005
    Posts:
    1,358
    Referrals:
    0
    Sythe Gold:
    1

    wackywamba Guru

    Need some HTML explaining
    And the award for the most useless comment goes to....

    <TITLE>Page Title</TITLE>
     
    Share
  15. Unread #8 - Apr 14, 2012 at 4:33 AM
  16. sm321
    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0

    sm321 Grand Master

    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]
     
    Share
  17. Unread #9 - Apr 14, 2012 at 5:34 AM
  18. Jazz00006
    Joined:
    Aug 26, 2005
    Posts:
    807
    Referrals:
    0
    Sythe Gold:
    0

    Jazz00006 Apprentice
    Visual Basic Programmers

    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.
     
    Share
  19. Unread #10 - Apr 14, 2012 at 6:53 AM
  20. sm321
    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0

    sm321 Grand Master

    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]
     
    Share
  21. Unread #11 - Apr 14, 2012 at 7:06 AM
  22. Jazz00006
    Joined:
    Aug 26, 2005
    Posts:
    807
    Referrals:
    0
    Sythe Gold:
    0

    Jazz00006 Apprentice
    Visual Basic Programmers

    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;
     
    Share
  23. Unread #12 - Apr 14, 2012 at 7:10 AM
  24. sm321
    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0

    sm321 Grand Master

    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?
     
    Share
  25. Unread #13 - Apr 14, 2012 at 7:26 AM
  26. Jazz00006
    Joined:
    Aug 26, 2005
    Posts:
    807
    Referrals:
    0
    Sythe Gold:
    0

    Jazz00006 Apprentice
    Visual Basic Programmers

    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>
     
    Share
  27. Unread #14 - Apr 14, 2012 at 7:34 AM
  28. sm321
    Joined:
    Nov 2, 2011
    Posts:
    2,514
    Referrals:
    1
    Sythe Gold:
    0

    sm321 Grand Master

    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 :)
     
    Share
  29. Unread #15 - Apr 14, 2012 at 7:48 AM
  30. Jazz00006
    Joined:
    Aug 26, 2005
    Posts:
    807
    Referrals:
    0
    Sythe Gold:
    0

    Jazz00006 Apprentice
    Visual Basic Programmers

    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.
     
    Share
  31. Unread #16 - Apr 18, 2012 at 8:13 PM
  32. T R 1 B A L
    Joined:
    Jun 27, 2007
    Posts:
    2,726
    Referrals:
    1
    Sythe Gold:
    0

    T R 1 B A L Grand Master
    Retired Sectional Moderator

    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.
     
    Share
< Hiring php programmer | API Integration: PHP >

Users viewing this thread
1 guest


 
 
Adblock breaks this site