Kompx.com or Compmiscellanea.com

Web browsers for DOS

Operating systems : MS-DOS 6.0+, FreeDOS 1.0+

Arachne : Dillo : DOSLYNX : Lynx : Links : ELinks

Web browsers for DOS may be looked at as existing roughly in two categories. Web browsers which can be installed without excessive efforts + work stably within their capability. And the rest of the web browsers of functionality more or less limited or problematic.

The major web browsers for DOS include applications with GUI and text-based browsers. The graphical web browsers for DOS are several versions of Arachne - GPL version, Arachne Labs version, Ray Andrews version - and Dillo. As well as DR-WebSpyder based on Arachne and WebSpyder's variation - Lineo Embrowser. Text-based web browsers for DOS are a little bit more numerous: DOSLYNX, lynx, links, elinks.

The graphical web browsers for DOS even if being prominent among DOS web browsers for their capabilities are definitely inferior in comparison with major web browsers for Windows, Linux or Mac OS X due to the restrictions of the DOS nature, small user and developer base, some other reasons. The capabilities of the text-based web browsers for DOS differ less from the ones of text-based web browsers for other operating systems.

Arachne - / home page /

Graphical web browser for DOS ( More )

HTML, CSS1 ( More )

Arachne 1.95:

glennmcc.org

[ Image ] : Arachne - 1

Arachne 1.95:

freedos.org

[ Image ] : Arachne - 2

Arachne 1.95:

ebay.org

[ Image ] : Arachne - 3

Arachne 1.95:

wikipedia.org

[ Image ] : Arachne - 4

Arachne 1.95:

arachne.cz

[ Image ] : Arachne - 5

Arachne 1.95:

slackware.com

[ Image ] : Arachne - 6

Dillo - / home page /

Graphical web browser ported to DOS. Originally created for Linux and some other *nix systems, ported later to Windows and now DOS. There are versions for some handheld computers, for PlayStation2, Atari-based 68k-systems running MiNT, RISC OS.

HTML. CSS (?)

DOSLYNX - / home page /

Text-based web browser for DOS. Based on Lynx, but differs considerably in interface, keyboard shortcuts, the way web pages are displayed. All in all, DOSLYNX is less capable than Lynx or Links and ELinks.

HTML

DOSLYNX 0.41b:

users.ohiohills.com/fmacall

[ Image ] : DOSLYNX - 1

DOSLYNX 0.41b:

freedos.org

[ Image ] : DOSLYNX - 2

DOSLYNX 0.41b:

ebay.com

[ Image ] : DOSLYNX - 3

DOSLYNX 0.41b:

wikipedia.org

[ Image ] : DOSLYNX - 4

DOSLYNX 0.41b:

arachne.cz

[ Image ] : DOSLYNX - 5

DOSLYNX 0.41b:

slackware.com

[ Image ] : DOSLYNX - 6

Lynx - / home page /

Text-based web browser for DOS. A DOS version of one the most common web browsers with text user interface. There are ports to most various operating systems from Windows, Linux and Mac OS X to AmigaOS, OpenVMS and classic Mac OS.

HTML ( More )

Lynx 2.8.2:

lynx.isc.org

[ Image ] : Lynx - 1

Lynx 2.8.2:

freedos.org

[ Image ] : Lynx - 2

Lynx 2.8.2:

ebay.com

[ Image ] : Lynx - 3

Lynx 2.8.2:

wikipedia.org

[ Image ] : Lynx - 4

Lynx 2.8.2:

arachne.cz

[ Image ] : Lynx - 5

Lynx 2.8.2:

slackware.com

[ Image ] : Lynx - 6

Links - / home page /

Text-based web browser for DOS. A DOS version of one the most common web browsers with text user interface. There are ports to various operating systems, for instance, Windows and Linux.

HTML ( including tables and frames )

Links 2.1pre36:

jikos.cz/~mikulas/links

[ Image ] : Links - 1

Links 2.1pre36:

freedos.org

[ Image ] : Links - 2

Links 2.1pre36:

ebay.com

[ Image ] : Links - 3

Links 2.1pre36:

wikipedia.org

[ Image ] : Links - 4

Links 2.1pre36:

arachne.cz

[ Image ] : Links - 5

Links 2.1pre36:

