Liberty BASIC Community Forum
« HTML5 (CHROME)Cool Story Template Generator »

Welcome Guest. Please Login or Register.
Feb 24th, 2018, 12:14am

Rules|Home|Help|Search|Recent Posts|Notification

« Previous Topic | Next Topic »
Pages: 1  Notify Send Topic Print
 thread  Author  Topic: HTML5 (CHROME)Cool Story Template Generator  (Read 572 times)
xx HTML5 (CHROME)Cool Story Template Generator
« Thread started on: May 31st, 2015, 02:15am »

You will see the advantages of using Liberty basic to construct a HTML / CSS generator: You could not do what I am doing in regular text editors with the notes, and the all in one abilities that LB gives!!

If you look carefully you will notice RGB commands.. I used RGB COLOR PICKER program located in forums in OPEN SOURCE to create the background colors and it will be the default way I do it later.
**** I added notes to help you understand how HTML5 and CSS interact

Once you take out the extra stuff in this program its not much more work than if you did it on a text editor.. especially since you will notice I did the HTML and CSS in the same program and I am able to execute it.
If you keep the main sections, it becomes an excellent tool to practice HTML5, CSS and Liberty Basic. I prefer using Liberty basic just because of how I can structure it all in one editor.
Later on you will see the true power of what I will add later concerning images created inside LB in a web page!!!
On my next example I will eliminate the need for you to modify the code path. I will make it prompt you for the drive you want it in.
It will auto run.. This is cool stuff !
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$="D:\ants.html" ''<<<<<<<<<<<<<  If you dont have D:\ directory rename to a writable location
open file$ for output as #1
#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 "D:\style2.css" for output as #1 '<<<<<<<<CHANGE THE DIRECTORY IF YOU DONT HAVE D:\
#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$+" "+"D:\ants.html" '<<<<<<<<<<<<<  If you dont have D:\ directory rename to a writable location
run db$  ' to actually launch this ( enable this line to see what it does

« Last Edit: Jun 1st, 2015, 08:28am by michael » User IP Logged

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

Rules|Home|Help|Search|Recent Posts|Notification

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