Page shows code not rendering - html

I know this is simple question, but i am fighting with it for few hrs, so its better to ask in forum to get help quickly. I have added the following simple html snippet in a TextEdit program and saved the file as webpage(.html). When I run this file in any browser, like safari, chrome or firefox, it shows the same code there instead of rendering this as web page.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Could someone help me to show this as real web page rather than source code showing?

If you have access to the server scripts creating the page, then check if somewhere the http headers are being changed by that code. The browser needs to receive a header like that
Content-Type: text/html
[example in PHP: header(Content-Type: text/html);]
in order to render html properly. If this header is changed, then the browser won't be able to interpret it as html.

It is likely that TextEdit has formatted your text, since by saving it as a Web Document it thinks that you have typed up the web page how you want it displayed, with all formatting, instead of raw HTML code. Try to save the document as raw text, then change the extension manually from whatever it is (probably .txt) to .html. For a more permanent solution, it is advisable to use a non-formatting text editor when coding.
EDIT: This is what Apple have to say: http://support.apple.com/kb/ta20406

The solution to your problem is simple.
Just open TextEdit and go to preferences.
Just tick the box which says"display html files as html code instead of formatted text".
Your problem will be solved. :)

You have saved the text you pasted in as HTML content, in the HTML editor. Instead, you should try to paste the text in the code view, not the editor view.

In case any of you have already created the file and not sure how to proceed, open the file in TextEdit. Go to Format -> Make plan text. Then save and close the file. Then open the file location in finder and rename to .html and this will convert the file appropriately.

Related

How do I get html from textedit to appear in Chrome?

I'm brand new to html so please bear with me...
I am trying to use textedit on mac to write html but it wont appear properly in chrome when I open the file.
I typed the following into text edit, saved as index.html file then when I open with chrome it appears exactly as it has been written with all the tags showing...what am I doing wrong? The code is a straight copy from W3schools so I'm pretty sure there is nothing wrong with the code so must be the way I am managing the files.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
I'm guessing that you're not using plain text mode. According to https://support.apple.com/guide/textedit/work-with-html-documents-txted0b6cd61/mac:
Create an HTML file
In the TextEdit app on your Mac, choose File > New, then choose Format > Make Plain Text.
Enter the HTML code.
Choose File > Save, type a name followed by the extension .html (for example, enter index.html), then click Save.
When prompted about the extension to use, click “Use .html.”
See also https://www.lifewire.com/edit-html-with-textedit-3469900 and https://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786

Content showing well formated in frontend but in editing mode it's showing html codes

I am using tinnymce editor in textarea sections of my project.
when i am inserting the content inserting in database as html code like
<p>Hello, its a test post</p><br/>
but its showing in frontend pretty nice.
the probleme is when i am going to edit page to update the post content are showing as html raw code same to same in data base like
<p>Hello, its a test post</p><br/>
thats why i can't see the images in contents.
please help me to fix the probleme.
Some aspect of your application is escaping the HTML when you go to reload it into TinyMCE. When you want to load the content back into the editor you need to load HTML that has not been escaped.

HTML code indentation issues in google chrome browser

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:

.html file without any HTML tags

Beginner question:
Every .html page we create requires tags to start and end html file an recognize it as a html file.
But even when I don't give any HTML tags and simply write a text in .html file, the file gets opened in the browser with the text I have written in the .html file without using any of the HTML tags.
How is the text getting displayed in the browser without using any HTML tags?
Does the browser automatically add HTML tags behind the scenes??
When I viewed the page source in that also it shows simply the text not the HTML tags...
This is a very simple question but driving me nuts please help me
Yes the browser automatically add HTML tags behind the scenes:
look:
My HTML file:
In my browser (F12 in chrome to get this OR CTRL+U to get the source code):
Yes, if you don't supply any tags, the browser will add some default tags. It knows it's HTML because the server sends the header
Content-type: text/html
If you open the Developer Tools (usually with F12) you can view the synthesized DOM and see the tags that the browser added automatically.
Browsers aren't just software which renders perfect (X)HTML.
They do quite different and often more complicated jobs like:
Fixing malformed HTML
Adding missing tags
If you want to know which HTML structure gets rendered by the browser, take a look at the developer console.
Additionally, the file extensions .html or .htm do not matter. The MIME type which gets sent by the server determines the render mode.
This is why you could create an URI route http://example.com/test.gif which renders as a normal HTML page.
Only if the server (e.g. when accessing from your hard drive) does not provide a MIME type, the browser may try its Content sniffing algorithms.
Because of the .html extension the browser automatically knows that it is HTML, meaning you don't need the HTML tags (however, this is bad practice)...
As for the text being displayed, that is because the text does not need to be inside any special tags in order for it to be shown.
I hope this helps you a bit, let me know if you need further help!
I do not know whether the question is still current, but one solution is to open the HTML document in MS Word. In this case you see only the formatted content.

On a Mac, I created a .html document locally but in a browser I just see HTML source

On a Mac, I created a file with some very simple html, e.g. <h1>my web page</h1> I save it as .html. I start firefox or Opera and I use open file, but I just see the content as html source, e.g. I see <b> tags, etc.
If you want all the code here it is:
<html>
<head>
</head>
<body>
<h1>My Web Page</h1>
</body>
</html>
Edit: 'Rich text' format was the issue. See my answer below.
Shad was actually on to the right answer here.
The problem was that I was using the standard mac text editor - textedit - and it was saving the document type as rich text formatting (the standard). I had to go into textedit preferences and make change the default formatting for a new document from Rich text to Plain text. This fixed the problem!
As this was a stupid problem, yet not obvious to most I'll post the screen shot of where you change that default new document preference in textedit prefs.
Probably because of some silly header stuff. Browsers use the header information to decide how to render it, not the extension, I think. You know, there's a tiny chance that any file- exe, jpg, png, txt- could actually appear as valid HTML because they're both just files at heart.
Open the "Get Info" of the file by right clicking on the file (or control click) and selecting Get Info. Under the section titled Name & Extension un-check Hide extension. You will see that mac has added an extension (usually .txt), just remove that extension and close