Updated syntax used to display images so they properly render in generated HTML pages

[dulude]

Relevant PRs and JIRA Tickets

• PR #148
• Ticket SPB-1732

Summary

• usual HTML code used to display images (<img= alt="Alt text goes here">) displays images in jupyter-lab just fine, but images show up as broken links in generated HTML pages.
• Solution was to replace html syntax for displaying images with markdown syntax: 
• Impacted pages:
  • AsnFile.ipynb
  • CalCOS.ipynb
  • DataDl.ipynb
  • DayNight.ipynb
  • LSF.ipynb
  • Setup.ipynb
  • ViewData.ipynb
  • calstis_2d_ccd.ipynb
  • STIS_Coronagraphy_Visualization_v2.ipynb
  • STIS_DrizzlePac_Tutorial.ipynb
  • calwf3_with_v1.0_PCTE.ipynb

---

This notebook checklist has been made available to us by the Notebooks For All team. Its purpose is to serve as a guide for both the notebook author and the technical reviewer highlighting critical aspects to consider when striving to develop an accessible and effective notebook.

The First Cell

• [ ] The title of the notebook in a first-level heading (eg. <h1> or # in markdown).
• [ ] A brief description of the notebook.
• [ ] A table of contents in an ordered list (1., 2., etc. in Markdown).
• [ ] The author(s) and affiliation(s) (if relevant).
• [ ] The date first published.
• [ ] The date last edited (if relevant).
• [ ] A link to the notebook's source(s) (if relevant).

The Rest of the Cells

• [ ] There is only one H1 (# in Markdown) used in the notebook.
• [ ] The notebook uses other heading tags in order (meaning it does not skip numbers).

Text

• [ ] All link text is descriptive. It tells users where they will be taken if they open the link.
• [ ] All acronyms are defined at least the first time they are used.
• [ ] Field-specific/specialized terms are used when needed, but not excessively.

Code

• [ ] Code sections are introduced and explained before they appear in the notebook. This can be fulfilled with a heading in a prior Markdown cell, a sentence preceding it, or a code comment in the code section.
• [ ] Code has explanatory comments (if relevant). This is most important for long sections of code.
• [ ] If the author has control over the syntax highlighting theme in the notebook, that theme has enough color contrast to be legible.
• [ ] Code and code explanations focus on one task at a time. Unless comparison is the point of the notebook, only one method for completing the task is described at a time.

Images

• [ ] All images (jpg, png, svgs) have an image description. This could be

  • [x] Alt text (an alt property)
  • [ ] Empty alt text for decorative images/images meant to be skipped (an alt attribute with no value)
  • [x] Captions
  • [ ] If no other options will work, the image is decribed in surrounding paragraphs.

• [ ] Any text present in images exists in a text form outside of the image (this can be alt text, captions, or surrounding text.)

Visualizations

• [ ] All visualizations have an image description. Review the previous section, Images, for more information on how to add it.

• [ ] Visualization descriptions include

  • [ ] The type of visualization (like bar chart, scatter plot, etc.)
  • [ ] Title
  • [ ] Axis labels and range
  • [ ] Key or legend
  • [ ] An explanation of the visualization's significance to the notebook (like the trend, an outlier in the data, what the author learned from it, etc.)

• [ ] All visualizations and their parts have enough color contrast (color contrast checker) to be legible. Remember that transparent colors have lower contrast than their opaque versions.

• [ ] All visualizations convey information with more visual cues than color coding. Use text labels, patterns, or icons alongside color to achieve this.

• [ ] All visualizations have an additional way for notebook readers to access the information. Linking to the original data, including a table of the data in the same notebook, or sonifying the plot are all options.

[review-notebook-app[bot]]

Check out this pull request on 

See visual diffs & provide feedback on Jupyter Notebooks.

---

Powered by ReviewNB

[dulude]

Hey @haticekaratay , I'm not sure why there are PEP8 and execution errors in approved notebooks. None of my changes touched any of the code cells. The PEP8 issues are pretty minimal, and I could easily fix those. However, I don't feel comfortable troubleshooting the execution errors.

[haticekaratay]

Regarding CI failures, addressing them is outside the scope of this work and will be handled by the notebook authors. Thank you for your contribution.