A moron-level question here: how do I include one HTML5 file (like a navigation bar or sidebar) inside another one? I would prefer not to have to copy/paste all of the same stuff over and over across a website.
I've done a lot of searching through this site so far, and all of the answers I've found so far seem to strip all of the formatting and css from the "included version". If it helps, I'm using GitHub Pages and an HTML5 template to make a personal website, which sorta leaves out server-side stuff like server-side includes or PHP (I hear those don't work there).
What I've got right now:
<!--some html-->
<header id="header">
Some text
<ul class="icons">
<li>Some more stuff that I want to include </li>
</ul>
</header>
<!--more html-->
And then this solution results in the HTML getting included, but all of my styling getting stripped. I also tried <embed> and got the same result.
Main file:
<!--some html-->
<object name="foo" type="text/html" data="header.html"></object>
<!--more html-->
Header file to include (header.html):
<header id="header">
Some text
<ul class="icons">
<li>Some more stuff that I want to include </li>
</ul>
</header>
http://www.hongkiat.com/blog/html-import/
The above link discuss about your issue. Import is used to use to include html file to other html file. Hope this solves your problem.
Github pages brings all the features you want.
And no : you're not a moron to ask such a question.
You can start your journey : here
Then go Jekyll.
Related
I put a link to a wikipedia page through this line of HTML :
<div class="voiraussi">
<h2>Voir aussi</h2><br>
<ul>
<li>Biographie d'Alan Turing</li>
<li>ARPANET, ancêtre technique d'Internet</li>
</ul>
</div>
Those two links work on one of my pages (i have 5 .html files) but on the others, it doesn't work at all, i have no idea why. Those lines above are part of the footer of my website, i copy/paste the footer on all the pages, so i don't understand. I checked on the existing posts but didn't find anything that could help...
Thanks in advance !
From what I understand after looking at your comments and the question, you have some sort element overlayed on the links on the pages where the links are unresponsive. One quick hack to check if this is actually the issue would be to give one or both the links a greater z-index. Try this:
<div class="voiraussi">
<h2>Voir aussi</h2><br>
<ul>
<li><a style="z-index:100" href="https://fr.wikipedia.org/wiki/Alan_Turing" target="_blank">Biographie d'Alan Turing</a></li>
<li><a style="z-index:100" href="https://fr.wikipedia.org/wiki/ARPANET" target="_blank">ARPANET, ancêtre technique d'Internet</a></li>
</ul>
</div>
I am currently tweaking a BigCommerce theme for my employer. They have asked me to remove and change a few CSS / HTML elements to fit the style and functionality that they are after.
Rather than just DELETING the functionality within the theme, I was hoping to just comment it out in case it is needed later. But I am having an issue with the formatting.
The following is the code as displayed in the ProductDetails.html Panel file:
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
%%Panel.ProductReviews%%
%%Panel.ProductByCategory%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
I am trying to comment out the last 3 lines only.
However, when I do, the end of the comment ( --> ) shows up in the browser. I have closed the comments correctly but there must be some simple concept that I am missing. Hoping the good people at SO can help.
Below is the code as I have saved it and a screenshot of the display in my browser. The first screen shot is how it looks before I add any comments and the second is after I add them. You can clearly see the closing comment in the second image, can anyone tell me why??
Thanks in advance for any help.
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
<!--%%Panel.ProductReviews%%-->
<!--%%Panel.ProductByCategory%%-->
<!--%%Panel.SimilarProductsByCustomerViews%%-->
</div>
Nicole, I've dealt with this and can definitely explain why it's happening and how to avoid it.
Why It's Happening
It's happening because this is how BigCommerce's server side PHP processor parses the code you're looking at. The code is basic HTML, while the %%Panel.something%% are simply ways for BigCommerce's processor to recognize as a command for BigCommerce.
Anytime the BC site sees %%Panel.Name%%, it knows that this is not HTML, but rather a place where BC server-side processor should insert the Panel file before serving this HTML to the user.
How to Avoid it and Comment-out Correctly
Simply, remove the % symbols and use regular commenting. This will work:
<!-- Panel.ProductReviews-->
So will this:
<!--%%Panel.ProductReviews-->
And this:
<!-- Panel.ProductReviews%%-->
Or even this:
<!-- %Panel.ProductReviews% -->
Mainly, you have to make sure that each side of a Panel.Name reference, doesn't have 2 % symbols on each side.
To Restore the Correctly Commented Out Code/Panel
Simply restore the 2 % symbols on each side like so (the spaces between - and % don't matter, you can have none or 10):
<!-- %%Panel.ProductReviews%% -->
Why You're Seeing --> On Live Site
As broached/explained in the comments of your question, you're seeing --> when commenting out a Panel like so <!--%%Panel.Name%%--> because by commenting out the Panel that way without removing at least one of the % symbols, you're still telling BigCommerce to load the Panel HTML file, but to place it within the
<!-- [HTML code from panel goes here] -->
The problem with that is simply that some of these Panel files contain comments themselves.
For example, let's say you comment out %%Panel.Header%% like so !<--%%Panel.Header%%-->. The Header.html Panel may be code like this:
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
By commenting out the code without removing the % symbols, BigCommerce will load this:
<!--
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
when a user open a page that uses the Header.html panel, they will see this code as commented <!--<!-- this is the header code panel-->, because the browser will start the comment at the first <!-- and end the comment at the first appearance of -->.
In the browser, the user will see the uncommented remains:
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
And hence you'll see some extra, probably broken HTML, plus the stray --> somewhere at the end of the improperly commented code.
Again, to avoid all this, just remove one of the % symbols, then use regular commenting to comment out a Panel file reference.
Let me know if this helps and if you have any other questions.
Let's say all of my html pages will have a top bar and banner with the same content.
Rather than copy the code for these content on all html pages, is it possible to have pages inherit the content from a base html page?
For example : base.html can have the top bar, banner, etc (all repeated content)
Remaining pages (index.html, about.html, etc) can inherit the content from base.html and then add more content.
Is this possible in html or do I have to copy and paste repeating content all the time?
In this situations (as far as I know)
You can use template based editors like Dreamweaver
You can use framesets (don't use them)
You can use iframe (meh.)
You can convert your files to PHP and just use a single include command (Y)
Copy and paste whole thing and when you get 100 pages, try to add a new menu...
I'd like to see other solutions too.
Example:
Lets say I've created a template.html it's something like
<html>
<head>
<title>asd</title>
style tags keywords bla bla bla
</head>
<body>
<div class="menu">
yeah I've my menu here well designed
</div>
<div class="content">
unique content here
</div>
</body>
</html>
Allright this is my one html file. Lets take top section of the page. Menu will be same but content will be changed so this is top of the page:
<html>
<head>
<title>asd</title>
style tags keywords bla bla bla
</head>
<body>
<div class="menu">
yeah I've my menu here well designed
</div>
Save this part as top.php Now let's see what have we left:
<div class="content">
unique content here
</div>
</body>
</html>
This will be our post page. But how can we get codes from top.php? Just like that:
<?php include("top.php"); ?>
<div class="content">
unique content here
</div>
</body>
</html>
Now, save this as page1.php BINGO! You did not wrote anthing about menu but include method will bring it for you.
Include basically writes everything from a file to another. You can check differences for include_once, require, require_once too.
Allright, we've created our first page. What about second one? Exactly the same:
<?php include("top.php"); ?>
<div class="content">
my second page here
</div>
</body>
</html>
Save this as page2.php
Well, you need to change your menu now but there are two pages, two hundred pages, two million pages... Who cares. Just change top.php that's all.
Please note that in this codes; top.php, page1.php and page2.php are in SAME directory. If you want to include from another path, you must use for example:
<?php include("../top.php"); ?>
//OR
<?php include("myFiles/theme/top.php); ?>
depending on your path.
I hope this helps. Read PHP guides for include. It's really easy.
You need a testing server (or you can use a local server like WAMP, XAMP etc.) to execute PHP files.
You can create template page and include it to the all new pages as javascript
<script type="text/javascript" src="includes/template.js"> </script>
Same way with php - using include
I'm trying to edit Tumblr Custom HTML to add another header link to my Tumblr theme.
I have searched stackoverflow for "Tumblr" "Custom HTML" "block:Pages" and "link" but have not found the bug in my code that's leading to the following problem:
I copy and pasted
<li>{lang:Archive}</li>
I then changed
"/archive/"
to
"/submit/"
and
{lang:Archive}
to
{lang:Submit a Post}
I end up with a webpage with a header link that, when clicked on, takes you to the correct page, but there is no text for that link. Please see a screenshot of the problem and the website I'm trying to fix.
I've included a code snippet so that you can help me troubleshoot. Thank you!
<div class="container">
<div id="headerwrap">
<div class="span-18" id="header">
<div class="span-18 last"><ul>
<li>{Title}</li>
{block:HasPages}
{block:Pages}<li>{Label}</li>{/block:Pages}
{block:HasPages}
<li>{lang:Random post}</li>
<li>{lang:Submit a Post}</li>
<li>{lang:Archive}</li>
</ul></div>
</div></div>
{block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}
<div class="span-24"><div class="span-5 blue_striped"> </div><div class="span-18 last"><p>{Description}</p></div></div>
<hr/>
The {lang:} tag lets you specify an English string that should be displayed in the user's language, but it only works with a predefined set of strings that can be found here:
http://www.tumblr.com/docs/en/localizing_themes
You can "request a string be added", but I have no idea how long that would take. Best would probably be to drop the {lang:} wrapper and just include the text directly:
<li>Submit a Post</li>
The string won't be localized for non-English users, but oh well!
I'm making a really simple website and was curious how I can modularize the content sections of the body while leaving the static portions of the site alone. I figured using partials would be the key but they operate much differently than I had originally thought. This is my first time using Angular so I'm not very familiar with anything just yet.
Right now the site has a simple design similar to the following:
<div id="wrapper">
<div class="header"></div>
<div class="sidebar">
<ul>
<li><a href={{option.path}}>Option 1</a></li>
<li><a href={{option.path}}>Option 2</a></li>
<li><a href={{option.path}}>Option 3</a></li>
</ul>
</div>
<div class="content"></div> <------ content changes with selected option in .sidebar
<div class="footer"></div>
</div>
Barring the inherent syntax errors here, what can I do so that when I click on an option in .sidebar such that the {{option.path}} won't just be appended to the URL?
Currently, this is what I have happening:
I have my site open on index.html where the .content section is completely empty.
The user then chooses an option and I want to direct their browser from /index.html to /partials/option1.html.
If the user then click AGAIN on option 1, their browser directs to /partials/partials/option1.html, which returns a 404 error.
Is there a way to avoid the problem in part 3 or is that simply how partials are meant to work?
Angular JS uses $route to designate partial templates to URL's. You will also need to learn about ngView to make this work.
I admit egghead.io is a great resource for Angular but I think you are in need of this specific screen-cast => http://youtu.be/i9MHigUZKEM
This LinkedIn group also contains every Angular.js resource I have come across.