Ever since I started blogging, I went from “Meet Lisa, she plays flute at NMC with me/goes to school with me/works with me/volunteers with me” to “Meet Lisa, SHE HAS A FOOD BLOG!” I never expected to be blog-savvy, but I guess after two years, I have. So I’ve prepared a week of tutorials of things I’ve picked up along the way that I think will be useful to my fellow bloggers!
Today, we start of with the basics of blogging, because we all have to start somewhere, right? (For my email subscribers, don’t worry, you won’t be getting an email every day this week, I’m turning off the campaign and you guys just get today’s email, and then a recap on Saturday haha)
Back when I was 14 years old, I learned the basics of HTML and CSS from customizing my Neopets profile. From changing the background, to making a marquee of text, I learned the absolute basic things of HTML. From there, the teenage years of Myspace popped up and I started customizing my profile there too. HTML and CSS are languages, and with my background in languages (I’m doing my MA in Translation Studies for those who didn’t know), naturally I’m a little obsessed with learning the grammar of the language.
By no means am I an expert, but I do know a thing or two.
Anatomy of HTML
HTML stands for Hyper Text Markup Language. Plain text is marked up with tagsÂ and commands placed in a specific order (aka syntax) to be displayed in a certain way.
A tag is opened and closed with brackets: <HTML>And then you close with a backslash</HTML>
Without the backslash in the closing tag, your web browser doesn’t know how to read that the tag is ending, and that means that the unclosed tag’s attributes will bleed all through the following code.
I’m not sure if this is commonly known as a best practice, but for a clean code, I do not overlap closing tags.Â Think of each tag as aÂ matryoshka nesting doll, the green code is the itty bitty baby one, the blue as the one that closes around the baby green, and the red is the outside doll.
<center><a href=”Website URL”><img src=”IMG URL”></center></a>
<center><a href=”Website URL”><img src=”IMG URL”></a></center>
Note that the blue closes before the red so that the closing tags don’t overlap.
Since blog platforms allow rich text editing (that’s the toolbar with all the different text options), I don’t necessarily need to show you the Ã¼ber basic HTMLÂ because you can just click on the bold “B” or italicized “I” or underlined “U” Â in the Â toolbar to format your text. Same goes for the strikethroughs, bullets or numbered lists, or horizontal alignment. If you don’t know what a certain button in the tool bar does, you can always hover your mouse over it to see what the symbol does. Most of them are pretty straight forward, but you can always noodle around to learn more.
However, just for reference, here are the codes for bold, italicize, underlining, and strikethrough:
- To get this: This is how to make your textÂ bold,
type “This is how to make your text <b>bold</b>”
- To get this: This is how to make your text italicized
type “This is how to make your text <i>italicized</i>”
- To get this: This is how to make your textÂ underlined
type “This is how to make your text <u>underlined</u>”
- To get this: This is how to make your textÂ
type “This is how to make your text <del>struckout</del>”
URLs and where to find them
URL stands for Uniform Resource Locator. Think of a URL as a phone number, when you type in the URL, you connect to the other end: the server at which a website is hosted. There you can talk (i.e. browse) as long as you want, the longer you talk, the more you download in terms of information. Here bandwidth can be seen as “minutes”.
However, multiple phone numbers can reach many of the same destinations. Likewise, multiple URLs can direct to the same website. For example, some websites like Facebook may buy multiple domains in case someone types in the wrong URL by accident. So if you type www.facebok.com, you get redirected the same website as www.facebook.com because all of those URLs lead to the same packet of information.
URLs can lead to webpages, images, or even media files like a movie or music file.
When you upload media to WordPress or Blogger (or whatever blog platform you use), you upload your media to their server, so that they save that packet of information to create a URL for it connected to their server. If you don’t know where to find the URL, you can go to where you uploaded in WordPress, where there is usually a URL for you to copy and paste, OR you can right click the image and copy the link.
NOTE: If you’re collecting a bunch of images of people’s blog posts to share on your blog (say for a round-up post), DO NOT HOTLINK! Hotlinking is when you take the URL of the image that’s hosted on another server, and then post it on your own. This means that you’re stealing bandwidth from that server anytime that image is loaded onto your site. To prevent from hotlinking, download the image (with the owner’s permission and/or with proper crediting to the source), upload it to your own server, and use the URL that you have that’s based on your server.
This also prevents that image from being changed (like phone numbers can direct from one person’s phone to another) or deleted, showing up as a broken or wrong image on your website.
When a certain text is clickable and leads to another website or popup, it’s called a hyperlink. This is another tool often found in toolbars, but sometimes when you’re altering side bars and other widgets, it’s good to know.
Hyperlinks are marked with an <a> tag. For example, to create this hyperlink to my stovetop popcorn post, I have to write the following:
I would write <a title=”Stovetop Popcorn” href=”http://thevietvegan.com/2013/12/26/stovetop-popcorn/”><b>this</b></a>.
What’s highlighted in blue is the hyperlink tag, the green is the text that shows up when you hover over the link, the red is the hyperlink reference (the website that opens up when you click on “this”)
So that wraps up the bare basics of HTML. Everything I’ve learned is from Googling “How do I *insert problem here* in HTML” and by trial and error on my blog.
Be sure to check out my fellow OnlineBlogCon friend, Chi Wei from 1dogwoof because she has an awesome HTML basics post as well! And be sure to check back every day this week for other tutorials I’ve done! (Hint, one is a tutorial for a visual blog index and another is about Mac shortcuts that will make your blogging life so much easier!!)
To see other Blog Design tutorials, check these out below: (Will update as the week goes by)
[cgview name=blog-design num=20 orderby=title order=asc size=150×150 quality=100 lightbox=0]