Learn HTML Part 2
Are we feeling good about our HTML knowledge? Last week in Learn HTML Part 1 we covered the tags & formatting. This week we continue with formatting, more specifically hierarchy.
Header Tags
Headers usage is good blogging practice, these help with SEO keywords (always good practice to use your keywords in a header tag) and it also helps for structure purposes and people that don’t view web pages in usual manner, vision impaired etc.
<h1>This is h1 text.</h1>
<h2>This is h2 text.</h2>
<h3>This is h3 text.</h3>
<h4>This is h4 text.</h4>
<h5>This is h5 text.</h5>
<h6>This is h6 text.</h6>
You would use your main header as an H1 and sub headers in subsequent order, the H6 being the smallest header.
Basic Tags & Attributes
The biggest problem I’ve found in my post editors is the line spacing issues. This can drive me up a wall, especially when I lose my paragraphs completely and I have to search and find the sentence that starts a new paragraph 100 times. Interviews can be the worst!
A web browser interprets line-spacing a few ways, the major one being the paragraph tag:
<p>This is a paragraph.</p>
But say you just want a line break? You would use one of the few tags that is a stand-alone:
<br />
See that tag above? It has the close within the tag, you will find this in a few tags and it can play havoc with your Blogger post – because you’ll get an error message if you don’t have that closer /.
Another tag that has that closer within the tag is the Horizontal Rule tag. It adds a line in your post. It is used usually as a separator.
<hr />
Another stand alone tag is the Image tag, which is also one of your basic tags:
<img src=”image.jpg”/>
With this tag we are introducing some more advanced features, that are called attributes. All HTML tags can have attributes. An attribute will provide additional information about the tag. Attributes are ALWAYS shown in the start tag (never the end tag) and they always come in pairs, called a name/value pair:
name=”value”
The value is always put within quotes – “value”, but a funny thing to remember when using a platform like Blogger – it will change all your “value” to ‘value’ but you can still enter it in your template as “value”. Just something to remember when searching for a code string that you might have inputted.
Let’s take a look at that image code string again:
<img src=”image.jpg”/>
Your tag is <img />
Your attribute is src=”image.jpg”
Source = src
This is telling the browser where to find your image. Most bloggers will use what we call are “hard coded” image, meaning it is hosted somewhere and you give the full link, like this:
<img src=”http://yoururl.com/image.jpg” />
HTML Links
<a href=”http://www.prajunkee.com”>This is a link</a>
Once again an attribute appears.
Your Link tag is <a> link </a>
The attribute is href=”URL”
In the attribute area you would insert the URL of the page you would like your text to link to. In the area between tags, where it says This is a link, you would insert the text you would like to link.
You can wrap a link tag around an image also, bringing together two tag strings:
<a href=”http://www.prajunkee.com”><img src=”http://yoururl.com/image.jpg” /></a>
HTML Links – The target Attribute
<a href=”http://www.prajunkee.com” target=”_blank”>
This is a very important Attribute because it is telling the browser how to open the link. You want your readers to stay on your page when clicking an outside link, so you want to utilize the target attribute of _blank.
Here are the different target attributes:
_blank = Loads in a new window
_self = Loads in the same frame as it was clicked (when using frames, which is outdated way of designing a page)
_top = Loads in the full body of the window it was clicked in
_parent = Loads in the parent frameset (when using frames, which is outdated way of designing a page)
HTML Links – The name Attribute
<a name=”authors”>Reviews By Author</a>
This is how some bloggers have a menu at the top of their posts with internal links that take them to different spots in that post. Very useful if you have a HUGE post with lots of information or a glossary. You would put an anchor or your header “Reviews By Author” with the name of “authors” and then at the top of the post you would link to it:
<a href=”#authors”>Reviews By Author</a>
You use the name, and precede it with a # which is telling the browser to look within the current page. You should never have the same name twice. And if you want to link to an ANCHOR within another page — say you want your Review Policy & Contest policy on one page, but want a different link in your menu system, you would simply precede it with the page link:
<a href=”http://www.parajunkee.com/review.html#authors”>Reviews By Author</a>
Colors
Welcome to the world of hexadecimal notations or HEX for short. HEX is the combination of RGB values (red green blue) in a code that your browser will understand.
The lowest value is 0, (HEX 00) the highest value is 255 (HEX FF). It is specified in HEX by 3 pairs of two-digit numbers that start with a # sign. Repeating pairs can be shortened now to a three digit, for example:
#000000 = Black = rgb(0,0,0) = #000
#FFFFFF = White = rgb(255,255,255) = #FFF
It can be confusing, but it is recommended that you take a look at a site with all (or most) the HEX numbers listed, like: http://cloford.com/resources/colours/500col.htm
List Time
Bullets and Numbers, there are two types of list that do this. One is called an ordered list and the other is called an unordered list.
Bullets = unordered
Numbers = order
Unordered = <ul> </ul>
Ordered = <ol> </ol>
These tags just tell your browser that you are about to start a list and what kind of list it is, but you also have to tell the browser what list items you want in this particular list.
List Item = <li> </li>
So the list will look like this:
<ul>Types of Lists
<li>Ordered Lists</li>
<li>Unordered Lists</li>
</ul>
- An Ordered List
- Is in Order…1. 2. 3
- Their is hierarchy…1 must go before
- 2 and so forth…
- An Unordered List
- Is not in any order…
- Your Bullets can go in any order
See how I closed it right after the last list item? If you don’t close your lists, your next paragraph will be directly behind your last list item.
There is also what they call a Definition List and it is set up a little differently, you now have the tag <dl> that defines the list and the item <dt> with it’s definition <dd>:
<dl>
<dt>Definition</dt>
<dd>- a statement expressing the essential nature of something</dd>
</dl>
It will look similar to this:
- Definition
- - a statement expressing the essential nature of something
- Do we now feel smarter? You should. I highly recommend if you are interested in coding HTML to learn the basics and then purchase a WYSIWYG program like Adobe Dreamweaver. Programs like that are your assistants. They fill in the blank and you can use them as a guide as you code. Good luck!
Reader Question of the Week:
I think an NDA is a potentially good idea. Not as a legality issue, but more of an understanding between both parties so they know this is REAL. Especially inexperienced parties that don’t technically do this for a living…yet. A reminder that what I have within my possession is someone’s work and if it gets out it has the ability to put a major crimp in the publishing process. For example…Midnight Sun by Stephanie Meyer. Maybe your friend is trying to protect himself…especially since this is his first time. He probably looked around on the web and saw someone posting about getting Beta Readers to sign NDAs. I myself have never signed an NDA from an author or publisher. I have been told…DON’T LEAK THIS ON YOUR BLOG…or else. But, I find that protecting my reputation is a lot more motivating then any legal contract. But, I wouldn’t have a problem signing one, since I never have the intention of passing around, or leaking information that isn’t ready to be leaked. I wouldn’t think anything of it. Maybe ask your friend where he got the idea to do the NDA. It might explain his reasoning.
Book Blogging News:
Sketchy Covers & Flattery
Last week I was searching NetGalley and I cam upon a book called SKETCHY. The cover stopped me in my tracks. Not because it was awesome, but because I thought it might be book three of the ASHES trilogy. But, it wasn’t. It was just a cover that looked very similar to Ilsa Bick’s masterpiece ASHES trilogy covers. So, I posted about it on Facebook. I didn’t want it to be a big deal…just a check out this cover comparison type of post. Here is the Facebook post. I didn’t expect the reaction that the post received, Bick’s fans seemed angered by the imitation cover and even Bick herself joined in on the conversation. The reason I’m mentioning it here, is because of the wonderful post that Ilsa Bick did about the covers. I thought it was a wonderful way to handle things…check it out here.
Why you should always ask permission…
Last week we also discussed passing around ARCs and just a few days later relations between Indies & Book Bloggers were tested yet again. A Book Blogger decided she would offer her eBook copy that was sent to her for review to another Writer/Blogger. It was obvious that the Book Blogger knew this was wrong, because she stated in her offering “it has to be on the down low”. Well it wasn’t kept on the down low, in fact the person she offered the eBook to went and spilled the beans…the result was a tagged (Aurora linked to Laura’s facebook friend page) Facebook post by writer/blogger Aurora Martinez, that had the screen shot of the offering:
I’m sure it immediately resulted in Laura being inundated with threats and mean comments, which was the intention of such a very inflammatory post. “I am not trying to cause and uproar” is quite unbelievable since it was directly linked to Laura’s account to promote retaliatory behavior and “someone has stolen some ARCs” implies malicious and devious behavior…stolen ARCs? That makes me think of someone in a black cat suit pilfering in your safe and taking your ARCs.
The blogger in question, Laura immediately jumped in on the conversation and wrote an apology letter (which has since been removed – but her comments are still up), saying she knew she was in the wrong and regrets it…but she isn’t a pirate. Which she isn’t. I’m not defending what she did, she shouldn’t have offered the eBook, but I also don’t think the other blogger/writer should have come out with that someone stole ARCs and is a pirate. Then call in the question trust of Book Bloggers and Reviewers. Then in comments claimed that Laura was bullying people…and sending others to bully the whistle blower Gail on goodreads (I saw one negative review on goodreads) Like we need anymore insanity in the relationships between Indies and Book Bloggers. This is a very unfortunate event that his been blown WAY out of proportion. It will only result in more distrust between Indies and Book Bloggers — it is something that should have been handled in private. I’m unfortunately of the opinion that again something that should have been handled internally was intentionally blown out of proportion to try and attract attention. Shame on Laura for trying to pass on the eBook without the author’s permission, but she did good with coming back with an apology. She probably should have just apologized and then stepped away. And Shame on Aurora for making a Mountain out of a Molehill the girl apologized, if someone was bullying I would ask her to look in a mirror, because this had CRUSADE written all over it. For some reason she wanted to see Laura get flayed…and even as Laura apologized she gave no slack. I think like anything else…we have to look at the intensions of the post.
What did we learn from this interaction?
- ALWAYS ask the author if you have permission to pass on their ARC.
Happy Thursday. Talk Less. Read More. Blog with Integrity.
Have a question? Fill out the form by clicking on the button to the left. This will go into a spreadsheet to be looked over at a later date and hopefully answered on this blog. This is completely anonymous, you do not have to leave your real name. Urls will not be included in your question unless it pertains to the question.
Latest posts by Parajunkee (see all)
- Blogging 101 Presentation – May 23, 2013
- Gag Worthy Cliches – May 22, 2013
- Audiobook Review: The Program – May 21, 2013
- The Testing by Joelle Charbonneau – May 20, 2013
- Feature & Follow #149 – May 16, 2013
- Ten Tips for New Bloggers – May 16, 2013
- The Adventures of Evil Book Blogger Ep. 1 – May 15, 2013
- PJV News: Hot Books Releasing Today – May 14, 2013
- Breath by Jackie Morse Kessler – May 13, 2013
- Feature & Follow #148 – May 9, 2013
I am loving these posts. Thank you … bunches!
Thank you for commenting!
Whoa crazy tale.
Yes. I agree.
I love the HTML coding posts. While I knew much of it I had no idea about the code – oh my gosh I think I’m going to have to use that. Or the _top, _parent, etc. I only knew about the _blank, etc. Very cool.
And so that’s how the stuff works. I always wondered. Very awesome TY for sharing your knowledge/wisdom. Everyone should read these posts!
And I loved author Ilsa J. Bick’s post. Of course that brought up a whole other question for me….
I did not know about this drama. It is really so sad. Both parties seem to be in the wrong but there’s no need for it to have been escalated to such a level given this climate we seem to have been in since late 2011(?).
I think if an indie author is sending their work out to a blogger they should have some kind of disclaimer in their email. While it might not stop anyone who is truly a pirate, it might put enough fear into those bloggers who are “on the fence” about passing along a book to “a close friend.” Perhaps that could help.
But that whole incident really does make it that much less inviting to want to take the risk of dealing with one another – indie authors and bloggers alike.
*Sigh.* With all this drama why do we do this again? Oh yeah, we love books! Must remember. Keep that focus.
Thanks for another awesome post!
I think that is a great idea Rachel – to have that disclaimer in their email — or that NDA like the question, which I thought was a good one to pair with this.
Both would totally work. I know people are wary of signing NDAs but they’re good to make things feel “official” and they can be simple and straightforward. People don’t have to actually sign either, they can just click a box to serve as a digital signature of some kind.
And oh my gosh my follow up reply didn’t post earlier. I was just gushing about all your coding and clearly I turned my comment into a link. I first was talking about how I didn’t know about the hr code which just turned into a horizontal line in my post, LOL. Then I was excited about the a name bc I didn’t know how that worked in the past and didn’t even know what to search on google. Clearly that turned pink. Much like my face for being half asleep and posting this comment without thinking that comments can accept some HTML.
Thanks for all the HTML lessons!! That is one crazy story. I agree that it should have been handled in private and the whole thing was way blown out of proportion.
It’s just really awkward…I feel sorry for everyone involved. And I don’t know what the book was — was it even the girl that called it out?
I was wondering that too. It was never made clear by either part.
Great HTML info! That’s something I’m constantly trying to learn and improve on. One problem I keep having is with colored boxes. I have the code for them and if it’s just a paragraph or something, I can do it without any drama, but when I try to put a box around, say, a conversation which has lots of line breaks, it always ends up in two or three subsequent boxes. I can’t figure out how to get it all in one unless I leave the conversation as one, run-together paragraph. Suggestions?
You have to watch this, blogger and wp will end your divs — or start them over again, if you don’t tag them correctly. I would suggest using paragraph tags — and then going back in and “wrapping” them with a div that has a background color.
Oh I really hate mountain out of a molehill situations! I’ve had situations where a commentor disagreed with how something was phrased, we tried to clear it up, and they still went on a rampage, bringing the authors in and etc, all while we were still calmly trying to explain the mix-up and had long-since rephrased the paragraph. These people just want to draw attention to themselves and feel like they’ve done a good thing. It’s like saying ‘No offense, but you’re ugly.’ Just because you said no offense, doesn’t mean you’ve excused yourself from being mean.
Exactly — and unfortunately a few people have subscribed to the even bad press is good press mantra – and have discovered that making a name for yourself is a lot easier if you surround yourself with drama.
I like using this site to convert color codes from HTML to HEX. If you know the HTML code for the color, just enter it and it will give you the HEX equivalent.
Regarding ‘passing along an eARC’ to another book blogger – this is why I will ask the author/publicist/publisher to email the eARC directly to my associate reviewer. I want them to know that it’s going directly to the person who will be reading and reviewing the book and not me passing it along to who only knows who. If I’m not reading/reviewing the book, I don’t want to see it. There’s a fine line between an author and reviewer as far as trust goes and it’s a frail line at that.
I love you so much for posting this! Thank you!!!
Whoa, there is quite a lot of mud-slinging going on. I don’t think that Aurora should of posted that crap on Facebook. What I would of done was sent the author an email with the SS and tell Laura that it really isn’t cool to do that with ARCs. Unless there is proof that this is a reoccurring issue, the public shouldn’t be involved.
Shoot, I had my RL friend ask me about an ARC I had on my Kindle. I told her she could borrow my Kindle to take a peek, but I couldn’t give her a copy. She ended up buying it soon after. She should of waited until I finished and reviewed it….cause this particular book sucked.
You should never use the tag unless its meta data or super important searchable stuff. I use or below.
As far as the ebook thing, that is DEFINITELY pirating. You don’t pass on e-ARCs. The author didn’t need to call out the blogger and a publisher would have handled this differently but make no mistake, they would handle it.
I’m glad to see someone else doing HTML for bloggers.
Thank you for the HTML info! My question about the Header tags is how you set what each header tag translates to (like the font and size, etc.).
I seriously hear about all the blogging drama here first. I’m forever on Twitter and Facebook, yet never catch wind of any of these things. *sigh* I think you pretty much said it right. Shame on both people for how things went about and “got handled” more or less just blew things out of proportions. Was it wrong? Yepp. But, like you said, could have been handled internally.
Ana♥
Your brain full of code amazes me – I got a headache about halfway down the page…
Me too Patti.
This has been really helpful. Especially the part about the name attributes. My knowledge of html only extends to the stuff you were talking about in Part 1. To be honest though, I didn’t read the whole post. I already had a hard time understanding and wrapping my head around the name attributes. I have to make sure I know that part before I progress. Thanks
This is definitely a post I need to bookmark! I keep learning tiny little things that help me a bit. Its still over my head, but I can work at it.
That mountain out of molehill thing sounds ridiculous. It could have been handled privately. Its still a good reminder. I would never pass one on without permission but I have been stressing about this with blog tours. Authors send me the different ebook formats to provide to reviewers and I remind the reviewers its for them ONLY. But maybe we need to start having people actually click to agree to terms or something. I don’t know, but I don’t want to feel responsible if a reviewer I picked does pirate it or just share it with others. Gonna think on this one a bit…
Thanks for answering my question! I did ask him about why he was doing the NDA, and he gave me some long winded leagalieze answer … honestly I stopped listening. :-p It meant that much to him, so I signed it. I just thought it odd that was the first I had seen.
Rachael, you have such a nice way with words! You are super duper awesome for the content that you write and your advice is always helpful!
Oh, this HTML post is so helpful! Especially the Name Attribute, I’ve been wanting to consolidate my policy posts for some time and didn’t know how to incorporate that code. Thanks!
Regarding the new drama….such a shame. The author says in the comments: “Aurora Martinez: I know Michelle but my soon-to be 99 cent book is the only thing between me and being homeless.” Are you kidding me? This is why she’s mad Laura shared her book? I really call BS here, sounds like a pathetic attempt at getting noticed to me (I also have a hard time believing a $1 book is going to save someone from being homeless -unless her name is secretly Amanda Hocking or something).
Oh and those two book covers? Nah, I didn’t think they were that much alike really. Other than being vertical font and a mask….but that’s been done before.