homepage Welcome to WebmasterWorld Guest from 54.226.252.142
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
HTML within HTML
Need to embed <html> inside an <html> tag
cosmoyoda




msg:3817962
 6:17 pm on Jan 2, 2009 (gmt 0)

Greetings,

I am attempting to embed a fully formatted HTML text document with images, heading, etc, without using iFrames, because I need to parse these files using PHP to make them shorter and also, iFrames need scrolling, which is definitely not the effect desired here.

How do I create html so that <head>, <body>, <title> won't be executed, but will show up on my website as is? What I want to do is to make the overall CSS styles of my site to NOT interfere with the formatting of the formatted text in the embedded HTML document. Simply copying the text of the HTML document would not work, for the formatting would be completely messed up, since it is reading the style definitions of my site's CSS file.

Is this even possible?

I'm sorry if this is in the wrong forum. Just in case some Server-side programming language is required, I do use PHP/MySQL in my web application.

Basically, all I need to know is how to include an HTML file in another (no iFrames)

Would really appreciate your help!

 

g1smd




msg:3818044
 8:11 pm on Jan 2, 2009 (gmt 0)

Your site and the other stuff need to have a different id or different class, and your CSS needs to reference the id or class for your site so that it doesn't touch the additional code.

cosmoyoda




msg:3818393
 10:36 am on Jan 3, 2009 (gmt 0)

Hey g1smd. Thanks for the reply. I tried doing as you suggested, but I don't think it worked. =( If anyone could please try to copy and paste the following code in a fresh html file, view it in a browser and tell me what I might be doing wrong with this method.

[pre]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
body.my_site h1 { color: red; }
</style>
</head>
<body class="my_site">
<p>Desired effect: Heading 2 should be blue, not red.</p>
<h1>Heading 1</h1>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
body.my_site body.include h1 { color: green; }
</style>
</head>
<body class="include">

<h1>Heading 2</h1>

</body>
</html>
</body>
</html>[/pre]


rocknbil




msg:3818539
 5:07 pm on Jan 3, 2009 (gmt 0)

Did you try slurping up the file in PHP, then substitute out the head/foot using preg_replace()?

You'll probably have to fiddle with it to get the right regexp, but this will work.

cosmoyoda




msg:3818563
 5:51 pm on Jan 3, 2009 (gmt 0)

I'm sorry rocknbil, but could you elaborate on that?
I'm not sure I quite understand what you want me to try here.

cosmoyoda




msg:3818565
 5:56 pm on Jan 3, 2009 (gmt 0)

Oh wait, so you mean like taking the style definitions in the "included HTML" tag and put on my main HEAD tag?

I guess I could try that and then substitute the body that to be a DIV tag instead:

So this is what I just did by hand and it seems to be working fine:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
body.my_site h1 { color: red; }
</style>
<style type="text/css" media="all">
div.include h1 { color: green; }
</style>
</head>
<body class="my_site">
<p>Desired effect: Heading 2 should be blue, not red.</p>
<h1>Heading 1</h1>
<!--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
body.my_site body.include h1 { color: green; }
</style>
</head>-->
<div class="include">

<h1>Heading 2</h1>

</div>
<!--></html>-->
</body>
</html>

Now the only problem will be doing this in RegEx. I don't have a lot of experience in RegEx unfortunately, but I will try my best.

UPDATE: Never mind. It did not work. When I added "font-size: 48px;" to "body.my_site body.include h1 { color: green; }", both headings were in 48px, which is not the effect I am trying to accomplish here. What I am trying to do here is to force CSS to NOT BE INHERITED inside the class="include" portion of the code.

Anymore help would be kindly appreciated.

cosmoyoda




msg:3818745
 3:49 am on Jan 4, 2009 (gmt 0)

I give up. Through some research I found out that it is impossible to have Multiple HTML, HEAD and BODY tags.

Sorry for all the mess by creating this thread.

zen_ar218




msg:3818799
 8:23 am on Jan 4, 2009 (gmt 0)

why do you have to use only h1?
There are h2-h6 which you can specific the color , size and styles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
body.my_site h1 { color: red; }
body.my_site h2 { color: blue; }
body.my_site h3 { font-weight: bold; font-size: 13px; color: #006600;}
body.my_site h4 { font-size: 16px; color: #666600;}
body.my_site h5 { font-size: 18px; color: #336600;}
body.my_site h6 { font-size: 24px; color: #cccccc;}
</style>
</head>
<body class="my_site">
<p>Desired effect: Heading 2 should be blue, not red.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

cosmoyoda




msg:3818807
 9:08 am on Jan 4, 2009 (gmt 0)

zen_ar218, I know that I could do that, but that is not the point.

I only used the Heading 1 as an example for simplicity's sake.

UPDATE: I have started a new thread in the CSS forum [webmasterworld.com] that will hopefully illustrate a little bit better what I am trying to accomplish here.
[webmasterworld.com...]

stevedob




msg:3818841
 12:19 pm on Jan 4, 2009 (gmt 0)

How about slurping their code and then adding your (presumably page header and footer) details when writing that out, using inlined style info within your additional details?

The page will then generally reference their original css styling, and you override that for your new additions.

rocknbil




msg:3818900
 3:44 pm on Jan 4, 2009 (gmt 0)

could you elaborate on that?

It sounds like for this,

Basically, all I need to know is how to include an HTML file in another (no iFrames)

You could do something like this:

// read it into a string
$included_file = file_get_contents($file);
$included_file = preg_replace("/<html>.*<body>/im",'',$included_file);
$included_file = preg_replace("/<\/body>.*<\/html>/im",'',$included_file);

(You will probably have to fiddle with the regexp to get it to work, untested; not sure if preg_replace supports the m modifier)

So now $included_file should contain everything between the body tags, style as you wish with your master template.

However, it's sounding like you actually want the opposite:

...What I want to do is to make the overall CSS styles of my site to NOT interfere with the formatting of the formatted text in the embedded HTML document.

So in this case it sounds like you want the overall template to not have the styles and allow the included page to style "itself."

What I might try in this case is have a separate template with "markers":

<html>
<head><title>bleah</title>
[CSS]
</head>
<body>
[CONTENT]
</body>
</html>

Then apply similar regexp logic to the above, but read the file line by line. Find the CSS line, store it in a variable, than use it to replace my [CSS] marker with the target CSS.


$fhandle = @fopen("$file", "r");
if ($fhandle) {
while (!feof($fhandle)) {
$buffer = fgets($fhandle, 4096);
if (preg_match("/\<.*text\/css.[^>]+/i",$buffer)) {
$thisCSS = $buffer;
//OR:
//if (preg_match("/(\<.*text\/css.[^>]+)/i",$buffer)) {
//$thisCSS = $1;
}
}
fclose($fhandle);
}

Now do the same thing, strip the file's header,

$included_file = file_get_contents($file);
$included_file = preg_replace("/<html>.*<body>/im",'',$included_file);
$included_file = preg_replace("/.*<\/body></html>/im",'',$included_file);

Then open the above template, sub out the markers for the CSS and content.


$fhandle = @fopen("$template", "r");
if ($fhandle) {
while (!feof($fhandle)) {
$buffer = fgets($fhandle, 4096);
if (preg_match("/\[CSS\]/",$buffer)) {
$buffer = preg_replace("/\[CSS\]/",$myCSS,$buffer);
}
if (preg_match("/\[CONTENT\]/",$buffer)) {
$buffer = preg_replace("/\[CONTENT\]/",$included_file,$buffer);
}
$final .= $buffer;
}
fclose($fhandle);
}

header("content-type:text/html\n\n");
print $final;

It's a bit inefficient, and untested, may need some tweaking but this would work. You could probably do all the subs and reading in a single file read, of the source file.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved