Sign in to follow this  
Lode

[web] "include" text in html

Recommended Posts

Hi, With a .css file it's possible to define certain standard colors and such that multiple .html files can use. I was wondering if, apart from colors and fonts, it's also somehow possible to include a standard text in multiple html files in a similar way, e.g. a copyright notice or warning that you want in every html file. It's for a manual in html, not for a website, so PHP or other scripts aren't an option, the user must be able to read the html files from his disk. I know one way and that is frames, but I don't want manual pages with frames :)

Share this post


Link to post
Share on other sites
Perhaps this is what you're looking for.


<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.copyright:after {
content: "(C) 2010 Me!"
}
</style>
</head>
<body>
<p>Blah blah blah.</p>
<span class="copyright" />
</body>
</html>


Share this post


Link to post
Share on other sites
Quote:
Original post by mattd
Perhaps this is what you're looking for.

*** Source Snippet Removed ***


That looks quite useful! Apparently you can only enter text and not HTML tags with that though, e.g. suppose I'd want every page to start with a link "back to main page" with an actual a href tag and such, that doesn't appear to work :(

I also tried the iframe tag, but it looks very weird! It doesn't really inline the text, there's a box around it, and if I put a link in there, and click it, only the iframe goes to that link, not the whole page. So basically it looks and behaves like an ordinary frame, except no "resizers"...

Share this post


Link to post
Share on other sites
Taking that concept, this would probably work too, removing the need to include the span element in every page:


body:after {
content: "(C) 2010 Me!";
font-style: italic; /* some extra styling for fun */
display: block;
width: 100%;
text-align: center;
}




Quote:
Original post by Lode
That looks quite useful! Apparently you can only enter text and not HTML tags with that though, e.g. suppose I'd want every page to start with a link "back to main page" with an actual a href tag and such, that doesn't appear to work :(

What you can do, is select elements based on their attributes:


a[href="index.htm"]:after {
content: "(C) 2010 Me!";
}

<p></p>
<p></p>
<p></p>
<a href="index.htm"></a>





Quote:
I also tried the iframe tag, but it looks very weird! It doesn't really inline the text, there's a box around it

You might be able to alter the default style of an iframe using CSS (although I'm not sure about browser incompatibilities).
Quote:
and if I put a link in there, and click it, only the iframe goes to that link, not the whole page.

Well, it's a completely different frame, so that makes sense. Have you tried setting the link's target attribute?
Quote:
So basically it looks and behaves like an ordinary frame, except no "resizers"...

To be honest, it sounds like a hack anyway. What is wrong with just including whatever you want in every page? Can't you just automatically generate the files for the manual?

Share this post


Link to post
Share on other sites
Quote:
Original post by Wan
Can't you just automatically generate the files for the manual?


Hmm maybe that's what I should do indeed... just make a script that generates the html pages by appending a header, body and footer file.

Thanks for the idea :)

Share this post


Link to post
Share on other sites
You can use jQuery (because its easy) or Native javascript:

For native JS:

document.getElementById('copyright').innerHTML = "Created by <a href='mailto:webmaster@yoursite.com'>Lode</a>";


the above works if you are using <span id="copyright">

if you want to use class instead of id just follow the Link to get the element by class name.

in jQuery its a lot easier:

if you are using id:
$('#copyright').html("Created by <a href='mailto:webmaster@yoursite.com'>Lode</a>");


if you are using class:
$('.copyright').html("Created by <a href='mailto:webmaster@yoursite.com'>Lode</a>");

Share this post


Link to post
Share on other sites
An alternative is to write it using some server-side support (SSI would seem the most obvious, though you could use just about anything) then write a quick spider that dumps the locally running version of the site to static HTML.

I'd go with the JavaScript option, otherwise – CSS content doesn't work in older browsers.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this