What do I have to do to get my images to show up on my webpage. I am trying to put the images in my html document. The box shows up but not the image. This the code <img scr="smile.jpg" width="120" height="90"/> I have not put the web page on the internet yet.
<HTML>
<HEAD>
<TITLE> Tay first Web page </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center"> Why do I want to learn to code? </H1>
<P> I want to learn to code because it will help me develop the skills I need in web development and game development. My goal is to learn how to code in many different languages. It is amazing to me to be able to create something from scratch and making it into your vision.</P>
<H2 ALIGN="center"> Why is coding fun? </H2>
<P> Computer coding is <STRONG> wonderful.</STRONG> You get to make a web page with whatever info you want and add so many things to it to make it mind blowing.There are colours, images, flash, and you can even make a video game if you wanted too. The possibilities are endless and mind blowing.</P>
<H3 ALIGN="center"> How can coding be important in the real world? </H3>
<P> <EM>Technology</EM> is everywhere and is constantly changing. <MARK>Computers</MARK> are so intertwined in our lives. People view web pages all the time and are looking at code everyday. Being able to code can get you a job if you are efficient with different languages.
<P><STRONG>These are the best consoles ever!!!!</STRONG></P>
<UL>
<LI>N64</LI>
<LI>SEGA GENESIS</LI>
<LI>XBOX</LI>
<LI>XBOX 360</LI>
</UL>
<TABLE BORDER="1">
<TR><TD>First</TD></TR>
<TR><TD>Second</TD></TR>
<TR><TD>Third</TD></TR>
</TABLE>
<IMG SRC="smile.jpg" WIDTH="120" HEIGHT="90"/>
</BODY>
</HTML>
You have to spell src correctly (SouRCe). You have two of its letters reversed.
This would have been picked up if you had performed some basic automated QA by using a validator.
your img tag was wrong,it should be
<img src="smile.jpg" width="120" height="90"/>
Check the following:
Could your image possibly be in another folder than your your file?
Could there be other divs or elements on the page that might be "on top" of your image?
Could your layout place things "off-screen"?
Could there be code that sets something to visibility: none?
Could you have spelled the filename of the image wrong?
Are you absolutely certain you force refresh your browser window when trying to load again?
Please give us the entire code; preferably as a JS-fiddle.
If you're looking to find it on a Linux server, the file name is case-sensitive. If you set it up and tested it and found that it tests fine on a Windows system, you will perhaps not have noticed that smile.JPG and SMILE.jpg and Smile.jpg will all be treated as though they're the same thing as smile.jpg. On a Linux host, if you call for smile.jpg and it's been stored as smile.JPG (for example), you'll get the result you're observing.
Width and Height attributes should have units. You want them in pixels?
Try this:
<img src="smile.jpg" width="120px" height="90px"/>
Related
I'm an absolute beginner in coding. In fact, I'll probably never do it again ;)
I'm trying to create this very simple website for my boyfriend as a surprise (he's a developer). And now I'm just encountering one problem after the other :(
I've decided on html (although I'm so desperate by now that I'd be willing to go with anything).
<!DOCTYPE html>
<html>
<body>
<h1>Hello, world (especially Mitchell)</h1>
<h2>I want to show you something…</h2>
<p>Remember that time when I was losing so many rounds of Quizduell that even you noticed? Well, turns out I was doing that on purpose. I was trying to spell something out for you. But as I found out the hard way, it is actually really hard to lose specific games on purpose in the exact order you need. It seemed like I needed to change my plans…</p>
<img src=“7.JPG” alt=“error” style="width:304px;height:228px;">
This is all I have so far. And it's just going to be a bit more text, a couple more images and maybe a little bit of colour and layout (if I can manage that).
Right now my biggest problem is inserting the images.
It just doesn't work :(
Can someone please help me?
You have to close all of your tags. You see the and tags, etc.? All of those tags with /'s before them are the end of a section. First of all, you need that for your <html> and <body> tags. You also need it on your image tag, but there is a special way to do so for such tags as images. Simply add a space followed by a slash at the end of the angled brackets of the image tag:
<img src=“7.JPG” alt=“error” style="width:304px;height:228px;" />
This basically allows the tag to be on one line, making code simpler.
Good job on your project so far, and good luck!
Fixed version of your code:
<!DOCTYPE html>
<html>
<body>
<h1>Hello, world (especially Mitchell)</h1>
<h2>I want to show you something…</h2>
<p>Remember that time when I was losing so many rounds of Quizduell that even you noticed? Well, turns out I was doing that on purpose. I was trying to spell something out for you. But as I found out the hard way, it is actually really hard to lose specific games on purpose in the exact order you need. It seemed like I needed to change my plans…</p>
<img src=“7.JPG” alt=“error” style="width:304px;height:228px;" />
</body>
</html>
`
In case this doesn't work, make sure 7.JPG is in the directory of the .html file. The filename is case-sensitive.
First of all, I thought that it was very sweet of you to do that!
Here is a sample html that might help you out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./promo_5.png" alt="Describe my picture here!" />
</body>
</html>
The body and the html is wrapped here, and the image src is using relative path to find the image.
How sweet!
I would suggest you to use a WYSIWYG (What You See Is What You Get) editor to design like Microsoft Word. After you are done with the design, go to tools > source code. There you can get the html code for your design. Simply copy the code from there and paste it within the <body></body> tag. And done! You have designed the webpage!
Link to a WYSIWYG Editor: click here
For image issues, make sure that they are placed in the same directory where the .html file is kept. It should work properly.
I have the following problem: I have set the width of a paragraph, but it doesn't seem to have applied.
<p style="">
<center><img src="img/Arraying.png"></center>
</p>
<p style="max-width:500px;"><font size="+2"><center><b>Arraying: Web & Java Developer.</b></font>
<br>
<i>Hey, I'm Arraying. I'm the web and Java developer for Minevelop. My specialities are small, yet complex Spigot plugins, web development, and plugin configuration.
<br><br>I've been server managing since I was eleven or twelve, and over the years I have gained a lot of experiences.
<br><br>Spigot: https://www.spigotmc.org/members/_wiildanimal_.81436/
<br>Enjin: http://www.enjin.com/profile/9844615
<br>Email: arraying#minevelop.com</i>
</center>
</p>
<p style="">
<br>
<br>
<center><img src="img/DomThePotato.png"></center>
</p>
<p style="max-width:500px;"><font size="+2"><center><b>DomThePotato: Lead Java Developer.</b></font>
<br>
<i>Hello, my name is Dom, aka DomThePotato, and I am the lead Java developer here at Minevelop. I specialise in utility plugins and everything that is not minigames. With over 1 and a half years of experience, I will be able to get any request done! Also experienced file configurer and backend administrator.
<br><br>Spigot: https://www.spigotmc.org/members/domthepotat.38275/
<br>Enjin: http://www.enjin.com/profile/7005362
<br>Email: domthepotato#minevelop.com</i>
</center>
</p>
The first paragraph about Arraying seems to work fine, yet the one about Dom just doesn't want to be 500px wide.
I'm really tired, so if the error is completely stupid please forgive me.
You are using max-width I think you need to just use width:
<p style="width: 500px;"> HTML </p>
The issue is with the way your html is structured. Both tag and tags are inline elements. If you want to make all of the elemnts withing the tag stay in a max-width container, then you should try changing the tag to a tag.
Your code would look like this:
<div style="max-width:500px;"><font size="+2"><center><b>DomThePotato: Lead Java Developer.</b></font>
<br>
<i>Hello, my name is Dom, aka DomThePotato, and I am the lead Java developer here at Minevelop. I specialise in utility plugins and everything that is not minigames. With over 1 and a half years of experience, I will be able to get any request done! Also experienced file configurer and backend administrator.
<br><br>Spigot: https://www.spigotmc.org/members/domthepotat.38275/
<br>Enjin: http://www.enjin.com/profile/7005362
<br>Email: domthepotato#minevelop.com</i>
</center>
As #Hans Strausl mentioned, your HTML tags aren't nested properly (I believe you want the <center> tag to wrap the <font> tag, but you can always reverse them again if I've misinterpreted). Also, changing the <p> tags to <div>s seemed to achieve what you're looking for.
Here's a fiddle. https://jsfiddle.net/wzazrn5p/
I would like to know how to float all my badges next to each other in the footer menu. I have four badges so far but could be up to six. The badges are my SSL, AVG, BBB, Etc... I am very very new to all this website building stuff. I use Joomla 3.1 and use a paid up to date template. I can see all the codes and add the badges but they always pop up on top of each other. I had one person help me but they did it in tables and told me that it would work but that it was not the right way to do it. Please remember when helping me that I am a child learning to color for the first time when it comes to this :) Thanks for any help that any one my be able to give.
If you look at the bottom of this page( http://www.jcluforever.com/J-ADORE-GOD-CHRISTIAN-T-SHIRT-p/ts-jdrgod-prp.htm )that the badges they have for payment, SSl, and up front; this is how I want my to line up only I would like mine in the footer and I have like 5 that I would be adding
some idea of what I would have is
https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;">
next one would be
<div id="avgthreatlabs_safetybadge_small"><noscript>AVG Threatlabs</noscript></div><script language="javascript" src="https://api.avgthreatlabs.com/static/js/security_s.js"></script>
next would be
<!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT ---><table width=130 border=0 cellspacing=0 cellpadding=0 title="CLICK TO VERIFY: This site uses a GlobalSign SSL Certificate to secure your personal information." ><tr><td><span id="ss_img_wrapper_110-55_flash_en"><img alt="SSL" border=0 id="ss_img" src="//seal.globalsign.com/SiteSeal/images/gs_noscript_110-55_en.gif"></span><script type="text/javascript" src="//seal.globalsign.com/SiteSeal/gs_flash_110-55_en.js" ></script><br />GlobalSign SSL Certificates</td></tr></table><!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT --->
and so on and so on until I place all the badge I want or can or need to. I am not sure what part of the template you need it is all short or what is called LESS I am told
Best practice is to have these badges nested in an unordered list. Each badge would be inside of a list item. For this example, let's say each badge is just an image. Try this:
<ul class="my-list">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
Then, in your stylesheet, write:
.mylist {
list-style:none;
}
.mylist li {
float:left;
}
This will float all your items to the left of the page and "stack" the list items beside each-other, instead of on top of each-other.
Learning web design is a process that will require patients, dedication, and more trial and error than you can imagine. It isn't completely dissimilar from learning a new spoken language, except that instead of learning one, you learn several, and then learn how to make them work together to create what you want. If this doesn't interest you, and you just want to run your website or online business, then I would consider hiring a web designer or firm to maintain the code that powers your business; however, if learning is truly what you want to do, then read!
HTML
HTML, or Hypertext Markup Language, is the code you write to deliver data to the browser. It is not extremely complicated to gain a basic understanding of how HTML works. I'm not going to try and explain the entire thing here, but here is a great beginner tutorial.
CSS
CSS, or Cascading Style Sheets, is a different language that you use, in order to tell the browser how your data should appear. It is very light weight, and pretty much just plain English. Here is an easy to follow guide to CSS.
If you read through these two guides, and do a little experimenting on your own, I believe that you will be able to solve the problem on your own. Once you have the basics of HTML and CSS down, there is still a ton to learn, but once you master the basics, you will be in a much better position to pick up more.
Happy coding, and have fun!
I'm trying to set up Google Sites for my own personal website:
<html>
<head>
<title>...</title>
</head>
<body background="page_bg.png" text="#000000" bgcolor="#333333">
<div align="center"><img src="content.jpg" border="0" alt=""></div>
</body>
</html>
So all I want is a background picture (I accomplished to do this under settings) and only one picture in the middle of the site itself. I was trying to get rid of all the gimmicks (such as the sidebar, shadows of the frame, etc.) but I failed. Is it even possible to do this?
The reason I use Sites is, because the web address "https://sites.google.com/site/my_name_here/" is clear, it's free and it makes my site appear in the google search.
edit, my solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I guess you have to use something like:
<body style="background:#333333 url('page_bg.png'); color=#000000;">
<div style="text-align:center;"><img src="content.jpg" border="0" alt=""></div>
</body>
Oh ok, right! I think you cannot add your own styles using html/css. But if you go to "Managing Web site" there is a "Colors and fonts" option, and there you make you own customization for some elements, like select a different background color.
Is that what you're looking for Thomas?
My solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
Ok, first of all I'm sorry if my question appears unclear as I'm going to find it hard to explain. I don't know if you guys help with the coding at all but if you could set me off in the right direction that would be great.
Overview-
Basically similar to that of YouTube where on the side panel under "recommended >>" There is a single column with different rows. On each row there is a <div> element which contains a picture, title, who uploaded it and views. So these different parts so the title picture etc. are specific and link to that one video. I know the different videos that are recommended are based on numourous factors etc. But, anyway driving to the point here now-
Q- Is there a way of making the page load a random element or shall we say set for a video within a <div> tag?
I'll put up some code to demonstrate the basic layout:
<table>
<tr>
<td>
<div id="thumbnail">
<img src="thumbnail.png"
</div>
</td>
<td>
<div id="author">
<a> somebody </a>
</div>
</td>
... and so forth.
I have read up on how to make a random image come up upon load but is there a way of making a whole section or say a random style sheet come up on load? and each contain the different videos ( Just taking a stab in the dark here) or some sort of script?. Again I'm sorry if I'm sounded very vague or if I'm using the wrong terminology...