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.
the 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>"
Related
Paul Irish gave some amazing insight on web tooling this time during googleio 2013. So he was presenting some slides that had been parsed into html from a markdown source i.e a .md file.
However one thing that surprised me was when he edited the source markdown for the slides in the chrome dev tools sources panel and then hit refresh, the .md automatically compiled again into the html to be output on the browser. Now I understand that the changes he made to the markdown file in the chrome dev tools were made also on his local file saved on the computer, but how did the markdown file automatically get converted into the html file upon save and refreshing the browser?
I am a complete beginner with markdown and I would really like to have this functionality. Any help is deeply appreciated
The whole purpose of markdown is that it is both human readable and machine readable. It is designed to be converted to HTML.
Depending on the language you are using, there are markdown parsers that create HTML for you.
For example, for PHP.
So, as an example, to have your server show the contents of say, homepage.md, your index.php file could have something like this:
$filename = $_GET['file'];
$content = markdown( file_get_contents( "path_to_markdown/{$filename}.md" ) );
print $content;
And, to see it in your browser you would go to example.com/?file=homepage
I will do my best to answer this.
HTML Mark down is a shorthand syntax that can be interpreted by a web browser to format or render the page in html.
this is taken from Stack Overflow.
eg
The syntax is based on the way email programs
usually do quotations. You don't need to hard-wrap
the paragraphs in your blockquotes, but it looks much nicer if you do. Depends how lazy you feel.
So, like converting from a file in notepad ++ from text to html. The file will be formatted using the basic rules of that particular syntax.
It also must be remembered, that programs are not mind readers. If the mark down code is not valid, neither will the corresponding html code. Just as saving a text file that is "supposed" to be formatted in html. It won't save as a working html file if the syntax is incorrect.
Also, markdown is not a total replacement for real code. It cannot cover the breadth and depth of the true coding language. I could liken it to pseudocode, but that is more of a lateral example.
In answer to your latest comment, If a second file is created from a first file (and the format is altered) -( in this case from mark down to html) - If the first file is then edited, without overwriting the changes into the second file, it cannot expect to be altered.
This is a good link a fellow SO gave me:
https://stackoverflow.com/editing-help
Please feel free to edit, if I have made an error.
I haven't tried this extension for Chrome but it seems to automatically render markdown (.md) files in Chrome.
https://chrome.google.com/webstore/detail/markdown-preview/jmchmkecamhbiokiopfpnfgbidieafmd?hl=en
In Firefox, I use the following extension for the same functionality.
https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer/
No need for a separate .html file, just save the text file with .md extension and open it in the browser.
Hope that helps.
I'm developing a function (C#, ASP.NET 4) which creates and downloads a .ics file.
I'm trying to figure out what restrictions there are on the html within the X-ALT-DESC property. For example, if I send this:
X-ALT-DESC;FMTTYPE=text/html:<html><body><ul><li style="font-weight:bold">#1</li><li>#2</li></ul><table border=1><tr><td>table test</td></tr></table><span style="font-weight:bold">Site Visit Agenda</span><br/><span>8:00 AM</span><br/><span>Check in with management<br/>Facility Inspection<br/>Training and Meeting Setup</span></tr></table></body><html>
When I open the downloaded file, it opens in Outlook 2010, so that seems o.k. While the list stuff renders as I'd expect, the table border doesn't show, nor do either of the font-weight settings get rendered. (On the plus side, the html tags aren't rendered as text, it just doesn't format the alt desc like you'd see in a browser with the same HTML).
Of course, we're trying to figure out what HTML we can and cannot use to format the information we want to show up in the alt description.
Searching around, I can't find anything which talks about what's allowed and what isn't.
Thanks to anyone who has a pointer.
A lot of tutorials which can be downloaded have the file type of .chm, .pdf, .html, etc. I downloaded a Java SE tutorial of Java SE in HTML format. When I use chrome to view it and everything is good. But I just wonder how could I just directly highlight some useful information (e.g. text) when I use chrome to view it? The html files are local, I know that I could use some software to edit it, like using HTML tag <font color:> etc.
But I just want to highlight it directly in the browser like editing it in word. Is there any suggestion? Dose chrome support such kind of plugin? If you still don't understand what i mean, please refer to "clip to evernote", which is a plugin of chrome and can cut the pages and upload them to the evernote server. when I use evernote client to read them, I can directly highlight some words which is useful to me.
It's much more a SuperUser question, but ... There is a lot of plugins for highlighting web pages out there. You could try Yawas or Simple Highlighter
edit: ok, I think I understood better your problem ... Yawas, Simple Highlighter, as well as most other highlighters, don't hightlight on local pages.
I'm not sure there is such an highlighter available for Chrome, then. What I would suggest is to try opening you documentations with Amaya instead of Chrome. It's both the Browser and the Editor from the W3C; and since it has both functionalities, you probably will be able to do what you want on your local pages.
You can save it to your computer by clicking "Open a new tab containing a list of highlights and notes on just this page". Then you can save only the html contents to your computer with the name as you like. Don't try to use ALT to save the list of note because you will never see the contents what you want to save.
My web application has an feature wherein preformatted RTF documents are used as templates and the user can select the source of data and then merge with the RTF documents templates to create merged RTF files. The RTF templates have placeholders which get replaced with user selected content. The final doc can either be saved or opened directly if word/wordpad is available on the local users machine.
Now, I have a requirement to display the merged document to the user for confirmation. The user may either print or save the document to the system directly. The display should not be word/wordpad application but should be within the application itself, using textarea or something similar to render the document. Can you please let me know if its possible to render the RTF document in textarea or not. Along with the displayed content, there should be options to print and save the document.If I have to convert the RTF to Html and then display the html content in textarea , please let me know how i can do the conversion and then display the html in the page.
That's a very difficult requirement. First of all, let's dismiss the idea about a <textarea>, because it does not support any formatting at all. All the WYSIWYG editors you've seen out there are based on <iframe>s.
Secondly, no browser can directly display a RTF. You can embed it as an <object>, and some might show it (IE probably will), but I can't say which ones won't. Portable devices almost certainly won't. But you should test this though, maybe it works well enough after all.
Failing that, HTML conversion is also out of question, because RTF has very very many features that cannot be emulated in HTML. There are some converters out there (google), but but they will all come with serious limitations. If you want full support, you will have to do your own rendering via Canvas or Flash or something.
To this end I'd suggest checking out Google Docs. They've gone through all of this hassle and have a rather feature-full engine for displaying most possible documents. I think it was also possible to embed them in your own webapges, though I've never checked it out myself.
Use a <PRE> tag to Display/Render RTF doc in browser.
Given an HTML page I would like to get all the 'x' files that are embedded in the HTML file or are linked by it, where 'x' equals:
Images (JPG,PNG,GIF...)
Documents (Word, PowerPoint, PDF...)
Flash (.flv, .swf)
How do I do this?
So images are easy to extract because they are either linked to with a link ending in a (.png|.jpg|....) or they are embedded with an img tag.
Documents can not be embedded, they can only be linked to (with a link ending in a .doc|.ppt|.pdf|...). So they are also easy to get.
Here is my problem:
How do I get the flash files that are embedded in webpages?
Please give me a pseudo-algorithm or a regex pattern.
If I am wrong in my points above (1. and 2.) please tell me so too.
Thanks!
The Firefox extension DownThemAll lets you right-click a page and download all of the media of a specified extension. It's open source, so you might want to look at their code and see how they implemented it.
I'd use an event based XML parser (like SAX) and write the rules for the and tags to get the src and href attributes.