LB Booster
Programming >> BASIC code examples >> Creating HTML and CSS with GOOGLE
http://lbb.conforums.com/index.cgi?board=code&action=display&num=1509945905
Creating HTML and CSS with GOOGLE
Post by michael on Nov 6th, 2017, 04:25am

Here is a sample program that builds the HTML and CSS files and displays it with GOOGLE CHROME (HTML 5)

* You may need to change the directory for the 2 save files to make this work.



Code:
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" ''<<<<<<<<<<<<<  If you dont have D:\ directory rename to a writable location
open file$ for output as #1
' VVVVVVVVVVVVVVVVVV PUT YOUR HTML5 CODE DOWN HERE VVVVVV
#1 "<!DOCTYPE html>"
#1 "<html lang="+chr$(34)+"en"+chr$(34)+">"
#1 "<head>"
#1 "<meta charset="+chr$(34)+"UTF-8"+chr$(34)+">" ' <<< Keep this section and up for your default template ( it shouldn't need to be changed )
#1 "<title>Story</title>"  '  <<<<<<<<<<<<<<<<< This is the title that will show on the browser section.  
#1 "<link rel="+chr$(34)+"stylesheet"+chr$(34)+" type="+chr$(34)+"text/css"+chr$(34)+" href="+chr$(34)+"style2.css"+chr$(34)+">"
#1 "</head>"
#1 "<body>"
#1 "<header class="+chr$(34)+"banner"+chr$(34)+">"
#1 "<h1>THE STORY OF ANTS</h1>" ' <<<This is the actual title that shows on the web display
#1 "<p> Chapter One --- Page 1</p>"
#1 "</header>"
#1 "<main>"
#1 "<section>"
#1 "<h2>The Solution</h2>" ' <<<<<<<<<<< another sub title. 
#1 "<article>"
#1 "<header>"
' *******************************Your story is bellow this line
' ***  The text sizes are <h1> to <h6>  : This is how I did it :
#1 "<h3>You are digging around for ants.</h3>" 
#1 "<h3>Suddenly the ants start to make strange noises.</h3>"
'******************************** Your story ends
#1 "<nav>" '  ***********************This section is for your interactive link to the next page in your book
#1 "<ul>"
#1 "<li><a href="+chr$(34)+"Page2.html"+chr$(34)+">"+"Next Page</a></li>"
#1 "</ul>"
#1 "</nav>" ' ***********This is the end of your interactive link 
#1 "</header>"
#1 "</article>"
#1 "</main>"
#1 "</body>"
#1 "</html>"
'^^^^^^^^^^^^^^^^^^^^^^^^HTML5 CODE ENDS HERE
close #1
Open "E:\style2.css" for output as #1 '<<<<<<<<CHANGE THE DIRECTORY IF YOU DONT HAVE D:\
'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV PUT YOUR CSS BELLOW THIS LINE VVVVVVVVVVVV
#1 "@charset "+chr$(34)+"UTF-8"+chr$(34)+";"

#1 "article, header, main, nav, section {"
#1 " display: block;"
#1 "}"
#1 "html, body, h1, h2, h3, ul, li, a, p,"
#1 "article, aside, footer, header, main, nav, section {"
#1 " padding: 0;"
#1 "  margin: 0;"
#1 "}"
#1 ".banner {" '***********************define banner
#1 " background-color: rgb(185,165,110);"
#1 "color: white;"
#1 " padding: 10px 20px;"
#1 "}" ' *****************************banner def end
#1 "body {" '*********************** Define body section layout
#1 "width: 960px;"' <<<<make the body 960 pixels wide
#1 "margin-left: auto;"'  << this centers the page
#1 "margin-right: auto;"'<< this centers the page
#1 "background-color: rgb(125,155,180);" ' <<< color
#1 "font-family: Helvetica, Arial, sans-serif;"
#1 "font-size: 15px;"
#1 "}"'****************************body layout ends
#1 "nav {"' ****************** define link layout
#1 "background-color: #330066;"
#1 "padding: 5px;"
#1 "margin-top: 1px;"
#1 "}"'********************** link layout ends
#1 "li a {"'******************* define text color for link
#1 "color: rgb(255,255,255);"
#1 "}"' ********************* text color define ends
#1 "li {"'****Define the location of the link, font, ect
#1 "display: inline;"
#1 "margin-left: 15px;"
#1 "margin-right: 15px;"
#1 "font-size: 20px;"
#1 "font-variant: small-caps;"
#1 "font-weight: bold;"
#1 "}"' **** Link location, font def, ends here
#1 "section {"' ******define section background, spacing 
#1 "background-color: #bbbbbb;"
#1 "margin-top: 10px;"
#1 "padding: 5px;"
#1 "}"' ****define section background, spacing ends here
#1 "article {"'*** Define article background, spacing ect
#1 "background-color: white;"
#1 "margin-top: 5px;"
#1 "padding: 10px 15px;"
#1 "}"'***** define article bkground, spacing ends here
#1 "main {"' **** define the MAIN width and layout **** 
#1 "width: 960px;"
#1 "float: left;"
#1 "margin-bottom: 10px;"
#1 "}"' ********define  Main ends
'^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CSS CODE ENDS HERE ^^^^^^^^^^^
close #1
navigator$ ="C:\Program Files (x86)\google\chrome\application\chrome.exe"
db$ = navigator$+" "+"E:\ants.html" '<<<<<<<<<<<<<  If you dont have D:\ directory rename to a writable location
run db$  
end
Re: Creating HTML and CSS with GOOGLE
Post by Richard Russell on Nov 6th, 2017, 06:55am

on Nov 6th, 2017, 04:25am, michael wrote:
You may need to change the directory for the 2 save files to make this work.

It's poor practice to require this. Far better to save the files somewhere that you know will exist on every PC, such as the user's temporary directory. You could use the GetTempPath API or, since this is an LBB forum, get it using some BBC BASIC code:

Code:
    !TempPath$ = @tmp$

Quote:
Code:
    navigator$ = "C:\Program Files (x86)\google\chrome\application\chrome.exe"

Again, rather than specifying a fixed path to a specific application (which may not exist) it would be better to open the file in the user's preferred browser. You could use the ShellExecute API or, more simply, get explorer to do the heavy lifting:

Code:
    navigator$ = "explorer"

Richard.

Re: Creating HTML and CSS with GOOGLE
Post by tsh73 on Nov 7th, 2017, 10:02am

Just to say,
after fixing directories, program does work.