Webpage display same as code - html

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

Related

Is there a smart way to hide alot of text in HTML?

so I have this huge amount of text from several documents that i'd like to insert on my webpages. When i copy paste the text into my <p>element, it works fine and all, but it looks messy in my html-file.
Is there any other way to transfer my written document to my html-file, for instance link the document to the html-file, or maybe there's a way to hide or separate the <p> so the html-file looks neat even though there's a huge amount of text in my html-file. Any advice?
I do not know about any way to include html in another html (something like php's include), but it could be done with JQuery:
index.html:
<html>
<head>
<!-- link jquery -->
<script>
$(function(){
$("#fileContent").load("doc.html");
});
</script>
</head>
<body>
<div id="fileContent"></div>
</body>
</html>
doc.html (file that contains your text)
There's a lot you could do to separate these blocks of text.
Firstly, I'd recommend using <div>..</div> tags to divide the content into separate semantic sections. There are a bunch of different tags that aim to divide the content of the page semantically: <aside>, <main>, <header>, <nav>, and so on. I'd recommend reading up on these tags and using them appropriately.
However, to answer your question more directly, you should separate each block of text into separate <p> tags. After all, the <p> tag is meant for defining separate paragraphs. While the HTML document may not look pretty when indented and filled with multiple different tags like <div> a <p>, it is the best way to do it.
Unless the HTML page is going to be presented in its core (code) format, then how the <p> tags look in the .html file is unnecessary because after all these are what define how the page is presented and rendered in the browser.

How should you encode a textarea's contents

If I have a text area that can display user entered input. How should I encode it to prevent any security issues?
For instance suppose I have this:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<form>
<textarea></textarea><script>alert('Hello');</script></textarea>
</form>
</body>
</html>
How should I encode the contents of the textarea so that it shows the </textarea><script> as text rather than running it?
I'm using ASP.Net, but I'm really after a general answer for HTML.
This is different to "Rendering HTML inside textarea" as I don't want to render HTML inside the textarea where as with that question they did.
You use HTMLEncode.
<textarea><%= Server.HtmlEncode("</textarea><script>alert('Hello');</script>") %></textarea>
Or
TextBox1.Text = Server.HtmlEncode(myString);
If you want to post <script>the tag will be picked up.
Displaying a tag as text type < and > they will be displayed as < > Link
So the html would look like:
<textarea> </textarea> <script>alert('Hello');</script> </textarea>
but #VDWWD answer is a better solution for asp.net development.

Codeacademy - HTML, CSS excercise

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.

JqueryMobile Save text field data using save button

Ive been trying to figure out how to get some data i type into a text field to save on the screen underneath it. Something like a twitter, or Facebook news nothing fancy. I'm using JQM and would like this to get save on the same page as the text field and button under the
<div data-role="content">
This is what i have for a field and button.
<input type="text" id="Text"/>
<input type="button" id="Button" value="Submit" />
<div id="buttonPlaceHolder"> </div>
and this is some javaScipt i found to go along with the button, it works however the dollar signs screw up JQM and ive tried putting it in its own js file. I think i might be doing something wrong.
$('#Button').bind('click', function() {
$('#buttonPlaceHolder').append($('#Text').val());
// refresh jQM controls
$('#home').trigger('create');
});
If at all possible id like the javascript in with the html via script
I am not sure if I understood the question. Nevertheless try this, it may help:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<p id="myDIV">A DIV.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";
}
</script>
</body>
</html>
It is a html page example. You can find more info and useful examples here:
http://www.w3schools.com/js/js_examples.asp
If you want to save it for later use, try localStorage mechanism.

<textarea/> tag "swallows" html

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.