click this links to see the screenshots
full source code of the home page
source code of the external file
full source code of the home page (in google chrome inspect
view)
full source code of the home page (in google chrome page source
view)
I have been keeping the code indentation in that web pages from the beginning in my code editor. but when i see my site on google chrome, the indentation is not set properly. can I know why is this? I googled this, yet coudn't find an answer or a solution.
It is not Google Chrome's fault. Your files simply get compiled to this form, the browser displays them exactly as they look like.
But why they look like this? In your case PHP's include does only purely textual replacement, as in the picture bellow:
The effect is the same as if you copied the contents of the external file and pasted them to the main file, replacing the include tag.
If you would really insist on having the code indented properly after the include does its job, you would have to add new spaces at the beginning of each line (but first) of the included file. It would shift the text to the right (in this case 4 spaces) and in the result the indentation would be preserved.
However, I'd discourage you from doing so -- it is only the code that is generated, probably no one is going to work with the compiled result. Proper formatting of code is only meant to make the human work easier -- it has no effect on how the page will eventually look like, when rendered by browser. Thus, it probably would suffice if you kept the two source files formatted as they currently are and left the output as is, even though it is not indented well.
If you'd like to have the code properly formatted in the page source view, please remember that you can simply use the "pretty print" button in the lower left corner of the preview:
Related
For some reason when I try to create an html file vs code doesn't seem to recognize it and nothing html related works within it (autocomplete, etc). I'm not really sure where to go from here since VS code has been my go-to work environment.
Here's a picture of what it's saving the file as (usually the logo beside the file would look like this: <> ):
You should be able to just save it as html.
otherwise in the bottom right there is an option to change the language
I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.
I've got a simple MVC web page that pops up a dialogue box with a list of hyperlinks to files. They're properly prefixed with "file://" and the links work properly if copied to the clipboard and pasted into a browser window. However, from within the dialogue, clicking on the linked files returns... nothing.
Nothing at all happens. The behavior is identical in Firefox, Internet Explorer, and Chrome. No warnings, errors, etc.
Visually my dialogue looks like this:
If I "inspect element" on one of the links, for example, the top one for "javascript notes.txt", it looks like this:
This IS a valid hyperlink. As mentioned above, I can copy the link into the address bar of a browser and the linked file opens fine. I can also copy the full HTML of the element into notepad, wrapped in tags and save as an .html file, and the link works just fine from there. The links just don't work in the dialogue--from any browser.
I'm displaying the links in a Kendo grid currently. Thinking that might be a problem, I got rid of the grid temporarily and tried displaying them in a plain HTML . Same problem--clicking on the links produces no result at all.
Am I fighting something deeper here? Like, I'm using a jquery dialogue to show the list. do jquery dialogues do something to block hyperlinks from working?
TIA for any help.
As per Amy's comment on the original question, browsers seem to block the file:// links when opening from a page retrieved via http. The workaround I implemented came from the excellent article linked below: I coded a simple action method in a controller that returns not a view but a File, and changed the hyperlinks to invoke that controller method via http. Works like a charm.
see: http://rachelappel.com/upload-and-download-files-using-asp-net-mvc/
Overview:
After viewing a webpage online (using Firefox), I saved the webpage to an .html file. Upon then viewing the saved html file in Firefox, much of the content is just not there: I basically just see what amounts to a header and footer. The content I am actually interested in is not displayed. However, when I use an editor to look at the .html file, I can find the content among the html code fine. I just doesn't show up when I view the page and I can't figure out why. I am wondering how I could alter the code in order for the full page to display.
Specifics:
The webpage I am trying to view is for a recipe (http://www.cooksillustrated.com/recipes/1). This website requires a paid login, so you will likely not see the entire page anyway.
This link has a zip file of the .html file and the folder with the other images and stuff - https://drive.google.com/open?id=0B7IvODgWvxBbc1EwcmFwa050REE. The .html file has some name/email info in it but I have replaced it with made up info.
The relevant part of the .html file that does not view is lines 395 to 408. All the parts of recipe are right there, but it does not display in a browser. (I tried to display these html lines inline, but it exceeds the 30000 character limit.)
This makes me think that something (with which I am not familiar) in the html code is preventing viewing that content, and, if it were deleted or altered, would solve my problem. I have tried searching the web for an answer, but came up empty (I was not not really sure what to ask). And I have very little experience with html to know much of what is going on in that file. (And I want the html file; I am not looking for an alternative like just printing to pdf.)
If anyone can provide some pointers/direct me to a resource that would be greatly appreciated.
Hi im demonstrating the html tags that are new in CSS3 and I'm making a documentation for the easy viewing and interpretation on comparing both the source code and the output.And its its really hard for me going to the source code and then selecting the file and browsing it on the browser
It would be great if I could view both the source code and the output
on the same html page.
For example(I m talking from the page I ve attached below) if I select Source code the source code must be displayed on the screen or from any of the text editors.
I don't know whether it is possible to do so,If possible it would be great
if anyone of you could guide me.
To get the source of just one element, do this:
HTML: <div id="one"><span id="two"></span></div>
JS:
document.getElementById('one').innerHTML // returns <span id="two"></span>
document.getElementById('one').outerHTML // returns <div id="one"><span id="two"></span></div>
To get the source of the entire page, do this:
document.doctype + document.documentElement.outerHTML
document.doctype returns the doctype, and document.documentElement.outerHTML returns the code for the <html> tag and everything inside it.
Use the developer tools you have in all modern browsers (the most advanced ones being Chrome and Firefox).
You typically open such a toolset using the Ctrl-Uppercase-i shortcut.
Then you have a lot of useful tools, as described here for Chrome or here for Firefox.
One of them seems to be exactly what you need. For example in Chrome, the first tab, called "Elements", shows you the source code with a lot of goodies (interpreted css with reasons, element displayed when you hover the mouse, search, etc.).
I'd suggest you take the time to read the linked documentation, as this is an essential tool of any web developer. And you won't be able to stop using those tools as soon as you go deeper in javascript or css.