I am using AJAX to update content in my website. My index page has only a menu bar and a '#content' div where the dynamic HTML is appended.
The server I am using has no PHP or database features so no JSON is used.
I am downloading HTML pages straight from the server and populating the index. I am unsure what the best way to style the dynamic pages with CSS. Should I link the style sheets to the index page or to each of the content page(s)?
Also is there a need to put tags in the content pages?
Depends on how much CSS you have.
But most likely best solution is to just combine all CSS into one file and then link to it from the index page, the benefit of this is that the browser can cache it, which means it keeps a copy and doesn't have to download it multiple times.
As far as tags in the content page goes, if you need them use them, if you don't need them don't use them.
Related
I have a sidebar with basic link that should appear on every page:
about
engage
contribute
If I go from main page and click on about link, how to go to engage from that page?
I have created multiple directories with .html files for every page. Right now I am using this method:
href="../../engage/engage.html"
but it gets complicated when making more pages and subdirectories.
Also, bonus question, is that a good way to organize webpages?
Thank you.
Well, I believe your problem is only happening because of your directory structure. I wouldn't use it, as I prefer a more navigational and hierarchical structure.
This may turn out to be a big mess as structure grows, but when it does, you shouldn't be using simple HTML.
If you have a lot of duplicated code in different HTML pages, you may want to use something else, such as PHP, to load your pages.
For example, if you use PHP, you make your index.php page load the duplicated code everytime, like headers, footers, toolbars, and the content page based on a path parameter (e.g. /index.php?page=engage.html). The good thing is: when you load pages that way, using the include('engage.html'), all the links in the pages you load refer to the relative path from index.
Any links to your other pages would look like this: href="index.php?page=about.html". With proper setup, it may even be cleaner: yourwebsite.com/?p=somedir/page.html.
I'm new at HTML and need to do a simple site as an assignment. For the site navigation menu I guess it would be easy to simply copy and paste the navigation menu HTML onto all the pages in a header div. But is there a better way to do this?
for example, is there an easy way (that doesn't require scripting) to only write the code in one place and have it included on every page? I remember that I did something in Dreamweaver that created a template page that included the navigation menu. However I have a feeling that that was just copying html between pages.
Without scripting your HTML files will need to contain the menubar in full.
You are describing what a server side scripting language can do. Without one - your HTML files are served as they are. Therefore they must contain the HTML for the menubar within them.
The comments mention using an iframe - though very creative - I believe it doesn't satisfy as being "a better way to do this"
You have must use HTML code every page without HTML does't work Try to learn some basic PHP it will help
I am making a website that is styled using CSS, in two DIVs. One 'Header' DIV which is always the same, and a 'Content' DIV that changes.
In my CSS file, is it possible to write the HTML with all the links that stay in the header, so I just need to call (or similar) on every page, instead of having to write out my header content every time? Would also help in editing only one source, as I often leave out pages by mistake.
I don't want to use frames, so looking for an alternative.
Thanks,
Brett
Depending on the server and server side languages supported, this can be done.
Some servers will let you use Server Side Includes, for example. With others you could specify "block" of HTML for a header (for instance) that will be part of a site wide template.
What is not possible it to achieve this with purely CSS and HTML.
This is why you usually have some server side code running, which will insert the common header e.g. php include, SSI or other templating framework. If that's not an option, you could write JavaScript which writes out your header each time to a specific DIV. Although I don't think that's great from an SEO perspective.
The usual options for doing this client-side are an iframe, or some javascript that does DOM to add content (perhaps loaded from an external file). Or some javascript that creates an iframe. Or an iframe that creates some javascript. Some permutation of those odious techniques.
CSS does have the content property, but i think it's limited to plain text. I don't know if you can use it to pull in HTML, either using a string or URI.
As others have mentioned, the most common approach is to do it server-side. You can do this bottom-up with includes, or top-down with things like Tiles and SiteMesh.
CSS can't help you to do this.
You can make ajax loading of content. You can make one index.html and lot of 'content' files (about.html, contacts.html, etc). And in index.html you can load another .html in content-div (for example with jQuery method .load())
Another way - you can make little templating engine in php (or another server-side language)
It isn't possible to achieve that using CSS, because CSS can't handle any events, it's simply a "refrence" for the browser to know how to style your web-page, it's done, however, using AJAX.
I suggest you to take a look on jQuery lib, it'll speed up the process tremendously, however - the main disadvantage is that the search crawlers won't be able to index your page correctly, so it'll be bad by an SEO perspective.
It's possible, if you have the time, to make an index-able version and an AJAX one, that's what we did for a mobile project here.
jQuery AJAX API
I still don't feel comfortable repeating HTML for things like menu code, header, footer and most importantly a quick links/news panel on each page. Also it seems a little inefficient to keep sending the same repeated html for each page.
For the moment I have written a small program which reads these sections from my index.htm and replaces the relevant sections within all other pages in that directory. However things have started to get considerably more awkward now that I have extra pages like a Message Forum and Image Gallery, both of which require their own index.htm in their respective sub directories.
So the question is should I be using object, iframe or SSI?
Has anyone successfully used the object tag to embed a separate HTML file within a page? SSI would do the job except that the repeated HTML is still being sent across the web on every page change and different include lines would have to be used on the PHP pages. What about using IFrames, I know they are not strict XHTML1.0 compliant but I seem to recall rumors that they are going to br supported in HTML5 again, does that make them a good bet for the future?
The easiest way to solve this problem is by using a scripting language (PHP, Python, ASP) and templates. You can create the basic structure for your site in a master template, then use the scripts to pull in only the content that changes.
For a particularly good example, see Django's template system.
Each of your pages could call a JavaScript function in an external boilerplate.js file. That function could add boilerplate elements to the page, using the DOM.
That said, you might not want to do this, nor use IFrames, for SEO reasons! (Also, your pages would not fail gracefully if the client disabled JavaScript.)
To me it seems better to have a more search-engine-friendly page and put up with the transmission of duplicate markup. Server Side Includes (or any server-side scripting language) would give these qualities while also making it easy for you to change the boilerplate on all pages at once.
How can I hide a specific <div> from Google?
Is there any other solution than using javascript to insert this element?
I read about <!-- googleoff: index--> here, but I'm not sure it does what I want.
The problem is that the div I'm trying to hide can be seen as duplicate content by Google, and even if it hides it from the search results, I think it still penalizes you...
You can put the data in separate file, load it using iframe and block google spider from this file using robots.txt.
Apart from dynamically inserting the text into a page in a way that will only occur on a browser (as you mention, javascript would be the weapon of choice), not really.
You could hide the whole page using the correct robots.txt entry, but that doesn't seem to be what you are trying to achieve. This could work if the page contains only the text you want to hide and you insert it as an IFrame.
I don't know the specifics of what you are trying to hide, so this may or may not be ideal. However, one option that might work for some scenarios would be to convert the content you are trying to hide from the search engines to an image.