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.
Related
Say I have a product website, like Amazon (this is not the case, but it will help me explain my point), and I have a URL for every single product (such as with Amazon)...
Do I need to copy-paste and modify an HTML file for every single individual product page, or is there a way to use a "model" on which I can base all my other pages without recopying the whole code and modifying a few things in each?
I've just started learning HTML and web development, so bare with me if I'm asking a stupid question.
It just seems odd to me that a million-page website should host a million+ individual, nearly identical, HTML files.
Thank you very much in advance.
P.S. I'm using Amazon's brand name as an example here, and am not affiliated with anything related to it. Thank you for understanding.
No, you do not need an HTML file for every single page on your website. While you could do that, it is becomes very infeasible to manage the bigger your site becomes. On most websites you would have the following components:
A front end - consists of HTML code and usually some sort of template engine with placeholders for your data
A backend - consists of your data store (usually a database).
There will also usually be some form of API and/or middleware between your front end and backend.
If you go to https://example.com/myproductid in your browser, your computer will send that request to the web server. The web server will then retrieve your data, load it into the correct template, and serve the page to you.
In traditional HTML and PHP only websites, you would have to reload the entire page each time you went to a new product. However, you can instead use a technique called Ajax to only update certain parts of a web page rather than reloading the entire page. That way you can just update the text, images, and links that are specific to the product, and the rest of the page would stay the same. (Note: Ajax originally used XML, modern implementations usually use JSON).
Ultimately, you will want to learn some JavaScript and then start looking into various web frameworks or libraries such as ReactJS.
Not you Can have only one page for all product, but you have to make it Dynamic.
Yes you need an HTML document for your each webpage, like for Home page, contact us page you need different HTML documents
Since few days I have been learning HTML and CSS and it goes pretty well, but the first, quite serious problem that I faced was about the website's structure - how are bigger projects (few "main" pages and multiple subpages) dealing with even small changes in their code/layout?
Every tutorial I watched or read was based on creating very small websites, which were made of index.html and a few pages, let's say sub1.html, sub2.html, sub3.html. The idea was to create a layout of the page in index.html with all hyperlinks we were going to use and then, after we were done with it - copy its content to files sub1.html, sub2.html, sub3.html and change their content to our needs. This seems to be pretty reasonable for that small website, because we do not have a lot of code and changes should not take lots of time then.
But what if we are creating a website which will contain e.g. 50 subpages? How should we deal with changes on every single page, if we want to change the order of items in menu or do anything else with the repeating content of the website?
You're looking for a templating system of some kind, which will assemble full pages from components.
For example, you might have an outer template which sets up the basics like the doctype declaration, some common script and CSS includes, etc. From there, one layer in, you might have a common header/footer. Another template inside that might set up a page like the home page with featured content. A sibling to that template might be inner pages which have perhaps headings and regular content.
Sometimes these pages are assembled on-request. Other times, they are assembled when you change your content, and static pages are pushed to your web server.
I ran into a site structure that I found interesting. It went something like the following:
All pages on the site were index.html, however all the pages(index.html) on the site resided in their own folder and even within some folders there were other folders where an index.html file resided. Does this type of site structure make good sense.
http://www.stpaulsschool.org.uk/ follows this type of structure.
Thanks
Not sure, but it looks like the site is rewriting URLS.
So they are changing
something/php?id=1
to
normal_folder/
The site is probably using a content management system to do this.
If you don't need a CMS, then I would stay away from this.
EDIT
As per the comment below...
Some Web site building systems (Wordpress, etc.) will automatically generate URLs when they create new pages. Often, those URLs are ugly and don't work well for link sharing or for Search Engine Optimization. So, you can rewrite the URL paths so that the URLs are prettier, like what you showed above.
If you are not using a system like that and you are not generating your URLs from a database (where that could also happen), then you should stay away from creating a site with one page in each folder. It is difficult to maintain and not great for user navigation.
It just looks like normal URL rewriting to me. I highly doubt those apparent folder structures exist in their web root.
The site isn't using this at all. Its probably using a rewrite system which lets you decide which page to fetch for which url. the directory structure you think its using is very bad and should not be used.
I'm building a small-scale website (a personal one) in which each page would have the same set of header elements (I'm not talking about the <head> element). In other words, I want each page to have essentially the same title at the top of the page and the same navigation bar below that (with possibly minor differences in each page). It's kind of like how StackOverflow has that navigation bar (with the logo, and the Questions, Tags, etc. buttons) on the top of every page.
Is it possible create such a header for every web page without copying and pasting the HTML code to do so? I really don't want to run into a situation where if I want to make a single change, I would have to change all of my pages containing the header.
Real web sites use real web frameworks, which have a concept called a "layout" (at least that's what they're called in Rails; as mentioned in Uwe's answer, they're called master pages in ASP.NET). All the common "templatey" stuff goes into a layout.
How about include files in a server-side language like PHP or master pages in ASP.NET?
You need to use some kind of dynamic page processing, whether it's PHP, a server-side include, or a similar tool.
If you need to stick with straight HTML, you could try to rig something up with AJAX or JavaScript - but then you highly limiting your website's functionality, giving it serious performance issues, AND preventing users who have JavaScript disabled from using your website.
A third answer is to use some sort of pre-deployment tool. This used to be a bigger market, but I think it's mostly dried up now. Here's an example for using DreamWeaver to handle this.
If you have a PHP server that supports PHP,
<?php include 'header_inc.php'; ?>
If that's not available
<!--#include virtual="header_inc.html" -->
But whether this works or not is server dependent
If you have a server with PHP capabilities
include 'header.inc.php';
you must put the header code in a file named that and then put that include code in all pages that you want the header to show up on
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.