slackware.com

[ Image ] : Links - 6

ELinks - / home page /

Text-based web browser for DOS. An enhanced version of Links. It is less common, than Lynx or Links, but it is the most capable of text-based web browsers for DOS. There are ports to various operating systems, for example, Windows and Linux.

HTML ( including tables and frames ). Meagre support for CSS

ELinks 0.13b:

elinks.cz

[ Image ] : ELinks - 1

ELinks 0.13b:

freedos.org

[ Image ] : ELinks - 2

ELinks 0.13b:

ebay.com

[ Image ] : ELinks - 3

ELinks 0.13b:

wikipedia.org

[ Image ] : ELinks - 4

ELinks 0.13b:

arachne.cz

[ Image ] : ELinks - 5

ELinks 0.13b:

slackware.com

[ Image ] : ELinks - 6

Besides major web browsers for DOS, there are others, which are by now either well outdated, or using them is accompanied by various complications, or they have been intentionally created for a limited range of task. Graphical web browsers: Webboy, SPIN and Skipper. Text-based web browsers: Bobcat, NetTamer, Minuet. Browsers for viewing off-line web pages: Knots, Open World Navigator, IntraDOS.


Aliosque subditos et thema

 

CSS rollover. Changing background image position

 

CSS rollover. Changing background image position. Example: CSS rollover. Changing background image position HTML / XHTML. Code: <div class="example"> <a href="css-rollover-changing-background-image-position.htm">CSS rollover. Changing background image position</a> </div> CSS. Code: .example {position: relative; top: 0px; left: 0px; height: auto; width: 100%; white-space: nowrap; padding: 10px 20px 10px 20px;} .example a {height: 35px; width: 100%; font-size: 24px; line-height: 35px; color: #006; text-decoration: none; text-align: right; display: block; background: url("bgimg.png") no-repeat left top;} .example a:hover {color: #c00; background: url("bgimg.png") no-repeat left bottom;} Background image: CSS rollover Changing background image position The concept : 1. A link with width and height declared explicitly (here it is 100% and 35px), plus display: block - this makes a 100% by 35px rectangle, the whole area of which is a hyperlink. Line-height is declared explicitly as well, equal to the rectangle's height (35px here) - it helps to have the same vertical alignment of the link text across various web browsers. Text-align: right is added to move the link text to the right in the the link block. (The link block area is highlighted in green to make it more obvious) CSS rollover. Changing background image position 2. An image for the link block area background with height equal to two heights of the link block area is created. The image has two parts, the upper one and the lower one, each of height equal to the height of the link block area; here it is 35px. 3. The background image URL is added to the background CSS property of the link. The CSS background property values of no-repeat and left position the background image to the left of the link block area. The CSS background property value of top places the upper part of the background image on the same level as the link text. 4. The background image URL is added to background CSS property of the link's :hover pseudo-class. The CSS background property values of no-repeat and left of the link's :hover pseudo-class position the background image to the left of the link block area. The CSS background property value of bottom of the link's :hover pseudo-class places the lower part of the background image on the same level as the link text, when a user moves the mouse pointer over the link block area. So, when there is no mouse pointer over the link block area, the upper part of the background image is placed on the same level as the link text. When there is a mouse pointer moved over the link block area, the lower part of the background image gets on the same level as the link text. Mouse out - the upper part is displayed, mouse over - the lower part shows up. And no need to preload any additional images. CSS rollover.

Float bottom

 

There is no "float: bottom" in CSS, but there is a way to achieve it by some other means. Example: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Code: <div class="box1"> <div class="content1"> <div class="left1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="menu1"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </div> <div class="bottom1">Float bottom</div> </div> CSS. Code: .box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;} .menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;} .bottom1 {position: absolute; bottom: 0px; right: 0px;} /* Extra CSS, just styling the look */ .box1 {color: #ddd; text-align: center;} .content1 {background: #bbb;} .left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;} .menu1 a {color: #ddd; text-decoration: none;} .menu1 a:hover {text-decoration: underline;} .bottom1 {padding: 2%; color: #eee; background: #600;} There is a web page with a div box, containing its content - box1. There are two div boxes inside it: 1. "content1" with the content proper on the left and menu on the right. 2. "bottom1" after the content1.