I need help on making a webcomic

voxie · 09-10-2005, 08:45 PM

I never thought it'd come to this, but it has... I'll be collaborating on a webcomic piece. Looks like I'll be setting up the site too.

After reading Fred's post on Shari's webcomic, it seems there are a few of these HTML/Flash codes for websites to help reader's navigate through a webcomic. But I don't know of any...

Does anyone here have any tips or recommendations??

Thanks in advance..

Wayne · 09-10-2005, 10:33 PM

Ive drawn a couple of webcomics so far, and made the sites for them as well.

The actuall HTML code for Moving through pages is pretty simple.

Heres an example of my own.

I'll mark points of interest with a star* , and write a description.

If you wish to use this format, just copy it, to you're prospective HTML file, and just fill it in with your own filenames, and numbers. And remove the descriptions i have writen next to important things.

<HTML>

<HEAD>
<TITLE> THE DELIVEY </TITLE>
<CENTER><B> <H1>THE DELIVERY</H1> </B><P></CENTER>
<center>
<img src="the delivery1.jpg" name="wayne" border=0 height="1100" width="800"> * [this will be the first file in your slideshow/comic] the numbers refer to resolution.]

<P>
<a href="java_script_:slideshowBack()">
Last Page</a>
<a href="java_script_:slideshowUp()">
Next Page</a>
<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 = new Image ()
img1.src = "The delivery1.jpg" *[this is the list of images which make up your comic.

img2 = new Image ()
img2.src = "The deliver2.jpg"
img3 = new Image ()
img3.src = "The deliver3.jpg"
img4 = new Image ()
img4.src = "The deliver4.jpg"
img5 = new Image ()
img5.src = "The deliver5.jpg"
img6 = new Image ()
img6.src = "The deliver6.jpg"
img7 = new Image ()
img7.src = "The deliver7.jpg"
img8 = new Image ()
img8.src = "The deliver8.jpg"
img9 = new Image ()
img9.src = "The deliver9.jpg"
img10 = new Image ()
img10.src = "The deliver10.jpg"
img11 = new Image ()
img11.src = "The deliver11.jpg"
img12 = new Image ()
img12.src = "The deliver12.jpg"
img13 = new Image ()
img13.src = "The delivera .jpg"
img14 = new Image ()
img14.src = "The deliver14.jpg"
img15 = new Image ()
img15.src = "The deliver15.jpg"
img16 = new Image ()
img16.src = "The deliver16.jpg"
img17 = new Image ()
img17.src = "The deliver17.jpg"
img18 = new Image ()
img18.src = "The deliver18.jpg"
img19 = new Image ()
img19.src = "The deliver19.jpg"
img20 = new Image ()
img20.src = "The deliver20.jpg"
img21 = new Image ()
img21.src = "The deliver21.jpg"
img22 = new Image ()
img22.src = "The deliver22.jpg"
img23 = new Image ()
img23.src = "The deliver23.jpg"
img24 = new Image ()
img24.src = "The deliver24.jpg"
img25 = new Image ()
img25.src = "The deliver25.jpg"
img26 = new Image ()
img26.src = "The deliver26.jpg"
img27 = new Image ()
img27.src = "The deliver27.jpg"
img28 = new Image ()
img28.src = "The deliver28.jpg"
img29 = new Image ()
img29.src = "The deliver29.jpg"
img30 = new Image ()
img30.src = "The deliver30.jpg"
img31 = new Image ()
img31.src = "The deliver31.jpg"
img32 = new Image ()
img32.src = "The deliver32.jpg"
img33 = new Image ()
img33.src = "The deliver33.jpg"
img34 = new Image ()
img34.src = "The deliver34.jpg"
img35 = new Image ()
img35.src = "The deliver35.jpg"
img36 = new Image ()
img36.src = "The deliver36.jpg"
img37 = new Image ()
img37.src = "The deliver37.jpg"
img38 = new Image ()
img38.src = "The deliver38.jpg"
img39 = new Image ()
img39.src = "The deliver39.jpg"
function slideshowUp()
{
num=num+1 * [this here should state the exact number of pages + 1]
if (num==40)
{num=1}
document.wayne.src=eval("img"+num+".src")
}
function slideshowBack()
{
num=num-1* [this here should state the exact number of pages you have.]
if (num==0)
{num=39}
document.wayne.src=eval("img"+num+".src")
}
</SCRIPT>

</head>
<body>
<center>

</center>
</body>
</HTML>

Any problems dont hesitate to ask. I am quite drunk right now.

Here are is an example of a working version of this. http://members.lycos.co.uk/wrh2000005/

I hope this helps you out ^__^

Sun Kitten · 10-10-2005, 01:52 AM

I have a number of online comics, and the html for all of them is static and was written by hand in notepad (it doesn't take very long to do, either, especially with an incremental thing like a webcomic). There's nothing wrong with a java setup as such, but many system administrators are paranoid and my computer here at work would not let me view Wayne's comic (this is why it took me so long to read and comment on it ;_; ). I prefer to keep my html simple, 'cause I have to maintain it, which is also something to bear in mind for your site

Anyway, good luck with it, whichever way you do it ^^

Wayne · 10-10-2005, 01:59 AM

Is that so?

If you would'nt mind explaining this to me in more detail.

I did't have a clue, when i first started doing these comics, so i looked online and it said to do it this way.

I also only used note pad to write this, if you know a simpler way, then tell me.

it will save me messing around on my next comic.

Sun Kitten · 10-10-2005, 03:51 AM

Quote:

Originally Posted by Wayne

Is that so?

If you would'nt mind explaining this to me in more detail.

I did't have a clue, when i first started doing these comics, so i looked online and it said to do it this way.

I also only used note pad to write this, if you know a simpler way, then tell me.

it will save me messing around on my next comic.

Okay.. here's a page from Looking for the Sun:

<HTML>
<HEAD>
<TITLE>toothycat.net - Looking for the Sun</TITLE>
- adds the title in the top bar of the browser
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FFFFFF" VLINK="#FFFFFF" ALINK="#BA64FC">
- sets up the colours; can be left to default
<TABLE WIDTH="95%" ALIGN="CENTER"><TR><TD>
- all my html pages are set inside a table. It's not necessary, but I like it. Open the table row (TR) and table division (TD), and close them right at the end
<H1></H1>

<BR><BR><BR>
- spacing

<CENTER><IMG SRC="../img/tcotc04.jpg">
- the page picture, sized to 600 pixels wide (in my image editor). I keep all my images in a folder called img, hence the reference.

<BR><BR>
- more spacing

<TABLE WIDTH="80%">
<TR VALIGN="top">
<TD WIDTH="33%" ALIGN="center"><A HREF="tcotc03.html">Back</A></TD>
<TD WIDTH="33%" ALIGN="center"><A HREF="index.html">Home</A></TD>
<TD WIDTH="33%" ALIGN="center"><A HREF="tcotc05.html">Next</A></TD>
</TR>
</TABLE>
- a little table below the image containing the back, home and next text links. The td widths are set to 33% of the table and the text is centred so they're spaced nicely below the image.

<BR><BR>
- more spacing

<FONT SIZE="1">
<P ALIGN="right">
toothycat.net is copyright Sergei and Morag Lewis
</P>
</FONT>
- little copyright notice, aligned to the right

</TD></TR></TABLE>
</BODY>
</HTML>
- and close the big td, tr and table, and close the page off

That's page tcotc04, and for each image you need a separate page, containing the appropriate image and forward/back links (so for page 7, the image would be tcotc07.jpg, the page name tcotc07.html, and the forward and back links would be tcotc06.html and tcotc08.html, respectively). The index page (http://www.toothycat.net/lfts/index.html) is effectively just a big table of links to separate issues and individual pages, although I like to think it doesn't look too boring

I suspect some of that is now deprecated but I wrote it long before I knew what css is, and it's simple enough that it'll still work. For a more complex layout, look at the source on a Phoenix Feathers page: http://www.toothycat.net/pf/r14.html - that's got decorations above and below the image and little buttons rather than text links on the bottom bar.

www.htmlhelp.com is a *very* useful resource

Hope that's helpful ^^

Sonia Leong · 10-10-2005, 09:30 AM

Although I code in static, I do use css for my website too. As an additional resource, try www.w3schools.com - they have full html, xhtml and css tags and tutorials available.

Buuu · 10-10-2005, 10:51 AM

Using java is ok... but if you have a long comic it might be better to use a script that can generate static pages for you. It's not the best script, and I use it when I'm being quite lazy, but there's autokeen lite which can create static stuff. http://www.keenspot.com/downloads/

While googling that I also found this: http://istrip.foxholeproductions.com/docs/tools.html But I've never used it, so don't know how good it is.

I believe Fred has a script for comic somewhere.

Azure · 10-10-2005, 11:48 AM

Ask Joe he coded frightmore univeristy

Cin · 10-10-2005, 01:06 PM

Thanks for starting this thread voxie ^_^, was thinking of doing something like this myself and the info on here helps alot ^_^

voxie · 10-10-2005, 07:51 PM

Heh, np Cin^^;

Thanks everyone - I'll have a go with all of this. Thank you, thank you!

Becca, yeah I contacted Joe about it, he's yet to reply. Such a busy man..

Missino · 10-10-2005, 08:15 PM

Well if you're using a web-editor then script should be no big deal right? Isn't it just a matter of hotlinking?

Oh, by the way...I've made my first site...(not on Manga though I'm afraid)...It's just for my Badminton club!

Nothing special either, and only the home page is finished! Still loads more to do!

http://sbh.atspace.com

09-10-2005, 08:45 PM	#1
voxie ╬ ಠ益ಠ Join Date: Feb 2002 Location: in my head Posts: 914	I need help on making a webcomic I never thought it'd come to this, but it has... I'll be collaborating on a webcomic piece. Looks like I'll be setting up the site too. After reading Fred's post on Shari's webcomic, it seems there are a few of these HTML/Flash codes for websites to help reader's navigate through a webcomic. But I don't know of any... Does anyone here have any tips or recommendations?? Thanks in advance.. __________________ www.voxie.co.uk

09-10-2005, 10:33 PM	#2
Wayne The great Grumbledook! Join Date: Sep 2004 Location: Dewsbury Posts: 1,909	Ive drawn a couple of webcomics so far, and made the sites for them as well. The actuall HTML code for Moving through pages is pretty simple. Heres an example of my own. I'll mark points of interest with a star* , and write a description. If you wish to use this format, just copy it, to you're prospective HTML file, and just fill it in with your own filenames, and numbers. And remove the descriptions i have writen next to important things. <HTML> <HEAD> <TITLE> THE DELIVEY </TITLE> <CENTER><B> <H1>THE DELIVERY</H1> </B><P></CENTER> <center> <img src="the delivery1.jpg" name="wayne" border=0 height="1100" width="800"> * [this will be the first file in your slideshow/comic] the numbers refer to resolution.] <P> <a href="java_script_:slideshowBack()"> Last Page</a> <a href="java_script_:slideshowUp()"> Next Page</a> <SCRIPT LANGUAGE="JavaScript"> var num=1 img1 = new Image () img1.src = "The delivery1.jpg" [this is the list of images which make up your comic. img2 = new Image () img2.src = "The deliver2.jpg" img3 = new Image () img3.src = "The deliver3.jpg" img4 = new Image () img4.src = "The deliver4.jpg" img5 = new Image () img5.src = "The deliver5.jpg" img6 = new Image () img6.src = "The deliver6.jpg" img7 = new Image () img7.src = "The deliver7.jpg" img8 = new Image () img8.src = "The deliver8.jpg" img9 = new Image () img9.src = "The deliver9.jpg" img10 = new Image () img10.src = "The deliver10.jpg" img11 = new Image () img11.src = "The deliver11.jpg" img12 = new Image () img12.src = "The deliver12.jpg" img13 = new Image () img13.src = "The delivera .jpg" img14 = new Image () img14.src = "The deliver14.jpg" img15 = new Image () img15.src = "The deliver15.jpg" img16 = new Image () img16.src = "The deliver16.jpg" img17 = new Image () img17.src = "The deliver17.jpg" img18 = new Image () img18.src = "The deliver18.jpg" img19 = new Image () img19.src = "The deliver19.jpg" img20 = new Image () img20.src = "The deliver20.jpg" img21 = new Image () img21.src = "The deliver21.jpg" img22 = new Image () img22.src = "The deliver22.jpg" img23 = new Image () img23.src = "The deliver23.jpg" img24 = new Image () img24.src = "The deliver24.jpg" img25 = new Image () img25.src = "The deliver25.jpg" img26 = new Image () img26.src = "The deliver26.jpg" img27 = new Image () img27.src = "The deliver27.jpg" img28 = new Image () img28.src = "The deliver28.jpg" img29 = new Image () img29.src = "The deliver29.jpg" img30 = new Image () img30.src = "The deliver30.jpg" img31 = new Image () img31.src = "The deliver31.jpg" img32 = new Image () img32.src = "The deliver32.jpg" img33 = new Image () img33.src = "The deliver33.jpg" img34 = new Image () img34.src = "The deliver34.jpg" img35 = new Image () img35.src = "The deliver35.jpg" img36 = new Image () img36.src = "The deliver36.jpg" img37 = new Image () img37.src = "The deliver37.jpg" img38 = new Image () img38.src = "The deliver38.jpg" img39 = new Image () img39.src = "The deliver39.jpg" function slideshowUp() { num=num+1 [this here should state the exact number of pages + 1] if (num==40) {num=1} document.wayne.src=eval("img"+num+".src") } function slideshowBack() { num=num-1* [this here should state the exact number of pages you have.] if (num==0) {num=39} document.wayne.src=eval("img"+num+".src") } </SCRIPT> </head> <body> <center> </center> </body> </HTML> Any problems dont hesitate to ask. I am quite drunk right now. Here are is an example of a working version of this. http://members.lycos.co.uk/wrh2000005/ I hope this helps you out ^__^ __________________ UKMANGAXL

10-10-2005, 01:52 AM	#3
Sun Kitten A Pocketful of Clouds Join Date: Oct 2003 Location: Cambridge Posts: 10,531 Sweatdrop Admin	I have a number of online comics, and the html for all of them is static and was written by hand in notepad (it doesn't take very long to do, either, especially with an incremental thing like a webcomic). There's nothing wrong with a java setup as such, but many system administrators are paranoid and my computer here at work would not let me view Wayne's comic (this is why it took me so long to read and comment on it ;_; ). I prefer to keep my html simple, 'cause I have to maintain it, which is also something to bear in mind for your site Anyway, good luck with it, whichever way you do it ^^ __________________

10-10-2005, 01:59 AM	#4
Wayne The great Grumbledook! Join Date: Sep 2004 Location: Dewsbury Posts: 1,909	Is that so? If you would'nt mind explaining this to me in more detail. I did't have a clue, when i first started doing these comics, so i looked online and it said to do it this way. I also only used note pad to write this, if you know a simpler way, then tell me. it will save me messing around on my next comic. __________________ UKMANGAXL

10-10-2005, 09:30 AM	#6
Sonia Leong Executive Princess Join Date: Mar 2004 Location: Cambridge, UK Posts: 4,848 Sweatdrop Admin	Although I code in static, I do use css for my website too. As an additional resource, try www.w3schools.com - they have full html, xhtml and css tags and tutorials available. __________________ Sonia Leong ~ anime/manga/artist/illustrator ~ fyredrake.net ~ ~ romeo & juliet ~ fujofujo.com ~ deviantArt ~

10-10-2005, 10:51 AM	#7
Buuu Improving makes you better! Join Date: Apr 2003 Location: Cambridge Posts: 3,957	Using java is ok... but if you have a long comic it might be better to use a script that can generate static pages for you. It's not the best script, and I use it when I'm being quite lazy, but there's autokeen lite which can create static stuff. http://www.keenspot.com/downloads/ While googling that I also found this: http://istrip.foxholeproductions.com/docs/tools.html But I've never used it, so don't know how good it is. I believe Fred has a script for comic somewhere.

10-10-2005, 11:48 AM	#8
Azure Writer type Join Date: Jan 2002 Location: L Posts: 1,339 -->	Ask Joe he coded frightmore univeristy __________________ Shonen.co.uk//voiceacting.co.uk

10-10-2005, 01:06 PM	#9
Cin Desperately seeking sleep Join Date: May 2005 Location: Uk manchester Posts: 1,965 -->	Thanks for starting this thread voxie ^_^, was thinking of doing something like this myself and the info on here helps alot ^_^

10-10-2005, 07:51 PM	#10
voxie ╬ ಠ益ಠ Join Date: Feb 2002 Location: in my head Posts: 914	Heh, np Cin^^; Thanks everyone - I'll have a go with all of this. Thank you, thank you! Becca, yeah I contacted Joe about it, he's yet to reply. Such a busy man.. __________________ www.voxie.co.uk

10-10-2005, 08:15 PM	#11
Missino Works with Wine Join Date: Feb 2005 Location: New Milton, Hampshire Posts: 731 -->	Well if you're using a web-editor then script should be no big deal right? Isn't it just a matter of hotlinking? Oh, by the way...I've made my first site...(not on Manga though I'm afraid)...It's just for my Badminton club! Nothing special either, and only the home page is finished! Still loads more to do! http://sbh.atspace.com

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Making a new manga!!!! ChronoCrisis	kakashi-naruto	Manga Creation	4	02-06-2005 04:30 PM
Looking for an artist to do a webcomic	SRW	Manga Creation	1	17-04-2005 12:26 PM
Finally! XD; I created the first pages of my webcomic.	Unmei_tenshi	Manga Creation	19	15-03-2005 08:22 PM
Question for webcomic artists	mythecaria	Coffee Lounge	26	28-04-2004 11:02 AM
Webcomic compo!! vote for meeeeee!	Azure	Coffee Lounge	1	13-01-2004 08:27 PM