PRINT "This program requires a HTML5 compatible browser (USES GOOGLE)"
PRINT " "
PRINT "The HTML file will be D:\Ants.html"
PRINT " "
PRINT "You may have to change the writing directory for the 2 save files and where google will look"
file$="E:\ants.html" :REM''<<<<<<<<<<<<< If you dont have D:\ directory rename to a writable location
A=OPENOUT(file$)
REM ' VVVVVVVVVVVVVVVVVV PUT YOUR HTML5 CODE DOWN HERE VVVVVV
PRINT#A, "<!DOCTYPE html>"
PRINT#A, "<html lang="+CHR$(34)+"en"+CHR$(34)+">"
PRINT#A,"<head>"
PRINT#A,"<meta charset="+CHR$(34)+"UTF-8"+CHR$(34)+">" :REM ' <<< Keep this section and up for your default template ( it shouldn't need to be changed )
PRINT#A,"<title>Story</title>" :REM ' <<<<<<<<<<<<<<<<< This is the title that will show on the browser section.
PRINT#A,"<link rel="+CHR$(34)+"stylesheet"+CHR$(34)+" type="+CHR$(34)+"text/css"+CHR$(34)+" href="+CHR$(34)+"style2.css"+CHR$(34)+">"
PRINT#A,"</head>"
PRINT#A,"<body>"
PRINT#A,"<header class="+CHR$(34)+"banner"+CHR$(34)+">"
PRINT#A,"<h1>THE STORY OF ANTS</h1>" :REM ' <<<This is the actual title that shows on the web display
PRINT#A,"<p> Chapter One --- Page 1</p>"
PRINT#A,"</header>"
PRINT#A,"<main>"
PRINT#A,"<section>"
PRINT#A,"<h2>The Solution</h2>" :REM' <<<<<<<<<<< another sub title.
PRINT#A,"<article>"
PRINT#A,"<header>"
REM *******************************Your story is bellow this line
REM *** The text sizes are <h1> to <h6> : This is how I did it :
PRINT#A,"<h3>You are digging around for ants.</h3>"
PRINT#A,"<h3>Suddenly the ants start to make strange noises.</h3>"
REM ******************************** Your story ends
PRINT#A,"<nav>" :REM ' ***********************This section is for your interactive link to the next page in your book
PRINT#A,"<ul>"
PRINT#A,"<li><a href="+CHR$(34)+"Page2.html"+CHR$(34)+">"+"Next Page</a></li>"
PRINT#A,"</ul>"
PRINT#A,"</nav>" :REM ' ***********This is the end of your interactive link
PRINT#A,"</header>"
PRINT#A,"</article>"
PRINT#A,"</main>"
PRINT#A,"</body>"
PRINT#A,"</html>"
REM '^^^^^^^^^^^^^^^^^^^^^^^^HTML5 CODE ENDS HERE
CLOSE#A
file$="E:\style2.css"
A=OPENOUT(file$)
REM VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV PUT YOUR CSS BELLOW THIS LINE VVVVVVVVVVVV
PRINT#A,"@charset "+CHR$(34)+"UTF-8"+CHR$(34)+";"
PRINT#A,"article, header, main, nav, section {"
PRINT#A," display: block;"
PRINT#A,"}"
PRINT#A,"html, body, h1, h2, h3, ul, li, a, p,"
PRINT#A,"article, aside, footer, header, main, nav, section {"
PRINT#A," padding: 0;"
PRINT#A," margin: 0;"
PRINT#A,"}"
PRINT#A,".banner {" :REM '***********************define banner
PRINT#A," background-color: rgb(185,165,110);"
PRINT#A,"color: white;"
PRINT#A," padding: 10px 20px;"
PRINT#A,"}" :REM ' *****************************banner def end
PRINT#A,"body {" :REM '*********************** Define body section layout
PRINT#A,"width: 960px;":REM ' <<<<make the body 960 pixels wide
PRINT#A,"margin-left: auto;":REM ' << this centers the page
PRINT#A,"margin-right: auto;":REM '<< this centers the page
PRINT#A,"background-color: rgb(125,155,180);" :REM' <<< color
PRINT#A,"font-family: Helvetica, Arial, sans-serif;"
PRINT#A,"font-size: 15px;"
PRINT#A,"}":REM '****************************body layout ends
PRINT#A,"nav {":REM ' ****************** define link layout
PRINT#A,"background-color: #330066;"
PRINT#A,"padding: 5px;"
PRINT#A,"margin-top: 1px;"
PRINT#A,"}":REM '********************** link layout ends
PRINT#A,"li a {":REM '******************* define text color for link
PRINT#A,"color: rgb(255,255,255);"
PRINT#A,"}":REM ' ********************* text color define ends
PRINT#A,"li {":REM '****Define the location of the link, font, ect
PRINT#A,"display: inline;"
PRINT#A,"margin-left: 15px;"
PRINT#A,"margin-right: 15px;"
PRINT#A,"font-size: 20px;"
PRINT#A,"font-variant: small-caps;"
PRINT#A,"font-weight: bold;"
PRINT#A,"}":REM ' **** Link location, font def, ends here
PRINT#A,"section {":REM ' ******define section background, spacing
PRINT#A,"background-color: #bbbbbb;"
PRINT#A,"margin-top: 10px;"
PRINT#A,"padding: 5px;"
PRINT#A,"}":REM ' ****define section background, spacing ends here
PRINT#A,"article {":REM '*** Define article background, spacing ect
PRINT#A,"background-color: white;"
PRINT#A,"margin-top: 5px;"
PRINT#A,"padding: 10px 15px;"
PRINT#A,"}":REM '***** define article bkground, spacing ends here
PRINT#A,"main {":REM **** define the MAIN width and layout ****
PRINT#A,"width: 960px;"
PRINT#A,"float: left;"
PRINT#A,"margin-bottom: 10px;"
PRINT#A,"}":REM ' ********define Main ends
REM '^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CSS CODE ENDS HERE ^^^^^^^^^^^
CLOSE#A
explore$ ="C:\Program Files (x86)\google\chrome\application\chrome.exe"
db$ = explore$+" "+"E:\ants.html"
OSCLI "RUN " + db$
