Author |
Topic: Creating HTML and CSS with GOOGLE (Read 192 times) |
|
michael
New Member
member is offline
Posts: 28
|
 |
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 » |
 Logged
|
I make program generators and some utilities. Its my hobby
|
|
|
Richard Russell
Administrator
member is offline
Posts: 1348
|
|
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:
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:
Richard.
|
|
Logged
|
|
|
|
tsh73
Full Member
member is offline
Gender: 
Posts: 210
|
|
Re: Creating HTML and CSS with GOOGLE
« Reply #2 on: Nov 7th, 2017, 10:02am » |
|
Just to say,
after fixing directories, program does work.
|
|
Logged
|
|
|
|
|
