It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
i want to include one html file into another, but it doesnt seem to work out
the two files are
C:/wamp/www/AuctionVilla/index.html
and
C:/wamp/www/AuctionVilla/header.html
here's my index.html file
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />
</head>
<body>
<div id="index_container">
<table align="center">
<tr>
<td>
<table width="1000px" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3">
<!--#include virtual="C:/wamp/www/AuctionVilla/header.html" -->
</td>
</tr>
<tr>
<td colspan="3"> 
</td>
</tr>
<tr>
<td width="350px">
</td>
<td width="5px" rowspan="3"> 
</td>
<td width="650px" rowspan="3">
<div id="product_container" class="divcontainer" style="width: 645px; height: 500px;">
</div>
</td>
</tr>
<tr>
<td width="350px" height="5px">
</td>
</tr>
<tr>
<td width="350px" height="355px">
<div id="movie_container" class="divcontainer" style="width: 350px; height: 355px;">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
and here's my header.html file
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>header</title>
<link rel="stylesheet" type="text/css" media="screen" href="CSS/headerMenu.css" />
</head>
<body>
<div id="main_body">
<div>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<object classid="clsid:1" codebase="../UAuction/Images/matrimony.swf" width="1000" height="228">
<param name="Images/matrimony.swf" />
<param name="quality" value="high" />
<embed src="../UAuction/Images/matrimony.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="1000" height="228" wmode="transparent">
</embed>
</object>
</td>
</tr>
</table>
</div>
<br/>
<div id="topmenu">
<table align="center" bgcolor="#000000">
<tr>
<td>
<ul id="css3menu">
<li>  Home</li>
<li>  Category
<ul>
<li>Art
<ul>
<li>Paintings</li>
<li>Sculptures</li>
</ul>
</li>
<li>Books
<ul>
<li>Book</li>
<li>Documentaries</li>
</ul>
</li>
<li>Furniture
<ul>
<li>Chair</li>
<li>Wardrobe</li>
<li>Table</li>
</ul>
</li>
<li>Sport Goods
<ul>
<li>Cricket</li>
<li>Football</li>
<li>Rugby</li>
</ul>
</li>
</ul>
</li>
<li>  Register</li>
<li>  Top Bidders</li>
<li>  Top Sellers</li>
<li>  Contact Us
<ul>
<li>Partners</li>
<li>Offices</li>
</ul>
</li>
<li>About Us  </li>
</ul>
</td>
</tr>
</table>
</div>
</div>
<script src="../UAuction/JQUERY/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../UAuction/JQUERY/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="../UAuction/JQUERY/script.js"></script>
</body>
</html>
i dnt knw whta seems to wrong, but it isnt workking fr me...
i tried to change the html to shtml but the file doesnt include at all..
If you only have HTML on your server, or you need only HTML files, you can use frames.
<frameset rows="25%,75%">
<frame src="header.html" />
<frame src="index.html" />
</frameset>
or iframes like this (in your index.html file):
<iframe src="header.html" />
But, it is not recommended as it creates a kind of table. If you have PHP on your server, create a PHP file, and use
include("header.html");
If you have SSI (Server Side Includes) on your webserver, then have this:
<!--#include virtual="header.html" -->
Personally, I suggest you to use PHP method.
The only "include" mechanisms in HTML itself are (i)frames and objects.
HTML doesn't have an 'include' mechanism - I'm not sure where you've seen these solutions on StackOverflow. You've probably been looking at answers for a server side language such as PHP or ASP.
Related
I have dozens of .html files all with different names of which old head and nav I need to replace with a new improved head and nav.
I know awk would be suitable for such operation but I am not confident on how to proceed.
NOTE: The title tag of the every html file is going to be replaced with something fixed, I think I will circumvent this issue by either leaving "Plant Database" or rendering the html title dynamically (every .html file has a correct file name), however that's also something I would need help on how to do. (document.title I assume?)
Old file content (first 69 lines):
<!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"><!-- InstanceBegin template="/Templates/templatefrø.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Apotekerkattost - Malva sylvestris</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link rel="shortcut icon" href="bilder/faviconefferus.ico">
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><img src="bilder/efferus1.jpg" width="289" height="129" alt="Efferus veksthus" /></div>
<div id="menu">
<img src="bilder/Frørød.jpg" border=0 width="123" height="35" />
<img src="bilder/soppsort.jpg" border="0" width="138" height="35" />
<img src="bilder/skogshop.jpg" border="0" width="138" height="35" />
<img src="bilder/Oppskrifter.jpg" border="0" width="118" height="35" />
</div>
<br >
<div id="middle">
<div id="submenu"><table width="201" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center"><img src="bilder/subtop.jpg" width="198" height="24" /></div></td>
</tr>
<tr>
<td><div align="center" class="sub-bg">
<p>
Planteshop<br><br>
Frø- og plantekatalog<br><br>
Plantebistand<br><br>
Kurskalender <br><br>
Humle- og bieplanter<br><br>
Planter inndelt etter herdighetssone<br><br>
Plantepakker<br><br>
Hva er en skoghage?<br><br>
Bilder fra en skoghage<br><br>
Nitrogenfiksering<br><br>
Jorddekkere<br><br>
Vindbrytere<br><br>
Trær<br><br>
Busker<br><br>
Stauder<br><br>
Systemplanter<br><br>
Andre planter<br><br>
Skadeinsekter og nytteinsekter<br><br>
Plantesykdommer<br><br>
Planteformering<br><br>
Beskjæring<br><br>
Ugressmiddel<br><br>
Efferus veksthus på <img src="bilder/fb.jpg" width="15" height="15" /><br><br>
"Dyrking av Storhassel i Norge" på <img src="bilder/fb.jpg" width="15" height="15" /><br><br>
Skadeinsekter, nytteinsekter og plantesykdommer på <img src="bilder/fb.jpg" width="15" height="15" /><br><br>
Hvem er Efferus?<br><br>
Kontakt<br><br>
Åpningstider<br><br>
</p>
</div></td>
</tr>
<tr>
<td><div align="center"><img src="bilder/subbottom.jpg" width="198" height="35" /></div></td>
</tr>
</table>
</div>
New file content (51 lines):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plant Database</title>
<link rel="shortcut icon" href="bilder/deciduous-tree.ico">
<link href="main_styles.css" rel="stylesheet" type="text/css"/>
<style>
#import url('https://fonts.googleapis.com/css2?family=Domine:wght#400;600;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Domine:wght#400;600;700&family=Lato:ital,wght#0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#0,400;0,500;1,400&display=swap');
</style>
</head>
<!-- ALWAYS ON HOME BUTTON -->
<img id=left_space style="position: fixed; top: 1.5rem;" src="./bilder/Efferus_logo_black.png" width="100px">
<!-- HEADER -->
<nav class="navbar" >
<!-- LOGO -->
<div id=left_space class="logo"><img src="bilder/Efferus_logo_white.PNG" width="100px" alt="efferus_logo"/></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Plantebistand</li>
<li class="services">
Database
<!-- <ul class="dropdown">
<li>Frø og Planter </li>
<li>Konserving</li>
<li>Husapotek</li>
<li>Dropdown 3</li>
<li>Dropdown 4</li>
</ul> -->
</li>
<li>Hvem er Efferus?</li>
<li>Kontakt</li>
</div>
</ul>
</nav>
You can do it with head and tail - for example, I am replacing first 3 lines of f1.txt with the first 2 lines from f2.txt
>>> cat f1.txt
a
b
c
d
e
>>> cat f2.txt
x
y
z
a
b
Output
>>> head -n 2 f2.txt;tail -n +4 f1.txt
x
y
d
e
I was asked to make the copy of these with only html :
I tried to do it use this code :
<!DOCTYPE html>
<html>
<head>
<title>
Table-2
</title>
</head>
<body>
<table width="20%" border="1" cellspacing="0">
<tr>
<td>
<p>Webpage</p>
</td>
</tr>
<tr>
<td>
<p align="center">
<b><u>Ordered and Unordered list</u></b>
</p>
<p>
<ul align="right" type="circle">
<li>NDC</li>
<li>DC</li>
<li>DCC</li>
</p>
</ul>
</p>
<p>
<ol align="left" tyle="1" start="7">
<li>NDC</li>
<li> DC</li>
<li>DCC</li>
</ol>
</p>
</td>
</tr>
</table>
</body>
</html>
But the circles of unordered list is not aligning. Can I do it using any other method?
Here you are! You can use this code:
<!DOCTYPE html>
<html>
<head>
<title>
Table-2
</title>
</head>
<body>
<table width="20%" border="1" cellspacing="0"><tr><td>
<p>Webpage</p>
</td>
</tr>
<tr><td>
<p align="center"><b><u>Ordered and Unordered list</u></b></p>
<ul type="circle" style="margin-left: 65%;">
<li>NDC</li>
<li>DC</li>
<li>DCC</li></p>
</ul>
<p><ol style="margin-left: 20%;" type="1" start="7">
<li>NDC</li>
<li> DC</li>
<li>DCC</li>
</ol></p>
</table>
</body>
</html>
All you need to do is use the margin-left property.
If you want to be a bit more formal with you code, you can do this:
Create a file called style.css, and add this code in it:
ul[type="circle"] {
margin-left: 65%;
}
ol[type="1"] {
margin-left: 20%;
}
Then, go back to your HTML, and add this:
<!DOCTYPE html>
<html>
<head>
<title>Table-2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table width="20%" border="1" cellspacing="0"><tr><td>
<p>Webpage</p>
</td>
</tr>
<tr><td>
<p align="center"><b><u>Ordered and Unordered list</u></b></p>
<ul type="circle">
<li>NDC</li>
<li>DC</li>
<li>DCC</li></p>
</ul>
<p><ol type="1" start="7">
<li>NDC</li>
<li> DC</li>
<li>DCC</li>
</ol></p>
</table>
</body>
</html>
How can i overlap the collapsed/expanded content display in the frameset ( i dont want top frame details to be shorten) ? I use a 3 framed frameset(top frame,left frame and right frame), and can't make this thing work (script made for overlap the expanded content in top frameset something like z-index logic). Is it possible to make this change? please give some advice. thanks
frameset page
<html>
<FRAMESET rows="18%,*" frameborder="YES">
<frame src="frame_a.htm">
<FRAMESET cols="15%,*" frameborder="YES" >
<frame src="frame_b.htm">
<frameset rows="*" frameborder="YES" border="1" framespacing="1" cols="*">
<frame src="frame_c.htm">
</frameset>
</html>
frame a page
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table style="background-color:#DDDDDD" border="1" width="100%">
<tr>
<td>
<a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
<div id="demo" class="collapse">
<br/>testing content
<br/>
<input type="button" value="readMore">
</div>
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
</tr>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left " >TOP FRAME</td>
<td width="45% " >TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Screenshot of current system layout.
But when i click on expand link, all the top frame details will be shorten. how to make the expanded details layout overlap the topframe instead?
expected output:
"please give some advice"
Stop using frames: they are not supported in HTML5.
Use tables when you need a table. Do not use tables for layout purposes.
Always specify a docytpe.
Use lower case for the HTML tags (or upper case if you want, but don't mix them)
Take this list as a recommendation and not as criticism. I made those mistakes too.
As you mention in the question, this can be fixed with z-index. The problem that you are facing can be solved by making both tables have absolute position (aligned to the top-left), and giving the first table a higher z-index than the second table:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table style="background-color:#DDDDDD;position:absolute;top:0;left:0;z-index:2;" border="1" width="100%">
<tr>
<td>
<a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
<div id="demo" class="collapse">
<br/>testing content
<br/>
<input type="button" value="readMore">
</div>
</td>
</tr>
</table>
<table style="position:absolute;top:0;left:0;z-index:1;" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
</tr>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left " >TOP FRAME</td>
<td width="45% " >TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>
I have html like below, when I'm trying to browse this in IE9, nothing will come up until you mouseover the div. if I change the "X-UA-Compatible" to "IE=8" it will show up.
your suggestions are highly appreciated.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
</head>
<body>
<table>
<tr>
<td>
<div style="height:400px; width:400px">
<OBJECT ID="Player" HEIGHT="100%" WIDTH="100%" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
</OBJECT>
</div>
</td>
</tr>
</table>
</body>
</html>
I have bought a Joomla template from Template monster. It looks like this template isn't Ie8 fully compatible. I can't count on support, because when entering their online chat, you get a fague chat bot.
The problem is that the template doesn't show any text after the flash banner. In FF it all works great, but in Ie7,8 andabove not. Only the top menu and flash header.
This is the header
<!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<base href="http://www.friesecomputerservice.nl/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Friese Computerservice</title>
<link href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
<script type="text/javascript" src="/templates/theme520/scripts/jquery.js"></script>
<script type="text/javascript" src="/templates/theme520/scripts/maxheight.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.menu-nav li').hover(
function() {
$j(this).addClass("active");
$j(this).find('.ulwrapper').stop(false, true).slideDown();
$j(this).find('.ulwrapper .ulwrapper').stop(false, true).slideUp('fast');
},
function() {
$j(this).removeClass("active");
$j(this).find('div').stop(false, true).slideUp('fast');
}
);
$j('.ulwrapper').hover(
function() {
$j('.parent').addClass("active_tab");
},
function() {
$j('.parent').removeClass("active_tab");
}
);
});
</script>
<script type="text/javascript" src="/templates/theme520/scripts/cufon-yui.js"></script>
<script type="text/javascript" src="/templates/theme520/scripts/News_Gothic_400.font.js"></script>
<script type="text/javascript" src="/templates/theme520/scripts/cufon-replace.js"></script>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<link rel="stylesheet" href="/templates/theme520/css/constant.css" type="text/css" />
<link rel="stylesheet" href="/templates/theme520/css/template.css" type="text/css" />
</head>
This is the body HTML including flash
<div class="flash"><p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24"
width="100%" height="393">
<param name="movie" value="/images/stories/header_v8.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<!--[if !IE]> <-->
<object data="/images/stories/header_v8.swf"
type="application/x-shockwave-flash" width="100%" height="393">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!----> <!--[endif]-->
</object></p></div>
<!--content-->
<div id="content">
<div class="clear">
<!--left-->
<div id="left" class="maxheight">
<div class="left-indent maxheight">
<div class="left-border maxheight">
<div class="left-inner">
<div class="wrapper-box module_menu">
<div class="boxTitle">
<h3 >Main Menu</h3>
</div>
<div class="clear">
<div class="boxIndent">
<ul class="menu"><li class="item1"><a href="/home.html">
<span>Home</span></a></li><li class="item27">
<span>Blog</span></li>
<li class="item2"><a href="/joomla-license.html">
<span>Joomla! License</span></a></li><li class="item49">
<span>News Feeds</span></li>
<li class="item60"><span>Wrapper</span></li>
<li class="item61"><span>User</span></li>
<li class="item62"><span>Poll</span></li>
<li class="item63"><span>Search</span></li>
<li class="item48"><span>Web Links</span>
</li></ul> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--center-->
<div id="container" class="maxheight">
<div class="clear">
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="100%" class="article_column"> <div class="article-title">
<table class="contentpaneopen">
<tr>
<td class="contentheading" width="100%">
<div class="article-title-text">
Call of Dury - Black Ops </div>
</td>
</tr>
</table>
</div>
<div class="wrapper1-border">
<div class="wrapper1-bg clear">
<div class="article-text-indent">
<div class="clear">
<table class="contentpaneopen">
<tr>
<td valign="top" colspan="2">
<h1>Call of Duty - Black Ops te koop in Stiens</h1>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="article-separator-indent">
<span class="article_separator"> </span></div>
</td>
</tr>
</table></td>
</tr>
</table>
Just FYI on TinyMCE, if you go into TinyMCE's plugin parameters in Extensions->Plugin Manager->Editor-TinyMCE the first parameter "Functionality" if you select "Extended" from the drop down list then TinyMCE will have an option to insert/embed media when you are editing your articles. And it does all the necessary code structure, you just have to select the flash.
Fixed. Joomla has a kind of clean code option in it's editor. That one should be turned off, so it does not trim certain parts of a code.
Also installing JCE as the default Joomla! WYSIWYG Editor (instead of TinMCE) gave me more options for formatting text, in my case code, there is even a option for formatting or inserting code samples. Inserting code samples combined with turning off clean code option.
Wonderfull.