... <img src="/PhpProject1/vital1_top_logo.jpg" height="180" border="0px" > height="180" border="0px" " >
type="text/css" rel="stylesheet" /> ...
</head>
Every time i use this tag appears a "_" on the right of the image
The code you pasted is borked (double quotes at the beginning of href and an extra '>' in the middle of the img tag) so I'm guessing this isn't a real example. My guess is that you have some kind of whitespace between your img tag and the end of your a tag, like so
<img src="..">
which will show up as an underlined space. The whitespace might be a newline too mind you, so you should always keep them tight. For example, the following will produce the same problem
<a href="..."><img src="...">
</a>
HTH.
<a> and <img> are not allowed in <head>
Try:
<img src="/PhpProject1/vital1_top_logo.jpg" height="180" border="0px" />
It might help if you'd stick to the HTML syntax, right now this snippet is just gibberish. I tried cleaning it up, but then there's almost nothing left that makes sense.
You added two double quotes:
<a href=""http:
Use a single one
<a href="http:
Related
I'm a bit of a rookie programmer, I started a html website recently. It is going to be a project between my friend and I. It will mainly feature flash games, but I added a "Chat" feature from a website called "chatbutton.com". On the left side of the screen there is three buttons, "Games", "Chat", and "About". When I am on the "Games" and "About" pages, all the buttons work perfectly fine, but when I am on the "Chat" page, the "Games" button dosen't seem to work. Here is the code for the chat page:
<HTML>
<HEADER>
<TITLE>CBgames.com</TITLE>
</HEADER>
<BODY bgcolor=#474747 text=#FFFFFF>
<CENTER>
<img src="siteimages/title.gif">
</CENTER>
<table>
<tr>
<td><img
<a href=file:///C:/Users/user/Desktop/htmlwebsite/games.html>
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" /><br>
<a href=file:///C:/Users/user/Desktop/htmlwebsite/chat.html>
</br><img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" /><br>
<a href=file:///C:/Users/user/Desktop/htmlwebsite/about.html>
</br><img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" /><br>
</br></td>
<td><iframe name="CHATBUTTON_CHATBOX" id="CHATBUTTON_CHATBOX" src="https://www.chatbutton.com/chatroom/18374628/" width="1500" height="700" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no">Enter Chat Room</iframe>
<script type="text/javascript">
CHBT_channel="18374628";
CHBT_profanityfilter="1";
CHBT_position="inline";
</script>
<script type="text/javascript" src="https://www.chatbutton.com/c.js">
</script>
</td>
</tr>
</table>
</BODY>
FIXED IT: I accidently wrote <img in line 11
This is because, when you make a tag (most times) such as <a>, you have to close it. In your code, you create an <a>:
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
but never close it, so the table is included inside of the link. To solve this problem, close all of your <a>'s as follows:
<a href="file:///C:/Users/user/Desktop/htmlwebsite/games.html">
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" />
</a><br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/chat.html">
<img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" />
</a><br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
<img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" />
</a><br>
Also, don't forget to put your file path for your href in quotes ("). And, there's no need to close <br> separately. You really don't need to close them at all.
EDIT: You have part of an img tag before your <a>'s. Either delete that or make it into something.
It looks like you forgot to close your <a> tags with an ending </a> tag. So your browser still thinks the table is part of the hyperlinked section.
Side note: put your file path in quotations after the href=
You have a <img partial tag before your first link.
Also, you need to close your <a...> tags with </a> after the <img>.
Note that you are referencing files that are on your local computer, so obviously no one else will be able to see them.
You might want to run your code through an HTML validator.
<html>
<head><title>Real.com</title>
</head>
<body bgcolor= “white” text=“red”>
<h1>welcome to my site!</h1>
<h2>Welcome</h2>
<p> |Home|
<b>Welcome</b></p>
<center><img src=“john_hancock.jpg” width=“400” height=“500” alt=“john_hancock”></center>
<br>
<a href=“home.html” style=“color:red;”>Home
<body>
</html>
I am trying to upload an image to the website and is trying to create the code for fun, and I am not sure where its going wrong?
Both the file and Image are both in the same directory as well!
Thank you for your help in advance!
You use bad quotes, use " instead of ”. In whole document. Try to find replace all in your text editor.
Image tag will be:
<img src="john_hancock.jpg" width="400" height="500" alt="john_hancock">
syntax error change any “ ” to ""
You used bad quotation marks. Use " instead of ”.
The proper image tag would be: <img src="john_hancock.jpg" width="400" height="500" alt="john_hancock">
Whenever you are not sure where your error is, consider using the w3c HTML-Validator! https://validator.w3.org/
It will tell when your html file contains errors.
1) You're are using the so-called typographical quotation marks (“ and ”) while you ought to use the so-called neutral quotation mark (").
2) The img tag needs to be closed, like so:
<img src="image.jpg" />
3) You haven't closed your anchor tag.
I'm learning html/css and following the tutorial # W3Schools.com.
The code that I'm having trouble with is # http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align
In line 11
<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p>
what does the / do just just before the > and after the height attribute?
I looked at http://www.w3schools.com/tags/tag_img.asp but it didn't mention /.
Absolutely nothing, the trailing / is just ignored by the parser.
It is allowed on void tags (i.e. those without other tags/text content inside) by HTML5 specs to make the tag "self-closing", thus the markup valid XML. But it has no HTML-specific meaning.
Conversely, it is compulsory in xHTML for the same reason (making the markup valid XML).
In HTML there are two kind of tag :
First, e.g <div> that you need to close like </div> because it can have other tag inside
Second, e.g <img/> <br/> that doesn't need </img> or </br> to close. These are called void tags means it can't contains other tags.
The "/" is basically used for ending tags.
In HTML you need to start your tag and you need to end your tag
the code
here<img
marks the opening of the tag
so you need to close it with />
/> is required for ending HTML tags which don't have a closing tag . They are required to make tags compliant with XHTML.
Other examples are
<br/>
<hr/>
in HTML, elements have a beginning and ending tag e.g. <p> & </p> and in between these beginning and ending tags come the content of that element.
But some elements do not have content e.g. <br /> for line break and <img src="" /> for images. Such Elements are called empty elements and do not need a closing tag separately. Hence, the /> denotes closing of this tag.
in html each end every tag has an opening and closing like for body tag, the syntax is like <body></body>
similarly for imagae tag its like <img></img>
But we can use the other short form also...which is we are marking the closing option also with the same img tag... <img/> and then we can give all the options (properties for the img tag) inside it . src="w3schools_logo.gif" alt="W3Schools" width="270" height="50"
so it should be finally like <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" />
I stumbled across some bizarre behavior in Firefox 12. Consider the following HTML:
<!DOCTYPE html>
<img src="resources/csv.png">
<img src="resources/globe.png">
<img src="resources/clock.png">
<img src="resources/key.png">
<img src="resources/delete.png">
When this renders, I notice there's a small space between the first and second images. If I do a "text selection" around all of the images, I see there's a sneaky little whitespace character between them:
I can think of no reason for this, but my intention is to make all of my buttons links instead, so I tried that too to see if it had any effect. Here's the new code:
<!DOCTYPE html>
<a><img src="resources/csv.png"></a>
<a><img src="resources/globe.png"></a>
<a><img src="resources/clock.png"></a>
<a><img src="resources/key.png"></a>
<a><img src="resources/delete.png"></a>
Once again, here's the rendered output, which has been selected. Notice now there's a space after each image:
Can anyone think of a logical explanation for this quirk? Is it a problem in my HTML, or perhaps a bug in Firefox? Can anyone think of a workaround, perhaps with CSS? My first instinct is to play with the margins, but I need to be IE7 compatible, which I think does not work with negative margins if I recall correctly. Thanks much.
EDIT: Oops. I forgot that a carriage return turns into a space character in HTML. Still, many thanks to the answerers. :)
Putting them all on one line will fix it.
<img src="resources/csv.png"/><img src="resources/globe.png"/><img src="resources/clock.png"/><img src="resources/key.png"/><img src="resources/delete.png"/>
But that can be cumbersome. If you want to preserve some readability, you might do something like...
<img src="resources/csv.png"/><!--
--><img src="resources/globe.png"/><!--
--><img src="resources/clock.png"/><!--
--><img src="resources/key.png"/><!--
--><img src="resources/delete.png"/>
The white space is the carriage return. remove that and you'll be golden!
<img src="one.jpg"><img src="two.jpg">
or
<img src="one.jpg"><img src="two.jpg">
is usually how I mark it in my html when I need to get rid of that whitespace.
I have 6 images sized 50x50 that are supposed to fit in a 300px div (50 * 6 = 300).
In my code I write them as follows:
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
Note the line breaks in between the image tags. I write them that way for clarity.
The problem is that when I test the page in a browser - the images do not fit, because the browser adds a space for every line break so I end up with something like this:
[img][space][img][space][img][space][img][space][img][space][img][space]
instead of:
[img][img][img][img][img][img]
I can easily remove the line breaks from my html, but that makes my code a lot less readable.
I am working in Ruby on Rails 2.3 - if there's a helper function for stripping out whitespace, I don't mind using that.
I was wondering if anybody knows how I can avoid this.
Thanks!
If you're using the image_tag helper, you can do
the -%> will not include the spaces in output.
Put your images in a <div class="images"> and set your css rules to div.images img { float: left }.