BBC BASIC
« Creating HTML and CSS with GOOGLE »

Welcome Guest. Please Login or Register.
Jan 23rd, 2018, 7:09pm


Cross-platform BBC BASIC (Win32, Linux x86, Android, Mac OS-X, Raspberry Pi)

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


member is offline

Avatar




PM


Posts: 141
xx Creating HTML and CSS with GOOGLE
« Thread started on: Nov 6th, 2017, 05:06am »

As there was no subject of this sort on the wiki, I thought I might convert some old code I made to BBC Basic. (I had to do a lot of learning and work to make the HTML/ CSS)


Also this can be used to view the Web pages if you copy them to a HTML file using the wiki example.

ISNT THIS FUN?
DIRECT WEB PAGE BROWSE from within a BBC Basic program:
Here is a small snippet to search for a web page and display it:
Code:
      explore$ ="C:\Program Files (x86)\google\chrome\application\chrome.exe"
      db$ = explore$+" "+"http://bb4w.conforums.com"
      OSCLI "RUN " + db$
 


(I also made this style of program for playing Videos and music with HTML and CSS (he he he ))

**** "You may have to change the writing directory for the 2 save files and where google will look" ****

HERE IS THE HTML AND CSS generation and display program:

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" :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$
 
« Last Edit: Nov 6th, 2017, 05:37am by michael » User IP Logged

I like reinventing the wheel, but for now I will work on tools for D3D
Richard Russell
Administrator
ImageImageImageImageImage


member is offline

Avatar




Homepage PM


Posts: 692
xx Re: Creating HTML and CSS with GOOGLE
« Reply #1 on: Nov 6th, 2017, 07:09am »

on Nov 6th, 2017, 05:06am, michael wrote:
As there was no subject of this sort on the wiki, I thought I might convert some old code I made to BBC Basic.

Please see my reply to your similar post at the LBB forum. The same comments apply to the BBC BASIC version: it would be far better not to assume that specific paths or applications exist on the user's PC. That approach could never work in a 'distributed' application.

When you have a general-purpose programming language at your disposal, like Liberty BASIC or BBC BASIC, use that to work out where to save temporary files (trivial in BB4W or BBCSDL) and to open the HTML file in the user's default browser.

Another approach would be to create your own HTML window, giving you complete control over its size and position for example. That is described at the Wiki here.

Richard.
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