comparing 2 html files to check for added and deleted classes - html

I am developing an application for SharePoint and I am referring the HTML provided by other team and
I have written some code to generate HTML content using JavaScript as I have to write the tags to fetch data from server which will be given to SharePoint server which renders my html. But there are some drastic changes made to html which now I need to re-write my JavaScript to render them properly referring to new HTML given. What would be the easy way to compare 2 HTMLs and find the new classes and deleted classes. Are there any tools which can help here?
Bottom-line is the ability to compare 2 HTML files and get the new classes, deleted classes and updated classes easily.

I use an application called Notepad++ its freeware and helps me a lot
There is also WinMerge you can use

Related

Change csv output from one column to multiple in html

I have tried to find an answer but am not finding what I am looking for. I am using hostinger to host my website and using their built in design software. Their csv output creates a csv file with all parameters in one column instead of each parameter in its own column. I believe programming is in html and I don’t have access to base code but I can add to the “header” of the code with custom code. Does anyone know what will help me to solve my issue?
I haven’t tried anything yet as I’m not very familiar with html and Hostingers support team told me to look here as they specialize in hosting and support of that, not programming.
are you using their Website builder and a pre-designed templates ?
if you think the problem come from website template, you can delete that section and use custom html code
https://support.hostinger.com/en/articles/6475646-website-builder-how-to-customize-a-website-template#h_ed99b23b6a
There are two ways to add HTML code to your website, and it depends on the type of code you want to add.
If the code needs to be added to the part of your website's source code, use the Custom code field in your website's integration settings.
If the code needs to be added to the part of your website's source code, use the Embed code element.

Locating html code in local joomla server files

I have been tinkering with joomla recently.I was able to change css style using chrome dev tool, which helped me locate the css code that is responsible for the style I inspect. Now I want the same for html codes. The template that I'm using has an offcanvas menu, and when I inspect it, I can see the codes that form the menu, and I want to modify them, as I did with many css codes, however there is no locate or open containing file for html elements. Is there a way to do this? Since I did not write this template, I don't know which is which and where. Many thanks.
You could use Joomla layout overrides to achieve what you describe, check out this link for full details:
https://docs.joomla.org/Understanding_Output_Overrides#Module_Layout_Overrides
The idea is that you move a copy of the module file you want to modify to
/templates/your_template/html/ and Joomla will override the original output with the output from your custom file. You can do the same with components and plugins, it's really powerful.
Another reason that overrides are the way to go is that there's no risk that you'll loose your changes when you update the extension you are customising.
If you Google Joomla overrides you'll find other resources and once you get started you'll find it's surprisingly easy :)
Good luck!
I don't recommend editing css or html in Joomla via the dev tools, because of the problem you're having - sometimes it's hard to know what(and where) exactly you're changing something.
If you have access to the file for the template it should have a pretty straightforward file structure, i.e. all the html is in a html folder, the css in a css folder etc. Learn more here.
I recommend locating those files and editing them with a text editor.
To make a file depends on the framework you add one to Joomla template is not used.
But in all cases you index.php is a file that can address the heads of a css your new address

How to locate an HTML file on localhost using Google Developer Tools?

I'm building a website using Wordpress on Localhost. I'm learning the structure of the webpage by editing the HTML and CSS using Google Developer Tools. I want to know which file I'm editing and where on the hard drive it is located.
I have edited the height and width of an element inside the circle marked but when I try to save the file, it asks me for a location to save which I'm unaware of. One the left is the HTML code, how can I locate the file with that HTML code?
how can I locate the file with that HTML code?
You can’t – not really, not from within your browser, because your browser doesn’t see individual “files”, it only sees the complete HTML source code of the one resource it requested, that might have been composed of lots of different files, plus functions that generate HTML code dynamically – so that actual piece of HTML code might not even be written as such within a file.
You might be able to identify different sections of the HTML document though – and with a little knowledge of the template structure and output logic of WordPress, you should be able to find out what the relevant file to look in might most likely be.
Another thing I’d suggest, is that you get yourself an IDE that allows you to search across all files in the whole project folder – and than look for certain class names, IDs etc. on the HTML element in question or near/above it. If you search for those, you might get lucky as well. (Although a lot of times those classes/IDs might be output dynamically as well, so you won’t find them inside of a template file as such.)
Especially with little knowledge of WP template structures, it might take some trial and error to find the piece of code and file you are actually looking for.
The Google Developer Tools is not a code editor, so whilst you can try out different options I'm not aware that you can save it, and if you can, I wouldn't say it's a good idea.
Wordpress uses PHP, a language which HTML code is embedded with PHP code. For example the code <a href='<?php echo(link1);?>'>Home</a> has had the href attribute embedded with a PHP variable. If you want to find the HTML code, look at the PHP files in your Wordpress directory, index.php is the landing page code.
One thing to bear in mind is that not all the HTML code will be included in one PHP file, it is usually included from several files, and much of the content will be in the wp-content directory, keep an eye out for the PHP include or require commands.
Google developer tool is just to check, once you are done with the editing, You have to copy your css code- and paste in your css file.
To get the css file look at the below image.
Hope your question got clarified!!

Templates on Coda

I'm trying to move away from Adobe Dreamweaver and now that Coda 2 is out with lots of new features, I have the perfect candidate :D
The only feature I need and can't find an equivalent in Coda is the ability to create templates and files dependent on it. To set editable regions and when the template is updated, all the code gets updated in all the files except for the editable regions.
Is there a way to do this seamlessly on Coda 2 or with plugins / external tools?
I need this to html only pages, on .php files I do it by including(header and top phps)...
Thanks in advance
That feature is not available in Coda. But like you said, when using PHP, you can just use includes to pull in common content. Using HTML only, there is not really an elegant way to deal with this. Is there a reason why you can't just use PHP files instead?

How do I create some HTML help pages, with the same content at the top and bottom, without php or ASP etc?

I want to create some html help pages, separate html pages.
However, I want to have the same content on the top and bottom of the pages.
In the past I've used PHP or ASP, with header and footer files.
I've then had to do view source and save these pages to get what I want.
I just wondered if there an easiest way to do this ?
EDIT:
The pages are for use with software using a web object not a normal browser. So there won't be a web server
If your web server supports it, you could do server side includes
You could use frames, but it's not necessarily advisable (for one, it breaks navigation).
You could use XML files with an XSLT stylesheet to turn them into HTML documents that share similar elements.
You could use PHP or another server-side language to generate the pages, and then use a recursive download tool (such as wget) to turn them into HTML.
EDIT: you're basically asking whether the "standard-ish" subset of HTML supported by your component of choice provides a way of including data from a common file, just so you won't have to include the data in every HTML document.
The answer hovers somewhere between "no way" and "maybe your component has a few tricks to do that".
The sane thing to do here would be to have a tool generate the HTML documents from a common template. Could be XML + XSLT, PHP/ASP/whatever, or a fully-fledged CMS (this actually helps let non-technical users write the document contents).
It's awful, but you could include a JS file that uses a bunch of document.write("...") to include common elements. Not SEO friendly.