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

baloki · Postby **baloki** » Thu Sep 14, 2006 6:02 pm

we have to use HTML from the 90s because a certain popular browser
You mean THAT browser? The one with all the pipes in? YOU MEAN SUPER MARIO :O?
Browser, not Bowser

I profer the use of Bowsers but my internet surfing device of choice would have to be Bi-Plane!

Niko123000 · Postby **Niko123000** » Thu Sep 14, 2006 7:51 pm

If you need help with CSS I highly recommend this site. It explains everything you need, very helpful.

http://www.westciv.com/style_master/aca ... _tutorial/

ok, this is one thing that gets me. I still don't really understand the diffrence between HTML and CSS. I know (from the invisionfree boards I've made) that CSS is needed for message baords, but I'm not sure why.

Richard K Niner · Postby **Richard K Niner** » Thu Sep 14, 2006 8:14 pm

Well, here's the difference:
HTML is the markup used to add content to a page. It's also capable, up to version 3.2, of specifying how it looks, through attributes like bgcolor, text, link, alink, and vlink on the body element, and various others that I don't recall right now.
In HTML 4.0 and up, however, these were obsoleted or deprecated in favour of using CSS.

Cascading Style Sheets, or CSS, allows you to change the look of a webpage without touching any of the HTML markup (which is why message boards want you to use it - so you don't mess around with the uglier HTML markup). It also gives more control over the look of things than simply changing attributes on HTML elements. Generally, it is formatted as follows:

Code: Select all

selectors { rules }

A "selector" is used to say when the rules apply, for instance, the "a" selector means the rules apply to all anchor tags (links) in the document. A classic example of this is:

Code: Select all

a:link, a:visited, a:active { text-decoration: none; }

The above line removes underlines from all the links on a page, including those visited and clicked on (:link, :visited, and :active select subsets of the anchor tags).

Niko123000 · Postby **Niko123000** » Thu Sep 14, 2006 11:55 pm

ah, so CSS was basically what came with an upgrade to help design websites.

BTW, I got the second email from that place, but I can't find where I signed up for these emails, but here's the email.

To: "Aaron" <niko123000@yahoo.com>
From: "Learn HTML" <support@resource-website.com>
Date: Thu, 14 Sep 2006 19:48:29 -0400
Subject: Aaron, HTML Tip #2
Aaron, you can find tip #2: 'HTML Text Formatting' at:

http://www.resource-website.com/ar/html2cb.html

3020 El Cerrito PLZ #105 El Cerrito, CA 94530

To unsubscribe or change subscriber options visit:
http://www.aweber.com/z/r/?zExszIxMtMxsDEyMbIyc

The HTML graphics in this message have been displayed

and what the website said:

In the last lesson we covered creating a very basic HTML page. If you forgot how, here's a quick recap: Open up the notepad on your computer, paste in the following:

<html>
<body>
This is my first HTML page
</body>
</html>

and save it as something like sample1.html (make sure to use the html filetype instead of .txt)
and to see if it works, you can right click on the file and choose to open it with internet explorer or Firefox.

In this lesson we'll cover formatting text.

To format text, you simply need to surround it with some formatting tags.

For example, you can add the bold tags to the previous code:

<html>
<body>
<b>This is my first HTML page<b>
</body>
</html>

and the text in the page will look like: This is my first HTML page

Assorted HTML Tags For Changing Text:

Below are some tags for changing fonts. You'll see the example of the font and below it, the HTML code that created it.

Bold
<b>Bold</b>

Italics
<i>Italics</i>

Underline
<u>Underline</u>

font size 3
<font size="3">font size 3</font>

font size 5
<font size="5">font size 5</font>

font size 7
<font size="7">font size 7 </font>

Font Color Is Red, Size is 5, text is bolded.
<b><font size="5" color="red">Font Color Is Red, Size is 5, text is bolded.</font></b>

These are some basic tags for defining the look and feel of text.

To work with colors, you will need an HTML color chart, which I have included a link to in the CD menu.

This way you can specify RGB value, which is usually a six digit combination of letters and numbers representing a color on the spectrum (preceding by the '#' symbol).

So instead of:

<font size="5" color="red">Font Color Is Red, Size is 5.</font>

You might use:

<font size="5" color="#CC0000">Font Color Is Red, Size is 5.</font>

Which would produce:

Font Color Is Red, Size is 5.

You can use the online HTML color picker.

Keep in mind, a what-you-see-is-what-you-get HTML editor such as Dreamweaver or FrontPage will have a built in color picker, and you simply need to point and click to choose your color...much easier.

Richard K Niner · Postby **Richard K Niner** » Fri Sep 15, 2006 12:19 am

Obviously, they're still teaching you the HTML 3.2 way of doing things. That's HTML formatting - the CSS way would involve surrounding the text with a <span class="something"> tag, and defining the appropriate CSS rules for the ".something" selector ("font-weight:bold;", "font-style:italic;", "text-decoration:underline", "font-size:<some value>;", "color:red;", etc.)

Niko123000 · Postby **Niko123000** » Fri Sep 15, 2006 12:32 am

Yeah, but the thing is, I don't think Comic Genesis allows for CSS formatting. As far as I know, Comic genesis only allows for HTML formatting and not CSS. I'm not entierly sure (and it doesn't help that of the three people here [that I know of] who have CG accounts, one knows almost nothing of HTML, and another has not mentioned anything in this topic [no offense to anyone])

As I said, as far as I knwo, CG uses the older HTML format, with their own special brand of keentags to add certain stuff.

CodeCat · Postby **CodeCat** » Fri Sep 15, 2006 12:36 am

CSS is embedded as part of the HTML, so if you can edit any HTML code directly you can also insert CSS code into it.

Richard K Niner · Postby **Richard K Niner** » Fri Sep 15, 2006 1:39 am

As I said, as far as I know, CG uses the older HTML format, with their own special brand of keentags to add certain stuff.

CG doesn't control the HTML format. They just perform string replacement on your templates to insert the ad block, the image for your comic, and the links to navigate the archives. And if you can upload arbitrary files to the site, you can add one with a .css extension and add a <link> to the <head> section of your pages pointing to it (with rel="stylesheet")

And if they don't allow you to upload arbitrary files, as CodeCat mentioned, you can write it directly in the HTML file, surrounded by <style> tags.

Coincidentally, CG says your pages are valid XHTML (which doesn't have all of the HTML formatting attributes).

osprey · Postby **osprey** » Fri Sep 15, 2006 1:41 am

Yeah, it's not like other languages in that way. You just slap the co-ordinates between two <style> tags.

Sounds to me like ComicGenesis functions mainly like a standard webhost...just write an HTML page and upload it. You'd be able to use CSS and JavaScript.

Edit: What RKN said, lol.

The MAZZTer · Postby **The MAZZTer** » Sat Sep 16, 2006 3:32 am

CG sounds like a simple template system. Such things are ridiculously easy to make, a few string replacement commands on the template with the data to fill in and you have a generated page. Piece of cake. Of course you have to generate all the stuff to go into the template first, which is significantly more difficult.

we have to use HTML from the 90s because a certain popular browser
You mean THAT browser? The one with all the pipes in? YOU MEAN SUPER MARIO :O?

Slashdot has already done that joke to death. Don't go necromancing now.

RKN has a common view on CSS... mix it with HTML to get the layout right. Now I used to do that, until I saw how awesome purely CSS layout is (make sure to check out multiple style sheets, remember it's all the same HTML, view source PLZ) now my designs tend to go as far into CSS as they can practically go while still being worth the effort.

Richard K Niner · Postby **Richard K Niner** » Sat Sep 16, 2006 12:48 pm

RKN has a common view on CSS... mix it with HTML to get the layout right.

Where do you get that idea?

Niko123000 · Postby **Niko123000** » Sat Sep 16, 2006 1:02 pm

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?

Richard K Niner · Postby **Richard K Niner** » Sat Sep 16, 2006 1:18 pm

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 type="text/css">
@import "[url goes here]"
</style>

Or:

Code: Select all

<link rel="stylesheet" href="[url goes here]" />

(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.)

Niko123000 · Postby **Niko123000** » Sat Sep 16, 2006 1:23 pm

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 type="text/css"> @import "[url goes here]" </style>
Or:
Code: Select all
<link rel="stylesheet" href="[url goes here]" />
(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.

Niko123000 · Postby **Niko123000** » Sat Sep 16, 2006 1:35 pm

Ok, hypothetical situation. My template I have for my comic looks like this:

Code: Select all

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head><title>***comic_name*** - ***todays_date***</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body bgcolor="#333333" text="#ffff66" link="#ffffff" vlink="#AAAAAA" alink="#cc0000">
<div class="keen_ad" style="display:inline; align="center">

<center>

<font face="Helvetica">

***advertisement***
</div>
<div class="main" align=center>

<h1>***comic_name***</h1>
<h2>by ***author***</h2>
</font>
<p>
<table cellpadding="5" cellspacing="2" border="0" width="80%">
<tr>
<td bgcolor="#111111" align=center>
</td>
</tr>

<tr>
<td bgcolor="#000000" align=center>
<font face = "Helvetica">
***todays_comics***


<p>
***first_day*** ***previous_day*** ***next_day*** ***last_day***

<p>***todays_notes***

<p>***calendar***
</font>
</td>
</tr>

<tr>
<td bgcolor="#111111">
<font face = "Helvetica" size="2">
***comic_name*** is hosted on <a href="http://www.keenspace.com">Keenspace</a>, a free webhosting and site automation service for webcomics.
</font>
</td>
</tr>
</table>

<font face = "Helvetica" size=1>Indextemplate design by Ping Teo of <a href="http://thejaded.keenspace.com">The Jaded</a>.  The 'Charcoal Indextemplate' is free-use for all Keenspacers.</font>

</font>

<a href="http://easyhitcounters.com/stats.php?site=borderwalker" target="_top"><img border="0" alt="" src="http://beta.easyhitcounters.com/counter/index.php?u=borderwalker&s=flame" ALIGN="middle" HSPACE="4" VSPACE="2"></a><script src=http://beta.easyhitcounters.com/counter/script.php?u=borderwalker></script>
<br><a href="http://easyhitcounters.com/step2.php" target="_top"><font color="#666666">Free Hit Counter</font></a>
</center>
</div>
</body>
</html>

and I wanted it to include this CSS:

Code: Select all

/* css Zen Garden default style v1.01 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */


/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */

/* Images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */


/* basic elements */
body { 
	font: 8pt/16pt georgia; 
	color: #555753; 
	background: #fff url(blossoms.jpg) no-repeat bottom right; 
	margin: 0px; 
	}
p { 
	font: 8pt/16pt georgia; 
	margin-top: 0px; 
	text-align: justify;
	}
h3 { 
	font: italic normal 12pt georgia; 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: #7D775C;
	}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #B7A5DF;
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #D4CDDC;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color: #9685BA;
	}


/* specific divs */
#container { 
	background: url(zen-bg.jpg) no-repeat top left; 
	padding: 0px 175px 0px 110px;  
	margin: 0px; 
	}

#intro { 
	min-width: 470px;
	}
#pageHeader { 
	margin-bottom: 20px;
	}

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 { 
	background: transparent url(h1.gif) no-repeat top left; 
	margin-top: 10px; 
	width: 219px; 
	height: 87px; 
	float: left;
	}
#pageHeader h1 span {
	display:none
	}
#pageHeader h2 { 
	background: transparent url(h2.gif) no-repeat top left; 
	margin-top: 58px; 
	margin-bottom: 40px; 
	width: 200px; 
	height: 18px; 
	float: right;
	}
#pageHeader h2 span {
	display:none;
	}

#quickSummary {
	clear:both; 
	margin: 20px 20px 20px 10px; 
	width: 160px; 
	float: left;
	}
#quickSummary p {
	font: italic 10pt/22pt georgia; 
	text-align:center;
	}

#preamble {
	clear: right; 
	padding: 0px 10px 0px 10px;
	}
#supportingText {
	padding-left: 10px; 
	margin-bottom: 40px;
	}

#footer { 
	text-align: center; 
	}
#footer a:link, #footer a:visited { 
	margin-right: 20px; 
	}

#linkList {
	margin-left: 600px; 
	position: absolute; 
	top: 0px; 
	right: 0px;
	}
#linkList2 { 
	font: 10px verdana, sans-serif; 
	background: transparent url(paper-bg.jpg) top left repeat-y; 
	padding: 10px; 
	margin-top: 150px; 
	width: 130px; 
	}
#linkList h3.select { 
	background: transparent url(h3.gif) no-repeat top left; 
	margin: 10px 0px 5px 0px; 
	width: 97px; 
	height: 16px; 
	}
