Post by Admin on Apr 1, 2018 21:14:40 GMT
Template example snippet for creating a HTML/CSS page. Presentation sample.
You will find it best to change the writing and reading directories in the program (I have added lots of notes to help you see)
You will find it best to change the writing and reading directories in the program (I have added lots of notes to help you see)
PRINT "This program requires a HTML5 compatible browser (USES a shell command that uses the current system to view it)"
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"
LET floc$="C:\Users\Michael\Downloads\bbcsdl20\examples"
file$=floc$+"\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>reference</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>RETROLIB Reference</h1>" :REM ' <<<This is the actual title that shows on the web display
PRINT#A,"<p> </p>"
PRINT#A,"</header>"
PRINT#A,"<main>"
PRINT#A,"<section>"
PRINT#A,"<h2>GRAPHICS COMMANDS</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>DEF PROCgraphics(x,y) -graphics screen x-width-y-height </h3>"
PRINT#A,"<h3>DEF PROCdotsize(n) </h3>"
PRINT#A,"<h3>DEF PROCcolor(fb$,rgb$) </h3>"
PRINT#A,"<h3>*****FOREGROUND/BACKGROUND color and fill color controls****** </h3>"
PRINT#A,"<h3> DEF PROCpaint(x%,y%,co$) </h3>"
PRINT#A,"<h3> DEF FNrgb(x%,y%)-gets TINT color value and returns a "+CHR$(34)+"000,000,000"+CHR$(34)+"style color result </h3>"
PRINT#A,"<h3> DEF PROCrgbret(x%,y%,RETURN r%,RETURN g%,RETURN b%) - direct RGB RETURN from TINT (efficient) </h3>"
PRINT#A,"<h3>DEF PROCcrgb(r%,g%,b%) - foreground FAST rgb color select </h3>"
PRINT#A,"<h3>DEF PROCfcolor(co$) - foreground core color control ("+CHR$(34)+"0"+CHR$(34)+"-"+CHR$(34)+"15"+CHR$(34)+" or words like 'blue' or 'light blue' </h3>"
PRINT#A,"<h3>DEF PROCbcolor(co$) - background core color control </h3>"
PRINT#A,"<h3>DEF FNstcorecol(wdnum$) - used by fcolor and bcolor to interpret color choice for core colors </h3>"
PRINT#A,"<h3>********Special Customizable Shapes*********</h3>"
PRINT#A,"<h3>DEFPROCslate(x%,y%,size%,r%,g%,b%):REM NEW shaded edged block </h3>"
PRINT#A,"<h3>DEF PROCdotrgb(x%,y%,r%,g%,b%) </h3>"
PRINT#A,"<h3>DEF PROCsbox(x%,y%,w%,h%,c$) </h3>"
PRINT#A,"<h3>DEF PROCrect(x%,y%,w%,h%) </h3>"
PRINT#A,"<h3>DEF PROCgo(cmd$,coun%) - sorta like turtle tool </h3>"
PRINT#A,"<h3>DEF PROCpixel(x%,y%,c$) </h3>"
PRINT#A,"<h3>DEF PROCset(x%,y%,c$) </h3>"
PRINT#A,"<h3>**************************RETROLIB 10 ONLY**********************************</h3>"
PRINT#A,"<h3>DEF PROCgetpic(num%,xx,yy,hh,vv) **** RETROLIB 10 BBC4W only </h3>"
PRINT#A,"<h3>DEF PROCpastepic(num%,nx,ny) **** RETROLIB 10 BBC4W only</h3>"
PRINT#A,"<h3>DEF PROCmovepic(num,nx,ny) **** RETROLIB 10 BBC4W only</h3>"
PRINT#A,"<h3>DEF PROCmask(x%,y%,h%,v%,name$) - for making masks **** RETROLIB 10 BBC4W only</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$=floc$+"\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
db$ = floc$+"\ants.html"
SYS "ShellExecute", @hwnd%, "open", db$, 0, 0, 1