Bitty HTTP

Development » CSS


This example will show handling sending of different files. It adds a CSS file and a quit page to exit the program we started with Hello World.



We update the file server file to have 3 functions that get called when a page is requested.

void File_Root(struct WebServer *Web); void File_SomeStyle(struct WebServer *Web); void File_Quit(struct WebServer *Web); struct FileInfo m_Files[]= { /* Filename, Dynamic, Cookies, Gets, Posts, Callback */ {"/",false,NULL,NULL,NULL,File_Root}, {"/SomeStyle.css",false,NULL,NULL,NULL,File_SomeStyle}, {"/quit.html",true,NULL,NULL,NULL,File_Quit}, };

The File_Root() function is called when the root page ("/" or when the URL doesn't include a filename). This will output a <link> tag that will include the "SomeStyle.css" file. It will also have a link to the "quit.html" file.

The first entry is the URL path of the file name. This will be the filename part after the host name ( for example). This will always include the forward slash.

Next we have if the file is dynamic or not. If it is dynamic then the callback will ALWAYS be called. If it is static (not dynamic) then the callback may or may not be called depending on if the web browser has a good copy or not.

We mark the "/" and "/SomeStyle.css" pages as being static. The content does not change so the browser can cache it.

The "/quit.html" is marked as dynamic even though the content is static. This is because we need to have the callback called every time so we can exit the program.

Next we have 3 NULL's because we do not have any cookies, GET, or POST vars on these pages.

Last we have the function pointer to call to sent the contents of the page.

const char RootHTML[]= "<!DOCTYPE html>" "<html>" "<head>" "<title>Web Server Example - Root</title>" "<link rel='stylesheet' href='/SomeStyle.css'>" "</head>" "<body>" "<div id='top'>Web Server Example - Root</div>" "<div id='quitbttn'><a href='/quit.html'>QUIT</a></div>" "<div id='content'>" "Hello World with some style! " "</div>" "<div id='bottom'></div>" "</body>" "</html>"; void File_Root(struct WebServer *Web) { WS_WriteWhole(Web,RootHTML,sizeof(RootHTML)-1); }

The File_Root() function has been changed to have a bit more complex html. The html includes a css link to "/SomeStyle.css" and a html link to the "/quit.html" file.

NOTE that if you running this after running a different example you will need to force a cache ignore (SHIFT+F5) or change the DOCVER define in Options.h.

const char QuitHTML[]= "<!DOCTYPE html>" "<html>" "<head>" "<title>Web Server Example - Quit</title>" "<link rel='stylesheet' href='/SomeStyle.css'>" "</head>" "<body>" "<div id='top'>Web Server Example</div>" "<div id='content'>" "<br/>" "Bye bye<br/>" "<br/>" "<a href='/'>HOME</a>" "<br/>" "</div>" "<div id='bottom'></div>" "</body>" "</html>"; void File_Quit(struct WebServer *Web) { WS_WriteWhole(Web,QuitHTML,sizeof(QuitHTML)-1); g_Quit=true; }

We add a new function for quiting the program with the File_Quit() function. It sends the quit html and then sets a global var to "true" to quit.

const char CSS[]= "div#top" "{" "height:50px;" "width:100%;" "background-color:#679509;" "font-size:1.5em;" "line-height:50px;" "padding-left:15px;" "color:white;" "text-shadow:#4F4F4F 2px 2px;" "} " "div#quitbttn" "{" "position:absolute;" "top:23px;" "right:30px;" "} " "div#quitbttn a" "{" "color:white;" "text-decoration:none" "} " "div#quitbttn a:hover" "{" "text-decoration:underline" "} " "div#bottom" "{" "position:absolute;" "bottom:0px;" "left:0px;" "height:50px;" "width:100%;" "background-color:#679509;" "} " "div#content" "{" "background-color:#f0f0f0;" "color:#6A6A6A;" "} "; void File_SomeStyle(struct WebServer *Web) { WS_WriteWhole(Web,CSS,sizeof(CSS)-1); }

Finally we the "/SomeStyle.css" file with static CSS in it.