Starting out.

[Toasted Cheese Sandwich]

I'm only using the html tutorial on this site, and they were showing me how to use center/bgcolor etc. OK, so what exactly should I really bother with in the html tutorial, I'll go through everything, but I wont bother spending large amounts of time on something if I'm just going to need to do something different, CSS for example.What, and indeed how do I know what docutype to put? The tutorial hasn't mentioned anything about that yet. Also I don't remember it mentioning alt attributes either so I don't know what they are.The indentation was almost as I put it which was one of the things I was curious about so...

<p align="center"><a name="starwars"></a>   <a href="http://www.starwars.com/clonewars/site/index.html" target="_blank">	  <img border="0" src="http://www.taylortheteacher.com" width="550" height="400">		 </a>			</p>

I did it like that because I thought I saw other people doing it, I might have completely misunderstood, but it kind of made sense to me as a way of showing that all of that part of code is related to this one item displayed, and each part is on a different line making it easier to digest, if that makes sense. So if you can let me know which parts of html I should concentrate on and which I shouldn't worry too much about I'd appreciate it.Thanks for your help by the way.

[jeffman]

I see. I haven't looked too closely at the tutorial stuff here when it's stuff I already know, so I guess a lot of that has slipped by me. But a lot of stuff is out of date, I know that. The ubiquitous document.write() statements the site uses for illustration are really misleading, for instance.Well, the only way to be REALLY certain about legal, illegal, and deprecated tag attributes is to check the spec. http://www.w3.org/TR/html401/ It's more time-consuming and not so reader-friendly, but it's something you'll end up doing anyway if you want to get serious.I'll make up a rule of thumb, though. If the attribute involves size, shape, color, alignment, borders, or fonts: don't use it, don't worry about it, it's old-school. There's a better way in CSS.Here's that same html reformatted to industry standard. Note that I'm starting at the left margin, but since the entire document would put things in a hierarchy, the whole thing would actually be offset to the right quite a bit.

<p align="center">   <a name="starwars"></a>   <a href="http://www.starwars.com/clonewars/site/index.html" target="_blank">	  <img border="0" src="http://www.taylortheteacher.com" width="550" height="400">   </a></p>

The basic idea is that every opening tag is vertically aligned with its closing tag, and each subordinate tag is indented by 3-4 spaces, or one tab, relative to its superordinate tag. This applies to ALL kinds of coding, BTW. The exception is when the opening tag and closing tag can fit on the same line. That's okay as long as the line is short or when jumping to the next line would create an unwanted blank space in your content.

[aquatsr]

Deirdre's Dad is right. The compiler (which builds programs from code for computers) and the browser (which interprets HTML for the user) do not care how you arrange your code as long as it works. However, good coding techniques generally have opening and closing tags vertically aligned, and everything between the tags indented once. (The indent on most computers is eight spaces, however that looks really spaced to me so I used two spaces as my indent/tab)

#include <stdio.h>#include <math.h>int main(){  int num1, num2, result;  printf("Please enter positive integers m and n: "); //Take in two numbers  scanf("%d%d", &num1, &num2);    if(num1 < 0 || num2 < 0)	printf("Sorry, you must enter positive integers only.\n\n");  else						//numbers were indeed positive  {	result = pow(num1, num2); //Compute num1 raised to num2	printf("%d ", num1);	printf("raised to the %d ", num2);	printf("power is %d.\n", result);  }   return 0;} //main()

You're not meant to understand this code, simply note how the code is laid out. You can think of the { as the beginning tag and the } as the closing tag. Notice how the 'tags' are vertically aligned and how the information inside is indented two spaces. Also notice how tag blocks inside of the initial block can have their own sub-indentation. This is an example of universal good coding.

[Toasted Cheese Sandwich]

So basically, html isn't really used at all.Edit: Yeah, seems like a good way to arrange it I can do that without a problem. It was just when I had all the code pushed up on the left made it hard to see where one part started and one finished.

[jeffman]

So basically, html isn't really used at all.

Huh? Did someone say that? I didn't say that.

[Toasted Cheese Sandwich]

Huh? Did someone say that? I didn't say that.

Indeed, it was an exaggeration and exasperation at spending time working on attributes involving size, shape, color, alignment, borders, and fonts.

[boen_robot]

So basically, html isn't really used at all.

OK, I've been watching out this conversation for a while, and it seems that you're eating more than you can chew. This statement is just a proof of that.I think you're ready to try learn CSS and see what you can do with it. Play with it and see what you can come up with.HTML has its place too. Think of it as the bare bones of the page, while CSS provides the skin and muscles. At a later point, you'd learn about PHP and JavaScript which provide the brains.

[Toasted Cheese Sandwich]

OK, I've been watching out this conversation for a while, and it seems that you're eating more than you can chew. This statement is just a proof of that.I think you're ready to try learn CSS and see what you can do with it. Play with it and see what you can come up with.HTML has its place too. Think of it as the bare bones of the page, while CSS provides the skin and muscles. At a later point, you'd learn about PHP and JavaScript which provide the brains.

Yeah I think you're right.And good analogy by the way, thanks boen.

