Writing HTML in a paragraph so it displays on the webpage - html

For school I have to build a website and on that website explain how I made it. The problem is i have to write a few snippets of HTML to show the teacher what I've done. The problem is when I put HTML in a paragraph nothing shows up.
for example
<p><div id ="something"></div></p>
But when I do this nothing shows up. How should I be writing it so it does?

In order to show HTML in a web page you need to translate the < and > to their respective HTML entities,< and >, so they aren't rendered as HTML.
For example
<p><div id ="something"></div></p>

you can escape HTML by using < and > entities.
<p><div id ="something"></div></p>

<xmp><div id="something"></div></xmp>
renders text between the start and end tags without interpreting the HTML in between and using a monospaced font

Related

Code in bootstrap

I want to display this code, in my website:
<title>MY_TITLE</title>
I tried to use the <pre> and <code> tags without success. Its wrote that I can't use title tags on those tags.
Again, I want to display this code (This code shouldn't do nothing). Any suggestions?
If you want to display and show HTML code on a web page so that it is not executed, you need to convert the < and > into it's ascii equivalent of < and >
Try following
<title>MY_TITLE</title>
<title> MY_TITLE </ title>
This code has to go inside label "<![CDATA[ "-->code here<--" ]]>"
https://stackoverflow.com/a/7092306/4504069

How to display html format in text area

I have created but now when user add html formating in that text area with html codes like
<b>the codes are working </b>
they are showing up same as written, instead of "the codes are working "
so how do i enable that in simple HTML form.
Textarea cannot display any html structure. You should use <pre> tag, but if you want to edit in the same time, use contenteditable attribute.
<pre contenteditable="true"><b>the codes are working</b></pre>
I think that you are trying some editor. You can use CKEditor. Quirksmode.org also can be useful.

how can I write a string like: <space> in html text

I have many pages of html and I want to write a text like this 'DOM<space>LUNCH'.
But when I write the text like above then it showing space instead of in browser,
because browser understand as a html tag and print is as a space. :
Like this:'DOM LUNCH'.
I used this also 'DOM \<space\> LUNCH',so that it will ignore the next letter,but noting goes right.
Please tell me how can I write a string in html like this:'DOM<space>LUNCH'
Even I am not able to post the question as I want, because browser understand space and <> as space actually.
Use < and >.
<mytag>
The closing part of the tag doesn't absolutely have to be replaced however.
<mytag>

How to add plain text code in a webpage? [duplicate]

This question already has answers here:
How to display raw HTML code on an HTML page
(30 answers)
Closed 2 years ago.
I know it is possible because this website does it, but I tried researching how and just got a bunch of junk, so how do I add tags to a website paragraph without the browser interpreting it as code.
For example, if I have <p><div></div></p>, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?
I have been writing tutorials for school, and it would be much easier if I could add the code directly to the webpage in text form instead of images, so students can copy and paste it.
Look at how this website itself achieves this:
<p>For example, if I have <code><p><div></div></p></code>, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?</p>
You need to replace the < and > with their HTML character entities.
There are many ways to use:
Replace < with <
`<h1>This is heading </small></h1>`
Place the code inside </xmp><xmp> tags
<xmp>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
</xmp>
I do not recommend other ways because they do not work on all browsers like <plaintext> or <listing>.
You want to look into something called HTML Entities.
If you want the < character to appear on a website, for example, you can write this HTML code: <. These are the five basic HTML Entities and their source code equivalents:
< <
> >
" "
' &apos;
& &
If you are using a programming language (such as PHP or ASP.NET), then there is probably a built-in command that will do the conversion for you (htmlspecialchars() and Server.HtmlEncode, respectively).
Use the tag <PRE> before a block of reformatted text and </PRE> after.
The text between these tags is rendered as monospaced characters with line breaks and spaces at the same points as in the original file. This may be helpful for rendering poetry without adding a lot of HTML code. Try this:
Mary had a little lamb.
Its fleece was white as snow.
And everywhere that Mary went
the lamb was sure to go.
To add plain text code in a webpage, HTML Character Escaping is needed on five characters:
< as <> as >& as &&apos; as &apos;" as "
(OR)
<xmp> tag may also be used as an alternate, this tag disturbs the style and is obsolete.
<xmp>Code with HTML Tags like <div> etc. </xmp>
Use the html entity/special character of the tag, such as < (for less than)
<p> in html -> <p> in browser
You could also write <p> since there is no ambiguity about the opening tag.
Many languages have built in methods to convert HTML special characters such as php's htmlspecialchars
You need to escape the HTML tags, namely the less-than sign. Write it as < and it will appear as < on the HTML page.
Your html needs to not be in tags. If you use the <> tags you will have it converted into code not text, if I was to write <br> in the middle of a sentence then it would do this You will need to Write the code in code so to speak, using the < > (< >)
and then you get what you need.
I just discovered a much simpler solution at CSS-Tricks...
Just have your outer-most wrapper be a 'pre' tag, followed by a 'code' tag, then inside the code tag put your code in paranthesis.
The simplest way to do it without having to reformat your text using entities is to use JQuery.
<div id="container"></div>
<script>
$('#container').text("<div><h1>Hello!</h1><p>I like you.</p></div>");
</script>
If you then do alert($('#container').prop('innerHTML'));, you get <div><h1>Hello!</h1><p>I like you.</p></div>
How useful that technique is depends somewhat on where your material is coming from.
Use iframe and txt file:
<iframe src="html.txt"></iframe>

Containing markup INSIDE data

Yes, I am struggling with displaying data from our database that CONTAINS markup! One particular field I am displaying has an open-bold tag but no close bold tag. I am trying to 'contain' this markup so it doesn't affect the rest of the page.
The data coming from my database is like this text:
this is soem nasty <b>data
(note the lack of a closing < /b > tag)
If I enclose the markup in a div, the rest of the page is bold:
<div>this is some nasty <b>data</div>
However if I wrap it in a table like this:
<table><tr><td>this is some nasty <b>data</td></tr></table>
All is well! In fact, the DOM inspector for both FF (FireBug) and IE9 show the tree. In the div-case, it shows the open-b tag and the rest of the document contained within it. But the table seems to enclose it.
How can I get this to 'close the b' without a table?
You use a closing </b> tag properly, like any sane human being.
You can use DOMDocument and tidy to try and fix the malformed markup in case you have no control over it, but it's best if you could fix it before it got to your database.
I've read somewhere that HTML Purifier should be able to achieve this. Might be worth trying.
I took a cue from HTML rich-text editors like TinyMCE and built up an IFrame. It seems to contain the arbitrary, possibly-mal-formed content better.