how display html as plain text without modifying the .html

I teach GUI and use web pages rather than PP. I am starting to add HTML5 and CSS instruction to the course. for a file style_by_kind.html

CSS example style_by_kind.html

when student clicks on the link, obviously, runs the file and displays. t开发者_JS百科he students can use "save as" in their browser to get a copy for themselves.

I want to display the source as text so I can lecture about the html CSS code. The link runs the code. Physically including the file runs the html code. does not applicable, output only does not display, comment Because of continuous updates, it is undesirable to copy the file with another file type extension, and impossible to "quote" out the html.

Any easy syntax to put in the link or around a physically included copy, so the student just sees plain text, would be greatly appreciated.

I would suggest changing the extension of the html file to txt.

So when u browse to the txt file, it will still get displayed in the browser with the exact same coding.

Depending on how the files are served up, you might be able to set a ContentType header as text/plain, but I suspect most browsers will still sniff the MIMETYPE of the file and render it as html.

Using the <pre> tag as @hamlin11 suggests is a good idea.

Use <plaintext></plaintext> tags

For example, "This is a lesson on bold tags: <plaintext><b>Bold Text</b></plaintext> will     display as <b>Bold Text</b>"