#linkList h3.select span {
	display:none
	}
#linkList h3.favorites { 
	background: transparent url(h4.gif) no-repeat top left; 
	margin: 25px 0px 5px 0px; 
	width: 60px; 
	height: 18px; 
	}
#linkList h3.favorites span {
	display:none
	}
#linkList h3.archives { 
	background: transparent url(h5.gif) no-repeat top left; 
	margin: 25px 0px 5px 0px; 
	width:57px; 
	height: 14px; 
	}
#linkList h3.archives span {
	display:none
	}
#linkList h3.resources { 
	background: transparent url(h6.gif) no-repeat top left; 
	margin: 25px 0px 5px 0px; 
	width:63px; 
	height: 10px; 
	}
#linkList h3.resources span {
	display:none
	}


#linkList ul {
	margin: 0px;
	padding: 0px;
	}
#linkList li {
	line-height: 2.5ex; 
	list-style-type: none;
	background: transparent url(cr1.gif) no-repeat top center; 
	display: block; 
	padding-top: 5px; 
	margin-bottom: 5px;
	}
#linkList li a:link { 
	color: #988F5E;
	}
#linkList li a:visited {
	color: #B3AE94;
	}
	


#extraDiv1 { 
	background: transparent url(cr2.gif) top left no-repeat; 
	position: absolute; 
	top: 40px; 
	right: 0px; 
	width: 148px; 
	height: 110px; 
	}

How would I go about doing that, without making my comic look weird?

Define Cynical Fan Forums

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

Who is online