Media Log Template
A simple HTML template for keeping a yearly media log
For the past couple of years, I've kept a list of all the media I take in over the course of a year. Here you can grab the HTML template I use for your own purposes.
Customizing the Media Type Key
At the top of the template is a key that describes the type of media and the corresponding symbols for each item. You can adjust this depending on which types of media you want to track. The template starts with:
- Book (B)
- Film (F)
- Short Film (SF)
- Television series (T)
- Podcast series (P)
- Screenplay (S)
- Comic book/graphic novel (C)
- Theater performance (TH)
- Music performance (M)
The key also includes a special character to indicate a reread, rewatch or relisten: [R]
Working with the HTML Structure
The HTML template contains three nested lists. The outer list contains each month in the log (provided: January through December). The second-level list contains each day in the month (provided: the first day of each month). The third-level list contains log items for its day (provided: an example of a film log item).
- To add more days in each month, replicate the list that begins with the comment
<!-- Day List -->and change the day number accordingly.
- To add more items in each day, replicate the list item with the comment
<!-- Log Item -->and change the title/type accordingly.
If you are new to HTML, take a look at the Mozilla Developer Network's guide to HTML unordered lists.
I've built in classes you can use to style each list and list item to match your own website:
log= the outer
lithat contains each month title
lithat contains each day number
lithat contains the media item's title and type
If you are new to styling HTML, take a look at the Mozilla Developer Network's guide to CSS.
You can see the media log template in action at any of the logs linked at jenmyers.net/log/. And if you have any questions, reach out at firstname.lastname@example.org.
Other media logs: