HTML-generating Shell Scripts

Home > RefInfo menu > Computer topics menu >

a Handy Commands and Scripts Menu page >

This page of HTML Generating scripts
with 2 small Javascript & CSS files

! Note !
Script-code or text or web-links may be added
(or changed) --- if/when I re-visit this page.

These scripts generate HTML that use 'table' elements
to format these pages. A 'modern' technique would be
to use 'div' elements --- but there are advantages
to using the used-everywhere 'table' elements.

Go to the Table of Contents, below.
(Skip the following Introduction.)

INTRODUCTION : This is a page of Linux/Unix shell scripts (their code) which can be used to generate HTML pages for a given set of selected files in a directory. These HTML-generating scripts are meant to be used in directories that contain image files ('.jpg', '.png', '.gif' --- including animated GIFs) media files (video, audio - especially '.mp4', '.webm', '.mp3') Corresponding to these two categories, there are 2 shell-scripts below. The image-files-script uses <img src=...> 'img' HTML statements to show the image files. Most web browsers (even old ones released before 2010) will display JPEG and PNG and GIF files (that are named in the 'src' parameter of an 'img' statement) at the location of their 'img' statements within the web page. The media-files-script uses <a href=...> 'anchor' HTML statements to provide links to the video/audio files. Most modern web browsers (released since about 2018) will automatically 'play' a video file (that is named in the 'href' parameter of an 'anchor' statement) using a built-in video player, if the video file is a '.mp4' or '.webm' file. If your web browser cannot 'natively' play a video or audio file of a certain format, you may be able to set up a 'helper application' in the web browser to play that type of media file. By means of a small Javascript file and a small CSS file, these HTML pages are meant to be 'rendered' well on either personal computer (desktop, laptop) web browsers or cellphone/tablet web browsers --- in other words, in the web browser window whether the window orientation (aspect-ratio) is 'landscape' or 'portrait'. There is a table of contents below that you can use to go to the 2 shell-scripts --- and the small CSS file --- and the small Javascript file. OR --- or simply scroll down the page. How to save-and-prepare these scripts : To begin with you need to put the shell-script code in a file. You can open a text editor, highlight the code in one of the shell-scripts displayed in this web page, then copy and paste the text into the text editor. Then Save-As the code into a directory where you have the target files (image files or media files). OR ... you can save the script file in your home directory or the /tmp directory, and then move it to the directory of target files (image files or video/audio files). Remember to make the script files 'executable', by using a command like 'chmod' or use your GUI file manager. For example in the old Gnome2-Nautilus file manager --- or in the MATE-Caja file manager, you can right click on the script file and choose 'Properties'. In the 'Properties' window that pops up, choose the 'Permissions' tab, and make sure the 'Allow executing file as program' checkbox is checked. You could also open a terminal window positioned in the directory of target files, where the script file now lies. You can use the 'chmod 755' or 'chmod o+x' command on the script file to make it executable. The CSS and Javascript : Similarly you can save the small amount of CSS code into a file and the small amount of Javascript code into a file, as follows. If you have multiple directories of image files and/or media files, you will find it advantageous to put the small CSS file in a directory, with a name like 'cssFiles', located 'above' the directories of image files and/or media files. Similarly you will find it advantageous to put the small Javascript file in a directory, with a name like 'jsFiles', located 'above' the directories of image files and/or media files. Then, if you generate multiple HTML files in the various directories of image files and/or media files, you can simply have the HTML files all use the same pair of CSS & Javascript files. How to run these scripts : You can run one of the HTML-generating scripts, after changing the permission on the (script) file to make it executable. The run can be done with a file-manager GUI or from the command-line in a terminal-window. For example, in the Gnome2-Nautilus or MATE-Caja file manager, you can right click on the script file and choose 'Open' from the popup menu. In the window that opens, choose 'Run in terminal'. OR ... at the command-line in a terminal-window, positioned in the directory where the script resides, you can run the script by typing a dot, a slash, and pasting the name of the script following the slash. Press Enter to execute the script. Edit & Browser-Display of the HTML built by the scripts : The scripts are written to generate the HTML file in the current directory (the directory containing the target files). After the HTML file is generated --- usually as a file named '00_RENAME_ME.htm' --- the user can use their favorite editor to edit the '00_RENAME_ME.htm' file. I use the 'scite' text editor. Other choices include the 'pluma' editor of the MATE desktop system or the 'gedit' editor of the GNOME desktop system. Besides bringing up the HTML code in a text editor, it helps to display ('render') the code in a web browser. I use the 'Seamonkey' web browser on Linux. Another common choice on Linux would be the 'Firefox' web browser. NOTE: Script code to 'automatically' start up a text-editor and a web-browser is at the bottom of these scripts. But you may wish to comment or remove that code and simply start up the text-editor and web-browser 'manually'. You can start editing some parts of the HTML code --- for example, to enter text in a 'Introduction' section near the top of the HTML code. You will also want to provide 'title' text for the web page. To see the changes in the web browser window, you can click on the 'Reload' button of the web browser. After editing the '00_RENAME_ME.htm' file to get it into the shape you want, you may wish to exit the editor and rename the '00_RENAME_ME.htm' file. A Table-of-Contents follows --- by which you can quickly go to a code file below.

