Hypertext Web Comics: Practice
Creating hypertext-based web comics is a completely new approach to comic book construction, which is able to turn all your ideas about web comics as such. Now each issue is not a static picture, but an HTML document with which you are free to treat as you wish, and the flight of your imagination is no longer limited to the framework of the desktop canvas of the graphic editor.
But first things first. Since I made HTWC (which stands for Hypertext webcomics), in order not to be unfounded, but to reinforce the concept with a living example, many appreciated the idea, found it at least curious, but few saw it in the whole revolution of the genre. I have already written an article titled “Hypertext Web Comics: Theory” on the blog of “Author Comics”, so as not to repeat myself, I will devote the habratopeic to the technical side of the question.
Web comics look like usual:
')
But if we look into the source code of the page, we will not find the usual IMG tag with the address of the image, instead it will be HTML-code:
To better understand the structure, you can highlight all tags:
As you can see, for each frame of the comic, its own block element is allotted, inside which characters (as images) and blocks with texts (as text) are absolutely positioned.
A modest CSS file that controls all this can be viewed here .
You may ask why all this is necessary, if comics are easier to do in the old manner with simple pictures? A lot of why: the possibilities are truly inexhaustible. I, perhaps, will begin to make a list without confidence that I can list at least half of the new features:
The main disadvantage is only one: you need to know HTML and CSS. Moreover, if you are already a seasoned typesetter, you shouldn’t have to quite smile - when creating a comic, this does not relieve you from the obligation to draw well and be creatively smart. Anyway, more interesting than any clever technologies in a web comic will always be an interesting plot, vivid characters and funny dialogues. And hypertext web comics is a kind of synthesis of comics of classical and Internet technologies, while the presence of the second will never hide the lack of the first.
But first things first. Since I made HTWC (which stands for Hypertext webcomics), in order not to be unfounded, but to reinforce the concept with a living example, many appreciated the idea, found it at least curious, but few saw it in the whole revolution of the genre. I have already written an article titled “Hypertext Web Comics: Theory” on the blog of “Author Comics”, so as not to repeat myself, I will devote the habratopeic to the technical side of the question.
Inside look
Web comics look like usual:
')
But if we look into the source code of the page, we will not find the usual IMG tag with the address of the image, instead it will be HTML-code:
<div class = "htwc"> <div class = "inner"> <h2> HTWC </ h2> <div class = "subh"> The world's first web comic on HTML and CSS </ div> <div class = "name"> <b> # 07 </ b> - Features perception </ div> <div class = "line"> <div class = "frame w33"> <div class = "border"> <div class = "speech" style = "bottom: 140px; left: 15px; right: 15px"> Here the first frame occupies a third of the area, the second - the other two. <div class = "tail"> </ div> </ div > <img src = "htcomics / pers / chief.gif" height = "64" alt = "Chief" style = "bottom: 30px; left: 90px;"> </ div> </ div> <div class = "frame w66"> <div class = "border" style = "background: #dff;"> ... </ div> </ div> </ div> <div class = "copyright"> © 2009, <a href="http://kaa.a-comics.ru/"> <b> Gravedigger </ b> </a>, <a href = "http: //kaa.a-comics.ru/htcomics/">http://kaa.a-comics.ru/htcomics/ </a> </ div> </ div> </ div>
To better understand the structure, you can highlight all tags:
As you can see, for each frame of the comic, its own block element is allotted, inside which characters (as images) and blocks with texts (as text) are absolutely positioned.
A modest CSS file that controls all this can be viewed here .
What is the essence
You may ask why all this is necessary, if comics are easier to do in the old manner with simple pictures? A lot of why: the possibilities are truly inexhaustible. I, perhaps, will begin to make a list without confidence that I can list at least half of the new features:
- Now you can insert links directly into balloons with text (matchbooks)
- Links can be superimposed at all on any element of the comic.
- In this way it is possible to realize the nonlinear structure of the releases: different links lead to different plot forks.
- With Javascript, you can add even more interactivity to comics.
- Hypertext Web comics are 100% indexed by search engines (optimizers, hello!)
- HTML comics weigh less than pictures, due to which they load faster and save traffic
- Reusing images saves even more (caching)
- It is much easier to correct an error in an HTML document than in an image.
- Translating a hypertext comic into other languages ​​is easier than an easy one: just use the automatic translator, and live translators will thank you very much.
The main disadvantage is only one: you need to know HTML and CSS. Moreover, if you are already a seasoned typesetter, you shouldn’t have to quite smile - when creating a comic, this does not relieve you from the obligation to draw well and be creatively smart. Anyway, more interesting than any clever technologies in a web comic will always be an interesting plot, vivid characters and funny dialogues. And hypertext web comics is a kind of synthesis of comics of classical and Internet technologies, while the presence of the second will never hide the lack of the first.
References:
- HTWC (Hypertext webcomics) - in fact, the subject.
- "Hypertext Web Comics: Theory" - for full immersion in the topic
Source: https://habr.com/ru/post/67826/
All Articles