I have a basic website in which I intend to fill with a large amount of informative text. I wish to separate the content from the actual source code I use so my code is more efficient and organised. How do I go about doing this?
I tried publishing my Google sheet and using the code:
<div class="content_text">
<iframe src="https://docs.google.com/spreadsheets/d/1Th2gcOG92xex39mE_Ql0cYqN3I6BFPPQ-KQRUk-z48I/pubhtml?gid=0&single=true&widget=false&headers=false">
</iframe>
</div>
However this left me with:
Is there a way to eliminate the formatting to leave me with just the raw text?
There are a few undocumented parameters, you just need to modify the URL in the code adding the parameter chrome=false removes the title bar and gridlines=false will remove the borders. Your URL should look like this:
https://docs.google.com/spreadsheets/u/1/d/1Th2gcOG92xex39mE_Ql0cYqN3I6BFPPQ-KQRUk-z48I/pubhtml?gid=0&single=true&chrome=false&gridlines=false
Just replace the URL in the src attribute of your iframe tag.
Related
I am creating a templates application where users can write any HTML/CSS code inside a textarea (E.G. a full html page pasted on a textarea). These users are mostly familiar with html and css so we have not yet implemented markdown. One important feature that we would like to add is the ability to preview the html in the textarea before submition. I have thought of ways that these can be done, but I am not sure which would be correct and most maintainable.
Preview the html inside a div in the same page - the problem I can see here is the existing CSS style might interfere with the CSS styles the user typed in the textarea. Furthermore, if the user writes body tag in the textarea, there will be another body tag inside the existing body tag of the actual page, so the html might become malformed.
Preview the html on a separate window - the problem is I do not have much control on this (if the user uses a poppup blocker, for example)
Preview the html on a separate tab - the problem is the user might be confused (E.G. closes the whole browser, thinking that it opens in a new window)
Preview the html on an iframe - this is doable, but will require me to create an additional .html file just for previewing
Preview the html on a modal - this is doable, but I am not sure if modal bodies will accept toplevel tags like title or body
Can anyone help me? Which of these potential solutions are best? Or is there a better solution?
I would use an iframe. It can run a new body and html inside of it. So if someone for example styled the body in it, it wouldn't effect the page its on. Here I wrote the code for you. Give it a shot, do some html coding in the text area and click "run"
<p>type some HTML/CSS code in here:</p>
<textarea type="text" rows="15" cols="40"id="myText"></textarea>
<p>Your HTML output</p>
<iframe id="output" srcdoc="">
</iframe>
<p>Click the button to preview your code</p>
<button onclick="myFunction()">run</button>
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("output").srcdoc = "<!doctype html> <html>" + x + "</html>";
}
</script>
Have you investigated iframe's srcdoc attribute? It allows you to have a string which is a complete document without needing to create a separate file. Of course you'd have to do some escaping or something to deal with the quotes.
Here's a trivial example:
<iframe srcdoc="
<!doctype html>
<html>
<head>
</head>
<body>
hello
</body>
</html>">
</iframe>
Have a look at https://codemirror.net/
It is opensource and will give you a complete CodeEditor out of thej box.
If not:
If you want to show HTML markup in a textarea, you should escape all
‘<’ characters with <. For consistency’s sake, you may also
escape ‘>’ characters with >.
Is there a ('newbie-simple') way to embed an image inside html, however not in the inline form as usual:
<img src="data:image/png;base64,iVBORw0KGgoAAAA [...]" />
but in a form where the base64 code is placed on the end of the html file?
A possible benefit of this method would be that an image can be inserted in the page on more than one place using the same image data from the bottom of the html file.
TL;DR: With pure HTML/CSS - unfortunately no.
I need that too for Sciter Notes project to save notes (plain HTML files) with embedded images.
Ideally you should be able to do something like this:
<img src="cid:1234" />
...
<data id=1234 type="image/png" base64>
iVBORw0KGgoAAAA...
</data>
but unfortunately no such mechanism yet.
But you can implement schema explained above with script though.
If you are using HTML5, then you do not have to worry about caches. The browser will load all images and store them into an image-list, therefore the image will be loaded only once and reused at every place the key (the URL to the source image) is found.
The only thing you will have to do, if you are only using HTML, is to copy the URL of the image into every place you need to use it. This is necessary, because you cannot declare variables in HTML and hence cannot change them from another place in the document. For this purpose you would need additionally javascript for example.
Then you can go ahead with CSS to adjust the pictures to your requirements. Yu can either define classes in the header and let the img tags have these classes, or you can type the style properties inline or you can import an external CSS-file.
EDIT:
An example with javascript would be to add this code in
<body>
<img id="img" src="myIMG.jpg">
<script type="text/javascript">
function changeImage(id, src) {
document.getElementById(id).src=a;
}
</script>
</body>
Here the function changeImage is declared now. You can call this function either via onclick or inside of the script tag. You can address the correct image through its ID as first parameter (you will have to give every image its ID, don't confuse it with the image-list of your browser, here you define the ID in the img-tag) and the new source url as second parameter.
Back with another big question:
I have to create a network of pages with content linked though them. For link inside the same page i'm using this method:
<div id="anchorname">
The content.
</div>
and:
Link Text
Now i have to link to the #anchorname from another page but it doesn't work, i tried this:
Link Text
Is there something i am doing wrong?
This is possible to do. You might try using the full name of the page including the suffix. e.g:
Link Text
If that doesn't work then I would experiment with using a full path.
EDIT: As you've stated that you're using Wordpress then you should try it like this:
Link Text
I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.
I am building a platform where people can send emails - to display a preview of the emails, I use a div below the form where they can type the message.
So the general structure looks like this:
<html>
<body>
<form>
<!-- Form to enter email here -->
</form>
<div>
<!-- Email preview here -->
<html>
<!-- Email content, updated everytime user types something --->
</html>
</div>
</bod>
</html>
However, simply using the html tags inside the html document itself seems to confuse every browser - also, it doesn't seem very clean.
Since the email that is sent will be a whole html document of its own, it would be the easiest to just put all that inside the div.
How can I do that in a valid, clean way?
Use an iframe. You can write dynamic content to them - you don't always have to load physical pages into them with an src attribute.
HTML:
<iframe name='preview'></iframe>
JS (inside DOM-ready callback)
var doc = document.preview.open("text/html","replace");
doc.write('<html><body><p>this is some content</p></body></html>');
doc.close();
You can't get this around using the approach you have used. Getting emails rendered in mail clients is a chalenge, You may want to use an iframe instead. However you have to make sure that the contents of an email copy have to be fully in a table layout format.