I'm developing a web scraping tool in Python, and I need to get intimately acquainted with the functions of various HTML tags on certain sites. Unfortunately, the "view source" that Chrome, Firefox, and Safari offer does not output very well formatted HTML source code -- it tends to place a huge number of tags on the same line. Do the browsers offer any plugins that may be able to clean things up a bit, or do I need to get/develop some kind of tool in Python that takes dirty HTML as input and outputs cleanly formatted HTML?
Since I work primarily with Chrome, the best examples I can think of are Code Formatter (Chrome)
This isn't automatic; you have to copy and paste the entire page into the app. Also the app window is small (this unalterable to my knowledge), but relatively effective.
...and JavaScript and CSS Beautifier
Much more effective and clean, but only works, as the title suggests, with .Js and CSS.
With Firefox you can select (highlight - I am writing for beginners also) the text, and once it is selected, release the left mouse button and right click within the selected area and choose "View selection source." You can then copy the highlighted text and paste it.
My composite example:
View selection source
Related
If you want to look at the CSS of other people's websites (to steal learn from them), Firebug lets you inspect the prettified CSS:
But in Chrome 16, you only get the minified CSS as it was served out:
Is there a way to get Chrome to prettify the CSS?
In the newer versions there is a "format" button that prettifies the source:
(only just realised myself :P )
The Developer's console shows the file as served. If you want a human-readable version, copy-paste the code to http://www.codebeautifier.com/.
If you use the Elements tab, the applied CSS properties are also shown per element.
I recommend Quick Source Viewer, which is an extension to chrome and requires no human copy-pasting (acts sort of like an extra chrome dev-tool).
It can show you the source of the current page formatted and colour coded.
It's pretty powerful, showing all 'sources' of the page, be it css, js or html. Even things like inline css/js can be viewed individually (with injected code highlighted). And the best part is it prettifies all of them, even the css (which chrome's dev tools still refuses to do).
You may want to checkout Pretty Print: https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en
After installing, when you view a minified CSS or JS file, it will appear (after a moment) un-minified.
An awful lot of modern web traffic (particularly on social media) consists of screenshots from web browsers. These typically include some formatted text, some layout, and some bitmap/vector graphics. E.g.,
It's really easy to take and share a screenshot, but it throws away lots of useful information and doesn't transfer well between devices (not to mention being far less amenable to things like screen readers for the blind and fancy data-mining). Of course the ironic part of this is that HTML/SVG is the perfect format for representing such data, and we're not using it even though it's right there.
html2canvas comes close to doing this, but doesn't properly handle images, see some semi-related discussion here.
My question is this, how can I select a visible area in my browser and save it in a format (ideally HTML) that preserves text and images and renders to something roughly similar when rendered separately? (so that it could be included as e.g. a data iframe for sharing).
I know that this is in general impossible, and that rendering HTML is a complicated task, but I feel like it should be possible to ask the browser something like "what elements are being rendered within these pixel coordinates?".
First:
Right click on page, then click on "Save page as".
Save it with a name that ends with .html (or .webarchive in some scenarios. See which works best for you).
Edit the now saved html file to only have the part you want (you can use any text editor. Sublime Text and Atom are usually suggested).
Then:
You can open it in your browser to see what you are up to.
You might want to inspect where the CSS is from too, and get that in your html's file folder, then link the html file to it, so as to preserve the styles.
As far as I understand, you'd want to bring all the CSS to be inline, or, at least, in the <head> section of the html file, so you can upload it as a single file, and don't need to keep linking it to the CSS file.
I have a course work for which I have to make a (as advanced as possible) WYSIWYG web page editor in VB.NET (2010). It should have a visual editor with drag-drop support for several elements such as anchors, images, tables etc., and it should generate HTML based on that structure.
I don't know where to begin though.. I have some experience with vb.net, I made a tabbed notepad vaguely following a tutorial, but I don't know how to make this drag-drop thingy in a richtextbox.
I've searched for a tutorial, but most of them are just too simple - a text editor with browser control rendering the HTML.. I found one really nice and advanced, but it's in german :-|
So, if anyone knows any resources / tutorials I could use to start things I'll appreciate it.
I won't start with a richtextbox. Do you want to realize it in WPF or Forms (I would recommend WPF)?
In WPF there is relative simple a Drag-And-Drop behavior for elements (see http://msdn.microsoft.com/en-en/library/ms742859.aspx).
I would start with some simple elements (e.g. TextBoxes) and drag-drop them from some sort of toolbox onto a grid with fixed columns and rows (and later use a canvas). And then generate the HTML-Code from that.
In general, most of the WYSIWYG browser based editors are written in Javascript using an editable DIV.
A good example is tinymce:
http://www.tinymce.com/
Download, including full source code, is available here:
http://www.tinymce.com/download/download.php
You can use CKEditor. Its one of the best WYSIWYG editor i have worked with. Its highly customizable and opensource.
Given below is the URL for the website:
http://ckeditor.com/
I was looking at an HTML5 presentation and was wondering if anybody knew how the actual presentation was created. You can zoom in and out and view all the slides. You can also navigate with your keyboard.
Here's the site with the slideshow: http://slides.html5rocks.com/#slide5
First of all, it's not really mimicking PowerPoint. It's surpassing PowerPoint. :) Second, it's doing what the URL implies: rocking your world with HTML 5. Each slide is an example of markup and CSS (and Javascript) available in HTML 5. To find out all about how they do it, right-click on the page and choose "View Source" ... it will show you all the markup and scripting etc.
You can definitely do as Robusto suggests and view source and go from there.
But you might find it easier to get a more stripped version by going to http://studio.html5rocks.com/#Deck and downloading the sample from there. It's the same thing basically but has fewer external dependencies and fewer initial slides so it might be easier to work with. Basically, put the content of each slide in a <div class="slide">...</div> the way you see it with the four sample slides in the source code.
There is a very useful CSS3, HTML5 library called impress.js at http://bartaz.github.com/impress.js/
When viewing a webpage, I would like to copy a selection of text with its html formatting in one piece.
Meaning if some text is in bold and blue, I want the tool to create a style or class in the html which makes the text blue. Everything is contained in the produced html.
I have downloaded a similar plugin but the classes definitions are still external which means I have to get them separately. A non technical user would be at a loss here. I want the user to be able to copy and paste to a new webpage and that page just just works properly because the html copied contains everything.
This doesn't have to be a FF plugin. It could be IE or a Windows app.
I think you may be able to accomplish this by using the Firebug for Firefox extension. I often use it to export the content of a web page for use rebuilding a similar object. Is this still too technical? Firebug is a powerful, viable option that it is worth learning, I think.
I think the copy operation does this already. If I copy this page and paste it in a WYSIWYG editor such as TinyMCE (included in Wordpress), I get the formatting. For example the text of this page is (as pasted):
<h2>Firefox plugin to copy text with its formatting Intelligently?</h2>
The HTML markup is copied, but not external CSS. I suspect creating a piece of CSS that would apply to your standalone snippet of code the style it had within the DOM hierarchy would be horribly difficult if at all possible.
Try SnappySnippet, it's a Chrome extension that allows to copy html and all the related css style of an element. It integrates itself into the Chrome console. I hope this helps
This seems to be what you're looking for:
Web Design Pirate:
https://addons.mozilla.org/en-CA/firefox/addon/web-design-pirate-for-devtools/
It creates a new "Pirate" tab in the developer tools that lets you grab the elements you want, including all associated CSS.