What if an HTML page requires CSS and JavaScript files? Where do we place them?
Create views\helloagain.html with the following code:
Copy <! DOCTYPE html >
< html >
< head >
< title >My webpage!</ title >
< link rel = "stylesheet" href = "css/helloagain.css" />
< script async src = "js/helloagain.js" ></ script >
</ head >
< body >
< h1 >Hello, World!</ h1 >
< h4 id = 'date' ></ h4 >
< div class = "image-section" >
< div class = "section-style" >
< img src = "https://source.unsplash.com/random/400x200" alt = "" />
< p >A random image courtesy of unsplash.com.</ p >
</ div >
< div class = "section-style" >
< img src = "https://source.unsplash.com/random/400x200" alt = "" />
< p >A random image courtesy of unsplash.com.</ p >
</ div >
</ div >
< divclass="image-section" >
< divclass="section-style" >
< img src = "https://source.unsplash.com/random/400x200" alt = "" />
< p >A random image courtesy of unsplash.com.</ p >
</ div >
< div class = "section-style" >
< img src = "https://source.unsplash.com/random/400x200" alt = "" />
< p >A random image courtesy of unsplash.com.</ p >
</ div >
</ div >
</ body >
</ html >
Actually, I got this from the wild wild web courtesy of Programming Liftoff
(https://dev.to/programliftoff/create-a-basic-webpage-with-css-and-javascript--104i )
Create a css\ folder inside the public\ folder (you can right-click on it)
Then create the public\css\helloagain.css stylesheet file (also from Programming Liftoff) inside that new folder.
Copy body
{
text-align : center ;
background-color : #f0e8c5 ;
}
div
{
margin-top : 15 px ;
}
.image-section
{
display : flex ;
justify-content : center ;
}
.section-style
{
margin-right : 25 px ;
margin-left : 25 px ;
background-color : white ;
}
Next, create the public\js folder.
Then create the public\js\helloagain.js with the following contents (also from Programming Liftoff)
Copy document .getElementById ( 'date' ).innerHTML = new Date () .toDateString ();
Then edit source\app.d to use a router
Copy import vibe.vibe;
void main ()
{
auto settings = new HTTPServerSettings;
settings.port = 8080 ;
settings.bindAddresses = [ "::1" , "127.0.0.1" ];
auto router = new URLRouter;
router.get ( "/" , staticTemplate ! "helloagain.html" );
router.get ( "*" , serveStaticFiles ( "public/" ));
auto listener = listenHTTP (settings , router);
scope (exit) listener.stopListening ();
runApplication ();
}
The line
Copy router.get ( "/" , staticTemplate ! "helloagain.html" );
means display helloagain.html when the URL simply shows “/”. This means the helloagain.html is the index page or home page. The “/” URL expands to
http://localhost:8080/
which is the root of the application.
The line
Copy router.get ( "*" , serveStaticFiles ( "public/" ));
means for all other files not indicated by any route, treat them as static files and look for them inside the public/ folder.
We indicated in the helloagain.html page that the stylesheet and the javascript files are in /public/css/ and /public/js/ but without mentioning the public/ folder:
Copy < link rel = "stylesheet" href = "css/helloagain.css" />
< script async src = "js/helloagain.js" ></ script >
We do not mention the public/ folder in the path.
After refreshing the browser, something similar is what you will see:
The images you see will most likely be different as they are randomly selected every time you refresh the page, so try to refresh the page a few times to see a different set of pictures.
Last updated 12 months ago