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

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

Related

Multiple HTML links to specific pages in PDF

I have created a sort of table of content in html that link to specific page into pdf using #page=n and it works fine if i have 1 link for 1 pdf.
The problem comes when i have multiple link to the same pdf.
ie:
href="001.pdf#page=10"
href="001.pdf#page=20"
href="001.pdf#page=30"
The first time it works fine and open the pdf at the right page, then if i use others link with the pdf opne, the page didn't change.
There is a workaround for this?
Thanks for the first answer. You right, i've forgot some informations.
The final output have to be cross-browsers.
This is my test code with random online pdf:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
link 001
link 002
link 003
link 004
link 005
<iframe style="height:800px; width:800px;" name="PDFcontent" src="http://www.naplesip.com/wp-content/uploads/2015/10/pdf-logo.png"></iframe>
</body>
</html>
I've tried to used it on jsfiddle but does not work. Instead it work on browsers (firefox/chrome/edge/ie).
There is not much background information about how you are opening the PDF, what browser you are using, and how you use the other links. I will answer as well as I can in a general way.
Opening PDFs into a desktop program might accept your page anchor tag and jump to the requested page upon opening a PDF, but opening the same document again (while it is still open) will result in the system simply switching your active application to the one with the PDF open.
If you first close the document, then open another page, I suspect it would work, unless settings in your PDF reader are remembering the previous page.
This behaviour is something you have little control over on your own computer, and no control over on anyone else's so you might have to come up with an alternative.

HTML Link not working with my quotations

So I am starting to learn HTML and I am running into some weird things. I am trying to just use a link to go to a specific webpage. I typed in the code but it gave me an error saying it could not find the link on my desktop. However, when I copy and paste the exact same code from a website it works fine. Here are the two codes so you can compare, the top one works and the bottom one doesn't.
This is a link
<a href=“https://www2.housing.wisc.edu/dining/ordering/”>This is a link</a>
I was wondering if it had to do with the slightly different quotation marks, if it is I am still not sure how to fix it, because the computer autocorrects the quotations to that format.
If the comments haven't answered your question yet, yes you need to use a slightly different quotation mark. HTML only accepts the single typewriter (non-curly) quotation mark ' ' or the double one " ". Or, in your case, you can choose not to use quotes at all, unless the value contains a space or equal sign.
What are you using? Office? Open up a text editor like Notepad or download Notepad++ (free) and you won't have to deal with auto correct.
In any case the code you posted above works for me.
Open Notepad.
copy and paste
<html>
<body>
This is a link
</body>
</html>
click SAVE AS and instead of saving as a .txt file save as a .html to your Desktop.
Double click the newly created file, and it should open in a web browser.(If not you have to right click on the file and select "open with..." and choose a web browser
Click the link.

Page shows code not rendering

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.

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

Google Chrome Extension: Webpage in Popup

I'm new to creating extensions and I also don't know much about html but I have an idea for a chrome extension that should be pretty simple so if you give me a little help I may be able to do it.
I want a popup to open when the user clicks the extension-icon (like most extensions) and the popup is supposed to contain a webpage like "http://google.com". That's actually about it. I created the manifest file with the required data and thats fine, now I need to know how to make the html file contain the external webpage.
Another problem: when I tried different things in the html file the popup was tiny and just white.
I hope someone can give me hint. Thanks!
I have made an extension wich displays links to several websites.
My popup.html looks like this:
<!DOCTYPE html>
<html>
<body>
<p>
<a href="http://www.google.com" target="_blank>Google</a> <br/>
<a href="http://stackoverflow.com" target="_blank>StackOverflow</a> <br/>
</p>
</body>
</html>
The target="blank means it opens the site in a new tab
More information about html is found here:
http://www.w3schools.com/html/html_links.asp
Be sure to make the icon 19x19 pixels,and be sure to name it in the manifest.json file
with the filename extension for example
"browser_action":{
"default_icon":"iconname.png",
"default_popup":"popup.html"
}
You should be able to use an iframe tag within your popup. I do that many times to point the user a FAQ page hosted outside.