Exaple of pre tag.

How to display raw HTML code on an HTML page

No, there is not. In HTML proper, there’s no way short of escaping some characters:

(Incidentally, there is no need to escape > but people often do it for reasons of symmetry.)

And of course you should surround the resulting, escaped HTML code within

to (a) preserve whitespace and line breaks, and (b) mark it up as a code element.

All other solutions, such as wrapping your code into a or the (deprecated) element, will break. 1

XHTML that is declared to the browser as XML (via the HTTP Content-Type header! — merely setting a DOCTYPE is not enough) could alternatively use a CDATA section:

But this only works in XML, not in HTML, and even this isn’t a foolproof solution, since the code mustn’t contain the closing delimiter ]]> . So even in XML the simplest, most robust solution is via escaping.

  no.  Computer <xmp>says no. 

Solution 2

The tried and true method for HTML:

  1. Replace the & character with &
  2. Replace the < character with <
  3. Replace the > character with >
  4. Optionally surround your HTML sample with and/or tags.

Solution 3

 
This text has been formatted using the HTML pre tag. The brower should display all white space as it was entered.

 
 My pre-formatted code here. 

sample 3: (If you are actually «quoting» a block of code, then the markup would be)

 
 My pre-formatted "quoted" code here. 

Solution 4

Kind of a naive method to display code will be including it in a textarea and add disabled attribute so its not editable.

Hope that help someone looking for an easy way to get stuff done.

But warning, this won’t escape the tags for you, as you can see here (the following obviously does not work):

  

Solution 5

 code here, escape it yourself. 

Источник

How to show HTML code on a web page?

In this tutorial you will learn how we can show our HTML, C#, Java, C language etc. code on webpage.

I tried to find the solution of this problem, but I didn’t found any helpful solution on the internet. Here you will get your problem solution in easy way.

If you found any difficulty and mistakes in this tutorial please let me know by posting comment in comment box or send me message in contact us form.

Types of tag to display code on webpage.

The tag that is use to show the coding of html, java c etc on page are given below.

Introduction of
..

tag

The

..

tag is use to display or show the all language coding as same on HTML webpage. We will use HTML

..

tag to display or show the coding on our HTML webpage. With the help of

..

tag we can do it.

In HTML

..

tag we write or paste our HTML, C#, Java, C etc. code. It will show or display same code as you written or pasted in

..

tag.

You can see the output below.

    

Campuslife

Step 1.

Open your Notepad or Adobe Dreamweaver or any other HTML editor. I am using Adobe Dreamweaver. I am suggesting to you use Notepad for better practice.

To open the Notepad press window + r and type notepad, then press enter. Or you can find in start menu.

Start Menu All programs Accessories Notepad.

Step 2.

Let’s start working with

..

tag.

In

..

tag we show the HTML angle brackets ( ) tags with help of & lt ; ( less then angle bracket) and & gt ; (> greater then angle bracket).

Let suppose you want to display a tag in

..

tag then we will use above angle brackets.

Output:

I hope now you have understood the concept of

..

tag. Now our beginning level has been finished.

Now we will work on our different language coding like html, c#, java, etc. which we want to show on webpage.

Step 3.

First create

..

tag and copy the below html code and paste it in between

..

tag.

You will see the HTML angle brackets I replaced with & lt ; and & gt ; angle brackets because we want to display or show it on webpage.

Example:

&lt;html&gt; &lt;head&gt; &lt;title&gt;Welcome to campuslife.&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Campuslife Wesbite&lt;/h1&gt; &lt;h2&gt;My first page.&lt;/h2&gt; &lt;p&gt; Campuslife is a free learning source website for users. &lt;p&gt; &lt;/body&gt; &lt;/html&gt; 

Step 4.

Now we will apply the css to above HTML code. First create the class of your

..

tag like below.

I have created mycode class for my

..

tag.

Now apply the CSS to your

..

tag for better presentation. First create CSS

tag in between .. tag like below.

     

Now copy the below CSS code and paste it in between

tag.

Step 5. Final Step

Now save your file with any name with .html extension. Like mypage.html. After saving the file open the file by double click on it. It will be open in browser. Now you will see your coding on webpage same as in editor it is.

Output:

    

Campuslife Wesbite

My first page.

Campuslife is a free learning source website for users.

Источник

Load a HTML page within another HTML page

I need to display or load a HTML page within another HTML page on a button click.I need this in a popup with the main html page as the background. Any help is appreciated.

To clarify, you want the user to click a button on the first HTML page, which pops up a second HTML page with the content of the first HTML page as the background of the 2nd HTML page. Is that correct?

When I click a button in first page,it should open a popup in the same page and the second HTML page should be loaded in the popup.Is there any popup other than the windows popup?

11 Answers 11

iframe is the tag which you can use for call other html pages into your web page

  

on click event you can make it display block .

Load a page within a page using an iframe. The following should serve as a good starting point.

The thing you are asking is not popup but lightbox. For this, the trick is to display a semitransparent layer behind (called overlay) and that required div above it.

Hope you are familiar basic javascript. Use the following code. With javascript, change display:block to/from display:none to show/hide popup.

you just need load jquery and fancybox.css and fancybox.js :

and add js code in your page:

$("youBtnSelector").click(function() < $.fancybox.open(< href : 'you html path', type : 'iframe', padding : 5 >); >) 
   

If you are looking for a popup in the page, that is not a new browser window, then I would take a look at the various «LightBox» implementations in Javascript.

iframe is great for what it does, but it isn’t a popup. I use it on some of my pages so that the browser only has to load the new content which makes it faster loading and preserves bandwidth.

With a popup that loads on top of the current window, this is the true purpose of a popup, to show content over the page you’re on without unloading the page you’re on. iFrame is used to preserve the main page while displaying content within a window. the old method of having a default page with < *editable content >is somewhat outmoded. Others have provided the code I will add that using -onclick- function with a -popup- wither transparency or not. I would go with not!

Hope this clears things up.

Источник

How to display raw HTML code on an HTML page

No, there is not. In HTML proper, there’s no way short of escaping some characters:

(Incidentally, there is no need to escape > but people often do it for reasons of symmetry.)

And of course you should surround the resulting, escaped HTML code within

to (a) preserve whitespace and line breaks, and (b) mark it up as a code element.

All other solutions, such as wrapping your code into a or the (deprecated) element, will break. 1

XHTML that is declared to the browser as XML (via the HTTP Content-Type header! — merely setting a DOCTYPE is not enough) could alternatively use a CDATA section:

But this only works in XML, not in HTML, and even this isn’t a foolproof solution, since the code mustn’t contain the closing delimiter ]]> . So even in XML the simplest, most robust solution is via escaping.

  no.  Computer <xmp>says no. 

Solution 2

The tried and true method for HTML:

  1. Replace the & character with &
  2. Replace the < character with <
  3. Replace the > character with >
  4. Optionally surround your HTML sample with and/or tags.

Solution 3

 
This text has been formatted using the HTML pre tag. The brower should display all white space as it was entered.

 
 My pre-formatted code here. 

sample 3: (If you are actually «quoting» a block of code, then the markup would be)

 
 My pre-formatted "quoted" code here. 

Solution 4

Kind of a naive method to display code will be including it in a textarea and add disabled attribute so its not editable.

Hope that help someone looking for an easy way to get stuff done.

But warning, this won’t escape the tags for you, as you can see here (the following obviously does not work):

  

Solution 5

 code here, escape it yourself. 

Источник

Читайте также:  Format string with list python
Оцените статью