SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    include html from a separate file

    Hi guys,
    I was wondering if there is a way that one can include part of another html document in another file.
    As one can include a separate css file in the main file, so then when it is parsed, it looks as if the included styling is in the main file.

    For example,
    if wrapper.css had this:
    Code CSS:
    #wrapper{
           background-color:#fff;
           color:#000;
           width:980px;
           margin:0 auto;
    }

    and then main.css had:
    Code CSS:
    *{
       margin:0;
       padding:0;
    }
    @import url("wrapper.css");
    body{
            background-color:#000;
            color:#fff;
    }

    So it would include the styling from the wrapper.css into the main one where the import url is included.

    I want to do that with html, so something like this
    In an external html document named conditional.html:
    Code HTML4Strict:
    <!--[if IE 7]>
    <style type="text/css">
       /* IE 7 styling goes here*/
    </style>
    <![endif]-->

    In the main html document:
    Code HTML4Strict:
    <!Doctype HTML>
    <html lang="en">
            <head>
                <meta charset="utf=8" />
                 <title> Main HTML Document </title>
                  <!--Pseudo HTML--><include src="conditional.html" /><!-- End Psuedo HTML-->
            </head>
            <body>
              <p>Hello I am some content that was already here</p>
              </body>
    </html>

    So that when the viewer html from conditional.html is a part of the main html document, but it can not be seen in the source unless they view the source of conditional.html ?

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    It was fine until that last sentence.

    You can use server-side includes, where you put a bit of code like
    Code:
    <!--#include virtual="/menu.htm" -->
    in the page, and it inserts the contents of menu.htm into the document at that point ... but that happens on the server, before it's sent to your computer. So if you view the source, you see the full code inserted in the right place, with no indication that it has been pulled from another file. Which is kind of the opposite of what you want...

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    In a way it is, because what I was truly looking for was like a link tag where it includes the linked files content, but does not display it in the view source.

    However, I really appreciate your solution and I might go ahead an use it unless we can find something like the link.

    +Team1504

  4. #4
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I guess if this:
    <!--#include virtual="/menu.htm" -->
    is the only solution, then I will go with that.

    However, there isn't a way one can link a .html file with the <link> tag?

    Also, in the menu.html or the file that will be included, does one have to have a doctype and html and body tags like a formal web page or can it just be the tags that need to be included?

    I mean, if one has includes an html document with a body tag inside another html document, won't the second document have a body within a body?

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    With includes you don't write a full page again only the code you want to add/insert. Think of it [include] as cut-and-paste text where the include can be inserted into several documents automatically.

    So let's say your 'navigation menu' is duplicated; you only pick the code you want inserting, e.g. the 'navigation menu' start and end DIV tags, and the menu hyperlinks would have their own separate include file.

  6. #6
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't want something to show up in the source code you need to add it with JavaScript after the page has loaded. I'm not sure what you're trying to achieve so I can't say if this is the approach you should use.

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by team1504 View Post
    However, there isn't a way one can link a .html file with the <link> tag?
    The <link> tag can only appear in the <head>, not in the <body>, so there would be no way to specify where in the document you wanted the file inserted.

    Also, in the menu.html or the file that will be included, does one have to have a doctype and html and body tags like a formal web page or can it just be the tags that need to be included?

    I mean, if one has includes an html document with a body tag inside another html document, won't the second document have a body within a body?
    It would, so you don't

    The file you include should be, more technically, a file fragment. In other words, it's just the HTML that you want to include, not a full page. It doesn't even need to be valid in itself - eg, it could end half-way through an element without closing it, as long as you always completed it in the main page after each include.

  8. #8
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ah okay. Thank you for all your help.

    Can not use link because that validly only exists in the head

    and I use only the html i want in the file I am including.

    Quote Originally Posted by FaridHadi
    If you don't want something to show up in the source code you need to add it with JavaScript after the page has loaded. I'm not sure what you're trying to achieve so I can't say if this is the approach you should use.
    Well all I am looking for is neater source code.
    I do not want to have parts of the page be dependent on javascript however.
    So I think my best choice is to use the include.

    Although it will still show when the user views the source, I guess it will be neater for me.
    However, isn't using the include creating a new header request?

    So now I am wondering if it is worth the cost of another header request just to make the source cleaner for me, but not for anyone who views the interpreted scource

    Any suggestions?

    And, again, my goal is to make the source cleaner by removing the conditional comments and noscript tags and have them included or linked in some way.

    I appreciate all your help and feedback,
    Team 1504

  9. #9
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by team1504 View Post
    Although it will still show when the user views the source, I guess it will be neater for me.
    However, isn't using the include creating a new header request?

    So now I am wondering if it is worth the cost of another header request just to make the source cleaner for me, but not for anyone who views the interpreted scource
    The reason for using includes is not to make the source code neater, but to make maintenance and development easier. If you've got a site with a thousand pages - or even just a dozen pages - and you've hard-coded the menu into each and every one, any time you want to make a change to it, you've got a big job to do. Whereas if you've used an include, you just need to change one file and ... shazam ... as if by magic, the whole site is done in one go.

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    The reason for using includes is not to make the source code neater, but to make maintenance and development easier. If you've got a site with a thousand pages - or even just a dozen pages - and you've hard-coded the menu into each and every one, any time you want to make a change to it, you've got a big job to do. Whereas if you've used an include, you just need to change one file and ... shazam ... as if by magic, the whole site is done in one go.
    Ohh okay. So to use it as a template system.

    However, in the case of just using it to include my ie conditional comment code, do you think it is worth the header request?

  11. #11
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I attempted using the include to include an html file with my IE conditional comment code. Here is what I used, did I do something wrong or invalid for the W3C validator to find that as invalid?
    Code HTML4Strict:
    <!--[if IE]>
     <!-- #include virtual="assets/html/ieConditionalWithMainNavForLayout.html" -->
            <![endif]-->

    Here are the errors I got.

    Line 231, Column 14: Consecutive hyphens did not terminate a comment. -- is not permitted inside a comment, but e.g. - - is.
    <!-- #include virtual="assets/html/ieConditionalWithMainNavForLayout.h…

    Line 231, Column 14: The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment.
    <!-- #include virtual="assets/html/ieConditionalWithMainNavForLayout.h…

    Line 232, Column 11: Bogus comment.
    <![endif]-->

    Line 232, Column 19: The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment.
    <![endif]-->

    Line 232, Column 20: The document is not mappable to XML 1.0 due to a trailing hyphen in a comment.
    <![endif]-->

    Do you, or would you or anyone be able to help me fix these errors?
    I hope I did not make a stupid mistake.

    I really appreciate your guys' help and I hope to hear from you soon.

    Kind Regards,
    Team 1504

  12. #12
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's about the html comments:

    On SGML and HTML
    A common error is to include a string of hyphens ("---") within a comment.

    You have two nested comments, one for IE CC one for include. Unfortunately, the end comment for include is considered the end comment for IE CC instead.


    I haven't tested it, but try this:

    Code HTML4Strict:
    <!--[if IE]>
     <!-- #include virtual="assets/html/ieConditionalWithMainNavForLayout.html" -- >
            <![endif]-->

    though, to my knowledge, any two or more hyphens will close the comment, hence the warning in the specs.

  13. #13
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And HTML5/Fred is the same about comments:

    HTML Standard
    11.1.6 Comments

    Comments must start with the four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS (<!--). Following this sequence, the comment may have text, with the additional restriction that the text must not start with a single U+003E GREATER-THAN SIGN character (>), nor start with a U+002D HYPHEN-MINUS character (-) followed by a U+003E GREATER-THAN SIGN (>) character, nor contain two consecutive U+002D HYPHEN-MINUS characters (--), nor end with a U+002D HYPHEN-MINUS character (-). Finally, the comment must be ended by the three character sequence U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN (-->).
    8 The HTML syntax — HTML5
    8.1.6 Comments

    Comments must start with the four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS (<!--). Following this sequence, the comment may have text, with the additional restriction that the text must not start with a single U+003E GREATER-THAN SIGN character (>), nor start with a U+002D HYPHEN-MINUS character (-) followed by a U+003E GREATER-THAN SIGN (>) character, nor contain two consecutive U+002D HYPHEN-MINUS characters (--), nor end with a U+002D HYPHEN-MINUS character (-). Finally, the comment must be ended by the three character sequence U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN (-->).
    making nesting comments not possible.

  14. #14
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You usually don't validate the file before it gets parsed by the server (with the raw naked include syntax/information still visible). You do it 'after' the includes have been inserted, i.e. end result as seen by the browser.

  15. #15
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you noonnope. I really appreciate the documenas that completely explained things.
    So I have to.remove the ie cc if I want to use the include due to hyphen conflict.
    hmm however, my goal was to clean up non-ie users source by not showing them the code, but include it if the browser is ie because the code that is being included is, itself, all ie conditional code.
    Sorry for the passive voice and if it was too confusing.

    And I apologise if this is too much to ask, but does anyone know of any method, even if it entails another coding language, that I can use to only include a file inside conditional comments?


    Quote Originally Posted by xhtmlcoder View Post
    You usually don't validate the file before it gets parsed by the server (with the raw naked include syntax/information still visible). You do it 'after' the includes have been inserted, i.e. end result as seen by the browser.
    Yes, that makes sense and I was planning on doing so, but I wanted to make sure everything else was valid first.

  16. #16
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use includes, in your main html file, and put IE CC in the html fragment.

  17. #17
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Of just get rid of the IE CC altogether since if that's for CSS, you should probably just FIX your layout so it just works instead of screwing around with that IE conditional NONSENSE and a separate file. I have NEVER seen a legitimate reason to use IE conditionals to wrap anything other than javascript other than broken page building methodologies.

    Which would be a LOT easier if you bothered to use a doctype where the validator does something useful instead of that HTML 5 nonsense.

  18. #18
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or just get rid of the 2000's concept of trying to fit one code in every hole, and that html 4.01 is the future or else.

    I never saw the reason to literally murder CSS code just to avoid the truth, that special browsers have special needs. Apart form the fact that you should step away from descending selectors as being the only ever possible CSS selector you'll use. Since the descendant selector is also the weakest selector.

    And, may I remind you, media queries are the same thing with IE CC.

  19. #19
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay thank you for the feedback.

    Some clarifications, the only reason I am using the include is to include ie conditional code for ie5

    Maybe I should give up that because almost no one uses ie5 anymore.
    I mean IE6 is dying

    The reason why the include file is called ieConditionalWithMainNavForLayout.html is because the conditional code also has css that gives .gif images for my background images instead of .png when the browser is ie6 or below.
    The main chunk of the ie conditional comments is for outdated browsers

    Also, this website that I am working on is another project, not team1504.com

    Sorry for the confusion.

    Maybe I should stop trying to fill all holes and drop ie 5 support.

  20. #20
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    You support IE5? You must be one of the last on the face of the planet.
    The only code I hate more than my own is everyone else's.

  21. #21
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    You support IE5? You must be one of the last on the face of the planet.
    I do too. I don't aim for 'pixel perfect' but the page should at least be USABLE.

    Given that until two to three years ago 5.5 was the latest version available for windows mobile, and 6.0 is still the most recent available for same...

    Using simple techniques and swinging an axe at "Gee ain't it neat" nonsense that has no business on websites in the first place (see 99% of what people vomit up using jquery) you can build sites quickly that work just fine back to 5.5 for little to no extra effort... that work just fine right through to the latest and greatest flavors of every browser.

    Not being able to do so easily either comes from broken methodologies, outdated coding techniques, or jumping the gun on technologies not ready for prime time (CSS3)

    ... or should never be adopted for use in the first place being a crippling train wreck of bad ideas setting coding practices back a decade or more. (HTML5)

  22. #22
    SitePoint Enthusiast
    Join Date
    Jan 2011
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I remember, to do html include we have to configure the web server, right?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •