Applying HTML to a WordPress HTML block and comparing it with what is available in WordPress. Note: I am following along HTML/CSS Crash Course for Beginners” by Simon Sez Lesson 1, Step 6: More HTML Tags – Demo
Book List
This is a sample of free books available from Gutenberg.org
The Ranger Boys by Claude A. Labelle
Fairy Tales Far and Near by Katharine Pyle
Above was sourced from the Project Gutenberg
Here is the HTML code of the block above.
<h2>Book List</h2>
<p>This is a sample of free books available from <a href="https://www.gutenberg.org /">Gutenberg.org</a></p>
<ul>
<li><a href="https://www.gutenberg.org/ebooks/66928"><img src="/wp-content/uploads/2021/12/TheRangerBoysCover.jpg" width="75," height="100"></a> <u>The Ranger Boys</u> by <em>Claude A. Labelle</em></li>
<li><a href="https://www.gutenberg.org/ebooks/66919"><img src="/wp-content/uploads/2021/12/FairyTalesFarNearCover.jpg" width="75," height="100"></a> <u>Fairy Tales Far and Near</u> by <em>Katharine Pyle</em></li>
</ul>
<br>
Above was sourced from the <a href="https://www.gutenberg.org/">Project Gutenberg</a>So how would this be done with native WordPress blocks.
Book List
This is a sample of free books available from Gutenberg.org
The Ranger Boys by Claude A. Labelle
Fairy Tales Far and Near by Katharine Pyle
Above was sourced from the Project Gutenberg
It was amazingly simple and intuitive to do with native WordPress Blocks. The first line was a standard Heading Block. The second line was just the standard WordPress block where you start typing. The link is easily created by selecting the “link” icon after highlighting the text and then referencing the website. The unstructured list was only slightly more tricky. I typed in the text then brought the cursor back to the beginning of the text. Click on the “Down Arrow” on the guide above the block and select “Inline Image”. Next click on the “link” icon and enter the URL you want the image to refer to when it is clicked. Simple!