McCloskey Grandeur (AKA the "help me learn HTML" t

[Richard K Niner]

Ok... I will admit Quite a Number of those Templates are pure Awesomeness, but I still am confused on how I would actually incorperate them.

Niner, you mentioned somehting about <style> tags (spaces so as not to activate HTNL for thos read with it on), does that mean that somewhere within the HTML, I would place the tag <style> </style> and then inbetween then insert the CSS?

That's the embedded option. The alternative is to use a separate file and either:

Code: Select all

<style> @import "[url goes here]" </style>

Or:

Code: Select all

<link>

(And no, adding spaces inside the <>s does not escape the HTML parser in phpBB. And if you have HTML turned off, you don't need to worry about it - that's a "how do I post" option, not a "how do I read posts" option.)

Ah. the imbedded I understand for now, as I don't entierlly know how I would import a seperate file, as with CG, you need to use the FTP for almost anything, and I don't know how i would place the CSS stylesheet file so it would effect it, and I wouldn't know how to get a url to place it.

FTP allows you to control where the file goes, but if your wondering where it should go, put it directly into the public_html folder, or some subfolder thereof.

[Niko123000]

Ok, but what about the URL bit? what would I exactly put?

[Richard K Niner]

It's the full path under public_html. For example, if your CSS file is "/public_html/templates/whatever.css", you link to it with "templates/whatever.css" from /workspace/indextemplate.html (and any pages in /workspace/webpages - they get copied into /public_html/), and "../templates/whatever.css" from /workspace/dailytemplate.html (because this gets copied into /public_html/d/, so we have to go up a level to find the CSS file)

[Niko123000]

It's the full path under public_html. For example, if your CSS file is "/public_html/templates/whatever.css", you link to it with "templates/whatever.css" from /workspace/indextemplate.html (and any pages in /workspace/webpages - they get copied into /public_html/), and "../templates/whatever.css" from /workspace/dailytemplate.html (because this gets copied into /public_html/d/, so we have to go up a level to find the CSS file)

half of that I understood. I got up to "you link to it with "templates/whatever.css" from /workspace/indextemplate.html" but after that you kinda lost me...

I do understand it somehwat... but I still kinda... don't get it much...

[Richard K Niner]

half of that I understood. I got up to "you link to it with "templates/whatever.css" from /workspace/indextemplate.html" but after that you kinda lost me...

Sorry, I tend to run on a bit at times, with lots of dependent clauses.

Basically, Autokeen works by copying files from inside the /workspace folder, to the /public_html folder. You've already ran across the indextemplate and dailytemplate files - after autokeen parses them to replace the ***advertisement*** and other tags with the appropriate code, it places them at /public_html/index.html and /public_html/d/[insert comic date here].html, respectively.

It is based on the location they get copied to in /public_html that you'll be building the relative URL for the CSS file. That's because /public_html is the current version of your website, as I would see it if I clicked the link in your sig right now.

So, if whatever.css is in the "template" folder under /public_html, it's at /public_html/template/whatever.css, and can be accessed directly at http://mccloskey.comicgenesis.com/templ ... atever.css. From your home page (generated from indextemplate), you can shorten that to "templates/whatever.css".

Your comic archive pages, however, are located at /public_html/d/ (accessed online at http://mccloskey.comicgenesis.com/d/[date here].html) To shorten the link to the CSS file, you can use the "../" prefix (which means "up one level" or "parent directory") to get the full link "../template/whatever.css".

Finally, I meantioned the files in "/workspace/webpages". You don't seem to have any right now, but this is where you store all the extra pages on your site (cast page, links to other websites/comics, maybe a random biograhpy, if you like). Here's some information on how to use it. As you can see from that, you get to the page like "cast.html" (after an update) at http://mccloskey.comicgenesis.com/cast.html. Note that it's not in any subfolders when accessed online, which can only mean one thing: Autokeen copied it right into the /public_html folder This is the same folder your main page is in, so the same link to the CSS file will work: "templates/whatever.css"

Of course, the above is assuming you create a "templates" folder in /public_html, and upload a CSS file called "whatever.css" to it. If you do something else, feel free to modify it accordingly (if you put it directly in the public_html folder, then you can drop the "templates/" portion of the URL entirely).

[Niko123000]

*blink*

Ok now I understad about 99% of that, and the 1% I don't I'll probably figure out later. Now the only thing is to actually create the CSS template I would wish to use, which I bet involves even more techie bits. I've been reading online Tuts, and I might get a few {insert name} for Dummies books to help me even more.

Now when it comes to actually making the CSS, is there anything there that I might need to know about so I don't accedentally send the next Y2K bug through the internet?

[Richard K Niner]

Now when it comes to actually making the CSS, is there anything there that I might need to know about so I don't accedentally send the next Y2K bug through the internet?

Not to my knowledge. But you may want to test it in multiple browsers, just to make sure it works properly across all of them. If you run across a bug in one of the browsers, go ahead an look for a workaround (there might be one here - though note that a lot of stuff on that website has more to do with JavaScript than CSS).

[The MAZZTer]

OK The site I linked to was merely for inspiration. If you're making your own site you're going to have to write your own CSS, if only because the existing stuff on that site wasn't meant to do what you want to make it do.

What I do is I write the HTML and CSS together at the same time. Example:

Sample HTML:

Code: Select all

<html> <head> <title>My super mega-goober awesome page of doom!</title> </head> <body> </body> </html>

That's about as simple a start as it goes.

Now with CSS, a basic way of defining attributes is to use the <tag> name:

Code: Select all

body { background-color: #000000; color: #FFFFFF; }

Assuming you're already familiar with HTML color formats, not too bad, right? This means all <body> tags get a black background and white text color.

To incorporate this CSS into my page I have several options, to make it simple I'll show you just one of the cleaner ways:

Code: Select all

<html> <head> <title>My super mega-goober awesome page of doom!</title> <style> body { background-color: #000000; color: #FFFFFF; } </style> </head> <body> </body> </html>

I suggest you read up some real tutorials.

[Niko123000]

And that question wa salso hypothetical. I had a distinct feeling I would be forced to make my own CSS.

And I know about the hexadecimal Color codes. I do not know enough to be able to say "I want to make this gold!" and know the code for it right of the tp of my head, but I know about it, and have a Chart for finding the right colors I need.

And I will be reading up on soome tuts. tonight is another Niko All-Nighter for me, so I can do my Homework, get a few new pages sketched and inked, and learn CSS ad HTML.

I also plan on buying a few Books that have helped me and My Family more than once.

So basically, by mid day tomoorow, I should have half my homework done, have at least one Comic page and another Character Sheet Pic sketched and Inked, know at least the average amount of HTML any person with a website should know, and be asleep at my chair with a pen in my mouth.

Thanks for all the Fish.

[Niko123000]

Ok... forgot about that essay... so one of the other two is gonna be delayed a little...

Anyway, I'd thought I'd post what HTML tags I belive I know. this way can get out of the way with things and figure out what I may be thinking that's wrong.

Here's tages I understand to any degree:

<html> </html> - Begins HTML
<head> </head> - Not exactly sure what it's for...
<Body> </body> - again, not exactly sure what it's for....
<bgcolor="#[insert hexadeciaml code for color]"> - Changes Background Color to whatever
<text="#[hexadceimal goes here]"> - changes text color to whatever
<link="#[hex]"> - changes link color
<vlink="#[hex]"> -changes vlink color (though I don't quite know what they mean by vlink)
<alink="#[hex]". - changes alink color (though I don't know what they mean by alink)
<align="[center, left, or right]"> aligns pared bit to Center, left or right side of page
<center> </center> Center's whtever's between tags
<font face="[insert font]"> font is changed to prefered stlye.
<p> - not quite sure, but I belive it stands for "page break" and begins something on a new line.
<table> - also not quite sure... I understand it somewhat... but not entierly...
<a href="your url here'> inserts url i think...
<img src="image url"> inserts an image i think...
<b> </b> bold contained text
<i> </i> itlaicises text
<u> </u> underlines text

this is what I know of what tags...

[osprey]

The hexadecimal colours are really made up of 3 values: red green and blue. Each value runs from 0-F (0-9 then A-F). So, here's a completely random example, #34D8A1 would have a red value of 34, a green value of D8, and a blue value of A1. It makes a nice greeny-teal. When you think of it as RGB values, it makes it easier to picture the colour in your mind.

<p> is Paragraph. As you can assume, it starts a paragraph.

<head> encloses behind-the-scenes parts of the page, such as CSS, JavaScript and the page title (<title> tag).

<table> is a must to learn. It is extremely useful for organising pages.

Another one you should learn is <br>. This is a line break, it moves all text after it down one line.

[Richard K Niner]

<html> </html> - Begins HTML
<head> </head> - Not exactly sure what it's for...
<Body> </body> - again, not exactly sure what it's for....
<bgcolor="#[insert hexadeciaml code for color]"> - Changes Background Color to whatever
<text="#[hexadceimal goes here]"> - changes text color to whatever
<link="#[hex]"> - changes link color
<vlink="#[hex]"> -changes vlink color (though I don't quite know what they mean by vlink)
<alink="#[hex]". - changes alink color (though I don't know what they mean by alink)
<align="[center, left, or right]"> aligns pared bit to Center, left or right side of page
<center> </center> Center's whtever's between tags
<font face="[insert font]"> font is changed to prefered stlye.
<p> - not quite sure, but I belive it stands for "page break" and begins something on a new line.
<table> - also not quite sure... I understand it somewhat... but not entierly...
<a href="your url here'> inserts url i think...
<img src="image url"> inserts an image i think...
<b> </b> bold contained text
<i> </i> itlaicises text
<u> </u> underlines text

this is what I know of what tags...

Just so you know:
vlink = visited link
alink = active link (when you click on it
<p></p> = paragraph (as osprey said) (and, please, close them when you're done)
<br /> = line break
<a></a> and <img /> do exactly what you're expecting

Also, tables work as follows:
<table></table> - identifies a table
<thead></thead>, <tbody></tbody>, and <tfoot></tfoot> - identifies the sets of ruws belonging to the table header, body, and footer, respectively. You probably won't use them.
<tr></tr> - encapsulates a single row in your table
<th></th>, <td></td> - encapsulates a single cell in the current row (th = heading, an oft-neglected tag; td = data, even when it's not data)

Oh, and osprey: if you're using tables to define layout, divs (generic block containers) are better

[The MAZZTer]

<html> </html> - Begins HTML
<head> </head> - Not exactly sure what it's for...
<Body> </body> - again, not exactly sure what it's for....
<bgcolor="#[insert hexadeciaml code for color]"> - Changes Background Color to whatever
<text="#[hexadceimal goes here]"> - changes text color to whatever
<link="#[hex]"> - changes link color
<vlink="#[hex]"> -changes vlink color (though I don't quite know what they mean by vlink)
<alink="#[hex]". - changes alink color (though I don't know what they mean by alink)
<align="[center, left, or right]"> aligns pared bit to Center, left or right side of page
<center> </center> Center's whtever's between tags
<font face="[insert font]"> font is changed to prefered stlye.
<p> - not quite sure, but I belive it stands for "page break" and begins something on a new line.
<table> - also not quite sure... I understand it somewhat... but not entierly...
<a href="your url here'> inserts url i think...
<img src="image url"> inserts an image i think...
<b> </b> bold contained text
<i> </i> itlaicises text
<u> </u> underlines text

this is what I know of what tags...

Oh god.. ok... only a third of those are correct (mainly the ones you don't know what they do)... the other third aren't even tags, and the last third work but are deprecated and should be avoided at all costs.

I'm going to skip HTML and jump straight to XHTML.

In XML based languages, every tag has to have a closing tag. There are two ways to close a tag.

Some tags change content (text + other tags) in them, and thus have a closing tag placed at the end of the content:

<html></html>

Other tags are themselves content and have a closing mark embedded in the tag itself:

<img />

This is a new requirement of XHTML, HTML did not have this.

A basic XHTML document, although missing are several crucial definitions that tell the browser it's XHTML and not HTML (I'll get to those later):

Code: Select all

<html> <head> <title>Page Title</title> </head> <body> Page Content </body> </html>

HTML tag indicates a HTML or HTML-compatible document that a browser can render. HEAD indicates header information, IE metadata applying to the document but not content itself. This usually includes a page title in a TITLE tag. It can also include CSS style sheets and JavaScript (JavaScript can also be placed in the body... only difference is when it is parsed and executed). Also it can include META tags for metadata, but these are rarely useful nowadays. Search engines used to use these to describe pages but they got smart and started looking at the page content instead.

BODY tag indicates content. Most tags have to have to be inside a BODY tag.

<tagname> - Type - Description

Type can be "block" or "inline". Block elements have line breaks before and after them. inline elements do not disrupt the flow of content.

Remember that ideally [X]HTML should only be used to store content and sort and organize and categorize it to allow CSS to define the layout of the content.

<span></span> - inline - Allows you to indicate a section of text in a paragraph. By itself it has no effect on it's content, but it's used mostly to apply special styles to a word or two using CSS.
<div></div> - block - Same as the above, but with line breaks.

These two are basic elements. Following ones are more specialized:

<p></p> - block - Indicates a paragraph of text is enclosed.
<h1></h1> - block - Indicates a header. There are also H2, H3, H4, H5, H6. By default these each get smaller and smaller.
<img /> - inline - Indicates an image. Will not do anything by itself, it requires attributes to specify the image URL.
<a></a> - inline - Can indicate either an anchor for a hyperlink or a hyperlink itself, depending on it's attributes.
<input /> - inline - Indicates a form field. It's type attribute determines exactly what type of field it is.
<textarea></textarea> - block - Indicates a large textbox. Note that tags have no effect inside this tag.
<iframe></iframe> - block - Indicates a webpage to embed inside the current webpage in a frame. (DON'T FORGET THE CLOSING TAG.) Content in between opening and closing iframe is ignored unless the user's browser does not support frames. Use of frames should be avoided... <div>s are usually better for whatever you want with few exceptions.

[Richard K Niner]

and the last third work but are deprecated and should be avoided at all costs.

Heck, the last one is obsoleted and should be avoided simply because of that.

[The MAZZTer]

Now for attributes... some tags can use attributes or need attributes to work.

<tagname attributename="attributevalue" />

This is the proper form in XHTML. Attrbutes REQUIRE a value and quotes around the value, neither of which was a requirement for HTML.

<img src="url" /> <iframe src="url"></iframe> - Displays an image/webpage at "url". URL can be absolute (must start with a protocol, ie http://) or relative (ie if your webpage is "http://www.mzzt.net/" and your src is "images/blah.jpg" it will load "http://www.mzzt.net/images/blah.jpg").

<anytag style="CSS STYLES GO HERE" /> - This powerful attribute allows you to quickly assign CSS styles to individual tags. EX: "background-color: #000000;". You should avoid this and use style sheets in the header to keep content and layout separated. Good for quickly testing something though.

<a href="url"></a> - Same deal as <img src="" />, this determines which url the link will open when clicked.