HTML-Question thats bugging me

DeadlyByDesign

Ok so I will start explaining my question as best I can as it does not make sense in my head tbh. I am at the moment cutting my teeth on HTML and testing what does what etc so I am VERY green at the moment I have a testsite (not hosted so cant link) up at the moment. Now it is all primarily driven off HTML as I am only getting to grips with what CSS actually does now. At the moment it literally consists of just one page. A thought occurred to me as I stepped back to admire my first HTML page in all it’s glory…..”how the hell do you make a second page?!”

For example if I click a “Next Page” type link does that link to another HTML file on the server (once set up) that contains your second page? Do I have to write a second page from scratch and subsequently a third and fourth page?.

In an effort to answer my question, I have been viewing the source code of other websites but I cannot see any evidence that there is other files being clicked into, as it is all just one page?

Hope You understand, apologies if all that is too convaluted

jebuz

It's a fair question for a beginner, the simple answer in your case (developing in pure HTML) is yes, each website page requires its own file, and basically you just need to link to the page using the syntax:

<a href="page2.html">Click here to go to page 2</a>

There are however techniques to avoid repetition of code when creating new pages and you will come across this further down the line. I'd advise to stick to the basics for the moment as you're obviously just getting to grips with everything.

A typical approach for a developer is to create a header file and a footer file (and possibly a navigation file), these will be consistent throughout the site, the only part that changes is the area between the header and the footer if you know what I mean, maybe this image might explain better - when creating a new page, the "content" area is the only place that needs to change.

Another approach is using a server side language (like PHP) and Ajax (JavaScript), so the pages are created dynamically on the fly based on information from a database, again very advanced stuff but just to be aware of it

I would advise you to use CSS as much as you can, it's flexibility means you can change a single piece of code in your CSS and this can spark a change throughout the whole site (as opposed to manually changing something in each HTML file). Generally a website will externalise it's CSS, that means putting all the css in it's own file (e.g style.css) and then importing it from your HTML page:

<link rel="stylesheet" href="style.css" type="text/css" />

Again, you can see how code repetition is avoided here, since you don't need to copy the CSS code into each page you create.

W3 schools will be a great resource for you if you are learning HTML and CSS

HTML : http://www.w3schools.com/html/default.asp
CSS : http://www.w3schools.com/css/

Hope this helps and good luck!

Placebo

few ways

-Next page, from scratch [but ofcourse you can copy/paste from previous page]
You will link this page from the previous First page <a href="nextpage.html">, these will need to be in the same directory

-use php
site is divided into 3 parts [if links/menu are at top]

header
body
content

header will have the links [stays same]
body will change
footer [stays same]

tutorial:http://www.isitebuild.com/php-include.html

-Ajax etc/innerhtmls

DeadlyByDesign

Thanks for the reply, have just gotten into the CSS part in 3 schools (this is who I have been using for HTML as well). I can already feel my head explode just looking at CSS J. Thanks for the explanation, it does make sense.

Eoin

DeadlyByDesign wrote: »

In an effort to answer my question, I have been viewing the source code of other websites but I cannot see any evidence that there is other files being clicked into, as it is all just one page?

The quickest way to check this is to copy and paste the address of the page you're on into notepad. Click a link and copy and paste the address of the new page into notepad. Then just compare the two.

You might see something like this:
first page: www.domain.com/page1.aspx
second page: www.domain.com/page2.aspx

In this case, it's two different pages. As the two people who've posted above have said, there's a lot you can do in order to not replicate the HTML and CSS.

Or you might see:
first page: www.domain.com/page.aspx?id=1
second page: www.domain.com/page.aspx?id=2

What this means is that the site has the same file showing the content for two or more different pages. The "id=" at the end of the page can be used by various different programming languages to display the correct content.

For example - if you have an online store with thousands of products, then obviously you don't want to have to create a different file for each product. Instead, you want one page that just shows the relevant information for the product. Boards.ie is a good example as well - the address of this page is

http://www.boards.ie/vbulletin/showthread.php?t=2055959801

So - the progamming language behind this site checks to see what the ID of the thread is (2055959801). It then searches a database for this thread and displays the content.

However, as always, there are exceptions to this. I don't want to confuse matters, but if you're interested, then google "SEO friendly URLs".

DeadlyByDesign

Thanks a million guys. Kind of getting it now. Be warned over the next few months expect to see a lot of questions like this!

hammer1981

Try to think of HTML as links, since it is only links and text. Either embedded images <img>, or links to page or file <a href="page2.html"> with surrounding texts.

When a page is sent from the server IE: http://www.yoursite.com/page.html it is sending the contents of that page to your browser (firefox, safari, chrome, and hopefully not ie) telling it where the rest of the page is, ie: the image(s) are here ./images/logo.gif and the files are here /files/word.doc.

All you do next is try to make that a usable experience that makes sense to the eyes of a user.

Hope that helps.

If not, this should do the trick: http://www.howstuffworks.com/web-page.htm

lucideer

DeadlyByDesign wrote: »

In an effort to answer my question, I have been viewing the source code of other websites

That can be the best way to learn a lot of things (dive into existing examples) but unfortunately, the web happens to be an extremely poorly coded place The vast majority of pages you visit will typically have source-code that is far too complex and convoluted to learn from (the source code for each page on boards.ie for example is auto-generated by a massive software package developed over years by many developers - it's not hand written by humans).

DeadlyByDesign wrote: »

I can already feel my head explode just looking at CSS

The site that probably helped me more than any other in understanding CSS was this one, if it helps: http://css.maxdesign.com.au/index.htm
(start with the Selectorial - it's the first one you need).