[jeffman]

Yeah, Robot's right. Probably the next thing to do is take the file you just showed us and rewrite it with a style sheet doing what you currently have the tag attributes doing.

[Toasted Cheese Sandwich]

You know, even from a brief look at CSS, it's all become a lot clearer.

[Toasted Cheese Sandwich]

Quick question. Is it better to keep a separate CSS file and HTML file and just link the 2?

[Ingolme]

Yes, that's the recommended way. You can use the same stylesheet in separate pages and save server requests by loading cached stylesheets in the user's data. Overall, it saves bandwidth and make the pages load faster.

[Toasted Cheese Sandwich]

Yes, that's the recommended way. You can use the same stylesheet in separate pages and save server requests by loading cached stylesheets in the user's data. Overall, it saves bandwidth and make the pages load faster.

I'm not quite that far ahead yet mate but thanks anyway. I only asked as when I look at page source info for sites they seem to have their HTML code and CSS code together. Or are they just displayed together when I view it?

[Toasted Cheese Sandwich]

In fact, OK, say I want some aspects of CSS background to be the same on all pages (eg.background-repeat background-position) but want to have a different picture on each page. How do I arrange that? A separate folder for CSS that applies to all pages, but put individual CSS code on the same page as HTML?Perhaps I should start a separate thread in the CSS section instead.

[Ingolme]

Not everybody links to external stylesheets, or they mix inline code with the stylsheets.You could have a general stylesheet for all your pages, and then load a second specific stylesheet for each one, or have some inline code with the things specific for that page. Always put page-specific code after the general code so that it has more priority and styles can get overwritten when necessary.Just an example:General stylesheet:

body {background-position: 30px 30px;background-color: blue;}

Page stylesheet:

body {background-image: url(file.png);}

[Toasted Cheese Sandwich]

Let me give you an example because how I get HTML and CSS working together is giving me a bit of a headache.So here is the CSS code I have in it's own file and for the most part want to remain the same on every page...

hr {color: #000000}p {margin-left: 20px}body {background-image: url("file:///C:/Documents%20and%20Settings/Administrator/Pulpit/html%20coding/Pictures/Hitman-movie-2007-wallpaper-972.jpg"); background-repeat:no-repeat;background-position:top;background-attachment: fixed }h1 {background-color: transparent}

And here is the HTML page...

<html><head><title>CSS/HTML Test Page</title></head><head><link rel="stylesheet" type="text/css"href="mystyle.css" /></head><body><hr><h1>CSS/HTML Test Page</h1><hr></body></html>

Firstly, <h1> isn't working (doesn't show up when I load the page) so I'm doing something wrong there. Secondly, how would you change it so I can personalize the bg image to each page? And on a more general note, is this a mess?

[Toasted Cheese Sandwich]

Also is there like a good online dictionary for terms, as I have no idea what Inline code is, or SharePoint, or many other terms I see regularly. It's a bit frustrating as it's slowing me down considerably.

[Toasted Cheese Sandwich]

Ah OK, inline code is the CSS code put in the HTML document?

[Ingolme]

Edit: Well, actually, usually inline would mean that you applied the style directly to the tag with the style attribute (<div style="border: 1px solid red">). But I did mean having it in the document in that case.You need to fix up your mark-up a littleYou have two <head> elements, you must put everything between the same <head> tags.

<html>  <head>	<title>CSS/HTML Test Page</title>	<link rel="stylesheet" type="text/css" href="mystyle.css" />  </head>  <body>	<hr>	<h1>CSS/HTML Test Page</h1>	<hr>  </body></html>

And I have a recommendation: substitute those <hr> tags for two black borders on the top and bottom of the h1 element and save yourself some useless markup:

h1 {border-width: 1px 0; /* 1px width on the top and bottom and 0 on the left and right */border: solid black;}

<body><h1>CSS/HTML test page</h1></body>

[Toasted Cheese Sandwich]

Yeah, I noticed the double <head> tags as well. So how would you formulate that but with the bgimage only relevant to that one page, not all of them?

[Ingolme]

Just add the background image to the element you want in the page itself. You can just use style tags, since the CSS is specific for that page.

[aquatsr]

Yeah, I noticed the double <head> tags as well. So how would you formulate that but with the bgimage only relevant to that one page, not all of them?

I would keep two stylesheets. If only one page is different, it can have its own stylesheet.

[Toasted Cheese Sandwich]

Just add the background image to the element you want in the page itself. You can just use style tags, since the CSS is specific for that page.

Yeah I just read about the style tags which helped, thanks Ingolme.

I would keep two stylesheets. If only one page is different, it can have its own stylesheet.

How do you mean? One general style sheet for all pages and separate ones for each individual html page?Does it all come down to personal preference or will it make a difference to the load time of the page for example?

[Toasted Cheese Sandwich]

On an unrelated note, I assume there's a better way of creating several empty spaces than putting... <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

[Ingolme]

Give padding to the parent element, give margin to the element you want moved down. Example:HTML<div class="box1">Some text moved down a few lines</div>CSS.box1 { padding-top: 8em; }