LB Booster
« Creating HTML and CSS with GOOGLE »

Welcome Guest. Please Login or Register.
Nov 24th, 2017, 7:29pm


Speed up Liberty BASIC programs by up to ten times!
Compile Liberty BASIC programs to compact, standalone executables!
Overcome many of Liberty BASIC's bugs and limitations!
LB Booster Resources
LB Booster documentation
LB Booster Home Page
LB Booster technical Wiki
Just BASIC forum
LB Umbrella forum
Liberty BASIC forum (the original)

« Previous Topic | Next Topic »
Pages: 1  Notify Send Topic Print
 thread  Author  Topic: Creating HTML and CSS with GOOGLE  (Read 91 times)
michael
New Member
Image


member is offline

Avatar




PM


Posts: 28
xx Creating HTML and CSS with GOOGLE
« Thread started 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

  
« Last Edit: Nov 6th, 2017, 04:27am by michael » User IP Logged

I make program generators and some utilities. Its my hobby
Richard Russell
Administrator
ImageImageImageImageImage


member is offline

Avatar




Homepage PM


Posts: 1279
xx Re: Creating HTML and CSS with GOOGLE
« Reply #1 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.

User IP Logged

tsh73
Full Member
ImageImageImage


member is offline

Avatar




PM

Gender: Male
Posts: 199
xx Re: Creating HTML and CSS with GOOGLE
« Reply #2 on: Nov 7th, 2017, 10:02am »

Just to say,
after fixing directories, program does work.
User IP Logged

Pages: 1  Notify Send Topic Print
« Previous Topic | Next Topic »

Donate $6.99 for 50,000 Ad-Free Pageviews!


This forum powered for FREE by Conforums ©
Sign up for your own Free Message Board today!
Terms of Service | Privacy Policy | Conforums Support | Parental Controls