Editing ViolaWWW (section)

===Firsts===
Viola was the first web browser to have the following features:<ref name="timblhistory">{{cite web|last=Berners-Lee|first=Tim|title=A Brief History of the Web|url=http://www.w3.org/DesignIssues/TimBook-old/History.html|publisher=[[World Wide Web Consortium]]|access-date=17 August 2010|author-link=Tim Berners-Lee|orig-year=c.1993|date=9 August 1997}}</ref>

* client-side document insertion, predating [[Framing (World Wide Web)|frames]], or syndication via JavaScript output writing, which are used commonly today.

{| class="wikitable" style="width: 100%;"
|- valign="top" align="left"
! Viola-style document embedding
! Object method
|- valign="top" align="left"
| style="text-align:left" | <syntaxhighlight lang="xml">
<INSERT SRC="a_quote.html">
</syntaxhighlight>
| style="text-align:left" |<syntaxhighlight lang="html">
<object type="text/html" data="a_quote.html">
<p>This text will appear
for browsers that don't
support OBJECTs</p>
</object>
</syntaxhighlight>
|}

* a simple stylesheet mechanism used for inserting style information such as fonts, color and alignments into a document.<ref>{{Cite web |title=Chapter 14, Stylesheet |url=http://viola.org/viola/book/chp14.html |url-status=dead |archive-url=https://web.archive.org/web/20220118233304/http://viola.org/viola/book/chp14.html |archive-date=2022-01-18 |website=Viola in a Nutshell}}</ref> This was implemented in Viola well before [[Cascading Style Sheets|CSS]] was developed in 1996:

{| class="wikitable" style="width: 100%;"
|- valign="top" align="left"
! A viola-style stylesheet
! A CSS stylesheet
|- valign="top" align="left"
| style="text-align:left" | <pre><nowiki>
 (BODY,INPUT,P   FGColor=black
                 BGColor=grey70
                 BDColor=grey70
                 align=left

 (H1             FGColor=white
                 BGColor=red
                 BDColor=black
                 align=center

</nowiki></pre>
| style="text-align:left" | <syntaxhighlight lang="css">
 body, input, p {
  color: black;
  background-color: #707070;
  text-align: left;
}

 h1 {
  color: white;
  background-color: red;
  border: solid 1px black;
  text-align: center;
}
</syntaxhighlight>
|}

* a sidebar panel used for displaying "meta" information, intra document navigational links, and other information, similar to (but not as sophisticated as) features found in several modern browsers.
* a [[scripting language]] that can be accessed from an [[HTML]] document,<ref>{{Cite web |title=Chapter 13, Extensibility |url=http://viola.org/viola/book/chp13.html |archive-url=https://web.archive.org/web/20220118223211/http://viola.org/viola/book/chp13.html |archive-date=2022-01-18 |website=Viola in a Nutshell}}</ref> such that an HTML document can embed highly interactive scripts/applets.  This can be seen as the precursor to [[JavaScript]] and embedded objects.

{| class="wikitable" style="width: 100%;"
|- valign="top" align="left" style="font-size: 90%"
!
! style="width:40%" | ViolaWWW method
! style="width:60%" | [[JavaScript]] equivalent
|- valign="top" align="left" style="font-size: 90%"
! Scripting
| style="text-align:left" |<syntaxhighlight lang="javascript">
\class {txtDisp}
\name {showTime}
\script { switch (arg[0]) {
  case "tick":
    set("content"), date());
    after(1000, self(), "tick");
    return; break;
  case "init":
    after(1000, self(), "tick");
    break;
  }
  usual();
}
\width {100}
\height {50} \
</syntaxhighlight>
| style="text-align:left" |<syntaxhighlight lang="javascript">
function showTimeInDoc() {
  var theTime = document.getElementById('theTime');
  var date = new Date();
  theTime.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
  setTimeout(showTimeInDoc, 1000);
}
</syntaxhighlight>
|- align="left" valign="top" style="font-size: 90%"
! Embedding a script into a web page
| style="text-align:left" | <syntaxhighlight lang="html">
<HTML>
<HEAD>
</HEAD>
<BODY>
And, the time now is:
<LINK REL="viola"
HREF="showTime.v">
</BODY>
</HTML>

</syntaxhighlight>
| style="text-align:left" | <syntaxhighlight lang="html">
<html>
  <head>
    <script type="text/javascript" src="showTime.js"></script>
  </head>
  <body onload="showTimeInDoc()">
    <p id="theTime">&nbsp;</p>
  </body>
</html>
</syntaxhighlight>
|}

* Forms<ref>{{cite web |title=ViolaWWW |url=https://www.webdesignmuseum.org/web-design-history/violawww-1992 |website=webdesignmuseum.org |publisher=Web Design Museum |access-date=17 February 2022}}</ref>