Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Simple lines of code needed for basic editing

7:40 pm on Nov 21, 2011 (gmt 0)

New User

5+ Year Member

joined:June 14, 2011
posts: 10
votes: 0

As I've stated in the past... I'm very new to editing CSS. This site has been abundantly helpful and I've come to rely on the feed back of you more capable and experienced webmasters - BIG THANKS TO ALL THAT REPLY!

I need a few lines of code that would be really useful to me as I am editing the site. I'm sure these are very basic commands but for a beginner they can consume a large amount of my day. I now know how to insert a background image so I've included that line of code so that you can see the file paths. :) I look forward to any help you can provide. THANKS WEBMASTERS!

1. Adding a Background Image: background-image:url('App_Themes/Peacock/Img/MainBackground.png');
I need help -
2. Adding a "hot link" within a body of html text.
3. Adding/editing an image to HTML. (I need all formatting lines as well.. width, padding, margin, border etc)
6:53 am on Nov 23, 2011 (gmt 0)

Moderator This Forum from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
votes: 61

These are some very basic tasks, you are right. A good place to learn basic html, css and other code is at w3schools which is an easy site to find. Adding a link to text is as easy as

Words before your link <a href="http://example.com">words that will be a link </a>and more words after your link...

To add an image:
<img src="nameoftheimagefile.jpg" alt="alternate text">
the formatting is done in your css file. That example is for html, not for xhtml documents. You would add any margin, position, border, padding to your css using the img{ selector or as an image class as img.c{.

Go and spend half an hour a day at the site mentioned above and you will be able to practice while you learn and move ahead at your own pace.
Good luck.
7:02 am on Nov 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 346

2. Adding a "hot link" within a body of html text.

Bite your tongue. Never mind about the site at the far end of the hotlink; you're also doing a disservice to your users. Pages containing hotlinks can take several times as long to load up, as the user's browser has to go hunt down all those different domains.
2:56 pm on Nov 23, 2011 (gmt 0)

New User

5+ Year Member

joined:June 14, 2011
posts: 10
votes: 0

@ not2easy - Thanks for the awesome tip on www.W3Schools.com! I can tell that this is just what I will need to fill in some of the knowledge gaps.

@ lucy24 - do you have a better solution? regardless of the load time, it doesn't change the fact that the links are needed. If there is a smarter way of tackling the task I'm all ears! Please point me in the right direction.
5:57 pm on Nov 23, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

BRoberson1657 what she means is "hotlinking" is a term used to describe linking to a resource on an external site. So let's say you use the <img> element to link to an image from Amazon (or something.) This requires a request to Amazon, and uses their bandwidth to load your page, and is generally a nasty approach to building pages.

What you meant to say is hyperlink, or an inline link, as described above.

(I need all formatting lines as well.. width, padding, margin, border etc)

It's never really that simple. :-) An example, border for what doctype? border="0" is valid for HTML doctypes, but it's not a valid attribute for XHTML. To answer the question, most of what you ask for can be found for CSS - but "all formatting lines" would depend on context. You may need no CSS at all for a "ordinary image" but you can apply lots of CSS rules to modify it's appearance. Another example, a simple left floated image in which the text would "flow" around it can be done in many ways. The stock minimalist approach:

<img class="left-image" src="myimage.jpg" width="24" height="24" alt="my image">

The css:
img { border: none; } /* in case you wrap it in a link */
.left-image { float: left; margin: 0 12px 12px 0; }

But for many "purists" (probably not the right word) and for XHTML, you never want to leave a "bare element" in code source. Some examples of what I mean, in addition to the <img>,


<strong style="font-size:36px;">This may LOOK like a heading, but it's not - it's really big bare text.</strong><br>

<img src="myimage.jpg" alt="">
Here's some bare text. Since it has no semantic container, it doesn't indicate what kind of text it is.


Semantic containers do some of the lifting for us - and, give devices accessing the page some indication of "what the content is."


<h1>Ah. I'm a page heading, no argument.</h1>

<div class="left-image"><img src="myimage.jpg" width="24" height="24" alt="my image"></div>

<p>Here's some text. Since it is wrapped in a p, devices reading it know this is a paragraph and body text, distinctly different from the h1 above.</p>


In my example above I intentionally used <div> for the floated image because div, span, and br are generic elements with no semantic meaning - which is what I want in this context (or, if anything, says specifically, "this element has no semantic meaning, carry on . . . "). I could just as easily used <span> with it's display set to block.

So there really is no "give me teh codez" for any element, it depends on context.

One more (Rant? comment?) about <img> attributes, this
<img src="myimage.jpg" alt="my image">

as opposed to this
<img src="myimage.jpg" width="24" height="24" alt="my image">

The reason you want to include the width and height attributes in <img> elements, when you can, is because a browser first READS the source code then requests the resources in it. If it reads an <img> element and width and height attributes are present, it knows to "save space" for that element before the page renders.* Without them, you may get that "floating around" effect as a page loads, elements jiggle and joggle until all the images loads and assume their position.

* Often the w/h attributes are left off if you apply CSS to these images for the same effect:

<img id="img1234" src="myimage.jpg" alt="my image">


#img 1234 { width:24px; height:24px; }

.. however, this means you need to apply a whole set of classes and/or ID's to your CSS, bloating it further. In terms of maintenance, it's often easier to just include them inline, even though that's against the idea of separating presentation from markup.

In much of what I do, BOTH of these are impossible or at the least, difficult. Many CMS's don't allow (or make it difficult to) apply accurate width and height attributes, so you just have to leave them off and let it jiggle joggle as it loads. :-)
6:50 pm on Nov 23, 2011 (gmt 0)

New User

5+ Year Member

joined:June 14, 2011
posts: 10
votes: 0

@ rocknbil - WOW, thanks for the info. This is VERY useful.
As I am assembling my knowledge of this new world of code - I really appreciate the long answers and supplemental info surrounding my questions. I know my questions are quite elementary and sometimes I don't know exactly how to frame my questions... but I have to start somewhere. It's very helpful to speak the "LINGO" when addressing problems (simple as they may be) and this helps me a great deal. Thanks for your time and attention to detail.
10:15 am on Nov 24, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

Hi BRoberson1657, and a warm welcome to WebmasterWorld :)
Thanks for taking the time to acknowledge the value of the earlier posts. Don't be too concerned about the "lingo" - sometimes you have to ask the question to learn the correct terminology, and if we're not sure about the issue, someone will ask for more information.

Everyone has a favourite place to recommend to new coders, and I second not2easy's suggestion to set aside time each day to read and practise. Also spend some of that time reading the posts here - you'll be amazed how quickly your knowledge expands. But I would suggest you be wary of w3schools. Check out the alternative resources suggested by birdbrain in this recent thread [webmasterworld.com], and don't forget our very own Css Crash Course [webmasterworld.com]