Author |
Topic: Creating HTML and CSS with GOOGLE (Read 199 times) |
|
michael
Full Member
member is offline
Posts: 157
|
 |
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 » |
 Logged
|
I like reinventing the wheel, but for now I will work on tools for D3D
|
|
|
Richard Russell
Administrator
member is offline
Posts: 803
|
|
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.
|
|
Logged
|
|
|
|
|
