Today I want to try some newly learned Markdown techniques, and I'm quite excited about it. To give you a bit of background, it all started a few days ago when @justinparke shared some banners he'd created, and I asked him about how to turn them into a clickable link. His reply was instantly helpful, and what's more, it made me realize that the piece of code I needed for this trick was simpler and more intuitive than I thought... in fact, ridiculously so.

So then I had to mention how impressed I was with his two daughters' blog @kidsisters and it occured to me that I would love to learn some of those cool tricks they employ. He seemed to like the idea too, and it didn't take very long before his daughter Srey-Yuu posted a very well detailed instruction manual on using Markdown. So now, as the good student I would like to be, I want to try using those techniques... and hopefully push my limits a bit further out.

Putting Things in the Center

Once again, I'm pleasantly surprised at how self explanatory this is: Apparently, all you need to do is add the word center in these brackets <> before whatever you want to center, and following it once again with a slash / before the word center. Apparently the slash indicates to switch off the function. As it turns out, you can center the title, an image, or an entire paragraph, like I am doing here.

Tulum 3.jpg

Hehehe, I had to look for an older picture, with fewer pixels, that didn't fill out the entire screen anyway. That's right, with these smaller pics it's essential that they are nicely centered. So I'm quite happy!

Titles and Text Sizes

Admittedly, this trick is an older one, which I had been using myself. However, instead of using the h1 through h6 (again in the same <> brackets with the slash / to indicate to stop using it) I've simply used the # signs before the title.

What I'm curious about

now

is if I can

change

the

size

of the words right in the middle of a paragraph.

It looks like I can't! Using this technique seems to be made specifically for headers, just like the # signs. Oh well. The other thing I'm noticing right now: Everything is still being centered, even though I've included the command right after I wrote I'm quite happy. Okay, now I'm noticing, how this paragraph is NOT being centered any more, even though I didn't indicate it before this paragraph. Something is not right... Oh well, let me just draw a line here and move on to something else.

Drawing a Dividing Line

Can you see this faint little line I just drew? You can't? It's there, believe me, but I have to agree with Srey-Yuu that this line is not nearly as impressive as a cool divider image, such as this one:

Putting Pictures and Text Side by Side

Tulum 2.jpg

Okay, admittedly, this was the part I was most excited about learning. Quite frankly, I've been looking at cool looking blogs with a great deal of admiration, where the pics are next to the text, or where the text wraps around a photo, in a way you see it in newspapers and magazines... and of course well designed websites. I have always considered this to be way outside my league, in the realm of graphic designers and computer programmers... Big mistake!

Tulum 6.jpg

Just because the pros use it, doesn't mean the skill can't be learned and used by amateurs like myself. But admitting this is the first step of improvement, so I am really happy for Srey-Yuu to teach me. So, it looks like I've got a good bit of blah-blah-blah written in this paragraph already. Now, let me try to insert a pic on the right side of it. (Then I'll repeat the same on the left side.)

Tulum 1.jpg

And let me use images from the same set as before. In case you were wondering, it's Tulum, an ancient Maya site, complete with pyramids, right on the Caribbean coast of Mexico. Today it's very popular among tourists who like to visit, and the iguanas, who prefer to stay once the tourists have left. It was 16 years ago when I took these pics, and as you can tell, my camera was already old at that time, hence the small resolution of the images. **Wow, this seems to have worked like a charm!** But now I'm noticing, that in this paragraph, where I've employed the pull-left and pull right technique, I can't use **bold lettering** any more! What a disappointment. :-(

Italics and Bold Lettering

Well, this may be the only Markdown techniques I have been using so far. And that's because they are so straight forward: an asterisk * before and after a piece of text puts it into italics and doing the same with two ** makes it bold. Nothing new here, except for now I'm thinking: There MUST be a way to use bold print and italics in combination with pulling pictures left or right. I wonder what it is.

Writing Two Columns Side by Side


And this is the other function I was super excited to learn how to do: A table, or as I like to see it, two columns you can use for writing bi-lingual texts, for example. Let me try it right away in German!	Und das ist die andere Funktion, über die ich mich total gefreut hab sie zu erlernen: Eine Tabelle, oder wie ich sie lieber sehe, zwei Kolumnen, die man zum Beispiel für zweisprachige Texte verwenden kann. Lass sie mich gleich mal auf Deutsch ausprobieren!

Okay, so far so good. And since German takes more space anyway (due to its lengthy words), it seems like its column is automatically wider, so that the two columns have the same length. Quite neat.

Now I'm just wondering: can I still use bold and italics in this table function? Let me try with some random words. It works!!! Okay, now I'm excited!

Clickable Links

Once again, this is something I had been using for a while: Using two sets of brackets, first these ones [] then these ones () with nothing in between. Inside the first ones you put the text or picture you want to make clickable, and inside the second ones you put the destination url. That's it! I used to make links for texts all the time, but it was @justinparke who showed me that you can use the same thing for images.

So since I want to publish this post in the Build-It Community, let me use the corresponding banner, made by @justinparke , which I saved in .png format. Here it is:

Final Analysis

Let me just recap what I've learned so far:

Centering texts and pics (Though I'm still not sure why I couldn't turn it off where I wanted to.)
Changing text size for headings (Not something I will really use; the two # signs work perfectly fine for me.)
Making dividing lines (Again, nice but I doubt I'll make much use of it. I'd rather get a set of cool looking divider images.)
Pulling pictures to the right or left wrapped around by text (now this is a very awesome feature. I just wish the bold / italics worked there too.)
Making tables of two columns side by side (Again a very neat technique. I'm sure I'll make good use of this one!)
Making clickable links for texts and images (Something I've known, just expanded upon it. Very nice.)

Next Horizon

Okay, before posting this, here is the next thing I would like to learn. I've seen Srey-Yuu use it in her instruction post, so I know she knows about it, but it was not part of the material covered: changing the size of a picture. It would be great if I could make thumbnails, or let's say a reduced size image, like the smaller pics in her "Using everything we learned" part. Specifically in my street-art posts, I would like to show people a collection of small images of previous murals I've covered, so by clicking on them they can go directly to the post featuring that mural.

A Huge Thank You!!!

As you can see, I am not done with learning (like anyone ever is), but already I am really happy to have asked for this course. I hope you have enjoyed teaching it as much as I have learning from it. So my great THANKS is going out to Srey-Yuu from @kidsisters , for taking it upon yourself to share your knowledge on Markdown with me, and also to @justinparke for supporting and encouraging our learning.

Playing Around With Markdown - Taking a Course on Formating Tricks