I just started Code Academy and I'm doing a project where I create a mock website for myself. I completed the whole thing basically, however, there were a few steps that I couldn't submit. It just gives me the "Oops" alert. Firstly, it's step 5/21. The command is to create an empty style tag. I thought I did it correctly.
This is my code:
<style>
</style>
<h1> Valentina </h1>
<p>Hi! I am learning how to make
my very own web page! I really don't care much about
blueberry muffins and long walks on
the beach.</p>
<input type="email" placeholder="Email">
<input type="submit">
But Code Academy gives me Oops!, why?
All the answers you recieved might be the case.
This code goes in the <body> section of the webpage:
<h1> Valentina </h1>
<p>Hi! I am learning how to make
my very own web page! I really don't care much about
blueberry muffins and long walks on
the beach.</p>
<input type="email" placeholder="Email">
<input type="submit">
Whislt the style tags goes inside the <head> section of the webpage.
I haven't tried, but a wild guess would be that your empty <style></style> should go in the <head> tag
There is a chance that they are expecting a complete style tag
<style type="text/css"></style>
And even though style tag can go anywhere, it's maybe you need to try to put it in <head> tag
Define Complete style tag
<style type="text/css"></style>
It wil work for you I guess.
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.
EDIT: Three days ago my site was perfect and I didn't update any of the css or html.
A few days ago I noticed that my website's style was not being displayed as it should be. It's almost as though the browser overrode my stylesheet and displayed everything inline in Times New Roman. (I checked my website in Chrome and IE)
When I try to style a particular html element in my stylesheet, the browser won't read it. But when I style it within the html it does.
You might say that the html document isn't reading the css file properly, but the funny thing is that some of the elements are being read like the header, navigation bar and footer.
HTML Page
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" type="text/css" href="new-site.css" media="screen"/>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300|Open+Sans:400,700|Roboto:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrap">
<?php include('includes/googleAnalytics.php'); ?>
<?php include('includes/nav.php'); ?>
<div id="content-custom">
<div id="main-custom">
<div id="main-intro-custom">
<br>
<br>
<span>Contact Us</span>
<p>Questions or comments? Send us a message. We would love to hear from you.</p>
</div><!--end mainintrocustom-->
</div><!--end main-custom-->
<div id="contact">
<div id="checkfaq">
Check our FAQ to see if your question has been answered.
</div><!--end checkfaq-->
<form name="contact" method="post">
<br>
<input type="text" name="name" placeholder="name" required/>
<br><br>
<input type="text" name="email" placeholder="email" required/>
<br><br>
<textarea name="message" placeholder="message" required></textarea>
<br><br>
<input type="submit" name="send" value="Send" />
</form>
</div><!--end contact-->
</div><!--end content-->
<?php include('includes/footer.php'); ?>
</div><!-end wrap-->
</body>
</html>
Take this page for example, the only elements that aren't styled are the ones within <div id="contact">.
If I write
#contact{
background:orange;
}
in the external stylesheet, the browser won't display it.
But when I add this:
<div id="contact" style="background:orange;">
The browser displays it.
The weirdest part of all is that I never changed a single thing in the CSS nor in the HTML. I contacted hostgator to see if it was something on their end and they told me it's not a server error.
How can I fix this mess? Has anyone else encountered this problem.
EDIT: Here's a link to my stylesheet: CSS HERE
EDIT: I think the problem was that I didn't close .imgThumb:hover. Why did it take a couple of days for the browser to screw up the layout while I was testing? And why were other pages affected by this mistake if this class .imgThumb is not included in those pages?
I doubt that any one of your plugin(may be a wordpress) would have used !important to avoid overriding of style.
You can check this by inspecting the element using FireBug or dev tools. If that the case then no other choice simply go for it
#contact{
background:orange !important;
}
You're running into a style priority collision with your CSS. From what I can gather, since you can apply inline styles successfully but not from a stylesheet, you probably have another style overriding the styles in your stylesheet. You can check this by opening Developer Tools in Chrome, inspecting the element, and viewing the Computed styles. If you expand the styles you're interested in, you should see which styles are overridden, as they are crossed out.
I don't recommend this since it can get out of hand, but in a pinch you can force your styles to be applied (assuming another stylesheet doesn't do the same) by adding an !important tag to them.
#contact {
background:orange !important;
}
If you want to avoid this, you can use a more specific selector, which in CSS raises the priority of the style. If you can get this to work, I highly recommend using this approach instead, as it will lead to much less headache going forward with style changes:
.parentContainer #contact {
background: orange !important;
}
The more specific you can be, the better. If you know the element's immediate parent, I would advise you use the selector parentContainer > #contact, which is more explicit than the previous one, which will simply detect any descendant, not just an immediate child node.
I'm very new to Javascript and HTML but I wondered if there was a way you could make your webpage display the same way as your code. Such as if you had something like this:
<html>
<body>
<input type="button" value="Text">
<b>Hello world Hello<b>
</body>
</html>
Is there some sort of code I can put in to make it display just like that on the webpage. When I try it there aren't that many spaces between the world and Hello.
Put that in a pre tag
<pre>hello hello</pre>
pre tags keep spacing
This is a very strange problem I've been struggling with for a few days. At first I thought it was related to something in our application, but I've stripped it down to the simplest html page and it's still happening. Basically anytime I add a tag to a page the html after it gets rendered as it's value. <textarea></textarea> fixes the issue, but I don't understand why. I'm at a loss here, it has to be something really simple that I just don't know.
In the following example the paragraph tags show up as the value of the textarea.
I'm using IE8.
<html>
<head>
<title>About</title>
</head>
<body>
<textarea/>
<p align="center">
test
</p>
<p align="left">
test
</p>
</body>
<textarea> is not a self-closing tag. It should be re-written as <textarea></textarea>
I am assuming you trying to have the paragraphs appear after the textarea. Try not using the textarea tag as an empty tag.
<textarea></textarea>
<p align="center">
test
</p>
<p align="left">
test
</p>
I believe Textarea requires an opening and closing tag - at least that's how it's presented here:
textarea at w3schools
I had this problem too. I realized I had forgotten to give a name attribute to my textarea like I did all my other inputs so that the PHP script could collect it all and send it to an SQL table.
Once I gave it a name, it magically stopped chopping off the closing tag and making it a self closing tag which got ignored by the browser until it bumped into the closing tag of a textarea with a name attribute, swallowing up everything in between. Hopefully this sheds more light on the issue too, as putting text in between the closing tags wasn't an ideal option for me.
I am new to HTML (well, more than new) and I try to format the presented text. The following code is presented:
<H1 align="center" face="helvetica">
This is another paragraph.
</H1>
<p>
<font align="center" size="5" face="helvetica" >
This is another paragraph.
</font>
</p>
In the first time, the allign works fine though the face is not. On the other hande, in the second time, the size and the face work ok but align is not. Do I do something work?
In general is there any good *and free) resources on line?
Thanks in advance,
Sun
You need to learn CSS.
Basically, you stop with these presentational attributes, and you add the styling of your site externally (though it can be inline as well, as CSS).
It looks like you are learning HTML from an old and/or bad resource.
Try
HTMLDog
Google: HTML, CSS, and Javascript from the Ground Up
W3C HTML wiki which also has listed a few good resources
<h1 align="center" face="helvetica">
This is another paragraph.
</h1>
<p align="center" >
<font size="5" face="helvetica" >
This is another paragraph.
</font>
</p>
Try that.
It's best you take a look at the basics of CSS, (www.thenewboston.com) I find to be the best source of beginner tutorials.
This is how your code would be layed out IF you were using CSS.
<style>
h1 {font-family:Helvetica; text-align:center;}
p {font-family:Helvetica; font-size:5px; text-align:center;}
</style>
<body>
<h1>This is another paragraph.</h1>
<p>
This is another paragraph.
</p>
</body>
Hope this helps and good luck working with HTML, CSS and JS in the future!
Regards!