How I used HTML to improve my blog posts on WordPress
Thank you for checking on my site. Today I want to share a couple examples of my recent experiments with my blogs. We’ve been learning about basic HTML coding for web writing and my assignment is to use code-writing to adjust some of my web content.
Luckily, I’ve been revising my blogs this entire time.
Unfortunately, I hadn’t been documenting the changes.
Fortunately, WordPress is prepared to help someone as indecisive as myself, and there are ways to see every single edit and version made since creation of a blog post.
I want to show you a couple examples of the changes I made to two of my blogs. I added a header, added typeface color, floated a media image, added a margin to that image, and adjusted the dimensions of a photo to correct the stretched faces. Take a look!
First Draft- Awkward image/text positioning with crowding
The first version shows the PLN media image first thing in the post. Immediately, without a space, the text begins at the bottom of the image.
What you cannot see from the picture, is that the photo is not linked to the media file, so if a reader clicked on the image, a small image of the PLN (The same size displayed) is the largest viewable option.
Current Version After Code-Edits: margin, border and padding, also float next to text
I changed the blog post a couple days after a lecture from Professor Joe Moses taught my class how to code a couple tricks with images.
Professor Moses taught us the difference between padding and margins and how to float an image next to the text. He also showed how to add color. I got a little help to code this revision from a great resource: www.w3schools.com.
The best part about this website is that there are embedded sample boxes that you can practice and view the changes as you change the code.
My next example is for my visual analysis for CRS. For this, the changes may be subtle to some. This was actually my first attempt to change the font color, and I changed it simply by coding the word “maroon”, eerily intuitive!
Before width/height correction, before header established
I also noticed I hadn’t made this vital information searchable via search engines because it was not being recognized as a header. I changed it to h1, and I was able to go through the rest of the blog to format the other headings to the “strong” formatting previously assigned to the now header.
How the code changed from version to version.
Current Version- Adjusted Header/Photo
During class, Professor Moses cringed at the sight of my distorted photographs. He advised me to forgo the lecture on floating and fix the dimensions. It was actually kind of funny he was so disturbed by something I made a conscious choice to overlook.
As soon as I had some spare time, I fixed the dimensions by guess and check, comparing my distorted images to the BuzzFeed website where I retrieved them.
I hope my story inspires you to take a little extra time and make your information more beautiful!