How to use basic web building to make information beautiful

How I used HTML to improve my blog posts on WordPress

Hello friends!

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!

Before- PLN

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.

After- PLN

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!

CRS- Before

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.Code- CRS

After- CRS

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!

Advertisements

One thought on “How to use basic web building to make information beautiful

  1. Outstanding post. Please share with others using WordPress more specifics as to the steps you followed to make these editing changes. Thank you for including the sources that have been of use in your work.

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s