hyperlink tag in <p> tag - html

So i'm trying to assign a hyperlink to a single word in a {p} tag in an .aspx page in MS expressions.
My problem:
when i try to do this:
<p>Some text with a HYPERLINK then there's more text here like this</p>
it shows up in the browser as such:
some text with a
HYPERLINK
then there's more text here like this
I'm trying to get it all on one line like it should be.. any ideas??

My best guess, is that your anchor tag is styled as display : block, can you confirm this by using inspect element, or providing a link to where this bug is occurring?

Use Nobr html tag. Anything in between will not be broken in multiple lines.
<nobr>My long sentence</nobr>

<nobr> tag is deprecated.
One can use : white-space : nowrap ;
<a style = " white-space:nowrap; " href="******">HYPERLINK</a>

Related

How to insert paragraph tags on newlines without tag overlapping?

I have a string with some HTML markup, but without any paragraphs. I want to replace newlines with paragraph tags, but if I do it "the dumb way":
html.gsub!(/\s*\n+\s*/, '</p><p>')
html = '<p>' + html + '</p>'
, then I will get markup overlapping:
This is text. <b>Bold text.\n
Still bold,</b> now plain.
becomes:
<p>This is text. <b>Bold text.</p><p>Still bold,</b> now plain.</p>
I know that HTML5 allows overlapping tags, but it is still very-very ugly. I want to get something like this:
<p>This is text. <b>Bold text.</b></p><p><b>Still bold,</b> now plain.</p>
How can I fix this problem?
UPD. <br/> is not what I need - I intend to use Kramdown with custom parser to generate Markdown from this string, and in the string I need open and closing tag for each paragraph.
Insert HTML <br> tags. They are well-defined as standalone tags that don't have paired end tags. If XHTML were still a thing, they would be <br/> tags.
By adding a <br> tag you can insert a single line break. It also has no end tag, so no need to try and close it.
W3Schools - < br > Tag
UPDATED:
If you need paired tags you could create a line break using CSS.
HTML
<p class="break">
Break right after this and
<span>before this</span>
</p>
CSS
p.break {
span {
display: table;
}
}
As shown here on Codepen.

How do you write <p></p> and display it on your site?

How do you write <p></p> so that it can be displayed as text in an HTML page, rather than be interpreted as HTML (which would give an empty paragraph).
If you want to show the in the view,
Because, when you type that inside html element, it may be getting it as the html element itself.
if your purpose is showing that in the view just try this.
&ltp> &lt/p>
Check this snippet :
&ltp> &lt/p>
you can do it with using span
<span> < </span> <span>p</span> > <span> < </span> / <span>p</span><span> > </span>
or you can do below like this
<p> </p>
A P tag should print out text on your site no matter what. However, on most occasions you will need to refresh (F5) your page in order for it to take effect. Furthermore, if you got anything on your site that could be covering it up, try removing it just to see whether another element is "eating it up" or not. For example, try removing a banner image if thats something you got, or a navbar.
Usage for P, just in case:
<p> Text goes here </p>
Use Html entities to display the reserved html symbol
HTML Entities
this is what you mean? sorry if i understand wrongly but your description is very short.
View the source of this page. It managed it!
<p><\p>
and the answer was <p><\p>

Highlighting sections of HTML/code that is wrapped in <pre><code> tags

I am creating an online tutorial and I'm displaying the html code by wrapping it in the <pre><code> tags. I would like to be able to highlight certain sections of the code. Is there a way to do that when the html is wrapped in the the <pre><code> tags?
<div data-role="page">
<h1>Hello</h1>
</div>
I would like to be able to highlight the "page" value of the data-role attribute. I tried to surround the "page" code with a span tag and style it, but the span tag showed up in the code. I also tried to use < and $gt; thinking maybe that would escape the < > around the span tags. It did, but it showed up in the code.
Again, I'm trying to display the code (without screenshots) with certain sections of the code highlighted with yellow.
You have to escape everything but the tag. I used <mark> since it seems more semantically correct:
<pre><code><div <mark>data-role="page"</mark>>
<h1>Hello</h1>
</div></code></pre>
Example http://jsfiddle.net/MFzsS/1/

How can I put a button inside text without line-breaks occuring?

I would like to put a button inside text like this one:
some text1 [button] some text2.
However if I place form&input, line break occures before and after my button like this:
some text1
[button]
some text2
I know I can do this with tables, but I want to avoid it. Is there any CSS based solution to do this? Unfortunately, I can't modify the HTML code, so I have to "inject" that little form statement (with input type submit, and some hidden input tags too) in the generated HTML (done by other software), so it would be hard to reformat it, using tables, etc.
Is it even legal to put form/input tags within text which is enclosed between 'p' tags?
Thanks in advance.
The css solution is white-space:nowrap. Wrap it with a span tag with that rule. For example, assuming you have this rule in the your css file:
.nowrap {
white-space:nowrap
}
You can do it with this html:
<span class="nowrap">some text1 <button>test</button> some text2</span>
If I understand your question correctly, you're injecting a form that contains a button into some text and the form tag is causing the text to wrap (form is a block level element). This is a simple fix with CSS:
HTML:
some text <form><button>test</button></form> some text
CSS:
form
{
display:inline;
}
If you don't want to make a blanket change to all the form elements, simply assign the injected form a CSS class:
HTML:
some text <form class="inlineForm"><button>test</button></form> some text
CSS:
.inlineForm
{
display:inline;
}
Alternative:
You could also add display:inline directly to the form tag:
some text <form style="display:inline"><button>test</button></form> some text
Here's a working jsFiddle.
You should add style="display:inline" to the form tag
hello <form style="display:inline"><input type="hidden" value="blah"/><input type="submit" /></form>world
gives
hello [button] world
try to make all blocks among your text - inline.
like that:
<form style="display: inline">
If there are divs after your form, make them inline too

Formatting to a page html

The text in my source code is formatted properly, but when it shows up in the browser all the formatting disappears. Is there a tag I could add to the paragraph tag to make the text properly format?
you could use the <pre> and </pre> tags to preserve formatting instead of the <p> tag
The <pre> tag sounds like what you need.
<div style="white-space:pre">
hereIsSomeSourceCode();
if (blah == 3)
doSomething();
</div>