Your question is more about web development, so topics such as HTML and CSS would seem important for you to understand. the resource w3schools.com I use myself as a good reference for this. but googling around you can find endless numbers of tutorials in these areas.
The first link shows an image
http://backwin.cabgrid.res.in:8080/tagptnpsvm/csstemplate/images/FinalHEADER.png
with the heading text baked in, i.e. to replicate this approach one would use an image creation tool. paint/GIMP/photoshop etc, they typically provide text over image tools.
It is possible to overlay text over an image.
You would set an image as the background of a div and add an h tag for the header etc.
As I said this is more a pure web-development question than a shiny one per-say.
Apart from shiny has a particular way you should place your image assets etc, in a www subfolder of your project, and you would reference the image as a relative URL assuming you were in the www folder.