Table of Contents: (links to sections below on this page) < Go to Top of Page, above. > Scripts for showing image files or video/audio files : the IMAGES shell-script below the MEDIA (video/audio) shell-script below CSS file referenced by the script files above : the CSS file below Javascript file referenced by the script files above : the Javascript file below End of Table of Contents. See the script notes below.

How the code samples (below) are presented : Each of these HTML-generating script code samples is presented in this page as an HTML embedded plain-text 'object' so that you can scroll the text, vertically or horizontally. You can highlight the code with your mouse to copy-and-paste the code into a text editor window. Notes on the CONTENT of the code samples (below) : Generally, in these shell scripts, I use double-# (##) to indicate a true comment. That is, it is not an executable script statement and should never be de-commented. I use single-# (#) to indicate an executable statement that has been commented. Typically this is because I might want to decomment the statement when doing testing of the script in a terminal window. Generally, the statement should be re-commented --- or a neighboring statement should be commented --- when finished testing. In essentially all of the scripts, you can scan the comments at the top of the scripts to see a description of their purpose --- and info on how they are to be used. I do not try to make one-liner scripts, nor do I try for the ultimate in processing efficiency. (But I am aware of several things to avoid that would make scripts run slow as molasses.) Rather, I try to make the scripts readable (to me). At the same time, they execute quite rapidly, even on a directory containing over a hundred files. These scripts can be MAJOR time savers. In these HTML-generating shell script samples, you may see that I am using the 'ls' command, together with a 'grep' for a particular file suffix, to 'pick up' the list of selected file names. You will find that these code samples are NOT the 'be all and end all'. You (and I) will probably have to edit them somewhat to handle particular issues --- such as text formatting issues that were not considered when these scripts were written. Shell considerations : Most of these samples are intended to run with the Bourne or the Korn shells (command interpreters), as well as with the Bash command interpreter (and the Dash command interpreter which is an efficient form of the Bash command interpreter). Most of these samples employ Linux/Unix commands (and their parameters) available to all these interpreters, so the scripts will generally run in any of these interpreters. In fact, the Korn and Bash interpreters are offshoots of the Bourne command interpreter. Target-File Name Considerations: I have used these scripts, for the most part, on directories of files with no spaces (blanks) in the filenames. The scripts should work on files with spaces in the filenames, BUT ... this brings up the fact that the scripts may not work in every shell-scripting environment. So if the scripts fail to produce the output HTML file, you may find that you have to edit the script to make a minor modification --- or a few. File-Safety : The scripts are generally quite safe to use --- even without any preliminary changes to them. They do not change any of the files in the directory of 'target files'. The scripts simply generate a new HTML file in the directory. Examine the code, to erase doubt. Test-and-Edit the scripts : The HTML-generating code is presented here mostly for my own personal use --- as a reference (for example, from different computers, at home or away) and as a means of organized archival and backup. I may use portions of the scripts as 'tested code fragments' to be used within other HTML-generating scripts. If other people use these scripts, they should test them on test data before using in a 'production' mode. They/you may find you want to change the scripts somewhat before using them in your particular application --- especially if the scripts are to be used in many different directories of image files and/or video/audio files.

Start of Display of the Code of the Scripts :

FILE : 00_GEN_imgsDownHTMLpage_ jpggifpngFiles.sh.txt : < Go to Table of Contents, above. > Script to generate HTML to display IMAGE files : FILE : 00_GEN_ahrefTagsDownHTMLpage_ forVideoAudioFiles.sh.txt : < Go to Table of Contents, above. > Script to generate HTML with links to VIDEO/AUDIO files : FILE : CSS file: set_element_styles.css.txt : < Go to Table of Contents, above. > CSS file : (referenced by scripts above) FILE : JS file: setBodyFontSize_ accordingToDeviceScreenProps.js.txt: < Go to Table of Contents, above. > JS file : (referenced by scripts above)

Bottom of this HTML-generating Scripts --- Code Samples page --- with small CSS & Javascript helper files. To return to a previously visited web page location, click on the Back button of your web browser, a sufficient number of times. OR, use the History-list option of your web browser. OR ... < Go to start of Script Code display, above. > < Go to start of Table of Contents, above. > < Go to Top of Page, above. > Page history: Page was created 2021 Jun 18.